@useinsider/design-tokens 0.1.1 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/README.md +43 -8
  2. package/dist/_compat.scss +14 -3
  3. package/dist/_tokens.scss +175 -1
  4. package/dist/tokens.css +440 -2
  5. package/dist/tokens.json +175 -1
  6. package/package.json +1 -1
  7. package/tokens/source.json +892 -105
package/README.md CHANGED
@@ -1,8 +1,9 @@
1
1
  # @useinsider/design-tokens
2
2
 
3
3
  Design tokens for the Insider editor rebranding. One committed source file
4
- (`tokens/source.json`, 125 colour and shadow tokens) is turned into three
5
- consumer outputs and one compatibility layer at build time. The package has no
4
+ (`tokens/source.json`, 299 tokens: every Semantic colour variable of the Figma
5
+ "Variables" library with its Light and Dark values, plus its 12 shadow styles)
6
+ is turned into three consumer outputs and one compatibility layer at build time. The package has no
6
7
  runtime code and no runtime dependencies.
7
8
 
8
9
  > **Merging into `master` publishes to npm.** `release.yml` runs `npm publish`
@@ -32,7 +33,10 @@ through the Nexus npm proxy, which serves the same versions.
32
33
 
33
34
  ### Naming
34
35
 
35
- A source key maps to the three outputs like this (`/` becomes `-`):
36
+ Source keys are the Figma variable names in lowercase: a camelCase segment
37
+ becomes plain lowercase, for example `icon/state/error-onColor` →
38
+ `icon/state/error-oncolor` and `codeSnippet` → `codesnippet`. A source key maps
39
+ to the three outputs like this (`/` becomes `-`):
36
40
 
37
41
  | Source key | CSS | SCSS | TS / JSON |
38
42
  | --- | --- | --- | --- |
@@ -76,7 +80,15 @@ selector:
76
80
  - Do not pass these SCSS variables into Sass colour functions (`rgba($x, …)`,
77
81
  `darken`, `mix` …): their value is a `var()` reference, not a colour.
78
82
  - Sass treats `-` and `_` as the same character in variable names, so
79
- `$shadow-elevation` and `$shadow_elevation` are **the same variable**.
83
+ `$shadow-elevation` and `$shadow_elevation` are **the same variable**. Seven
84
+ token names collide with `ab-components` `variable.scss` this way:
85
+ `$shadow-create`, `-elevation`, `-magenta`, `-primary`, `-secondary`,
86
+ `-success` and `-warning`. `compat.scss` maps each of them (and the matching
87
+ `$shadow_container_*`) to the same-named token with the legacy value as the
88
+ fallback, following the role rule `$shadow_<x>` → `shadow/<x>`, so both
89
+ spellings resolve to `var(--shadow-<x>, <legacy value>)`. The one renamed role
90
+ is `danger`: `$shadow_danger` and `$shadow_container_danger` map to
91
+ `shadow/error`.
80
92
  In `ab-components` the `additionalData` order must be:
81
93
  1. `@import '@useinsider/design-tokens/tokens.scss';` (first)
82
94
  2. the `ab-components` variable files
@@ -110,8 +122,10 @@ tokens).
110
122
 
111
123
  ### Updating tokens
112
124
 
113
- Edit `tokens/source.json` by hand from the Figma file (read with
114
- `disableCodeConnect: true`), update `$meta`, and run `npm run build`. The build
125
+ Edit `tokens/source.json` from the Figma "Variables" library (file
126
+ `nEkPpxMBAtOoJo2FPcF5ef`: the Semantic collection in Light and Dark mode, and the
127
+ `shadow-*` effect styles), update `$meta`, and run `npm run build`. Write `dark`
128
+ only when it differs from `value`. The build
115
129
  is offline: it never calls Figma or any other service. The build validates
116
130
  the source before writing anything and fails, naming the key, when:
117
131
 
@@ -131,9 +145,30 @@ commit the `*-linux.png` files from the `visual-baselines` artifact to
131
145
 
132
146
  ## Release
133
147
 
