From c072e1f0ce298a535b08e87c0c7b05b693137b12 Mon Sep 17 00:00:00 2001 From: F745860 Date: Wed, 8 May 2024 15:15:47 +0530 Subject: [PATCH 1/9] Added Status to Text Component --- packages/core/src/text/Text.css | 19 ++++++++++++++++++ packages/core/src/text/Text.tsx | 17 ++++++++++++---- .../core/stories/text/text.qa.stories.tsx | 6 +++--- packages/core/stories/text/text.stories.tsx | 20 +++++++++++++++++-- .../contact-details/ContactPrimaryInfo.tsx | 6 +++--- .../contact-details/ContactSecondaryInfo.tsx | 2 +- .../contact-details/ContactTertiaryInfo.tsx | 2 +- packages/lab/src/contact-details/types.ts | 3 ++- .../stepped-tracker/StepLabel/StepLabel.tsx | 6 +++--- packages/theme/css/characteristics/status.css | 11 +++++++--- .../theme/css/deprecated/characteristics.css | 4 ++++ packages/theme/css/deprecated/palette.css | 4 ++++ packages/theme/css/foundations/color.css | 1 + packages/theme/css/palette/error.css | 6 ++++++ packages/theme/css/palette/success.css | 6 ++++++ packages/theme/css/palette/warning.css | 6 ++++++ .../theme/stories/palettes/error.stories.mdx | 10 +++++++--- .../stories/palettes/success.stories.mdx | 10 +++++++--- .../stories/palettes/warning.stories.mdx | 10 +++++++--- site/docs/components/text/examples.mdx | 14 ++++++++++++- site/src/examples/text/Color.tsx | 10 ++++++++++ site/src/examples/text/index.ts | 1 + 22 files changed, 143 insertions(+), 31 deletions(-) create mode 100644 site/src/examples/text/Color.tsx diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css index 1a599a39975..dc9b8f77144 100644 --- a/packages/core/src/text/Text.css +++ b/packages/core/src/text/Text.css @@ -1,3 +1,7 @@ +.saltText { + --text-color: currentColor; +} + /* Main css class. Style for body text */ .saltText { color: var(--saltText-color, var(--text-color)); @@ -40,6 +44,21 @@ --text-color: var(--salt-content-secondary-foreground-disabled); } +/* Success variant */ +.saltText-success { + --text-color: var(--salt-success-foreground-informative); +} + +/* Warning variant */ +.saltText-warning { + --text-color: var(--salt-warning-foreground-informative); +} + +/* Error variant */ +.saltText-error { + --text-color: var(--salt-error-foreground-informative); +} + /* Body emphasis strong */ .saltText strong { font-weight: var(--salt-text-fontWeight-strong); diff --git a/packages/core/src/text/Text.tsx b/packages/core/src/text/Text.tsx index 15cbe5ef73f..f83025eb886 100644 --- a/packages/core/src/text/Text.tsx +++ b/packages/core/src/text/Text.tsx @@ -38,8 +38,13 @@ export type TextProps = PolymorphicComponentPropWithRef< | "code"; /** * Change text color palette + * @deprecated Use `color` instead */ variant?: "primary" | "secondary"; + /* + * The color of the text. Defaults to "primary". + */ + color?: "inherit" | "primary" | "secondary" | "success" | "warning" | "error" | "info"; } >; @@ -59,7 +64,8 @@ export const Text: TextComponent = forwardRef( maxRows, style, styleAs, - variant = "primary", + variant, + color: colorProp, ...restProps }: TextProps, ref?: PolymorphicRef @@ -71,10 +77,12 @@ export const Text: TextComponent = forwardRef( window: targetWindow, }); - const Component = as || "div"; + const Component = as ?? "div"; const textStyles = { "--text-max-rows": maxRows, ...style }; + const color = variant ?? colorProp ?? "primary"; + return ( = (props) => ( Primary disabled strong and small text - + Secondary strong and small text - + Secondary disabled strong and small text @@ -133,4 +133,4 @@ export const NoStyleInjectionGrid: StoryFn = ( NoStyleInjectionGrid.parameters = { chromatic: { disableSnapshot: false }, -}; +}; \ No newline at end of file diff --git a/packages/core/stories/text/text.stories.tsx b/packages/core/stories/text/text.stories.tsx index 9a56c645dcf..e16bcef64ab 100644 --- a/packages/core/stories/text/text.stories.tsx +++ b/packages/core/stories/text/text.stories.tsx @@ -31,14 +31,30 @@ export const Primary: StoryFn = () => { }; export const Secondary: StoryFn = () => { - return This is a secondary text example; + return This is a secondary text example; +}; + +export const Success: StoryFn = () => { + return This is a success text example; +}; + +export const Warning: StoryFn = () => { + return This is a warning text example; +}; + +export const Error: StoryFn = () => { + return This is a error text example; +}; + +export const InheritColor: StoryFn = () => { + return This is a secondary text example; }; export const Disabled: StoryFn = () => { return (
This is a disabled primary text example - + This is a disabled secondary text example
diff --git a/packages/lab/src/contact-details/ContactPrimaryInfo.tsx b/packages/lab/src/contact-details/ContactPrimaryInfo.tsx index b068d09d0be..ec1f373504c 100644 --- a/packages/lab/src/contact-details/ContactPrimaryInfo.tsx +++ b/packages/lab/src/contact-details/ContactPrimaryInfo.tsx @@ -6,7 +6,7 @@ import { useContactDetailsContext } from "./internal"; const withBaseName = makePrefixer("saltContactPrimaryInfo"); export interface ContactPrimaryInfoProps - extends HTMLAttributes { + extends Omit, "color"> { text: string; } @@ -43,8 +43,8 @@ export const ContactPrimaryInfo = forwardRef< styleAs={variant === "default" ? "h2" : "h4"} className={clsx(withBaseName(), className)} role="heading" - aria-labelledby={`${id} ${secondaryId != null ? secondaryId : null} ${ - tertiaryId != null ? tertiaryId : null + aria-labelledby={`${id} ${secondaryId ?? null} ${ + tertiaryId ?? null }`} aria-level={ariaLevel} data-testid="primary" diff --git a/packages/lab/src/contact-details/ContactSecondaryInfo.tsx b/packages/lab/src/contact-details/ContactSecondaryInfo.tsx index 131c681d846..8b4027b88c8 100644 --- a/packages/lab/src/contact-details/ContactSecondaryInfo.tsx +++ b/packages/lab/src/contact-details/ContactSecondaryInfo.tsx @@ -8,7 +8,7 @@ import { ValueComponentProps } from "./types"; const withBaseName = makePrefixer("saltContactSecondaryInfo"); export interface ContactSecondaryInfoProps - extends HTMLAttributes { + extends Omit, "color"> { icon?: ComponentType; text: string; ValueComponent?: ComponentType; diff --git a/packages/lab/src/contact-details/ContactTertiaryInfo.tsx b/packages/lab/src/contact-details/ContactTertiaryInfo.tsx index 33be19745a4..15393f23e54 100644 --- a/packages/lab/src/contact-details/ContactTertiaryInfo.tsx +++ b/packages/lab/src/contact-details/ContactTertiaryInfo.tsx @@ -7,7 +7,7 @@ import { useContactDetailsContext } from "./internal"; const withBaseName = makePrefixer("saltContactTertiaryInfo"); export interface ContactTertiaryInfoProps - extends HTMLAttributes { + extends Omit, "color"> { icon?: ComponentType; text: string; } diff --git a/packages/lab/src/contact-details/types.ts b/packages/lab/src/contact-details/types.ts index 9c59707192e..3198fbb9d28 100644 --- a/packages/lab/src/contact-details/types.ts +++ b/packages/lab/src/contact-details/types.ts @@ -1,5 +1,6 @@ import { HTMLAttributes } from "react"; -export interface ValueComponentProps extends HTMLAttributes { +export interface ValueComponentProps + extends Omit, "color"> { value?: string; } diff --git a/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx b/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx index c278edaab85..9dd7a71a291 100644 --- a/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx +++ b/packages/lab/src/stepped-tracker/StepLabel/StepLabel.tsx @@ -1,6 +1,6 @@ -import { forwardRef, ComponentPropsWithoutRef, ReactNode } from "react"; +import { forwardRef, ReactNode } from "react"; import { clsx } from "clsx"; -import { makePrefixer, Label } from "@salt-ds/core"; +import { makePrefixer, Label, TextProps } from "@salt-ds/core"; import { useComponentCssInjection } from "@salt-ds/styles"; import { useWindow } from "@salt-ds/window"; @@ -8,7 +8,7 @@ import stepLabelCss from "./StepLabel.css"; const withBaseName = makePrefixer("saltStepLabel"); -export interface StepLabelProps extends ComponentPropsWithoutRef<"label"> { +export interface StepLabelProps extends TextProps<"label"> { /** * The content of Step Label */ diff --git a/packages/theme/css/characteristics/status.css b/packages/theme/css/characteristics/status.css index 10eee8ea869..44b085b65bb 100644 --- a/packages/theme/css/characteristics/status.css +++ b/packages/theme/css/characteristics/status.css @@ -1,11 +1,11 @@ .salt-theme { --salt-status-info-foreground: var(--salt-palette-info-foreground); - --salt-status-success-foreground: var(--salt-palette-success-foreground); - --salt-status-warning-foreground: var(--salt-palette-warning-foreground); - --salt-status-error-foreground: var(--salt-palette-error-foreground); --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground); --salt-status-negative-foreground: var(--salt-palette-negative-foreground); --salt-status-positive-foreground: var(--salt-palette-positive-foreground); + --salt-success-foreground-informative: var(--salt-palette-success-foreground-informative); + --salt-warning-foreground-informative: var(--salt-palette-warning-foreground-informative); + --salt-error-foreground-informative: var(--salt-palette-error-foreground-informative); --salt-status-info-borderColor: var(--salt-palette-info-border); --salt-status-success-borderColor: var(--salt-palette-success-border); @@ -20,4 +20,9 @@ --salt-status-success-background-selected: var(--salt-palette-success-background-selected); --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected); --salt-status-error-background-selected: var(--salt-palette-error-background-selected); + + /* Deprecate all below */ + --salt-status-success-foreground: var(--salt-palette-success-foreground); + --salt-status-warning-foreground: var(--salt-palette-warning-foreground); + --salt-status-error-foreground: var(--salt-palette-error-foreground); } diff --git a/packages/theme/css/deprecated/characteristics.css b/packages/theme/css/deprecated/characteristics.css index b2082278ae5..3da28482d33 100644 --- a/packages/theme/css/deprecated/characteristics.css +++ b/packages/theme/css/deprecated/characteristics.css @@ -96,6 +96,10 @@ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled); --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled); + --salt-status-success-foreground: var(--salt-palette-success-foreground); + --salt-status-warning-foreground: var(--salt-palette-warning-foreground); + --salt-status-error-foreground: var(--salt-palette-error-foreground); + /* Actionable */ --salt-actionable-letterSpacing: 0.6px; --salt-actionable-textTransform: uppercase; diff --git a/packages/theme/css/deprecated/palette.css b/packages/theme/css/deprecated/palette.css index 0d428ac0d5e..0c4dc7b08c4 100644 --- a/packages/theme/css/deprecated/palette.css +++ b/packages/theme/css/deprecated/palette.css @@ -63,6 +63,10 @@ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground); --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border); + --salt-palette-success-foreground: var(--salt-color-green-500); + --salt-palette-warning-foreground: var(--salt-color-orange-700); + --salt-palette-error-foreground: var(--salt-color-red-500); + /* Navigate */ --salt-palette-navigate-primary-background: transparent; --salt-palette-navigate-primary-background-active: transparent; diff --git a/packages/theme/css/foundations/color.css b/packages/theme/css/foundations/color.css index 792f656855d..c3563bf2807 100644 --- a/packages/theme/css/foundations/color.css +++ b/packages/theme/css/foundations/color.css @@ -31,6 +31,7 @@ --salt-color-orange-600: rgb(224, 101, 25); --salt-color-orange-700: rgb(214, 85, 19); --salt-color-orange-800: rgb(204, 68, 13); + --salt-color-orange-850: rgb(199, 53, 13); --salt-color-orange-900: rgb(54, 44, 36); --salt-color-green-10: rgb(209, 244, 201); diff --git a/packages/theme/css/palette/error.css b/packages/theme/css/palette/error.css index 3b1704168a7..9d3e05e2dd7 100644 --- a/packages/theme/css/palette/error.css +++ b/packages/theme/css/palette/error.css @@ -2,6 +2,9 @@ --salt-palette-error-background: var(--salt-color-red-10); --salt-palette-error-background-selected: var(--salt-color-red-20); --salt-palette-error-border: var(--salt-color-red-500); + --salt-palette-error-foreground-informative: var(--salt-color-red-600); + --salt-palette-error-foreground-decorative: var(--salt-color-red-500); + /* Deprecated */ --salt-palette-error-foreground: var(--salt-color-red-500); } @@ -9,5 +12,8 @@ --salt-palette-error-background: var(--salt-color-red-900); --salt-palette-error-background-selected: var(--salt-color-red-900); --salt-palette-error-border: var(--salt-color-red-500); + --salt-palette-error-foreground-informative: var(--salt-color-red-200); + --salt-palette-error-foreground-decorative: var(--salt-color-red-500); + /* Deprecated */ --salt-palette-error-foreground: var(--salt-color-red-500); } diff --git a/packages/theme/css/palette/success.css b/packages/theme/css/palette/success.css index 5133a2a931e..23c6b5e85e1 100644 --- a/packages/theme/css/palette/success.css +++ b/packages/theme/css/palette/success.css @@ -2,6 +2,9 @@ --salt-palette-success-background: var(--salt-color-green-10); --salt-palette-success-background-selected: var(--salt-color-green-20); --salt-palette-success-border: var(--salt-color-green-500); + --salt-palette-success-foreground-informative: var(--salt-color-green-600); + --salt-palette-success-foreground-decorative: var(--salt-color-green-500); + /* Deprecated */ --salt-palette-success-foreground: var(--salt-color-green-500); } @@ -9,5 +12,8 @@ --salt-palette-success-background: var(--salt-color-green-900); --salt-palette-success-background-selected: var(--salt-color-green-900); --salt-palette-success-border: var(--salt-color-green-400); + --salt-palette-success-foreground-informative: var(--salt-color-green-200); + --salt-palette-success-foreground-decorative: var(--salt-color-green-400); + /* Deprecated */ --salt-palette-success-foreground: var(--salt-color-green-400); } diff --git a/packages/theme/css/palette/warning.css b/packages/theme/css/palette/warning.css index 80470a6cf1f..e1bf6188396 100644 --- a/packages/theme/css/palette/warning.css +++ b/packages/theme/css/palette/warning.css @@ -2,6 +2,9 @@ --salt-palette-warning-background: var(--salt-color-orange-10); --salt-palette-warning-background-selected: var(--salt-color-orange-20); --salt-palette-warning-border: var(--salt-color-orange-700); + --salt-palette-warning-foreground-informative: var(--salt-color-orange-850); + --salt-palette-error-foreground-decorative: var(--salt-color-orange-700); + /* Deprecated */ --salt-palette-warning-foreground: var(--salt-color-orange-700); } @@ -9,5 +12,8 @@ --salt-palette-warning-background: var(--salt-color-orange-900); --salt-palette-warning-background-selected: var(--salt-color-orange-900); --salt-palette-warning-border: var(--salt-color-orange-500); + --salt-palette-warning-foreground-informative: var(--salt-color-orange-400); + --salt-palette-error-foreground-decorative: var(--salt-color-orange-500); + /* Deprecated */ --salt-palette-warning-foreground: var(--salt-color-orange-500); } diff --git a/packages/theme/stories/palettes/error.stories.mdx b/packages/theme/stories/palettes/error.stories.mdx index c8c98192c14..d93563d5064 100644 --- a/packages/theme/stories/palettes/error.stories.mdx +++ b/packages/theme/stories/palettes/error.stories.mdx @@ -28,10 +28,10 @@ Colors used to symbolise an error state. /> + diff --git a/packages/theme/stories/palettes/success.stories.mdx b/packages/theme/stories/palettes/success.stories.mdx index 1db29b1baee..e82378bc4a0 100644 --- a/packages/theme/stories/palettes/success.stories.mdx +++ b/packages/theme/stories/palettes/success.stories.mdx @@ -28,10 +28,10 @@ Colors symbolising a success state or indication of process completion. /> + diff --git a/packages/theme/stories/palettes/warning.stories.mdx b/packages/theme/stories/palettes/warning.stories.mdx index e1af4d6c59d..537964e7a8b 100644 --- a/packages/theme/stories/palettes/warning.stories.mdx +++ b/packages/theme/stories/palettes/warning.stories.mdx @@ -28,10 +28,10 @@ Colors symbolising a warning state. /> + diff --git a/site/docs/components/text/examples.mdx b/site/docs/components/text/examples.mdx index ad70fbe2bbd..100eb78038d 100644 --- a/site/docs/components/text/examples.mdx +++ b/site/docs/components/text/examples.mdx @@ -60,10 +60,22 @@ Using the `styleAs` prop, you can maintain the correct HTML hierarchy and the ap - + + +## Color + +Use the `color` prop to adjust the foreground color of any nested text. Use the `primary` color most of the time, the `secondary` color for supporting text or to create visual hierarchy, and `inherit` to inherit text color from the parent element. + +Read our [guidance on how to use text color](/salt/foundations/typography#color). + + + + ## Variant +**Note:** This prop is deprecated. Use the `color` prop instead. + Use the `variant` prop to adjust the foreground color of any nested text. Use the `primary` variant most often, and the `secondary` variant for supporting text or creating a visual hierarchy. Read our [guidance on how to use text color](/salt/foundations/typography#color). diff --git a/site/src/examples/text/Color.tsx b/site/src/examples/text/Color.tsx new file mode 100644 index 00000000000..d41489744cb --- /dev/null +++ b/site/src/examples/text/Color.tsx @@ -0,0 +1,10 @@ +import { ReactElement } from "react"; +import { Text, StackLayout } from "@salt-ds/core"; + +export const Color = (): ReactElement => ( + + This is primary color of Text + This is secondary color of Text + This is inherited color of Text + +); \ No newline at end of file diff --git a/site/src/examples/text/index.ts b/site/src/examples/text/index.ts index dcd0e2da48f..a924ced1780 100644 --- a/site/src/examples/text/index.ts +++ b/site/src/examples/text/index.ts @@ -2,3 +2,4 @@ export * from "./Styles"; export * from "./Styling"; export * from "./Truncation"; export * from "./Variant"; +export * from "./Color"; From 53ab090cc932176f85649adac44763a6da908d42 Mon Sep 17 00:00:00 2001 From: F745860 Date: Wed, 8 May 2024 15:32:07 +0530 Subject: [PATCH 2/9] Added Status to Text Component added to the site --- site/src/examples/text/Color.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/src/examples/text/Color.tsx b/site/src/examples/text/Color.tsx index d41489744cb..d837008c399 100644 --- a/site/src/examples/text/Color.tsx +++ b/site/src/examples/text/Color.tsx @@ -6,5 +6,8 @@ export const Color = (): ReactElement => ( This is primary color of Text This is secondary color of Text This is inherited color of Text + This is success color of Text + This is warning color of Text + This is error color of Text ); \ No newline at end of file From e663fe7c62bdeaadf377ca9fd407587fe5c0cc6f Mon Sep 17 00:00:00 2001 From: F745860 Date: Thu, 9 May 2024 11:11:59 +0530 Subject: [PATCH 3/9] review comments addressed --- packages/core/src/text/Text.css | 6 ++--- packages/core/src/text/Text.tsx | 9 +++++-- .../core/stories/text/text.qa.stories.tsx | 24 ++++++++++++++++--- .../contact-details/ContactPrimaryInfo.tsx | 4 +--- packages/theme/css/characteristics/status.css | 11 +++------ packages/theme/css/palette/error.css | 4 ---- packages/theme/css/palette/success.css | 4 ---- packages/theme/css/palette/warning.css | 4 ---- 8 files changed, 35 insertions(+), 31 deletions(-) diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css index dc9b8f77144..a403ba2a2b6 100644 --- a/packages/core/src/text/Text.css +++ b/packages/core/src/text/Text.css @@ -46,17 +46,17 @@ /* Success variant */ .saltText-success { - --text-color: var(--salt-success-foreground-informative); + --text-color: var(--salt-status-success-foreground-informative); } /* Warning variant */ .saltText-warning { - --text-color: var(--salt-warning-foreground-informative); + --text-color: var(--salt-status-warning-foreground-informative); } /* Error variant */ .saltText-error { - --text-color: var(--salt-error-foreground-informative); + --text-color: var(--salt-status-error-foreground-informative); } /* Body emphasis strong */ diff --git a/packages/core/src/text/Text.tsx b/packages/core/src/text/Text.tsx index be534a6cd4f..04c2b7398c1 100644 --- a/packages/core/src/text/Text.tsx +++ b/packages/core/src/text/Text.tsx @@ -44,7 +44,13 @@ export type TextProps = PolymorphicComponentPropWithRef< /* * The color of the text. Defaults to "primary". */ - color?: "inherit" | "primary" | "secondary" | "success" | "warning" | "error"; + color?: + | "inherit" + | "primary" + | "secondary" + | "success" + | "warning" + | "error"; } >; @@ -104,4 +110,3 @@ export const Text: TextComponent = forwardRef( ); } ); - diff --git a/packages/core/stories/text/text.qa.stories.tsx b/packages/core/stories/text/text.qa.stories.tsx index abad39ac4cf..2f54c17d67c 100644 --- a/packages/core/stories/text/text.qa.stories.tsx +++ b/packages/core/stories/text/text.qa.stories.tsx @@ -39,6 +39,15 @@ export const AllVariantsGrid: StoryFn = (props) => ( Secondary disabled strong and small text + + Success strong and small text + + + Warning strong and small text + + + Error strong and small text + Display 1 strong and small text @@ -89,12 +98,21 @@ export const NoStyleInjectionGrid: StoryFn = ( Primary disabled strong and small text - + Secondary strong and small text - + Secondary disabled strong and small text + + Success strong and small text + + + Warning strong and small text + + + Error strong and small text + Display 1 strong and small text @@ -133,4 +151,4 @@ export const NoStyleInjectionGrid: StoryFn = ( NoStyleInjectionGrid.parameters = { chromatic: { disableSnapshot: false }, -}; \ No newline at end of file +}; diff --git a/packages/lab/src/contact-details/ContactPrimaryInfo.tsx b/packages/lab/src/contact-details/ContactPrimaryInfo.tsx index b159ebab181..5bf0be0bab3 100644 --- a/packages/lab/src/contact-details/ContactPrimaryInfo.tsx +++ b/packages/lab/src/contact-details/ContactPrimaryInfo.tsx @@ -43,9 +43,7 @@ export const ContactPrimaryInfo = forwardRef< styleAs={variant === "default" ? "h2" : "h4"} className={clsx(withBaseName(), className)} role="heading" - aria-labelledby={`${id} ${secondaryId ?? null} ${ - tertiaryId ?? null - }`} + aria-labelledby={`${id} ${secondaryId ?? null} ${tertiaryId ?? null}`} aria-level={ariaLevel} data-testid="primary" > diff --git a/packages/theme/css/characteristics/status.css b/packages/theme/css/characteristics/status.css index 44b085b65bb..3789c2f6066 100644 --- a/packages/theme/css/characteristics/status.css +++ b/packages/theme/css/characteristics/status.css @@ -3,9 +3,9 @@ --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground); --salt-status-negative-foreground: var(--salt-palette-negative-foreground); --salt-status-positive-foreground: var(--salt-palette-positive-foreground); - --salt-success-foreground-informative: var(--salt-palette-success-foreground-informative); - --salt-warning-foreground-informative: var(--salt-palette-warning-foreground-informative); - --salt-error-foreground-informative: var(--salt-palette-error-foreground-informative); + --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative); + --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative); + --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative); --salt-status-info-borderColor: var(--salt-palette-info-border); --salt-status-success-borderColor: var(--salt-palette-success-border); @@ -20,9 +20,4 @@ --salt-status-success-background-selected: var(--salt-palette-success-background-selected); --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected); --salt-status-error-background-selected: var(--salt-palette-error-background-selected); - - /* Deprecate all below */ - --salt-status-success-foreground: var(--salt-palette-success-foreground); - --salt-status-warning-foreground: var(--salt-palette-warning-foreground); - --salt-status-error-foreground: var(--salt-palette-error-foreground); } diff --git a/packages/theme/css/palette/error.css b/packages/theme/css/palette/error.css index 9d3e05e2dd7..75425b02e36 100644 --- a/packages/theme/css/palette/error.css +++ b/packages/theme/css/palette/error.css @@ -4,8 +4,6 @@ --salt-palette-error-border: var(--salt-color-red-500); --salt-palette-error-foreground-informative: var(--salt-color-red-600); --salt-palette-error-foreground-decorative: var(--salt-color-red-500); - /* Deprecated */ - --salt-palette-error-foreground: var(--salt-color-red-500); } .salt-theme[data-mode="dark"] { @@ -14,6 +12,4 @@ --salt-palette-error-border: var(--salt-color-red-500); --salt-palette-error-foreground-informative: var(--salt-color-red-200); --salt-palette-error-foreground-decorative: var(--salt-color-red-500); - /* Deprecated */ - --salt-palette-error-foreground: var(--salt-color-red-500); } diff --git a/packages/theme/css/palette/success.css b/packages/theme/css/palette/success.css index 23c6b5e85e1..042f5590664 100644 --- a/packages/theme/css/palette/success.css +++ b/packages/theme/css/palette/success.css @@ -4,8 +4,6 @@ --salt-palette-success-border: var(--salt-color-green-500); --salt-palette-success-foreground-informative: var(--salt-color-green-600); --salt-palette-success-foreground-decorative: var(--salt-color-green-500); - /* Deprecated */ - --salt-palette-success-foreground: var(--salt-color-green-500); } .salt-theme[data-mode="dark"] { @@ -14,6 +12,4 @@ --salt-palette-success-border: var(--salt-color-green-400); --salt-palette-success-foreground-informative: var(--salt-color-green-200); --salt-palette-success-foreground-decorative: var(--salt-color-green-400); - /* Deprecated */ - --salt-palette-success-foreground: var(--salt-color-green-400); } diff --git a/packages/theme/css/palette/warning.css b/packages/theme/css/palette/warning.css index e1bf6188396..844a93320ba 100644 --- a/packages/theme/css/palette/warning.css +++ b/packages/theme/css/palette/warning.css @@ -4,8 +4,6 @@ --salt-palette-warning-border: var(--salt-color-orange-700); --salt-palette-warning-foreground-informative: var(--salt-color-orange-850); --salt-palette-error-foreground-decorative: var(--salt-color-orange-700); - /* Deprecated */ - --salt-palette-warning-foreground: var(--salt-color-orange-700); } .salt-theme[data-mode="dark"] { @@ -14,6 +12,4 @@ --salt-palette-warning-border: var(--salt-color-orange-500); --salt-palette-warning-foreground-informative: var(--salt-color-orange-400); --salt-palette-error-foreground-decorative: var(--salt-color-orange-500); - /* Deprecated */ - --salt-palette-warning-foreground: var(--salt-color-orange-500); } From 5db466a8a631f856b5a67af96477278bf90ce54e Mon Sep 17 00:00:00 2001 From: F745860 Date: Thu, 9 May 2024 13:18:13 +0530 Subject: [PATCH 4/9] added info status --- packages/core/src/text/Text.css | 5 +++++ packages/core/src/text/Text.tsx | 3 ++- packages/core/stories/text/text.qa.stories.tsx | 6 ++++++ packages/core/stories/text/text.stories.tsx | 4 ++++ packages/theme/css/characteristics/status.css | 1 + packages/theme/css/palette/info.css | 4 ++++ site/src/examples/text/Color.tsx | 1 + 7 files changed, 23 insertions(+), 1 deletion(-) diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css index a403ba2a2b6..b055d1abbb8 100644 --- a/packages/core/src/text/Text.css +++ b/packages/core/src/text/Text.css @@ -59,6 +59,11 @@ --text-color: var(--salt-status-error-foreground-informative); } +/* Info variant */ +.saltText-info { + --text-color: var(--salt-status-info-foreground-informative); +} + /* Body emphasis strong */ .saltText strong { font-weight: var(--salt-text-fontWeight-strong); diff --git a/packages/core/src/text/Text.tsx b/packages/core/src/text/Text.tsx index 04c2b7398c1..6fd2e4db9d3 100644 --- a/packages/core/src/text/Text.tsx +++ b/packages/core/src/text/Text.tsx @@ -50,7 +50,8 @@ export type TextProps = PolymorphicComponentPropWithRef< | "secondary" | "success" | "warning" - | "error"; + | "error" + | "info"; } >; diff --git a/packages/core/stories/text/text.qa.stories.tsx b/packages/core/stories/text/text.qa.stories.tsx index 2f54c17d67c..c9ef10ddb45 100644 --- a/packages/core/stories/text/text.qa.stories.tsx +++ b/packages/core/stories/text/text.qa.stories.tsx @@ -48,6 +48,9 @@ export const AllVariantsGrid: StoryFn = (props) => ( Error strong and small text + + Info strong and small text + Display 1 strong and small text @@ -113,6 +116,9 @@ export const NoStyleInjectionGrid: StoryFn = ( Error strong and small text + + Info strong and small text + Display 1 strong and small text diff --git a/packages/core/stories/text/text.stories.tsx b/packages/core/stories/text/text.stories.tsx index e16bcef64ab..f1d7d97f9b2 100644 --- a/packages/core/stories/text/text.stories.tsx +++ b/packages/core/stories/text/text.stories.tsx @@ -46,6 +46,10 @@ export const Error: StoryFn = () => { return This is a error text example; }; +export const Info: StoryFn = () => { + return This is a info text example; +}; + export const InheritColor: StoryFn = () => { return This is a secondary text example; }; diff --git a/packages/theme/css/characteristics/status.css b/packages/theme/css/characteristics/status.css index 3789c2f6066..3768628d18b 100644 --- a/packages/theme/css/characteristics/status.css +++ b/packages/theme/css/characteristics/status.css @@ -6,6 +6,7 @@ --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative); --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative); --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative); + --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative); --salt-status-info-borderColor: var(--salt-palette-info-border); --salt-status-success-borderColor: var(--salt-palette-success-border); diff --git a/packages/theme/css/palette/info.css b/packages/theme/css/palette/info.css index 8682ee6054c..43269aeffee 100644 --- a/packages/theme/css/palette/info.css +++ b/packages/theme/css/palette/info.css @@ -2,10 +2,14 @@ --salt-palette-info-background: var(--salt-color-blue-10); --salt-palette-info-border: var(--salt-color-blue-500); --salt-palette-info-foreground: var(--salt-color-blue-500); + --salt-palette-info-foreground-informative: var(--salt-color-blue-600); + --salt-palette-info-foreground-decorative: var(--salt-color-blue-500); } .salt-theme[data-mode="dark"] { --salt-palette-info-background: var(--salt-color-blue-900); --salt-palette-info-border: var(--salt-color-blue-500); --salt-palette-info-foreground: var(--salt-color-blue-500); + --salt-palette-info-foreground-informative: var(--salt-color-blue-200); + --salt-palette-info-foreground-decorative: var(--salt-color-blue-100); } diff --git a/site/src/examples/text/Color.tsx b/site/src/examples/text/Color.tsx index ce7bc3a28e1..70c054562a6 100644 --- a/site/src/examples/text/Color.tsx +++ b/site/src/examples/text/Color.tsx @@ -9,5 +9,6 @@ export const Color = (): ReactElement => ( This is success color of Text This is warning color of Text This is error color of Text + This is error color of Text ); From 41f00c565386461307a1c8aa7b00c8355ec16577 Mon Sep 17 00:00:00 2001 From: F745860 Date: Thu, 9 May 2024 13:58:08 +0530 Subject: [PATCH 5/9] changed status-warning-foreground-informative color as per requirement --- packages/theme/css/palette/warning.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/theme/css/palette/warning.css b/packages/theme/css/palette/warning.css index 844a93320ba..01348ec4c01 100644 --- a/packages/theme/css/palette/warning.css +++ b/packages/theme/css/palette/warning.css @@ -2,7 +2,7 @@ --salt-palette-warning-background: var(--salt-color-orange-10); --salt-palette-warning-background-selected: var(--salt-color-orange-20); --salt-palette-warning-border: var(--salt-color-orange-700); - --salt-palette-warning-foreground-informative: var(--salt-color-orange-850); + --salt-palette-warning-foreground-informative: var(--salt-color-orange-800); --salt-palette-error-foreground-decorative: var(--salt-color-orange-700); } From 8bc9b6482848b94870055cebdb0d6d12aa1b5f01 Mon Sep 17 00:00:00 2001 From: F745860 Date: Wed, 8 May 2024 15:15:47 +0530 Subject: [PATCH 6/9] Added Status to Text Component --- packages/core/src/text/Text.css | 20 +++++++++++++ packages/core/src/text/Text.tsx | 9 +++++- .../core/stories/text/text.qa.stories.tsx | 28 +++++++++++++++++-- packages/core/stories/text/text.stories.tsx | 18 +++++++++++- .../contact-details/ContactPrimaryInfo.tsx | 6 ++-- packages/theme/css/characteristics/status.css | 7 +++-- .../theme/css/deprecated/characteristics.css | 4 +++ packages/theme/css/deprecated/palette.css | 4 +++ packages/theme/css/foundations/color.css | 1 + packages/theme/css/palette/error.css | 6 ++-- packages/theme/css/palette/info.css | 4 +++ packages/theme/css/palette/success.css | 6 ++-- packages/theme/css/palette/warning.css | 6 ++-- .../theme/stories/palettes/error.stories.mdx | 10 +++++-- .../stories/palettes/success.stories.mdx | 10 +++++-- .../stories/palettes/warning.stories.mdx | 10 +++++-- site/src/examples/text/Color.tsx | 4 +++ 17 files changed, 127 insertions(+), 26 deletions(-) diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css index 5f8a35440c5..b055d1abbb8 100644 --- a/packages/core/src/text/Text.css +++ b/packages/core/src/text/Text.css @@ -44,6 +44,26 @@ --text-color: var(--salt-content-secondary-foreground-disabled); } +/* Success variant */ +.saltText-success { + --text-color: var(--salt-status-success-foreground-informative); +} + +/* Warning variant */ +.saltText-warning { + --text-color: var(--salt-status-warning-foreground-informative); +} + +/* Error variant */ +.saltText-error { + --text-color: var(--salt-status-error-foreground-informative); +} + +/* Info variant */ +.saltText-info { + --text-color: var(--salt-status-info-foreground-informative); +} + /* Body emphasis strong */ .saltText strong { font-weight: var(--salt-text-fontWeight-strong); diff --git a/packages/core/src/text/Text.tsx b/packages/core/src/text/Text.tsx index fef7f6355b5..6fd2e4db9d3 100644 --- a/packages/core/src/text/Text.tsx +++ b/packages/core/src/text/Text.tsx @@ -44,7 +44,14 @@ export type TextProps = PolymorphicComponentPropWithRef< /* * The color of the text. Defaults to "primary". */ - color?: "inherit" | "primary" | "secondary"; + color?: + | "inherit" + | "primary" + | "secondary" + | "success" + | "warning" + | "error" + | "info"; } >; diff --git a/packages/core/stories/text/text.qa.stories.tsx b/packages/core/stories/text/text.qa.stories.tsx index 1aed88db028..c9ef10ddb45 100644 --- a/packages/core/stories/text/text.qa.stories.tsx +++ b/packages/core/stories/text/text.qa.stories.tsx @@ -39,6 +39,18 @@ export const AllVariantsGrid: StoryFn = (props) => ( Secondary disabled strong and small text + + Success strong and small text + + + Warning strong and small text + + + Error strong and small text + + + Info strong and small text + Display 1 strong and small text @@ -89,12 +101,24 @@ export const NoStyleInjectionGrid: StoryFn = ( Primary disabled strong and small text - + Secondary strong and small text - + Secondary disabled strong and small text + + Success strong and small text + + + Warning strong and small text + + + Error strong and small text + + + Info strong and small text + Display 1 strong and small text diff --git a/packages/core/stories/text/text.stories.tsx b/packages/core/stories/text/text.stories.tsx index 9f4ff9e0162..d95839199c6 100644 --- a/packages/core/stories/text/text.stories.tsx +++ b/packages/core/stories/text/text.stories.tsx @@ -34,8 +34,24 @@ export const Secondary: StoryFn = () => { return This is a secondary text example; }; +export const Success: StoryFn = () => { + return This is a success text example; +}; + +export const Warning: StoryFn = () => { + return This is a warning text example; +}; + +export const Error: StoryFn = () => { + return This is a error text example; +}; + +export const Info: StoryFn = () => { + return This is a info text example; +}; + export const InheritColor: StoryFn = () => { - return This is a secondary text example; + return This is a inherit text example; }; export const Disabled: StoryFn = () => { diff --git a/packages/lab/src/contact-details/ContactPrimaryInfo.tsx b/packages/lab/src/contact-details/ContactPrimaryInfo.tsx index 49d5bf4bf47..698c743b74c 100644 --- a/packages/lab/src/contact-details/ContactPrimaryInfo.tsx +++ b/packages/lab/src/contact-details/ContactPrimaryInfo.tsx @@ -6,7 +6,7 @@ import { useContactDetailsContext } from "./internal"; const withBaseName = makePrefixer("saltContactPrimaryInfo"); export interface ContactPrimaryInfoProps - extends Omit, "color"> { + extends Omit, "color"> { text: string; } @@ -43,9 +43,7 @@ export const ContactPrimaryInfo = forwardRef< styleAs={variant === "default" ? "h2" : "h4"} className={clsx(withBaseName(), className)} role="heading" - aria-labelledby={`${id} ${secondaryId != null ? secondaryId : null} ${ - tertiaryId != null ? tertiaryId : null - }`} + aria-labelledby={`${id} ${secondaryId ?? null} ${tertiaryId ?? null}`} aria-level={ariaLevel} data-testid="primary" > diff --git a/packages/theme/css/characteristics/status.css b/packages/theme/css/characteristics/status.css index 10eee8ea869..3768628d18b 100644 --- a/packages/theme/css/characteristics/status.css +++ b/packages/theme/css/characteristics/status.css @@ -1,11 +1,12 @@ .salt-theme { --salt-status-info-foreground: var(--salt-palette-info-foreground); - --salt-status-success-foreground: var(--salt-palette-success-foreground); - --salt-status-warning-foreground: var(--salt-palette-warning-foreground); - --salt-status-error-foreground: var(--salt-palette-error-foreground); --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground); --salt-status-negative-foreground: var(--salt-palette-negative-foreground); --salt-status-positive-foreground: var(--salt-palette-positive-foreground); + --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative); + --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative); + --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative); + --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative); --salt-status-info-borderColor: var(--salt-palette-info-border); --salt-status-success-borderColor: var(--salt-palette-success-border); diff --git a/packages/theme/css/deprecated/characteristics.css b/packages/theme/css/deprecated/characteristics.css index b2082278ae5..3da28482d33 100644 --- a/packages/theme/css/deprecated/characteristics.css +++ b/packages/theme/css/deprecated/characteristics.css @@ -96,6 +96,10 @@ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled); --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled); + --salt-status-success-foreground: var(--salt-palette-success-foreground); + --salt-status-warning-foreground: var(--salt-palette-warning-foreground); + --salt-status-error-foreground: var(--salt-palette-error-foreground); + /* Actionable */ --salt-actionable-letterSpacing: 0.6px; --salt-actionable-textTransform: uppercase; diff --git a/packages/theme/css/deprecated/palette.css b/packages/theme/css/deprecated/palette.css index 0d428ac0d5e..0c4dc7b08c4 100644 --- a/packages/theme/css/deprecated/palette.css +++ b/packages/theme/css/deprecated/palette.css @@ -63,6 +63,10 @@ --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground); --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border); + --salt-palette-success-foreground: var(--salt-color-green-500); + --salt-palette-warning-foreground: var(--salt-color-orange-700); + --salt-palette-error-foreground: var(--salt-color-red-500); + /* Navigate */ --salt-palette-navigate-primary-background: transparent; --salt-palette-navigate-primary-background-active: transparent; diff --git a/packages/theme/css/foundations/color.css b/packages/theme/css/foundations/color.css index 792f656855d..c3563bf2807 100644 --- a/packages/theme/css/foundations/color.css +++ b/packages/theme/css/foundations/color.css @@ -31,6 +31,7 @@ --salt-color-orange-600: rgb(224, 101, 25); --salt-color-orange-700: rgb(214, 85, 19); --salt-color-orange-800: rgb(204, 68, 13); + --salt-color-orange-850: rgb(199, 53, 13); --salt-color-orange-900: rgb(54, 44, 36); --salt-color-green-10: rgb(209, 244, 201); diff --git a/packages/theme/css/palette/error.css b/packages/theme/css/palette/error.css index 3b1704168a7..75425b02e36 100644 --- a/packages/theme/css/palette/error.css +++ b/packages/theme/css/palette/error.css @@ -2,12 +2,14 @@ --salt-palette-error-background: var(--salt-color-red-10); --salt-palette-error-background-selected: var(--salt-color-red-20); --salt-palette-error-border: var(--salt-color-red-500); - --salt-palette-error-foreground: var(--salt-color-red-500); + --salt-palette-error-foreground-informative: var(--salt-color-red-600); + --salt-palette-error-foreground-decorative: var(--salt-color-red-500); } .salt-theme[data-mode="dark"] { --salt-palette-error-background: var(--salt-color-red-900); --salt-palette-error-background-selected: var(--salt-color-red-900); --salt-palette-error-border: var(--salt-color-red-500); - --salt-palette-error-foreground: var(--salt-color-red-500); + --salt-palette-error-foreground-informative: var(--salt-color-red-200); + --salt-palette-error-foreground-decorative: var(--salt-color-red-500); } diff --git a/packages/theme/css/palette/info.css b/packages/theme/css/palette/info.css index 8682ee6054c..43269aeffee 100644 --- a/packages/theme/css/palette/info.css +++ b/packages/theme/css/palette/info.css @@ -2,10 +2,14 @@ --salt-palette-info-background: var(--salt-color-blue-10); --salt-palette-info-border: var(--salt-color-blue-500); --salt-palette-info-foreground: var(--salt-color-blue-500); + --salt-palette-info-foreground-informative: var(--salt-color-blue-600); + --salt-palette-info-foreground-decorative: var(--salt-color-blue-500); } .salt-theme[data-mode="dark"] { --salt-palette-info-background: var(--salt-color-blue-900); --salt-palette-info-border: var(--salt-color-blue-500); --salt-palette-info-foreground: var(--salt-color-blue-500); + --salt-palette-info-foreground-informative: var(--salt-color-blue-200); + --salt-palette-info-foreground-decorative: var(--salt-color-blue-100); } diff --git a/packages/theme/css/palette/success.css b/packages/theme/css/palette/success.css index 5133a2a931e..042f5590664 100644 --- a/packages/theme/css/palette/success.css +++ b/packages/theme/css/palette/success.css @@ -2,12 +2,14 @@ --salt-palette-success-background: var(--salt-color-green-10); --salt-palette-success-background-selected: var(--salt-color-green-20); --salt-palette-success-border: var(--salt-color-green-500); - --salt-palette-success-foreground: var(--salt-color-green-500); + --salt-palette-success-foreground-informative: var(--salt-color-green-600); + --salt-palette-success-foreground-decorative: var(--salt-color-green-500); } .salt-theme[data-mode="dark"] { --salt-palette-success-background: var(--salt-color-green-900); --salt-palette-success-background-selected: var(--salt-color-green-900); --salt-palette-success-border: var(--salt-color-green-400); - --salt-palette-success-foreground: var(--salt-color-green-400); + --salt-palette-success-foreground-informative: var(--salt-color-green-200); + --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 80470a6cf1f..01348ec4c01 100644 --- a/packages/theme/css/palette/warning.css +++ b/packages/theme/css/palette/warning.css @@ -2,12 +2,14 @@ --salt-palette-warning-background: var(--salt-color-orange-10); --salt-palette-warning-background-selected: var(--salt-color-orange-20); --salt-palette-warning-border: var(--salt-color-orange-700); - --salt-palette-warning-foreground: var(--salt-color-orange-700); + --salt-palette-warning-foreground-informative: var(--salt-color-orange-800); + --salt-palette-error-foreground-decorative: var(--salt-color-orange-700); } .salt-theme[data-mode="dark"] { --salt-palette-warning-background: var(--salt-color-orange-900); --salt-palette-warning-background-selected: var(--salt-color-orange-900); --salt-palette-warning-border: var(--salt-color-orange-500); - --salt-palette-warning-foreground: var(--salt-color-orange-500); + --salt-palette-warning-foreground-informative: var(--salt-color-orange-400); + --salt-palette-error-foreground-decorative: var(--salt-color-orange-500); } diff --git a/packages/theme/stories/palettes/error.stories.mdx b/packages/theme/stories/palettes/error.stories.mdx index c8c98192c14..d93563d5064 100644 --- a/packages/theme/stories/palettes/error.stories.mdx +++ b/packages/theme/stories/palettes/error.stories.mdx @@ -28,10 +28,10 @@ Colors used to symbolise an error state. /> + diff --git a/packages/theme/stories/palettes/success.stories.mdx b/packages/theme/stories/palettes/success.stories.mdx index 1db29b1baee..e82378bc4a0 100644 --- a/packages/theme/stories/palettes/success.stories.mdx +++ b/packages/theme/stories/palettes/success.stories.mdx @@ -28,10 +28,10 @@ Colors symbolising a success state or indication of process completion. /> + diff --git a/packages/theme/stories/palettes/warning.stories.mdx b/packages/theme/stories/palettes/warning.stories.mdx index e1af4d6c59d..537964e7a8b 100644 --- a/packages/theme/stories/palettes/warning.stories.mdx +++ b/packages/theme/stories/palettes/warning.stories.mdx @@ -28,10 +28,10 @@ Colors symbolising a warning state. /> + diff --git a/site/src/examples/text/Color.tsx b/site/src/examples/text/Color.tsx index 6634284edc8..70c054562a6 100644 --- a/site/src/examples/text/Color.tsx +++ b/site/src/examples/text/Color.tsx @@ -6,5 +6,9 @@ export const Color = (): ReactElement => ( This is primary color of Text This is secondary color of Text This is inherited color of Text + This is success color of Text + This is warning color of Text + This is error color of Text + This is error color of Text ); From 09a2817c9976208674c643fa05cac83914c4aeb0 Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Thu, 9 May 2024 13:04:15 +0100 Subject: [PATCH 7/9] Added changeset and fixed deprecation --- .changeset/dry-jokes-carry.md | 75 +++++++++ .changeset/early-feet-complain.md | 19 +++ .changeset/nice-singers-matter.md | 5 + packages/core/src/checkbox/Checkbox.css | 12 +- packages/core/src/checkbox/CheckboxIcon.css | 8 +- .../core/src/radio-button/RadioButton.css | 12 +- .../core/src/radio-button/RadioButtonIcon.css | 8 +- .../src/status-adornment/StatusAdornment.css | 6 +- .../src/status-indicator/StatusIndicator.css | 8 +- packages/core/src/text/Text.css | 24 +-- packages/core/src/text/Text.tsx | 10 +- .../core/stories/layout/layout.stories.css | 149 ------------------ .../core/stories/text/text.qa.stories.tsx | 29 ++-- packages/core/stories/text/text.stories.tsx | 16 +- .../TrackerStep/TrackerStep.css | 4 +- .../lab/stories/layout/layout.stories.css | 102 ------------ packages/theme/css/characteristics/status.css | 25 +-- .../theme/css/deprecated/characteristics.css | 5 +- packages/theme/css/deprecated/palette.css | 10 +- packages/theme/css/foundations/color.css | 2 +- packages/theme/css/palette/error.css | 4 +- packages/theme/css/palette/info.css | 6 +- packages/theme/css/palette/success.css | 4 +- packages/theme/css/palette/warning.css | 6 +- .../theme/stories/palettes/error.stories.mdx | 12 +- .../theme/stories/palettes/info.stories.mdx | 17 +- .../stories/palettes/success.stories.mdx | 12 +- .../stories/palettes/warning.stories.mdx | 12 +- site/docs/theming/index.mdx | 6 +- site/src/examples/text/Color.tsx | 8 +- 30 files changed, 229 insertions(+), 387 deletions(-) create mode 100644 .changeset/dry-jokes-carry.md create mode 100644 .changeset/early-feet-complain.md create mode 100644 .changeset/nice-singers-matter.md diff --git a/.changeset/dry-jokes-carry.md b/.changeset/dry-jokes-carry.md new file mode 100644 index 00000000000..509c7a77286 --- /dev/null +++ b/.changeset/dry-jokes-carry.md @@ -0,0 +1,75 @@ +--- +"@salt-ds/theme": minor +--- + +## Characteristics + +Added decorative and informative status foreground tokens. This ensures contrast requirements are met for both text and non-text elements. + +```diff ++ --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative); ++ --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative); ++ --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative); ++ --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative); ++ ++ --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative); ++ --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative); ++ --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative); ++ --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative); +``` + +Deprecated status foreground tokens. + +| Name | Replacement | +| -------------------------------- | ------------------------------------------- | +| --salt-status-info-foreground | --salt-status-info-foreground-decorative | +| --salt-status-error-foreground | --salt-status-error-foreground-decorative | +| --salt-status-warning-foreground | --salt-status-warning-foreground-decorative | +| --salt-status-success-foreground | --salt-status-success-foreground-decorative | + +## Palette + +Added decorative and informative info, error, warning and success foreground tokens. + +### Light + +```diff ++ --salt-palette-info-foreground-decorative: var(--salt-color-blue-500); ++ --salt-palette-info-foreground-informative: var(--salt-color-blue-600); ++ --salt-palette-error-foreground-decorative: var(--salt-color-red-500); ++ --salt-palette-error-foreground-informative: var(--salt-color-red-600); ++ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700); ++ --salt-palette-warning-foreground-informative: var(--salt-color-orange-850); ++ --salt-palette-success-foreground-decorative: var(--salt-color-green-500); ++ --salt-palette-success-foreground-informative: var(--salt-color-green-600); +``` + +### Dark + +```diff ++ --salt-palette-info-foreground-decorative: var(--salt-color-blue-100); ++ --salt-palette-info-foreground-informative: var(--salt-color-blue-200); ++ --salt-palette-error-foreground-decorative: var(--salt-color-red-500); ++ --salt-palette-error-foreground-informative: var(--salt-color-red-200); ++ --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500); ++ --salt-palette-warning-foreground-informative: var(--salt-color-orange-400); ++ --salt-palette-success-foreground-decorative: var(--salt-color-green-400); ++ --salt-palette-success-foreground-informative: var(--salt-color-green-200); +``` + +Deprecated status foreground tokens. + +| Name | Replacement | +| --------------------------------- | -------------------------------------------- | +| --salt-palette-info-foreground | --salt-palette-info-foreground-decorative | +| --salt-palette-error-foreground | --salt-palette-error-foreground-decorative | +| --salt-palette-warning-foreground | --salt-palette-warning-foreground-decorative | +| --salt-palette-success-foreground | --salt-palette-success-foreground-decorative | + +## Foundations + +Added `--salt-color-orange-850`: + +```diff ++ --salt-color-orange-850: rgb(194, 52, 7); +``` diff --git a/.changeset/early-feet-complain.md b/.changeset/early-feet-complain.md new file mode 100644 index 00000000000..14c19867c1f --- /dev/null +++ b/.changeset/early-feet-complain.md @@ -0,0 +1,19 @@ +--- +"@salt-ds/core": minor +--- + +Added status color support to Text. + +```tsx + This is error color of Text + This is error color of Text + This is warning color of Text + This is success color of Text +``` + +- Checkbox will now have the correct border color on focus when it is in an error or warning state. +- Checkbox now uses `--salt-status-error-foreground-decorative` and `--salt-status-warning-foreground-decorative` instead of `--salt-status-error-foreground` and `--salt-status-warning-foreground`. +- RadioButton will now have the correct border color on focus when it is in an error or warning state. +- RadioButton now uses `--salt-status-error-foreground-decorative` and `--salt-status-warning-foreground-decorative` instead of `--salt-status-error-foreground` and `--salt-status-warning-foreground`. +- StatusAdornment now uses `--salt-status-error-foreground-decorative`, `--salt-status-warning-foreground-decorative` and `--salt-status-success-foreground-decorative` instead of `--salt-status-error-foreground`, `--salt-status-warning-foreground` and `--salt-status-success-foreground`. +- StatusIndicator now uses `--salt-status-info-foreground-decorative`, `--salt-status-error-foreground-decorative`, `--salt-status-warning-foreground-decorative` and `--salt-status-success-foreground-decorative` instead of `--salt-status-info-foreground`, `--salt-status-error-foreground`, `--salt-status-warning-foreground`, `--salt-status-success-foreground`. diff --git a/.changeset/nice-singers-matter.md b/.changeset/nice-singers-matter.md new file mode 100644 index 00000000000..73ad5997c68 --- /dev/null +++ b/.changeset/nice-singers-matter.md @@ -0,0 +1,5 @@ +--- +"@salt-ds/lab": minor +--- + +TrackerStep now uses `--salt-status-success-foreground-decorative` and `--salt-status-info-foreground-decorative` instead of `--salt-status-success-foreground` and `--salt-status-info-foreground`. diff --git a/packages/core/src/checkbox/Checkbox.css b/packages/core/src/checkbox/Checkbox.css index a4140f5d72d..dffff71fbf2 100644 --- a/packages/core/src/checkbox/Checkbox.css +++ b/packages/core/src/checkbox/Checkbox.css @@ -47,15 +47,15 @@ } .saltCheckbox-error .saltCheckbox-input:focus-visible + .saltCheckboxIcon { - outline-color: var(--salt-status-error-foreground); - border-color: var(--salt-status-error-foreground); - color: var(--salt-status-error-foreground); + outline-color: var(--salt-status-error-foreground-decorative); + border-color: var(--salt-status-error-borderColor); + color: var(--salt-status-error-foreground-decorative); } .saltCheckbox-warning .saltCheckbox-input:focus-visible + .saltCheckboxIcon { - outline-color: var(--salt-status-warning-foreground); - border-color: var(--salt-status-warning-foreground); - color: var(--salt-status-warning-foreground); + outline-color: var(--salt-status-warning-foreground-decorative); + border-color: var(--salt-status-warning-borderColor); + color: var(--salt-status-warning-foreground-decorative); } /* Styles applied to input element */ diff --git a/packages/core/src/checkbox/CheckboxIcon.css b/packages/core/src/checkbox/CheckboxIcon.css index 68dd9966014..bbf3d3fae98 100644 --- a/packages/core/src/checkbox/CheckboxIcon.css +++ b/packages/core/src/checkbox/CheckboxIcon.css @@ -54,16 +54,16 @@ .saltCheckboxIcon-error, .saltCheckbox:hover .saltCheckboxIcon-error { - color: var(--salt-status-error-foreground); + color: var(--salt-status-error-foreground-decorative); border-color: var(--salt-status-error-borderColor); - outline-color: var(--salt-status-error-foreground); + outline-color: var(--salt-status-error-foreground-decorative); } .saltCheckboxIcon-warning, .saltCheckbox:hover .saltCheckboxIcon-warning { - color: var(--salt-status-warning-foreground); + color: var(--salt-status-warning-foreground-decorative); border-color: var(--salt-status-warning-borderColor); - outline-color: var(--salt-status-warning-foreground); + outline-color: var(--salt-status-warning-foreground-decorative); } .saltCheckboxIcon-readOnly, diff --git a/packages/core/src/radio-button/RadioButton.css b/packages/core/src/radio-button/RadioButton.css index c48463d09aa..3ab09fca814 100644 --- a/packages/core/src/radio-button/RadioButton.css +++ b/packages/core/src/radio-button/RadioButton.css @@ -62,13 +62,13 @@ } .saltRadioButton-error .saltRadioButton-input:focus-visible + .saltRadioButtonIcon { - outline-color: var(--salt-status-error-foreground); - border-color: var(--salt-status-error-foreground); - color: var(--salt-status-error-foreground); + outline-color: var(--salt-status-error-foreground-decorative); + border-color: var(--salt-status-error-borderColor); + color: var(--salt-status-error-foreground-decorative); } .saltRadioButton-warning .saltRadioButton-input:focus-visible + .saltRadioButtonIcon { - outline-color: var(--salt-status-warning-foreground); - border-color: var(--salt-status-warning-foreground); - color: var(--salt-status-warning-foreground); + outline-color: var(--salt-status-warning-foreground-decorative); + border-color: var(--salt-status-warning-borderColor); + color: var(--salt-status-warning-foreground-decorative); } diff --git a/packages/core/src/radio-button/RadioButtonIcon.css b/packages/core/src/radio-button/RadioButtonIcon.css index e0a09b85deb..d8145fb8aec 100644 --- a/packages/core/src/radio-button/RadioButtonIcon.css +++ b/packages/core/src/radio-button/RadioButtonIcon.css @@ -40,16 +40,16 @@ .saltRadioButtonIcon-error, .saltRadioButton:hover .saltRadioButtonIcon-error { - color: var(--salt-status-error-foreground); + color: var(--salt-status-error-foreground-decorative); border-color: var(--salt-status-error-borderColor); - outline-color: var(--salt-status-error-foreground); + outline-color: var(--salt-status-error-foreground-decorative); } .saltRadioButtonIcon-warning, .saltRadioButton:hover .saltRadioButtonIcon-warning { - color: var(--salt-status-warning-foreground); + color: var(--salt-status-warning-foreground-decorative); border-color: var(--salt-status-warning-borderColor); - outline-color: var(--salt-status-warning-foreground); + outline-color: var(--salt-status-warning-foreground-decorative); } .saltRadioButtonIcon-readOnly, diff --git a/packages/core/src/status-adornment/StatusAdornment.css b/packages/core/src/status-adornment/StatusAdornment.css index 128a4f2d38f..ac526a4f033 100644 --- a/packages/core/src/status-adornment/StatusAdornment.css +++ b/packages/core/src/status-adornment/StatusAdornment.css @@ -9,13 +9,13 @@ } .saltStatusAdornment-error { - --statusAdornment-color: var(--salt-status-error-foreground); + --statusAdornment-color: var(--salt-status-error-foreground-decorative); } .saltStatusAdornment-warning { - --statusAdornment-color: var(--salt-status-warning-foreground); + --statusAdornment-color: var(--salt-status-warning-foreground-decorative); } .saltStatusAdornment-success { - --statusAdornment-color: var(--salt-status-success-foreground); + --statusAdornment-color: var(--salt-status-success-foreground-decorative); } diff --git a/packages/core/src/status-indicator/StatusIndicator.css b/packages/core/src/status-indicator/StatusIndicator.css index 280aa630234..69f5426f8a2 100644 --- a/packages/core/src/status-indicator/StatusIndicator.css +++ b/packages/core/src/status-indicator/StatusIndicator.css @@ -1,8 +1,8 @@ .saltStatusIndicator { - --statusIndicator-warning-color: var(--salt-status-warning-foreground); - --statusIndicator-info-color: var(--salt-status-info-foreground); - --statusIndicator-success-color: var(--salt-status-success-foreground); - --statusIndicator-error-color: var(--salt-status-error-foreground); + --statusIndicator-warning-color: var(--salt-status-warning-foreground-decorative); + --statusIndicator-info-color: var(--salt-status-info-foreground-decorative); + --statusIndicator-success-color: var(--salt-status-success-foreground-decorative); + --statusIndicator-error-color: var(--salt-status-error-foreground-decorative); color: var(--saltStatusIndicator-color, var(--statusIndicator-Color)); } diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css index b055d1abbb8..2fe18becf9e 100644 --- a/packages/core/src/text/Text.css +++ b/packages/core/src/text/Text.css @@ -44,24 +44,24 @@ --text-color: var(--salt-content-secondary-foreground-disabled); } -/* Success variant */ -.saltText-success { - --text-color: var(--salt-status-success-foreground-informative); -} - -/* Warning variant */ -.saltText-warning { - --text-color: var(--salt-status-warning-foreground-informative); +/* Info color */ +.saltText-info { + --text-color: var(--salt-status-info-foreground-informative); } -/* Error variant */ +/* Error color */ .saltText-error { --text-color: var(--salt-status-error-foreground-informative); } -/* Info variant */ -.saltText-info { - --text-color: var(--salt-status-info-foreground-informative); +/* Warning color */ +.saltText-warning { + --text-color: var(--salt-status-warning-foreground-informative); +} + +/* Success color */ +.saltText-success { + --text-color: var(--salt-status-success-foreground-informative); } /* Body emphasis strong */ diff --git a/packages/core/src/text/Text.tsx b/packages/core/src/text/Text.tsx index 6fd2e4db9d3..a02d22314ce 100644 --- a/packages/core/src/text/Text.tsx +++ b/packages/core/src/text/Text.tsx @@ -9,6 +9,7 @@ import { ElementType, forwardRef, ReactElement } from "react"; import textCss from "./Text.css"; import { useWindow } from "@salt-ds/window"; import { useComponentCssInjection } from "@salt-ds/styles"; +import { ValidationStatus } from "../status-indicator"; export type TextProps = PolymorphicComponentPropWithRef< T, @@ -44,14 +45,7 @@ export type TextProps = PolymorphicComponentPropWithRef< /* * The color of the text. Defaults to "primary". */ - color?: - | "inherit" - | "primary" - | "secondary" - | "success" - | "warning" - | "error" - | "info"; + color?: "inherit" | "primary" | "secondary" | ValidationStatus; } >; diff --git a/packages/core/stories/layout/layout.stories.css b/packages/core/stories/layout/layout.stories.css index 62b8f86f9ee..759b76d8873 100644 --- a/packages/core/stories/layout/layout.stories.css +++ b/packages/core/stories/layout/layout.stories.css @@ -65,80 +65,6 @@ background-color: var(--salt-color-purple-30); } -.flow-layout-container { - padding: var(--salt-spacing-200) var(--salt-size-container-spacing); - background-color: var(--salt-container-secondary-background); -} - -.flow-layout-container p, -.flow-layout-container h1 { - margin: 0; -} - -.flow-dashboard-container .saltCard { - height: 100%; - width: 100%; -} - -.border-layout-custom-form label { - min-width: 150px; - text-align: right; -} - -.border-layout-custom-form .saltFormFieldLegacy-labelLeft { - width: 70%; -} - -.border-layout-custom-form .saltInputLegacy-suffixContainer { - margin-right: var(--salt-spacing-100); -} - -.border-layout-switch-container { - padding: var(--salt-spacing-100); -} - -.border-layout-button-container, -.flow-layout-form-container { - padding: var(--salt-spacing-200) var(--salt-size-container-spacing); -} - -.border-layout-pill { - margin: calc(var(--salt-spacing-100) * 2) var(--salt-size-container-spacing); - --saltPill-background: var(--salt-status-success-foreground); - --saltPill-text-color: var(--salt-color-white); - --saltPill-borderRadius: 10px; -} - -.border-layout-form-header, -.border-layout-form-footer { - background-color: var(--salt-color-white); - z-index: 10; -} -.border-layout-form-footer button { - margin-top: calc(var(--salt-spacing-100) * 2); - margin-bottom: 16px; -} - -.border-layout-form-steps { - background-color: var(--salt-container-secondary-background); -} - -.border-layout-contacts { - padding: var(--salt-size-container-spacing) 0 var(--salt-size-container-spacing) 0; -} - -.border-layout-contacts h2 { - margin-top: 0; - margin-bottom: var(--salt-size-container-spacing); -} - -.border-layout-contacts-footer { - border-top: 1px solid; - border-color: var(--salt-separable-secondary-borderColor); - padding: var(--salt-size-container-spacing) 0 calc(var(--salt-spacing-100) * 2) 0; - text-align: center; -} - .grid-blog-featured { width: 100%; height: 400px; @@ -154,81 +80,6 @@ height: 180px; } -.flex-blog-image { - min-width: 330px; - height: 230px; -} - -.grid-blog-image { - width: 100%; - height: 260px; -} - -.grid-blog-small-image { - width: 100%; - height: 180px; -} - -.flex-blog-image { - min-width: 330px; - height: 230px; -} - -.grid-blog-container { - padding: var(--salt-size-container-spacing); -} - -.grid-blog-container .saltCard { - width: 344px; -} - -.parent-child-composite-container { - max-width: 1200px; - min-height: 800px; - padding: var(--salt-size-container-spacing); -} - -.parent-child-composite-container h2 { - margin: 0; -} - -.parent-child-composite-title { - margin-bottom: var(--salt-size-container-spacing); -} - -.parent-child-composite-empty-container { - width: 12px; - padding: var(--salt-spacing-100); -} - -.parent-child-composite-container p, -.parent-child-composite-container h3 { - margin: 0; -} - -.parent-child-composite-container { - max-width: 1200px; - padding: var(--salt-size-container-spacing); -} - -.parent-child-composite-container h2 { - margin: 0; -} - -.parent-child-composite-title { - margin-bottom: var(--salt-size-container-spacing); -} - -.parent-child-composite-empty-container { - width: 12px; - padding: var(--salt-spacing-100); -} - -.parent-child-composite-container p, -.parent-child-composite-container h3 { - margin: 0; -} - .layer-example { height: 100%; } diff --git a/packages/core/stories/text/text.qa.stories.tsx b/packages/core/stories/text/text.qa.stories.tsx index c9ef10ddb45..d1b879eeb57 100644 --- a/packages/core/stories/text/text.qa.stories.tsx +++ b/packages/core/stories/text/text.qa.stories.tsx @@ -39,17 +39,20 @@ export const AllVariantsGrid: StoryFn = (props) => ( Secondary disabled strong and small text - - Success strong and small text + + Info strong and small text + + + Error strong and small text Warning strong and small text - - Error strong and small text + + Success strong and small text - - Info strong and small text + + Inherit strong and small text Display 1 strong and small text @@ -107,17 +110,17 @@ export const NoStyleInjectionGrid: StoryFn = ( Secondary disabled strong and small text - - Success strong and small text - - - Warning strong and small text + + Info strong and small text Error strong and small text - - Info strong and small text + + Warning strong and small text + + + Success strong and small text Display 1 strong and small text diff --git a/packages/core/stories/text/text.stories.tsx b/packages/core/stories/text/text.stories.tsx index d95839199c6..226035e0b56 100644 --- a/packages/core/stories/text/text.stories.tsx +++ b/packages/core/stories/text/text.stories.tsx @@ -34,20 +34,20 @@ export const Secondary: StoryFn = () => { return This is a secondary text example; }; -export const Success: StoryFn = () => { - return This is a success text example; -}; - -export const Warning: StoryFn = () => { - return This is a warning text example; +export const Info: StoryFn = () => { + return This is a info text example; }; export const Error: StoryFn = () => { return This is a error text example; }; -export const Info: StoryFn = () => { - return This is a info text example; +export const Warning: StoryFn = () => { + return This is a warning text example; +}; + +export const Success: StoryFn = () => { + return This is a success text example; }; export const InheritColor: StoryFn = () => { diff --git a/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.css b/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.css index af6f5e88875..fc4229353db 100644 --- a/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.css +++ b/packages/lab/src/stepped-tracker/TrackerStep/TrackerStep.css @@ -1,6 +1,6 @@ .saltTrackerStep { - --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground)); - --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground)); + --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground-decorative)); + --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground-decorative)); --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground)); diff --git a/packages/lab/stories/layout/layout.stories.css b/packages/lab/stories/layout/layout.stories.css index 194c0d38aa1..759b76d8873 100644 --- a/packages/lab/stories/layout/layout.stories.css +++ b/packages/lab/stories/layout/layout.stories.css @@ -65,80 +65,6 @@ background-color: var(--salt-color-purple-30); } -.flow-layout-container { - padding: calc(var(--salt-size-unit) * 2) var(--salt-size-container-spacing); - background-color: var(--salt-container-secondary-background); -} - -.flow-layout-container p, -.flow-layout-container h1 { - margin: 0; -} - -.flow-dashboard-container .saltCard { - height: 100%; - width: 100%; -} - -.border-layout-custom-form label { - min-width: 150px; - text-align: right; -} - -.border-layout-custom-form .saltFormFieldLegacy-labelLeft { - width: 70%; -} - -.border-layout-custom-form .saltInputLegacy-suffixContainer { - margin-right: var(--salt-size-unit); -} - -.border-layout-switch-container { - padding: var(--salt-size-unit); -} - -.border-layout-button-container, -.flow-layout-form-container { - padding: calc(var(--salt-size-unit) * 2) var(--salt-size-container-spacing); -} - -.border-layout-pill { - margin: calc(var(--salt-size-unit) * 2) var(--salt-size-container-spacing); - --saltPill-background: var(--salt-status-success-foreground); - --saltPill-text-color: var(--salt-color-white); - --saltPill-borderRadius: 10px; -} - -.border-layout-form-header, -.border-layout-form-footer { - background-color: var(--salt-color-white); - z-index: 10; -} -.border-layout-form-footer button { - margin-top: calc(var(--salt-size-unit) * 2); - margin-bottom: 16px; -} - -.border-layout-form-steps { - background-color: var(--salt-container-secondary-background); -} - -.border-layout-contacts { - padding: var(--salt-size-container-spacing) 0 var(--salt-size-container-spacing) 0; -} - -.border-layout-contacts h2 { - margin-top: 0; - margin-bottom: var(--salt-size-container-spacing); -} - -.border-layout-contacts-footer { - border-top: 1px solid; - border-color: var(--salt-separable-secondary-borderColor); - padding: var(--salt-size-container-spacing) 0 calc(var(--salt-size-unit) * 2) 0; - text-align: center; -} - .grid-blog-featured { width: 100%; height: 400px; @@ -154,34 +80,6 @@ height: 180px; } -.flex-blog-image { - min-width: 330px; - height: 230px; -} - -.grid-blog-image { - width: 100%; - height: 260px; -} - -.grid-blog-small-image { - width: 100%; - height: 180px; -} - -.flex-blog-image { - min-width: 330px; - height: 230px; -} - -.grid-blog-container { - padding: var(--salt-size-container-spacing); -} - -.grid-blog-container .saltCard { - width: 344px; -} - .layer-example { height: 100%; } diff --git a/packages/theme/css/characteristics/status.css b/packages/theme/css/characteristics/status.css index 3768628d18b..15b27be6400 100644 --- a/packages/theme/css/characteristics/status.css +++ b/packages/theme/css/characteristics/status.css @@ -1,24 +1,29 @@ .salt-theme { - --salt-status-info-foreground: var(--salt-palette-info-foreground); --salt-status-static-foreground: var(--salt-palette-neutral-secondary-foreground); --salt-status-negative-foreground: var(--salt-palette-negative-foreground); --salt-status-positive-foreground: var(--salt-palette-positive-foreground); - --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative); - --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative); - --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative); + + --salt-status-info-foreground-decorative: var(--salt-palette-info-foreground-decorative); + --salt-status-error-foreground-decorative: var(--salt-palette-error-foreground-decorative); + --salt-status-warning-foreground-decorative: var(--salt-palette-warning-foreground-decorative); + --salt-status-success-foreground-decorative: var(--salt-palette-success-foreground-decorative); + --salt-status-info-foreground-informative: var(--salt-palette-info-foreground-informative); + --salt-status-error-foreground-informative: var(--salt-palette-error-foreground-informative); + --salt-status-warning-foreground-informative: var(--salt-palette-warning-foreground-informative); + --salt-status-success-foreground-informative: var(--salt-palette-success-foreground-informative); --salt-status-info-borderColor: var(--salt-palette-info-border); - --salt-status-success-borderColor: var(--salt-palette-success-border); - --salt-status-warning-borderColor: var(--salt-palette-warning-border); --salt-status-error-borderColor: var(--salt-palette-error-border); + --salt-status-warning-borderColor: var(--salt-palette-warning-border); + --salt-status-success-borderColor: var(--salt-palette-success-border); --salt-status-info-background: var(--salt-palette-info-background); - --salt-status-success-background: var(--salt-palette-success-background); - --salt-status-warning-background: var(--salt-palette-warning-background); --salt-status-error-background: var(--salt-palette-error-background); + --salt-status-warning-background: var(--salt-palette-warning-background); + --salt-status-success-background: var(--salt-palette-success-background); - --salt-status-success-background-selected: var(--salt-palette-success-background-selected); - --salt-status-warning-background-selected: var(--salt-palette-warning-background-selected); --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/deprecated/characteristics.css b/packages/theme/css/deprecated/characteristics.css index 3da28482d33..0f3dc2e6cd0 100644 --- a/packages/theme/css/deprecated/characteristics.css +++ b/packages/theme/css/deprecated/characteristics.css @@ -96,9 +96,10 @@ --salt-status-warning-borderColor-disabled: var(--salt-palette-warning-border-disabled); --salt-status-error-borderColor-disabled: var(--salt-palette-error-border-disabled); - --salt-status-success-foreground: var(--salt-palette-success-foreground); - --salt-status-warning-foreground: var(--salt-palette-warning-foreground); + --salt-status-info-foreground: var(--salt-palette-info-foreground); --salt-status-error-foreground: var(--salt-palette-error-foreground); + --salt-status-warning-foreground: var(--salt-palette-warning-foreground); + --salt-status-success-foreground: var(--salt-palette-success-foreground); /* Actionable */ --salt-actionable-letterSpacing: 0.6px; diff --git a/packages/theme/css/deprecated/palette.css b/packages/theme/css/deprecated/palette.css index 0c4dc7b08c4..04df7f7a3ef 100644 --- a/packages/theme/css/deprecated/palette.css +++ b/packages/theme/css/deprecated/palette.css @@ -49,9 +49,11 @@ /* Status */ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground); --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border); + --salt-palette-error-foreground: var(--salt-color-red-500); --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border); --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground); + --salt-palette-info-foreground: var(--salt-color-blue-500); --salt-palette-negative-foreground-disabled: var(--salt-color-red-700-fade-foreground); @@ -59,13 +61,11 @@ --salt-palette-success-border-disabled: var(--salt-color-green-500-fade-border); --salt-palette-success-foreground-disabled: var(--salt-color-green-500-fade-foreground); + --salt-palette-success-foreground: var(--salt-color-green-500); --salt-palette-warning-foreground-disabled: var(--salt-color-orange-700-fade-foreground); --salt-palette-warning-border-disabled: var(--salt-color-orange-700-fade-border); - - --salt-palette-success-foreground: var(--salt-color-green-500); --salt-palette-warning-foreground: var(--salt-color-orange-700); - --salt-palette-error-foreground: var(--salt-color-red-500); /* Navigate */ --salt-palette-navigate-primary-background: transparent; @@ -124,9 +124,11 @@ /* Status */ --salt-palette-error-foreground-disabled: var(--salt-color-red-500-fade-foreground); --salt-palette-error-border-disabled: var(--salt-color-red-500-fade-border); + --salt-palette-error-foreground: var(--salt-color-red-500); --salt-palette-info-border-disabled: var(--salt-color-blue-500-fade-border); --salt-palette-info-foreground-disabled: var(--salt-color-blue-500-fade-foreground); + --salt-palette-info-foreground: var(--salt-color-blue-500); --salt-palette-negative-foreground-disabled: var(--salt-color-red-300-fade-foreground); @@ -134,9 +136,11 @@ --salt-palette-success-border-disabled: var(--salt-color-green-400-fade-border); --salt-palette-success-foreground-disabled: var(--salt-color-green-400-fade-foreground); + --salt-palette-success-foreground: var(--salt-color-green-400); --salt-palette-warning-foreground-disabled: var(--salt-color-orange-500-fade-foreground); --salt-palette-warning-border-disabled: var(--salt-color-orange-500-fade-border); + --salt-palette-warning-foreground: var(--salt-color-orange-500); /* Navigate */ --salt-palette-navigate-primary-background: transparent; diff --git a/packages/theme/css/foundations/color.css b/packages/theme/css/foundations/color.css index c3563bf2807..c16f50b3282 100644 --- a/packages/theme/css/foundations/color.css +++ b/packages/theme/css/foundations/color.css @@ -31,7 +31,7 @@ --salt-color-orange-600: rgb(224, 101, 25); --salt-color-orange-700: rgb(214, 85, 19); --salt-color-orange-800: rgb(204, 68, 13); - --salt-color-orange-850: rgb(199, 53, 13); + --salt-color-orange-850: rgb(194, 52, 7); --salt-color-orange-900: rgb(54, 44, 36); --salt-color-green-10: rgb(209, 244, 201); diff --git a/packages/theme/css/palette/error.css b/packages/theme/css/palette/error.css index 75425b02e36..cdf151b7092 100644 --- a/packages/theme/css/palette/error.css +++ b/packages/theme/css/palette/error.css @@ -2,14 +2,14 @@ --salt-palette-error-background: var(--salt-color-red-10); --salt-palette-error-background-selected: var(--salt-color-red-20); --salt-palette-error-border: var(--salt-color-red-500); - --salt-palette-error-foreground-informative: var(--salt-color-red-600); --salt-palette-error-foreground-decorative: var(--salt-color-red-500); + --salt-palette-error-foreground-informative: var(--salt-color-red-600); } .salt-theme[data-mode="dark"] { --salt-palette-error-background: var(--salt-color-red-900); --salt-palette-error-background-selected: var(--salt-color-red-900); --salt-palette-error-border: var(--salt-color-red-500); - --salt-palette-error-foreground-informative: var(--salt-color-red-200); --salt-palette-error-foreground-decorative: var(--salt-color-red-500); + --salt-palette-error-foreground-informative: var(--salt-color-red-200); } diff --git a/packages/theme/css/palette/info.css b/packages/theme/css/palette/info.css index 43269aeffee..25d766ef5ee 100644 --- a/packages/theme/css/palette/info.css +++ b/packages/theme/css/palette/info.css @@ -1,15 +1,13 @@ .salt-theme[data-mode="light"] { --salt-palette-info-background: var(--salt-color-blue-10); --salt-palette-info-border: var(--salt-color-blue-500); - --salt-palette-info-foreground: var(--salt-color-blue-500); - --salt-palette-info-foreground-informative: var(--salt-color-blue-600); --salt-palette-info-foreground-decorative: var(--salt-color-blue-500); + --salt-palette-info-foreground-informative: var(--salt-color-blue-600); } .salt-theme[data-mode="dark"] { --salt-palette-info-background: var(--salt-color-blue-900); --salt-palette-info-border: var(--salt-color-blue-500); - --salt-palette-info-foreground: var(--salt-color-blue-500); - --salt-palette-info-foreground-informative: var(--salt-color-blue-200); --salt-palette-info-foreground-decorative: var(--salt-color-blue-100); + --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 042f5590664..3e8ebde5675 100644 --- a/packages/theme/css/palette/success.css +++ b/packages/theme/css/palette/success.css @@ -2,14 +2,14 @@ --salt-palette-success-background: var(--salt-color-green-10); --salt-palette-success-background-selected: var(--salt-color-green-20); --salt-palette-success-border: var(--salt-color-green-500); - --salt-palette-success-foreground-informative: var(--salt-color-green-600); --salt-palette-success-foreground-decorative: var(--salt-color-green-500); + --salt-palette-success-foreground-informative: var(--salt-color-green-600); } .salt-theme[data-mode="dark"] { --salt-palette-success-background: var(--salt-color-green-900); --salt-palette-success-background-selected: var(--salt-color-green-900); --salt-palette-success-border: var(--salt-color-green-400); - --salt-palette-success-foreground-informative: var(--salt-color-green-200); --salt-palette-success-foreground-decorative: var(--salt-color-green-400); + --salt-palette-success-foreground-informative: var(--salt-color-green-200); } diff --git a/packages/theme/css/palette/warning.css b/packages/theme/css/palette/warning.css index 01348ec4c01..9862ef9a13a 100644 --- a/packages/theme/css/palette/warning.css +++ b/packages/theme/css/palette/warning.css @@ -2,14 +2,14 @@ --salt-palette-warning-background: var(--salt-color-orange-10); --salt-palette-warning-background-selected: var(--salt-color-orange-20); --salt-palette-warning-border: var(--salt-color-orange-700); - --salt-palette-warning-foreground-informative: var(--salt-color-orange-800); - --salt-palette-error-foreground-decorative: var(--salt-color-orange-700); + --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700); + --salt-palette-warning-foreground-informative: var(--salt-color-orange-850); } .salt-theme[data-mode="dark"] { --salt-palette-warning-background: var(--salt-color-orange-900); --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); --salt-palette-warning-foreground-informative: var(--salt-color-orange-400); - --salt-palette-error-foreground-decorative: var(--salt-color-orange-500); } diff --git a/packages/theme/stories/palettes/error.stories.mdx b/packages/theme/stories/palettes/error.stories.mdx index d93563d5064..e228278d029 100644 --- a/packages/theme/stories/palettes/error.stories.mdx +++ b/packages/theme/stories/palettes/error.stories.mdx @@ -1,10 +1,4 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { Meta, Canvas, ColorPalette, ColorItem } from "@storybook/addon-docs"; import { ColorBlock } from "docs/components/ColorBlock"; import { ColorContainer } from "docs/components/ColorContainer"; import { DocGrid } from "docs/components/DocGrid"; @@ -28,8 +22,10 @@ Colors used to symbolise an error state. /> + diff --git a/packages/theme/stories/palettes/success.stories.mdx b/packages/theme/stories/palettes/success.stories.mdx index e82378bc4a0..167b86832b7 100644 --- a/packages/theme/stories/palettes/success.stories.mdx +++ b/packages/theme/stories/palettes/success.stories.mdx @@ -1,10 +1,4 @@ -import { - Meta, - Story, - Canvas, - ColorPalette, - ColorItem, -} from "@storybook/addon-docs"; +import { Meta, Canvas, ColorPalette, ColorItem } from "@storybook/addon-docs"; import { ColorBlock } from "docs/components/ColorBlock"; import { ColorContainer } from "docs/components/ColorContainer"; import { DocGrid } from "docs/components/DocGrid"; @@ -28,8 +22,10 @@ Colors symbolising a success state or indication of process completion. /> When theming, we recommend modifying tokens rather than applying tweaks to @@ -84,7 +84,7 @@ Salt's token tiers indicate the purpose of a token and how it is used in the des Take the status characteristic tokens as an example. Components like [`Toast`](/salt/components/toast/examples) use these tokens to denote status using color, such as a green foreground color to denote success. -1. The component uses the `--salt-status-success-foreground` characteristic token. This token has the default value `var(--salt-palette-success-foreground)`. +1. The component uses the `--salt-status-success-foreground-decorative` characteristic token. This token has the default value `var(--salt-palette-success-foreground-decorative)`. 2. The characteristic token references the palette token `--salt-palette-success-foreground`. This token has the default value `var(--salt-color-green-400)`. 3. The palette token references the foundational token `--salt-color-green-400`. This token has the default value `rgb(48, 156, 90)`. diff --git a/site/src/examples/text/Color.tsx b/site/src/examples/text/Color.tsx index 70c054562a6..b25207b2c71 100644 --- a/site/src/examples/text/Color.tsx +++ b/site/src/examples/text/Color.tsx @@ -5,10 +5,10 @@ export const Color = (): ReactElement => ( This is primary color of Text This is secondary color of Text - This is inherited color of Text - This is success color of Text - This is warning color of Text - This is error color of Text This is error color of Text + This is error color of Text + This is warning color of Text + This is success color of Text + This is inherited color of Text ); From acfd013010e13d74576db02ff9a3ae5664364ef4 Mon Sep 17 00:00:00 2001 From: F745860 Date: Fri, 10 May 2024 14:41:11 +0530 Subject: [PATCH 8/9] design review comments addressed --- packages/theme/css/palette/error.css | 2 +- packages/theme/css/palette/info.css | 4 ++-- packages/theme/css/palette/success.css | 2 +- packages/theme/css/palette/warning.css | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/theme/css/palette/error.css b/packages/theme/css/palette/error.css index cdf151b7092..e9904b9a8a1 100644 --- a/packages/theme/css/palette/error.css +++ b/packages/theme/css/palette/error.css @@ -11,5 +11,5 @@ --salt-palette-error-background-selected: var(--salt-color-red-900); --salt-palette-error-border: var(--salt-color-red-500); --salt-palette-error-foreground-decorative: var(--salt-color-red-500); - --salt-palette-error-foreground-informative: var(--salt-color-red-200); + --salt-palette-error-foreground-informative: var(--salt-color-red-400); } diff --git a/packages/theme/css/palette/info.css b/packages/theme/css/palette/info.css index 25d766ef5ee..9cd8f0ffe31 100644 --- a/packages/theme/css/palette/info.css +++ b/packages/theme/css/palette/info.css @@ -8,6 +8,6 @@ .salt-theme[data-mode="dark"] { --salt-palette-info-background: var(--salt-color-blue-900); --salt-palette-info-border: var(--salt-color-blue-500); - --salt-palette-info-foreground-decorative: var(--salt-color-blue-100); - --salt-palette-info-foreground-informative: var(--salt-color-blue-200); + --salt-palette-info-foreground-decorative: var(--salt-color-blue-500); + --salt-palette-info-foreground-informative: var(--salt-color-blue-400); } diff --git a/packages/theme/css/palette/success.css b/packages/theme/css/palette/success.css index 3e8ebde5675..5b8efe4cf05 100644 --- a/packages/theme/css/palette/success.css +++ b/packages/theme/css/palette/success.css @@ -10,6 +10,6 @@ --salt-palette-success-background: var(--salt-color-green-900); --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); + --salt-palette-success-foreground-decorative: var(--salt-color-green-500); --salt-palette-success-foreground-informative: var(--salt-color-green-200); } diff --git a/packages/theme/css/palette/warning.css b/packages/theme/css/palette/warning.css index 9862ef9a13a..c329fbd85e5 100644 --- a/packages/theme/css/palette/warning.css +++ b/packages/theme/css/palette/warning.css @@ -2,8 +2,8 @@ --salt-palette-warning-background: var(--salt-color-orange-10); --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); - --salt-palette-warning-foreground-informative: var(--salt-color-orange-850); + --salt-palette-warning-foreground-decorative: var(--salt-color-orange-500); + --salt-palette-warning-foreground-informative: var(--salt-color-orange-600); } .salt-theme[data-mode="dark"] { From d388e47b56208982a4c7a9c8752d9804b3e569d0 Mon Sep 17 00:00:00 2001 From: F745860 Date: Fri, 10 May 2024 17:19:35 +0530 Subject: [PATCH 9/9] design review comments addressed --- packages/theme/css/palette/error.css | 4 ++-- packages/theme/css/palette/info.css | 4 ++-- packages/theme/css/palette/success.css | 2 +- packages/theme/css/palette/warning.css | 4 ++-- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/theme/css/palette/error.css b/packages/theme/css/palette/error.css index e9904b9a8a1..38112557081 100644 --- a/packages/theme/css/palette/error.css +++ b/packages/theme/css/palette/error.css @@ -10,6 +10,6 @@ --salt-palette-error-background: var(--salt-color-red-900); --salt-palette-error-background-selected: var(--salt-color-red-900); --salt-palette-error-border: var(--salt-color-red-500); - --salt-palette-error-foreground-decorative: var(--salt-color-red-500); - --salt-palette-error-foreground-informative: var(--salt-color-red-400); + --salt-palette-error-foreground-decorative: var(--salt-color-red-400); + --salt-palette-error-foreground-informative: var(--salt-color-red-200); } diff --git a/packages/theme/css/palette/info.css b/packages/theme/css/palette/info.css index 9cd8f0ffe31..bc8b2cad442 100644 --- a/packages/theme/css/palette/info.css +++ b/packages/theme/css/palette/info.css @@ -8,6 +8,6 @@ .salt-theme[data-mode="dark"] { --salt-palette-info-background: var(--salt-color-blue-900); --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-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 5b8efe4cf05..3e8ebde5675 100644 --- a/packages/theme/css/palette/success.css +++ b/packages/theme/css/palette/success.css @@ -10,6 +10,6 @@ --salt-palette-success-background: var(--salt-color-green-900); --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-500); + --salt-palette-success-foreground-decorative: var(--salt-color-green-400); --salt-palette-success-foreground-informative: var(--salt-color-green-200); } diff --git a/packages/theme/css/palette/warning.css b/packages/theme/css/palette/warning.css index c329fbd85e5..9862ef9a13a 100644 --- a/packages/theme/css/palette/warning.css +++ b/packages/theme/css/palette/warning.css @@ -2,8 +2,8 @@ --salt-palette-warning-background: var(--salt-color-orange-10); --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-500); - --salt-palette-warning-foreground-informative: var(--salt-color-orange-600); + --salt-palette-warning-foreground-decorative: var(--salt-color-orange-700); + --salt-palette-warning-foreground-informative: var(--salt-color-orange-850); } .salt-theme[data-mode="dark"] {