@inkline/inkline/css/variables/index.css

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

:root {
  /**
   * Scale ratio variables
   */
  --scale-ratio-minor-second: 1.067;
  --scale-ratio-major-second: 1.125;
  --scale-ratio-minor-third: 1.2;
  --scale-ratio-major-third: 1.25;
  --scale-ratio-perfect-fourth: 1.333;
  --scale-ratio-augmented-fourth: 1.414;
  --scale-ratio-perfect-fifth: 1.5;
  --scale-ratio-golden: 1.618;
  --scale-ratio: var(--scale-ratio-minor-third);
  --scale-ratio-pow-1: var(--scale-ratio);
  --scale-ratio-pow-2: calc(var(--scale-ratio-pow-1) * var(--scale-ratio));
  --scale-ratio-pow-3: calc(var(--scale-ratio-pow-2) * var(--scale-ratio));
  --scale-ratio-pow-4: calc(var(--scale-ratio-pow-3) * var(--scale-ratio));
  --scale-ratio-pow-5: calc(var(--scale-ratio-pow-4) * var(--scale-ratio));
  --scale-ratio-pow-6: calc(var(--scale-ratio-pow-5) * var(--scale-ratio));
}

:root {
  /**
   * Size multiplier variable
   */
  --size-multiplier: 1;
  /**
   * Size percentage variables
   */
  --size-percentages-0: 0%;
  --size-percentages-25: 25%;
  --size-percentages-50: 50%;
  --size-percentages-75: 75%;
  --size-percentages-100: 100%;
  /**
   * Size multiplier variants variables
   */
  --size-multiplier-2xs: calc(var(--size-multiplier) / var(--scale-ratio-pow-3));
  --size-multiplier-xs: calc(var(--size-multiplier) / var(--scale-ratio-pow-2));
  --size-multiplier-sm: calc(var(--size-multiplier) / var(--scale-ratio-pow-1));
  --size-multiplier-md: var(--size-multiplier);
  --size-multiplier-lg: calc(var(--size-multiplier) * var(--scale-ratio-pow-1));
  --size-multiplier-xl: calc(var(--size-multiplier) * var(--scale-ratio-pow-2));
  --size-multiplier-2xl: calc(var(--size-multiplier) * var(--scale-ratio-pow-3));
}

:root {
  /**
   * Animation variables
   */
  --transition-duration: 300ms;
  --transition-timing-function: ease;
}

:root {
  /**
   * Border variables
   */
  --border-top-width: 1px;
  --border-right-width: 1px;
  --border-bottom-width: 1px;
  --border-left-width: 1px;
  --border-width: var(--border-top-width) var(--border-right-width) var(--border-bottom-width) var(--border-left-width);
  --border-top-style: solid;
  --border-right-style: solid;
  --border-bottom-style: solid;
  --border-left-style: solid;
  --border-style: var(--border-top-style) var(--border-right-style) var(--border-bottom-style) var(--border-left-style);
  --border-top-color: var(--color-gray-200);
  --border-right-color: var(--color-gray-200);
  --border-bottom-color: var(--color-gray-200);
  --border-left-color: var(--color-gray-200);
  --border-color: var(--border-top-color) var(--border-right-color) var(--border-bottom-color) var(--border-left-color);
}

:root {
  /**
   * Border radius variables
   */
  --border-top-left-radius: 4px;
  --border-top-right-radius: 4px;
  --border-bottom-right-radius: 4px;
  --border-bottom-left-radius: 4px;
  --border-radius: var(--border-top-left-radius) var(--border-top-right-radius) var(--border-bottom-right-radius) var(--border-bottom-left-radius);
  /**
   * Border radius xs variant variables
   */
  --border-top-left-radius-xs: calc(var(--border-top-left-radius) * var(--size-multiplier-xs));
  --border-top-right-radius-xs: calc(var(--border-top-right-radius) * var(--size-multiplier-xs));
  --border-bottom-right-radius-xs: calc(var(--border-bottom-right-radius) * var(--size-multiplier-xs));
  --border-bottom-left-radius-xs: calc(var(--border-bottom-left-radius) * var(--size-multiplier-xs));
  --border-radius-xs: var(--border-top-left-radius-xs) var(--border-top-right-radius-xs) var(--border-bottom-right-radius-xs) var(--border-bottom-left-radius-xs);
  /**
   * Border radius sm variant variables
   */
  --border-top-left-radius-sm: calc(var(--border-top-left-radius) * var(--size-multiplier-sm));
  --border-top-right-radius-sm: calc(var(--border-top-right-radius) * var(--size-multiplier-sm));
  --border-bottom-right-radius-sm: calc(var(--border-bottom-right-radius) * var(--size-multiplier-sm));
  --border-bottom-left-radius-sm: calc(var(--border-bottom-left-radius) * var(--size-multiplier-sm));
  --border-radius-sm: var(--border-top-left-radius-sm) var(--border-top-right-radius-sm) var(--border-bottom-right-radius-sm) var(--border-bottom-left-radius-sm);
  /**
   * Border radius md variant variables
   */
  --border-top-left-radius-md: calc(var(--border-top-left-radius) * var(--size-multiplier-md));
  --border-top-right-radius-md: calc(var(--border-top-right-radius) * var(--size-multiplier-md));
  --border-bottom-right-radius-md: calc(var(--border-bottom-right-radius) * var(--size-multiplier-md));
  --border-bottom-left-radius-md: calc(var(--border-bottom-left-radius) * var(--size-multiplier-md));
  --border-radius-md: var(--border-top-left-radius-md) var(--border-top-right-radius-md) var(--border-bottom-right-radius-md) var(--border-bottom-left-radius-md);
  /**
   * Border radius lg variant variables
   */
  --border-top-left-radius-lg: calc(var(--border-top-left-radius) * var(--size-multiplier-lg));
  --border-top-right-radius-lg: calc(var(--border-top-right-radius) * var(--size-multiplier-lg));
  --border-bottom-right-radius-lg: calc(var(--border-bottom-right-radius) * var(--size-multiplier-lg));
  --border-bottom-left-radius-lg: calc(var(--border-bottom-left-radius) * var(--size-multiplier-lg));
  --border-radius-lg: var(--border-top-left-radius-lg) var(--border-top-right-radius-lg) var(--border-bottom-right-radius-lg) var(--border-bottom-left-radius-lg);
  /**
   * Border radius xl variant variables
   */
  --border-top-left-radius-xl: calc(var(--border-top-left-radius) * var(--size-multiplier-xl));
  --border-top-right-radius-xl: calc(var(--border-top-right-radius) * var(--size-multiplier-xl));
  --border-bottom-right-radius-xl: calc(var(--border-bottom-right-radius) * var(--size-multiplier-xl));
  --border-bottom-left-radius-xl: calc(var(--border-bottom-left-radius) * var(--size-multiplier-xl));
  --border-radius-xl: var(--border-top-left-radius-xl) var(--border-top-right-radius-xl) var(--border-bottom-right-radius-xl) var(--border-bottom-left-radius-xl);
}

