feat: new dark mode colors and tokens (#554)

.storybook/preview.js

@@ -56,7 +56,7 @@ const Panel = styled("div", {
 
 function GlobalStyles(props) {
   globalStyles();
-  return <Panel>{props.children}</Panel>;
+  return <Panel css={props.css}>{props.children}</Panel>;
 }
 
 function DarkPanel(props) {
@@ -73,8 +73,8 @@ export const decorators = [
   (Story, Context) => {
     if (Context.story.includes("Interactions")) {
       return (
-        <GlobalStyles>
-          <Story theme="light" />;
+        <GlobalStyles css={{ width: "auto" }}>
+          <Story theme="light" />
         </GlobalStyles>
       );
     }

ui/carousel/src/play.stories.jsx

@@ -700,6 +700,14 @@ const InternalFocusTemplate = () => {
 
 export const InternalFocusInteractions = InternalFocusTemplate.bind({});
 
+function hasClassContaining(el, str) {
+  return Array.from(el.classList).findIndex((cls) =>
+    cls.toLowerCase().includes(str)
+  ) !== -1
+    ? true
+    : false;
+}
+
 InternalFocusInteractions.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await userEvent.tab();
@@ -712,14 +720,14 @@ InternalFocusInteractions.play = async ({ canvasElement }) => {
   const button1 = canvas.getByText("Action 1");
   await userEvent.click(button1);
   await waitFor(() =>
-    expect(button1).toHaveClass("wpds-c-kSOqLF-bywHgD-variant-primary")
+    expect(hasClassContaining(button1, "variant-primary")).toBe(true)
   );
   const button2 = canvas.getByText("Action 2");
   await userEvent.click(button2);
   await waitFor(() =>
-    expect(button2).toHaveClass("wpds-c-kSOqLF-bywHgD-variant-primary")
+    expect(hasClassContaining(button2, "variant-primary")).toBe(true)
   );
   await userEvent.click(canvas.getAllByRole("main")[0]);
   const item2 = canvas.getByLabelText("3 of 10");
-  expect(item2).not.toHaveClass("wpds-c-lnwwct-jEMdsi-focused-true");
+  expect(hasClassContaining(item2, "focused-true")).not.toBe(true);
 };

ui/theme/build/transform.js

@@ -8,6 +8,7 @@ const dark = {};
 const light = {};
 const staticColors = {};
 const theme = {};
+const themeDark = {};
 const sizes = {};
 const spaces = {};
 const radii = {};
@@ -80,7 +81,7 @@ function handleColor() {
 				loopAndAdd(Tokens.color[colorGroup], staticColors, "-static");
 				break;
 			case "theme":
-				loopAndAdd(Tokens.color[colorGroup], theme);
+				loopAndAddTheme(Tokens.color[colorGroup]);
 				break;
 			default:
 				break;
@@ -109,6 +110,28 @@ function loopAndAdd(tokens, ToObject, hyphen) {
 	}
 }
 
+
+/** Sets up theme tokens */
+function loopAndAddTheme(tokens) {
+	for (var token in tokens) {
+		//Must contain both a dark and light value. In a future update we should avoid this
+		if (tokens[token].hasOwnProperty("value") && tokens[token].hasOwnProperty("valueDark")) {
+			let value = tokens[token].value;
+			let darkValue = tokens[token].valueDark;
+			//Checks to see if it is a reference to another token
+			if (value[0] == "{") {
+				value = value.substring(1, value.length - 1);
+				darkValue = darkValue.substring(1, darkValue.length - 1);
+				theme[`${token}`] = `$${value}`;
+				themeDark[`${token}`] = `$${darkValue}`;
+
+			} else {
+				//Should have a reference token and not a tier 1 token
+				return;
+			}
+		}
+	}
+}
 /** Looks up the value of a token alias path depth supported up to 3 token[1][2][3]*/
 function lookupValue(lookUpToken) {
 	const path = lookUpToken.split(".");
@@ -142,6 +165,7 @@ function createTransformTokens() {
 			export const dark=${JSON.stringify(dark)}
 			export const staticColors=${JSON.stringify(staticColors)}
 			export const defaultTheme=${JSON.stringify(theme)}
+			export const darkTheme=${JSON.stringify(themeDark)}
 			export const sizes=${JSON.stringify(sizes)}
 			export const spaces=${JSON.stringify(spaces)}
 			export const radii=${JSON.stringify(radii)}

ui/theme/src/play.stories.tsx

@@ -242,8 +242,8 @@ function sleep(ms) {
   return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
-const activeStyle = `background-color: ${theme.colors.green100.value}`;
-const inactiveStyle = `background-color: ${theme.colors.gray300.value}`;
+const activeStyle = `background-color: ${theme.colors.green80.value}`;
+const inactiveStyle = `background-color: ${theme.colors.alpha400.value}`;
 
 const allModes = {
   sm: {

ui/theme/src/stitches.config.ts

@@ -117,7 +117,7 @@ export const darkTheme = createTheme(`${prefix}-dark`, {
   colors: {
     ...tokens.dark,
     ...tokens.staticColors,
-    ...tokens.defaultTheme,
+    ...tokens.darkTheme,
   },
 });