@useinsider/design-tokens 0.2.2 → 0.3.0-beta.sd-153247.4

package/README.md

@@ -40,12 +40,15 @@ to the three outputs like this (`/` becomes `-`):
 
 | Source key | CSS | SCSS | TS / JSON |
 | --- | --- | --- | --- |
-| `background/primary` | `--background-primary` | `$background-primary` | `tokens['background/primary']` |
-| `shadow/elevation` | `--shadow-elevation` | `$shadow-elevation` | `tokens['shadow/elevation']` |
+| `background/primary` | `--ins-background-primary` | `$background-primary` | `tokens['background/primary']` |
+| `shadow/elevation` | `--ins-shadow-elevation` | `$shadow-elevation` | `tokens['shadow/elevation']` |
 
-- `tokens.css` defines every token as a custom property.
+- `tokens.css` defines every token as a custom property. Every custom
+  property carries the `ins-` prefix, so a partner page that defines its own
+  `--background-primary` (for example on `:root`) cannot change an editor colour
+  while the rebranding is off.
 - `_tokens.scss` holds references, not raw values:
-  `$background-primary: var(--background-primary, #261a28);`
+  `$background-primary: var(--ins-background-primary, #261a28);`
 - `tokens.json` is a flat map from source key to the light value as a string,
   for example `"background/primary": "#261a28"`. It is resolved at build time,
   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
 selector:
 
 ```css
-[data-ins-editor][data-ins-rebrand="on"] { --background-primary: #261a28; }
+[data-ins-editor][data-ins-rebrand="on"] { --ins-background-primary: #261a28; }
 
 @media (prefers-color-scheme: dark) {
-  [data-ins-editor][data-ins-rebrand="on"] { --background-primary: #c3abc0; }
+  [data-ins-editor][data-ins-rebrand="on"] { --ins-background-primary: #c3abc0; }
 }
 ```
 
@@ -70,7 +73,7 @@ selector:
   `dark` value in the source appear in the dark block; the others keep their
   light value in dark mode.
 - **Keep the flag-off look unchanged:** in consumer styles use