134
- - Every merge into `develop` bumps the patch version (`develop-version-bump.yml`).
148
+ ### 0.2.0 changes
149
+
150
+ - 125 → 299 tokens: the complete Semantic set of the Figma "Variables" library
151
+ plus its 12 shadow styles. No 0.1.1 key was removed.
152
+ - 275 tokens now carry a `dark` value taken from the library's Dark mode
153
+ (0.1.1 had 11).
154
+ - `shadow/inverted` is corrected to the library value (hue and alpha:
155
+ `0 0 0 3px oklch(0.70 0.026 322 / 40%)`, was `… 106 / 32%`).
156
+ - In `compat.scss`, `$shadow_secondary` now maps to `shadow/secondary` (it
157
+ mapped to `shadow/inverted` in 0.1.1), and the other ab-components `$shadow_*`
158
+ rings map to their same-named tokens. With the rebranding flag on, consumers
159
+ coming from 0.1.1 see these focus rings change color; with the flag off
160
+ nothing changes.
161
+
162
+ ### Process
163
+
164
+ - The version is raised by hand: bump `version` in `package.json` (for example
165
+ `npm version patch --no-git-tag-version`) in a PR into `develop`; it
166
+ reaches `master` with the develop -> master merge. Do not change the version
167
+ in the release PR itself.
168
+ There is no automatic version bump.
135
169
  - A merge from `develop` into `master` publishes that version to npm
136
- (`release.yml`). An already published version is skipped.
170
+ (`release.yml`). A version that is already on npm is skipped, so a release
171
+ without a version change publishes nothing.
137
172
  - `npm pack` and `npm publish` run the build first (`prepack`), so a tarball
138
173
  never ships without `dist/`.
139
174
  - Only merge commits are allowed; squash and rebase merges are disabled.
package/dist/_compat.scss CHANGED
@@ -1,7 +1,7 @@
1
1
  // @useinsider/design-tokens compat layer: generated by scripts/build.mjs. Do not edit.
2
2
  // Maps legacy ab-components variables to design tokens; the second var() argument is the legacy value.
3
- // Sass treats "-" and "_" as the same character, so $shadow_elevation and $shadow_primary here are
4
- // the same variables as $shadow-elevation and $shadow-primary in _tokens.scss.
3
+ // Sass treats "-" and "_" as the same character, so each $shadow_<x> here is the same variable as
4
+ // $shadow-<x> in _tokens.scss; both resolve to var(--shadow-<x>, <legacy value>) when compat comes last.
5
5
 
