Skip to content

Commit

Permalink
style(color): remove 'default' suffix from color tokens (#2454)
Browse files Browse the repository at this point in the history 
BREAKING CHANGE:
Removed 'default' suffix from color tokens (e.g. `--sbb-color-iron-default` => `--sbb-color-iron` and `SbbColorIronDefault` => `SbbColorIron`).
  • Loading branch information
@TomMenga
TomMenga committed Mar 6, 2024
1 parent 131fab2 commit 77454de
Show file tree
Hide file tree
Showing 122 changed files with 504 additions and 564 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
"@lit/react": "^1.0.1",
"@open-wc/lit-helpers": "0.7.0",
"@open-wc/testing": "4.0.0",
"@sbb-esta/lyne-design-tokens": "0.3.9",
"@sbb-esta/lyne-design-tokens": "0.4.0",
"@storybook/addon-a11y": "7.6.17",
"@storybook/addon-actions": "7.6.17",
"@storybook/addon-essentials": "7.6.17",
Expand Down
2 changes: 1 addition & 1 deletion src/components/accordion/accordion.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ export const NoAnimation: StoryObj = {
};

const wrapperStyle = (context: StoryContext): Record<string, string> => ({
'background-color': context.args.borderless ? '#bdbdbd' : 'var(--sbb-color-white-default)',
'background-color': context.args.borderless ? '#bdbdbd' : 'var(--sbb-color-white)',
});

const meta: Meta = {
Expand Down
4 changes: 2 additions & 2 deletions src/components/alert/alert/alert.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ $open-anim-opacity-to: 1;

:host {
--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);
--sbb-alert-background-color: var(--sbb-color-midnight-default);
--sbb-alert-background-color: var(--sbb-color-midnight);
--sbb-alert-border-radius: var(--sbb-border-radius-4x);
--sbb-alert-color: var(--sbb-color-aluminium-default);
--sbb-alert-color: var(--sbb-color-aluminium);
--sbb-alert-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xs);
--sbb-alert-icon-size: #{sbb.px-to-rem-build(20)};
--sbb-alert-close-icon-size: var(--sbb-size-icon-ui-small);
Expand Down
10 changes: 4 additions & 6 deletions src/components/autocomplete/autocomplete.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,7 @@ import '../form-field';
import '../form-error';

const wrapperStyle = (context: StoryContext): Record<string, string> => ({
'background-color': context.args.negative
? 'var(--sbb-color-black-default)'
: 'var(--sbb-color-white-default)',
'background-color': context.args.negative ? 'var(--sbb-color-black)' : 'var(--sbb-color-white)',
});

const negative: InputType = {
Expand Down Expand Up @@ -229,8 +227,8 @@ const textBlockStyle: Args = {
position: 'relative',
marginBlockStart: '1rem',
padding: '1rem',
backgroundColor: 'var(--sbb-color-milk-default)',
border: 'var(--sbb-border-width-1x) solid var(--sbb-color-cloud-default)',
backgroundColor: 'var(--sbb-color-milk)',
border: 'var(--sbb-border-width-1x) solid var(--sbb-color-cloud)',
borderRadius: 'var(--sbb-border-radius-4x)',
zIndex: '100',
};
Expand Down Expand Up @@ -329,7 +327,7 @@ const MixedTemplate = (args: Args): TemplateResult => html`
<sbb-icon
slot="icon"
name=${args.iconName}
style=${styleMap({ color: 'var(--sbb-color-sky-default)' })}
style=${styleMap({ color: 'var(--sbb-color-sky)' })}
></sbb-icon>
Option Value
</sbb-option>
Expand Down
10 changes: 5 additions & 5 deletions src/components/breadcrumb/breadcrumb-group/breadcrumb-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,14 +33,14 @@
}

.sbb-breadcrumb-group__divider-icon {
color: var(--sbb-color-granite-default);
color: var(--sbb-color-granite);
}

#sbb-breadcrumb-ellipsis {
--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite-default);
--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);
--sbb-breadcrumb-group-ellipsis-background-color: transparent;
--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);
--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver-default);
--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);

@include sbb.button-reset;
@include sbb.text--bold;
Expand All @@ -65,8 +65,8 @@

@include sbb.hover-mq($hover: true) {
&:hover {
--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-charcoal-default);
--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-color-milk-default);
--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-charcoal);
--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-color-milk);

@include sbb.if-forced-colors {
--sbb-breadcrumb-group-ellipsis-border-color: Highlight;
Expand Down
6 changes: 3 additions & 3 deletions src/components/breadcrumb/breadcrumb/breadcrumb.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@
:host {
display: flex;

--sbb-breadcrumb-color: var(--sbb-color-granite-default);
--sbb-breadcrumb-color: var(--sbb-color-granite);
}

@include sbb.hover-mq($hover: true) {
:host(:hover) {
--sbb-breadcrumb-color: var(--sbb-color-charcoal-default);
--sbb-breadcrumb-color: var(--sbb-color-charcoal);
}
}

:host(:is(:active, [data-active])) {
--sbb-breadcrumb-color: var(--sbb-color-anthracite-default);
--sbb-breadcrumb-color: var(--sbb-color-anthracite);
}

// Hide focus outline when focus origin is mouse or touch. This is being used as a workaround in various components.
Expand Down
2 changes: 1 addition & 1 deletion src/components/button/common/button-common-stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { html, unsafeStatic } from 'lit/static-html.js';
import { sbbSpread } from '../../core/dom';

export const wrapperStyle = (context: StoryContext): Record<string, string> => ({
'background-color': context.args.negative ? '#484040' : 'var(--sbb-color-white-default)',
'background-color': context.args.negative ? '#484040' : 'var(--sbb-color-white)',
});

export const focusStyle = (context: StoryContext): Record<string, string> =>
Expand Down
124 changes: 62 additions & 62 deletions src/components/button/common/button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,18 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
--sbb-button-icon-size: var(--sbb-size-icon-ui-small);

// we use primary button styles as default values
--sbb-button-color-active-background: var(--sbb-color-red150-default);
--sbb-button-color-active-border: var(--sbb-color-red150-default);
--sbb-button-color-active-text: var(--sbb-color-cloud-default);
--sbb-button-color-default-background: var(--sbb-color-red-default);
--sbb-button-color-default-border: var(--sbb-color-red-default);
--sbb-button-color-default-text: var(--sbb-color-white-default);
--sbb-button-color-disabled-background: var(--sbb-color-milk-default);
--sbb-button-color-disabled-border: var(--sbb-color-cloud-default);
--sbb-button-color-disabled-text: var(--sbb-color-granite-default);
--sbb-button-color-hover-background: var(--sbb-color-red125-default);
--sbb-button-color-hover-border: var(--sbb-color-red125-default);
--sbb-button-color-hover-text: var(--sbb-color-milk-default);
--sbb-button-color-active-background: var(--sbb-color-red150);
--sbb-button-color-active-border: var(--sbb-color-red150);
--sbb-button-color-active-text: var(--sbb-color-cloud);
--sbb-button-color-default-background: var(--sbb-color-red);
--sbb-button-color-default-border: var(--sbb-color-red);
--sbb-button-color-default-text: var(--sbb-color-white);
--sbb-button-color-disabled-background: var(--sbb-color-milk);
--sbb-button-color-disabled-border: var(--sbb-color-cloud);
--sbb-button-color-disabled-text: var(--sbb-color-granite);
--sbb-button-color-hover-background: var(--sbb-color-red125);
--sbb-button-color-hover-border: var(--sbb-color-red125);
--sbb-button-color-hover-text: var(--sbb-color-milk);
--sbb-button-shadow-1-offset-y: var(--sbb-shadow-elevation-level-3-shadow-1-offset-y);
--sbb-button-shadow-2-offset-y: var(--sbb-shadow-elevation-level-3-shadow-2-offset-y);
--sbb-button-shadow-1-blur: var(--sbb-shadow-elevation-level-3-shadow-1-blur);
Expand Down Expand Up @@ -55,87 +55,87 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
}

:host([negative]) {
--sbb-button-color-disabled-background: var(--sbb-color-anthracite-default);
--sbb-button-color-disabled-border: var(--sbb-color-granite-default);
--sbb-button-color-disabled-text: var(--sbb-color-aluminium-default);
--sbb-button-color-disabled-background: var(--sbb-color-anthracite);
--sbb-button-color-disabled-border: var(--sbb-color-granite);
--sbb-button-color-disabled-text: var(--sbb-color-aluminium);
}

:host([variant='primary'][negative]) {
--sbb-button-color-active-background: var(--sbb-color-cloud-default);
--sbb-button-color-active-border: var(--sbb-color-cloud-default);
--sbb-button-color-active-text: var(--sbb-color-red150-default);
--sbb-button-color-default-background: var(--sbb-color-white-default);
--sbb-button-color-default-border: var(--sbb-color-white-default);
--sbb-button-color-default-text: var(--sbb-color-red-default);
--sbb-button-color-hover-background: var(--sbb-color-milk-default);
--sbb-button-color-hover-border: var(--sbb-color-milk-default);
--sbb-button-color-hover-text: var(--sbb-color-red125-default);
--sbb-button-color-active-background: var(--sbb-color-cloud);
--sbb-button-color-active-border: var(--sbb-color-cloud);
--sbb-button-color-active-text: var(--sbb-color-red150);
--sbb-button-color-default-background: var(--sbb-color-white);
--sbb-button-color-default-border: var(--sbb-color-white);
--sbb-button-color-default-text: var(--sbb-color-red);
--sbb-button-color-hover-background: var(--sbb-color-milk);
--sbb-button-color-hover-border: var(--sbb-color-milk);
--sbb-button-color-hover-text: var(--sbb-color-red125);
--sbb-button-shadow-1-color: var(--sbb-color-smoke-alpha-20);
--sbb-button-shadow-2-color: var(--sbb-color-metal-alpha-20);
}

:host([variant='secondary']) {
--sbb-button-color-active-background: var(--sbb-color-milk-default);
--sbb-button-color-active-border: var(--sbb-color-cloud-default);
--sbb-button-color-active-text: var(--sbb-color-anthracite-default);
--sbb-button-color-default-background: var(--sbb-color-white-default);
--sbb-button-color-default-border: var(--sbb-color-cloud-default);
--sbb-button-color-default-text: var(--sbb-color-charcoal-default);
--sbb-button-color-hover-background: var(--sbb-color-white-default);
--sbb-button-color-hover-border: var(--sbb-color-cloud-default);
--sbb-button-color-hover-text: var(--sbb-color-iron-default);
--sbb-button-color-active-background: var(--sbb-color-milk);
--sbb-button-color-active-border: var(--sbb-color-cloud);
--sbb-button-color-active-text: var(--sbb-color-anthracite);
--sbb-button-color-default-background: var(--sbb-color-white);
--sbb-button-color-default-border: var(--sbb-color-cloud);
--sbb-button-color-default-text: var(--sbb-color-charcoal);
--sbb-button-color-hover-background: var(--sbb-color-white);
--sbb-button-color-hover-border: var(--sbb-color-cloud);
--sbb-button-color-hover-text: var(--sbb-color-iron);
--sbb-button-shadow-1-color: var(--sbb-color-platinum-alpha-20);
--sbb-button-shadow-2-color: var(--sbb-color-cement-alpha-20);
}

:host([variant='secondary'][negative]) {
--sbb-button-color-active-background: transparent;
--sbb-button-color-active-border: var(--sbb-color-cloud-default);
--sbb-button-color-active-text: var(--sbb-color-cloud-default);
--sbb-button-color-active-border: var(--sbb-color-cloud);
--sbb-button-color-active-text: var(--sbb-color-cloud);
--sbb-button-color-default-background: transparent;
--sbb-button-color-default-border: var(--sbb-color-white-default);
--sbb-button-color-default-text: var(--sbb-color-white-default);
--sbb-button-color-default-border: var(--sbb-color-white);
--sbb-button-color-default-text: var(--sbb-color-white);
--sbb-button-color-hover-background: transparent;
--sbb-button-color-hover-border: var(--sbb-color-milk-default);
--sbb-button-color-hover-text: var(--sbb-color-milk-default);
--sbb-button-color-hover-border: var(--sbb-color-milk);
--sbb-button-color-hover-text: var(--sbb-color-milk);
}

:host([variant='tertiary']) {
--sbb-button-color-active-background: var(--sbb-color-black-default);
--sbb-button-color-active-border: var(--sbb-color-cloud-default);
--sbb-button-color-active-text: var(--sbb-color-cloud-default);
--sbb-button-color-default-background: var(--sbb-color-charcoal-default);
--sbb-button-color-default-border: var(--sbb-color-cloud-default);
--sbb-button-color-default-text: var(--sbb-color-white-default);
--sbb-button-color-hover-background: var(--sbb-color-midnight-default);
--sbb-button-color-hover-border: var(--sbb-color-cloud-default);
--sbb-button-color-hover-text: var(--sbb-color-milk-default);
--sbb-button-color-active-background: var(--sbb-color-black);
--sbb-button-color-active-border: var(--sbb-color-cloud);
--sbb-button-color-active-text: var(--sbb-color-cloud);
--sbb-button-color-default-background: var(--sbb-color-charcoal);
--sbb-button-color-default-border: var(--sbb-color-cloud);
--sbb-button-color-default-text: var(--sbb-color-white);
--sbb-button-color-hover-background: var(--sbb-color-midnight);
--sbb-button-color-hover-border: var(--sbb-color-cloud);
--sbb-button-color-hover-text: var(--sbb-color-milk);
--sbb-button-shadow-1-color: var(--sbb-color-platinum-alpha-20);
--sbb-button-shadow-2-color: var(--sbb-color-cement-alpha-20);
}

:host([variant='transparent']) {
--sbb-button-color-active-background: var(--sbb-color-cloud-default);
--sbb-button-color-active-border: var(--sbb-color-cloud-default);
--sbb-button-color-active-text: var(--sbb-color-black-default);
--sbb-button-color-active-background: var(--sbb-color-cloud);
--sbb-button-color-active-border: var(--sbb-color-cloud);
--sbb-button-color-active-text: var(--sbb-color-black);
--sbb-button-color-default-background: transparent;
--sbb-button-color-default-border: transparent;
--sbb-button-color-default-text: var(--sbb-color-black-default);
--sbb-button-color-hover-background: var(--sbb-color-milk-default);
--sbb-button-color-hover-border: var(--sbb-color-milk-default);
--sbb-button-color-hover-text: var(--sbb-color-black-default);
--sbb-button-color-default-text: var(--sbb-color-black);
--sbb-button-color-hover-background: var(--sbb-color-milk);
--sbb-button-color-hover-border: var(--sbb-color-milk);
--sbb-button-color-hover-text: var(--sbb-color-black);
}

:host([variant='transparent'][negative]) {
--sbb-button-color-active-background: var(--sbb-color-iron-default);
--sbb-button-color-active-border: var(--sbb-color-iron-default);
--sbb-button-color-active-text: var(--sbb-color-white-default);
--sbb-button-color-active-background: var(--sbb-color-iron);
--sbb-button-color-active-border: var(--sbb-color-iron);
--sbb-button-color-active-text: var(--sbb-color-white);
--sbb-button-color-default-background: transparent;
--sbb-button-color-default-border: transparent;
--sbb-button-color-default-text: var(--sbb-color-white-default);
--sbb-button-color-hover-background: var(--sbb-color-charcoal-default);
--sbb-button-color-hover-border: var(--sbb-color-charcoal-default);
--sbb-button-color-hover-text: var(--sbb-color-white-default);
--sbb-button-color-default-text: var(--sbb-color-white);
--sbb-button-color-hover-background: var(--sbb-color-charcoal);
--sbb-button-color-hover-border: var(--sbb-color-charcoal);
--sbb-button-color-hover-text: var(--sbb-color-white);
}

:host([size='m']) {
Expand Down
22 changes: 11 additions & 11 deletions src/components/calendar/calendar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@
--sbb-calendar-cell-size: #{sbb.px-to-rem-build(40)};
--sbb-calendar-hover-shift: #{sbb.px-to-rem-build(1)};
--sbb-calendar-wide-cell-size: #{sbb.px-to-rem-build(70)};
--sbb-calendar-cell-disabled-color: var(--sbb-color-granite-default);
--sbb-calendar-header-color: var(--sbb-color-granite-default);
--sbb-calendar-cell-disabled-color: var(--sbb-color-granite);
--sbb-calendar-header-color: var(--sbb-color-granite);
--sbb-calendar-cell-background-color: transparent;
--sbb-calendar-cell-padding: #{sbb.px-to-rem-build(2)};
--sbb-calendar-cell-color: var(--sbb-color-charcoal-default);
--sbb-calendar-cell-selected-color: var(--sbb-color-white-default);
--sbb-calendar-cell-selected-background-color: var(--sbb-color-charcoal-default);
--sbb-calendar-cell-color: var(--sbb-color-charcoal);
--sbb-calendar-cell-selected-color: var(--sbb-color-white);
--sbb-calendar-cell-selected-background-color: var(--sbb-color-charcoal);
--sbb-calendar-cell-disabled-height: #{sbb.px-to-rem-build(1.5)};
--sbb-calendar-cell-disabled-width: #{sbb.px-to-rem-build(25.5)};
--sbb-calendar-cell-transition-duration: var(--sbb-animation-duration-2x);
Expand All @@ -24,8 +24,8 @@
--sbb-calendar-table-animation-duration: 0.1ms;
--sbb-calendar-table-column-spaces: 12;
--sbb-calendar-control-view-change-height: #{sbb.px-to-rem-build(44)};
--sbb-calendar-control-view-change-color: var(--sbb-color-charcoal-default);
--sbb-calendar-control-view-change-background: var(--sbb-color-white-default);
--sbb-calendar-control-view-change-color: var(--sbb-color-charcoal);
--sbb-calendar-control-view-change-background: var(--sbb-color-white);

@include sbb.mq($from: micro) {
--sbb-calendar-cell-size: #{sbb.px-to-rem-build(44)};
Expand Down Expand Up @@ -81,7 +81,7 @@
transition-property: background-color, padding-block-end;

&:disabled {
--sbb-calendar-control-view-change-background: var(--sbb-color-milk-default);
--sbb-calendar-control-view-change-background: var(--sbb-color-milk);
--sbb-calendar-control-view-change-color: var(--sbb-calendar-cell-disabled-color);

cursor: unset;
Expand All @@ -100,7 +100,7 @@
}

&:not(:disabled):active {
--sbb-calendar-control-view-change-background: var(--sbb-color-milk-default);
--sbb-calendar-control-view-change-background: var(--sbb-color-milk);
}
}

Expand Down Expand Up @@ -208,7 +208,7 @@

@include sbb.hover-mq($hover: true) {
&:not(.sbb-calendar__selected, :active, :disabled):hover {
--sbb-calendar-cell-background-color: var(--sbb-color-milk-default);
--sbb-calendar-cell-background-color: var(--sbb-color-milk);

padding-block-end: var(--sbb-calendar-hover-shift);

Expand All @@ -231,7 +231,7 @@
}

&:not(.sbb-calendar__selected, :disabled):active {
--sbb-calendar-cell-background-color: var(--sbb-color-cloud-default);
--sbb-calendar-cell-background-color: var(--sbb-color-cloud);

&::before {
@include sbb.if-forced-colors {
Expand Down
10 changes: 5 additions & 5 deletions src/components/card/card-badge/card-badge.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
}

:host([color='white']) {
--sbb-card-badge-color: var(--sbb-color-charcoal-default);
--sbb-card-badge-background-color: var(--sbb-color-white-default);
--sbb-card-badge-border-color: var(--sbb-color-aluminium-default);
--sbb-card-badge-color: var(--sbb-color-charcoal);
--sbb-card-badge-background-color: var(--sbb-color-white);
--sbb-card-badge-border-color: var(--sbb-color-aluminium);
}

:host([color='charcoal']) {
--sbb-card-badge-color: var(--sbb-color-white-default);
--sbb-card-badge-background-color: var(--sbb-color-charcoal-default);
--sbb-card-badge-color: var(--sbb-color-white);
--sbb-card-badge-background-color: var(--sbb-color-charcoal);
--sbb-card-badge-border-color: transparent;
}

Expand Down
4 changes: 1 addition & 3 deletions src/components/card/card-badge/card-badge.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,7 @@ import './card-badge';

const wrapperStyle = (context: StoryContext): Record<string, string> => ({
'background-color':
context.args.color === 'charcoal'
? 'var(--sbb-color-white-default)'
: 'var(--sbb-color-charcoal-default)',
context.args.color === 'charcoal' ? 'var(--sbb-color-white)' : 'var(--sbb-color-charcoal)',
});

const ariaLabel: InputType = {
Expand Down
6 changes: 3 additions & 3 deletions src/components/card/card/card.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,10 @@ import '../../title';
const wrapperStyle = (context: StoryContext): Record<string, string> => ({
'background-color':
context.args.color === 'white' || context.args.color === 'transparent-bordered-dashed'
? 'var(--sbb-color-milk-default)'
? 'var(--sbb-color-milk)'
: context.args.color === 'milk'
? 'var(--sbb-color-white-default)'
: '--sbb-color-platinum-default',
? 'var(--sbb-color-white)'
: '--sbb-color-platinum',
});

const ContentText = (): TemplateResult => html`
Expand Down
Loading

0 comments on commit 77454de

Please sign in to comment.