@ibis-design/css 0.5.0 → 0.7.0

package/dist/ibis/ibis-design.scss

@@ -1,258 +0,0 @@
-
-// Do not edit directly, this file was auto-generated.
-
-$color-primary-50: #f5f3ff;
-$color-primary-100: #edeafd;
-$color-primary-200: #ded7fd;
-$color-primary-300: #c7b8fa;
-$color-primary-400: #aa8ff6;
-$color-primary-500: #8e56e0;
-$color-primary-600: #8647e5;
-$color-primary-700: #7d42d6;
-$color-primary-800: #713bc1;
-$color-primary-900: #522398;
-$color-primary-950: #301362;
-$color-neutral-50: #f4f4f4;
-$color-neutral-100: #dbdbdb;
-$color-neutral-200: #d1d1d1;
-$color-neutral-300: #c1c1c1;
-$color-neutral-400: #a8a8a8;
-$color-neutral-500: #6d6d6d;
-$color-neutral-600: #5d5d5d;
-$color-neutral-700: #4f4f4f;
-$color-neutral-800: #454545;
-$color-neutral-900: #3d3d3d;
-$color-neutral-950: #000000;
-$color-white: #ffffff;
-$color-black: #000000;
-$color-green-500: #009a08;
-$color-red-500: #b70c00;
-$color-orange-500: #fa8900;
-$color-gradients-main-start: #3b1570;
-$color-gradients-main-end: #8e0175;
-$color-gradients-purple-start: #c519a3;
-$color-gradients-purple-end: #713bc1;
-$color-gradients-dark-purple-start: #713bc1;
-$color-gradients-dark-purple-end: #bd91ff;
-$spacing-0: 0;
-$spacing-1: 0.25rem;
-$spacing-2: 0.5rem;
-$spacing-3: 0.75rem;
-$spacing-4: 1rem;
-$spacing-5: 1.25rem;
-$spacing-6: 1.5rem;
-$spacing-7: 1.75rem;
-$spacing-8: 2rem;
-$spacing-9: 2.25rem;
-$spacing-10: 2.5rem;
-$spacing-12: 3rem;
-$spacing-14: 3.5rem;
-$spacing-16: 4rem;
-$spacing-20: 5rem;
-$spacing-24: 6rem;
-$font-family-branding: 'Beyond Infinity', cursive; // Logo and brand display
-$font-family-heading: Metrisch, Poppins, system-ui, sans-serif; // Headings and display text
-$font-family-sans: Inter, Verdana, system-ui, sans-serif; // Body and UI text
-$font-weight-thin: 100;
-$font-weight-extralight: 200;
-$font-weight-light: 300;
-$font-weight-normal: 400;
-$font-weight-medium: 500;
-$font-weight-semibold: 600;
-$font-weight-bold: 700;
-$font-weight-extrabold: 800;
-$font-weight-black: 900;
-$font-size-body-sm: 0.75rem;
-$font-size-body-md: 1rem;
-$font-size-body-lg: 1.25rem;
-$font-size-heading-h1: 4.188rem;
-$font-size-heading-h2: 3.188rem;
-$font-size-heading-h3: 2.375rem;
-$font-size-heading-h4: 1.75rem;
-$font-size-heading-h5: 1.312rem;
-$font-style-normal: normal;
-$font-style-italic: italic;
-$text-transform-uppercase: uppercase;
-$text-transform-lowercase: lowercase;
-$text-transform-capitalize: capitalize;
-$line-height-tight: 1.25;
-$line-height-normal: 1.5;
-$line-height-relaxed: 1.75;
-$line-height-loose: 2;
-$letter-spacing-tighter: -0.05em;
-$letter-spacing-tight: -0.025em;
-$letter-spacing-normal: 0;
-$letter-spacing-wide: 0.025em;
-$letter-spacing-wider: 0.05em;
-$border-radius-none: 0;
-$border-radius-xs: 0.25rem;
-$border-radius-sm: 0.375rem;
-$border-radius-md: 0.5rem;
-$border-radius-lg: 0.75rem;
-$border-radius-xl: 1rem;
-$border-radius-2xl: 1.5rem;
-$border-radius-full: 9999px;
-$border-width-none: 0;
-$border-width-hairline: 0.5px;
-$border-width-thin: 1px;
-$border-width-default: 2px;
-$border-width-medium: 3px;
-$border-width-thick: 4px;
-$shadow-color-black-soft: rgba(0, 0, 0, 0.1);
-$shadow-color-black-medium: rgba(0, 0, 0, 0.15);
-$shadow-color-black-strong: rgba(0, 0, 0, 0.25);
-$shadow-color-brand-soft: rgba(223, 238, 255, 0.1);
-$shadow-color-brand-medium: rgba(223, 238, 255, 0.15);
-$shadow-color-brand-strong: rgba(223, 238, 255, 0.25);
-$shadow-color-white-soft: rgba(255, 255, 255, 0.1);
-$shadow-color-white-medium: rgba(255, 255, 255, 0.15);
-$shadow-color-white-strong: rgba(255, 255, 255, 0.25);
-$shadow-none: ;
-$logo-square-sm: 24px;
-$logo-square-md: 32px;
-$logo-square-lg: 40px;
-$logo-square-xl: 48px;
-$logo-square-main: 255px;
-$icons-xs: 16px;
-$icons-sm: 24px;
-$icons-md: 32px;
-$icons-lg: 48px;
-$icons-xl: 56px;
-$z-index-base: 0;
-$z-index-dropdown: 1000;
-$z-index-sticky: 1100;
-$z-index-overlay: 1200;
-$z-index-modal: 1300;
-$z-index-popover: 1400;
-$z-index-tooltip: 1500;
-$opacity-1: 0.1;
-$opacity-2: 0.2;
-$opacity-3: 0.3;
-$opacity-4: 0.4;
-$opacity-5: 0.5;
-$opacity-6: 0.6;
-$opacity-7: 0.7;
-$opacity-8: 0.8;
-$opacity-9: 0.9;
-$opacity-disabled: 0.5;
-$opacity-muted: 0.75;
-$opacity-subtle: 0.9;
-$transition-duration-fast: 150ms;
-$transition-duration-normal: 250ms;
-$transition-duration-slow: 400ms;
-$transition-timing-default: ease;
-$transition-timing-in: ease-in;
-$transition-timing-out: ease-out;
-$transition-timing-in-out: ease-in-out;
-$breakpoint-2xs: 360px;
-$breakpoint-xs: 480px;
-$breakpoint-sm: 640px;
-$breakpoint-md: 768px;
-$breakpoint-lg: 1024px;
-$breakpoint-xl: 1280px;
-$breakpoint-2xl: 1536px;
-$blur-none: 0;
-$blur-xs: 2px;
-$blur-sm: 4px;
-$blur-md: 6px;
-$blur-lg: 8px;
-$blur-xl: 12px;
-$blur-2xl: 16px;
-$blur-3xl: 24px;
-$size-xs: 16px;
-$size-sm: 24px;
-$size-md: 32px;
-$size-lg: 48px;
-$size-xl: 56px;
-$size-2xl: 64px;
-$component-button-size-xs-border-radius: 10px;
-$component-button-size-sm-border-radius: 12px;
-$component-button-size-md-border-radius: 16px;
-$component-button-size-lg-border-radius: 16px;
-$color-text-primary: $color-black;
-$color-text-inverse: $color-white;
-$color-border-default: $color-neutral-200;
-$color-border-focus: $color-primary-300;
-$color-status-success: $color-green-500;
-$color-status-error: $color-red-500;
-$color-status-warning: $color-orange-500;
-$gradient-brand-primary: [object Object];
-$text-style-body-font-family: $font-family-sans;
-$text-style-body-font-size: $font-size-body-md;
-$text-style-body-line-height: $line-height-normal;
-$text-style-body-font-weight: $font-weight-normal;
-$text-style-heading-font-family: $font-family-heading;
-$text-style-heading-font-size: $font-size-heading-h2;
-$text-style-heading-line-height: $line-height-tight;
-$text-style-heading-font-weight: $font-weight-bold;
-$shadow-default: 0 0 3px 0 $shadow-color-black-soft, 0 0 2px -1px $shadow-color-black-soft;
-$shadow-md: 0 0 6px -1px $shadow-color-black-soft, 0 0 4px -2px $shadow-color-black-soft;
-$shadow-lg: 0 0 15px -3px $shadow-color-black-soft, 0 0 6px -4px $shadow-color-black-soft;
-$shadow-xl: 0 0 25px -5px $shadow-color-black-soft, 0 0 10px -6px $shadow-color-black-soft;
-$shadow-2xl: 0 0 50px -12px $shadow-color-black-strong;
-$shadow-inner: 0 0 4px 0 $shadow-color-black-soft;
-$shadow-button-inner: 0 0 4px 0 $shadow-color-brand-soft, 0 0 1px 0 $shadow-color-white-soft;
-$component-button-primary-default-border-width: $border-width-thin;
-$component-button-primary-default-padding-x: $spacing-4;
-$component-button-primary-default-padding-y: $spacing-2;
-$component-button-primary-hover-background: $color-primary-900;
-$component-button-primary-focused-background: $color-primary-900;
-$component-button-primary-focused-border-width: $border-width-medium;
-$component-button-primary-disabled-background: $color-neutral-200;
-$component-button-primary-disabled-color: $color-neutral-300;
-$component-button-primary-disabled-border-color: $color-neutral-300;
-$component-button-secondary-default-background: $color-primary-50;
-$component-button-secondary-default-color: $color-primary-900;
-$component-button-secondary-default-border-color: $color-primary-50;
-$component-button-secondary-default-border-width: $border-width-thin;
-$component-button-secondary-default-padding-x: $spacing-4;
-$component-button-secondary-default-padding-y: $spacing-2;
-$component-button-secondary-hover-background: $color-primary-50;
-$component-button-secondary-hover-border-color: $color-primary-900;
-$component-button-secondary-focused-background: $color-primary-50;
-$component-button-secondary-focused-border-color: $color-primary-900;
-$component-button-secondary-focused-border-width: $border-width-thick;
-$component-button-secondary-disabled-background: $color-white;
-$component-button-secondary-disabled-color: $color-neutral-300;
-$component-button-secondary-disabled-border-color: $color-neutral-300;
-$component-toaster-default-background: $color-neutral-200;
-$component-toaster-default-border-color: $color-neutral-200;
-$component-toaster-default-border-width: $border-width-thin;
-$component-toaster-success-background: $color-green-500;
-$component-toaster-success-border-color: $color-green-500;
-$component-toaster-success-border-width: $border-width-thin;
-$component-toaster-error-background: $color-red-500;
-$component-toaster-error-border-color: $color-red-500;
-$component-toaster-error-border-width: $border-width-thin;
-$component-toaster-accent-background: $color-neutral-200;
-$component-toaster-accent-color: $color-black;
-$component-toaster-accent-border-color: $color-neutral-200;
-$component-toaster-accent-border-width: $border-width-thin;
-$component-banner-default-background: $color-neutral-200;
-$component-banner-default-background-opacity: $opacity-1;
-$component-banner-default-border-color: $color-neutral-200;
-$component-banner-default-border-width: $border-width-thin;
-$component-banner-success-background: $color-green-500;
-$component-banner-success-background-opacity: $opacity-1;
-$component-banner-success-border-color: $color-green-500;
-$component-banner-success-border-width: $border-width-thin;
-$component-banner-error-background: $color-red-500;
-$component-banner-error-background-opacity: $opacity-1;
-$component-banner-error-border-color: $color-red-500;
-$component-banner-error-border-width: $border-width-thin;
-$component-banner-accent-background: $color-neutral-200;
-$component-banner-accent-background-opacity: $opacity-1;
-$component-banner-accent-color: $color-black;
-$component-banner-accent-border-color: $color-neutral-200;
-$component-banner-accent-border-width: $border-width-thin;
-$component-button-primary-default-background: $gradient-brand-primary;
-$component-button-primary-default-color: $color-text-inverse;
-$component-button-primary-default-border-color: $color-border-default;
-$component-button-primary-default-shadow: $shadow-button-inner;
-$component-button-primary-hover-border-color: $color-border-default;
-$component-toaster-default-color: $color-text-primary;
-$component-toaster-success-color: $color-text-inverse;
-$component-toaster-error-color: $color-text-inverse;
-$component-banner-default-color: $color-text-primary;
-$component-banner-success-color: $color-text-inverse;
-$component-banner-error-color: $color-text-inverse;

