@vinyasa/tokens 1.0.28 → 2.0.2

package/dist/esm/index.js

@@ -1,7 +1,108 @@
-import "./index.css";
 import { createContext, useContext, useEffect, useMemo, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
+const duskBrand = {
+    light: {
+        normal: {
+            primary: '#4B2E8C',
+            onPrimary: '#FFFFFF',
+            focus: '#4B2E8C',
+            tertiary: '#EEE9F9',
+            onTertiary: '#4B2E8C'
+        },
+        high: {
+            primary: '#37206B',
+            onPrimary: '#FFFFFF',
+            focus: '#37206B',
+            tertiary: '#EEE9F9',
+            onTertiary: '#37206B'
+        }
+    },
+    dark: {
+        normal: {
+            primary: '#B49BEA',
+            onPrimary: '#1A1425',
+            focus: '#B49BEA',
+            tertiary: '#2E2648',
+            onTertiary: '#B49BEA'
+        },
+        high: {
+            primary: '#CBB8F2',
+            onPrimary: '#1A1425',
+            focus: '#CBB8F2',
+            tertiary: '#2E2648',
+            onTertiary: '#CBB8F2'
+        }
+    }
+};
+const sunriseBrand = {
+    light: {
+        normal: {
+            primary: '#FF5A2B',
+            onPrimary: '#2A1206',
+            focus: '#B8380C',
+            tertiary: '#FFE9DF',
+            onTertiary: '#B8380C'
+        },
+        high: {
+            primary: '#8F2C08',
+            onPrimary: '#FFFFFF',
+            focus: '#8F2C08',
+            tertiary: '#FFE9DF',
+            onTertiary: '#8F2C08'
+        }
+    },
+    dark: {
+        normal: {
+            primary: '#FF8354',
+            onPrimary: '#200E05',
+            focus: '#FF8354',
+            tertiary: '#3D2113',
+            onTertiary: '#FF8354'
+        },
+        high: {
+            primary: '#FFA47C',
+            onPrimary: '#200E05',
+            focus: '#FFA47C',
+            tertiary: '#3D2113',
+            onTertiary: '#FFA47C'
+        }
+    }
+};
+const yellowBrand = {
+    light: {
+        normal: {
+            primary: '#EAB308',
+            onPrimary: '#422006',
+            focus: '#854D0E',
+            tertiary: '#FEF9C3',
+            onTertiary: '#854D0E'
+        },
+        high: {
+            primary: '#713F12',
+            onPrimary: '#FFFFFF',
+            focus: '#713F12',
+            tertiary: '#FEF9C3',
+            onTertiary: '#713F12'
+        }
+    },
+    dark: {
+        normal: {
+            primary: '#FDE047',
+            onPrimary: '#422006',
+            focus: '#FACC15',
+            tertiary: '#3F2D07',
+            onTertiary: '#FDE047'
+        },
+        high: {
+            primary: '#FEF08A',
+            onPrimary: '#422006',
+            focus: '#FEF08A',
+            tertiary: '#3F2D07',
+            onTertiary: '#FEF08A'
+        }
+    }
+};
 var themeContract = {
     primary: 'var(--vinyasa-primary)',
     onPrimary: 'var(--vinyasa-on-primary)',
@@ -29,10 +130,15 @@ var themeContract = {
     space4: 'var(--vinyasa-space4)',
     space5: 'var(--vinyasa-space5)',
     space6: 'var(--vinyasa-space6)',
+    space7: 'var(--vinyasa-space7)',
+    space8: 'var(--vinyasa-space8)',
+    radiusXs: 'var(--vinyasa-radius-xs)',
     radiusSm: 'var(--vinyasa-radius-sm)',
     radiusMd: 'var(--vinyasa-radius-md)',
+    radiusLg: 'var(--vinyasa-radius-lg)',
     radiusFull: 'var(--vinyasa-radius-full)',
     borderWidthThin: 'var(--vinyasa-border-width-thin)',
+    borderWidthThick: 'var(--vinyasa-border-width-thick)',
     borderColorDefault: 'var(--vinyasa-border-color-default)',
     fontFamilySans: 'var(--vinyasa-font-family-sans)',
     fontFamilyMono: 'var(--vinyasa-font-family-mono)',
@@ -86,46 +192,26 @@ const focusRingStyle = (vars)=>({
         borderColor: vars.focus,
         boxShadow: `0 0 0 1px ${vars.focus}, 0 0 0 4px color-mix(in srgb, ${vars.focus} 16%, transparent)`
     });
-const dusk = {
-    tint: '#EEE9F9',
-    600: '#4B2E8C',
-    700: '#37206B',
-    onDusk: '#FFFFFF'
-};
-const moss = {
-    tint: '#E4EEE8',
-    700: '#3F6650',
-    800: '#3B604B',
-    900: '#385B47'
-};
-const ember = {
-    tint: '#F7E7E1',
-    600: '#A64B2A',
-    700: '#8E4024',
-    800: '#863C22',
-    onEmber: '#FFFFFF'
-};
-const saffron = {
-    tint: '#F5EBDD',
-    700: '#A15C1F',
-    800: '#834B19',
-    900: '#7C4717'
-};
-const space = {
-    1: '0.25rem',
-    2: '0.5rem',
-    3: '0.625rem',
-    4: '1rem',
-    5: '1.25rem',
-    6: '1.5rem'
+const borderWidth = {
+    thin: '1px',
+    thick: '2px'
 };
 const radius = {
+    xs: '0.125rem',
     sm: '0.25rem',
     md: '0.5rem',
+    lg: '0.75rem',
     full: '9999px'
 };
-const borderWidth = {
-    thin: '1px'
+const spacing_spacing = {
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.75rem',
+    4: '1rem',
+    5: '1.5rem',
+    6: '2rem',
+    7: '3rem',
+    8: '4rem'
 };
 const fontFamily = {
     sans: "'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
@@ -175,7 +261,7 @@ const opacity = {
     disabled: '0.5',
     hover: '0.92'
 };
-const primitives_blur = {
+const base_blur = {
     sm: '4px',
     md: '8px',
     lg: '16px'
@@ -188,16 +274,21 @@ const zIndex = {
     tooltip: '1400'
 };
 const base_base = {
-    space1: space["1"],
-    space2: space["2"],
-    space3: space["3"],
-    space4: space["4"],
-    space5: space["5"],
-    space6: space["6"],
+    space1: spacing_spacing["1"],
+    space2: spacing_spacing["2"],
+    space3: spacing_spacing["3"],
+    space4: spacing_spacing["4"],
+    space5: spacing_spacing["5"],
+    space6: spacing_spacing["6"],
+    space7: spacing_spacing["7"],
+    space8: spacing_spacing["8"],
+    radiusXs: radius.xs,
     radiusSm: radius.sm,
     radiusMd: radius.md,
+    radiusLg: radius.lg,
     radiusFull: radius.full,
     borderWidthThin: borderWidth.thin,
+    borderWidthThick: borderWidth.thick,
     fontFamilySans: fontFamily.sans,
     fontFamilyMono: fontFamily.mono,
     fontSizeXs: fontSize.xs,
@@ -205,9 +296,9 @@ const base_base = {
     fontSizeMd: fontSize.md,
     fontSizeLg: fontSize.lg,
     fontSizeXl: fontSize.xl,
-    fontSize2xl: fontSize["2xl"],
-    fontSize3xl: fontSize["3xl"],
-    fontSize4xl: fontSize["4xl"],
+    fontSize2xl: fontSize['2xl'],
+    fontSize3xl: fontSize['3xl'],
+    fontSize4xl: fontSize['4xl'],
     fontWeightRegular: fontWeight.regular,
     fontWeightMedium: fontWeight.medium,
     fontWeightSemibold: fontWeight.semibold,
@@ -230,221 +321,102 @@ const base_base = {
     focusRingOffset: focusRing.offset,
     opacityDisabled: opacity.disabled,
     opacityHover: opacity.hover,
-    blurSm: primitives_blur.sm,
-    blurMd: primitives_blur.md,
-    blurLg: primitives_blur.lg,
+    blurSm: base_blur.sm,
+    blurMd: base_blur.md,
+    blurLg: base_blur.lg,
     zIndexDropdown: zIndex.dropdown,
     zIndexOverlay: zIndex.overlay,
     zIndexModal: zIndex.modal,
     zIndexToast: zIndex.toast,
     zIndexTooltip: zIndex.tooltip
 };
-const stone = {
-    50: '#FAFAFC',
-    100: '#F6F5F8',
-    200: '#E3E0EA',
-    300: '#CFCADC',
-    400: '#A79DBE',
-    500: '#7C7191',
-    600: '#5C5470',
-    700: '#4A4458',
-    800: '#332E40',
-    900: '#1E1A28'
-};
-const paper = '#FFFFFF';
-const shadow = {
-    sm: '0 1px 1px rgba(30, 20, 50, 0.06)',
-    md: '0 1px 2px rgba(30, 20, 50, 0.05), 0 8px 20px -8px rgba(43, 26, 90, 0.18)',
-    lg: '0 2px 4px rgba(30, 20, 50, 0.06), 0 16px 40px -12px rgba(43, 26, 90, 0.28)'
-};
+const accent = duskBrand.light.normal;
+const accentHigh = duskBrand.light.high;
 const lightTheme = {
     ...base_base,
-    primary: dusk["600"],
-    onPrimary: dusk.onDusk,
-    secondary: stone[200],
-    onSecondary: stone[900],
-    surface: paper,
-    tertiary: dusk.tint,
-    onTertiary: dusk["600"],
-    error: ember["600"],
-    onError: ember.onEmber,
-    focus: dusk["600"],
-    textDefault: stone[900],
-    textMuted: stone[700],
-    statusInfoBg: dusk.tint,
-    statusInfoText: dusk["600"],
-    statusSuccessBg: moss.tint,
-    statusSuccessText: moss["700"],
-    statusWarningBg: saffron.tint,
-    statusWarningText: saffron["700"],
-    statusErrorBg: ember.tint,
-    statusErrorText: ember["600"],
-    borderColorDefault: stone[200],
-    shadowSm: shadow.sm,
-    shadowMd: shadow.md,
-    shadowLg: shadow.lg,
-    elevationRaised: shadow.sm,
-    elevationOverlay: shadow.md,
-    elevationModal: shadow.lg
+    primary: accent.primary,
+    onPrimary: accent.onPrimary,
+    secondary: '#E5E5E5',
+    onSecondary: '#171717',
+    surface: '#FFFFFF',
+    tertiary: accent.tertiary,
+    onTertiary: accent.onTertiary,
+    error: '#A64B2A',
+    onError: '#FFFFFF',
+    focus: accent.focus,
+    textDefault: '#171717',
+    textMuted: '#404040',
+    statusInfoBg: '#EEE9F9',
+    statusInfoText: '#4B2E8C',
+    statusSuccessBg: '#E4EEE8',
+    statusSuccessText: '#3F6650',
+    statusWarningBg: '#F5EBDD',
+    statusWarningText: '#A15C1F',
+    statusErrorBg: '#F7E7E1',
+    statusErrorText: '#A64B2A',
+    borderColorDefault: '#E5E5E5',
+    shadowSm: '0 1px 1px rgba(0, 0, 0, 0.06)',
+    shadowMd: '0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 20px -8px rgba(0, 0, 0, 0.18)',
+    shadowLg: '0 2px 4px rgba(0, 0, 0, 0.06), 0 16px 40px -12px rgba(0, 0, 0, 0.28)',
+    elevationRaised: '0 1px 1px rgba(0, 0, 0, 0.06)',
+    elevationOverlay: '0 1px 2px rgba(0, 0, 0, 0.05), 0 8px 20px -8px rgba(0, 0, 0, 0.18)',
+    elevationModal: '0 2px 4px rgba(0, 0, 0, 0.06), 0 16px 40px -12px rgba(0, 0, 0, 0.28)'
 };
 const lightHighContrastTheme = {
     ...lightTheme,
-    primary: dusk["700"],
-    onTertiary: dusk["700"],
-    focus: dusk["700"],
-    error: ember["700"],
-    statusErrorText: ember["700"],
-    statusWarningText: saffron["800"],
-    statusSuccessText: moss["800"],
-    borderColorDefault: stone[600]
+    primary: accentHigh.primary,
+    onTertiary: accentHigh.onTertiary,
+    focus: accentHigh.focus,
+    error: '#8E4024',
+    statusErrorText: '#8E4024',
+    statusWarningText: '#834B19',
+    statusSuccessText: '#3B604B',
+    borderColorDefault: '#525252'
 };
 const createTheme = (overrides = {})=>({
         ...lightTheme,
         ...overrides
     });
-const stoneDark = {
-    50: '#100E17',
-    100: '#161320',
-    200: '#221C30',
-    300: '#362E4C',
-    400: '#493D64',
-    500: '#7C7191',
-    600: '#B9B3CB',
-    700: '#D6D2E0',
-    800: '#E9E7EF',
-    900: '#F1EFF5'
-};
-const paperDark = stoneDark[200];
-const duskDark = {
-    tint: '#2E2648',
-    600: '#B49BEA',
-    700: '#CBB8F2',
-    onDusk: '#1A1425'
-};
-const mossDark = {
-    tint: '#22332A',
-    700: '#7FB89A'
-};
-const emberDark = {
-    tint: '#3A281F',
-    600: '#E08D6D',
-    700: '#E3977A',
-    onEmber: '#2A1208'
-};
-const saffronDark = {
-    tint: '#3A2F1B',
-    700: '#D9A15C'
-};
-const shadowDark = {
-    sm: '0 1px 1px rgba(0, 0, 0, 0.45)',
-    md: '0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.55)',
-    lg: '0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65)'
-};
+const dark_accent = duskBrand.dark.normal;
+const dark_accentHigh = duskBrand.dark.high;
 const darkTheme = {
     ...base_base,
-    primary: duskDark[600],
-    onPrimary: duskDark.onDusk,
-    secondary: stoneDark[300],
-    onSecondary: stoneDark[900],
-    surface: paperDark,
-    tertiary: duskDark.tint,
-    onTertiary: duskDark[600],
-    error: emberDark[600],
-    onError: emberDark.onEmber,
-    focus: duskDark[600],
-    textDefault: stoneDark[900],
-    textMuted: stoneDark[600],
-    statusInfoBg: duskDark.tint,
-    statusInfoText: duskDark[600],
-    statusSuccessBg: mossDark.tint,
-    statusSuccessText: mossDark[700],
-    statusWarningBg: saffronDark.tint,
-    statusWarningText: saffronDark[700],
-    statusErrorBg: emberDark.tint,
-    statusErrorText: emberDark[600],
-    borderColorDefault: stoneDark[300],
-    shadowSm: shadowDark.sm,
-    shadowMd: shadowDark.md,
-    shadowLg: shadowDark.lg,
-    elevationRaised: shadowDark.sm,
-    elevationOverlay: shadowDark.md,
-    elevationModal: shadowDark.lg
+    primary: dark_accent.primary,
+    onPrimary: dark_accent.onPrimary,
+    secondary: '#2E2E2E',
+    onSecondary: '#FAFAFA',
+    surface: '#1F1F1F',
+    tertiary: dark_accent.tertiary,
+    onTertiary: dark_accent.onTertiary,
+    error: '#E08D6D',
+    onError: '#2A1208',
+    focus: dark_accent.focus,
+    textDefault: '#FAFAFA',
+    textMuted: '#A3A3A3',
+    statusInfoBg: '#2E2648',
+    statusInfoText: '#B49BEA',
+    statusSuccessBg: '#22332A',
+    statusSuccessText: '#7FB89A',
+    statusWarningBg: '#3A2F1B',
+    statusWarningText: '#D9A15C',
+    statusErrorBg: '#3A281F',
+    statusErrorText: '#E08D6D',
+    borderColorDefault: '#2E2E2E',
+    shadowSm: '0 1px 1px rgba(0, 0, 0, 0.45)',
+    shadowMd: '0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.55)',
+    shadowLg: '0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65)',
+    elevationRaised: '0 1px 1px rgba(0, 0, 0, 0.45)',
+    elevationOverlay: '0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -8px rgba(0, 0, 0, 0.55)',
+    elevationModal: '0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px -12px rgba(0, 0, 0, 0.65)'
 };
 const darkHighContrastTheme = {
     ...darkTheme,
-    primary: duskDark[700],
-    onTertiary: duskDark[700],
-    focus: duskDark[700],
-    error: emberDark[700],
-    statusErrorText: emberDark[700],
-    borderColorDefault: stoneDark[600]
-};
-const sand = {
-    50: '#FFFBF5',
-    100: '#FDF0E1',
-    200: '#F0D9BC',
-    300: '#DEBB8C',
-    400: '#BE8F58',
-    500: '#8F6A3F',
-    600: '#6B4F30',
-    700: '#523D26',
-    800: '#382A1A',
-    900: '#221A10'
-};
-const paperSand = '#FFF8F0';
-const sunrise = {
-    tint: '#FFE9DF',
-    600: '#FF5A2B',
-    700: '#B8380C',
-    800: '#8F2C08',
-    onSunrise: '#2A1206'
-};
-const shadowSand = {
-    sm: '0 1px 1px rgba(60, 30, 10, 0.06)',
-    md: '0 1px 2px rgba(60, 30, 10, 0.05), 0 8px 20px -8px rgba(90, 40, 10, 0.18)',
-    lg: '0 2px 4px rgba(60, 30, 10, 0.06), 0 16px 40px -12px rgba(90, 40, 10, 0.28)'
-};
-const orangeTheme = {
-    ...base_base,
-    primary: sunrise[600],
-    onPrimary: sunrise.onSunrise,
-    secondary: sand[200],
-    onSecondary: sand[900],
-    surface: paperSand,
-    tertiary: sunrise.tint,
-    onTertiary: sunrise[700],
-    error: ember["600"],
-    onError: ember.onEmber,
-    focus: sunrise[700],
-    textDefault: sand[900],
-    textMuted: sand[700],
-    statusInfoBg: dusk.tint,
-    statusInfoText: dusk["600"],
-    statusSuccessBg: moss.tint,
-    statusSuccessText: moss["700"],
-    statusWarningBg: saffron.tint,
-    statusWarningText: saffron["700"],
-    statusErrorBg: ember.tint,
-    statusErrorText: ember["600"],
-    borderColorDefault: sand[200],
-    shadowSm: shadowSand.sm,
-    shadowMd: shadowSand.md,
-    shadowLg: shadowSand.lg,
-    elevationRaised: shadowSand.sm,
-    elevationOverlay: shadowSand.md,
-    elevationModal: shadowSand.lg
-};
-const orangeHighContrastTheme = {
-    ...orangeTheme,
-    primary: sunrise[800],
-    onPrimary: '#FFFFFF',
-    onTertiary: sunrise[800],
-    focus: sunrise[800],
-    error: ember["800"],
-    statusErrorText: ember["800"],
-    statusWarningText: saffron["900"],
-    statusSuccessText: moss["900"],
-    borderColorDefault: sand[600]
+    primary: dark_accentHigh.primary,
+    onTertiary: dark_accentHigh.onTertiary,
+    focus: dark_accentHigh.focus,
+    error: '#E3977A',
+    statusErrorText: '#E3977A',
+    borderColorDefault: '#A3A3A3'
 };
 const themes = {
     light: {
@@ -454,10 +426,6 @@ const themes = {
     dark: {
         normal: darkTheme,
         high: darkHighContrastTheme
-    },
-    orange: {
-        normal: orangeTheme,
-        high: orangeHighContrastTheme
     }
 };
 const resolveBaseTheme = (colorScheme, contrast)=>{
@@ -474,7 +442,9 @@ const comfortableSpacing = {
     space3: base_base.space3,
     space4: base_base.space4,
     space5: base_base.space5,
-    space6: base_base.space6
+    space6: base_base.space6,
+    space7: base_base.space7,
+    space8: base_base.space8
 };
 const compactSpacing = {
     space1: '0.125rem',
@@ -482,15 +452,19 @@ const compactSpacing = {
     space3: '0.5rem',
     space4: '0.75rem',
     space5: '1rem',
-    space6: '1.125rem'
+    space6: '1.5rem',
+    space7: '2rem',
+    space8: '2.5rem'
 };
 const spaciousSpacing = {
     space1: '0.375rem',
     space2: '0.75rem',
-    space3: '0.875rem',
+    space3: '1rem',
     space4: '1.5rem',
-    space5: '1.875rem',
-    space6: '2.25rem'
+    space5: '2rem',
+    space6: '3rem',
+    space7: '4rem',
+    space8: '6rem'
 };
 const density_densitySpacing = {
     compact: compactSpacing,
@@ -541,24 +515,37 @@ const useThemedRef = (ref)=>{
     return mergeRefs(ref, innerRef);
 };
 var resetScope = '_1k07u5u0';
+const brands = {
+    dusk: duskBrand,
+    sunrise: sunriseBrand,
+    yellow: yellowBrand
+};
 const ThemeContext = /*#__PURE__*/ createContext(lightTheme);
 const useVinyasaTheme = ()=>useContext(ThemeContext);
-const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', density = 'comfortable', children })=>{
+const VinyasaProvider = ({ theme, colorScheme = 'light', brand = 'dusk', contrast = 'normal', density = 'comfortable', children })=>{
     const base = useMemo(()=>resolveBaseTheme(colorScheme, contrast), [
         colorScheme,
         contrast
     ]);
+    const brandAccent = useMemo(()=>brands[brand][colorScheme][contrast], [
+        brand,
+        colorScheme,
+        contrast
+    ]);
     const densitySpacing = useMemo(()=>resolveDensitySpacing(density), [
         density
     ]);
+    const themeOverride = theme?.[colorScheme]?.[contrast];
     const resolvedTheme = useMemo(()=>({
             ...base,
+            ...brandAccent,
             ...densitySpacing,
-            ...theme
+            ...themeOverride
         }), [
         base,
+        brandAccent,
         densitySpacing,
-        theme
+        themeOverride
     ]);
     const cssVars = useMemo(()=>assignInlineVars(themeContract, resolvedTheme), [
         resolvedTheme
@@ -573,10 +560,11 @@ const VinyasaProvider = ({ theme, colorScheme = 'light', contrast = 'normal', de
             className: resetScope,
             style: style,
             "data-vinyasa-color-scheme": colorScheme,
+            "data-vinyasa-brand": brand,
             "data-vinyasa-contrast": contrast,
             "data-vinyasa-density": density,
             children: children
         })
     });
 };
-export { VinyasaProvider, breakpoints, createTheme, darkHighContrastTheme, darkTheme, focusRingStyle, grid, lightHighContrastTheme, lightTheme, orangeHighContrastTheme, orangeTheme, resolveBaseTheme, resolveDensitySpacing, themeContract, useAssertVinyasaProvider, useThemedRef, useVinyasaTheme };
+export { VinyasaProvider, breakpoints, createTheme, darkHighContrastTheme, darkTheme, duskBrand, focusRingStyle, grid, lightHighContrastTheme, lightTheme, resolveBaseTheme, resolveDensitySpacing, sunriseBrand, themeContract, useAssertVinyasaProvider, useThemedRef, useVinyasaTheme, yellowBrand };

package/dist/esm/radius.d.ts

@@ -0,0 +1,7 @@
+export declare const radius: {
+    readonly xs: "0.125rem";
+    readonly sm: "0.25rem";
+    readonly md: "0.5rem";
+    readonly lg: "0.75rem";
+    readonly full: "9999px";
+};

package/dist/esm/shadow.d.ts

@@ -0,0 +1,3 @@
+export declare const shadowLevels: readonly ["sm", "md", "lg"];
+export type ShadowLevel = (typeof shadowLevels)[number];
+export declare const elevationLevel: Record<'raised' | 'overlay' | 'modal', ShadowLevel>;

package/dist/esm/spacing.d.ts

@@ -0,0 +1,10 @@
+export declare const spacing: {
+    readonly 1: "0.25rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.5rem";
+    readonly 6: "2rem";
+    readonly 7: "3rem";
+    readonly 8: "4rem";
+};