@sit-onyx/storybook-utils 0.0.0-20250804145452

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from "./actions.js";
+export * from "./preview.js";
+export * from "./sbType.js";
+export * from "./theme.js";
+export * from "./types.js";

package/src/preview.spec.ts

@@ -0,0 +1,30 @@
+import { iconBellRing, iconCalendar, iconPlaceholder } from "@sit-onyx/icons";
+import { describe, expect, test } from "vitest";
+import { replaceAll, sourceCodeTransformer } from "./preview.js";
+
+describe("preview.ts", () => {
+  test("should transform source code and add icon/onyx imports", async () => {
+    // ACT
+    const sourceCode = await sourceCodeTransformer(`<template>
+<OnyxTest icon='${iconPlaceholder}' test='${iconBellRing}' :obj="{foo:'${replaceAll(iconCalendar, '"', "\\'")}'}" />
+<OnyxOtherComponent />
+<OnyxComp>Test</OnyxComp>
+</template>`);
+
+    // ASSERT
+    expect(sourceCode).toBe(`<script lang="ts" setup>
+import { OnyxComp, OnyxOtherComponent, OnyxTest } from "sit-onyx";
+import { iconBellRing, iconCalendar, iconPlaceholder } from "@sit-onyx/icons";
+</script>
+
+<template>
+  <OnyxTest
+    :icon="iconPlaceholder"
+    :test="iconBellRing"
+    :obj="{foo:iconCalendar}"
+  />
+  <OnyxOtherComponent />
+  <OnyxComp>Test</OnyxComp>
+</template>`);
+  });
+});

package/src/preview.ts

