@react-ui-org/react-ui 0.50.2 → 0.51.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (54) hide show
  1. package/dist/lib.development.js +30 -30
  2. package/dist/lib.js +1 -1
  3. package/package.json +1 -1
  4. package/src/lib/components/Alert/Alert.jsx +1 -3
  5. package/src/lib/components/Alert/Alert.scss +1 -9
  6. package/src/lib/components/Alert/README.mdx +0 -20
  7. package/src/lib/components/Alert/_settings.scss +1 -1
  8. package/src/lib/components/Alert/_theme.scss +0 -10
  9. package/src/lib/components/Badge/Badge.jsx +1 -3
  10. package/src/lib/components/Badge/Badge.scss +25 -44
  11. package/src/lib/components/Badge/README.mdx +6 -14
  12. package/src/lib/components/Button/Button.jsx +3 -1
  13. package/src/lib/components/Button/README.mdx +8 -3
  14. package/src/lib/components/Button/_priorities.scss +12 -0
  15. package/src/lib/components/Button/_settings.scss +1 -1
  16. package/src/lib/components/ButtonGroup/README.mdx +74 -58
  17. package/src/lib/components/Card/Card.jsx +1 -3
  18. package/src/lib/components/Card/Card.scss +0 -9
  19. package/src/lib/components/Card/README.mdx +0 -16
  20. package/src/lib/components/Card/_theme.scss +0 -10
  21. package/src/lib/components/FormLayout/README.mdx +17 -8
  22. package/src/lib/components/Grid/_helpers/generateResponsiveCustomProperties.js +1 -1
  23. package/src/lib/components/Modal/ModalCloseButton.scss +2 -2
  24. package/src/lib/components/Modal/README.mdx +106 -115
  25. package/src/lib/components/Modal/_settings.scss +1 -1
  26. package/src/lib/components/Popover/README.mdx +7 -4
  27. package/src/lib/components/ScrollView/README.mdx +2 -2
  28. package/src/lib/components/Table/_components/TableCell.scss +6 -5
  29. package/src/lib/components/Table/_components/TableHeaderCell/TableHeaderCell.jsx +8 -5
  30. package/src/lib/components/Table/_settings.scss +5 -6
  31. package/src/lib/components/Text/README.mdx +14 -8
  32. package/src/lib/components/TextLink/README.mdx +8 -6
  33. package/src/lib/components/TextLink/TextLink.scss +5 -0
  34. package/src/lib/components/TextLink/_theme.scss +2 -0
  35. package/src/lib/components/Toolbar/README.mdx +19 -11
  36. package/src/lib/components/_helpers/getRootColorClassName.js +4 -0
  37. package/src/lib/styles/elements/_code.scss +1 -3
  38. package/src/lib/styles/elements/_page.scss +1 -0
  39. package/src/lib/styles/elements/_rulers.scss +1 -3
  40. package/src/lib/styles/elements/_small.scss +1 -1
  41. package/src/lib/styles/settings/_form-fields.scss +1 -1
  42. package/src/lib/styles/settings/_utilities.scss +46 -14
  43. package/src/lib/styles/theme/_accessibility.scss +4 -4
  44. package/src/lib/styles/theme/_borders.scss +2 -2
  45. package/src/lib/styles/theme/_code.scss +2 -2
  46. package/src/lib/styles/theme/_links.scss +6 -4
  47. package/src/lib/styles/theme/_lists.scss +1 -1
  48. package/src/lib/styles/theme/_page.scss +2 -2
  49. package/src/lib/styles/theme/_spacing.scss +11 -11
  50. package/src/lib/styles/theme/_typography.scss +19 -18
  51. package/src/lib/styles/theme-constants/_colors.scss +23 -23
  52. package/src/lib/styles/tools/_spacing.scss +1 -1
  53. package/src/lib/theme.scss +635 -564
  54. package/src/lib/styles/theme/_colors.scss +0 -65
package/src/lib/theme.scss CHANGED
@@ -1,4 +1,4 @@
1
- // Default theme. Can be used as a starting point for your custom theme.
1
+ // Default theme. Designed to be used as a starting point for your custom theme.
2
2
 
3
3
  @use "styles/theme-constants/breakpoints";
4
4
  @use "styles/theme-constants/colors";
@@ -6,209 +6,249 @@
6
6
 
