@vector-im/compound-design-tokens
Version:
Compound design tokens
91 lines (90 loc) • 6.16 kB
CSS
:root, [class*="cpd-theme-"] {
--cpd-color-text-primary: var(--cpd-color-gray-1400);
--cpd-color-text-secondary: var(--cpd-color-gray-900);
--cpd-color-text-disabled: var(--cpd-color-gray-800);
--cpd-color-text-action-primary: var(--cpd-color-gray-1400);
--cpd-color-text-action-accent: var(--cpd-color-green-900);
--cpd-color-text-link-external: var(--cpd-color-blue-1100);
--cpd-color-text-critical-primary: var(--cpd-color-red-900);
--cpd-color-text-success-primary: var(--cpd-color-green-900);
--cpd-color-text-info-primary: var(--cpd-color-blue-1100);
--cpd-color-text-on-solid-primary: var(--cpd-color-theme-bg);
--cpd-color-text-decorative-1: var(--cpd-color-lime-1100);
--cpd-color-text-decorative-2: var(--cpd-color-cyan-1100);
--cpd-color-text-decorative-3: var(--cpd-color-fuchsia-1100);
--cpd-color-text-decorative-4: var(--cpd-color-purple-1100);
--cpd-color-text-decorative-5: var(--cpd-color-pink-1100);
--cpd-color-text-decorative-6: var(--cpd-color-orange-1100);
--cpd-color-text-badge-accent: var(--cpd-color-green-1100);
--cpd-color-text-badge-info: var(--cpd-color-blue-1100);
--cpd-color-bg-subtle-primary: var(--cpd-color-gray-400);
--cpd-color-bg-subtle-secondary: var(--cpd-color-gray-300);
--cpd-color-bg-canvas-default: var(--cpd-color-theme-bg);
--cpd-color-bg-canvas-disabled: var(--cpd-color-gray-200);
--cpd-color-bg-action-primary-rest: var(--cpd-color-gray-1400);
--cpd-color-bg-action-primary-hovered: var(--cpd-color-gray-1200);
--cpd-color-bg-action-primary-pressed: var(--cpd-color-gray-1100);
--cpd-color-bg-action-primary-disabled: var(--cpd-color-gray-700);
--cpd-color-bg-action-secondary-rest: var(--cpd-color-theme-bg);
--cpd-color-bg-action-secondary-hovered: var(--cpd-color-alpha-gray-200);
--cpd-color-bg-action-secondary-pressed: var(--cpd-color-alpha-gray-300);
--cpd-color-bg-action-tertiary-rest: var(--cpd-color-theme-bg);
--cpd-color-bg-action-tertiary-hovered: var(--cpd-color-gray-300);
--cpd-color-bg-action-tertiary-selected: var(--cpd-color-gray-400);
--cpd-color-bg-critical-primary: var(--cpd-color-red-900);
--cpd-color-bg-critical-hovered: var(--cpd-color-red-1000);
--cpd-color-bg-critical-subtle: var(--cpd-color-red-200);
--cpd-color-bg-critical-subtle-hovered: var(--cpd-color-red-300);
--cpd-color-bg-success-subtle: var(--cpd-color-green-200);
--cpd-color-bg-info-subtle: var(--cpd-color-blue-200);
--cpd-color-bg-decorative-1: var(--cpd-color-lime-300);
--cpd-color-bg-decorative-2: var(--cpd-color-cyan-300);
--cpd-color-bg-decorative-3: var(--cpd-color-fuchsia-300);
--cpd-color-bg-decorative-4: var(--cpd-color-purple-300);
--cpd-color-bg-decorative-5: var(--cpd-color-pink-300);
--cpd-color-bg-decorative-6: var(--cpd-color-orange-300);
--cpd-color-bg-accent-rest: var(--cpd-color-green-900);
--cpd-color-bg-accent-hovered: var(--cpd-color-green-1000);
--cpd-color-bg-accent-pressed: var(--cpd-color-green-1100);
--cpd-color-bg-accent-selected: var(--cpd-color-alpha-green-300);
--cpd-color-border-disabled: var(--cpd-color-gray-500);
--cpd-color-border-focused: var(--cpd-color-blue-900);
--cpd-color-border-interactive-primary: var(--cpd-color-gray-800);
--cpd-color-border-interactive-secondary: var(--cpd-color-gray-600);
--cpd-color-border-interactive-hovered: var(--cpd-color-gray-1100);
--cpd-color-border-critical-primary: var(--cpd-color-red-900);
--cpd-color-border-critical-hovered: var(--cpd-color-red-1000);
--cpd-color-border-critical-subtle: var(--cpd-color-red-500);
--cpd-color-border-success-subtle: var(--cpd-color-green-500);
--cpd-color-border-info-subtle: var(--cpd-color-blue-700);
--cpd-color-border-accent-subtle: var(--cpd-color-green-700);
--cpd-color-icon-primary: var(--cpd-color-gray-1400);
--cpd-color-icon-secondary: var(--cpd-color-gray-900);
--cpd-color-icon-tertiary: var(--cpd-color-gray-800);
--cpd-color-icon-quaternary: var(--cpd-color-gray-700);
--cpd-color-icon-disabled: var(--cpd-color-gray-700);
--cpd-color-icon-primary-alpha: var(--cpd-color-alpha-gray-1400);
--cpd-color-icon-secondary-alpha: var(--cpd-color-alpha-gray-900);
--cpd-color-icon-tertiary-alpha: var(--cpd-color-alpha-gray-800);
--cpd-color-icon-quaternary-alpha: var(--cpd-color-alpha-gray-700);
--cpd-color-icon-accent-tertiary: var(--cpd-color-green-800);
--cpd-color-icon-accent-primary: var(--cpd-color-green-900);
--cpd-color-icon-critical-primary: var(--cpd-color-red-900);
--cpd-color-icon-success-primary: var(--cpd-color-green-900);
--cpd-color-icon-info-primary: var(--cpd-color-blue-1100);
--cpd-color-icon-on-solid-primary: var(--cpd-color-theme-bg);
--cpd-color-gradient-subtle-stop1: var(--cpd-color-alpha-green-500);
--cpd-color-gradient-subtle-stop2: var(--cpd-color-alpha-green-400);
--cpd-color-gradient-subtle-stop3: var(--cpd-color-alpha-green-300);
--cpd-color-gradient-subtle-stop4: var(--cpd-color-alpha-green-200);
--cpd-color-gradient-subtle-stop5: var(--cpd-color-alpha-green-100);
--cpd-color-gradient-subtle-stop6: var(--cpd-color-transparent);
--cpd-color-gradient-info-stop1: var(--cpd-color-alpha-blue-500);
--cpd-color-gradient-info-stop2: var(--cpd-color-alpha-blue-400);
--cpd-color-gradient-info-stop3: var(--cpd-color-alpha-blue-300);
--cpd-color-gradient-info-stop4: var(--cpd-color-alpha-blue-200);
--cpd-color-gradient-info-stop5: var(--cpd-color-alpha-blue-100);
--cpd-color-gradient-info-stop6: var(--cpd-color-transparent);
--cpd-color-gradient-subtle-linear: linear-gradient(180deg, var(--cpd-color-gradient-subtle-stop1) 0%, var(--cpd-color-gradient-subtle-stop2) 20%, var(--cpd-color-gradient-subtle-stop3) 40%, var(--cpd-color-gradient-subtle-stop4) 60%, var(--cpd-color-gradient-subtle-stop5) 80%, var(--cpd-color-gradient-subtle-stop6) 100%);
--cpd-color-gradient-info-linear: linear-gradient(180deg, var(--cpd-color-gradient-info-stop1) 0%, var(--cpd-color-gradient-info-stop2) 20%, var(--cpd-color-gradient-info-stop3) 40%, var(--cpd-color-gradient-info-stop4) 60%, var(--cpd-color-gradient-info-stop5) 80%, var(--cpd-color-gradient-info-stop6) 100%);
}