fix(styles): remove deprecated accent colors(#3227)

.changeset/red-cobras-cry.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-styles-primeng-workspace': patch
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': major
+---
+
+Removed deprecated accent colors (nightblue, petrol, coral, olive, purple, aubergine and their light variations) and updated all relevant components, documentation, and utilities.

packages/documentation/.storybook/styles/manager.scss

@@ -80,13 +80,13 @@
       color: var(--post-gray-60);
     }
     &[data-nodetype='component'] svg {
-      color: var(--post-nightblue-bright);
+      color: #0076a8;
     }
     &[data-nodetype='document'] svg {
-      color: var(--post-coral-bright);
+      color: #e03c31;
     }
     &[data-nodetype='story'] svg {
-      color: var(--post-aubergine-bright);
+      color: #7566a0;
     }
 
     &[data-selected='true'] {
@@ -102,10 +102,10 @@
       margin-top: 1px;
       width: 1.2em;
       height: 1.2em;
-      color: var(--post-aubergine-bright);
+      color: #7566a0;
 
       &[color='secondary'] {
-        color: var(--post-nightblue-bright);
+        color: #0076a8;
       }
     }
 

packages/documentation/src/shared/tile/tile.component.scss

@@ -19,7 +19,7 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
     height: $tile-size;
     background-color: post.$white;
     border-radius: post.$size-regular;
-    box-shadow: 0 2px 5px 0 rgba(post.$aubergine-dark, 0.3);
+    box-shadow: 0 2px 5px 0 rgba(82, 49, 120, 0.3);
     text-decoration: none;
     text-align: center;
 

packages/documentation/src/stories/components/button/button.docs.mdx

@@ -34,17 +34,6 @@ Inverted buttons don't need special classes anymore, just use any of the [backgr
 
 <Canvas of={ButtonStories.Inverted} />
 
-### Accent colors
-
-<div className="alert alert-md alert-warning">
-  <h2 className="alert-heading">The accent colors are deprecated</h2>
-  <p>The CSS classes to apply to the buttons will be removed in the future.</p>
-</div>
-
-There are a number of accent colors that you can apply to buttons instead of the usual colors.
-
-<Canvas of={ButtonStories.AccentColors} />
-
 ### Signal colors
 
 Besides the usual and the accent button variations, there are also signal button colors.

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, SignalColors } from './button.stories';
+import meta, { Default, SignalColors } from './button.stories';
 import { html } from 'lit';
 import { bombArgs } from '@/utils';
 
@@ -42,8 +42,6 @@ export const Button: Story = {
                   Default.render?.({ ...context.args, ...args, animated: false }, context),
                 )}
               <div class="mt-32 w-100"></div>
-              ${AccentColors.render?.({ ...context.args, ...AccentColors.args }, context)}
-              <div class="mt-32 w-100"></div>
               ${SignalColors.render?.({ ...context.args, ...SignalColors.args }, context)}
             </div>
           `,

packages/documentation/src/stories/components/button/button.stories.ts

@@ -297,26 +297,6 @@ const VariantsTemplate = {
     `,
 };
 
