From 01b3916b9fccb7502f241ed36eeff9c570de4164 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Thu, 20 Jun 2024 16:51:09 +0100 Subject: [PATCH 1/3] Add status bold tokens --- .changeset/afraid-jobs-do.md | 12 ++++++ .storybook/preview.tsx | 37 +++++++++------- .../theme/css/characteristics/status-next.css | 5 +++ packages/theme/css/characteristics/status.css | 5 +++ packages/theme/css/palette/error.css | 2 + packages/theme/css/palette/info.css | 2 + packages/theme/css/palette/success.css | 2 + packages/theme/css/palette/warning.css | 2 + .../theme/stories/characteristics/status.mdx | 42 +++++++++++++++++++ 9 files changed, 95 insertions(+), 14 deletions(-) create mode 100644 .changeset/afraid-jobs-do.md create mode 100644 packages/theme/stories/characteristics/status.mdx diff --git a/.changeset/afraid-jobs-do.md b/.changeset/afraid-jobs-do.md new file mode 100644 index 00000000000..fd79a9239a7 --- /dev/null +++ b/.changeset/afraid-jobs-do.md @@ -0,0 +1,12 @@ +--- +"@salt-ds/theme": minor +--- + +Added status bold background tokens + +``` +--salt-status-info-bold-background +--salt-status-error-bold-background +--salt-status-warning-bold-background +--salt-status-success-bold-background +``` diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index dc5016de19a..db85e47e509 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -22,7 +22,7 @@ import { withResponsiveWrapper } from "docs/decorators/withResponsiveWrapper"; import { WithTextSpacingWrapper } from "docs/decorators/withTextSpacingWrapper"; import { withScaffold } from "docs/decorators/withScaffold"; import { withDateMock } from "docs/decorators/withDateMock"; -import { SaltProvider } from "@salt-ds/core"; +import { SaltProvider, UNSTABLE_SaltProviderNext } from "@salt-ds/core"; import { DocsContainer } from "@storybook/addon-docs"; import { initialize, mswLoader } from "msw-storybook-addon"; @@ -147,20 +147,29 @@ export const parameters: Parameters = { children, context, ...rest - }: ComponentProps) => ( - - ) => { + const ChosenProvider = + /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */ + context.store.globals.globals?.themeNext === "enable" + ? UNSTABLE_SaltProviderNext + : SaltProvider; + return ( + + - {children} - - - ), + mode={context.store.globals.globals?.mode} + enableStyleInjection={ + /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */ + context.store.globals.globals?.styleInjection === "enable" + } + /* @ts-ignore Waiting for https://github.com/storybookjs/storybook/issues/12982 */ + accent={context.store.globals.globals?.accent} + > + {children} + + + ); + }, }, // disables snapshotting on a global level chromatic: { disableSnapshot: true }, diff --git a/packages/theme/css/characteristics/status-next.css b/packages/theme/css/characteristics/status-next.css index 31710238e4f..08a74b1193c 100644 --- a/packages/theme/css/characteristics/status-next.css +++ b/packages/theme/css/characteristics/status-next.css @@ -23,6 +23,11 @@ --salt-status-warning-background: var(--salt-palette-warning-weak); --salt-status-error-background: var(--salt-palette-negative-weak); + --salt-status-info-bold-background: var(--salt-palette-info); + --salt-status-error-bold-background: var(--salt-palette-negative); + --salt-status-warning-bold-background: var(--salt-palette-warning); + --salt-status-success-bold-background: var(--salt-palette-positive); + --salt-status-success-background-selected: var(--salt-palette-positive-weak); --salt-status-warning-background-selected: var(--salt-palette-warning-weak); --salt-status-error-background-selected: var(--salt-palette-negative-weak); diff --git a/packages/theme/css/characteristics/status.css b/packages/theme/css/characteristics/status.css index 15b27be6400..e213e47e3ba 100644 --- a/packages/theme/css/characteristics/status.css +++ b/packages/theme/css/characteristics/status.css @@ -23,6 +23,11 @@ --salt-status-warning-background: var(--salt-palette-warning-background); --salt-status-success-background: var(--salt-palette-success-background); + --salt-status-info-bold-background: var(--salt-palette-info-bold-background); + --salt-status-error-bold-background: var(--salt-palette-error-bold-background); + --salt-status-warning-bold-background: var(--salt-palette-warning-bold-background); + --salt-status-success-bold-background: var(--salt-palette-success-bold-background); + --salt-status-error-background-selected: var(--salt-palette-error-background-selected); --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected); --salt-status-success-background-selected: var(--salt-palette-success-background-selected); diff --git a/packages/theme/css/palette/error.css b/packages/theme/css/palette/error.css index 521bf507051..06861bb1a75 100644 --- a/packages/theme/css/palette/error.css +++ b/packages/theme/css/palette/error.css @@ -1,5 +1,6 @@ .salt-theme[data-mode="light"] { --salt-palette-error-background: var(--salt-color-red-10); + --salt-palette-error-bold-background: var(--salt-color-red-500); --salt-palette-error-background-selected: var(--salt-color-red-20); --salt-palette-error-border: var(--salt-color-red-500); --salt-palette-error-foreground-decorative: var(--salt-color-red-500); @@ -8,6 +9,7 @@ .salt-theme[data-mode="dark"] { --salt-palette-error-background: var(--salt-color-red-900); + --salt-palette-error-bold-background: var(--salt-color-red-500); --salt-palette-error-background-selected: var(--salt-color-red-900); --salt-palette-error-border: var(--salt-color-red-400); --salt-palette-error-foreground-decorative: var(--salt-color-red-400); diff --git a/packages/theme/css/palette/info.css b/packages/theme/css/palette/info.css index 1b0d87e547b..a64da046ff6 100644 --- a/packages/theme/css/palette/info.css +++ b/packages/theme/css/palette/info.css @@ -1,5 +1,6 @@ .salt-theme[data-mode="light"] { --salt-palette-info-background: var(--salt-color-blue-10); + --salt-palette-info-bold-background: var(--salt-color-blue-500); --salt-palette-info-border: var(--salt-color-blue-500); --salt-palette-info-foreground-decorative: var(--salt-color-blue-500); --salt-palette-info-foreground-informative: var(--salt-color-blue-600); @@ -7,6 +8,7 @@ .salt-theme[data-mode="dark"] { --salt-palette-info-background: var(--salt-color-blue-900); + --salt-palette-info-bold-background: var(--salt-color-blue-500); --salt-palette-info-border: var(--salt-color-blue-400); --salt-palette-info-foreground-decorative: var(--salt-color-blue-400); --salt-palette-info-foreground-informative: var(--salt-color-blue-200); diff --git a/packages/theme/css/palette/success.css b/packages/theme/css/palette/success.css index 3e8ebde5675..01d7af398e4 100644 --- a/packages/theme/css/palette/success.css +++ b/packages/theme/css/palette/success.css @@ -1,5 +1,6 @@ .salt-theme[data-mode="light"] { --salt-palette-success-background: var(--salt-color-green-10); + --salt-palette-success-bold-background: var(--salt-color-green-500); --salt-palette-success-background-selected: var(--salt-color-green-20); --salt-palette-success-border: var(--salt-color-green-500); --salt-palette-success-foreground-decorative: var(--salt-color-green-500); @@ -8,6 +9,7 @@ .salt-theme[data-mode="dark"] { --salt-palette-success-background: var(--salt-color-green-900); + --salt-palette-success-bold-background: var(--salt-color-green-500); --salt-palette-success-background-selected: var(--salt-color-green-900); --salt-palette-success-border: var(--salt-color-green-400); --salt-palette-success-foreground-decorative: var(--salt-color-green-400); diff --git a/packages/theme/css/palette/warning.css b/packages/theme/css/palette/warning.css index 9862ef9a13a..584c841e088 100644 --- a/packages/theme/css/palette/warning.css +++ b/packages/theme/css/palette/warning.css @@ -1,5 +1,6 @@ .salt-theme[data-mode="light"] { --salt-palette-warning-background: var(--salt-color-orange-10); + --salt-palette-warning-bold-background: var(--salt-color-orange-800); --salt-palette-warning-background-selected: var(--salt-color-orange-20); --salt-palette-warning-border: var(--salt-color-orange-700); --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700); @@ -8,6 +9,7 @@ .salt-theme[data-mode="dark"] { --salt-palette-warning-background: var(--salt-color-orange-900); + --salt-palette-warning-bold-background: var(--salt-color-orange-800); --salt-palette-warning-background-selected: var(--salt-color-orange-900); --salt-palette-warning-border: var(--salt-color-orange-500); --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500); diff --git a/packages/theme/stories/characteristics/status.mdx b/packages/theme/stories/characteristics/status.mdx new file mode 100644 index 00000000000..efbc3fd05bb --- /dev/null +++ b/packages/theme/stories/characteristics/status.mdx @@ -0,0 +1,42 @@ +import { Meta } from "@storybook/blocks"; +import { ColorContainer } from "docs/components/ColorContainer"; +import { ColorItem, ColorPalette } from "@storybook/blocks"; + + + +# Status + +## Bold Background + + + + + + + + + From 793812b21d357718c4a526e1bc23bbfbd9f820b6 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Fri, 28 Jun 2024 11:58:27 +0100 Subject: [PATCH 2/3] Adds content bold foreground tokens --- .../css/characteristics/content-next.css | 3 +++ .../theme/css/characteristics/content.css | 3 +++ .../theme/stories/characteristics/content.mdx | 26 +++++++++++++++++++ 3 files changed, 32 insertions(+) create mode 100644 packages/theme/stories/characteristics/content.mdx diff --git a/packages/theme/css/characteristics/content-next.css b/packages/theme/css/characteristics/content-next.css index 277ffd1a8d4..dfcac9686dd 100644 --- a/packages/theme/css/characteristics/content-next.css +++ b/packages/theme/css/characteristics/content-next.css @@ -4,6 +4,9 @@ --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary); --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled); + --salt-content-bold-foreground: var(--salt-palette-foreground-primary-alt); + --salt-content-bold-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled); + --salt-content-foreground-hover: var(--salt-palette-foreground-hover); --salt-content-foreground-active: var(--salt-palette-foreground-active); --salt-content-foreground-visited: var(--salt-palette-foreground-visited); diff --git a/packages/theme/css/characteristics/content.css b/packages/theme/css/characteristics/content.css index 8cdf6efdde5..365b3804b89 100644 --- a/packages/theme/css/characteristics/content.css +++ b/packages/theme/css/characteristics/content.css @@ -5,6 +5,9 @@ --salt-content-secondary-foreground: var(--salt-palette-neutral-secondary-foreground); --salt-content-secondary-foreground-disabled: var(--salt-palette-neutral-secondary-foreground-disabled); + --salt-content-bold-foreground: var(--salt-palette-interact-cta-foreground); + --salt-content-bold-foreground-disabled: var(--salt-palette-interact-cta-foreground-disabled); + --salt-content-foreground-hover: var(--salt-palette-navigate-foreground-hover); --salt-content-foreground-active: var(--salt-palette-navigate-foreground-active); --salt-content-foreground-visited: var(--salt-palette-navigate-foreground-visited); diff --git a/packages/theme/stories/characteristics/content.mdx b/packages/theme/stories/characteristics/content.mdx new file mode 100644 index 00000000000..fce46ebacf4 --- /dev/null +++ b/packages/theme/stories/characteristics/content.mdx @@ -0,0 +1,26 @@ +import { Meta } from "@storybook/blocks"; +import { ColorContainer } from "docs/components/ColorContainer"; +import { ColorItem, ColorPalette } from "@storybook/blocks"; + + + +## Foreground + + + + + + + From 5cdf570fa8263b996728a1b57b786570613487c7 Mon Sep 17 00:00:00 2001 From: origami-z <5257855+origami-z@users.noreply.github.com> Date: Fri, 28 Jun 2024 12:57:21 +0100 Subject: [PATCH 3/3] Update changeset --- .changeset/afraid-jobs-do.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/.changeset/afraid-jobs-do.md b/.changeset/afraid-jobs-do.md index fd79a9239a7..bad30277d36 100644 --- a/.changeset/afraid-jobs-do.md +++ b/.changeset/afraid-jobs-do.md @@ -2,11 +2,14 @@ "@salt-ds/theme": minor --- -Added status bold background tokens +Added status bold background and content bold foreground tokens ``` --salt-status-info-bold-background --salt-status-error-bold-background --salt-status-warning-bold-background --salt-status-success-bold-background + +--salt-content-bold-foreground +--salt-content-bold-foreground-disabled ```