Packages

moon

2.90.4
2.90.5 retired 2.90.4 2.90.3 2.90.2 2.90.1 2.90.0 2.89.4 2.89.1 2.89.0 2.88.0 2.87.11 2.87.10 2.87.9 2.87.8 2.87.7 2.87.6 2.87.5 2.87.4 2.87.3 2.87.2 2.87.1 2.87.0 2.86.1 2.86.0 2.85.1 2.85.0 2.84.0 2.83.0 2.82.0 2.81.4 2.81.3 2.81.2 2.81.1 2.81.0 2.80.2 2.80.1 2.80.0 2.79.13 2.79.12 2.79.11 2.79.10 2.79.9 2.79.8 2.79.7 2.79.6 2.79.5 2.79.4 2.79.3 2.79.2 2.79.1 2.79.0 2.78.4 2.78.3 2.78.2 2.78.1 2.78.0 2.77.0 2.76.5 2.76.4 2.76.3 2.76.2 2.76.1 2.76.0 2.75.0 2.74.1 2.74.0 2.73.8 2.73.7 2.73.6 2.73.5 2.73.4 2.73.3 2.73.2 2.73.1 2.73.0 2.72.5 2.72.4 2.72.3 2.72.2 2.72.1 2.72.0 2.71.1 2.71.0 2.70.0 2.69.2 2.69.1 2.69.0 2.68.11 2.68.10

Components-based design system written in elixir

HexDocs

Current section

Files

Jump to
Readme
89 Versions
17 Dependencies
0 Dependants
Files
Activity
moon assets css moon-base.css
Raw

assets/css/moon-base.css 

/* v1.7.3 */