:root {
  /**
   * Box shadow variables
   */
  --box-shadow-offset-x: 0;
  --box-shadow-offset-y: 0.5rem;
  --box-shadow-blur-radius: 1rem;
  --box-shadow-spread-radius: -0.75rem;
  --box-shadow-color: rgba(0, 0, 0, 0.15);
  --box-shadow: var(--box-shadow-offset-x) var(--box-shadow-offset-y) var(--box-shadow-blur-radius) var(--box-shadow-spread-radius) var(--box-shadow-color);
}

:root {
  /**
   * Breakpoint variables
   */
  --breakpoint-xs: 0px;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-2xl: 1400px;
}

:root {
  /**
   * Color red variables
   */
  --color-red-h: 1.3259668508287064;
  --color-red-s: 87.43961352657004%;
  --color-red-l: 59.411764705882355%;
  --color-red-a: 1;
  --color-red: hsla(var(--color-red-h), var(--color-red-s), var(--color-red-l), var(--color-red-a));
  /**
   * Color orange variables
   */
  --color-orange-h: 19.622641509433947;
  --color-orange-s: 92.9824561403509%;
  --color-orange-l: 66.47058823529412%;
  --color-orange-a: 1;
  --color-orange: hsla(var(--color-orange-h), var(--color-orange-s), var(--color-orange-l), var(--color-orange-a));
  /**
   * Color yellow variables
   */
  --color-yellow-h: 43.676470588235304;
  --color-yellow-s: 100%;
  --color-yellow-l: 73.33333333333334%;
  --color-yellow-a: 1;
  --color-yellow: hsla(var(--color-yellow-h), var(--color-yellow-s), var(--color-yellow-l), var(--color-yellow-a));
  /**
   * Color green variables
   */
  --color-green-h: 154.4186046511628;
  --color-green-s: 57.847533632286996%;
  --color-green-l: 43.72549019607843%;
  --color-green-a: 1;
  --color-green: hsla(var(--color-green-h), var(--color-green-s), var(--color-green-l), var(--color-green-a));
  /**
   * Color teal variables
   */
  --color-teal-h: 173.8888888888889;
  --color-teal-s: 42.85714285714286%;
  --color-teal-l: 49.411764705882355%;
  --color-teal-a: 1;
  --color-teal: hsla(var(--color-teal-h), var(--color-teal-s), var(--color-teal-l), var(--color-teal-a));
  /**
   * Color blue variables
   */
  --color-blue-h: 195.0967741935484;
  --color-blue-s: 77.11442786069651%;
  --color-blue-l: 39.411764705882355%;
  --color-blue-a: 1;
  --color-blue: hsla(var(--color-blue-h), var(--color-blue-s), var(--color-blue-l), var(--color-blue-a));
  /**
   * Color purple variables
   */
  --color-purple-h: 262.2857142857142;
  --color-purple-s: 30.172413793103452%;
  --color-purple-l: 54.50980392156863%;
  --color-purple-a: 1;
  --color-purple: hsla(var(--color-purple-h), var(--color-purple-s), var(--color-purple-l), var(--color-purple-a));
  /**
   * Color pink variables
   */
  --color-pink-h: 351.42857142857144;
  --color-pink-s: 95.68345323741009%;
  --color-pink-l: 72.74509803921569%;
  --color-pink-a: 1;
  --color-pink: hsla(var(--color-pink-h), var(--color-pink-s), var(--color-pink-l), var(--color-pink-a));
  /**
   * Color white variables
   */
  --color-white-h: 0;
  --color-white-s: 0%;
  --color-white-l: 100%;
  --color-white-a: 1;
  --color-white: hsla(var(--color-white-h), var(--color-white-s), var(--color-white-l), var(--color-white-a));
  /**
   * Color light variables
   */
  --color-light-h: var(--color-gray-100-h);
  --color-light-s: var(--color-gray-100-s);
  --color-light-l: var(--color-gray-100-l);
  --color-light-a: var(--color-gray-100-a);
  --color-light: hsla(var(--color-light-h), var(--color-light-s), var(--color-light-l), var(--color-light-a));
  /**
   * Color gray variables
   */
  --color-gray-h: 193.63636363636363;
  --color-gray-s: 10.784313725490199%;
  --color-gray-l: 60.00000000000001%;
  --color-gray-a: 1;
  --color-gray: hsla(var(--color-gray-h), var(--color-gray-s), var(--color-gray-l), var(--color-gray-a));
  /**
   * Color dark variables
   */
  --color-dark-h: var(--color-gray-800-h);
  --color-dark-s: var(--color-gray-800-s);
  --color-dark-l: var(--color-gray-800-l);
  --color-dark-a: var(--color-gray-800-a);
  --color-dark: hsla(var(--color-dark-h), var(--color-dark-s), var(--color-dark-l), var(--color-dark-a));
  /**
   * Color black variables
   */
  --color-black-h: 0;
  --color-black-s: 0%;
  --color-black-l: 0%;
  --color-black-a: 1;
  --color-black: hsla(var(--color-black-h), var(--color-black-s), var(--color-black-l), var(--color-black-a));
  /**
   * Color primary variables
   */
  --color-primary-h: 195.0967741935484;
  --color-primary-s: 77.11442786069651%;
  --color-primary-l: 39.411764705882355%;
  --color-primary-a: 1;
  --color-primary: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), var(--color-primary-a));
  /**
   * Color secondary variables
   */
  --color-secondary-h: 262.2857142857142;
  --color-secondary-s: 30.172413793103452%;
  --color-secondary-l: 54.50980392156863%;
  --color-secondary-a: 1;
  --color-secondary: hsla(var(--color-secondary-h), var(--color-secondary-s), var(--color-secondary-l), var(--color-secondary-a));
  /**
   * Color info variables
   */
  --color-info-h: 173.8888888888889;
  --color-info-s: 42.85714285714286%;
  --color-info-l: 49.411764705882355%;
  --color-info-a: 1;
  --color-info: hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), var(--color-info-a));
  /**
   * Color success variables
   */
  --color-success-h: 154.4186046511628;
  --color-success-s: 57.847533632286996%;
  --color-success-l: 43.72549019607843%;
  --color-success-a: 1;
  --color-success: hsla(var(--color-success-h), var(--color-success-s), var(--color-success-l), var(--color-success-a));
  /**
   * Color warning variables
   */
  --color-warning-h: 43.676470588235304;
  --color-warning-s: 100%;
  --color-warning-l: 73.33333333333334%;
  --color-warning-a: 1;
  --color-warning: hsla(var(--color-warning-h), var(--color-warning-s), var(--color-warning-l), var(--color-warning-a));
  /**
   * Color danger variables
   */
  --color-danger-h: 1.3259668508287064;
  --color-danger-s: 87.43961352657004%;
  --color-danger-l: 59.411764705882355%;
  --color-danger-a: 1;
  --color-danger: hsla(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l), var(--color-danger-a));
  /**
   * Color primary-50 variant variables
   */
  --color-primary-50-h: var(--color-primary-h);
  --color-primary-50-s: var(--color-primary-s);
  --color-primary-50-l: 95%;
  --color-primary-50-a: var(--color-primary-a);
  --color-primary-50: hsla(var(--color-primary-50-h), var(--color-primary-50-s), var(--color-primary-50-l), var(--color-primary-50-a));
  /**
   * Color primary-100 variant variables
   */
  --color-primary-100-h: var(--color-primary-h);
  --color-primary-100-s: var(--color-primary-s);
  --color-primary-100-l: 90%;
  --color-primary-100-a: var(--color-primary-a);
  --color-primary-100: hsla(var(--color-primary-100-h), var(--color-primary-100-s), var(--color-primary-100-l), var(--color-primary-100-a));
  /**
   * Color primary-200 variant variables
   */
  --color-primary-200-h: var(--color-primary-h);
  --color-primary-200-s: var(--color-primary-s);
  --color-primary-200-l: 80%;
  --color-primary-200-a: var(--color-primary-a);
  --color-primary-200: hsla(var(--color-primary-200-h), var(--color-primary-200-s), var(--color-primary-200-l), var(--color-primary-200-a));
  /**
   * Color primary-300 variant variables
   */
  --color-primary-300-h: var(--color-primary-h);
  --color-primary-300-s: var(--color-primary-s);
  --color-primary-300-l: 70%;
  --color-primary-300-a: var(--color-primary-a);
  --color-primary-300: hsla(var(--color-primary-300-h), var(--color-primary-300-s), var(--color-primary-300-l), var(--color-primary-300-a));
  /**
   * Color primary-400 variant variables
   */
  --color-primary-400-h: var(--color-primary-h);
  --color-primary-400-s: var(--color-primary-s);
  --color-primary-400-l: 60%;
  --color-primary-400-a: var(--color-primary-a);
  --color-primary-400: hsla(var(--color-primary-400-h), var(--color-primary-400-s), var(--color-primary-400-l), var(--color-primary-400-a));
  /**
   * Color primary-500 variant variables
   */
  --color-primary-500-h: var(--color-primary-h);
  --color-primary-500-s: var(--color-primary-s);
  --color-primary-500-l: 50%;
  --color-primary-500-a: var(--color-primary-a);
  --color-primary-500: hsla(var(--color-primary-500-h), var(--color-primary-500-s), var(--color-primary-500-l), var(--color-primary-500-a));
  /**
   * Color primary-600 variant variables
   */
  --color-primary-600-h: var(--color-primary-h);
  --color-primary-600-s: var(--color-primary-s);
  --color-primary-600-l: 40%;
  --color-primary-600-a: var(--color-primary-a);
  --color-primary-600: hsla(var(--color-primary-600-h), var(--color-primary-600-s), var(--color-primary-600-l), var(--color-primary-600-a));
  /**
   * Color primary-700 variant variables
   */
  --color-primary-700-h: var(--color-primary-h);
  --color-primary-700-s: var(--color-primary-s);
  --color-primary-700-l: 30%;
  --color-primary-700-a: var(--color-primary-a);
  --color-primary-700: hsla(var(--color-primary-700-h), var(--color-primary-700-s), var(--color-primary-700-l), var(--color-primary-700-a));
  /**
   * Color primary-800 variant variables
   */
  --color-primary-800-h: var(--color-primary-h);
  --color-primary-800-s: var(--color-primary-s);
  --color-primary-800-l: 20%;
  --color-primary-800-a: var(--color-primary-a);
  --color-primary-800: hsla(var(--color-primary-800-h), var(--color-primary-800-s), var(--color-primary-800-l), var(--color-primary-800-a));
  /**
   * Color primary-900 variant variables
   */
  --color-primary-900-h: var(--color-primary-h);
  --color-primary-900-s: var(--color-primary-s);
  --color-primary-900-l: 10%;
  --color-primary-900-a: var(--color-primary-a);
  --color-primary-900: hsla(var(--color-primary-900-h), var(--color-primary-900-s), var(--color-primary-900-l), var(--color-primary-900-a));
  /**
   * Color primary-shade-150 variant variables
   */
  --color-primary-shade-150-h: var(--color-primary-h);
  --color-primary-shade-150-s: var(--color-primary-s);
  --color-primary-shade-150-l: calc(var(--color-primary-l) - 15%);
  --color-primary-shade-150-a: var(--color-primary-a);
  --color-primary-shade-150: hsla(var(--color-primary-shade-150-h), var(--color-primary-shade-150-s), var(--color-primary-shade-150-l), var(--color-primary-shade-150-a));
  /**
   * Color primary-shade-100 variant variables
   */
  --color-primary-shade-100-h: var(--color-primary-h);
  --color-primary-shade-100-s: var(--color-primary-s);
  --color-primary-shade-100-l: calc(var(--color-primary-l) - 10%);
  --color-primary-shade-100-a: var(--color-primary-a);
  --color-primary-shade-100: hsla(var(--color-primary-shade-100-h), var(--color-primary-shade-100-s), var(--color-primary-shade-100-l), var(--color-primary-shade-100-a));
  /**
   * Color primary-shade-50 variant variables
   */
  --color-primary-shade-50-h: var(--color-primary-h);
  --color-primary-shade-50-s: var(--color-primary-s);
  --color-primary-shade-50-l: calc(var(--color-primary-l) - 5%);
  --color-primary-shade-50-a: var(--color-primary-a);
  --color-primary-shade-50: hsla(var(--color-primary-shade-50-h), var(--color-primary-shade-50-s), var(--color-primary-shade-50-l), var(--color-primary-shade-50-a));
  /**
   * Color primary-tint-50 variant variables
   */
  --color-primary-tint-50-h: var(--color-primary-h);
  --color-primary-tint-50-s: var(--color-primary-s);
  --color-primary-tint-50-l: calc(var(--color-primary-l) + 5%);
  --color-primary-tint-50-a: var(--color-primary-a);
  --color-primary-tint-50: hsla(var(--color-primary-tint-50-h), var(--color-primary-tint-50-s), var(--color-primary-tint-50-l), var(--color-primary-tint-50-a));
  /**
   * Color primary-tint-100 variant variables
   */
  --color-primary-tint-100-h: var(--color-primary-h);
  --color-primary-tint-100-s: var(--color-primary-s);
  --color-primary-tint-100-l: calc(var(--color-primary-l) + 10%);
  --color-primary-tint-100-a: var(--color-primary-a);
  --color-primary-tint-100: hsla(var(--color-primary-tint-100-h), var(--color-primary-tint-100-s), var(--color-primary-tint-100-l), var(--color-primary-tint-100-a));
  /**
   * Color primary-tint-150 variant variables
   */
  --color-primary-tint-150-h: var(--color-primary-h);
  --color-primary-tint-150-s: var(--color-primary-s);
  --color-primary-tint-150-l: calc(var(--color-primary-l) + 15%);
  --color-primary-tint-150-a: var(--color-primary-a);
  --color-primary-tint-150: hsla(var(--color-primary-tint-150-h), var(--color-primary-tint-150-s), var(--color-primary-tint-150-l), var(--color-primary-tint-150-a));
  /**
   * Color secondary-50 variant variables
   */
  --color-secondary-50-h: var(--color-secondary-h);
  --color-secondary-50-s: var(--color-secondary-s);
  --color-secondary-50-l: 95%;
  --color-secondary-50-a: var(--color-secondary-a);
  --color-secondary-50: hsla(var(--color-secondary-50-h), var(--color-secondary-50-s), var(--color-secondary-50-l), var(--color-secondary-50-a));
  /**
   * Color secondary-100 variant variables
   */
  --color-secondary-100-h: var(--color-secondary-h);
  --color-secondary-100-s: var(--color-secondary-s);
  --color-secondary-100-l: 90%;
  --color-secondary-100-a: var(--color-secondary-a);
  --color-secondary-100: hsla(var(--color-secondary-100-h), var(--color-secondary-100-s), var(--color-secondary-100-l), var(--color-secondary-100-a));
  /**
   * Color secondary-200 variant variables
   */
  --color-secondary-200-h: var(--color-secondary-h);
  --color-secondary-200-s: var(--color-secondary-s);
  --color-secondary-200-l: 80%;
  --color-secondary-200-a: var(--color-secondary-a);
  --color-secondary-200: hsla(var(--color-secondary-200-h), var(--color-secondary-200-s), var(--color-secondary-200-l), var(--color-secondary-200-a));
  /**
   * Color secondary-300 variant variables
   */
  --color-secondary-300-h: var(--color-secondary-h);
  --color-secondary-300-s: var(--color-secondary-s);
  --color-secondary-300-l: 70%;
  --color-secondary-300-a: var(--color-secondary-a);
  --color-secondary-300: hsla(var(--color-secondary-300-h), var(--color-secondary-300-s), var(--color-secondary-300-l), var(--color-secondary-300-a));
  /**
   * Color secondary-400 variant variables
   */
  --color-secondary-400-h: var(--color-secondary-h);
  --color-secondary-400-s: var(--color-secondary-s);
  --color-secondary-400-l: 60%;
  --color-secondary-400-a: var(--color-secondary-a);
  --color-secondary-400: hsla(var(--color-secondary-400-h), var(--color-secondary-400-s), var(--color-secondary-400-l), var(--color-secondary-400-a));
  /**
   * Color secondary-500 variant variables
   */
  --color-secondary-500-h: var(--color-secondary-h);
  --color-secondary-500-s: var(--color-secondary-s);
  --color-secondary-500-l: 50%;
  --color-secondary-500-a: var(--color-secondary-a);
  --color-secondary-500: hsla(var(--color-secondary-500-h), var(--color-secondary-500-s), var(--color-secondary-500-l), var(--color-secondary-500-a));
  /**
   * Color secondary-600 variant variables
   */
  --color-secondary-600-h: var(--color-secondary-h);
  --color-secondary-600-s: var(--color-secondary-s);
  --color-secondary-600-l: 40%;
  --color-secondary-600-a: var(--color-secondary-a);
  --color-secondary-600: hsla(var(--color-secondary-600-h), var(--color-secondary-600-s), var(--color-secondary-600-l), var(--color-secondary-600-a));
  /**
   * Color secondary-700 variant variables
   */
  --color-secondary-700-h: var(--color-secondary-h);
  --color-secondary-700-s: var(--color-secondary-s);
  --color-secondary-700-l: 30%;
  --color-secondary-700-a: var(--color-secondary-a);
  --color-secondary-700: hsla(var(--color-secondary-700-h), var(--color-secondary-700-s), var(--color-secondary-700-l), var(--color-secondary-700-a));
  /**
   * Color secondary-800 variant variables
   */
  --color-secondary-800-h: var(--color-secondary-h);
  --color-secondary-800-s: var(--color-secondary-s);
  --color-secondary-800-l: 20%;
  --color-secondary-800-a: var(--color-secondary-a);
  --color-secondary-800: hsla(var(--color-secondary-800-h), var(--color-secondary-800-s), var(--color-secondary-800-l), var(--color-secondary-800-a));
  /**
   * Color secondary-900 variant variables
   */
  --color-secondary-900-h: var(--color-secondary-h);
  --color-secondary-900-s: var(--color-secondary-s);
  --color-secondary-900-l: 10%;
  --color-secondary-900-a: var(--color-secondary-a);
  --color-secondary-900: hsla(var(--color-secondary-900-h), var(--color-secondary-900-s), var(--color-secondary-900-l), var(--color-secondary-900-a));
  /**
   * Color secondary-shade-150 variant variables
   */
  --color-secondary-shade-150-h: var(--color-secondary-h);
  --color-secondary-shade-150-s: var(--color-secondary-s);
  --color-secondary-shade-150-l: calc(var(--color-secondary-l) - 15%);
  --color-secondary-shade-150-a: var(--color-secondary-a);
  --color-secondary-shade-150: hsla(var(--color-secondary-shade-150-h), var(--color-secondary-shade-150-s), var(--color-secondary-shade-150-l), var(--color-secondary-shade-150-a));
  /**
   * Color secondary-shade-100 variant variables
   */
  --color-secondary-shade-100-h: var(--color-secondary-h);
  --color-secondary-shade-100-s: var(--color-secondary-s);
  --color-secondary-shade-100-l: calc(var(--color-secondary-l) - 10%);
  --color-secondary-shade-100-a: var(--color-secondary-a);
  --color-secondary-shade-100: hsla(var(--color-secondary-shade-100-h), var(--color-secondary-shade-100-s), var(--color-secondary-shade-100-l), var(--color-secondary-shade-100-a));
  /**
   * Color secondary-shade-50 variant variables
   */
  --color-secondary-shade-50-h: var(--color-secondary-h);
  --color-secondary-shade-50-s: var(--color-secondary-s);
  --color-secondary-shade-50-l: calc(var(--color-secondary-l) - 5%);
  --color-secondary-shade-50-a: var(--color-secondary-a);
  --color-secondary-shade-50: hsla(var(--color-secondary-shade-50-h), var(--color-secondary-shade-50-s), var(--color-secondary-shade-50-l), var(--color-secondary-shade-50-a));
  /**
   * Color secondary-tint-50 variant variables
   */
  --color-secondary-tint-50-h: var(--color-secondary-h);
  --color-secondary-tint-50-s: var(--color-secondary-s);
  --color-secondary-tint-50-l: calc(var(--color-secondary-l) + 5%);
  --color-secondary-tint-50-a: var(--color-secondary-a);
  --color-secondary-tint-50: hsla(var(--color-secondary-tint-50-h), var(--color-secondary-tint-50-s), var(--color-secondary-tint-50-l), var(--color-secondary-tint-50-a));
  /**
   * Color secondary-tint-100 variant variables
   */
  --color-secondary-tint-100-h: var(--color-secondary-h);
  --color-secondary-tint-100-s: var(--color-secondary-s);
  --color-secondary-tint-100-l: calc(var(--color-secondary-l) + 10%);
  --color-secondary-tint-100-a: var(--color-secondary-a);
  --color-secondary-tint-100: hsla(var(--color-secondary-tint-100-h), var(--color-secondary-tint-100-s), var(--color-secondary-tint-100-l), var(--color-secondary-tint-100-a));
  /**
   * Color secondary-tint-150 variant variables
   */
  --color-secondary-tint-150-h: var(--color-secondary-h);
  --color-secondary-tint-150-s: var(--color-secondary-s);
  --color-secondary-tint-150-l: calc(var(--color-secondary-l) + 15%);
  --color-secondary-tint-150-a: var(--color-secondary-a);
  --color-secondary-tint-150: hsla(var(--color-secondary-tint-150-h), var(--color-secondary-tint-150-s), var(--color-secondary-tint-150-l), var(--color-secondary-tint-150-a));
  /**
   * Color info-50 variant variables
   */
  --color-info-50-h: var(--color-info-h);
  --color-info-50-s: var(--color-info-s);
  --color-info-50-l: 95%;
  --color-info-50-a: var(--color-info-a);
  --color-info-50: hsla(var(--color-info-50-h), var(--color-info-50-s), var(--color-info-50-l), var(--color-info-50-a));
  /**
   * Color info-100 variant variables
   */
  --color-info-100-h: var(--color-info-h);
  --color-info-100-s: var(--color-info-s);
  --color-info-100-l: 90%;
  --color-info-100-a: var(--color-info-a);
  --color-info-100: hsla(var(--color-info-100-h), var(--color-info-100-s), var(--color-info-100-l), var(--color-info-100-a));
  /**
   * Color info-200 variant variables
   */
  --color-info-200-h: var(--color-info-h);
  --color-info-200-s: var(--color-info-s);
  --color-info-200-l: 80%;
  --color-info-200-a: var(--color-info-a);
  --color-info-200: hsla(var(--color-info-200-h), var(--color-info-200-s), var(--color-info-200-l), var(--color-info-200-a));
  /**
   * Color info-300 variant variables
   */
  --color-info-300-h: var(--color-info-h);
  --color-info-300-s: var(--color-info-s);
  --color-info-300-l: 70%;
  --color-info-300-a: var(--color-info-a);
  --color-info-300: hsla(var(--color-info-300-h), var(--color-info-300-s), var(--color-info-300-l), var(--color-info-300-a));
  /**
   * Color info-400 variant variables
   */
  --color-info-400-h: var(--color-info-h);
  --color-info-400-s: var(--color-info-s);
  --color-info-400-l: 60%;
  --color-info-400-a: var(--color-info-a);
  --color-info-400: hsla(var(--color-info-400-h), var(--color-info-400-s), var(--color-info-400-l), var(--color-info-400-a));
  /**
   * Color info-500 variant variables
   */
  --color-info-500-h: var(--color-info-h);
  --color-info-500-s: var(--color-info-s);
  --color-info-500-l: 50%;
  --color-info-500-a: var(--color-info-a);
  --color-info-500: hsla(var(--color-info-500-h), var(--color-info-500-s), var(--color-info-500-l), var(--color-info-500-a));
  /**
   * Color info-600 variant variables
   */
  --color-info-600-h: var(--color-info-h);
  --color-info-600-s: var(--color-info-s);
  --color-info-600-l: 40%;
  --color-info-600-a: var(--color-info-a);
  --color-info-600: hsla(var(--color-info-600-h), var(--color-info-600-s), var(--color-info-600-l), var(--color-info-600-a));
  /**
   * Color info-700 variant variables
   */
  --color-info-700-h: var(--color-info-h);
  --color-info-700-s: var(--color-info-s);
  --color-info-700-l: 30%;
  --color-info-700-a: var(--color-info-a);
  --color-info-700: hsla(var(--color-info-700-h), var(--color-info-700-s), var(--color-info-700-l), var(--color-info-700-a));
  /**
   * Color info-800 variant variables
   */
  --color-info-800-h: var(--color-info-h);
  --color-info-800-s: var(--color-info-s);
  --color-info-800-l: 20%;
  --color-info-800-a: var(--color-info-a);
  --color-info-800: hsla(var(--color-info-800-h), var(--color-info-800-s), var(--color-info-800-l), var(--color-info-800-a));
  /**
   * Color info-900 variant variables
   */
  --color-info-900-h: var(--color-info-h);
  --color-info-900-s: var(--color-info-s);
  --color-info-900-l: 10%;
  --color-info-900-a: var(--color-info-a);
  --color-info-900: hsla(var(--color-info-900-h), var(--color-info-900-s), var(--color-info-900-l), var(--color-info-900-a));
  /**
   * Color info-shade-150 variant variables
   */
  --color-info-shade-150-h: var(--color-info-h);
  --color-info-shade-150-s: var(--color-info-s);
  --color-info-shade-150-l: calc(var(--color-info-l) - 15%);
  --color-info-shade-150-a: var(--color-info-a);
  --color-info-shade-150: hsla(var(--color-info-shade-150-h), var(--color-info-shade-150-s), var(--color-info-shade-150-l), var(--color-info-shade-150-a));
  /**
   * Color info-shade-100 variant variables
   */
  --color-info-shade-100-h: var(--color-info-h);
  --color-info-shade-100-s: var(--color-info-s);
  --color-info-shade-100-l: calc(var(--color-info-l) - 10%);
  --color-info-shade-100-a: var(--color-info-a);
  --color-info-shade-100: hsla(var(--color-info-shade-100-h), var(--color-info-shade-100-s), var(--color-info-shade-100-l), var(--color-info-shade-100-a));
  /**
   * Color info-shade-50 variant variables
   */
  --color-info-shade-50-h: var(--color-info-h);
  --color-info-shade-50-s: var(--color-info-s);
  --color-info-shade-50-l: calc(var(--color-info-l) - 5%);
  --color-info-shade-50-a: var(--color-info-a);
  --color-info-shade-50: hsla(var(--color-info-shade-50-h), var(--color-info-shade-50-s), var(--color-info-shade-50-l), var(--color-info-shade-50-a));
  /**
   * Color info-tint-50 variant variables
   */
  --color-info-tint-50-h: var(--color-info-h);
  --color-info-tint-50-s: var(--color-info-s);
  --color-info-tint-50-l: calc(var(--color-info-l) + 5%);
  --color-info-tint-50-a: var(--color-info-a);
  --color-info-tint-50: hsla(var(--color-info-tint-50-h), var(--color-info-tint-50-s), var(--color-info-tint-50-l), var(--color-info-tint-50-a));
  /**
   * Color info-tint-100 variant variables
   */
  --color-info-tint-100-h: var(--color-info-h);
  --color-info-tint-100-s: var(--color-info-s);
  --color-info-tint-100-l: calc(var(--color-info-l) + 10%);
  --color-info-tint-100-a: var(--color-info-a);
  --color-info-tint-100: hsla(var(--color-info-tint-100-h), var(--color-info-tint-100-s), var(--color-info-tint-100-l), var(--color-info-tint-100-a));
  /**
   * Color info-tint-150 variant variables
   */
  --color-info-tint-150-h: var(--color-info-h);
  --color-info-tint-150-s: var(--color-info-s);
  --color-info-tint-150-l: calc(var(--color-info-l) + 15%);
  --color-info-tint-150-a: var(--color-info-a);
  --color-info-tint-150: hsla(var(--color-info-tint-150-h), var(--color-info-tint-150-s), var(--color-info-tint-150-l), var(--color-info-tint-150-a));
  /**
   * Color success-50 variant variables
   */
  --color-success-50-h: var(--color-success-h);
  --color-success-50-s: var(--color-success-s);
  --color-success-50-l: 95%;
  --color-success-50-a: var(--color-success-a);
  --color-success-50: hsla(var(--color-success-50-h), var(--color-success-50-s), var(--color-success-50-l), var(--color-success-50-a));
  /**
   * Color success-100 variant variables
   */
  --color-success-100-h: var(--color-success-h);
  --color-success-100-s: var(--color-success-s);
  --color-success-100-l: 90%;
  --color-success-100-a: var(--color-success-a);
  --color-success-100: hsla(var(--color-success-100-h), var(--color-success-100-s), var(--color-success-100-l), var(--color-success-100-a));
  /**
   * Color success-200 variant variables
   */
  --color-success-200-h: var(--color-success-h);
  --color-success-200-s: var(--color-success-s);
  --color-success-200-l: 80%;
  --color-success-200-a: var(--color-success-a);
  --color-success-200: hsla(var(--color-success-200-h), var(--color-success-200-s), var(--color-success-200-l), var(--color-success-200-a));
  /**
   * Color success-300 variant variables
   */
  --color-success-300-h: var(--color-success-h);
  --color-success-300-s: var(--color-success-s);
  --color-success-300-l: 70%;
  --color-success-300-a: var(--color-success-a);
  --color-success-300: hsla(var(--color-success-300-h), var(--color-success-300-s), var(--color-success-300-l), var(--color-success-300-a));
  /**
   * Color success-400 variant variables
   */
  --color-success-400-h: var(--color-success-h);
  --color-success-400-s: var(--color-success-s);
  --color-success-400-l: 60%;
  --color-success-400-a: var(--color-success-a);
  --color-success-400: hsla(var(--color-success-400-h), var(--color-success-400-s), var(--color-success-400-l), var(--color-success-400-a));
  /**
   * Color success-500 variant variables
   */
  --color-success-500-h: var(--color-success-h);
  --color-success-500-s: var(--color-success-s);
  --color-success-500-l: 50%;
  --color-success-500-a: var(--color-success-a);
  --color-success-500: hsla(var(--color-success-500-h), var(--color-success-500-s), var(--color-success-500-l), var(--color-success-500-a));
  /**
   * Color success-600 variant variables
   */
  --color-success-600-h: var(--color-success-h);
  --color-success-600-s: var(--color-success-s);
  --color-success-600-l: 40%;
  --color-success-600-a: var(--color-success-a);
  --color-success-600: hsla(var(--color-success-600-h), var(--color-success-600-s), var(--color-success-600-l), var(--color-success-600-a));
  /**
   * Color success-700 variant variables
   */
  --color-success-700-h: var(--color-success-h);
  --color-success-700-s: var(--color-success-s);
  --color-success-700-l: 30%;
  --color-success-700-a: var(--color-success-a);
  --color-success-700: hsla(var(--color-success-700-h), var(--color-success-700-s), var(--color-success-700-l), var(--color-success-700-a));
  /**
   * Color success-800 variant variables
   */
  --color-success-800-h: var(--color-success-h);
  --color-success-800-s: var(--color-success-s);
  --color-success-800-l: 20%;
  --color-success-800-a: var(--color-success-a);
  --color-success-800: hsla(var(--color-success-800-h), var(--color-success-800-s), var(--color-success-800-l), var(--color-success-800-a));
  /**
   * Color success-900 variant variables
   */
  --color-success-900-h: var(--color-success-h);
  --color-success-900-s: var(--color-success-s);
  --color-success-900-l: 10%;
  --color-success-900-a: var(--color-success-a);
  --color-success-900: hsla(var(--color-success-900-h), var(--color-success-900-s), var(--color-success-900-l), var(--color-success-900-a));
  /**
   * Color success-shade-150 variant variables
   */
  --color-success-shade-150-h: var(--color-success-h);
  --color-success-shade-150-s: var(--color-success-s);
  --color-success-shade-150-l: calc(var(--color-success-l) - 15%);
  --color-success-shade-150-a: var(--color-success-a);
  --color-success-shade-150: hsla(var(--color-success-shade-150-h), var(--color-success-shade-150-s), var(--color-success-shade-150-l), var(--color-success-shade-150-a));
  /**
   * Color success-shade-100 variant variables
   */
  --color-success-shade-100-h: var(--color-success-h);
  --color-success-shade-100-s: var(--color-success-s);
  --color-success-shade-100-l: calc(var(--color-success-l) - 10%);
  --color-success-shade-100-a: var(--color-success-a);
  --color-success-shade-100: hsla(var(--color-success-shade-100-h), var(--color-success-shade-100-s), var(--color-success-shade-100-l), var(--color-success-shade-100-a));
  /**
   * Color success-shade-50 variant variables
   */
  --color-success-shade-50-h: var(--color-success-h);
  --color-success-shade-50-s: var(--color-success-s);
  --color-success-shade-50-l: calc(var(--color-success-l) - 5%);
  --color-success-shade-50-a: var(--color-success-a);
  --color-success-shade-50: hsla(var(--color-success-shade-50-h), var(--color-success-shade-50-s), var(--color-success-shade-50-l), var(--color-success-shade-50-a));
  /**
   * Color success-tint-50 variant variables
   */
  --color-success-tint-50-h: var(--color-success-h);
  --color-success-tint-50-s: var(--color-success-s);
  --color-success-tint-50-l: calc(var(--color-success-l) + 5%);
  --color-success-tint-50-a: var(--color-success-a);
  --color-success-tint-50: hsla(var(--color-success-tint-50-h), var(--color-success-tint-50-s), var(--color-success-tint-50-l), var(--color-success-tint-50-a));
  /**
   * Color success-tint-100 variant variables
   */
  --color-success-tint-100-h: var(--color-success-h);
  --color-success-tint-100-s: var(--color-success-s);
  --color-success-tint-100-l: calc(var(--color-success-l) + 10%);
  --color-success-tint-100-a: var(--color-success-a);
  --color-success-tint-100: hsla(var(--color-success-tint-100-h), var(--color-success-tint-100-s), var(--color-success-tint-100-l), var(--color-success-tint-100-a));
  /**
   * Color success-tint-150 variant variables
   */
  --color-success-tint-150-h: var(--color-success-h);
  --color-success-tint-150-s: var(--color-success-s);
  --color-success-tint-150-l: calc(var(--color-success-l) + 15%);
  --color-success-tint-150-a: var(--color-success-a);
  --color-success-tint-150: hsla(var(--color-success-tint-150-h), var(--color-success-tint-150-s), var(--color-success-tint-150-l), var(--color-success-tint-150-a));
  /**
   * Color warning-50 variant variables
   */
  --color-warning-50-h: var(--color-warning-h);
  --color-warning-50-s: var(--color-warning-s);
  --color-warning-50-l: 95%;
  --color-warning-50-a: var(--color-warning-a);
  --color-warning-50: hsla(var(--color-warning-50-h), var(--color-warning-50-s), var(--color-warning-50-l), var(--color-warning-50-a));
  /**
   * Color warning-100 variant variables
   */
  --color-warning-100-h: var(--color-warning-h);
  --color-warning-100-s: var(--color-warning-s);
  --color-warning-100-l: 90%;
  --color-warning-100-a: var(--color-warning-a);
  --color-warning-100: hsla(var(--color-warning-100-h), var(--color-warning-100-s), var(--color-warning-100-l), var(--color-warning-100-a));
  /**
   * Color warning-200 variant variables
   */
  --color-warning-200-h: var(--color-warning-h);
  --color-warning-200-s: var(--color-warning-s);
  --color-warning-200-l: 80%;
  --color-warning-200-a: var(--color-warning-a);
  --color-warning-200: hsla(var(--color-warning-200-h), var(--color-warning-200-s), var(--color-warning-200-l), var(--color-warning-200-a));
  /**
   * Color warning-300 variant variables
   */
  --color-warning-300-h: var(--color-warning-h);
  --color-warning-300-s: var(--color-warning-s);
  --color-warning-300-l: 70%;
  --color-warning-300-a: var(--color-warning-a);
  --color-warning-300: hsla(var(--color-warning-300-h), var(--color-warning-300-s), var(--color-warning-300-l), var(--color-warning-300-a));
  /**
   * Color warning-400 variant variables
   */
  --color-warning-400-h: var(--color-warning-h);
  --color-warning-400-s: var(--color-warning-s);
  --color-warning-400-l: 60%;
  --color-warning-400-a: var(--color-warning-a);
  --color-warning-400: hsla(var(--color-warning-400-h), var(--color-warning-400-s), var(--color-warning-400-l), var(--color-warning-400-a));
  /**
   * Color warning-500 variant variables
   */
  --color-warning-500-h: var(--color-warning-h);
  --color-warning-500-s: var(--color-warning-s);
  --color-warning-500-l: 50%;
  --color-warning-500-a: var(--color-warning-a);
  --color-warning-500: hsla(var(--color-warning-500-h), var(--color-warning-500-s), var(--color-warning-500-l), var(--color-warning-500-a));
  /**
   * Color warning-600 variant variables
   */
  --color-warning-600-h: var(--color-warning-h);
  --color-warning-600-s: var(--color-warning-s);
  --color-warning-600-l: 40%;
  --color-warning-600-a: var(--color-warning-a);
  --color-warning-600: hsla(var(--color-warning-600-h), var(--color-warning-600-s), var(--color-warning-600-l), var(--color-warning-600-a));
  /**
   * Color warning-700 variant variables
   */
  --color-warning-700-h: var(--color-warning-h);
  --color-warning-700-s: var(--color-warning-s);
  --color-warning-700-l: 30%;
  --color-warning-700-a: var(--color-warning-a);
  --color-warning-700: hsla(var(--color-warning-700-h), var(--color-warning-700-s), var(--color-warning-700-l), var(--color-warning-700-a));
  /**
   * Color warning-800 variant variables
   */
  --color-warning-800-h: var(--color-warning-h);
  --color-warning-800-s: var(--color-warning-s);
  --color-warning-800-l: 20%;
  --color-warning-800-a: var(--color-warning-a);
  --color-warning-800: hsla(var(--color-warning-800-h), var(--color-warning-800-s), var(--color-warning-800-l), var(--color-warning-800-a));
  /**
   * Color warning-900 variant variables
   */
  --color-warning-900-h: var(--color-warning-h);
  --color-warning-900-s: var(--color-warning-s);
  --color-warning-900-l: 10%;
  --color-warning-900-a: var(--color-warning-a);
  --color-warning-900: hsla(var(--color-warning-900-h), var(--color-warning-900-s), var(--color-warning-900-l), var(--color-warning-900-a));
  /**
   * Color warning-shade-150 variant variables
   */
  --color-warning-shade-150-h: var(--color-warning-h);
  --color-warning-shade-150-s: var(--color-warning-s);
  --color-warning-shade-150-l: calc(var(--color-warning-l) - 15%);
  --color-warning-shade-150-a: var(--color-warning-a);
  --color-warning-shade-150: hsla(var(--color-warning-shade-150-h), var(--color-warning-shade-150-s), var(--color-warning-shade-150-l), var(--color-warning-shade-150-a));
  /**
   * Color warning-shade-100 variant variables
   */
  --color-warning-shade-100-h: var(--color-warning-h);
  --color-warning-shade-100-s: var(--color-warning-s);
  --color-warning-shade-100-l: calc(var(--color-warning-l) - 10%);
  --color-warning-shade-100-a: var(--color-warning-a);
  --color-warning-shade-100: hsla(var(--color-warning-shade-100-h), var(--color-warning-shade-100-s), var(--color-warning-shade-100-l), var(--color-warning-shade-100-a));
  /**
   * Color warning-shade-50 variant variables
   */
  --color-warning-shade-50-h: var(--color-warning-h);
  --color-warning-shade-50-s: var(--color-warning-s);
  --color-warning-shade-50-l: calc(var(--color-warning-l) - 5%);
  --color-warning-shade-50-a: var(--color-warning-a);
  --color-warning-shade-50: hsla(var(--color-warning-shade-50-h), var(--color-warning-shade-50-s), var(--color-warning-shade-50-l), var(--color-warning-shade-50-a));
  /**
   * Color warning-tint-50 variant variables
   */
  --color-warning-tint-50-h: var(--color-warning-h);
  --color-warning-tint-50-s: var(--color-warning-s);
  --color-warning-tint-50-l: calc(var(--color-warning-l) + 5%);
  --color-warning-tint-50-a: var(--color-warning-a);
  --color-warning-tint-50: hsla(var(--color-warning-tint-50-h), var(--color-warning-tint-50-s), var(--color-warning-tint-50-l), var(--color-warning-tint-50-a));
  /**
   * Color warning-tint-100 variant variables
   */
  --color-warning-tint-100-h: var(--color-warning-h);
  --color-warning-tint-100-s: var(--color-warning-s);
  --color-warning-tint-100-l: calc(var(--color-warning-l) + 10%);
  --color-warning-tint-100-a: var(--color-warning-a);
  --color-warning-tint-100: hsla(var(--color-warning-tint-100-h), var(--color-warning-tint-100-s), var(--color-warning-tint-100-l), var(--color-warning-tint-100-a));
  /**
   * Color warning-tint-150 variant variables
   */
  --color-warning-tint-150-h: var(--color-warning-h);
  --color-warning-tint-150-s: var(--color-warning-s);
  --color-warning-tint-150-l: calc(var(--color-warning-l) + 15%);
  --color-warning-tint-150-a: var(--color-warning-a);
  --color-warning-tint-150: hsla(var(--color-warning-tint-150-h), var(--color-warning-tint-150-s), var(--color-warning-tint-150-l), var(--color-warning-tint-150-a));
  /**
   * Color danger-50 variant variables
   */
  --color-danger-50-h: var(--color-danger-h);
  --color-danger-50-s: var(--color-danger-s);
  --color-danger-50-l: 95%;
  --color-danger-50-a: var(--color-danger-a);
  --color-danger-50: hsla(var(--color-danger-50-h), var(--color-danger-50-s), var(--color-danger-50-l), var(--color-danger-50-a));
  /**
   * Color danger-100 variant variables
   */
  --color-danger-100-h: var(--color-danger-h);
  --color-danger-100-s: var(--color-danger-s);
  --color-danger-100-l: 90%;
  --color-danger-100-a: var(--color-danger-a);
  --color-danger-100: hsla(var(--color-danger-100-h), var(--color-danger-100-s), var(--color-danger-100-l), var(--color-danger-100-a));
  /**
   * Color danger-200 variant variables
   */
  --color-danger-200-h: var(--color-danger-h);
  --color-danger-200-s: var(--color-danger-s);
  --color-danger-200-l: 80%;
  --color-danger-200-a: var(--color-danger-a);
  --color-danger-200: hsla(var(--color-danger-200-h), var(--color-danger-200-s), var(--color-danger-200-l), var(--color-danger-200-a));
  /**
   * Color danger-300 variant variables
   */
  --color-danger-300-h: var(--color-danger-h);
  --color-danger-300-s: var(--color-danger-s);
  --color-danger-300-l: 70%;
  --color-danger-300-a: var(--color-danger-a);
  --color-danger-300: hsla(var(--color-danger-300-h), var(--color-danger-300-s), var(--color-danger-300-l), var(--color-danger-300-a));
  /**
   * Color danger-400 variant variables
   */
  --color-danger-400-h: var(--color-danger-h);
  --color-danger-400-s: var(--color-danger-s);
  --color-danger-400-l: 60%;
  --color-danger-400-a: var(--color-danger-a);
  --color-danger-400: hsla(var(--color-danger-400-h), var(--color-danger-400-s), var(--color-danger-400-l), var(--color-danger-400-a));
  /**
   * Color danger-500 variant variables
   */
  --color-danger-500-h: var(--color-danger-h);
  --color-danger-500-s: var(--color-danger-s);
  --color-danger-500-l: 50%;
  --color-danger-500-a: var(--color-danger-a);
  --color-danger-500: hsla(var(--color-danger-500-h), var(--color-danger-500-s), var(--color-danger-500-l), var(--color-danger-500-a));
  /**
   * Color danger-600 variant variables
   */
  --color-danger-600-h: var(--color-danger-h);
  --color-danger-600-s: var(--color-danger-s);
  --color-danger-600-l: 40%;
  --color-danger-600-a: var(--color-danger-a);
  --color-danger-600: hsla(var(--color-danger-600-h), var(--color-danger-600-s), var(--color-danger-600-l), var(--color-danger-600-a));
  /**
   * Color danger-700 variant variables
   */
  --color-danger-700-h: var(--color-danger-h);
  --color-danger-700-s: var(--color-danger-s);
  --color-danger-700-l: 30%;
  --color-danger-700-a: var(--color-danger-a);
  --color-danger-700: hsla(var(--color-danger-700-h), var(--color-danger-700-s), var(--color-danger-700-l), var(--color-danger-700-a));
  /**
   * Color danger-800 variant variables
   */
  --color-danger-800-h: var(--color-danger-h);
  --color-danger-800-s: var(--color-danger-s);
  --color-danger-800-l: 20%;
  --color-danger-800-a: var(--color-danger-a);
  --color-danger-800: hsla(var(--color-danger-800-h), var(--color-danger-800-s), var(--color-danger-800-l), var(--color-danger-800-a));
  /**
   * Color danger-900 variant variables
   */
  --color-danger-900-h: var(--color-danger-h);
  --color-danger-900-s: var(--color-danger-s);
  --color-danger-900-l: 10%;
  --color-danger-900-a: var(--color-danger-a);
  --color-danger-900: hsla(var(--color-danger-900-h), var(--color-danger-900-s), var(--color-danger-900-l), var(--color-danger-900-a));
  /**
   * Color danger-shade-150 variant variables
   */
  --color-danger-shade-150-h: var(--color-danger-h);
  --color-danger-shade-150-s: var(--color-danger-s);
  --color-danger-shade-150-l: calc(var(--color-danger-l) - 15%);
  --color-danger-shade-150-a: var(--color-danger-a);
  --color-danger-shade-150: hsla(var(--color-danger-shade-150-h), var(--color-danger-shade-150-s), var(--color-danger-shade-150-l), var(--color-danger-shade-150-a));
  /**
   * Color danger-shade-100 variant variables
   */
  --color-danger-shade-100-h: var(--color-danger-h);
  --color-danger-shade-100-s: var(--color-danger-s);
  --color-danger-shade-100-l: calc(var(--color-danger-l) - 10%);
  --color-danger-shade-100-a: var(--color-danger-a);
  --color-danger-shade-100: hsla(var(--color-danger-shade-100-h), var(--color-danger-shade-100-s), var(--color-danger-shade-100-l), var(--color-danger-shade-100-a));
  /**
   * Color danger-shade-50 variant variables
   */
  --color-danger-shade-50-h: var(--color-danger-h);
  --color-danger-shade-50-s: var(--color-danger-s);
  --color-danger-shade-50-l: calc(var(--color-danger-l) - 5%);
  --color-danger-shade-50-a: var(--color-danger-a);
  --color-danger-shade-50: hsla(var(--color-danger-shade-50-h), var(--color-danger-shade-50-s), var(--color-danger-shade-50-l), var(--color-danger-shade-50-a));
  /**
   * Color danger-tint-50 variant variables
   */
  --color-danger-tint-50-h: var(--color-danger-h);
  --color-danger-tint-50-s: var(--color-danger-s);
  --color-danger-tint-50-l: calc(var(--color-danger-l) + 5%);
  --color-danger-tint-50-a: var(--color-danger-a);
  --color-danger-tint-50: hsla(var(--color-danger-tint-50-h), var(--color-danger-tint-50-s), var(--color-danger-tint-50-l), var(--color-danger-tint-50-a));
  /**
   * Color danger-tint-100 variant variables
   */
  --color-danger-tint-100-h: var(--color-danger-h);
  --color-danger-tint-100-s: var(--color-danger-s);
  --color-danger-tint-100-l: calc(var(--color-danger-l) + 10%);
  --color-danger-tint-100-a: var(--color-danger-a);
  --color-danger-tint-100: hsla(var(--color-danger-tint-100-h), var(--color-danger-tint-100-s), var(--color-danger-tint-100-l), var(--color-danger-tint-100-a));
  /**
   * Color danger-tint-150 variant variables
   */
  --color-danger-tint-150-h: var(--color-danger-h);
  --color-danger-tint-150-s: var(--color-danger-s);
  --color-danger-tint-150-l: calc(var(--color-dange