feat: update color variables (#2861)

swisspost · Apr 3, 2024 · df3a936 · df3a936
1 parent 3c1c7de
commit df3a936
Show file tree

Hide file tree

Showing 56 changed files with 452 additions and 294 deletions.
diff --git a/.changeset/eight-elephants-sniff.md b/.changeset/eight-elephants-sniff.md
@@ -0,0 +1,10 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/internet-header': patch
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-demo': patch
+---
+
+Refactored brand colors. Renamed `$gray-background` SCSS variable to `$gray` and removed `$gray-background-light` variable because it is a duplication of the already existing variable `$light`.
+
+Updated the usage of said variables in dependant packages accordingly.
diff --git a/.changeset/nice-schools-perform.md b/.changeset/nice-schools-perform.md
@@ -0,0 +1,8 @@
+---
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': patch
+---
+
+Added new black and white alpha colors.
+Replaced hardcoded alpha colors with the new color definitions in `card-control` component.
diff --git a/.changeset/shiny-zoos-accept.md b/.changeset/shiny-zoos-accept.md
@@ -0,0 +1,13 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-demo': patch
+---
+
+- Removed variables `$success-green`, `$error-red`, `$warning-orange`, `$success-text`, `$error-text`, `$danger` as well as the Sass map `$contextual-colors`.
+  Instead use the variables `$success`, `$error`, `$warning`, `$error` and the Sass map `$signal-colors`.
+- Updated the Sass map `$signal-colors` keys and added a new Sass map `$signal-background-colors`.
+- Updated the Sass map `$background-colors` and all the dependant packages accordingly.
+
+With the exception of the components `notification`, `toast` and `tag`, there is no component providing a `danger` variant anymore. Instead use the `error` variant.
diff --git a/.changeset/smart-spoons-type.md b/.changeset/smart-spoons-type.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added new focus color variables.
diff --git a/packages/components/src/components/post-alert/alert-types.ts b/packages/components/src/components/post-alert/alert-types.ts
@@ -1,3 +1,3 @@
-export const ALERT_TYPES = ['primary', 'success', 'danger', 'warning', 'info', 'gray'] as const;
+export const ALERT_TYPES = ['primary', 'success', 'warning', 'danger', 'info', 'gray'] as const;
 
-export type AlertType = typeof ALERT_TYPES[number];
+export type AlertType = (typeof ALERT_TYPES)[number];
diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -91,9 +91,9 @@
     }
 
     &.is-invalid {
-      --post-card-control-border-color: #{post.$danger};
-      --post-card-control-color: #{post.$danger};
-      --post-card-control-input-border-color: #{post.$danger};
+      --post-card-control-border-color: #{post.$error};
+      --post-card-control-color: #{post.$error};
+      --post-card-control-input-border-color: #{post.$error};
     }
 
     &:hover {
@@ -152,10 +152,10 @@
       }
 
       &.is-invalid {
-        --post-card-control-border-color: #{post.$danger};
+        --post-card-control-border-color: #{post.$error};
         --post-card-control-bg: #{post.$error-background};
-        --post-card-control-color: #{post.$danger};
-        --post-card-control-input-border-color: #{post.$danger};
+        --post-card-control-color: #{post.$error};
+        --post-card-control-input-border-color: #{post.$error};
         --post-card-control-input-bg: #{post.$white};
       }
 
@@ -219,10 +219,10 @@
       }
 
       &.is-invalid {
-        --post-card-control-border-color: #{post.$danger};
+        --post-card-control-border-color: #{post.$error};
         --post-card-control-bg: #{post.$error-background};
-        --post-card-control-color: #{post.$danger};
-        --post-card-control-input-border-color: #{post.$danger};
+        --post-card-control-color: #{post.$error};
+        --post-card-control-input-border-color: #{post.$error};
         --post-card-control-input-bg: #{post.$white};
       }
 
@@ -244,10 +244,10 @@
 
     // TODO: update white alpha colors with design-system alpha colors, once they are defined
     &.is-disabled {
-      --post-card-control-border-color: #{#{rgba(post.$white, 0.8)}};
+      --post-card-control-border-color: post.$white-alpha-80;
       --post-card-control-bg: transparent;
-      --post-card-control-color: #{#{rgba(post.$white, 0.8)}};
-      --post-card-control-input-border-color: #{#{rgba(post.$white, 0.8)}};
+      --post-card-control-color: post.$white-alpha-80;
+      --post-card-control-input-border-color: post.$white-alpha-80;
       --post-card-control-input-bg: transparent;
     }
   }

diff --git a/.../bootstrap/components/background/background-demo-page/background-demo-page.component.html b/.../bootstrap/components/background/background-demo-page/background-demo-page.component.html
@@ -30,15 +30,33 @@ <h2 class="bold mt-huge">Default backgrounds</h2>
     <div class="p-3 bg-gray">
       <app-background-demo
         [dropOpacity]="dropOpacity1"
