Added accent switch to UNSTABLE_SaltProviderNext

.changeset/strong-parents-march.md

@@ -3,5 +3,12 @@
 ---
 
 Switched to use new color palette in theme next when using `UNSTABLE_SaltProviderNext`.
+Added a new `accent` prop to theme next with either `"blue"` or `"teal"` option. To try it out, use
+
+```
+<UNSTABLE_SaltProviderNext accent="teal">
+```
 
 Refer to [documentation](https://storybook.saltdesignsystem.com/?path=/docs/experimental-theme-next--docs) for more information.
+
+Closes #3394

.storybook/preview.tsx

@@ -139,6 +139,16 @@ export const globalTypes: GlobalTypes = {
       title: "Corner",
     },
   },
+  accent: {
+    name: "Experimental accent",
+    description: "Switch accent to blue / teal",
+    defaultValue: "blue",
+    toolbar: {
+      icon: "beaker",
+      items: ["blue", "teal"],
+      title: "Accent",
+    },
+  },
 };
 
 export const argTypes: ArgTypes = {

docs/decorators/withTheme.tsx

@@ -65,7 +65,8 @@ function SetBackground({ viewMode, id }: { viewMode: string; id: string }) {
 }
 
 export const withTheme: Decorator = (StoryFn, context) => {
-  const { density, mode, styleInjection, themeNext, corner } = context.globals;
+  const { density, mode, styleInjection, themeNext, corner, accent } =
+    context.globals;
 
   const Provider =
     themeNext === "enable" ? UNSTABLE_SaltProviderNext : SaltProvider;
@@ -95,6 +96,7 @@ export const withTheme: Decorator = (StoryFn, context) => {
             key={`${mode}-${styleInjection}`}
             enableStyleInjection={styleInjection === "enable"}
             corner={corner}
+            accent={accent}
           >
             <Panel>
               <StoryFn />
@@ -112,6 +114,7 @@ export const withTheme: Decorator = (StoryFn, context) => {
       key={`${mode}-${styleInjection}`}
       enableStyleInjection={styleInjection === "enable"}
       corner={corner}
+      accent={accent}
     >
       <SetBackground viewMode={context.viewMode} id={context.id} />
       <StoryFn />

packages/core/src/__tests__/__e2e__/salt-provider/SaltProvider.cy.tsx

@@ -19,7 +19,8 @@ const TestComponent = ({
   className?: string;
 }) => {
   const density = useDensity();
-  const { theme, mode, UNSTABLE_corner, themeNext } = useTheme();
+  const { theme, mode, UNSTABLE_corner, UNSTABLE_accent, themeNext } =
+    useTheme();
   const { announce } = useAriaAnnouncer();
   const announcerPresent = typeof announce === "function";
 
@@ -32,6 +33,7 @@ const TestComponent = ({
       data-mode={mode}
       data-announcer={announcerPresent}
       data-corner={UNSTABLE_corner}
+      data-accent={UNSTABLE_accent}
       data-themeNext={themeNext}
     />
   );
@@ -274,6 +276,7 @@ describe("Given a SaltProviderNext", () => {
         .should("exist")
         .and("have.attr", "data-mode", "light")
         .and("have.attr", "data-corner", "sharp")
+        .and("have.attr", "data-accent", "blue")
         .and("have.class", "salt-theme-next")
         .and("have.class", "salt-density-medium");
     });
@@ -289,6 +292,7 @@ describe("Given a SaltProviderNext", () => {
         .and("have.attr", "data-mode", "light")
         .and("have.attr", "data-announcer", "true")
         .and("have.attr", "data-corner", "sharp")
+        .and("have.attr", "data-accent", "blue")
         .and("have.attr", "data-themeNext", "true");
       cy.get("[aria-live]").should("exist");
     });
@@ -297,7 +301,12 @@ describe("Given a SaltProviderNext", () => {
   describe("when nested", () => {
     it("should inherit values not passed as props", () => {
       mount(
-        <UNSTABLE_SaltProviderNext density="high" mode="dark" corner="rounded">
+        <UNSTABLE_SaltProviderNext
+          density="high"
+          mode="dark"
+          corner="rounded"
+          accent="teal"
+        >
           <TestComponent />
           <UNSTABLE_SaltProviderNext density="medium">
             <TestComponent id="test-2" />
@@ -313,20 +322,31 @@ describe("Given a SaltProviderNext", () => {
         .and("have.attr", "data-density", "high")
         .and("have.attr", "data-mode", "dark")
         .and("have.attr", "data-corner", "rounded")
+        .and("have.attr", "data-accent", "teal")
         .and("have.attr", "data-announcer", "true");
 
       cy.get("#test-2")
         .should("exist")
         .and("have.attr", "data-density", "medium")
         .and("have.attr", "data-mode", "dark")
         .and("have.attr", "data-corner", "rounded")
+        .and("have.attr", "data-accent", "teal")
         .and("have.attr", "data-announcer", "true");
     });
     it("should take different values set as props", () => {
       mount(
-        <UNSTABLE_SaltProviderNext density="high" mode="dark" corner="rounded">
+        <UNSTABLE_SaltProviderNext
+          density="high"
+          mode="dark"
+          corner="rounded"
+          accent="teal"
+        >
           <TestComponent />
-          <UNSTABLE_SaltProviderNext density="medium" corner="sharp">
+          <UNSTABLE_SaltProviderNext
+            density="medium"
+            corner="sharp"
+            accent="blue"
+          >
             <TestComponent id="test-2" />
           </UNSTABLE_SaltProviderNext>
         </UNSTABLE_SaltProviderNext>
@@ -340,13 +360,15 @@ describe("Given a SaltProviderNext", () => {
         .and("have.attr", "data-density", "high")
         .and("have.attr", "data-mode", "dark")
         .and("have.attr", "data-corner", "rounded")
+        .and("have.attr", "data-accent", "teal")
         .and("have.attr", "data-announcer", "true");
 
       cy.get("#test-2")
         .should("exist")
         .and("have.attr", "data-density", "medium")
         .and("have.attr", "data-mode", "dark")
         .and("have.attr", "data-corner", "sharp")
+        .and("have.attr", "data-accent", "blue")
         .and("have.attr", "data-announcer", "true");
     });
   });

packages/core/src/salt-provider/SaltProvider.tsx

@@ -25,6 +25,7 @@ import {
   StyleInjectionProvider,
 } from "@salt-ds/styles";
 import { UNSTABLE_Corner } from "../theme/Corner";
+import { UNSTABLE_Accent } from "../theme/Accent";
 
 export const DEFAULT_DENSITY = "medium";
 
@@ -33,13 +34,15 @@ const UNSTABLE_ADDITIONAL_THEME_NAME = "salt-theme-next";
 
 const DEFAULT_MODE = "light";
 const DEFAULT_CORNER: UNSTABLE_Corner = "sharp";
+const DEFAULT_ACCENT: UNSTABLE_Accent = "blue";
 export interface ThemeContextProps {
   theme: ThemeName;
   mode: Mode;
   window?: WindowContextType;
   /** Only available when using SaltProviderNext. */
   themeNext: boolean;
   UNSTABLE_corner: UNSTABLE_Corner;
+  UNSTABLE_accent: UNSTABLE_Accent;
 }
 
 export const DensityContext = createContext<Density>(DEFAULT_DENSITY);
@@ -49,6 +52,7 @@ export const ThemeContext = createContext<ThemeContextProps>({
   mode: DEFAULT_MODE,
   themeNext: false,
   UNSTABLE_corner: DEFAULT_CORNER,
+  UNSTABLE_accent: DEFAULT_ACCENT,
 });
 
 export const BreakpointContext =
@@ -83,6 +87,7 @@ const createThemedChildren = ({
   applyClassesTo,
   themeNext,
   corner,
+  accent,
 }: {
   children: ReactNode;
   themeName: ThemeName;
@@ -94,6 +99,7 @@ const createThemedChildren = ({
   const themeNames = getThemeNames(themeName, themeNext);
   const themeNextProps = {
     "data-corner": corner,
+    "data-accent": accent,
   };
   if (applyClassesTo === "root") {
     return children;
@@ -174,6 +180,7 @@ function InternalSaltProvider({
   breakpoints: breakpointsProp,
   themeNext,
   corner: cornerProp,
+  accent: accentProp,
 }: Omit<
   SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps,
   "enableStyleInjection"
@@ -184,6 +191,7 @@ function InternalSaltProvider({
     mode: inheritedMode,
     window: inheritedWindow,
     UNSTABLE_corner: inheritedCorner,
+    UNSTABLE_accent: inheritedAccent,
   } = useContext(ThemeContext);
 
   const isRootProvider = inheritedTheme === undefined || inheritedTheme === "";
@@ -193,6 +201,7 @@ function InternalSaltProvider({
   const mode = modeProp ?? inheritedMode;
   const breakpoints = breakpointsProp ?? DEFAULT_BREAKPOINTS;
   const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;
+  const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;
 
   const applyClassesTo =
     applyClassesToProp ?? (isRootProvider ? "root" : "scope");
@@ -211,8 +220,9 @@ function InternalSaltProvider({
       window: targetWindow,
       themeNext: Boolean(themeNext),
       UNSTABLE_corner: corner,
+      UNSTABLE_accent: accent,
     }),
-    [themeName, mode, targetWindow, themeNext, corner]
+    [themeName, mode, targetWindow, themeNext, corner, accent]
   );
 
   const themedChildren = createThemedChildren({
@@ -223,6 +233,7 @@ function InternalSaltProvider({
     applyClassesTo,
     themeNext,
     corner: corner,
+    accent,
   });
 
   useIsomorphicLayoutEffect(() => {
@@ -238,6 +249,7 @@ function InternalSaltProvider({
         targetWindow.document.documentElement.dataset.mode = mode;
         if (themeNext) {
           targetWindow.document.documentElement.dataset.corner = corner;
+          targetWindow.document.documentElement.dataset.accent = accent;
         }
       } else {
         console.warn(
@@ -255,6 +267,7 @@ function InternalSaltProvider({
         targetWindow.document.documentElement.dataset.mode = undefined;
         if (themeNext) {
           delete targetWindow.document.documentElement.dataset.corner;
+          delete targetWindow.document.documentElement.dataset.accent;
         }
       }
     };
@@ -267,6 +280,7 @@ function InternalSaltProvider({
     inheritedWindow,
     themeNext,
     corner,
+    accent,
   ]);
 
   const matchedBreakpoints = useMatchedBreakpoints(breakpoints);
@@ -303,6 +317,7 @@ export function SaltProvider({
 
 interface UNSTABLE_SaltProviderNextAdditionalProps {
   corner?: UNSTABLE_Corner;
+  accent?: UNSTABLE_Accent;
 }
 
 export type UNSTABLE_SaltProviderNextProps = SaltProviderProps &

packages/core/src/theme/Accent.ts

@@ -0,0 +1,3 @@
+export const UNSTABLE_AccentValues = ["blue", "teal"] as const;
+
+export type UNSTABLE_Accent = (typeof UNSTABLE_AccentValues)[number];

packages/core/stories/salt-provider/salt-provider-next.doc.stories.mdx

@@ -143,3 +143,33 @@ A new structure of palette layer is introduced to help making color changes easi
 
 All existing characteristics are re-wired through above new palette layers to use the new colors,
 which is scoped to `.salt-theme-next`.
+
+## Accent color switch
+
+A new `accent` prop is introduced with `"blue"` (default) and `"teal"` options.
+This enables the possiblity of switching all components using accent colors to use either blue or teal
+color palette, e.g. CTA button, checkbox, radio button, etc.
+
+```tsx
+<UNSTABLE_SaltProviderNext accent="teal">
+```
+
+Under the hood, a new `data-accent` attribute is added alongside with other style option attributes, where
+below variables are being switched to different colors
+
+```
+--salt-palette-accent
+--salt-palette-accent-disabled
+--salt-palette-accent-strong
+--salt-palette-accent-strong-disabled
+--salt-palette-accent-stronger
+--salt-palette-accent-stronger-disabled
+--salt-palette-accent-strongest
+--salt-palette-accent-weak
+--salt-palette-accent-weaker
+--salt-palette-accent-weaker-disabled
+--salt-palette-accent-weakest
+--salt-palette-accent-action
+--salt-palette-accent-action-active
+--salt-palette-accent-action-disabled
+```

packages/theme/css/foundations/fade-next.css

@@ -26,6 +26,13 @@ con: If we offer these values, then it could misleading that we're offering all
   --salt-color-blue-600-40a: rgba(var(--salt-color-blue-600-rgb), 0.4);
   --salt-color-blue-700-40a: rgba(var(--salt-color-blue-700-rgb), 0.4);
   --salt-color-blue-800-40a: rgba(var(--salt-color-blue-800-rgb), 0.4);
+  --salt-color-teal-200-40a: rgba(var(--salt-color-teal-200-rgb), 0.4);
+  --salt-color-teal-300-40a: rgba(var(--salt-color-teal-300-rgb), 0.4);
+  --salt-color-teal-400-40a: rgba(var(--salt-color-teal-400-rgb), 0.4);
+  --salt-color-teal-500-40a: rgba(var(--salt-color-teal-500-rgb), 0.4);
+  --salt-color-teal-600-40a: rgba(var(--salt-color-teal-600-rgb), 0.4);
+  --salt-color-teal-700-40a: rgba(var(--salt-color-teal-700-rgb), 0.4);
+  --salt-color-teal-800-40a: rgba(var(--salt-color-teal-800-rgb), 0.4);
   --salt-color-background-snow-40a: rgba(var(--salt-color-background-snow-rgb), 0.4);
   --salt-color-background-marble-40a: rgba(var(--salt-color-background-marble-rgb), 0.4);
   --salt-color-background-limestone-40a: rgba(var(--salt-color-background-limestone-rgb), 0.4);

packages/theme/css/palette/accent-next.css

@@ -1,4 +1,4 @@
-.salt-theme.salt-theme-next[data-mode="light"] {
+.salt-theme.salt-theme-next[data-mode="light"][data-accent="blue"] {
   --salt-palette-accent: var(--salt-color-blue-500);
   --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
   --salt-palette-accent-strong: var(--salt-color-blue-600);
@@ -15,7 +15,7 @@
   --salt-palette-accent-action-disabled: var(--salt-color-blue-500-40a);
 }
 
-.salt-theme.salt-theme-next[data-mode="dark"] {
+.salt-theme.salt-theme-next[data-mode="dark"][data-accent="blue"] {
   --salt-palette-accent: var(--salt-color-blue-500);
   --salt-palette-accent-disabled: var(--salt-color-blue-500-40a);
   --salt-palette-accent-strong: var(--salt-color-blue-400);
@@ -31,3 +31,37 @@
   --salt-palette-accent-action-active: var(--salt-color-blue-800);
   --salt-palette-accent-action-disabled: var(--salt-color-blue-500-40a);
 }
+
+.salt-theme.salt-theme-next[data-mode="light"][data-accent="teal"] {
+  --salt-palette-accent: var(--salt-color-teal-500);
+  --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
+  --salt-palette-accent-strong: var(--salt-color-teal-600);
+  --salt-palette-accent-strong-disabled: var(--salt-color-teal-600-40a);
+  --salt-palette-accent-stronger: var(--salt-color-teal-700);
+  --salt-palette-accent-stronger-disabled: var(--salt-color-teal-700-40a);
+  --salt-palette-accent-strongest: var(--salt-color-teal-800);
+  --salt-palette-accent-weak: var(--salt-color-teal-400);
+  --salt-palette-accent-weaker: var(--salt-color-teal-200);
+  --salt-palette-accent-weaker-disabled: var(--salt-color-teal-200-40a);
+  --salt-palette-accent-weakest: var(--salt-color-teal-100);
+  --salt-palette-accent-action: var(--salt-color-teal-500);
+  --salt-palette-accent-action-active: var(--salt-color-teal-800);
+  --salt-palette-accent-action-disabled: var(--salt-color-teal-500-40a);
+}
+
+.salt-theme.salt-theme-next[data-mode="dark"][data-accent="teal"] {
+  --salt-palette-accent: var(--salt-color-teal-500);
+  --salt-palette-accent-disabled: var(--salt-color-teal-500-40a);
+  --salt-palette-accent-strong: var(--salt-color-teal-400);
+  --salt-palette-accent-strong-disabled: var(--salt-color-teal-400-40a);
+  --salt-palette-accent-stronger: var(--salt-color-teal-300);
+  --salt-palette-accent-stronger-disabled: var(--salt-color-teal-300-40a);
+  --salt-palette-accent-strongest: var(--salt-color-teal-200);
+  --salt-palette-accent-weak: var(--salt-color-teal-600);
+  --salt-palette-accent-weaker: var(--salt-color-teal-800);
+  --salt-palette-accent-weaker-disabled: var(--salt-color-teal-800-40a);
+  --salt-palette-accent-weakest: var(--salt-color-teal-900);
+  --salt-palette-accent-action: var(--salt-color-teal-500);
+  --salt-palette-accent-action-active: var(--salt-color-teal-800);
+  --salt-palette-accent-action-disabled: var(--salt-color-teal-500-40a);
+}