-export const AccentColors: Story = {
-  ...VariantsTemplate,
-  args: {
-    variants: [
-      'btn-nightblue',
-      'btn-nightblue-bright',
-      'btn-petrol',
-      'btn-petrol-bright',
-      'btn-coral',
-      'btn-coral-bright',
-      'btn-olive',
-      'btn-olive-bright',
-      'btn-purple',
-      'btn-purple-bright',
-      'btn-aubergine',
-      'btn-aubergine-bright',
-    ],
-  },
-};
-
 export const SignalColors: Story = {
   ...VariantsTemplate,
   args: {

packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-css-variables.stories.ts

@@ -24,7 +24,7 @@ export const Default = {
         }
       </style>
       ${meta.render && meta.render(args, context)}
-      <p id="my-div" class="position-sticky bg-nightblue p-16">
+      <p id="my-div" class="position-sticky bg-dark p-16">
         I am sticky! I am always positioned right below the header when you scroll up and down.
       </p>
     `;

packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts

@@ -25,7 +25,7 @@ export const TopicTeaser: Story = {
                 subtitle: [short, long],
                 title: [short, long],
                 alignment: context.argTypes.alignment.options,
-                backgroundColor: ['bg-nightblue', 'bg-coral-bright'],
+                backgroundColor: ['bg-light', 'bg-yellow'],
                 linkCount: [1, 5, 10],
               })
                 .filter((args: Args) => args.title !== args.subtitle || args.linkCount == 5)

packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts

@@ -20,7 +20,7 @@ const meta: MetaComponent = {
     subtitle: 'Vero siteos et accusam iretea et justo',
     linkCount: 5,
     alignment: 'null',
-    backgroundColor: 'bg-nightblue',
+    backgroundColor: 'bg-yellow',
   },
   argTypes: {
     title: {
@@ -78,36 +78,9 @@ const meta: MetaComponent = {
         labels: {
           'bg-light': 'Light',
           'bg-dark': 'Dark',
-          'bg-nightblue': 'Nightblue',
-          'bg-nightblue-bright': 'Nightblue (bright)',
-          'bg-petrol': 'Petrol',
-          'bg-petrol-bright': 'Petrol (bright)',
-          'bg-coral': 'Coral',
-          'bg-coral-bright': 'Coral (bright)',
-          'bg-olive': 'Olive',
-          'bg-olive-bright': 'Olive (bright)',
-          'bg-purple': 'Purple',
-          'bg-purple-bright': 'Purple (bright)',
-          'bg-aubergine': 'Aubergine',
-          'bg-aubergine-bright': 'Aubergine (bright)',
         },
       },
-      options: [
-        'bg-light',
-        'bg-dark',
-        'bg-nightblue',
-        'bg-nightblue-bright',
-        'bg-petrol',
-        'bg-petrol-bright',
-        'bg-coral',
-        'bg-coral-bright',
-        'bg-olive',
-        'bg-olive-bright',
-        'bg-purple',
-        'bg-purple-bright',
-        'bg-aubergine',
-        'bg-aubergine-bright',
-      ],
+      options: ['bg-light', 'bg-yellow'],
       table: {
         category: 'General',
       },

packages/documentation/src/stories/foundation/color/color.docs.mdx

@@ -59,21 +59,6 @@ These colors are also available via the **Sass map** `$signal-background-colors`
   })}
 </section>
 
-## Accent colors
-
-<div className="alert alert-md alert-warning">
-  <h2 className="alert-heading">The accent colors are deprecated</h2>
-  <p>Its CSS and SASS variables will be removed in the future.</p>
-</div>
-
-These colors are also available via the **Sass map** `$accent-colors`.
-
-<section className="color-swatch__section">
-  {forEach(SCSS_VARIABLES.accent, function ({ key, value}) {
-    return <ColorSwatch key={key} name={key} color={value} />;
-  })}
-</section>
-
 ## Black alpha colors
 These colors are also available via the **Sass map** `$post-black-alphas`.
 

packages/documentation/src/stories/foundation/color/color.module.scss

@@ -16,7 +16,6 @@ $contrast-color-maps: (
   post.$post-grays,
   post.$signal-colors,
   post.$signal-background-colors,
-  post.$accent-colors
 );
 
 :export {
@@ -52,10 +51,6 @@ $contrast-color-maps: (
     signal-background_#{$colorName}: $value;
   }
 
-  @each $colorName, $value in post.$accent-colors {
-    accent_#{$colorName}: $value;
-  }
-
   @each $map in $contrast-color-maps {
     @each $name, $value in $map {
       contrast_color_#{$name}: post.get-best-contrast-text($value);

packages/documentation/src/stories/foundation/layout/columns/columns.styles.scss

@@ -5,12 +5,12 @@
 
   .row > *:not(.w-100) {
     padding-block: 0.75rem;
-    background-color: lighten(post.$nightblue-bright, 55%);
-    border: 1px solid lighten(post.$nightblue-dark, 45%);
+    background-color: lighten(#0076a8, 55%);
+    border: 1px solid lighten(#004976, 45%);
   }
 
   .row {
-    background-color: lighten(post.$nightblue-bright, 61.5%);
+    background-color: lighten(#0076a8, 61.5%);
   }
 
   .row-height {
@@ -19,7 +19,5 @@
 
   .standalone-columns > *:not(p){
     padding-block: 0.75rem;
-    background-color: lighten(post.$nightblue-bright, 55%);
-    border: 1px solid lighten(post.$nightblue-dark, 45%);
   }
-}
+}

packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss

@@ -6,7 +6,7 @@
   &.grid-nested-example [class^="col"],
   &:not(.grid-nested-example) .my-col-content-style {
     padding: 0.75rem;
-    background-color: lighten(post.$nightblue-bright, 60%);
-    border: 1px solid lighten(post.$nightblue-dark, 60%);
+    background-color: lighten(#0076a8, 60%);
+    border: 1px solid lighten(#004976, 60%);
   }
 }

packages/documentation/src/stories/getting-started/migration-guide/shared.component.scss

@@ -69,7 +69,7 @@ migration-global-state {
   }
 
   em {
-    color: post.$coral-dark;
+    color: #9e2a2f;
   }
 
   .info {

packages/documentation/src/stories/home.styles.scss

@@ -48,7 +48,7 @@
   .feature--icon {
     margin-bottom: post.$size-regular;
     font-size: post.$size-huge;
-    color: post.$aubergine-dark;
+    color: #523178;
   }
 
   .feature--content {

packages/documentation/src/stories/utilities/background/background.docs.mdx

@@ -53,14 +53,6 @@ To set a background on an element, simply add a `.bg-{colorname}` class to it.
   })}
 </section>
 
-#### Accent
-
-<section className="background-container__section">
-  {forEach(SCSS_VARIABLES.accent, function ({ key, value }) {
-    return <BackgroundContainer key={key} name={key} color={value} />;
-  })}
-</section>
-
 ## Nested
 
 It is possible to nest backgrounds.

packages/documentation/src/stories/utilities/background/background.module.scss

@@ -4,7 +4,6 @@
 $non-base-background-colors: ();
 $non-base-background-colors: map.merge($non-base-background-colors, post.$signal-colors);
 $non-base-background-colors: map.merge($non-base-background-colors, post.$signal-background-colors);
-$non-base-background-colors: map.merge($non-base-background-colors, post.$accent-colors);
 
 :export {
   @each $color, $value in post.$background-colors {
@@ -13,10 +12,6 @@ $non-base-background-colors: map.merge($non-base-background-colors, post.$accent
     }
   }
 
-  @each $color, $value in post.$accent-colors {
-    accent_#{$color}: $value;
-  }
-
   @each $color, $value in post.$signal-colors {
     signal_#{$color}: $value;
   }

packages/documentation/src/stories/utilities/background/background.stories.ts

@@ -40,10 +40,10 @@ export const NestedBackgrounds: Story = {
 
 export const TranslucentBackgrounds: Story = {
   render: () => html`
-    <div class="bg-aubergine p-16">Container with default opacity (1).</div>
-    <div class="bg-aubergine p-16" style="--post-bg-opacity: 0.8">Container with opacity 0.8.</div>
-    <div class="bg-aubergine p-16" style="--post-bg-opacity: 0.6">Container with opacity 0.6.</div>
-    <div class="bg-aubergine p-16" style="--post-bg-opacity: 0.4">Container with opacity 0.4.</div>
-    <div class="bg-aubergine p-16" style="--post-bg-opacity: 0.2">Container with opacity 0.2.</div>
+    <div class="bg-dark p-16">Container with default opacity (1).</div>
+    <div class="bg-dark p-16" style="--post-bg-opacity: 0.8">Container with opacity 0.8.</div>
+    <div class="bg-dark p-16" style="--post-bg-opacity: 0.6">Container with opacity 0.6.</div>
+    <div class="bg-dark p-16" style="--post-bg-opacity: 0.4">Container with opacity 0.4.</div>
+    <div class="bg-dark p-16" style="--post-bg-opacity: 0.2">Container with opacity 0.2.</div>
   `,
 };

packages/documentation/src/stories/utilities/spacing/spacing.styles.scss

@@ -1,9 +1,9 @@
 @use 'sass:color';
 @use '@swisspost/design-system-styles/core' as post;
 
-$margin-color: color.adjust(post.$coral-bright, $lightness: 30%);
+$margin-color: color.adjust(#e03c31, $lightness: 30%);
 $padding-color: color.complement($margin-color);
-$gap-color: color.adjust(post.$aubergine-bright, $lightness: 30%);
+$gap-color: color.adjust(#7566a0, $lightness: 30%);
 $content-color: post.$white;
 $border: 1px solid post.$gray-40;
 

packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html

@@ -3,7 +3,7 @@ <h1 class="visually-hidden">PrimeNg data table showcase</h1>
 <div
   class="sticky-top border-bottom d-flex align-items-center justify-content-between py-16 mb-56"
   [class.bg-white]="!hasDarkBackground"
-  [class.bg-nightblue]="hasDarkBackground"
+  [class.bg-dark]="hasDarkBackground"
 >
   <div class="form-check form-switch">
     <input

packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts

@@ -19,7 +19,7 @@ interface Product {
 })
 export class AppComponent {
   @HostBinding('class') containerClasses = 'd-block container my-32 py-24';
-  @HostBinding('class.bg-nightblue') hasDarkBackground = false;
+  @HostBinding('class.bg-dark') hasDarkBackground = false;
 
   datatableStyleClass = '';
 

packages/styles/src/components/button.scss

@@ -283,11 +283,6 @@
   }
 }
 
-// Color variants
-@each $name, $color in color.$accent-colors {
-  @include button-mx.button-color-variant($name, $color);
-}
-
 // Intranet signal buttons
 @each $name, $color in color.$signal-colors {
   @include button-mx.button-color-variant($name, $color);

packages/styles/src/components/carousel.scss

@@ -52,7 +52,6 @@
   width: 40%;
   padding: 2rem;
   padding-bottom: 5rem;
-  background-color: rgba(color.$nightblue-dark, 0.85);
   color: color.$white;
   text-align: left;