From f731417220cc49dea81ff28c8e67775021a3bd1e 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] 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 + + + + + + + + +