@insymetri/styleguide 0.1.0

package/dist/style/tailwind/colors.d.ts

@@ -0,0 +1,217 @@
+export declare const backgroundColor: {
+    primary: string;
+    'primary-hover': string;
+    'primary-2': string;
+    'primary-5': string;
+    'primary-8': string;
+    'primary-15': string;
+    'primary-20': string;
+    surface: string;
+    'surface-raised': string;
+    background: string;
+    'background-alt': string;
+    'background-l0': string;
+    'background-l1': string;
+    'background-l2': string;
+    'background-l3': string;
+    'background-l4': string;
+    muted: string;
+    disabled: string;
+    dark: string;
+    'dark-secondary': string;
+    success: string;
+    'success-bg': string;
+    'success-light': string;
+    'success-15': string;
+    'success-hover': string;
+    'success-dark': string;
+    'success-dark-alt': string;
+    warning: string;
+    'warning-bg': string;
+    error: string;
+    'error-bg': string;
+    'error-light': string;
+    'error-hover': string;
+    'error-dark': string;
+    info: string;
+    'info-bg': string;
+    client: string;
+    'client-light': string;
+    'client-15': string;
+    applicant: string;
+    'applicant-light': string;
+    'badge-grey': string;
+    'badge-blue': string;
+    'badge-red': string;
+    'badge-purple': string;
+    'badge-green': string;
+    'badge-orange': string;
+    'badge-cyan': string;
+    'badge-pink': string;
+    'badge-teal': string;
+    'badge-amber': string;
+    'badge-yellow': string;
+    'badge-green-border': string;
+    'input-bg': string;
+    'input-bg-disabled': string;
+    'dropdown-bg': string;
+    'dropdown-item-hover': string;
+    'dropdown-item-selected': string;
+    'button-ghost-hover': string;
+    overlay: string;
+    'overlay-light': string;
+    'overlay-heavy': string;
+    'hover-overlay': string;
+    'subtle-bg': string;
+    'filter-bg': string;
+    'filter-remove': string;
+    'filter-remove-hover': string;
+    'tab-bg': string;
+    'tab-active': string;
+    'focus-primary': string;
+    'focus-error': string;
+    'focus-blue': string;
+    'email-bg': string;
+    'manual-bg': string;
+    'code-highlight': string;
+    'login-gradient-start': string;
+    'login-gradient-end': string;
+    'login-card': string;
+    'login-particle-link': string;
+    'inspector-bg': string;
+    'inspector-header': string;
+    white: string;
+    black: string;
+    transparent: string;
+    current: string;
+    'gray-50': string;
+    'gray-100': string;
+    'gray-200': string;
+    'gray-300': string;
+    'gray-400': string;
+    'gray-500': string;
+    'gray-600': string;
+    'gray-700': string;
+    'gray-800': string;
+    'gray-900': string;
+};
+export declare const textColor: {
+    primary: string;
+    'primary-hover': string;
+    'input-text': string;
+    'input-text-disabled': string;
+    'input-placeholder': string;
+    'dropdown-item': string;
+    'dropdown-item-selected': string;
+    body: string;
+    secondary: string;
+    tertiary: string;
+    inverse: string;
+    surface: string;
+    muted: string;
+    'muted-strong': string;
+    accent: string;
+    'accent-hover': string;
+    success: string;
+    'success-dark': string;
+    'success-dark-alt': string;
+    warning: string;
+    error: string;
+    'error-dark': string;
+    info: string;
+    client: string;
+    applicant: string;
+    'badge-grey': string;
+    'badge-blue': string;
+    'badge-red': string;
+    'badge-purple': string;
+    'badge-green': string;
+    'badge-orange': string;
+    'badge-cyan': string;
+    'badge-pink': string;
+    'badge-teal': string;
+    'badge-amber': string;
+    'badge-yellow': string;
+    'filter-text': string;
+    'filter-operator': string;
+    'filter-remove-icon': string;
+    'email-text': string;
+    'manual-text': string;
+    'login-particle': string;
+    'login-particle-link': string;
+    'inspector-text': string;
+    'inspector-keyword': string;
+    white: string;
+    black: string;
+    transparent: string;
+    current: string;
+    'gray-50': string;
+    'gray-100': string;
+    'gray-200': string;
+    'gray-300': string;
+    'gray-400': string;
+    'gray-500': string;
+    'gray-600': string;
+    'gray-700': string;
+    'gray-800': string;
+    'gray-900': string;
+};
+export declare const borderColor: {
+    primary: string;
+    strong: string;
+    subtle: string;
+    'input-border': string;
+    'input-border-hover': string;
+    'input-border-active': string;
+    'input-border-error': string;
+    'dropdown-border': string;
+    accent: string;
+    'accent-hover': string;
+    success: string;
+    'success-dark': string;
+    warning: string;
+    error: string;
+    info: string;
+    client: string;
+    applicant: string;
+    'badge-grey': string;
+    'badge-blue': string;
+    'badge-red': string;
+    'badge-purple': string;
+    'badge-green': string;
+    'badge-orange': string;
+    'badge-cyan': string;
+    'badge-pink': string;
+    'badge-teal': string;
+    'badge-amber': string;
+    'badge-yellow': string;
+    'filter-border': string;
+    'focus-primary': string;
+    'focus-error': string;
+    'login-card': string;
+    'inspector-border': string;
+    white: string;
+    black: string;
+    transparent: string;
+    current: string;
+    'gray-50': string;
+    'gray-100': string;
+    'gray-200': string;
+    'gray-300': string;
+    'gray-400': string;
+    'gray-500': string;
+    'gray-600': string;
+    'gray-700': string;
+    'gray-800': string;
+    'gray-900': string;
+};
+export declare const outlineColor: {
+    primary: string;
+    error: string;
+    blue: string;
+};
+export declare const ringColor: {
+    primary: string;
+    error: string;
+    blue: string;
+};

