From b6772e6e2a611f698df3caac149bde28b5626fa7 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Tue, 8 Oct 2024 14:16:25 +0200 Subject: [PATCH 01/21] fix(docs): remove the Accent colors documentation --- .../src/stories/components/button/button.docs.mdx | 11 ----------- .../src/stories/foundation/color/color.docs.mdx | 15 --------------- .../stories/foundation/color/color.module.scss | 5 ----- .../utilities/background/background.docs.mdx | 8 -------- 4 files changed, 39 deletions(-) diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx index be5b9cdbcd..7c1027b99f 100644 --- a/packages/documentation/src/stories/components/button/button.docs.mdx +++ b/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 -### Accent colors - -
-

The accent colors are deprecated

-

The CSS classes to apply to the buttons will be removed in the future.

-
- -There are a number of accent colors that you can apply to buttons instead of the usual colors. - - - ### Signal colors Besides the usual and the accent button variations, there are also signal button colors. diff --git a/packages/documentation/src/stories/foundation/color/color.docs.mdx b/packages/documentation/src/stories/foundation/color/color.docs.mdx index ff54e647b0..344316beac 100644 --- a/packages/documentation/src/stories/foundation/color/color.docs.mdx +++ b/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` })} -## Accent colors - -
-

The accent colors are deprecated

-

Its CSS and SASS variables will be removed in the future.

