@sit-onyx/storybook-utils 1.0.0-beta.70 → 1.0.0-beta.71

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.
Files changed (6) hide show
  1. package/package.json +7 -5
  2. package/src/preview.ts +10 -7
  3. package/src/style.css +161 -0
  4. package/src/theme.ts +33 -26
  5. package/src/assets/logo-onyx.svg +0 -51
  6. package/src/index.css +0 -37
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-beta.70",
4
+ "version": "1.0.0-beta.71",
5
5
  "type": "module",
6
6
  "author": "Schwarz IT KG",
7
7
  "license": "Apache-2.0",
@@ -11,7 +11,7 @@
11
11
  "types": "./src/index.ts",
12
12
  "exports": {
13
13
  ".": "./src/index.ts",
14
- "./style.css": "./src/index.css"
14
+ "./style.css": "./src/style.css"
15
15
  },
16
16
  "homepage": "https://onyx.schwarz/development/packages/storybook-utils.html",
17
17
  "repository": {
@@ -26,14 +26,16 @@
26
26
  "@storybook/vue3": ">= 8.3.0",
27
27
  "storybook": ">= 8.3.0",
28
28
  "storybook-dark-mode": ">= 4",
29
- "@sit-onyx/icons": "^1.0.0-beta.7",
30
- "sit-onyx": "^1.0.0-beta.63"
29
+ "@sit-onyx/shared": "^0.0.0",
30
+ "@sit-onyx/icons": "^1.0.0-beta.7"
31
31
  },
32
32
  "dependencies": {
33
33
  "deepmerge-ts": "^7.1.3"
34
34
  },
35
35
  "devDependencies": {
36
- "vue": "3.5.12"
36
+ "vue": "3.5.12",
37
+ "@sit-onyx/shared": "^0.0.0",
38
+ "@sit-onyx/icons": "^1.0.0-beta.7"
37
39
  },
