@useinsider/design-tokens 0.1.1
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.
- package/README.md +141 -0
- package/dist/_compat.scss +30 -0
- package/dist/_tokens.scss +128 -0
- package/dist/tokens.css +148 -0
- package/dist/tokens.json +127 -0
- package/package.json +66 -0
- package/tokens/source.json +401 -0
package/README.md
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
# @useinsider/design-tokens
|
|
2
|
+
|
|
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
|
|
6
|
+
runtime code and no runtime dependencies.
|
|
7
|
+
|
|
8
|
+
> **Merging into `master` publishes to npm.** `release.yml` runs `npm publish`
|
|
9
|
+
> on every push to `master`. Merge `develop` into `master` only when a release
|
|
10
|
+
> is intended, and only with a merge commit.
|
|
11
|
+
|
|
12
|
+
## Install
|
|
13
|
+
|
|
14
|
+
```sh
|
|
15
|
+
npm i @useinsider/design-tokens
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
No `.npmrc`, `buildspec.yml` or CI change is needed in the consumer: the package
|
|
19
|
+
is public on `registry.npmjs.org`. Repositories whose `.npmrc` maps the
|
|
20
|
+
`@useinsider` scope to the internal Nexus (e.g. `skeleton-design-bundle`) get it
|
|
21
|
+
through the Nexus npm proxy, which serves the same versions.
|
|
22
|
+
|
|
23
|
+
## Entry points
|
|
24
|
+
|
|
25
|
+
| Entry | File | Use it from | One-line import |
|
|
26
|
+
| --- | --- | --- | --- |
|
|
27
|
+
| `./tokens.css` | `dist/tokens.css` | any bundle entry | `import '@useinsider/design-tokens/tokens.css';` |
|
|
28
|
+
| `./tokens.scss` | `dist/_tokens.scss` | SCSS | `@use '@useinsider/design-tokens/tokens.scss' as tokens;` |
|
|
29
|
+
| `./tokens.json` | `dist/tokens.json` | TS / JS | `import tokens from '@useinsider/design-tokens/tokens.json';` |
|
|
30
|
+
| `./compat.scss` | `dist/_compat.scss` | SCSS written against old `ab-components` variable names | `@import '@useinsider/design-tokens/compat.scss';` |
|
|
31
|
+
| `./source` | `tokens/source.json` | tooling only | `import source from '@useinsider/design-tokens/source';` |
|
|
32
|
+
|
|
33
|
+
### Naming
|
|
34
|
+
|
|
35
|
+
A source key maps to the three outputs like this (`/` becomes `-`):
|
|
36
|
+
|
|
37
|
+
| Source key | CSS | SCSS | TS / JSON |
|
|
38
|
+
| --- | --- | --- | --- |
|
|
39
|
+
| `background/primary` | `--background-primary` | `$background-primary` | `tokens['background/primary']` |
|
|
40
|
+
| `shadow/elevation` | `--shadow-elevation` | `$shadow-elevation` | `tokens['shadow/elevation']` |
|
|
41
|
+
|
|
42
|
+
- `tokens.css` defines every token as a custom property.
|
|
43
|
+
- `_tokens.scss` holds references, not raw values:
|
|
44
|
+
`$background-primary: var(--background-primary, #261a28);`
|
|
45
|
+
- `tokens.json` is a flat map from source key to the light value as a string,
|
|
46
|
+
for example `"background/primary": "#261a28"`. It is resolved at build time,
|
|
47
|
+
so it does not follow the feature flag or dark mode. Dark values are
|
|
48
|
+
available through `./source`.
|
|
49
|
+
|
|
50
|
+
## Scope, feature flag and dark mode
|
|
51
|
+
|
|
52
|
+
The CSS never touches `:root`. Every custom property is defined under one
|
|
53
|
+
selector:
|
|
54
|
+
|
|
55
|
+
```css
|
|
56
|
+
[data-ins-editor][data-ins-rebrand="on"] { --background-primary: #261a28; }
|
|
57
|
+
|
|
58
|
+
@media (prefers-color-scheme: dark) {
|
|
59
|
+
[data-ins-editor][data-ins-rebrand="on"] { --background-primary: #c3abc0; }
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
- The package reads no flag. The consumer writes `data-ins-editor` and
|
|
64
|
+
`data-ins-rebrand="on"` on its mount element when the rebranding flag is on.
|
|
65
|
+
- Dark values follow the operating system preference. Only tokens that have a
|
|
66
|
+
`dark` value in the source appear in the dark block; the others keep their
|
|
67
|
+
light value in dark mode.
|
|
68
|
+
- **Keep the flag-off look unchanged:** in consumer styles use
|
|
69
|
+
`var(--token, #oldHex)`, not the bare SCSS variable. Without the attribute no
|
|
70
|
+
custom property is defined, so the fallback (today's colour) is used.
|
|
71
|
+
|
|
72
|
+
## SCSS usage notes
|
|
73
|
+
|
|
74
|
+
- Prefer `@use '@useinsider/design-tokens/tokens.scss' as tokens;`. `@import`
|
|
75
|
+
still works but is deprecated in Dart Sass.
|
|
76
|
+
- Do not pass these SCSS variables into Sass colour functions (`rgba($x, …)`,
|
|
77
|
+
`darken`, `mix` …): their value is a `var()` reference, not a colour.
|
|
78
|
+
- Sass treats `-` and `_` as the same character in variable names, so
|
|
79
|
+
`$shadow-elevation` and `$shadow_elevation` are **the same variable**.
|
|
80
|
+
In `ab-components` the `additionalData` order must be:
|
|
81
|
+
1. `@import '@useinsider/design-tokens/tokens.scss';` (first)
|
|
82
|
+
2. the `ab-components` variable files
|
|
83
|
+
3. `@import '@useinsider/design-tokens/compat.scss';` (last)
|
|
84
|
+
|
|
85
|
+
## TypeScript
|
|
86
|
+
|
|
87
|
+
Projects on `"moduleResolution": "Node"` (node10) ignore `package.json`
|
|
88
|
+
`exports`, so they cannot resolve `@useinsider/design-tokens/tokens.json`. Use
|
|
89
|
+
`"moduleResolution": "Bundler"` (or `Node16` / `NodeNext`) to import the JSON
|
|
90
|
+
entry. The CSS and SCSS entries are resolved by the bundler and are not affected.
|
|
91
|
+
|
|
92
|
+
## Development
|
|
93
|
+
|
|
94
|
+
Node 20 (`.nvmrc`).
|
|
95
|
+
|
|
96
|
+
```sh
|
|
97
|
+
npm ci
|
|
98
|
+
npm run build # writes dist/ and prints the token report
|
|
99
|
+
npm run report:hex-index # writes reports/hex-index.json (not published)
|
|
100
|
+
npm run lint
|
|
101
|
+
npm run test:unit:coverage
|
|
102
|
+
npm run test:integration
|
|
103
|
+
npm run test:visual # Playwright; baselines are Linux-only, see below
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
The build report lists the token count per namespace, the number of dark
|
|
107
|
+
values, the light tokens that have no dark value yet, and a hex index (which
|
|
108
|
+
token each normalised hex belongs to; `#666` and `#666666` map to the same
|
|
109
|
+
tokens).
|
|
110
|
+
|
|
111
|
+
### Updating tokens
|
|
112
|
+
|
|
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
|
|
115
|
+
is offline: it never calls Figma or any other service. The build validates
|
|
116
|
+
the source before writing anything and fails, naming the key, when:
|
|
117
|
+
|
|
118
|
+
- a key is outside the six namespaces (`background`, `visual`, `border`,
|
|
119
|
+
`text`, `icon`, `shadow`) or two keys map to the same CSS name;
|
|
120
|
+
- a `value` or `dark` is not one of the accepted forms: a hex colour (`#rgb`,
|
|
121
|
+
`#rrggbb`, `#rrggbbaa`) or `white`; on `shadow/*` keys, 3 or 4 lengths
|
|
122
|
+
(`0` or `<n>px`) followed by an `oklch()` colour, for example
|
|
123
|
+
`0px 4px 12px 0px oklch(0.51 0 0 / 16%)`.
|
|
124
|
+
|
|
125
|
+
### Visual baselines
|
|
126
|
+
|
|
127
|
+
Baselines are rendered on Linux in CI. To refresh them, run the
|
|
128
|
+
`Integration Tests & Visual Tests` workflow with `update_snapshots: true` and
|
|
129
|
+
commit the `*-linux.png` files from the `visual-baselines` artifact to
|
|
130
|
+
`tests/visual/__screenshots__/`.
|
|
131
|
+
|
|
132
|
+
## Release
|
|
133
|
+
|
|
134
|
+
- Every merge into `develop` bumps the patch version (`develop-version-bump.yml`).
|
|
135
|
+
- A merge from `develop` into `master` publishes that version to npm
|
|
136
|
+
(`release.yml`). An already published version is skipped.
|
|
137
|
+
- `npm pack` and `npm publish` run the build first (`prepack`), so a tarball
|
|
138
|
+
never ships without `dist/`.
|
|
139
|
+
- Only merge commits are allowed; squash and rebase merges are disabled.
|
|
140
|
+
- A published version is never unpublished. A bad release is fixed with
|
|
141
|
+
`npm deprecate` and a new patch.
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// @useinsider/design-tokens compat layer: generated by scripts/build.mjs. Do not edit.
|
|
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.
|
|
5
|
+
|
|
6
|
+
$form_color_background_warning: var(--background-state-warning, #ffbf00);
|
|
7
|
+
$chip_color_background_stroke_smart: var(--background-smart, #f0e6ff);
|
|
8
|
+
$form_color_border_warning: var(--border-state-warning, #ffbf00);
|
|
9
|
+
$chip_color_text_stroke_default: var(--text-default, #0a2ecc);
|
|
10
|
+
$form_color_text_disabled: var(--text-state-disabled, #989898);
|
|
11
|
+
$form_color_border_default: var(--border-default, #e1e1e1);
|
|
12
|
+
$form_color_background_disabled: var(--background-state-disabled, #e1e1e1);
|
|
13
|
+
$feedback_color_background_success: var(--background-state-success, #128745);
|
|
14
|
+
$form_color_icon_disabled: var(--icon-state-disabled, #989898);
|
|
15
|
+
$chip_color_text_stroke_warning: var(--text-state-warning, #8f6b00);
|
|
16
|
+
$action_color_background_primary_default: var(--background-primary, #0a2ecc);
|
|
17
|
+
$action_color_background_secondary_default: var(--background-secondary, #dcdfe6);
|
|
18
|
+
$form_color_border_error: var(--border-state-error, #dc2a2a);
|
|
19
|
+
$form_color_text_error: var(--text-state-error, #dc2a2a);
|
|
20
|
+
$action_color_text_success_default: var(--text-state-success, #128745);
|
|
21
|
+
$action_color_background_primary-subtle_default: var(--background-primary-subtle, #dae1fb);
|
|
22
|
+
$feedback_color_background_information: var(--background-state-info, #258dde);
|
|
23
|
+
$feedback_color_background_success-subtle: var(--background-state-success-subtle, #eefff5);
|
|
24
|
+
$feedback_color_background_warning-subtle: var(--background-state-warning-subtle, #fffaeb);
|
|
25
|
+
$chip_color_border_smart: var(--border-smart, #b486f4);
|
|
26
|
+
$shadow_elevation: var(--shadow-elevation, 0px 4px 12px 0px #2c354626);
|
|
27
|
+
$shadow_container_default: var(--shadow-elevation, 0px 4px 12px 0px #39393926);
|
|
28
|
+
$shadow_primary: var(--shadow-primary, 0px 0px 0px 3px #b5c1f1);
|
|
29
|
+
$shadow_container_primary: var(--shadow-primary, 0px 0px 0px 3px #b5c1f1);
|
|
30
|
+
$shadow_secondary: var(--shadow-inverted, 0px 0px 0px 3px #b1b7c4);
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
// @useinsider/design-tokens: generated by scripts/build.mjs from tokens/source.json. Do not edit.
|
|
2
|
+
// Each variable references its CSS custom property; the second var() argument is the light value.
|
|
3
|
+
|
|
4
|
+
$background-accent: var(--background-accent, #f4482b);
|
|
5
|
+
$background-calendarpopover-primary-selected: var(--background-calendarpopover-primary-selected, #716174);
|
|
6
|
+
$background-chips-secondary: var(--background-chips-secondary, #5a5546);
|
|
7
|
+
$background-codesnippet-sidebar: var(--background-codesnippet-sidebar, #e5e5e5);
|
|
8
|
+
$background-codesnippet-sidebar-disabled: var(--background-codesnippet-sidebar-disabled, #d9d9d9);
|
|
9
|
+
$background-elevated: var(--background-elevated, white);
|
|
10
|
+
$background-elevated-hover: var(--background-elevated-hover, #f8f8f8);
|
|
11
|
+
$background-elevated-inverted: var(--background-elevated-inverted, #333);
|
|
12
|
+
$background-elevated-selected: var(--background-elevated-selected, #ece5ed);
|
|
13
|
+
$background-elevated-selected-hover: var(--background-elevated-selected-hover, #ded5df);
|
|
14
|
+
$background-magenta: var(--background-magenta, #c42671);
|
|
15
|
+
$background-magenta-subtle: var(--background-magenta-subtle, #ffd9e4);
|
|
16
|
+
$background-orange: var(--background-orange, #e48818);
|
|
17
|
+
$background-orange-subtle: var(--background-orange-subtle, #ffefde);
|
|
18
|
+
$background-page: var(--background-page, #faf8f7);
|
|
19
|
+
$background-primary: var(--background-primary, #261a28);
|
|
20
|
+
$background-primary-hover: var(--background-primary-hover, #3f3042);
|
|
21
|
+
$background-primary-subtle: var(--background-primary-subtle, #ece5ed);
|
|
22
|
+
$background-primary-subtle-hover: var(--background-primary-subtle-hover, #ded5df);
|
|
23
|
+
$background-secondary: var(--background-secondary, #e7e3da);
|
|
24
|
+
$background-secondary-hover: var(--background-secondary-hover, #d4cfc4);
|
|
25
|
+
$background-segment-disabled-selected: var(--background-segment-disabled-selected, #d9d9d9);
|
|
26
|
+
$background-skeleton-shimmer: var(--background-skeleton-shimmer, #eee);
|
|
27
|
+
$background-smart: var(--background-smart, #5d23a4);
|
|
28
|
+
$background-smart-subtle: var(--background-smart-subtle, #e9deff);
|
|
29
|
+
$background-state-disabled: var(--background-state-disabled, #eee);
|
|
30
|
+
$background-state-disabled-onbg: var(--background-state-disabled-onbg, #e5e5e5);
|
|
31
|
+
$background-state-error: var(--background-state-error, #ed4042);
|
|
32
|
+
$background-state-error-subtle: var(--background-state-error-subtle, #ffe4e1);
|
|
33
|
+
$background-state-error-subtle-hover: var(--background-state-error-subtle-hover, #ffd1ce);
|
|
34
|
+
$background-state-info: var(--background-state-info, #4078ef);
|
|
35
|
+
$background-state-info-subtle: var(--background-state-info-subtle, #e2ebff);
|
|
36
|
+
$background-state-success: var(--background-state-success, #188b49);
|
|
37
|
+
$background-state-success-subtle: var(--background-state-success-subtle, #e4f3e9);
|
|
38
|
+
$background-state-warning: var(--background-state-warning, #fcc535);
|
|
39
|
+
$background-state-warning-subtle: var(--background-state-warning-subtle, #fff5d5);
|
|
40
|
+
$background-surface: var(--background-surface, white);
|
|
41
|
+
$background-surface-hover: var(--background-surface-hover, #f8f8f8);
|
|
42
|
+
$background-surface-inverted: var(--background-surface-inverted, #333);
|
|
43
|
+
$background-surface-subtle: var(--background-surface-subtle, #fafafa);
|
|
44
|
+
$background-surface-subtle-hover: var(--background-surface-subtle-hover, #e5e5e5);
|
|
45
|
+
$background-track: var(--background-track, #d9d9d9);
|
|
46
|
+
$border-bold: var(--border-bold, #999999);
|
|
47
|
+
$border-bolder: var(--border-bolder, #333);
|
|
48
|
+
$border-chips-error-subtle: var(--border-chips-error-subtle, #fc8f8c);
|
|
49
|
+
$border-chips-info-subtle: var(--border-chips-info-subtle, #94b7fb);
|
|
50
|
+
$border-chips-magenta-subtle: var(--border-chips-magenta-subtle, #e481a4);
|
|
51
|
+
$border-chips-orange-subtle: var(--border-chips-orange-subtle, #f1b06f);
|
|
52
|
+
$border-chips-smart-subtle: var(--border-chips-smart-subtle, #a184dd);
|
|
53
|
+
$border-chips-warning-subtle: var(--border-chips-warning-subtle, #fdd677);
|
|
54
|
+
$border-default: var(--border-default, #ccc);
|
|
55
|
+
$border-inverted: var(--border-inverted, white);
|
|
56
|
+
$border-primary: var(--border-primary, #261a28);
|
|
57
|
+
$border-primary-hover: var(--border-primary-hover, #8b7d8e);
|
|
58
|
+
$border-primary-subtle: var(--border-primary-subtle, #58485b);
|
|
59
|
+
$border-primary-subtler: var(--border-primary-subtler, #a699a8);
|
|
60
|
+
$border-secondary: var(--border-secondary, #a7a191);
|
|
61
|
+
$border-smart: var(--border-smart, #5d23a4);
|
|
62
|
+
$border-state-disabled: var(--border-state-disabled, #ccc);
|
|
63
|
+
$border-state-error: var(--border-state-error, #ed4042);
|
|
64
|
+
$border-state-error-hover: var(--border-state-error-hover, #fc8f8c);
|
|
65
|
+
$border-state-formdisabled: var(--border-state-formdisabled, #eee);
|
|
66
|
+
$border-state-info: var(--border-state-info, #4078ef);
|
|
67
|
+
$border-state-success: var(--border-state-success, #188b49);
|
|
68
|
+
$border-state-warning: var(--border-state-warning, #fcc535);
|
|
69
|
+
$border-state-warning-hover: var(--border-state-warning-hover, #fdd677);
|
|
70
|
+
$border-subtle: var(--border-subtle, #e5e5e5);
|
|
71
|
+
$icon-button-secondary: var(--icon-button-secondary, #5a5546);
|
|
72
|
+
$icon-default: var(--icon-default, #666);
|
|
73
|
+
$icon-inverted: var(--icon-inverted, white);
|
|
74
|
+
$icon-neutral: var(--icon-neutral, white);
|
|
75
|
+
$icon-neutral-inverted: var(--icon-neutral-inverted, #333);
|
|
76
|
+
$icon-primary: var(--icon-primary, #261a28);
|
|
77
|
+
$icon-state-disabled: var(--icon-state-disabled, #999999);
|
|
78
|
+
$text-button-secondary: var(--text-button-secondary, #5a5546);
|
|
79
|
+
$text-default: var(--text-default, #333);
|
|
80
|
+
$text-inverted: var(--text-inverted, white);
|
|
81
|
+
$text-magenta: var(--text-magenta, #68143a);
|
|
82
|
+
$text-magenta-subtle: var(--text-magenta-subtle, #c42671);
|
|
83
|
+
$text-neutral: var(--text-neutral, white);
|
|
84
|
+
$text-neutral-inverted: var(--text-neutral-inverted, #333);
|
|
85
|
+
$text-onlight: var(--text-onlight, #333);
|
|
86
|
+
$text-orange: var(--text-orange, #583306);
|
|
87
|
+
$text-primary: var(--text-primary, #261a28);
|
|
88
|
+
$text-primary-subtle: var(--text-primary-subtle, #58485b);
|
|
89
|
+
$text-smart: var(--text-smart, #511c90);
|
|
90
|
+
$text-state-disabled: var(--text-state-disabled, #999);
|
|
91
|
+
$text-state-error: var(--text-state-error, #c92f33);
|
|
92
|
+
$text-state-error-subtle: var(--text-state-error-subtle, #ed4042);
|
|
93
|
+
$text-state-info: var(--text-state-info, #223b85);
|
|
94
|
+
$text-state-success: var(--text-state-success, #0a4324);
|
|
95
|
+
$text-state-warning: var(--text-state-warning, #8d6c1e);
|
|
96
|
+
$text-subtle: var(--text-subtle, #666);
|
|
97
|
+
$text-tab-hover: var(--text-tab-hover, #58485b);
|
|
98
|
+
$visual-dataviz-blue-subtle: var(--visual-dataviz-blue-subtle, #94b7fb);
|
|
99
|
+
$visual-dataviz-datapaint-blue: var(--visual-dataviz-datapaint-blue, #4078ef);
|
|
100
|
+
$visual-dataviz-datapaint-blue-bold: var(--visual-dataviz-datapaint-blue-bold, #2a4da8);
|
|
101
|
+
$visual-dataviz-datapaint-green-subtle: var(--visual-dataviz-datapaint-green-subtle, #8cc3a1);
|
|
102
|
+
$visual-dataviz-datapaint-purple: var(--visual-dataviz-datapaint-purple, #794ec2);
|
|
103
|
+
$visual-dataviz-datapaint-red: var(--visual-dataviz-datapaint-red, #c92f33);
|
|
104
|
+
$visual-dataviz-datapaint-solar-subtle: var(--visual-dataviz-datapaint-solar-subtle, #ff7a5a);
|
|
105
|
+
$visual-dataviz-green-subtle: var(--visual-dataviz-green-subtle, #8cc3a1);
|
|
106
|
+
$visual-dataviz-orange-subtle: var(--visual-dataviz-orange-subtle, #ffcd9b);
|
|
107
|
+
$visual-illustration-blue-01: var(--visual-illustration-blue-01, #e2ebff);
|
|
108
|
+
$visual-illustration-blue-02: var(--visual-illustration-blue-02, #4078ef);
|
|
109
|
+
$visual-illustration-gray-01: var(--visual-illustration-gray-01, white);
|
|
110
|
+
$visual-illustration-gray-02: var(--visual-illustration-gray-02, #fafafa);
|
|
111
|
+
$visual-illustration-gray-04: var(--visual-illustration-gray-04, #eee);
|
|
112
|
+
$visual-illustration-gray-05: var(--visual-illustration-gray-05, #e5e5e5);
|
|
113
|
+
$visual-illustration-gray-08: var(--visual-illustration-gray-08, #595959);
|
|
114
|
+
$visual-illustration-purple-01: var(--visual-illustration-purple-01, #ddceff);
|
|
115
|
+
$visual-illustration-purple-02: var(--visual-illustration-purple-02, #5d23a4);
|
|
116
|
+
$visual-illustration-red-01: var(--visual-illustration-red-01, #ffe4e1);
|
|
117
|
+
$visual-illustration-red-02: var(--visual-illustration-red-02, #fc8f8c);
|
|
118
|
+
$visual-illustration-red-03: var(--visual-illustration-red-03, #ed4042);
|
|
119
|
+
$visual-illustration-yellow-01: var(--visual-illustration-yellow-01, #ffeebc);
|
|
120
|
+
$visual-illustration-yellow-02: var(--visual-illustration-yellow-02, #fdd677);
|
|
121
|
+
$visual-illustration-yellow-03: var(--visual-illustration-yellow-03, #fbc846);
|
|
122
|
+
$visual-illustration-yellow-04: var(--visual-illustration-yellow-04, #fcc535);
|
|
123
|
+
$visual-illustration-yellow-05: var(--visual-illustration-yellow-05, #e2af2e);
|
|
124
|
+
$visual-scrollbar-thumb: var(--visual-scrollbar-thumb, #ccc);
|
|
125
|
+
$visual-indicator-primary: var(--visual-indicator-primary, #261a28);
|
|
126
|
+
$shadow-elevation: var(--shadow-elevation, 0px 4px 12px 0px oklch(0.51 0 0 / 16%));
|
|
127
|
+
$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%));
|
package/dist/tokens.css
ADDED
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @useinsider/design-tokens: generated by scripts/build.mjs from tokens/source.json. Do not edit.
|
|
3
|
+
* 125 tokens, 11 with a dark value (applied for prefers-color-scheme: dark).
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
[data-ins-editor][data-ins-rebrand="on"] {
|
|
7
|
+
--background-accent: #f4482b;
|
|
8
|
+
--background-calendarpopover-primary-selected: #716174;
|
|
9
|
+
--background-chips-secondary: #5a5546;
|
|
10
|
+
--background-codesnippet-sidebar: #e5e5e5;
|
|
11
|
+
--background-codesnippet-sidebar-disabled: #d9d9d9;
|
|
12
|
+
--background-elevated: white;
|
|
13
|
+
--background-elevated-hover: #f8f8f8;
|
|
14
|
+
--background-elevated-inverted: #333;
|
|
15
|
+
--background-elevated-selected: #ece5ed;
|
|
16
|
+
--background-elevated-selected-hover: #ded5df;
|
|
17
|
+
--background-magenta: #c42671;
|
|
18
|
+
--background-magenta-subtle: #ffd9e4;
|
|
19
|
+
--background-orange: #e48818;
|
|
20
|
+
--background-orange-subtle: #ffefde;
|
|
21
|
+
--background-page: #faf8f7;
|
|
22
|
+
--background-primary: #261a28;
|
|
23
|
+
--background-primary-hover: #3f3042;
|
|
24
|
+
--background-primary-subtle: #ece5ed;
|
|
25
|
+
--background-primary-subtle-hover: #ded5df;
|
|
26
|
+
--background-secondary: #e7e3da;
|
|
27
|
+
--background-secondary-hover: #d4cfc4;
|
|
28
|
+
--background-segment-disabled-selected: #d9d9d9;
|
|
29
|
+
--background-skeleton-shimmer: #eee;
|
|
30
|
+
--background-smart: #5d23a4;
|
|
31
|
+
--background-smart-subtle: #e9deff;
|
|
32
|
+
--background-state-disabled: #eee;
|
|
33
|
+
--background-state-disabled-onbg: #e5e5e5;
|
|
34
|
+
--background-state-error: #ed4042;
|
|
35
|
+
--background-state-error-subtle: #ffe4e1;
|
|
36
|
+
--background-state-error-subtle-hover: #ffd1ce;
|
|
37
|
+
--background-state-info: #4078ef;
|
|
38
|
+
--background-state-info-subtle: #e2ebff;
|
|
39
|
+
--background-state-success: #188b49;
|
|
40
|
+
--background-state-success-subtle: #e4f3e9;
|
|
41
|
+
--background-state-warning: #fcc535;
|
|
42
|
+
--background-state-warning-subtle: #fff5d5;
|
|
43
|
+
--background-surface: white;
|
|
44
|
+
--background-surface-hover: #f8f8f8;
|
|
45
|
+
--background-surface-inverted: #333;
|
|
46
|
+
--background-surface-subtle: #fafafa;
|
|
47
|
+
--background-surface-subtle-hover: #e5e5e5;
|
|
48
|
+
--background-track: #d9d9d9;
|
|
49
|
+
--border-bold: #999999;
|
|
50
|
+
--border-bolder: #333;
|
|
51
|
+
--border-chips-error-subtle: #fc8f8c;
|
|
52
|
+
--border-chips-info-subtle: #94b7fb;
|
|
53
|
+
--border-chips-magenta-subtle: #e481a4;
|
|
54
|
+
--border-chips-orange-subtle: #f1b06f;
|
|
55
|
+
--border-chips-smart-subtle: #a184dd;
|
|
56
|
+
--border-chips-warning-subtle: #fdd677;
|
|
57
|
+
--border-default: #ccc;
|
|
58
|
+
--border-inverted: white;
|
|
59
|
+
--border-primary: #261a28;
|
|
60
|
+
--border-primary-hover: #8b7d8e;
|
|
61
|
+
--border-primary-subtle: #58485b;
|
|
62
|
+
--border-primary-subtler: #a699a8;
|
|
63
|
+
--border-secondary: #a7a191;
|
|
64
|
+
--border-smart: #5d23a4;
|
|
65
|
+
--border-state-disabled: #ccc;
|
|
66
|
+
--border-state-error: #ed4042;
|
|
67
|
+
--border-state-error-hover: #fc8f8c;
|
|
68
|
+
--border-state-formdisabled: #eee;
|
|
69
|
+
--border-state-info: #4078ef;
|
|
70
|
+
--border-state-success: #188b49;
|
|
71
|
+
--border-state-warning: #fcc535;
|
|
72
|
+
--border-state-warning-hover: #fdd677;
|
|
73
|
+
--border-subtle: #e5e5e5;
|
|
74
|
+
--icon-button-secondary: #5a5546;
|
|
75
|
+
--icon-default: #666;
|
|
76
|
+
--icon-inverted: white;
|
|
77
|
+
--icon-neutral: white;
|
|
78
|
+
--icon-neutral-inverted: #333;
|
|
79
|
+
--icon-primary: #261a28;
|
|
80
|
+
--icon-state-disabled: #999999;
|
|
81
|
+
--text-button-secondary: #5a5546;
|
|
82
|
+
--text-default: #333;
|
|
83
|
+
--text-inverted: white;
|
|
84
|
+
--text-magenta: #68143a;
|
|
85
|
+
--text-magenta-subtle: #c42671;
|
|
86
|
+
--text-neutral: white;
|
|
87
|
+
--text-neutral-inverted: #333;
|
|
88
|
+
--text-onlight: #333;
|
|
89
|
+
--text-orange: #583306;
|
|
90
|
+
--text-primary: #261a28;
|
|
91
|
+
--text-primary-subtle: #58485b;
|
|
92
|
+
--text-smart: #511c90;
|
|
93
|
+
--text-state-disabled: #999;
|
|
94
|
+
--text-state-error: #c92f33;
|
|
95
|
+
--text-state-error-subtle: #ed4042;
|
|
96
|
+
--text-state-info: #223b85;
|
|
97
|
+
--text-state-success: #0a4324;
|
|
98
|
+
--text-state-warning: #8d6c1e;
|
|
99
|
+
--text-subtle: #666;
|
|
100
|
+
--text-tab-hover: #58485b;
|
|
101
|
+
--visual-dataviz-blue-subtle: #94b7fb;
|
|
102
|
+
--visual-dataviz-datapaint-blue: #4078ef;
|
|
103
|
+
--visual-dataviz-datapaint-blue-bold: #2a4da8;
|
|
104
|
+
--visual-dataviz-datapaint-green-subtle: #8cc3a1;
|
|
105
|
+
--visual-dataviz-datapaint-purple: #794ec2;
|
|
106
|
+
--visual-dataviz-datapaint-red: #c92f33;
|
|
107
|
+
--visual-dataviz-datapaint-solar-subtle: #ff7a5a;
|
|
108
|
+
--visual-dataviz-green-subtle: #8cc3a1;
|
|
109
|
+
--visual-dataviz-orange-subtle: #ffcd9b;
|
|
110
|
+
--visual-illustration-blue-01: #e2ebff;
|
|
111
|
+
--visual-illustration-blue-02: #4078ef;
|
|
112
|
+
--visual-illustration-gray-01: white;
|
|
113
|
+
--visual-illustration-gray-02: #fafafa;
|
|
114
|
+
--visual-illustration-gray-04: #eee;
|
|
115
|
+
--visual-illustration-gray-05: #e5e5e5;
|
|
116
|
+
--visual-illustration-gray-08: #595959;
|
|
117
|
+
--visual-illustration-purple-01: #ddceff;
|
|
118
|
+
--visual-illustration-purple-02: #5d23a4;
|
|
119
|
+
--visual-illustration-red-01: #ffe4e1;
|
|
120
|
+
--visual-illustration-red-02: #fc8f8c;
|
|
121
|
+
--visual-illustration-red-03: #ed4042;
|
|
122
|
+
--visual-illustration-yellow-01: #ffeebc;
|
|
123
|
+
--visual-illustration-yellow-02: #fdd677;
|
|
124
|
+
--visual-illustration-yellow-03: #fbc846;
|
|
125
|
+
--visual-illustration-yellow-04: #fcc535;
|
|
126
|
+
--visual-illustration-yellow-05: #e2af2e;
|
|
127
|
+
--visual-scrollbar-thumb: #ccc;
|
|
128
|
+
--visual-indicator-primary: #261a28;
|
|
129
|
+
--shadow-elevation: 0px 4px 12px 0px oklch(0.51 0 0 / 16%);
|
|
130
|
+
--shadow-primary: 0 0 0 3px oklch(0.43 0.037 321 / 32%);
|
|
131
|
+
--shadow-inverted: 0 0 0 3px oklch(0.70 0.026 106 / 32%);
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@media (prefers-color-scheme: dark) {
|
|
135
|
+
[data-ins-editor][data-ins-rebrand="on"] {
|
|
136
|
+
--background-elevated: #262626;
|
|
137
|
+
--background-page: #0d0d0d;
|
|
138
|
+
--background-primary: #c3abc0;
|
|
139
|
+
--background-primary-subtle: #443842;
|
|
140
|
+
--background-surface-subtle: #333;
|
|
141
|
+
--border-default: #595959;
|
|
142
|
+
--border-primary: #c3abc0;
|
|
143
|
+
--text-default: white;
|
|
144
|
+
--text-inverted: #18181b;
|
|
145
|
+
--text-primary: #ead9e7;
|
|
146
|
+
--shadow-elevation: 0px 4px 12px 0px oklch(0.16 0 0 / 64%);
|
|
147
|
+
}
|
|
148
|
+
}
|
package/dist/tokens.json
ADDED
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
{
|
|
2
|
+
"background/accent": "#f4482b",
|
|
3
|
+
"background/calendarpopover/primary-selected": "#716174",
|
|
4
|
+
"background/chips/secondary": "#5a5546",
|
|
5
|
+
"background/codesnippet/sidebar": "#e5e5e5",
|
|
6
|
+
"background/codesnippet/sidebar-disabled": "#d9d9d9",
|
|
7
|
+
"background/elevated": "white",
|
|
8
|
+
"background/elevated-hover": "#f8f8f8",
|
|
9
|
+
"background/elevated-inverted": "#333",
|
|
10
|
+
"background/elevated-selected": "#ece5ed",
|
|
11
|
+
"background/elevated-selected-hover": "#ded5df",
|
|
12
|
+
"background/magenta": "#c42671",
|
|
13
|
+
"background/magenta-subtle": "#ffd9e4",
|
|
14
|
+
"background/orange": "#e48818",
|
|
15
|
+
"background/orange-subtle": "#ffefde",
|
|
16
|
+
"background/page": "#faf8f7",
|
|
17
|
+
"background/primary": "#261a28",
|
|
18
|
+
"background/primary-hover": "#3f3042",
|
|
19
|
+
"background/primary-subtle": "#ece5ed",
|
|
20
|
+
"background/primary-subtle-hover": "#ded5df",
|
|
21
|
+
"background/secondary": "#e7e3da",
|
|
22
|
+
"background/secondary-hover": "#d4cfc4",
|
|
23
|
+
"background/segment/disabled-selected": "#d9d9d9",
|
|
24
|
+
"background/skeleton-shimmer": "#eee",
|
|
25
|
+
"background/smart": "#5d23a4",
|
|
26
|
+
"background/smart-subtle": "#e9deff",
|
|
27
|
+
"background/state/disabled": "#eee",
|
|
28
|
+
"background/state/disabled-onbg": "#e5e5e5",
|
|
29
|
+
"background/state/error": "#ed4042",
|
|
30
|
+
"background/state/error-subtle": "#ffe4e1",
|
|
31
|
+
"background/state/error-subtle-hover": "#ffd1ce",
|
|
32
|
+
"background/state/info": "#4078ef",
|
|
33
|
+
"background/state/info-subtle": "#e2ebff",
|
|
34
|
+
"background/state/success": "#188b49",
|
|
35
|
+
"background/state/success-subtle": "#e4f3e9",
|
|
36
|
+
"background/state/warning": "#fcc535",
|
|
37
|
+
"background/state/warning-subtle": "#fff5d5",
|
|
38
|
+
"background/surface": "white",
|
|
39
|
+
"background/surface-hover": "#f8f8f8",
|
|
40
|
+
"background/surface-inverted": "#333",
|
|
41
|
+
"background/surface-subtle": "#fafafa",
|
|
42
|
+
"background/surface-subtle-hover": "#e5e5e5",
|
|
43
|
+
"background/track": "#d9d9d9",
|
|
44
|
+
"border/bold": "#999999",
|
|
45
|
+
"border/bolder": "#333",
|
|
46
|
+
"border/chips/error-subtle": "#fc8f8c",
|
|
47
|
+
"border/chips/info-subtle": "#94b7fb",
|
|
48
|
+
"border/chips/magenta-subtle": "#e481a4",
|
|
49
|
+
"border/chips/orange-subtle": "#f1b06f",
|
|
50
|
+
"border/chips/smart-subtle": "#a184dd",
|
|
51
|
+
"border/chips/warning-subtle": "#fdd677",
|
|
52
|
+
"border/default": "#ccc",
|
|
53
|
+
"border/inverted": "white",
|
|
54
|
+
"border/primary": "#261a28",
|
|
55
|
+
"border/primary-hover": "#8b7d8e",
|
|
56
|
+
"border/primary-subtle": "#58485b",
|
|
57
|
+
"border/primary-subtler": "#a699a8",
|
|
58
|
+
"border/secondary": "#a7a191",
|
|
59
|
+
"border/smart": "#5d23a4",
|
|
60
|
+
"border/state/disabled": "#ccc",
|
|
61
|
+
"border/state/error": "#ed4042",
|
|
62
|
+
"border/state/error-hover": "#fc8f8c",
|
|
63
|
+
"border/state/formdisabled": "#eee",
|
|
64
|
+
"border/state/info": "#4078ef",
|
|
65
|
+
"border/state/success": "#188b49",
|
|
66
|
+
"border/state/warning": "#fcc535",
|
|
67
|
+
"border/state/warning-hover": "#fdd677",
|
|
68
|
+
"border/subtle": "#e5e5e5",
|
|
69
|
+
"icon/button/secondary": "#5a5546",
|
|
70
|
+
"icon/default": "#666",
|
|
71
|
+
"icon/inverted": "white",
|
|
72
|
+
"icon/neutral": "white",
|
|
73
|
+
"icon/neutral-inverted": "#333",
|
|
74
|
+
"icon/primary": "#261a28",
|
|
75
|
+
"icon/state/disabled": "#999999",
|
|
76
|
+
"text/button/secondary": "#5a5546",
|
|
77
|
+
"text/default": "#333",
|
|
78
|
+
"text/inverted": "white",
|
|
79
|
+
"text/magenta": "#68143a",
|
|
80
|
+
"text/magenta-subtle": "#c42671",
|
|
81
|
+
"text/neutral": "white",
|
|
82
|
+
"text/neutral-inverted": "#333",
|
|
83
|
+
"text/onlight": "#333",
|
|
84
|
+
"text/orange": "#583306",
|
|
85
|
+
"text/primary": "#261a28",
|
|
86
|
+
"text/primary-subtle": "#58485b",
|
|
87
|
+
"text/smart": "#511c90",
|
|
88
|
+
"text/state/disabled": "#999",
|
|
89
|
+
"text/state/error": "#c92f33",
|
|
90
|
+
"text/state/error-subtle": "#ed4042",
|
|
91
|
+
"text/state/info": "#223b85",
|
|
92
|
+
"text/state/success": "#0a4324",
|
|
93
|
+
"text/state/warning": "#8d6c1e",
|
|
94
|
+
"text/subtle": "#666",
|
|
95
|
+
"text/tab/hover": "#58485b",
|
|
96
|
+
"visual/dataviz/blue-subtle": "#94b7fb",
|
|
97
|
+
"visual/dataviz/datapaint/blue": "#4078ef",
|
|
98
|
+
"visual/dataviz/datapaint/blue-bold": "#2a4da8",
|
|
99
|
+
"visual/dataviz/datapaint/green-subtle": "#8cc3a1",
|
|
100
|
+
"visual/dataviz/datapaint/purple": "#794ec2",
|
|
101
|
+
"visual/dataviz/datapaint/red": "#c92f33",
|
|
102
|
+
"visual/dataviz/datapaint/solar-subtle": "#ff7a5a",
|
|
103
|
+
"visual/dataviz/green-subtle": "#8cc3a1",
|
|
104
|
+
"visual/dataviz/orange-subtle": "#ffcd9b",
|
|
105
|
+
"visual/illustration/blue-01": "#e2ebff",
|
|
106
|
+
"visual/illustration/blue-02": "#4078ef",
|
|
107
|
+
"visual/illustration/gray-01": "white",
|
|
108
|
+
"visual/illustration/gray-02": "#fafafa",
|
|
109
|
+
"visual/illustration/gray-04": "#eee",
|
|
110
|
+
"visual/illustration/gray-05": "#e5e5e5",
|
|
111
|
+
"visual/illustration/gray-08": "#595959",
|
|
112
|
+
"visual/illustration/purple-01": "#ddceff",
|
|
113
|
+
"visual/illustration/purple-02": "#5d23a4",
|
|
114
|
+
"visual/illustration/red-01": "#ffe4e1",
|
|
115
|
+
"visual/illustration/red-02": "#fc8f8c",
|
|
116
|
+
"visual/illustration/red-03": "#ed4042",
|
|
117
|
+
"visual/illustration/yellow-01": "#ffeebc",
|
|
118
|
+
"visual/illustration/yellow-02": "#fdd677",
|
|
119
|
+
"visual/illustration/yellow-03": "#fbc846",
|
|
120
|
+
"visual/illustration/yellow-04": "#fcc535",
|
|
121
|
+
"visual/illustration/yellow-05": "#e2af2e",
|
|
122
|
+
"visual/scrollbar/thumb": "#ccc",
|
|
123
|
+
"visual/indicator/primary": "#261a28",
|
|
124
|
+
"shadow/elevation": "0px 4px 12px 0px oklch(0.51 0 0 / 16%)",
|
|
125
|
+
"shadow/primary": "0 0 0 3px oklch(0.43 0.037 321 / 32%)",
|
|
126
|
+
"shadow/inverted": "0 0 0 3px oklch(0.70 0.026 106 / 32%)"
|
|
127
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@useinsider/design-tokens",
|
|
3
|
+
"version": "0.1.1",
|
|
4
|
+
"description": "Insider rebranding design tokens — CSS custom properties, SCSS references, JSON and ab-components compat layer",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/useinsider/design-tokens.git"
|
|
10
|
+
},
|
|
11
|
+
"files": [
|
|
12
|
+
"dist",
|
|
13
|
+
"tokens"
|
|
14
|
+
],
|
|
15
|
+
"exports": {
|
|
16
|
+
"./tokens.css": "./dist/tokens.css",
|
|
17
|
+
"./tokens.scss": "./dist/_tokens.scss",
|
|
18
|
+
"./tokens.json": "./dist/tokens.json",
|
|
19
|
+
"./compat.scss": "./dist/_compat.scss",
|
|
20
|
+
"./source": "./tokens/source.json",
|
|
21
|
+
"./package.json": "./package.json"
|
|
22
|
+
},
|
|
23
|
+
"scripts": {
|
|
24
|
+
"build": "node scripts/build.mjs",
|
|
25
|
+
"prepack": "npm run build",
|
|
26
|
+
"report:hex-index": "node scripts/report-hex-index.mjs",
|
|
27
|
+
"lint": "eslint .",
|
|
28
|
+
"test:unit": "vitest run tests/unit",
|
|
29
|
+
"test:unit:coverage": "vitest run --coverage tests/unit",
|
|
30
|
+
"test:integration": "vitest run tests/integration",
|
|
31
|
+
"test:visual": "playwright test",
|
|
32
|
+
"test:visual:update": "playwright test --update-snapshots"
|
|
33
|
+
},
|
|
34
|
+
"publishConfig": {
|
|
35
|
+
"access": "public",
|
|
36
|
+
"registry": "https://registry.npmjs.org/"
|
|
37
|
+
},
|
|
38
|
+
"devDependencies": {
|
|
39
|
+
"@cspell/eslint-plugin": "8.16.0",
|
|
40
|
+
"@eslint/eslintrc": "3.2.0",
|
|
41
|
+
"@eslint/js": "8.57.1",
|
|
42
|
+
"@playwright/test": "1.62.1",
|
|
43
|
+
"@stylistic/eslint-plugin": "2.10.1",
|
|
44
|
+
"@stylistic/eslint-plugin-migrate": "2.10.1",
|
|
45
|
+
"@types/eslint": "8.56.12",
|
|
46
|
+
"@types/eslint__eslintrc": "2.1.2",
|
|
47
|
+
"@types/eslint__js": "8.42.3",
|
|
48
|
+
"@typescript-eslint/eslint-plugin": "7.18.0",
|
|
49
|
+
"@typescript-eslint/parser": "7.18.0",
|
|
50
|
+
"@useinsider/eslint-config": "1.3.1",
|
|
51
|
+
"@vitest/coverage-istanbul": "3.2.7",
|
|
52
|
+
"eslint": "8.57.1",
|
|
53
|
+
"eslint-config-airbnb-base": "15.0.0",
|
|
54
|
+
"eslint-config-airbnb-typescript": "18.0.0",
|
|
55
|
+
"eslint-import-resolver-typescript": "3.6.3",
|
|
56
|
+
"eslint-plugin-import": "2.31.0",
|
|
57
|
+
"eslint-plugin-jsdoc": "50.5.0",
|
|
58
|
+
"globals": "15.14.0",
|
|
59
|
+
"sass-embedded": "1.93.2",
|
|
60
|
+
"ts-deepmerge": "7.0.1",
|
|
61
|
+
"typescript": "5.6.2",
|
|
62
|
+
"typescript-eslint": "8.14.0",
|
|
63
|
+
"vite": "6.4.3",
|
|
64
|
+
"vitest": "3.2.7"
|
|
65
|
+
}
|
|
66
|
+
}
|
|
@@ -0,0 +1,401 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$description": "SD-151733 — Figma'dan indirilmis token kaynagi. Canli Figma API YOK (karar D15).",
|
|
3
|
+
"$meta": {
|
|
4
|
+
"figmaDosyalari": [
|
|
5
|
+
"wM3hofqo0efGZyRqIdk10W",
|
|
6
|
+
"yG3vyYhE45hv8LUzIWmW04",
|
|
7
|
+
"piW3pAeBdbHlnOL7gdnXB2",
|
|
8
|
+
"YNzknie1fS91x5WXRLukvN"
|
|
9
|
+
],
|
|
10
|
+
"cikarildi": "2026-09-17",
|
|
11
|
+
"yontem": "get_design_context(disableCodeConnect=true) — token adi + cozulmus deger"
|
|
12
|
+
},
|
|
13
|
+
"color": {
|
|
14
|
+
"background/accent": {
|
|
15
|
+
"value": "#f4482b"
|
|
16
|
+
},
|
|
17
|
+
"background/calendarpopover/primary-selected": {
|
|
18
|
+
"value": "#716174"
|
|
19
|
+
},
|
|
20
|
+
"background/chips/secondary": {
|
|
21
|
+
"value": "#5a5546"
|
|
22
|
+
},
|
|
23
|
+
"background/codesnippet/sidebar": {
|
|
24
|
+
"value": "#e5e5e5"
|
|
25
|
+
},
|
|
26
|
+
"background/codesnippet/sidebar-disabled": {
|
|
27
|
+
"value": "#d9d9d9"
|
|
28
|
+
},
|
|
29
|
+
"background/elevated": {
|
|
30
|
+
"value": "white",
|
|
31
|
+
"dark": "#262626"
|
|
32
|
+
},
|
|
33
|
+
"background/elevated-hover": {
|
|
34
|
+
"value": "#f8f8f8"
|
|
35
|
+
},
|
|
36
|
+
"background/elevated-inverted": {
|
|
37
|
+
"value": "#333"
|
|
38
|
+
},
|
|
39
|
+
"background/elevated-selected": {
|
|
40
|
+
"value": "#ece5ed"
|
|
41
|
+
},
|
|
42
|
+
"background/elevated-selected-hover": {
|
|
43
|
+
"value": "#ded5df"
|
|
44
|
+
},
|
|
45
|
+
"background/magenta": {
|
|
46
|
+
"value": "#c42671"
|
|
47
|
+
},
|
|
48
|
+
"background/magenta-subtle": {
|
|
49
|
+
"value": "#ffd9e4"
|
|
50
|
+
},
|
|
51
|
+
"background/orange": {
|
|
52
|
+
"value": "#e48818"
|
|
53
|
+
},
|
|
54
|
+
"background/orange-subtle": {
|
|
55
|
+
"value": "#ffefde"
|
|
56
|
+
},
|
|
57
|
+
"background/page": {
|
|
58
|
+
"value": "#faf8f7",
|
|
59
|
+
"dark": "#0d0d0d"
|
|
60
|
+
},
|
|
61
|
+
"background/primary": {
|
|
62
|
+
"value": "#261a28",
|
|
63
|
+
"dark": "#c3abc0"
|
|
64
|
+
},
|
|
65
|
+
"background/primary-hover": {
|
|
66
|
+
"value": "#3f3042"
|
|
67
|
+
},
|
|
68
|
+
"background/primary-subtle": {
|
|
69
|
+
"value": "#ece5ed",
|
|
70
|
+
"dark": "#443842"
|
|
71
|
+
},
|
|
72
|
+
"background/primary-subtle-hover": {
|
|
73
|
+
"value": "#ded5df"
|
|
74
|
+
},
|
|
75
|
+
"background/secondary": {
|
|
76
|
+
"value": "#e7e3da"
|
|
77
|
+
},
|
|
78
|
+
"background/secondary-hover": {
|
|
79
|
+
"value": "#d4cfc4"
|
|
80
|
+
},
|
|
81
|
+
"background/segment/disabled-selected": {
|
|
82
|
+
"value": "#d9d9d9"
|
|
83
|
+
},
|
|
84
|
+
"background/skeleton-shimmer": {
|
|
85
|
+
"value": "#eee"
|
|
86
|
+
},
|
|
87
|
+
"background/smart": {
|
|
88
|
+
"value": "#5d23a4"
|
|
89
|
+
},
|
|
90
|
+
"background/smart-subtle": {
|
|
91
|
+
"value": "#e9deff"
|
|
92
|
+
},
|
|
93
|
+
"background/state/disabled": {
|
|
94
|
+
"value": "#eee"
|
|
95
|
+
},
|
|
96
|
+
"background/state/disabled-onbg": {
|
|
97
|
+
"value": "#e5e5e5"
|
|
98
|
+
},
|
|
99
|
+
"background/state/error": {
|
|
100
|
+
"value": "#ed4042"
|
|
101
|
+
},
|
|
102
|
+
"background/state/error-subtle": {
|
|
103
|
+
"value": "#ffe4e1"
|
|
104
|
+
},
|
|
105
|
+
"background/state/error-subtle-hover": {
|
|
106
|
+
"value": "#ffd1ce"
|
|
107
|
+
},
|
|
108
|
+
"background/state/info": {
|
|
109
|
+
"value": "#4078ef"
|
|
110
|
+
},
|
|
111
|
+
"background/state/info-subtle": {
|
|
112
|
+
"value": "#e2ebff"
|
|
113
|
+
},
|
|
114
|
+
"background/state/success": {
|
|
115
|
+
"value": "#188b49"
|
|
116
|
+
},
|
|
117
|
+
"background/state/success-subtle": {
|
|
118
|
+
"value": "#e4f3e9"
|
|
119
|
+
},
|
|
120
|
+
"background/state/warning": {
|
|
121
|
+
"value": "#fcc535"
|
|
122
|
+
},
|
|
123
|
+
"background/state/warning-subtle": {
|
|
124
|
+
"value": "#fff5d5"
|
|
125
|
+
},
|
|
126
|
+
"background/surface": {
|
|
127
|
+
"value": "white"
|
|
128
|
+
},
|
|
129
|
+
"background/surface-hover": {
|
|
130
|
+
"value": "#f8f8f8"
|
|
131
|
+
},
|
|
132
|
+
"background/surface-inverted": {
|
|
133
|
+
"value": "#333"
|
|
134
|
+
},
|
|
135
|
+
"background/surface-subtle": {
|
|
136
|
+
"value": "#fafafa",
|
|
137
|
+
"dark": "#333"
|
|
138
|
+
},
|
|
139
|
+
"background/surface-subtle-hover": {
|
|
140
|
+
"value": "#e5e5e5"
|
|
141
|
+
},
|
|
142
|
+
"background/track": {
|
|
143
|
+
"value": "#d9d9d9"
|
|
144
|
+
},
|
|
145
|
+
"border/bold": {
|
|
146
|
+
"value": "#999999"
|
|
147
|
+
},
|
|
148
|
+
"border/bolder": {
|
|
149
|
+
"value": "#333"
|
|
150
|
+
},
|
|
151
|
+
"border/chips/error-subtle": {
|
|
152
|
+
"value": "#fc8f8c"
|
|
153
|
+
},
|
|
154
|
+
"border/chips/info-subtle": {
|
|
155
|
+
"value": "#94b7fb"
|
|
156
|
+
},
|
|
157
|
+
"border/chips/magenta-subtle": {
|
|
158
|
+
"value": "#e481a4"
|
|
159
|
+
},
|
|
160
|
+
"border/chips/orange-subtle": {
|
|
161
|
+
"value": "#f1b06f"
|
|
162
|
+
},
|
|
163
|
+
"border/chips/smart-subtle": {
|
|
164
|
+
"value": "#a184dd"
|
|
165
|
+
},
|
|
166
|
+
"border/chips/warning-subtle": {
|
|
167
|
+
"value": "#fdd677"
|
|
168
|
+
},
|
|
169
|
+
"border/default": {
|
|
170
|
+
"value": "#ccc",
|
|
171
|
+
"dark": "#595959"
|
|
172
|
+
},
|
|
173
|
+
"border/inverted": {
|
|
174
|
+
"value": "white"
|
|
175
|
+
},
|
|
176
|
+
"border/primary": {
|
|
177
|
+
"value": "#261a28",
|
|
178
|
+
"dark": "#c3abc0"
|
|
179
|
+
},
|
|
180
|
+
"border/primary-hover": {
|
|
181
|
+
"value": "#8b7d8e"
|
|
182
|
+
},
|
|
183
|
+
"border/primary-subtle": {
|
|
184
|
+
"value": "#58485b"
|
|
185
|
+
},
|
|
186
|
+
"border/primary-subtler": {
|
|
187
|
+
"value": "#a699a8"
|
|
188
|
+
},
|
|
189
|
+
"border/secondary": {
|
|
190
|
+
"value": "#a7a191"
|
|
191
|
+
},
|
|
192
|
+
"border/smart": {
|
|
193
|
+
"value": "#5d23a4"
|
|
194
|
+
},
|
|
195
|
+
"border/state/disabled": {
|
|
196
|
+
"value": "#ccc"
|
|
197
|
+
},
|
|
198
|
+
"border/state/error": {
|
|
199
|
+
"value": "#ed4042"
|
|
200
|
+
},
|
|
201
|
+
"border/state/error-hover": {
|
|
202
|
+
"value": "#fc8f8c"
|
|
203
|
+
},
|
|
204
|
+
"border/state/formdisabled": {
|
|
205
|
+
"value": "#eee"
|
|
206
|
+
},
|
|
207
|
+
"border/state/info": {
|
|
208
|
+
"value": "#4078ef"
|
|
209
|
+
},
|
|
210
|
+
"border/state/success": {
|
|
211
|
+
"value": "#188b49"
|
|
212
|
+
},
|
|
213
|
+
"border/state/warning": {
|
|
214
|
+
"value": "#fcc535"
|
|
215
|
+
},
|
|
216
|
+
"border/state/warning-hover": {
|
|
217
|
+
"value": "#fdd677"
|
|
218
|
+
},
|
|
219
|
+
"border/subtle": {
|
|
220
|
+
"value": "#e5e5e5"
|
|
221
|
+
},
|
|
222
|
+
"icon/button/secondary": {
|
|
223
|
+
"value": "#5a5546"
|
|
224
|
+
},
|
|
225
|
+
"icon/default": {
|
|
226
|
+
"value": "#666"
|
|
227
|
+
},
|
|
228
|
+
"icon/inverted": {
|
|
229
|
+
"value": "white"
|
|
230
|
+
},
|
|
231
|
+
"icon/neutral": {
|
|
232
|
+
"value": "white"
|
|
233
|
+
},
|
|
234
|
+
"icon/neutral-inverted": {
|
|
235
|
+
"value": "#333"
|
|
236
|
+
},
|
|
237
|
+
"icon/primary": {
|
|
238
|
+
"value": "#261a28"
|
|
239
|
+
},
|
|
240
|
+
"icon/state/disabled": {
|
|
241
|
+
"value": "#999999"
|
|
242
|
+
},
|
|
243
|
+
"text/button/secondary": {
|
|
244
|
+
"value": "#5a5546"
|
|
245
|
+
},
|
|
246
|
+
"text/default": {
|
|
247
|
+
"value": "#333",
|
|
248
|
+
"dark": "white"
|
|
249
|
+
},
|
|
250
|
+
"text/inverted": {
|
|
251
|
+
"value": "white",
|
|
252
|
+
"dark": "#18181b"
|
|
253
|
+
},
|
|
254
|
+
"text/magenta": {
|
|
255
|
+
"value": "#68143a"
|
|
256
|
+
},
|
|
257
|
+
"text/magenta-subtle": {
|
|
258
|
+
"value": "#c42671"
|
|
259
|
+
},
|
|
260
|
+
"text/neutral": {
|
|
261
|
+
"value": "white"
|
|
262
|
+
},
|
|
263
|
+
"text/neutral-inverted": {
|
|
264
|
+
"value": "#333"
|
|
265
|
+
},
|
|
266
|
+
"text/onlight": {
|
|
267
|
+
"value": "#333"
|
|
268
|
+
},
|
|
269
|
+
"text/orange": {
|
|
270
|
+
"value": "#583306"
|
|
271
|
+
},
|
|
272
|
+
"text/primary": {
|
|
273
|
+
"value": "#261a28",
|
|
274
|
+
"dark": "#ead9e7"
|
|
275
|
+
},
|
|
276
|
+
"text/primary-subtle": {
|
|
277
|
+
"value": "#58485b"
|
|
278
|
+
},
|
|
279
|
+
"text/smart": {
|
|
280
|
+
"value": "#511c90"
|
|
281
|
+
},
|
|
282
|
+
"text/state/disabled": {
|
|
283
|
+
"value": "#999"
|
|
284
|
+
},
|
|
285
|
+
"text/state/error": {
|
|
286
|
+
"value": "#c92f33"
|
|
287
|
+
},
|
|
288
|
+
"text/state/error-subtle": {
|
|
289
|
+
"value": "#ed4042"
|
|
290
|
+
},
|
|
291
|
+
"text/state/info": {
|
|
292
|
+
"value": "#223b85"
|
|
293
|
+
},
|
|
294
|
+
"text/state/success": {
|
|
295
|
+
"value": "#0a4324"
|
|
296
|
+
},
|
|
297
|
+
"text/state/warning": {
|
|
298
|
+
"value": "#8d6c1e"
|
|
299
|
+
},
|
|
300
|
+
"text/subtle": {
|
|
301
|
+
"value": "#666"
|
|
302
|
+
},
|
|
303
|
+
"text/tab/hover": {
|
|
304
|
+
"value": "#58485b"
|
|
305
|
+
},
|
|
306
|
+
"visual/dataviz/blue-subtle": {
|
|
307
|
+
"value": "#94b7fb"
|
|
308
|
+
},
|
|
309
|
+
"visual/dataviz/datapaint/blue": {
|
|
310
|
+
"value": "#4078ef"
|
|
311
|
+
},
|
|
312
|
+
"visual/dataviz/datapaint/blue-bold": {
|
|
313
|
+
"value": "#2a4da8"
|
|
314
|
+
},
|
|
315
|
+
"visual/dataviz/datapaint/green-subtle": {
|
|
316
|
+
"value": "#8cc3a1"
|
|
317
|
+
},
|
|
318
|
+
"visual/dataviz/datapaint/purple": {
|
|
319
|
+
"value": "#794ec2"
|
|
320
|
+
},
|
|
321
|
+
"visual/dataviz/datapaint/red": {
|
|
322
|
+
"value": "#c92f33"
|
|
323
|
+
},
|
|
324
|
+
"visual/dataviz/datapaint/solar-subtle": {
|
|
325
|
+
"value": "#ff7a5a"
|
|
326
|
+
},
|
|
327
|
+
"visual/dataviz/green-subtle": {
|
|
328
|
+
"value": "#8cc3a1"
|
|
329
|
+
},
|
|
330
|
+
"visual/dataviz/orange-subtle": {
|
|
331
|
+
"value": "#ffcd9b"
|
|
332
|
+
},
|
|
333
|
+
"visual/illustration/blue-01": {
|
|
334
|
+
"value": "#e2ebff"
|
|
335
|
+
},
|
|
336
|
+
"visual/illustration/blue-02": {
|
|
337
|
+
"value": "#4078ef"
|
|
338
|
+
},
|
|
339
|
+
"visual/illustration/gray-01": {
|
|
340
|
+
"value": "white"
|
|
341
|
+
},
|
|
342
|
+
"visual/illustration/gray-02": {
|
|
343
|
+
"value": "#fafafa"
|
|
344
|
+
},
|
|
345
|
+
"visual/illustration/gray-04": {
|
|
346
|
+
"value": "#eee"
|
|
347
|
+
},
|
|
348
|
+
"visual/illustration/gray-05": {
|
|
349
|
+
"value": "#e5e5e5"
|
|
350
|
+
},
|
|
351
|
+
"visual/illustration/gray-08": {
|
|
352
|
+
"value": "#595959"
|
|
353
|
+
},
|
|
354
|
+
"visual/illustration/purple-01": {
|
|
355
|
+
"value": "#ddceff"
|
|
356
|
+
},
|
|
357
|
+
"visual/illustration/purple-02": {
|
|
358
|
+
"value": "#5d23a4"
|
|
359
|
+
},
|
|
360
|
+
"visual/illustration/red-01": {
|
|
361
|
+
"value": "#ffe4e1"
|
|
362
|
+
},
|
|
363
|
+
"visual/illustration/red-02": {
|
|
364
|
+
"value": "#fc8f8c"
|
|
365
|
+
},
|
|
366
|
+
"visual/illustration/red-03": {
|
|
367
|
+
"value": "#ed4042"
|
|
368
|
+
},
|
|
369
|
+
"visual/illustration/yellow-01": {
|
|
370
|
+
"value": "#ffeebc"
|
|
371
|
+
},
|
|
372
|
+
"visual/illustration/yellow-02": {
|
|
373
|
+
"value": "#fdd677"
|
|
374
|
+
},
|
|
375
|
+
"visual/illustration/yellow-03": {
|
|
376
|
+
"value": "#fbc846"
|
|
377
|
+
},
|
|
378
|
+
"visual/illustration/yellow-04": {
|
|
379
|
+
"value": "#fcc535"
|
|
380
|
+
},
|
|
381
|
+
"visual/illustration/yellow-05": {
|
|
382
|
+
"value": "#e2af2e"
|
|
383
|
+
},
|
|
384
|
+
"visual/scrollbar/thumb": {
|
|
385
|
+
"value": "#ccc"
|
|
386
|
+
},
|
|
387
|
+
"visual/indicator/primary": {
|
|
388
|
+
"value": "#261a28"
|
|
389
|
+
},
|
|
390
|
+
"shadow/elevation": {
|
|
391
|
+
"value": "0px 4px 12px 0px oklch(0.51 0 0 / 16%)",
|
|
392
|
+
"dark": "0px 4px 12px 0px oklch(0.16 0 0 / 64%)"
|
|
393
|
+
},
|
|
394
|
+
"shadow/primary": {
|
|
395
|
+
"value": "0 0 0 3px oklch(0.43 0.037 321 / 32%)"
|
|
396
|
+
},
|
|
397
|
+
"shadow/inverted": {
|
|
398
|
+
"value": "0 0 0 3px oklch(0.70 0.026 106 / 32%)"
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
}
|