package/dist/style/tailwind/colors.js

@@ -0,0 +1,239 @@
+// Shared base colors — available across all color properties (bg-*, text-*, border-*).
+// Keep this small: only truly universal primitives.
+const shared = {
+    white: 'var(--ii-white)',
+    black: 'var(--ii-black)',
+    transparent: 'transparent',
+    current: 'currentColor',
+    // Grayscale
+    'gray-50': 'var(--ii-gray-50)',
+    'gray-100': 'var(--ii-gray-100)',
+    'gray-200': 'var(--ii-gray-200)',
+    'gray-300': 'var(--ii-gray-300)',
+    'gray-400': 'var(--ii-gray-400)',
+    'gray-500': 'var(--ii-gray-500)',
+    'gray-600': 'var(--ii-gray-600)',
+    'gray-700': 'var(--ii-gray-700)',
+    'gray-800': 'var(--ii-gray-800)',
+    'gray-900': 'var(--ii-gray-900)',
+};
+// bg-* utilities
+export const backgroundColor = {
+    ...shared,
+    // Brand
+    primary: 'var(--ii-primary)',
+    'primary-hover': 'var(--ii-primary-hover)',
+    'primary-2': 'var(--ii-primary-2)',
+    'primary-5': 'var(--ii-primary-5)',
+    'primary-8': 'var(--ii-primary-8)',
+    'primary-15': 'var(--ii-primary-15)',
+    'primary-20': 'var(--ii-primary-20)',
+    // Surfaces
+    surface: 'var(--ii-surface)',
+    'surface-raised': 'var(--ii-surface-raised)',
+    background: 'var(--ii-background)',
+    'background-alt': 'var(--ii-background-alt)',
+    'background-l0': 'var(--ii-background-l0)',
+    'background-l1': 'var(--ii-background-l1)',
+    'background-l2': 'var(--ii-background-l2)',
+    'background-l3': 'var(--ii-background-l3)',
+    'background-l4': 'var(--ii-background-l4)',
+    // Neutral states
+    muted: 'var(--ii-border)', // neutral gray (dividers, switch tracks, dots)
+    disabled: 'var(--ii-border-strong)', // disabled state bg
+    dark: 'var(--ii-text-primary)', // dark bg (tooltips, tags)
+    'dark-secondary': 'var(--ii-text-secondary)', // medium dark bg
+    // Semantic
+    success: 'var(--ii-success)',
+    'success-bg': 'var(--ii-success-bg)',
+    'success-light': 'var(--ii-success-light)',
+    'success-15': 'var(--ii-success-15)',
+    'success-hover': 'var(--ii-success-text)', // darker success for button hover
+    'success-dark': 'var(--ii-success-dark)',
+    'success-dark-alt': 'var(--ii-success-dark-alt)',
+    warning: 'var(--ii-warning)',
+    'warning-bg': 'var(--ii-warning-bg)',
+    error: 'var(--ii-error)',
+    'error-bg': 'var(--ii-error-bg)',
+    'error-light': 'var(--ii-error-light)',
+    'error-hover': 'var(--ii-error-text)', // darker error for button hover
+    'error-dark': 'var(--ii-error-dark)',
+    info: 'var(--ii-info)',
+    'info-bg': 'var(--ii-info-bg)',
+    // Contact types
+    client: 'var(--ii-client)',
+    'client-light': 'var(--ii-client-light)',
+    'client-15': 'var(--ii-client-15)',
+    applicant: 'var(--ii-applicant)',
+    'applicant-light': 'var(--ii-applicant-light)',
+    // Badges
+    'badge-grey': 'var(--ii-badge-grey-bg)',
+    'badge-blue': 'var(--ii-badge-blue-bg)',
+    'badge-red': 'var(--ii-badge-red-bg)',
+    'badge-purple': 'var(--ii-badge-purple-bg)',
+    'badge-green': 'var(--ii-badge-green-bg)',
+    'badge-orange': 'var(--ii-badge-orange-bg)',
+    'badge-cyan': 'var(--ii-badge-cyan-bg)',
+    'badge-pink': 'var(--ii-badge-pink-bg)',
+    'badge-teal': 'var(--ii-badge-teal-bg)',
+    'badge-amber': 'var(--ii-badge-amber-bg)',
+    'badge-yellow': 'var(--ii-badge-yellow-bg)',
+    'badge-green-border': 'var(--ii-badge-green-border)',
+    // Input
+    'input-bg': 'var(--color-input-bg)',
+    'input-bg-disabled': 'var(--color-input-bg-disabled)',
+    // Dropdown
+    'dropdown-bg': 'var(--color-dropdown-bg)',
+    'dropdown-item-hover': 'var(--color-dropdown-item-bg-hover)',
+    'dropdown-item-selected': 'var(--color-dropdown-item-bg-selected)',
+    // Button
+    'button-ghost-hover': 'var(--ii-button-ghost-hover)',
+    // Overlay
+    overlay: 'var(--ii-overlay)',
+    'overlay-light': 'var(--ii-overlay-light)',
+    'overlay-heavy': 'var(--ii-overlay-heavy)',
+    'hover-overlay': 'var(--ii-hover-overlay)',
+    'subtle-bg': 'var(--ii-subtle-bg)',
+    // Filter chips
+    'filter-bg': 'var(--ii-filter-bg)',
+    'filter-remove': 'var(--ii-filter-remove-bg)',
+    'filter-remove-hover': 'var(--ii-filter-remove-hover)',
+    // Tabs
+    'tab-bg': 'var(--ii-tab-bg)',
+    'tab-active': 'var(--ii-tab-active)',
+    // Focus ring (used as ring-* bg)
+    'focus-primary': 'var(--ii-focus-primary)',
+    'focus-error': 'var(--ii-focus-error)',
+    'focus-blue': 'var(--ii-focus-blue)',
+    // Page-specific
+    'email-bg': 'var(--ii-email-bg)',
+    'manual-bg': 'var(--ii-manual-bg)',
+    'code-highlight': 'var(--ii-code-highlight)',
+    'login-gradient-start': 'var(--ii-login-gradient-start)',
+    'login-gradient-end': 'var(--ii-login-gradient-end)',
+    'login-card': 'var(--ii-login-card-bg)',
+    'login-particle-link': 'var(--ii-login-particle-link)',
+    // Inspector
+    'inspector-bg': 'var(--ii-inspector-bg)',
+    'inspector-header': 'var(--ii-inspector-header)',
+};
+// text-* utilities
+export const textColor = {
+    ...shared,
+    // Brand
+    primary: 'var(--ii-primary)',
+    'primary-hover': 'var(--ii-primary-hover)',
+    // Input
+    'input-text': 'var(--color-input-text)',
+    'input-text-disabled': 'var(--color-input-text-disabled)',
+    'input-placeholder': 'var(--color-input-placeholder)',
+    // Dropdown
+    'dropdown-item': 'var(--color-dropdown-item-text)',
+    'dropdown-item-selected': 'var(--color-dropdown-item-text-selected)',
+    // Text hierarchy
+    body: 'var(--ii-text-primary)',
+    secondary: 'var(--ii-text-secondary)',
+    tertiary: 'var(--ii-text-tertiary)',
+    inverse: 'var(--ii-text-inverse)',
+    surface: 'var(--ii-surface)', // white text on dark backgrounds
+    muted: 'var(--ii-border)', // very light gray (decorative separators, bullets)
+    'muted-strong': 'var(--ii-border-strong)', // slightly darker muted text
+    // Brand on text (canonical names for new code)
+    accent: 'var(--ii-text-primary)',
+    'accent-hover': 'var(--ii-primary-hover)',
+    // Semantic
+    success: 'var(--ii-success-text)',
+    'success-dark': 'var(--ii-success-dark)',
+    'success-dark-alt': 'var(--ii-success-dark-alt)',
+    warning: 'var(--ii-warning-text)',
+    error: 'var(--ii-error-text)',
+    'error-dark': 'var(--ii-error-dark)',
+    info: 'var(--ii-info-text)',
+    // Contact types
+    client: 'var(--ii-client)',
+    applicant: 'var(--ii-applicant)',
+    // Badges
+    'badge-grey': 'var(--ii-badge-grey-text)',
+    'badge-blue': 'var(--ii-badge-blue-text)',
+    'badge-red': 'var(--ii-badge-red-text)',
+    'badge-purple': 'var(--ii-badge-purple-text)',
+    'badge-green': 'var(--ii-badge-green-text)',
+    'badge-orange': 'var(--ii-badge-orange-text)',
+    'badge-cyan': 'var(--ii-badge-cyan-text)',
+    'badge-pink': 'var(--ii-badge-pink-text)',
+    'badge-teal': 'var(--ii-badge-teal-text)',
+    'badge-amber': 'var(--ii-badge-amber-text)',
+    'badge-yellow': 'var(--ii-badge-yellow-text)',
+    // Filter chips
+    'filter-text': 'var(--ii-filter-text)',
+    'filter-operator': 'var(--ii-filter-operator)',
+    'filter-remove-icon': 'var(--ii-filter-remove-icon)',
+    // Page-specific
+    'email-text': 'var(--ii-email-text)',
+    'manual-text': 'var(--ii-manual-text)',
+    'login-particle': 'var(--ii-login-particle)',
+    'login-particle-link': 'var(--ii-login-particle-link)',
+    // Inspector
+    'inspector-text': 'var(--ii-inspector-text)',
+    'inspector-keyword': 'var(--ii-inspector-keyword)',
+};
+// border-* utilities
+export const borderColor = {
+    ...shared,
+    // Border hierarchy
+    primary: 'var(--ii-border)',
+    strong: 'var(--ii-border-strong)',
+    subtle: 'var(--ii-background-alt)', // very subtle divider (lighter than primary)
+    // Input
+    'input-border': 'var(--color-input-border)',
+    'input-border-hover': 'var(--color-input-border-hover)',
+    'input-border-active': 'var(--color-input-border-active)',
+    'input-border-error': 'var(--color-input-border-error)',
+    // Dropdown
+    'dropdown-border': 'var(--color-dropdown-border)',
+    // Brand
+    accent: 'var(--ii-primary)',
+    'accent-hover': 'var(--ii-primary-hover)',
+    // Semantic
+    success: 'var(--ii-success)',
+    'success-dark': 'var(--ii-success-dark)',
+    warning: 'var(--ii-warning)',
+    error: 'var(--ii-error)',
+    info: 'var(--ii-info)',
+    // Contact types
+    client: 'var(--ii-client-border)',
+    applicant: 'var(--ii-applicant-border)',
+    // Badges
+    'badge-grey': 'var(--ii-badge-grey-border)',
+    'badge-blue': 'var(--ii-badge-blue-border)',
+    'badge-red': 'var(--ii-badge-red-border)',
+    'badge-purple': 'var(--ii-badge-purple-border)',
+    'badge-green': 'var(--ii-badge-green-border)',
+    'badge-orange': 'var(--ii-badge-orange-border)',
+    'badge-cyan': 'var(--ii-badge-cyan-border)',
+    'badge-pink': 'var(--ii-badge-pink-border)',
+    'badge-teal': 'var(--ii-badge-teal-border)',
+    'badge-amber': 'var(--ii-badge-amber-border)',
+    'badge-yellow': 'var(--ii-badge-yellow-border)',
+    // Filter chips
+    'filter-border': 'var(--ii-filter-border)',
+    // Focus ring
+    'focus-primary': 'var(--ii-focus-primary)',
+    'focus-error': 'var(--ii-focus-error)',
+    // Page-specific
+    'login-card': 'var(--ii-login-card-border)',
+    // Inspector
+    'inspector-border': 'var(--ii-inspector-border)',
+};
+// outline-* utilities
+export const outlineColor = {
+    primary: 'var(--ii-focus-primary)',
+    error: 'var(--ii-focus-error)',
+    blue: 'var(--ii-focus-blue)',
+};
+// ring-* color utilities
+export const ringColor = {
+    primary: 'var(--ii-focus-primary)',
+    error: 'var(--ii-focus-error)',
+    blue: 'var(--ii-focus-blue)',
+};