-
- -These colors are also available via the **Sass map** `$accent-colors`. - -
- {forEach(SCSS_VARIABLES.accent, function ({ key, value}) { - return ; - })} -
- ## Black alpha colors These colors are also available via the **Sass map** `$post-black-alphas`. diff --git a/packages/documentation/src/stories/foundation/color/color.module.scss b/packages/documentation/src/stories/foundation/color/color.module.scss index b807818733..af5fe0a66a 100644 --- a/packages/documentation/src/stories/foundation/color/color.module.scss +++ b/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); diff --git a/packages/documentation/src/stories/utilities/background/background.docs.mdx b/packages/documentation/src/stories/utilities/background/background.docs.mdx index 0feba20683..2a6611121c 100644 --- a/packages/documentation/src/stories/utilities/background/background.docs.mdx +++ b/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. })} -#### Accent - -
- {forEach(SCSS_VARIABLES.accent, function ({ key, value }) { - return ; - })} -
- ## Nested It is possible to nest backgrounds. From 36e4bee241b988054a8a2a841d444d61ed3c64fa Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Tue, 8 Oct 2024 14:18:25 +0200 Subject: [PATCH 02/21] chore(styles): cleaned up associated tests that were validating `accent-color` behavior --- packages/styles/tests/core.test.scss | 2 -- packages/styles/tests/functions/icons.test.scss | 2 -- packages/styles/tests/intranet.test.scss | 2 -- 3 files changed, 6 deletions(-) diff --git a/packages/styles/tests/core.test.scss b/packages/styles/tests/core.test.scss index eaba52a7c4..c3582ebe80 100644 --- a/packages/styles/tests/core.test.scss +++ b/packages/styles/tests/core.test.scss @@ -7,11 +7,9 @@ * packages. Extend these tests at your convenience. */ .test { - background-image: url(post.get-colored-svg-url('2063', map.get(post.$accent-colors, 'coral'))); background-image: url(post.get-colored-svg-url('2063', #ff0080)); background-image: url(post.get-colored-svg-url('2063', post.$white)); - @include post.pi(2063, map.get(post.$accent-colors, 'coral')); @include post.pi(2063, #ff0080); @include post.pi(2063, post.$white); @include post.pi(2063, midnightblue); diff --git a/packages/styles/tests/functions/icons.test.scss b/packages/styles/tests/functions/icons.test.scss index a2ad350963..f0c1f03dfa 100644 --- a/packages/styles/tests/functions/icons.test.scss +++ b/packages/styles/tests/functions/icons.test.scss @@ -28,6 +28,4 @@ $expected-add-stroke-color-output: "data:image/svg+xml,%3Csvg viewBox='0 0 32 32 background-image: url(icons.get-colored-svg-url($name, $value)); } } - - background-image: url(icons.get-colored-svg-url('1000', map.get(color.$accent-colors, 'coral'))); } diff --git a/packages/styles/tests/intranet.test.scss b/packages/styles/tests/intranet.test.scss index 72cba092e6..c517c425ec 100644 --- a/packages/styles/tests/intranet.test.scss +++ b/packages/styles/tests/intranet.test.scss @@ -4,11 +4,9 @@ @use './jest'; .test { - background-image: url(post.get-colored-svg-url('2063', map.get(post.$accent-colors, 'coral'))); background-image: url(post.get-colored-svg-url('2063', #ff0080)); background-image: url(post.get-colored-svg-url('2063', post.$white)); - @include post.pi(2063, map.get(post.$accent-colors, 'coral')); @include post.pi(2063, #ff0080); @include post.pi(2063, post.$white); @include post.pi(2063, midnightblue); From 38c351dc45586ae892bd2d9e3c3fd08858e33ef3 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Tue, 8 Oct 2024 14:21:01 +0200 Subject: [PATCH 03/21] chore(git): merge main to 3227 remove-deprecated-accent-colors branch --- packages/styles/src/placeholders/_text.scss | 141 ++++++++++++++++++++ 1 file changed, 141 insertions(+) diff --git a/packages/styles/src/placeholders/_text.scss b/packages/styles/src/placeholders/_text.scss index 75243af932..60aba27b09 100644 --- a/packages/styles/src/placeholders/_text.scss +++ b/packages/styles/src/placeholders/_text.scss @@ -1,7 +1,38 @@ +@use 'sass:map'; +@use './../themes/bootstrap/core' as *; +@use './../variables/spacing'; @use './../variables/type'; +@use './../variables/color'; +@use './../mixins/size' as size-mx; @use './../mixins/type' as type-mx; @use './../variables/components/paragraph'; +%list-adjustment { + ul { + position: relative; + margin-top: paragraph.$text-bottom-space; + margin-bottom: paragraph.$text-bottom-space; + padding-left: map.get(spacing.$post-sizes, 'big'); + list-style: none; + text-align: left; + + li { + margin-bottom: paragraph.$text-bottom-space * 0.5; + + &::before { + content: '\2013'; + display: inline-block; + position: absolute; + left: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + } +} + @each $key, $value in type.$font-curves { %font-curve-#{$key} { @include type-mx.font-curve($key); @@ -11,3 +42,113 @@ %text-bottom-spacer { margin-bottom: paragraph.$text-bottom-space; // 0.8 times the size of the current font (20px) = 16px } + +// Removes margin-top from first and margin-bottom from last child +%module-container { + > :first-child { + margin-top: 0; + } + + > :last-child { + margin-bottom: 0; + } +} + +%default-module-spacer { + margin-top: map.get(spacing.$post-sizes, 'huge'); // 56px + margin-bottom: map.get(spacing.$post-sizes, 'huge'); // 56px + + @include media-breakpoint-up(md) { + margin-top: map.get(spacing.$post-sizes, 'giant'); // 80px + margin-bottom: map.get(spacing.$post-sizes, 'giant'); // 80px + } +} + +%text-container { + @extend %module-container; + + ul { + position: relative; + margin-top: paragraph.$text-bottom-space; + margin-bottom: paragraph.$text-bottom-space; + padding-left: map.get(spacing.$post-sizes, 'big'); + list-style: none; + + li { + @extend %font-curve-regular; + @extend %text-bottom-spacer; + + &::before { + content: '\2013'; + display: inline-block; + position: absolute; + left: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + &.bulletpoints { + padding-left: map.get(spacing.$post-sizes, 'big'); + + @include media-breakpoint-up(md) { + padding-left: map.get(spacing.$post-sizes, 'bigger-big'); + } + + li { + position: relative; + + // stylelint-disable-next-line max-nesting-depth + &::before { + content: ''; + position: absolute; + top: 2px; + left: -(map.get(spacing.$post-sizes, 'big')); + width: map.get(spacing.$post-sizes, 'small-large'); + height: map.get(spacing.$post-sizes, 'small-large'); + border-radius: 50%; + + @include media-breakpoint-up(md) { + left: -(map.get(spacing.$post-sizes, 'bigger-big')); + width: map.get(spacing.$post-sizes, 'large'); + height: map.get(spacing.$post-sizes, 'large'); + } + } + } + } + } + + ol { + position: relative; + margin-top: paragraph.$text-bottom-space; + margin-bottom: paragraph.$text-bottom-space; + padding-left: map.get(spacing.$post-sizes, 'big'); + list-style: none; + counter-reset: li-counter; + + li { + counter-increment: li-counter; + + &::before { + content: counter(li-counter) '.'; + position: absolute; + left: 0; + } + } + } + + .h-highlighted { + @extend %font-curve-regular; + @extend %text-bottom-spacer; + @include size-mx.bezel-regular; + + @include media-breakpoint-up(lg) { + @include size-mx.bezel-medium; + } + @include media-breakpoint-up(xxl) { + @include size-mx.bezel-large; + } + } +} From 0bc4ec81dfc7217e74235b44d3e023b3849ec66e Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Tue, 8 Oct 2024 14:22:09 +0200 Subject: [PATCH 04/21] chore(styles): removed deprecated `accent-color` style definitions from background.module.scss --- .../src/stories/utilities/background/background.module.scss | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/documentation/src/stories/utilities/background/background.module.scss b/packages/documentation/src/stories/utilities/background/background.module.scss index 5b75271a86..f630e81f1d 100644 --- a/packages/documentation/src/stories/utilities/background/background.module.scss +++ b/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; } From c6697a72b67cccbd41b320b10611a1a5c40e31d6 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Tue, 8 Oct 2024 14:23:00 +0200 Subject: [PATCH 05/21] Removed deprecated `accent-color` style definitions from buttons docs and styles --- .../button/button.snapshot.stories.ts | 4 +--- .../components/button/button.stories.ts | 20 ------------------- packages/styles/src/components/button.scss | 5 ----- 3 files changed, 1 insertion(+), 28 deletions(-) diff --git a/packages/documentation/src/stories/components/button/button.snapshot.stories.ts b/packages/documentation/src/stories/components/button/button.snapshot.stories.ts index ff8db2a59f..67a58aaf25 100644 --- 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, 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), )}
- ${AccentColors.render?.({ ...context.args, ...AccentColors.args }, context)} -
${SignalColors.render?.({ ...context.args, ...SignalColors.args }, context)} `, diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts index 9ef2b2b16d..160270d993 100644 --- a/packages/documentation/src/stories/components/button/button.stories.ts +++ b/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: { diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss index 425a25309a..e58791d7b0 100644 --- a/packages/styles/src/components/button.scss +++ b/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); From 7ae1a29b7e1e24f171b68f914b8b45cb481d1b5f Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Tue, 8 Oct 2024 14:41:52 +0200 Subject: [PATCH 06/21] chore(styles): substituted the accent colors with hex values --- .../foundation/layout/columns/columns.styles.scss | 10 ++++------ .../stories/foundation/layout/grid/grid.styles.scss | 4 ++-- packages/documentation/src/stories/home.styles.scss | 2 +- packages/styles/src/variables/components/_code.scss | 2 +- 4 files changed, 8 insertions(+), 10 deletions(-) diff --git a/packages/documentation/src/stories/foundation/layout/columns/columns.styles.scss b/packages/documentation/src/stories/foundation/layout/columns/columns.styles.scss index 6946909b68..0ca6b8aa18 100644 --- a/packages/documentation/src/stories/foundation/layout/columns/columns.styles.scss +++ b/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%); } -} \ No newline at end of file +} diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss b/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss index 8f1ef67556..56a47a8877 100644 --- a/packages/documentation/src/stories/foundation/layout/grid/grid.styles.scss +++ b/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%); } } diff --git a/packages/documentation/src/stories/home.styles.scss b/packages/documentation/src/stories/home.styles.scss index 2d238cf481..5d85ccd27f 100644 --- a/packages/documentation/src/stories/home.styles.scss +++ b/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 { diff --git a/packages/styles/src/variables/components/_code.scss b/packages/styles/src/variables/components/_code.scss index b4ed42519d..4dd7dc38df 100644 --- a/packages/styles/src/variables/components/_code.scss +++ b/packages/styles/src/variables/components/_code.scss @@ -3,7 +3,7 @@ // Code $code-font-size: 1rem !default; -$code-color: color.$purple-bright !default; +$code-color: #004976 !default; $kbd-padding-y: 0.2rem !default; $kbd-padding-x: 0.4rem !default; From 9a1e68fbc0ccdae82cdc7f5d82534dd5e9795775 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Tue, 8 Oct 2024 14:42:20 +0200 Subject: [PATCH 07/21] chore(styles): substituted the accent colors with hex values --- .../getting-started/migration-guide/shared.component.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/getting-started/migration-guide/shared.component.scss b/packages/documentation/src/stories/getting-started/migration-guide/shared.component.scss index f77ec5c066..f1965cb901 100644 --- a/packages/documentation/src/stories/getting-started/migration-guide/shared.component.scss +++ b/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 { From 52c63a70db7b312272e60fb1a2bee34787fddee2 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Tue, 8 Oct 2024 14:45:41 +0200 Subject: [PATCH 08/21] chore(styles): removed the deprecated accent colors --- packages/styles/src/components/carousel.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/styles/src/components/carousel.scss b/packages/styles/src/components/carousel.scss index e19c5d9c7a..2290cdd03f 100644 --- a/packages/styles/src/components/carousel.scss +++ b/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; From 72f972b5db33bf0fef4670eab4f2acdd0290897b Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Wed, 9 Oct 2024 10:19:33 +0200 Subject: [PATCH 09/21] chore(styles): substitute the accent colors with hex values --- .idea/indexLayout.xml | 8 +++++ .../.storybook/styles/manager.scss | 10 +++--- .../src/shared/tile/tile.component.scss | 2 +- .../topic-teaser.snapshot.stories.ts | 2 +- .../topic-teaser/topic-teaser.stories.ts | 31 ++----------------- .../utilities/spacing/spacing.styles.scss | 4 +-- 6 files changed, 19 insertions(+), 38 deletions(-) create mode 100644 .idea/indexLayout.xml diff --git a/.idea/indexLayout.xml b/.idea/indexLayout.xml new file mode 100644 index 0000000000..7b08163ceb --- /dev/null +++ b/.idea/indexLayout.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/packages/documentation/.storybook/styles/manager.scss b/packages/documentation/.storybook/styles/manager.scss index 74c4bf74ac..58e2cb99f2 100644 --- a/packages/documentation/.storybook/styles/manager.scss +++ b/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; } } diff --git a/packages/documentation/src/shared/tile/tile.component.scss b/packages/documentation/src/shared/tile/tile.component.scss index e59f6fa2f7..d054281dd3 100644 --- a/packages/documentation/src/shared/tile/tile.component.scss +++ b/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; diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts index f441fab1b0..1b12a03621 100644 --- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts +++ b/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-dark'], linkCount: [1, 5, 10], }) .filter((args: Args) => args.title !== args.subtitle || args.linkCount == 5) diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts index 10cc43c464..0cbba85f76 100644 --- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts +++ b/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-dark', }, 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-dark'], table: { category: 'General', }, diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.styles.scss b/packages/documentation/src/stories/utilities/spacing/spacing.styles.scss index f9afc38bd2..49e084df0c 100644 --- a/packages/documentation/src/stories/utilities/spacing/spacing.styles.scss +++ b/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; From 3832a8df414a14153669aa2623c595ce0e359fd1 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Wed, 9 Oct 2024 10:20:09 +0200 Subject: [PATCH 10/21] chore(styles): delete the deprecated accent colors from project variables --- packages/styles/src/variables/_color.scss | 34 ----------------------- 1 file changed, 34 deletions(-) diff --git a/packages/styles/src/variables/_color.scss b/packages/styles/src/variables/_color.scss index b06b201078..3f438ac8de 100644 --- a/packages/styles/src/variables/_color.scss +++ b/packages/styles/src/variables/_color.scss @@ -51,20 +51,6 @@ $success-background: #c0debb; $error-background: #ffdade; $warning-background: #fce2b2; -// Accent colors -$nightblue-dark: #004976; -$nightblue-bright: #0076a8; -$petrol-dark: #006d68; -$petrol-bright: #00968f; -$coral-dark: #9e2a2f; -$coral-bright: #e03c31; -$purple-dark: #80276c; -$purple-bright: #c5299b; -$olive-dark: #716135; -$olive-bright: #aa9d2e; -$aubergine-dark: #523178; -$aubergine-bright: #7566a0; - /** * Maps. Allow maps to have custom colors from the project * by always merging into a default empty map @@ -127,25 +113,6 @@ $signal-background-colors: map.merge( ) ); -$accent-colors: () !default; -$accent-colors: map.merge( - $accent-colors, - ( - 'nightblue': $nightblue-dark, - 'nightblue-bright': $nightblue-bright, - 'petrol': $petrol-dark, - 'petrol-bright': $petrol-bright, - 'coral': $coral-dark, - 'coral-bright': $coral-bright, - 'olive': $olive-dark, - 'olive-bright': $olive-bright, - 'purple': $purple-dark, - 'purple-bright': $purple-bright, - 'aubergine': $aubergine-dark, - 'aubergine-bright': $aubergine-bright, - ) -); - // List of possible background colors with some synonyms for easier usage $background-colors: () !default; $background-colors: map.merge( @@ -182,7 +149,6 @@ $notification-colors: list.join( // Merge with the other color maps $background-colors: map.merge($background-colors, $signal-colors); $background-colors: map.merge($background-colors, $signal-background-colors); -$background-colors: map.merge($background-colors, $accent-colors); // Compile a list of light and dark backgrounds, used in the :is selector mixin at mixins/color $_backgrounds: ( From 11881db651404dc55fd113157823fa5f0b52afdb Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Wed, 9 Oct 2024 11:19:06 +0200 Subject: [PATCH 11/21] chore(styles): substituted the accent color background bg-nightblue with bg-dark --- .../header/overrides-stories/header-css-variables.stories.ts | 2 +- .../projects/styles-primeng-showcase/src/app/app.component.html | 2 +- .../projects/styles-primeng-showcase/src/app/app.component.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-css-variables.stories.ts b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-css-variables.stories.ts index 23995b5877..fa7598fc5a 100644 --- a/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-css-variables.stories.ts +++ b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-css-variables.stories.ts @@ -24,7 +24,7 @@ export const Default = { } ${meta.render && meta.render(args, context)} -

+

I am sticky! I am always positioned right below the header when you scroll up and down.

`; diff --git a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html index 3fe9ef430b..69061786fc 100644 --- a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html +++ b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html @@ -3,7 +3,7 @@

