[WIP] json for theme 2.0

.changeset/early-radios-sell.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/theme": patch
+---
+
+[Theme next] Adds unified color palette

.changeset/ninety-pumpkins-shake.md

@@ -0,0 +1,5 @@
+---
+"@salt-ds/theme": minor
+---
+
+Expose JSON theme

.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.

packages/ag-grid-theme/stories/examples/HDCompact.tsx

@@ -1,4 +1,4 @@
-import { SaltProvider } from "@salt-ds/core";
+import { UNSTABLE_SaltProviderNext } from "@salt-ds/core";
 import { AgGridReact, AgGridReactProps } from "ag-grid-react";
 import { useAgGridThemeSwitcher } from "../dependencies/ThemeSwitcher";
 import dataGridExampleColumns from "../dependencies/dataGridExampleColumns";
@@ -26,7 +26,7 @@ const HDCompact = (props: AgGridReactProps) => {
   });
 
   return (
-    <SaltProvider density="high">
+    <UNSTABLE_SaltProviderNext density="high">
       <div {...containerProps}>
         <AgGridReact
           columnDefs={dataGridExampleColumns}
@@ -47,7 +47,7 @@ const HDCompact = (props: AgGridReactProps) => {
           }}
         />
       </div>
-    </SaltProvider>
+    </UNSTABLE_SaltProviderNext>
   );
 };
 

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>
   );
 };
 

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`.

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={[

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);
+}

packages/theme/css/characteristics/actionable-next.css

@@ -0,0 +1,29 @@
+.salt-theme.salt-theme-next {
+  /* CTA variant */
+  --salt-actionable-cta-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-cta-foreground-hover: var(--salt-palette-foreground-invert);
+  --salt-actionable-cta-foreground-active: var(--salt-palette-foreground-invert);
+  --salt-actionable-cta-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+  --salt-actionable-cta-background: var(--salt-palette-accent);
+  --salt-actionable-cta-background-hover: var(--salt-palette-accent-strong);
+  --salt-actionable-cta-background-active: var(--salt-palette-accent-stronger);
+  --salt-actionable-cta-background-disabled: var(--salt-palette-accent-disabled);
+  /* Primary variant */
+  --salt-actionable-primary-foreground: var(--salt-palette-foreground-primary-alt);
+  --salt-actionable-primary-foreground-hover: var(--salt-palette-foreground-invert);
+  --salt-actionable-primary-foreground-active: var(--salt-palette-foreground-invert);
+  --salt-actionable-primary-foreground-disabled: var(--salt-palette-foreground-primary-alt-disabled);
+  --salt-actionable-primary-background: var(--salt-palette-neutral);
+  --salt-actionable-primary-background-hover: var(--salt-palette-neutral-strong);
+  --salt-actionable-primary-background-active: var(--salt-palette-neutral-stronger);
+  --salt-actionable-primary-background-disabled: var(--salt-palette-neutral-strong-disabled);
+  /* Secondary variant */
+  --salt-actionable-secondary-foreground: var(--salt-palette-foreground-primary);
+  --salt-actionable-secondary-foreground-hover: var(--salt-palette-foreground-invert);
+  --salt-actionable-secondary-foreground-active: var(--salt-palette-foreground-invert);
+  --salt-actionable-secondary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
+  --salt-actionable-secondary-background: var(--salt-palette-background-none);
+  --salt-actionable-secondary-background-hover: var(--salt-palette-neutral-strong);
+  --salt-actionable-secondary-background-active: var(--salt-palette-neutral-stronger);
+  --salt-actionable-secondary-background-disabled: var(--salt-palette-background-none);
+}

packages/theme/css/characteristics/container-next.css

@@ -0,0 +1,14 @@
+.salt-theme.salt-theme-next {
+  --salt-container-primary-background: var(--salt-palette-background-primary);
+  --salt-container-primary-background-disabled: var(--salt-palette-background-primary-disabled);
+  --salt-container-primary-borderColor: var(--salt-palette-neutral-weaker);
+  --salt-container-primary-borderColor-disabled: var(--salt-palette-neutral-weaker-disabled);
+
+  --salt-container-secondary-background: var(--salt-palette-background-secondary);
+  --salt-container-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
+  --salt-container-secondary-borderColor: var(--salt-palette-neutral-weaker);
+  --salt-container-secondary-borderColor-disabled: var(--salt-palette-neutral-weaker-disabled);
+
+  --salt-container-tertiary-background: var(--salt-palette-background-tertiary);
+  --salt-container-tertiary-background-disabled: var(--salt-palette-background-tertiary-disabled);
+}

packages/theme/css/characteristics/content-next.css

@@ -0,0 +1,11 @@
+.salt-theme.salt-theme-next {
+  --salt-content-primary-foreground: var(--salt-palette-foreground-primary);
+  --salt-content-primary-foreground-disabled: var(--salt-palette-foreground-primary-disabled);
+  --salt-content-secondary-foreground: var(--salt-palette-foreground-secondary);
+  --salt-content-secondary-foreground-disabled: var(--salt-palette-foreground-secondary-disabled);
+
+  --salt-content-foreground-hover: var(--salt-palette-foreground-hover);
+  --salt-content-foreground-active: var(--salt-palette-foreground-active);
+  --salt-content-foreground-visited: var(--salt-palette-foreground-visited);
+  --salt-content-foreground-highlight: var(--salt-palette-accent-weaker);
+}

packages/theme/css/characteristics/editable-next.css

@@ -0,0 +1,19 @@
+.salt-theme.salt-theme-next {
+  --salt-editable-borderColor: var(--salt-palette-neutral);
+  --salt-editable-borderColor-active: var(--salt-palette-accent-stronger);
+  --salt-editable-borderColor-disabled: var(--salt-palette-neutral-disabled);
+  --salt-editable-borderColor-hover: var(--salt-palette-accent);
+  --salt-editable-borderColor-readonly: var(--salt-palette-neutral-readonly);
+
+  --salt-editable-primary-background: var(--salt-palette-background-primary);
+  --salt-editable-primary-background-active: var(--salt-palette-background-primary);
+  --salt-editable-primary-background-disabled: var(--salt-palette-background-primary-disabled);
+  --salt-editable-primary-background-hover: var(--salt-palette-background-primary);
+  --salt-editable-primary-background-readonly: var(--salt-palette-background-none);
+
+  --salt-editable-secondary-background: var(--salt-palette-background-secondary);
+  --salt-editable-secondary-background-active: var(--salt-palette-background-secondary);
+  --salt-editable-secondary-background-disabled: var(--salt-palette-background-secondary-disabled);
+  --salt-editable-secondary-background-hover: var(--salt-palette-background-secondary);
+  --salt-editable-secondary-background-readonly: var(--salt-palette-background-none);
+}

packages/theme/css/characteristics/focused-next.css

@@ -0,0 +1,3 @@
+.salt-theme.salt-theme-next {
+  --salt-focused-outlineColor: var(--salt-palette-accent-stronger);
+}

packages/theme/css/characteristics/navigable-next.css

@@ -0,0 +1,4 @@
+.salt-theme.salt-theme-next {
+  --salt-navigable-indicator-hover: var(--salt-palette-neutral);
+  --salt-navigable-indicator-active: var(--salt-palette-accent);
+}

packages/theme/css/characteristics/overlayable-next.css

@@ -0,0 +1,3 @@
+.salt-theme.salt-theme-next {
+  --salt-overlayable-background: var(--salt-palette-background-backdrop);
+}

packages/theme/css/characteristics/selectable-next.css

@@ -0,0 +1,20 @@
+.salt-theme.salt-theme-next {
+  --salt-selectable-borderColor: var(--salt-palette-neutral);
+  --salt-selectable-borderColor-hover: var(--salt-palette-accent-weak);
+  --salt-selectable-borderColor-selected: var(--salt-palette-accent);
+  --salt-selectable-borderColor-selectedDisabled: var(--salt-palette-accent-disabled);
+  --salt-selectable-borderColor-disabled: var(--salt-palette-neutral-disabled);
+  --salt-selectable-borderColor-readonly: var(--salt-palette-neutral-readonly);
+
+  --salt-selectable-foreground: var(--salt-palette-neutral-strong);
+  --salt-selectable-foreground-disabled: var(--salt-palette-neutral-strong-disabled);
+  --salt-selectable-foreground-hover: var(--salt-palette-accent-weak);
+  --salt-selectable-foreground-selected: var(--salt-palette-accent);
+  --salt-selectable-foreground-selectedDisabled: var(--salt-palette-accent-disabled);
+  --salt-selectable-background: var(--salt-palette-background-none);
+  --salt-selectable-background-hover: var(--salt-palette-accent-weakest);
+  --salt-selectable-background-selected: var(--salt-palette-accent-weaker);
+  --salt-selectable-background-blurSelected: var(--salt-palette-neutral-weakest);
+  --salt-selectable-background-disabled: var(--salt-palette-background-none);
+  --salt-selectable-background-selectedDisabled: var(--salt-palette-accent-weaker-disabled);
+}

packages/theme/css/characteristics/separable-next.css

@@ -0,0 +1,5 @@
+.salt-theme.salt-theme-next {
+  --salt-separable-primary-borderColor: var(--salt-palette-neutral-stronger-primary);
+  --salt-separable-secondary-borderColor: var(--salt-palette-neutral-stronger-secondary);
+  --salt-separable-tertiary-borderColor: var(--salt-palette-neutral-stronger-tertiary);
+}

packages/theme/css/characteristics/status-next.css

@@ -0,0 +1,23 @@
+.salt-theme.salt-theme-next {
+  --salt-status-info-foreground: var(--salt-palette-accent);
+  --salt-status-success-foreground: var(--salt-palette-positive);
+  --salt-status-warning-foreground: var(--salt-palette-warning);
+  --salt-status-error-foreground: var(--salt-palette-negative);
+  --salt-status-static-foreground: var(--salt-palette-foreground-secondary); /* TBD */
+  --salt-status-negative-foreground: var(--salt-palette-negative);
+  --salt-status-positive-foreground: var(--salt-palette-positive);
+
+  --salt-status-info-borderColor: var(--salt-palette-accent);
+  --salt-status-success-borderColor: var(--salt-palette-positive);
+  --salt-status-warning-borderColor: var(--salt-palette-warning);
+  --salt-status-error-borderColor: var(--salt-palette-negative);
+
+  --salt-status-info-background: var(--salt-palette-accent-weakest);
+  --salt-status-success-background: var(--salt-palette-positive-weak);
+  --salt-status-warning-background: var(--salt-palette-warning-weak);
+  --salt-status-error-background: var(--salt-palette-negative-weak);
+
+  --salt-status-success-background-selected: var(--salt-palette-positive-weak);
+  --salt-status-warning-background-selected: var(--salt-palette-warning-weak);
+  --salt-status-error-background-selected: var(--salt-palette-negative-weak);
+}

packages/theme/css/characteristics/target-next.css

@@ -0,0 +1,4 @@
+.salt-theme.salt-theme-next {
+  --salt-target-background-hover: var(--salt-palette-accent);
+  --salt-target-borderColor-hover: var(--salt-palette-accent-weakest);
+}

packages/theme/css/characteristics/track-next.css

@@ -0,0 +1,3 @@
+.salt-theme.salt-theme-next {
+  --salt-track-borderColor: var(--salt-palette-neutral);
+}