package/dist/style/tailwind/preset.js

@@ -0,0 +1,103 @@
+import { backgroundColor, textColor, borderColor, outlineColor, ringColor } from './colors';
+import { fontSize } from './typography';
+import { spacing } from './spacing';
+import { boxShadow } from './shadows';
+import { borderRadius } from './radius';
+import { animation, keyframes, loadingSkeletonsPlugin } from './animations';
+import { zIndex } from './z-index';
+export default {
+    plugins: [loadingSkeletonsPlugin],
+    theme: {
+        backgroundColor,
+        textColor,
+        borderColor,
+        outlineColor,
+        ringColor,
+        fontSize,
+        spacing,
+        boxShadow,
+        borderRadius,
+        zIndex,
+        minWidth: ({ theme }) => ({
+            ...theme('spacing'),
+            full: '100%',
+            min: 'min-content',
+            max: 'max-content',
+            fit: 'fit-content',
+            screen: '100vw',
+        }),
+        minHeight: ({ theme }) => ({
+            ...theme('spacing'),
+            full: '100%',
+            screen: '100vh',
+        }),
+        maxWidth: ({ theme }) => ({
+            ...theme('spacing'),
+            '1200': '120rem',
+            '1280': '128rem',
+            '1400': '140rem',
+            full: '100%',
+            min: 'min-content',
+            max: 'max-content',
+            fit: 'fit-content',
+            screen: '100vw',
+        }),
+        maxHeight: ({ theme }) => ({
+            ...theme('spacing'),
+            full: '100%',
+            screen: '100vh',
+        }),
+        extend: {
+            keyframes,
+            animation,
+            transitionDuration: {
+                fast: '150ms',
+                base: '200ms',
+                slow: '300ms',
+            },
+            transitionTimingFunction: {
+                DEFAULT: 'ease',
+            },
+            transitionProperty: {
+                bg: 'background-color',
+            },
+            backdropBlur: ({ theme }) => ({
+                ...theme('spacing'),
+            }),
+            borderWidth: {
+                '1.5': '1.5px',
+                '3': '3px',
+            },
+            flex: {
+                fill: '1 1 0',
+                auto: '0 1 auto',
+                major: '0 0 70%',
+                minor: '0 0 30%',
+            },
+            gridTemplateColumns: {
+                'label-value': '1fr 48px',
+                'label-detail': 'minmax(120px, 200px) 1fr',
+                'sidebar-content': '1fr 450px',
+                'content-sidebar': '1fr 40%',
+                '6-col': '1fr 1fr 1fr 0.8fr 1.5fr 1fr',
+                'auto-180': 'repeat(auto-fill, minmax(180px, 1fr))',
+                'auto-200': 'repeat(auto-fill, minmax(200px, 1fr))',
+                'auto-250': 'repeat(auto-fit, minmax(250px, 1fr))',
+                'auto-340': 'repeat(auto-fill, minmax(340px, 1fr))',
+                'auto-fit-200': 'repeat(auto-fit, minmax(200px, 1fr))',
+            },
+            fontFamily: {
+                inherit: 'inherit',
+            },
+            textColor: {
+                inherit: 'inherit',
+            },
+            cursor: {
+                inherit: 'inherit',
+            },
+            accentColor: {
+                primary: 'var(--ii-primary)',
+            },
+        },
+    },
+};

