Merge pull request #12 from rangle/design/4.0.0-fix-2

feat(design-tokens): Changes to Design Tokens
rangle · Nov 27, 2024 · ec9a731 · ec9a731
2 parents 1191bf4 + 74c3973
commit ec9a731
Show file tree

Hide file tree

Showing 7 changed files with 201 additions and 791 deletions.
diff --git a/apps/demo/.storybook/preview.ts b/apps/demo/.storybook/preview.ts
@@ -11,35 +11,46 @@ const preview: Preview = {
   },
   globalTypes: {
     brands: {
-      name: 'Brands',
-      description: 'Design System Supported Brands',
-      defaultValue: 'Brand 1',
+      name: "Brands",
+      description: "Design System Supported Brands",
+      defaultValue: "Brand 1",
       toolbar: {
-        title: 'Brands',
-        icon: 'paintbrush',
-        items: ['brand-1'],
+        title: "Brands",
+        icon: "paintbrush",
+        items: ["brand-1"],
         dynamicTitle: true,
       },
     },
     modes: {
-      name: 'Color modes',
-      description: 'Color mode for components',
-      defaultValue: 'light',
+      name: "Color modes",
+      description: "Color mode for components",
+      defaultValue: "light",
       toolbar: {
-        title: 'Theme',
-        icon: 'circlehollow',
-        items: ['light', 'dark'],
+        title: "Theme",
+        icon: "circlehollow",
+        items: ["light", "dark"],
         dynamicTitle: true,
       },
     },
     density: {
-      name: 'Spacing Semantics',
-      description: 'Spacing Density for Components',
-      defaultValue: 'default',
+      name: "Spacing Semantics",
+      description: "Spacing Density for Components",
+      defaultValue: "default",
       toolbar: {
-        title: 'Density',
-        icon: 'collapse',
-        items: ['default', 'compact'],
+        title: "Density",
+        icon: "collapse",
+        items: ["default", "compact"],
+        dynamicTitle: true,
+      },
+    },
+    breakpoints: {
+      name: "Breakpoints",
+      description: "Breakpoints for Components",
+      defaultValue: "default",
+      toolbar: {
+        title: "Breakpoint",
+        icon: "mobile",
+        items: ["desktop", "mobile"],
         dynamicTitle: true,
       },
     },

diff --git a/apps/demo/.storybook/theme.tsx b/apps/demo/.storybook/theme.tsx
@@ -1,20 +1,25 @@
-import React, { useEffect } from 'react';
-import type { Decorator } from '@storybook/react';
+import React, { useEffect } from "react";
+import type { Decorator } from "@storybook/react";
 
-const DEFAULT_BODY_CLASSES = ['sb-main-padded sb-show-main'];
+const DEFAULT_BODY_CLASSES = ["sb-main-padded sb-show-main"];
+
+import "@repo/foundations/styles";
 
 export const ThemeDecorator: Decorator = (Story, context) => {
-    const brand = context.globals.brands;
-    const mode = context.globals.modes;
-    const density = context.globals.density;
-    useEffect(() => {
-        document.body.classList.value = [
-            DEFAULT_BODY_CLASSES,
-            brand,
-            mode,
-            density,
-            document.body.style.backgroundColor = 'var(--semantic-static-color-background-default-default)'
-        ].join(' ');
-    }, [brand, mode, density]);
-    return <Story />;
+  const brand = context.globals.brands;
+  const mode = context.globals.modes;
+  const density = context.globals.density;
+  const breakpoint = context.globals.breakpoints;
+  useEffect(() => {
+    document.body.classList.value = [
+      DEFAULT_BODY_CLASSES,
+      brand,
+      mode,
+      density,
+      breakpoint,
+      (document.body.style.backgroundColor =
+        "var(--semantic-static-color-background-default-default)"),
+    ].join(" ");
+  }, [brand, mode, density, breakpoint]);
+  return <Story />;
 };
diff --git a/packages/foundations/package.json b/packages/foundations/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@repo/foundations",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "",
   "main": "index.js",
   "exports": {