@@ -0,0 +1,234 @@
+import type { Preview } from "@storybook/vue3-vite";
+import { DARK_MODE_EVENT_NAME } from "@vueless/storybook-dark-mode";
+import { deepmerge } from "deepmerge-ts";
+import { DOCS_RENDERED } from "storybook/internal/core-events";
+import { addons } from "storybook/internal/preview-api";
+import type { ThemeVars } from "storybook/internal/theming";
+import { enhanceEventArgTypes } from "./actions.js";
+import { requiredGlobalType, withRequired } from "./required.js";
+import { ONYX_BREAKPOINTS, createTheme, type BrandDetails } from "./theme.js";
+
+/**
+ * Creates a default Storybook preview configuration for 'onyx' with the following features:
+ * - Improved controls (sorting and expanded controls so descriptions etc. are also shown in a single story)
+ * - Improved Vue-specific code highlighting (e.g. using `@` instead of `v-on:`)
+ * - Setup for dark mode (including docs page). Requires addon `@vueless/storybook-dark-mode` to be enabled in .storybook/main.ts file
+ * - Custom Storybook theme using onyx colors (light and dark mode)
+ * - Configure viewports / breakpoints as defined by onyx
+ * - Logs Vue emits as Storybook events
+ *
+ * @param overrides Custom preview / overrides, will be deep merged with the default preview.
+ *
+ * @example
+ * ```ts
+ * // .storybook/preview.ts
+ * const preview = {
+ *   // you need to destructure here because as of Storybook 7.6
+ *   // it can not statically analyze that the `preview` variable is an object
+ *   ...createPreview({
+ *     // custom preview / overrides
+ *     },
+ *   }),
+ * };
+ *
+ * export default preview;
+ * ```
+ */
+export const createPreview = <T extends Preview = Preview>(
+  overrides?: T,
+  brandDetails?: BrandDetails,
+) => {
+  const themes = {
+    light: createTheme("light", brandDetails),
+    dark: createTheme("dark", brandDetails),
+  } as const;
+
+  const defaultPreview = {
+    argTypesEnhancers: [enhanceEventArgTypes],
+    initialGlobals: {
+      ["requiredMode" satisfies keyof typeof requiredGlobalType]: "required",
+      backgrounds: { value: "currentTheme" },
+    },
+    globalTypes: {
+      ...requiredGlobalType,
+    },
+    decorators: [withRequired],
+    parameters: {
+      controls: {
+        matchers: {
+          color: /(background|color)$/i,
+          date: /Date$/i,
+        },
+        sort: "requiredFirst",
+        // needed to also show props/events descriptions etc. when opening a single story
+        expanded: true,
+        exclude: ["ref", "ref_for", "ref_key", "class", "style", "key", "$slots"],
+      },
+      docs: {
+        // see: https://github.com/hipstersmoothie/storybook-dark-mode/issues/127#issuecomment-840701971
+        get theme(): ThemeVars {
+          const isDark = parent.document.body.classList.contains("dark");
+
+          if (isDark) {
+            document.body.classList.remove("light");
+            document.body.classList.add("dark");
+          } else {
+            document.body.classList.remove("dark");
+            document.body.classList.add("light");
+          }
+
+          return isDark ? themes.dark : themes.light;
+        },
+        source: {
+          language: "html",
+          /**
+           * Use a custom transformer for the story source code to better fit to our
+           * Vue.js code because storybook per default does not render it exactly how
+           * we want it to look.
+           * @see https://storybook.js.org/docs/react/api/doc-block-source
+           */
+          transform: sourceCodeTransformer,
+        },
+      },
+      darkMode: {
+        stylePreview: true,
+        light: themes.light,
+        dark: themes.dark,
+      },
+      backgrounds: {
+        options: {
+          currentTheme: { name: "Dynamic", value: "var(--onyx-color-base-background-tinted)" },
+        },
+      },
+      viewport: {
+        options: ONYX_BREAKPOINTS,
+      },
+    },
+  } satisfies Preview;
+
+  const channel = addons.getChannel();
+
+  // our "workaround" above for dynamically setting the docs theme needs a page-reload after
+  // the theme has changed to take effect:
+  channel.once(DOCS_RENDERED, () => {
+    // the DARK_MODE_EVENT_NAME is emitted once after the docs have been rendered for the initial theme.
+    // We only want to reload the page on theme changes, that's why we use .once() to add the event listener
+    // only after the initial dark mode change event has been fired. Otherwise we would get an infinite loop.
+    channel.once(DARK_MODE_EVENT_NAME, () => {
+      channel.on(DARK_MODE_EVENT_NAME, () => {
+        window.location.reload();
+      });
+    });
+  });
+
+  return deepmerge<[T, typeof defaultPreview]>(overrides ?? ({} as T), defaultPreview);
+};
+
+/**
+ * Custom transformer for the story source code to support improved source code generation.
+ * and add imports for all used onyx icons so icon imports are displayed in the source code
+ * instead of the the raw SVG content.
+ *
+ * @see https://storybook.js.org/docs/react/api/doc-block-source
+ */
+export const sourceCodeTransformer = async (originalSourceCode: string): Promise<string> => {
+  const ALL_ICONS = await import("@sit-onyx/icons");
+
+  let code = originalSourceCode;
+
+  const additionalImports: string[] = [];
+
+  // add icon imports to the source code for all used onyx icons
+  const usedIcons = new Set<string>();
+
+  Object.entries(ALL_ICONS).forEach(([iconName, iconContent]) => {
+    const singleQuotedIconContent = `'${replaceAll(iconContent, '"', "\\'")}'`;
+    const escapedIconContent = `"${replaceAll(iconContent, '"', '\\"')}"`;
+
+    if (code.includes(iconContent)) {
+      usedIcons.add(iconName);
+
+      code = code.replace(
+        new RegExp(` (\\S+)=['"]${escapeRegExp(iconContent)}['"]`),
+        ` :$1="${iconName}"`,
+      );
+    } else if (code.includes(singleQuotedIconContent)) {
+      // support icons inside objects
+      usedIcons.add(iconName);
+      code = code.replace(singleQuotedIconContent, iconName);
+    } else if (code.includes(escapedIconContent)) {
+      // support icons inside objects
+      usedIcons.add(iconName);
+      code = code.replace(escapedIconContent, iconName);
+    }
+  });
+
+  if (usedIcons.size > 0) {
+    additionalImports.push(
+      `import { ${Array.from(usedIcons.values()).sort().join(", ")} } from "@sit-onyx/icons";`,
+    );
+  }
+
+  // add imports for all used onyx components
+  // Set is used here to only include unique components if they are used multiple times
+  const usedOnyxComponents = [
+    ...new Set(Array.from(code.matchAll(/<(Onyx\w+)(?:\s*\/?)/g)).map((match) => match[1])),
+  ].sort();
+
+  if (usedOnyxComponents.length > 0) {
+    additionalImports.unshift(`import { ${usedOnyxComponents.join(", ")} } from "sit-onyx";`);
+  }
+
+  if (additionalImports.length > 1) {
+    if (code.startsWith("<script")) {
+      const index = code.indexOf("\n");
+      const hasOtherImports = code.includes("import {");
+      code =
+        code.slice(0, index) +
+        additionalImports.join("\n") +
+        (!hasOtherImports ? "\n" : "") +
+        code.slice(index);
+    } else {
+      code = `<script lang="ts" setup>
+${additionalImports.join("\n")}
+</script>
+
+${code}`;
+    }
+  }
+
+  try {
+    const { format } = await import("prettier/standalone");
+    const parserHtml = await import("prettier/parser-html");
+
+    code = await format(code, {
+      parser: "vue",
+      plugins: [parserHtml],
+      htmlWhitespaceSensitivity: "ignore",
+    });
+
+    // trim code to remove trailing newlines that are added by prettier
+    code = code.trim();
+  } catch (e) {
+    // eslint-disable-next-line no-console -- if the formatting fails, there is usually an issue with our code so we want to inform the user that the formatting failed
+    console.error("Error while formatting Storybook code snippet:", e);
+  }
+
+  return code;
+};
+
+/**
+ * Custom String.replaceAll implementation using a RegExp
+ * because String.replaceAll() is not available in our specified EcmaScript target in tsconfig.json
+ */
+export const replaceAll = (value: string, searchValue: string | RegExp, replaceValue: string) => {
+  return value.replace(new RegExp(searchValue, "gi"), replaceValue);
+};
+
+/**
+ * Escapes the given string value to be used in `new RegExp()`.
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_expressions#escaping
+ */
+export const escapeRegExp = (string: string) => {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"); // $& means the whole matched string
+};

