@useinsider/design-tokens 0.2.2 → 0.3.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 (5) hide show
  1. package/README.md +23 -8
  2. package/dist/_compat.scss +37 -37
  3. package/dist/_tokens.scss +299 -299
  4. package/dist/tokens.css +574 -574
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -40,12 +40,15 @@ to the three outputs like this (`/` becomes `-`):
40
40
 
41
41
  | Source key | CSS | SCSS | TS / JSON |
42
42
  | --- | --- | --- | --- |
43
- | `background/primary` | `--background-primary` | `$background-primary` | `tokens['background/primary']` |
44
- | `shadow/elevation` | `--shadow-elevation` | `$shadow-elevation` | `tokens['shadow/elevation']` |
43
+ | `background/primary` | `--ins-background-primary` | `$background-primary` | `tokens['background/primary']` |
44
+ | `shadow/elevation` | `--ins-shadow-elevation` | `$shadow-elevation` | `tokens['shadow/elevation']` |
45
45
 
46
- - `tokens.css` defines every token as a custom property.
46
+ - `tokens.css` defines every token as a custom property. Every custom
47
+ property carries the `ins-` prefix, so a partner page that defines its own
48
+ `--background-primary` (for example on `:root`) cannot change an editor colour
49
+ while the rebranding is off.
47
50
  - `_tokens.scss` holds references, not raw values:
48
- `$background-primary: var(--background-primary, #261a28);`
51
+ `$background-primary: var(--ins-background-primary, #261a28);`
49
52
  - `tokens.json` is a flat map from source key to the light value as a string,
50
53
  for example `"background/primary": "#261a28"`. It is resolved at build time,
51
54
  so it does not follow the feature flag or dark mode. Dark values are
@@ -57,10 +60,10 @@ The CSS never touches `:root`. Every custom property is defined under one
57
60
  selector:
58
61
 
59
62
  ```css
60
- [data-ins-editor][data-ins-rebrand="on"] { --background-primary: #261a28; }
63
+ [data-ins-editor][data-ins-rebrand="on"] { --ins-background-primary: #261a28; }
61
64
 
62
65
  @media (prefers-color-scheme: dark) {
63
- [data-ins-editor][data-ins-rebrand="on"] { --background-primary: #c3abc0; }
66
+ [data-ins-editor][data-ins-rebrand="on"] { --ins-background-primary: #c3abc0; }
64
67
  }
65
68
  ```
66
69
 
@@ -70,7 +73,7 @@ selector:
70
73
  `dark` value in the source appear in the dark block; the others keep their
71
74
  light value in dark mode.
72
75
  - **Keep the flag-off look unchanged:** in consumer styles use
