Added accent switch to UNSTABLE_SaltProviderNext

.changeset/salt-provider-next-accent.md

@@ -0,0 +1,11 @@
+---
+"@salt-ds/core": minor
+---
+
+Added a new `accent` prop to `UNSTABLE_SaltProviderNext` with `"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.

.changeset/strong-parents-march.md

@@ -5,3 +5,5 @@
 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.
+
+Closes #3394

.storybook/preview.tsx

@@ -138,6 +138,16 @@ export const globalTypes: GlobalTypes = {
       title: "Heading font",
     },
   },
+  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,8 +65,15 @@ function SetBackground({ viewMode, id }: { viewMode: string; id: string }) {
 }
 
 export const withTheme: Decorator = (StoryFn, context) => {
-  const { density, mode, styleInjection, themeNext, corner, headingFont } =
-    context.globals;
+  const {
+    density,
+    mode,
+    styleInjection,
+    themeNext,
+    corner,
+    headingFont,
+    accent,
+  } = context.globals;
 
   const Provider =
     themeNext === "enable" ? UNSTABLE_SaltProviderNext : SaltProvider;
@@ -97,6 +104,7 @@ export const withTheme: Decorator = (StoryFn, context) => {
             enableStyleInjection={styleInjection === "enable"}
             corner={corner}
             headingFont={headingFont}
+            accent={accent}
           >
             <Panel>
               <StoryFn />
@@ -115,6 +123,7 @@ export const withTheme: Decorator = (StoryFn, context) => {
       enableStyleInjection={styleInjection === "enable"}
       corner={corner}
       headingFont={headingFont}
+      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

@@ -26,6 +26,7 @@ import {
 } from "@salt-ds/styles";
 import { UNSTABLE_Corner } from "../theme/Corner";
 import { UNSTABLE_HeadingFont } from "../theme/HeadingFont";
+import { UNSTABLE_Accent } from "../theme/Accent";
 
 export const DEFAULT_DENSITY = "medium";
 
@@ -35,6 +36,7 @@ const UNSTABLE_ADDITIONAL_THEME_NAME = "salt-theme-next";
 const DEFAULT_MODE = "light";
 const DEFAULT_CORNER: UNSTABLE_Corner = "sharp";
 const DEFAULT_HEADING_FONT: UNSTABLE_HeadingFont = "Open Sans";
+const DEFAULT_ACCENT: UNSTABLE_Accent = "blue";
 export interface ThemeContextProps {
   theme: ThemeName;
   mode: Mode;
@@ -43,6 +45,7 @@ export interface ThemeContextProps {
   themeNext: boolean;
   UNSTABLE_corner: UNSTABLE_Corner;
   UNSTABLE_headingFont: UNSTABLE_HeadingFont;
+  UNSTABLE_accent: UNSTABLE_Accent;
 }
 
 export const DensityContext = createContext<Density>(DEFAULT_DENSITY);
@@ -53,6 +56,7 @@ export const ThemeContext = createContext<ThemeContextProps>({
   themeNext: false,
   UNSTABLE_corner: DEFAULT_CORNER,
   UNSTABLE_headingFont: DEFAULT_HEADING_FONT,
+  UNSTABLE_accent: DEFAULT_ACCENT,
 });
 
 export const BreakpointContext =
@@ -88,6 +92,7 @@ const createThemedChildren = ({
   themeNext,
   corner,
   headingFont,
+  accent,
 }: {
   children: ReactNode;
   themeName: ThemeName;
@@ -100,6 +105,7 @@ const createThemedChildren = ({
   const themeNextProps = {
     "data-corner": corner,
     "data-heading-font": headingFont,
+    "data-accent": accent,
   };
   if (applyClassesTo === "root") {
     return children;
@@ -181,6 +187,7 @@ function InternalSaltProvider({
   themeNext,
   corner: cornerProp,
   headingFont: headingFontProp,
+  accent: accentProp,
 }: Omit<
   SaltProviderProps & ThemeNextProps & UNSTABLE_SaltProviderNextProps,
   "enableStyleInjection"
@@ -192,6 +199,7 @@ function InternalSaltProvider({
     window: inheritedWindow,
     UNSTABLE_corner: inheritedCorner,
     UNSTABLE_headingFont: inheritedHeadingFont,
+    UNSTABLE_accent: inheritedAccent,
   } = useContext(ThemeContext);
 
   const isRootProvider = inheritedTheme === undefined || inheritedTheme === "";
@@ -203,6 +211,7 @@ function InternalSaltProvider({
   const corner = cornerProp ?? inheritedCorner ?? DEFAULT_CORNER;
   const headingFont =
     headingFontProp ?? inheritedHeadingFont ?? DEFAULT_HEADING_FONT;
+  const accent = accentProp ?? inheritedAccent ?? DEFAULT_ACCENT;
 
   const applyClassesTo =
     applyClassesToProp ?? (isRootProvider ? "root" : "scope");
@@ -222,8 +231,9 @@ function InternalSaltProvider({
       themeNext: Boolean(themeNext),
       UNSTABLE_corner: corner,
       UNSTABLE_headingFont: headingFont,
+      UNSTABLE_accent: accent,
     }),
-    [themeName, mode, targetWindow, themeNext, corner, headingFont]
+    [themeName, mode, targetWindow, themeNext, corner, headingFont, accent]
   );
 
   const themedChildren = createThemedChildren({
@@ -235,6 +245,7 @@ function InternalSaltProvider({
     themeNext,
     corner: corner,
     headingFont,
+    accent,
   });
 
   useIsomorphicLayoutEffect(() => {
@@ -252,6 +263,7 @@ function InternalSaltProvider({
           targetWindow.document.documentElement.dataset.corner = corner;
           targetWindow.document.documentElement.dataset.headingFont =
             headingFont;
+          targetWindow.document.documentElement.dataset.accent = accent;
         }
       } else {
         console.warn(
@@ -270,6 +282,7 @@ function InternalSaltProvider({
         if (themeNext) {
           delete targetWindow.document.documentElement.dataset.corner;
           delete targetWindow.document.documentElement.dataset.headingFont;
+          delete targetWindow.document.documentElement.dataset.accent;
         }
       }
     };
@@ -283,6 +296,7 @@ function InternalSaltProvider({
     themeNext,
     corner,
     headingFont,
+    accent,
   ]);
 
   const matchedBreakpoints = useMatchedBreakpoints(breakpoints);
@@ -320,6 +334,7 @@ export function SaltProvider({
 interface UNSTABLE_SaltProviderNextAdditionalProps {
   corner?: UNSTABLE_Corner;
   headingFont?: UNSTABLE_HeadingFont;
+  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/src/theme/index.ts

@@ -1,3 +1,4 @@
+export * from "./Accent";
 export * from "./Density";
 export * from "./HeadingFont";
 export * from "./Theme";

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

@@ -163,3 +163,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);
@@ -14,7 +14,7 @@
   --salt-palette-accent-action-active: var(--salt-color-blue-800);
 }
 
-.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);
@@ -29,3 +29,31 @@
   --salt-palette-accent-action-hover: var(--salt-color-blue-600);
   --salt-palette-accent-action-active: var(--salt-color-blue-800);
 }
+
+.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-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);
+}