package/dist/style/tailwind/radius.d.ts

@@ -0,0 +1 @@
+export declare const borderRadius: Record<string, string>;

package/dist/style/tailwind/radius.js

@@ -0,0 +1,5 @@
+import { spacing } from './spacing';
+export const borderRadius = {
+    ...spacing,
+    full: '9999px',
+};

package/dist/style/tailwind/shadows.d.ts

@@ -0,0 +1,15 @@
+export declare const boxShadow: {
+    none: string;
+    subtle: string;
+    card: string;
+    'card-hover': string;
+    dropdown: string;
+    modal: string;
+    drawer: string;
+    toast: string;
+    'focus-ring': string;
+    'selection-ring': string;
+    'comm-hover': string;
+    'login-card': string;
+    'dialog-overlay': string;
+};

package/dist/style/tailwind/shadows.js

@@ -0,0 +1,27 @@
+export const boxShadow = {
+    none: 'none',
+    // Subtle elevation (switch knobs, active pills)
+    subtle: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+    // Cards at rest
+    card: '0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06)',
+    // Card hover / raised state
+    'card-hover': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
+    // Dropdown menus, popovers, comboboxes, date pickers
+    dropdown: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+    // Modal dialogs
+    modal: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+    // Side drawers / floating panels
+    drawer: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+    // Toast notifications
+    toast: '0 4px 24px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(0, 0, 0, 0.08)',
+    // Focus ring — input/control focus state
+    'focus-ring': '0 0 0 3px var(--ii-focus-primary)',
+    // Selection ring — selected item indicator
+    'selection-ring': '0 0 0 2px var(--ii-primary-20)',
+    // Communication card hover
+    'comm-hover': '0 2px 8px var(--ii-shadow-subtle)',
+    // Login card — deep overlay shadow
+    'login-card': '0 20px 60px var(--ii-overlay), 0 0 1px var(--ii-hover-overlay)',
+    // Dialog overlay — elevated panel
+    'dialog-overlay': '0 20px 25px -5px var(--ii-hover-overlay), 0 10px 10px -5px var(--ii-shadow-xs)',
+};