package/src/required.ts

@@ -0,0 +1,35 @@
+import { type Decorator } from "@storybook/vue3-vite";
+import { ref, watch } from "vue";
+import type { StorybookGlobalType } from "./types.js";
+
+type RequiredIndicator = "required" | "optional";
+
+export const requiredGlobalType = {
+  requiredMode: {
+    name: "Required mode",
+    description: "Switch between 'required' and 'optional' indicator",
+    toolbar: {
+      icon: "flag",
+      items: [
+        { value: "required", right: "*", title: "Required indicator" },
+        { value: "optional", right: "(optional)", title: "Optional indicator" },
+      ],
+    },
+  } satisfies StorybookGlobalType<RequiredIndicator>,
+};
+
+const requiredMode = ref<RequiredIndicator>("required");
+
+export const withRequired: Decorator = (Story, context) => {
+  watch(
+    () => context.globals.requiredMode as RequiredIndicator,
+    (newRequiredMode) => (requiredMode.value = newRequiredMode),
+    { immediate: true },
+  );
+
+  return {
+    components: { Story },
+    setup: () => ({ requiredMode }),
+    template: `<div :class="{ ['onyx-use-optional']: requiredMode === 'optional' }"> <story /> </div>`,
+  };
+};

package/src/sbType.spec.ts

@@ -0,0 +1,38 @@
+import type { SBType } from "storybook/internal/types";
+import { describe, expect, test, vi } from "vitest";
+import { walkTree } from "./sbType.js";
+
+describe("walkTree", () => {
+  test.each<{ input: SBType; expected: SBType["name"][] }>([
+    { input: { name: "array", value: { name: "number" } }, expected: ["array", "number"] },
+    { input: { name: "object", value: { a: { name: "number" } } }, expected: ["object", "number"] },
+    { input: { name: "enum", value: ["a"] }, expected: ["enum"] },
+    {
+      input: { name: "intersection", value: [{ name: "number" }] },
+      expected: ["intersection", "number"],
+    },
+    { input: { name: "union", value: [{ name: "number" }] }, expected: ["union", "number"] },
+    { input: { name: "other", value: "a" }, expected: ["other"] },
+  ])("should execute cb for $input.name correctly", ({ input, expected }) => {
+    const spy = vi.fn<(p: SBType) => void>();
+    const result = walkTree(input, spy);
+
+    expect(result).toBeUndefined();
+    expect(spy).toHaveBeenCalledTimes(expected.length);
+    const nameCalls = spy.mock.calls.map(([{ name }]) => name);
+    expect(nameCalls).toMatchObject(expected);
+  });
+
+  test("should return value if there is any returned", () => {
+    const target: SBType = { name: "number", raw: "here" };
+    const overshoot: SBType = { name: "boolean", raw: "here" };
+    const parent: SBType = { name: "intersection", value: [target, overshoot] };
+    const returned = 42;
+    const spy = vi.fn((p: SBType) => (p.raw === "here" ? returned : undefined));
+    const result = walkTree({ name: "union", value: [parent] }, spy);
+
+    expect(spy).toHaveBeenCalledTimes(3);
+    expect(spy).toHaveBeenLastCalledWith(target, parent);
+    expect(result).toBe(returned);
+  });
+});