package/dist/ibis/tailwind.preset.js

@@ -1,410 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-  content: ["./src/**/*.{ts,tsx}"],
-  darkMode: "class",
-  theme: {
-    extend: {
-      color: {
-        primary: {
-          50: "var(--color-primary-50)",
-          100: "var(--color-primary-100)",
-          200: "var(--color-primary-200)",
-          300: "var(--color-primary-300)",
-          400: "var(--color-primary-400)",
-          500: "var(--color-primary-500)",
-          600: "var(--color-primary-600)",
-          700: "var(--color-primary-700)",
-          800: "var(--color-primary-800)",
-          900: "var(--color-primary-900)",
-          950: "var(--color-primary-950)"
-        },
-        neutral: {
-          50: "var(--color-neutral-50)",
-          100: "var(--color-neutral-100)",
-          200: "var(--color-neutral-200)",
-          300: "var(--color-neutral-300)",
-          400: "var(--color-neutral-400)",
-          500: "var(--color-neutral-500)",
-          600: "var(--color-neutral-600)",
-          700: "var(--color-neutral-700)",
-          800: "var(--color-neutral-800)",
-          900: "var(--color-neutral-900)",
-          950: "var(--color-neutral-950)"
-        },
-        white: "var(--color-white)",
-        black: "var(--color-black)",
-        green: {
-          500: "var(--color-green-500)"
-        },
-        red: {
-          500: "var(--color-red-500)"
-        },
-        orange: {
-          500: "var(--color-orange-500)"
-        },
-        text: {
-          primary: "var(--color-text-primary)",
-          inverse: "var(--color-text-inverse)"
-        },
-        border: {
-          default: "var(--color-border-default)",
-          focus: "var(--color-border-focus)"
-        },
-        status: {
-          success: "var(--color-status-success)",
-          error: "var(--color-status-error)",
-          warning: "var(--color-status-warning)"
-        },
-        gradients: {
-          main: {
-            start: "var(--color-gradients-main-start)",
-            end: "var(--color-gradients-main-end)"
-          },
-          purple: {
-            start: "var(--color-gradients-purple-start)",
-            end: "var(--color-gradients-purple-end)"
-          },
-          darkPurple: {
-            start: "var(--color-gradients-dark-purple-start)",
-            end: "var(--color-gradients-dark-purple-end)"
-          }
-        }
-      },
-      gradient: {
-        brand: {
-          primary: "var(--gradient-brand-primary)"
-        }
-      },
-      spacing: {
-        0: "var(--spacing-0)",
-        1: "var(--spacing-1)",
-        2: "var(--spacing-2)",
-        3: "var(--spacing-3)",
-        4: "var(--spacing-4)",
-        5: "var(--spacing-5)",
-        6: "var(--spacing-6)",
-        7: "var(--spacing-7)",
-        8: "var(--spacing-8)",
-        9: "var(--spacing-9)",
-        10: "var(--spacing-10)",
-        12: "var(--spacing-12)",
-        14: "var(--spacing-14)",
-        16: "var(--spacing-16)",
-        20: "var(--spacing-20)",
-        24: "var(--spacing-24)"
-      },
-      fontFamily: {
-        branding: "var(--font-family-branding)",
-        heading: "var(--font-family-heading)",
-        sans: "var(--font-family-sans)"
-      },
-      fontWeight: {
-        thin: "var(--font-weight-thin)",
-        extralight: "var(--font-weight-extralight)",
-        light: "var(--font-weight-light)",
-        normal: "var(--font-weight-normal)",
-        medium: "var(--font-weight-medium)",
-        semibold: "var(--font-weight-semibold)",
-        bold: "var(--font-weight-bold)",
-        extrabold: "var(--font-weight-extrabold)",
-        black: "var(--font-weight-black)"
-      },
-      fontSize: {
-        body: {
-          sm: "var(--font-size-body-sm)",
-          md: "var(--font-size-body-md)",
-          lg: "var(--font-size-body-lg)"
-        },
-        heading: {
-      "h1": "var(--font-size-heading-h1)",
-      "h2": "var(--font-size-heading-h2)",
-      "h3": "var(--font-size-heading-h3)",
-      "h4": "var(--font-size-heading-h4)",
-      "h5": "var(--font-size-heading-h5)"
-        }
-      },
-      fontStyle: {
-        normal: "var(--font-style-normal)",
-        italic: "var(--font-style-italic)"
-      },
-      textTransform: {
-        uppercase: "var(--text-transform-uppercase)",
-        lowercase: "var(--text-transform-lowercase)",
-        capitalize: "var(--text-transform-capitalize)"
-      },
-      lineHeight: {
-        tight: "var(--line-height-tight)",
-        normal: "var(--line-height-normal)",
-        relaxed: "var(--line-height-relaxed)",
-        loose: "var(--line-height-loose)"
-      },
-      letterSpacing: {
-        tighter: "var(--letter-spacing-tighter)",
-        tight: "var(--letter-spacing-tight)",
-        normal: "var(--letter-spacing-normal)",
-        wide: "var(--letter-spacing-wide)",
-        wider: "var(--letter-spacing-wider)"
-      },
-      textStyle: {
-        body: {
-          fontFamily: "var(--text-style-body-font-family)",
-          fontSize: "var(--text-style-body-font-size)",
-          lineHeight: "var(--text-style-body-line-height)",
-          fontWeight: "var(--text-style-body-font-weight)"
-        },
-        heading: {
-          fontFamily: "var(--text-style-heading-font-family)",
-          fontSize: "var(--text-style-heading-font-size)",
-          lineHeight: "var(--text-style-heading-line-height)",
-          fontWeight: "var(--text-style-heading-font-weight)"
-        }
-      },
-      borderRadius: {
-        none: "var(--border-radius-none)",
-        xs: "var(--border-radius-xs)",
-        sm: "var(--border-radius-sm)",
-        md: "var(--border-radius-md)",
-        lg: "var(--border-radius-lg)",
-        xl: "var(--border-radius-xl)",
-    "2xl": "var(--border-radius-2xl)",
-        full: "var(--border-radius-full)"
-      },
-      borderWidth: {
-        none: "var(--border-width-none)",
-        hairline: "var(--border-width-hairline)",
-        thin: "var(--border-width-thin)",
-        default: "var(--border-width-default)",
-        medium: "var(--border-width-medium)",
-        thick: "var(--border-width-thick)"
-      },
-      shadowColor: {
-        black: {
-          soft: "var(--shadow-color-black-soft)",
-          medium: "var(--shadow-color-black-medium)",
-          strong: "var(--shadow-color-black-strong)"
-        },
-        brand: {
-          soft: "var(--shadow-color-brand-soft)",
-          medium: "var(--shadow-color-brand-medium)",
-          strong: "var(--shadow-color-brand-strong)"
-        },
-        white: {
-          soft: "var(--shadow-color-white-soft)",
-          medium: "var(--shadow-color-white-medium)",
-          strong: "var(--shadow-color-white-strong)"
-        }
-      },
-      shadow: {
-        none: "var(--shadow-none)",
-        default: "var(--shadow-default)",
-        md: "var(--shadow-md)",
-        lg: "var(--shadow-lg)",
-        xl: "var(--shadow-xl)",
-    "2xl": "var(--shadow-2xl)",
-        inner: "var(--shadow-inner)",
-        buttonInner: "var(--shadow-button-inner)"
-      },
-      logo: {
-        square: {
-          sm: "var(--logo-square-sm)",
-          md: "var(--logo-square-md)",
-          lg: "var(--logo-square-lg)",
-          xl: "var(--logo-square-xl)",
-          main: "var(--logo-square-main)"
-        }
-      },
-      icons: {
-        xs: "var(--icons-xs)",
-        sm: "var(--icons-sm)",
-        md: "var(--icons-md)",
-        lg: "var(--icons-lg)",
-        xl: "var(--icons-xl)"
-      },
-      zIndex: {
-        base: "var(--z-index-base)",
-        dropdown: "var(--z-index-dropdown)",
-        sticky: "var(--z-index-sticky)",
-        overlay: "var(--z-index-overlay)",
-        modal: "var(--z-index-modal)",
-        popover: "var(--z-index-popover)",
-        tooltip: "var(--z-index-tooltip)"
-      },
-      opacity: {
-        1: "var(--opacity-1)",
-        2: "var(--opacity-2)",
-        3: "var(--opacity-3)",
-        4: "var(--opacity-4)",
-        5: "var(--opacity-5)",
-        6: "var(--opacity-6)",
-        7: "var(--opacity-7)",
-        8: "var(--opacity-8)",
-        9: "var(--opacity-9)",
-        disabled: "var(--opacity-disabled)",
-        muted: "var(--opacity-muted)",
-        subtle: "var(--opacity-subtle)"
-      },
-      transition: {
-        duration: {
-          fast: "var(--transition-duration-fast)",
-          normal: "var(--transition-duration-normal)",
-          slow: "var(--transition-duration-slow)"
-        },
-        timing: {
-          DEFAULT: "var(--transition-timing-default)",
-          in: "var(--transition-timing-in)",
-          out: "var(--transition-timing-out)",
-          inOut: "var(--transition-timing-in-out)"
-        }
-      },
-      breakpoint: {
-    "2xs": "var(--breakpoint-2xs)",
-        xs: "var(--breakpoint-xs)",
-        sm: "var(--breakpoint-sm)",
-        md: "var(--breakpoint-md)",
-        lg: "var(--breakpoint-lg)",
-        xl: "var(--breakpoint-xl)",
-    "2xl": "var(--breakpoint-2xl)"
-      },
-      blur: {
-        none: "var(--blur-none)",
-        xs: "var(--blur-xs)",
-        sm: "var(--blur-sm)",
-        md: "var(--blur-md)",
-        lg: "var(--blur-lg)",
-        xl: "var(--blur-xl)",
-    "2xl": "var(--blur-2xl)",
-    "3xl": "var(--blur-3xl)"
-      },
-      size: {
-        xs: "var(--size-xs)",
-        sm: "var(--size-sm)",
-        md: "var(--size-md)",
-        lg: "var(--size-lg)",
-        xl: "var(--size-xl)",
-    "2xl": "var(--size-2xl)"
-      },
-      component: {
-        button: {
-          primary: {
-            default: {
-              background: "var(--component-button-primary-default-background)",
-              color: "var(--component-button-primary-default-color)",
-              borderColor: "var(--component-button-primary-default-border-color)",
-              borderWidth: "var(--component-button-primary-default-border-width)",
-              paddingX: "var(--component-button-primary-default-padding-x)",
-              paddingY: "var(--component-button-primary-default-padding-y)",
-              shadow: "var(--component-button-primary-default-shadow)"
-            },
-            hover: {
-              background: "var(--component-button-primary-hover-background)",
-              borderColor: "var(--component-button-primary-hover-border-color)"
-            },
-            focused: {
-              background: "var(--component-button-primary-focused-background)",
-              borderWidth: "var(--component-button-primary-focused-border-width)"
-            },
-            disabled: {
-              background: "var(--component-button-primary-disabled-background)",
-              color: "var(--component-button-primary-disabled-color)",
-              borderColor: "var(--component-button-primary-disabled-border-color)"
-            }
-          },
-          secondary: {
-            default: {
-              background: "var(--component-button-secondary-default-background)",
-              color: "var(--component-button-secondary-default-color)",
-              borderColor: "var(--component-button-secondary-default-border-color)",
-              borderWidth: "var(--component-button-secondary-default-border-width)",
-              paddingX: "var(--component-button-secondary-default-padding-x)",
-              paddingY: "var(--component-button-secondary-default-padding-y)"
-            },
-            hover: {
-              background: "var(--component-button-secondary-hover-background)",
-              borderColor: "var(--component-button-secondary-hover-border-color)"
-            },
-            focused: {
-              background: "var(--component-button-secondary-focused-background)",
-              borderColor: "var(--component-button-secondary-focused-border-color)",
-              borderWidth: "var(--component-button-secondary-focused-border-width)"
-            },
-            disabled: {
-              background: "var(--component-button-secondary-disabled-background)",
-              color: "var(--component-button-secondary-disabled-color)",
-              borderColor: "var(--component-button-secondary-disabled-border-color)"
-            }
-          },
-          size: {
-            xs: {
-              borderRadius: "var(--component-button-size-xs-border-radius)"
-            },
-            sm: {
-              borderRadius: "var(--component-button-size-sm-border-radius)"
-            },
-            md: {
-              borderRadius: "var(--component-button-size-md-border-radius)"
-            },
-            lg: {
-              borderRadius: "var(--component-button-size-lg-border-radius)"
-            }
-          }
-        },
-        toaster: {
-          default: {
-            background: "var(--component-toaster-default-background)",
-            color: "var(--component-toaster-default-color)",
-            borderColor: "var(--component-toaster-default-border-color)",
-            borderWidth: "var(--component-toaster-default-border-width)"
-          },
-          success: {
-            background: "var(--component-toaster-success-background)",
-            color: "var(--component-toaster-success-color)",
-            borderColor: "var(--component-toaster-success-border-color)",
-            borderWidth: "var(--component-toaster-success-border-width)"
-          },
-          error: {
-            background: "var(--component-toaster-error-background)",
-            color: "var(--component-toaster-error-color)",
-            borderColor: "var(--component-toaster-error-border-color)",
-            borderWidth: "var(--component-toaster-error-border-width)"
-          },
-          accent: {
-            background: "var(--component-toaster-accent-background)",
-            color: "var(--component-toaster-accent-color)",
-            borderColor: "var(--component-toaster-accent-border-color)",
-            borderWidth: "var(--component-toaster-accent-border-width)"
-          }
-        },
-        banner: {
-          default: {
-            background: "var(--component-banner-default-background)",
-            backgroundOpacity: "var(--component-banner-default-background-opacity)",
-            color: "var(--component-banner-default-color)",
-            borderColor: "var(--component-banner-default-border-color)",
-            borderWidth: "var(--component-banner-default-border-width)"
-          },
-          success: {
-            background: "var(--component-banner-success-background)",
-            backgroundOpacity: "var(--component-banner-success-background-opacity)",
-            color: "var(--component-banner-success-color)",
-            borderColor: "var(--component-banner-success-border-color)",
-            borderWidth: "var(--component-banner-success-border-width)"
-          },
-          error: {
-            background: "var(--component-banner-error-background)",
-            backgroundOpacity: "var(--component-banner-error-background-opacity)",
-            color: "var(--component-banner-error-color)",
-            borderColor: "var(--component-banner-error-border-color)",
-            borderWidth: "var(--component-banner-error-border-width)"
-          },
-          accent: {
-            background: "var(--component-banner-accent-background)",
-            backgroundOpacity: "var(--component-banner-accent-background-opacity)",
-            color: "var(--component-banner-accent-color)",
-            borderColor: "var(--component-banner-accent-border-color)",
-            borderWidth: "var(--component-banner-accent-border-width)"
-          }
-        }
-      }
-    },
-  },
-}