diff --git a/.changeset/strong-parents-march.md b/.changeset/strong-parents-march.md new file mode 100644 index 00000000000..46da781e9e0 --- /dev/null +++ b/.changeset/strong-parents-march.md @@ -0,0 +1,7 @@ +--- +"@salt-ds/theme": minor +--- + +Switched to use new color palette in theme next when using `UNSTABLE_SaltProviderNext`. + +Refer to [documentation](https://storybook.saltdesignsystem.com/?path=/docs/experimental-theme-next--docs) for more information. diff --git a/packages/ag-grid-theme/stories/examples/HDCompact.tsx b/packages/ag-grid-theme/stories/examples/HDCompact.tsx index 65114be3586..877e3bbd05c 100644 --- a/packages/ag-grid-theme/stories/examples/HDCompact.tsx +++ b/packages/ag-grid-theme/stories/examples/HDCompact.tsx @@ -1,4 +1,8 @@ -import { SaltProvider } from "@salt-ds/core"; +import { + SaltProvider, + UNSTABLE_SaltProviderNext, + useTheme, +} from "@salt-ds/core"; import { AgGridReact, AgGridReactProps } from "ag-grid-react"; import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher"; import dataGridExampleColumns from "../dependencies/dataGridExampleColumns"; @@ -18,6 +22,7 @@ const statusBar = { }; const HDCompact = (props: AgGridReactProps) => { + const { themeNext } = useTheme(); const { themeName } = useAgGridThemeSwitcher(); const { agGridProps, containerProps } = useAgGridHelpers({ agThemeName: `ag-theme-${themeName}`, @@ -25,8 +30,10 @@ const HDCompact = (props: AgGridReactProps) => { density: "high", }); + const Provider = themeNext ? UNSTABLE_SaltProviderNext : SaltProvider; + return ( - +
{ }} />
- + ); }; diff --git a/packages/core/src/button/Button.css b/packages/core/src/button/Button.css index 0d68db8b8cd..c3019fdd618 100644 --- a/packages/core/src/button/Button.css +++ b/packages/core/src/button/Button.css @@ -8,6 +8,10 @@ --button-text-color-active: var(--salt-actionable-cta-foreground-active); --button-text-color-disabled: var(--salt-actionable-cta-foreground-disabled); --button-text-color-hover: var(--salt-actionable-cta-foreground-hover); + --button-borderColor: var(--salt-actionable-cta-borderColor); + --button-borderColor-hover: var(--salt-actionable-cta-borderColor-hover); + --button-borderColor-active: var(--salt-actionable-cta-borderColor-active); + --button-borderColor-disabled: var(--salt-actionable-cta-borderColor-disabled); } /* Styles applied to the root element if variant="primary" (or no variant specified) */ @@ -20,6 +24,10 @@ --button-text-color-active: var(--salt-actionable-primary-foreground-active); --button-text-color-disabled: var(--salt-actionable-primary-foreground-disabled); --button-text-color-hover: var(--salt-actionable-primary-foreground-hover); + --button-borderColor: var(--salt-actionable-primary-borderColor); + --button-borderColor-hover: var(--salt-actionable-primary-borderColor-hover); + --button-borderColor-active: var(--salt-actionable-primary-borderColor-active); + --button-borderColor-disabled: var(--salt-actionable-primary-borderColor-disabled); } /* Styles applied to the root element if variant="secondary" */ @@ -32,15 +40,19 @@ --button-text-color-active: var(--salt-actionable-secondary-foreground-active); --button-text-color-disabled: var(--salt-actionable-secondary-foreground-disabled); --button-text-color-hover: var(--salt-actionable-secondary-foreground-hover); + --button-borderColor: var(--salt-actionable-secondary-borderColor); + --button-borderColor-hover: var(--salt-actionable-secondary-borderColor-hover); + --button-borderColor-active: var(--salt-actionable-secondary-borderColor-active); + --button-borderColor-disabled: var(--salt-actionable-secondary-borderColor-disabled); } .saltButton { align-items: var(--saltButton-alignItems, center); appearance: none; background: var(--saltButton-background, var(--button-background)); - border-color: var(--saltButton-borderColor, transparent); + border-color: var(--saltButton-borderColor, var(--button-borderColor, transparent)); border-style: var(--saltButton-borderStyle, solid); - border-width: var(--saltButton-borderWidth, 0); + border-width: var(--saltButton-borderWidth, var(--salt-size-border, 0)); border-radius: var(--saltButton-borderRadius, var(--salt-palette-corner-weak, 0)); color: var(--saltButton-text-color, var(--button-text-color)); cursor: var(--saltButton-cursor, pointer); @@ -52,7 +64,7 @@ line-height: var(--saltButton-lineHeight, var(--salt-text-lineHeight)); letter-spacing: var(--saltButton-letterSpacing, var(--salt-text-action-letterSpacing)); text-transform: var(--saltButton-textTransform, var(--salt-text-action-textTransform)); - padding: 0 var(--saltButton-padding, var(--salt-spacing-100)); + padding: 0 var(--saltButton-padding, calc(var(--salt-spacing-100) - var(--saltButton-borderWidth, var(--salt-size-border, 0)))); margin: var(--saltButton-margin, 0); height: var(--saltButton-height, var(--salt-size-base)); min-width: var(--saltButton-minWidth, unset); @@ -75,6 +87,7 @@ outline-offset: var(--salt-focused-outlineOffset); background: var(--saltButton-background-hover, var(--button-background-hover)); color: var(--saltButton-text-color-hover, var(--button-text-color-hover)); + border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover)); } /* Pseudo-class applied to the root element on focus when Button is active */ @@ -82,12 +95,14 @@ .saltButton:focus-visible(:active) { background: var(--saltButton-background-active-hover, var(--button-background)); color: var(--saltButton-text-color-active-hover, var(--button-text-color)); + border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover)); } /* Pseudo-class applied to the root element on hover when Button is not active or disabled */ .saltButton:hover { background: var(--saltButton-background-hover, var(--button-background-hover)); color: var(--saltButton-text-color-hover, var(--button-text-color-hover)); + border-color: var(--saltButton-borderColor-hover, var(--button-borderColor-hover)); } /* Pseudo-class applied to the root element when Button is active and not disabled */ @@ -95,6 +110,7 @@ .saltButton.saltButton-active { background: var(--saltButton-background-active, var(--button-background-active)); color: var(--saltButton-text-color-active, var(--button-text-color-active)); + border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active)); } /* Styles applied when the button triggers a dialog or menu */ @@ -102,6 +118,7 @@ .saltButton[aria-expanded="true"][aria-haspopup="dialog"] { background: var(--saltButton-background-active, var(--button-background-active)); color: var(--saltButton-text-color-active, var(--button-text-color-active)); + border-color: var(--saltButton-borderColor-active, var(--button-borderColor-active)); } /* Pseudo-class applied to the root element if disabled={true} */ @@ -114,4 +131,5 @@ background: var(--saltButton-background-disabled, var(--button-background-disabled)); color: var(--saltButton-text-color-disabled, var(--button-text-color-disabled)); cursor: var(--saltButton-cursor-disabled, var(--salt-actionable-cursor-disabled)); + border-color: var(--saltButton-borderColor-disabled, var(--button-borderColor-disabled)); } diff --git a/packages/core/src/input/Input.css b/packages/core/src/input/Input.css index c4ad543d093..4352e40756f 100644 --- a/packages/core/src/input/Input.css +++ b/packages/core/src/input/Input.css @@ -214,6 +214,6 @@ .saltInput-startAdornmentContainer > .saltButton, .saltInput-endAdornmentContainer > .saltButton { - --saltButton-padding: var(--salt-spacing-50); + --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border)); --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100)); } diff --git a/packages/core/src/multiline-input/MultilineInput.css b/packages/core/src/multiline-input/MultilineInput.css index 7b6a9b842d6..fbb7dd503a2 100644 --- a/packages/core/src/multiline-input/MultilineInput.css +++ b/packages/core/src/multiline-input/MultilineInput.css @@ -251,6 +251,6 @@ /* Styles for button adornment */ .saltMultilineInput-startAdornmentContainer > .saltButton, .saltMultilineInput-endAdornmentContainer > .saltButton { - --saltButton-padding: var(--salt-spacing-50); + --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border)); --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100)); } diff --git a/packages/core/src/pill-input/PillInput.css b/packages/core/src/pill-input/PillInput.css index 84c3b161b32..3941c201333 100644 --- a/packages/core/src/pill-input/PillInput.css +++ b/packages/core/src/pill-input/PillInput.css @@ -223,7 +223,7 @@ .saltPillInput-startAdornmentContainer > .saltButton, .saltPillInput-endAdornmentContainer > .saltButton { - --saltButton-padding: var(--salt-spacing-50); + --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border)); --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100)); } diff --git a/packages/core/src/segmented-button-group/SegmentedButtonGroup.css b/packages/core/src/segmented-button-group/SegmentedButtonGroup.css index 0d1a473f3b6..f651cac0645 100644 --- a/packages/core/src/segmented-button-group/SegmentedButtonGroup.css +++ b/packages/core/src/segmented-button-group/SegmentedButtonGroup.css @@ -10,8 +10,10 @@ width: var(--salt-size-border); position: absolute; background: var(--button-background); - right: calc(var(--salt-size-border) * -1); - height: 100%; + /* Accomodate button border */ + right: calc(var(--salt-size-border) * -2); + top: calc(var(--salt-size-border) * -1); + bottom: calc(var(--salt-size-border) * -1); } .saltSegmentedButtonGroup > .saltButton:not(:first-of-type)::before { @@ -19,6 +21,8 @@ width: var(--salt-size-border); position: absolute; background: var(--salt-separable-primary-borderColor); - left: calc(var(--salt-size-border) * -1); - height: 100%; + /* Accomodate button border */ + left: calc(var(--salt-size-border) * -2); + top: calc(var(--salt-size-border) * -1); + bottom: calc(var(--salt-size-border) * -1); } diff --git a/packages/core/src/toggle-button/ToggleButton.css b/packages/core/src/toggle-button/ToggleButton.css index 2b87edced68..88fcfc36b18 100644 --- a/packages/core/src/toggle-button/ToggleButton.css +++ b/packages/core/src/toggle-button/ToggleButton.css @@ -5,7 +5,9 @@ -webkit-appearance: none; display: inline-flex; background: var(--salt-actionable-secondary-background); - border: 0 solid transparent; + border-color: var(--salt-actionable-secondary-borderColor, transparent); + border-style: solid; + border-width: var(--salt-actionable-borderWidth, 0); border-radius: var(--salt-palette-corner-weaker, 0); height: var(--salt-size-base); color: var(--salt-actionable-secondary-foreground); @@ -39,6 +41,7 @@ background: var(--salt-actionable-secondary-background-active); color: var(--salt-actionable-secondary-foreground-active); cursor: var(--salt-actionable-cursor-active); + border-color: var(--salt-actionable-secondary-borderColor-active, transparent); } .saltToggleButton[aria-checked="true"], @@ -46,6 +49,7 @@ background: var(--salt-actionable-secondary-background-active); color: var(--salt-actionable-secondary-foreground-active); cursor: var(--salt-actionable-cursor-active); + border-color: var(--salt-actionable-secondary-borderColor-active, transparent); } .saltToggleButton:disabled { diff --git a/packages/core/stories/form-field/form-field.stories.tsx b/packages/core/stories/form-field/form-field.stories.tsx index 044e158bf32..4f6e554453f 100644 --- a/packages/core/stories/form-field/form-field.stories.tsx +++ b/packages/core/stories/form-field/form-field.stories.tsx @@ -376,11 +376,18 @@ export const MultipleChildren: StoryFn = (props) => { export const Readonly: StoryFn = (props) => { return ( - - Readonly Form Field - - This Form Field is readonly - + + + Readonly Form Field + + This Form Field is readonly + + + Readonly multiline input + + This Form Field is readonly + + ); }; diff --git a/packages/core/stories/salt-provider/salt-provider-next.mdx b/packages/core/stories/salt-provider/salt-provider-next.mdx index f69cf789114..8b5ba9546f1 100644 --- a/packages/core/stories/salt-provider/salt-provider-next.mdx +++ b/packages/core/stories/salt-provider/salt-provider-next.mdx @@ -131,3 +131,35 @@ You'll need to install Amplitude font to your application to make sure every use src: url("PATH/TO/FONT.woff2") format("woff2"); } ``` + +## Unified Color Palette + +A completely new color palette is used with balanced color ramps for each color group. + +You will find 9 colors in each color group, which makes sure middle point (500 colors) will achieve +at least 4.5 contrast ratio against both light and dark primary background. Primary and secondary +background colors are no longer picked from the color ramps, but rather from additional foundation +colors (snow & marble in light, jet & granite in dark). + +Refer to Figma file ([UNSTABLE Salt Colors (variables)]()) +for color values and mappings. + +Migration note: If you're referring any Salt foundation colors (i.e. `--salt-color-*`) directly in your code, +you'll need to revisit those values. We do not recommend directly consume foundation colors directly, instead +try to find a characteristics color instead which will work better in different modes. + +## New Theme Palette Structure + +A new structure of palette layer is introduced to help making color changes easier for custom themes, namely + +- Accent +- Background +- Foreground +- Neutral +- Info +- Negative +- Positive +- Warning + +All existing characteristics are re-wired through above new palette layers to use the new colors, +which is scoped to `.salt-theme-next`. diff --git a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx index 9f34d732302..85bb8fe7d79 100644 --- a/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx +++ b/packages/lab/stories/kitchen-sink/kitchen-sink.stories.tsx @@ -29,6 +29,7 @@ import { SaltShakerIcon, SaltShakerSolidIcon, } from "@salt-ds/icons"; +import { ListNext, ListItemNext } from "@salt-ds/lab"; import { DefaultGroup as AccordionDefault, Status as AccordionStatus, @@ -58,7 +59,13 @@ import { Error as ToastError, Warning as ToastWarning, } from "../../../core/stories/toast/toast.stories"; -import { WithValidation as FormFieldValidation } from "../../../core/stories/form-field/form-field.stories"; +import { + WithValidation as FormFieldValidation, + WithMultilineInputAsQuestion, + HelperText as FormFieldHelperText, + Readonly as FormFieldReadonly, +} from "../../../core/stories/form-field/form-field.stories"; +import { Default as SegmentedButtonGroupDefault } from "../../../core/stories/segmented-button-group/segmented-button-group.stories"; import { Default as PillDefault, Disabled as PillDisabled, @@ -67,8 +74,13 @@ import { } from "../../../core/stories/pill/pill.stories"; import { Default as OverlayDefault } from "../../../core/stories/overlay/overlay.stories"; import AgGridThemeDefault from "../../../ag-grid-theme/stories/examples/Default"; +import AgGridThemeZebra from "../../../ag-grid-theme/stories/examples/VariantZebra"; import AgGridThemeHDCompact from "../../../ag-grid-theme/stories/examples/HDCompact"; +import "ag-grid-community/dist/styles/ag-grid.css"; +import "ag-grid-community/dist/styles/ag-theme-material.css"; +import "../../../../dist/salt-ds-ag-grid-theme/salt-ag-theme.css"; + export default { title: "Experimental/Kitchen Sink", }; @@ -224,7 +236,18 @@ export const Example1 = () => { - + + + + + + @@ -272,7 +295,10 @@ export const Example1 = () => { - + + + + @@ -319,6 +345,25 @@ export const Example1 = () => { + + + + + + + + + + + + + Green + + Red + + Blue + Purple + { }, ]} /> +

Zebra

+

HD Compact