*, ::before, ::after, ::backdrop {

	--authcode-mode-1-border-radius: var(--semantic-dimension-size-xl-border-radius);

	--authcode-mode-1-border-width: var(--semantic-dimension-border-default);

	--avatar-border-width: var(--semantic-dimension-border-default);

	--avatar-size-2xl-border-radius: var(--semantic-dimension-size-2xl-border-radius);

	--avatar-size-lg-border-radius: var(--semantic-dimension-size-lg-border-radius);

	--avatar-size-md-border-radius: var(--semantic-dimension-size-md-border-radius);

	--avatar-size-sm-border-radius: var(--semantic-dimension-size-sm-border-radius);

	--avatar-size-xl-border-radius: var(--semantic-dimension-size-xl-border-radius);

	--avatar-size-xs-border-radius: var(--semantic-dimension-size-xs-border-radius);

	--button-size-default-lg-border-radius: var(--semantic-dimension-size-lg-border-radius);

	--button-size-default-md-border-radius: var(--semantic-dimension-size-md-border-radius);

	--button-size-default-sm-border-radius: var(--semantic-dimension-size-sm-border-radius);

	--button-size-default-xl-border-radius: var(--semantic-dimension-size-xl-border-radius);

	--button-size-default-xs-border-radius: var(--semantic-dimension-size-xs-border-radius);

	--button-size-icon-button-lg-border-radius: var(--dimension-rounded-full);

	--button-size-icon-button-md-border-radius: var(--dimension-rounded-full);

	--button-size-icon-button-sm-border-radius: var(--dimension-rounded-full);

	--button-size-icon-button-xl-border-radius: var(--dimension-rounded-full);

	--button-size-icon-button-xs-border-radius: var(--dimension-rounded-full);

	--checkbox-mode-1-border-radius: var(--dimension-rounded-2);

	--checkbox-mode-1-border-width: var(--semantic-dimension-border-default);

	--checkbox-mode-1-size: var(--dimension-space-20);

	--chip-size-md-border-radius: var(--semantic-dimension-size-md-border-radius);

	--chip-size-sm-border-radius: var(--semantic-dimension-size-sm-border-radius);

	--chip-variant-outline-selected-border-width: var(--semantic-dimension-border-interaction);

	--chip-variant-outline-unselected-border-width: var(--semantic-dimension-border-default);

	--dimension-border-0: 0;

	--dimension-border-1: 1px;

	--dimension-border-2: 2px;

	--dimension-border-4: 4px;

	--dimension-rounded-0: 0;

	--dimension-rounded-12: 12px;

	--dimension-rounded-16: 16px;

	--dimension-rounded-2: 2px;

	--dimension-rounded-20: 20px;

	--dimension-rounded-24: 24px;

	--dimension-rounded-32: 32px;

	--dimension-rounded-4: 4px;

	--dimension-rounded-6: 6px;

	--dimension-rounded-8: 8px;

	--dimension-rounded-full: 9999px;

	--dimension-space--12: -12px;

	--dimension-space--2: -2px;

	--dimension-space--4: -4px;

	--dimension-space-0: 0;

	--dimension-space-1: 1px;

	--dimension-space-10: 10px;

	--dimension-space-104: 104px;

	--dimension-space-112: 112px;

	--dimension-space-12: 12px;

	--dimension-space-120: 120px;

	--dimension-space-128: 128px;

	--dimension-space-136: 136px;

	--dimension-space-14: 14px;

	--dimension-space-144: 144px;

	--dimension-space-152: 152px;

	--dimension-space-16: 16px;

	--dimension-space-160: 160px;

	--dimension-space-18: 18px;

	--dimension-space-2: 2px;

	--dimension-space-20: 20px;

	--dimension-space-24: 24px;

	--dimension-space-28: 28px;

	--dimension-space-32: 32px;

	--dimension-space-36: 36px;

	--dimension-space-4: 4px;

	--dimension-space-40: 40px;

	--dimension-space-48: 48px;

	--dimension-space-56: 56px;

	--dimension-space-6: 6px;

	--dimension-space-64: 64px;

	--dimension-space-72: 72px;

	--dimension-space-8: 8px;

	--dimension-space-80: 80px;

	--dimension-space-88: 88px;

	--dimension-space-96: 96px;

	--effect-opacity-0: 0;

	--effect-opacity-100: 1;

	--effect-opacity-20: 0.2;

	--effect-opacity-40: 0.4;

	--effect-opacity-60: 0.6;

	--effect-opacity-80: 0.8;

	--effect-shadow-100-layer-1-blur: var(--dimension-space-2);

	--effect-shadow-100-layer-1-spread: var(--dimension-space-0);

	--effect-shadow-100-layer-1-x: var(--dimension-space-0);

	--effect-shadow-100-layer-1-y: var(--dimension-space-1);

	--effect-shadow-100-layer-2-blur: var(--dimension-space-0);

	--effect-shadow-100-layer-2-spread: var(--dimension-space-0);

	--effect-shadow-100-layer-2-x: var(--dimension-space-0);

	--effect-shadow-100-layer-2-y: var(--dimension-space-0);

	--effect-shadow-200-layer-1-blur: var(--dimension-space-8);

	--effect-shadow-200-layer-1-spread: var(--dimension-space--4);

	--effect-shadow-200-layer-1-x: var(--dimension-space-0);

	--effect-shadow-200-layer-1-y: var(--dimension-space-4);

	--effect-shadow-200-layer-2-blur: var(--dimension-space-4);

	--effect-shadow-200-layer-2-spread: var(--dimension-space--2);

	--effect-shadow-200-layer-2-x: var(--dimension-space-0);

	--effect-shadow-200-layer-2-y: var(--dimension-space-2);

	--effect-shadow-300-layer-1-blur: var(--dimension-space-16);

	--effect-shadow-300-layer-1-spread: var(--dimension-space--4);

	--effect-shadow-300-layer-1-x: var(--dimension-space-0);

	--effect-shadow-300-layer-1-y: var(--dimension-space-12);

	--effect-shadow-300-layer-2-blur: var(--dimension-space-8);

	--effect-shadow-300-layer-2-spread: var(--dimension-space--2);

	--effect-shadow-300-layer-2-x: var(--dimension-space-0);

	--effect-shadow-300-layer-2-y: var(--dimension-space-4);

	--effect-shadow-400-layer-1-blur: var(--dimension-space-24);

	--effect-shadow-400-layer-1-spread: var(--dimension-space--4);

	--effect-shadow-400-layer-1-x: var(--dimension-space-0);

	--effect-shadow-400-layer-1-y: var(--dimension-space-20);

	--effect-shadow-400-layer-2-blur: var(--dimension-space-8);

	--effect-shadow-400-layer-2-spread: var(--dimension-space--4);

	--effect-shadow-400-layer-2-x: var(--dimension-space-0);

	--effect-shadow-400-layer-2-y: var(--dimension-space-8);

	--effect-shadow-500-layer-1-blur: var(--dimension-space-48);

	--effect-shadow-500-layer-1-spread: var(--dimension-space--12);

	--effect-shadow-500-layer-1-x: var(--dimension-space-0);

	--effect-shadow-500-layer-1-y: var(--dimension-space-24);

	--effect-shadow-500-layer-2-blur: var(--dimension-space-0);

	--effect-shadow-500-layer-2-spread: var(--dimension-space-0);

	--effect-shadow-500-layer-2-x: var(--dimension-space-0);

	--effect-shadow-500-layer-2-y: var(--dimension-space-0);

	--effect-shadow-600-layer-1-blur: var(--dimension-space-64);

	--effect-shadow-600-layer-1-spread: var(--dimension-space--12);

	--effect-shadow-600-layer-1-x: var(--dimension-space-0);

	--effect-shadow-600-layer-1-y: var(--dimension-space-32);

	--effect-shadow-600-layer-2-blur: var(--dimension-space-0);

	--effect-shadow-600-layer-2-spread: var(--dimension-space-0);

	--effect-shadow-600-layer-2-x: var(--dimension-space-0);

	--effect-shadow-600-layer-2-y: var(--dimension-space-0);

	--input-border-width: var(--semantic-dimension-border-default);

	--input-size-lg-border-radius: var(--semantic-dimension-size-lg-border-radius);

	--input-size-md-border-radius: var(--semantic-dimension-size-md-border-radius);

	--input-size-sm-border-radius: var(--semantic-dimension-size-sm-border-radius);

	--input-size-xl-border-radius: var(--semantic-dimension-size-xl-border-radius);

	--radio-mode-1-border-width: var(--semantic-dimension-border-default);

	--radio-mode-1-padding: var(--dimension-space-6);

	--radio-mode-1-size: var(--dimension-space-20);

	--segmented-control-border-width: var(--dimension-border-0);

	--segmented-control-selected-border-width: var(--dimension-border-1);

	--segmented-control-size-segment-md-border-radius: var(--semantic-dimension-size-md-border-radius);

	--segmented-control-size-segment-sm-border-radius: var(--semantic-dimension-size-sm-border-radius);

	--segmented-control-size-track-md-border-radius: var(--dimension-rounded-12);

	--segmented-control-size-track-sm-border-radius: var(--dimension-rounded-8);

	--segmented-control-unselected-border-width: var(--dimension-border-0);

	--select-mode-1-border-width: var(--semantic-dimension-border-default);

	--select-mode-1-size-lg-border-radius: var(--semantic-dimension-size-lg-border-radius);

	--select-mode-1-size-md-border-radius: var(--semantic-dimension-size-md-border-radius);

	--select-mode-1-size-sm-border-radius: var(--semantic-dimension-size-sm-border-radius);

	--select-mode-1-size-xl-border-radius: var(--semantic-dimension-size-xl-border-radius);

	--semantic-dimension-border-default: var(--dimension-border-1);

	--semantic-dimension-border-interactive: var(--dimension-border-1);

	--semantic-dimension-border-none: var(--dimension-border-0);

	--semantic-dimension-size-2xl-border-radius: var(--dimension-rounded-12);

	--semantic-dimension-size-2xl-gap: var(--dimension-space-16);

	--semantic-dimension-size-2xl-height: var(--dimension-space-64);

	--semantic-dimension-size-2xl-icon-size: var(--dimension-space-24);

	--semantic-dimension-size-2xl-padding: var(--dimension-space-20);

	--semantic-dimension-size-2xs-border-radius: var(--dimension-rounded-2);

	--semantic-dimension-size-2xs-gap: var(--dimension-space-2);

	--semantic-dimension-size-2xs-height: var(--dimension-space-16);

	--semantic-dimension-size-2xs-icon-size: var(--dimension-space-10);

	--semantic-dimension-size-2xs-padding: var(--dimension-space-4);

	--semantic-dimension-size-lg-border-radius: var(--dimension-rounded-8);

	--semantic-dimension-size-lg-gap: var(--dimension-space-8);

	--semantic-dimension-size-lg-height: var(--dimension-space-48);

	--semantic-dimension-size-lg-icon-size: var(--dimension-space-20);

	--semantic-dimension-size-lg-padding: var(--dimension-space-12);

	--semantic-dimension-size-md-border-radius: var(--dimension-rounded-8);

	--semantic-dimension-size-md-gap: var(--dimension-space-8);

	--semantic-dimension-size-md-height: var(--dimension-space-40);

	--semantic-dimension-size-md-icon-size: var(--dimension-space-20);

	--semantic-dimension-size-md-padding: var(--dimension-space-10);

	--semantic-dimension-size-sm-border-radius: var(--dimension-rounded-4);

	--semantic-dimension-size-sm-gap: var(--dimension-space-6);

	--semantic-dimension-size-sm-height: var(--dimension-space-32);

	--semantic-dimension-size-sm-icon-size: var(--dimension-space-16);

	--semantic-dimension-size-sm-padding: var(--dimension-space-8);

	--semantic-dimension-size-xl-border-radius: var(--dimension-rounded-8);

	--semantic-dimension-size-xl-gap: var(--dimension-space-12);

	--semantic-dimension-size-xl-height: var(--dimension-space-56);

	--semantic-dimension-size-xl-icon-size: var(--dimension-space-20);

	--semantic-dimension-size-xl-padding: var(--dimension-space-16);

	--semantic-dimension-size-xs-border-radius: var(--dimension-rounded-4);

	--semantic-dimension-size-xs-gap: var(--dimension-space-4);

	--semantic-dimension-size-xs-height: var(--dimension-space-24);

	--semantic-dimension-size-xs-icon-size: var(--dimension-space-12);

	--semantic-dimension-size-xs-padding: var(--dimension-space-6);

	--switch-mode-1-border-width: var(--semantic-dimension-border-default);

	--text-body-100-font-family: var(--text-font-family-primary);

	--text-body-100-font-size: var(--dimension-space-10);

	--text-body-100-font-weight: var(--text-font-weight-regular);

	--text-body-100-line-height: var(--dimension-space-12);

	--text-body-200-font-family: var(--text-font-family-primary);

	--text-body-200-font-size: var(--dimension-space-12);

	--text-body-200-font-weight: var(--text-font-weight-regular);

	--text-body-200-line-height: var(--dimension-space-16);

	--text-body-300-font-family: var(--text-font-family-primary);

	--text-body-300-font-size: var(--dimension-space-14);

	--text-body-300-font-weight: var(--text-font-weight-regular);

	--text-body-300-line-height: var(--dimension-space-20);

	--text-body-400-font-family: var(--text-font-family-primary);

	--text-body-400-font-size: var(--dimension-space-16);

	--text-body-400-font-weight: var(--text-font-weight-regular);

	--text-body-400-line-height: var(--dimension-space-24);

	--text-body-500-font-family: var(--text-font-family-primary);

	--text-body-500-font-size: var(--dimension-space-18);

	--text-body-500-font-weight: var(--text-font-weight-regular);

	--text-body-500-line-height: var(--dimension-space-28);

	--text-font-family-primary: "DM Sans";

	--text-font-family-secondary: "DM Mono";

	--text-font-family-tertiary: "DM Serif Display";

	--text-font-weight-black: 900;

	--text-font-weight-bold: 700;

	--text-font-weight-extra-bold: 800;

	--text-font-weight-extra-light: 200;

	--text-font-weight-light: 300;

	--text-font-weight-medium: 500;

	--text-font-weight-regular: 400;

	--text-font-weight-semi-bold: 600;

	--text-font-weight-thin: 100;

	--text-heading-100-font-family: var(--text-font-family-primary);

	--text-heading-100-font-size: var(--dimension-space-18);

	--text-heading-100-font-weight: var(--text-font-weight-bold);

	--text-heading-100-line-height: var(--dimension-space-28);

	--text-heading-200-font-family: var(--text-font-family-primary);

	--text-heading-200-font-size: var(--dimension-space-24);

	--text-heading-200-font-weight: var(--text-font-weight-bold);

	--text-heading-200-line-height: var(--dimension-space-32);

	--text-heading-300-font-family: var(--text-font-family-secondary);

	--text-heading-300-font-size: var(--dimension-space-36);

	--text-heading-300-font-weight: var(--text-font-weight-bold);

	--text-heading-300-line-height: var(--dimension-space-40);

	--text-heading-400-font-family: var(--text-font-family-secondary);

	--text-heading-400-font-size: var(--dimension-space-48);

	--text-heading-400-font-weight: var(--text-font-weight-bold);

	--text-heading-400-line-height: var(--dimension-space-56);

	--text-heading-500-font-family: var(--text-font-family-secondary);

	--text-heading-500-font-size: var(--dimension-space-72);

	--text-heading-500-font-weight: var(--text-font-weight-bold);

	--text-heading-500-line-height: var(--dimension-space-80);

	--textarea-mode-1-border-radius: var(--semantic-dimension-size-xl-border-radius);

	--textarea-mode-1-border-width: var(--semantic-dimension-border-default);

}



