bromcom-ui-next 0.1.5 → 0.1.7

package/dist/collection/styles/theme-variables.js

@@ -16,6 +16,353 @@ export const themeVariables = {
         'size-14': ['var(--bcm-ui-font-size-14, 96px)', { lineHeight: 'var(--bcm-ui-line-height-14, 96px)' }],
         'size-inherit': ['inherit', { lineHeight: 'inherit' }],
     },
+    backgroundColor: {
+        basic: {
+            masterpage: 'var(--bcm-ui-color-background-basic-masterpage)',
+            card: 'var(--bcm-ui-color-background-basic-card)',
+            modal: 'var(--bcm-ui-color-background-basic-modal)',
+            panel: 'var(--bcm-ui-color-background-basic-panel)',
+            base: 'var(--bcm-ui-color-background-basic-base)',
+        },
+        disabled: {
+            DEFAULT: 'var(--bcm-ui-color-background-disabled-default)',
+        },
+        base: {
+            DEFAULT: 'var(--bcm-ui-color-background-base-default)',
+            hover: 'var(--bcm-ui-color-background-base-hover)',
+            active: 'var(--bcm-ui-color-background-base-active)',
+        },
+        default: {
+            DEFAULT: 'var(--bcm-ui-color-background-default-default)',
+            hover: 'var(--bcm-ui-color-background-default-hover)',
+            active: 'var(--bcm-ui-color-background-default-active)',
+            dark: {
+                DEFAULT: 'var(--bcm-ui-color-background-default-dark-default)',
+                hover: 'var(--bcm-ui-color-background-default-dark-hover)',
+                active: 'var(--bcm-ui-color-background-default-dark-active)',
+            },
+        },
+        primary: {
+            DEFAULT: 'var(--bcm-ui-color-background-primary-default)',
+            hover: 'var(--bcm-ui-color-background-primary-hover)',
+            active: 'var(--bcm-ui-color-background-primary-active)',
+        },
+        info: {
+            DEFAULT: 'var(--bcm-ui-color-background-info-default)',
+            hover: 'var(--bcm-ui-color-background-info-hover)',
+            active: 'var(--bcm-ui-color-background-info-active)',
+        },
+        success: {
+            DEFAULT: 'var(--bcm-ui-color-background-success-default)',
+            hover: 'var(--bcm-ui-color-background-success-hover)',
+            active: 'var(--bcm-ui-color-background-success-active)',
+        },
+        warning: {
+            DEFAULT: 'var(--bcm-ui-color-background-warning-default)',
+            hover: 'var(--bcm-ui-color-background-warning-hover)',
+            active: 'var(--bcm-ui-color-background-warning-active)',
+        },
+        error: {
+            DEFAULT: 'var(--bcm-ui-color-background-error-default)',
+            hover: 'var(--bcm-ui-color-background-error-hover)',
+            active: 'var(--bcm-ui-color-background-error-active)',
+        },
+        transparent: {
+            DEFAULT: 'var(--bcm-ui-color-background-transparent-default)',
+        },
+        vivid: {
+            slate: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-slate-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-slate-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-slate-active)',
+            },
+            gray: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-gray-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-gray-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-gray-active)',
+            },
+            zinc: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-zinc-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-zinc-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-zinc-active)',
+            },
+            neutral: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-neutral-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-neutral-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-neutral-active)',
+            },
+            stone: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-stone-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-stone-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-stone-active)',
+            },
+            red: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-red-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-red-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-red-active)',
+            },
+            orange: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-orange-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-orange-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-orange-active)',
+            },
+            amber: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-amber-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-amber-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-amber-active)',
+            },
+            yellow: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-yellow-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-yellow-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-yellow-active)',
+            },
+            lime: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-lime-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-lime-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-lime-active)',
+            },
+            green: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-green-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-green-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-green-active)',
+            },
+            emerald: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-emerald-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-emerald-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-emerald-active)',
+            },
+            teal: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-teal-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-teal-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-teal-active)',
+            },
+            cyan: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-cyan-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-cyan-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-cyan-active)',
+            },
+            sky: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-sky-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-sky-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-sky-active)',
+            },
+            blue: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-blue-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-blue-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-blue-active)',
+            },
+            indigo: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-indigo-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-indigo-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-indigo-active)',
+            },
+            violet: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-violet-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-violet-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-violet-active)',
+            },
+            purple: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-purple-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-purple-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-purple-active)',
+            },
+            fuchsia: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-fuchsia-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-fuchsia-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-fuchsia-active)',
+            },
+            pink: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-pink-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-pink-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-pink-active)',
+            },
+            rose: {
+                DEFAULT: 'var(--bcm-ui-color-background-vivid-rose-default)',
+                hover: 'var(--bcm-ui-color-background-vivid-rose-hover)',
+                active: 'var(--bcm-ui-color-background-vivid-rose-active)',
+            },
+        },
+        soft: {
+            slate: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-slate-default)',
+            },
+            gray: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-gray-default)',
+            },
+            zinc: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-zinc-default)',
+            },
+            neutral: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-neutral-default)',
+            },
+            stone: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-stone-default)',
+            },
+            red: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-red-default)',
+            },
+            orange: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-orange-default)',
+            },
+            amber: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-amber-default)',
+            },
+            yellow: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-yellow-default)',
+            },
+            lime: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-lime-default)',
+            },
+            green: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-green-default)',
+            },
+            emerald: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-emerald-default)',
+            },
+            teal: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-teal-default)',
+            },
+            cyan: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-cyan-default)',
+            },
+            sky: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-sky-default)',
+            },
+            blue: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-blue-default)',
+            },
+            indigo: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-indigo-default)',
+            },
+            violet: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-violet-default)',
+            },
+            purple: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-purple-default)',
+            },
+            fuchsia: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-fuchsia-default)',
+            },
+            pink: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-pink-default)',
+            },
+            rose: {
+                DEFAULT: 'var(--bcm-ui-color-background-soft-rose-default)',
+            },
+        },
+        palette: {
+            slate: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-slate-default)',
+                hover: 'var(--bcm-ui-color-background-palette-slate-hover)',
+                active: 'var(--bcm-ui-color-background-palette-slate-active)',
+            },
+            gray: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-gray-default)',
+                hover: 'var(--bcm-ui-color-background-palette-gray-hover)',
+                active: 'var(--bcm-ui-color-background-palette-gray-active)',
+            },
+            zinc: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-zinc-default)',
+                hover: 'var(--bcm-ui-color-background-palette-zinc-hover)',
+                active: 'var(--bcm-ui-color-background-palette-zinc-active)',
+            },
+            neutral: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-neutral-default)',
+                hover: 'var(--bcm-ui-color-background-palette-neutral-hover)',
+                active: 'var(--bcm-ui-color-background-palette-neutral-active)',
+            },
+            stone: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-stone-default)',
+                hover: 'var(--bcm-ui-color-background-palette-stone-hover)',
+                active: 'var(--bcm-ui-color-background-palette-stone-active)',
+            },
+            red: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-red-default)',
+                hover: 'var(--bcm-ui-color-background-palette-red-hover)',
+                active: 'var(--bcm-ui-color-background-palette-red-active)',
+            },
+            orange: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-orange-default)',
+                hover: 'var(--bcm-ui-color-background-palette-orange-hover)',
+                active: 'var(--bcm-ui-color-background-palette-orange-active)',
+            },
+            amber: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-amber-default)',
+                hover: 'var(--bcm-ui-color-background-palette-amber-hover)',
+                active: 'var(--bcm-ui-color-background-palette-amber-active)',
+            },
+            yellow: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-yellow-default)',
+                hover: 'var(--bcm-ui-color-background-palette-yellow-hover)',
+                active: 'var(--bcm-ui-color-background-palette-yellow-active)',
+            },
+            lime: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-lime-default)',
+                hover: 'var(--bcm-ui-color-background-palette-lime-hover)',
+                active: 'var(--bcm-ui-color-background-palette-lime-active)',
+            },
+            green: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-green-default)',
+                hover: 'var(--bcm-ui-color-background-palette-green-hover)',
+                active: 'var(--bcm-ui-color-background-palette-green-active)',
+            },
+            emerald: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-emerald-default)',
+                hover: 'var(--bcm-ui-color-background-palette-emerald-hover)',
+                active: 'var(--bcm-ui-color-background-palette-emerald-active)',
+            },
+            teal: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-teal-default)',
+                hover: 'var(--bcm-ui-color-background-palette-teal-hover)',
+                active: 'var(--bcm-ui-color-background-palette-teal-active)',
+            },
+            cyan: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-cyan-default)',
+                hover: 'var(--bcm-ui-color-background-palette-cyan-hover)',
+                active: 'var(--bcm-ui-color-background-palette-cyan-active)',
+            },
+            sky: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-sky-default)',
+                hover: 'var(--bcm-ui-color-background-palette-sky-hover)',
+                active: 'var(--bcm-ui-color-background-palette-sky-active)',
+            },
+            blue: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-blue-default)',
+                hover: 'var(--bcm-ui-color-background-palette-blue-hover)',
+                active: 'var(--bcm-ui-color-background-palette-blue-active)',
+            },
+            indigo: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-indigo-default)',
+                hover: 'var(--bcm-ui-color-background-palette-indigo-hover)',
+                active: 'var(--bcm-ui-color-background-palette-indigo-active)',
+            },
+            violet: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-violet-default)',
+                hover: 'var(--bcm-ui-color-background-palette-violet-hover)',
+                active: 'var(--bcm-ui-color-background-palette-violet-active)',
+            },
+            purple: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-purple-default)',
+                hover: 'var(--bcm-ui-color-background-palette-purple-hover)',
+                active: 'var(--bcm-ui-color-background-palette-purple-active)',
+            },
+            fuchsia: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-fuchsia-default)',
+                hover: 'var(--bcm-ui-color-background-palette-fuchsia-hover)',
+                active: 'var(--bcm-ui-color-background-palette-fuchsia-active)',
+            },
+            pink: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-pink-default)',
+                hover: 'var(--bcm-ui-color-background-palette-pink-hover)',
+                active: 'var(--bcm-ui-color-background-palette-pink-active)',
+            },
+            rose: {
+                DEFAULT: 'var(--bcm-ui-color-background-palette-rose-default)',
+                hover: 'var(--bcm-ui-color-background-palette-rose-hover)',
+                active: 'var(--bcm-ui-color-background-palette-rose-active)',
+            },
+        },
+    },
     boxShadow: {
         'sm': 'var(--bcm-ui-box-shadow-sm)',
         'DEFAULT': 'var(--bcm-ui-box-shadow-default)',
@@ -30,25 +377,74 @@ export const themeVariables = {
         '3': 'var(--bcm-ui-box-shadow-3)',
         '4': 'var(--bcm-ui-box-shadow-4)',
     },
+    borderRadius: {
+        'none': 'var(--bcm-ui-border-radius-none, 0)',
+        'xs': 'var(--bcm-ui-border-radius-xs, 2px)',
+        'sm': 'var(--bcm-ui-border-radius-sm, 4px)',
+        'md': 'var(--bcm-ui-border-radius-md, 6px)',
+        'lg': 'var(--bcm-ui-border-radius-lg, 8px)',
+        'xl': 'var(--bcm-ui-border-radius-xl, 12px)',
+        '2xl': 'var(--bcm-ui-border-radius-2xl, 16px)',
+        '3xl': 'var(--bcm-ui-border-radius-3xl, 24px)',
+        '4xl': 'var(--bcm-ui-border-radius-4xl, 32px)',
+        'full': 'var(--bcm-ui-border-radius-full, 9999px)',
+        'DEFAULT': 'var(--bcm-ui-border-radius-default, 6px)',
+        'default': 'var(--bcm-ui-border-radius-default, 6px)',
+    },
+    borderColor: {
+        'base': 'var(--bcm-ui-color-border-base)',
+        'default': 'var(--bcm-ui-color-border-default)',
+        'default-alt': 'var(--bcm-ui-color-border-default-alt)',
+        'focus': 'var(--bcm-ui-color-border-focus)',
+        'disabled': 'var(--bcm-ui-color-border-disabled)',
+        'primary': 'var(--bcm-ui-color-border-primary)',
+        'info': 'var(--bcm-ui-color-border-info)',
+        'success': 'var(--bcm-ui-color-border-success)',
+        'warning': 'var(--bcm-ui-color-border-warning)',
+        'error': 'var(--bcm-ui-color-border-error)',
+        'palette': {
+            slate: 'var(--bcm-ui-color-border-palette-slate)',
+            gray: 'var(--bcm-ui-color-border-palette-gray)',
+            zinc: 'var(--bcm-ui-color-border-palette-zinc)',
+            neutral: 'var(--bcm-ui-color-border-palette-neutral)',
+            stone: 'var(--bcm-ui-color-border-palette-stone)',
+            red: 'var(--bcm-ui-color-border-palette-red)',
+            orange: 'var(--bcm-ui-color-border-palette-orange)',
+            amber: 'var(--bcm-ui-color-border-palette-amber)',
+            yellow: 'var(--bcm-ui-color-border-palette-yellow)',
+            lime: 'var(--bcm-ui-color-border-palette-lime)',
+            green: 'var(--bcm-ui-color-border-palette-green)',
+            emerald: 'var(--bcm-ui-color-border-palette-emerald)',
+            teal: 'var(--bcm-ui-color-border-palette-teal)',
+            cyan: 'var(--bcm-ui-color-border-palette-cyan)',
+            sky: 'var(--bcm-ui-color-border-palette-sky)',
+            blue: 'var(--bcm-ui-color-border-palette-blue)',
+            indigo: 'var(--bcm-ui-color-border-palette-indigo)',
+            violet: 'var(--bcm-ui-color-border-palette-violet)',
+            purple: 'var(--bcm-ui-color-border-palette-purple)',
+            fuchsia: 'var(--bcm-ui-color-border-palette-fuchsia)',
+            pink: 'var(--bcm-ui-color-border-palette-pink)',
+            rose: 'var(--bcm-ui-color-border-palette-rose)',
+        },
+    },
     textColor: {
-        DEFAULT: 'var(--bcm-ui-color-text-default)',
-        default: 'var(--bcm-ui-color-text-default)',
-        base: 'var(--bcm-ui-color-text-base)',
-        header: 'var(--bcm-ui-color-text-header)',
-        label: 'var(--bcm-ui-color-text-label)',
-        helper: 'var(--bcm-ui-color-text-helper)',
-        placeholder: 'var(--bcm-ui-color-text-placeholder)',
-        caption: 'var(--bcm-ui-color-text-caption)',
-        iconDefault: 'var(--bcm-ui-color-text-icon-default)',
-        iconDark: 'var(--bcm-ui-color-text-icon-dark)',
-        primary: 'var(--bcm-ui-color-text-primary)',
-        info: 'var(--bcm-ui-color-text-info)',
-        success: 'var(--bcm-ui-color-text-success)',
-        warning: 'var(--bcm-ui-color-text-warning)',
-        error: 'var(--bcm-ui-color-text-error)',
-        disabled: 'var(--bcm-ui-color-text-disabled)',
-        visited: 'var(--bcm-ui-color-text-visited)',
-        palette: {
+        'base': 'var(--bcm-ui-color-text-base)',
+        'header': 'var(--bcm-ui-color-text-header)',
+        'default': 'var(--bcm-ui-color-text-default)',
+        'label': 'var(--bcm-ui-color-text-label)',
+        'helper': 'var(--bcm-ui-color-text-helper)',
+        'placeholder': 'var(--bcm-ui-color-text-placeholder)',
+        'caption': 'var(--bcm-ui-color-text-caption)',
+        'icon-default': 'var(--bcm-ui-color-text-icon-default)',
+        'icon-dark': 'var(--bcm-ui-color-text-icon-dark)',
+        'primary': 'var(--bcm-ui-color-text-primary)',
+        'info': 'var(--bcm-ui-color-text-info)',
+        'success': 'var(--bcm-ui-color-text-success)',
+        'warning': 'var(--bcm-ui-color-text-warning)',
+        'error': 'var(--bcm-ui-color-text-error)',
+        'disabled': 'var(--bcm-ui-color-text-disabled)',
+        'visited': 'var(--bcm-ui-color-text-visited)',
+        'palette': {
             slate: 'var(--bcm-ui-color-text-palette-slate)',
             gray: 'var(--bcm-ui-color-text-palette-gray)',
             zinc: 'var(--bcm-ui-color-text-palette-zinc)',