38
40
  "scripts": {
39
41
  "build": "tsc --noEmit",
package/src/preview.ts CHANGED
@@ -7,12 +7,7 @@ import { addons } from "storybook/internal/preview-api";
7
7
  import type { ThemeVars } from "storybook/internal/theming";
8
8
  import { enhanceEventArgTypes } from "./actions";
9
9
  import { requiredGlobalType, withRequired } from "./required";
10
- import { ONYX_BREAKPOINTS, createTheme } from "./theme";
11
-
12
- const themes = {
13
- light: createTheme(),
14
- dark: createTheme({ base: "dark" }),
15
- } as const;
10
+ import { ONYX_BREAKPOINTS, createTheme, type BrandDetails } from "./theme";
16
11
 
17
12
  /**
18
13
  * Creates a default Storybook preview configuration for 'onyx' with the following features:
@@ -40,7 +35,15 @@ const themes = {
40
35
  * export default preview;
41
36
  * ```
42
37
  */
43
- export const createPreview = <T extends Preview = Preview>(overrides?: T) => {
38
+ export const createPreview = <T extends Preview = Preview>(
39
+ brandDetails: BrandDetails,
40
+ overrides?: T,
41
+ ) => {
42
+ const themes = {
43
+ light: createTheme("light", brandDetails),
44
+ dark: createTheme("dark", brandDetails),
45
+ } as const;
46
+
44
47
  const defaultPreview = {
45
48
  argTypesEnhancers: [enhanceEventArgTypes],
46
49
  globalTypes: {
package/src/style.css ADDED
@@ -0,0 +1,161 @@
1
+ .onyx-disclaimer {
2
+ border-radius: 0.5rem;
3
+ padding: 1rem;
4
+ line-height: 1.5rem;
5
+ margin: 1rem 0;
6
+
7
+ /* same color as VitePress var(--vp-c-tip-soft) */
8
+ background-color: color-mix(in srgb, var(--onyx-color-base-info-400) 25%, transparent);
9
+ }
10
+
11
+ .onyx-disclaimer__title {
12
+ font-weight: 600;
13
+ margin-bottom: 0.5rem;
14
+ }
15
+
16
+ .onyx-disclaimer p {
17
+ margin: 0;
18
+ }
19
+
20
+ /* the Storybook table of content headline is always black so we need to manually set it for the dark mode */
21
+ #storybook-docs .sbdocs-wrapper > div:nth-child(2) {
22
+ /* same as Storybook color "textMuted" inside ./theme.ts */
23
+ color: var(--onyx-color-text-icons-neutral-medium);
24
+ }
25
+
26
+ /* To prevent bg flashing when changing between elements in darkmode */
27
+ .sb-preparing-story,
28
+ .sb-preparing-docs {
29
+ background-color: transparent;
30
+ }
31
+ /* removed placeholder for the same reason */
32
+ .sb-previewBlock,
33
+ .sb-argstableBlock {
34
+ display: none;
35
+ }
36
+
37
+ /*
38
+ Copy of ../sit-onyx/src/styles/variables/themes/onyx.css
39
+ TODO: Find a way to automate this
40
+ */
41
+ :where(:root),
42
+ .onyx-theme-default {
43
+ --onyx-color-themed-neutral-100: #fafbfc;
44
+ --onyx-color-themed-neutral-200: #e3eaf0;
45
+ --onyx-color-themed-neutral-300: #c9d6e0;
46
+ --onyx-color-themed-neutral-400: #9db3c4;
47
+ --onyx-color-themed-neutral-500: #7392aa;
48
+ --onyx-color-themed-neutral-600: #506e84;
49
+ --onyx-color-themed-neutral-700: #3e596e;
50
+ --onyx-color-themed-neutral-800: #31495c;
51
+ --onyx-color-themed-neutral-900: #22384a;
52
+ --onyx-color-themed-neutral-1000: #11212d;
53
+ --onyx-color-themed-neutral-1100: #081723;
54
+ --onyx-color-themed-neutral-1200: #000e19;
55
+ --onyx-color-themed-primary-100: #e8fcfc;
56
+ --onyx-color-themed-primary-200: #bbeaed;
57
+ --onyx-color-themed-primary-300: #79dde2;
58
+ --onyx-color-themed-primary-400: #3dd0d8;
59
+ --onyx-color-themed-primary-500: #00c3cd;
60
+ --onyx-color-themed-primary-600: #00adb5;
61
+ --onyx-color-themed-primary-700: #00969d;
62
+ --onyx-color-themed-primary-800: #008085;
63
+ --onyx-color-themed-primary-900: #00696e;
64
+ --onyx-color-themed-primary-1000: #005356;
65
+ --onyx-color-themed-primary-1100: #003c3e;
66
+ --onyx-color-themed-primary-1200: #002626;
67
+ --onyx-color-themed-secondary-100: var(--onyx-color-themed-primary-100);
68
+ --onyx-color-themed-secondary-200: var(--onyx-color-themed-primary-200);
69
+ --onyx-color-themed-secondary-300: var(--onyx-color-themed-primary-300);
70
+ --onyx-color-themed-secondary-400: var(--onyx-color-themed-primary-400);
71
+ --onyx-color-themed-secondary-500: var(--onyx-color-themed-primary-500);
72
+ --onyx-color-themed-secondary-600: var(--onyx-color-themed-primary-600);
73
+ --onyx-color-themed-secondary-700: var(--onyx-color-themed-primary-700);
74
+ --onyx-color-themed-secondary-800: var(--onyx-color-themed-primary-800);
75
+ --onyx-color-themed-secondary-900: var(--onyx-color-themed-primary-900);
76
+ --onyx-color-themed-secondary-1000: var(--onyx-color-themed-primary-1000);
77
+ --onyx-color-themed-secondary-1100: var(--onyx-color-themed-primary-1100);
78
+ --onyx-color-themed-secondary-1200: var(--onyx-color-themed-primary-1200);
79
+ --onyx-color-universal-grayscale-black: #000000;
80
+ --onyx-color-universal-grayscale-white: #ffffff;
81
+ --onyx-color-universal-green-100: #ecf8f2;
82
+ --onyx-color-universal-green-200: #c6e4d5;
83
+ --onyx-color-universal-green-300: #98d1b3;
84
+ --onyx-color-universal-green-400: #6ebe94;
85
+ --onyx-color-universal-green-500: #44aa75;
86
+ --onyx-color-universal-green-600: #3b9b69;
87
+ --onyx-color-universal-green-700: #328c5e;
88
+ --onyx-color-universal-green-800: #297d52;
89
+ --onyx-color-universal-green-900: #216d46;
90
+ --onyx-color-universal-green-1000: #185e3a;
91
+ --onyx-color-universal-green-1100: #064023;
92
+ --onyx-color-universal-green-1200: #064023;
93
+ --onyx-color-universal-orange-100: #faf6f2;
94
+ --onyx-color-universal-orange-200: #f8e7d8;
95
+ --onyx-color-universal-orange-300: #f6d1b1;
96
+ --onyx-color-universal-orange-400: #f4b57e;
97
+ --onyx-color-universal-orange-500: #f2994a;
98
+ --onyx-color-universal-orange-600: #d98841;
99
+ --onyx-color-universal-orange-700: #bf7737;
100
+ --onyx-color-universal-orange-800: #a6662e;
101
+ --onyx-color-universal-orange-900: #8c5625;
102
+ --onyx-color-universal-orange-1000: #73451c;
103
+ --onyx-color-universal-orange-1100: #593412;
104
+ --onyx-color-universal-orange-1200: #402309;
105
+ --onyx-color-universal-purple-100: #f4f1f8;
106
+ --onyx-color-universal-purple-200: #dbcfea;
107
+ --onyx-color-universal-purple-300: #c2addc;
108
+ --onyx-color-universal-purple-400: #a98ace;
109
+ --onyx-color-universal-purple-500: #9068c0;
110
+ --onyx-color-universal-purple-600: #805aae;
111
+ --onyx-color-universal-purple-700: #704c9b;
112
+ --onyx-color-universal-purple-800: #603e89;
113
+ --onyx-color-universal-purple-900: #513077;
114
+ --onyx-color-universal-purple-1000: #412265;
115
+ --onyx-color-universal-purple-1100: #311452;
116
+ --onyx-color-universal-purple-1200: #210640;
117
+ --onyx-color-universal-quantitatives-100: #005795;
118
+ --onyx-color-universal-quantitatives-200: #ff8a25;
119
+ --onyx-color-universal-quantitatives-300: #e51718;
120
+ --onyx-color-universal-quantitatives-400: #36b16b;
121
+ --onyx-color-universal-quantitatives-500: #56d8fc;
122
+ --onyx-color-universal-quantitatives-600: #ff9990;
123
+ --onyx-color-universal-quantitatives-700: #ff3fd1;
124
+ --onyx-color-universal-quantitatives-800: #3c6475;
125
+ --onyx-color-universal-quantitatives-900: #c4bc81;
126
+ --onyx-color-universal-quantitatives-1000: #c3143f;
127
+ --onyx-color-universal-quantitatives-1100: #a09dfa;
128
+ --onyx-color-universal-quantitatives-1200: #00bcc6;
129
+ --onyx-color-universal-red-100: #fbefee;
130
+ --onyx-color-universal-red-200: #f1d2d1;
131
+ --onyx-color-universal-red-300: #e6a7a5;
132
+ --onyx-color-universal-red-400: #dc716e;
133
+ --onyx-color-universal-red-500: #d1332f;
134
+ --onyx-color-universal-red-600: #bc2d2a;
135
+ --onyx-color-universal-red-700: #a82824;
136
+ --onyx-color-universal-red-800: #93221f;
137
+ --onyx-color-universal-red-900: #7e1d19;
138
+ --onyx-color-universal-red-1000: #691714;
139
+ --onyx-color-universal-red-1100: #400c09;
140
+ --onyx-color-universal-red-1200: #400c09;
141
+ --onyx-number-radius-100: 0.125rem;
142
+ --onyx-number-radius-200: 0.25rem;
143
+ --onyx-number-radius-300: 0.5rem;
144
+ --onyx-number-radius-400: 1rem;
145
+ --onyx-number-radius-500: 2rem;
146
+ --onyx-number-radius-600: 62.5rem;
147
+ --onyx-number-spacing-0: 0rem;
148
+ --onyx-number-spacing-100: 0.125rem;
149
+ --onyx-number-spacing-200: 0.25rem;
150
+ --onyx-number-spacing-250: 0.375rem;
151
+ --onyx-number-spacing-300: 0.5rem;
152
+ --onyx-number-spacing-325: 0.625rem;
153
+ --onyx-number-spacing-350: 0.75rem;
154
+ --onyx-number-spacing-400: 1rem;
155
+ --onyx-number-spacing-500: 1.5rem;
156
+ --onyx-number-spacing-600: 2rem;
157
+ --onyx-number-spacing-700: 3rem;
158
+ --onyx-number-spacing-800: 4rem;
159
+ --onyx-number-spacing-900: 6rem;
160
+ --onyx-number-spacing-950: 8rem;
161
+ }
package/src/theme.ts CHANGED
@@ -1,33 +1,40 @@
1
- import { ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS, type OnyxBreakpoint } from "sit-onyx";
2
- import onyxVariables from "sit-onyx/themes/onyx.json";
3
- import { create, type ThemeVars, type ThemeVarsPartial } from "storybook/internal/theming";
4
- import onyxLogo from "./assets/logo-onyx.svg";
1
+ import {
2
+ ONYX_BREAKPOINTS as RAW_ONYX_BREAKPOINTS,
3
+ type OnyxBreakpoint,
4
+ } from "@sit-onyx/shared/breakpoints";
5
+ import { create, type ThemeVars } from "storybook/internal/theming";
6
+
7
+ export type BrandDetails = Required<Pick<ThemeVars, "brandTitle" | "brandImage" | "brandUrl">>;
8
+
9
+ /**
10
+ * Get the computed value for a CSS custom property.
11
+ * Per default the property value is taken from the body element.
12
+ */
13
+ export const getCustomProperty = (property: string, el: Element = document.body) =>
14
+ getComputedStyle(el).getPropertyValue(property);
5
15
 
6
16
  /**
7
17
  * Creates a custom theme for Storybook that uses onyx colors.
8
18
  *
9
19
  * @see https://storybook.js.org/docs/react/configure/theming#create-a-theme-quickstart
10
20
  */
11
- export const createTheme = (
12
- options?: Pick<ThemeVarsPartial, "base" | "brandTitle" | "brandImage" | "brandUrl">,
13
- ) => {
14
- const base = options?.base ?? "light";
15
- const primaryColor = onyxVariables["onyx-color-themed-primary-500"];
21
+ export const createTheme = (base: "light" | "dark" = "light", brandDetails?: BrandDetails) => {
22
+ const primaryColor = getCustomProperty("--onyx-color-themed-primary-500");
16
23
 
17
24
  return create({
18
- brandTitle: options?.brandTitle ?? "onyx Storybook",
19
- brandUrl: options?.brandUrl ?? "https://onyx.schwarz",
20
- brandImage: options?.brandImage ?? onyxLogo,
25
+ brandTitle: brandDetails?.brandTitle,
26
+ brandUrl: brandDetails?.brandUrl,
27
+ brandImage: brandDetails?.brandImage,
21
28
  brandTarget: "_blank",
22
- base: base,
29
+ base,
23
30
 
24
31
  // default theme values that are independent of the light/dark mode:
25
32
  colorPrimary: primaryColor,
26
- colorSecondary: onyxVariables["onyx-color-themed-secondary-500"],
33
+ colorSecondary: getCustomProperty("--onyx-color-themed-secondary-500"),
27
34
  barSelectedColor: primaryColor,
28
35
  barHoverColor: primaryColor,
29
- appBorderRadius: remToNumber(onyxVariables["onyx-number-radius-300"]),
30
- inputBorderRadius: remToNumber(onyxVariables["onyx-number-radius-200"]),
36
+ appBorderRadius: remToNumber(getCustomProperty("--onyx-number-radius-300")),
37
+ inputBorderRadius: remToNumber(getCustomProperty("--onyx-number-radius-200")),
31
38
 
32
39
  // custom colors depending on light/dark theme
33
40
  ...(base === "light" ? getLightTheme() : getDarkTheme()),
@@ -36,21 +43,21 @@ export const createTheme = (
36
43
 
37
44
  const getLightTheme = (): Partial<ThemeVars> => {
38
45
  return defineTheme({
39
- background: onyxVariables["onyx-color-universal-grayscale-white"],
40
- contentBackground: onyxVariables["onyx-color-themed-neutral-100"],
41
- text: onyxVariables["onyx-color-themed-neutral-700"],
42
- textMuted: onyxVariables["onyx-color-themed-neutral-600"],
43
- border: onyxVariables["onyx-color-themed-neutral-300"],
46
+ background: getCustomProperty("--onyx-color-universal-grayscale-white"),
47
+ contentBackground: getCustomProperty("--onyx-color-themed-neutral-100"),
48
+ text: getCustomProperty("--onyx-color-themed-neutral-700"),
49
+ textMuted: getCustomProperty("--onyx-color-themed-neutral-600"),
50
+ border: getCustomProperty("--onyx-color-themed-neutral-300"),
44
51
  });
45
52
  };
46
53
 
47
54
  const getDarkTheme = (): Partial<ThemeVars> => {
48
55
  return defineTheme({
49
- background: onyxVariables["onyx-color-themed-neutral-1100"],
50
- contentBackground: onyxVariables["onyx-color-themed-neutral-1200"],
51
- text: onyxVariables["onyx-color-themed-neutral-200"],
52
- textMuted: onyxVariables["onyx-color-themed-neutral-400"],
53
- border: onyxVariables["onyx-color-themed-neutral-900"],
56
+ background: getCustomProperty("--onyx-color-themed-neutral-1100"),
57
+ contentBackground: getCustomProperty("--onyx-color-themed-neutral-1200"),
58
+ text: getCustomProperty("--onyx-color-themed-neutral-200"),
59
+ textMuted: getCustomProperty("--onyx-color-themed-neutral-400"),
60
+ border: getCustomProperty("--onyx-color-themed-neutral-900"),
54
61
  });
55
62
  };
56
63
 
package/src/assets/logo-onyx.svg DELETED
@@ -1,51 +0,0 @@
1
- <?xml version="1.0" encoding="UTF-8" standalone="no"?>
2
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3
- <svg width="100%" height="100%" viewBox="0 0 128 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
4
- <g transform="matrix(0.0550098,0,0,0.0550098,-13.9945,-10.7764)">
5
- <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
6
- <path d="M1399.09,387.23L1457.51,302.52C1460.2,299.31 1462.88,297.7 1466.62,297.7L1526.12,297.7C1532.55,297.7 1534.17,301.99 1530.41,307.36L1437.8,438.74L1399.08,387.23L1399.09,387.23Z" style="fill:url(#_Linear1);fill-rule:nonzero;"/>
7
- </g>
8
- <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
9
- <path d="M1438.22,438.15L1541.14,584.49C1544.35,589.85 1542.75,594.14 1536.32,594.14L1476.82,594.14C1473.61,594.14 1470.92,592.53 1468.77,589.32L1399.09,488.54L1329.4,589.32C1327.27,592.53 1324.58,594.14 1321.36,594.14L1261.86,594.14C1255.43,594.14 1243.69,589.85 1247.45,584.49L1359.96,438.15L1267.76,307.36C1264,301.99 1265.62,297.7 1272.04,297.7L1331.54,297.7C1335.3,297.7 1338.51,299.31 1340.65,302.52L1399.08,387.23L1438.21,438.15L1438.22,438.15Z" style="fill:rgb(50,184,198);fill-rule:nonzero;"/>
10
- </g>
11
- </g>
12
- <g transform="matrix(0.0550098,0,0,0.0550098,-13.9945,-10.7764)">
13
- <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
14
- <path d="M520.64,448.86C520.64,569.47 497.06,599.49 389.85,599.49C282.63,599.49 259.58,569.47 259.58,448.86C259.58,327.71 282.63,297.69 389.85,297.69C497.05,297.69 520.64,327.71 520.64,448.86ZM324.45,448.86C324.45,524.44 332.49,543.21 389.85,543.21C447.2,543.21 455.24,524.44 455.24,448.86C455.24,372.74 447.19,353.98 389.85,353.98C332.48,353.98 324.45,372.74 324.45,448.86Z" style="fill:rgb(50,184,198);fill-rule:nonzero;"/>
15
- </g>
16
- <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
17
- <g>
18
- <clipPath id="_clip2">
19
- <path d="M519.88,480.88C520.37,470.95 520.64,460.4 520.64,448.86C520.64,327.71 497.06,297.69 389.85,297.69C388.74,297.69 367.12,297.69 351.01,299.54C339.69,316.68 332.26,373.81 327.82,394.43C328.83,388.21 332.15,379.08 334.43,374.91C339.44,365.73 346.24,361.39 354.56,358.41C368.59,353.39 384.37,353.98 389.86,353.98C447.22,353.98 455.26,372.74 455.26,448.86"/>
20
- </clipPath>
21
- <g clip-path="url(#_clip2)">
22
- <g transform="matrix(0.999067,0,0,0.995598,327.82,297.69)">
23
- <use id="_Image3_" serif:id="_Image3" xlink:href="#_Image3" x="0" y="0" width="193px" height="184px"/>
24
- </g>
25
- </g>
26
- </g>
27
- </g>
28
- </g>
29
- <g transform="matrix(0.0550098,0,0,0.0550098,-13.9945,-10.7764)">
30
- <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
31
- <path d="M662.36,353.99L724.46,353.99C774.85,353.99 787.16,357.2 787.16,436.54L787.16,588.77C787.16,594.14 789.85,596.82 795.21,596.82L843.46,596.82C848.82,596.82 852.03,594.14 852.03,588.77L852.03,424.75C852.03,312.71 824.69,297.7 725.52,297.7C707.79,297.7 685.61,297.9 662.72,299.33L662.36,353.99Z" style="fill:url(#_Linear4);fill-rule:nonzero;"/>
32
- </g>
33
- <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
34
- <path d="M662.8,306.45L662.8,588.77C662.8,594.14 660.12,596.82 654.76,596.82L605.45,596.82C600.08,596.82 597.94,594.14 597.94,588.77L597.94,314.86C597.94,307.89 600.62,307.35 605.45,306.28C623.63,302.59 643.45,300.48 662.79,299.28L662.79,306.45L662.8,306.45Z" style="fill:rgb(50,184,198);fill-rule:nonzero;"/>
35
- </g>
36
- </g>
37
- <g transform="matrix(0.0550098,0,0,0.0550098,-13.9945,-10.7764)">
38
- <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
39
- <path d="M1123.83,591.43C1100.93,595.16 1080.37,596.19 1055.33,596.19C956.8,596.19 931.78,562.64 931.78,455.06L931.78,307.02C931.78,301.69 934.44,299.03 939.77,299.03L988.23,299.03C993.56,299.03 996.23,301.69 996.23,307.02L996.23,446.01C996.23,522.16 1005.81,539.73 1065.46,539.73C1083.04,539.73 1104.87,539.2 1123.51,536.54L1123.84,591.43L1123.83,591.43Z" style="fill:url(#_Linear5);fill-rule:nonzero;"/>
40
- </g>
41
- <g transform="matrix(1.00003,0,0,1,-5.18689,1.4)">
42
- <path d="M1123.5,536.54L1123.5,307.02C1123.5,301.69 1126.16,299.03 1131.49,299.03L1179.96,299.03C1185.29,299.03 1187.95,301.69 1187.95,307.02L1187.95,576.49C1187.41,669.15 1169.31,702.7 1061.19,702.7C1025.52,702.7 1000.48,701.1 971.19,696.83C966.4,695.77 964.26,693.11 964.26,688.31L964.26,656.89C964.26,651.03 966.39,648.9 971.72,648.9L1057.46,648.9C1110.71,648.9 1123.49,636.12 1123.49,594.05L1123.49,536.54L1123.5,536.54Z" style="fill:rgb(50,184,198);fill-rule:nonzero;"/>
43
- </g>
44
- </g>
45
- <defs>
46
- <linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(133.32,0,0,133.32,1399.09,368.22)"><stop offset="0" style="stop-color:rgb(1,141,160);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(50,184,198);stop-opacity:1"/></linearGradient>
47
- <image id="_Image3" width="193px" height="184px" xlink:href="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCAC4AMEDAREAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAgAGAf/EABgQAQEBAQEAAAAAAAAAAAAAAAEAAhFh/8QAGQEBAQEBAQEAAAAAAAAAAAAAAAIBAwYH/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8Ayl7V8MUFBQUFBQUFAggQRphAwgQQIKQwgeSKMIGECCBhAggQWBhB3kUzFbkoKCgoKCgoEECCNMIEEDCBBSGEDCBhFGECCBhAggQWBhAgii5Bla3JQUFBQUFAggQRphAggYQIKQwgYQPJFGECCBhAggQWBhAgijCDvIMnW5KCgoKCgQQII0wgQQMIEFIYQMIHkijCBBAwgQQILAwgQRRhAggXIMhW5KCgoKBBAgjTCBBAwgQUhhAwijyQMIEEDCBBAgsDCBBFGECCBhB3nkGOrclBQUCCBBGmECCBhAgpDCBhFHkgYQIIGECCBBYGECCKMIEEDCBBAuUjF3VyUFAggQRphAggYQIKQwgYRR5IGECCBhAggQWBhAgijCBBAwgQQMKR3nkGJurkoEECCNMIEEDCBBSGEDCKPJAwgQQMIEECCwMIEEUYQIIGECCBhSGEHeQYa6uRBAgjTCBBAwgQUhhAwijyQMIEEDCBBAggYWBBFGECCBhAggYUhhAgg7yDDBdXIgjTCBBAwgQUhhAwijyQMIEEDCBBAggYWBBFGECCBhAggYUhhAggYQd5BhQurmYQIIGECCkMIGEUeSBhAggYQIIEEDCwIIowgQQMIEEDCkMIEEDCBBAuQYULq5kEDCBBSGEDCKPJAwgQQMIEECCBhYEEUYQIIGECCBhSEEDCBhAggYRpcgwgXVyMIEFIYQMIo8kDCBBAwgQQIIGFgQRRhAggYQIIGFIQQMIGECCBhGmEC5BhAurkQUhhA8kDCKMIEEDCBBAggYWBBFGECCBhAggYUhBAwgYQIIGEaYQIg7BhQrcjCBhAwiiCBhAggYQIIGFgQRRhAggYQIIGFIQQMIGECCBhGmECIOwUGICtyMIGEUQQMIEEDCBBYGECCKMIEEDCBBAwpCCBhAwgQQMI0wgRB2CgoMWFbkYRRBAwgQQMIEFgYQIIowgQQMIEEDCkIIGEDCBBAwjTCBEHYKCgoMcFaCCBhAggYQILAwgQRRhAggYQIIGFIQQMIGECCBhGmECIOwUFBQUGQCtBhAggYQILAwgQRRhAggYQIIGFIQQMIGECCBhGmECIOwUFBQUFBkwrQQQMIEFgYQIIowgQQMIEEDCkIIGEDCBBAwjTCBEHYKCgoKCgoMqFaDCBBYGECCKMIEEDCBBAwpCCBhAwgQQMI0wgRB2CgoKCgoKCgzAVoILAwgQRRhAggYQIIGFIQQMIGECCBhGmECIOwUFBQUFBQUFBmgqQYQIIowgQQMIEEDCkIIGECCB5IGEaYQIg7BQUFBQUFBQUFB//2Q=="/>
48
- <linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(35974.7,0,0,35974.7,126292,134082)"><stop offset="0" style="stop-color:rgb(1,141,160);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(50,184,198);stop-opacity:1"/></linearGradient>
49
- <linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(192.05,0,0,192.05,931.78,447.61)"><stop offset="0" style="stop-color:rgb(50,184,198);stop-opacity:1"/><stop offset="1" style="stop-color:rgb(1,141,160);stop-opacity:1"/></linearGradient>
50
- </defs>
51
- </svg>
package/src/index.css DELETED
@@ -1,37 +0,0 @@
1
- @import url("sit-onyx/themes/onyx.css");
2
-
3
- .onyx-disclaimer {
4
- border-radius: 0.5rem;
5
- padding: 1rem;
6
- line-height: 1.5rem;
7
- margin: 1rem 0;
8
-
9
- /* same color as VitePress var(--vp-c-tip-soft) */
10
- background-color: color-mix(in srgb, var(--onyx-color-base-info-400) 25%, transparent);
11
- }
12
-
13
- .onyx-disclaimer__title {
14
- font-weight: 600;
15
- margin-bottom: 0.5rem;
16
- }
17
-
18
- .onyx-disclaimer p {
19
- margin: 0;
20
- }
21
-
22
- /* the Storybook table of content headline is always black so we need to manually set it for the dark mode */
23
- #storybook-docs .sbdocs-wrapper > div:nth-child(2) {
24
- /* same as Storybook color "textMuted" inside ./theme.ts */
25
- color: var(--onyx-color-text-icons-neutral-medium);
26
- }
27
-
28
- /* To prevent bg flashing when changing between elements in darkmode */
29
- .sb-preparing-story,
30
- .sb-preparing-docs {
31
- background-color: transparent;
32
- }
33
- /* removed placeholder for the same reason */
34
- .sb-previewBlock,
35
- .sb-argstableBlock {
36
- display: none;
37
- }