6
6
  $form_color_background_warning: var(--background-state-warning, #ffbf00);
7
7
  $chip_color_background_stroke_smart: var(--background-smart, #f0e6ff);
@@ -27,4 +27,15 @@ $shadow_elevation: var(--shadow-elevation, 0px 4px 12px 0px #2c354626);
27
27
  $shadow_container_default: var(--shadow-elevation, 0px 4px 12px 0px #39393926);
28
28
  $shadow_primary: var(--shadow-primary, 0px 0px 0px 3px #b5c1f1);
29
29
  $shadow_container_primary: var(--shadow-primary, 0px 0px 0px 3px #b5c1f1);
30
- $shadow_secondary: var(--shadow-inverted, 0px 0px 0px 3px #b1b7c4);
30
+ $shadow_secondary: var(--shadow-secondary, 0px 0px 0px 3px #b1b7c4);
31
+ $shadow_warning: var(--shadow-warning, 0px 0px 0px 3px #ffe187);
32
+ $shadow_success: var(--shadow-success, 0px 0px 0px 3px #6dc993);
33
+ $shadow_create: var(--shadow-create, 0px 0px 0px 3px #b486f4);
34
+ $shadow_magenta: var(--shadow-magenta, 0px 0px 0px 3px #FFA6C8);
35
+ $shadow_container_secondary: var(--shadow-secondary, 0px 0px 0px 3px #b1b7c4);
36
+ $shadow_container_create: var(--shadow-create, 0px 0px 0px 3px #b486f4);
37
+ $shadow_container_warning: var(--shadow-warning, 0px 0px 0px 3px #ffe187);
38
+ $shadow_container_success: var(--shadow-success, 0px 0px 0px 3px #6dc993);
39
+ $shadow_container_magenta: var(--shadow-magenta, 0px 0px 0px 3px #FFA6C8);
40
+ $shadow_danger: var(--shadow-error, 0px 0px 0px 3px #f88e8c);
41
+ $shadow_container_danger: var(--shadow-error, 0px 0px 0px 3px #f88e8c);
package/dist/_tokens.scss CHANGED
@@ -43,6 +43,59 @@ $background-surface-inverted: var(--background-surface-inverted, #333);
43
43
  $background-surface-subtle: var(--background-surface-subtle, #fafafa);
44
44
  $background-surface-subtle-hover: var(--background-surface-subtle-hover, #e5e5e5);
45
45
  $background-track: var(--background-track, #d9d9d9);
46
+ $background-calendarpopover-compare-selected: var(--background-calendarpopover-compare-selected, #c42671);
47
+ $background-calendarpopover-compare-selected-hover: var(--background-calendarpopover-compare-selected-hover, #d35789);
48
+ $background-calendarpopover-compare-subtle: var(--background-calendarpopover-compare-subtle, #ffc5d7);
49
+ $background-calendarpopover-compare-subtle-hover: var(--background-calendarpopover-compare-subtle-hover, #f4a2bd);
50
+ $background-calendarpopover-primary-selected-hover: var(--background-calendarpopover-primary-selected-hover, #8b7d8e);
51
+ $background-calendarpopover-primary-subtle: var(--background-calendarpopover-primary-subtle, #ded5df);
52
+ $background-calendarpopover-primary-subtle-hover: var(--background-calendarpopover-primary-subtle-hover, #c1b7c3);
53
+ $background-chips-secondary-hover: var(--background-chips-secondary-hover, #736d5d);
54
+ $background-chips-surface-error-hover: var(--background-chips-surface-error-hover, #fc8f8c);
55
+ $background-chips-surface-info-hover: var(--background-chips-surface-info-hover, #94b7fb);
56
+ $background-chips-surface-magenta-hover: var(--background-chips-surface-magenta-hover, #e481a4);
57
+ $background-chips-surface-orange-hover: var(--background-chips-surface-orange-hover, #f1b06f);
58
+ $background-chips-surface-primary-hover: var(--background-chips-surface-primary-hover, #a699a8);
59
+ $background-chips-surface-secondary-subtle-hover: var(--background-chips-surface-secondary-subtle-hover, #a7a191);
60
+ $background-chips-surface-smart-hover: var(--background-chips-surface-smart-hover, #a184dd);
61
+ $background-chips-surface-success-hover: var(--background-chips-surface-success-hover, #8cc3a1);
62
+ $background-chips-surface-warning-hover: var(--background-chips-surface-warning-hover, #fdd677);
63
+ $background-datatable-pagination-selected: var(--background-datatable-pagination-selected, #ece5ed);
64
+ $background-datatable-pagination-selected-hover: var(--background-datatable-pagination-selected-hover, #ded5df);
65
+ $background-datatable-row-selected: var(--background-datatable-row-selected, #f2eef2);
66
+ $background-datatable-row-selected-hover: var(--background-datatable-row-selected-hover, #ece5ed);
67
+ $background-magenta-hover: var(--background-magenta-hover, #d35789);
68
+ $background-magenta-subtle-hover: var(--background-magenta-subtle-hover, #ffc5d7);
69
+ $background-orange-hover: var(--background-orange-hover, #eb9840);
70
+ $background-orange-subtle-hover: var(--background-orange-subtle-hover, #ffe6ce);
71
+ $background-overlay: var(--background-overlay, #00000066);
72
+ $background-primary-bold: var(--background-primary-bold, #170d19);
73
+ $background-primary-bold-hover: var(--background-primary-bold-hover, #3f3042);
74
+ $background-ribbon-error: var(--background-ribbon-error, #ffd1ce);
75
+ $background-ribbon-info: var(--background-ribbon-info, #d8e5ff);
76
+ $background-ribbon-success: var(--background-ribbon-success, #d8efe0);
77
+ $background-ribbon-warning: var(--background-ribbon-warning, #ffeebc);
78
+ $background-sidebar-item: var(--background-sidebar-item, #170d19);
79
+ $background-sidebar-item-hover: var(--background-sidebar-item-hover, #261a28);
80
+ $background-sidebar-item-selected: var(--background-sidebar-item-selected, #261a28);
81
+ $background-sidebar-oncolor-hover: var(--background-sidebar-oncolor-hover, #8b7d8e);
82
+ $background-sidebar-seconditem: var(--background-sidebar-seconditem, #3f3042);
83
+ $background-sidebar-seconditem-hover: var(--background-sidebar-seconditem-hover, #58485b);
84
+ $background-sidebar-subitem: var(--background-sidebar-subitem, #261a28);
85
+ $background-sidebar-subitem-hover: var(--background-sidebar-subitem-hover, #3f3042);
86
+ $background-sidebar-thirditem: var(--background-sidebar-thirditem, #58485b);
87
+ $background-sidebar-thirditem-hover: var(--background-sidebar-thirditem-hover, #716174);
88
+ $background-smart-hover: var(--background-smart-hover, #794ec2);
89
+ $background-smart-subtle-hover: var(--background-smart-subtle-hover, #ddceff);
90
+ $background-state-disabled-onbg-filled: var(--background-state-disabled-onbg-filled, #999999);
91
+ $background-state-error-hover: var(--background-state-error-hover, #ec585c);
92
+ $background-state-info-hover: var(--background-state-info-hover, #6795f3);
93
+ $background-state-info-subtle-hover: var(--background-state-info-subtle-hover, #d8e5ff);
94
+ $background-state-success-hover: var(--background-state-success-hover, #449a67);
95
+ $background-state-success-subtle-hover: var(--background-state-success-subtle-hover, #d8efe0);
96
+ $background-state-warning-hover: var(--background-state-warning-hover, #fbc846);
97
+ $background-state-warning-subtle-hover: var(--background-state-warning-subtle-hover, #ffeebc);
98
+ $background-transparent: var(--background-transparent, #ffffff00);
46
99
  $border-bold: var(--border-bold, #999999);
47
100
  $border-bolder: var(--border-bolder, #333);
48
101
  $border-chips-error-subtle: var(--border-chips-error-subtle, #fc8f8c);
@@ -68,6 +121,14 @@ $border-state-success: var(--border-state-success, #188b49);
68
121
  $border-state-warning: var(--border-state-warning, #fcc535);
69
122
  $border-state-warning-hover: var(--border-state-warning-hover, #fdd677);
70
123
  $border-subtle: var(--border-subtle, #e5e5e5);
124
+ $border-chips-success-subtle: var(--border-chips-success-subtle, #8cc3a1);
125
+ $border-magenta: var(--border-magenta, #c42671);
126
+ $border-magenta-hover: var(--border-magenta-hover, #e481a4);
127
+ $border-magenta-subtle: var(--border-magenta-subtle, #ffd9e4);
128
+ $border-orange: var(--border-orange, #e48818);
129
+ $border-primary-subtlest: var(--border-primary-subtlest, #ece5ed);
130
+ $border-smart-hover: var(--border-smart-hover, #a184dd);
131
+ $border-state-info-hover: var(--border-state-info-hover, #94b7fb);
71
132
  $icon-button-secondary: var(--icon-button-secondary, #5a5546);
72
133
  $icon-default: var(--icon-default, #666);
73
134
  $icon-inverted: var(--icon-inverted, white);
@@ -75,6 +136,38 @@ $icon-neutral: var(--icon-neutral, white);
75
136
  $icon-neutral-inverted: var(--icon-neutral-inverted, #333);
76
137
  $icon-primary: var(--icon-primary, #261a28);
77
138
  $icon-state-disabled: var(--icon-state-disabled, #999999);
139
+ $icon-bold: var(--icon-bold, #333333);
140
+ $icon-button-error-pressed: var(--icon-button-error-pressed, #ed4042);
141
+ $icon-button-error-selected: var(--icon-button-error-selected, #a32226);
142
+ $icon-button-inverted-pressed: var(--icon-button-inverted-pressed, #fafafa);
143
+ $icon-button-inverted-selected: var(--icon-button-inverted-selected, #eeeeee);
144
+ $icon-button-primary-pressed: var(--icon-button-primary-pressed, #716174);
145
+ $icon-button-primary-selected: var(--icon-button-primary-selected, #3f3042);
146
+ $icon-button-secondary-pressed: var(--icon-button-secondary-pressed, #736d5d);
147
+ $icon-button-secondary-selected: var(--icon-button-secondary-selected, #423d30);
148
+ $icon-button-smart-pressed: var(--icon-button-smart-pressed, #5d23a4);
149
+ $icon-button-smart-selected: var(--icon-button-smart-selected, #411874);
150
+ $icon-button-warning-pressed: var(--icon-button-warning-pressed, #bc9127);
151
+ $icon-button-warning-selected: var(--icon-button-warning-selected, #5c4713);
152
+ $icon-inverted-subtle: var(--icon-inverted-subtle, #cccccc);
153
+ $icon-magenta: var(--icon-magenta, #c42671);
154
+ $icon-magenta-oncolor: var(--icon-magenta-oncolor, #68143a);
155
+ $icon-orange: var(--icon-orange, #e48818);
156
+ $icon-orange-oncolor: var(--icon-orange-oncolor, #583306);
157
+ $icon-primary-subtle: var(--icon-primary-subtle, #58485b);
158
+ $icon-smart: var(--icon-smart, #5d23a4);
159
+ $icon-smart-oncolor: var(--icon-smart-oncolor, #511c90);
160
+ $icon-state-error: var(--icon-state-error, #ed4042);
161
+ $icon-state-error-oncolor: var(--icon-state-error-oncolor, #c92f33);
162
+ $icon-state-info: var(--icon-state-info, #4078ef);
163
+ $icon-state-info-oncolor: var(--icon-state-info-oncolor, #223b85);
164
+ $icon-state-success: var(--icon-state-success, #188b49);
165
+ $icon-state-success-oncolor: var(--icon-state-success-oncolor, #0a4324);
166
+ $icon-state-warning: var(--icon-state-warning, #fcc535);
167
+ $icon-state-warning-oncolor: var(--icon-state-warning-oncolor, #8d6c1e);
168
+ $icon-subtle: var(--icon-subtle, #cccccc);
169
+ $icon-subtle-hover: var(--icon-subtle-hover, #666666);
170
+ $icon-tab-hover: var(--icon-tab-hover, #58485b);
78
171
  $text-button-secondary: var(--text-button-secondary, #5a5546);
79
172
  $text-default: var(--text-default, #333);
80
173
  $text-inverted: var(--text-inverted, white);
@@ -95,6 +188,30 @@ $text-state-success: var(--text-state-success, #0a4324);
95
188
  $text-state-warning: var(--text-state-warning, #8d6c1e);
96
189
  $text-subtle: var(--text-subtle, #666);
97
190
  $text-tab-hover: var(--text-tab-hover, #58485b);
191
+ $text-button-error-pressed: var(--text-button-error-pressed, #ed4042);
192
+ $text-button-error-selected: var(--text-button-error-selected, #a32226);
193
+ $text-button-inverted-pressed: var(--text-button-inverted-pressed, #fafafa);
194
+ $text-button-inverted-selected: var(--text-button-inverted-selected, #eeeeee);
195
+ $text-button-primary-pressed: var(--text-button-primary-pressed, #716174);
196
+ $text-button-primary-selected: var(--text-button-primary-selected, #3f3042);
197
+ $text-button-secondary-pressed: var(--text-button-secondary-pressed, #736d5d);
198
+ $text-button-secondary-selected: var(--text-button-secondary-selected, #423d30);
199
+ $text-button-smart-pressed: var(--text-button-smart-pressed, #5d23a4);
200
+ $text-button-smart-selected: var(--text-button-smart-selected, #411874);
201
+ $text-button-warning-pressed: var(--text-button-warning-pressed, #bc9127);
202
+ $text-button-warning-selected: var(--text-button-warning-selected, #5c4713);
203
+ $text-calendarpopover-days-label: var(--text-calendarpopover-days-label, #808080);
204
+ $text-inverted-subtle: var(--text-inverted-subtle, #cccccc);
205
+ $text-inverted-subtler: var(--text-inverted-subtler, #d9d9d9);
206
+ $text-link: var(--text-link, #c93200);
207
+ $text-link-hover: var(--text-link-hover, #ff7a5a);
208
+ $text-link-oncolor: var(--text-link-oncolor, #333333);
209
+ $text-link-visited: var(--text-link-visited, #c42671);
210
+ $text-smart-subtle: var(--text-smart-subtle, #5d23a4);
211
+ $text-state-disabled-onbg: var(--text-state-disabled-onbg, #333333);
212
+ $text-state-info-subtle: var(--text-state-info-subtle, #4078ef);
213
+ $text-state-success-subtle: var(--text-state-success-subtle, #188b49);
214
+ $text-state-warning-subtle: var(--text-state-warning-subtle, #fcc535);
98
215
  $visual-dataviz-blue-subtle: var(--visual-dataviz-blue-subtle, #94b7fb);
99
216
  $visual-dataviz-datapaint-blue: var(--visual-dataviz-datapaint-blue, #4078ef);
100
217
  $visual-dataviz-datapaint-blue-bold: var(--visual-dataviz-datapaint-blue-bold, #2a4da8);
@@ -123,6 +240,63 @@ $visual-illustration-yellow-04: var(--visual-illustration-yellow-04, #fcc535);
123
240
  $visual-illustration-yellow-05: var(--visual-illustration-yellow-05, #e2af2e);
124
241
  $visual-scrollbar-thumb: var(--visual-scrollbar-thumb, #ccc);
125
242
  $visual-indicator-primary: var(--visual-indicator-primary, #261a28);
243
+ $visual-dataviz-datapaint-blue-subtle: var(--visual-dataviz-datapaint-blue-subtle, #94b7fb);
244
+ $visual-dataviz-datapaint-eclipse: var(--visual-dataviz-datapaint-eclipse, #3f3042);
245
+ $visual-dataviz-datapaint-eclipse-bold: var(--visual-dataviz-datapaint-eclipse-bold, #261a28);
246
+ $visual-dataviz-datapaint-eclipse-subtle: var(--visual-dataviz-datapaint-eclipse-subtle, #716174);
247
+ $visual-dataviz-datapaint-gray: var(--visual-dataviz-datapaint-gray, #808080);
248
+ $visual-dataviz-datapaint-gray-bold: var(--visual-dataviz-datapaint-gray-bold, #595959);
249
+ $visual-dataviz-datapaint-gray-subtle: var(--visual-dataviz-datapaint-gray-subtle, #e5e5e5);
250
+ $visual-dataviz-datapaint-green: var(--visual-dataviz-datapaint-green, #188b49);
251
+ $visual-dataviz-datapaint-green-bold: var(--visual-dataviz-datapaint-green-bold, #0a4324);
252
+ $visual-dataviz-datapaint-lunar: var(--visual-dataviz-datapaint-lunar, #8a453d);
253
+ $visual-dataviz-datapaint-lunar-bold: var(--visual-dataviz-datapaint-lunar-bold, #54241f);
254
+ $visual-dataviz-datapaint-lunar-subtle: var(--visual-dataviz-datapaint-lunar-subtle, #d0c2c7);
255
+ $visual-dataviz-datapaint-magenta: var(--visual-dataviz-datapaint-magenta, #d35789);
256
+ $visual-dataviz-datapaint-magenta-bold: var(--visual-dataviz-datapaint-magenta-bold, #ac2263);
257
+ $visual-dataviz-datapaint-magenta-subtle: var(--visual-dataviz-datapaint-magenta-subtle, #f4a2bd);
258
+ $visual-dataviz-datapaint-nova: var(--visual-dataviz-datapaint-nova, #a7a191);
259
+ $visual-dataviz-datapaint-nova-bold: var(--visual-dataviz-datapaint-nova-bold, #8c8675);
260
+ $visual-dataviz-datapaint-nova-subtle: var(--visual-dataviz-datapaint-nova-subtle, #e7e3da);
261
+ $visual-dataviz-datapaint-orange: var(--visual-dataviz-datapaint-orange, #e48818);
262
+ $visual-dataviz-datapaint-orange-bold: var(--visual-dataviz-datapaint-orange-bold, #a35e01);
263
+ $visual-dataviz-datapaint-orange-subtle: var(--visual-dataviz-datapaint-orange-subtle, #ffcd9b);
264
+ $visual-dataviz-datapaint-purple-bold: var(--visual-dataviz-datapaint-purple-bold, #5d23a4);
265
+ $visual-dataviz-datapaint-purple-subtle: var(--visual-dataviz-datapaint-purple-subtle, #a184dd);
266
+ $visual-dataviz-datapaint-red-bold: var(--visual-dataviz-datapaint-red-bold, #a32226);
267
+ $visual-dataviz-datapaint-red-subtle: var(--visual-dataviz-datapaint-red-subtle, #ec585c);
268
+ $visual-dataviz-datapaint-solar: var(--visual-dataviz-datapaint-solar, #f4482b);
269
+ $visual-dataviz-datapaint-solar-bold: var(--visual-dataviz-datapaint-solar-bold, #a02200);
270
+ $visual-dataviz-datapaint-solar-subtler: var(--visual-dataviz-datapaint-solar-subtler, #ffe5d9);
271
+ $visual-dataviz-datapaint-yellow: var(--visual-dataviz-datapaint-yellow, #fbc846);
272
+ $visual-dataviz-datapaint-yellow-bold: var(--visual-dataviz-datapaint-yellow-bold, #e2af2e);
273
+ $visual-dataviz-datapaint-yellow-subtle: var(--visual-dataviz-datapaint-yellow-subtle, #ffe297);
274
+ $visual-dataviz-grid-bar: var(--visual-dataviz-grid-bar, #999999cc);
275
+ $visual-dataviz-grid-line: var(--visual-dataviz-grid-line, #cccccc);
276
+ $visual-illustration-eclipse-01: var(--visual-illustration-eclipse-01, #3f3042);
277
+ $visual-illustration-gray-03: var(--visual-illustration-gray-03, #f8f8f8);
278
+ $visual-illustration-gray-06: var(--visual-illustration-gray-06, #d9d9d9);
279
+ $visual-illustration-gray-07: var(--visual-illustration-gray-07, #808080);
280
+ $visual-illustration-gray-09: var(--visual-illustration-gray-09, #18181b);
281
+ $visual-illustration-red-04: var(--visual-illustration-red-04, #c92f33);
282
+ $visual-pagination-dot-active: var(--visual-pagination-dot-active, #261a28);
283
+ $visual-pagination-dot-inactive: var(--visual-pagination-dot-inactive, #cccccc);
284
+ $visual-pagination-dot-oncolor-active: var(--visual-pagination-dot-oncolor-active, #ffffff);
285
+ $visual-pagination-dot-oncolor-inactive: var(--visual-pagination-dot-oncolor-inactive, #ffffff);
286
+ $visual-scrollbar-charts-zoomarea: var(--visual-scrollbar-charts-zoomarea, #99999966);
287
+ $visual-scrollbar-charts-zoomhandle: var(--visual-scrollbar-charts-zoomhandle, #595959);
288
+ $visual-scrollbar-datatable-pinspacer: var(--visual-scrollbar-datatable-pinspacer, #d9d9d9);
289
+ $visual-scrollbar-thumb-hover: var(--visual-scrollbar-thumb-hover, #666666);
290
+ $visual-scrollbar-track: var(--visual-scrollbar-track, #ffffff);
126
291
  $shadow-elevation: var(--shadow-elevation, 0px 4px 12px 0px oklch(0.51 0 0 / 16%));
127
292
  $shadow-primary: var(--shadow-primary, 0 0 0 3px oklch(0.43 0.037 321 / 32%));
128
- $shadow-inverted: var(--shadow-inverted, 0 0 0 3px oklch(0.70 0.026 106 / 32%));
293
+ $shadow-inverted: var(--shadow-inverted, 0 0 0 3px oklch(0.70 0.026 322 / 40%));
294
+ $shadow-create: var(--shadow-create, 0 0 0 3px oklch(0.65 0.213 32 / 32%));
295
+ $shadow-error: var(--shadow-error, 0 0 0 3px oklch(0.63 0.211 25 / 32%));
296
+ $shadow-info: var(--shadow-info, 0 0 0 3px oklch(0.62 0.189 261 / 20%));
297
+ $shadow-magenta: var(--shadow-magenta, 0 0 0 3px oklch(0.56 0.200 4 / 20%));
298
+ $shadow-orange: var(--shadow-orange, 0 0 0 3px oklch(0.70 0.156 60 / 32%));
299
+ $shadow-secondary: var(--shadow-secondary, 0 0 0 3px oklch(0.54 0.025 90 / 32%));
300
+ $shadow-smart: var(--shadow-smart, 0 0 0 3px oklch(0.45 0.191 298 / 32%));
301
+ $shadow-success: var(--shadow-success, 0 0 0 3px oklch(0.55 0.139 152 / 20%));
302
+ $shadow-warning: var(--shadow-warning, 0 0 0 3px oklch(0.84 0.160 82 / 40%));