@sit-onyx/storybook-utils 1.0.0-alpha.100 → 1.0.0-alpha.102
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +2 -2
- package/src/theme.ts +16 -43
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sit-onyx/storybook-utils",
|
|
3
3
|
"description": "Storybook utilities for Vue",
|
|
4
|
-
"version": "1.0.0-alpha.
|
|
4
|
+
"version": "1.0.0-alpha.102",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "Schwarz IT KG",
|
|
7
7
|
"license": "Apache-2.0",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@storybook/theming": ">= 8.0.0",
|
|
29
29
|
"@storybook/vue3": ">= 8.0.0",
|
|
30
30
|
"storybook-dark-mode": ">= 4",
|
|
31
|
-
"sit-onyx": "^1.0.0-alpha.
|
|
31
|
+
"sit-onyx": "^1.0.0-alpha.99"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"deepmerge-ts": "^5.1.0"
|
package/src/theme.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import type { ThemeVars, ThemeVarsPartial } from "@storybook/theming";
|
|
2
2
|
import { create } from "@storybook/theming/create";
|
|
3
3
|
import onyxVariables from "sit-onyx/src/styles/variables-onyx.json";
|
|
4
|
+
import { ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS, type OnyxBreakpoint } from "sit-onyx/types";
|
|
4
5
|
import onyxLogo from "./assets/logo-onyx.svg";
|
|
5
6
|
|
|
6
7
|
/**
|
|
@@ -90,50 +91,22 @@ const defineTheme = (colors: {
|
|
|
90
91
|
};
|
|
91
92
|
|
|
92
93
|
/** All available Storybook breakpoints / viewports supported by onyx. */
|
|
93
|
-
export const ONYX_BREAKPOINTS =
|
|
94
|
-
|
|
95
|
-
name
|
|
96
|
-
styles: {
|
|
97
|
-
|
|
98
|
-
height: "100%",
|
|
99
|
-
},
|
|
94
|
+
export const ONYX_BREAKPOINTS = Object.entries(RAW_ONYX_BREAKPOINTS).reduce(
|
|
95
|
+
(obj, [name, width]) => {
|
|
96
|
+
const breakpoint = name as OnyxBreakpoint;
|
|
97
|
+
obj[breakpoint] = { name: breakpoint, styles: { width: `${width}px`, height: "100%" } };
|
|
98
|
+
return obj;
|
|
100
99
|
},
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
width: "768px",
|
|
112
|
-
height: "100%",
|
|
113
|
-
},
|
|
114
|
-
},
|
|
115
|
-
md: {
|
|
116
|
-
name: "md",
|
|
117
|
-
styles: {
|
|
118
|
-
width: "992px",
|
|
119
|
-
height: "100%",
|
|
120
|
-
},
|
|
121
|
-
},
|
|
122
|
-
lg: {
|
|
123
|
-
name: "lg",
|
|
124
|
-
styles: {
|
|
125
|
-
width: "1440px",
|
|
126
|
-
height: "100%",
|
|
127
|
-
},
|
|
128
|
-
},
|
|
129
|
-
xl: {
|
|
130
|
-
name: "xl",
|
|
131
|
-
styles: {
|
|
132
|
-
width: "1920px",
|
|
133
|
-
height: "100%",
|
|
134
|
-
},
|
|
135
|
-
},
|
|
136
|
-
} as const;
|
|
100
|
+
{} as Record<OnyxBreakpoint, StorybookBreakpoint>,
|
|
101
|
+
);
|
|
102
|
+
|
|
103
|
+
export type StorybookBreakpoint = {
|
|
104
|
+
name: OnyxBreakpoint;
|
|
105
|
+
styles: {
|
|
106
|
+
width: string;
|
|
107
|
+
height: string;
|
|
108
|
+
};
|
|
109
|
+
};
|
|
137
110
|
|
|
138
111
|
/**
|
|
139
112
|
* Converts a rem string into a numeric value with a rem base of 16.
|