Skip to content

Update Figma design tokens #4607

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
skyscanner-backpack-bot wants to merge 1 commit into from
Closed

Update Figma design tokens #4607

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions token-sync/css/primitives.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
51 changes: 37 additions & 14 deletions token-sync/css/theme-backpack-dark.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
47 changes: 35 additions & 12 deletions token-sync/css/theme-backpack-light.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
Loading
Loading