@jablonowski/dsb-tokens 1.0.1 → 1.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/dist/css/variables.css +294 -131
  2. package/dist/js/tokens.js +295 -138
  3. package/dist/json/tokens.json +514 -164
  4. package/dist/scss/_variables.scss +294 -131
  5. package/dist/ts/tokens.d.ts +355 -131
  6. package/dist/ts/tokens.ts +295 -138
  7. package/package.json +6 -2
  8. package/scripts/validate-json.js +31 -0
  9. package/scripts/validate-schema.js +137 -0
  10. package/test/tokens.test.js +179 -0
  11. package/tokens/tokens.json +562 -0
  12. package/tokens.md +10 -10
  13. package/tokens/border.json +0 -18
  14. package/tokens/breakpoint.json +0 -10
  15. package/tokens/color.json +0 -100
  16. package/tokens/elevation.json +0 -11
  17. package/tokens/spacing.json +0 -14
  18. package/tokens/typography.json +0 -38
package/dist/css/variables.css CHANGED
@@ -3,135 +3,298 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --ds-border-width-none: 0;
7
- --ds-border-width-thin: 1px;
8
- --ds-border-width-medium: 2px;
9
- --ds-border-width-thick: 4px;
10
- --ds-border-radius-none: 0;
11
- --ds-border-radius-sm: 0.25rem;
12
- --ds-border-radius-md: 0.5rem;
13
- --ds-border-radius-lg: 1rem;
14
- --ds-border-radius-xl: 1.5rem;
15
- --ds-border-radius-full: 9999px;
16
- --ds-breakpoint-xs: 0;
17
- --ds-breakpoint-sm: 576px;
18
- --ds-breakpoint-md: 768px;
19
- --ds-breakpoint-lg: 992px;
20
- --ds-breakpoint-xl: 1200px;
21
- --ds-breakpoint-2xl: 1400px;
22
- --ds-color-primary-50: #e8f5e9;
23
- --ds-color-primary-100: #c8e6c9;
24
- --ds-color-primary-200: #a5d6a7;
25
- --ds-color-primary-300: #81c784;
26
- --ds-color-primary-400: #66bb6a;
27
- --ds-color-primary-500: #4caf50;
28
- --ds-color-primary-600: #43a047;
29
- --ds-color-primary-700: #388e3c;
30
- --ds-color-primary-800: #2e7d32;
31
- --ds-color-primary-900: #1b5e20;
32
- --ds-color-primary-contrast-50: rgba(0, 0, 0, 0.87);
33
- --ds-color-primary-contrast-100: rgba(0, 0, 0, 0.87);
34
- --ds-color-primary-contrast-200: rgba(0, 0, 0, 0.87);
35
- --ds-color-primary-contrast-300: rgba(0, 0, 0, 0.87);
36
- --ds-color-primary-contrast-400: rgba(0, 0, 0, 0.87);
37
- --ds-color-primary-contrast-500: #ffffff;
38
- --ds-color-primary-contrast-600: #ffffff;
39
- --ds-color-primary-contrast-700: #ffffff;
40
- --ds-color-primary-contrast-800: #ffffff;
41
- --ds-color-primary-contrast-900: #ffffff;
42
- --ds-color-secondary-50: #eae7f6;
43
- --ds-color-secondary-100: #c5bfe8;
44
- --ds-color-secondary-200: #9f96d9;
45
- --ds-color-secondary-300: #7a6ecb;
46
- --ds-color-secondary-400: #6050c0;
47
- --ds-color-secondary-500: #525199;
48
- --ds-color-secondary-600: #49488a;
49
- --ds-color-secondary-700: #3e3d75;
50
- --ds-color-secondary-800: #333261;
51
- --ds-color-secondary-900: #23213f;
52
- --ds-color-secondary-contrast-50: rgba(0, 0, 0, 0.87);
53
- --ds-color-secondary-contrast-100: rgba(0, 0, 0, 0.87);
54
- --ds-color-secondary-contrast-200: rgba(0, 0, 0, 0.87);
55
- --ds-color-secondary-contrast-300: rgba(0, 0, 0, 0.87);
56
- --ds-color-secondary-contrast-400: #ffffff;
57
- --ds-color-secondary-contrast-500: #ffffff;
58
- --ds-color-secondary-contrast-600: #ffffff;
59
- --ds-color-secondary-contrast-700: #ffffff;
60
- --ds-color-secondary-contrast-800: #ffffff;
61
- --ds-color-secondary-contrast-900: #ffffff;
62
- --ds-color-neutral-0: #ffffff;
63
- --ds-color-neutral-50: #f5f5f5;
64
- --ds-color-neutral-100: #eeeeee;
65
- --ds-color-neutral-200: #e0e0e0;
66
- --ds-color-neutral-300: #bdbdbd;
67
- --ds-color-neutral-400: #9e9e9e;
68
- --ds-color-neutral-500: #757575;
69
- --ds-color-neutral-600: #616161;
70
- --ds-color-neutral-700: #424242;
71
- --ds-color-neutral-800: #303030;
72
- --ds-color-neutral-900: #1a1a1a;
73
- --ds-color-success-light: #e8f5e9;
74
- --ds-color-success-main: #4caf50;
75
- --ds-color-success-dark: #1b5e20;
76
- --ds-color-warning-light: #fff8e1;
77
- --ds-color-warning-main: #ff9800;
78
- --ds-color-warning-dark: #e65100;
79
- --ds-color-error-light: #ffebee;
80
- --ds-color-error-main: #d32f2f;
81
- --ds-color-error-dark: #b71c1c;
82
- --ds-color-info-light: #e3f2fd;
83
- --ds-color-info-main: #1976d2;
84
- --ds-color-info-dark: #0d47a1;
85
- --ds-color-background-primary: #ffffff;
86
- --ds-color-background-secondary: #f5f5f5;
87
- --ds-color-background-dark: #2D2926;
88
- --ds-color-text-primary: #1a1a1a;
89
- --ds-color-text-secondary: #616161;
90
- --ds-color-text-disabled: #9e9e9e;
91
- --ds-color-text-inverse: #ffffff;
92
- --ds-elevation-none: none;
93
- --ds-elevation-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
94
- --ds-elevation-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.06);
95
- --ds-elevation-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.06);
96
- --ds-elevation-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.06);
97
- --ds-elevation-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.06);
98
- --ds-elevation-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
99
- --ds-spacing-none: 0;
100
- --ds-spacing-2xs: 0.125rem;
101
- --ds-spacing-xs: 0.25rem;
102
- --ds-spacing-sm: 0.5rem;
103
- --ds-spacing-md: 1rem;
104
- --ds-spacing-lg: 1.5rem;
105
- --ds-spacing-xl: 2rem;
106
- --ds-spacing-2xl: 3rem;
107
- --ds-spacing-3xl: 4rem;
108
- --ds-spacing-4xl: 6rem;
109
- --ds-font-family-base: 'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
110
- --ds-font-family-heading: 'ING Me', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
111
- --ds-font-family-monospace: 'SF Mono', 'Fira Code', 'Courier New', monospace;
112
- --ds-font-size-xs: 0.75rem;
113
- --ds-font-size-sm: 0.875rem;
114
- --ds-font-size-base: 1rem;
115
- --ds-font-size-md: 1.125rem;
116
- --ds-font-size-lg: 1.25rem;
117
- --ds-font-size-xl: 1.5rem;
118
- --ds-font-size-2xl: 1.875rem;
119
- --ds-font-size-3xl: 2.25rem;
120
- --ds-font-size-4xl: 3rem;
121
- --ds-font-weight-light: 300;
122
- --ds-font-weight-regular: 400;
123
- --ds-font-weight-medium: 500;
124
- --ds-font-weight-semibold: 600;
125
- --ds-font-weight-bold: 700;
126
- --ds-font-line-height-tight: 1.25;
127
- --ds-font-line-height-base: 1.5;
128
- --ds-font-line-height-loose: 1.75;
129
- --ds-font-letter-spacing-tight: -0.025em;
130
- --ds-font-letter-spacing-normal: 0em;
131
- --ds-font-letter-spacing-wide: 0.025em;
132
- --ds-font-letter-spacing-wider: 0.05em;
133
- --ds-color-primary-base: var(--ds-color-primary-500);
134
- --ds-color-primary-light: var(--ds-color-primary-300);
135
- --ds-color-primary-dark: var(--ds-color-primary-700);
136
- --ds-color-success-base: var(--ds-color-success-main);
6
+ --ds-color-options-neutral-0: #ffffff;
7
+ --ds-color-options-neutral-50: #fafafa;
8
+ --ds-color-options-neutral-75: #f7f7f7;
9
+ --ds-color-options-neutral-100: #f5f5f5;
10
+ --ds-color-options-neutral-150: #f0f0f0;
11
+ --ds-color-options-neutral-200: #ebebeb;
12
+ --ds-color-options-neutral-300: #e8e8e8;
13
+ --ds-color-options-neutral-350: #d4d4d4;
14
+ --ds-color-options-neutral-400: #c0c0c0;
15
+ --ds-color-options-neutral-450: #bbbbbb;
16
+ --ds-color-options-neutral-500: #aaaaaa;
17
+ --ds-color-options-neutral-550: #999999;
18
+ --ds-color-options-neutral-600: #888888;
19
+ --ds-color-options-neutral-650: #666666;
20
+ --ds-color-options-neutral-700: #555555;
21
+ --ds-color-options-neutral-800: #333333;
22
+ --ds-color-options-neutral-900: #111111;
23
+ --ds-color-options-neutral-1000: #000000;
24
+ --ds-color-options-red-50: #fef2f2;
25
+ --ds-color-options-red-100: #fce8e6;
26
+ --ds-color-options-red-200: #f0a9a4;
27
+ --ds-color-options-red-500: #d93025;
28
+ --ds-color-options-red-600: #c5221f;
29
+ --ds-color-options-red-700: #b0261e;
30
+ --ds-color-options-green-50: #e6f4ea;
31
+ --ds-color-options-green-700: #1a7f3c;
32
+ --ds-color-options-yellow-50: #fef3cd;
33
+ --ds-color-options-yellow-700: #92600a;
34
+ --ds-color-options-blue-50: #e8f0fe;
35
+ --ds-color-options-blue-700: #1a56db;
36
+ --ds-color-options-black-a40: rgba(0, 0, 0, 0.4);
37
+ --ds-color-options-black-a06: rgba(0, 0, 0, 0.06);
38
+ --ds-color-options-black-a08: rgba(0, 0, 0, 0.08);
39
+ --ds-color-options-black-a14: rgba(0, 0, 0, 0.14);
40
+ --ds-color-options-red-a10: rgba(217, 48, 37, 0.1);
41
+ --ds-font-size-options-11: 11px;
42
+ --ds-font-size-options-12: 12px;
43
+ --ds-font-size-options-13: 13px;
44
+ --ds-font-size-options-14: 14px;
45
+ --ds-font-size-options-15: 15px;
46
+ --ds-font-size-options-16: 16px;
47
+ --ds-font-weight-options-medium: 500;
48
+ --ds-font-weight-options-semibold: 600;
49
+ --ds-border-width-options-1: 1px;
50
+ --ds-border-width-options-2: 2px;
51
+ --ds-border-width-options-1-5: 1.5px;
52
+ --ds-border-radius-options-3: 3px;
53
+ --ds-border-radius-options-4: 4px;
54
+ --ds-border-radius-options-5: 5px;
55
+ --ds-border-radius-options-6: 6px;
56
+ --ds-border-radius-options-8: 8px;
57
+ --ds-border-radius-options-10: 10px;
58
+ --ds-border-radius-options-full: 50%;
59
+ --ds-duration-options-fast: 0.1s;
60
+ --ds-duration-options-base: 0.12s;
61
+ --ds-duration-options-slow: 0.2s;
62
+ --ds-easing-options-standard: ease;
63
+ --ds-opacity-options-disabled: 0.42;
64
+ --ds-z-options-100: 100;
65
+ --ds-z-options-1000: 1000;
66
+ --ds-component-button-ghost-background: transparent;
67
+ --ds-shadow-options-focus-neutral: 0 0 0 3px var(--ds-color-options-black-a06);
68
+ --ds-shadow-options-focus-error: 0 0 0 3px var(--ds-color-options-red-a10);
69
+ --ds-shadow-options-dropdown: 0 4px 12px var(--ds-color-options-black-a08);
70
+ --ds-shadow-options-modal: 0 8px 32px var(--ds-color-options-black-a14);
71
+ --ds-decisions-color-text-primary: var(--ds-color-options-neutral-900); /** Primary body text, labels, headings */
72
+ --ds-decisions-color-text-body: var(--ds-color-options-neutral-800); /** Secondary body text, table cells */
73
+ --ds-decisions-color-text-secondary: var(--ds-color-options-neutral-700); /** De-emphasised text — ghost button, captions */
74
+ --ds-decisions-color-text-muted: var(--ds-color-options-neutral-650); /** Quiet text — links, descriptions */
75
+ --ds-decisions-color-text-subtle: var(--ds-color-options-neutral-600); /** Placeholder-level text — hints, metadata */
76
+ --ds-decisions-color-text-placeholder: var(--ds-color-options-neutral-500); /** Input placeholder, empty states */
77
+ --ds-decisions-color-text-disabled: var(--ds-color-options-neutral-550); /** Disabled control text */
78
+ --ds-decisions-color-text-inverse: var(--ds-color-options-neutral-0); /** Text on dark/filled backgrounds */
79
+ --ds-decisions-color-surface-base: var(--ds-color-options-neutral-0); /** Default control and card background */
80
+ --ds-decisions-color-surface-subtle: var(--ds-color-options-neutral-50); /** Recessed surfaces — table header, striped rows */
81
+ --ds-decisions-color-surface-hover: var(--ds-color-options-neutral-100); /** Hover background for interactive elements */
82
+ --ds-decisions-color-surface-row-hover: var(--ds-color-options-neutral-75); /** Table row hover */
83
+ --ds-decisions-color-surface-selected: var(--ds-color-options-neutral-150); /** Selected option in dropdown/menu */
84
+ --ds-decisions-color-surface-avatar: var(--ds-color-options-neutral-300); /** Avatar initials background */
85
+ --ds-decisions-color-border-control: var(--ds-color-options-neutral-350); /** Default border on interactive controls */
86
+ --ds-decisions-color-border-control-hover: var(--ds-color-options-neutral-450); /** Hovered control border */
87
+ --ds-decisions-color-border-subtle: var(--ds-color-options-neutral-200); /** Layout dividers — header, footer, table wrap */
88
+ --ds-decisions-color-border-hairline: var(--ds-color-options-neutral-150); /** Faint inner dividers — table cells, list rows */
89
+ --ds-decisions-color-border-separator: var(--ds-color-options-neutral-400); /** Inline separators — breadcrumbs chevron */
90
+ --ds-decisions-color-overlay-backdrop: var(--ds-color-options-black-a40); /** Modal/drawer backdrop scrim */
91
+ --ds-decisions-color-feedback-error-text: var(--ds-color-options-red-600); /** Error text and labels */
92
+ --ds-decisions-color-feedback-error-icon: var(--ds-color-options-red-500); /** Error icon and border */
93
+ --ds-decisions-color-feedback-error-icon-hover: var(--ds-color-options-red-700); /** Error border on hover */
94
+ --ds-decisions-color-feedback-error-surface: var(--ds-color-options-red-100); /** Error tinted background */
95
+ --ds-decisions-color-feedback-error-surface-hover: var(--ds-color-options-red-50); /** Error surface on hover */
96
+ --ds-decisions-color-feedback-error-border: var(--ds-color-options-red-200); /** Soft error border — danger button default */
97
+ --ds-decisions-color-feedback-success-text: var(--ds-color-options-green-700); /** Success text and icon */
98
+ --ds-decisions-color-feedback-success-surface: var(--ds-color-options-green-50); /** Success tinted background */
99
+ --ds-decisions-color-feedback-warning-text: var(--ds-color-options-yellow-700); /** Warning text and icon */
100
+ --ds-decisions-color-feedback-warning-surface: var(--ds-color-options-yellow-50); /** Warning tinted background */
101
+ --ds-decisions-color-feedback-info-text: var(--ds-color-options-blue-700); /** Info text and icon */
102
+ --ds-decisions-color-feedback-info-surface: var(--ds-color-options-blue-50); /** Info tinted background */
103
+ --ds-decisions-font-size-2xs: var(--ds-font-size-options-11); /** Table column headers, smallest labels */
104
+ --ds-decisions-font-size-xs: var(--ds-font-size-options-12); /** Hints, error messages, secondary meta */
105
+ --ds-decisions-font-size-sm: var(--ds-font-size-options-13); /** Labels, nav links, footer text */
106
+ --ds-decisions-font-size-md: var(--ds-font-size-options-14); /** Default body and control text */
107
+ --ds-decisions-font-size-lg: var(--ds-font-size-options-15); /** Large controls, brand name */
108
+ --ds-decisions-font-size-xl: var(--ds-font-size-options-16); /** Dialog titles, section headings */
109
+ --ds-decisions-font-weight-medium: var(--ds-font-weight-options-medium); /** Labels, interactive text, active items */
110
+ --ds-decisions-font-weight-semibold: var(--ds-font-weight-options-semibold); /** Headings, modal titles, column headers */
111
+ --ds-decisions-border-width-hairline: var(--ds-border-width-options-1); /** Layout dividers */
112
+ --ds-decisions-border-width-control: var(--ds-border-width-options-1-5); /** Interactive control borders */
113
+ --ds-decisions-border-width-focus: var(--ds-border-width-options-2); /** Focus outline width */
114
+ --ds-decisions-border-radius-xs: var(--ds-border-radius-options-3); /** Inline link focus, small badges */
115
+ --ds-decisions-border-radius-sm: var(--ds-border-radius-options-4); /** Tags, checkboxes, small chips */
116
+ --ds-decisions-border-radius-md: var(--ds-border-radius-options-5); /** Nav items, small buttons */
117
+ --ds-decisions-border-radius-lg: var(--ds-border-radius-options-6); /** Standard controls — buttons, inputs, dropdowns */
118
+ --ds-decisions-border-radius-xl: var(--ds-border-radius-options-8); /** Cards, table wrappers, bordered lists */
119
+ --ds-decisions-border-radius-2xl: var(--ds-border-radius-options-10); /** Modal panels, large cards */
120
+ --ds-decisions-border-radius-full: var(--ds-border-radius-options-full); /** Pill shapes, avatars, radio dots */
121
+ --ds-decisions-motion-duration-fast: var(--ds-duration-options-fast); /** Micro-interactions — row/option bg */
122
+ --ds-decisions-motion-duration-base: var(--ds-duration-options-base); /** Standard UI transitions */
123
+ --ds-decisions-motion-duration-slow: var(--ds-duration-options-slow); /** Expand/collapse animations */
124
+ --ds-decisions-motion-easing-standard: var(--ds-easing-options-standard); /** Default easing for all transitions */
125
+ --ds-decisions-opacity-disabled: var(--ds-opacity-options-disabled); /** Disabled control opacity */
126
+ --ds-decisions-z-index-dropdown: var(--ds-z-options-100); /** Floating menus and dropdowns */
127
+ --ds-decisions-z-index-modal: var(--ds-z-options-1000); /** Modal and dialog overlays */
128
+ --ds-component-button-primary-background-hover: var(--ds-color-options-neutral-800);
129
+ --ds-component-button-primary-background-active: var(--ds-color-options-neutral-1000);
130
+ --ds-component-tag-default-text: var(--ds-color-options-neutral-700);
131
+ --ds-component-header-cta-background-hover: var(--ds-color-options-neutral-800);
132
+ --ds-decisions-shadow-focus: var(--ds-shadow-options-focus-neutral); /** Default focus ring glow */
133
+ --ds-decisions-shadow-focus-error: var(--ds-shadow-options-focus-error); /** Error state focus ring glow */
134
+ --ds-decisions-shadow-dropdown: var(--ds-shadow-options-dropdown); /** Floating dropdown panel */
135
+ --ds-decisions-shadow-modal: var(--ds-shadow-options-modal); /** Modal dialog elevation */
136
+ --ds-component-button-border-radius: var(--ds-decisions-border-radius-lg);
137
+ --ds-component-button-border-width: var(--ds-decisions-border-width-control);
138
+ --ds-component-button-disabled-opacity: var(--ds-decisions-opacity-disabled);
139
+ --ds-component-button-primary-background: var(--ds-decisions-color-text-primary);
140
+ --ds-component-button-primary-text: var(--ds-decisions-color-text-inverse);
141
+ --ds-component-button-primary-border: var(--ds-decisions-color-text-primary);
142
+ --ds-component-button-secondary-background: var(--ds-decisions-color-surface-base);
143
+ --ds-component-button-secondary-background-hover: var(--ds-decisions-color-surface-hover);
144
+ --ds-component-button-secondary-text: var(--ds-decisions-color-text-primary);
145
+ --ds-component-button-secondary-border: var(--ds-decisions-color-border-control);
146
+ --ds-component-button-secondary-border-hover: var(--ds-decisions-color-border-control-hover);
147
+ --ds-component-button-ghost-background-hover: var(--ds-decisions-color-surface-hover);
148
+ --ds-component-button-ghost-text: var(--ds-decisions-color-text-secondary);
149
+ --ds-component-button-ghost-text-hover: var(--ds-decisions-color-text-primary);
150
+ --ds-component-button-danger-background: var(--ds-decisions-color-surface-base);
151
+ --ds-component-button-danger-background-hover: var(--ds-decisions-color-feedback-error-surface-hover);
152
+ --ds-component-button-danger-text: var(--ds-decisions-color-feedback-error-icon);
153
+ --ds-component-button-danger-border: var(--ds-decisions-color-feedback-error-border);
154
+ --ds-component-button-danger-border-hover: var(--ds-decisions-color-feedback-error-icon);
155
+ --ds-component-input-background: var(--ds-decisions-color-surface-base);
156
+ --ds-component-input-text: var(--ds-decisions-color-text-primary);
157
+ --ds-component-input-placeholder: var(--ds-decisions-color-text-placeholder);
158
+ --ds-component-input-border: var(--ds-decisions-color-border-control);
159
+ --ds-component-input-border-focus: var(--ds-decisions-color-text-primary);
160
+ --ds-component-input-border-radius: var(--ds-decisions-border-radius-lg);
161
+ --ds-component-input-border-width: var(--ds-decisions-border-width-control);
162
+ --ds-component-input-disabled-background: var(--ds-decisions-color-surface-hover);
163
+ --ds-component-input-disabled-text: var(--ds-decisions-color-text-disabled);
164
+ --ds-component-input-error-border: var(--ds-decisions-color-feedback-error-icon);
165
+ --ds-component-checkbox-border: var(--ds-decisions-color-border-control);
166
+ --ds-component-checkbox-border-hover: var(--ds-decisions-color-text-primary);
167
+ --ds-component-checkbox-border-radius: var(--ds-decisions-border-radius-sm);
168
+ --ds-component-checkbox-border-width: var(--ds-decisions-border-width-control);
169
+ --ds-component-checkbox-checked-background: var(--ds-decisions-color-text-primary);
170
+ --ds-component-checkbox-checked-border: var(--ds-decisions-color-text-primary);
171
+ --ds-component-checkbox-checked-text: var(--ds-decisions-color-text-inverse);
172
+ --ds-component-checkbox-error-border: var(--ds-decisions-color-feedback-error-icon);
173
+ --ds-component-checkbox-error-checked-background: var(--ds-decisions-color-feedback-error-icon);
174
+ --ds-component-radio-border: var(--ds-decisions-color-border-control);
175
+ --ds-component-radio-border-hover: var(--ds-decisions-color-text-primary);
176
+ --ds-component-radio-border-checked: var(--ds-decisions-color-text-primary);
177
+ --ds-component-radio-dot-color: var(--ds-decisions-color-text-primary);
178
+ --ds-component-radio-error-border: var(--ds-decisions-color-feedback-error-icon);
179
+ --ds-component-dropdown-background: var(--ds-decisions-color-surface-base);
180
+ --ds-component-dropdown-text: var(--ds-decisions-color-text-primary);
181
+ --ds-component-dropdown-placeholder: var(--ds-decisions-color-text-placeholder);
182
+ --ds-component-dropdown-border: var(--ds-decisions-color-border-control);
183
+ --ds-component-dropdown-border-open: var(--ds-decisions-color-text-primary);
184
+ --ds-component-dropdown-border-hover: var(--ds-decisions-color-text-primary);
185
+ --ds-component-dropdown-border-radius: var(--ds-decisions-border-radius-lg);
186
+ --ds-component-dropdown-border-width: var(--ds-decisions-border-width-control);
187
+ --ds-component-dropdown-menu-option-hover: var(--ds-decisions-color-surface-hover);
188
+ --ds-component-dropdown-menu-option-selected: var(--ds-decisions-color-surface-selected);
189
+ --ds-component-dropdown-menu-option-disabled: var(--ds-decisions-color-text-placeholder);
190
+ --ds-component-dropdown-error-border: var(--ds-decisions-color-feedback-error-icon);
191
+ --ds-component-dropdown-error-border-hover: var(--ds-decisions-color-feedback-error-icon-hover);
192
+ --ds-component-tag-border-radius: var(--ds-decisions-border-radius-sm);
193
+ --ds-component-tag-default-background: var(--ds-decisions-color-surface-selected);
194
+ --ds-component-tag-primary-background: var(--ds-decisions-color-text-primary);
195
+ --ds-component-tag-primary-text: var(--ds-decisions-color-text-inverse);
196
+ --ds-component-tag-success-background: var(--ds-decisions-color-feedback-success-surface);
197
+ --ds-component-tag-success-text: var(--ds-decisions-color-feedback-success-text);
198
+ --ds-component-tag-warning-background: var(--ds-decisions-color-feedback-warning-surface);
199
+ --ds-component-tag-warning-text: var(--ds-decisions-color-feedback-warning-text);
200
+ --ds-component-tag-danger-background: var(--ds-decisions-color-feedback-error-surface);
201
+ --ds-component-tag-danger-text: var(--ds-decisions-color-feedback-error-text);
202
+ --ds-component-tag-info-background: var(--ds-decisions-color-feedback-info-surface);
203
+ --ds-component-tag-info-text: var(--ds-decisions-color-feedback-info-text);
204
+ --ds-component-avatar-background: var(--ds-decisions-color-surface-avatar);
205
+ --ds-component-avatar-text: var(--ds-decisions-color-text-secondary);
206
+ --ds-component-avatar-border-radius-circle: var(--ds-decisions-border-radius-full);
207
+ --ds-component-avatar-border-radius-rounded: var(--ds-decisions-border-radius-lg);
208
+ --ds-component-modal-background: var(--ds-decisions-color-surface-base);
209
+ --ds-component-modal-border-radius: var(--ds-decisions-border-radius-2xl);
210
+ --ds-component-modal-backdrop: var(--ds-decisions-color-overlay-backdrop);
211
+ --ds-component-modal-title-text: var(--ds-decisions-color-text-primary);
212
+ --ds-component-modal-title-font-size: var(--ds-decisions-font-size-xl);
213
+ --ds-component-modal-title-font-weight: var(--ds-decisions-font-weight-semibold);
214
+ --ds-component-modal-body-text: var(--ds-decisions-color-text-body);
215
+ --ds-component-modal-body-font-size: var(--ds-decisions-font-size-md);
216
+ --ds-component-modal-close-button-text: var(--ds-decisions-color-text-subtle);
217
+ --ds-component-modal-close-button-text-hover: var(--ds-decisions-color-text-primary);
218
+ --ds-component-modal-close-button-background-hover: var(--ds-decisions-color-surface-selected);
219
+ --ds-component-modal-close-button-border-radius: var(--ds-decisions-border-radius-md);
220
+ --ds-component-modal-z-index: var(--ds-decisions-z-index-modal);
221
+ --ds-component-table-background: var(--ds-decisions-color-surface-base);
222
+ --ds-component-table-border: var(--ds-decisions-color-border-subtle);
223
+ --ds-component-table-border-radius: var(--ds-decisions-border-radius-xl);
224
+ --ds-component-table-header-background: var(--ds-decisions-color-surface-subtle);
225
+ --ds-component-table-header-text: var(--ds-decisions-color-text-subtle);
226
+ --ds-component-table-header-border: var(--ds-decisions-color-border-subtle);
227
+ --ds-component-table-cell-text: var(--ds-decisions-color-text-body);
228
+ --ds-component-table-cell-border-bottom: var(--ds-decisions-color-border-hairline);
229
+ --ds-component-table-row-hover-background: var(--ds-decisions-color-surface-row-hover);
230
+ --ds-component-table-row-striped-background: var(--ds-decisions-color-surface-subtle);
231
+ --ds-component-table-empty-text: var(--ds-decisions-color-text-placeholder);
232
+ --ds-component-list-divider: var(--ds-decisions-color-border-hairline);
233
+ --ds-component-list-border: var(--ds-decisions-color-border-subtle);
234
+ --ds-component-list-border-radius: var(--ds-decisions-border-radius-xl);
235
+ --ds-component-list-item-text: var(--ds-decisions-color-text-primary);
236
+ --ds-component-list-item-description: var(--ds-decisions-color-text-muted);
237
+ --ds-component-list-item-meta: var(--ds-decisions-color-text-placeholder);
238
+ --ds-component-list-indicator-default: var(--ds-decisions-color-border-control);
239
+ --ds-component-list-indicator-info: var(--ds-decisions-color-feedback-info-text);
240
+ --ds-component-list-indicator-success: var(--ds-decisions-color-feedback-success-text);
241
+ --ds-component-list-indicator-warning: var(--ds-decisions-color-feedback-warning-text);
242
+ --ds-component-list-indicator-error: var(--ds-decisions-color-feedback-error-text);
243
+ --ds-component-accordion-border: var(--ds-decisions-color-border-hairline);
244
+ --ds-component-accordion-title-text: var(--ds-decisions-color-text-primary);
245
+ --ds-component-accordion-title-font-size: var(--ds-decisions-font-size-md);
246
+ --ds-component-accordion-title-font-weight: var(--ds-decisions-font-weight-medium);
247
+ --ds-component-accordion-body-text: var(--ds-decisions-color-text-secondary);
248
+ --ds-component-accordion-body-font-size: var(--ds-decisions-font-size-md);
249
+ --ds-component-accordion-chevron-color: var(--ds-decisions-color-text-subtle);
250
+ --ds-component-accordion-chevron-duration: var(--ds-decisions-motion-duration-slow);
251
+ --ds-component-accordion-disabled-opacity: var(--ds-decisions-opacity-disabled);
252
+ --ds-component-breadcrumbs-link-text: var(--ds-decisions-color-text-muted);
253
+ --ds-component-breadcrumbs-link-text-hover: var(--ds-decisions-color-text-primary);
254
+ --ds-component-breadcrumbs-link-font-size: var(--ds-decisions-font-size-sm);
255
+ --ds-component-breadcrumbs-current-text: var(--ds-decisions-color-text-primary);
256
+ --ds-component-breadcrumbs-current-font-weight: var(--ds-decisions-font-weight-medium);
257
+ --ds-component-breadcrumbs-separator-color: var(--ds-decisions-color-border-separator);
258
+ --ds-component-header-background: var(--ds-decisions-color-surface-base);
259
+ --ds-component-header-border: var(--ds-decisions-color-border-subtle);
260
+ --ds-component-header-brand-text: var(--ds-decisions-color-text-primary);
261
+ --ds-component-header-brand-font-size: var(--ds-decisions-font-size-lg);
262
+ --ds-component-header-brand-font-weight: var(--ds-decisions-font-weight-semibold);
263
+ --ds-component-header-nav-text: var(--ds-decisions-color-text-secondary);
264
+ --ds-component-header-nav-text-hover: var(--ds-decisions-color-text-primary);
265
+ --ds-component-header-nav-background-hover: var(--ds-decisions-color-surface-hover);
266
+ --ds-component-header-nav-text-active: var(--ds-decisions-color-text-primary);
267
+ --ds-component-header-nav-font-weight: var(--ds-decisions-font-weight-medium);
268
+ --ds-component-header-nav-border-radius: var(--ds-decisions-border-radius-md);
269
+ --ds-component-header-cta-background: var(--ds-decisions-color-text-primary);
270
+ --ds-component-header-cta-text: var(--ds-decisions-color-text-inverse);
271
+ --ds-component-header-cta-border-radius: var(--ds-decisions-border-radius-lg);
272
+ --ds-component-footer-background: var(--ds-decisions-color-surface-base);
273
+ --ds-component-footer-border: var(--ds-decisions-color-border-subtle);
274
+ --ds-component-footer-brand-text: var(--ds-decisions-color-text-primary);
275
+ --ds-component-footer-brand-font-size: var(--ds-decisions-font-size-lg);
276
+ --ds-component-footer-brand-font-weight: var(--ds-decisions-font-weight-semibold);
277
+ --ds-component-footer-tagline-text: var(--ds-decisions-color-text-subtle);
278
+ --ds-component-footer-tagline-font-size: var(--ds-decisions-font-size-sm);
279
+ --ds-component-footer-column-heading-text: var(--ds-decisions-color-text-primary);
280
+ --ds-component-footer-column-heading-font-size: var(--ds-decisions-font-size-xs);
281
+ --ds-component-footer-column-heading-font-weight: var(--ds-decisions-font-weight-semibold);
282
+ --ds-component-footer-column-link-text: var(--ds-decisions-color-text-muted);
283
+ --ds-component-footer-column-link-text-hover: var(--ds-decisions-color-text-primary);
284
+ --ds-component-footer-column-link-font-size: var(--ds-decisions-font-size-sm);
285
+ --ds-component-footer-legal-text: var(--ds-decisions-color-text-placeholder);
286
+ --ds-component-footer-legal-text-hover: var(--ds-decisions-color-text-secondary);
287
+ --ds-component-footer-legal-font-size: var(--ds-decisions-font-size-xs);
288
+ --ds-component-footer-copyright-text: var(--ds-decisions-color-text-placeholder);
289
+ --ds-component-footer-copyright-font-size: var(--ds-decisions-font-size-xs);
290
+ --ds-component-footer-divider: var(--ds-decisions-color-border-hairline);
291
+ --ds-component-button-focus-ring: var(--ds-decisions-shadow-focus);
292
+ --ds-component-input-focus-shadow: var(--ds-decisions-shadow-focus);
293
+ --ds-component-input-error-focus-shadow: var(--ds-decisions-shadow-focus-error);
294
+ --ds-component-checkbox-focus-ring: var(--ds-decisions-shadow-focus);
295
+ --ds-component-radio-focus-ring: var(--ds-decisions-shadow-focus);
296
+ --ds-component-dropdown-focus-ring: var(--ds-decisions-shadow-focus);
297
+ --ds-component-dropdown-menu-shadow: var(--ds-decisions-shadow-dropdown);
298
+ --ds-component-modal-shadow: var(--ds-decisions-shadow-modal);
299
+ --ds-component-accordion-focus-ring: var(--ds-decisions-shadow-focus);
137
300
  }