sass-atoms

a flexible kit for designing and materializing atomic utility classes, as a base for a sass/css framework.

why?

The motivation behind any SASS/CSS framework is to eliminate the paradox of choice in styling, and allow a team to put together a consistent, high-quality UI with less effort. However, a common problem with many CSS frameworks today is that they are too limited. Frequently, design systems need to be modified and extended in non-standard ways due to a lack flexibilty in the base of the framework:

• "I need an xxl breakpoint, but framework X only supports sm -> xl"
• "How do I add a custom font family to framework X?"

sass-atoms addresses this by adding a large number of well-designed 'atoms' (utility classes) that you can use to customize an existing framework, or use as a foundation when creating your own components.

how to use it

Install the sass-atoms package via npm, and your sass code add @import 'sass-atoms/index.scss';

sass-atoms, by default, creates no classes, so there is no size overhead to importing it in your code. All utility classes are generated as a sass placeholder classes (https://sass-lang.com/documentation/style-rules/placeholder-selectors).

When you want to use a utlilty class, you can extend it, like so:

  .banner {
    @extend
      %w-p12,
      %d-inline-block,
      %box-border,
      %p-2,
      %p-3--md,
      %p-4--lg,
    ;
  }

This banner will have a 100% width, an inline-block display, and different internal padding based on the current breakpoint.

When compiled, this resulting CSS for this banner component looks like:

  .banner {
    box-sizing: border-box;
  }

  .banner {
    display: inline-block;
  }

  .banner {
    padding: 1rem;
  }

  @media (min-width: 768px) {
    .banner:not(:root):not(:root) {
      padding: 1.5rem;
    }
  }

  @media (min-width: 992px) {
    .banner:not(:root):not(:root):not(:root) {
      padding: 2rem;
    }
  }

  .banner {
    width: 100%;
  }

Due to the way the @extend rule works, the result will be a number of small selectors rather than a single large one, but the resulting CSS is still performant and highly compressible.

If you want to add options to this banner, you can do so by materializing the utility placeholders as real classes for the banner, like so:

  .banner {
    @extend
      %w-p12,
      %d-inline-block,
      %box-border,
      %p-2,
      %p-3--md,
      %p-4--lg,
    ;
  }

  $background-options: (
    'bg-primary-100',
    'bg-primary-900',
    'bg-secondary-100',
    'bg-secondary-900',
  );

  // use the `materialize` mixin to generate real classes from placeholders
  // the second argument is a selector to prefix to the class, to add specificity
  @include materialize($background-options, '.banner');

The resulting CSS looks like this:

.banner.bg-primary-100 {
  background-color: #E0E7FF;
}

.banner.bg-primary-900 {
  background-color: #312E81;
}

.banner.bg-secondary-100 {
  background-color: #DBEAFE;
}

.banner.bg-secondary-900 {
  background-color: #1E3A8A;
}

.banner {
  box-sizing: border-box;
}

.banner {
  display: inline-block;
} 

.banner {
  padding: 1rem;
}

@media (min-width: 768px) {
  .banner:not(:root):not(:root) {
    padding: 1.5rem;
  }
}

@media (min-width: 992px) {
  .banner:not(:root):not(:root):not(:root) {
    padding: 2rem;
  }
}

.banner {
  width: 100%;
}

The materialize mixin also accepts a map, if you want to alias certain utility classes:

  .banner {
    @extend
      %w-p12,
      %d-inline-block,
      %box-border,
      %p-2,
      %p-3--md,
      %p-4--lg,
    ;
  }

  $background-options: (
    'bg-primary-light': 'bg-primary-100',
    'bg-primary-dark': 'bg-primary-900',
    'bg-secondary-light': 'bg-secondary-100',
    'bg-secondary-dark': 'bg-secondary-900',
  );

  // use the `materialize` mixin to generate real classes from placeholders
  // the second argument is a selector to prefix to the class, to add specificity
  @include materialize($background-options, '.banner');

Will compile to:

.banner.bg-primary-light {
  background-color: #E0E7FF;
}

.banner.bg-primary-dark {
  background-color: #312E81;
}

.banner.bg-secondary-light {
  background-color: #DBEAFE;
}

.banner.bg-secondary-dark {
  background-color: #1E3A8A;
}

.banner {
  box-sizing: border-box;
}

.banner {
  display: inline-block;
}

.banner {
  padding: 1rem;
}

@media (min-width: 768px) {
  .banner:not(:root):not(:root) {
    padding: 1.5rem;
  }
}

@media (min-width: 992px) {
  .banner:not(:root):not(:root):not(:root) {
    padding: 2rem;
  }
}

.banner {
  width: 100%;
}

You can also use this to add all default atoms to a class, but this will result in a larger output:

  .banner {
    @extend
      %w-p12,
      %d-inline-block,
      %box-border,
      %p-2,
      %p-3--md,
      %p-4--lg,
    ;
  }

  // use the `materialize` mixin to generate real classes from placeholders
  // the second argument is a selector to prefix to the class, to add specificity
  @include materialize($background-color-atoms, '.banner');

development mode

if you want to test the different classes without rebuilding your sass, sass-atoms ships with a dev css bundle that includes all utlity classes as materialized classes, so you can add them directly to your html. Just load the bundle sass-atoms/dev.css.

atoms reference

$align-content-atoms

align-content-start align-content-end align-content-center align-content-between align-content-around align-content-evenly

$align-content-atoms--breakpoints

align-content-start--sm align-content-start--md align-content-start--lg align-content-start--xl align-content-end--sm align-content-end--md align-content-end--lg align-content-end--xl align-content-center--sm align-content-center--md align-content-center--lg align-content-center--xl align-content-between--sm align-content-between--md align-content-between--lg align-content-between--xl align-content-around--sm align-content-around--md align-content-around--lg align-content-around--xl align-content-evenly--sm align-content-evenly--md align-content-evenly--lg align-content-evenly--xl

$align-content-atoms--states

align-content-start--active align-content-start--hover align-content-start--focus align-content-start--disabled align-content-start--enabled align-content-end--active align-content-end--hover align-content-end--focus align-content-end--disabled align-content-end--enabled align-content-center--active align-content-center--hover align-content-center--focus align-content-center--disabled align-content-center--enabled align-content-between--active align-content-between--hover align-content-between--focus align-content-between--disabled align-content-between--enabled align-content-around--active align-content-around--hover align-content-around--focus align-content-around--disabled align-content-around--enabled align-content-evenly--active align-content-evenly--hover align-content-evenly--focus align-content-evenly--disabled align-content-evenly--enabled

$align-items-atoms

align-items-start align-items-end align-items-center align-items-baseline align-items-stretch

$align-items-atoms--breakpoints

align-items-start--sm align-items-start--md align-items-start--lg align-items-start--xl align-items-end--sm align-items-end--md align-items-end--lg align-items-end--xl align-items-center--sm align-items-center--md align-items-center--lg align-items-center--xl align-items-baseline--sm align-items-baseline--md align-items-baseline--lg align-items-baseline--xl align-items-stretch--sm align-items-stretch--md align-items-stretch--lg align-items-stretch--xl

$align-items-atoms--states

align-items-start--active align-items-start--hover align-items-start--focus align-items-start--disabled align-items-start--enabled align-items-end--active align-items-end--hover align-items-end--focus align-items-end--disabled align-items-end--enabled align-items-center--active align-items-center--hover align-items-center--focus align-items-center--disabled align-items-center--enabled align-items-baseline--active align-items-baseline--hover align-items-baseline--focus align-items-baseline--disabled align-items-baseline--enabled align-items-stretch--active align-items-stretch--hover align-items-stretch--focus align-items-stretch--disabled align-items-stretch--enabled

$align-self-atoms

align-self-auto align-self-start align-self-end align-self-center align-self-stretch

$align-self-atoms--breakpoints

align-self-auto--sm align-self-auto--md align-self-auto--lg align-self-auto--xl align-self-start--sm align-self-start--md align-self-start--lg align-self-start--xl align-self-end--sm align-self-end--md align-self-end--lg align-self-end--xl align-self-center--sm align-self-center--md align-self-center--lg align-self-center--xl align-self-stretch--sm align-self-stretch--md align-self-stretch--lg align-self-stretch--xl

$align-self-atoms--states

align-self-auto--active align-self-auto--hover align-self-auto--focus align-self-auto--disabled align-self-auto--enabled align-self-start--active align-self-start--hover align-self-start--focus align-self-start--disabled align-self-start--enabled align-self-end--active align-self-end--hover align-self-end--focus align-self-end--disabled align-self-end--enabled align-self-center--active align-self-center--hover align-self-center--focus align-self-center--disabled align-self-center--enabled align-self-stretch--active align-self-stretch--hover align-self-stretch--focus align-self-stretch--disabled align-self-stretch--enabled

$background-clip-atoms

bg-clip-border bg-clip-padding bg-clip-content bg-clip-text

$background-clip-atoms--breakpoints

bg-clip-border--sm bg-clip-border--md bg-clip-border--lg bg-clip-border--xl bg-clip-padding--sm bg-clip-padding--md bg-clip-padding--lg bg-clip-padding--xl bg-clip-content--sm bg-clip-content--md bg-clip-content--lg bg-clip-content--xl bg-clip-text--sm bg-clip-text--md bg-clip-text--lg bg-clip-text--xl

$background-clip-atoms--states

bg-clip-border--active bg-clip-border--hover bg-clip-border--focus bg-clip-border--disabled bg-clip-border--enabled bg-clip-padding--active bg-clip-padding--hover bg-clip-padding--focus bg-clip-padding--disabled bg-clip-padding--enabled bg-clip-content--active bg-clip-content--hover bg-clip-content--focus bg-clip-content--disabled bg-clip-content--enabled bg-clip-text--active bg-clip-text--hover bg-clip-text--focus bg-clip-text--disabled bg-clip-text--enabled

$background-color-atoms

bg-primary-50 bg-primary-100 bg-primary-200 bg-primary-300 bg-primary-400 bg-primary-500 bg-primary-600 bg-primary-700 bg-primary-800 bg-primary-900 bg-secondary-50 bg-secondary-100 bg-secondary-200 bg-secondary-300 bg-secondary-400 bg-secondary-500 bg-secondary-600 bg-secondary-700 bg-secondary-800 bg-secondary-900 bg-link-50 bg-link-100 bg-link-200 bg-link-300 bg-link-400 bg-link-500 bg-link-600 bg-link-700 bg-link-800 bg-link-900 bg-muted-50 bg-muted-100 bg-muted-200 bg-muted-300 bg-muted-400 bg-muted-500 bg-muted-600 bg-muted-700 bg-muted-800 bg-muted-900 bg-success-50 bg-success-100 bg-success-200 bg-success-300 bg-success-400 bg-success-500 bg-success-600 bg-success-700 bg-success-800 bg-success-900 bg-warning-50 bg-warning-100 bg-warning-200 bg-warning-300 bg-warning-400 bg-warning-500 bg-warning-600 bg-warning-700 bg-warning-800 bg-warning-900 bg-error-50 bg-error-100 bg-error-200 bg-error-300 bg-error-400 bg-error-500 bg-error-600 bg-error-700 bg-error-800 bg-error-900 bg-gray-50 bg-gray-100 bg-gray-200 bg-gray-300 bg-gray-400 bg-gray-500 bg-gray-600 bg-gray-700 bg-gray-800 bg-gray-900

$background-color-atoms--breakpoints

bg-primary-50--sm bg-primary-50--md bg-primary-50--lg bg-primary-50--xl bg-primary-100--sm bg-primary-100--md bg-primary-100--lg bg-primary-100--xl bg-primary-200--sm bg-primary-200--md bg-primary-200--lg bg-primary-200--xl bg-primary-300--sm bg-primary-300--md bg-primary-300--lg bg-primary-300--xl bg-primary-400--sm bg-primary-400--md bg-primary-400--lg bg-primary-400--xl bg-primary-500--sm bg-primary-500--md bg-primary-500--lg bg-primary-500--xl bg-primary-600--sm bg-primary-600--md bg-primary-600--lg bg-primary-600--xl bg-primary-700--sm bg-primary-700--md bg-primary-700--lg bg-primary-700--xl bg-primary-800--sm bg-primary-800--md bg-primary-800--lg bg-primary-800--xl bg-primary-900--sm bg-primary-900--md bg-primary-900--lg bg-primary-900--xl bg-secondary-50--sm bg-secondary-50--md bg-secondary-50--lg bg-secondary-50--xl bg-secondary-100--sm bg-secondary-100--md bg-secondary-100--lg bg-secondary-100--xl bg-secondary-200--sm bg-secondary-200--md bg-secondary-200--lg bg-secondary-200--xl bg-secondary-300--sm bg-secondary-300--md bg-secondary-300--lg bg-secondary-300--xl bg-secondary-400--sm bg-secondary-400--md bg-secondary-400--lg bg-secondary-400--xl bg-secondary-500--sm bg-secondary-500--md bg-secondary-500--lg bg-secondary-500--xl bg-secondary-600--sm bg-secondary-600--md bg-secondary-600--lg bg-secondary-600--xl bg-secondary-700--sm bg-secondary-700--md bg-secondary-700--lg bg-secondary-700--xl bg-secondary-800--sm bg-secondary-800--md bg-secondary-800--lg bg-secondary-800--xl bg-secondary-900--sm bg-secondary-900--md bg-secondary-900--lg bg-secondary-900--xl bg-link-50--sm bg-link-50--md bg-link-50--lg bg-link-50--xl bg-link-100--sm bg-link-100--md bg-link-100--lg bg-link-100--xl bg-link-200--sm bg-link-200--md bg-link-200--lg bg-link-200--xl bg-link-300--sm bg-link-300--md bg-link-300--lg bg-link-300--xl bg-link-400--sm bg-link-400--md bg-link-400--lg bg-link-400--xl bg-link-500--sm bg-link-500--md bg-link-500--lg bg-link-500--xl bg-link-600--sm bg-link-600--md bg-link-600--lg bg-link-600--xl bg-link-700--sm bg-link-700--md bg-link-700--lg bg-link-700--xl bg-link-800--sm bg-link-800--md bg-link-800--lg bg-link-800--xl bg-link-900--sm bg-link-900--md bg-link-900--lg bg-link-900--xl bg-muted-50--sm bg-muted-50--md bg-muted-50--lg bg-muted-50--xl bg-muted-100--sm bg-muted-100--md bg-muted-100--lg bg-muted-100--xl bg-muted-200--sm bg-muted-200--md bg-muted-200--lg bg-muted-200--xl bg-muted-300--sm bg-muted-300--md bg-muted-300--lg bg-muted-300--xl bg-muted-400--sm bg-muted-400--md bg-muted-400--lg bg-muted-400--xl bg-muted-500--sm bg-muted-500--md bg-muted-500--lg bg-muted-500--xl bg-muted-600--sm bg-muted-600--md bg-muted-600--lg bg-muted-600--xl bg-muted-700--sm bg-muted-700--md bg-muted-700--lg bg-muted-700--xl bg-muted-800--sm bg-muted-800--md bg-muted-800--lg bg-muted-800--xl bg-muted-900--sm bg-muted-900--md bg-muted-900--lg bg-muted-900--xl bg-success-50--sm bg-success-50--md bg-success-50--lg bg-success-50--xl bg-success-100--sm bg-success-100--md bg-success-100--lg bg-success-100--xl bg-success-200--sm bg-success-200--md bg-success-200--lg bg-success-200--xl bg-success-300--sm bg-success-300--md bg-success-300--lg bg-success-300--xl bg-success-400--sm bg-success-400--md bg-success-400--lg bg-success-400--xl bg-success-500--sm bg-success-500--md bg-success-500--lg bg-success-500--xl bg-success-600--sm bg-success-600--md bg-success-600--lg bg-success-600--xl bg-success-700--sm bg-success-700--md bg-success-700--lg bg-success-700--xl bg-success-800--sm bg-success-800--md bg-success-800--lg bg-success-800--xl bg-success-900--sm bg-success-900--md bg-success-900--lg bg-success-900--xl bg-warning-50--sm bg-warning-50--md bg-warning-50--lg bg-warning-50--xl bg-warning-100--sm bg-warning-100--md bg-warning-100--lg bg-warning-100--xl bg-warning-200--sm bg-warning-200--md bg-warning-200--lg bg-warning-200--xl bg-warning-300--sm bg-warning-300--md bg-warning-300--lg bg-warning-300--xl bg-warning-400--sm bg-warning-400--md bg-warning-400--lg bg-warning-400--xl bg-warning-500--sm bg-warning-500--md bg-warning-500--lg bg-warning-500--xl bg-warning-600--sm bg-warning-600--md bg-warning-600--lg bg-warning-600--xl bg-warning-700--sm bg-warning-700--md bg-warning-700--lg bg-warning-700--xl bg-warning-800--sm bg-warning-800--md bg-warning-800--lg bg-warning-800--xl bg-warning-900--sm bg-warning-900--md bg-warning-900--lg bg-warning-900--xl bg-error-50--sm bg-error-50--md bg-error-50--lg bg-error-50--xl bg-error-100--sm bg-error-100--md bg-error-100--lg bg-error-100--xl bg-error-200--sm bg-error-200--md bg-error-200--lg bg-error-200--xl bg-error-300--sm bg-error-300--md bg-error-300--lg bg-error-300--xl bg-error-400--sm bg-error-400--md bg-error-400--lg bg-error-400--xl bg-error-500--sm bg-error-500--md bg-error-500--lg bg-error-500--xl bg-error-600--sm bg-error-600--md bg-error-600--lg bg-error-600--xl bg-error-700--sm bg-error-700--md bg-error-700--lg bg-error-700--xl bg-error-800--sm bg-error-800--md bg-error-800--lg bg-error-800--xl bg-error-900--sm bg-error-900--md bg-error-900--lg bg-error-900--xl bg-gray-50--sm bg-gray-50--md bg-gray-50--lg bg-gray-50--xl bg-gray-100--sm bg-gray-100--md bg-gray-100--lg bg-gray-100--xl bg-gray-200--sm bg-gray-200--md bg-gray-200--lg bg-gray-200--xl bg-gray-300--sm bg-gray-300--md bg-gray-300--lg bg-gray-300--xl bg-gray-400--sm bg-gray-400--md bg-gray-400--lg bg-gray-400--xl bg-gray-500--sm bg-gray-500--md bg-gray-500--lg bg-gray-500--xl bg-gray-600--sm bg-gray-600--md bg-gray-600--lg bg-gray-600--xl bg-gray-700--sm bg-gray-700--md bg-gray-700--lg bg-gray-700--xl bg-gray-800--sm bg-gray-800--md bg-gray-800--lg bg-gray-800--xl bg-gray-900--sm bg-gray-900--md bg-gray-900--lg bg-gray-900--xl

$background-color-atoms--states

bg-primary-50--active bg-primary-50--hover bg-primary-50--focus bg-primary-50--disabled bg-primary-50--enabled bg-primary-100--active bg-primary-100--hover bg-primary-100--focus bg-primary-100--disabled bg-primary-100--enabled bg-primary-200--active bg-primary-200--hover bg-primary-200--focus bg-primary-200--disabled bg-primary-200--enabled bg-primary-300--active bg-primary-300--hover bg-primary-300--focus bg-primary-300--disabled bg-primary-300--enabled bg-primary-400--active bg-primary-400--hover bg-primary-400--focus bg-primary-400--disabled bg-primary-400--enabled bg-primary-500--active bg-primary-500--hover bg-primary-500--focus bg-primary-500--disabled bg-primary-500--enabled bg-primary-600--active bg-primary-600--hover bg-primary-600--focus bg-primary-600--disabled bg-primary-600--enabled bg-primary-700--active bg-primary-700--hover bg-primary-700--focus bg-primary-700--disabled bg-primary-700--enabled bg-primary-800--active bg-primary-800--hover bg-primary-800--focus bg-primary-800--disabled bg-primary-800--enabled bg-primary-900--active bg-primary-900--hover bg-primary-900--focus bg-primary-900--disabled bg-primary-900--enabled bg-secondary-50--active bg-secondary-50--hover bg-secondary-50--focus bg-secondary-50--disabled bg-secondary-50--enabled bg-secondary-100--active bg-secondary-100--hover bg-secondary-100--focus bg-secondary-100--disabled bg-secondary-100--enabled bg-secondary-200--active bg-secondary-200--hover bg-secondary-200--focus bg-secondary-200--disabled bg-secondary-200--enabled bg-secondary-300--active bg-secondary-300--hover bg-secondary-300--focus bg-secondary-300--disabled bg-secondary-300--enabled bg-secondary-400--active bg-secondary-400--hover bg-secondary-400--focus bg-secondary-400--disabled bg-secondary-400--enabled bg-secondary-500--active bg-secondary-500--hover bg-secondary-500--focus bg-secondary-500--disabled bg-secondary-500--enabled bg-secondary-600--active bg-secondary-600--hover bg-secondary-600--focus bg-secondary-600--disabled bg-secondary-600--enabled bg-secondary-700--active bg-secondary-700--hover bg-secondary-700--focus bg-secondary-700--disabled bg-secondary-700--enabled bg-secondary-800--active bg-secondary-800--hover bg-secondary-800--focus bg-secondary-800--disabled bg-secondary-800--enabled bg-secondary-900--active bg-secondary-900--hover bg-secondary-900--focus bg-secondary-900--disabled bg-secondary-900--enabled bg-link-50--active bg-link-50--hover bg-link-50--focus bg-link-50--disabled bg-link-50--enabled bg-link-100--active bg-link-100--hover bg-link-100--focus bg-link-100--disabled bg-link-100--enabled bg-link-200--active bg-link-200--hover bg-link-200--focus bg-link-200--disabled bg-link-200--enabled bg-link-300--active bg-link-300--hover bg-link-300--focus bg-link-300--disabled bg-link-300--enabled bg-link-400--active bg-link-400--hover bg-link-400--focus bg-link-400--disabled bg-link-400--enabled bg-link-500--active bg-link-500--hover bg-link-500--focus bg-link-500--disabled bg-link-500--enabled bg-link-600--active bg-link-600--hover bg-link-600--focus bg-link-600--disabled bg-link-600--enabled bg-link-700--active bg-link-700--hover bg-link-700--focus bg-link-700--disabled bg-link-700--enabled bg-link-800--active bg-link-800--hover bg-link-800--focus bg-link-800--disabled bg-link-800--enabled bg-link-900--active bg-link-900--hover bg-link-900--focus bg-link-900--disabled bg-link-900--enabled bg-muted-50--active bg-muted-50--hover bg-muted-50--focus bg-muted-50--disabled bg-muted-50--enabled bg-muted-100--active bg-muted-100--hover bg-muted-100--focus bg-muted-100--disabled bg-muted-100--enabled bg-muted-200--active bg-muted-200--hover bg-muted-200--focus bg-muted-200--disabled bg-muted-200--enabled bg-muted-300--active bg-muted-300--hover bg-muted-300--focus bg-muted-300--disabled bg-muted-300--enabled bg-muted-400--active bg-muted-400--hover bg-muted-400--focus bg-muted-400--disabled bg-muted-400--enabled bg-muted-500--active bg-muted-500--hover bg-muted-500--focus bg-muted-500--disabled bg-muted-500--enabled bg-muted-600--active bg-muted-600--hover bg-muted-600--focus bg-muted-600--disabled bg-muted-600--enabled bg-muted-700--active bg-muted-700--hover bg-muted-700--focus bg-muted-700--disabled bg-muted-700--enabled bg-muted-800--active bg-muted-800--hover bg-muted-800--focus bg-muted-800--disabled bg-muted-800--enabled bg-muted-900--active bg-muted-900--hover bg-muted-900--focus bg-muted-900--disabled bg-muted-900--enabled bg-success-50--active bg-success-50--hover bg-success-50--focus bg-success-50--disabled bg-success-50--enabled bg-success-100--active bg-success-100--hover bg-success-100--focus bg-success-100--disabled bg-success-100--enabled bg-success-200--active bg-success-200--hover bg-success-200--focus bg-success-200--disabled bg-success-200--enabled bg-success-300--active bg-success-300--hover bg-success-300--focus bg-success-300--disabled bg-success-300--enabled bg-success-400--active bg-success-400--hover bg-success-400--focus bg-success-400--disabled bg-success-400--enabled bg-success-500--active bg-success-500--hover bg-success-500--focus bg-success-500--disabled bg-success-500--enabled bg-success-600--active bg-success-600--hover bg-success-600--focus bg-success-600--disabled bg-success-600--enabled bg-success-700--active bg-success-700--hover bg-success-700--focus bg-success-700--disabled bg-success-700--enabled bg-success-800--active bg-success-800--hover bg-success-800--focus bg-success-800--disabled bg-success-800--enabled bg-success-900--active bg-success-900--hover bg-success-900--focus bg-success-900--disabled bg-success-900--enabled bg-warning-50--active bg-warning-50--hover bg-warning-50--focus bg-warning-50--disabled bg-warning-50--enabled bg-warning-100--active bg-warning-100--hover bg-warning-100--focus bg-warning-100--disabled bg-warning-100--enabled bg-warning-200--active bg-warning-200--hover bg-warning-200--focus bg-warning-200--disabled bg-warning-200--enabled bg-warning-300--active bg-warning-300--hover bg-warning-300--focus bg-warning-300--disabled bg-warning-300--enabled bg-warning-400--active bg-warning-400--hover bg-warning-400--focus bg-warning-400--disabled bg-warning-400--enabled bg-warning-500--active bg-warning-500--hover bg-warning-500--focus bg-warning-500--disabled bg-warning-500--enabled bg-warning-600--active bg-warning-600--hover bg-warning-600--focus bg-warning-600--disabled bg-warning-600--enabled bg-warning-700--active bg-warning-700--hover bg-warning-700--focus bg-warning-700--disabled bg-warning-700--enabled bg-warning-800--active bg-warning-800--hover bg-warning-800--focus bg-warning-800--disabled bg-warning-800--enabled bg-warning-900--active bg-warning-900--hover bg-warning-900--focus bg-warning-900--disabled bg-warning-900--enabled bg-error-50--active bg-error-50--hover bg-error-50--focus bg-error-50--disabled bg-error-50--enabled bg-error-100--active bg-error-100--hover bg-error-100--focus bg-error-100--disabled bg-error-100--enabled bg-error-200--active bg-error-200--hover bg-error-200--focus bg-error-200--disabled bg-error-200--enabled bg-error-300--active bg-error-300--hover bg-error-300--focus bg-error-300--disabled bg-error-300--enabled bg-error-400--active bg-error-400--hover bg-error-400--focus bg-error-400--disabled bg-error-400--enabled bg-error-500--active bg-error-500--hover bg-error-500--focus bg-error-500--disabled bg-error-500--enabled bg-error-600--active bg-error-600--hover bg-error-600--focus bg-error-600--disabled bg-error-600--enabled bg-error-700--active bg-error-700--hover bg-error-700--focus bg-error-700--disabled bg-error-700--enabled bg-error-800--active bg-error-800--hover bg-error-800--focus bg-error-800--disabled bg-error-800--enabled bg-error-900--active bg-error-900--hover bg-error-900--focus bg-error-900--disabled bg-error-900--enabled bg-gray-50--active bg-gray-50--hover bg-gray-50--focus bg-gray-50--disabled bg-gray-50--enabled bg-gray-100--active bg-gray-100--hover bg-gray-100--focus bg-gray-100--disabled bg-gray-100--enabled bg-gray-200--active bg-gray-200--hover bg-gray-200--focus bg-gray-200--disabled bg-gray-200--enabled bg-gray-300--active bg-gray-300--hover bg-gray-300--focus bg-gray-300--disabled bg-gray-300--enabled bg-gray-400--active bg-gray-400--hover bg-gray-400--focus bg-gray-400--disabled bg-gray-400--enabled bg-gray-500--active bg-gray-500--hover bg-gray-500--focus bg-gray-500--disabled bg-gray-500--enabled bg-gray-600--active bg-gray-600--hover bg-gray-600--focus bg-gray-600--disabled bg-gray-600--enabled bg-gray-700--active bg-gray-700--hover bg-gray-700--focus bg-gray-700--disabled bg-gray-700--enabled bg-gray-800--active bg-gray-800--hover bg-gray-800--focus bg-gray-800--disabled bg-gray-800--enabled bg-gray-900--active bg-gray-900--hover bg-gray-900--focus bg-gray-900--disabled bg-gray-900--enabled

$background-position-atoms

bg-top-left bg-top bg-top-right bg-left bg-center bg-right bg-bottom-left bg-bottom bg-bottom-right

$background-position-atoms--breakpoints

bg-top-left--sm bg-top-left--md bg-top-left--lg bg-top-left--xl bg-top--sm bg-top--md bg-top--lg bg-top--xl bg-top-right--sm bg-top-right--md bg-top-right--lg bg-top-right--xl bg-left--sm bg-left--md bg-left--lg bg-left--xl bg-center--sm bg-center--md bg-center--lg bg-center--xl bg-right--sm bg-right--md bg-right--lg bg-right--xl bg-bottom-left--sm bg-bottom-left--md bg-bottom-left--lg bg-bottom-left--xl bg-bottom--sm bg-bottom--md bg-bottom--lg bg-bottom--xl bg-bottom-right--sm bg-bottom-right--md bg-bottom-right--lg bg-bottom-right--xl

$background-position-atoms--states

bg-top-left--active bg-top-left--hover bg-top-left--focus bg-top-left--disabled bg-top-left--enabled bg-top--active bg-top--hover bg-top--focus bg-top--disabled bg-top--enabled bg-top-right--active bg-top-right--hover bg-top-right--focus bg-top-right--disabled bg-top-right--enabled bg-left--active bg-left--hover bg-left--focus bg-left--disabled bg-left--enabled bg-center--active bg-center--hover bg-center--focus bg-center--disabled bg-center--enabled bg-right--active bg-right--hover bg-right--focus bg-right--disabled bg-right--enabled bg-bottom-left--active bg-bottom-left--hover bg-bottom-left--focus bg-bottom-left--disabled bg-bottom-left--enabled bg-bottom--active bg-bottom--hover bg-bottom--focus bg-bottom--disabled bg-bottom--enabled bg-bottom-right--active bg-bottom-right--hover bg-bottom-right--focus bg-bottom-right--disabled bg-bottom-right--enabled

$background-repeat-atoms

bg-repeat bg-no-repeat bg-repeat-x bg-repeat-y

$background-repeat-atoms--breakpoints

bg-repeat--sm bg-repeat--md bg-repeat--lg bg-repeat--xl bg-no-repeat--sm bg-no-repeat--md bg-no-repeat--lg bg-no-repeat--xl bg-repeat-x--sm bg-repeat-x--md bg-repeat-x--lg bg-repeat-x--xl bg-repeat-y--sm bg-repeat-y--md bg-repeat-y--lg bg-repeat-y--xl

$background-repeat-atoms--states

bg-repeat--active bg-repeat--hover bg-repeat--focus bg-repeat--disabled bg-repeat--enabled bg-no-repeat--active bg-no-repeat--hover bg-no-repeat--focus bg-no-repeat--disabled bg-no-repeat--enabled bg-repeat-x--active bg-repeat-x--hover bg-repeat-x--focus bg-repeat-x--disabled bg-repeat-x--enabled bg-repeat-y--active bg-repeat-y--hover bg-repeat-y--focus bg-repeat-y--disabled bg-repeat-y--enabled

$background-size-atoms

bg-auto bg-cover bg-contain

$background-size-atoms--breakpoints

bg-auto--sm bg-auto--md bg-auto--lg bg-auto--xl bg-cover--sm bg-cover--md bg-cover--lg bg-cover--xl bg-contain--sm bg-contain--md bg-contain--lg bg-contain--xl

$background-size-atoms--states

bg-auto--active bg-auto--hover bg-auto--focus bg-auto--disabled bg-auto--enabled bg-cover--active bg-cover--hover bg-cover--focus bg-cover--disabled bg-cover--enabled bg-contain--active bg-contain--hover bg-contain--focus bg-contain--disabled bg-contain--enabled

$border-color-atoms

border-primary-50 border-primary-100 border-primary-200 border-primary-300 border-primary-400 border-primary-500 border-primary-600 border-primary-700 border-primary-800 border-primary-900 border-secondary-50 border-secondary-100 border-secondary-200 border-secondary-300 border-secondary-400 border-secondary-500 border-secondary-600 border-secondary-700 border-secondary-800 border-secondary-900 border-link-50 border-link-100 border-link-200 border-link-300 border-link-400 border-link-500 border-link-600 border-link-700 border-link-800 border-link-900 border-muted-50 border-muted-100 border-muted-200 border-muted-300 border-muted-400 border-muted-500 border-muted-600 border-muted-700 border-muted-800 border-muted-900 border-success-50 border-success-100 border-success-200 border-success-300 border-success-400 border-success-500 border-success-600 border-success-700 border-success-800 border-success-900 border-warning-50 border-warning-100 border-warning-200 border-warning-300 border-warning-400 border-warning-500 border-warning-600 border-warning-700 border-warning-800 border-warning-900 border-error-50 border-error-100 border-error-200 border-error-300 border-error-400 border-error-500 border-error-600 border-error-700 border-error-800 border-error-900 border-gray-50 border-gray-100 border-gray-200 border-gray-300 border-gray-400 border-gray-500 border-gray-600 border-gray-700 border-gray-800 border-gray-900

$border-color-atoms--breakpoints

border-primary-50--sm border-primary-50--md border-primary-50--lg border-primary-50--xl border-primary-100--sm border-primary-100--md border-primary-100--lg border-primary-100--xl border-primary-200--sm border-primary-200--md border-primary-200--lg border-primary-200--xl border-primary-300--sm border-primary-300--md border-primary-300--lg border-primary-300--xl border-primary-400--sm border-primary-400--md border-primary-400--lg border-primary-400--xl border-primary-500--sm border-primary-500--md border-primary-500--lg border-primary-500--xl border-primary-600--sm border-primary-600--md border-primary-600--lg border-primary-600--xl border-primary-700--sm border-primary-700--md border-primary-700--lg border-primary-700--xl border-primary-800--sm border-primary-800--md border-primary-800--lg border-primary-800--xl border-primary-900--sm border-primary-900--md border-primary-900--lg border-primary-900--xl border-secondary-50--sm border-secondary-50--md border-secondary-50--lg border-secondary-50--xl border-secondary-100--sm border-secondary-100--md border-secondary-100--lg border-secondary-100--xl border-secondary-200--sm border-secondary-200--md border-secondary-200--lg border-secondary-200--xl border-secondary-300--sm border-secondary-300--md border-secondary-300--lg border-secondary-300--xl border-secondary-400--sm border-secondary-400--md border-secondary-400--lg border-secondary-400--xl border-secondary-500--sm border-secondary-500--md border-secondary-500--lg border-secondary-500--xl border-secondary-600--sm border-secondary-600--md border-secondary-600--lg border-secondary-600--xl border-secondary-700--sm border-secondary-700--md border-secondary-700--lg border-secondary-700--xl border-secondary-800--sm border-secondary-800--md border-secondary-800--lg border-secondary-800--xl border-secondary-900--sm border-secondary-900--md border-secondary-900--lg border-secondary-900--xl border-link-50--sm border-link-50--md border-link-50--lg border-link-50--xl border-link-100--sm border-link-100--md border-link-100--lg border-link-100--xl border-link-200--sm border-link-200--md border-link-200--lg border-link-200--xl border-link-300--sm border-link-300--md border-link-300--lg border-link-300--xl border-link-400--sm border-link-400--md border-link-400--lg border-link-400--xl border-link-500--sm border-link-500--md border-link-500--lg border-link-500--xl border-link-600--sm border-link-600--md border-link-600--lg border-link-600--xl border-link-700--sm border-link-700--md border-link-700--lg border-link-700--xl border-link-800--sm border-link-800--md border-link-800--lg border-link-800--xl border-link-900--sm border-link-900--md border-link-900--lg border-link-900--xl border-muted-50--sm border-muted-50--md border-muted-50--lg border-muted-50--xl border-muted-100--sm border-muted-100--md border-muted-100--lg border-muted-100--xl border-muted-200--sm border-muted-200--md border-muted-200--lg border-muted-200--xl border-muted-300--sm border-muted-300--md border-muted-300--lg border-muted-300--xl border-muted-400--sm border-muted-400--md border-muted-400--lg border-muted-400--xl border-muted-500--sm border-muted-500--md border-muted-500--lg border-muted-500--xl border-muted-600--sm border-muted-600--md border-muted-600--lg border-muted-600--xl border-muted-700--sm border-muted-700--md border-muted-700--lg border-muted-700--xl border-muted-800--sm border-muted-800--md border-muted-800--lg border-muted-800--xl border-muted-900--sm border-muted-900--md border-muted-900--lg border-muted-900--xl border-success-50--sm border-success-50--md border-success-50--lg border-success-50--xl border-success-100--sm border-success-100--md border-success-100--lg border-success-100--xl border-success-200--sm border-success-200--md border-success-200--lg border-success-200--xl border-success-300--sm border-success-300--md border-success-300--lg border-success-300--xl border-success-400--sm border-success-400--md border-success-400--lg border-success-400--xl border-success-500--sm border-success-500--md border-success-500--lg border-success-500--xl border-success-600--sm border-success-600--md border-success-600--lg border-success-600--xl border-success-700--sm border-success-700--md border-success-700--lg border-success-700--xl border-success-800--sm border-success-800--md border-success-800--lg border-success-800--xl border-success-900--sm border-success-900--md border-success-900--lg border-success-900--xl border-warning-50--sm border-warning-50--md border-warning-50--lg border-warning-50--xl border-warning-100--sm border-warning-100--md border-warning-100--lg border-warning-100--xl border-warning-200--sm border-warning-200--md border-warning-200--lg border-warning-200--xl border-warning-300--sm border-warning-300--md border-warning-300--lg border-warning-300--xl border-warning-400--sm border-warning-400--md border-warning-400--lg border-warning-400--xl border-warning-500--sm border-warning-500--md border-warning-500--lg border-warning-500--xl border-warning-600--sm border-warning-600--md border-warning-600--lg border-warning-600--xl border-warning-700--sm border-warning-700--md border-warning-700--lg border-warning-700--xl border-warning-800--sm border-warning-800--md border-warning-800--lg border-warning-800--xl border-warning-900--sm border-warning-900--md border-warning-900--lg border-warning-900--xl border-error-50--sm border-error-50--md border-error-50--lg border-error-50--xl border-error-100--sm border-error-100--md border-error-100--lg border-error-100--xl border-error-200--sm border-error-200--md border-error-200--lg border-error-200--xl border-error-300--sm border-error-300--md border-error-300--lg border-error-300--xl border-error-400--sm border-error-400--md border-error-400--lg border-error-400--xl border-error-500--sm border-error-500--md border-error-500--lg border-error-500--xl border-error-600--sm border-error-600--md border-error-600--lg border-error-600--xl border-error-700--sm border-error-700--md border-error-700--lg border-error-700--xl border-error-800--sm border-error-800--md border-error-800--lg border-error-800--xl border-error-900--sm border-error-900--md border-error-900--lg border-error-900--xl border-gray-50--sm border-gray-50--md border-gray-50--lg border-gray-50--xl border-gray-100--sm border-gray-100--md border-gray-100--lg border-gray-100--xl border-gray-200--sm border-gray-200--md border-gray-200--lg border-gray-200--xl border-gray-300--sm border-gray-300--md border-gray-300--lg border-gray-300--xl border-gray-400--sm border-gray-400--md border-gray-400--lg border-gray-400--xl border-gray-500--sm border-gray-500--md border-gray-500--lg border-gray-500--xl border-gray-600--sm border-gray-600--md border-gray-600--lg border-gray-600--xl border-gray-700--sm border-gray-700--md border-gray-700--lg border-gray-700--xl border-gray-800--sm border-gray-800--md border-gray-800--lg border-gray-800--xl border-gray-900--sm border-gray-900--md border-gray-900--lg border-gray-900--xl

$border-color-atoms--states

border-primary-50--active border-primary-50--hover border-primary-50--focus border-primary-50--disabled border-primary-50--enabled border-primary-100--active border-primary-100--hover border-primary-100--focus border-primary-100--disabled border-primary-100--enabled border-primary-200--active border-primary-200--hover border-primary-200--focus border-primary-200--disabled border-primary-200--enabled border-primary-300--active border-primary-300--hover border-primary-300--focus border-primary-300--disabled border-primary-300--enabled border-primary-400--active border-primary-400--hover border-primary-400--focus border-primary-400--disabled border-primary-400--enabled border-primary-500--active border-primary-500--hover border-primary-500--focus border-primary-500--disabled border-primary-500--enabled border-primary-600--active border-primary-600--hover border-primary-600--focus border-primary-600--disabled border-primary-600--enabled border-primary-700--active border-primary-700--hover border-primary-700--focus border-primary-700--disabled border-primary-700--enabled border-primary-800--active border-primary-800--hover border-primary-800--focus border-primary-800--disabled border-primary-800--enabled border-primary-900--active border-primary-900--hover border-primary-900--focus border-primary-900--disabled border-primary-900--enabled border-secondary-50--active border-secondary-50--hover border-secondary-50--focus border-secondary-50--disabled border-secondary-50--enabled border-secondary-100--active border-secondary-100--hover border-secondary-100--focus border-secondary-100--disabled border-secondary-100--enabled border-secondary-200--active border-secondary-200--hover border-secondary-200--focus border-secondary-200--disabled border-secondary-200--enabled border-secondary-300--active border-secondary-300--hover border-secondary-300--focus border-secondary-300--disabled border-secondary-300--enabled border-secondary-400--active border-secondary-400--hover border-secondary-400--focus border-secondary-400--disabled border-secondary-400--enabled border-secondary-500--active border-secondary-500--hover border-secondary-500--focus border-secondary-500--disabled border-secondary-500--enabled border-secondary-600--active border-secondary-600--hover border-secondary-600--focus border-secondary-600--disabled border-secondary-600--enabled border-secondary-700--active border-secondary-700--hover border-secondary-700--focus border-secondary-700--disabled border-secondary-700--enabled border-secondary-800--active border-secondary-800--hover border-secondary-800--focus border-secondary-800--disabled border-secondary-800--enabled border-secondary-900--active border-secondary-900--hover border-secondary-900--focus border-secondary-900--disabled border-secondary-900--enabled border-link-50--active border-link-50--hover border-link-50--focus border-link-50--disabled border-link-50--enabled border-link-100--active border-link-100--hover border-link-100--focus border-link-100--disabled border-link-100--enabled border-link-200--active border-link-200--hover border-link-200--focus border-link-200--disabled border-link-200--enabled border-link-300--active border-link-300--hover border-link-300--focus border-link-300--disabled border-link-300--enabled border-link-400--active border-link-400--hover border-link-400--focus border-link-400--disabled border-link-400--enabled border-link-500--active border-link-500--hover border-link-500--focus border-link-500--disabled border-link-500--enabled border-link-600--active border-link-600--hover border-link-600--focus border-link-600--disabled border-link-600--enabled border-link-700--active border-link-700--hover border-link-700--focus border-link-700--disabled border-link-700--enabled border-link-800--active border-link-800--hover border-link-800--focus border-link-800--disabled border-link-800--enabled border-link-900--active border-link-900--hover border-link-900--focus border-link-900--disabled border-link-900--enabled border-muted-50--active border-muted-50--hover border-muted-50--focus border-muted-50--disabled border-muted-50--enabled border-muted-100--active border-muted-100--hover border-muted-100--focus border-muted-100--disabled border-muted-100--enabled border-muted-200--active border-muted-200--hover border-muted-200--focus border-muted-200--disabled border-muted-200--enabled border-muted-300--active border-muted-300--hover border-muted-300--focus border-muted-300--disabled border-muted-300--enabled border-muted-400--active border-muted-400--hover border-muted-400--focus border-muted-400--disabled border-muted-400--enabled border-muted-500--active border-muted-500--hover border-muted-500--focus border-muted-500--disabled border-muted-500--enabled border-muted-600--active border-muted-600--hover border-muted-600--focus border-muted-600--disabled border-muted-600--enabled border-muted-700--active border-muted-700--hover border-muted-700--focus border-muted-700--disabled border-muted-700--enabled border-muted-800--active border-muted-800--hover border-muted-800--focus border-muted-800--disabled border-muted-800--enabled border-muted-900--active border-muted-900--hover border-muted-900--focus border-muted-900--disabled border-muted-900--enabled border-success-50--active border-success-50--hover border-success-50--focus border-success-50--disabled border-success-50--enabled border-success-100--active border-success-100--hover border-success-100--focus border-success-100--disabled border-success-100--enabled border-success-200--active border-success-200--hover border-success-200--focus border-success-200--disabled border-success-200--enabled border-success-300--active border-success-300--hover border-success-300--focus border-success-300--disabled border-success-300--enabled border-success-400--active border-success-400--hover border-success-400--focus border-success-400--disabled border-success-400--enabled border-success-500--active border-success-500--hover border-success-500--focus border-success-500--disabled border-success-500--enabled border-success-600--active border-success-600--hover border-success-600--focus border-success-600--disabled border-success-600--enabled border-success-700--active border-success-700--hover border-success-700--focus border-success-700--disabled border-success-700--enabled border-success-800--active border-success-800--hover border-success-800--focus border-success-800--disabled border-success-800--enabled border-success-900--active border-success-900--hover border-success-900--focus border-success-900--disabled border-success-900--enabled border-warning-50--active border-warning-50--hover border-warning-50--focus border-warning-50--disabled border-warning-50--enabled border-warning-100--active border-warning-100--hover border-warning-100--focus border-warning-100--disabled border-warning-100--enabled border-warning-200--active border-warning-200--hover border-warning-200--focus border-warning-200--disabled border-warning-200--enabled border-warning-300--active border-warning-300--hover border-warning-300--focus border-warning-300--disabled border-warning-300--enabled border-warning-400--active border-warning-400--hover border-warning-400--focus border-warning-400--disabled border-warning-400--enabled border-warning-500--active border-warning-500--hover border-warning-500--focus border-warning-500--disabled border-warning-500--enabled border-warning-600--active border-warning-600--hover border-warning-600--focus border-warning-600--disabled border-warning-600--enabled border-warning-700--active border-warning-700--hover border-warning-700--focus border-warning-700--disabled border-warning-700--enabled border-warning-800--active border-warning-800--hover border-warning-800--focus border-warning-800--disabled border-warning-800--enabled border-warning-900--active border-warning-900--hover border-warning-900--focus border-warning-900--disabled border-warning-900--enabled border-error-50--active border-error-50--hover border-error-50--focus border-error-50--disabled border-error-50--enabled border-error-100--active border-error-100--hover border-error-100--focus border-error-100--disabled border-error-100--enabled border-error-200--active border-error-200--hover border-error-200--focus border-error-200--disabled border-error-200--enabled border-error-300--active border-error-300--hover border-error-300--focus border-error-300--disabled border-error-300--enabled border-error-400--active border-error-400--hover border-error-400--focus border-error-400--disabled border-error-400--enabled border-error-500--active border-error-500--hover border-error-500--focus border-error-500--disabled border-error-500--enabled border-error-600--active border-error-600--hover border-error-600--focus border-error-600--disabled border-error-600--enabled border-error-700--active border-error-700--hover border-error-700--focus border-error-700--disabled border-error-700--enabled border-error-800--active border-error-800--hover border-error-800--focus border-error-800--disabled border-error-800--enabled border-error-900--active border-error-900--hover border-error-900--focus border-error-900--disabled border-error-900--enabled border-gray-50--active border-gray-50--hover border-gray-50--focus border-gray-50--disabled border-gray-50--enabled border-gray-100--active border-gray-100--hover border-gray-100--focus border-gray-100--disabled border-gray-100--enabled border-gray-200--active border-gray-200--hover border-gray-200--focus border-gray-200--disabled border-gray-200--enabled border-gray-300--active border-gray-300--hover border-gray-300--focus border-gray-300--disabled border-gray-300--enabled border-gray-400--active border-gray-400--hover border-gray-400--focus border-gray-400--disabled border-gray-400--enabled border-gray-500--active border-gray-500--hover border-gray-500--focus border-gray-500--disabled border-gray-500--enabled border-gray-600--active border-gray-600--hover border-gray-600--focus border-gray-600--disabled border-gray-600--enabled border-gray-700--active border-gray-700--hover border-gray-700--focus border-gray-700--disabled border-gray-700--enabled border-gray-800--active border-gray-800--hover border-gray-800--focus border-gray-800--disabled border-gray-800--enabled border-gray-900--active border-gray-900--hover border-gray-900--focus border-gray-900--disabled border-gray-900--enabled

$border-radius-atoms

round-0 round-1 round-2 round-3 round-4 round-5 round-6 round-full

$border-radius-atoms--breakpoints

round-0--sm round-0--md round-0--lg round-0--xl round-1--sm round-1--md round-1--lg round-1--xl round-2--sm round-2--md round-2--lg round-2--xl round-3--sm round-3--md round-3--lg round-3--xl round-4--sm round-4--md round-4--lg round-4--xl round-5--sm round-5--md round-5--lg round-5--xl round-6--sm round-6--md round-6--lg round-6--xl round-full--sm round-full--md round-full--lg round-full--xl

$border-radius-atoms--states

round-0--active round-0--hover round-0--focus round-0--disabled round-0--enabled round-1--active round-1--hover round-1--focus round-1--disabled round-1--enabled round-2--active round-2--hover round-2--focus round-2--disabled round-2--enabled round-3--active round-3--hover round-3--focus round-3--disabled round-3--enabled round-4--active round-4--hover round-4--focus round-4--disabled round-4--enabled round-5--active round-5--hover round-5--focus round-5--disabled round-5--enabled round-6--active round-6--hover round-6--focus round-6--disabled round-6--enabled round-full--active round-full--hover round-full--focus round-full--disabled round-full--enabled

$border-style-atoms

border-solid border-dashed border-dotted border-double border-none

$border-style-atoms--breakpoints

border-solid--sm border-solid--md border-solid--lg border-solid--xl border-dashed--sm border-dashed--md border-dashed--lg border-dashed--xl border-dotted--sm border-dotted--md border-dotted--lg border-dotted--xl border-double--sm border-double--md border-double--lg border-double--xl border-none--sm border-none--md border-none--lg border-none--xl

$border-style-atoms--states

border-solid--active border-solid--hover border-solid--focus border-solid--disabled border-solid--enabled border-dashed--active border-dashed--hover border-dashed--focus border-dashed--disabled border-dashed--enabled border-dotted--active border-dotted--hover border-dotted--focus border-dotted--disabled border-dotted--enabled border-double--active border-double--hover border-double--focus border-double--disabled border-double--enabled border-none--active border-none--hover border-none--focus border-none--disabled border-none--enabled

$border-width-atoms

border-0 border-1 border-2 border-3 border-4 border-5 border-6

$border-width-atoms--breakpoints

border-0--sm border-0--md border-0--lg border-0--xl border-1--sm border-1--md border-1--lg border-1--xl border-2--sm border-2--md border-2--lg border-2--xl border-3--sm border-3--md border-3--lg border-3--xl border-4--sm border-4--md border-4--lg border-4--xl border-5--sm border-5--md border-5--lg border-5--xl border-6--sm border-6--md border-6--lg border-6--xl

$border-width-atoms--states

border-0--active border-0--hover border-0--focus border-0--disabled border-0--enabled border-1--active border-1--hover border-1--focus border-1--disabled border-1--enabled border-2--active border-2--hover border-2--focus border-2--disabled border-2--enabled border-3--active border-3--hover border-3--focus border-3--disabled border-3--enabled border-4--active border-4--hover border-4--focus border-4--disabled border-4--enabled border-5--active border-5--hover border-5--focus border-5--disabled border-5--enabled border-6--active border-6--hover border-6--focus border-6--disabled border-6--enabled

$box-sizing-atoms

box-border box-content

$box-sizing-atoms--breakpoints

box-border--sm box-border--md box-border--lg box-border--xl box-content--sm box-content--md box-content--lg box-content--xl

$box-sizing-atoms--states

box-border--active box-border--hover box-border--focus box-border--disabled box-border--enabled box-content--active box-content--hover box-content--focus box-content--disabled box-content--enabled

$clear-atoms

clear-left clear-right clear-both clear-none

$clear-atoms--breakpoints

clear-left--sm clear-left--md clear-left--lg clear-left--xl clear-right--sm clear-right--md clear-right--lg clear-right--xl clear-both--sm clear-both--md clear-both--lg clear-both--xl clear-none--sm clear-none--md clear-none--lg clear-none--xl

$clear-atoms--states

clear-left--active clear-left--hover clear-left--focus clear-left--disabled clear-left--enabled clear-right--active clear-right--hover clear-right--focus clear-right--disabled clear-right--enabled clear-both--active clear-both--hover clear-both--focus clear-both--disabled clear-both--enabled clear-none--active clear-none--hover clear-none--focus clear-none--disabled clear-none--enabled

$display-atoms

d-block d-inline-block d-inline d-flex d-inline-flex d-table d-table-caption d-table-cell d-table-column d-table-column-group d-table-footer-group d-table-header-group d-table-row-group d-table-row d-flow-root d-grid d-inline-grid d-none

$display-atoms--breakpoints

d-block--sm d-block--md d-block--lg d-block--xl d-inline-block--sm d-inline-block--md d-inline-block--lg d-inline-block--xl d-inline--sm d-inline--md d-inline--lg d-inline--xl d-flex--sm d-flex--md d-flex--lg d-flex--xl d-inline-flex--sm d-inline-flex--md d-inline-flex--lg d-inline-flex--xl d-table--sm d-table--md d-table--lg d-table--xl d-table-caption--sm d-table-caption--md d-table-caption--lg d-table-caption--xl d-table-cell--sm d-table-cell--md d-table-cell--lg d-table-cell--xl d-table-column--sm d-table-column--md d-table-column--lg d-table-column--xl d-table-column-group--sm d-table-column-group--md d-table-column-group--lg d-table-column-group--xl d-table-footer-group--sm d-table-footer-group--md d-table-footer-group--lg d-table-footer-group--xl d-table-header-group--sm d-table-header-group--md d-table-header-group--lg d-table-header-group--xl d-table-row-group--sm d-table-row-group--md d-table-row-group--lg d-table-row-group--xl d-table-row--sm d-table-row--md d-table-row--lg d-table-row--xl d-flow-root--sm d-flow-root--md d-flow-root--lg d-flow-root--xl d-grid--sm d-grid--md d-grid--lg d-grid--xl d-inline-grid--sm d-inline-grid--md d-inline-grid--lg d-inline-grid--xl d-none--sm d-none--md d-none--lg d-none--xl

$display-atoms--states

d-block--active d-block--hover d-block--focus d-block--disabled d-block--enabled d-inline-block--active d-inline-block--hover d-inline-block--focus d-inline-block--disabled d-inline-block--enabled d-inline--active d-inline--hover d-inline--focus d-inline--disabled d-inline--enabled d-flex--active d-flex--hover d-flex--focus d-flex--disabled d-flex--enabled d-inline-flex--active d-inline-flex--hover d-inline-flex--focus d-inline-flex--disabled d-inline-flex--enabled d-table--active d-table--hover d-table--focus d-table--disabled d-table--enabled d-table-caption--active d-table-caption--hover d-table-caption--focus d-table-caption--disabled d-table-caption--enabled d-table-cell--active d-table-cell--hover d-table-cell--focus d-table-cell--disabled d-table-cell--enabled d-table-column--active d-table-column--hover d-table-column--focus d-table-column--disabled d-table-column--enabled d-table-column-group--active d-table-column-group--hover d-table-column-group--focus d-table-column-group--disabled d-table-column-group--enabled d-table-footer-group--active d-table-footer-group--hover d-table-footer-group--focus d-table-footer-group--disabled d-table-footer-group--enabled d-table-header-group--active d-table-header-group--hover d-table-header-group--focus d-table-header-group--disabled d-table-header-group--enabled d-table-row-group--active d-table-row-group--hover d-table-row-group--focus d-table-row-group--disabled d-table-row-group--enabled d-table-row--active d-table-row--hover d-table-row--focus d-table-row--disabled d-table-row--enabled d-flow-root--active d-flow-root--hover d-flow-root--focus d-flow-root--disabled d-flow-root--enabled d-grid--active d-grid--hover d-grid--focus d-grid--disabled d-grid--enabled d-inline-grid--active d-inline-grid--hover d-inline-grid--focus d-inline-grid--disabled d-inline-grid--enabled d-none--active d-none--hover d-none--focus d-none--disabled d-none--enabled

$flex-direction-atoms

flex-row flex-row-reverse flex-col flex-col-reverse

$flex-direction-atoms--breakpoints

flex-row--sm flex-row--md flex-row--lg flex-row--xl flex-row-reverse--sm flex-row-reverse--md flex-row-reverse--lg flex-row-reverse--xl flex-col--sm flex-col--md flex-col--lg flex-col--xl flex-col-reverse--sm flex-col-reverse--md flex-col-reverse--lg flex-col-reverse--xl

$flex-direction-atoms--states

flex-row--active flex-row--hover flex-row--focus flex-row--disabled flex-row--enabled flex-row-reverse--active flex-row-reverse--hover flex-row-reverse--focus flex-row-reverse--disabled flex-row-reverse--enabled flex-col--active flex-col--hover flex-col--focus flex-col--disabled flex-col--enabled flex-col-reverse--active flex-col-reverse--hover flex-col-reverse--focus flex-col-reverse--disabled flex-col-reverse--enabled

$flex-grow-atoms

flex-grow-0 flex-grow

$flex-grow-atoms--breakpoints

flex-grow-0--sm flex-grow-0--md flex-grow-0--lg flex-grow-0--xl flex-grow--sm flex-grow--md flex-grow--lg flex-grow--xl

$flex-grow-atoms--states

flex-grow-0--active flex-grow-0--hover flex-grow-0--focus flex-grow-0--disabled flex-grow-0--enabled flex-grow--active flex-grow--hover flex-grow--focus flex-grow--disabled flex-grow--enabled

$flex-shrink-atoms

flex-shrink-0 flex-shrink

$flex-shrink-atoms--breakpoints

flex-shrink-0--sm flex-shrink-0--md flex-shrink-0--lg flex-shrink-0--xl flex-shrink--sm flex-shrink--md flex-shrink--lg flex-shrink--xl

$flex-shrink-atoms--states

flex-shrink-0--active flex-shrink-0--hover flex-shrink-0--focus flex-shrink-0--disabled flex-shrink-0--enabled flex-shrink--active flex-shrink--hover flex-shrink--focus flex-shrink--disabled flex-shrink--enabled

$flex-wrap-atoms

flex-wrap flex-wrap-reverse flex-nowrap

$flex-wrap-atoms--breakpoints

flex-wrap--sm flex-wrap--md flex-wrap--lg flex-wrap--xl flex-wrap-reverse--sm flex-wrap-reverse--md flex-wrap-reverse--lg flex-wrap-reverse--xl flex-nowrap--sm flex-nowrap--md flex-nowrap--lg flex-nowrap--xl

$flex-wrap-atoms--states

flex-wrap--active flex-wrap--hover flex-wrap--focus flex-wrap--disabled flex-wrap--enabled flex-wrap-reverse--active flex-wrap-reverse--hover flex-wrap-reverse--focus flex-wrap-reverse--disabled flex-wrap-reverse--enabled flex-nowrap--active flex-nowrap--hover flex-nowrap--focus flex-nowrap--disabled flex-nowrap--enabled

$float-atoms

float-left float-right float-none

$float-atoms--breakpoints

float-left--sm float-left--md float-left--lg float-left--xl float-right--sm float-right--md float-right--lg float-right--xl float-none--sm float-none--md float-none--lg float-none--xl

$float-atoms--states

float-left--active float-left--hover float-left--focus float-left--disabled float-left--enabled float-right--active float-right--hover float-right--focus float-right--disabled float-right--enabled float-none--active float-none--hover float-none--focus float-none--disabled float-none--enabled

$font-family-atoms

font-sans font-serif font-mono

$font-family-atoms--breakpoints

font-sans--sm font-sans--md font-sans--lg font-sans--xl font-serif--sm font-serif--md font-serif--lg font-serif--xl font-mono--sm font-mono--md font-mono--lg font-mono--xl

$font-family-atoms--states

font-sans--active font-sans--hover font-sans--focus font-sans--disabled font-sans--enabled font-serif--active font-serif--hover font-serif--focus font-serif--disabled font-serif--enabled font-mono--active font-mono--hover font-mono--focus font-mono--disabled font-mono--enabled

$font-weight-atoms

font-100 font-200 font-300 font-400 font-500 font-600 font-700 font-800 font-900 font-thin font-light font-semilight font-normal font-medium font-semibold font-bold font-extrabold font-thick

$font-weight-atoms--breakpoints

font-100--sm font-100--md font-100--lg font-100--xl font-200--sm font-200--md font-200--lg font-200--xl font-300--sm font-300--md font-300--lg font-300--xl font-400--sm font-400--md font-400--lg font-400--xl font-500--sm font-500--md font-500--lg font-500--xl font-600--sm font-600--md font-600--lg font-600--xl font-700--sm font-700--md font-700--lg font-700--xl font-800--sm font-800--md font-800--lg font-800--xl font-900--sm font-900--md font-900--lg font-900--xl font-thin--sm font-thin--md font-thin--lg font-thin--xl font-light--sm font-light--md font-light--lg font-light--xl font-semilight--sm font-semilight--md font-semilight--lg font-semilight--xl font-normal--sm font-normal--md font-normal--lg font-normal--xl font-medium--sm font-medium--md font-medium--lg font-medium--xl font-semibold--sm font-semibold--md font-semibold--lg font-semibold--xl font-bold--sm font-bold--md font-bold--lg font-bold--xl font-extrabold--sm font-extrabold--md font-extrabold--lg font-extrabold--xl font-thick--sm font-thick--md font-thick--lg font-thick--xl

$font-weight-atoms--states

font-100--active font-100--hover font-100--focus font-100--disabled font-100--enabled font-200--active font-200--hover font-200--focus font-200--disabled font-200--enabled font-300--active font-300--hover font-300--focus font-300--disabled font-300--enabled font-400--active font-400--hover font-400--focus font-400--disabled font-400--enabled font-500--active font-500--hover font-500--focus font-500--disabled font-500--enabled font-600--active font-600--hover font-600--focus font-600--disabled font-600--enabled font-700--active font-700--hover font-700--focus font-700--disabled font-700--enabled font-800--active font-800--hover font-800--focus font-800--disabled font-800--enabled font-900--active font-900--hover font-900--focus font-900--disabled font-900--enabled font-thin--active font-thin--hover font-thin--focus font-thin--disabled font-thin--enabled font-light--active font-light--hover font-light--focus font-light--disabled font-light--enabled font-semilight--active font-semilight--hover font-semilight--focus font-semilight--disabled font-semilight--enabled font-normal--active font-normal--hover font-normal--focus font-normal--disabled font-normal--enabled font-medium--active font-medium--hover font-medium--focus font-medium--disabled font-medium--enabled font-semibold--active font-semibold--hover font-semibold--focus font-semibold--disabled font-semibold--enabled font-bold--active font-bold--hover font-bold--focus font-bold--disabled font-bold--enabled font-extrabold--active font-extrabold--hover font-extrabold--focus font-extrabold--disabled font-extrabold--enabled font-thick--active font-thick--hover font-thick--focus font-thick--disabled font-thick--enabled

$grid-columns-atoms

col-auto col-span-1 col-span-2 col-span-3 col-span-4 col-span-5 col-span-6 col-span-7 col-span-8 col-span-9 col-span-10 col-span-11 col-span-12 col-span-full

$grid-columns-atoms--breakpoints

col-auto--sm col-auto--md col-auto--lg col-auto--xl col-span-1--sm col-span-1--md col-span-1--lg col-span-1--xl col-span-2--sm col-span-2--md col-span-2--lg col-span-2--xl col-span-3--sm col-span-3--md col-span-3--lg col-span-3--xl col-span-4--sm col-span-4--md col-span-4--lg col-span-4--xl col-span-5--sm col-span-5--md col-span-5--lg col-span-5--xl col-span-6--sm col-span-6--md col-span-6--lg col-span-6--xl col-span-7--sm col-span-7--md col-span-7--lg col-span-7--xl col-span-8--sm col-span-8--md col-span-8--lg col-span-8--xl col-span-9--sm col-span-9--md col-span-9--lg col-span-9--xl col-span-10--sm col-span-10--md col-span-10--lg col-span-10--xl col-span-11--sm col-span-11--md col-span-11--lg col-span-11--xl col-span-12--sm col-span-12--md col-span-12--lg col-span-12--xl col-span-full--sm col-span-full--md col-span-full--lg col-span-full--xl

$grid-columns-atoms--states

`col-auto--active col-auto--hover col-auto--focus col-auto--disabled col-auto--enabled col-span-1--active col-span-1--hover col-span-1--focus col-span-1--disabled col-span-1--enabled col-span-2--active col-span-2--hover col-span-2--focus col-span-2--disabled col-span-2--enabled col-span-3--active col-span-3--hover col-span-3--focus col-span-3--disabled col-span-3--enabled col-span-4--active col-span-4--hover col-span-4--focus col-span-4--disabled col-span-4--enabled col-span-5--active col-span-5--hover col-span-5--focus col-span-5--disabled col-span-5--enabled col-span-6--active col-span-6--hover col-span-6--focus col-span-6--disabled col-span-6--enabled col-span-7--active col-span-7--hover col-span-7--focus col-span-7--disabled col-span-7--enabled col-span-8--active col-span-8--hover col-span-8--focus col-span-8--disabled col-span-8--enabled col-span-9--active col-span-9--hover col-span-9--focus col-span-9--disabled col-span-9--enabled col-span-10--active col-span-10--hover col-span-10--focus col-span-10--disabled col-span-10--enabled col-span-11--active col-span-11--hover col-span-11--focus col-span-11--disabled col-span-11--enab