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

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