package/src/sbType.ts

@@ -0,0 +1,104 @@
+import type {
+  ArgTypesEnhancer,
+  InputType,
+  SBType,
+  StrictInputType,
+} from "storybook/internal/types";
+
+/**
+ * Call a function `cb` for every type node in the storybook type tree.
+ * @param inputType the root type
+ * @param cb the function that is called for every type. If any non-nullish value is returned by `cb` the execution is stopped and this value is returned.
+ * @param parent optional, the parent type. Is only used as input for the `cb` function and provided when recursing.
+ * @returns the first non-nullish value that is returned by `cb`
+ */
+export const walkTree = <TValue>(
+  inputType: SBType,
+  cb: (sb: SBType, parent?: SBType) => TValue,
+  parent?: SBType,
+): TValue | undefined => {
+  const shouldReturn = cb(inputType, parent);
+  if (shouldReturn) {
+    return shouldReturn;
+  }
+
+  if (inputType.name === "union" || inputType.name === "intersection") {
+    return inputType.value.reduce<TValue | undefined>(
+      (prev, it) => prev ?? walkTree(it, cb, inputType),
+      undefined,
+    );
+  }
+  if (inputType.name === "array") {
+    return walkTree(inputType.value, cb, inputType);
+  }
+  if (inputType.name === "object") {
+    return Object.values(inputType.value).reduce<TValue | undefined>(
+      (prev, it) => prev ?? walkTree(it, cb, inputType),
+      undefined,
+    );
+  }
+};
+
+const SB_TYPE_CONTROL_MAP: Partial<Record<SBType["name"], InputType["control"]>> = {
+  boolean: { type: "boolean" },
+  string: { type: "text" },
+  number: { type: "number" },
+};
+
+const getFormInjectedParent = (symbol: string, inputType?: StrictInputType) => {
+  if (!inputType?.type || inputType.table?.defaultValue?.summary !== symbol) {
+    return undefined;
+  }
+
+  return walkTree(inputType.type, (elem, parent) =>
+    elem.name === "symbol" || (elem.name === "other" && elem.value === "unique symbol")
+      ? parent
+      : undefined,
+  );
+};
+
+/**
+ * Can be used to create an `ArgTypesEnhancer` which matches a Symbol that is used as default Prop.
+ * When it matches the passed  description text will be set.
+ *
+ * @param symbol description of the symbol that should be matched.
+ * @param description the description text that should be shown in Storybook for this prop.
+ * @returns An `ArgTypesEnhancer` which can be passed to storybook.
+ *
+ * @example
+ * ```ts
+ * import { createSymbolArgTypeEnhancer } from "@sit-onyx/storybook-utils";
+ *
+ * export const enhanceFormInjectedSymbol = createSymbolArgTypeEnhancer(
+ *   "FORM_INJECTED_SYMBOL",
+ *   "If no value (or `undefined`) is provided, `FORM_INJECTED_SYMBOL` is the internal default value for this prop.\n" +
+ *     "In that case the props value will be derived from it's parent form (if it exists).\n",
+ * );
+ * ```
+ */
+export const createSymbolArgTypeEnhancer = (
+  symbol: string,
+  description: string,
+): ArgTypesEnhancer => {
+  return (context) => {
+    Object.values(context.argTypes)
+      .map((argType) => {
+        const parent = getFormInjectedParent(symbol, argType);
+        return { argType, parent };
+      })
+      .filter(({ parent }) => parent)
+      .forEach(({ argType, parent }) => {
+        const firstAvailableControl = walkTree(
+          parent || argType.type!,
+          (sb) => SB_TYPE_CONTROL_MAP[sb.name],
+        );
+
+        if (firstAvailableControl && argType.table?.defaultValue) {
+          argType.control = firstAvailableControl;
+          argType.table.defaultValue.detail = description;
+        }
+      });
+
+    return context.argTypes;
+  };
+};

