From fdfbdcf1d0383bfe9887cf5168ab15a88e521558 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 | 15 +++++++++ packages/core/src/text/Text.tsx | 3 +- .../core/stories/text/text.qa.stories.tsx | 2 +- packages/core/stories/text/text.stories.tsx | 14 +++++++- .../contact-details/ContactPrimaryInfo.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 ++++ packages/theme/stories/palettes/error.mdx | 32 +++++++++++-------- packages/theme/stories/palettes/success.mdx | 32 +++++++++++-------- packages/theme/stories/palettes/warning.mdx | 26 ++++++++------- 15 files changed, 122 insertions(+), 46 deletions(-) diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css index 5f8a35440c..dc9b8f7714 100644 --- a/packages/core/src/text/Text.css +++ b/packages/core/src/text/Text.css @@ -44,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 fef7f6355b..f83025eb88 100644 --- a/packages/core/src/text/Text.tsx +++ b/packages/core/src/text/Text.tsx @@ -44,7 +44,7 @@ export type TextProps = PolymorphicComponentPropWithRef< /* * The color of the text. Defaults to "primary". */ - color?: "inherit" | "primary" | "secondary"; + color?: "inherit" | "primary" | "secondary" | "success" | "warning" | "error" | "info"; } >; @@ -104,3 +104,4 @@ 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 1aed88db02..abad39ac4c 100644 --- a/packages/core/stories/text/text.qa.stories.tsx +++ b/packages/core/stories/text/text.qa.stories.tsx @@ -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 9f4ff9e016..c0732a6c7e 100644 --- a/packages/core/stories/text/text.stories.tsx +++ b/packages/core/stories/text/text.stories.tsx @@ -34,8 +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 Error: StoryFn = () => { + return This is a error 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 49d5bf4bf4..ec1f373504 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,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/theme/css/characteristics/status.css b/packages/theme/css/characteristics/status.css index 10eee8ea86..44b085b65b 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 b2082278ae..3da28482d3 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 0d428ac0d5..0c4dc7b08c 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 792f656855..c3563bf280 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 3b1704168a..9d3e05e2dd 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 5133a2a931..23c6b5e85e 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 80470a6cf1..e1bf618839 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.mdx b/packages/theme/stories/palettes/error.mdx index bffa4829a6..2178e3957b 100644 --- a/packages/theme/stories/palettes/error.mdx +++ b/packages/theme/stories/palettes/error.mdx @@ -20,16 +20,14 @@ Colors used to symbolise an error state. "--salt-palette-error-border": "var(--salt-palette-error-border)", }} /> - - - - @@ -55,11 +51,21 @@ Colors used to symbolise an error state. - - - - - - + + + + diff --git a/packages/theme/stories/palettes/success.mdx b/packages/theme/stories/palettes/success.mdx index d5432f9e55..2170f5e612 100644 --- a/packages/theme/stories/palettes/success.mdx +++ b/packages/theme/stories/palettes/success.mdx @@ -20,16 +20,14 @@ Colors symbolising a success state or indication of process completion. "--salt-palette-success-border": "var(--salt-palette-success-border)", }} /> - - - - @@ -55,11 +51,21 @@ Colors symbolising a success state or indication of process completion. - - - - - - + + + + diff --git a/packages/theme/stories/palettes/warning.mdx b/packages/theme/stories/palettes/warning.mdx index 6e9cceaeda..81e12536c3 100644 --- a/packages/theme/stories/palettes/warning.mdx +++ b/packages/theme/stories/palettes/warning.mdx @@ -20,16 +20,14 @@ Colors symbolising a warning state. "--salt-palette-warning-border": "var(--salt-palette-warning-border)", }} /> - - - - @@ -55,9 +51,17 @@ Colors symbolising a warning state. - - - - + + + From 9f2c38cbfb39d590f884555eb4fa42fc761297cf 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 6634284edc..ce7bc3a28e 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 ); From 222d1662e80e1501ebf0a2db58ddbabb3c677081 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 | 10 ++++++-- .../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, 36 insertions(+), 31 deletions(-) diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css index dc9b8f7714..a403ba2a2b 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 f83025eb88..6fd2e4db9d 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" | "success" | "warning" | "error" | "info"; + color?: + | "inherit" + | "primary" + | "secondary" + | "success" + | "warning" + | "error" + | "info"; } >; @@ -104,4 +111,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 abad39ac4c..2f54c17d67 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 ec1f373504..698c743b74 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 44b085b65b..3789c2f606 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 9d3e05e2dd..75425b02e3 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 23c6b5e85e..042f559066 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 e1bf618839..844a93320b 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 ff33ec5a221693ec9f33229ccd5c7d5eda912855 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/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 + 6 files changed, 21 insertions(+) diff --git a/packages/core/src/text/Text.css b/packages/core/src/text/Text.css index a403ba2a2b..b055d1abbb 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/stories/text/text.qa.stories.tsx b/packages/core/stories/text/text.qa.stories.tsx index 2f54c17d67..c9ef10ddb4 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 c0732a6c7e..d95839199c 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 inherit text example; }; diff --git a/packages/theme/css/characteristics/status.css b/packages/theme/css/characteristics/status.css index 3789c2f606..3768628d18 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 8682ee6054..43269aeffe 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 ce7bc3a28e..70c054562a 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 e3b4a29a389a369f37c1ef3752d7ff9a5d2911f7 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 844a93320b..01348ec4c0 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 34212c37befa3e37d217f9035606d7d156073670 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 6/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 +- packages/theme/stories/palettes/error.mdx | 4 +- packages/theme/stories/palettes/info.mdx | 30 ++-- packages/theme/stories/palettes/success.mdx | 4 +- packages/theme/stories/palettes/warning.mdx | 6 +- site/docs/theming/index.mdx | 6 +- site/src/examples/text/Color.tsx | 8 +- 30 files changed, 238 insertions(+), 369 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 0000000000..509c7a7728 --- /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 0000000000..14c19867c1 --- /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 0000000000..73ad5997c6 --- /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 a4140f5d72..dffff71fbf 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 68dd996601..bbf3d3fae9 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 c48463d09a..3ab09fca81 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 e0a09b85de..d8145fb8ae 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 128a4f2d38..ac526a4f03 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 280aa63023..69f5426f8a 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 b055d1abbb..2fe18becf9 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 6fd2e4db9d..a02d22314c 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 62b8f86f9e..759b76d887 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 c9ef10ddb4..d1b879eeb5 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 d95839199c..226035e0b5 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 af6f5e8887..fc4229353d 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 194c0d38aa..759b76d887 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 3768628d18..15b27be640 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 3da28482d3..0f3dc2e6cd 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 0c4dc7b08c..04df7f7a3e 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 c3563bf280..c16f50b328 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 75425b02e3..cdf151b709 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 43269aeffe..25d766ef5e 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 042f559066..3e8ebde567 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 01348ec4c0..9862ef9a13 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.mdx b/packages/theme/stories/palettes/error.mdx index 2178e3957b..3b7f251ff3 100644 --- a/packages/theme/stories/palettes/error.mdx +++ b/packages/theme/stories/palettes/error.mdx @@ -22,8 +22,10 @@ Colors used to symbolise an error state. /> - - - @@ -44,11 +44,21 @@ Colors used to represent informational content or messaging. - - - - - - + + + + diff --git a/packages/theme/stories/palettes/success.mdx b/packages/theme/stories/palettes/success.mdx index 2170f5e612..debdc1bf88 100644 --- a/packages/theme/stories/palettes/success.mdx +++ b/packages/theme/stories/palettes/success.mdx @@ -22,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 70c054562a..b25207b2c7 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 16847957f52e7ca8a69950bcf5c681b6e5ec2584 Mon Sep 17 00:00:00 2001 From: F745860 Date: Fri, 10 May 2024 14:41:11 +0530 Subject: [PATCH 7/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 cdf151b709..e9904b9a8a 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 25d766ef5e..9cd8f0ffe3 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 3e8ebde567..5b8efe4cf0 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 9862ef9a13..c329fbd85e 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 3fa428bb966406810f7d2961bfc9da8dbaf2da13 Mon Sep 17 00:00:00 2001 From: F745860 Date: Fri, 10 May 2024 17:19:35 +0530 Subject: [PATCH 8/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 e9904b9a8a..3811255708 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 9cd8f0ffe3..bc8b2cad44 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 5b8efe4cf0..3e8ebde567 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 c329fbd85e..9862ef9a13 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"] { From e7a9ef2e8bf9e271292ef3b8e7a78439be6aa9db Mon Sep 17 00:00:00 2001 From: Josh Wooding <12938082+joshwooding@users.noreply.github.com> Date: Mon, 13 May 2024 12:05:14 +0100 Subject: [PATCH 9/9] Update info and error border tokens --- .changeset/dry-jokes-carry.md | 11 ++++++++++- .../lab/src/contact-details/ContactPrimaryInfo.tsx | 2 +- packages/theme/css/palette/error.css | 2 +- packages/theme/css/palette/info.css | 2 +- 4 files changed, 13 insertions(+), 4 deletions(-) diff --git a/.changeset/dry-jokes-carry.md b/.changeset/dry-jokes-carry.md index 509c7a7728..c41d429437 100644 --- a/.changeset/dry-jokes-carry.md +++ b/.changeset/dry-jokes-carry.md @@ -49,7 +49,7 @@ Added decorative and informative info, error, warning and success foreground tok ```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-decorative: var(--salt-color-red-400); + --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); @@ -57,6 +57,15 @@ Added decorative and informative info, error, warning and success foreground tok + --salt-palette-success-foreground-informative: var(--salt-color-green-200); ``` +Updated info and error border tokens. + +```diff +- --salt-palette-info-border: var(--salt-color-blue-500); ++ --salt-palette-info-border: var(--salt-color-blue-400); +- --salt-palette-error-border: var(--salt-color-red-500); ++ --salt-palette-error-border: var(--salt-color-red-400); +``` + Deprecated status foreground tokens. | Name | Replacement | diff --git a/packages/lab/src/contact-details/ContactPrimaryInfo.tsx b/packages/lab/src/contact-details/ContactPrimaryInfo.tsx index 698c743b74..5bf0be0bab 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; } diff --git a/packages/theme/css/palette/error.css b/packages/theme/css/palette/error.css index 3811255708..521bf50705 100644 --- a/packages/theme/css/palette/error.css +++ b/packages/theme/css/palette/error.css @@ -9,7 +9,7 @@ .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-border: 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 bc8b2cad44..1b0d87e547 100644 --- a/packages/theme/css/palette/info.css +++ b/packages/theme/css/palette/info.css @@ -7,7 +7,7 @@ .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-border: var(--salt-color-blue-400); --salt-palette-info-foreground-decorative: var(--salt-color-blue-400); --salt-palette-info-foreground-informative: var(--salt-color-blue-200); }