jpmorganchase · origami-z · May 22, 2024 · Apr 15, 2024 · Apr 15, 2024 · Apr 15, 2024
diff --git a/.changeset/strong-parents-march.md 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
@@ -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,15 +22,18 @@ const statusBar = {
 };
 
 const HDCompact = (props: AgGridReactProps) => {
+  const { themeNext } = useTheme();
   const { themeName } = useAgGridThemeSwitcher();
   const { agGridProps, containerProps } = useAgGridHelpers({
     agThemeName: `ag-theme-${themeName}`,
     compact: true,
     density: "high",
   });
 
+  const Provider = themeNext ? UNSTABLE_SaltProviderNext : SaltProvider;
+
   return (
-    <SaltProvider density="high">
+    <Provider density="high">
       <div {...containerProps}>
         <AgGridReact
           columnDefs={dataGridExampleColumns}
@@ -47,7 +54,7 @@ const HDCompact = (props: AgGridReactProps) => {
           }}
         />
       </div>
-    </SaltProvider>
+    </Provider>
   );
 };
 

diff --git 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,33 +87,38 @@
   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 */
 .saltButton.saltButton-active:focus-visible,
 .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 */
 .saltButton:active,
 .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 */
 .saltButton[aria-expanded="true"][aria-haspopup="menu"],
 .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
@@ -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
@@ -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
@@ -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
@@ -10,15 +10,19 @@
   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 {
   content: "";
   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
@@ -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,13 +41,15 @@
   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"],
 .saltToggleButton[aria-pressed="true"] {
   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
@@ -376,11 +376,18 @@ export const MultipleChildren: StoryFn<typeof FormField> = (props) => {
 
 export const Readonly: StoryFn<typeof FormField> = (props) => {
   return (
-    <FormField style={{ width: "366px" }} readOnly {...props}>
-      <FormLabel>Readonly Form Field</FormLabel>
-      <Input defaultValue="Primary Input value" />
-      <FormHelperText>This Form Field is readonly</FormHelperText>
-    </FormField>
+    <StackLayout>
+      <FormField style={{ width: "366px" }} readOnly {...props}>
+        <FormLabel>Readonly Form Field</FormLabel>
+        <Input defaultValue="Primary Input value" />
+        <FormHelperText>This Form Field is readonly</FormHelperText>
+      </FormField>
+      <FormField style={{ width: "366px" }} readOnly {...props}>
+        <FormLabel>Readonly multiline input</FormLabel>
+        <MultilineInput defaultValue="Input value" />
+        <FormHelperText>This Form Field is readonly</FormHelperText>
+      </FormField>
+    </StackLayout>
   );
 };
 

diff --git 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)](<https://www.figma.com/file/e753bB0n5Adc0LCXqtvslu/UNSTABLE-Salt-Colors-(variables)?type=design&node-id=424%3A77224&mode=design&t=1snosiQ76rKnIe9d-1>))
+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
@@ -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 = () => {
       </StackLayout>
       <StackLayout direction="row">
         <ButtonExamples />
-        <Button disabled>Submit</Button>
+        <Button variant="cta" disabled>
+          CTA
+        </Button>
+        <Button variant="primary" disabled>
+          Primary
+        </Button>
+        <Button variant="secondary" disabled>
+          Secondary
+        </Button>
+      </StackLayout>
+      <StackLayout direction="row">
+        <SegmentedButtonGroupDefault />
       </StackLayout>
       <StackLayout direction="row">
         <ToggleButtonGroupHorizontalText defaultValue="high" />
@@ -272,7 +295,10 @@ export const Example1 = () => {
         <SwitchDefault label="Switch" disabled />
         <SwitchDefault label="Switch" disabled defaultChecked />
       </StackLayout>
-      <StackLayout direction="row" gap={20} style={{ marginBlock: 60 }}>
+      <StackLayout direction="row" gap={16} style={{ marginBlock: 60 }}>
+        <Tooltip content="I am a tooltip" open placement="bottom">
+          <Button>Info</Button>
+        </Tooltip>
         <Tooltip content="I am a tooltip" status="info" open placement="bottom">
           <Button>Info</Button>
         </Tooltip>
@@ -319,6 +345,25 @@ export const Example1 = () => {
       </StackLayout>
       <StackLayout direction="row">
         <FormFieldValidation />
+        <StackLayout>
+          <FormFieldHelperText />
+          <FlexItem>
+            <WithMultilineInputAsQuestion />
+          </FlexItem>
+        </StackLayout>
+        <StackLayout>
+          <FormFieldReadonly />
+        </StackLayout>
+      </StackLayout>
+      <StackLayout>
+        <ListNext selected="blue">
+          <ListItemNext value="green">Green</ListItemNext>
+          <ListItemNext disabled value="red">
+            Red
+          </ListItemNext>
+          <ListItemNext value="blue">Blue</ListItemNext>
+          <ListItemNext value="purple">Purple</ListItemNext>
+        </ListNext>
       </StackLayout>
       <AgGridThemeDefault
         columnDefs={[
@@ -344,6 +389,8 @@ export const Example1 = () => {
           },
         ]}
       />
+      <H3>Zebra</H3>
+      <AgGridThemeZebra />
       <H3>HD Compact</H3>
       <AgGridThemeHDCompact
         columnDefs={[

diff --git a/packages/theme/css/characteristics/accent-next.css b/packages/theme/css/characteristics/accent-next.css
@@ -0,0 +1,5 @@
+.salt-theme.salt-theme-next {
+  --salt-accent-background: var(--salt-palette-accent);
+  --salt-accent-borderColor: var(--salt-palette-accent);
+  --salt-accent-foreground: var(--salt-palette-foreground-primary-alt);
+}