.light-theme, :root.light-theme, .light-theme *::backdrop, .light-theme *::before, .light-theme *::after { 

	--authcode-mode-1-background-color: var(--semantic-color-background-secondary);

	--avatar-background-color: var(--semantic-color-background-secondary);

	--avatar-icon-color: var(--semantic-color-icon-primary);

	--avatar-text-color: var(--semantic-color-text-primary);

	--button-variant-destructive-background-color: var(--semantic-color-background-negative);

	--button-variant-destructive-icon-color: var(--semantic-color-icon-force-light);

	--button-variant-destructive-text-color: var(--semantic-color-text-force-light);

	--button-variant-filled-background-color: var(--semantic-color-background-brand);

	--button-variant-filled-icon-color: var(--semantic-color-icon-force-light);

	--button-variant-filled-text-color: var(--semantic-color-text-force-light);

	--button-variant-ghost-background-color: var(--semantic-color-background-transparent);

	--button-variant-ghost-icon-color: var(--semantic-color-icon-primary);

	--button-variant-ghost-text-color: var(--semantic-color-text-primary);

	--button-variant-outline-background-color: var(--semantic-color-background-transparent);

	--button-variant-outline-border-color: var(--semantic-color-border-secondary);

	--button-variant-outline-icon-color: var(--semantic-color-icon-primary);

	--button-variant-outline-text-color: var(--semantic-color-text-primary);

	--button-variant-tonal-background-color: var(--semantic-color-background-tertiary);

	--button-variant-tonal-icon-color: var(--semantic-color-icon-primary);

	--button-variant-tonal-text-color: var(--semantic-color-text-primary);

	--checkbox-mode-1-selected-background-color: var(--semantic-color-background-active);

	--checkbox-mode-1-selected-icon-color: var(--semantic-color-icon-force-light);

	--checkbox-mode-1-unselected-background-color: var(--semantic-color-background-secondary);

	--chip-variant-ghost-selected-background-color: var(--semantic-color-background-tertiary);

	--chip-variant-ghost-selected-icon-color: var(--semantic-color-icon-primary);

	--chip-variant-ghost-selected-text-color: var(--semantic-color-text-primary);

	--chip-variant-ghost-unselected-background-color: var(--semantic-color-background-transparent);

	--chip-variant-ghost-unselected-icon-color: var(--semantic-color-icon-primary);

	--chip-variant-ghost-unselected-text-color: var(--semantic-color-text-primary);

	--chip-variant-outline-selected-background-color: var(--semantic-color-background-tertiary);

	--chip-variant-outline-selected-border-color: var(--semantic-color-border-active);

	--chip-variant-outline-selected-icon-color: var(--semantic-color-icon-primary);

	--chip-variant-outline-selected-text-color: var(--semantic-color-text-primary);

	--chip-variant-outline-unselected-background-color: var(--semantic-color-background-secondary);

	--chip-variant-outline-unselected-icon-color: var(--semantic-color-icon-primary);

	--chip-variant-outline-unselected-text-color: var(--semantic-color-text-primary);

	--effect-shadow-100-layer-1-color: var(--theme-slate-shadow-200);

	--effect-shadow-100-layer-2-color: var(--theme-slate-shadow-0);

	--effect-shadow-200-layer-1-color: var(--theme-slate-shadow-400);

	--effect-shadow-200-layer-2-color: var(--theme-slate-shadow-100);

	--effect-shadow-300-layer-1-color: var(--theme-slate-shadow-300);

	--effect-shadow-300-layer-2-color: var(--theme-slate-shadow-100);

	--effect-shadow-400-layer-1-color: var(--theme-slate-shadow-300);

	--effect-shadow-400-layer-2-color: var(--theme-slate-shadow-100);

	--effect-shadow-500-layer-1-color: var(--theme-slate-shadow-500);

	--effect-shadow-500-layer-2-color: var(--theme-slate-shadow-0);

	--effect-shadow-600-layer-1-color: var(--theme-slate-shadow-500);

	--effect-shadow-600-layer-2-color: var(--theme-slate-shadow-0);

	--input-background-color: var(--semantic-color-background-secondary);

	--radio-mode-1-selected-background-color: var(--semantic-color-background-active);

	--radio-mode-1-selected-icon-color: var(--semantic-color-icon-force-light);

	--radio-mode-1-unselected-background-color: var(--semantic-color-background-secondary);

	--segmented-control-border-color: var(--semantic-color-border-primary);

	--segmented-control-selected-background-color: var(--semantic-color-background-active);

	--segmented-control-selected-border-color: var(--semantic-color-border-active);

	--segmented-control-selected-icon-color: var(--semantic-color-icon-primary);

	--segmented-control-selected-text-color: var(--semantic-color-text-primary);

	--segmented-control-unselected-background-color: var(--semantic-color-background-tertiary);

	--segmented-control-unselected-border-color: var(--semantic-color-border-secondary);

	--segmented-control-unselected-icon-color: var(--semantic-color-icon-primary);

	--segmented-control-unselected-text-color: var(--semantic-color-text-primary);

	--select-mode-1-background-color: var(--semantic-color-background-secondary);

	--semantic-color-background-active: var(--theme-indigo-9);

	--semantic-color-background-backdrop: var(--theme-slate-alpha-56);

	--semantic-color-background-brand: var(--theme-iris-9);

	--semantic-color-background-brand-subtle: var(--theme-iris-3);

	--semantic-color-background-caution: var(--theme-orange-9);

	--semantic-color-background-discovery: var(--theme-plum-9);

	--semantic-color-background-force-dark: var(--theme-slate-force-dark);

	--semantic-color-background-force-light: var(--theme-slate-force-light);

	--semantic-color-background-hover: var(--theme-slate-alpha-8);

	--semantic-color-background-info: var(--theme-indigo-9);

	--semantic-color-background-inverse: var(--theme-slate-12);

	--semantic-color-background-negative: var(--theme-red-9);

	--semantic-color-background-positive: var(--theme-green-9);

	--semantic-color-background-primary: var(--theme-slate-1);

	--semantic-color-background-secondary: var(--theme-slate-2);

	--semantic-color-background-tertiary: var(--theme-slate-3);

	--semantic-color-background-transparent: var(--theme-slate-alpha-0);

	--semantic-color-border-active: var(--theme-indigo-9);

	--semantic-color-border-brand: var(--theme-iris-9);

	--semantic-color-border-brand-subtle: var(--theme-iris-3);

	--semantic-color-border-caution: var(--theme-orange-9);

	--semantic-color-border-discovery: var(--theme-plum-9);

	--semantic-color-border-force-dark: var(--theme-slate-force-dark);

	--semantic-color-border-force-light: var(--theme-slate-force-light);

	--semantic-color-border-info: var(--theme-indigo-9);

	--semantic-color-border-inverse: var(--theme-slate-12);

	--semantic-color-border-negative: var(--theme-red-9);

	--semantic-color-border-positive: var(--theme-green-9);

	--semantic-color-border-primary: var(--theme-slate-7);

	--semantic-color-border-secondary: var(--theme-slate-6);

	--semantic-color-icon-active: var(--theme-indigo-9);

	--semantic-color-icon-brand: var(--theme-iris-9);

	--semantic-color-icon-caution: var(--theme-orange-9);

	--semantic-color-icon-discovery: var(--theme-plum-9);

	--semantic-color-icon-force-dark: var(--theme-slate-force-dark);

	--semantic-color-icon-force-light: var(--theme-slate-force-light);

	--semantic-color-icon-info: var(--theme-indigo-9);

	--semantic-color-icon-inverse: var(--theme-slate-1);

	--semantic-color-icon-negative: var(--theme-red-9);

	--semantic-color-icon-positive: var(--theme-green-9);

	--semantic-color-icon-primary: var(--theme-slate-12);

	--semantic-color-icon-secondary: var(--theme-slate-11);

	--semantic-color-text-active: var(--theme-indigo-9);

	--semantic-color-text-brand: var(--theme-iris-9);

	--semantic-color-text-caution: var(--theme-orange-9);

	--semantic-color-text-discovery: var(--theme-plum-9);

	--semantic-color-text-force-dark: var(--theme-slate-force-dark);

	--semantic-color-text-force-light: var(--theme-slate-force-light);

	--semantic-color-text-info: var(--theme-indigo-9);

	--semantic-color-text-inverse: var(--theme-slate-1);

	--semantic-color-text-link: var(--theme-indigo-9);

	--semantic-color-text-negative: var(--theme-red-9);

	--semantic-color-text-positive: var(--theme-green-9);

	--semantic-color-text-primary: var(--theme-slate-12);

	--semantic-color-text-secondary: var(--theme-slate-11);

	--semantic-effect-opacity-disabled: var(--effect-opacity-60);

	--semantic-effect-opacity-solid: var(--effect-opacity-100);

	--semantic-effect-opacity-transparent: var(--effect-opacity-0);

	--switch-mode-1-selected-background-color: var(--semantic-color-background-active);

	--switch-mode-1-selected-icon-color: var(--semantic-color-icon-force-light);

	--switch-mode-1-unselected-background-color: var(--semantic-color-background-secondary);

	--switch-mode-1-unselected-icon-color: var(--semantic-color-icon-secondary);

	--textarea-mode-1-background-color: var(--semantic-color-background-secondary);

	--theme-green-1: 251 254 252;

	--theme-green-10: 43 154 102;

	--theme-green-11: 33 131 88;

	--theme-green-12: 25 59 45;

	--theme-green-2: 244 251 246;

	--theme-green-3: 230 246 235;

	--theme-green-4: 214 241 223;

	--theme-green-5: 196 232 209;

	--theme-green-6: 173 221 192;

	--theme-green-7: 142 206 170;

	--theme-green-8: 91 185 139;

	--theme-green-9: 48 164 108;

	--theme-indigo-1: 253 253 254;

	--theme-indigo-10: 51 88 212;

	--theme-indigo-11: 13 116 206;

	--theme-indigo-12: 31 45 92;

	--theme-indigo-2: 247 249 255;

	--theme-indigo-3: 237 242 254;

	--theme-indigo-4: 225 233 255;

	--theme-indigo-5: 210 222 255;

	--theme-indigo-6: 193 208 255;

	--theme-indigo-7: 171 189 249;

	--theme-indigo-8: 141 164 239;

	--theme-indigo-9: 62 99 221;

	--theme-iris-1: 253 253 255;

	--theme-iris-10: 81 81 205;

	--theme-iris-11: 87 83 198;

	--theme-iris-12: 39 41 98;

	--theme-iris-2: 248 248 255;

	--theme-iris-3: 240 241 254;

	--theme-iris-4: 230 231 255;

	--theme-iris-5: 218 220 255;

	--theme-iris-6: 203 205 255;

	--theme-iris-7: 184 186 248;

	--theme-iris-8: 155 158 240;

	--theme-iris-9: 91 91 214;

	--theme-orange-1: 254 252 251;

	--theme-orange-10: 239 95 0;

	--theme-orange-11: 204 78 0;

	--theme-orange-12: 88 45 29;

	--theme-orange-2: 255 247 237;

	--theme-orange-3: 255 239 214;

	--theme-orange-4: 255 223 181;

	--theme-orange-5: 255 209 154;

	--theme-orange-6: 255 193 130;

	--theme-orange-7: 245 174 115;

	--theme-orange-8: 236 148 85;

	--theme-orange-9: 247 107 21;

	--theme-plum-1: 254 252 255;

	--theme-plum-10: 161 68 175;

	--theme-plum-11: 149 62 163;

	--theme-plum-12: 83 25 93;

	--theme-plum-2: 253 247 253;

	--theme-plum-3: 251 235 251;

	--theme-plum-4: 247 222 248;

	--theme-plum-5: 242 209 243;

	--theme-plum-6: 233 194 236;

	--theme-plum-7: 222 173 227;

	--theme-plum-8: 207 145 216;

	--theme-plum-9: 171 74 186;

	--theme-red-1: 255 252 252;

	--theme-red-10: 220 62 66;

	--theme-red-11: 206 44 49;

	--theme-red-12: 100 23 35;

	--theme-red-2: 255 247 247;

	--theme-red-3: 254 235 236;

	--theme-red-4: 255 219 220;

	--theme-red-5: 255 205 206;

	--theme-red-6: 253 189 190;

	--theme-red-7: 244 169 170;

	--theme-red-8: 235 142 144;

	--theme-red-9: 229 72 77;

	--theme-slate-1: 252 252 253;

	--theme-slate-10: 128 131 141;

	--theme-slate-11: 96 100 108;

	--theme-slate-12: 28 32 36;

	--theme-slate-2: 249 249 251;

	--theme-slate-3: 240 240 243;

	--theme-slate-4: 232 232 236;

	--theme-slate-5: 224 225 230;

	--theme-slate-6: 217 217 224;

	--theme-slate-7: 205 206 214;

	--theme-slate-8: 185 187 198;

	--theme-slate-9: 139 141 152;

	--theme-slate-alpha-0: 28 32 36 / 0;

	--theme-slate-alpha-56: 28 32 36 / 0.56;

	--theme-slate-alpha-8: 28 32 36 / 0.08;

	--theme-slate-force-dark: 28 32 36;

	--theme-slate-force-light: 252 252 253;

	--theme-slate-shadow-0: 28 32 36 / 0;

	--theme-slate-shadow-100: 28 32 36 / 0.04;

	--theme-slate-shadow-200: 28 32 36 / 0.06;

	--theme-slate-shadow-300: 28 32 36 / 0.08;

	--theme-slate-shadow-400: 28 32 36 / 0.1;

	--theme-slate-shadow-500: 28 32 36 / 0.16;

}



