@sit-onyx/storybook-utils 1.0.0-beta.91 → 1.0.0-beta.93

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/storybook-utils",
   "description": "Storybook utilities for Vue",
-  "version": "1.0.0-beta.91",
+  "version": "1.0.0-beta.93",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",

package/src/preview.ts

@@ -100,7 +100,7 @@ export const createPreview = <T extends Preview = Preview>(
         disable: true,
       },
       viewport: {
-        viewports: ONYX_BREAKPOINTS,
+        options: ONYX_BREAKPOINTS,
       },
     },
   } satisfies Preview;

package/src/style.css

@@ -40,18 +40,18 @@
  */
 :where(:root),
 .onyx-theme-default {
-  --onyx-color-steel-100: #fafbfc;
-  --onyx-color-steel-200: #e3eaf0;
-  --onyx-color-steel-300: #c9d6e0;
-  --onyx-color-steel-400: #9db3c4;
-  --onyx-color-steel-500: #7392aa;
-  --onyx-color-steel-600: #506e84;
-  --onyx-color-steel-700: #3e596e;
-  --onyx-color-steel-800: #31495c;
-  --onyx-color-steel-900: #22384a;
-  --onyx-color-steel-1000: #11212d;
-  --onyx-color-steel-1100: #081723;
-  --onyx-color-steel-1200: #000e19;
+  --onyx-color-neutral-steel-100: #fafbfc;
+  --onyx-color-neutral-steel-200: #e3eaf0;
+  --onyx-color-neutral-steel-300: #c9d6e0;
+  --onyx-color-neutral-steel-400: #9db3c4;
+  --onyx-color-neutral-steel-500: #7392aa;
+  --onyx-color-neutral-steel-600: #506e84;
+  --onyx-color-neutral-steel-700: #3e596e;
+  --onyx-color-neutral-steel-800: #31495c;
+  --onyx-color-neutral-steel-900: #22384a;
+  --onyx-color-neutral-steel-1000: #11212d;
+  --onyx-color-neutral-steel-1100: #081723;
+  --onyx-color-neutral-steel-1200: #000e19;
   --onyx-color-themed-primary-100: #e8fcfc;
   --onyx-color-themed-primary-200: #bbeaed;
   --onyx-color-themed-primary-300: #79dde2;

package/src/theme.ts

@@ -3,6 +3,7 @@ import {
   type OnyxBreakpoint,
 } from "@sit-onyx/shared/breakpoints";
 import { create, type ThemeVars } from "storybook/internal/theming";
+import type { Viewport } from "storybook/internal/viewport";
 
 export type BrandDetails = Pick<ThemeVars, "brandTitle" | "brandImage" | "brandUrl">;
 
@@ -19,8 +20,7 @@ export const getCustomProperty = (property: string, el: Element = document.body)
  * @see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart
  */
 export const createTheme = (base: "light" | "dark" = "light", brandDetails?: BrandDetails) => {
-  const primaryColor = getCustomProperty("--onyx-color-base-primary-500");
-
+  const primaryColor = getCustomProperty("--onyx-color-onyx-500");
   return create({
     brandTitle: brandDetails?.brandTitle,
     brandUrl: brandDetails?.brandUrl,
@@ -44,20 +44,20 @@ export const createTheme = (base: "light" | "dark" = "light", brandDetails?: Bra
 const getLightTheme = (): Partial<ThemeVars> => {
   return defineTheme({
     background: getCustomProperty("--onyx-color-universal-grayscale-white"),
-    contentBackground: getCustomProperty("--onyx-color-steel-100"),
-    text: getCustomProperty("--onyx-color-steel-700"),
-    textMuted: getCustomProperty("--onyx-color-steel-600"),
-    border: getCustomProperty("--onyx-color-steel-300"),
+    contentBackground: getCustomProperty("--onyx-color-neutral-steel-100"),
+    text: getCustomProperty("--onyx-color-neutral-steel-700"),
+    textMuted: getCustomProperty("--onyx-color-neutral-steel-600"),
+    border: getCustomProperty("--onyx-color-neutral-steel-300"),
   });
 };
 
 const getDarkTheme = (): Partial<ThemeVars> => {
   return defineTheme({
-    background: getCustomProperty("--onyx-color-steel-1100"),
-    contentBackground: getCustomProperty("--onyx-color-steel-1200"),
-    text: getCustomProperty("--onyx-color-steel-200"),
-    textMuted: getCustomProperty("--onyx-color-steel-400"),
-    border: getCustomProperty("--onyx-color-steel-900"),
+    background: getCustomProperty("--onyx-color-neutral-steel-1100"),
+    contentBackground: getCustomProperty("--onyx-color-neutral-steel-1200"),
+    text: getCustomProperty("--onyx-color-neutral-steel-200"),
+    textMuted: getCustomProperty("--onyx-color-neutral-steel-400"),
+    border: getCustomProperty("--onyx-color-neutral-steel-900"),
   });
 };
 
@@ -100,20 +100,26 @@ const defineTheme = (colors: {
 export const ONYX_BREAKPOINTS = Object.entries(RAW_ONYX_BREAKPOINTS).reduce(
   (obj, [name, width]) => {
     const breakpoint = name as OnyxBreakpoint;
-    obj[breakpoint] = { name: breakpoint, styles: { width: `${width}px`, height: "100%" } };
+
+    const TYPES: Record<OnyxBreakpoint, Viewport["type"]> = {
+      "2xs": "mobile",
+      xs: "mobile",
+      sm: "tablet",
+      md: "tablet",
+      lg: "desktop",
+      xl: "desktop",
+    };
+
+    obj[breakpoint] = {
+      name: breakpoint,
+      styles: { width: `${width}px`, height: "100%" },
+      type: TYPES[breakpoint],
+    };
     return obj;
   },
-  {} as Record<OnyxBreakpoint, StorybookBreakpoint>,
+  {} as Record<OnyxBreakpoint, Viewport>,
 );
 
-export type StorybookBreakpoint = {
-  name: OnyxBreakpoint;
-  styles: {
-    width: string;
-    height: string;
-  };
-};
-
 /**
  * Converts a rem string into a numeric value with a rem base of 16.
  * @example "1rem" => 16