73
- `var(--token, #oldHex)`, not the bare SCSS variable. Without the attribute no
76
+ `var(--ins-<token>, #oldHex)`, not the bare SCSS variable. Without the attribute no
74
77
  custom property is defined, so the fallback (today's colour) is used.
75
78
 
76
79
  ## SCSS usage notes
@@ -89,7 +92,7 @@ selector:
89
92
  `-success` and `-warning`. `compat.scss` maps each of them (and the matching
90
93
  `$shadow_container_*`) to the same-named token with the legacy value as the
91
94
  fallback, following the role rule `$shadow_<x>` → `shadow/<x>`, so both
92
- spellings resolve to `var(--shadow-<x>, <legacy value>)`. The one renamed role
95
+ spellings resolve to `var(--ins-shadow-<x>, <legacy value>)`. The one renamed role
93
96
  is `danger`: `$shadow_danger` and `$shadow_container_danger` map to
94
97
  `shadow/error`.
95
98
  In `ab-components` the `additionalData` order must be:
@@ -148,6 +151,18 @@ commit the `*-linux.png` files from the `visual-baselines` artifact to
148
151
 
149
152
  ## Release
150
153
 
154
+ ### 0.3.0 changes (breaking)
155
+
156
+ - Every custom property is now prefixed with `ins-`: `--background-primary` →
157
+ `--ins-background-primary`. `tokens.css`, `_tokens.scss` and `_compat.scss`
158
+ change together, so a consumer that only uses the SCSS variables or the compat
159
+ layer needs no source change. A hand-written `var(--<token>)` must add the
160
+ prefix. Token keys, values, `tokens.json` and the SCSS variable names are
161
+ unchanged.
162
+ - Why: an unprefixed name could be defined by a partner page (for example
163
+ `:root { --border-primary: … }`) and override the fallback colour of an
164
+ editor rendered on that page while the rebranding is off.
165
+
151
166
  ### 0.2.2 changes
152
167
 
153
168
  - No token or artifact change: the published files are identical to 0.2.1.
package/dist/_compat.scss CHANGED
@@ -1,41 +1,41 @@
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
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.
4
+ // $shadow-<x> in _tokens.scss; both resolve to var(--ins-shadow-<x>, <legacy value>) when compat comes last.
5
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-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);
6
+ $form_color_background_warning: var(--ins-background-state-warning, #ffbf00);
7
+ $chip_color_background_stroke_smart: var(--ins-background-smart, #f0e6ff);
8
+ $form_color_border_warning: var(--ins-border-state-warning, #ffbf00);
9
+ $chip_color_text_stroke_default: var(--ins-text-default, #0a2ecc);
10
+ $form_color_text_disabled: var(--ins-text-state-disabled, #989898);
11
+ $form_color_border_default: var(--ins-border-default, #e1e1e1);
12
+ $form_color_background_disabled: var(--ins-background-state-disabled, #e1e1e1);
13
+ $feedback_color_background_success: var(--ins-background-state-success, #128745);
14
+ $form_color_icon_disabled: var(--ins-icon-state-disabled, #989898);
15
+ $chip_color_text_stroke_warning: var(--ins-text-state-warning, #8f6b00);
16
+ $action_color_background_primary_default: var(--ins-background-primary, #0a2ecc);
17
+ $action_color_background_secondary_default: var(--ins-background-secondary, #dcdfe6);
18
+ $form_color_border_error: var(--ins-border-state-error, #dc2a2a);
19
+ $form_color_text_error: var(--ins-text-state-error, #dc2a2a);
20
+ $action_color_text_success_default: var(--ins-text-state-success, #128745);
21
+ $action_color_background_primary-subtle_default: var(--ins-background-primary-subtle, #dae1fb);
22
+ $feedback_color_background_information: var(--ins-background-state-info, #258dde);
23
+ $feedback_color_background_success-subtle: var(--ins-background-state-success-subtle, #eefff5);
24
+ $feedback_color_background_warning-subtle: var(--ins-background-state-warning-subtle, #fffaeb);
25
+ $chip_color_border_smart: var(--ins-border-smart, #b486f4);
26
+ $shadow_elevation: var(--ins-shadow-elevation, 0px 4px 12px 0px #2c354626);
27
+ $shadow_container_default: var(--ins-shadow-elevation, 0px 4px 12px 0px #39393926);
28
+ $shadow_primary: var(--ins-shadow-primary, 0px 0px 0px 3px #b5c1f1);
29
+ $shadow_container_primary: var(--ins-shadow-primary, 0px 0px 0px 3px #b5c1f1);
30
+ $shadow_secondary: var(--ins-shadow-secondary, 0px 0px 0px 3px #b1b7c4);
31
+ $shadow_warning: var(--ins-shadow-warning, 0px 0px 0px 3px #ffe187);
32
+ $shadow_success: var(--ins-shadow-success, 0px 0px 0px 3px #6dc993);
33
+ $shadow_create: var(--ins-shadow-create, 0px 0px 0px 3px #b486f4);
34
+ $shadow_magenta: var(--ins-shadow-magenta, 0px 0px 0px 3px #FFA6C8);
35
+ $shadow_container_secondary: var(--ins-shadow-secondary, 0px 0px 0px 3px #b1b7c4);
36
+ $shadow_container_create: var(--ins-shadow-create, 0px 0px 0px 3px #b486f4);
37
+ $shadow_container_warning: var(--ins-shadow-warning, 0px 0px 0px 3px #ffe187);
38
+ $shadow_container_success: var(--ins-shadow-success, 0px 0px 0px 3px #6dc993);
39
+ $shadow_container_magenta: var(--ins-shadow-magenta, 0px 0px 0px 3px #FFA6C8);
40
+ $shadow_danger: var(--ins-shadow-error, 0px 0px 0px 3px #f88e8c);
41
+ $shadow_container_danger: var(--ins-shadow-error, 0px 0px 0px 3px #f88e8c);