-  `var(--token, #oldHex)`, not the bare SCSS variable. Without the attribute no
+  `var(--ins-<token>, #oldHex)`, not the bare SCSS variable. Without the attribute no
   custom property is defined, so the fallback (today's colour) is used.
 
 ## SCSS usage notes
@@ -89,7 +92,7 @@ selector:
   `-success` and `-warning`. `compat.scss` maps each of them (and the matching
   `$shadow_container_*`) to the same-named token with the legacy value as the
   fallback, following the role rule `$shadow_<x>` → `shadow/<x>`, so both
-  spellings resolve to `var(--shadow-<x>, <legacy value>)`. The one renamed role
+  spellings resolve to `var(--ins-shadow-<x>, <legacy value>)`. The one renamed role
   is `danger`: `$shadow_danger` and `$shadow_container_danger` map to
   `shadow/error`.
   In `ab-components` the `additionalData` order must be:
@@ -148,6 +151,18 @@ commit the `*-linux.png` files from the `visual-baselines` artifact to
 
 ## Release
 
+### 0.3.0 changes (breaking)
+
+- Every custom property is now prefixed with `ins-`: `--background-primary` →
+  `--ins-background-primary`. `tokens.css`, `_tokens.scss` and `_compat.scss`
+  change together, so a consumer that only uses the SCSS variables or the compat
+  layer needs no source change. A hand-written `var(--<token>)` must add the
+  prefix. Token keys, values, `tokens.json` and the SCSS variable names are
+  unchanged.
+- Why: an unprefixed name could be defined by a partner page (for example
+  `:root { --border-primary: … }`) and override the fallback colour of an
+  editor rendered on that page while the rebranding is off.
+
 ### 0.2.2 changes
 
 - No token or artifact change: the published files are identical to 0.2.1.

package/dist/_compat.scss

@@ -1,41 +1,41 @@
 // @useinsider/design-tokens compat layer: generated by scripts/build.mjs. Do not edit.
 // Maps legacy ab-components variables to design tokens; the second var() argument is the legacy value.
 // Sass treats "-" and "_" as the same character, so each $shadow_<x> here is the same variable as
-// $shadow-<x> in _tokens.scss; both resolve to var(--shadow-<x>, <legacy value>) when compat comes last.
+// $shadow-<x> in _tokens.scss; both resolve to var(--ins-shadow-<x>, <legacy value>) when compat comes last.
 
-$form_color_background_warning: var(--background-state-warning, #ffbf00);
-$chip_color_background_stroke_smart: var(--background-smart, #f0e6ff);
-$form_color_border_warning: var(--border-state-warning, #ffbf00);
-$chip_color_text_stroke_default: var(--text-default, #0a2ecc);
-$form_color_text_disabled: var(--text-state-disabled, #989898);
-$form_color_border_default: var(--border-default, #e1e1e1);
-$form_color_background_disabled: var(--background-state-disabled, #e1e1e1);
-$feedback_color_background_success: var(--background-state-success, #128745);
-$form_color_icon_disabled: var(--icon-state-disabled, #989898);
-$chip_color_text_stroke_warning: var(--text-state-warning, #8f6b00);
-$action_color_background_primary_default: var(--background-primary, #0a2ecc);
-$action_color_background_secondary_default: var(--background-secondary, #dcdfe6);
-$form_color_border_error: var(--border-state-error, #dc2a2a);
-$form_color_text_error: var(--text-state-error, #dc2a2a);
-$action_color_text_success_default: var(--text-state-success, #128745);
-$action_color_background_primary-subtle_default: var(--background-primary-subtle, #dae1fb);
-$feedback_color_background_information: var(--background-state-info, #258dde);
-$feedback_color_background_success-subtle: var(--background-state-success-subtle, #eefff5);
-$feedback_color_background_warning-subtle: var(--background-state-warning-subtle, #fffaeb);
-$chip_color_border_smart: var(--border-smart, #b486f4);
-$shadow_elevation: var(--shadow-elevation, 0px 4px 12px 0px #2c354626);
-$shadow_container_default: var(--shadow-elevation, 0px 4px 12px 0px #39393926);
-$shadow_primary: var(--shadow-primary, 0px 0px 0px 3px #b5c1f1);
-$shadow_container_primary: var(--shadow-primary, 0px 0px 0px 3px #b5c1f1);
-$shadow_secondary: var(--shadow-secondary, 0px 0px 0px 3px #b1b7c4);
-$shadow_warning: var(--shadow-warning, 0px 0px 0px 3px #ffe187);
-$shadow_success: var(--shadow-success, 0px 0px 0px 3px #6dc993);
-$shadow_create: var(--shadow-create, 0px 0px 0px 3px #b486f4);
-$shadow_magenta: var(--shadow-magenta, 0px 0px 0px 3px #FFA6C8);
-$shadow_container_secondary: var(--shadow-secondary, 0px 0px 0px 3px #b1b7c4);
-$shadow_container_create: var(--shadow-create, 0px 0px 0px 3px #b486f4);
-$shadow_container_warning: var(--shadow-warning, 0px 0px 0px 3px #ffe187);
-$shadow_container_success: var(--shadow-success, 0px 0px 0px 3px #6dc993);
-$shadow_container_magenta: var(--shadow-magenta, 0px 0px 0px 3px #FFA6C8);
-$shadow_danger: var(--shadow-error, 0px 0px 0px 3px #f88e8c);
-$shadow_container_danger: var(--shadow-error, 0px 0px 0px 3px #f88e8c);
+$form_color_background_warning: var(--ins-background-state-warning, #ffbf00);
+$chip_color_background_stroke_smart: var(--ins-background-smart, #f0e6ff);
+$form_color_border_warning: var(--ins-border-state-warning, #ffbf00);
+$chip_color_text_stroke_default: var(--ins-text-default, #0a2ecc);
+$form_color_text_disabled: var(--ins-text-state-disabled, #989898);
+$form_color_border_default: var(--ins-border-default, #e1e1e1);
+$form_color_background_disabled: var(--ins-background-state-disabled, #e1e1e1);
+$feedback_color_background_success: var(--ins-background-state-success, #128745);
+$form_color_icon_disabled: var(--ins-icon-state-disabled, #989898);
+$chip_color_text_stroke_warning: var(--ins-text-state-warning, #8f6b00);
+$action_color_background_primary_default: var(--ins-background-primary, #0a2ecc);
+$action_color_background_secondary_default: var(--ins-background-secondary, #dcdfe6);
+$form_color_border_error: var(--ins-border-state-error, #dc2a2a);
+$form_color_text_error: var(--ins-text-state-error, #dc2a2a);
+$action_color_text_success_default: var(--ins-text-state-success, #128745);
+$action_color_background_primary-subtle_default: var(--ins-background-primary-subtle, #dae1fb);
+$feedback_color_background_information: var(--ins-background-state-info, #258dde);
+$feedback_color_background_success-subtle: var(--ins-background-state-success-subtle, #eefff5);
+$feedback_color_background_warning-subtle: var(--ins-background-state-warning-subtle, #fffaeb);
+$chip_color_border_smart: var(--ins-border-smart, #b486f4);
+$shadow_elevation: var(--ins-shadow-elevation, 0px 4px 12px 0px #2c354626);
+$shadow_container_default: var(--ins-shadow-elevation, 0px 4px 12px 0px #39393926);
+$shadow_primary: var(--ins-shadow-primary, 0px 0px 0px 3px #b5c1f1);
+$shadow_container_primary: var(--ins-shadow-primary, 0px 0px 0px 3px #b5c1f1);
+$shadow_secondary: var(--ins-shadow-secondary, 0px 0px 0px 3px #b1b7c4);
+$shadow_warning: var(--ins-shadow-warning, 0px 0px 0px 3px #ffe187);
+$shadow_success: var(--ins-shadow-success, 0px 0px 0px 3px #6dc993);
+$shadow_create: var(--ins-shadow-create, 0px 0px 0px 3px #b486f4);
+$shadow_magenta: var(--ins-shadow-magenta, 0px 0px 0px 3px #FFA6C8);
+$shadow_container_secondary: var(--ins-shadow-secondary, 0px 0px 0px 3px #b1b7c4);
+$shadow_container_create: var(--ins-shadow-create, 0px 0px 0px 3px #b486f4);
+$shadow_container_warning: var(--ins-shadow-warning, 0px 0px 0px 3px #ffe187);
+$shadow_container_success: var(--ins-shadow-success, 0px 0px 0px 3px #6dc993);
+$shadow_container_magenta: var(--ins-shadow-magenta, 0px 0px 0px 3px #FFA6C8);
+$shadow_danger: var(--ins-shadow-error, 0px 0px 0px 3px #f88e8c);
+$shadow_container_danger: var(--ins-shadow-error, 0px 0px 0px 3px #f88e8c);