diff --git a/token-sync/css/primitives.css b/token-sync/css/primitives.css index 2aad7573a0..b12f78b034 100644 --- a/token-sync/css/primitives.css +++ b/token-sync/css/primitives.css @@ -20,21 +20,21 @@ :root { --bpk-radius-none: 0; - --bpk-radius-full: 6.25rem; + --bpk-radius-full: 62.4375rem; --bpk-radius-lg: 1.5rem; --bpk-radius-md: 0.75rem; --bpk-radius-nav-tabs: 1.125rem; --bpk-radius-sm: 0.5rem; --bpk-radius-xs: 0.25rem; - --bpk-spacing-base: 1rem; - --bpk-spacing-lg: 1.5rem; - --bpk-spacing-md: 0.5rem; + --bpk-spacing-base: 16; + --bpk-spacing-lg: 24; + --bpk-spacing-md: 8; --bpk-spacing-none: 0; - --bpk-spacing-sm: 0.25rem; - --bpk-spacing-xl: 2rem; - --bpk-spacing-xs: 0.125rem; - --bpk-spacing-xxl: 2.5rem; - --bpk-spacing-xxs: 0.0625rem; - --bpk-spacing-xxxl: 4rem; - --bpk-spacing-xxxxl: 6rem; + --bpk-spacing-sm: 4; + --bpk-spacing-xl: 32; + --bpk-spacing-xs: 2; + --bpk-spacing-xxl: 40; + --bpk-spacing-xxs: 1; + --bpk-spacing-xxxl: 64; + --bpk-spacing-xxxxl: 96; } diff --git a/token-sync/css/theme-backpack-dark.css b/token-sync/css/theme-backpack-dark.css index 471cd511b4..b4b6347a70 100644 --- a/token-sync/css/theme-backpack-dark.css +++ b/token-sync/css/theme-backpack-dark.css @@ -26,8 +26,8 @@ --bpk-private-badge-colour-bg-outline: rgba(255, 255, 255, 0); --bpk-private-badge-colour-bg-subtle: #243346; --bpk-private-badge-colour-stroke-outline: #ffffff; - --bpk-private-badge-dimension-padding-horizontal-default: 0.5rem; - --bpk-private-badge-dimension-padding-horizontal-subtle: 0.5rem; + --bpk-private-badge-dimension-padding-horizontal-default: 8; + --bpk-private-badge-dimension-padding-horizontal-subtle: 8; --bpk-private-badge-typography-tmp-badge-label: 0.875rem; --bpk-private-badge-typography-tmp-badge-line-height: 0; --bpk-private-button-colour-bg-destructive: #e0e4e9; @@ -58,12 +58,22 @@ --bpk-private-button-dimension-min-height-default: 2.25rem; --bpk-private-button-dimension-min-height-large: 3rem; --bpk-private-button-dimension-min-weight-large: 3rem; - --bpk-private-button-dimension-padding-horizontal-default: 1rem; - --bpk-private-button-dimension-padding-horizontal-large: 1rem; + --bpk-private-button-dimension-padding-horizontal-default: 16; + --bpk-private-button-dimension-padding-horizontal-large: 16; --bpk-private-button-typography-tmp-default-label: 1rem; --bpk-private-card-button-contained-fill: rgba(255, 255, 255, 0.1); --bpk-private-carousel-trigger-bg-default: rgba(255, 255, 255, 0.5); --bpk-private-carousel-trigger-bg-default-hover: rgba(255, 255, 255, 0.8); + --bpk-private-checkbox-bg-default-checked: #84e9ff; + --bpk-private-checkbox-bg-default-intermediate: #84e9ff; + --bpk-private-checkbox-bg-on-contrast-checked: #84e9ff; + --bpk-private-checkbox-bg-on-contrast-intermediate: #84e9ff; + --bpk-private-checkbox-border-default-disabled: rgba(255, 255, 255, 0.2); + --bpk-private-checkbox-border-default-not-checked: rgba(255, 255, 255, 0.5); + --bpk-private-checkbox-border-on-contrast-disabled: rgba(255, 255, 255, 0.2); + --bpk-private-checkbox-border-on-contrast-not-checked: rgba(255, 255, 255, 0.5); + --bpk-private-checkbox-icon-on-contrast: #161616; + --bpk-private-checkbox-stroke: 0.1875rem; --bpk-private-chip-group-filter-colour-bg-icon-hover-on-image: #010913; --bpk-private-chip-group-filter-colour-bg-icon-off-on-image: #131d2b; --bpk-private-chip-group-filter-colour-bg-icon-on-default: #054184; @@ -90,7 +100,7 @@ --bpk-private-chip-colour-border-default-off: rgba(255, 255, 255, 0.2); --bpk-private-chip-colour-border-on-contrast-off: #131d2b; --bpk-private-chip-colour-border-on-contrast-on: #131d2b; - --bpk-private-chip-colour-border-on-dark-disimissible-hover: #131d2b; + --bpk-private-chip-colour-border-on-dark-dismissible-hover: #131d2b; --bpk-private-chip-colour-border-on-dark-hover: #ffffff; --bpk-private-chip-colour-border-on-dark-off: rgba(255, 255, 255, 0.2); --bpk-private-chip-colour-stroke-off-on-canvas-contrast-new: rgba(255, 255, 255, 0); @@ -100,13 +110,12 @@ --bpk-private-chip-colour-text-on-image: #ffffff; --bpk-private-chip-colour-text-on-image-dismissible-icon: #bdc4cb; --bpk-private-chip-colour-text-on-dark: #ffffff; - --bpk-private-chip-colour-text-on-dark-dismisisble-hover: #ffffff; - --bpk-private-chip-colour-text-on-dark-dismisisble-icon: #bdc4cb; + --bpk-private-chip-colour-text-on-dark-dismissible-hover: #ffffff; + --bpk-private-chip-colour-text-on-dark-dismissible-icon: #bdc4cb; --bpk-private-chip-dimension-min-height-width: 2rem; --bpk-private-chip-dimension-radius: 0.5rem; --bpk-private-date-selector-cheapest-month-highlight: #ffffff; --bpk-private-date-selector-flexible-date-card: #243346; - --bpk-private-dimension-padding-veritcal: 0; --bpk-private-info-banner-default: #131d2b; --bpk-private-info-banner-on-contrast: #131d2b; --bpk-private-map-cluster-pin: #ffffff; @@ -117,11 +126,24 @@ --bpk-private-navigation-tabs-hover: #002b4b; --bpk-private-navigation-tabs-outline: rgba(255, 255, 255, 0.2); --bpk-private-navigation-tabs-selected: #054184; + --bpk-private-radio-bg-default-disabled: rgba(255, 255, 255, 0.5); + --bpk-private-radio-bg-default-on: #84e9ff; + --bpk-private-radio-bg-on-contrast-off: rgba(255, 255, 255, 0); + --bpk-private-radio-bg-on-contrast-on: #84e9ff; + --bpk-private-radio-border: 0.1875rem; + --bpk-private-radio-border-default-off: rgba(255, 255, 255, 0.5); --bpk-private-rating-bar-default: #243346; --bpk-private-rating-bar-on-contrast: #243346; - --bpk-private-segmented-control-canvas-default: #131d2b; - --bpk-private-segmented-control-surface-contrast: #131d2b; - --bpk-private-segmented-control-surface-contrast-on: #054184; + --bpk-private-segmented-control-colour-bg-on-canvas-default-default: #131d2b; + --bpk-private-segmented-control-colour-bg-on-surface-contrast-default: #131d2b; + --bpk-private-segmented-control-colour-bg-on-surface-contrast-selected: #054184; + --bpk-private-segmented-control-colour-bg-selected: #054184; + --bpk-private-segmented-control-colour-divider-default: #e0e4e9; + --bpk-private-segmented-control-colour-divider-on-surface-contrast: rgba(255, 255, 255, 0.2); + --bpk-private-segmented-control-dimension-bg-indicator-radius: 0; + --bpk-private-segmented-control-dimension-bg-track-radius: 0.5rem; + --bpk-private-segmented-control-dimension-min-height: 2rem; + --bpk-private-segmented-control-dimension-track-padding: 0; --bpk-private-shadow-large-blur: 0.875rem; --bpk-private-shadow-large-color: rgba(22, 22, 22, 0.25); --bpk-private-shadow-large-position-x: 0; @@ -149,21 +171,22 @@ --bpk-other-overlay: rgba(255, 255, 255, 0.8); --bpk-other-scrim: rgba(0, 0, 0, 0.7); --bpk-other-shadow: rgba(22, 22, 22, 0.25); - --bpk-status-danger-fill: #ffcadd; --bpk-status-danger-spot: #ff649c; - --bpk-status-success-fill: #b1ffe7; --bpk-status-success-spot: #62f1c6; - --bpk-status-warning-fill: #fbf1bb; --bpk-status-warning-spot: #feeb87; --bpk-surface-contrast: #010913; + --bpk-surface-danger-fill: #ffcadd; --bpk-surface-default: #131d2b; --bpk-surface-elevated: #243346; --bpk-surface-hero: #010913; --bpk-surface-highlight: #243346; --bpk-surface-low-contrast: #243346; --bpk-surface-subtle: #243346; + --bpk-surface-success-fill: #b1ffe7; --bpk-surface-tint: rgba(255, 255, 255, 0.1); + --bpk-surface-warning-fill: #fbf1bb; --bpk-surface-promo: #243346; + --bpk-test: #ff0000; --bpk-text-disabled: rgba(255, 255, 255, 0.2); --bpk-text-disabled-on-dark: rgba(255, 255, 255, 0.5); --bpk-text-error: #ff649c; diff --git a/token-sync/css/theme-backpack-light.css b/token-sync/css/theme-backpack-light.css index cf265cbd01..b175c9931f 100644 --- a/token-sync/css/theme-backpack-light.css +++ b/token-sync/css/theme-backpack-light.css @@ -26,8 +26,8 @@ --bpk-private-badge-colour-bg-outline: rgba(255, 255, 255, 0); --bpk-private-badge-colour-bg-subtle: #eff3f8; --bpk-private-badge-colour-stroke-outline: #ffffff; - --bpk-private-badge-dimension-padding-horizontal-default: 0.5rem; - --bpk-private-badge-dimension-padding-horizontal-subtle: 0.5rem; + --bpk-private-badge-dimension-padding-horizontal-default: 8; + --bpk-private-badge-dimension-padding-horizontal-subtle: 8; --bpk-private-badge-typography-tmp-badge-label: 0.875rem; --bpk-private-badge-typography-tmp-badge-line-height: 0; --bpk-private-button-colour-bg-destructive: #e0e4e9; @@ -64,6 +64,16 @@ --bpk-private-card-button-contained-fill: rgba(255, 255, 255, 0.8); --bpk-private-carousel-trigger-bg-default: rgba(255, 255, 255, 0.5); --bpk-private-carousel-trigger-bg-default-hover: rgba(255, 255, 255, 0.8); + --bpk-private-checkbox-bg-default-checked: #0062e3; + --bpk-private-checkbox-bg-default-intermediate: #0062e3; + --bpk-private-checkbox-bg-on-contrast-checked: #0062e3; + --bpk-private-checkbox-bg-on-contrast-intermediate: #0062e3; + --bpk-private-checkbox-border-default-disabled: #e0e4e9; + --bpk-private-checkbox-border-default-not-checked: #626971; + --bpk-private-checkbox-border-on-contrast-disabled: rgba(255, 255, 255, 0.2); + --bpk-private-checkbox-border-on-contrast-not-checked: rgba(255, 255, 255, 0.5); + --bpk-private-checkbox-icon-on-contrast: #ffffff; + --bpk-private-checkbox-stroke: 0.1875rem; --bpk-private-chip-group-filter-colour-bg-icon-hover-on-image: #eff3f8; --bpk-private-chip-group-filter-colour-bg-icon-off-on-image: #ffffff; --bpk-private-chip-group-filter-colour-bg-icon-on-default: #05203c; @@ -90,7 +100,7 @@ --bpk-private-chip-colour-border-default-off: #c1c7cf; --bpk-private-chip-colour-border-on-contrast-off: #ffffff; --bpk-private-chip-colour-border-on-contrast-on: #05203c; - --bpk-private-chip-colour-border-on-dark-disimissible-hover: #ffffff; + --bpk-private-chip-colour-border-on-dark-dismissible-hover: #ffffff; --bpk-private-chip-colour-border-on-dark-hover: #ffffff; --bpk-private-chip-colour-border-on-dark-off: rgba(255, 255, 255, 0.5); --bpk-private-chip-colour-stroke-off-on-canvas-contrast-new: rgba(255, 255, 255, 0); @@ -100,13 +110,12 @@ --bpk-private-chip-colour-text-on-image: #ffffff; --bpk-private-chip-colour-text-on-image-dismissible-icon: #626971; --bpk-private-chip-colour-text-on-dark: #161616; - --bpk-private-chip-colour-text-on-dark-dismisisble-hover: #161616; - --bpk-private-chip-colour-text-on-dark-dismisisble-icon: #626971; + --bpk-private-chip-colour-text-on-dark-dismissible-hover: #161616; + --bpk-private-chip-colour-text-on-dark-dismissible-icon: #626971; --bpk-private-chip-dimension-min-height-width: 2rem; --bpk-private-chip-dimension-radius: 0.5rem; --bpk-private-date-selector-cheapest-month-highlight: #154679; --bpk-private-date-selector-flexible-date-card: #eff3f8; - --bpk-private-dimension-padding-veritcal: 0; --bpk-private-info-banner-default: #eff3f8; --bpk-private-info-banner-on-contrast: #ffffff; --bpk-private-map-cluster-pin: #05203c; @@ -117,11 +126,24 @@ --bpk-private-navigation-tabs-hover: #154679; --bpk-private-navigation-tabs-outline: rgba(255, 255, 255, 0.2); --bpk-private-navigation-tabs-selected: #024daf; + --bpk-private-radio-bg-default-disabled: #c1c7cf; + --bpk-private-radio-bg-default-on: #0062e3; + --bpk-private-radio-bg-on-contrast-off: #ffffff; + --bpk-private-radio-bg-on-contrast-on: #ffffff; + --bpk-private-radio-border: 0.1875rem; + --bpk-private-radio-border-default-off: #626971; --bpk-private-rating-bar-default: #e0e4e9; --bpk-private-rating-bar-on-contrast: #ffffff; - --bpk-private-segmented-control-canvas-default: #eff3f8; - --bpk-private-segmented-control-surface-contrast: rgba(255, 255, 255, 0.1); - --bpk-private-segmented-control-surface-contrast-on: #024daf; + --bpk-private-segmented-control-colour-bg-on-canvas-default-default: #eff3f8; + --bpk-private-segmented-control-colour-bg-on-surface-contrast-default: rgba(255, 255, 255, 0.1); + --bpk-private-segmented-control-colour-bg-on-surface-contrast-selected: #024daf; + --bpk-private-segmented-control-colour-bg-selected: #05203c; + --bpk-private-segmented-control-colour-divider-default: #e0e4e9; + --bpk-private-segmented-control-colour-divider-on-surface-contrast: rgba(255, 255, 255, 0.2); + --bpk-private-segmented-control-dimension-bg-indicator-radius: 0; + --bpk-private-segmented-control-dimension-bg-track-radius: 0.5rem; + --bpk-private-segmented-control-dimension-min-height: 2rem; + --bpk-private-segmented-control-dimension-track-padding: 0; --bpk-private-shadow-large-blur: 0.875rem; --bpk-private-shadow-large-color: rgba(22, 22, 22, 0.25); --bpk-private-shadow-large-position-x: 0; @@ -149,21 +171,22 @@ --bpk-other-overlay: rgba(0, 0, 0, 0.2); --bpk-other-scrim: rgba(0, 0, 0, 0.7); --bpk-other-shadow: rgba(22, 22, 22, 0.25); - --bpk-status-danger-fill: #ffe9f9; --bpk-status-danger-spot: #e70866; - --bpk-status-success-fill: #d4fff2; --bpk-status-success-spot: #0c838a; - --bpk-status-warning-fill: #fff7cf; --bpk-status-warning-spot: #f55d42; --bpk-surface-contrast: #05203c; + --bpk-surface-danger-fill: #ffe9f9; --bpk-surface-default: #ffffff; --bpk-surface-elevated: #ffffff; --bpk-surface-hero: #0062e3; --bpk-surface-highlight: #e0e4e9; --bpk-surface-low-contrast: #f7f9fb; --bpk-surface-subtle: #e3f0ff; + --bpk-surface-success-fill: #d4fff2; --bpk-surface-tint: rgba(255, 255, 255, 0.1); + --bpk-surface-warning-fill: #fff7cf; --bpk-surface-promo: #0062e3; + --bpk-test: #ff0000; --bpk-text-disabled: rgba(0, 0, 0, 0.2); --bpk-text-disabled-on-dark: rgba(255, 255, 255, 0.5); --bpk-text-error: #e70866; diff --git a/token-sync/tokens/backpack.dark.json b/token-sync/tokens/backpack.dark.json index 89847ac8c5..ed4145c199 100644 --- a/token-sync/tokens/backpack.dark.json +++ b/token-sync/tokens/backpack.dark.json @@ -166,6 +166,48 @@ }, "$type": "color" }, + "Checkbox": { + "bg-default-checked": { + "$value": "{Colour.Bright Blue}", + "$type": "color" + }, + "bg-default-intermediate": { + "$value": "{Colour.Bright Blue}", + "$type": "color" + }, + "bg-onContrast-checked": { + "$value": "{Colour.Bright Blue}", + "$type": "color" + }, + "bg-onContrast-intermediate": { + "$value": "{Colour.Bright Blue}", + "$type": "color" + }, + "border-default-disabled": { + "$value": "{Alpha.White Alpha 20}", + "$type": "color" + }, + "border-default-notChecked": { + "$value": "{Alpha.White Alpha 50}", + "$type": "color" + }, + "border-onContrast-disabled": { + "$value": "{Alpha.White Alpha 20}", + "$type": "color" + }, + "border-onContrast-notChecked": { + "$value": "{Alpha.White Alpha 50}", + "$type": "color" + }, + "icon-onContrast": { + "$value": "{Neutral.Charcoal}", + "$type": "color" + }, + "stroke": { + "$value": "3px", + "$type": "dimension" + } + }, "Chip-group-filter": { "Colour": { "bg-icon-hover-on-image": { @@ -254,7 +296,7 @@ "border-onContrast-on": { "$value": "{Neutral.Dark Grey 20}" }, - "border-onDark-disimissible-hover": { + "border-onDark-dismissible-hover": { "$value": "{Neutral.Dark Grey 20}" }, "border-onDark-hover": { @@ -284,10 +326,10 @@ "text-onDark": { "$value": "{Neutral.White}" }, - "text-onDark-dismisisble-hover": { + "text-onDark-dismissible-hover": { "$value": "{Neutral.White}" }, - "text-onDark-dismisisble-icon": { + "text-onDark-dismissible-icon": { "$value": "{Neutral.Dark Grey 40}" }, "$type": "color" @@ -311,12 +353,6 @@ }, "$type": "color" }, - "Dimension": { - "padding-veritcal": { - "$value": "0px" - }, - "$type": "dimension" - }, "Info Banner": { "default": { "$value": "{Neutral.Dark Grey 20}" @@ -356,6 +392,32 @@ }, "$type": "color" }, + "Radio": { + "bg-default-disabled": { + "$value": "{Alpha.White Alpha 50}", + "$type": "color" + }, + "bg-default-on": { + "$value": "{Colour.Bright Blue}", + "$type": "color" + }, + "bg-onContrast-off": { + "$value": "{Alpha.Transparent}", + "$type": "color" + }, + "bg-onContrast-on": { + "$value": "{Colour.Bright Blue}", + "$type": "color" + }, + "border": { + "$value": "3px", + "$type": "dimension" + }, + "border-default-off": { + "$value": "{Alpha.White Alpha 50}", + "$type": "color" + } + }, "Rating Bar": { "Default": { "$value": "{Neutral.Dark Grey 25}" @@ -366,16 +428,42 @@ "$type": "color" }, "Segmented Control": { - "canvas-default": { - "$value": "{Neutral.Dark Grey 20}" - }, - "surface-contrast": { - "$value": "{Neutral.Dark Grey 20}" - }, - "surface-contrast-on": { - "$value": "{Colour.Twilight}" + "Colour": { + "bg-onCanvasDefault-default": { + "$value": "{Neutral.Dark Grey 20}" + }, + "bg-onSurfaceContrast-default": { + "$value": "{Neutral.Dark Grey 20}" + }, + "bg-onSurfaceContrast-selected": { + "$value": "{Colour.Twilight}" + }, + "bg-selected": { + "$value": "{Colour.Twilight}" + }, + "divider-default": { + "$value": "{Neutral.Grey 20}" + }, + "divider-onSurfaceContrast": { + "$value": "{Alpha.White Alpha 20}" + }, + "$type": "color" }, - "$type": "color" + "Dimension": { + "bg-indicator-radius": { + "$value": "{Radius.None}" + }, + "bg-track-radius": { + "$value": "{Radius.sm}" + }, + "min-height": { + "$value": "{Heights.32}" + }, + "track-padding": { + "$value": "{Spacing.none}" + }, + "$type": "dimension" + } }, "Shadow": { "Large": { @@ -526,21 +614,12 @@ "$type": "color" }, "Status": { - "Danger Fill": { - "$value": "{Colour.Bright Pink}" - }, "Danger Spot": { "$value": "{Colour.Bright Berry}" }, - "Success Fill": { - "$value": "{Colour.Bright Green 20}" - }, "Success Spot": { "$value": "{Colour.Bright Green}" }, - "Warning Fill": { - "$value": "{Colour.Bright Yellow}" - }, "Warning Spot": { "$value": "{Colour.Yellow}" }, @@ -550,6 +629,9 @@ "Contrast": { "$value": "{Neutral.Dark Grey 10}" }, + "Danger Fill": { + "$value": "{Colour.Bright Pink}" + }, "Default": { "$value": "{Neutral.Dark Grey 20}" }, @@ -568,14 +650,24 @@ "Subtle": { "$value": "{Neutral.Dark Grey 25}" }, + "Success Fill": { + "$value": "{Colour.Bright Green 20}" + }, "Tint": { "$value": "{Alpha.White Alpha 10}" }, + "Warning Fill": { + "$value": "{Colour.Bright Yellow}" + }, "🚧 Promo": { "$value": "{Neutral.Dark Grey 25}" }, "$type": "color" }, + "Test": { + "$value": "#ff0000", + "$type": "color" + }, "Text": { "Disabled": { "$value": "{Alpha.White Alpha 20}" diff --git a/token-sync/tokens/backpack.light.json b/token-sync/tokens/backpack.light.json index 195c961cde..95cb3c6801 100644 --- a/token-sync/tokens/backpack.light.json +++ b/token-sync/tokens/backpack.light.json @@ -166,6 +166,48 @@ }, "$type": "color" }, + "Checkbox": { + "bg-default-checked": { + "$value": "{Colour.Sky Blue}", + "$type": "color" + }, + "bg-default-intermediate": { + "$value": "{Colour.Sky Blue}", + "$type": "color" + }, + "bg-onContrast-checked": { + "$value": "{Colour.Sky Blue}", + "$type": "color" + }, + "bg-onContrast-intermediate": { + "$value": "{Colour.Sky Blue}", + "$type": "color" + }, + "border-default-disabled": { + "$value": "{Neutral.Grey 20}", + "$type": "color" + }, + "border-default-notChecked": { + "$value": "{Neutral.Grey 40}", + "$type": "color" + }, + "border-onContrast-disabled": { + "$value": "{Alpha.White Alpha 20}", + "$type": "color" + }, + "border-onContrast-notChecked": { + "$value": "{Alpha.White Alpha 50}", + "$type": "color" + }, + "icon-onContrast": { + "$value": "{Neutral.White}", + "$type": "color" + }, + "stroke": { + "$value": "3px", + "$type": "dimension" + } + }, "Chip-group-filter": { "Colour": { "bg-icon-hover-on-image": { @@ -254,7 +296,7 @@ "border-onContrast-on": { "$value": "{Colour.Dark Sky}" }, - "border-onDark-disimissible-hover": { + "border-onDark-dismissible-hover": { "$value": "{Neutral.White}" }, "border-onDark-hover": { @@ -284,10 +326,10 @@ "text-onDark": { "$value": "{Neutral.Charcoal}" }, - "text-onDark-dismisisble-hover": { + "text-onDark-dismissible-hover": { "$value": "{Neutral.Charcoal}" }, - "text-onDark-dismisisble-icon": { + "text-onDark-dismissible-icon": { "$value": "{Neutral.Grey 40}" }, "$type": "color" @@ -311,12 +353,6 @@ }, "$type": "color" }, - "Dimension": { - "padding-veritcal": { - "$value": "0px" - }, - "$type": "dimension" - }, "Info Banner": { "default": { "$value": "{Neutral.Grey 10}" @@ -356,6 +392,32 @@ }, "$type": "color" }, + "Radio": { + "bg-default-disabled": { + "$value": "{Neutral.Grey 30}", + "$type": "color" + }, + "bg-default-on": { + "$value": "{Colour.Sky Blue}", + "$type": "color" + }, + "bg-onContrast-off": { + "$value": "{Neutral.White}", + "$type": "color" + }, + "bg-onContrast-on": { + "$value": "{Neutral.White}", + "$type": "color" + }, + "border": { + "$value": "3px", + "$type": "dimension" + }, + "border-default-off": { + "$value": "{Neutral.Grey 40}", + "$type": "color" + } + }, "Rating Bar": { "Default": { "$value": "{Neutral.Grey 20}" @@ -366,16 +428,42 @@ "$type": "color" }, "Segmented Control": { - "canvas-default": { - "$value": "{Neutral.Grey 10}" - }, - "surface-contrast": { - "$value": "{Alpha.White Alpha 10}" - }, - "surface-contrast-on": { - "$value": "{Colour.Sky Blue 85}" + "Colour": { + "bg-onCanvasDefault-default": { + "$value": "{Neutral.Grey 10}" + }, + "bg-onSurfaceContrast-default": { + "$value": "{Alpha.White Alpha 10}" + }, + "bg-onSurfaceContrast-selected": { + "$value": "{Colour.Sky Blue 85}" + }, + "bg-selected": { + "$value": "{Colour.Dark Sky}" + }, + "divider-default": { + "$value": "{Neutral.Grey 20}" + }, + "divider-onSurfaceContrast": { + "$value": "{Alpha.White Alpha 20}" + }, + "$type": "color" }, - "$type": "color" + "Dimension": { + "bg-indicator-radius": { + "$value": "{Radius.None}" + }, + "bg-track-radius": { + "$value": "{Radius.sm}" + }, + "min-height": { + "$value": "{Heights.32}" + }, + "track-padding": { + "$value": "{Spacing.none}" + }, + "$type": "dimension" + } }, "Shadow": { "Large": { @@ -526,21 +614,12 @@ "$type": "color" }, "Status": { - "Danger Fill": { - "$value": "{Colour.Muted Pink}" - }, "Danger Spot": { "$value": "{Colour.Berry}" }, - "Success Fill": { - "$value": "{Colour.Muted Green}" - }, "Success Spot": { "$value": "{Colour.Green}" }, - "Warning Fill": { - "$value": "{Colour.Muted Yellow}" - }, "Warning Spot": { "$value": "{Colour.Amber}" }, @@ -550,6 +629,9 @@ "Contrast": { "$value": "{Colour.Dark Sky}" }, + "Danger Fill": { + "$value": "{Colour.Muted Pink}" + }, "Default": { "$value": "{Neutral.White}" }, @@ -568,14 +650,24 @@ "Subtle": { "$value": "{Colour.Baby Blue}" }, + "Success Fill": { + "$value": "{Colour.Muted Green}" + }, "Tint": { "$value": "{Alpha.White Alpha 10}" }, + "Warning Fill": { + "$value": "{Colour.Muted Yellow}" + }, "🚧 Promo": { "$value": "{Colour.Sky Blue}" }, "$type": "color" }, + "Test": { + "$value": "#ff0000", + "$type": "color" + }, "Text": { "Disabled": { "$value": "{Alpha.Black Alpha 20}" diff --git a/token-sync/tokens/manifest.json b/token-sync/tokens/manifest.json index c88ff0b01a..88e699ebc7 100644 --- a/token-sync/tokens/manifest.json +++ b/token-sync/tokens/manifest.json @@ -1,13 +1,13 @@ { - "generatedAt": "2026-05-08T08:12:33.041Z", + "generatedAt": "2026-05-24T12:52:17.687Z", "files": [ { "fileName": "backpack.light.json", "collectionName": "Backpack", "modeName": "Light", "role": "semantic", - "variableCount": 175, - "preservedAliasCount": 113, + "variableCount": 198, + "preservedAliasCount": 134, "inlinedAliasCount": 36, "skippedVariableCount": 4 }, @@ -16,8 +16,8 @@ "collectionName": "Backpack", "modeName": "Dark", "role": "semantic", - "variableCount": 175, - "preservedAliasCount": 116, + "variableCount": 198, + "preservedAliasCount": 137, "inlinedAliasCount": 33, "skippedVariableCount": 4 }, diff --git a/token-sync/tokens/primitives.json b/token-sync/tokens/primitives.json index 9797cf74d7..c47c0bc9ad 100644 --- a/token-sync/tokens/primitives.json +++ b/token-sync/tokens/primitives.json @@ -278,7 +278,7 @@ "$value": "0px" }, "full": { - "$value": "100px" + "$value": "999px" }, "lg": { "$value": "24px" @@ -299,38 +299,38 @@ }, "Spacing": { "base": { - "$value": "16px" + "$value": 16 }, "lg": { - "$value": "24px" + "$value": 24 }, "md": { - "$value": "8px" + "$value": 8 }, "none": { - "$value": "0px" + "$value": 0 }, "sm": { - "$value": "4px" + "$value": 4 }, "xl": { - "$value": "32px" + "$value": 32 }, "xs": { - "$value": "2px" + "$value": 2 }, "xxl": { - "$value": "40px" + "$value": 40 }, "xxs": { - "$value": "1px" + "$value": 1 }, "xxxl": { - "$value": "64px" + "$value": 64 }, "xxxxl": { - "$value": "96px" + "$value": 96 }, - "$type": "dimension" + "$type": "fontWeight" } }