package/src/style.css

@@ -0,0 +1,161 @@
+.onyx-disclaimer {
+  border-radius: 0.5rem;
+  padding: 1rem;
+  line-height: var(--onyx-font-line-height-md);
+  margin: 1rem 0;
+
+  /* same color as VitePress var(--vp-c-tip-soft) */
+  background-color: color-mix(in srgb, var(--onyx-color-base-info-400) 25%, transparent);
+}
+
+.onyx-disclaimer__title {
+  font-weight: var(--onyx-font-weight-semibold);
+  margin-bottom: 0.5rem;
+}
+
+.onyx-disclaimer p {
+  margin: 0;
+}
+
+/* the Storybook table of content headline is always black so we need to manually set it for the dark mode */
+#storybook-docs .sbdocs-wrapper > aside > nav > h2 {
+  /* same as Storybook color "textMuted" inside ./theme.ts */
+  color: var(--onyx-color-text-icons-neutral-medium);
+}
+
+/* To prevent bg flashing when changing between elements in darkmode */
+.sb-preparing-story,
+.sb-preparing-docs {
+  background-color: transparent;
+}
+/* removed placeholder for the same reason */
+.sb-previewBlock,
+.sb-argstableBlock {
+  display: none;
+}
+
+/*
+  Copy of ../sit-onyx/src/styles/variables/themes/onyx.css
+  TODO: Find a way to automate this
+ */
+:where(:root),
+.onyx-theme-default {
+  --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;
+  --onyx-color-themed-primary-400: #3dd0d8;
+  --onyx-color-themed-primary-500: #00c3cd;
+  --onyx-color-themed-primary-600: #00adb5;
+  --onyx-color-themed-primary-700: #00969d;
+  --onyx-color-themed-primary-800: #008085;
+  --onyx-color-themed-primary-900: #00696e;
+  --onyx-color-themed-primary-1000: #005356;
+  --onyx-color-themed-primary-1100: #003c3e;
+  --onyx-color-themed-primary-1200: #002626;
+  --onyx-color-themed-secondary-100: var(--onyx-color-themed-primary-100);
+  --onyx-color-themed-secondary-200: var(--onyx-color-themed-primary-200);
+  --onyx-color-themed-secondary-300: var(--onyx-color-themed-primary-300);
+  --onyx-color-themed-secondary-400: var(--onyx-color-themed-primary-400);
+  --onyx-color-themed-secondary-500: var(--onyx-color-themed-primary-500);
+  --onyx-color-themed-secondary-600: var(--onyx-color-themed-primary-600);
+  --onyx-color-themed-secondary-700: var(--onyx-color-themed-primary-700);
+  --onyx-color-themed-secondary-800: var(--onyx-color-themed-primary-800);
+  --onyx-color-themed-secondary-900: var(--onyx-color-themed-primary-900);
+  --onyx-color-themed-secondary-1000: var(--onyx-color-themed-primary-1000);
+  --onyx-color-themed-secondary-1100: var(--onyx-color-themed-primary-1100);
+  --onyx-color-themed-secondary-1200: var(--onyx-color-themed-primary-1200);
+  --onyx-color-universal-grayscale-black: #000000;
+  --onyx-color-universal-grayscale-white: #ffffff;
+  --onyx-color-universal-green-100: #ecf8f2;
+  --onyx-color-universal-green-200: #c6e4d5;
+  --onyx-color-universal-green-300: #98d1b3;
+  --onyx-color-universal-green-400: #6ebe94;
+  --onyx-color-universal-green-500: #44aa75;
+  --onyx-color-universal-green-600: #3b9b69;
+  --onyx-color-universal-green-700: #328c5e;
+  --onyx-color-universal-green-800: #297d52;
+  --onyx-color-universal-green-900: #216d46;
+  --onyx-color-universal-green-1000: #185e3a;
+  --onyx-color-universal-green-1100: #064023;
+  --onyx-color-universal-green-1200: #064023;
+  --onyx-color-universal-orange-100: #faf6f2;
+  --onyx-color-universal-orange-200: #f8e7d8;
+  --onyx-color-universal-orange-300: #f6d1b1;
+  --onyx-color-universal-orange-400: #f4b57e;
+  --onyx-color-universal-orange-500: #f2994a;
+  --onyx-color-universal-orange-600: #d98841;
+  --onyx-color-universal-orange-700: #bf7737;
+  --onyx-color-universal-orange-800: #a6662e;
+  --onyx-color-universal-orange-900: #8c5625;
+  --onyx-color-universal-orange-1000: #73451c;
+  --onyx-color-universal-orange-1100: #593412;
+  --onyx-color-universal-orange-1200: #402309;
+  --onyx-color-universal-purple-100: #f4f1f8;
+  --onyx-color-universal-purple-200: #dbcfea;
+  --onyx-color-universal-purple-300: #c2addc;
+  --onyx-color-universal-purple-400: #a98ace;
+  --onyx-color-universal-purple-500: #9068c0;
+  --onyx-color-universal-purple-600: #805aae;
+  --onyx-color-universal-purple-700: #704c9b;
+  --onyx-color-universal-purple-800: #603e89;
+  --onyx-color-universal-purple-900: #513077;
+  --onyx-color-universal-purple-1000: #412265;
+  --onyx-color-universal-purple-1100: #311452;
+  --onyx-color-universal-purple-1200: #210640;
+  --onyx-color-universal-quantitatives-100: #005795;
+  --onyx-color-universal-quantitatives-200: #ff8a25;
+  --onyx-color-universal-quantitatives-300: #e51718;
+  --onyx-color-universal-quantitatives-400: #36b16b;
+  --onyx-color-universal-quantitatives-500: #56d8fc;
+  --onyx-color-universal-quantitatives-600: #ff9990;
+  --onyx-color-universal-quantitatives-700: #ff3fd1;
+  --onyx-color-universal-quantitatives-800: #3c6475;
+  --onyx-color-universal-quantitatives-900: #c4bc81;
+  --onyx-color-universal-quantitatives-1000: #c3143f;
+  --onyx-color-universal-quantitatives-1100: #a09dfa;
+  --onyx-color-universal-quantitatives-1200: #00bcc6;
+  --onyx-color-universal-red-100: #fbefee;
+  --onyx-color-universal-red-200: #f1d2d1;
+  --onyx-color-universal-red-300: #e6a7a5;
+  --onyx-color-universal-red-400: #dc716e;
+  --onyx-color-universal-red-500: #d1332f;
+  --onyx-color-universal-red-600: #bc2d2a;
+  --onyx-color-universal-red-700: #a82824;
+  --onyx-color-universal-red-800: #93221f;
+  --onyx-color-universal-red-900: #7e1d19;
+  --onyx-color-universal-red-1000: #691714;
+  --onyx-color-universal-red-1100: #400c09;
+  --onyx-color-universal-red-1200: #400c09;
+  --onyx-number-radius-100: 0.125rem;
+  --onyx-number-radius-200: 0.25rem;
+  --onyx-number-radius-300: 0.5rem;
+  --onyx-number-radius-400: 1rem;
+  --onyx-number-radius-500: 2rem;
+  --onyx-number-radius-600: 62.5rem;
+  --onyx-number-spacing-0: 0rem;
+  --onyx-number-spacing-100: 0.125rem;
+  --onyx-number-spacing-200: 0.25rem;
+  --onyx-number-spacing-250: 0.375rem;
+  --onyx-number-spacing-300: 0.5rem;
+  --onyx-number-spacing-325: 0.625rem;
+  --onyx-number-spacing-350: 0.75rem;
+  --onyx-number-spacing-400: 1rem;
+  --onyx-number-spacing-500: 1.5rem;
+  --onyx-number-spacing-600: 2rem;
+  --onyx-number-spacing-700: 3rem;
+  --onyx-number-spacing-800: 4rem;
+  --onyx-number-spacing-900: 6rem;
+  --onyx-number-spacing-950: 8rem;
+}