Update dev environment

mimshins · Apr 7, 2024 · b7993ed · b7993ed
1 parent 208b4b2
commit b7993ed
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 57 deletions.
diff --git a/app/Tokens.tsx b/app/Tokens.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import * as React from "react";
+import { VariantSelector } from "./theming";
+
+type Props = {
+  children?: React.ReactNode;
+};
+
+const Tokens = (props: Props) => {
+  const { children } = props;
+
+  return <VariantSelector variant="light">{children}</VariantSelector>;
+};
+
+export default Tokens;
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,17 +1,10 @@
-"use client";
-
 import * as React from "react";
-import { getVariablesAsStyles, theme, ThemeProvider } from "./theming";
-
-const ssrCssVariables = getVariablesAsStyles(theme);
+import Tokens from "./Tokens";
 
 const RootLayout = (props: { children: React.ReactNode }) => (
-  <html
-    lang="en"
-    style={ssrCssVariables}
-  >
+  <html lang="en">
     <body>
-      <ThemeProvider theme={theme}>{props.children}</ThemeProvider>
+      <Tokens>{props.children}</Tokens>
     </body>
   </html>
 );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,14 +1,15 @@
 "use client";
 
-import { ThemeProvider } from "./theming";
+import { VariantSelector } from "./theming";
 
 const Page = () => {
   return (
-    <ThemeProvider
-      theme={{ colors: { neutral: { text: { tertiary: "#000" } } } }}
-    >
-      <h1>Dev Page</h1>
-    </ThemeProvider>
+    <>
+      <span>Light</span>
+      <VariantSelector variant="dark">
+        <span>Dark</span>
+      </VariantSelector>
+    </>
   );
 };
 

diff --git a/app/theming.ts b/app/theming.ts
@@ -1,49 +1,64 @@
-import { createTheming, defaultCssVariableGenerator } from "../lib";
+import { create } from "../lib";
 
-export const theme = {
-  colors: {
-    primary: {
-      base: "1",
-      hover: "2",
-      active: "3",
-      disabled: "4",
-    },
-    secondary: {
-      base: "5",
-      hover: "6",
-      active: "7",
-      disabled: "8",
+const variants = {
+  dark: {
+    colors: {
+      primary: {
+        base: "d1",
+        hover: "d2",
+        active: "d3",
+        disabled: "d4",
+      },
+      secondary: {
+        base: "d5",
+        hover: "d6",
+        active: "d7",
+        disabled: "d8",
+      },
+      neutral: {
+        text: {
+          base: "d9",
+          secondary: "d10",
+          tertiary: "d11",
+        },
+        background: {
+          base: "d12",
+          container: "d13",
+          elevated: "d14",
+        },
+      },
     },
-    neutral: {
-      text: {
-        base: "9",
-        secondary: "10",
-        tertiary: "11",
+    boolean: true,
+  },
+  light: {
+    colors: {
+      primary: {
+        base: "l1",
+        hover: "l2",
+        active: "l3",
+        disabled: "l4",
       },
-      background: {
-        base: "12",
-        container: "13",
-        elevated: "14",
+      secondary: {
+        base: "l5",
+        hover: "l6",
+        active: "l7",
+        disabled: "l8",
+      },
+      neutral: {
+        text: {
+          base: "l9",
+          secondary: "l10",
+          tertiary: "l11",
+        },
+        background: {
+          base: "l12",
+          container: "l13",
+          elevated: "l14",
+        },
       },
     },
+    boolean: false,
   },
-  dark: 1,
-};
-
-const tokenFamilyNameMap: Record<keyof typeof theme, string> = {
-  colors: "color",
-  dark: "dark",
 };
 
-export const { ThemeProvider, useTheme, getVariablesAsStyles } = createTheming(
-  theme,
-  {
-    initializeVariablesOnHTMLRoot: true,
-    cssVariableGenerator: (tokenFamilyKey, tokenPath, tokenValue) =>
-      defaultCssVariableGenerator(
-        tokenFamilyNameMap[tokenFamilyKey].toLowerCase(),
-        tokenPath,
-        tokenValue,
-      ),
-  },
-);
+export const { VariantSelector, useTokens } = create(variants);