-        [colorArray]="['primary', 'yellow', 'white', 'light', 'gray', 'dark', 'transparent']"
+        [colorArray]="[
+          'yellow',
+          'white',
+          'light',
+          'gray',
+          'dark',
+          'primary',
+          'secondary',
+          'transparent'
+        ]"
       ></app-background-demo>
     </div>
   </div>
   <div class="col-12 col-lg-6">
     <div class="p-3 bg-dark">
       <app-background-demo
         [dropOpacity]="dropOpacity1"
-        [colorArray]="['primary', 'yellow', 'white', 'light', 'gray', 'dark', 'transparent']"
+        [colorArray]="[
+          'yellow',
+          'white',
+          'light',
+          'gray',
+          'dark',
+          'primary',
+          'secondary',
+          'transparent'
+        ]"
       ></app-background-demo>
     </div>
   </div>
@@ -129,15 +147,15 @@ <h2 class="bold mt-huge">Contextual backgrounds (Intranet only)</h2>
     <div class="p-3 bg-gray">
       <app-background-demo
         [dropOpacity]="dropOpacity3"
-        [colorArray]="['success', 'warning', 'danger', 'info']"
+        [colorArray]="['success', 'warning', 'error', 'info']"
       ></app-background-demo>
     </div>
   </div>
   <div class="col-12 col-lg-6">
     <div class="p-3 bg-dark">
       <app-background-demo
         [dropOpacity]="dropOpacity3"
-        [colorArray]="['success', 'warning', 'danger', 'info']"
+        [colorArray]="['success', 'warning', 'error', 'info']"
       ></app-background-demo>
     </div>
   </div>