package/dist/style/tailwind/spacing.d.ts

@@ -0,0 +1 @@
+export declare const spacing: Record<string, string>;

package/dist/style/tailwind/spacing.js

@@ -0,0 +1,37 @@
+// Continuous numeric scale: 0-999 where n = npx (with 62.5% base, 1rem = 10px).
+// p-4 = 0.4rem (4px), gap-12 = 1.2rem (12px), m-24 = 2.4rem (24px), etc.
+const numericScale = Array.from({ length: 1000 }, (_, i) => [String(i), i === 0 ? '0px' : `${i / 10}rem`]);
+export const spacing = {
+    ...Object.fromEntries(numericScale),
+    // Fractions
+    '1/2': '50%',
+    '1/3': '33.333333%',
+    '2/3': '66.666667%',
+    '1/4': '25%',
+    '2/4': '50%',
+    '3/4': '75%',
+    '1/5': '20%',
+    '2/5': '40%',
+    '3/5': '60%',
+    '4/5': '80%',
+    '1/6': '16.666667%',
+    '2/6': '33.333333%',
+    '3/6': '50%',
+    '4/6': '66.666667%',
+    '5/6': '83.333333%',
+    '1/10': '10%',
+    '3/10': '30%',
+    '7/10': '70%',
+    '9/10': '90%',
+    '7/20': '35%',
+    '9/20': '45%',
+    '11/20': '55%',
+    '13/20': '65%',
+    '17/20': '85%',
+    '19/20': '95%',
+    full: '100%',
+    none: '0px',
+    // Layout dimensions
+    sidebar: '22.4rem',
+    topbar: '4.8rem',
+};