.dark-theme, :root.dark-theme, .dark-theme *::backdrop, .dark-theme *::before, .dark-theme *::after { 

	--authcode-mode-1-background-color: var(--semantic-color-background-secondary);

	--avatar-background-color: var(--semantic-color-background-secondary);

	--avatar-icon-color: var(--semantic-color-icon-primary);

	--avatar-text-color: var(--semantic-color-text-primary);

	--button-variant-destructive-background-color: var(--semantic-color-background-negative);

	--button-variant-destructive-icon-color: var(--semantic-color-icon-force-light);

	--button-variant-destructive-text-color: var(--semantic-color-text-force-light);

	--button-variant-filled-background-color: var(--semantic-color-background-brand);

	--button-variant-filled-icon-color: var(--semantic-color-icon-force-light);

	--button-variant-filled-text-color: var(--semantic-color-text-force-light);

	--button-variant-ghost-background-color: var(--semantic-color-background-transparent);

	--button-variant-ghost-icon-color: var(--semantic-color-icon-primary);

	--button-variant-ghost-text-color: var(--semantic-color-text-primary);

	--button-variant-outline-background-color: var(--semantic-color-background-transparent);

	--button-variant-outline-border-color: var(--semantic-color-border-secondary);

	--button-variant-outline-icon-color: var(--semantic-color-icon-primary);

	--button-variant-outline-text-color: var(--semantic-color-text-primary);

	--button-variant-tonal-background-color: var(--semantic-color-background-tertiary);

	--button-variant-tonal-icon-color: var(--semantic-color-icon-primary);

	--button-variant-tonal-text-color: var(--semantic-color-text-primary);

	--checkbox-mode-1-selected-background-color: var(--semantic-color-background-active);

	--checkbox-mode-1-selected-icon-color: var(--semantic-color-icon-force-light);

	--checkbox-mode-1-unselected-background-color: var(--semantic-color-background-secondary);

	--chip-variant-ghost-selected-background-color: var(--semantic-color-background-tertiary);

	--chip-variant-ghost-selected-icon-color: var(--semantic-color-icon-primary);

	--chip-variant-ghost-selected-text-color: var(--semantic-color-text-primary);

	--chip-variant-ghost-unselected-background-color: var(--semantic-color-background-transparent);

	--chip-variant-ghost-unselected-icon-color: var(--semantic-color-icon-primary);

	--chip-variant-ghost-unselected-text-color: var(--semantic-color-text-primary);

	--chip-variant-outline-selected-background-color: var(--semantic-color-background-tertiary);

	--chip-variant-outline-selected-border-color: var(--semantic-color-border-active);

	--chip-variant-outline-selected-icon-color: var(--semantic-color-icon-primary);

	--chip-variant-outline-selected-text-color: var(--semantic-color-text-primary);

	--chip-variant-outline-unselected-background-color: var(--semantic-color-background-secondary);

	--chip-variant-outline-unselected-icon-color: var(--semantic-color-icon-primary);

	--chip-variant-outline-unselected-text-color: var(--semantic-color-text-primary);

	--effect-shadow-100-layer-1-color: var(--theme-slate-shadow-200);

	--effect-shadow-100-layer-2-color: var(--theme-slate-shadow-0);

	--effect-shadow-200-layer-1-color: var(--theme-slate-shadow-400);

	--effect-shadow-200-layer-2-color: var(--theme-slate-shadow-100);

	--effect-shadow-300-layer-1-color: var(--theme-slate-shadow-300);

	--effect-shadow-300-layer-2-color: var(--theme-slate-shadow-100);

	--effect-shadow-400-layer-1-color: var(--theme-slate-shadow-300);

	--effect-shadow-400-layer-2-color: var(--theme-slate-shadow-100);

	--effect-shadow-500-layer-1-color: var(--theme-slate-shadow-500);

	--effect-shadow-500-layer-2-color: var(--theme-slate-shadow-0);

	--effect-shadow-600-layer-1-color: var(--theme-slate-shadow-500);

	--effect-shadow-600-layer-2-color: var(--theme-slate-shadow-0);

	--input-background-color: var(--semantic-color-background-secondary);

	--radio-mode-1-selected-background-color: var(--semantic-color-background-active);

	--radio-mode-1-selected-icon-color: var(--semantic-color-icon-force-light);

	--radio-mode-1-unselected-background-color: var(--semantic-color-background-secondary);

	--segmented-control-border-color: var(--semantic-color-border-primary);

	--segmented-control-selected-background-color: var(--semantic-color-background-active);

	--segmented-control-selected-border-color: var(--semantic-color-border-active);

	--segmented-control-selected-icon-color: var(--semantic-color-icon-primary);

	--segmented-control-selected-text-color: var(--semantic-color-text-primary);

	--segmented-control-unselected-background-color: var(--semantic-color-background-tertiary);

	--segmented-control-unselected-border-color: var(--semantic-color-border-secondary);

	--segmented-control-unselected-icon-color: var(--semantic-color-icon-primary);

	--segmented-control-unselected-text-color: var(--semantic-color-text-primary);

	--select-mode-1-background-color: var(--semantic-color-background-secondary);

	--semantic-color-background-active: var(--theme-indigo-9);

	--semantic-color-background-backdrop: var(--theme-slate-alpha-56);

	--semantic-color-background-brand: var(--theme-iris-9);

	--semantic-color-background-brand-subtle: var(--theme-iris-3);

	--semantic-color-background-caution: var(--theme-orange-9);

	--semantic-color-background-discovery: var(--theme-plum-9);

	--semantic-color-background-force-dark: var(--theme-slate-force-dark);

	--semantic-color-background-force-light: var(--theme-slate-force-light);

	--semantic-color-background-hover: var(--theme-slate-alpha-8);

	--semantic-color-background-info: var(--theme-indigo-9);

	--semantic-color-background-inverse: var(--theme-slate-12);

	--semantic-color-background-negative: var(--theme-red-9);

	--semantic-color-background-positive: var(--theme-green-9);

	--semantic-color-background-primary: var(--theme-slate-1);

	--semantic-color-background-secondary: var(--theme-slate-2);

	--semantic-color-background-tertiary: var(--theme-slate-3);

	--semantic-color-background-transparent: var(--theme-slate-alpha-0);

	--semantic-color-border-active: var(--theme-indigo-9);

	--semantic-color-border-brand: var(--theme-iris-9);

	--semantic-color-border-brand-subtle: var(--theme-iris-3);

	--semantic-color-border-caution: var(--theme-orange-9);

	--semantic-color-border-discovery: var(--theme-plum-9);

	--semantic-color-border-force-dark: var(--theme-slate-force-dark);

	--semantic-color-border-force-light: var(--theme-slate-force-light);

	--semantic-color-border-info: var(--theme-indigo-9);

	--semantic-color-border-inverse: var(--theme-slate-12);

	--semantic-color-border-negative: var(--theme-red-9);

	--semantic-color-border-positive: var(--theme-green-9);

	--semantic-color-border-primary: var(--theme-slate-7);

	--semantic-color-border-secondary: var(--theme-slate-6);

	--semantic-color-icon-active: var(--theme-indigo-9);

	--semantic-color-icon-brand: var(--theme-iris-9);

	--semantic-color-icon-caution: var(--theme-orange-9);

	--semantic-color-icon-discovery: var(--theme-plum-9);

	--semantic-color-icon-force-dark: var(--theme-slate-force-dark);

	--semantic-color-icon-force-light: var(--theme-slate-force-light);

	--semantic-color-icon-info: var(--theme-indigo-9);

	--semantic-color-icon-inverse: var(--theme-slate-1);

	--semantic-color-icon-negative: var(--theme-red-9);

	--semantic-color-icon-positive: var(--theme-green-9);

	--semantic-color-icon-primary: var(--theme-slate-12);

	--semantic-color-icon-secondary: var(--theme-slate-11);

	--semantic-color-text-active: var(--theme-indigo-9);

	--semantic-color-text-brand: var(--theme-iris-9);

	--semantic-color-text-caution: var(--theme-orange-9);

	--semantic-color-text-discovery: var(--theme-plum-9);

	--semantic-color-text-force-dark: var(--theme-slate-force-dark);

	--semantic-color-text-force-light: var(--theme-slate-force-light);

	--semantic-color-text-info: var(--theme-indigo-9);

	--semantic-color-text-inverse: var(--theme-slate-1);

	--semantic-color-text-link: var(--theme-indigo-9);

	--semantic-color-text-negative: var(--theme-red-9);

	--semantic-color-text-positive: var(--theme-green-9);

	--semantic-color-text-primary: var(--theme-slate-12);

	--semantic-color-text-secondary: var(--theme-slate-11);

	--semantic-effect-opacity-disabled: var(--effect-opacity-60);

	--semantic-effect-opacity-solid: var(--effect-opacity-100);

	--semantic-effect-opacity-transparent: var(--effect-opacity-0);

	--switch-mode-1-selected-background-color: var(--semantic-color-background-active);

	--switch-mode-1-selected-icon-color: var(--semantic-color-icon-force-light);

	--switch-mode-1-unselected-background-color: var(--semantic-color-background-secondary);

	--switch-mode-1-unselected-icon-color: var(--semantic-color-icon-secondary);

	--textarea-mode-1-background-color: var(--semantic-color-background-secondary);

	--theme-green-1: 14 21 18;

	--theme-green-10: 51 176 116;

	--theme-green-11: 61 214 140;

	--theme-green-12: 177 241 203;

	--theme-green-2: 18 27 23;

	--theme-green-3: 19 45 33;

	--theme-green-4: 17 59 41;

	--theme-green-5: 23 73 51;

	--theme-green-6: 32 87 62;

	--theme-green-7: 40 104 74;

	--theme-green-8: 47 124 87;

	--theme-green-9: 48 164 108;

	--theme-indigo-1: 17 19 31;

	--theme-indigo-10: 84 114 228;

	--theme-indigo-11: 158 177 255;

	--theme-indigo-12: 214 225 255;

	--theme-indigo-2: 20 23 38;

	--theme-indigo-3: 24 36 73;

	--theme-indigo-4: 29 46 98;

	--theme-indigo-5: 37 57 116;

	--theme-indigo-6: 48 67 132;

	--theme-indigo-7: 58 79 151;

	--theme-indigo-8: 67 93 177;

	--theme-indigo-9: 62 99 221;

	--theme-iris-1: 19 19 30;

	--theme-iris-10: 110 106 222;

	--theme-iris-11: 177 169 255;

	--theme-iris-12: 224 223 254;

	--theme-iris-2: 23 22 37;

	--theme-iris-3: 32 34 72;

	--theme-iris-4: 38 42 101;

	--theme-iris-5: 48 51 116;

	--theme-iris-6: 61 62 130;

	--theme-iris-7: 74 74 149;

	--theme-iris-8: 89 88 177;

	--theme-iris-9: 91 91 214;

	--theme-orange-1: 23 18 14;

	--theme-orange-10: 255 128 31;

	--theme-orange-11: 255 160 87;

	--theme-orange-12: 255 224 194;

	--theme-orange-2: 30 22 15;

	--theme-orange-3: 51 30 11;

	--theme-orange-4: 70 33 0;

	--theme-orange-5: 86 40 0;

	--theme-orange-6: 102 53 12;

	--theme-orange-7: 126 69 29;

	--theme-orange-8: 163 88 41;

	--theme-orange-9: 247 107 21;

	--theme-plum-1: 24 17 24;

	--theme-plum-10: 182 88 196;

	--theme-plum-11: 231 150 243;

	--theme-plum-12: 244 212 244;

	--theme-plum-2: 32 19 32;

	--theme-plum-3: 53 26 53;

	--theme-plum-4: 69 29 71;

	--theme-plum-5: 81 36 84;

	--theme-plum-6: 94 48 97;

	--theme-plum-7: 115 64 121;

	--theme-plum-8: 146 84 156;

	--theme-plum-9: 171 74 186;

	--theme-red-1: 25 17 17;

	--theme-red-10: 236 93 94;

	--theme-red-11: 255 149 146;

	--theme-red-12: 255 209 217;

	--theme-red-2: 32 19 20;

	--theme-red-3: 59 18 25;

	--theme-red-4: 80 15 28;

	--theme-red-5: 97 22 35;

	--theme-red-6: 114 35 45;

	--theme-red-7: 140 51 58;

	--theme-red-8: 181 69 72;

	--theme-red-9: 229 72 77;

	--theme-slate-1: 17 17 19;

	--theme-slate-10: 119 123 132;

	--theme-slate-11: 176 180 186;

	--theme-slate-12: 237 238 240;

	--theme-slate-2: 24 25 27;

	--theme-slate-3: 33 34 37;

	--theme-slate-4: 39 42 45;

	--theme-slate-5: 46 49 53;

	--theme-slate-6: 54 58 63;

	--theme-slate-7: 67 72 78;

	--theme-slate-8: 90 97 105;

	--theme-slate-9: 105 110 119;

	--theme-slate-alpha-0: 237 238 240 / 0;

	--theme-slate-alpha-56: 17 17 19 / 0.56;

	--theme-slate-alpha-8: 237 238 240 / 0.08;

	--theme-slate-force-dark: 17 17 19;

	--theme-slate-force-light: 237 238 240;

	--theme-slate-shadow-0: 0 0 0 / 0;

	--theme-slate-shadow-100: 0 0 0 / 0.16;

	--theme-slate-shadow-200: 0 0 0 / 0.24;

	--theme-slate-shadow-300: 0 0 0 / 0.32;

	--theme-slate-shadow-400: 0 0 0 / 0.4;

	--theme-slate-shadow-500: 0 0 0 / 0.64;

}