PrimeNg data table showcase

Date: Wed, 9 Oct 2024 11:33:54 +0200 Subject: [PATCH 12/21] fix(styles): revert the styles which do not belong to the current commit --- packages/styles/src/placeholders/_text.scss | 142 -------------------- 1 file changed, 142 deletions(-) diff --git a/packages/styles/src/placeholders/_text.scss b/packages/styles/src/placeholders/_text.scss index 60aba27b09..f60d971dae 100644 --- a/packages/styles/src/placeholders/_text.scss +++ b/packages/styles/src/placeholders/_text.scss @@ -1,154 +1,12 @@ -@use 'sass:map'; -@use './../themes/bootstrap/core' as *; -@use './../variables/spacing'; @use './../variables/type'; -@use './../variables/color'; -@use './../mixins/size' as size-mx; @use './../mixins/type' as type-mx; @use './../variables/components/paragraph'; -%list-adjustment { - ul { - position: relative; - margin-top: paragraph.$text-bottom-space; - margin-bottom: paragraph.$text-bottom-space; - padding-left: map.get(spacing.$post-sizes, 'big'); - list-style: none; - text-align: left; - - li { - margin-bottom: paragraph.$text-bottom-space * 0.5; - - &::before { - content: '\2013'; - display: inline-block; - position: absolute; - left: 0; - } - - &:last-child { - margin-bottom: 0; - } - } - } -} - @each $key, $value in type.$font-curves { %font-curve-#{$key} { @include type-mx.font-curve($key); } } - %text-bottom-spacer { margin-bottom: paragraph.$text-bottom-space; // 0.8 times the size of the current font (20px) = 16px } - -// Removes margin-top from first and margin-bottom from last child -%module-container { - > :first-child { - margin-top: 0; - } - - > :last-child { - margin-bottom: 0; - } -} - -%default-module-spacer { - margin-top: map.get(spacing.$post-sizes, 'huge'); // 56px - margin-bottom: map.get(spacing.$post-sizes, 'huge'); // 56px - - @include media-breakpoint-up(md) { - margin-top: map.get(spacing.$post-sizes, 'giant'); // 80px - margin-bottom: map.get(spacing.$post-sizes, 'giant'); // 80px - } -} - -%text-container { - @extend %module-container; - - ul { - position: relative; - margin-top: paragraph.$text-bottom-space; - margin-bottom: paragraph.$text-bottom-space; - padding-left: map.get(spacing.$post-sizes, 'big'); - list-style: none; - - li { - @extend %font-curve-regular; - @extend %text-bottom-spacer; - - &::before { - content: '\2013'; - display: inline-block; - position: absolute; - left: 0; - } - - &:last-child { - margin-bottom: 0; - } - } - - &.bulletpoints { - padding-left: map.get(spacing.$post-sizes, 'big'); - - @include media-breakpoint-up(md) { - padding-left: map.get(spacing.$post-sizes, 'bigger-big'); - } - - li { - position: relative; - - // stylelint-disable-next-line max-nesting-depth - &::before { - content: ''; - position: absolute; - top: 2px; - left: -(map.get(spacing.$post-sizes, 'big')); - width: map.get(spacing.$post-sizes, 'small-large'); - height: map.get(spacing.$post-sizes, 'small-large'); - border-radius: 50%; - - @include media-breakpoint-up(md) { - left: -(map.get(spacing.$post-sizes, 'bigger-big')); - width: map.get(spacing.$post-sizes, 'large'); - height: map.get(spacing.$post-sizes, 'large'); - } - } - } - } - } - - ol { - position: relative; - margin-top: paragraph.$text-bottom-space; - margin-bottom: paragraph.$text-bottom-space; - padding-left: map.get(spacing.$post-sizes, 'big'); - list-style: none; - counter-reset: li-counter; - - li { - counter-increment: li-counter; - - &::before { - content: counter(li-counter) '.'; - position: absolute; - left: 0; - } - } - } - - .h-highlighted { - @extend %font-curve-regular; - @extend %text-bottom-spacer; - @include size-mx.bezel-regular; - - @include media-breakpoint-up(lg) { - @include size-mx.bezel-medium; - } - @include media-breakpoint-up(xxl) { - @include size-mx.bezel-large; - } - } -} From 496dedd60775df724da453c58a5c6d8594cc7551 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Wed, 9 Oct 2024 11:35:08 +0200 Subject: [PATCH 13/21] fix(styles): revert the styles which do not belong to the current commit --- packages/styles/src/placeholders/_text.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/styles/src/placeholders/_text.scss b/packages/styles/src/placeholders/_text.scss index f60d971dae..75243af932 100644 --- a/packages/styles/src/placeholders/_text.scss +++ b/packages/styles/src/placeholders/_text.scss @@ -7,6 +7,7 @@ @include type-mx.font-curve($key); } } + %text-bottom-spacer { margin-bottom: paragraph.$text-bottom-space; // 0.8 times the size of the current font (20px) = 16px } From db94b7eb35c30090957db9adc12ea646c55bbae2 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Wed, 9 Oct 2024 11:47:56 +0200 Subject: [PATCH 14/21] chore(changeset): added the changeset message --- .changeset/red-cobras-cry.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/red-cobras-cry.md diff --git a/.changeset/red-cobras-cry.md b/.changeset/red-cobras-cry.md new file mode 100644 index 0000000000..6f59e68b98 --- /dev/null +++ b/.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': patch +--- + +Removed deprecated accent colors and updated all relevant components, documentation, and utilities. From 7c4a39eb2e981eb7ccde0ffa9c73dad043322b86 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Wed, 16 Oct 2024 11:55:27 +0200 Subject: [PATCH 15/21] fix(changeset): the changeset size was adjusted --- .changeset/red-cobras-cry.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/red-cobras-cry.md b/.changeset/red-cobras-cry.md index 6f59e68b98..179292720f 100644 --- a/.changeset/red-cobras-cry.md +++ b/.changeset/red-cobras-cry.md @@ -1,7 +1,7 @@ --- '@swisspost/design-system-styles-primeng-workspace': patch '@swisspost/design-system-documentation': patch -'@swisspost/design-system-styles': patch +'@swisspost/design-system-styles': major --- Removed deprecated accent colors and updated all relevant components, documentation, and utilities. From da740f4116a0a8c88693bbd65907543e692f18db Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Wed, 16 Oct 2024 12:02:21 +0200 Subject: [PATCH 16/21] fix(changeset): changeset message was adjusted --- .changeset/red-cobras-cry.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/red-cobras-cry.md b/.changeset/red-cobras-cry.md index 179292720f..7dab717fee 100644 --- a/.changeset/red-cobras-cry.md +++ b/.changeset/red-cobras-cry.md @@ -4,4 +4,4 @@ '@swisspost/design-system-styles': major --- -Removed deprecated accent colors and updated all relevant components, documentation, and utilities. +Removed deprecated accent colors (nightblue, petrol, coral, olive, purple, aubergine and their light variations) and updated all relevant components, documentation, and utilities. \ No newline at end of file From 6176302bd2ab063ae1dd1381af1698c8dc34f8bb Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Wed, 16 Oct 2024 12:03:13 +0200 Subject: [PATCH 17/21] Delete .idea/indexLayout.xml --- .idea/indexLayout.xml | 8 -------- 1 file changed, 8 deletions(-) delete mode 100644 .idea/indexLayout.xml diff --git a/.idea/indexLayout.xml b/.idea/indexLayout.xml deleted file mode 100644 index 7b08163ceb..0000000000 --- a/.idea/indexLayout.xml +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file From b4bd45b40cad16cbc039a4b58a119c50e72ceac8 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Wed, 16 Oct 2024 12:04:45 +0200 Subject: [PATCH 18/21] chore(styles): change the background color for topic teaser documentation Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> --- .../components/topic-teaser/topic-teaser.snapshot.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts index 1b12a03621..680e52cec0 100644 --- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.snapshot.stories.ts +++ b/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-light', 'bg-dark'], + backgroundColor: ['bg-light', 'bg-yellow'], linkCount: [1, 5, 10], }) .filter((args: Args) => args.title !== args.subtitle || args.linkCount == 5) From fd1491a183c129b6fdea30f8b47cf5a6b28678d0 Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Wed, 16 Oct 2024 12:05:42 +0200 Subject: [PATCH 19/21] chore(background): fix the background color in topic-teaser Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> --- .../src/stories/components/topic-teaser/topic-teaser.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts index 0cbba85f76..6fb6d27851 100644 --- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts +++ b/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-dark', + backgroundColor: 'bg-yellow', }, argTypes: { title: { From 468093f38440b0f04e6f08e00a53e948b6e720ee Mon Sep 17 00:00:00 2001 From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com> Date: Wed, 16 Oct 2024 12:06:25 +0200 Subject: [PATCH 20/21] change(styles): change the background color for topic-teaser stories Co-authored-by: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com> --- .../src/stories/components/topic-teaser/topic-teaser.stories.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts index 6fb6d27851..d60948a87c 100644 --- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts +++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts @@ -80,7 +80,7 @@ const meta: MetaComponent = { 'bg-dark': 'Dark', }, }, - options: ['bg-light', 'bg-dark'], + options: ['bg-light', 'bg-yellow'], table: { category: 'General', }, From 1ea1d3cc12d016b3fa991ef8578b948ce0dca8d7 Mon Sep 17 00:00:00 2001 From: "Zherdetska Alona, IT21.1" Date: Wed, 16 Oct 2024 12:57:57 +0200 Subject: [PATCH 21/21] change(styles): the bg-aubergine was changed to bg-dark --- .../stories/utilities/background/background.stories.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/documentation/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts index 4ac0d880f4..3d8e27f20c 100644 --- a/packages/documentation/src/stories/utilities/background/background.stories.ts +++ b/packages/documentation/src/stories/utilities/background/background.stories.ts @@ -40,10 +40,10 @@ export const NestedBackgrounds: Story = { export const TranslucentBackgrounds: Story = { render: () => html` -
Container with default opacity (1).
-
Container with opacity 0.8.
-
Container with opacity 0.6.
-
Container with opacity 0.4.
-
Container with opacity 0.2.
+
Container with default opacity (1).
+
Container with opacity 0.8.
+
Container with opacity 0.6.
+
Container with opacity 0.4.
+
Container with opacity 0.2.
`, };