From 219bc48a4ab476c1c34918821111305d1ef318d4 Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Thu, 21 Nov 2024 22:08:31 -0500 Subject: [PATCH 1/6] refactor(all): refactor components and colors based on latest figma changes --- .../AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx | 10 +- .../AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx | 4 +- .../src/common/storybook/customSvgIcon.tsx | 7 +- .../src/common/svgs/IconCheckboxChecked.svg | 6 +- .../common/svgs/IconCheckboxIndeterminate.svg | 6 +- .../components/AccordionHeader/style.ts | 4 +- .../components/src/core/Accordion/style.ts | 4 +- .../components/AutocompleteBase/index.tsx | 8 +- .../components/AutocompleteBase/style.ts | 10 +- .../components/AutocompleteGroup/style.ts | 4 +- .../AutocompleteMultiColumn/index.tsx | 3 - .../AutocompleteMultiColumn/style.ts | 4 +- packages/components/src/core/Banner/style.ts | 25 +- .../core/Bases/Corners/__storybook__/style.ts | 4 +- .../core/Bases/Spaces/__storybook__/style.ts | 6 +- packages/components/src/core/Button/style.ts | 50 ++-- .../src/core/ButtonDropdown/index.tsx | 3 +- .../components/src/core/ButtonIcon/style.ts | 40 +-- .../components/src/core/ButtonToggle/style.ts | 2 +- packages/components/src/core/Callout/style.ts | 3 +- .../components/src/core/CellHeader/index.tsx | 1 - .../components/src/core/CellHeader/style.ts | 7 +- .../Dialog/components/DialogPaper/style.ts | 2 +- .../components/src/core/DropdownMenu/style.ts | 4 +- .../core/Icon/__storybook__/index.stories.tsx | 7 - .../Icon/__storybook__/stories/default.tsx | 6 +- .../Icon/__storybook__/stories/iconBank.tsx | 19 +- .../Icon/__tests__/Icon.namespace-test.tsx | 2 +- packages/components/src/core/Icon/index.tsx | 6 +- packages/components/src/core/Icon/style.ts | 81 ++---- .../src/core/InputDropdown/index.tsx | 2 +- .../src/core/InputDropdown/style.ts | 32 +-- .../components/src/core/InputSearch/index.tsx | 6 - .../components/src/core/InputSearch/style.ts | 22 +- .../components/src/core/InputSlider/style.ts | 18 +- .../components/src/core/InputText/style.ts | 4 +- .../components/src/core/InputToggle/style.ts | 16 +- .../src/core/LoadingIndicator/style.ts | 4 +- packages/components/src/core/Menu/style.ts | 2 +- .../components/src/core/MenuItem/style.ts | 20 +- .../components/src/core/MenuSelect/index.tsx | 3 - .../src/core/NavigationJumpTo/style.ts | 4 - .../src/core/Notification/index.tsx | 13 +- .../components/src/core/Notification/style.ts | 3 +- .../components/src/core/Pagination/style.ts | 8 +- packages/components/src/core/Panel/style.ts | 4 +- .../src/core/SegmentedControl/index.tsx | 10 +- .../src/core/SegmentedControl/style.ts | 30 +- .../Table/__storybook__/stories/default.tsx | 8 +- .../components/src/core/TableRow/style.ts | 2 +- .../src/core/styles/common/SDSAppTheme.ts | 271 +++++++++++------- .../core/styles/common/makeThemeOptions.ts | 230 ++++++++------- .../src/core/styles/common/types.ts | 44 +-- 53 files changed, 556 insertions(+), 538 deletions(-) diff --git a/packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx b/packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx index 51f780914..02cdfc875 100644 --- a/packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx +++ b/packages/components/src/common/storybook/AUTOCOMPLETE_MULTI_COLUMN_OPTIONS.tsx @@ -6,7 +6,7 @@ import CustomSvgIcon from "./customSvgIcon"; export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [ { - icon: , + icon: , name: "Column One", options: [ { @@ -35,7 +35,7 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [ width: 260, }, { - icon: , + icon: , name: "Column Two", options: [ { @@ -68,14 +68,12 @@ export const AUTOCOMPLETE_MULTI_COLUMN_OPTIONS = [ name: "Column Three", options: [ { - icon: , + icon: , name: "Custom SDS Icon", section: "With Icon", }, { - icon: ( - - ), + icon: , name: "Custom SVG Icon", section: "With Icon", }, diff --git a/packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx b/packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx index 84eea3891..ee12bf953 100644 --- a/packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx +++ b/packages/components/src/common/storybook/AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS.tsx @@ -34,12 +34,12 @@ export const AUTOCOMPLETE_SINGLE_COLUMN_OPTIONS = [ section: "name with details", }, { - icon: , + icon: , name: "Custom SDS Icon", section: "With Icon", }, { - icon: , + icon: , name: "Custom SVG Icon", section: "With Icon", }, diff --git a/packages/components/src/common/storybook/customSvgIcon.tsx b/packages/components/src/common/storybook/customSvgIcon.tsx index c0e5004ed..6443a606f 100644 --- a/packages/components/src/common/storybook/customSvgIcon.tsx +++ b/packages/components/src/common/storybook/customSvgIcon.tsx @@ -7,10 +7,9 @@ import { SvgIcon, SvgIconProps } from "@mui/material"; function CustomSvgIcon(props: SvgIconProps) { return ( - - - - + + {" "} + {" "} ); } diff --git a/packages/components/src/common/svgs/IconCheckboxChecked.svg b/packages/components/src/common/svgs/IconCheckboxChecked.svg index 4f51a9049..6127e0a12 100644 --- a/packages/components/src/common/svgs/IconCheckboxChecked.svg +++ b/packages/components/src/common/svgs/IconCheckboxChecked.svg @@ -1,4 +1,4 @@ - - - + + \ No newline at end of file diff --git a/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg b/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg index 9461387e0..3611be71b 100644 --- a/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg +++ b/packages/components/src/common/svgs/IconCheckboxIndeterminate.svg @@ -1,4 +1,4 @@ - - - + + \ No newline at end of file diff --git a/packages/components/src/core/Accordion/components/AccordionHeader/style.ts b/packages/components/src/core/Accordion/components/AccordionHeader/style.ts index 0703d1c3c..f2013c4d2 100644 --- a/packages/components/src/core/Accordion/components/AccordionHeader/style.ts +++ b/packages/components/src/core/Accordion/components/AccordionHeader/style.ts @@ -35,14 +35,14 @@ export const StyledAccordionHeader = styled(AccordionSummary)` align-self: center; svg { - color: ${semanticColors?.base?.iconPrimary}; + color: ${semanticColors?.base?.ornamentSecondary}; } } &:hover { & .${accordionSummaryClasses.expandIconWrapper} { svg { - color: ${semanticColors?.base?.iconPrimaryHover}; + color: ${semanticColors?.base?.ornamentSecondaryHover}; } } } diff --git a/packages/components/src/core/Accordion/style.ts b/packages/components/src/core/Accordion/style.ts index d480f3aaf..d75f85ff4 100644 --- a/packages/components/src/core/Accordion/style.ts +++ b/packages/components/src/core/Accordion/style.ts @@ -11,7 +11,6 @@ import { fontBodyXs, getBorders, getIconSizes, - getSemanticColors, getShadows, getSpaces, getTypography, @@ -38,11 +37,10 @@ export const StyledAccordion = styled(Accordion, { const typography = getTypography(props); const borders = getBorders(props); const spaces = getSpaces(props); - const semanticColors = getSemanticColors(props); return css` &.${accordionClasses.root} { - background-color: ${semanticColors?.base?.surfaceBackground}; + background-color: transparent; background-image: none; box-shadow: ${shadows?.none}; font-family: ${typography?.fontFamily?.body}; diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx index c1cc88b01..c6ca35ca1 100644 --- a/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx +++ b/packages/components/src/core/Autocomplete/components/AutocompleteBase/index.tsx @@ -265,9 +265,6 @@ const AutocompleteBase = < sdsType="tertiary" sdsSize="small" sdsStyle="icon" - sdsIconProps={{ - sdsType: "iconButton", - }} icon="XMarkCircle" /> )} @@ -288,13 +285,9 @@ const AutocompleteBase = < tabIndex={search ? 0 : -1} aria-hidden={!search} disabled={!search} - onClick={clearInput} sdsType="tertiary" sdsSize="small" sdsStyle="icon" - sdsIconProps={{ - sdsType: "interactive", - }} icon="Search" /> @@ -425,6 +418,7 @@ const AutocompleteBase = < isMultiSelect={multiple} selected={selected} {...optionProps} + key={option.name} > {MenuItemContent} diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts index 6f4bcdf2b..09f48823b 100644 --- a/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts +++ b/packages/components/src/core/Autocomplete/components/AutocompleteBase/style.ts @@ -76,11 +76,11 @@ export const StyledAutocompleteBase = styled(Autocomplete, { min-height: unset; &.${autocompleteClasses.focused} { - background-color: ${semanticColors?.base?.surfaceSecondary}; + background-color: ${semanticColors?.base?.fillHover}; } &[aria-selected="true"] { - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; } &[aria-disabled="true"] { @@ -88,7 +88,7 @@ export const StyledAutocompleteBase = styled(Autocomplete, { } &[aria-selected="true"].${autocompleteClasses.focused} { - background-color: ${semanticColors?.base?.surfaceSecondary}; + background-color: ${semanticColors?.base?.fillHover}; } } @@ -102,7 +102,7 @@ export const StyledAutocompleteBase = styled(Autocomplete, { .${autocompleteClasses.groupLabel} { top: 0; color: ${semanticColors?.base?.textSecondary}; - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; padding: ${spaces?.xxs}px ${spaces?.s}px; } @@ -176,7 +176,7 @@ export const StyledPaper = styled(Paper)` return ` background-image: none; padding: ${spaces?.l}px ${spaces?.xxs}px ${spaces?.l}px ${spaces?.l}px ; - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; border: ${borders?.none}; border-radius: ${corners?.m}px; box-shadow: ${shadows?.m}; diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts index 3c20875b5..8410d489e 100644 --- a/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts +++ b/packages/components/src/core/Autocomplete/components/AutocompleteGroup/style.ts @@ -64,14 +64,14 @@ export const StyledColumnIcon = styled("span")` const semanticColors = getSemanticColors(props); return ` - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; position: absolute; right: -${spaces?.xs}px; top: -2px; padding-bottom: 2px; svg { - color: ${semanticColors?.base?.iconPrimary}; + color: ${semanticColors?.base?.ornamentSecondary}; width: ${iconSizes?.xs.width}px; height: ${iconSizes?.xs.height}px; } diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx index 6acbcf1f4..bce8aedbb 100644 --- a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx +++ b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/index.tsx @@ -253,9 +253,6 @@ const AutocompleteMultiColumn = < sdsType="tertiary" sdsSize="small" sdsStyle="icon" - sdsIconProps={{ - sdsType: "interactive", - }} icon="Search" /> diff --git a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts index 604358d27..e14323c52 100644 --- a/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts +++ b/packages/components/src/core/Autocomplete/components/AutocompleteMultiColumn/style.ts @@ -43,7 +43,7 @@ export const StyledPopper = styled(Popper, { const semanticColors = getSemanticColors(props); return ` - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; background-image: none; border: ${borders?.none}; border-radius: ${corners?.m}px; @@ -72,7 +72,7 @@ export const StyledPaper = styled(Paper, { const semanticColors = getSemanticColors(props); return ` - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; background-image: none; box-shadow: ${shadows?.none}; margin: 0; diff --git a/packages/components/src/core/Banner/style.ts b/packages/components/src/core/Banner/style.ts index b18f178e6..121aea5b4 100644 --- a/packages/components/src/core/Banner/style.ts +++ b/packages/components/src/core/Banner/style.ts @@ -39,7 +39,7 @@ export const IconWrapper = styled("div", { height: ${iconSizes?.l.height}px; margin-right: ${spaces?.m}px; svg { - fill: ${bannerType === "primary" ? semanticColors?.base?.iconPrimaryInverse : semanticColors?.info?.ornament}; + fill: ${bannerType === "primary" ? semanticColors?.base?.ornamentOnFill : semanticColors?.info?.ornament}; } `; }} @@ -58,15 +58,26 @@ export const StyledButton = styled(Button as React.ComponentType, { const semanticColors = getSemanticColors(props); - if (bannerType !== "primary") return ""; + if (bannerType === "primary") + return ` + svg { + fill: ${semanticColors?.base?.ornamentOnFill}; + opacity: .65; + } + + svg:hover { + opacity: 1; + } + `; return ` svg { - fill: ${semanticColors?.base?.iconPrimaryInverse}; + fill: ${semanticColors?.base?.ornamentPrimary}; + opacity: .55; } svg:hover { - fill: ${semanticColors?.base?.iconPrimaryInverseHover}; + opacity: 1; } `; }} @@ -80,8 +91,8 @@ const primary = (props: BannerExtraProps) => { const semanticColors = getSemanticColors(props); return ` - background-color: ${semanticColors?.info?.surfaceSecondary}; - color: ${semanticColors?.base?.textPrimaryInverse}; + background-color: ${semanticColors?.info?.surfacePrimary}; + color: ${semanticColors?.base?.textOnFill}; `; }; @@ -89,7 +100,7 @@ const secondary = (props: BannerExtraProps) => { const semanticColors = getSemanticColors(props); return ` - background-color: ${semanticColors?.info?.surfacePrimary}; + background-color: ${semanticColors?.info?.surfaceSecondary}; color: ${semanticColors?.base?.textPrimary}; `; }; diff --git a/packages/components/src/core/Bases/Corners/__storybook__/style.ts b/packages/components/src/core/Bases/Corners/__storybook__/style.ts index 7845df51e..ecffe5f31 100644 --- a/packages/components/src/core/Bases/Corners/__storybook__/style.ts +++ b/packages/components/src/core/Bases/Corners/__storybook__/style.ts @@ -3,7 +3,6 @@ import { CommonThemeProps, fontCodeXs, getFontWeights, - getMode, getSemanticColors, } from "src/core/styles"; @@ -19,7 +18,6 @@ export const StyledCornerBox = styled("div")` ${(props: IStyledCornerBoxProps) => { const { size } = props; - const mode = getMode(props); const semanticColors = getSemanticColors(props); const BorderWidth = 2; const BoxSize = 60; @@ -45,7 +43,7 @@ export const StyledCornerBox = styled("div")` &::after { content: ""; position: absolute; - background-color: ${mode === "dark" ? semanticColors?.base.surfacePrimary : semanticColors?.base.surfaceSecondary}; + background-color: ${semanticColors?.base?.backgroundSecondary}; width: ${BoxSize - 2 * BorderWidth}px; height: ${BoxSize - 2 * BorderWidth}px; top: ${BorderWidth}px; diff --git a/packages/components/src/core/Bases/Spaces/__storybook__/style.ts b/packages/components/src/core/Bases/Spaces/__storybook__/style.ts index ccfc8125f..762beb1c4 100644 --- a/packages/components/src/core/Bases/Spaces/__storybook__/style.ts +++ b/packages/components/src/core/Bases/Spaces/__storybook__/style.ts @@ -28,7 +28,7 @@ export const StyledInsetSpacingBox = styled("div")` box-sizing: border-box; width: ${BoxSize}px; height: ${BoxSize}px; - border: solid ${size}px ${semanticColors?.positive.surfacePrimary}; + border: solid ${size}px ${semanticColors?.positive.surfaceSecondary}; color: ${semanticColors?.positive?.text}; font-size: 10px; display: flex; @@ -52,7 +52,7 @@ export const StyledInlineSpacingBox = styled("div")` margin-left: 30px; width: ${size}px; height: ${BoxSize}px; - background-color: ${semanticColors?.notice.surfacePrimary}; + background-color: ${semanticColors?.notice.surfaceSecondary}; color: ${semanticColors?.notice?.text}; font-size: 10px; display: flex; @@ -75,7 +75,7 @@ export const StyledStackedSpacingBox = styled("div")` position: relative; height: ${size}px; width: ${BoxSize}px; - background-color: ${semanticColors?.notice.surfacePrimary}; + background-color: ${semanticColors?.notice.surfaceSecondary}; color: ${semanticColors?.notice?.text}; font-size: 10px; display: flex; diff --git a/packages/components/src/core/Button/style.ts b/packages/components/src/core/Button/style.ts index 4bc905127..57792e5e9 100644 --- a/packages/components/src/core/Button/style.ts +++ b/packages/components/src/core/Button/style.ts @@ -46,12 +46,12 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => { const contentColor = variant === "outlined" ? semanticColors?.accent?.textAction - : semanticColors?.base?.textPrimaryInverse; + : semanticColors?.base?.textOnFill; const ornamentColor = variant === "outlined" - ? semanticColors?.accent?.icon - : semanticColors?.base?.iconPrimaryInverse; + ? semanticColors?.accent?.ornament + : semanticColors?.base?.ornamentOnFill; const backgroundColor = variant === "outlined" @@ -66,10 +66,15 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => { ? `inset 0 0 0 1px ${semanticColors?.base?.borderDisabled}` : "none"; + const boxshadow = + variant === "outlined" + ? `inset 0 0 0 1px ${semanticColors?.accent?.border}` + : "none"; + return css` background-color: ${backgroundColor}; border: none; - box-shadow: inset 0 0 0 1px ${semanticColors?.accent?.border}; + box-shadow: ${boxshadow}; padding: ${padding}; color: ${contentColor}; line-height: ${isAllCaps ? "20px" : "unset"}; @@ -85,7 +90,7 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => { box-shadow: inset 0 0 0 1px ${semanticColors?.accent?.borderHover}; svg { - color: ${semanticColors?.base?.iconPrimaryInverse}; + color: ${semanticColors?.base?.ornamentPrimaryInverse}; } } @@ -96,7 +101,7 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => { box-shadow: inset 0 0 0 1px ${semanticColors?.accent?.fillPressed}; svg { - color: ${semanticColors?.base?.iconPrimaryInverse}; + color: ${semanticColors?.base?.ornamentPrimaryInverse}; } } @@ -107,7 +112,7 @@ const ButtonStyles = (props: ButtonExtraProps): SerializedStyles => { border: none; svg { - color: ${semanticColors?.base?.iconDisabled}; + color: ${semanticColors?.base?.ornamentDisabled}; } } @@ -151,21 +156,26 @@ const DestructiveButton = (props: ButtonExtraProps): SerializedStyles => { const contentColor = variant === "outlined" ? semanticColors?.negative?.text - : semanticColors?.base?.textPrimaryInverse; + : semanticColors?.base?.textOnFill; const ornamentColor = variant === "outlined" ? semanticColors?.negative?.ornament - : semanticColors?.base?.iconPrimaryInverse; + : semanticColors?.base?.ornamentOnFill; const backgroundColor = variant === "outlined" ? "transparent" : semanticColors?.negative?.fillPrimary; + const boxshadow = + variant === "outlined" + ? `inset 0 0 0 1px ${semanticColors?.negative?.border}` + : "none"; + return css` border: none; - box-shadow: inset 0 0 0 1px ${semanticColors?.negative?.border}; + box-shadow: ${boxshadow}; color: ${contentColor}; background-color: ${backgroundColor}; @@ -180,7 +190,7 @@ const DestructiveButton = (props: ButtonExtraProps): SerializedStyles => { box-shadow: inset 0 0 0 1px ${semanticColors?.negative?.fillHover}; svg { - color: ${semanticColors?.base?.iconPrimaryInverse}; + color: ${semanticColors?.base?.ornamentPrimaryInverse}; } } @@ -191,7 +201,7 @@ const DestructiveButton = (props: ButtonExtraProps): SerializedStyles => { box-shadow: inset 0 0 0 1px ${semanticColors?.negative?.fillPressed}; svg { - color: ${semanticColors?.base?.iconPrimaryInverse}; + color: ${semanticColors?.base?.ornamentPrimaryInverse}; } } @@ -202,7 +212,7 @@ const DestructiveButton = (props: ButtonExtraProps): SerializedStyles => { box-shadow: ${shadows?.none}; svg { - color: ${semanticColors?.base?.iconDisabled}; + color: ${semanticColors?.base?.ornamentDisabled}; } } `; @@ -247,7 +257,7 @@ const Minimal = (props: ButtonExtraProps): SerializedStyles => { color: ${semanticColors?.accent?.textActionHover}; svg { - color: ${semanticColors?.accent?.iconHover}; + color: ${semanticColors?.accent?.ornamentHover}; } } @@ -259,14 +269,14 @@ const Minimal = (props: ButtonExtraProps): SerializedStyles => { color: ${semanticColors?.accent?.textActionPressed}; svg { - color: ${semanticColors?.accent?.iconPressed}; + color: ${semanticColors?.accent?.ornamentPressed}; } } &:disabled { color: ${semanticColors?.base?.textDisabled}; svg { - color: ${semanticColors?.base?.iconDisabled}; + color: ${semanticColors?.base?.ornamentDisabled}; } } @@ -300,6 +310,10 @@ const PrimaryMinimalButton = (props: ButtonExtraProps): SerializedStyles => { return css` ${Minimal(props)} color: ${semanticColors?.accent?.textAction}; + + svg { + color: ${semanticColors?.accent?.ornament}; + } `; }; @@ -309,6 +323,10 @@ const SecondaryMinimalButton = (props: ButtonExtraProps): SerializedStyles => { return css` ${Minimal(props)} color: ${semanticColors?.base?.textPrimary}; + + svg { + color: ${semanticColors?.base?.ornamentPrimary}; + } `; }; diff --git a/packages/components/src/core/ButtonDropdown/index.tsx b/packages/components/src/core/ButtonDropdown/index.tsx index 930817abe..3be9007b3 100644 --- a/packages/components/src/core/ButtonDropdown/index.tsx +++ b/packages/components/src/core/ButtonDropdown/index.tsx @@ -45,7 +45,6 @@ const ButtonDropdown = React.forwardRef( } else { return ( } + endIcon={} sdsStyle={sdsStyle} ref={ref} sdsType={sdsType} diff --git a/packages/components/src/core/ButtonIcon/style.ts b/packages/components/src/core/ButtonIcon/style.ts index 327419d27..769787f17 100644 --- a/packages/components/src/core/ButtonIcon/style.ts +++ b/packages/components/src/core/ButtonIcon/style.ts @@ -19,10 +19,10 @@ const isDisabled = (props: ButtonIconExtraProps): SerializedStyles => { const semanticColors = getSemanticColors(props); return css` - color: ${semanticColors?.base?.iconDisabled}; + color: ${semanticColors?.base?.ornamentDisabled}; svg { - color: ${semanticColors?.base?.iconDisabled}; + color: ${semanticColors?.base?.ornamentDisabled}; } `; }; @@ -31,27 +31,27 @@ const primary = (props: ButtonIconExtraProps): SerializedStyles => { const semanticColors = getSemanticColors(props); return css` - color: ${semanticColors?.accent?.textAction}; + color: ${semanticColors?.accent?.ornament}; svg { - color: ${semanticColors?.accent?.icon}; + color: ${semanticColors?.accent?.ornament}; } &:hover { background: ${semanticColors?.base?.fillHover}; - color: ${semanticColors?.accent?.textActionHover}; + color: ${semanticColors?.accent?.ornamentHover}; svg { - color: ${semanticColors?.accent?.iconHover}; + color: ${semanticColors?.accent?.ornamentHover}; } } &:active { background: ${semanticColors?.base?.fillPressed}; - color: ${semanticColors?.accent?.textActionPressed}; + color: ${semanticColors?.accent?.ornamentPressed}; svg { - color: ${semanticColors?.accent?.iconPressed}; + color: ${semanticColors?.accent?.ornamentPressed}; } } `; @@ -61,27 +61,27 @@ const secondary = (props: ButtonIconExtraProps): SerializedStyles => { const semanticColors = getSemanticColors(props); return css` - color: ${semanticColors?.base?.iconPrimary}; + color: ${semanticColors?.base?.ornamentSecondary}; svg { - color: ${semanticColors?.base?.iconPrimary}; + color: ${semanticColors?.base?.ornamentSecondary}; } &:hover { background: ${semanticColors?.base?.fillHover}; - color: ${semanticColors?.accent?.iconHover}; + color: ${semanticColors?.accent?.ornamentHover}; svg { - color: ${semanticColors?.accent?.iconHover}; + color: ${semanticColors?.accent?.ornamentHover}; } } &:active { background: ${semanticColors?.base?.fillPressed}; - color: ${semanticColors?.accent?.iconPressed}; + color: ${semanticColors?.accent?.ornamentPressed}; svg { - color: ${semanticColors?.accent?.iconPressed}; + color: ${semanticColors?.accent?.ornamentPressed}; } } `; @@ -91,27 +91,27 @@ const tertiary = (props: ButtonIconExtraProps): SerializedStyles => { const semanticColors = getSemanticColors(props); return css` - color: ${semanticColors?.base?.iconPrimary}; + color: ${semanticColors?.base?.ornamentSecondary}; svg { - color: ${semanticColors?.base?.iconPrimary}; + color: ${semanticColors?.base?.ornamentSecondary}; } &:hover { background: none; - color: ${semanticColors?.base?.iconPrimaryHover}; + color: ${semanticColors?.base?.ornamentSecondaryHover}; svg { - color: ${semanticColors?.base?.iconPrimaryHover}; + color: ${semanticColors?.base?.ornamentSecondaryHover}; } } &:active { background: none; - color: ${semanticColors?.base?.iconPrimaryPressed}; + color: ${semanticColors?.base?.ornamentSecondaryPressed}; svg { - color: ${semanticColors?.base?.iconPrimaryPressed}; + color: ${semanticColors?.base?.ornamentSecondaryPressed}; } } `; diff --git a/packages/components/src/core/ButtonToggle/style.ts b/packages/components/src/core/ButtonToggle/style.ts index 1effb6933..627d03469 100644 --- a/packages/components/src/core/ButtonToggle/style.ts +++ b/packages/components/src/core/ButtonToggle/style.ts @@ -24,7 +24,7 @@ export const StyledButtonToggle = styled(ButtonIcon, { const semanticColors = getSemanticColors(props); return ` - background-color: ${sdsStage === "on" ? semanticColors?.base?.fillHover : "transparent"}; + background-color: ${sdsStage === "on" ? semanticColors?.base?.fillOpen : "transparent"}; `; }} `; diff --git a/packages/components/src/core/Callout/style.ts b/packages/components/src/core/Callout/style.ts index 3e35d809d..f59680b5f 100644 --- a/packages/components/src/core/Callout/style.ts +++ b/packages/components/src/core/Callout/style.ts @@ -41,7 +41,8 @@ export const StyledCallout = styled(Alert, { const semanticColors = getSemanticColors(props); const iconColor = semanticColors?.[intent]?.ornament ?? "black"; - const backgroundColor = semanticColors?.[intent]?.surfacePrimary ?? "white"; + const backgroundColor = + semanticColors?.[intent]?.surfaceSecondary ?? "white"; // when a title is present Mui's default styling has vertical margin, // but for an expandable callout that is collapsed, we do not want diff --git a/packages/components/src/core/CellHeader/index.tsx b/packages/components/src/core/CellHeader/index.tsx index 4674fd084..cdcdb42f4 100644 --- a/packages/components/src/core/CellHeader/index.tsx +++ b/packages/components/src/core/CellHeader/index.tsx @@ -52,7 +52,6 @@ const CellHeaderContent = ( : "Change sort direction from descending to ascending" } sdsIcon={sdsIconName} - sdsType="static" sdsSize="xs" active={active} hideSortIcon={hideSortIcon} diff --git a/packages/components/src/core/CellHeader/style.ts b/packages/components/src/core/CellHeader/style.ts index 826aa1486..3a2f83535 100644 --- a/packages/components/src/core/CellHeader/style.ts +++ b/packages/components/src/core/CellHeader/style.ts @@ -41,8 +41,8 @@ export const StyledSortingIcon = styled(Icon, { return ` margin-left: ${spaces?.s}px; margin-bottom: ${spaces?.xxs}px; - color: ${active ? semanticColors?.accent?.icon : semanticColors?.base?.iconPrimary}; - opacity: ${hideSortIcon ? (active ? 1 : 0) : 1}; + color: ${active ? semanticColors?.accent?.ornament : "transparent"}; + display: ${hideSortIcon ? (active ? "block" : "none") : "block"}; outline: none !important; `; }} @@ -65,7 +65,6 @@ export const StyledTableHeader = styled("th", { padding: ${spaces?.l}px ${spaces?.m}px; text-align: ${horizontalAlign}; min-width: 96px; - width: 96px; cursor: pointer; vertical-align: bottom; @@ -82,7 +81,7 @@ export const StyledTableHeader = styled("th", { } & svg { - color: ${active ? semanticColors?.accent?.iconHover : semanticColors?.base?.iconPrimaryHover}; + color: ${active ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondaryHover}; } } `; diff --git a/packages/components/src/core/Dialog/components/DialogPaper/style.ts b/packages/components/src/core/Dialog/components/DialogPaper/style.ts index 0f054991b..810427d84 100644 --- a/packages/components/src/core/Dialog/components/DialogPaper/style.ts +++ b/packages/components/src/core/Dialog/components/DialogPaper/style.ts @@ -28,7 +28,7 @@ export const StyledPaper = styled(Paper, { const semanticColors = getSemanticColors(props); return ` - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; background-image: none; box-shadow: ${shadows?.l}; max-height: calc(100vh - ${2 * (spaces?.xxl || 0)}px); diff --git a/packages/components/src/core/DropdownMenu/style.ts b/packages/components/src/core/DropdownMenu/style.ts index 548f54497..7e4beb093 100644 --- a/packages/components/src/core/DropdownMenu/style.ts +++ b/packages/components/src/core/DropdownMenu/style.ts @@ -80,7 +80,7 @@ export const StyledPopper = styled(Popper, { const semanticColors = getSemanticColors(props); return ` - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; background-image: none; border: ${borders?.none}; border-radius: ${corners?.m}px; @@ -103,7 +103,7 @@ export const StyledPaper = styled(Paper, { return ` box-shadow: ${shadows?.none} !important; border: ${borders?.none}; - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; background-image: none; margin: 0; padding: ${spaces?.l}px ${spaces?.xxs}px ${spaces?.l}px ${spaces?.l}px; diff --git a/packages/components/src/core/Icon/__storybook__/index.stories.tsx b/packages/components/src/core/Icon/__storybook__/index.stories.tsx index 4667c125d..21ba8a0d8 100644 --- a/packages/components/src/core/Icon/__storybook__/index.stories.tsx +++ b/packages/components/src/core/Icon/__storybook__/index.stories.tsx @@ -30,10 +30,6 @@ export default { control: { type: "select" }, options: ["xs", "s", "l", "xl"], }, - sdsType: { - control: { type: "select" }, - options: ["iconButton", "interactive", "static", "button"], - }, shade: { control: { type: "select", @@ -55,8 +51,6 @@ export const Default = { color: "blue", sdsIcon: "CheckCircle", sdsSize: "xl", - sdsType: "static", - shade: 500, }, }; @@ -89,7 +83,6 @@ export const Test = { { - const { sdsIcon, sdsSize, sdsType, ...rest } = props; + const { sdsIcon, sdsSize, ...rest } = props; - return ( - - ); + return ; }; diff --git a/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx b/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx index e30c8c15c..48900341c 100644 --- a/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx +++ b/packages/components/src/core/Icon/__storybook__/stories/iconBank.tsx @@ -40,7 +40,7 @@ const IconWrapper = styled("div")` const semanticColors = getSemanticColors(props); const mode = getMode(props); - const { color = "blue", shade = 500 } = props; + const { color = "blue", shade = mode === "dark" ? 600 : 500 } = props; return ` align-items: center; @@ -66,7 +66,7 @@ const IconWrapper = styled("div")` } span.size-tag { - background-color: ${semanticColors?.base?.surfaceSecondary}; + background-color: ${mode === "light" ? "rgba(0, 0, 0, 0.1)" : "rgba(255, 255, 255, 0.1)"}; font-size: 10px; padding: 0 4px; margin: 0 2px; @@ -92,7 +92,7 @@ const IconWrapper = styled("div")` } svg { - fill: ${semanticColors?.base?.iconPrimaryInverse}; + fill: ${semanticColors?.base?.ornamentPrimaryInverse}; } div.notification { @@ -157,7 +157,6 @@ const IconItem = (props: IconItemProps) => { color={color} sdsSize={sdsSize} sdsIcon={sdsIcon as keyof IconNameToSizes} - sdsType="static" />

{sdsIcon}

@@ -181,16 +180,10 @@ const IconItem = (props: IconItemProps) => { color={color} sdsSize={sdsSize} sdsIcon={sdsIcon as keyof IconNameToSizes} - sdsType="static" />

Copied!

- + )} @@ -241,9 +234,7 @@ export const IconBankDemo = (props: Args): JSX.Element => { ) : ( - } + icon={} > Sorry, there are no matches for your search! diff --git a/packages/components/src/core/Icon/__tests__/Icon.namespace-test.tsx b/packages/components/src/core/Icon/__tests__/Icon.namespace-test.tsx index 3049248b5..22e4af8e7 100644 --- a/packages/components/src/core/Icon/__tests__/Icon.namespace-test.tsx +++ b/packages/components/src/core/Icon/__tests__/Icon.namespace-test.tsx @@ -2,5 +2,5 @@ import { Icon } from "@czi-sds/components"; import React from "react"; const IconNameSpaceTest = () => { - return ; + return ; }; diff --git a/packages/components/src/core/Icon/index.tsx b/packages/components/src/core/Icon/index.tsx index 0f6139e68..53a77ef2f 100644 --- a/packages/components/src/core/Icon/index.tsx +++ b/packages/components/src/core/Icon/index.tsx @@ -11,7 +11,7 @@ export type { IconNameToSizes }; export interface SdsIconWithColor { color?: SdsIconColorType; - shade?: 100 | 200 | 300 | 400 | 500 | 600; + shade?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800; } export type IconProps = @@ -21,7 +21,7 @@ export type IconProps = * @see https://mui.com/material-ui/icons/#icons */ const Icon = forwardRef(function Icon( - { className, color, shade, sdsIcon, sdsSize, sdsType }: IconProps, + { className, color, shade, sdsIcon, sdsSize }: IconProps, ref: ForwardedRef ): JSX.Element | null { const icon = iconMap[sdsIcon] ?? {}; @@ -40,7 +40,6 @@ const Icon = forwardRef(function Icon( height={16} component={smallIcon} sdsSize={sdsSize} - sdsType={sdsType} sdsIcon={sdsIcon} /> @@ -59,7 +58,6 @@ const Icon = forwardRef(function Icon( height={24} component={largeIcon} sdsSize={sdsSize} - sdsType={sdsType} sdsIcon={sdsIcon} /> diff --git a/packages/components/src/core/Icon/style.ts b/packages/components/src/core/Icon/style.ts index 8e9a78ba3..618c9b0c3 100644 --- a/packages/components/src/core/Icon/style.ts +++ b/packages/components/src/core/Icon/style.ts @@ -1,4 +1,4 @@ -import { css, SerializedStyles } from "@emotion/react"; +import { css } from "@emotion/react"; import { SvgIcon, SvgIconProps } from "@mui/material"; import styled from "@emotion/styled"; import { FC } from "react"; @@ -6,7 +6,7 @@ import { CommonThemeProps, getColors, getIconSizes, - getSemanticColors, + getMode, } from "src/core/styles"; import { IconNameToSizes } from "./map"; @@ -15,7 +15,6 @@ export interface IconExtraProps className?: string; sdsIcon: IconName; sdsSize: IconNameToSizes[IconName]; - sdsType: "iconButton" | "interactive" | "static" | "button"; } export type SdsIconColorType = @@ -37,65 +36,11 @@ export type StyledSvgIconProps = SvgIconProps<"svg", { component: FC }> & SdsIconWithColor; +const doNotForwardProps = ["sdsIcon", "sdsSize", "iconColor"]; + /** * @see https://mui.com/material-ui/icons/#svgicon */ -function iconSize( - props: IconExtraProps -): SerializedStyles { - const { sdsSize } = props; - const iconSizes = getIconSizes(props); - - return css` - height: ${iconSizes?.[sdsSize]?.height}px; - width: ${iconSizes?.[sdsSize]?.width}px; - `; -} - -function buttonStyle(): SerializedStyles { - return css` - color: inherit; - `; -} - -function staticStyle( - props: StyledSvgIconProps -): SerializedStyles { - const { iconColor = "blue", shade = 500 } = props; - - const colors = getColors(props); - - return css` - color: ${colors?.[iconColor]?.[shade]}; - `; -} - -function interactive( - props: StyledSvgIconProps -): SerializedStyles { - const { iconColor = "blue", shade = 500 } = props; - - const colors = getColors(props); - const semanticColors = getSemanticColors(props); - - return css` - color: ${semanticColors?.base?.iconPrimary}; - - &:hover { - color: ${semanticColors?.base?.iconPrimaryHover}; - } - - &:active { - color: ${colors?.[iconColor]?.[shade]}; - } - - &:disabled { - color: ${semanticColors?.base?.iconDisabled}; - } - `; -} - -const doNotForwardProps = ["sdsIcon", "sdsSize", "sdsType", "iconColor"]; export const StyledSvgIcon = styled(SvgIcon, { shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string), @@ -103,13 +48,21 @@ export const StyledSvgIcon = styled(SvgIcon, { ${( props: StyledSvgIconProps ) => { - const { sdsType } = props; + const mode = getMode(props); + + const { + iconColor = "blue", + shade = mode === "dark" ? 600 : 500, + sdsSize, + } = props; + + const iconSizes = getIconSizes(props); + const colors = getColors(props); return css` - ${sdsType !== "iconButton" && iconSize(props)} - ${sdsType === "static" && staticStyle(props)} - ${sdsType === "interactive" && interactive(props)} - ${sdsType === "button" && buttonStyle()} + color: ${colors?.[iconColor]?.[shade]}; + height: ${iconSizes?.[sdsSize]?.height}px; + width: ${iconSizes?.[sdsSize]?.width}px; `; }} `; diff --git a/packages/components/src/core/InputDropdown/index.tsx b/packages/components/src/core/InputDropdown/index.tsx index 17783ed69..fc145d43b 100644 --- a/packages/components/src/core/InputDropdown/index.tsx +++ b/packages/components/src/core/InputDropdown/index.tsx @@ -69,7 +69,7 @@ const InputDropdown = (props: InputDropdownProps): JSX.Element => { )} {shouldRenderCounter && {counter}} - + diff --git a/packages/components/src/core/InputDropdown/style.ts b/packages/components/src/core/InputDropdown/style.ts index 61cf83467..db3486c5e 100644 --- a/packages/components/src/core/InputDropdown/style.ts +++ b/packages/components/src/core/InputDropdown/style.ts @@ -77,7 +77,6 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => { ${labelStyle(props)} border: ${borders?.base?.default}; - background-color: ${semanticColors?.base?.surfacePrimary}; cursor: pointer; padding: ${padding}; justify-content: start; @@ -101,16 +100,16 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => { } path { - fill: ${semanticColors?.base?.iconPrimary}; + fill: ${semanticColors?.base?.ornamentSecondary}; } &:hover { - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: transparent; border-color: ${semanticColors?.base?.borderHover}; color: ${semanticColors?.base?.textPrimary}; path { - fill: ${semanticColors?.base?.iconPrimaryHover}; + fill: ${semanticColors?.base?.ornamentSecondaryHover}; } .styled-label { @@ -123,7 +122,7 @@ const inputDropdownStyles = (props: InputDropdownProps): SerializedStyles => { color: ${semanticColors?.base?.textPrimary}; path { - fill: ${semanticColors?.base?.iconPrimaryPressed}; + fill: ${semanticColors?.base?.ornamentSecondaryPressed}; } } @@ -160,7 +159,7 @@ const minimal = (props: InputDropdownProps): SerializedStyles => { } path { - fill: ${semanticColors?.base?.iconPrimary}; + fill: ${semanticColors?.base?.ornamentSecondary}; } &:hover { @@ -169,7 +168,7 @@ const minimal = (props: InputDropdownProps): SerializedStyles => { color: ${semanticColors?.base?.textPrimary}; path { - fill: ${semanticColors?.base?.iconPrimaryHover}; + fill: ${semanticColors?.base?.ornamentSecondaryHover}; } .styled-label { @@ -229,15 +228,9 @@ const userInput = (props: InputDropdownProps): SerializedStyles => { ${sdsStyle === "minimal" ? ` - - background-color: ${semanticColors?.base?.fillHover}47; border: none; color: ${semanticColors?.base?.textPrimary}; - path { - fill: ${semanticColors?.base?.iconPrimaryHover}; - } - .styled-label { color: ${semanticColors?.base?.textPrimary}; } @@ -277,23 +270,24 @@ const isOpen = (props: InputDropdownProps): SerializedStyles => { path { fill: ${inputColor === "accent" - ? semanticColors?.accent?.iconOpen + ? semanticColors?.accent?.ornamentOpen : semanticColors?.[inputColor]?.ornament}; } border: ${sdsStyle === "minimal" ? borders?.none : borders?.[inputColor]?.open}; + background-color: ${sdsStyle === "minimal" - ? semanticColors?.base?.fillHover + "47" + ? semanticColors?.base?.fillOpen : "transparent"}; &:hover { path { - fill: ${semanticColors?.base?.iconPrimaryHover}; + fill: ${semanticColors?.base?.ornamentSecondaryHover}; } - border-color: ${borders?.accent?.hover}; + border-color: ${semanticColors?.base?.borderHover}; } `; }; @@ -335,7 +329,7 @@ const isDisabled = (props: InputDropdownProps): SerializedStyles => { } path { - fill: ${semanticColors?.base?.iconDisabled}; + fill: ${semanticColors?.base?.ornamentDisabled}; } `; }; @@ -445,7 +439,7 @@ export const StyledCounter = styled("span", { const semanticColors = getSemanticColors(props); return ` - background-color: ${semanticColors?.base?.surfaceTertiary}; + background-color: ${semanticColors?.base?.backgroundTertiary}; color: ${semanticColors?.accent?.textAction}; border-radius: ${corners?.l}px; padding: 0 ${spaces?.xs}px; diff --git a/packages/components/src/core/InputSearch/index.tsx b/packages/components/src/core/InputSearch/index.tsx index e6dc246ba..c7d028ce1 100644 --- a/packages/components/src/core/InputSearch/index.tsx +++ b/packages/components/src/core/InputSearch/index.tsx @@ -115,9 +115,6 @@ const InputSearch = forwardRef( sdsSize="small" sdsStyle="icon" disabled={disabled} - sdsIconProps={{ - sdsType: "iconButton", - }} icon="XMarkCircle" /> @@ -131,9 +128,6 @@ const InputSearch = forwardRef( sdsSize="small" sdsStyle="icon" disabled={disabled} - sdsIconProps={{ - sdsType: "interactive", - }} icon="Search" /> diff --git a/packages/components/src/core/InputSearch/style.ts b/packages/components/src/core/InputSearch/style.ts index a718b328a..ed14e64f7 100644 --- a/packages/components/src/core/InputSearch/style.ts +++ b/packages/components/src/core/InputSearch/style.ts @@ -87,11 +87,17 @@ const disabledStyled = (props: InputSearchExtraProps): SerializedStyles => { } .${inputAdornmentClasses.root} svg { - color: ${semanticColors?.base?.iconDisabled}; + color: ${semanticColors?.base?.ornamentDisabled}; } - &:hover .${outlinedInputClasses.notchedOutline} { - border: 1px solid ${semanticColors?.base?.borderDisabled}; + &:hover { + .${outlinedInputClasses.notchedOutline} { + border: 1px solid ${semanticColors?.base?.borderDisabled}; + } + + .${inputAdornmentClasses.root} svg { + color: ${semanticColors?.base?.ornamentDisabled} !important; + } } &::placeholder { @@ -156,7 +162,6 @@ export const StyledSearchBase = styled(TextField, { .${outlinedInputClasses.root} { padding: 0 ${spaces?.m}px; - background-color: ${semanticColors?.base?.surfacePrimary}; width: 100%; .${outlinedInputClasses.input} { @@ -175,12 +180,12 @@ export const StyledSearchBase = styled(TextField, { &:hover .input-search-clear-icon, &:focus-within .input-search-clear-icon { svg { - color: ${semanticColors?.base?.iconPrimary} !important; + color: ${semanticColors?.base?.ornamentSecondary} !important; } &:hover { svg { - color: ${semanticColors?.base?.iconPrimaryHover} !important; + color: ${semanticColors?.base?.ornamentSecondaryHover} !important; } } @@ -197,13 +202,12 @@ export const StyledSearchBase = styled(TextField, { padding: ${spaces?.xs}px ${spaces?.s}px; height: unset; box-sizing: border-box; - background-color: ${semanticColors?.base?.surfacePrimary}; } .${outlinedInputClasses.root}:hover { & .${buttonBaseClasses.root}:last-of-type { svg { - color: ${semanticColors?.base?.iconPrimaryHover}; + color: ${semanticColors?.base?.ornamentSecondaryHover}; } } .${outlinedInputClasses.notchedOutline} { @@ -221,7 +225,7 @@ export const StyledSearchBase = styled(TextField, { .${inputAdornmentClasses.root} .${buttonBaseClasses.root}:last-of-type { cursor: default; svg { - color: ${semanticColors?.accent?.icon}; + color: ${semanticColors?.accent?.ornamentFocus}; } } } diff --git a/packages/components/src/core/InputSlider/style.ts b/packages/components/src/core/InputSlider/style.ts index 91e878105..a3d591609 100644 --- a/packages/components/src/core/InputSlider/style.ts +++ b/packages/components/src/core/InputSlider/style.ts @@ -5,9 +5,7 @@ import { focusVisibleA11yStyle, fontBodyXxs, fontBodyXxxs, - getColors, getCorners, - getMode, getSemanticColors, getShadows, } from "src/core/styles"; @@ -52,7 +50,7 @@ const inputSlider = (props: InputSliderExtraProps) => { } .${sliderClasses.thumb}::after { - background-color: ${semanticColors?.base?.surfacePrimary} !important; + background-color: ${semanticColors?.base?.backgroundPrimary} !important; height: 6px !important; width: 6px !important; position: absolute; @@ -64,7 +62,7 @@ const inputSlider = (props: InputSliderExtraProps) => { .${sliderClasses.valueLabel} { padding: 2px 4px; color: ${semanticColors?.base?.textPrimary}; - background-color: ${semanticColors?.accent?.surfacePrimary}; + background-color: ${semanticColors?.accent?.surfaceSecondary}; border-radius: ${corners?.m}px; left: unset; top: -3px; @@ -84,13 +82,13 @@ const inputSlider = (props: InputSliderExtraProps) => { .${sliderClasses.mark} { // (masoudmanson): Although the mark is not a icon, but since we don't have - // a specific color for the mark, we use the iconDisabled color for it. - background-color: ${semanticColors?.base?.iconDisabled}; + // a specific color for the mark, we use the ornamentDisabled color for it. + background-color: ${semanticColors?.base?.ornamentDisabled}; opacity: 1; } .${sliderClasses.mark}.${sliderClasses.markActive} { - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.backgroundPrimary}; } .${sliderClasses.markLabel} { @@ -136,9 +134,7 @@ const horizontal = (props: InputSliderExtraProps) => { }; const disabledSlider = (props: InputSliderExtraProps) => { - const colors = getColors(props); const semanticColors = getSemanticColors(props); - const mode = getMode(props); return ` .${sliderClasses.track} { @@ -150,8 +146,8 @@ const disabledSlider = (props: InputSliderExtraProps) => { } .${sliderClasses.valueLabel} { - color: ${colors?.gray[300]}; - background-color: ${mode === "light" ? semanticColors?.base?.surfaceSecondary : semanticColors?.base?.surfacePrimary}; + color: ${semanticColors?.base?.textDisabled}; + background-color: ${semanticColors?.base?.backgroundTertiary}; & * { color: ${semanticColors?.base?.textDisabled}; diff --git a/packages/components/src/core/InputText/style.ts b/packages/components/src/core/InputText/style.ts index ae772fb81..6caa5e49d 100644 --- a/packages/components/src/core/InputText/style.ts +++ b/packages/components/src/core/InputText/style.ts @@ -67,10 +67,12 @@ const disabledStyled = (props: InputTextExtraProps): SerializedStyles => { .${outlinedInputClasses.disabled} { .${outlinedInputClasses.notchedOutline} { border: ${borders?.base?.disabled}; + opacity: 1; } &:hover .${outlinedInputClasses.notchedOutline} { border: ${borders?.base?.disabled}; + opacity: 1; } &::placeholder { @@ -120,7 +122,6 @@ export const StyledInputBase = styled(TextField, { const spaces = getSpaces(props); const borders = getBorders(props); const corners = getCorners(props); - const semanticColors = getSemanticColors(props); return css` margin-bottom: ${spaces?.l}px; @@ -136,7 +137,6 @@ export const StyledInputBase = styled(TextField, { padding: ${spaces?.xs}px ${spaces?.m}px; height: unset; box-sizing: border-box; - background-color: ${semanticColors?.base?.surfacePrimary}; } .${outlinedInputClasses.notchedOutline} { diff --git a/packages/components/src/core/InputToggle/style.ts b/packages/components/src/core/InputToggle/style.ts index b4c45ec17..4f10677bb 100644 --- a/packages/components/src/core/InputToggle/style.ts +++ b/packages/components/src/core/InputToggle/style.ts @@ -68,7 +68,7 @@ const toggle = (props: InputToggleExtraProps) => { } .${switchClasses.track} { - background-color: ${semanticColors?.base?.surfacePrimary}; + // background-color: ${semanticColors?.base?.backgroundPrimary}; opacity: 1; border-radius: ${corners?.l}px; } @@ -87,7 +87,7 @@ const toggleOn = (props: InputToggleExtraProps) => { } .${switchClasses.thumb} { - color: ${disabled ? semanticColors?.base?.iconDisabled : semanticColors?.accent?.icon}; + color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.accent?.ornament}; margin-left: ${spaces?.m}px; } @@ -108,7 +108,7 @@ const toggleOn = (props: InputToggleExtraProps) => { } .${switchClasses.track} { - background-color: ${semanticColors?.base?.fillPrimary} !important; + background-color: transparent !important; opacity: 1 !important; } @@ -118,7 +118,7 @@ const toggleOn = (props: InputToggleExtraProps) => { outline: ${borders?.accent?.hover}; .${switchClasses.thumb} { - color: ${semanticColors?.accent?.iconHover}; + color: ${semanticColors?.accent?.ornamentHover}; } }` } @@ -139,8 +139,8 @@ const toggleOff = (props: InputToggleExtraProps) => { .${switchClasses.thumb} { color: ${ disabled - ? semanticColors?.base?.iconDisabled - : semanticColors?.base?.iconPrimary + ? semanticColors?.base?.ornamentDisabled + : semanticColors?.base?.ornamentSecondary }; margin-right: ${spaces?.m}px; } @@ -170,7 +170,7 @@ const toggleOff = (props: InputToggleExtraProps) => { } .${switchClasses.track} { - background-color: ${semanticColors?.base?.fillPrimary} !important; + background-color: transparent !important; opacity: 1 !important; } @@ -180,7 +180,7 @@ const toggleOff = (props: InputToggleExtraProps) => { outline: ${borders?.base?.hover}; .${switchClasses.thumb} { - color: ${semanticColors?.base?.iconPrimaryHover}; + color: ${semanticColors?.base?.ornamentSecondaryHover}; } }` } diff --git a/packages/components/src/core/LoadingIndicator/style.ts b/packages/components/src/core/LoadingIndicator/style.ts index f523c3197..0ac88a1da 100644 --- a/packages/components/src/core/LoadingIndicator/style.ts +++ b/packages/components/src/core/LoadingIndicator/style.ts @@ -38,7 +38,7 @@ const minimal = (props: CommonThemeProps): SerializedStyles => { width: ${iconSizes?.s.width}px; path { - fill: ${semanticColors?.base?.iconPrimary}; + fill: ${semanticColors?.base?.ornamentSecondary}; } } `; @@ -51,7 +51,7 @@ const tag = (props: CommonThemeProps): SerializedStyles => { return css` ${fontCapsXxxxs(props)} - background-color: ${semanticColors?.info?.surfacePrimary}; + background-color: ${semanticColors?.info?.surfaceSecondary}; border-radius: ${corners?.l}px; color: ${semanticColors?.info?.text}; diff --git a/packages/components/src/core/Menu/style.ts b/packages/components/src/core/Menu/style.ts index 06de8fdf6..75152b08a 100644 --- a/packages/components/src/core/Menu/style.ts +++ b/packages/components/src/core/Menu/style.ts @@ -14,7 +14,7 @@ export const StyledMenu = styled(Menu)` const semanticColors = getSemanticColors(props); return ` - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; background-image: none; padding: ${spaces?.xs}px; `; diff --git a/packages/components/src/core/MenuItem/style.ts b/packages/components/src/core/MenuItem/style.ts index 039c65d35..fdac4d2b7 100644 --- a/packages/components/src/core/MenuItem/style.ts +++ b/packages/components/src/core/MenuItem/style.ts @@ -59,7 +59,7 @@ export const StyledMenuItem = styled(MenuItem)` } svg.check-icon { - color: ${selected ? semanticColors?.accent?.iconSelected : semanticColors?.base?.iconPrimary}; + color: ${selected ? semanticColors?.accent?.ornamentSelected : semanticColors?.base?.ornamentSecondary}; } } @@ -70,12 +70,12 @@ export const StyledMenuItem = styled(MenuItem)` &:hover { background-color: ${semanticColors?.base?.fillHover}; svg.check-icon { - color: ${selected ? semanticColors?.accent?.iconHover : semanticColors?.base?.iconPrimary}; + color: ${selected ? semanticColors?.accent?.ornamentHover : semanticColors?.base?.ornamentSecondary}; } } &.Mui-selected.MuiListItem-root.MuiListItem-button { - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; &:hover { background-color: ${semanticColors?.base?.fillHover}; } @@ -86,12 +86,12 @@ export const StyledMenuItem = styled(MenuItem)` &:active { svg.check-icon { - color: ${semanticColors?.accent?.iconPressed}; + color: ${semanticColors?.accent?.ornamentPressed}; } &:active { svg.check-icon { - color: ${semanticColors?.accent?.iconPressed}; + color: ${semanticColors?.accent?.ornamentPressed}; } .primary-text { @@ -164,7 +164,7 @@ export const StyledMenuItemIcon = styled("span")` height: ${iconSizes?.s.height}px; .MuiSvgIcon-root { - ${disabled ? `color: ${semanticColors?.base?.iconDisabled};` : null} + ${disabled ? `color: ${semanticColors?.base?.ornamentDisabled};` : null}; } `; }} @@ -220,8 +220,8 @@ export const StyledCheck = styled(Check, { const semanticColors = getSemanticColors(props); const selectedColor = disabled - ? semanticColors?.base?.iconDisabled - : semanticColors?.accent?.icon; + ? semanticColors?.base?.ornamentDisabled + : semanticColors?.accent?.ornamentSelected; return ` color: ${selected ? selectedColor : "transparent"}; @@ -246,8 +246,8 @@ export const StyledMinus = styled(Remove, { const iconSizes = getIconSizes(props); const selectedColor = disabled - ? semanticColors?.base?.iconDisabled - : semanticColors?.accent?.icon; + ? semanticColors?.base?.ornamentDisabled + : semanticColors?.accent?.ornamentSelected; return ` color: ${selected ? selectedColor : "transparent"}; diff --git a/packages/components/src/core/MenuSelect/index.tsx b/packages/components/src/core/MenuSelect/index.tsx index 26a3a92f8..21b313338 100644 --- a/packages/components/src/core/MenuSelect/index.tsx +++ b/packages/components/src/core/MenuSelect/index.tsx @@ -127,9 +127,6 @@ const MenuSelect = < sdsType="tertiary" sdsSize="small" sdsStyle="icon" - sdsIconProps={{ - sdsType: "interactive", - }} icon="Search" /> diff --git a/packages/components/src/core/NavigationJumpTo/style.ts b/packages/components/src/core/NavigationJumpTo/style.ts index dab652f1f..45dbf2654 100644 --- a/packages/components/src/core/NavigationJumpTo/style.ts +++ b/packages/components/src/core/NavigationJumpTo/style.ts @@ -96,10 +96,6 @@ export const StyledTab = styled(Tab, { color: ${semanticColors?.base?.textPrimary}; font-weight: 600; } - &.MuiTabs-indicator { - backgroundColor: ${semanticColors?.base?.surfaceTertiary}; - width: ${spaces?.xxxs}px; - } &.MuiButtonBase-root { white-space: nowrap; padding: 0; diff --git a/packages/components/src/core/Notification/index.tsx b/packages/components/src/core/Notification/index.tsx index 8511ee2ef..6181ab39e 100644 --- a/packages/components/src/core/Notification/index.tsx +++ b/packages/components/src/core/Notification/index.tsx @@ -74,7 +74,6 @@ const Notification = ({ ); @@ -82,17 +81,11 @@ const Notification = ({ } else { switch (intent) { case "positive": - return ; + return ; case "info": - return ; + return ; default: - return ( - - ); + return ; } } }; diff --git a/packages/components/src/core/Notification/style.ts b/packages/components/src/core/Notification/style.ts index cd766b6cb..42a9f4f45 100644 --- a/packages/components/src/core/Notification/style.ts +++ b/packages/components/src/core/Notification/style.ts @@ -41,7 +41,8 @@ export const StyledNotification = styled(Alert, { const borders = getBorders(props); const iconColor = semanticColors?.[intent]?.ornament ?? "black"; - const backgroundColor = semanticColors?.[intent]?.surfacePrimary ?? "white"; + const backgroundColor = + semanticColors?.[intent]?.surfaceSecondary ?? "white"; // (masoudmanson): The Notification Icon should be vertically centered with the Notification // Title. The padding-top of the Notification Title is calculated based on the difference diff --git a/packages/components/src/core/Pagination/style.ts b/packages/components/src/core/Pagination/style.ts index 6ddb5615f..faab10ac9 100644 --- a/packages/components/src/core/Pagination/style.ts +++ b/packages/components/src/core/Pagination/style.ts @@ -42,14 +42,14 @@ export const StyledPaginationButton = styled(Button)` & .MuiSvgIcon-root { width: 10px; - color: ${semanticColors?.base?.iconPrimary} + color: ${semanticColors?.base?.ornamentSecondary}; } &:hover { background-color: ${semanticColors?.base?.fillHover}; & .MuiSvgIcon-root { - color: ${semanticColors?.base?.iconPrimaryHover} + color: ${semanticColors?.base?.ornamentSecondaryHover} } } `; @@ -83,14 +83,14 @@ export const StyledPaginationChevronList = styled("li", { } & .MuiSvgIcon-root { - color: ${disabled ? semanticColors?.base?.iconDisabled : semanticColors?.base?.iconPrimary}; + color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondary}; } &:hover { background-color: ${disabled ? "transparent" : semanticColors?.base?.fillHover}; & .MuiSvgIcon-root { - color: ${disabled ? semanticColors?.base?.iconDisabled : semanticColors?.base?.iconPrimaryHover} + color: ${disabled ? semanticColors?.base?.ornamentDisabled : semanticColors?.base?.ornamentSecondaryHover} } } diff --git a/packages/components/src/core/Panel/style.ts b/packages/components/src/core/Panel/style.ts index 4b3d0306f..1aad86513 100644 --- a/packages/components/src/core/Panel/style.ts +++ b/packages/components/src/core/Panel/style.ts @@ -32,7 +32,7 @@ const basicPanelStyles = (props: PanelExtraProps): SerializedStyles => { return css` .${drawerClasses.paper} { - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.backgroundPrimary}; padding: ${spaces?.l}px; min-width: ${PANEL_BASIC_MIN_WIDTH_PX}px; min-height: ${PANEL_BASIC_MIN_WIDTH_PX}px; @@ -60,7 +60,7 @@ const overlayPanelStyles = (props: PanelExtraProps): SerializedStyles => { } .${drawerClasses.paper} { - background-color: ${semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.surface}; padding: ${spaces?.xl}px; min-width: ${PANEL_OVERLAY_MIN_WIDTH_PX}px; min-height: ${PANEL_OVERLAY_MIN_WIDTH_PX}px; diff --git a/packages/components/src/core/SegmentedControl/index.tsx b/packages/components/src/core/SegmentedControl/index.tsx index 2a77b8206..902e40a1d 100644 --- a/packages/components/src/core/SegmentedControl/index.tsx +++ b/packages/components/src/core/SegmentedControl/index.tsx @@ -1,8 +1,8 @@ -import { ToggleButton, ToggleButtonGroupProps } from "@mui/material"; +import { ToggleButtonGroupProps } from "@mui/material"; import React from "react"; import Icon, { IconNameToSizes } from "src/core/Icon"; import Tooltip from "src/core/Tooltip"; -import { StyledSegmentedControl } from "./style"; +import { StyledSegmentedControl, StyledToggleButton } from "./style"; // one prop is array of objects: with icon name and tooltip text. They need to make // first item in array first button, etc @@ -71,19 +71,19 @@ const SegmentedControl = (props: SegmentedControlProps) => { typeof icon !== "string" ? ( icon ) : ( - + ) ) : null; const toggleButton = ( - {iconItem} - + ); // (masoudmanson): If the button is disabled, we don't want to show the tooltip. diff --git a/packages/components/src/core/SegmentedControl/style.ts b/packages/components/src/core/SegmentedControl/style.ts index cc9eeae3f..9287bb7f0 100644 --- a/packages/components/src/core/SegmentedControl/style.ts +++ b/packages/components/src/core/SegmentedControl/style.ts @@ -1,4 +1,9 @@ -import { ToggleButtonGroup, toggleButtonClasses } from "@mui/material"; +import { + ToggleButton, + ToggleButtonGroup, + ToggleButtonProps, + toggleButtonClasses, +} from "@mui/material"; import styled from "@emotion/styled"; import { focusVisibleA11yStyle } from "src/core/styles/common/mixins/a11y"; import { @@ -23,20 +28,21 @@ export const StyledSegmentedControl = styled(ToggleButtonGroup, { .${toggleButtonClasses.root}.${toggleButtonClasses.selected} { background-color: ${semanticColors?.base?.fillOpen}; - color: ${semanticColors?.accent?.iconSelected}; + color: ${semanticColors?.accent?.ornamentSelected}; border-color: ${semanticColors?.base?.border}; &:hover { background-color: ${semanticColors?.base?.fillHover}; + color: ${semanticColors?.base?.ornamentSecondaryHover}; } } .${toggleButtonClasses.root} { ${focusVisibleA11yStyle(props)} - background-color: ${semanticColors?.base?.fillPrimary}; + background-color: transparent; border-color: ${semanticColors?.base?.border}; line-height: 0px; - color: ${semanticColors?.base?.iconSecondary}; + color: ${semanticColors?.base?.ornamentPrimary}; padding: ${(spaces?.xs ?? 6) - 1}px ${spaces?.l}px; &:hover { @@ -47,3 +53,19 @@ export const StyledSegmentedControl = styled(ToggleButtonGroup, { `; }} `; + +export const StyledToggleButton = styled(ToggleButton, { + shouldForwardProp: (prop) => !doNotForwardProps.includes(prop as string), +})` + ${(props: ToggleButtonProps & CommonThemeProps) => { + const { disabled } = props; + + const semanticColors = getSemanticColors(props); + + return ` + svg { + color: ${disabled ? semanticColors?.base?.ornamentDisabled : "currentColor"}; + } + `; + }} +`; diff --git a/packages/components/src/core/Table/__storybook__/stories/default.tsx b/packages/components/src/core/Table/__storybook__/stories/default.tsx index ad2a7ef9e..93f996fc3 100644 --- a/packages/components/src/core/Table/__storybook__/stories/default.tsx +++ b/packages/components/src/core/Table/__storybook__/stories/default.tsx @@ -32,7 +32,7 @@ export const Table = (props: Args): JSX.Element => { - + { - + { > - + { verticalAlign="center" /> - + { } svg { - fill: ${semanticColors?.base?.iconDisabled}; + fill: ${semanticColors?.base?.ornamentDisabled}; } filter: grayscale(100%); diff --git a/packages/components/src/core/styles/common/SDSAppTheme.ts b/packages/components/src/core/styles/common/SDSAppTheme.ts index e4c5be205..35ecbecf9 100644 --- a/packages/components/src/core/styles/common/SDSAppTheme.ts +++ b/packages/components/src/core/styles/common/SDSAppTheme.ts @@ -50,12 +50,12 @@ const SDSLightThemeColors: Colors = { purple: { "100": "#efeafe", "200": "#e4dbfc", - "300": "#cbbaf8", + "300": "#cbbaF8", "400": "#b296f2", "500": "#8b54e2", "600": "#6526b5", "700": "#490092", - "800": "#1a004c", + "800": "#26004c", }, red: { "100": "#ffe8e6", @@ -63,17 +63,17 @@ const SDSLightThemeColors: Colors = { "300": "#ffafa8", "400": "#ff7e78", "500": "#db2131", - "600": "#980013", + "600": "#980017", "700": "#6f0008", "800": "#340000", }, yellow: { - "100": "#ffefcf", + "100": "#fff3db", "200": "#ffdb97", "300": "#ffca5c", "400": "#fab700", "500": "#da9900", - "600": "#b77800", + "600": "#b07300", "700": "#7c3e00", "800": "#541700", }, @@ -81,14 +81,14 @@ const SDSLightThemeColors: Colors = { const SDSDarkThemeColors: Colors = { blue: { - "100": "#002573", - "200": "#0048c5", - "300": "#2573f4", - "400": "#5b9aff", - "500": "#a2c9ff", - "600": "#cde3ff", - "700": "#e2eeff", - "800": "#f7faff", + "100": "#0f1d4a", + "200": "#0a216e", + "300": "#0647b8", + "400": "#2573f4", + "500": "#5b9aff", + "600": "#a2c9ff", + "700": "#cde3ff", + "800": "#e2eeff", }, gray: { "100": "#333333", @@ -104,44 +104,44 @@ const SDSDarkThemeColors: Colors = { "900": "#ffffff", }, green: { - "100": "#053918", - "200": "#12612e", - "300": "#288b49", - "400": "#43ae63", - "500": "#85d898", - "600": "#bcecc5", - "700": "#daf4de", - "800": "#f7fbf6", + "100": "#082608", + "200": "#063617", + "300": "#10632e", + "400": "#278b48", + "500": "#4bae68", + "600": "#85d898", + "700": "#bcecc5", + "800": "#daf4de", }, purple: { - "100": "#4b0190", - "200": "#6b2ebc", - "300": "#905de6", - "400": "#aa89ef", - "500": "#cebef8", - "600": "#e4dcfc", - "700": "#f0ebfe", - "800": "#fbf9ff", + "100": "#331252", + "200": "#410f70", + "300": "#6429b2", + "400": "#905de6", + "500": "#aa89ef", + "600": "#cebef8", + "700": "#e4dcfc", + "800": "#f0ebfe", }, red: { - "100": "#630008", - "200": "#A30000", - "300": "#E52722", - "400": "#FF695B", - "500": "#FF9385", - "600": "#FFBDB3", - "700": "#FFD8D1", - "800": "#FFF1EE", + "100": "#330603", + "200": "#660a12", + "300": "#9e1c1c", + "400": "#c73028", + "500": "#e05043", + "600": "#ff988a", + "700": "#ffbdb3", + "800": "#ffd8d1", }, yellow: { - "100": "#552300", - "200": "#834500", - "300": "#985a00", - "400": "#ac6c00", - "500": "#cf8e00", - "600": "#efad00", - "700": "#ffdc9a", - "800": "#fcf2e3", + "100": "#361b07", + "200": "#52270a", + "300": "#965a0b", + "400": "#bd8804", + "500": "#d9a943", + "600": "#e5bc63", + "700": "#f5d789", + "800": "#ffe6a8", }, }; @@ -734,73 +734,136 @@ const sharedAppTheme: Omit = { */ export const makeSdsSemanticAppTheme = (colors: Colors): AppTheme => ({ ...sharedAppTheme, - // (mlila) whenever our theme uses colors, we need to make sure we allow consuming - // applications to override those colors using their own custom theme. - // By defining borders using SDSAppTheme.colors instead of defaultThemeColors, - // we allow other apps to specify their colors once, and have them apply - // throughout the application, such as in borders, etc without having to manually - // override every theme property that makes use of colors. - borders: { - accent: { - default: `1px solid ${colors.blue[500]}`, - focused: `1px solid ${colors.blue[500]}`, - hover: `1px solid ${colors.blue[600]}`, - open: `1px solid ${colors.blue[500]}`, - pressed: `1px solid ${colors.blue[700]}`, - selected: `1px solid ${colors.blue[500]}`, - }, - base: { - default: `1px solid ${colors.gray[500]}`, - disabled: `1px solid ${colors.gray[300]}`, - divider: `1px solid ${colors.gray[200]}`, - hover: `1px solid ${colors.gray[900]}`, - pressed: `1px solid ${colors.gray[900]}`, - table: `1px solid ${colors.gray[300]}`, - }, - beta: { - default: `1px solid ${colors.purple[600]}`, - extraThick: `4px solid ${colors.purple[600]}`, - thick: `2px solid ${colors.purple[600]}`, - }, - info: { - default: `1px solid ${colors.blue[600]}`, - extraThick: `4px solid ${colors.blue[600]}`, - thick: `2px solid ${colors.blue[600]}`, - }, - link: { - dashed: `1px dashed`, - solid: `1px solid`, - }, - negative: { - default: `1px solid ${colors.red[600]}`, - extraThick: `4px solid ${colors.red[600]}`, - thick: `2px solid ${colors.red[600]}`, - }, - neutral: { - default: `1px solid ${colors.gray[500]}`, - extraThick: `4px solid ${colors.gray[500]}`, - thick: `2px solid ${colors.gray[500]}`, - }, - none: "none", - notice: { - default: `1px solid ${colors.yellow[600]}`, - extraThick: `4px solid ${colors.yellow[600]}`, - thick: `2px solid ${colors.yellow[600]}`, - }, - positive: { - default: `1px solid ${colors.green[600]}`, - extraThick: `4px solid ${colors.green[600]}`, - thick: `2px solid ${colors.green[600]}`, - }, - }, colors, }); export const SDSLightAppTheme: AppTheme = makeSdsSemanticAppTheme(SDSLightThemeColors); + export const SDSDarkAppTheme: AppTheme = makeSdsSemanticAppTheme(SDSDarkThemeColors); +// (mlila) whenever our theme uses colors, we need to make sure we allow consuming +// applications to override those colors using their own custom theme. +// By defining borders using SDSAppTheme.colors instead of defaultThemeColors, +// we allow other apps to specify their colors once, and have them apply +// throughout the application, such as in borders, etc without having to manually +// override every theme property that makes use of colors. +// +// (masoudmanson): We need to define borders separately for light and dark themes +// because the border colors are different for each theme. +SDSLightAppTheme.borders = { + accent: { + default: `1px solid ${SDSLightThemeColors.blue[500]}`, + focused: `1px solid ${SDSLightThemeColors.blue[500]}`, + hover: `1px solid ${SDSLightThemeColors.blue[600]}`, + open: `1px solid ${SDSLightThemeColors.blue[500]}`, + pressed: `1px solid ${SDSLightThemeColors.blue[700]}`, + selected: `1px solid ${SDSLightThemeColors.blue[500]}`, + }, + base: { + default: `1px solid ${SDSLightThemeColors.gray[500]}`, + disabled: `1px solid ${SDSLightThemeColors.gray[300]}`, + divider: `1px solid ${SDSLightThemeColors.gray[200]}`, + dividerInverse: `1px solid ${SDSLightThemeColors.gray[600]}`, + hover: `1px solid ${SDSLightThemeColors.gray[900]}`, + inverse: `1px solid ${SDSLightThemeColors.gray[50]}`, + pressed: `1px solid ${SDSLightThemeColors.gray[900]}`, + table: `1px solid ${SDSLightThemeColors.gray[300]}`, + }, + beta: { + default: `1px solid ${SDSLightThemeColors.purple[600]}`, + extraThick: `4px solid ${SDSLightThemeColors.purple[600]}`, + thick: `2px solid ${SDSLightThemeColors.purple[600]}`, + }, + info: { + default: `1px solid ${SDSLightThemeColors.blue[600]}`, + extraThick: `4px solid ${SDSLightThemeColors.blue[600]}`, + thick: `2px solid ${SDSLightThemeColors.blue[600]}`, + }, + link: { + dashed: `1px dashed`, + solid: `1px solid`, + }, + negative: { + default: `1px solid ${SDSLightThemeColors.red[600]}`, + extraThick: `4px solid ${SDSLightThemeColors.red[600]}`, + thick: `2px solid ${SDSLightThemeColors.red[600]}`, + }, + neutral: { + default: `1px solid ${SDSLightThemeColors.gray[500]}`, + extraThick: `4px solid ${SDSLightThemeColors.gray[500]}`, + thick: `2px solid ${SDSLightThemeColors.gray[500]}`, + }, + none: "none", + notice: { + default: `1px solid ${SDSLightThemeColors.yellow[600]}`, + extraThick: `4px solid ${SDSLightThemeColors.yellow[600]}`, + thick: `2px solid ${SDSLightThemeColors.yellow[600]}`, + }, + positive: { + default: `1px solid ${SDSLightThemeColors.green[600]}`, + extraThick: `4px solid ${SDSLightThemeColors.green[600]}`, + thick: `2px solid ${SDSLightThemeColors.green[600]}`, + }, +}; + +SDSDarkAppTheme.borders = { + accent: { + default: `1px solid ${SDSDarkThemeColors.blue[600]}`, + focused: `1px solid ${SDSDarkThemeColors.blue[600]}`, + hover: `1px solid ${SDSDarkThemeColors.blue[700]}`, + open: `1px solid ${SDSDarkThemeColors.blue[600]}`, + pressed: `1px solid ${SDSDarkThemeColors.blue[800]}`, + selected: `1px solid ${SDSDarkThemeColors.blue[600]}`, + }, + base: { + default: `1px solid ${SDSDarkThemeColors.gray[500]}`, + disabled: `1px solid ${SDSDarkThemeColors.gray[300]}`, + divider: `1px solid ${SDSDarkThemeColors.gray[200]}`, + dividerInverse: `1px solid ${SDSDarkThemeColors.gray[600]}`, + hover: `1px solid ${SDSDarkThemeColors.gray[900]}`, + inverse: `1px solid ${SDSDarkThemeColors.gray[50]}`, + pressed: `1px solid ${SDSDarkThemeColors.gray[900]}`, + table: `1px solid ${SDSDarkThemeColors.gray[300]}`, + }, + beta: { + default: `1px solid ${SDSDarkThemeColors.purple[600]}`, + extraThick: `4px solid ${SDSDarkThemeColors.purple[600]}`, + thick: `2px solid ${SDSDarkThemeColors.purple[600]}`, + }, + info: { + default: `1px solid ${SDSDarkThemeColors.blue[600]}`, + extraThick: `4px solid ${SDSDarkThemeColors.blue[600]}`, + thick: `2px solid ${SDSDarkThemeColors.blue[600]}`, + }, + link: { + dashed: `1px dashed`, + solid: `1px solid`, + }, + negative: { + default: `1px solid ${SDSDarkThemeColors.red[600]}`, + extraThick: `4px solid ${SDSDarkThemeColors.red[600]}`, + thick: `2px solid ${SDSDarkThemeColors.red[600]}`, + }, + neutral: { + default: `1px solid ${SDSDarkThemeColors.gray[500]}`, + extraThick: `4px solid ${SDSDarkThemeColors.gray[500]}`, + thick: `2px solid ${SDSDarkThemeColors.gray[500]}`, + }, + none: "none", + notice: { + default: `1px solid ${SDSDarkThemeColors.yellow[600]}`, + extraThick: `4px solid ${SDSDarkThemeColors.yellow[600]}`, + thick: `2px solid ${SDSDarkThemeColors.yellow[600]}`, + }, + positive: { + default: `1px solid ${SDSDarkThemeColors.green[600]}`, + extraThick: `4px solid ${SDSDarkThemeColors.green[600]}`, + thick: `2px solid ${SDSDarkThemeColors.green[600]}`, + }, +}; + /** * Helper function to select the appropriate theme settings. * diff --git a/packages/components/src/core/styles/common/makeThemeOptions.ts b/packages/components/src/core/styles/common/makeThemeOptions.ts index 9569887dd..b3fe6090d 100644 --- a/packages/components/src/core/styles/common/makeThemeOptions.ts +++ b/packages/components/src/core/styles/common/makeThemeOptions.ts @@ -1,7 +1,7 @@ import { PaletteMode } from "@mui/material"; -import { AppTheme, SDSThemeOptions } from "./types"; +import { AppTheme, SDSPalette, SDSThemeOptions } from "./types"; -const SDSPaletteLight = (appTheme: AppTheme) => { +export const SDSPaletteLight = (appTheme: AppTheme): SDSPalette => { return { accent: { border: appTheme.colors.blue[500], @@ -13,25 +13,32 @@ const SDSPaletteLight = (appTheme: AppTheme) => { fillHover: appTheme.colors.blue[600], fillPressed: appTheme.colors.blue[700], fillPrimary: appTheme.colors.blue[500], - icon: appTheme.colors.blue[500], - iconFocus: appTheme.colors.blue[500], - iconHover: appTheme.colors.blue[600], - iconOpen: appTheme.colors.blue[500], - iconPressed: appTheme.colors.blue[700], - iconSelected: appTheme.colors.blue[500], - surfacePrimary: appTheme.colors.blue[100], - surfaceSecondary: appTheme.colors.blue[500], + ornament: appTheme.colors.blue[500], + ornamentFocus: appTheme.colors.blue[500], + ornamentHover: appTheme.colors.blue[600], + ornamentOpen: appTheme.colors.blue[500], + ornamentPressed: appTheme.colors.blue[700], + ornamentSelected: appTheme.colors.blue[500], + surfacePrimary: appTheme.colors.blue[500], + surfaceSecondary: appTheme.colors.blue[100], textAction: appTheme.colors.blue[500], textActionHover: appTheme.colors.blue[600], textActionPressed: appTheme.colors.blue[700], }, base: { - border: appTheme.colors.gray[500], + backgroundPrimary: appTheme.colors.gray[50]!, + backgroundPrimaryInverse: appTheme.colors.gray[900]!, + backgroundSecondary: appTheme.colors.gray[100], + backgroundSecondaryInverse: appTheme.colors.gray[700], + backgroundTertiary: appTheme.colors.gray[200], + border: appTheme.colors.gray[600], borderDisabled: appTheme.colors.gray[300], borderHover: appTheme.colors.gray[900]!, + borderInverse: appTheme.colors.gray[50]!, borderPressed: appTheme.colors.gray[900]!, borderTable: appTheme.colors.gray[300], divider: appTheme.colors.gray[200], + dividerInverse: appTheme.colors.gray[600], fillDisabled: appTheme.colors.gray[200], /* the number 47 is the opacity of the color, which is equal to 28% */ fillHover: appTheme.colors.gray[300] + "47", @@ -39,56 +46,53 @@ const SDSPaletteLight = (appTheme: AppTheme) => { fillPressed: appTheme.colors.gray[300] + "47", fillPrimary: appTheme.colors.gray[50]!, fillSelected: appTheme.colors.gray[900]!, - iconDisabled: appTheme.colors.gray[300], - iconPrimary: appTheme.colors.gray[500], - iconPrimaryHover: appTheme.colors.gray[900]!, - iconPrimaryInverse: appTheme.colors.gray[50]!, - iconPrimaryInverseHover: appTheme.colors.gray[400], - iconPrimaryInversePressed: appTheme.colors.gray[400], - iconPrimaryPressed: appTheme.colors.gray[900]!, - iconSecondary: appTheme.colors.gray[900]!, - surfaceBackground: appTheme.colors.gray[50]!, - surfacePrimary: appTheme.colors.gray[50]!, - surfacePrimaryInverse: appTheme.colors.gray[900]!, - surfaceSecondary: appTheme.colors.gray[100], - surfaceTertiary: appTheme.colors.gray[200], + ornamentDisabled: appTheme.colors.gray[300], + ornamentOnFill: appTheme.colors.gray[50]!, + ornamentPrimary: appTheme.colors.gray[900]!, + ornamentPrimaryInverse: appTheme.colors.gray[50]!, + ornamentSecondary: appTheme.colors.gray[600], + ornamentSecondaryHover: appTheme.colors.gray[900]!, + ornamentSecondaryPressed: appTheme.colors.gray[900]!, + surface: appTheme.colors.gray[50]!, + surfaceInverse: appTheme.colors.gray[900]!, textDisabled: appTheme.colors.gray[300], + textOnFill: appTheme.colors.gray[50]!, textPrimary: appTheme.colors.gray[900]!, textPrimaryInverse: appTheme.colors.gray[50]!, textSecondary: appTheme.colors.gray[600], textSecondaryInverse: appTheme.colors.gray[300], }, beta: { - border: appTheme.colors.purple[500], + border: appTheme.colors.purple[600], fillHover: appTheme.colors.purple[600], fillPressed: appTheme.colors.purple[700], fillPrimary: appTheme.colors.purple[500], fillSecondary: appTheme.colors.purple[100], ornament: appTheme.colors.purple[600], - surfacePrimary: appTheme.colors.purple[100], - surfaceSecondary: appTheme.colors.purple[500], + surfacePrimary: appTheme.colors.purple[500], + surfaceSecondary: appTheme.colors.purple[100], text: appTheme.colors.purple[600], }, info: { - border: appTheme.colors.blue[500], + border: appTheme.colors.blue[600], fillHover: appTheme.colors.blue[600], fillPressed: appTheme.colors.blue[700], fillPrimary: appTheme.colors.blue[500], fillSecondary: appTheme.colors.blue[100], ornament: appTheme.colors.blue[600], - surfacePrimary: appTheme.colors.blue[100], - surfaceSecondary: appTheme.colors.blue[500], + surfacePrimary: appTheme.colors.blue[500], + surfaceSecondary: appTheme.colors.blue[100], text: appTheme.colors.blue[600], }, negative: { - border: appTheme.colors.red[500], + border: appTheme.colors.red[600], fillHover: appTheme.colors.red[600], fillPressed: appTheme.colors.red[700], fillPrimary: appTheme.colors.red[500], fillSecondary: appTheme.colors.red[100], ornament: appTheme.colors.red[600], - surfacePrimary: appTheme.colors.red[100], - surfaceSecondary: appTheme.colors.red[500], + surfacePrimary: appTheme.colors.red[500], + surfaceSecondary: appTheme.colors.red[100], text: appTheme.colors.red[600], }, neutral: { @@ -96,68 +100,75 @@ const SDSPaletteLight = (appTheme: AppTheme) => { fillHover: appTheme.colors.gray[600], fillPressed: appTheme.colors.gray[700], fillPrimary: appTheme.colors.gray[500], - fillSecondary: appTheme.colors.gray[100], + fillSecondary: appTheme.colors.gray[200], ornament: appTheme.colors.gray[700], - surfacePrimary: appTheme.colors.gray[200], - surfaceSecondary: appTheme.colors.gray[500], + surfacePrimary: appTheme.colors.gray[500], + surfaceSecondary: appTheme.colors.gray[200], text: appTheme.colors.gray[700], }, notice: { - border: appTheme.colors.yellow[500], + border: appTheme.colors.yellow[600], fillHover: appTheme.colors.yellow[600], fillPressed: appTheme.colors.yellow[700], fillPrimary: appTheme.colors.yellow[500], fillSecondary: appTheme.colors.yellow[100], ornament: appTheme.colors.yellow[600], - surfacePrimary: appTheme.colors.yellow[100], - surfaceSecondary: appTheme.colors.yellow[500], + surfacePrimary: appTheme.colors.yellow[500], + surfaceSecondary: appTheme.colors.yellow[100], text: appTheme.colors.yellow[600], }, positive: { - border: appTheme.colors.green[500], + border: appTheme.colors.green[600], fillHover: appTheme.colors.green[600], fillPressed: appTheme.colors.green[700], fillPrimary: appTheme.colors.green[500], fillSecondary: appTheme.colors.green[100], ornament: appTheme.colors.green[600], - surfacePrimary: appTheme.colors.green[100], - surfaceSecondary: appTheme.colors.green[500], + surfacePrimary: appTheme.colors.green[500], + surfaceSecondary: appTheme.colors.green[100], text: appTheme.colors.green[600], }, }; }; -const SDSPaletteDark = (appTheme: AppTheme) => { +export const SDSPaletteDark = (appTheme: AppTheme): SDSPalette => { return { accent: { - border: appTheme.colors.blue[500], - borderFocus: appTheme.colors.blue[500], - borderHover: appTheme.colors.blue[600], - borderOpen: appTheme.colors.blue[500], - borderPressed: appTheme.colors.blue[700], - borderSelected: appTheme.colors.blue[500], - fillHover: appTheme.colors.blue[600], - fillPressed: appTheme.colors.blue[700], - fillPrimary: appTheme.colors.blue[500], - icon: appTheme.colors.blue[500], - iconFocus: appTheme.colors.blue[500], - iconHover: appTheme.colors.blue[600], - iconOpen: appTheme.colors.blue[500], - iconPressed: appTheme.colors.blue[700], - iconSelected: appTheme.colors.blue[500], - surfacePrimary: appTheme.colors.blue[100], - surfaceSecondary: appTheme.colors.blue[500], - textAction: appTheme.colors.blue[500], - textActionHover: appTheme.colors.blue[600], - textActionPressed: appTheme.colors.blue[700], + border: appTheme.colors.blue[600], + borderFocus: appTheme.colors.blue[600], + borderHover: appTheme.colors.blue[700], + borderOpen: appTheme.colors.blue[600], + borderPressed: appTheme.colors.blue[800], + borderSelected: appTheme.colors.blue[600], + fillHover: appTheme.colors.blue[700], + fillPressed: appTheme.colors.blue[800], + fillPrimary: appTheme.colors.blue[400], + ornament: appTheme.colors.blue[600], + ornamentFocus: appTheme.colors.blue[600], + ornamentHover: appTheme.colors.blue[700], + ornamentOpen: appTheme.colors.blue[600], + ornamentPressed: appTheme.colors.blue[800], + ornamentSelected: appTheme.colors.blue[600], + surfacePrimary: appTheme.colors.blue[400], + surfaceSecondary: appTheme.colors.blue[100], + textAction: appTheme.colors.blue[600], + textActionHover: appTheme.colors.blue[700], + textActionPressed: appTheme.colors.blue[800], }, base: { - border: appTheme.colors.gray[500], + backgroundPrimary: appTheme.colors.gray[75]!, + backgroundPrimaryInverse: appTheme.colors.gray[900]!, + backgroundSecondary: appTheme.colors.gray[100], + backgroundSecondaryInverse: appTheme.colors.gray[700], + backgroundTertiary: appTheme.colors.gray[200], + border: appTheme.colors.gray[600], borderDisabled: appTheme.colors.gray[300], borderHover: appTheme.colors.gray[900]!, + borderInverse: appTheme.colors.gray[50]!, borderPressed: appTheme.colors.gray[900]!, borderTable: appTheme.colors.gray[300], divider: appTheme.colors.gray[200], + dividerInverse: appTheme.colors.gray[600], fillDisabled: appTheme.colors.gray[200], /* the number 47 is the opacity of the color, which is equal to 28% */ fillHover: appTheme.colors.gray[300] + "47", @@ -165,56 +176,53 @@ const SDSPaletteDark = (appTheme: AppTheme) => { fillPressed: appTheme.colors.gray[300] + "47", fillPrimary: appTheme.colors.gray[100], fillSelected: appTheme.colors.gray[900]!, - iconDisabled: appTheme.colors.gray[300], - iconPrimary: appTheme.colors.gray[500], - iconPrimaryHover: appTheme.colors.gray[900]!, - iconPrimaryInverse: appTheme.colors.gray[50]!, - iconPrimaryInverseHover: appTheme.colors.gray[400], - iconPrimaryInversePressed: appTheme.colors.gray[400], - iconPrimaryPressed: appTheme.colors.gray[900]!, - iconSecondary: appTheme.colors.gray[900]!, - surfaceBackground: appTheme.colors.gray[75]!, - surfacePrimary: appTheme.colors.gray[100], - surfacePrimaryInverse: appTheme.colors.gray[900]!, - surfaceSecondary: appTheme.colors.gray[200], - surfaceTertiary: appTheme.colors.gray[300], + ornamentDisabled: appTheme.colors.gray[300], + ornamentOnFill: appTheme.colors.gray[900]!, + ornamentPrimary: appTheme.colors.gray[900]!, + ornamentPrimaryInverse: appTheme.colors.gray[50]!, + ornamentSecondary: appTheme.colors.gray[600], + ornamentSecondaryHover: appTheme.colors.gray[900]!, + ornamentSecondaryPressed: appTheme.colors.gray[900]!, + surface: appTheme.colors.gray[100], + surfaceInverse: appTheme.colors.gray[900]!, textDisabled: appTheme.colors.gray[300], + textOnFill: appTheme.colors.gray[900]!, textPrimary: appTheme.colors.gray[900]!, textPrimaryInverse: appTheme.colors.gray[50]!, textSecondary: appTheme.colors.gray[600], textSecondaryInverse: appTheme.colors.gray[300], }, beta: { - border: appTheme.colors.purple[500], - fillHover: appTheme.colors.purple[600], - fillPressed: appTheme.colors.purple[700], - fillPrimary: appTheme.colors.purple[500], + border: appTheme.colors.purple[600], + fillHover: appTheme.colors.purple[700], + fillPressed: appTheme.colors.purple[800], + fillPrimary: appTheme.colors.purple[400], fillSecondary: appTheme.colors.purple[100], ornament: appTheme.colors.purple[600], - surfacePrimary: appTheme.colors.purple[100], - surfaceSecondary: appTheme.colors.purple[500], + surfacePrimary: appTheme.colors.purple[400], + surfaceSecondary: appTheme.colors.purple[100], text: appTheme.colors.purple[600], }, info: { - border: appTheme.colors.blue[500], - fillHover: appTheme.colors.blue[600], - fillPressed: appTheme.colors.blue[700], - fillPrimary: appTheme.colors.blue[500], + border: appTheme.colors.blue[600], + fillHover: appTheme.colors.blue[700], + fillPressed: appTheme.colors.blue[800], + fillPrimary: appTheme.colors.blue[400], fillSecondary: appTheme.colors.blue[100], ornament: appTheme.colors.blue[600], - surfacePrimary: appTheme.colors.blue[100], - surfaceSecondary: appTheme.colors.blue[500], + surfacePrimary: appTheme.colors.blue[400], + surfaceSecondary: appTheme.colors.blue[100], text: appTheme.colors.blue[600], }, negative: { - border: appTheme.colors.red[500], - fillHover: appTheme.colors.red[600], - fillPressed: appTheme.colors.red[700], - fillPrimary: appTheme.colors.red[500], + border: appTheme.colors.red[600], + fillHover: appTheme.colors.red[700], + fillPressed: appTheme.colors.red[800], + fillPrimary: appTheme.colors.red[400], fillSecondary: appTheme.colors.red[100], ornament: appTheme.colors.red[600], - surfacePrimary: appTheme.colors.red[100], - surfaceSecondary: appTheme.colors.red[500], + surfacePrimary: appTheme.colors.red[400], + surfaceSecondary: appTheme.colors.red[100], text: appTheme.colors.red[600], }, neutral: { @@ -222,32 +230,32 @@ const SDSPaletteDark = (appTheme: AppTheme) => { fillHover: appTheme.colors.gray[600], fillPressed: appTheme.colors.gray[700], fillPrimary: appTheme.colors.gray[500], - fillSecondary: appTheme.colors.gray[100], + fillSecondary: appTheme.colors.gray[200], ornament: appTheme.colors.gray[700], - surfacePrimary: appTheme.colors.gray[200], - surfaceSecondary: appTheme.colors.gray[500], + surfacePrimary: appTheme.colors.gray[500], + surfaceSecondary: appTheme.colors.gray[200], text: appTheme.colors.gray[700], }, notice: { - border: appTheme.colors.yellow[500], - fillHover: appTheme.colors.yellow[600], - fillPressed: appTheme.colors.yellow[700], - fillPrimary: appTheme.colors.yellow[500], + border: appTheme.colors.yellow[600], + fillHover: appTheme.colors.yellow[700], + fillPressed: appTheme.colors.yellow[800], + fillPrimary: appTheme.colors.yellow[400], fillSecondary: appTheme.colors.yellow[100], ornament: appTheme.colors.yellow[600], - surfacePrimary: appTheme.colors.yellow[100], - surfaceSecondary: appTheme.colors.yellow[500], - text: appTheme.colors.yellow[700], + surfacePrimary: appTheme.colors.yellow[400], + surfaceSecondary: appTheme.colors.yellow[100], + text: appTheme.colors.yellow[600], }, positive: { - border: appTheme.colors.green[500], - fillHover: appTheme.colors.green[600], - fillPressed: appTheme.colors.green[700], - fillPrimary: appTheme.colors.green[500], + border: appTheme.colors.green[600], + fillHover: appTheme.colors.green[700], + fillPressed: appTheme.colors.green[800], + fillPrimary: appTheme.colors.green[400], fillSecondary: appTheme.colors.green[100], ornament: appTheme.colors.green[600], - surfacePrimary: appTheme.colors.green[100], - surfaceSecondary: appTheme.colors.green[500], + surfacePrimary: appTheme.colors.green[400], + surfaceSecondary: appTheme.colors.green[100], text: appTheme.colors.green[600], }, }; diff --git a/packages/components/src/core/styles/common/types.ts b/packages/components/src/core/styles/common/types.ts index 6867f7fb1..4f45f17b7 100644 --- a/packages/components/src/core/styles/common/types.ts +++ b/packages/components/src/core/styles/common/types.ts @@ -16,25 +16,28 @@ export interface AccentColor { borderOpen: string; borderFocus: string; borderSelected: string; - icon: string; - iconHover: string; - iconPressed: string; - iconOpen: string; - iconFocus: string; - iconSelected: string; + ornament: string; + ornamentHover: string; + ornamentPressed: string; + ornamentOpen: string; + ornamentFocus: string; + ornamentSelected: string; } export interface BaseColor { - surfaceBackground: string; - surfacePrimary: string; - surfaceSecondary: string; - surfaceTertiary: string; - surfacePrimaryInverse: string; + backgroundPrimary: string; + backgroundPrimaryInverse: string; + backgroundSecondary: string; + backgroundSecondaryInverse: string; + backgroundTertiary: string; + surface: string; + surfaceInverse: string; textPrimary: string; textPrimaryInverse: string; textSecondary: string; textSecondaryInverse: string; textDisabled: string; + textOnFill: string; fillHover: string; fillPressed: string; fillPrimary: string; @@ -42,19 +45,20 @@ export interface BaseColor { fillSelected: string; fillDisabled: string; divider: string; + dividerInverse: string; border: string; + borderInverse: string; borderHover: string; borderPressed: string; borderDisabled: string; borderTable: string; - iconPrimary: string; - iconPrimaryHover: string; - iconPrimaryPressed: string; - iconSecondary: string; - iconPrimaryInverse: string; - iconPrimaryInverseHover: string; - iconPrimaryInversePressed: string; - iconDisabled: string; + ornamentDisabled: string; + ornamentOnFill: string; + ornamentPrimary: string; + ornamentPrimaryInverse: string; + ornamentSecondary: string; + ornamentSecondaryHover: string; + ornamentSecondaryPressed: string; } export interface IntentColor { @@ -287,10 +291,12 @@ export interface IconSizes { export interface Border { default?: string; divider?: string; + dividerInverse?: string; black?: string; solid?: string; dashed?: string; hover?: string; + inverse?: string; disabled?: string; table?: string; pressed?: string; From 21c352ccd1517bc61f0f32562f94518df97b360a Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Fri, 22 Nov 2024 14:14:59 -0500 Subject: [PATCH 2/6] refactor(rest): fix the rest of the components --- .../Borders/__storybook__/stories/default.tsx | 2 +- .../__storybook__/stories/default.tsx | 10 +++------- .../Corners/__storybook__/stories/default.tsx | 10 +++------- .../__storybook__/stories/default.tsx | 6 ++---- .../Spaces/__storybook__/stories/default.tsx | 16 ++++----------- .../components/src/core/TableRow/style.ts | 19 +++++++++++------- packages/components/src/core/Tag/style.ts | 20 ++++++++----------- .../components/src/core/TagFilter/style.ts | 11 +++++++++- 8 files changed, 43 insertions(+), 51 deletions(-) diff --git a/packages/components/src/core/Bases/Borders/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Borders/__storybook__/stories/default.tsx index b0031caba..3ebf3ba57 100644 --- a/packages/components/src/core/Bases/Borders/__storybook__/stories/default.tsx +++ b/packages/components/src/core/Bases/Borders/__storybook__/stories/default.tsx @@ -88,7 +88,7 @@ export const Template = () => { return ( - + Example Variables diff --git a/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx index 2934da1af..a05903392 100644 --- a/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx +++ b/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx @@ -58,15 +58,11 @@ export const Template = () => { return (
- + Breakpoint - - Variables - - - Value - + Variables + Value Usage {TableBodyContent} diff --git a/packages/components/src/core/Bases/Corners/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Corners/__storybook__/stories/default.tsx index 294066600..b28921afe 100644 --- a/packages/components/src/core/Bases/Corners/__storybook__/stories/default.tsx +++ b/packages/components/src/core/Bases/Corners/__storybook__/stories/default.tsx @@ -67,16 +67,12 @@ export const Template = () => { return (
- + Example - - Corner Type - + Corner Type Variables - - Value - + Value Usage {TableBodyContent} diff --git a/packages/components/src/core/Bases/DropShadows/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/DropShadows/__storybook__/stories/default.tsx index 28f194501..24dd7c34e 100644 --- a/packages/components/src/core/Bases/DropShadows/__storybook__/stories/default.tsx +++ b/packages/components/src/core/Bases/DropShadows/__storybook__/stories/default.tsx @@ -70,12 +70,10 @@ export const Template = () => { return (
- + Example - - Shadow Type - + Shadow Type Variables Value Usage diff --git a/packages/components/src/core/Bases/Spaces/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Spaces/__storybook__/stories/default.tsx index 4db306d1c..ecf9e92cd 100644 --- a/packages/components/src/core/Bases/Spaces/__storybook__/stories/default.tsx +++ b/packages/components/src/core/Bases/Spaces/__storybook__/stories/default.tsx @@ -68,19 +68,11 @@ export const Template = () => { return (
- - Inset Spacing - - - Inline Spacing - - - Stacked Spacing - + Inset Spacing + Inline Spacing + Stacked Spacing Variables - - Value - + Value {TableBodyContent} diff --git a/packages/components/src/core/TableRow/style.ts b/packages/components/src/core/TableRow/style.ts index fa0b56476..b9e435ba8 100644 --- a/packages/components/src/core/TableRow/style.ts +++ b/packages/components/src/core/TableRow/style.ts @@ -5,7 +5,6 @@ import { focusVisibleA11yStyle, fontHeaderS, getBorders, - getMode, getSemanticColors, } from "src/core/styles"; @@ -31,16 +30,14 @@ const doNotForwardProps = [ const disabledStyled = (props: RowExtraProps) => { const semanticColors = getSemanticColors(props); - const mode = getMode(props); return ` - // eslint-disable-next-line sonarjs/no-all-duplicated-branches - background-color: ${mode === "light" ? semanticColors?.base?.surfaceSecondary : semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.backgroundSecondary}; color: ${semanticColors?.base?.textDisabled}; user-select: none; &:hover { - background-color: ${mode === "light" ? semanticColors?.base?.surfaceSecondary : semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.backgroundSecondary}; color: ${semanticColors?.base?.textDisabled}; } @@ -52,9 +49,17 @@ const disabledStyled = (props: RowExtraProps) => { color: ${semanticColors?.base?.textDisabled}; pointer-events: none; user-select: none; - & span, & div { + & div { color: ${semanticColors?.base?.textDisabled}; - background-color: ${mode === "light" ? semanticColors?.base?.surfaceSecondary : semanticColors?.base?.surfacePrimary}; + background-color: ${semanticColors?.base?.backgroundSecondary}; + } + + & .MuiChip-root { + background-color: ${semanticColors?.base?.fillDisabled}; + + & span { + color: ${semanticColors?.base?.textDisabled} !important; + } } svg { diff --git a/packages/components/src/core/Tag/style.ts b/packages/components/src/core/Tag/style.ts index 7f462141c..bc5976e4c 100644 --- a/packages/components/src/core/Tag/style.ts +++ b/packages/components/src/core/Tag/style.ts @@ -64,7 +64,7 @@ const tagSizeS = (props: ExtraTagProps): SerializedStyles => { .MuiChip-deleteIcon { ${fontHeaderXs(props)} - color: ${semanticColors?.base?.iconPrimaryInverse}; + color: ${semanticColors?.base?.ornamentPrimaryInverse}; margin: 0 0 0 ${spaces?.xxs}px; height: ${iconSizes?.s.height}px; width: ${iconSizes?.s.width}px; @@ -94,7 +94,7 @@ const tagSizeL = (props: ExtraTagProps): SerializedStyles => { .MuiChip-deleteIcon { ${fontHeaderXs(props)} - color: ${semanticColors?.base?.iconPrimaryInverse}; + color: ${semanticColors?.base?.ornamentPrimaryInverse}; margin: 0 0 0 ${spaces?.xxs}px; height: ${iconSizes?.s.height}px; width: ${iconSizes?.s.width}px; @@ -183,20 +183,16 @@ function generatePrimaryTagColors( ? darken(colors[1], 0.15) : semanticColors?.[intent].fillHover, iconColor: - colors.length > 2 - ? colors[2] - : semanticColors?.base?.iconPrimaryInverse, - label: colors.length - ? colors[0] - : semanticColors?.base?.textPrimaryInverse, + colors.length > 2 ? colors[2] : semanticColors?.base?.ornamentOnFill, + label: colors.length ? colors[0] : semanticColors?.base?.textOnFill, }; } else { return { background: semanticColors?.neutral.fillPrimary, backgroundClicked: semanticColors?.neutral.fillPressed, backgroundHover: semanticColors?.neutral.fillHover, - iconColor: semanticColors?.base?.iconPrimaryInverse, - label: semanticColors?.base?.textPrimaryInverse, + iconColor: semanticColors?.base?.ornamentOnFill, + label: semanticColors?.base?.textOnFill, }; } } @@ -226,7 +222,7 @@ function generateSecondaryTagColors( }; } else { return { - background: semanticColors?.neutral.surfacePrimary, + background: semanticColors?.neutral.fillSecondary, backgroundClicked: semanticColors?.neutral.fillPressed, backgroundHover: semanticColors?.neutral.fillHover, iconColor: semanticColors?.neutral.ornament, @@ -272,7 +268,7 @@ function createTypeCss( } svg { - fill: ${semanticColors?.base?.iconPrimaryInverse}; + fill: ${semanticColors?.base?.ornamentPrimaryInverse}; } } diff --git a/packages/components/src/core/TagFilter/style.ts b/packages/components/src/core/TagFilter/style.ts index c15dde065..77f14d2a0 100644 --- a/packages/components/src/core/TagFilter/style.ts +++ b/packages/components/src/core/TagFilter/style.ts @@ -27,8 +27,17 @@ export const StyledTag = styled(Tag)` background-color: ${semanticColors?.accent?.fillPrimary}; &:hover, - &:focus { + &:focus, + &:focus-within { background-color: ${semanticColors?.accent?.fillHover}; + + .MuiChip-label { + color: ${semanticColors?.base?.textPrimaryInverse} !important; + } + + .MuiChip-deleteIcon svg { + fill: ${semanticColors?.base?.ornamentPrimaryInverse} !important; + } } &:active { From adbc85fe6817b8553c147713f07db53df76fb527 Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Fri, 22 Nov 2024 17:18:39 -0500 Subject: [PATCH 3/6] feat(all): refactored all components and variables --- .../src/common/storybook/customSdsIcon.tsx | 3 -- .../__snapshots__/index.test.tsx.snap | 4 +- .../components/AccordionHeader/index.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 20 +++---- .../AutocompleteMultiColumn/index.tsx | 3 -- .../__snapshots__/banner.test.tsx.snap | 6 +-- packages/components/src/core/Banner/index.tsx | 13 +---- .../Button/__storybook__/stories/default.tsx | 2 - .../__storybook__/stories/screenshot.tsx | 12 +---- .../__snapshots__/index.test.tsx.snap | 2 +- .../__storybook__/index.stories.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 6 +-- .../__tests__/ButtonIcon.namespace-test.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../components/src/core/ButtonIcon/index.tsx | 1 - .../__snapshots__/index.test.tsx.snap | 2 +- .../Callout/components/CalloutTitle/style.ts | 4 +- .../components/src/core/Callout/index.tsx | 13 ++--- .../CellBasic/__storybook__/constants.tsx | 8 +-- .../CellBasic/__storybook__/stories/test.tsx | 2 +- .../__tests__/CellBasic.namespace-test.tsx | 2 +- .../CellComponent.namespace-test.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 30 +++++------ .../__snapshots__/index.test.tsx.snap | 8 +-- .../core/Icon/__storybook__/index.stories.tsx | 4 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 2 +- .../components/src/core/InputSlider/style.ts | 2 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../__snapshots__/index.test.tsx.snap | 4 +- .../src/core/LoadingIndicator/index.tsx | 2 +- .../components/src/core/MenuItem/index.tsx | 8 +-- .../__snapshots__/index.test.tsx.snap | 22 ++++---- .../__snapshots__/index.test.tsx.snap | 2 +- .../__snapshots__/index.test.tsx.snap | 8 +-- .../components/src/core/Pagination/index.tsx | 14 +---- .../__snapshots__/index.test.tsx.snap | 54 +++++++++---------- .../__snapshots__/index.test.tsx.snap | 32 +++++------ .../__snapshots__/index.test.tsx.snap | 12 ++--- .../src/core/Tag/__storybook__/constants.tsx | 2 +- .../Tag/__storybook__/stories/default.tsx | 6 +-- .../core/Tag/__tests__/Tag.namespace-test.tsx | 2 +- .../__snapshots__/index.test.tsx.snap | 6 +-- .../components/src/core/TagFilter/style.ts | 42 +++++++-------- .../__snapshots__/index.test.tsx.snap | 2 +- .../components/src/core/Tooltip/index.tsx | 8 ++- packages/components/src/core/Tooltip/style.ts | 12 +++-- .../src/core/TooltipCondensed/index.tsx | 1 + packages/data-viz/package.json | 8 +-- packages/data-viz/rollup.config.mjs | 5 +- .../heatmapDemo/components/Header/index.tsx | 6 +-- .../heatmapDemo/components/Header/style.ts | 2 +- .../stories/heatmapDemo/style.ts | 2 +- packages/data-viz/tsconfig.json | 25 ++++----- 57 files changed, 202 insertions(+), 262 deletions(-) diff --git a/packages/components/src/common/storybook/customSdsIcon.tsx b/packages/components/src/common/storybook/customSdsIcon.tsx index 426184503..2f7d02290 100644 --- a/packages/components/src/common/storybook/customSdsIcon.tsx +++ b/packages/components/src/common/storybook/customSdsIcon.tsx @@ -8,14 +8,12 @@ import Icon, { IconProps } from "../../core/Icon"; function CustomSdsIcon(props: { sdsIcon?: IconProps<"Bacteria">["sdsIcon"]; sdsSize?: IconProps<"Bacteria">["sdsSize"]; - sdsType?: IconProps<"Bacteria">["sdsType"]; color?: IconProps<"Bacteria">["color"]; shade?: IconProps<"Bacteria">["shade"]; }) { const { sdsIcon = "Bacteria", sdsSize = "l", - sdsType = "static", color = "blue", shade = 400, ...rest @@ -24,7 +22,6 @@ function CustomSdsIcon(props: { Default story renders snapshot 1`] = `
Default story renders snapshot 1`] = ` >
ControlledOpen story renders snapshot 1`] = ` > ControlledOpen story renders snapshot 1`] = ` > ControlledOpen story renders snapshot 1`] = `
Default story renders snapshot 1`] = ` > Default story renders snapshot 1`] = ` > Default story renders snapshot 1`] = ` class="css-fitsu2" > {TableBodyContent} diff --git a/packages/components/src/core/Button/style.ts b/packages/components/src/core/Button/style.ts index 57792e5e9..4e568bf58 100644 --- a/packages/components/src/core/Button/style.ts +++ b/packages/components/src/core/Button/style.ts @@ -267,11 +267,13 @@ const Minimal = (props: ButtonExtraProps): SerializedStyles => { &:active { color: ${semanticColors?.accent?.textActionPressed}; + background-color: ${semanticColors?.base?.fillHover}; svg { color: ${semanticColors?.accent?.ornamentPressed}; } } + &:disabled { color: ${semanticColors?.base?.textDisabled}; diff --git a/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap index d49f176f3..fb314bff4 100644 --- a/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/components/src/core/Dialog/__tests__/__snapshots__/index.test.tsx.snap @@ -2,7 +2,7 @@ exports[` Default story renders snapshot 1`] = `
Default story renders snapshot 1`] = ` > Default story renders snapshot 1`] = ` >
Default story renders snapshot 1`] = `
Default story renders snapshot 1`] = ` > Default story renders snapshot 1`] = `
Default story renders snapshot 1`] = ` > Default story renders snapshot 1`] = `
Default story renders snapshot 1`] = `
Default story renders snapshot 1`] = ` > Default story renders snapshot 1`] = ` > Default story renders snapshot 1`] = `
Default story renders snapshot 1`] = ` > Default story renders snapshot 1`] = `
Default story renders snapshot 1`] = ` > Default story renders snapshot 1`] = `
Default story renders snapshot 1`] = ` > , + , ]; export const TAG_HOVER_OPTIONS = [true, false]; diff --git a/packages/components/src/core/Tag/__storybook__/stories/default.tsx b/packages/components/src/core/Tag/__storybook__/stories/default.tsx index f6558c0a4..be0ba07d7 100644 --- a/packages/components/src/core/Tag/__storybook__/stories/default.tsx +++ b/packages/components/src/core/Tag/__storybook__/stories/default.tsx @@ -9,11 +9,7 @@ export const Tag = (props: Args): JSX.Element => { const finalIcon = typeof icon === "string" ? ( - + ) : ( icon ); diff --git a/packages/components/src/core/Tag/__tests__/Tag.namespace-test.tsx b/packages/components/src/core/Tag/__tests__/Tag.namespace-test.tsx index 2a90ecfb9..3a20df8f8 100644 --- a/packages/components/src/core/Tag/__tests__/Tag.namespace-test.tsx +++ b/packages/components/src/core/Tag/__tests__/Tag.namespace-test.tsx @@ -5,7 +5,7 @@ const TagNameSpaceTest = (props: TagProps) => { return ( } + icon={} label="Label" sdsStyle="rounded" sdsType="primary" diff --git a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap index a6c2f1c1e..3bf188a32 100644 --- a/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/components/src/core/TagFilter/__tests__/__snapshots__/index.test.tsx.snap @@ -6,7 +6,7 @@ exports[` Default story renders snapshot 1`] = ` >
@@ -37,7 +37,7 @@ exports[` Default story renders snapshot 1`] = ` > Default story renders snapshot 1`] = ` >

Heatmap ({renderer === "svg" ? "SVG version" : "Canvas version"})

@@ -35,7 +35,7 @@ const Header = () => {
} - sdsStyle="light" + hasInvertedStyle={false} placement="bottom-end" arrow > diff --git a/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts index 3e0ed53e9..1b1ff5b14 100644 --- a/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts +++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/components/Header/style.ts @@ -8,7 +8,7 @@ export const StyledHeader = styled("div")` const theme = useContext(ThemeContext) as SDSTheme; return ` - background-color: ${theme?.palette?.sds?.base?.surfaceBackground}; + background-color: ${theme?.palette?.sds?.base?.backgroundPrimary}; `; }} grid-area: 1 / 1 / 2 / 6; diff --git a/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/style.ts b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/style.ts index a87314194..5dc4708c0 100644 --- a/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/style.ts +++ b/packages/data-viz/src/core/HeatmapChart/__storybook__/stories/heatmapDemo/style.ts @@ -24,7 +24,7 @@ export const Sidebar = styled("div")` const theme = useContext(ThemeContext) as SDSTheme; return ` - background-color: ${theme?.palette?.sds?.base?.surfaceBackground}; + background-color: ${theme?.palette?.sds?.base?.backgroundPrimary}; `; }} grid-area: 2 / 1 / 6 / 2; diff --git a/packages/data-viz/tsconfig.json b/packages/data-viz/tsconfig.json index 145771f0e..02d529fd1 100644 --- a/packages/data-viz/tsconfig.json +++ b/packages/data-viz/tsconfig.json @@ -1,16 +1,11 @@ { - "extends": "../../tsconfig.json", - "compilerOptions": { - "baseUrl": "./", - "outDir": "./dist", - "composite": true - }, - "include": [ - "./src/**/*", - "../../.eslintrc.js" - ], - "exclude": [ - "node_modules" - ], - "references": [] -} \ No newline at end of file + "extends": "../../tsconfig.json", + "compilerOptions": { + "baseUrl": "./", + "outDir": "./dist", + "composite": true + }, + "include": ["./src/**/*", "jest.setup.ts", "../../.eslintrc.js"], + "exclude": ["node_modules", "**/*.scss", "**/*.css"], + "references": [] +} From df250b3d81eaace3c45cc4fded6b531a83890741 Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Fri, 22 Nov 2024 17:34:07 -0500 Subject: [PATCH 4/6] fix(snapshots): fix test snapshots and a11y errors --- packages/components/src/core/Chip/style.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/components/src/core/Chip/style.ts b/packages/components/src/core/Chip/style.ts index 7f9269ec7..9130198b2 100644 --- a/packages/components/src/core/Chip/style.ts +++ b/packages/components/src/core/Chip/style.ts @@ -122,27 +122,27 @@ function createStatusCss( const statusToColors = { beta: { dark: semanticColors?.beta?.text, - light: semanticColors?.beta?.surfacePrimary, + light: semanticColors?.beta?.surfaceSecondary, }, error: { dark: semanticColors?.negative?.text, - light: semanticColors?.negative?.surfacePrimary, + light: semanticColors?.negative?.surfaceSecondary, }, info: { dark: semanticColors?.info?.text, - light: semanticColors?.info?.surfacePrimary, + light: semanticColors?.info?.surfaceSecondary, }, pending: { dark: semanticColors?.neutral?.text, - light: semanticColors?.neutral?.surfacePrimary, + light: semanticColors?.neutral?.surfaceSecondary, }, success: { dark: semanticColors?.positive?.text, - light: semanticColors?.positive?.surfacePrimary, + light: semanticColors?.positive?.surfaceSecondary, }, warning: { dark: colors?.yellow[700], - light: semanticColors?.notice?.surfacePrimary, + light: semanticColors?.notice?.surfaceSecondary, }, }; From 961c55ef0aedd5d1856c551e174d87dd1c7e7baa Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Fri, 22 Nov 2024 18:17:08 -0500 Subject: [PATCH 5/6] refactor(design-tokens): update design tokens based on figma changes --- .../styles-dictionary/css/variables.css | 402 +++++++++--------- .../design-tokens/borders.json | 20 +- .../design-tokens/colors.json | 242 ++++++----- .../styles-dictionary/json/tailwind.json | 342 +++++++-------- .../styles-dictionary/scss/_variables.scss | 388 +++++++++-------- 5 files changed, 721 insertions(+), 673 deletions(-) diff --git a/packages/components/src/common/styles-dictionary/css/variables.css b/packages/components/src/common/styles-dictionary/css/variables.css index 606bbcba5..0d543fe6e 100644 --- a/packages/components/src/common/styles-dictionary/css/variables.css +++ b/packages/components/src/common/styles-dictionary/css/variables.css @@ -9,7 +9,9 @@ --sds-border-base-default: 1px solid #969696; --sds-border-base-disabled: 1px solid #c3c3c3; --sds-border-base-divider: 1px solid #dfdfdf; + --sds-border-base-divider-inverse: 1px solid #6c6c6c; --sds-border-base-hover: 1px dashed #000000; + --sds-border-base-inverse: 1px dashed #ffffff; --sds-border-base-pressed: 1px dashed #000000; --sds-border-base-table: 1px solid #c3c3c3; --sds-border-beta-default: 1px solid #6526b5; @@ -20,16 +22,16 @@ --sds-border-info-thick: 2px solid #0041b9; --sds-border-link-dashed: 1px dashed; --sds-border-link-solid: 1px solid; - --sds-border-negative-default: 1px solid #980013; - --sds-border-negative-extra-thick: 4px solid #980013; - --sds-border-negative-thick: 2px solid #980013; + --sds-border-negative-default: 1px solid #980017; + --sds-border-negative-extra-thick: 4px solid #980017; + --sds-border-negative-thick: 2px solid #980017; --sds-border-neutral-default: 1px solid #969696; --sds-border-neutral-extra-thick: 4px solid #969696; --sds-border-neutral-thick: 2px solid #969696; --sds-border-none: none; - --sds-border-notice-default: 1px solid #b77800; - --sds-border-notice-extra-thick: 4px solid #b77800; - --sds-border-notice-thick: 2px solid #b77800; + --sds-border-notice-default: 1px solid #b07300; + --sds-border-notice-extra-thick: 4px solid #b07300; + --sds-border-notice-thick: 2px solid #b07300; --sds-border-positive-default: 1px solid #105b2b; --sds-border-positive-extra-thick: 4px solid #105b2b; --sds-border-positive-thick: 2px solid #105b2b; @@ -70,50 +72,53 @@ --sds-color-primitive-purple-500: #8b54e2; --sds-color-primitive-purple-600: #6526b5; --sds-color-primitive-purple-700: #490092; - --sds-color-primitive-purple-800: #1a004c; + --sds-color-primitive-purple-800: #26004c; --sds-color-primitive-red-100: #ffe8e6; --sds-color-primitive-red-200: #ffd6d2; --sds-color-primitive-red-300: #ffafa8; --sds-color-primitive-red-400: #ff7e78; --sds-color-primitive-red-500: #db2131; - --sds-color-primitive-red-600: #980013; + --sds-color-primitive-red-600: #980017; --sds-color-primitive-red-700: #6f0008; --sds-color-primitive-red-800: #340000; - --sds-color-primitive-yellow-100: #ffefcf; + --sds-color-primitive-yellow-100: #fff3db; --sds-color-primitive-yellow-200: #ffdb97; --sds-color-primitive-yellow-300: #ffca5c; --sds-color-primitive-yellow-400: #fab700; --sds-color-primitive-yellow-500: #da9900; - --sds-color-primitive-yellow-600: #b77800; + --sds-color-primitive-yellow-600: #b07300; --sds-color-primitive-yellow-700: #7c3e00; --sds-color-primitive-yellow-800: #541700; --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08); --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03); - --sds-color-semantic-base-border: #969696; + --sds-color-semantic-base-background-primary: #ffffff; + --sds-color-semantic-base-background-primary-inverse: #000000; + --sds-color-semantic-base-background-secondary: #f3f3f3; + --sds-color-semantic-base-background-secondary-inverse: #3b3b3b; + --sds-color-semantic-base-background-tertiary: #dfdfdf; + --sds-color-semantic-base-border: #6c6c6c; --sds-color-semantic-base-border-disabled: #c3c3c3; --sds-color-semantic-base-border-hover: #000000; + --sds-color-semantic-base-border-inverse: #ffffff; --sds-color-semantic-base-border-pressed: #000000; --sds-color-semantic-base-border-table: #c3c3c3; --sds-color-semantic-base-divider: #dfdfdf; + --sds-color-semantic-base-divider-inverse: #6c6c6c; --sds-color-semantic-base-fill-disabled: #dfdfdf; --sds-color-semantic-base-fill-hover: #c3c3c347; --sds-color-semantic-base-fill-open: #c3c3c347; --sds-color-semantic-base-fill-pressed: #c3c3c347; --sds-color-semantic-base-fill-primary: #ffffff; --sds-color-semantic-base-fill-selected: #000000; - --sds-color-semantic-base-icon-disabled: #c3c3c3; - --sds-color-semantic-base-icon-primary: #969696; - --sds-color-semantic-base-icon-primary-hover: #000000; - --sds-color-semantic-base-icon-primary-inverse: #ffffff; - --sds-color-semantic-base-icon-primary-inverse-hover: #a5a5a5; - --sds-color-semantic-base-icon-primary-inverse-pressed: #a5a5a5; - --sds-color-semantic-base-icon-primary-pressed: #000000; - --sds-color-semantic-base-icon-secondary: #000000; - --sds-color-semantic-base-surface-background: #ffffff; - --sds-color-semantic-base-surface-primary: #ffffff; - --sds-color-semantic-base-surface-primary-inverse: #000000; - --sds-color-semantic-base-surface-secondary: #f3f3f3; - --sds-color-semantic-base-surface-tertiary: #dfdfdf; + --sds-color-semantic-base-ornament-disabled: #c3c3c3; + --sds-color-semantic-base-ornament-on-fill: #ffffff; + --sds-color-semantic-base-ornament-primary: #000000; + --sds-color-semantic-base-ornament-primary-inverse: #ffffff; + --sds-color-semantic-base-ornament-secondary: #6c6c6c; + --sds-color-semantic-base-ornament-secondary-hover: #000000; + --sds-color-semantic-base-ornament-secondary-pressed: #000000; + --sds-color-semantic-base-surface: #ffffff; + --sds-color-semantic-base-surface-inverse: #000000; --sds-color-semantic-base-text-disabled: #c3c3c3; --sds-color-semantic-base-text-primary: #000000; --sds-color-semantic-base-text-primary-inverse: #ffffff; @@ -128,78 +133,79 @@ --sds-color-semantic-accent-fill-hover: #0041b9; --sds-color-semantic-accent-fill-pressed: #002d90; --sds-color-semantic-accent-fill-primary: #1a6cef; - --sds-color-semantic-accent-icon: #1a6cef; - --sds-color-semantic-accent-icon-focus: #1a6cef; - --sds-color-semantic-accent-icon-hover: #0041b9; - --sds-color-semantic-accent-icon-open: #1a6cef; - --sds-color-semantic-accent-icon-pressed: #002d90; - --sds-color-semantic-accent-icon-selected: #1a6cef; - --sds-color-semantic-accent-surface-primary: #e2eeff; - --sds-color-semantic-accent-surface-secondary: #1a6cef; + --sds-color-semantic-accent-ornament: #1a6cef; + --sds-color-semantic-accent-ornament-focus: #1a6cef; + --sds-color-semantic-accent-ornament-hover: #0041b9; + --sds-color-semantic-accent-ornament-open: #1a6cef; + --sds-color-semantic-accent-ornament-pressed: #002d90; + --sds-color-semantic-accent-ornament-selected: #1a6cef; + --sds-color-semantic-accent-surface-primary: #1a6cef; + --sds-color-semantic-accent-surface-secondary: #e2eeff; --sds-color-semantic-accent-text-action: #1a6cef; --sds-color-semantic-accent-text-action-hover: #0041b9; --sds-color-semantic-accent-text-action-pressed: #002d90; - --sds-color-semantic-beta-border: #8b54e2; + --sds-color-semantic-beta-border: #6526b5; --sds-color-semantic-beta-fill-hover: #6526b5; --sds-color-semantic-beta-fill-pressed: #490092; --sds-color-semantic-beta-fill-primary: #8b54e2; --sds-color-semantic-beta-fill-secondary: #efeafe; --sds-color-semantic-beta-ornament: #6526b5; - --sds-color-semantic-beta-surface-primary: #efeafe; - --sds-color-semantic-beta-surface-secondary: #8b54e2; + --sds-color-semantic-beta-surface-primary: #8b54e2; + --sds-color-semantic-beta-surface-secondary: #efeafe; --sds-color-semantic-beta-text: #6526b5; - --sds-color-semantic-info-border: #1a6cef; + --sds-color-semantic-info-border: #0041b9; --sds-color-semantic-info-fill-hover: #0041b9; --sds-color-semantic-info-fill-pressed: #002d90; --sds-color-semantic-info-fill-primary: #1a6cef; --sds-color-semantic-info-fill-secondary: #e2eeff; --sds-color-semantic-info-ornament: #0041b9; - --sds-color-semantic-info-surface-primary: #e2eeff; - --sds-color-semantic-info-surface-secondary: #1a6cef; + --sds-color-semantic-info-surface-primary: #1a6cef; + --sds-color-semantic-info-surface-secondary: #e2eeff; --sds-color-semantic-info-text: #0041b9; - --sds-color-semantic-negative-border: #db2131; - --sds-color-semantic-negative-fill-hover: #980013; + --sds-color-semantic-negative-border: #980017; + --sds-color-semantic-negative-fill-hover: #980017; --sds-color-semantic-negative-fill-pressed: #6f0008; --sds-color-semantic-negative-fill-primary: #db2131; --sds-color-semantic-negative-fill-secondary: #ffe8e6; - --sds-color-semantic-negative-ornament: #980013; - --sds-color-semantic-negative-surface-primary: #ffe8e6; - --sds-color-semantic-negative-surface-secondary: #db2131; - --sds-color-semantic-negative-text: #980013; + --sds-color-semantic-negative-ornament: #980017; + --sds-color-semantic-negative-surface-primary: #db2131; + --sds-color-semantic-negative-surface-secondary: #ffe8e6; + --sds-color-semantic-negative-text: #980017; --sds-color-semantic-neutral-border: #969696; --sds-color-semantic-neutral-fill-hover: #6c6c6c; --sds-color-semantic-neutral-fill-pressed: #3b3b3b; --sds-color-semantic-neutral-fill-primary: #969696; --sds-color-semantic-neutral-fill-secondary: #f3f3f3; --sds-color-semantic-neutral-ornament: #3b3b3b; - --sds-color-semantic-neutral-surface-primary: #dfdfdf; - --sds-color-semantic-neutral-surface-secondary: #969696; + --sds-color-semantic-neutral-surface-primary: #969696; + --sds-color-semantic-neutral-surface-secondary: #dfdfdf; --sds-color-semantic-neutral-text: #3b3b3b; - --sds-color-semantic-notice-border: #da9900; - --sds-color-semantic-notice-fill-hover: #b77800; + --sds-color-semantic-notice-border: #b07300; + --sds-color-semantic-notice-fill-hover: #b07300; --sds-color-semantic-notice-fill-pressed: #7c3e00; --sds-color-semantic-notice-fill-primary: #da9900; - --sds-color-semantic-notice-fill-secondary: #ffefcf; - --sds-color-semantic-notice-ornament: #b77800; - --sds-color-semantic-notice-surface-primary: #ffefcf; - --sds-color-semantic-notice-surface-secondary: #da9900; - --sds-color-semantic-notice-text: #b77800; - --sds-color-semantic-positive-border: #238444; + --sds-color-semantic-notice-fill-secondary: #fff3db; + --sds-color-semantic-notice-ornament: #b07300; + --sds-color-semantic-notice-surface-primary: #da9900; + --sds-color-semantic-notice-surface-secondary: #fff3db; + --sds-color-semantic-notice-text: #b07300; + --sds-color-semantic-positive-border: #105b2b; --sds-color-semantic-positive-fill-hover: #105b2b; --sds-color-semantic-positive-fill-pressed: #07431d; --sds-color-semantic-positive-fill-primary: #238444; --sds-color-semantic-positive-fill-secondary: #daf4de; --sds-color-semantic-positive-ornament: #105b2b; - --sds-color-semantic-positive-surface-primary: #daf4de; - --sds-color-semantic-positive-surface-secondary: #238444; + --sds-color-semantic-positive-surface-primary: #238444; + --sds-color-semantic-positive-surface-secondary: #daf4de; --sds-color-semantic-positive-text: #105b2b; --sds-corner-l: 20px; --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), + 0px 2px 4px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-font-family-body: "Inter", sans-serif; --sds-font-font-family-body-narrow: "Inter", sans-serif; @@ -382,41 +388,43 @@ --sds-border-base-default: 1px solid #aaaaaa; --sds-border-base-disabled: 1px solid #696969; --sds-border-base-divider: 1px solid #494949; + --sds-border-base-divider-inverse: 1px solid #cdcdcd; --sds-border-base-hover: 1px dashed #ffffff; + --sds-border-base-inverse: 1px dashed #000000; --sds-border-base-pressed: 1px dashed #ffffff; --sds-border-base-table: 1px solid #696969; - --sds-border-beta-default: 1px solid #e4dcfc; - --sds-border-beta-extra-thick: 4px solid #e4dcfc; - --sds-border-beta-thick: 2px solid #e4dcfc; - --sds-border-info-default: 1px solid #cde3ff; - --sds-border-info-extra-thick: 4px solid #cde3ff; - --sds-border-info-thick: 2px solid #cde3ff; + --sds-border-beta-default: 1px solid #cebef8; + --sds-border-beta-extra-thick: 4px solid #cebef8; + --sds-border-beta-thick: 2px solid #cebef8; + --sds-border-info-default: 1px solid #a2c9ff; + --sds-border-info-extra-thick: 4px solid #a2c9ff; + --sds-border-info-thick: 2px solid #a2c9ff; --sds-border-link-dashed: 1px dashed; --sds-border-link-solid: 1px solid; - --sds-border-negative-default: 1px solid #FFBDB3; - --sds-border-negative-extra-thick: 4px solid #FFBDB3; - --sds-border-negative-thick: 2px solid #FFBDB3; + --sds-border-negative-default: 1px solid #ff988a; + --sds-border-negative-extra-thick: 4px solid #ff988a; + --sds-border-negative-thick: 2px solid #ff988a; --sds-border-neutral-default: 1px solid #aaaaaa; --sds-border-neutral-extra-thick: 4px solid #aaaaaa; --sds-border-neutral-thick: 2px solid #aaaaaa; --sds-border-none: none; - --sds-border-notice-default: 1px solid #efad00; - --sds-border-notice-extra-thick: 4px solid #efad00; - --sds-border-notice-thick: 2px solid #efad00; - --sds-border-positive-default: 1px solid #bcecc5; - --sds-border-positive-extra-thick: 4px solid #bcecc5; - --sds-border-positive-thick: 2px solid #bcecc5; + --sds-border-notice-default: 1px solid #e5bc63; + --sds-border-notice-extra-thick: 4px solid #e5bc63; + --sds-border-notice-thick: 2px solid #e5bc63; + --sds-border-positive-default: 1px solid #85d898; + --sds-border-positive-extra-thick: 4px solid #85d898; + --sds-border-positive-thick: 2px solid #85d898; --sds-breakpoint-sm: 0px; --sds-breakpoint-md: 512px; --sds-breakpoint-lg: 1024px; - --sds-color-primitive-blue-100: #002573; - --sds-color-primitive-blue-200: #0048c5; - --sds-color-primitive-blue-300: #2573f4; - --sds-color-primitive-blue-400: #5b9aff; - --sds-color-primitive-blue-500: #a2c9ff; - --sds-color-primitive-blue-600: #cde3ff; - --sds-color-primitive-blue-700: #e2eeff; - --sds-color-primitive-blue-800: #f7faff; + --sds-color-primitive-blue-100: #0f1d4a; + --sds-color-primitive-blue-200: #0a216e; + --sds-color-primitive-blue-300: #0647b8; + --sds-color-primitive-blue-400: #2573f4; + --sds-color-primitive-blue-500: #5b9aff; + --sds-color-primitive-blue-600: #a2c9ff; + --sds-color-primitive-blue-700: #cde3ff; + --sds-color-primitive-blue-800: #e2eeff; --sds-color-primitive-gray-50: #000000; --sds-color-primitive-gray-75: #101010; --sds-color-primitive-gray-100: #333333; @@ -428,151 +436,155 @@ --sds-color-primitive-gray-700: #ededed; --sds-color-primitive-gray-800: #fafafa; --sds-color-primitive-gray-900: #ffffff; - --sds-color-primitive-green-100: #053918; - --sds-color-primitive-green-200: #12612e; - --sds-color-primitive-green-300: #288b49; - --sds-color-primitive-green-400: #43ae63; - --sds-color-primitive-green-500: #85d898; - --sds-color-primitive-green-600: #bcecc5; - --sds-color-primitive-green-700: #daf4de; - --sds-color-primitive-green-800: #f7fbf6; - --sds-color-primitive-purple-100: #4b0190; - --sds-color-primitive-purple-200: #6b2ebc; - --sds-color-primitive-purple-300: #905de6; - --sds-color-primitive-purple-400: #aa89ef; - --sds-color-primitive-purple-500: #cebef8; - --sds-color-primitive-purple-600: #e4dcfc; - --sds-color-primitive-purple-700: #f0ebfe; - --sds-color-primitive-purple-800: #fbf9ff; - --sds-color-primitive-red-100: #630008; - --sds-color-primitive-red-200: #A30000; - --sds-color-primitive-red-300: #E52722; - --sds-color-primitive-red-400: #FF695B; - --sds-color-primitive-red-500: #FF9385; - --sds-color-primitive-red-600: #FFBDB3; - --sds-color-primitive-red-700: #FFD8D1; - --sds-color-primitive-red-800: #FFF1EE; - --sds-color-primitive-yellow-100: #552300; - --sds-color-primitive-yellow-200: #834500; - --sds-color-primitive-yellow-300: #985a00; - --sds-color-primitive-yellow-400: #ac6c00; - --sds-color-primitive-yellow-500: #cf8e00; - --sds-color-primitive-yellow-600: #efad00; - --sds-color-primitive-yellow-700: #ffdc9a; - --sds-color-primitive-yellow-800: #fcf2e3; + --sds-color-primitive-green-100: #082608; + --sds-color-primitive-green-200: #063617; + --sds-color-primitive-green-300: #10632e; + --sds-color-primitive-green-400: #278b48; + --sds-color-primitive-green-500: #4bae68; + --sds-color-primitive-green-600: #85d898; + --sds-color-primitive-green-700: #bcecc5; + --sds-color-primitive-green-800: #daf4de; + --sds-color-primitive-purple-100: #331252; + --sds-color-primitive-purple-200: #410f70; + --sds-color-primitive-purple-300: #6429b2; + --sds-color-primitive-purple-400: #905de6; + --sds-color-primitive-purple-500: #aa89ef; + --sds-color-primitive-purple-600: #cebef8; + --sds-color-primitive-purple-700: #e4dcfc; + --sds-color-primitive-purple-800: #f0ebfe; + --sds-color-primitive-red-100: #330603; + --sds-color-primitive-red-200: #660a12; + --sds-color-primitive-red-300: #9e1c1c; + --sds-color-primitive-red-400: #c73028; + --sds-color-primitive-red-500: #e05043; + --sds-color-primitive-red-600: #ff988a; + --sds-color-primitive-red-700: #ffbdb3; + --sds-color-primitive-red-800: #ffd8d1; + --sds-color-primitive-yellow-100: #361b07; + --sds-color-primitive-yellow-200: #52270a; + --sds-color-primitive-yellow-300: #965a0b; + --sds-color-primitive-yellow-400: #bd8804; + --sds-color-primitive-yellow-500: #d9a943; + --sds-color-primitive-yellow-600: #e5bc63; + --sds-color-primitive-yellow-700: #f5d789; + --sds-color-primitive-yellow-800: #ffe6a8; --sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08); --sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03); - --sds-color-semantic-base-border: #aaaaaa; + --sds-color-semantic-base-background-primary: #000000; + --sds-color-semantic-base-background-primary-inverse: #ffffff; + --sds-color-semantic-base-background-secondary: #333333; + --sds-color-semantic-base-background-secondary-inverse: #ededed; + --sds-color-semantic-base-background-tertiary: #494949; + --sds-color-semantic-base-border: #cdcdcd; --sds-color-semantic-base-border-disabled: #696969; --sds-color-semantic-base-border-hover: #ffffff; + --sds-color-semantic-base-border-inverse: #000000; --sds-color-semantic-base-border-pressed: #ffffff; --sds-color-semantic-base-border-table: #696969; --sds-color-semantic-base-divider: #494949; + --sds-color-semantic-base-divider-inverse: #cdcdcd; --sds-color-semantic-base-fill-disabled: #494949; --sds-color-semantic-base-fill-hover: #69696947; --sds-color-semantic-base-fill-open: #69696947; --sds-color-semantic-base-fill-pressed: #69696947; --sds-color-semantic-base-fill-primary: #000000; --sds-color-semantic-base-fill-selected: #ffffff; - --sds-color-semantic-base-icon-disabled: #696969; - --sds-color-semantic-base-icon-primary: #aaaaaa; - --sds-color-semantic-base-icon-primary-hover: #ffffff; - --sds-color-semantic-base-icon-primary-inverse: #000000; - --sds-color-semantic-base-icon-primary-inverse-hover: #9b9b9b; - --sds-color-semantic-base-icon-primary-inverse-pressed: #9b9b9b; - --sds-color-semantic-base-icon-primary-pressed: #ffffff; - --sds-color-semantic-base-icon-secondary: #ffffff; - --sds-color-semantic-base-surface-background: #000000; - --sds-color-semantic-base-surface-primary: #000000; - --sds-color-semantic-base-surface-primary-inverse: #ffffff; - --sds-color-semantic-base-surface-secondary: #333333; - --sds-color-semantic-base-surface-tertiary: #494949; + --sds-color-semantic-base-ornament-disabled: #696969; + --sds-color-semantic-base-ornament-on-fill: #000000; + --sds-color-semantic-base-ornament-primary: #ffffff; + --sds-color-semantic-base-ornament-primary-inverse: #000000; + --sds-color-semantic-base-ornament-secondary: #cdcdcd; + --sds-color-semantic-base-ornament-secondary-hover: #ffffff; + --sds-color-semantic-base-ornament-secondary-pressed: #ffffff; + --sds-color-semantic-base-surface: #000000; + --sds-color-semantic-base-surface-inverse: #ffffff; --sds-color-semantic-base-text-disabled: #696969; --sds-color-semantic-base-text-primary: #ffffff; --sds-color-semantic-base-text-primary-inverse: #000000; --sds-color-semantic-base-text-secondary: #cdcdcd; --sds-color-semantic-base-text-secondary-inverse: #696969; - --sds-color-semantic-accent-border: #a2c9ff; - --sds-color-semantic-accent-border-focus: #a2c9ff; - --sds-color-semantic-accent-border-hover: #cde3ff; - --sds-color-semantic-accent-border-open: #a2c9ff; - --sds-color-semantic-accent-border-pressed: #e2eeff; - --sds-color-semantic-accent-border-selected: #a2c9ff; - --sds-color-semantic-accent-fill-hover: #cde3ff; - --sds-color-semantic-accent-fill-pressed: #e2eeff; - --sds-color-semantic-accent-fill-primary: #a2c9ff; - --sds-color-semantic-accent-icon: #a2c9ff; - --sds-color-semantic-accent-icon-focus: #a2c9ff; - --sds-color-semantic-accent-icon-hover: #cde3ff; - --sds-color-semantic-accent-icon-open: #a2c9ff; - --sds-color-semantic-accent-icon-pressed: #e2eeff; - --sds-color-semantic-accent-icon-selected: #a2c9ff; - --sds-color-semantic-accent-surface-primary: #002573; - --sds-color-semantic-accent-surface-secondary: #a2c9ff; - --sds-color-semantic-accent-text-action: #a2c9ff; - --sds-color-semantic-accent-text-action-hover: #cde3ff; - --sds-color-semantic-accent-text-action-pressed: #e2eeff; + --sds-color-semantic-accent-border: #5b9aff; + --sds-color-semantic-accent-border-focus: #5b9aff; + --sds-color-semantic-accent-border-hover: #a2c9ff; + --sds-color-semantic-accent-border-open: #5b9aff; + --sds-color-semantic-accent-border-pressed: #cde3ff; + --sds-color-semantic-accent-border-selected: #5b9aff; + --sds-color-semantic-accent-fill-hover: #a2c9ff; + --sds-color-semantic-accent-fill-pressed: #cde3ff; + --sds-color-semantic-accent-fill-primary: #5b9aff; + --sds-color-semantic-accent-ornament: #5b9aff; + --sds-color-semantic-accent-ornament-focus: #5b9aff; + --sds-color-semantic-accent-ornament-hover: #a2c9ff; + --sds-color-semantic-accent-ornament-open: #5b9aff; + --sds-color-semantic-accent-ornament-pressed: #cde3ff; + --sds-color-semantic-accent-ornament-selected: #5b9aff; + --sds-color-semantic-accent-surface-primary: #5b9aff; + --sds-color-semantic-accent-surface-secondary: #0f1d4a; + --sds-color-semantic-accent-text-action: #5b9aff; + --sds-color-semantic-accent-text-action-hover: #a2c9ff; + --sds-color-semantic-accent-text-action-pressed: #cde3ff; --sds-color-semantic-beta-border: #cebef8; - --sds-color-semantic-beta-fill-hover: #e4dcfc; - --sds-color-semantic-beta-fill-pressed: #f0ebfe; - --sds-color-semantic-beta-fill-primary: #cebef8; - --sds-color-semantic-beta-fill-secondary: #4b0190; - --sds-color-semantic-beta-ornament: #e4dcfc; - --sds-color-semantic-beta-surface-primary: #4b0190; - --sds-color-semantic-beta-surface-secondary: #cebef8; - --sds-color-semantic-beta-text: #e4dcfc; + --sds-color-semantic-beta-fill-hover: #cebef8; + --sds-color-semantic-beta-fill-pressed: #e4dcfc; + --sds-color-semantic-beta-fill-primary: #aa89ef; + --sds-color-semantic-beta-fill-secondary: #331252; + --sds-color-semantic-beta-ornament: #cebef8; + --sds-color-semantic-beta-surface-primary: #aa89ef; + --sds-color-semantic-beta-surface-secondary: #331252; + --sds-color-semantic-beta-text: #cebef8; --sds-color-semantic-info-border: #a2c9ff; - --sds-color-semantic-info-fill-hover: #cde3ff; - --sds-color-semantic-info-fill-pressed: #e2eeff; - --sds-color-semantic-info-fill-primary: #a2c9ff; - --sds-color-semantic-info-fill-secondary: #002573; - --sds-color-semantic-info-ornament: #cde3ff; - --sds-color-semantic-info-surface-primary: #002573; - --sds-color-semantic-info-surface-secondary: #a2c9ff; - --sds-color-semantic-info-text: #cde3ff; - --sds-color-semantic-negative-border: #FF9385; - --sds-color-semantic-negative-fill-hover: #FFBDB3; - --sds-color-semantic-negative-fill-pressed: #FFD8D1; - --sds-color-semantic-negative-fill-primary: #FF9385; - --sds-color-semantic-negative-fill-secondary: #630008; - --sds-color-semantic-negative-ornament: #FFBDB3; - --sds-color-semantic-negative-surface-primary: #630008; - --sds-color-semantic-negative-surface-secondary: #FF9385; - --sds-color-semantic-negative-text: #FFBDB3; + --sds-color-semantic-info-fill-hover: #a2c9ff; + --sds-color-semantic-info-fill-pressed: #cde3ff; + --sds-color-semantic-info-fill-primary: #5b9aff; + --sds-color-semantic-info-fill-secondary: #0f1d4a; + --sds-color-semantic-info-ornament: #a2c9ff; + --sds-color-semantic-info-surface-primary: #5b9aff; + --sds-color-semantic-info-surface-secondary: #0f1d4a; + --sds-color-semantic-info-text: #a2c9ff; + --sds-color-semantic-negative-border: #ff988a; + --sds-color-semantic-negative-fill-hover: #ff988a; + --sds-color-semantic-negative-fill-pressed: #ffbdb3; + --sds-color-semantic-negative-fill-primary: #e05043; + --sds-color-semantic-negative-fill-secondary: #330603; + --sds-color-semantic-negative-ornament: #ff988a; + --sds-color-semantic-negative-surface-primary: #e05043; + --sds-color-semantic-negative-surface-secondary: #330603; + --sds-color-semantic-negative-text: #ff988a; --sds-color-semantic-neutral-border: #aaaaaa; --sds-color-semantic-neutral-fill-hover: #cdcdcd; --sds-color-semantic-neutral-fill-pressed: #ededed; --sds-color-semantic-neutral-fill-primary: #aaaaaa; --sds-color-semantic-neutral-fill-secondary: #333333; --sds-color-semantic-neutral-ornament: #ededed; - --sds-color-semantic-neutral-surface-primary: #494949; - --sds-color-semantic-neutral-surface-secondary: #aaaaaa; + --sds-color-semantic-neutral-surface-primary: #aaaaaa; + --sds-color-semantic-neutral-surface-secondary: #494949; --sds-color-semantic-neutral-text: #ededed; - --sds-color-semantic-notice-border: #cf8e00; - --sds-color-semantic-notice-fill-hover: #efad00; - --sds-color-semantic-notice-fill-pressed: #ffdc9a; - --sds-color-semantic-notice-fill-primary: #cf8e00; - --sds-color-semantic-notice-fill-secondary: #552300; - --sds-color-semantic-notice-ornament: #efad00; - --sds-color-semantic-notice-surface-primary: #552300; - --sds-color-semantic-notice-surface-secondary: #cf8e00; - --sds-color-semantic-notice-text: #efad00; + --sds-color-semantic-notice-border: #e5bc63; + --sds-color-semantic-notice-fill-hover: #e5bc63; + --sds-color-semantic-notice-fill-pressed: #f5d789; + --sds-color-semantic-notice-fill-primary: #d9a943; + --sds-color-semantic-notice-fill-secondary: #361b07; + --sds-color-semantic-notice-ornament: #e5bc63; + --sds-color-semantic-notice-surface-primary: #d9a943; + --sds-color-semantic-notice-surface-secondary: #361b07; + --sds-color-semantic-notice-text: #e5bc63; --sds-color-semantic-positive-border: #85d898; - --sds-color-semantic-positive-fill-hover: #bcecc5; - --sds-color-semantic-positive-fill-pressed: #daf4de; - --sds-color-semantic-positive-fill-primary: #85d898; - --sds-color-semantic-positive-fill-secondary: #053918; - --sds-color-semantic-positive-ornament: #bcecc5; - --sds-color-semantic-positive-surface-primary: #053918; - --sds-color-semantic-positive-surface-secondary: #85d898; - --sds-color-semantic-positive-text: #bcecc5; + --sds-color-semantic-positive-fill-hover: #85d898; + --sds-color-semantic-positive-fill-pressed: #bcecc5; + --sds-color-semantic-positive-fill-primary: #4bae68; + --sds-color-semantic-positive-fill-secondary: #082608; + --sds-color-semantic-positive-ornament: #85d898; + --sds-color-semantic-positive-surface-primary: #4bae68; + --sds-color-semantic-positive-surface-secondary: #082608; + --sds-color-semantic-positive-text: #85d898; --sds-corner-l: 20px; --sds-corner-m: 4px; --sds-corner-s: 2px; --sds-corner-none: 0px; - --sds-drop-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3); - --sds-drop-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15), 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15); - --sds-drop-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25); + --sds-drop-shadow-l: 0px 2px 12px 0px rgba(0, 0, 0, 0.3); + --sds-drop-shadow-m: 0px 2px 10px 0px rgba(0, 0, 0, 0.15), + 0px 2px 4px 0px rgba(0, 0, 0, 0.15); + --sds-drop-shadow-s: 0px 2px 4px 0px rgba(0, 0, 0, 0.25); --sds-drop-shadow-none: none; --sds-font-font-family-body: "Inter", sans-serif; --sds-font-font-family-body-narrow: "Inter", sans-serif; diff --git a/packages/components/src/common/styles-dictionary/design-tokens/borders.json b/packages/components/src/common/styles-dictionary/design-tokens/borders.json index 11ea74bf5..fc92a10db 100644 --- a/packages/components/src/common/styles-dictionary/design-tokens/borders.json +++ b/packages/components/src/common/styles-dictionary/design-tokens/borders.json @@ -4,27 +4,27 @@ "accent": { "default": { "value": "1px solid {sds.color.primitive.blue.500.value}", - "darkValue": "1px solid {sds.color.primitive.blue.500.darkValue}" + "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}" }, "focused": { "value": "1px solid {sds.color.primitive.blue.500.value}", - "darkValue": "1px solid {sds.color.primitive.blue.500.darkValue}" + "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}" }, "open": { "value": "1px solid {sds.color.primitive.blue.500.value}", - "darkValue": "1px solid {sds.color.primitive.blue.500.darkValue}" + "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}" }, "selected": { "value": "1px solid {sds.color.primitive.blue.500.value}", - "darkValue": "1px solid {sds.color.primitive.blue.500.darkValue}" + "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}" }, "hover": { "value": "1px solid {sds.color.primitive.blue.600.value}", - "darkValue": "1px solid {sds.color.primitive.blue.600.darkValue}" + "darkValue": "1px solid {sds.color.primitive.blue.700.darkValue}" }, "pressed": { "value": "1px solid {sds.color.primitive.blue.700.value}", - "darkValue": "1px solid {sds.color.primitive.blue.700.darkValue}" + "darkValue": "1px solid {sds.color.primitive.blue.800.darkValue}" } }, "base": { @@ -40,10 +40,18 @@ "value": "1px solid {sds.color.primitive.gray.200.value}", "darkValue": "1px solid {sds.color.primitive.gray.200.darkValue}" }, + "dividerInverse": { + "value": "1px solid {sds.color.primitive.gray.600.value}", + "darkValue": "1px solid {sds.color.primitive.gray.600.darkValue}" + }, "hover": { "value": "1px dashed {sds.color.primitive.gray.900.value}", "darkValue": "1px dashed {sds.color.primitive.gray.900.darkValue}" }, + "inverse": { + "value": "1px dashed {sds.color.primitive.gray.50.value}", + "darkValue": "1px dashed {sds.color.primitive.gray.50.darkValue}" + }, "pressed": { "value": "1px dashed {sds.color.primitive.gray.900.value}", "darkValue": "1px dashed {sds.color.primitive.gray.900.darkValue}" diff --git a/packages/components/src/common/styles-dictionary/design-tokens/colors.json b/packages/components/src/common/styles-dictionary/design-tokens/colors.json index ca322fed4..477426d5b 100644 --- a/packages/components/src/common/styles-dictionary/design-tokens/colors.json +++ b/packages/components/src/common/styles-dictionary/design-tokens/colors.json @@ -3,14 +3,14 @@ "color": { "primitive": { "blue": { - "100": { "value": "#e2eeff", "darkValue": "#002573" }, - "200": { "value": "#cce1ff", "darkValue": "#0048c5" }, - "300": { "value": "#9dc6ff", "darkValue": "#2573f4" }, - "400": { "value": "#6ca6ff", "darkValue": "#5b9aff" }, - "500": { "value": "#1a6cef", "darkValue": "#a2c9ff" }, - "600": { "value": "#0041b9", "darkValue": "#cde3ff" }, - "700": { "value": "#002d90", "darkValue": "#e2eeff" }, - "800": { "value": "#00114a", "darkValue": "#f7faff" } + "100": { "value": "#e2eeff", "darkValue": "#0f1d4a" }, + "200": { "value": "#cce1ff", "darkValue": "#0a216e" }, + "300": { "value": "#9dc6ff", "darkValue": "#0647b8" }, + "400": { "value": "#6ca6ff", "darkValue": "#2573f4" }, + "500": { "value": "#1a6cef", "darkValue": "#5b9aff" }, + "600": { "value": "#0041b9", "darkValue": "#a2c9ff" }, + "700": { "value": "#002d90", "darkValue": "#cde3ff" }, + "800": { "value": "#00114a", "darkValue": "#e2eeff" } }, "gray": { "100": { "value": "#f3f3f3", "darkValue": "#333333" }, @@ -26,44 +26,44 @@ "900": { "value": "#000000", "darkValue": "#ffffff" } }, "green": { - "100": { "value": "#daf4de", "darkValue": "#053918" }, - "200": { "value": "#b9ecc3", "darkValue": "#12612e" }, - "300": { "value": "#7fd693", "darkValue": "#288b49" }, - "400": { "value": "#50b96d", "darkValue": "#43ae63" }, - "500": { "value": "#238444", "darkValue": "#85d898" }, - "600": { "value": "#105b2b", "darkValue": "#bcecc5" }, - "700": { "value": "#07431d", "darkValue": "#daf4de" }, - "800": { "value": "#001f00", "darkValue": "#f7fbf6" } + "100": { "value": "#daf4de", "darkValue": "#082608" }, + "200": { "value": "#b9ecc3", "darkValue": "#063617" }, + "300": { "value": "#7fd693", "darkValue": "#10632e" }, + "400": { "value": "#50b96d", "darkValue": "#278b48" }, + "500": { "value": "#238444", "darkValue": "#4bae68" }, + "600": { "value": "#105b2b", "darkValue": "#85d898" }, + "700": { "value": "#07431d", "darkValue": "#bcecc5" }, + "800": { "value": "#001f00", "darkValue": "#daf4de" } }, "purple": { - "100": { "value": "#efeafe", "darkValue": "#4b0190" }, - "200": { "value": "#e4dbfc", "darkValue": "#6b2ebc" }, - "300": { "value": "#cbbaf8", "darkValue": "#905de6" }, - "400": { "value": "#b296f2", "darkValue": "#aa89ef" }, - "500": { "value": "#8b54e2", "darkValue": "#cebef8" }, - "600": { "value": "#6526b5", "darkValue": "#e4dcfc" }, - "700": { "value": "#490092", "darkValue": "#f0ebfe" }, - "800": { "value": "#1a004c", "darkValue": "#fbf9ff" } + "100": { "value": "#efeafe", "darkValue": "#331252" }, + "200": { "value": "#e4dbfc", "darkValue": "#410f70" }, + "300": { "value": "#cbbaf8", "darkValue": "#6429b2" }, + "400": { "value": "#b296f2", "darkValue": "#905de6" }, + "500": { "value": "#8b54e2", "darkValue": "#aa89ef" }, + "600": { "value": "#6526b5", "darkValue": "#cebef8" }, + "700": { "value": "#490092", "darkValue": "#e4dcfc" }, + "800": { "value": "#26004c", "darkValue": "#f0ebfe" } }, "red": { - "100": { "value": "#ffe8e6", "darkValue": "#630008" }, - "200": { "value": "#ffd6d2", "darkValue": "#A30000" }, - "300": { "value": "#ffafa8", "darkValue": "#E52722" }, - "400": { "value": "#ff7e78", "darkValue": "#FF695B" }, - "500": { "value": "#db2131", "darkValue": "#FF9385" }, - "600": { "value": "#980013", "darkValue": "#FFBDB3" }, - "700": { "value": "#6f0008", "darkValue": "#FFD8D1" }, - "800": { "value": "#340000", "darkValue": "#FFF1EE" } + "100": { "value": "#ffe8e6", "darkValue": "#330603" }, + "200": { "value": "#ffd6d2", "darkValue": "#660a12" }, + "300": { "value": "#ffafa8", "darkValue": "#9e1c1c" }, + "400": { "value": "#ff7e78", "darkValue": "#c73028" }, + "500": { "value": "#db2131", "darkValue": "#e05043" }, + "600": { "value": "#980017", "darkValue": "#ff988a" }, + "700": { "value": "#6f0008", "darkValue": "#ffbdb3" }, + "800": { "value": "#340000", "darkValue": "#ffd8d1" } }, "yellow": { - "100": { "value": "#ffefcf", "darkValue": "#552300" }, - "200": { "value": "#ffdb97", "darkValue": "#834500" }, - "300": { "value": "#ffca5c", "darkValue": "#985a00" }, - "400": { "value": "#fab700", "darkValue": "#ac6c00" }, - "500": { "value": "#da9900", "darkValue": "#cf8e00" }, - "600": { "value": "#b77800", "darkValue": "#efad00" }, - "700": { "value": "#7c3e00", "darkValue": "#ffdc9a" }, - "800": { "value": "#541700", "darkValue": "#fcf2e3" } + "100": { "value": "#fff3db", "darkValue": "#361b07" }, + "200": { "value": "#ffdb97", "darkValue": "#52270a" }, + "300": { "value": "#ffca5c", "darkValue": "#965a0b" }, + "400": { "value": "#fab700", "darkValue": "#bd8804" }, + "500": { "value": "#da9900", "darkValue": "#d9a943" }, + "600": { "value": "#b07300", "darkValue": "#e5bc63" }, + "700": { "value": "#7c3e00", "darkValue": "#f5d789" }, + "800": { "value": "#541700", "darkValue": "#ffe6a8" } }, "overlay": { "100": { @@ -78,9 +78,29 @@ }, "semantic": { "base": { + "background-primary": { + "value": "{sds.color.primitive.gray.50.value}", + "darkValue": "{sds.color.primitive.gray.50.darkValue}" + }, + "background-primary-inverse": { + "value": "{sds.color.primitive.gray.900.value}", + "darkValue": "{sds.color.primitive.gray.900.darkValue}" + }, + "background-secondary": { + "value": "{sds.color.primitive.gray.100.value}", + "darkValue": "{sds.color.primitive.gray.100.darkValue}" + }, + "background-secondary-inverse": { + "value": "{sds.color.primitive.gray.700.value}", + "darkValue": "{sds.color.primitive.gray.700.darkValue}" + }, + "background-tertiary": { + "value": "{sds.color.primitive.gray.200.value}", + "darkValue": "{sds.color.primitive.gray.200.darkValue}" + }, "border": { - "value": "{sds.color.primitive.gray.500.value}", - "darkValue": "{sds.color.primitive.gray.500.darkValue}" + "value": "{sds.color.primitive.gray.600.value}", + "darkValue": "{sds.color.primitive.gray.600.darkValue}" }, "border-disabled": { "value": "{sds.color.primitive.gray.300.value}", @@ -90,6 +110,10 @@ "value": "{sds.color.primitive.gray.900.value}", "darkValue": "{sds.color.primitive.gray.900.darkValue}" }, + "border-inverse": { + "value": "{sds.color.primitive.gray.50.value}", + "darkValue": "{sds.color.primitive.gray.50.darkValue}" + }, "border-pressed": { "value": "{sds.color.primitive.gray.900.value}", "darkValue": "{sds.color.primitive.gray.900.darkValue}" @@ -102,6 +126,10 @@ "value": "{sds.color.primitive.gray.200.value}", "darkValue": "{sds.color.primitive.gray.200.darkValue}" }, + "divider-inverse": { + "value": "{sds.color.primitive.gray.600.value}", + "darkValue": "{sds.color.primitive.gray.600.darkValue}" + }, "fill-disabled": { "value": "{sds.color.primitive.gray.200.value}", "darkValue": "{sds.color.primitive.gray.200.darkValue}" @@ -126,58 +154,42 @@ "value": "{sds.color.primitive.gray.900.value}", "darkValue": "{sds.color.primitive.gray.900.darkValue}" }, - "icon-disabled": { + "ornament-disabled": { "value": "{sds.color.primitive.gray.300.value}", "darkValue": "{sds.color.primitive.gray.300.darkValue}" }, - "icon-primary": { - "value": "{sds.color.primitive.gray.500.value}", - "darkValue": "{sds.color.primitive.gray.500.darkValue}" + "ornament-on-fill": { + "value": "{sds.color.primitive.gray.50.value}", + "darkValue": "{sds.color.primitive.gray.50.darkValue}" }, - "icon-primary-hover": { + "ornament-primary": { "value": "{sds.color.primitive.gray.900.value}", "darkValue": "{sds.color.primitive.gray.900.darkValue}" }, - "icon-primary-inverse": { + "ornament-primary-inverse": { "value": "{sds.color.primitive.gray.50.value}", "darkValue": "{sds.color.primitive.gray.50.darkValue}" }, - "icon-primary-inverse-hover": { - "value": "{sds.color.primitive.gray.400.value}", - "darkValue": "{sds.color.primitive.gray.400.darkValue}" - }, - "icon-primary-inverse-pressed": { - "value": "{sds.color.primitive.gray.400.value}", - "darkValue": "{sds.color.primitive.gray.400.darkValue}" + "ornament-secondary": { + "value": "{sds.color.primitive.gray.600.value}", + "darkValue": "{sds.color.primitive.gray.600.darkValue}" }, - "icon-primary-pressed": { + "ornament-secondary-hover": { "value": "{sds.color.primitive.gray.900.value}", "darkValue": "{sds.color.primitive.gray.900.darkValue}" }, - "icon-secondary": { + "ornament-secondary-pressed": { "value": "{sds.color.primitive.gray.900.value}", "darkValue": "{sds.color.primitive.gray.900.darkValue}" }, - "surface-background": { - "value": "{sds.color.primitive.gray.50.value}", - "darkValue": "{sds.color.primitive.gray.50.darkValue}" - }, - "surface-primary": { + "surface": { "value": "{sds.color.primitive.gray.50.value}", "darkValue": "{sds.color.primitive.gray.50.darkValue}" }, - "surface-primary-inverse": { + "surface-inverse": { "value": "{sds.color.primitive.gray.900.value}", "darkValue": "{sds.color.primitive.gray.900.darkValue}" }, - "surface-secondary": { - "value": "{sds.color.primitive.gray.100.value}", - "darkValue": "{sds.color.primitive.gray.100.darkValue}" - }, - "surface-tertiary": { - "value": "{sds.color.primitive.gray.200.value}", - "darkValue": "{sds.color.primitive.gray.200.darkValue}" - }, "text-disabled": { "value": "{sds.color.primitive.gray.300.value}", "darkValue": "{sds.color.primitive.gray.300.darkValue}" @@ -236,38 +248,38 @@ "value": "{sds.color.primitive.blue.500.value}", "darkValue": "{sds.color.primitive.blue.500.darkValue}" }, - "icon": { + "ornament": { "value": "{sds.color.primitive.blue.500.value}", "darkValue": "{sds.color.primitive.blue.500.darkValue}" }, - "icon-focus": { + "ornament-focus": { "value": "{sds.color.primitive.blue.500.value}", "darkValue": "{sds.color.primitive.blue.500.darkValue}" }, - "icon-hover": { + "ornament-hover": { "value": "{sds.color.primitive.blue.600.value}", "darkValue": "{sds.color.primitive.blue.600.darkValue}" }, - "icon-open": { + "ornament-open": { "value": "{sds.color.primitive.blue.500.value}", "darkValue": "{sds.color.primitive.blue.500.darkValue}" }, - "icon-pressed": { + "ornament-pressed": { "value": "{sds.color.primitive.blue.700.value}", "darkValue": "{sds.color.primitive.blue.700.darkValue}" }, - "icon-selected": { + "ornament-selected": { "value": "{sds.color.primitive.blue.500.value}", "darkValue": "{sds.color.primitive.blue.500.darkValue}" }, "surface-primary": { - "value": "{sds.color.primitive.blue.100.value}", - "darkValue": "{sds.color.primitive.blue.100.darkValue}" - }, - "surface-secondary": { "value": "{sds.color.primitive.blue.500.value}", "darkValue": "{sds.color.primitive.blue.500.darkValue}" }, + "surface-secondary": { + "value": "{sds.color.primitive.blue.100.value}", + "darkValue": "{sds.color.primitive.blue.100.darkValue}" + }, "text-action": { "value": "{sds.color.primitive.blue.500.value}", "darkValue": "{sds.color.primitive.blue.500.darkValue}" @@ -283,8 +295,8 @@ }, "beta": { "border": { - "value": "{sds.color.primitive.purple.500.value}", - "darkValue": "{sds.color.primitive.purple.500.darkValue}" + "value": "{sds.color.primitive.purple.600.value}", + "darkValue": "{sds.color.primitive.purple.600.darkValue}" }, "fill-hover": { "value": "{sds.color.primitive.purple.600.value}", @@ -307,13 +319,13 @@ "darkValue": "{sds.color.primitive.purple.600.darkValue}" }, "surface-primary": { - "value": "{sds.color.primitive.purple.100.value}", - "darkValue": "{sds.color.primitive.purple.100.darkValue}" - }, - "surface-secondary": { "value": "{sds.color.primitive.purple.500.value}", "darkValue": "{sds.color.primitive.purple.500.darkValue}" }, + "surface-secondary": { + "value": "{sds.color.primitive.purple.100.value}", + "darkValue": "{sds.color.primitive.purple.100.darkValue}" + }, "text": { "value": "{sds.color.primitive.purple.600.value}", "darkValue": "{sds.color.primitive.purple.600.darkValue}" @@ -321,8 +333,8 @@ }, "info": { "border": { - "value": "{sds.color.primitive.blue.500.value}", - "darkValue": "{sds.color.primitive.blue.500.darkValue}" + "value": "{sds.color.primitive.blue.600.value}", + "darkValue": "{sds.color.primitive.blue.600.darkValue}" }, "fill-hover": { "value": "{sds.color.primitive.blue.600.value}", @@ -345,13 +357,13 @@ "darkValue": "{sds.color.primitive.blue.600.darkValue}" }, "surface-primary": { - "value": "{sds.color.primitive.blue.100.value}", - "darkValue": "{sds.color.primitive.blue.100.darkValue}" - }, - "surface-secondary": { "value": "{sds.color.primitive.blue.500.value}", "darkValue": "{sds.color.primitive.blue.500.darkValue}" }, + "surface-secondary": { + "value": "{sds.color.primitive.blue.100.value}", + "darkValue": "{sds.color.primitive.blue.100.darkValue}" + }, "text": { "value": "{sds.color.primitive.blue.600.value}", "darkValue": "{sds.color.primitive.blue.600.darkValue}" @@ -359,8 +371,8 @@ }, "negative": { "border": { - "value": "{sds.color.primitive.red.500.value}", - "darkValue": "{sds.color.primitive.red.500.darkValue}" + "value": "{sds.color.primitive.red.600.value}", + "darkValue": "{sds.color.primitive.red.600.darkValue}" }, "fill-hover": { "value": "{sds.color.primitive.red.600.value}", @@ -383,13 +395,13 @@ "darkValue": "{sds.color.primitive.red.600.darkValue}" }, "surface-primary": { - "value": "{sds.color.primitive.red.100.value}", - "darkValue": "{sds.color.primitive.red.100.darkValue}" - }, - "surface-secondary": { "value": "{sds.color.primitive.red.500.value}", "darkValue": "{sds.color.primitive.red.500.darkValue}" }, + "surface-secondary": { + "value": "{sds.color.primitive.red.100.value}", + "darkValue": "{sds.color.primitive.red.100.darkValue}" + }, "text": { "value": "{sds.color.primitive.red.600.value}", "darkValue": "{sds.color.primitive.red.600.darkValue}" @@ -421,13 +433,13 @@ "darkValue": "{sds.color.primitive.gray.700.darkValue}" }, "surface-primary": { - "value": "{sds.color.primitive.gray.200.value}", - "darkValue": "{sds.color.primitive.gray.200.darkValue}" - }, - "surface-secondary": { "value": "{sds.color.primitive.gray.500.value}", "darkValue": "{sds.color.primitive.gray.500.darkValue}" }, + "surface-secondary": { + "value": "{sds.color.primitive.gray.200.value}", + "darkValue": "{sds.color.primitive.gray.200.darkValue}" + }, "text": { "value": "{sds.color.primitive.gray.700.value}", "darkValue": "{sds.color.primitive.gray.700.darkValue}" @@ -435,8 +447,8 @@ }, "notice": { "border": { - "value": "{sds.color.primitive.yellow.500.value}", - "darkValue": "{sds.color.primitive.yellow.500.darkValue}" + "value": "{sds.color.primitive.yellow.600.value}", + "darkValue": "{sds.color.primitive.yellow.600.darkValue}" }, "fill-hover": { "value": "{sds.color.primitive.yellow.600.value}", @@ -459,13 +471,13 @@ "darkValue": "{sds.color.primitive.yellow.600.darkValue}" }, "surface-primary": { - "value": "{sds.color.primitive.yellow.100.value}", - "darkValue": "{sds.color.primitive.yellow.100.darkValue}" - }, - "surface-secondary": { "value": "{sds.color.primitive.yellow.500.value}", "darkValue": "{sds.color.primitive.yellow.500.darkValue}" }, + "surface-secondary": { + "value": "{sds.color.primitive.yellow.100.value}", + "darkValue": "{sds.color.primitive.yellow.100.darkValue}" + }, "text": { "value": "{sds.color.primitive.yellow.600.value}", "darkValue": "{sds.color.primitive.yellow.600.darkValue}" @@ -473,8 +485,8 @@ }, "positive": { "border": { - "value": "{sds.color.primitive.green.500.value}", - "darkValue": "{sds.color.primitive.green.500.darkValue}" + "value": "{sds.color.primitive.green.600.value}", + "darkValue": "{sds.color.primitive.green.600.darkValue}" }, "fill-hover": { "value": "{sds.color.primitive.green.600.value}", @@ -497,13 +509,13 @@ "darkValue": "{sds.color.primitive.green.600.darkValue}" }, "surface-primary": { - "value": "{sds.color.primitive.green.100.value}", - "darkValue": "{sds.color.primitive.green.100.darkValue}" - }, - "surface-secondary": { "value": "{sds.color.primitive.green.500.value}", "darkValue": "{sds.color.primitive.green.500.darkValue}" }, + "surface-secondary": { + "value": "{sds.color.primitive.green.100.value}", + "darkValue": "{sds.color.primitive.green.100.darkValue}" + }, "text": { "value": "{sds.color.primitive.green.600.value}", "darkValue": "{sds.color.primitive.green.600.darkValue}" diff --git a/packages/components/src/common/styles-dictionary/json/tailwind.json b/packages/components/src/common/styles-dictionary/json/tailwind.json index 616609626..7b0d7bea7 100644 --- a/packages/components/src/common/styles-dictionary/json/tailwind.json +++ b/packages/components/src/common/styles-dictionary/json/tailwind.json @@ -279,14 +279,14 @@ }, "colors": { "dark": { - "sds-color-primitive-blue-100": "#002573", - "sds-color-primitive-blue-200": "#0048c5", - "sds-color-primitive-blue-300": "#2573f4", - "sds-color-primitive-blue-400": "#5b9aff", - "sds-color-primitive-blue-500": "#a2c9ff", - "sds-color-primitive-blue-600": "#cde3ff", - "sds-color-primitive-blue-700": "#e2eeff", - "sds-color-primitive-blue-800": "#f7faff", + "sds-color-primitive-blue-100": "#0f1d4a", + "sds-color-primitive-blue-200": "#0a216e", + "sds-color-primitive-blue-300": "#0647b8", + "sds-color-primitive-blue-400": "#2573f4", + "sds-color-primitive-blue-500": "#5b9aff", + "sds-color-primitive-blue-600": "#a2c9ff", + "sds-color-primitive-blue-700": "#cde3ff", + "sds-color-primitive-blue-800": "#e2eeff", "sds-color-primitive-gray-50": "#000000", "sds-color-primitive-gray-75": "#101010", "sds-color-primitive-gray-100": "#333333", @@ -298,144 +298,147 @@ "sds-color-primitive-gray-700": "#ededed", "sds-color-primitive-gray-800": "#fafafa", "sds-color-primitive-gray-900": "#ffffff", - "sds-color-primitive-green-100": "#053918", - "sds-color-primitive-green-200": "#12612e", - "sds-color-primitive-green-300": "#288b49", - "sds-color-primitive-green-400": "#43ae63", - "sds-color-primitive-green-500": "#85d898", - "sds-color-primitive-green-600": "#bcecc5", - "sds-color-primitive-green-700": "#daf4de", - "sds-color-primitive-green-800": "#f7fbf6", - "sds-color-primitive-purple-100": "#4b0190", - "sds-color-primitive-purple-200": "#6b2ebc", - "sds-color-primitive-purple-300": "#905de6", - "sds-color-primitive-purple-400": "#aa89ef", - "sds-color-primitive-purple-500": "#cebef8", - "sds-color-primitive-purple-600": "#e4dcfc", - "sds-color-primitive-purple-700": "#f0ebfe", - "sds-color-primitive-purple-800": "#fbf9ff", - "sds-color-primitive-red-100": "#630008", - "sds-color-primitive-red-200": "#A30000", - "sds-color-primitive-red-300": "#E52722", - "sds-color-primitive-red-400": "#FF695B", - "sds-color-primitive-red-500": "#FF9385", - "sds-color-primitive-red-600": "#FFBDB3", - "sds-color-primitive-red-700": "#FFD8D1", - "sds-color-primitive-red-800": "#FFF1EE", - "sds-color-primitive-yellow-100": "#552300", - "sds-color-primitive-yellow-200": "#834500", - "sds-color-primitive-yellow-300": "#985a00", - "sds-color-primitive-yellow-400": "#ac6c00", - "sds-color-primitive-yellow-500": "#cf8e00", - "sds-color-primitive-yellow-600": "#efad00", - "sds-color-primitive-yellow-700": "#ffdc9a", - "sds-color-primitive-yellow-800": "#fcf2e3", + "sds-color-primitive-green-100": "#082608", + "sds-color-primitive-green-200": "#063617", + "sds-color-primitive-green-300": "#10632e", + "sds-color-primitive-green-400": "#278b48", + "sds-color-primitive-green-500": "#4bae68", + "sds-color-primitive-green-600": "#85d898", + "sds-color-primitive-green-700": "#bcecc5", + "sds-color-primitive-green-800": "#daf4de", + "sds-color-primitive-purple-100": "#331252", + "sds-color-primitive-purple-200": "#410f70", + "sds-color-primitive-purple-300": "#6429b2", + "sds-color-primitive-purple-400": "#905de6", + "sds-color-primitive-purple-500": "#aa89ef", + "sds-color-primitive-purple-600": "#cebef8", + "sds-color-primitive-purple-700": "#e4dcfc", + "sds-color-primitive-purple-800": "#f0ebfe", + "sds-color-primitive-red-100": "#330603", + "sds-color-primitive-red-200": "#660a12", + "sds-color-primitive-red-300": "#9e1c1c", + "sds-color-primitive-red-400": "#c73028", + "sds-color-primitive-red-500": "#e05043", + "sds-color-primitive-red-600": "#ff988a", + "sds-color-primitive-red-700": "#ffbdb3", + "sds-color-primitive-red-800": "#ffd8d1", + "sds-color-primitive-yellow-100": "#361b07", + "sds-color-primitive-yellow-200": "#52270a", + "sds-color-primitive-yellow-300": "#965a0b", + "sds-color-primitive-yellow-400": "#bd8804", + "sds-color-primitive-yellow-500": "#d9a943", + "sds-color-primitive-yellow-600": "#e5bc63", + "sds-color-primitive-yellow-700": "#f5d789", + "sds-color-primitive-yellow-800": "#ffe6a8", "sds-color-primitive-overlay-100": "rgba(0, 0, 0, 0.08)", "sds-color-primitive-overlay-200": "rgba(0, 0, 0, 0.03)", - "sds-color-semantic-base-border": "#aaaaaa", + "sds-color-semantic-base-background-primary": "#000000", + "sds-color-semantic-base-background-primary-inverse": "#ffffff", + "sds-color-semantic-base-background-secondary": "#333333", + "sds-color-semantic-base-background-secondary-inverse": "#ededed", + "sds-color-semantic-base-background-tertiary": "#494949", + "sds-color-semantic-base-border": "#cdcdcd", "sds-color-semantic-base-border-disabled": "#696969", "sds-color-semantic-base-border-hover": "#ffffff", + "sds-color-semantic-base-border-inverse": "#000000", "sds-color-semantic-base-border-pressed": "#ffffff", "sds-color-semantic-base-border-table": "#696969", "sds-color-semantic-base-divider": "#494949", + "sds-color-semantic-base-divider-inverse": "#cdcdcd", "sds-color-semantic-base-fill-disabled": "#494949", "sds-color-semantic-base-fill-hover": "#69696947", "sds-color-semantic-base-fill-open": "#69696947", "sds-color-semantic-base-fill-pressed": "#69696947", "sds-color-semantic-base-fill-primary": "#000000", "sds-color-semantic-base-fill-selected": "#ffffff", - "sds-color-semantic-base-icon-disabled": "#696969", - "sds-color-semantic-base-icon-primary": "#aaaaaa", - "sds-color-semantic-base-icon-primary-hover": "#ffffff", - "sds-color-semantic-base-icon-primary-inverse": "#000000", - "sds-color-semantic-base-icon-primary-inverse-hover": "#9b9b9b", - "sds-color-semantic-base-icon-primary-inverse-pressed": "#9b9b9b", - "sds-color-semantic-base-icon-primary-pressed": "#ffffff", - "sds-color-semantic-base-icon-secondary": "#ffffff", - "sds-color-semantic-base-surface-background": "#000000", - "sds-color-semantic-base-surface-primary": "#000000", - "sds-color-semantic-base-surface-primary-inverse": "#ffffff", - "sds-color-semantic-base-surface-secondary": "#333333", - "sds-color-semantic-base-surface-tertiary": "#494949", + "sds-color-semantic-base-ornament-disabled": "#696969", + "sds-color-semantic-base-ornament-on-fill": "#000000", + "sds-color-semantic-base-ornament-primary": "#ffffff", + "sds-color-semantic-base-ornament-primary-inverse": "#000000", + "sds-color-semantic-base-ornament-secondary": "#cdcdcd", + "sds-color-semantic-base-ornament-secondary-hover": "#ffffff", + "sds-color-semantic-base-ornament-secondary-pressed": "#ffffff", + "sds-color-semantic-base-surface": "#000000", + "sds-color-semantic-base-surface-inverse": "#ffffff", "sds-color-semantic-base-text-disabled": "#696969", "sds-color-semantic-base-text-primary": "#ffffff", "sds-color-semantic-base-text-primary-inverse": "#000000", "sds-color-semantic-base-text-secondary": "#cdcdcd", "sds-color-semantic-base-text-secondary-inverse": "#696969", - "sds-color-semantic-accent-border": "#a2c9ff", - "sds-color-semantic-accent-border-focus": "#a2c9ff", - "sds-color-semantic-accent-border-hover": "#cde3ff", - "sds-color-semantic-accent-border-open": "#a2c9ff", - "sds-color-semantic-accent-border-pressed": "#e2eeff", - "sds-color-semantic-accent-border-selected": "#a2c9ff", - "sds-color-semantic-accent-fill-hover": "#cde3ff", - "sds-color-semantic-accent-fill-pressed": "#e2eeff", - "sds-color-semantic-accent-fill-primary": "#a2c9ff", - "sds-color-semantic-accent-icon": "#a2c9ff", - "sds-color-semantic-accent-icon-focus": "#a2c9ff", - "sds-color-semantic-accent-icon-hover": "#cde3ff", - "sds-color-semantic-accent-icon-open": "#a2c9ff", - "sds-color-semantic-accent-icon-pressed": "#e2eeff", - "sds-color-semantic-accent-icon-selected": "#a2c9ff", - "sds-color-semantic-accent-surface-primary": "#002573", - "sds-color-semantic-accent-surface-secondary": "#a2c9ff", - "sds-color-semantic-accent-text-action": "#a2c9ff", - "sds-color-semantic-accent-text-action-hover": "#cde3ff", - "sds-color-semantic-accent-text-action-pressed": "#e2eeff", + "sds-color-semantic-accent-border": "#5b9aff", + "sds-color-semantic-accent-border-focus": "#5b9aff", + "sds-color-semantic-accent-border-hover": "#a2c9ff", + "sds-color-semantic-accent-border-open": "#5b9aff", + "sds-color-semantic-accent-border-pressed": "#cde3ff", + "sds-color-semantic-accent-border-selected": "#5b9aff", + "sds-color-semantic-accent-fill-hover": "#a2c9ff", + "sds-color-semantic-accent-fill-pressed": "#cde3ff", + "sds-color-semantic-accent-fill-primary": "#5b9aff", + "sds-color-semantic-accent-ornament": "#5b9aff", + "sds-color-semantic-accent-ornament-focus": "#5b9aff", + "sds-color-semantic-accent-ornament-hover": "#a2c9ff", + "sds-color-semantic-accent-ornament-open": "#5b9aff", + "sds-color-semantic-accent-ornament-pressed": "#cde3ff", + "sds-color-semantic-accent-ornament-selected": "#5b9aff", + "sds-color-semantic-accent-surface-primary": "#5b9aff", + "sds-color-semantic-accent-surface-secondary": "#0f1d4a", + "sds-color-semantic-accent-text-action": "#5b9aff", + "sds-color-semantic-accent-text-action-hover": "#a2c9ff", + "sds-color-semantic-accent-text-action-pressed": "#cde3ff", "sds-color-semantic-beta-border": "#cebef8", - "sds-color-semantic-beta-fill-hover": "#e4dcfc", - "sds-color-semantic-beta-fill-pressed": "#f0ebfe", - "sds-color-semantic-beta-fill-primary": "#cebef8", - "sds-color-semantic-beta-fill-secondary": "#4b0190", - "sds-color-semantic-beta-ornament": "#e4dcfc", - "sds-color-semantic-beta-surface-primary": "#4b0190", - "sds-color-semantic-beta-surface-secondary": "#cebef8", - "sds-color-semantic-beta-text": "#e4dcfc", + "sds-color-semantic-beta-fill-hover": "#cebef8", + "sds-color-semantic-beta-fill-pressed": "#e4dcfc", + "sds-color-semantic-beta-fill-primary": "#aa89ef", + "sds-color-semantic-beta-fill-secondary": "#331252", + "sds-color-semantic-beta-ornament": "#cebef8", + "sds-color-semantic-beta-surface-primary": "#aa89ef", + "sds-color-semantic-beta-surface-secondary": "#331252", + "sds-color-semantic-beta-text": "#cebef8", "sds-color-semantic-info-border": "#a2c9ff", - "sds-color-semantic-info-fill-hover": "#cde3ff", - "sds-color-semantic-info-fill-pressed": "#e2eeff", - "sds-color-semantic-info-fill-primary": "#a2c9ff", - "sds-color-semantic-info-fill-secondary": "#002573", - "sds-color-semantic-info-ornament": "#cde3ff", - "sds-color-semantic-info-surface-primary": "#002573", - "sds-color-semantic-info-surface-secondary": "#a2c9ff", - "sds-color-semantic-info-text": "#cde3ff", - "sds-color-semantic-negative-border": "#FF9385", - "sds-color-semantic-negative-fill-hover": "#FFBDB3", - "sds-color-semantic-negative-fill-pressed": "#FFD8D1", - "sds-color-semantic-negative-fill-primary": "#FF9385", - "sds-color-semantic-negative-fill-secondary": "#630008", - "sds-color-semantic-negative-ornament": "#FFBDB3", - "sds-color-semantic-negative-surface-primary": "#630008", - "sds-color-semantic-negative-surface-secondary": "#FF9385", - "sds-color-semantic-negative-text": "#FFBDB3", + "sds-color-semantic-info-fill-hover": "#a2c9ff", + "sds-color-semantic-info-fill-pressed": "#cde3ff", + "sds-color-semantic-info-fill-primary": "#5b9aff", + "sds-color-semantic-info-fill-secondary": "#0f1d4a", + "sds-color-semantic-info-ornament": "#a2c9ff", + "sds-color-semantic-info-surface-primary": "#5b9aff", + "sds-color-semantic-info-surface-secondary": "#0f1d4a", + "sds-color-semantic-info-text": "#a2c9ff", + "sds-color-semantic-negative-border": "#ff988a", + "sds-color-semantic-negative-fill-hover": "#ff988a", + "sds-color-semantic-negative-fill-pressed": "#ffbdb3", + "sds-color-semantic-negative-fill-primary": "#e05043", + "sds-color-semantic-negative-fill-secondary": "#330603", + "sds-color-semantic-negative-ornament": "#ff988a", + "sds-color-semantic-negative-surface-primary": "#e05043", + "sds-color-semantic-negative-surface-secondary": "#330603", + "sds-color-semantic-negative-text": "#ff988a", "sds-color-semantic-neutral-border": "#aaaaaa", "sds-color-semantic-neutral-fill-hover": "#cdcdcd", "sds-color-semantic-neutral-fill-pressed": "#ededed", "sds-color-semantic-neutral-fill-primary": "#aaaaaa", "sds-color-semantic-neutral-fill-secondary": "#333333", "sds-color-semantic-neutral-ornament": "#ededed", - "sds-color-semantic-neutral-surface-primary": "#494949", - "sds-color-semantic-neutral-surface-secondary": "#aaaaaa", + "sds-color-semantic-neutral-surface-primary": "#aaaaaa", + "sds-color-semantic-neutral-surface-secondary": "#494949", "sds-color-semantic-neutral-text": "#ededed", - "sds-color-semantic-notice-border": "#cf8e00", - "sds-color-semantic-notice-fill-hover": "#efad00", - "sds-color-semantic-notice-fill-pressed": "#ffdc9a", - "sds-color-semantic-notice-fill-primary": "#cf8e00", - "sds-color-semantic-notice-fill-secondary": "#552300", - "sds-color-semantic-notice-ornament": "#efad00", - "sds-color-semantic-notice-surface-primary": "#552300", - "sds-color-semantic-notice-surface-secondary": "#cf8e00", - "sds-color-semantic-notice-text": "#efad00", + "sds-color-semantic-notice-border": "#e5bc63", + "sds-color-semantic-notice-fill-hover": "#e5bc63", + "sds-color-semantic-notice-fill-pressed": "#f5d789", + "sds-color-semantic-notice-fill-primary": "#d9a943", + "sds-color-semantic-notice-fill-secondary": "#361b07", + "sds-color-semantic-notice-ornament": "#e5bc63", + "sds-color-semantic-notice-surface-primary": "#d9a943", + "sds-color-semantic-notice-surface-secondary": "#361b07", + "sds-color-semantic-notice-text": "#e5bc63", "sds-color-semantic-positive-border": "#85d898", - "sds-color-semantic-positive-fill-hover": "#bcecc5", - "sds-color-semantic-positive-fill-pressed": "#daf4de", - "sds-color-semantic-positive-fill-primary": "#85d898", - "sds-color-semantic-positive-fill-secondary": "#053918", - "sds-color-semantic-positive-ornament": "#bcecc5", - "sds-color-semantic-positive-surface-primary": "#053918", - "sds-color-semantic-positive-surface-secondary": "#85d898", - "sds-color-semantic-positive-text": "#bcecc5" + "sds-color-semantic-positive-fill-hover": "#85d898", + "sds-color-semantic-positive-fill-pressed": "#bcecc5", + "sds-color-semantic-positive-fill-primary": "#4bae68", + "sds-color-semantic-positive-fill-secondary": "#082608", + "sds-color-semantic-positive-ornament": "#85d898", + "sds-color-semantic-positive-surface-primary": "#4bae68", + "sds-color-semantic-positive-surface-secondary": "#082608", + "sds-color-semantic-positive-text": "#85d898" }, "light": { "sds-color-primitive-blue-100": "#e2eeff", @@ -472,50 +475,53 @@ "sds-color-primitive-purple-500": "#8b54e2", "sds-color-primitive-purple-600": "#6526b5", "sds-color-primitive-purple-700": "#490092", - "sds-color-primitive-purple-800": "#1a004c", + "sds-color-primitive-purple-800": "#26004c", "sds-color-primitive-red-100": "#ffe8e6", "sds-color-primitive-red-200": "#ffd6d2", "sds-color-primitive-red-300": "#ffafa8", "sds-color-primitive-red-400": "#ff7e78", "sds-color-primitive-red-500": "#db2131", - "sds-color-primitive-red-600": "#980013", + "sds-color-primitive-red-600": "#980017", "sds-color-primitive-red-700": "#6f0008", "sds-color-primitive-red-800": "#340000", - "sds-color-primitive-yellow-100": "#ffefcf", + "sds-color-primitive-yellow-100": "#fff3db", "sds-color-primitive-yellow-200": "#ffdb97", "sds-color-primitive-yellow-300": "#ffca5c", "sds-color-primitive-yellow-400": "#fab700", "sds-color-primitive-yellow-500": "#da9900", - "sds-color-primitive-yellow-600": "#b77800", + "sds-color-primitive-yellow-600": "#b07300", "sds-color-primitive-yellow-700": "#7c3e00", "sds-color-primitive-yellow-800": "#541700", "sds-color-primitive-overlay-100": "rgba(0, 0, 0, 0.08)", "sds-color-primitive-overlay-200": "rgba(0, 0, 0, 0.03)", - "sds-color-semantic-base-border": "#969696", + "sds-color-semantic-base-background-primary": "#ffffff", + "sds-color-semantic-base-background-primary-inverse": "#000000", + "sds-color-semantic-base-background-secondary": "#f3f3f3", + "sds-color-semantic-base-background-secondary-inverse": "#3b3b3b", + "sds-color-semantic-base-background-tertiary": "#dfdfdf", + "sds-color-semantic-base-border": "#6c6c6c", "sds-color-semantic-base-border-disabled": "#c3c3c3", "sds-color-semantic-base-border-hover": "#000000", + "sds-color-semantic-base-border-inverse": "#ffffff", "sds-color-semantic-base-border-pressed": "#000000", "sds-color-semantic-base-border-table": "#c3c3c3", "sds-color-semantic-base-divider": "#dfdfdf", + "sds-color-semantic-base-divider-inverse": "#6c6c6c", "sds-color-semantic-base-fill-disabled": "#dfdfdf", "sds-color-semantic-base-fill-hover": "#c3c3c347", "sds-color-semantic-base-fill-open": "#c3c3c347", "sds-color-semantic-base-fill-pressed": "#c3c3c347", "sds-color-semantic-base-fill-primary": "#ffffff", "sds-color-semantic-base-fill-selected": "#000000", - "sds-color-semantic-base-icon-disabled": "#c3c3c3", - "sds-color-semantic-base-icon-primary": "#969696", - "sds-color-semantic-base-icon-primary-hover": "#000000", - "sds-color-semantic-base-icon-primary-inverse": "#ffffff", - "sds-color-semantic-base-icon-primary-inverse-hover": "#a5a5a5", - "sds-color-semantic-base-icon-primary-inverse-pressed": "#a5a5a5", - "sds-color-semantic-base-icon-primary-pressed": "#000000", - "sds-color-semantic-base-icon-secondary": "#000000", - "sds-color-semantic-base-surface-background": "#ffffff", - "sds-color-semantic-base-surface-primary": "#ffffff", - "sds-color-semantic-base-surface-primary-inverse": "#000000", - "sds-color-semantic-base-surface-secondary": "#f3f3f3", - "sds-color-semantic-base-surface-tertiary": "#dfdfdf", + "sds-color-semantic-base-ornament-disabled": "#c3c3c3", + "sds-color-semantic-base-ornament-on-fill": "#ffffff", + "sds-color-semantic-base-ornament-primary": "#000000", + "sds-color-semantic-base-ornament-primary-inverse": "#ffffff", + "sds-color-semantic-base-ornament-secondary": "#6c6c6c", + "sds-color-semantic-base-ornament-secondary-hover": "#000000", + "sds-color-semantic-base-ornament-secondary-pressed": "#000000", + "sds-color-semantic-base-surface": "#ffffff", + "sds-color-semantic-base-surface-inverse": "#000000", "sds-color-semantic-base-text-disabled": "#c3c3c3", "sds-color-semantic-base-text-primary": "#000000", "sds-color-semantic-base-text-primary-inverse": "#ffffff", @@ -530,70 +536,70 @@ "sds-color-semantic-accent-fill-hover": "#0041b9", "sds-color-semantic-accent-fill-pressed": "#002d90", "sds-color-semantic-accent-fill-primary": "#1a6cef", - "sds-color-semantic-accent-icon": "#1a6cef", - "sds-color-semantic-accent-icon-focus": "#1a6cef", - "sds-color-semantic-accent-icon-hover": "#0041b9", - "sds-color-semantic-accent-icon-open": "#1a6cef", - "sds-color-semantic-accent-icon-pressed": "#002d90", - "sds-color-semantic-accent-icon-selected": "#1a6cef", - "sds-color-semantic-accent-surface-primary": "#e2eeff", - "sds-color-semantic-accent-surface-secondary": "#1a6cef", + "sds-color-semantic-accent-ornament": "#1a6cef", + "sds-color-semantic-accent-ornament-focus": "#1a6cef", + "sds-color-semantic-accent-ornament-hover": "#0041b9", + "sds-color-semantic-accent-ornament-open": "#1a6cef", + "sds-color-semantic-accent-ornament-pressed": "#002d90", + "sds-color-semantic-accent-ornament-selected": "#1a6cef", + "sds-color-semantic-accent-surface-primary": "#1a6cef", + "sds-color-semantic-accent-surface-secondary": "#e2eeff", "sds-color-semantic-accent-text-action": "#1a6cef", "sds-color-semantic-accent-text-action-hover": "#0041b9", "sds-color-semantic-accent-text-action-pressed": "#002d90", - "sds-color-semantic-beta-border": "#8b54e2", + "sds-color-semantic-beta-border": "#6526b5", "sds-color-semantic-beta-fill-hover": "#6526b5", "sds-color-semantic-beta-fill-pressed": "#490092", "sds-color-semantic-beta-fill-primary": "#8b54e2", "sds-color-semantic-beta-fill-secondary": "#efeafe", "sds-color-semantic-beta-ornament": "#6526b5", - "sds-color-semantic-beta-surface-primary": "#efeafe", - "sds-color-semantic-beta-surface-secondary": "#8b54e2", + "sds-color-semantic-beta-surface-primary": "#8b54e2", + "sds-color-semantic-beta-surface-secondary": "#efeafe", "sds-color-semantic-beta-text": "#6526b5", - "sds-color-semantic-info-border": "#1a6cef", + "sds-color-semantic-info-border": "#0041b9", "sds-color-semantic-info-fill-hover": "#0041b9", "sds-color-semantic-info-fill-pressed": "#002d90", "sds-color-semantic-info-fill-primary": "#1a6cef", "sds-color-semantic-info-fill-secondary": "#e2eeff", "sds-color-semantic-info-ornament": "#0041b9", - "sds-color-semantic-info-surface-primary": "#e2eeff", - "sds-color-semantic-info-surface-secondary": "#1a6cef", + "sds-color-semantic-info-surface-primary": "#1a6cef", + "sds-color-semantic-info-surface-secondary": "#e2eeff", "sds-color-semantic-info-text": "#0041b9", - "sds-color-semantic-negative-border": "#db2131", - "sds-color-semantic-negative-fill-hover": "#980013", + "sds-color-semantic-negative-border": "#980017", + "sds-color-semantic-negative-fill-hover": "#980017", "sds-color-semantic-negative-fill-pressed": "#6f0008", "sds-color-semantic-negative-fill-primary": "#db2131", "sds-color-semantic-negative-fill-secondary": "#ffe8e6", - "sds-color-semantic-negative-ornament": "#980013", - "sds-color-semantic-negative-surface-primary": "#ffe8e6", - "sds-color-semantic-negative-surface-secondary": "#db2131", - "sds-color-semantic-negative-text": "#980013", + "sds-color-semantic-negative-ornament": "#980017", + "sds-color-semantic-negative-surface-primary": "#db2131", + "sds-color-semantic-negative-surface-secondary": "#ffe8e6", + "sds-color-semantic-negative-text": "#980017", "sds-color-semantic-neutral-border": "#969696", "sds-color-semantic-neutral-fill-hover": "#6c6c6c", "sds-color-semantic-neutral-fill-pressed": "#3b3b3b", "sds-color-semantic-neutral-fill-primary": "#969696", "sds-color-semantic-neutral-fill-secondary": "#f3f3f3", "sds-color-semantic-neutral-ornament": "#3b3b3b", - "sds-color-semantic-neutral-surface-primary": "#dfdfdf", - "sds-color-semantic-neutral-surface-secondary": "#969696", + "sds-color-semantic-neutral-surface-primary": "#969696", + "sds-color-semantic-neutral-surface-secondary": "#dfdfdf", "sds-color-semantic-neutral-text": "#3b3b3b", - "sds-color-semantic-notice-border": "#da9900", - "sds-color-semantic-notice-fill-hover": "#b77800", + "sds-color-semantic-notice-border": "#b07300", + "sds-color-semantic-notice-fill-hover": "#b07300", "sds-color-semantic-notice-fill-pressed": "#7c3e00", "sds-color-semantic-notice-fill-primary": "#da9900", - "sds-color-semantic-notice-fill-secondary": "#ffefcf", - "sds-color-semantic-notice-ornament": "#b77800", - "sds-color-semantic-notice-surface-primary": "#ffefcf", - "sds-color-semantic-notice-surface-secondary": "#da9900", - "sds-color-semantic-notice-text": "#b77800", - "sds-color-semantic-positive-border": "#238444", + "sds-color-semantic-notice-fill-secondary": "#fff3db", + "sds-color-semantic-notice-ornament": "#b07300", + "sds-color-semantic-notice-surface-primary": "#da9900", + "sds-color-semantic-notice-surface-secondary": "#fff3db", + "sds-color-semantic-notice-text": "#b07300", + "sds-color-semantic-positive-border": "#105b2b", "sds-color-semantic-positive-fill-hover": "#105b2b", "sds-color-semantic-positive-fill-pressed": "#07431d", "sds-color-semantic-positive-fill-primary": "#238444", "sds-color-semantic-positive-fill-secondary": "#daf4de", "sds-color-semantic-positive-ornament": "#105b2b", - "sds-color-semantic-positive-surface-primary": "#daf4de", - "sds-color-semantic-positive-surface-secondary": "#238444", + "sds-color-semantic-positive-surface-primary": "#238444", + "sds-color-semantic-positive-surface-secondary": "#daf4de", "sds-color-semantic-positive-text": "#105b2b" } }, diff --git a/packages/components/src/common/styles-dictionary/scss/_variables.scss b/packages/components/src/common/styles-dictionary/scss/_variables.scss index 6f35e2162..9e43cc9ec 100644 --- a/packages/components/src/common/styles-dictionary/scss/_variables.scss +++ b/packages/components/src/common/styles-dictionary/scss/_variables.scss @@ -16,34 +16,38 @@ $sds-border-base-disabled: 1px solid #c3c3c3; $sds-border-base-disabled-dark: 1px solid #696969; $sds-border-base-divider: 1px solid #dfdfdf; $sds-border-base-divider-dark: 1px solid #494949; +$sds-border-base-divider-inverse: 1px solid #6c6c6c; +$sds-border-base-divider-inverse-dark: 1px solid #cdcdcd; $sds-border-base-hover: 1px dashed #000000; $sds-border-base-hover-dark: 1px dashed #ffffff; +$sds-border-base-inverse: 1px dashed #ffffff; +$sds-border-base-inverse-dark: 1px dashed #000000; $sds-border-base-pressed: 1px dashed #000000; $sds-border-base-pressed-dark: 1px dashed #ffffff; $sds-border-base-table: 1px solid #c3c3c3; $sds-border-base-table-dark: 1px solid #696969; $sds-border-beta-default: 1px solid #6526b5; -$sds-border-beta-default-dark: 1px solid #e4dcfc; +$sds-border-beta-default-dark: 1px solid #cebef8; $sds-border-beta-extra-thick: 4px solid #6526b5; -$sds-border-beta-extra-thick-dark: 4px solid #e4dcfc; +$sds-border-beta-extra-thick-dark: 4px solid #cebef8; $sds-border-beta-thick: 2px solid #6526b5; -$sds-border-beta-thick-dark: 2px solid #e4dcfc; +$sds-border-beta-thick-dark: 2px solid #cebef8; $sds-border-info-default: 1px solid #0041b9; -$sds-border-info-default-dark: 1px solid #cde3ff; +$sds-border-info-default-dark: 1px solid #a2c9ff; $sds-border-info-extra-thick: 4px solid #0041b9; -$sds-border-info-extra-thick-dark: 4px solid #cde3ff; +$sds-border-info-extra-thick-dark: 4px solid #a2c9ff; $sds-border-info-thick: 2px solid #0041b9; -$sds-border-info-thick-dark: 2px solid #cde3ff; +$sds-border-info-thick-dark: 2px solid #a2c9ff; $sds-border-link-dashed: 1px dashed; $sds-border-link-dashed-dark: 1px dashed; $sds-border-link-solid: 1px solid; $sds-border-link-solid-dark: 1px solid; -$sds-border-negative-default: 1px solid #980013; -$sds-border-negative-default-dark: 1px solid #FFBDB3; -$sds-border-negative-extra-thick: 4px solid #980013; -$sds-border-negative-extra-thick-dark: 4px solid #FFBDB3; -$sds-border-negative-thick: 2px solid #980013; -$sds-border-negative-thick-dark: 2px solid #FFBDB3; +$sds-border-negative-default: 1px solid #980017; +$sds-border-negative-default-dark: 1px solid #ff988a; +$sds-border-negative-extra-thick: 4px solid #980017; +$sds-border-negative-extra-thick-dark: 4px solid #ff988a; +$sds-border-negative-thick: 2px solid #980017; +$sds-border-negative-thick-dark: 2px solid #ff988a; $sds-border-neutral-default: 1px solid #969696; $sds-border-neutral-default-dark: 1px solid #aaaaaa; $sds-border-neutral-extra-thick: 4px solid #969696; @@ -52,37 +56,37 @@ $sds-border-neutral-thick: 2px solid #969696; $sds-border-neutral-thick-dark: 2px solid #aaaaaa; $sds-border-none: none; $sds-border-none-dark: none; -$sds-border-notice-default: 1px solid #b77800; -$sds-border-notice-default-dark: 1px solid #efad00; -$sds-border-notice-extra-thick: 4px solid #b77800; -$sds-border-notice-extra-thick-dark: 4px solid #efad00; -$sds-border-notice-thick: 2px solid #b77800; -$sds-border-notice-thick-dark: 2px solid #efad00; +$sds-border-notice-default: 1px solid #b07300; +$sds-border-notice-default-dark: 1px solid #e5bc63; +$sds-border-notice-extra-thick: 4px solid #b07300; +$sds-border-notice-extra-thick-dark: 4px solid #e5bc63; +$sds-border-notice-thick: 2px solid #b07300; +$sds-border-notice-thick-dark: 2px solid #e5bc63; $sds-border-positive-default: 1px solid #105b2b; -$sds-border-positive-default-dark: 1px solid #bcecc5; +$sds-border-positive-default-dark: 1px solid #85d898; $sds-border-positive-extra-thick: 4px solid #105b2b; -$sds-border-positive-extra-thick-dark: 4px solid #bcecc5; +$sds-border-positive-extra-thick-dark: 4px solid #85d898; $sds-border-positive-thick: 2px solid #105b2b; -$sds-border-positive-thick-dark: 2px solid #bcecc5; +$sds-border-positive-thick-dark: 2px solid #85d898; $sds-breakpoint-sm: 0px; $sds-breakpoint-md: 512px; $sds-breakpoint-lg: 1024px; $sds-color-primitive-blue-100: #e2eeff; -$sds-color-primitive-blue-100-dark: #002573; +$sds-color-primitive-blue-100-dark: #0f1d4a; $sds-color-primitive-blue-200: #cce1ff; -$sds-color-primitive-blue-200-dark: #0048c5; +$sds-color-primitive-blue-200-dark: #0a216e; $sds-color-primitive-blue-300: #9dc6ff; -$sds-color-primitive-blue-300-dark: #2573f4; +$sds-color-primitive-blue-300-dark: #0647b8; $sds-color-primitive-blue-400: #6ca6ff; -$sds-color-primitive-blue-400-dark: #5b9aff; +$sds-color-primitive-blue-400-dark: #2573f4; $sds-color-primitive-blue-500: #1a6cef; -$sds-color-primitive-blue-500-dark: #a2c9ff; +$sds-color-primitive-blue-500-dark: #5b9aff; $sds-color-primitive-blue-600: #0041b9; -$sds-color-primitive-blue-600-dark: #cde3ff; +$sds-color-primitive-blue-600-dark: #a2c9ff; $sds-color-primitive-blue-700: #002d90; -$sds-color-primitive-blue-700-dark: #e2eeff; +$sds-color-primitive-blue-700-dark: #cde3ff; $sds-color-primitive-blue-800: #00114a; -$sds-color-primitive-blue-800-dark: #f7faff; +$sds-color-primitive-blue-800-dark: #e2eeff; $sds-color-primitive-gray-50: #ffffff; $sds-color-primitive-gray-50-dark: #000000; $sds-color-primitive-gray-75: #fafafa; @@ -106,85 +110,99 @@ $sds-color-primitive-gray-800-dark: #fafafa; $sds-color-primitive-gray-900: #000000; $sds-color-primitive-gray-900-dark: #ffffff; $sds-color-primitive-green-100: #daf4de; -$sds-color-primitive-green-100-dark: #053918; +$sds-color-primitive-green-100-dark: #082608; $sds-color-primitive-green-200: #b9ecc3; -$sds-color-primitive-green-200-dark: #12612e; +$sds-color-primitive-green-200-dark: #063617; $sds-color-primitive-green-300: #7fd693; -$sds-color-primitive-green-300-dark: #288b49; +$sds-color-primitive-green-300-dark: #10632e; $sds-color-primitive-green-400: #50b96d; -$sds-color-primitive-green-400-dark: #43ae63; +$sds-color-primitive-green-400-dark: #278b48; $sds-color-primitive-green-500: #238444; -$sds-color-primitive-green-500-dark: #85d898; +$sds-color-primitive-green-500-dark: #4bae68; $sds-color-primitive-green-600: #105b2b; -$sds-color-primitive-green-600-dark: #bcecc5; +$sds-color-primitive-green-600-dark: #85d898; $sds-color-primitive-green-700: #07431d; -$sds-color-primitive-green-700-dark: #daf4de; +$sds-color-primitive-green-700-dark: #bcecc5; $sds-color-primitive-green-800: #001f00; -$sds-color-primitive-green-800-dark: #f7fbf6; +$sds-color-primitive-green-800-dark: #daf4de; $sds-color-primitive-purple-100: #efeafe; -$sds-color-primitive-purple-100-dark: #4b0190; +$sds-color-primitive-purple-100-dark: #331252; $sds-color-primitive-purple-200: #e4dbfc; -$sds-color-primitive-purple-200-dark: #6b2ebc; +$sds-color-primitive-purple-200-dark: #410f70; $sds-color-primitive-purple-300: #cbbaf8; -$sds-color-primitive-purple-300-dark: #905de6; +$sds-color-primitive-purple-300-dark: #6429b2; $sds-color-primitive-purple-400: #b296f2; -$sds-color-primitive-purple-400-dark: #aa89ef; +$sds-color-primitive-purple-400-dark: #905de6; $sds-color-primitive-purple-500: #8b54e2; -$sds-color-primitive-purple-500-dark: #cebef8; +$sds-color-primitive-purple-500-dark: #aa89ef; $sds-color-primitive-purple-600: #6526b5; -$sds-color-primitive-purple-600-dark: #e4dcfc; +$sds-color-primitive-purple-600-dark: #cebef8; $sds-color-primitive-purple-700: #490092; -$sds-color-primitive-purple-700-dark: #f0ebfe; -$sds-color-primitive-purple-800: #1a004c; -$sds-color-primitive-purple-800-dark: #fbf9ff; +$sds-color-primitive-purple-700-dark: #e4dcfc; +$sds-color-primitive-purple-800: #26004c; +$sds-color-primitive-purple-800-dark: #f0ebfe; $sds-color-primitive-red-100: #ffe8e6; -$sds-color-primitive-red-100-dark: #630008; +$sds-color-primitive-red-100-dark: #330603; $sds-color-primitive-red-200: #ffd6d2; -$sds-color-primitive-red-200-dark: #A30000; +$sds-color-primitive-red-200-dark: #660a12; $sds-color-primitive-red-300: #ffafa8; -$sds-color-primitive-red-300-dark: #E52722; +$sds-color-primitive-red-300-dark: #9e1c1c; $sds-color-primitive-red-400: #ff7e78; -$sds-color-primitive-red-400-dark: #FF695B; +$sds-color-primitive-red-400-dark: #c73028; $sds-color-primitive-red-500: #db2131; -$sds-color-primitive-red-500-dark: #FF9385; -$sds-color-primitive-red-600: #980013; -$sds-color-primitive-red-600-dark: #FFBDB3; +$sds-color-primitive-red-500-dark: #e05043; +$sds-color-primitive-red-600: #980017; +$sds-color-primitive-red-600-dark: #ff988a; $sds-color-primitive-red-700: #6f0008; -$sds-color-primitive-red-700-dark: #FFD8D1; +$sds-color-primitive-red-700-dark: #ffbdb3; $sds-color-primitive-red-800: #340000; -$sds-color-primitive-red-800-dark: #FFF1EE; -$sds-color-primitive-yellow-100: #ffefcf; -$sds-color-primitive-yellow-100-dark: #552300; +$sds-color-primitive-red-800-dark: #ffd8d1; +$sds-color-primitive-yellow-100: #fff3db; +$sds-color-primitive-yellow-100-dark: #361b07; $sds-color-primitive-yellow-200: #ffdb97; -$sds-color-primitive-yellow-200-dark: #834500; +$sds-color-primitive-yellow-200-dark: #52270a; $sds-color-primitive-yellow-300: #ffca5c; -$sds-color-primitive-yellow-300-dark: #985a00; +$sds-color-primitive-yellow-300-dark: #965a0b; $sds-color-primitive-yellow-400: #fab700; -$sds-color-primitive-yellow-400-dark: #ac6c00; +$sds-color-primitive-yellow-400-dark: #bd8804; $sds-color-primitive-yellow-500: #da9900; -$sds-color-primitive-yellow-500-dark: #cf8e00; -$sds-color-primitive-yellow-600: #b77800; -$sds-color-primitive-yellow-600-dark: #efad00; +$sds-color-primitive-yellow-500-dark: #d9a943; +$sds-color-primitive-yellow-600: #b07300; +$sds-color-primitive-yellow-600-dark: #e5bc63; $sds-color-primitive-yellow-700: #7c3e00; -$sds-color-primitive-yellow-700-dark: #ffdc9a; +$sds-color-primitive-yellow-700-dark: #f5d789; $sds-color-primitive-yellow-800: #541700; -$sds-color-primitive-yellow-800-dark: #fcf2e3; +$sds-color-primitive-yellow-800-dark: #ffe6a8; $sds-color-primitive-overlay-100: rgba(0, 0, 0, 0.08); $sds-color-primitive-overlay-100-dark: rgba(0, 0, 0, 0.08); $sds-color-primitive-overlay-200: rgba(0, 0, 0, 0.03); $sds-color-primitive-overlay-200-dark: rgba(0, 0, 0, 0.03); -$sds-color-semantic-base-border: #969696; -$sds-color-semantic-base-border-dark: #aaaaaa; +$sds-color-semantic-base-background-primary: #ffffff; +$sds-color-semantic-base-background-primary-dark: #000000; +$sds-color-semantic-base-background-primary-inverse: #000000; +$sds-color-semantic-base-background-primary-inverse-dark: #ffffff; +$sds-color-semantic-base-background-secondary: #f3f3f3; +$sds-color-semantic-base-background-secondary-dark: #333333; +$sds-color-semantic-base-background-secondary-inverse: #3b3b3b; +$sds-color-semantic-base-background-secondary-inverse-dark: #ededed; +$sds-color-semantic-base-background-tertiary: #dfdfdf; +$sds-color-semantic-base-background-tertiary-dark: #494949; +$sds-color-semantic-base-border: #6c6c6c; +$sds-color-semantic-base-border-dark: #cdcdcd; $sds-color-semantic-base-border-disabled: #c3c3c3; $sds-color-semantic-base-border-disabled-dark: #696969; $sds-color-semantic-base-border-hover: #000000; $sds-color-semantic-base-border-hover-dark: #ffffff; +$sds-color-semantic-base-border-inverse: #ffffff; +$sds-color-semantic-base-border-inverse-dark: #000000; $sds-color-semantic-base-border-pressed: #000000; $sds-color-semantic-base-border-pressed-dark: #ffffff; $sds-color-semantic-base-border-table: #c3c3c3; $sds-color-semantic-base-border-table-dark: #696969; $sds-color-semantic-base-divider: #dfdfdf; $sds-color-semantic-base-divider-dark: #494949; +$sds-color-semantic-base-divider-inverse: #6c6c6c; +$sds-color-semantic-base-divider-inverse-dark: #cdcdcd; $sds-color-semantic-base-fill-disabled: #dfdfdf; $sds-color-semantic-base-fill-disabled-dark: #494949; $sds-color-semantic-base-fill-hover: #c3c3c347; @@ -197,32 +215,24 @@ $sds-color-semantic-base-fill-primary: #ffffff; $sds-color-semantic-base-fill-primary-dark: #000000; $sds-color-semantic-base-fill-selected: #000000; $sds-color-semantic-base-fill-selected-dark: #ffffff; -$sds-color-semantic-base-icon-disabled: #c3c3c3; -$sds-color-semantic-base-icon-disabled-dark: #696969; -$sds-color-semantic-base-icon-primary: #969696; -$sds-color-semantic-base-icon-primary-dark: #aaaaaa; -$sds-color-semantic-base-icon-primary-hover: #000000; -$sds-color-semantic-base-icon-primary-hover-dark: #ffffff; -$sds-color-semantic-base-icon-primary-inverse: #ffffff; -$sds-color-semantic-base-icon-primary-inverse-dark: #000000; -$sds-color-semantic-base-icon-primary-inverse-hover: #a5a5a5; -$sds-color-semantic-base-icon-primary-inverse-hover-dark: #9b9b9b; -$sds-color-semantic-base-icon-primary-inverse-pressed: #a5a5a5; -$sds-color-semantic-base-icon-primary-inverse-pressed-dark: #9b9b9b; -$sds-color-semantic-base-icon-primary-pressed: #000000; -$sds-color-semantic-base-icon-primary-pressed-dark: #ffffff; -$sds-color-semantic-base-icon-secondary: #000000; -$sds-color-semantic-base-icon-secondary-dark: #ffffff; -$sds-color-semantic-base-surface-background: #ffffff; -$sds-color-semantic-base-surface-background-dark: #000000; -$sds-color-semantic-base-surface-primary: #ffffff; -$sds-color-semantic-base-surface-primary-dark: #000000; -$sds-color-semantic-base-surface-primary-inverse: #000000; -$sds-color-semantic-base-surface-primary-inverse-dark: #ffffff; -$sds-color-semantic-base-surface-secondary: #f3f3f3; -$sds-color-semantic-base-surface-secondary-dark: #333333; -$sds-color-semantic-base-surface-tertiary: #dfdfdf; -$sds-color-semantic-base-surface-tertiary-dark: #494949; +$sds-color-semantic-base-ornament-disabled: #c3c3c3; +$sds-color-semantic-base-ornament-disabled-dark: #696969; +$sds-color-semantic-base-ornament-on-fill: #ffffff; +$sds-color-semantic-base-ornament-on-fill-dark: #000000; +$sds-color-semantic-base-ornament-primary: #000000; +$sds-color-semantic-base-ornament-primary-dark: #ffffff; +$sds-color-semantic-base-ornament-primary-inverse: #ffffff; +$sds-color-semantic-base-ornament-primary-inverse-dark: #000000; +$sds-color-semantic-base-ornament-secondary: #6c6c6c; +$sds-color-semantic-base-ornament-secondary-dark: #cdcdcd; +$sds-color-semantic-base-ornament-secondary-hover: #000000; +$sds-color-semantic-base-ornament-secondary-hover-dark: #ffffff; +$sds-color-semantic-base-ornament-secondary-pressed: #000000; +$sds-color-semantic-base-ornament-secondary-pressed-dark: #ffffff; +$sds-color-semantic-base-surface: #ffffff; +$sds-color-semantic-base-surface-dark: #000000; +$sds-color-semantic-base-surface-inverse: #000000; +$sds-color-semantic-base-surface-inverse-dark: #ffffff; $sds-color-semantic-base-text-disabled: #c3c3c3; $sds-color-semantic-base-text-disabled-dark: #696969; $sds-color-semantic-base-text-primary: #000000; @@ -234,99 +244,99 @@ $sds-color-semantic-base-text-secondary-dark: #cdcdcd; $sds-color-semantic-base-text-secondary-inverse: #c3c3c3; $sds-color-semantic-base-text-secondary-inverse-dark: #696969; $sds-color-semantic-accent-border: #1a6cef; -$sds-color-semantic-accent-border-dark: #a2c9ff; +$sds-color-semantic-accent-border-dark: #5b9aff; $sds-color-semantic-accent-border-focus: #1a6cef; -$sds-color-semantic-accent-border-focus-dark: #a2c9ff; +$sds-color-semantic-accent-border-focus-dark: #5b9aff; $sds-color-semantic-accent-border-hover: #0041b9; -$sds-color-semantic-accent-border-hover-dark: #cde3ff; +$sds-color-semantic-accent-border-hover-dark: #a2c9ff; $sds-color-semantic-accent-border-open: #1a6cef; -$sds-color-semantic-accent-border-open-dark: #a2c9ff; +$sds-color-semantic-accent-border-open-dark: #5b9aff; $sds-color-semantic-accent-border-pressed: #002d90; -$sds-color-semantic-accent-border-pressed-dark: #e2eeff; +$sds-color-semantic-accent-border-pressed-dark: #cde3ff; $sds-color-semantic-accent-border-selected: #1a6cef; -$sds-color-semantic-accent-border-selected-dark: #a2c9ff; +$sds-color-semantic-accent-border-selected-dark: #5b9aff; $sds-color-semantic-accent-fill-hover: #0041b9; -$sds-color-semantic-accent-fill-hover-dark: #cde3ff; +$sds-color-semantic-accent-fill-hover-dark: #a2c9ff; $sds-color-semantic-accent-fill-pressed: #002d90; -$sds-color-semantic-accent-fill-pressed-dark: #e2eeff; +$sds-color-semantic-accent-fill-pressed-dark: #cde3ff; $sds-color-semantic-accent-fill-primary: #1a6cef; -$sds-color-semantic-accent-fill-primary-dark: #a2c9ff; -$sds-color-semantic-accent-icon: #1a6cef; -$sds-color-semantic-accent-icon-dark: #a2c9ff; -$sds-color-semantic-accent-icon-focus: #1a6cef; -$sds-color-semantic-accent-icon-focus-dark: #a2c9ff; -$sds-color-semantic-accent-icon-hover: #0041b9; -$sds-color-semantic-accent-icon-hover-dark: #cde3ff; -$sds-color-semantic-accent-icon-open: #1a6cef; -$sds-color-semantic-accent-icon-open-dark: #a2c9ff; -$sds-color-semantic-accent-icon-pressed: #002d90; -$sds-color-semantic-accent-icon-pressed-dark: #e2eeff; -$sds-color-semantic-accent-icon-selected: #1a6cef; -$sds-color-semantic-accent-icon-selected-dark: #a2c9ff; -$sds-color-semantic-accent-surface-primary: #e2eeff; -$sds-color-semantic-accent-surface-primary-dark: #002573; -$sds-color-semantic-accent-surface-secondary: #1a6cef; -$sds-color-semantic-accent-surface-secondary-dark: #a2c9ff; +$sds-color-semantic-accent-fill-primary-dark: #5b9aff; +$sds-color-semantic-accent-ornament: #1a6cef; +$sds-color-semantic-accent-ornament-dark: #5b9aff; +$sds-color-semantic-accent-ornament-focus: #1a6cef; +$sds-color-semantic-accent-ornament-focus-dark: #5b9aff; +$sds-color-semantic-accent-ornament-hover: #0041b9; +$sds-color-semantic-accent-ornament-hover-dark: #a2c9ff; +$sds-color-semantic-accent-ornament-open: #1a6cef; +$sds-color-semantic-accent-ornament-open-dark: #5b9aff; +$sds-color-semantic-accent-ornament-pressed: #002d90; +$sds-color-semantic-accent-ornament-pressed-dark: #cde3ff; +$sds-color-semantic-accent-ornament-selected: #1a6cef; +$sds-color-semantic-accent-ornament-selected-dark: #5b9aff; +$sds-color-semantic-accent-surface-primary: #1a6cef; +$sds-color-semantic-accent-surface-primary-dark: #5b9aff; +$sds-color-semantic-accent-surface-secondary: #e2eeff; +$sds-color-semantic-accent-surface-secondary-dark: #0f1d4a; $sds-color-semantic-accent-text-action: #1a6cef; -$sds-color-semantic-accent-text-action-dark: #a2c9ff; +$sds-color-semantic-accent-text-action-dark: #5b9aff; $sds-color-semantic-accent-text-action-hover: #0041b9; -$sds-color-semantic-accent-text-action-hover-dark: #cde3ff; +$sds-color-semantic-accent-text-action-hover-dark: #a2c9ff; $sds-color-semantic-accent-text-action-pressed: #002d90; -$sds-color-semantic-accent-text-action-pressed-dark: #e2eeff; -$sds-color-semantic-beta-border: #8b54e2; +$sds-color-semantic-accent-text-action-pressed-dark: #cde3ff; +$sds-color-semantic-beta-border: #6526b5; $sds-color-semantic-beta-border-dark: #cebef8; $sds-color-semantic-beta-fill-hover: #6526b5; -$sds-color-semantic-beta-fill-hover-dark: #e4dcfc; +$sds-color-semantic-beta-fill-hover-dark: #cebef8; $sds-color-semantic-beta-fill-pressed: #490092; -$sds-color-semantic-beta-fill-pressed-dark: #f0ebfe; +$sds-color-semantic-beta-fill-pressed-dark: #e4dcfc; $sds-color-semantic-beta-fill-primary: #8b54e2; -$sds-color-semantic-beta-fill-primary-dark: #cebef8; +$sds-color-semantic-beta-fill-primary-dark: #aa89ef; $sds-color-semantic-beta-fill-secondary: #efeafe; -$sds-color-semantic-beta-fill-secondary-dark: #4b0190; +$sds-color-semantic-beta-fill-secondary-dark: #331252; $sds-color-semantic-beta-ornament: #6526b5; -$sds-color-semantic-beta-ornament-dark: #e4dcfc; -$sds-color-semantic-beta-surface-primary: #efeafe; -$sds-color-semantic-beta-surface-primary-dark: #4b0190; -$sds-color-semantic-beta-surface-secondary: #8b54e2; -$sds-color-semantic-beta-surface-secondary-dark: #cebef8; +$sds-color-semantic-beta-ornament-dark: #cebef8; +$sds-color-semantic-beta-surface-primary: #8b54e2; +$sds-color-semantic-beta-surface-primary-dark: #aa89ef; +$sds-color-semantic-beta-surface-secondary: #efeafe; +$sds-color-semantic-beta-surface-secondary-dark: #331252; $sds-color-semantic-beta-text: #6526b5; -$sds-color-semantic-beta-text-dark: #e4dcfc; -$sds-color-semantic-info-border: #1a6cef; +$sds-color-semantic-beta-text-dark: #cebef8; +$sds-color-semantic-info-border: #0041b9; $sds-color-semantic-info-border-dark: #a2c9ff; $sds-color-semantic-info-fill-hover: #0041b9; -$sds-color-semantic-info-fill-hover-dark: #cde3ff; +$sds-color-semantic-info-fill-hover-dark: #a2c9ff; $sds-color-semantic-info-fill-pressed: #002d90; -$sds-color-semantic-info-fill-pressed-dark: #e2eeff; +$sds-color-semantic-info-fill-pressed-dark: #cde3ff; $sds-color-semantic-info-fill-primary: #1a6cef; -$sds-color-semantic-info-fill-primary-dark: #a2c9ff; +$sds-color-semantic-info-fill-primary-dark: #5b9aff; $sds-color-semantic-info-fill-secondary: #e2eeff; -$sds-color-semantic-info-fill-secondary-dark: #002573; +$sds-color-semantic-info-fill-secondary-dark: #0f1d4a; $sds-color-semantic-info-ornament: #0041b9; -$sds-color-semantic-info-ornament-dark: #cde3ff; -$sds-color-semantic-info-surface-primary: #e2eeff; -$sds-color-semantic-info-surface-primary-dark: #002573; -$sds-color-semantic-info-surface-secondary: #1a6cef; -$sds-color-semantic-info-surface-secondary-dark: #a2c9ff; +$sds-color-semantic-info-ornament-dark: #a2c9ff; +$sds-color-semantic-info-surface-primary: #1a6cef; +$sds-color-semantic-info-surface-primary-dark: #5b9aff; +$sds-color-semantic-info-surface-secondary: #e2eeff; +$sds-color-semantic-info-surface-secondary-dark: #0f1d4a; $sds-color-semantic-info-text: #0041b9; -$sds-color-semantic-info-text-dark: #cde3ff; -$sds-color-semantic-negative-border: #db2131; -$sds-color-semantic-negative-border-dark: #FF9385; -$sds-color-semantic-negative-fill-hover: #980013; -$sds-color-semantic-negative-fill-hover-dark: #FFBDB3; +$sds-color-semantic-info-text-dark: #a2c9ff; +$sds-color-semantic-negative-border: #980017; +$sds-color-semantic-negative-border-dark: #ff988a; +$sds-color-semantic-negative-fill-hover: #980017; +$sds-color-semantic-negative-fill-hover-dark: #ff988a; $sds-color-semantic-negative-fill-pressed: #6f0008; -$sds-color-semantic-negative-fill-pressed-dark: #FFD8D1; +$sds-color-semantic-negative-fill-pressed-dark: #ffbdb3; $sds-color-semantic-negative-fill-primary: #db2131; -$sds-color-semantic-negative-fill-primary-dark: #FF9385; +$sds-color-semantic-negative-fill-primary-dark: #e05043; $sds-color-semantic-negative-fill-secondary: #ffe8e6; -$sds-color-semantic-negative-fill-secondary-dark: #630008; -$sds-color-semantic-negative-ornament: #980013; -$sds-color-semantic-negative-ornament-dark: #FFBDB3; -$sds-color-semantic-negative-surface-primary: #ffe8e6; -$sds-color-semantic-negative-surface-primary-dark: #630008; -$sds-color-semantic-negative-surface-secondary: #db2131; -$sds-color-semantic-negative-surface-secondary-dark: #FF9385; -$sds-color-semantic-negative-text: #980013; -$sds-color-semantic-negative-text-dark: #FFBDB3; +$sds-color-semantic-negative-fill-secondary-dark: #330603; +$sds-color-semantic-negative-ornament: #980017; +$sds-color-semantic-negative-ornament-dark: #ff988a; +$sds-color-semantic-negative-surface-primary: #db2131; +$sds-color-semantic-negative-surface-primary-dark: #e05043; +$sds-color-semantic-negative-surface-secondary: #ffe8e6; +$sds-color-semantic-negative-surface-secondary-dark: #330603; +$sds-color-semantic-negative-text: #980017; +$sds-color-semantic-negative-text-dark: #ff988a; $sds-color-semantic-neutral-border: #969696; $sds-color-semantic-neutral-border-dark: #aaaaaa; $sds-color-semantic-neutral-fill-hover: #6c6c6c; @@ -339,48 +349,48 @@ $sds-color-semantic-neutral-fill-secondary: #f3f3f3; $sds-color-semantic-neutral-fill-secondary-dark: #333333; $sds-color-semantic-neutral-ornament: #3b3b3b; $sds-color-semantic-neutral-ornament-dark: #ededed; -$sds-color-semantic-neutral-surface-primary: #dfdfdf; -$sds-color-semantic-neutral-surface-primary-dark: #494949; -$sds-color-semantic-neutral-surface-secondary: #969696; -$sds-color-semantic-neutral-surface-secondary-dark: #aaaaaa; +$sds-color-semantic-neutral-surface-primary: #969696; +$sds-color-semantic-neutral-surface-primary-dark: #aaaaaa; +$sds-color-semantic-neutral-surface-secondary: #dfdfdf; +$sds-color-semantic-neutral-surface-secondary-dark: #494949; $sds-color-semantic-neutral-text: #3b3b3b; $sds-color-semantic-neutral-text-dark: #ededed; -$sds-color-semantic-notice-border: #da9900; -$sds-color-semantic-notice-border-dark: #cf8e00; -$sds-color-semantic-notice-fill-hover: #b77800; -$sds-color-semantic-notice-fill-hover-dark: #efad00; +$sds-color-semantic-notice-border: #b07300; +$sds-color-semantic-notice-border-dark: #e5bc63; +$sds-color-semantic-notice-fill-hover: #b07300; +$sds-color-semantic-notice-fill-hover-dark: #e5bc63; $sds-color-semantic-notice-fill-pressed: #7c3e00; -$sds-color-semantic-notice-fill-pressed-dark: #ffdc9a; +$sds-color-semantic-notice-fill-pressed-dark: #f5d789; $sds-color-semantic-notice-fill-primary: #da9900; -$sds-color-semantic-notice-fill-primary-dark: #cf8e00; -$sds-color-semantic-notice-fill-secondary: #ffefcf; -$sds-color-semantic-notice-fill-secondary-dark: #552300; -$sds-color-semantic-notice-ornament: #b77800; -$sds-color-semantic-notice-ornament-dark: #efad00; -$sds-color-semantic-notice-surface-primary: #ffefcf; -$sds-color-semantic-notice-surface-primary-dark: #552300; -$sds-color-semantic-notice-surface-secondary: #da9900; -$sds-color-semantic-notice-surface-secondary-dark: #cf8e00; -$sds-color-semantic-notice-text: #b77800; -$sds-color-semantic-notice-text-dark: #efad00; -$sds-color-semantic-positive-border: #238444; +$sds-color-semantic-notice-fill-primary-dark: #d9a943; +$sds-color-semantic-notice-fill-secondary: #fff3db; +$sds-color-semantic-notice-fill-secondary-dark: #361b07; +$sds-color-semantic-notice-ornament: #b07300; +$sds-color-semantic-notice-ornament-dark: #e5bc63; +$sds-color-semantic-notice-surface-primary: #da9900; +$sds-color-semantic-notice-surface-primary-dark: #d9a943; +$sds-color-semantic-notice-surface-secondary: #fff3db; +$sds-color-semantic-notice-surface-secondary-dark: #361b07; +$sds-color-semantic-notice-text: #b07300; +$sds-color-semantic-notice-text-dark: #e5bc63; +$sds-color-semantic-positive-border: #105b2b; $sds-color-semantic-positive-border-dark: #85d898; $sds-color-semantic-positive-fill-hover: #105b2b; -$sds-color-semantic-positive-fill-hover-dark: #bcecc5; +$sds-color-semantic-positive-fill-hover-dark: #85d898; $sds-color-semantic-positive-fill-pressed: #07431d; -$sds-color-semantic-positive-fill-pressed-dark: #daf4de; +$sds-color-semantic-positive-fill-pressed-dark: #bcecc5; $sds-color-semantic-positive-fill-primary: #238444; -$sds-color-semantic-positive-fill-primary-dark: #85d898; +$sds-color-semantic-positive-fill-primary-dark: #4bae68; $sds-color-semantic-positive-fill-secondary: #daf4de; -$sds-color-semantic-positive-fill-secondary-dark: #053918; +$sds-color-semantic-positive-fill-secondary-dark: #082608; $sds-color-semantic-positive-ornament: #105b2b; -$sds-color-semantic-positive-ornament-dark: #bcecc5; -$sds-color-semantic-positive-surface-primary: #daf4de; -$sds-color-semantic-positive-surface-primary-dark: #053918; -$sds-color-semantic-positive-surface-secondary: #238444; -$sds-color-semantic-positive-surface-secondary-dark: #85d898; +$sds-color-semantic-positive-ornament-dark: #85d898; +$sds-color-semantic-positive-surface-primary: #238444; +$sds-color-semantic-positive-surface-primary-dark: #4bae68; +$sds-color-semantic-positive-surface-secondary: #daf4de; +$sds-color-semantic-positive-surface-secondary-dark: #082608; $sds-color-semantic-positive-text: #105b2b; -$sds-color-semantic-positive-text-dark: #bcecc5; +$sds-color-semantic-positive-text-dark: #85d898; $sds-corner-l: 20px; $sds-corner-m: 4px; $sds-corner-s: 2px; From de8224f0cbc855daf65222e6a4b4967595e425ae Mon Sep 17 00:00:00 2001 From: Masoud Amjadi Date: Mon, 25 Nov 2024 22:08:28 -0500 Subject: [PATCH 6/6] fix(button): fic active state styles for the button and the breakpoints table --- .../Bases/Breakpoints/__storybook__/constants.tsx | 12 +++++++++--- .../Breakpoints/__storybook__/stories/default.tsx | 9 ++++++++- packages/components/src/core/Button/style.ts | 2 ++ .../__tests__/__snapshots__/index.test.tsx.snap | 2 +- .../__tests__/__snapshots__/index.test.tsx.snap | 2 +- packages/data-viz/package.json | 8 ++++---- 6 files changed, 25 insertions(+), 10 deletions(-) diff --git a/packages/components/src/core/Bases/Breakpoints/__storybook__/constants.tsx b/packages/components/src/core/Bases/Breakpoints/__storybook__/constants.tsx index af00ace31..198b90b80 100644 --- a/packages/components/src/core/Bases/Breakpoints/__storybook__/constants.tsx +++ b/packages/components/src/core/Bases/Breakpoints/__storybook__/constants.tsx @@ -1,7 +1,13 @@ import { Breakpoint } from "@mui/material"; export const BREAKPOINTS_USAGE: Record = { - lg: "Large breakpoint can be used for all large displays ( > 1024px).", - md: "Medium breakpoint will work for small laptops and large-screened tablets (512px - 1023px).", - sm: "Small breakpoint will work for mobile devices and small-screened tablets (0px - 511px).", + lg: "Large breakpoint can be used for all large displays.", + md: "Medium breakpoint will work for small laptops and large-screened tablets.", + sm: "Small breakpoint will work for mobile devices and small-screened tablets.", +}; + +export const BREAKPOINTS_RANGE: Record = { + lg: "> 1024px", + md: "512px - 1023px", + sm: "0px - 511px", }; diff --git a/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx b/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx index a05903392..1543d79cf 100644 --- a/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx +++ b/packages/components/src/core/Bases/Breakpoints/__storybook__/stories/default.tsx @@ -6,7 +6,7 @@ import CellComponent from "src/core/CellComponent"; import CellBasic from "src/core/CellBasic"; import { copyToClipboard } from "src/core/Bases/utils"; import { StyledVariable } from "src/core/Bases/style"; -import { BREAKPOINTS_USAGE } from "../constants"; +import { BREAKPOINTS_RANGE, BREAKPOINTS_USAGE } from "../constants"; import { Breakpoint, useTheme } from "@mui/material"; import { getBreakpoints } from "src/core/styles"; @@ -41,6 +41,12 @@ export const Template = () => { {`${size}px`} + + { Variables Value + Range Usage