diff --git a/...ages/demo/src/app/post-sample/components/icons/svg-icons-demo/svg-icons-demo.component.ts b/...ages/demo/src/app/post-sample/components/icons/svg-icons-demo/svg-icons-demo.component.ts
@@ -9,7 +9,7 @@ export class SvgIconsDemoComponent {
   packageName: string = '@swisspost/design-system-styles';
   cwfImport: string = `@use "${this.packageName}/core" as post;`;
 
-  colors = ['primary', 'white', 'success', 'warning', 'danger'];
+  colors = ['primary', 'white', 'success', 'warning', 'error'];
   preColored = ['success', 'warn', 'info', 'error-black', 'error-red'];
 
   range: number[] = [];

diff --git a/packages/demo/src/styles.scss b/packages/demo/src/styles.scss
@@ -24,8 +24,8 @@ body {
 .pi-1000-success {
   @include post.pi(1000, 'success');
 }
-.pi-1000-danger {
-  @include post.pi(1000, 'danger');
+.pi-1000-error {
+  @include post.pi(1000, 'error');
 }
 
 .pi-1014-white {

diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -40,13 +40,13 @@ There are a number of accent colors that you can apply to buttons instead of the
 
 <Canvas of={ButtonStories.AccentColors} />
 
-### Contextual colors
+### Signal colors
 
-Besides the usual and the accent button variations, there are also contextual button colors.
+Besides the usual and the accent button variations, there are also signal button colors.
 
-<p className="alert alert-warning">These are only allowed for intranet applications!</p>
+<p className="alert alert-md alert-warning">These are only allowed for intranet applications!</p>
 
-<Canvas of={ButtonStories.ContextualColors} />
+<Canvas of={ButtonStories.SignalColors} />
 
 ### Full-width
 

diff --git a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts b/packages/documentation/src/stories/components/button/button.snapshot.stories.ts
@@ -1,5 +1,5 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
-import meta, { Default, AccentColors, ContextualColors } from './button.stories';
+import meta, { Default, AccentColors, SignalColors } from './button.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
@@ -44,7 +44,7 @@ export const Button: Story = {
               <div class="mt-big w-100"></div>
               ${AccentColors.render?.({ ...context.args, ...AccentColors.args }, context)}
               <div class="mt-big w-100"></div>
-              ${ContextualColors.render?.({ ...context.args, ...ContextualColors.args }, context)}
+              ${SignalColors.render?.({ ...context.args, ...SignalColors.args }, context)}
             </div>
           `,
         )}

diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -308,10 +308,10 @@ export const AccentColors: Story = {
   },
 };
 
-export const ContextualColors: Story = {
+export const SignalColors: Story = {
   ...VariantsTemplate,
   args: {
-    variants: ['btn-success', 'btn-info', 'btn-warning', 'btn-danger'],
+    variants: ['btn-success', 'btn-warning', 'btn-error', 'btn-info'],
   },
 };
 

diff --git a/packages/documentation/src/stories/components/card-control/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
@@ -7,7 +7,7 @@ import { parse } from '../../../utils/sass-export';
 import './card-control.styles.scss';
 import scss from './card-control.module.scss';
 
-const SCSS_VARIABLES: { [key: string]: string } = parse(scss);
+const SCSS_VARIABLES: any = parse(scss);
 
 const meta: MetaComponent = {
   id: '886fabcf-148b-4054-a2ec-4869668294fb',

diff --git a/packages/documentation/src/stories/components/subnavigation/background.module.scss b/packages/documentation/src/stories/components/subnavigation/background.module.scss
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.module.scss b/packages/documentation/src/stories/components/subnavigation/subnavigation.module.scss
@@ -0,0 +1,13 @@
+@use 'sass:list';
+@use 'sass:map';
+@use '@swisspost/design-system-styles/core' as post;
+
+$background-classes: ();
+
+@each $key in map.keys(post.$background-colors) {
+  $background-classes: list.append($background-classes, 'bg-#{$key}', $separator: comma);
+}
+
+:export {
+  bg-classes: [$background-classes];
+}
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts b/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
@@ -1,9 +1,10 @@
 import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import scss from './background.module.scss';
 import { MetaComponent } from '../../../../types';
+import { parse } from '../../../utils/sass-export';
+import scss from './subnavigation.module.scss';
 
-const backgroundColors = scss.bgClasses.split('"').filter((_, index) => index % 2 === 1);
+const SCSS_VARIABLES: any = parse(scss);
 
 const meta: MetaComponent = {
   id: '87ceabbb-f552-46eb-8a47-4d84e7f8cef0',
@@ -25,7 +26,7 @@ const meta: MetaComponent = {
       control: {
         type: 'select',
       },
-      options: ['default', ...backgroundColors],
+      options: ['default', ...SCSS_VARIABLES['bg-classes']],
       table: {
         category: 'General',
       },

diff --git a/packages/documentation/src/stories/components/tag/standard-html/tag.stories.ts b/packages/documentation/src/stories/components/tag/standard-html/tag.stories.ts
@@ -3,6 +3,10 @@ import { MetaComponent } from '../../../../../types';
 import { html, nothing } from 'lit';
 import { BADGE } from '../../../../../.storybook/constants';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { parse } from '../../../../utils/sass-export';
+import scss from '../tag.module.scss';
+
+const SCSS_VARIABLES: any = parse(scss);
 
 const meta: MetaComponent = {
   id: '1b1ea384-7421-4064-ad34-e3f48a36b39f',
@@ -26,16 +30,9 @@ const meta: MetaComponent = {
         type: 'select',
         labels: {
           null: 'Default',
-          gray: 'Gray',
-          white: 'White',
-          info: 'Info',
-          success: 'Success',
-          danger: 'Danger',
-          warning: 'Warning',
-          yellow: 'Yellow',
         },
       },
-      options: ['null', 'gray', 'white', 'info', 'success', 'warning', 'danger', 'yellow'],
+      options: ['null', ...SCSS_VARIABLES['tag-backgrounds']],
       table: {
         category: 'General',
       },

diff --git a/packages/documentation/src/stories/components/tag/tag.module.scss b/packages/documentation/src/stories/components/tag/tag.module.scss
@@ -0,0 +1,6 @@
+@use 'sass:map';
+@use '@swisspost/design-system-styles/core' as post;
+
+:export {
+  tag-backgrounds: [map.keys(post.$tag-backgrounds)];
+}
diff --git a/packages/documentation/src/stories/components/tag/web-component/post-tag.stories.ts b/packages/documentation/src/stories/components/tag/web-component/post-tag.stories.ts
@@ -3,6 +3,10 @@ import { MetaComponent } from '../../../../../types';
 import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { BADGE } from '../../../../../.storybook/constants';
+import { parse } from '../../../../utils/sass-export';
+import scss from '../tag.module.scss';
+
+const SCSS_VARIABLES: any = parse(scss);
 
 const meta: MetaComponent = {
   id: '516917c9-ad12-484c-8bbd-e270e412f713',
@@ -24,16 +28,9 @@ const meta: MetaComponent = {
         type: 'select',
         labels: {
           null: 'Default',
-          gray: 'Gray',
-          white: 'White',
-          info: 'Info',
-          success: 'Success',
-          danger: 'Danger',
-          warning: 'Warning',
-          yellow: 'Yellow',
         },
       },
-      options: ['null', 'gray', 'white', 'info', 'success', 'warning', 'danger', 'yellow'],
+      options: ['null', ...SCSS_VARIABLES['tag-backgrounds']],
     },
     'size': {
       control: {

diff --git a/packages/documentation/src/stories/foundation/color/color-use-css.sample.css b/packages/documentation/src/stories/foundation/color/color-use-css.sample.css
@@ -1,3 +1,3 @@
 .my-element {
-  property: var(--post-dark);
+  color: var(--post-gray-80);
 }
diff --git a/packages/documentation/src/stories/foundation/color/color-use-scss.sample.scss b/packages/documentation/src/stories/foundation/color/color-use-scss.sample.scss
@@ -1,5 +1,9 @@
+@use 'sass:map';
 @use '@swisspost/design-system-styles/core' as post;
 
 .my-element {
-  property: post.$dark;
+  // direct usage
+  color: post.$gray-80;
+  // map usage
+  color: map.get(post.$post-grays, 'gray-80');
 }