7
7
  :root {
8
8
  // ============================================================================================ //
9
- // 1. DESIGN TOKENS //
9
+ // GLOBAL TOKENS //
10
10
  // ============================================================================================ //
11
11
 
12
12
  //
13
- // Colors
14
- // ======
15
-
16
- // 👉 Actual color values are stored in separate SCSS so they can be generated programmatically.
17
-
18
- // Brand colors
19
- --rui-color-primary: #{colors.$primary};
20
- --rui-color-primary-light: #{colors.$primary-light};
21
- --rui-color-primary-dark: #{colors.$primary-dark};
22
- --rui-color-primary-darker: #{colors.$primary-darker};
23
- --rui-color-on-primary: #{colors.$on-primary};
24
- --rui-color-secondary: #{colors.$secondary};
25
- --rui-color-secondary-light: #{colors.$secondary-light};
26
- --rui-color-secondary-dark: #{colors.$secondary-dark};
27
- --rui-color-secondary-darker: #{colors.$secondary-darker};
28
- --rui-color-on-secondary: #{colors.$on-secondary};
29
-
30
- // UI colors
31
- --rui-color-success: #{colors.$success};
32
- --rui-color-success-light: #{colors.$success-light};
33
- --rui-color-success-dark: #{colors.$success-dark};
34
- --rui-color-success-darker: #{colors.$success-darker};
35
- --rui-color-on-success: #{colors.$on-success};
36
- --rui-color-warning: #{colors.$warning};
37
- --rui-color-warning-light: #{colors.$warning-light};
38
- --rui-color-warning-dark: #{colors.$warning-dark};
39
- --rui-color-warning-darker: #{colors.$warning-darker};
40
- --rui-color-on-warning: #{colors.$on-warning};
41
- --rui-color-danger: #{colors.$danger};
42
- --rui-color-danger-light: #{colors.$danger-light};
43
- --rui-color-danger-dark: #{colors.$danger-dark};
44
- --rui-color-danger-darker: #{colors.$danger-darker};
45
- --rui-color-on-danger: #{colors.$on-danger};
46
- --rui-color-help: #{colors.$help};
47
- --rui-color-help-light: #{colors.$help-light};
48
- --rui-color-help-dark: #{colors.$help-dark};
49
- --rui-color-help-darker: #{colors.$help-darker};
50
- --rui-color-on-help: #{colors.$on-help};
51
- --rui-color-info: #{colors.$info};
52
- --rui-color-info-light: #{colors.$info-light};
53
- --rui-color-info-dark: #{colors.$info-dark};
54
- --rui-color-info-darker: #{colors.$info-darker};
55
- --rui-color-on-info: #{colors.$on-info};
56
- --rui-color-note: #{colors.$note};
57
- --rui-color-note-light: #{colors.$note-light};
58
- --rui-color-note-dark: #{colors.$note-dark};
59
- --rui-color-note-darker: #{colors.$note-darker};
60
- --rui-color-on-note: #{colors.$on-note};
61
-
62
- // Grays
63
- --rui-color-white: #{colors.$white};
64
- --rui-color-gray-50: #{colors.$gray-50};
65
- --rui-color-gray-100: #{colors.$gray-100};
66
- --rui-color-gray-200: #{colors.$gray-200};
67
- --rui-color-gray-300: #{colors.$gray-300};
68
- --rui-color-gray-400: #{colors.$gray-400};
69
- --rui-color-gray-500: #{colors.$gray-500};
70
- --rui-color-gray-600: #{colors.$gray-600};
71
- --rui-color-gray-700: #{colors.$gray-700};
72
- --rui-color-gray-800: #{colors.$gray-800};
73
- --rui-color-gray-900: #{colors.$gray-900};
74
- --rui-color-black: #{colors.$black};
75
-
76
- // Special grays
77
- --rui-color-light: #{colors.$light};
78
- --rui-color-dark: #{colors.$dark};
79
- --rui-color-muted: #{colors.$muted};
80
-
81
- // Active color
82
- --rui-color-active: #{colors.$active};
83
- --rui-color-on-active: #{colors.$on-active};
84
- --rui-color-active-hover: #{colors.$active-hover};
85
- --rui-color-active-focus: #{colors.$active-focus};
13
+ // Dimensions
14
+ // ==========
86
15
 
87
- //
88
- // Layout
89
- // ======
16
+ // Borders
17
+ --rui-dimension-border-width-1: 1px;
90
18
 
91
19
  // Breakpoints
92
20
  //
93
21
  // ⚠️ Breakpoints are read-only in CSS. Custom properties cannot be used within media queries
94
22
  // since media query is not a property.
95
23
  // https://www.w3.org/TR/css-variables-1/#using-variables
96
- --rui-breakpoint-xs: #{breakpoints.$xs};
97
- --rui-breakpoint-sm: #{breakpoints.$sm};
98
- --rui-breakpoint-md: #{breakpoints.$md};
99
- --rui-breakpoint-lg: #{breakpoints.$lg};
100
- --rui-breakpoint-xl: #{breakpoints.$xl};
101
- --rui-breakpoint-x2l: #{breakpoints.$x2l};
102
- --rui-breakpoint-x3l: #{breakpoints.$x3l};
24
+ --rui-dimension-breakpoint-xs: #{breakpoints.$xs};
25
+ --rui-dimension-breakpoint-sm: #{breakpoints.$sm};
26
+ --rui-dimension-breakpoint-md: #{breakpoints.$md};
27
+ --rui-dimension-breakpoint-lg: #{breakpoints.$lg};
28
+ --rui-dimension-breakpoint-xl: #{breakpoints.$xl};
29
+ --rui-dimension-breakpoint-x2l: #{breakpoints.$x2l};
30
+ --rui-dimension-breakpoint-x3l: #{breakpoints.$x3l};
31
+
32
+ // Radii
33
+ --rui-dimension-radius-1: 0.25rem;
103
34
 
104
35
  // Spacing
105
- --rui-spacing-0: 0;
106
- --rui-spacing-1: 0.25rem;
107
- --rui-spacing-2: 0.5rem;
108
- --rui-spacing-3: 0.75rem;
109
- --rui-spacing-4: 1rem;
110
- --rui-spacing-5: 1.5rem;
111
- --rui-spacing-6: 2rem;
112
- --rui-spacing-7: 3rem;
36
+ --rui-dimension-space-0: 0;
37
+ --rui-dimension-space-1: 0.25rem;
38
+ --rui-dimension-space-2: 0.5rem;
39
+ --rui-dimension-space-3: 0.75rem;
40
+ --rui-dimension-space-4: 1rem;
41
+ --rui-dimension-space-5: 1.5rem;
42
+ --rui-dimension-space-6: 2rem;
43
+ --rui-dimension-space-7: 2.5rem;
113
44
 
114
45
  //
115
- // Typography
116
- // ==========
46
+ // Font Families
47
+ // =============
48
+
49
+ --rui-font-family-base: "Titillium Web", helvetica, roboto, arial, sans-serif;
50
+ --rui-font-family-monospace:
51
+ "SFMono-Regular",
52
+ "Menlo",
53
+ "Monaco",
54
+ "Consolas",
55
+ "Liberation Mono",
56
+ "Courier New",
57
+ monospace;
117
58
 
118
- // Modular scale ratio: 1.125 / 8:9 / major second
59
+ //
60
+ // Font Weights
61
+ // ============
119
62
 
120
- --rui-typography-font-family-base: "Titillium Web", helvetica, roboto, arial, sans-serif;
121
- --rui-typography-font-size-base: 100%;
122
- --rui-typography-line-height-base: 1.5;
123
- --rui-typography-line-height-small: 1.25;
124
- --rui-typography-size-0: 1rem;
125
- --rui-typography-size-1: 1.125rem;
126
- --rui-typography-size-2: 1.266rem;
127
- --rui-typography-size-3: 1.424rem;
128
- --rui-typography-size-4: 1.602rem;
129
- --rui-typography-size-5: 1.802rem;
130
- --rui-typography-size-smaller: 0.75rem;
131
- --rui-typography-size-small: 0.889rem;
132
- --rui-typography-font-weight-thin: 100;
133
- --rui-typography-font-weight-light: 300;
134
- --rui-typography-font-weight-regular: 400;
135
- --rui-typography-font-weight-medium: 500;
136
- --rui-typography-font-weight-bold: 700;
63
+ --rui-font-weight-base: 400;
64
+ --rui-font-weight-light: 300;
65
+ --rui-font-weight-bold: 700;
137
66
 
138
67
  //
139
- // Shared Settings
140
- // ===============
141
- //
142
- // 1. Use `initial`, `revert` or `unset` to keep the original box shadow of the component.
143
-
144
- // Borders
145
- --rui-border-width: 1px;
146
- --rui-border-radius: 0.25rem;
68
+ // Ratios
69
+ // ======
147
70
 
148
- // Elevations
149
- --rui-elevation-1: 0 0.01rem 0.65rem -0.1rem #{rgba(0, 0, 0, 0.3)};
150
- --rui-elevation-2: 0.2rem 0.25rem 1.2rem -0.1rem #{rgba(0, 0, 0, 0.15)};
71
+ --rui-ratio-opacity-medium: 0.5;
151
72
 
152
- // Accessibility
153
- --rui-tap-target-size: 10mm;
154
- --rui-focus-outline: 0.2em solid var(--rui-color-active-focus);
155
- --rui-focus-outline-offset: 1px;
156
- --rui-focus-box-shadow: initial; // 1.
73
+ //
74
+ // Shadows
75
+ // =======
157
76
 
158
- // Bottom spacings
159
- --rui-spacing-bottom-default: var(--rui-spacing-5);
160
- --rui-spacing-bottom-headings: var(--rui-spacing-5);
161
- --rui-spacing-bottom-layouts: var(--rui-spacing-5);
77
+ --rui-shadow-1: 0 0.01rem 0.65rem -0.1rem rgb(0 0 0 / 30%);
78
+ --rui-shadow-2: 0.2rem 0.25rem 1.2rem -0.1rem rgb(0 0 0 / 15%);
162
79
 
163
- // Disabled state
164
- --rui-disabled-background-color: var(--rui-color-gray-50);
165
- --rui-disabled-opacity: 0.5;
166
- --rui-disabled-cursor: not-allowed;
80
+ //
81
+ // Other
82
+ // =====
167
83
 
84
+ // ⚠️ Non-standard token types!
85
+ // The DTF specification is still in the draft status, and the following token types have proven necessary.
168
86
  //
169
- // Elements
170
- // ========
87
+ // To be honest, some of these tokens are NOT context agnostic as required by the global tokens category.
88
+ // These will be probably superseded by semantic typography styles in the future.
171
89
 
172
- // Page
173
- --rui-page-color: var(--rui-color-black);
174
- --rui-page-background: var(--rui-color-gray-50);
90
+ // Font sizes
91
+ --rui-font-size-base: 100%;
92
+ --rui-font-size-small: 0.889rem;
93
+ --rui-font-size-smaller: 0.75rem;
94
+ --rui-font-size-code: 85%;
95
+
96
+ // Modular scale ratio: 1.125 / 8:9 / major second
97
+ --rui-font-size-1: 1rem;
98
+ --rui-font-size-2: 1.125rem;
99
+ --rui-font-size-3: 1.266rem;
100
+ --rui-font-size-4: 1.424rem;
101
+ --rui-font-size-5: 1.602rem;
102
+ --rui-font-size-6: 1.802rem;
175
103
 
176
- // Links
177
- --rui-link-color: var(--rui-color-active);
178
- --rui-link-decoration: none;
179
- --rui-link-hover-color: var(--rui-color-active-hover);
180
- --rui-link-hover-decoration: underline;
104
+ // Line heights
105
+ --rui-line-height-base: 1.5;
106
+ --rui-line-height-small: 1.25;
181
107
 
182
- // Lists
183
- --rui-list-unordered-style: square;
108
+ // Text decorations
109
+ --rui-text-decoration-link: none;
110
+ --rui-text-decoration-link-hover: underline;
111
+ --rui-text-decoration-link-active: underline;
184
112
 
185
- // Code
186
- // stylelint-disable-next-line max-line-length
187
- --rui-code-font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace;
188
- --rui-code-font-size: 85%;
113
+ // List styles
114
+ --rui-list-style-unordered: square;
115
+
116
+ // Cursors
117
+ --rui-cursor-not-allowed: not-allowed;
189
118
 
190
119
  // ============================================================================================ //
191
- // 2. LAYOUT COMPONENTS //
120
+ // SEMANTIC TOKENS //
192
121
  // ============================================================================================ //
193
122
 
194
123
  //
195
- // FormLayout
124
+ // Borders
125
+ // =======
126
+
127
+ --rui-border-focus-ring: var(--rui-dimension-space-1) solid #{colors.$focus};
128
+
129
+ //
130
+ // Colors
131
+ // ======
132
+
133
+ // 👉 Actual color values are stored in separate SCSS so they can be generated programmatically.
134
+
135
+ // Text colors
136
+ --rui-color-text-primary: #{colors.$black};
137
+ --rui-color-text-primary-disabled: #{colors.$gray-300};
138
+ --rui-color-text-secondary: #{colors.$gray-500};
139
+ --rui-color-text-secondary-disabled: #{colors.$gray-300};
140
+ --rui-color-text-link: #{colors.$note};
141
+ --rui-color-text-link-hover: #{colors.$note-dark};
142
+ --rui-color-text-link-active: #{colors.$note-darker};
143
+
144
+ // Action colors
145
+ --rui-color-action-primary: #{colors.$primary};
146
+ --rui-color-action-primary-hover: #{colors.$primary-dark};
147
+ --rui-color-action-primary-active: #{colors.$primary-darker};
148
+ --rui-color-action-on-primary: #{colors.$on-primary};
149
+ --rui-color-action-secondary: #{colors.$secondary};
150
+ --rui-color-action-secondary-hover: #{colors.$secondary-dark};
151
+ --rui-color-action-secondary-active: #{colors.$secondary-darker};
152
+ --rui-color-action-on-secondary: #{colors.$on-secondary};
153
+ --rui-color-action-selected: #{colors.$selected};
154
+ --rui-color-action-selected-hover: #{colors.$selected-dark};
155
+ --rui-color-action-selected-active: #{colors.$selected-darker};
156
+ --rui-color-action-on-selected: #{colors.$on-selected};
157
+
158
+ // Feedback colors
159
+ --rui-color-feedback-success: #{colors.$success};
160
+ --rui-color-feedback-success-hover: #{colors.$success-dark};
161
+ --rui-color-feedback-success-active: #{colors.$success-darker};
162
+ --rui-color-feedback-on-success: #{colors.$on-success};
163
+ --rui-color-feedback-warning: #{colors.$warning};
164
+ --rui-color-feedback-warning-hover: #{colors.$warning-dark};
165
+ --rui-color-feedback-warning-active: #{colors.$warning-darker};
166
+ --rui-color-feedback-on-warning: #{colors.$on-warning};
167
+ --rui-color-feedback-danger: #{colors.$danger};
168
+ --rui-color-feedback-danger-hover: #{colors.$danger-dark};
169
+ --rui-color-feedback-danger-active: #{colors.$danger-darker};
170
+ --rui-color-feedback-on-danger: #{colors.$on-danger};
171
+ --rui-color-feedback-help: #{colors.$help};
172
+ --rui-color-feedback-help-hover: #{colors.$help-dark};
173
+ --rui-color-feedback-help-active: #{colors.$help-darker};
174
+ --rui-color-feedback-on-help: #{colors.$on-help};
175
+ --rui-color-feedback-info: #{colors.$info};
176
+ --rui-color-feedback-info-hover: #{colors.$info-dark};
177
+ --rui-color-feedback-info-active: #{colors.$info-darker};
178
+ --rui-color-feedback-on-info: #{colors.$on-info};
179
+ --rui-color-feedback-note: #{colors.$note};
180
+ --rui-color-feedback-note-hover: #{colors.$note-dark};
181
+ --rui-color-feedback-note-active: #{colors.$note-darker};
182
+ --rui-color-feedback-on-note: #{colors.$on-note};
183
+
184
+ // Neutral colors
185
+ --rui-color-neutral-light: #{colors.$white};
186
+ --rui-color-neutral-light-hover: #{colors.$gray-50};
187
+ --rui-color-neutral-light-active: #{colors.$gray-100};
188
+ --rui-color-neutral-on-light: #{colors.$gray-700};
189
+ --rui-color-neutral-dark: #{colors.$gray-700};
190
+ --rui-color-neutral-dark-hover: #{colors.$gray-800};
191
+ --rui-color-neutral-dark-active: #{colors.$gray-900};
192
+ --rui-color-neutral-on-dark: #{colors.$white};
193
+
194
+ // Background colors
195
+ --rui-color-background-base: #{colors.$gray-50};
196
+ --rui-color-background-layer-1: #{colors.$white};
197
+ --rui-color-background-layer-2: #{colors.$white};
198
+ --rui-color-background-basic: #{colors.$white};
199
+ --rui-color-background-disabled: #{colors.$gray-50};
200
+ --rui-color-background-interactive: #{colors.$transparent};
201
+ --rui-color-background-interactive-hover: #{colors.$gray-50};
202
+ --rui-color-background-interactive-active: #{colors.$gray-100};
203
+ --rui-color-background-primary: #{colors.$primary-light};
204
+ --rui-color-background-secondary: #{colors.$secondary-light};
205
+ --rui-color-background-selected: #{colors.$selected-light};
206
+ --rui-color-background-success: #{colors.$success-light};
207
+ --rui-color-background-warning: #{colors.$warning-light};
208
+ --rui-color-background-danger: #{colors.$danger-light};
209
+ --rui-color-background-help: #{colors.$help-light};
210
+ --rui-color-background-info: #{colors.$info-light};
211
+ --rui-color-background-note: #{colors.$note-light};
212
+ --rui-color-background-light: #{colors.$gray-100};
213
+ --rui-color-background-dark: #{colors.$gray-600};
214
+
215
+ // Border colors
216
+ --rui-color-border-primary: #{colors.$gray-200};
217
+ --rui-color-border-primary-hover: #{colors.$gray-500};
218
+ --rui-color-border-primary-active: #{colors.$selected-darker};
219
+ --rui-color-border-secondary: #{colors.$gray-100};
220
+
221
+ //
222
+ // Dimensions
196
223
  // ==========
197
224
 
198
- --rui-FormLayout__row-gap: var(--rui-spacing-4);
199
- --rui-FormLayout--horizontal__label__width: 10em;
200
- --rui-FormLayout--horizontal__label__width--auto: auto;
201
- --rui-FormLayout--horizontal__label__width--limited: fit-content(50%);
225
+ // Accessibility
226
+ --rui-dimension-focus-ring-offset: var(--rui-dimension-border-width-1);
227
+ --rui-dimension-tap-target-size: var(--rui-dimension-space-7);
228
+
229
+ // Shared bottom spacings
230
+ --rui-dimension-space-bottom-base: var(--rui-dimension-space-5);
231
+ --rui-dimension-space-bottom-headings: var(--rui-dimension-space-5);
232
+ --rui-dimension-space-bottom-layouts: var(--rui-dimension-space-5);
202
233
 
203
234
  //
204
- // Toolbar
235
+ // Ratios
236
+ // ======
237
+
238
+ --rui-ratio-disabled-opacity: var(--rui-ratio-opacity-medium);
239
+
240
+ //
241
+ // Shadows
205
242
  // =======
206
243
 
207
- --rui-Toolbar__gap: var(--rui-spacing-4);
208
- --rui-Toolbar__gap--dense: var(--rui-spacing-2);
244
+ // 1. Use `initial`, `revert` or `unset` to keep the original box shadow of the component.
245
+
246
+ --rui-shadow-layer-1: var(--rui-shadow-1);
247
+ --rui-shadow-layer-2: var(--rui-shadow-2);
248
+ --rui-shadow-focus-ring: initial; // 1.
209
249
 
210
250
  // ============================================================================================ //
211
- // 3. UI COMPONENTS //
251
+ // COMPONENT TOKENS //
212
252
  // ============================================================================================ //
213
253
 
214
254
  //
@@ -216,433 +256,456 @@
216
256
  // =====
217
257
 
218
258
  // Alert: common properties
219
- --rui-Alert__padding: var(--rui-spacing-3);
220
- --rui-Alert__font-weight: var(--rui-typography-font-weight-regular);
221
- --rui-Alert__border-width: var(--rui-border-width);
222
- --rui-Alert__border-radius: var(--rui-border-radius);
223
- --rui-Alert__emphasis__font-weight: var(--rui-typography-font-weight-bold);
224
- --rui-Alert__stripe__width: var(--rui-border-width);
225
-
226
- // Alert: variant: primary
227
- --rui-Alert--primary__color: var(--rui-page-color);
228
- --rui-Alert--primary__foreground-color: var(--rui-color-primary);
229
- --rui-Alert--primary__background-color: var(--rui-color-white);
230
-
231
- // Alert: variant: secondary
232
- --rui-Alert--secondary__color: var(--rui-page-color);
233
- --rui-Alert--secondary__foreground-color: var(--rui-color-secondary);
234
- --rui-Alert--secondary__background-color: var(--rui-color-white);
259
+ --rui-Alert__padding: var(--rui-dimension-space-3);
260
+ --rui-Alert__font-weight: var(--rui-font-weight-base);
261
+ --rui-Alert__border-width: var(--rui-dimension-border-width-1);
262
+ --rui-Alert__border-radius: var(--rui-dimension-radius-1);
263
+ --rui-Alert__emphasis__font-weight: var(--rui-font-weight-bold);
264
+ --rui-Alert__stripe__width: var(--rui-dimension-border-width-1);
235
265
 
236
266
  // Alert: variant: success
237
- --rui-Alert--success__color: var(--rui-page-color);
238
- --rui-Alert--success__foreground-color: var(--rui-color-success);
239
- --rui-Alert--success__background-color: var(--rui-color-white);
267
+ --rui-Alert--success__color: var(--rui-color-text-primary);
268
+ --rui-Alert--success__foreground-color: var(--rui-color-feedback-success);
269
+ --rui-Alert--success__background-color: var(--rui-color-background-success);
240
270
 
241
271
  // Alert: variant: warning
242
- --rui-Alert--warning__color: var(--rui-page-color);
243
- --rui-Alert--warning__foreground-color: var(--rui-color-warning);
244
- --rui-Alert--warning__background-color: var(--rui-color-white);
272
+ --rui-Alert--warning__color: var(--rui-color-text-primary);
273
+ --rui-Alert--warning__foreground-color: var(--rui-color-feedback-warning);
274
+ --rui-Alert--warning__background-color: var(--rui-color-background-warning);
245
275
 
246
276
  // Alert: variant: danger
247
- --rui-Alert--danger__color: var(--rui-page-color);
248
- --rui-Alert--danger__foreground-color: var(--rui-color-danger);
249
- --rui-Alert--danger__background-color: var(--rui-color-white);
277
+ --rui-Alert--danger__color: var(--rui-color-text-primary);
278
+ --rui-Alert--danger__foreground-color: var(--rui-color-feedback-danger);
279
+ --rui-Alert--danger__background-color: var(--rui-color-background-danger);
250
280
 
251
281
  // Alert: variant: info
252
- --rui-Alert--info__color: var(--rui-page-color);
253
- --rui-Alert--info__foreground-color: var(--rui-color-info);
254
- --rui-Alert--info__background-color: var(--rui-color-white);
282
+ --rui-Alert--info__color: var(--rui-color-text-primary);
283
+ --rui-Alert--info__foreground-color: var(--rui-color-feedback-info);
284
+ --rui-Alert--info__background-color: var(--rui-color-background-info);
255
285
 
256
286
  // Alert: variant: help
257
- --rui-Alert--help__color: var(--rui-page-color);
258
- --rui-Alert--help__foreground-color: var(--rui-color-help);
259
- --rui-Alert--help__background-color: var(--rui-color-white);
287
+ --rui-Alert--help__color: var(--rui-color-text-primary);
288
+ --rui-Alert--help__foreground-color: var(--rui-color-feedback-help);
289
+ --rui-Alert--help__background-color: var(--rui-color-background-help);
260
290
 
261
291
  // Alert: variant: note
262
- --rui-Alert--note__color: var(--rui-page-color);
263
- --rui-Alert--note__foreground-color: var(--rui-color-note);
264
- --rui-Alert--note__background-color: var(--rui-color-white);
292
+ --rui-Alert--note__color: var(--rui-color-text-primary);
293
+ --rui-Alert--note__foreground-color: var(--rui-color-feedback-note);
294
+ --rui-Alert--note__background-color: var(--rui-color-background-note);
265
295
 
266
296
  // Alert: variant: light
267
- --rui-Alert--light__color: var(--rui-color-dark);
268
- --rui-Alert--light__foreground-color: var(--rui-color-dark);
269
- --rui-Alert--light__background-color: var(--rui-color-light);
297
+ --rui-Alert--light__color: var(--rui-color-neutral-on-light);
298
+ --rui-Alert--light__foreground-color: var(--rui-color-neutral-on-light);
299
+ --rui-Alert--light__background-color: var(--rui-color-background-light);
270
300
 
271
301
  // Alert: variant: dark
272
- --rui-Alert--dark__color: var(--rui-color-light);
273
- --rui-Alert--dark__foreground-color: var(--rui-color-light);
274
- --rui-Alert--dark__background-color: var(--rui-color-dark);
302
+ --rui-Alert--dark__color: var(--rui-color-neutral-on-dark);
303
+ --rui-Alert--dark__foreground-color: var(--rui-color-neutral-on-dark);
304
+ --rui-Alert--dark__background-color: var(--rui-color-background-dark);
275
305
 
276
306
  //
277
307
  // Button
278
308
  // ======
279
309
 
280
310
  // Buttons: common properties
281
- --rui-Button__font-weight: var(--rui-typography-font-weight-regular);
311
+ --rui-Button__font-weight: var(--rui-font-weight-base);
282
312
  --rui-Button__letter-spacing: 0;
283
313
  --rui-Button__text-transform: none;
284
- --rui-Button__border-width: var(--rui-border-width);
285
- --rui-Button__border-radius: var(--rui-border-radius);
286
- --rui-Button--disabled__opacity: var(--rui-disabled-opacity);
287
- --rui-Button--disabled__cursor: var(--rui-disabled-cursor);
314
+ --rui-Button__border-width: var(--rui-dimension-border-width-1);
315
+ --rui-Button__border-radius: var(--rui-dimension-radius-1);
316
+ --rui-Button--disabled__opacity: var(--rui-ratio-disabled-opacity);
317
+ --rui-Button--disabled__cursor: var(--rui-cursor-not-allowed);
288
318
  --rui-Button--feedback__opacity: 1;
289
- --rui-Button--feedback__cursor: var(--rui-disabled-cursor);
319
+ --rui-Button--feedback__cursor: var(--rui-cursor-not-allowed);
290
320
 
291
321
  // Buttons: filled priority
292
322
 
293
323
  // Buttons: filled priority: primary variant
294
- --rui-Button--filled--primary--default__color: var(--rui-color-on-primary);
295
- --rui-Button--filled--primary--default__border-color: var(--rui-color-primary);
296
- --rui-Button--filled--primary--default__background: var(--rui-color-primary);
324
+ --rui-Button--filled--primary--default__color: var(--rui-color-action-on-primary);
325
+ --rui-Button--filled--primary--default__border-color: var(--rui-color-action-primary);
326
+ --rui-Button--filled--primary--default__background: var(--rui-color-action-primary);
297
327
  --rui-Button--filled--primary--default__box-shadow: none;
298
- --rui-Button--filled--primary--hover__color: var(--rui-color-on-primary);
299
- --rui-Button--filled--primary--hover__border-color: var(--rui-color-primary-dark);
300
- --rui-Button--filled--primary--hover__background: var(--rui-color-primary-dark);
328
+ --rui-Button--filled--primary--hover__color: var(--rui-color-action-on-primary);
329
+ --rui-Button--filled--primary--hover__border-color: var(--rui-color-action-primary-hover);
330
+ --rui-Button--filled--primary--hover__background: var(--rui-color-action-primary-hover);
301
331
  --rui-Button--filled--primary--hover__box-shadow: none;
302
- --rui-Button--filled--primary--active__color: var(--rui-color-on-primary);
303
- --rui-Button--filled--primary--active__border-color: var(--rui-color-primary-darker);
304
- --rui-Button--filled--primary--active__background: var(--rui-color-primary-darker);
332
+ --rui-Button--filled--primary--active__color: var(--rui-color-action-on-primary);
333
+ --rui-Button--filled--primary--active__border-color: var(--rui-color-action-primary-active);
334
+ --rui-Button--filled--primary--active__background: var(--rui-color-action-primary-active);
305
335
  --rui-Button--filled--primary--active__box-shadow: none;
306
336
 
307
337
  // Buttons: filled priority: secondary variant
308
- --rui-Button--filled--secondary--default__color: var(--rui-color-on-secondary);
309
- --rui-Button--filled--secondary--default__border-color: var(--rui-color-secondary);
310
- --rui-Button--filled--secondary--default__background: var(--rui-color-secondary);
338
+ --rui-Button--filled--secondary--default__color: var(--rui-color-action-on-secondary);
339
+ --rui-Button--filled--secondary--default__border-color: var(--rui-color-action-secondary);
340
+ --rui-Button--filled--secondary--default__background: var(--rui-color-action-secondary);
311
341
  --rui-Button--filled--secondary--default__box-shadow: none;
312
- --rui-Button--filled--secondary--hover__color: var(--rui-color-on-secondary);
313
- --rui-Button--filled--secondary--hover__border-color: var(--rui-color-secondary-dark);
314
- --rui-Button--filled--secondary--hover__background: var(--rui-color-secondary-dark);
342
+ --rui-Button--filled--secondary--hover__color: var(--rui-color-action-on-secondary);
343
+ --rui-Button--filled--secondary--hover__border-color: var(--rui-color-action-secondary-hover);
344
+ --rui-Button--filled--secondary--hover__background: var(--rui-color-action-secondary-hover);
315
345
  --rui-Button--filled--secondary--hover__box-shadow: none;
316
- --rui-Button--filled--secondary--active__color: var(--rui-color-on-secondary);
317
- --rui-Button--filled--secondary--active__border-color: var(--rui-color-secondary-darker);
318
- --rui-Button--filled--secondary--active__background: var(--rui-color-secondary-darker);
346
+ --rui-Button--filled--secondary--active__color: var(--rui-color-action-on-secondary);
347
+ --rui-Button--filled--secondary--active__border-color: var(--rui-color-action-secondary-active);
348
+ --rui-Button--filled--secondary--active__background: var(--rui-color-action-secondary-active);
319
349
  --rui-Button--filled--secondary--active__box-shadow: none;
320
350
 
351
+ // Buttons: filled priority: selected variant
352
+ --rui-Button--filled--selected--default__color: var(--rui-color-action-on-selected);
353
+ --rui-Button--filled--selected--default__border-color: var(--rui-color-action-selected);
354
+ --rui-Button--filled--selected--default__background: var(--rui-color-action-selected);
355
+ --rui-Button--filled--selected--default__box-shadow: none;
356
+ --rui-Button--filled--selected--hover__color: var(--rui-color-action-on-selected);
357
+ --rui-Button--filled--selected--hover__border-color: var(--rui-color-action-selected-hover);
358
+ --rui-Button--filled--selected--hover__background: var(--rui-color-action-selected-hover);
359
+ --rui-Button--filled--selected--hover__box-shadow: none;
360
+ --rui-Button--filled--selected--active__color: var(--rui-color-action-on-selected);
361
+ --rui-Button--filled--selected--active__border-color: var(--rui-color-action-selected-active);
362
+ --rui-Button--filled--selected--active__background: var(--rui-color-action-selected-active);
363
+ --rui-Button--filled--selected--active__box-shadow: none;
364
+
321
365
  // Buttons: filled priority: success variant
322
- --rui-Button--filled--success--default__color: var(--rui-color-on-success);
323
- --rui-Button--filled--success--default__border-color: var(--rui-color-success);
324
- --rui-Button--filled--success--default__background: var(--rui-color-success);
366
+ --rui-Button--filled--success--default__color: var(--rui-color-feedback-on-success);
367
+ --rui-Button--filled--success--default__border-color: var(--rui-color-feedback-success);
368
+ --rui-Button--filled--success--default__background: var(--rui-color-feedback-success);
325
369
  --rui-Button--filled--success--default__box-shadow: none;
326
- --rui-Button--filled--success--hover__color: var(--rui-color-on-success);
327
- --rui-Button--filled--success--hover__border-color: var(--rui-color-success-dark);
328
- --rui-Button--filled--success--hover__background: var(--rui-color-success-dark);
370
+ --rui-Button--filled--success--hover__color: var(--rui-color-feedback-on-success);
371
+ --rui-Button--filled--success--hover__border-color: var(--rui-color-feedback-success-hover);
372
+ --rui-Button--filled--success--hover__background: var(--rui-color-feedback-success-hover);
329
373
  --rui-Button--filled--success--hover__box-shadow: none;
330
- --rui-Button--filled--success--active__color: var(--rui-color-on-success);
331
- --rui-Button--filled--success--active__border-color: var(--rui-color-success-darker);
332
- --rui-Button--filled--success--active__background: var(--rui-color-success-darker);
374
+ --rui-Button--filled--success--active__color: var(--rui-color-feedback-on-success);
375
+ --rui-Button--filled--success--active__border-color: var(--rui-color-feedback-success-active);
376
+ --rui-Button--filled--success--active__background: var(--rui-color-feedback-success-active);
333
377
  --rui-Button--filled--success--active__box-shadow: none;
334
378
 
335
379
  // Buttons: filled priority: warning variant
336
- --rui-Button--filled--warning--default__color: var(--rui-color-on-warning);
337
- --rui-Button--filled--warning--default__border-color: var(--rui-color-warning);
338
- --rui-Button--filled--warning--default__background: var(--rui-color-warning);
380
+ --rui-Button--filled--warning--default__color: var(--rui-color-feedback-on-warning);
381
+ --rui-Button--filled--warning--default__border-color: var(--rui-color-feedback-warning);
382
+ --rui-Button--filled--warning--default__background: var(--rui-color-feedback-warning);
339
383
  --rui-Button--filled--warning--default__box-shadow: none;
340
- --rui-Button--filled--warning--hover__color: var(--rui-color-on-warning);
341
- --rui-Button--filled--warning--hover__border-color: var(--rui-color-warning-dark);
342
- --rui-Button--filled--warning--hover__background: var(--rui-color-warning-dark);
384
+ --rui-Button--filled--warning--hover__color: var(--rui-color-feedback-on-warning);
385
+ --rui-Button--filled--warning--hover__border-color: var(--rui-color-feedback-warning-hover);
386
+ --rui-Button--filled--warning--hover__background: var(--rui-color-feedback-warning-hover);
343
387
  --rui-Button--filled--warning--hover__box-shadow: none;
344
- --rui-Button--filled--warning--active__color: var(--rui-color-on-warning);
345
- --rui-Button--filled--warning--active__border-color: var(--rui-color-warning-darker);
346
- --rui-Button--filled--warning--active__background: var(--rui-color-warning-darker);
388
+ --rui-Button--filled--warning--active__color: var(--rui-color-feedback-on-warning);
389
+ --rui-Button--filled--warning--active__border-color: var(--rui-color-feedback-warning-active);
390
+ --rui-Button--filled--warning--active__background: var(--rui-color-feedback-warning-active);
347
391
  --rui-Button--filled--warning--active__box-shadow: none;
348
392
 
349
393
  // Buttons: filled priority: danger variant
350
- --rui-Button--filled--danger--default__color: var(--rui-color-on-danger);
351
- --rui-Button--filled--danger--default__border-color: var(--rui-color-danger);
352
- --rui-Button--filled--danger--default__background: var(--rui-color-danger);
394
+ --rui-Button--filled--danger--default__color: var(--rui-color-feedback-on-danger);
395
+ --rui-Button--filled--danger--default__border-color: var(--rui-color-feedback-danger);
396
+ --rui-Button--filled--danger--default__background: var(--rui-color-feedback-danger);
353
397
  --rui-Button--filled--danger--default__box-shadow: none;
354
- --rui-Button--filled--danger--hover__color: var(--rui-color-on-danger);
355
- --rui-Button--filled--danger--hover__border-color: var(--rui-color-danger-dark);
356
- --rui-Button--filled--danger--hover__background: var(--rui-color-danger-dark);
398
+ --rui-Button--filled--danger--hover__color: var(--rui-color-feedback-on-danger);
399
+ --rui-Button--filled--danger--hover__border-color: var(--rui-color-feedback-danger-hover);
400
+ --rui-Button--filled--danger--hover__background: var(--rui-color-feedback-danger-hover);
357
401
  --rui-Button--filled--danger--hover__box-shadow: none;
358
- --rui-Button--filled--danger--active__color: var(--rui-color-on-danger);
359
- --rui-Button--filled--danger--active__border-color: var(--rui-color-danger-darker);
360
- --rui-Button--filled--danger--active__background: var(--rui-color-danger-darker);
402
+ --rui-Button--filled--danger--active__color: var(--rui-color-feedback-on-danger);
403
+ --rui-Button--filled--danger--active__border-color: var(--rui-color-feedback-danger-active);
404
+ --rui-Button--filled--danger--active__background: var(--rui-color-feedback-danger-active);
361
405
  --rui-Button--filled--danger--active__box-shadow: none;
362
406
 
363
407
  // Buttons: filled priority: help variant
364
- --rui-Button--filled--help--default__color: var(--rui-color-on-help);
365
- --rui-Button--filled--help--default__border-color: var(--rui-color-help);
366
- --rui-Button--filled--help--default__background: var(--rui-color-help);
408
+ --rui-Button--filled--help--default__color: var(--rui-color-feedback-on-help);
409
+ --rui-Button--filled--help--default__border-color: var(--rui-color-feedback-help);
410
+ --rui-Button--filled--help--default__background: var(--rui-color-feedback-help);
367
411
  --rui-Button--filled--help--default__box-shadow: none;
368
- --rui-Button--filled--help--hover__color: var(--rui-color-on-help);
369
- --rui-Button--filled--help--hover__border-color: var(--rui-color-help-dark);
370
- --rui-Button--filled--help--hover__background: var(--rui-color-help-dark);
412
+ --rui-Button--filled--help--hover__color: var(--rui-color-feedback-on-help);
413
+ --rui-Button--filled--help--hover__border-color: var(--rui-color-feedback-help-hover);
414
+ --rui-Button--filled--help--hover__background: var(--rui-color-feedback-help-hover);
371
415
  --rui-Button--filled--help--hover__box-shadow: none;
372
- --rui-Button--filled--help--active__color: var(--rui-color-on-help);
373
- --rui-Button--filled--help--active__border-color: var(--rui-color-help-darker);
374
- --rui-Button--filled--help--active__background: var(--rui-color-help-darker);
416
+ --rui-Button--filled--help--active__color: var(--rui-color-feedback-on-help);
417
+ --rui-Button--filled--help--active__border-color: var(--rui-color-feedback-help-active);
418
+ --rui-Button--filled--help--active__background: var(--rui-color-feedback-help-active);
375
419
  --rui-Button--filled--help--active__box-shadow: none;
376
420
 
377
421
  // Buttons: filled priority: info variant
378
- --rui-Button--filled--info--default__color: var(--rui-color-on-info);
379
- --rui-Button--filled--info--default__border-color: var(--rui-color-info);
380
- --rui-Button--filled--info--default__background: var(--rui-color-info);
422
+ --rui-Button--filled--info--default__color: var(--rui-color-feedback-on-info);
423
+ --rui-Button--filled--info--default__border-color: var(--rui-color-feedback-info);
424
+ --rui-Button--filled--info--default__background: var(--rui-color-feedback-info);
381
425
  --rui-Button--filled--info--default__box-shadow: none;
382
- --rui-Button--filled--info--hover__color: var(--rui-color-on-info);
383
- --rui-Button--filled--info--hover__border-color: var(--rui-color-info-dark);
384
- --rui-Button--filled--info--hover__background: var(--rui-color-info-dark);
426
+ --rui-Button--filled--info--hover__color: var(--rui-color-feedback-on-info);
427
+ --rui-Button--filled--info--hover__border-color: var(--rui-color-feedback-info-hover);
428
+ --rui-Button--filled--info--hover__background: var(--rui-color-feedback-info-hover);
385
429
  --rui-Button--filled--info--hover__box-shadow: none;
386
- --rui-Button--filled--info--active__color: var(--rui-color-on-info);
387
- --rui-Button--filled--info--active__border-color: var(--rui-color-info-darker);
388
- --rui-Button--filled--info--active__background: var(--rui-color-info-darker);
430
+ --rui-Button--filled--info--active__color: var(--rui-color-feedback-on-info);
431
+ --rui-Button--filled--info--active__border-color: var(--rui-color-feedback-info-active);
432
+ --rui-Button--filled--info--active__background: var(--rui-color-feedback-info-active);
389
433
  --rui-Button--filled--info--active__box-shadow: none;
390
434
 
391
435
  // Buttons: filled priority: note variant
392
- --rui-Button--filled--note--default__color: var(--rui-color-on-note);
393
- --rui-Button--filled--note--default__border-color: var(--rui-color-note);
394
- --rui-Button--filled--note--default__background: var(--rui-color-note);
436
+ --rui-Button--filled--note--default__color: var(--rui-color-feedback-on-note);
437
+ --rui-Button--filled--note--default__border-color: var(--rui-color-feedback-note);
438
+ --rui-Button--filled--note--default__background: var(--rui-color-feedback-note);
395
439
  --rui-Button--filled--note--default__box-shadow: none;
396
- --rui-Button--filled--note--hover__color: var(--rui-color-on-note);
397
- --rui-Button--filled--note--hover__border-color: var(--rui-color-note-dark);
398
- --rui-Button--filled--note--hover__background: var(--rui-color-note-dark);
440
+ --rui-Button--filled--note--hover__color: var(--rui-color-feedback-on-note);
441
+ --rui-Button--filled--note--hover__border-color: var(--rui-color-feedback-note-hover);
442
+ --rui-Button--filled--note--hover__background: var(--rui-color-feedback-note-hover);
399
443
  --rui-Button--filled--note--hover__box-shadow: none;
400
- --rui-Button--filled--note--active__color: var(--rui-color-on-note);
401
- --rui-Button--filled--note--active__border-color: var(--rui-color-note-darker);
402
- --rui-Button--filled--note--active__background: var(--rui-color-note-darker);
444
+ --rui-Button--filled--note--active__color: var(--rui-color-feedback-on-note);
445
+ --rui-Button--filled--note--active__border-color: var(--rui-color-feedback-note-active);
446
+ --rui-Button--filled--note--active__background: var(--rui-color-feedback-note-active);
403
447
  --rui-Button--filled--note--active__box-shadow: none;
404
448
 
405
449
  // Buttons: filled priority: light variant
406
- --rui-Button--filled--light--default__color: var(--rui-color-dark);
407
- --rui-Button--filled--light--default__border-color: var(--rui-color-light);
408
- --rui-Button--filled--light--default__background: var(--rui-color-light);
450
+ --rui-Button--filled--light--default__color: var(--rui-color-neutral-on-light);
451
+ --rui-Button--filled--light--default__border-color: var(--rui-color-neutral-light);
452
+ --rui-Button--filled--light--default__background: var(--rui-color-neutral-light);
409
453
  --rui-Button--filled--light--default__box-shadow: none;
410
- --rui-Button--filled--light--hover__color: var(--rui-color-dark);
411
- --rui-Button--filled--light--hover__border-color: var(--rui-color-gray-50);
412
- --rui-Button--filled--light--hover__background: var(--rui-color-gray-50);
454
+ --rui-Button--filled--light--hover__color: var(--rui-color-neutral-on-light);
455
+ --rui-Button--filled--light--hover__border-color: var(--rui-color-neutral-light-hover);
456
+ --rui-Button--filled--light--hover__background: var(--rui-color-neutral-light-hover);
413
457
  --rui-Button--filled--light--hover__box-shadow: none;
414
- --rui-Button--filled--light--active__color: var(--rui-color-dark);
415
- --rui-Button--filled--light--active__border-color: var(--rui-color-gray-100);
416
- --rui-Button--filled--light--active__background: var(--rui-color-gray-100);
458
+ --rui-Button--filled--light--active__color: var(--rui-color-neutral-on-light);
459
+ --rui-Button--filled--light--active__border-color: var(--rui-color-neutral-light-active);
460
+ --rui-Button--filled--light--active__background: var(--rui-color-neutral-light-active);
417
461
  --rui-Button--filled--light--active__box-shadow: none;
418
462
 
419
463
  // Buttons: filled priority: dark variant
420
- --rui-Button--filled--dark--default__color: var(--rui-color-light);
421
- --rui-Button--filled--dark--default__border-color: var(--rui-color-dark);
422
- --rui-Button--filled--dark--default__background: var(--rui-color-dark);
464
+ --rui-Button--filled--dark--default__color: var(--rui-color-neutral-on-dark);
465
+ --rui-Button--filled--dark--default__border-color: var(--rui-color-neutral-dark);
466
+ --rui-Button--filled--dark--default__background: var(--rui-color-neutral-dark);
423
467
  --rui-Button--filled--dark--default__box-shadow: none;
424
- --rui-Button--filled--dark--hover__color: var(--rui-color-light);
425
- --rui-Button--filled--dark--hover__border-color: var(--rui-color-gray-800);
426
- --rui-Button--filled--dark--hover__background: var(--rui-color-gray-800);
468
+ --rui-Button--filled--dark--hover__color: var(--rui-color-neutral-on-dark);
469
+ --rui-Button--filled--dark--hover__border-color: var(--rui-color-neutral-dark-hover);
470
+ --rui-Button--filled--dark--hover__background: var(--rui-color-neutral-dark-hover);
427
471
  --rui-Button--filled--dark--hover__box-shadow: none;
428
- --rui-Button--filled--dark--active__color: var(--rui-color-light);
429
- --rui-Button--filled--dark--active__border-color: var(--rui-color-gray-900);
430
- --rui-Button--filled--dark--active__background: var(--rui-color-gray-900);
472
+ --rui-Button--filled--dark--active__color: var(--rui-color-neutral-on-dark);
473
+ --rui-Button--filled--dark--active__border-color: var(--rui-color-neutral-dark-active);
474
+ --rui-Button--filled--dark--active__background: var(--rui-color-neutral-dark-active);
431
475
  --rui-Button--filled--dark--active__box-shadow: none;
432
476
 
433
477
  // Buttons: outline priority
434
478
 
435
479
  // Buttons: outline priority: primary variant
436
- --rui-Button--outline--primary--default__color: var(--rui-color-primary);
437
- --rui-Button--outline--primary--default__border-color: var(--rui-color-primary);
480
+ --rui-Button--outline--primary--default__color: var(--rui-color-action-primary);
481
+ --rui-Button--outline--primary--default__border-color: var(--rui-color-action-primary);
438
482
  --rui-Button--outline--primary--default__background: transparent;
439
- --rui-Button--outline--primary--hover__color: var(--rui-color-on-primary);
440
- --rui-Button--outline--primary--hover__border-color: var(--rui-color-primary-dark);
441
- --rui-Button--outline--primary--hover__background: var(--rui-color-primary-dark);
442
- --rui-Button--outline--primary--active__color: var(--rui-color-on-primary);
443
- --rui-Button--outline--primary--active__border-color: var(--rui-color-primary-darker);
444
- --rui-Button--outline--primary--active__background: var(--rui-color-primary-darker);
483
+ --rui-Button--outline--primary--hover__color: var(--rui-color-action-on-primary);
484
+ --rui-Button--outline--primary--hover__border-color: var(--rui-color-action-primary-hover);
485
+ --rui-Button--outline--primary--hover__background: var(--rui-color-action-primary-hover);
486
+ --rui-Button--outline--primary--active__color: var(--rui-color-action-on-primary);
487
+ --rui-Button--outline--primary--active__border-color: var(--rui-color-action-primary-active);
488
+ --rui-Button--outline--primary--active__background: var(--rui-color-action-primary-active);
445
489
 
446
490
  // Buttons: outline priority: secondary variant
447
- --rui-Button--outline--secondary--default__color: var(--rui-color-secondary);
448
- --rui-Button--outline--secondary--default__border-color: var(--rui-color-secondary);
491
+ --rui-Button--outline--secondary--default__color: var(--rui-color-action-secondary);
492
+ --rui-Button--outline--secondary--default__border-color: var(--rui-color-action-secondary);
449
493
  --rui-Button--outline--secondary--default__background: transparent;
450
- --rui-Button--outline--secondary--hover__color: var(--rui-color-on-secondary);
451
- --rui-Button--outline--secondary--hover__border-color: var(--rui-color-secondary-dark);
452
- --rui-Button--outline--secondary--hover__background: var(--rui-color-secondary-dark);
453
- --rui-Button--outline--secondary--active__color: var(--rui-color-on-secondary);
454
- --rui-Button--outline--secondary--active__border-color: var(--rui-color-secondary-darker);
455
- --rui-Button--outline--secondary--active__background: var(--rui-color-secondary-darker);
494
+ --rui-Button--outline--secondary--hover__color: var(--rui-color-action-on-secondary);
495
+ --rui-Button--outline--secondary--hover__border-color: var(--rui-color-action-secondary-hover);
496
+ --rui-Button--outline--secondary--hover__background: var(--rui-color-action-secondary-hover);
497
+ --rui-Button--outline--secondary--active__color: var(--rui-color-action-on-secondary);
498
+ --rui-Button--outline--secondary--active__border-color: var(--rui-color-action-secondary-active);
499
+ --rui-Button--outline--secondary--active__background: var(--rui-color-action-secondary-active);
500
+
501
+ // Buttons: outline priority: selected variant
502
+ --rui-Button--outline--selected--default__color: var(--rui-color-action-selected);
503
+ --rui-Button--outline--selected--default__border-color: var(--rui-color-action-selected);
504
+ --rui-Button--outline--selected--default__background: var(--rui-color-background-selected);
505
+ --rui-Button--outline--selected--hover__color: var(--rui-color-action-on-selected);
506
+ --rui-Button--outline--selected--hover__border-color: var(--rui-color-action-selected-hover);
507
+ --rui-Button--outline--selected--hover__background: var(--rui-color-action-selected-hover);
508
+ --rui-Button--outline--selected--active__color: var(--rui-color-action-on-selected);
509
+ --rui-Button--outline--selected--active__border-color: var(--rui-color-action-selected-active);
510
+ --rui-Button--outline--selected--active__background: var(--rui-color-action-selected-active);
456
511
 
457
512
  // Buttons: outline priority: success variant
458
- --rui-Button--outline--success--default__color: var(--rui-color-success);
459
- --rui-Button--outline--success--default__border-color: var(--rui-color-success);
513
+ --rui-Button--outline--success--default__color: var(--rui-color-feedback-success);
514
+ --rui-Button--outline--success--default__border-color: var(--rui-color-feedback-success);
460
515
  --rui-Button--outline--success--default__background: transparent;
461
- --rui-Button--outline--success--hover__color: var(--rui-color-on-success);
462
- --rui-Button--outline--success--hover__border-color: var(--rui-color-success-dark);
463
- --rui-Button--outline--success--hover__background: var(--rui-color-success-dark);
464
- --rui-Button--outline--success--active__color: var(--rui-color-on-success);
465
- --rui-Button--outline--success--active__border-color: var(--rui-color-success-darker);
466
- --rui-Button--outline--success--active__background: var(--rui-color-success-darker);
516
+ --rui-Button--outline--success--hover__color: var(--rui-color-feedback-on-success);
517
+ --rui-Button--outline--success--hover__border-color: var(--rui-color-feedback-success-hover);
518
+ --rui-Button--outline--success--hover__background: var(--rui-color-feedback-success-hover);
519
+ --rui-Button--outline--success--active__color: var(--rui-color-feedback-on-success);
520
+ --rui-Button--outline--success--active__border-color: var(--rui-color-feedback-success-active);
521
+ --rui-Button--outline--success--active__background: var(--rui-color-feedback-success-active);
467
522
 
468
523
  // Buttons: outline priority: warning variant
469
- --rui-Button--outline--warning--default__color: var(--rui-color-warning);
470
- --rui-Button--outline--warning--default__border-color: var(--rui-color-warning);
524
+ --rui-Button--outline--warning--default__color: var(--rui-color-feedback-warning);
525
+ --rui-Button--outline--warning--default__border-color: var(--rui-color-feedback-warning);
471
526
  --rui-Button--outline--warning--default__background: transparent;
472
- --rui-Button--outline--warning--hover__color: var(--rui-color-on-warning);
473
- --rui-Button--outline--warning--hover__border-color: var(--rui-color-warning-dark);
474
- --rui-Button--outline--warning--hover__background: var(--rui-color-warning-dark);
475
- --rui-Button--outline--warning--active__color: var(--rui-color-on-warning);
476
- --rui-Button--outline--warning--active__border-color: var(--rui-color-warning-darker);
477
- --rui-Button--outline--warning--active__background: var(--rui-color-warning-darker);
527
+ --rui-Button--outline--warning--hover__color: var(--rui-color-feedback-on-warning);
528
+ --rui-Button--outline--warning--hover__border-color: var(--rui-color-feedback-warning-hover);
529
+ --rui-Button--outline--warning--hover__background: var(--rui-color-feedback-warning-hover);
530
+ --rui-Button--outline--warning--active__color: var(--rui-color-feedback-on-warning);
531
+ --rui-Button--outline--warning--active__border-color: var(--rui-color-feedback-warning-active);
532
+ --rui-Button--outline--warning--active__background: var(--rui-color-feedback-warning-active);
478
533
 
479
534
  // Buttons: outline priority: danger variant
480
- --rui-Button--outline--danger--default__color: var(--rui-color-danger);
481
- --rui-Button--outline--danger--default__border-color: var(--rui-color-danger);
535
+ --rui-Button--outline--danger--default__color: var(--rui-color-feedback-danger);
536
+ --rui-Button--outline--danger--default__border-color: var(--rui-color-feedback-danger);
482
537
  --rui-Button--outline--danger--default__background: transparent;
483
- --rui-Button--outline--danger--hover__color: var(--rui-color-on-danger);
484
- --rui-Button--outline--danger--hover__border-color: var(--rui-color-danger-dark);
485
- --rui-Button--outline--danger--hover__background: var(--rui-color-danger-dark);
486
- --rui-Button--outline--danger--active__color: var(--rui-color-on-danger);
487
- --rui-Button--outline--danger--active__border-color: var(--rui-color-danger-darker);
488
- --rui-Button--outline--danger--active__background: var(--rui-color-danger-darker);
538
+ --rui-Button--outline--danger--hover__color: var(--rui-color-feedback-on-danger);
539
+ --rui-Button--outline--danger--hover__border-color: var(--rui-color-feedback-danger-hover);
540
+ --rui-Button--outline--danger--hover__background: var(--rui-color-feedback-danger-hover);
541
+ --rui-Button--outline--danger--active__color: var(--rui-color-feedback-on-danger);
542
+ --rui-Button--outline--danger--active__border-color: var(--rui-color-feedback-danger-active);
543
+ --rui-Button--outline--danger--active__background: var(--rui-color-feedback-danger-active);
489
544
 
490
545
  // Buttons: outline priority: help variant
491
- --rui-Button--outline--help--default__color: var(--rui-color-help);
492
- --rui-Button--outline--help--default__border-color: var(--rui-color-help);
546
+ --rui-Button--outline--help--default__color: var(--rui-color-feedback-help);
547
+ --rui-Button--outline--help--default__border-color: var(--rui-color-feedback-help);
493
548
  --rui-Button--outline--help--default__background: transparent;
494
- --rui-Button--outline--help--hover__color: var(--rui-color-on-help);
495
- --rui-Button--outline--help--hover__border-color: var(--rui-color-help-dark);
496
- --rui-Button--outline--help--hover__background: var(--rui-color-help-dark);
497
- --rui-Button--outline--help--active__color: var(--rui-color-on-help);
498
- --rui-Button--outline--help--active__border-color: var(--rui-color-help-darker);
499
- --rui-Button--outline--help--active__background: var(--rui-color-help-darker);
549
+ --rui-Button--outline--help--hover__color: var(--rui-color-feedback-on-help);
550
+ --rui-Button--outline--help--hover__border-color: var(--rui-color-feedback-help-hover);
551
+ --rui-Button--outline--help--hover__background: var(--rui-color-feedback-help-hover);
552
+ --rui-Button--outline--help--active__color: var(--rui-color-feedback-on-help);
553
+ --rui-Button--outline--help--active__border-color: var(--rui-color-feedback-help-active);
554
+ --rui-Button--outline--help--active__background: var(--rui-color-feedback-help-active);
500
555
 
501
556
  // Buttons: outline priority: info variant
502
- --rui-Button--outline--info--default__color: var(--rui-color-info);
503
- --rui-Button--outline--info--default__border-color: var(--rui-color-info);
557
+ --rui-Button--outline--info--default__color: var(--rui-color-feedback-info);
558
+ --rui-Button--outline--info--default__border-color: var(--rui-color-feedback-info);
504
559
  --rui-Button--outline--info--default__background: transparent;
505
- --rui-Button--outline--info--hover__color: var(--rui-color-on-info);
506
- --rui-Button--outline--info--hover__border-color: var(--rui-color-info-dark);
507
- --rui-Button--outline--info--hover__background: var(--rui-color-info-dark);
508
- --rui-Button--outline--info--active__color: var(--rui-color-on-info);
509
- --rui-Button--outline--info--active__border-color: var(--rui-color-info-darker);
510
- --rui-Button--outline--info--active__background: var(--rui-color-info-darker);
560
+ --rui-Button--outline--info--hover__color: var(--rui-color-feedback-on-info);
561
+ --rui-Button--outline--info--hover__border-color: var(--rui-color-feedback-info-hover);
562
+ --rui-Button--outline--info--hover__background: var(--rui-color-feedback-info-hover);
563
+ --rui-Button--outline--info--active__color: var(--rui-color-feedback-on-info);
564
+ --rui-Button--outline--info--active__border-color: var(--rui-color-feedback-info-active);
565
+ --rui-Button--outline--info--active__background: var(--rui-color-feedback-info-active);
511
566
 
512
567
  // Buttons: outline priority: note variant
513
- --rui-Button--outline--note--default__color: var(--rui-color-note);
514
- --rui-Button--outline--note--default__border-color: var(--rui-color-note);
568
+ --rui-Button--outline--note--default__color: var(--rui-color-feedback-note);
569
+ --rui-Button--outline--note--default__border-color: var(--rui-color-feedback-note);
515
570
  --rui-Button--outline--note--default__background: transparent;
516
- --rui-Button--outline--note--hover__color: var(--rui-color-on-note);
517
- --rui-Button--outline--note--hover__border-color: var(--rui-color-note-dark);
518
- --rui-Button--outline--note--hover__background: var(--rui-color-note-dark);
519
- --rui-Button--outline--note--active__color: var(--rui-color-on-note);
520
- --rui-Button--outline--note--active__border-color: var(--rui-color-note-darker);
521
- --rui-Button--outline--note--active__background: var(--rui-color-note-darker);
571
+ --rui-Button--outline--note--hover__color: var(--rui-color-feedback-on-note);
572
+ --rui-Button--outline--note--hover__border-color: var(--rui-color-feedback-note-hover);
573
+ --rui-Button--outline--note--hover__background: var(--rui-color-feedback-note-hover);
574
+ --rui-Button--outline--note--active__color: var(--rui-color-feedback-on-note);
575
+ --rui-Button--outline--note--active__border-color: var(--rui-color-feedback-note-active);
576
+ --rui-Button--outline--note--active__background: var(--rui-color-feedback-note-active);
522
577
 
523
578
  // Buttons: outline priority: light variant
524
- --rui-Button--outline--light--default__color: var(--rui-color-light);
525
- --rui-Button--outline--light--default__border-color: var(--rui-color-light);
579
+ --rui-Button--outline--light--default__color: var(--rui-color-neutral-light);
580
+ --rui-Button--outline--light--default__border-color: var(--rui-color-neutral-light);
526
581
  --rui-Button--outline--light--default__background: transparent;
527
- --rui-Button--outline--light--hover__color: var(--rui-color-dark);
528
- --rui-Button--outline--light--hover__border-color: var(--rui-color-gray-50);
529
- --rui-Button--outline--light--hover__background: var(--rui-color-gray-50);
530
- --rui-Button--outline--light--active__color: var(--rui-color-dark);
531
- --rui-Button--outline--light--active__border-color: var(--rui-color-gray-100);
532
- --rui-Button--outline--light--active__background: var(--rui-color-gray-100);
582
+ --rui-Button--outline--light--hover__color: var(--rui-color-neutral-on-light);
583
+ --rui-Button--outline--light--hover__border-color: var(--rui-color-neutral-light-hover);
584
+ --rui-Button--outline--light--hover__background: var(--rui-color-neutral-light-hover);
585
+ --rui-Button--outline--light--active__color: var(--rui-color-neutral-on-light);
586
+ --rui-Button--outline--light--active__border-color: var(--rui-color-neutral-light-active);
587
+ --rui-Button--outline--light--active__background: var(--rui-color-neutral-light-active);
533
588
 
534
589
  // Buttons: outline priority: dark variant
535
- --rui-Button--outline--dark--default__color: var(--rui-color-dark);
536
- --rui-Button--outline--dark--default__border-color: var(--rui-color-dark);
590
+ --rui-Button--outline--dark--default__color: var(--rui-color-neutral-dark);
591
+ --rui-Button--outline--dark--default__border-color: var(--rui-color-neutral-dark);
537
592
  --rui-Button--outline--dark--default__background: transparent;
538
- --rui-Button--outline--dark--hover__color: var(--rui-color-light);
539
- --rui-Button--outline--dark--hover__border-color: var(--rui-color-gray-800);
540
- --rui-Button--outline--dark--hover__background: var(--rui-color-gray-800);
541
- --rui-Button--outline--dark--active__color: var(--rui-color-light);
542
- --rui-Button--outline--dark--active__border-color: var(--rui-color-gray-900);
543
- --rui-Button--outline--dark--active__background: var(--rui-color-gray-900);
593
+ --rui-Button--outline--dark--hover__color: var(--rui-color-neutral-on-dark);
594
+ --rui-Button--outline--dark--hover__border-color: var(--rui-color-neutral-dark-hover);
595
+ --rui-Button--outline--dark--hover__background: var(--rui-color-neutral-dark-hover);
596
+ --rui-Button--outline--dark--active__color: var(--rui-color-neutral-on-dark);
597
+ --rui-Button--outline--dark--active__border-color: var(--rui-color-neutral-dark-active);
598
+ --rui-Button--outline--dark--active__background: var(--rui-color-neutral-dark-active);
544
599
 
545
600
  // Buttons: flat
546
601
 
547
602
  // Buttons: flat priority: primary variant
548
- --rui-Button--flat--primary--default__color: var(--rui-color-primary);
603
+ --rui-Button--flat--primary--default__color: var(--rui-color-action-primary);
549
604
  --rui-Button--flat--primary--default__background: transparent;
550
- --rui-Button--flat--primary--hover__color: var(--rui-color-primary-dark);
551
- --rui-Button--flat--primary--hover__background: var(--rui-color-primary-light);
552
- --rui-Button--flat--primary--active__color: var(--rui-color-primary-darker);
553
- --rui-Button--flat--primary--active__background: var(--rui-color-primary-light);
605
+ --rui-Button--flat--primary--hover__color: var(--rui-color-action-primary-hover);
606
+ --rui-Button--flat--primary--hover__background: var(--rui-color-background-primary);
607
+ --rui-Button--flat--primary--active__color: var(--rui-color-action-primary-active);
608
+ --rui-Button--flat--primary--active__background: var(--rui-color-background-primary);
554
609
 
555
610
  // Buttons: flat priority: secondary variant
556
- --rui-Button--flat--secondary--default__color: var(--rui-color-secondary);
611
+ --rui-Button--flat--secondary--default__color: var(--rui-color-action-secondary);
557
612
  --rui-Button--flat--secondary--default__background: transparent;
558
- --rui-Button--flat--secondary--hover__color: var(--rui-color-secondary-dark);
559
- --rui-Button--flat--secondary--hover__background: var(--rui-color-secondary-light);
560
- --rui-Button--flat--secondary--active__color: var(--rui-color-secondary-darker);
561
- --rui-Button--flat--secondary--active__background: var(--rui-color-secondary-light);
613
+ --rui-Button--flat--secondary--hover__color: var(--rui-color-action-secondary-hover);
614
+ --rui-Button--flat--secondary--hover__background: var(--rui-color-background-secondary);
615
+ --rui-Button--flat--secondary--active__color: var(--rui-color-action-secondary-active);
616
+ --rui-Button--flat--secondary--active__background: var(--rui-color-background-secondary);
617
+
618
+ // Buttons: flat priority: selected variant
619
+ --rui-Button--flat--selected--default__color: var(--rui-color-action-selected);
620
+ --rui-Button--flat--selected--default__background: var(--rui-color-background-selected);
621
+ --rui-Button--flat--selected--hover__color: var(--rui-color-action-selected-hover);
622
+ --rui-Button--flat--selected--hover__background: var(--rui-color-background-selected);
623
+ --rui-Button--flat--selected--active__color: var(--rui-color-action-selected-active);
624
+ --rui-Button--flat--selected--active__background: var(--rui-color-background-selected);
562
625
 
563
626
  // Buttons: flat priority: success variant
564
- --rui-Button--flat--success--default__color: var(--rui-color-success);
627
+ --rui-Button--flat--success--default__color: var(--rui-color-feedback-success);
565
628
  --rui-Button--flat--success--default__background: transparent;
566
- --rui-Button--flat--success--hover__color: var(--rui-color-success-dark);
567
- --rui-Button--flat--success--hover__background: var(--rui-color-success-light);
568
- --rui-Button--flat--success--active__color: var(--rui-color-success-darker);
569
- --rui-Button--flat--success--active__background: var(--rui-color-success-light);
629
+ --rui-Button--flat--success--hover__color: var(--rui-color-feedback-success-hover);
630
+ --rui-Button--flat--success--hover__background: var(--rui-color-background-success);
631
+ --rui-Button--flat--success--active__color: var(--rui-color-feedback-success-active);
632
+ --rui-Button--flat--success--active__background: var(--rui-color-background-success);
570
633
 
571
634
  // Buttons: flat priority: warning variant
572
- --rui-Button--flat--warning--default__color: var(--rui-color-warning);
635
+ --rui-Button--flat--warning--default__color: var(--rui-color-feedback-warning);
573
636
  --rui-Button--flat--warning--default__background: transparent;
574
- --rui-Button--flat--warning--hover__color: var(--rui-color-warning-dark);
575
- --rui-Button--flat--warning--hover__background: var(--rui-color-warning-light);
576
- --rui-Button--flat--warning--active__color: var(--rui-color-warning-darker);
577
- --rui-Button--flat--warning--active__background: var(--rui-color-warning-light);
637
+ --rui-Button--flat--warning--hover__color: var(--rui-color-feedback-warning-hover);
638
+ --rui-Button--flat--warning--hover__background: var(--rui-color-background-warning);
639
+ --rui-Button--flat--warning--active__color: var(--rui-color-feedback-warning-active);
640
+ --rui-Button--flat--warning--active__background: var(--rui-color-background-warning);
578
641
 
579
642
  // Buttons: flat priority: danger variant
580
- --rui-Button--flat--danger--default__color: var(--rui-color-danger);
643
+ --rui-Button--flat--danger--default__color: var(--rui-color-feedback-danger);
581
644
  --rui-Button--flat--danger--default__background: transparent;
582
- --rui-Button--flat--danger--hover__color: var(--rui-color-danger-dark);
583
- --rui-Button--flat--danger--hover__background: var(--rui-color-danger-light);
584
- --rui-Button--flat--danger--active__color: var(--rui-color-danger-darker);
585
- --rui-Button--flat--danger--active__background: var(--rui-color-danger-light);
645
+ --rui-Button--flat--danger--hover__color: var(--rui-color-feedback-danger-hover);
646
+ --rui-Button--flat--danger--hover__background: var(--rui-color-background-danger);
647
+ --rui-Button--flat--danger--active__color: var(--rui-color-feedback-danger-active);
648
+ --rui-Button--flat--danger--active__background: var(--rui-color-background-danger);
586
649
 
587
650
  // Buttons: flat priority: help variant
588
- --rui-Button--flat--help--default__color: var(--rui-color-help);
651
+ --rui-Button--flat--help--default__color: var(--rui-color-feedback-help);
589
652
  --rui-Button--flat--help--default__background: transparent;
590
- --rui-Button--flat--help--hover__color: var(--rui-color-help-dark);
591
- --rui-Button--flat--help--hover__background: var(--rui-color-help-light);
592
- --rui-Button--flat--help--active__color: var(--rui-color-help-darker);
593
- --rui-Button--flat--help--active__background: var(--rui-color-help-light);
653
+ --rui-Button--flat--help--hover__color: var(--rui-color-feedback-help-hover);
654
+ --rui-Button--flat--help--hover__background: var(--rui-color-background-help);
655
+ --rui-Button--flat--help--active__color: var(--rui-color-feedback-help-active);
656
+ --rui-Button--flat--help--active__background: var(--rui-color-background-help);
594
657
 
595
658
  // Buttons: flat priority: info variant
596
- --rui-Button--flat--info--default__color: var(--rui-color-info);
659
+ --rui-Button--flat--info--default__color: var(--rui-color-feedback-info);
597
660
  --rui-Button--flat--info--default__background: transparent;
598
- --rui-Button--flat--info--hover__color: var(--rui-color-info-dark);
599
- --rui-Button--flat--info--hover__background: var(--rui-color-info-light);
600
- --rui-Button--flat--info--active__color: var(--rui-color-info-darker);
601
- --rui-Button--flat--info--active__background: var(--rui-color-info-light);
661
+ --rui-Button--flat--info--hover__color: var(--rui-color-feedback-info-hover);
662
+ --rui-Button--flat--info--hover__background: var(--rui-color-background-info);
663
+ --rui-Button--flat--info--active__color: var(--rui-color-feedback-info-active);
664
+ --rui-Button--flat--info--active__background: var(--rui-color-background-info);
602
665
 
603
666
  // Buttons: flat priority: note variant
604
- --rui-Button--flat--note--default__color: var(--rui-color-note);
667
+ --rui-Button--flat--note--default__color: var(--rui-color-feedback-note);
605
668
  --rui-Button--flat--note--default__background: transparent;
606
- --rui-Button--flat--note--hover__color: var(--rui-color-note-dark);
607
- --rui-Button--flat--note--hover__background: var(--rui-color-note-light);
608
- --rui-Button--flat--note--active__color: var(--rui-color-note-darker);
609
- --rui-Button--flat--note--active__background: var(--rui-color-note-light);
669
+ --rui-Button--flat--note--hover__color: var(--rui-color-feedback-note-hover);
670
+ --rui-Button--flat--note--hover__background: var(--rui-color-background-note);
671
+ --rui-Button--flat--note--active__color: var(--rui-color-feedback-note-active);
672
+ --rui-Button--flat--note--active__background: var(--rui-color-background-note);
610
673
 
611
674
  // Buttons: flat priority: light variant
612
- --rui-Button--flat--light--default__color: var(--rui-color-light);
675
+ --rui-Button--flat--light--default__color: var(--rui-color-neutral-light);
613
676
  --rui-Button--flat--light--default__background: transparent;
614
- --rui-Button--flat--light--hover__color: var(--rui-color-light);
615
- --rui-Button--flat--light--hover__background: var(--rui-color-gray-600);
616
- --rui-Button--flat--light--active__color: var(--rui-color-gray-100);
617
- --rui-Button--flat--light--active__background: var(--rui-color-gray-600);
677
+ --rui-Button--flat--light--hover__color: var(--rui-color-neutral-light-hover);
678
+ --rui-Button--flat--light--hover__background: var(--rui-color-background-dark);
679
+ --rui-Button--flat--light--active__color: var(--rui-color-neutral-light-active);
680
+ --rui-Button--flat--light--active__background: var(--rui-color-background-dark);
618
681
 
619
682
  // Buttons: flat priority: dark variant
620
- --rui-Button--flat--dark--default__color: var(--rui-color-dark);
683
+ --rui-Button--flat--dark--default__color: var(--rui-color-neutral-dark);
621
684
  --rui-Button--flat--dark--default__background: transparent;
622
- --rui-Button--flat--dark--hover__color: var(--rui-color-dark);
623
- --rui-Button--flat--dark--hover__background: var(--rui-color-gray-100);
624
- --rui-Button--flat--dark--active__color: var(--rui-color-800);
625
- --rui-Button--flat--dark--active__background: var(--rui-color-gray-100);
685
+ --rui-Button--flat--dark--hover__color: var(--rui-color-neutral-dark-hover);
686
+ --rui-Button--flat--dark--hover__background: var(--rui-color-background-light);
687
+ --rui-Button--flat--dark--active__color: var(--rui-color-neutral-dark-active);
688
+ --rui-Button--flat--dark--active__background: var(--rui-color-background-light);
626
689
 
627
690
  // Buttons: sizes
628
691
 
629
692
  // Buttons: sizes: small
630
693
  --rui-Button--small__height: 1.75rem;
631
- --rui-Button--small__padding-y: var(--rui-spacing-1);
632
- --rui-Button--small__padding-x: var(--rui-spacing-3);
633
- --rui-Button--small__font-size: var(--rui-typography-size-small);
694
+ --rui-Button--small__padding-y: var(--rui-dimension-space-1);
695
+ --rui-Button--small__padding-x: var(--rui-dimension-space-3);
696
+ --rui-Button--small__font-size: var(--rui-font-size-small);
634
697
 
635
698
  // Buttons: sizes: medium
636
699
  --rui-Button--medium__height: 2.25rem;
637
- --rui-Button--medium__padding-y: var(--rui-spacing-1);
638
- --rui-Button--medium__padding-x: var(--rui-spacing-4);
639
- --rui-Button--medium__font-size: var(--rui-typography-size-0);
700
+ --rui-Button--medium__padding-y: var(--rui-dimension-space-1);
701
+ --rui-Button--medium__padding-x: var(--rui-dimension-space-4);
702
+ --rui-Button--medium__font-size: var(--rui-font-size-1);
640
703
 
641
704
  // Buttons: sizes: large
642
705
  --rui-Button--large__height: 2.75rem;
643
- --rui-Button--large__padding-y: var(--rui-spacing-2);
644
- --rui-Button--large__padding-x: var(--rui-spacing-5);
645
- --rui-Button--large__font-size: var(--rui-typography-size-1);
706
+ --rui-Button--large__padding-y: var(--rui-dimension-space-2);
707
+ --rui-Button--large__padding-x: var(--rui-dimension-space-5);
708
+ --rui-Button--large__font-size: var(--rui-font-size-2);
646
709
 
647
710
  //
648
711
  // ButtonGroup
@@ -665,63 +728,53 @@
665
728
  // Card
666
729
  // ====
667
730
 
668
- --rui-Card__padding: var(--rui-spacing-4);
669
- --rui-Card__border-width: var(--rui-border-width);
670
- --rui-Card__border-radius: var(--rui-border-radius);
671
- --rui-Card--dense__padding: var(--rui-spacing-2);
672
- --rui-Card--raised__box-shadow: var(--rui-elevation-1);
673
- --rui-Card--disabled__background-color: var(--rui-disabled-background-color);
674
- --rui-Card--disabled__opacity: var(--rui-disabled-opacity);
675
-
676
- // Card: variant: primary
677
- --rui-Card--primary__color: var(--rui-page-color);
678
- --rui-Card--primary__border-color: var(--rui-color-primary);
679
- --rui-Card--primary__background-color: var(--rui-color-white);
680
-
681
- // Card: variant: secondary
682
- --rui-Card--secondary__color: var(--rui-page-color);
683
- --rui-Card--secondary__border-color: var(--rui-color-secondary);
684
- --rui-Card--secondary__background-color: var(--rui-color-white);
731
+ --rui-Card__padding: var(--rui-dimension-space-4);
732
+ --rui-Card__border-width: var(--rui-dimension-border-width-1);
733
+ --rui-Card__border-radius: var(--rui-dimension-radius-1);
734
+ --rui-Card--dense__padding: var(--rui-dimension-space-2);
735
+ --rui-Card--raised__box-shadow: var(--rui-shadow-layer-1);
736
+ --rui-Card--disabled__background-color: var(--rui-color-background-disabled);
737
+ --rui-Card--disabled__opacity: var(--rui-ratio-disabled-opacity);
685
738
 
686
739
  // Card: variant: success
687
- --rui-Card--success__color: var(--rui-page-color);
688
- --rui-Card--success__border-color: var(--rui-color-success);
689
- --rui-Card--success__background-color: var(--rui-color-white);
740
+ --rui-Card--success__color: var(--rui-color-text-primary);
741
+ --rui-Card--success__border-color: var(--rui-color-feedback-success);
742
+ --rui-Card--success__background-color: var(--rui-color-background-layer-1);
690
743
 
691
744
  // Card: variant: warning
692
- --rui-Card--warning__color: var(--rui-page-color);
693
- --rui-Card--warning__border-color: var(--rui-color-warning);
694
- --rui-Card--warning__background-color: var(--rui-color-white);
745
+ --rui-Card--warning__color: var(--rui-color-text-primary);
746
+ --rui-Card--warning__border-color: var(--rui-color-feedback-warning);
747
+ --rui-Card--warning__background-color: var(--rui-color-background-layer-1);
695
748
 
696
749
  // Card: variant: danger
697
- --rui-Card--danger__color: var(--rui-page-color);
698
- --rui-Card--danger__border-color: var(--rui-color-danger);
699
- --rui-Card--danger__background-color: var(--rui-color-white);
750
+ --rui-Card--danger__color: var(--rui-color-text-primary);
751
+ --rui-Card--danger__border-color: var(--rui-color-feedback-danger);
752
+ --rui-Card--danger__background-color: var(--rui-color-background-layer-1);
700
753
 
701
754
  // Card: variant: info
702
- --rui-Card--info__color: var(--rui-page-color);
703
- --rui-Card--info__border-color: var(--rui-color-info);
704
- --rui-Card--info__background-color: var(--rui-color-white);
755
+ --rui-Card--info__color: var(--rui-color-text-primary);
756
+ --rui-Card--info__border-color: var(--rui-color-feedback-info);
757
+ --rui-Card--info__background-color: var(--rui-color-background-layer-1);
705
758
 
706
759
  // Card: variant: help
707
- --rui-Card--help__color: var(--rui-page-color);
708
- --rui-Card--help__border-color: var(--rui-color-help);
709
- --rui-Card--help__background-color: var(--rui-color-white);
760
+ --rui-Card--help__color: var(--rui-color-text-primary);
761
+ --rui-Card--help__border-color: var(--rui-color-feedback-help);
762
+ --rui-Card--help__background-color: var(--rui-color-background-layer-1);
710
763
 
711
764
  // Card: variant: note
712
- --rui-Card--note__color: var(--rui-page-color);
713
- --rui-Card--note__border-color: var(--rui-color-note);
714
- --rui-Card--note__background-color: var(--rui-color-white);
765
+ --rui-Card--note__color: var(--rui-color-text-primary);
766
+ --rui-Card--note__border-color: var(--rui-color-feedback-note);
767
+ --rui-Card--note__background-color: var(--rui-color-background-layer-1);
715
768
 
716
769
  // Card: variant: light
717
- --rui-Card--light__color: var(--rui-page-color);
718
- --rui-Card--light__border-color: var(--rui-color-light);
719
- --rui-Card--light__background-color: var(--rui-color-white);
770
+ --rui-Card--light__color: var(--rui-color-text-primary);
771
+ --rui-Card--light__border-color: var(--rui-color-neutral-light);
772
+ --rui-Card--light__background-color: var(--rui-color-background-layer-1);
720
773
 
721
774
  // Card: variant: dark
722
- --rui-Card--dark__color: var(--rui-color-light);
723
- --rui-Card--dark__border-color: var(--rui-color-light);
724
- --rui-Card--dark__background-color: var(--rui-color-dark);
775
+ --rui-Card--dark__color: var(--rui-color-neutral-on-dark);
776
+ --rui-Card--dark__border-color: var(--rui-color-neutral-on-dark);
777
+ --rui-Card--dark__background-color: var(--rui-color-background-dark);
725
778
 
726
779
  //
727
780
  // Form Fields
@@ -738,13 +791,13 @@
738
791
 
739
792
  // Forms fields: common properties
740
793
  --rui-FormField__label__color: inherit;
741
- --rui-FormField__label__font-size: var(--rui-typography-size-0);
742
- --rui-FormField__help-text__font-size: var(--rui-typography-size-small);
794
+ --rui-FormField__label__font-size: var(--rui-font-size-1);
795
+ --rui-FormField__help-text__font-size: var(--rui-font-size-small);
743
796
  --rui-FormField__help-text__font-style: normal;
744
- --rui-FormField__help-text__color: var(--rui-color-gray-500);
797
+ --rui-FormField__help-text__color: var(--rui-color-text-secondary);
745
798
  --rui-FormField--required__label__color: inherit;
746
799
  --rui-FormField--required__sign: "\00a0*"; // 2.
747
- --rui-FormField--required__sign__color: var(--rui-color-gray-500);
800
+ --rui-FormField--required__sign__color: var(--rui-color-text-secondary);
748
801
 
749
802
  // Form fields: horizontal layout
750
803
  --rui-FormField--horizontal__label__text-align: left;
@@ -755,79 +808,79 @@
755
808
  --rui-FormField--horizontal--full-width__label__width: fit-content(50%);
756
809
 
757
810
  // Forms fields: disabled state
758
- --rui-FormField--disabled__cursor: var(--rui-disabled-cursor);
759
- --rui-FormField--disabled__opacity: var(--rui-disabled-opacity);
811
+ --rui-FormField--disabled__cursor: var(--rui-cursor-not-allowed);
812
+ --rui-FormField--disabled__opacity: var(--rui-ratio-disabled-opacity);
760
813
 
761
814
  // Form fields: validation states: invalid
762
- --rui-FormField--invalid--default__border-color: var(--rui-color-danger);
763
- --rui-FormField--invalid--default__background: var(--rui-color-danger-light);
815
+ --rui-FormField--invalid--default__border-color: var(--rui-color-feedback-danger);
816
+ --rui-FormField--invalid--default__background: var(--rui-color-background-danger);
764
817
  --rui-FormField--invalid--default__check-background-color: var(--rui-FormField--invalid--default__background);
765
- --rui-FormField--invalid--default__surrounding-text-color: var(--rui-color-danger);
818
+ --rui-FormField--invalid--default__surrounding-text-color: var(--rui-color-feedback-danger);
766
819
  --rui-FormField--invalid--checked__check-background-color: var(--rui-FormField--invalid--default__border-color);
767
820
 
768
821
  // Form fields: validation states: valid
769
- --rui-FormField--valid--default__border-color: var(--rui-color-success);
770
- --rui-FormField--valid--default__background: var(--rui-color-success-light);
822
+ --rui-FormField--valid--default__border-color: var(--rui-color-feedback-success);
823
+ --rui-FormField--valid--default__background: var(--rui-color-background-success);
771
824
  --rui-FormField--valid--default__check-background-color: var(--rui-FormField--valid--default__background);
772
- --rui-FormField--valid--default__surrounding-text-color: var(--rui-color-success);
825
+ --rui-FormField--valid--default__surrounding-text-color: var(--rui-color-feedback-success);
773
826
  --rui-FormField--valid--checked__check-background-color: var(--rui-FormField--valid--default__border-color);
774
827
 
775
828
  // Form fields: validation states: warning
776
- --rui-FormField--warning--default__border-color: var(--rui-color-warning-dark);
777
- --rui-FormField--warning--default__background: var(--rui-color-warning-light);
829
+ --rui-FormField--warning--default__border-color: var(--rui-color-feedback-warning-hover);
830
+ --rui-FormField--warning--default__background: var(--rui-color-background-warning);
778
831
  --rui-FormField--warning--default__check-background-color: var(--rui-FormField--warning--default__background);
779
- --rui-FormField--warning--default__surrounding-text-color: var(--rui-color-warning-darker);
832
+ --rui-FormField--warning--default__surrounding-text-color: var(--rui-color-feedback-warning-active);
780
833
  --rui-FormField--warning--checked__check-background-color: var(--rui-FormField--warning--default__border-color);
781
834
 
782
835
  // Form fields: box fields
783
- --rui-FormField--box__border-width: var(--rui-border-width);
784
- --rui-FormField--box__border-radius: var(--rui-border-radius);
836
+ --rui-FormField--box__border-width: var(--rui-dimension-border-width-1);
837
+ --rui-FormField--box__border-radius: var(--rui-dimension-radius-1);
785
838
  --rui-FormField--box__input__width: auto; // 1.
786
839
  --rui-FormField--box__input__min-width: 240px; // 1.
787
- --rui-FormField--box__placeholder__color: var(--rui-color-gray-500);
840
+ --rui-FormField--box__placeholder__color: var(--rui-color-text-secondary);
788
841
  --rui-FormField--box--select__caret__border-style: none;
789
842
  --rui-FormField--box--select__caret__background: transparent;
790
- --rui-FormField--box--select__option--disabled__color: var(--rui-color-gray-300);
843
+ --rui-FormField--box--select__option--disabled__color: var(--rui-color-text-primary-disabled);
791
844
 
792
845
  // Form fields: box field sizes: small
793
846
  --rui-FormField--box--small__height: var(--rui-Button--small__height);
794
847
  --rui-FormField--box--small__padding-y: 0.0625rem;
795
- --rui-FormField--box--small__padding-x: var(--rui-spacing-2);
796
- --rui-FormField--box--small__font-size: var(--rui-typography-size-small);
848
+ --rui-FormField--box--small__padding-x: var(--rui-dimension-space-2);
849
+ --rui-FormField--box--small__font-size: var(--rui-font-size-small);
797
850
 
798
851
  // Form fields: box field sizes: medium
799
852
  --rui-FormField--box--medium__height: var(--rui-Button--medium__height);
800
853
  --rui-FormField--box--medium__padding-y: 0.3125rem;
801
- --rui-FormField--box--medium__padding-x: var(--rui-spacing-3);
802
- --rui-FormField--box--medium__font-size: var(--rui-typography-size-0);
854
+ --rui-FormField--box--medium__padding-x: var(--rui-dimension-space-3);
855
+ --rui-FormField--box--medium__font-size: var(--rui-font-size-1);
803
856
 
804
857
  // Form fields: box field sizes: large
805
858
  --rui-FormField--box--large__height: var(--rui-Button--large__height);
806
859
  --rui-FormField--box--large__padding-y: 0.5625rem;
807
- --rui-FormField--box--large__padding-x: var(--rui-spacing-4);
808
- --rui-FormField--box--large__font-size: var(--rui-typography-size-1);
860
+ --rui-FormField--box--large__padding-x: var(--rui-dimension-space-4);
861
+ --rui-FormField--box--large__font-size: var(--rui-font-size-2);
809
862
 
810
863
  // Form fields: box field variants: filled variant interaction states
811
- --rui-FormField--box--filled--default__color: var(--rui-page-color);
812
- --rui-FormField--box--filled--default__border-color: var(--rui-color-gray-200);
813
- --rui-FormField--box--filled--default__background: var(--rui-color-gray-50);
864
+ --rui-FormField--box--filled--default__color: var(--rui-color-text-primary);
865
+ --rui-FormField--box--filled--default__border-color: var(--rui-color-border-primary);
866
+ --rui-FormField--box--filled--default__background: var(--rui-color-background-basic);
814
867
  --rui-FormField--box--filled--default__box-shadow: none;
815
- --rui-FormField--box--filled--hover__border-color: var(--rui-color-gray-500);
816
- --rui-FormField--box--filled--focus__border-color: var(--rui-color-primary);
868
+ --rui-FormField--box--filled--hover__border-color: var(--rui-color-border-primary-hover);
869
+ --rui-FormField--box--filled--focus__border-color: var(--rui-color-border-primary-active);
817
870
 
818
871
  // Form fields: box field variants: outline variant interaction states
819
- --rui-FormField--box--outline--default__color: var(--rui-page-color);
820
- --rui-FormField--box--outline--default__border-color: var(--rui-color-gray-200);
821
- --rui-FormField--box--outline--default__background: var(--rui-color-white);
872
+ --rui-FormField--box--outline--default__color: var(--rui-color-text-primary);
873
+ --rui-FormField--box--outline--default__border-color: var(--rui-color-border-primary);
874
+ --rui-FormField--box--outline--default__background: var(--rui-color-background-basic);
822
875
  --rui-FormField--box--outline--default__box-shadow: none;
823
- --rui-FormField--box--outline--hover__border-color: var(--rui-color-gray-500);
824
- --rui-FormField--box--outline--focus__border-color: var(--rui-color-primary);
876
+ --rui-FormField--box--outline--hover__border-color: var(--rui-color-border-primary-hover);
877
+ --rui-FormField--box--outline--focus__border-color: var(--rui-color-border-primary-active);
825
878
 
826
879
  // Form fields: check fields
827
880
  --rui-FormField--check__input__size: 1.125rem;
828
881
  --rui-FormField--check__input__border-width: var(--rui-FormField--box__border-width);
829
- --rui-FormField--check__input--focus__box-shadow: var(--rui-focus-box-shadow);
830
- --rui-FormField--check__tap-target-size: var(--rui-tap-target-size);
882
+ --rui-FormField--check__input--focus__box-shadow: var(--rui-shadow-focus-ring);
883
+ --rui-FormField--check__tap-target-size: var(--rui-dimension-tap-target-size);
831
884
 
832
885
  // Form fields: check fields, component specific
833
886
  --rui-FormField--check__input--checkbox__border-radius: var(--rui-FormField--box__border-radius);
@@ -843,26 +896,35 @@
843
896
  --rui-FormField--check__input--toggle--checked__background-position: right center;
844
897
 
845
898
  // Form fields: check fields interaction states
846
- --rui-FormField--check--default__border-color: var(--rui-color-gray-200);
847
- --rui-FormField--check--default__check-background-color: var(--rui-color-white);
848
- --rui-FormField--check--checked__border-color: var(--rui-color-active);
849
- --rui-FormField--check--checked__check-background-color: var(--rui-color-active);
899
+ --rui-FormField--check--default__border-color: var(--rui-color-border-primary);
900
+ --rui-FormField--check--default__check-background-color: var(--rui-color-background-basic);
901
+ --rui-FormField--check--checked__border-color: var(--rui-color-action-selected);
902
+ --rui-FormField--check--checked__check-background-color: var(--rui-color-action-selected);
903
+
904
+ //
905
+ // FormLayout
906
+ // ==========
907
+
908
+ --rui-FormLayout__row-gap: var(--rui-dimension-space-4);
909
+ --rui-FormLayout--horizontal__label__width: 10em;
910
+ --rui-FormLayout--horizontal__label__width--auto: auto;
911
+ --rui-FormLayout--horizontal__label__width--limited: fit-content(50%);
850
912
 
851
913
  //
852
914
  // Modal
853
915
  // =====
854
916
 
855
- --rui-Modal__padding-x: var(--rui-spacing-4);
856
- --rui-Modal__padding-y: var(--rui-spacing-4);
857
- --rui-Modal__background: var(--rui-color-white);
858
- --rui-Modal__box-shadow: none;
859
- --rui-Modal__separator__width: var(--rui-border-width);
860
- --rui-Modal__separator__color: var(--rui-color-gray-100);
861
- --rui-Modal__header__gap: var(--rui-spacing-2);
862
- --rui-Modal__outer-spacing--xs: var(--rui-spacing-2);
863
- --rui-Modal__outer-spacing--sm: var(--rui-spacing-6);
864
- --rui-Modal__footer__background: var(--rui-color-white);
865
- --rui-Modal__footer__gap: var(--rui-spacing-2);
917
+ --rui-Modal__padding-x: var(--rui-dimension-space-4);
918
+ --rui-Modal__padding-y: var(--rui-dimension-space-4);
919
+ --rui-Modal__background: var(--rui-color-background-layer-2);
920
+ --rui-Modal__box-shadow: var(--rui-shadow-layer-2);
921
+ --rui-Modal__separator__width: var(--rui-dimension-border-width-1);
922
+ --rui-Modal__separator__color: var(--rui-color-border-secondary);
923
+ --rui-Modal__header__gap: var(--rui-dimension-space-2);
924
+ --rui-Modal__outer-spacing--xs: var(--rui-dimension-space-2);
925
+ --rui-Modal__outer-spacing--sm: var(--rui-dimension-space-6);
926
+ --rui-Modal__footer__background: var(--rui-Modal__background);
927
+ --rui-Modal__footer__gap: var(--rui-dimension-space-2);
866
928
  --rui-Modal__backdrop__background: rgb(0 0 0 / 50%);
867
929
  --rui-Modal--auto__min-width: 18rem;
868
930
  --rui-Modal--auto__max-width: 60rem;
@@ -876,59 +938,59 @@
876
938
  // Paper
877
939
  // =====
878
940
 
879
- --rui-Paper__padding: var(--rui-spacing-4);
941
+ --rui-Paper__padding: var(--rui-dimension-space-4);
880
942
  --rui-Paper__border-width: 0;
881
943
  --rui-Paper__border-color: transparent;
882
- --rui-Paper__border-radius: var(--rui-border-radius);
883
- --rui-Paper__background-color: var(--rui-color-white);
884
- --rui-Paper--muted__background-color: var(--rui-disabled-background-color);
885
- --rui-Paper--muted__opacity: var(--rui-disabled-opacity);
886
- --rui-Paper--raised__box-shadow: var(--rui-elevation-1);
944
+ --rui-Paper__border-radius: var(--rui-dimension-radius-1);
945
+ --rui-Paper__background-color: var(--rui-color-background-layer-1);
946
+ --rui-Paper--muted__background-color: var(--rui-color-background-disabled);
947
+ --rui-Paper--muted__opacity: var(--rui-ratio-disabled-opacity);
948
+ --rui-Paper--raised__box-shadow: var(--rui-shadow-layer-1);
887
949
 
888
950
  //
889
951
  // Popover
890
952
  // =======
891
953
 
892
954
  --rui-Popover__max-width: 15rem;
893
- --rui-Popover__padding: var(--rui-spacing-3);
955
+ --rui-Popover__padding: var(--rui-dimension-space-3);
894
956
  --rui-Popover__border-width: 0;
895
957
  --rui-Popover__border-color: transparent;
896
- --rui-Popover__border-radius: var(--rui-border-radius);
897
- --rui-Popover__color: var(--rui-color-black);
898
- --rui-Popover__background-color: var(--rui-color-white);
899
- --rui-Popover__box-shadow: var(--rui-elevation-2);
958
+ --rui-Popover__border-radius: var(--rui-dimension-radius-1);
959
+ --rui-Popover__color: var(--rui-color-text-primary);
960
+ --rui-Popover__background-color: var(--rui-color-background-layer-2);
961
+ --rui-Popover__box-shadow: var(--rui-shadow-layer-2);
900
962
 
901
963
  //
902
964
  // Tabs
903
965
  // ====
904
966
 
905
- --rui-Tabs__border-bottom-width: var(--rui-border-width);
906
- --rui-Tabs__border-bottom-color: var(--rui-color-gray-200);
907
- --rui-Tabs__gap--xs: var(--rui-spacing-1);
908
- --rui-Tabs__gap--sm: var(--rui-spacing-1);
909
- --rui-Tabs__gap--md: var(--rui-spacing-1);
967
+ --rui-Tabs__border-bottom-width: var(--rui-dimension-border-width-1);
968
+ --rui-Tabs__border-bottom-color: var(--rui-color-border-primary);
969
+ --rui-Tabs__gap--xs: var(--rui-dimension-space-1);
970
+ --rui-Tabs__gap--sm: var(--rui-dimension-space-1);
971
+ --rui-Tabs__gap--md: var(--rui-dimension-space-1);
910
972
  --rui-Tabs__padding-x: 0;
911
973
 
912
974
  // Tabs items
913
- --rui-Tabs__item__padding--xs: var(--rui-spacing-3);
914
- --rui-Tabs__item__padding--sm: var(--rui-spacing-4);
915
- --rui-Tabs__item__padding--md: var(--rui-spacing-4);
975
+ --rui-Tabs__item__padding--xs: var(--rui-dimension-space-3);
976
+ --rui-Tabs__item__padding--sm: var(--rui-dimension-space-4);
977
+ --rui-Tabs__item__padding--md: var(--rui-dimension-space-4);
916
978
  --rui-Tabs__item__font-weight: inherit;
917
- --rui-Tabs__item__color: var(--rui-color-gray-500);
918
- --rui-Tabs__item__border-width: var(--rui-border-width);
979
+ --rui-Tabs__item__color: var(--rui-color-text-secondary);
980
+ --rui-Tabs__item__border-width: var(--rui-dimension-border-width-1);
919
981
  --rui-Tabs__item__border-color:
920
- var(--rui-color-gray-100)
921
- var(--rui-color-gray-100)
982
+ var(--rui-color-border-secondary)
983
+ var(--rui-color-border-secondary)
922
984
  transparent
923
- var(--rui-color-gray-100);
924
- --rui-Tabs__item__border-radius: var(--rui-border-radius);
925
- --rui-Tabs__item__background-color: var(--rui-color-white);
985
+ var(--rui-color-border-secondary);
986
+ --rui-Tabs__item__border-radius: var(--rui-dimension-radius-1);
987
+ --rui-Tabs__item__background-color: var(--rui-color-background-layer-1);
926
988
  --rui-Tabs__item__box-shadow: none;
927
- --rui-Tabs__item__icon__gap: var(--rui-spacing-2);
989
+ --rui-Tabs__item__icon__gap: var(--rui-dimension-space-2);
928
990
 
929
991
  // Tabs items: hover
930
992
  --rui-Tabs__item--hover__font-weight: var(--rui-Tabs__item__font-weight);
931
- --rui-Tabs__item--hover__color: var(--rui-color-gray-700);
993
+ --rui-Tabs__item--hover__color: var(--rui-Tabs__item__color);
932
994
  --rui-Tabs__item--hover__border-width: var(--rui-Tabs__item__border-width);
933
995
  --rui-Tabs__item--hover__border-color: var(--rui-Tabs__item__border-color);
934
996
  --rui-Tabs__item--hover__background-color: var(--rui-Tabs__item__background-color);
@@ -938,7 +1000,7 @@
938
1000
 
939
1001
  // Tabs items: active
940
1002
  --rui-Tabs__item--active__font-weight: inherit;
941
- --rui-Tabs__item--active__color: var(--rui-page-color);
1003
+ --rui-Tabs__item--active__color: var(--rui-color-text-primary);
942
1004
  --rui-Tabs__item--active__border-width: var(--rui-Tabs__item__border-width);
943
1005
  --rui-Tabs__item--active__border-color:
944
1006
  var(--rui-Tabs__border-bottom-color)
@@ -954,8 +1016,17 @@
954
1016
  // TextLink
955
1017
  // ========
956
1018
 
957
- --rui-TextLink__color: var(--rui-link-color);
958
- --rui-TextLink__text-decoration: var(--rui-link-decoration);
959
- --rui-TextLink--hover__color: var(--rui-link-hover-color);
960
- --rui-TextLink--hover__text-decoration: var(--rui-link-hover-decoration);
1019
+ --rui-TextLink__color: var(--rui-color-text-link);
1020
+ --rui-TextLink__text-decoration: var(--rui-text-decoration-link);
1021
+ --rui-TextLink--hover__color: var(--rui-color-text-link-hover);
1022
+ --rui-TextLink--hover__text-decoration: var(--rui-text-decoration-link-hover);
1023
+ --rui-TextLink--active__color: var(--rui-color-text-link-active);
1024
+ --rui-TextLink--active__text-decoration: var(--rui-text-decoration-link-active);
1025
+
1026
+ //
1027
+ // Toolbar
1028
+ // =======
1029
+
1030
+ --rui-Toolbar__gap: var(--rui-dimension-space-4);
1031
+ --rui-Toolbar__gap--dense: var(--rui-dimension-space-2);
961
1032
  }