@ibis-design/css 0.6.0 → 0.7.0

package/dist/alchemy/tailwind.preset.js

@@ -1,231 +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)",
-        system: {
-          success: "var(--color-system-success)",
-          failure: "var(--color-system-failure)",
-          attention: "var(--color-system-attention)"
-        },
-        brand: {
-          blue: "var(--color-brand-blue)",
-          yellow: "var(--color-brand-yellow)",
-          green: "var(--color-brand-green)"
-        },
-        alchemyNeutral: {
-          yellow: "var(--color-alchemy-neutral-yellow)",
-          blue: "var(--color-alchemy-neutral-blue)",
-          green: "var(--color-alchemy-neutral-green)"
-        },
-        gradient: {
-          primary: {
-            start: "var(--color-gradient-primary-start)",
-            end: "var(--color-gradient-primary-end)"
-          },
-          brand: {
-            start: "var(--color-gradient-brand-start)",
-            middle: "var(--color-gradient-brand-middle)",
-            end: "var(--color-gradient-brand-end)"
-          }
-        },
-        backgrounds: {
-          classic: {
-            light: "var(--color-backgrounds-classic-light)",
-            dark: "var(--color-backgrounds-classic-dark)"
-          },
-          cardbg: {
-            purple: "var(--color-backgrounds-cardbg-purple)",
-            darkPurple: "var(--color-backgrounds-cardbg-dark-purple)"
-          }
-        },
-        button: {
-          start: "var(--color-button-start)",
-          end: "var(--color-button-end)"
-        }
-      },
-      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)",
-        8: "var(--spacing-8)",
-        10: "var(--spacing-10)",
-        12: "var(--spacing-12)",
-        16: "var(--spacing-16)"
-      },
-      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)"
-      },
-      lineHeight: {
-        tight: "var(--line-height-tight)",
-        normal: "var(--line-height-normal)",
-        relaxed: "var(--line-height-relaxed)",
-        loose: "var(--line-height-loose)"
-      },
-      fontFamily: {
-        branding: "var(--font-family-branding)",
-        heading: "var(--font-family-heading)",
-        sans: "var(--font-family-sans)",
-        ui: "var(--font-family-ui)"
-      },
-      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: {
-        normalText: {
-          xs: "var(--font-size-normal-text-xs)",
-          sm: "var(--font-size-normal-text-sm)",
-          DEFAULT: "var(--font-size-normal-text-default)",
-          lg: "var(--font-size-normal-text-lg)",
-          xl: "var(--font-size-normal-text-xl)"
-        },
-        marketingText: {
-          sm: "var(--font-size-marketing-text-sm)",
-          DEFAULT: "var(--font-size-marketing-text-default)",
-          lg: "var(--font-size-marketing-text-lg)",
-          xl: "var(--font-size-marketing-text-xl)"
-        }
-      },
-      borderRadius: {
-        none: "var(--border-radius-none)",
-        sm: "var(--border-radius-sm)",
-        DEFAULT: "var(--border-radius-default)",
-        md: "var(--border-radius-md)",
-        lg: "var(--border-radius-lg)",
-        full: "var(--border-radius-full)"
-      },
-      borderWidth: {
-        none: "var(--border-width-none)",
-        thin: "var(--border-width-thin)",
-        DEFAULT: "var(--border-width-default)",
-        thick: "var(--border-width-thick)"
-      },
-      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)"
-      },
-      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: {
-        frame: {
-          circle: {
-            xs: "var(--icons-frame-circle-xs)",
-            sm: "var(--icons-frame-circle-sm)",
-            md: "var(--icons-frame-circle-md)",
-            lg: "var(--icons-frame-circle-lg)",
-            xl: "var(--icons-frame-circle-xl)"
-          }
-        },
-        size: {
-          xs: "var(--icons-size-xs)",
-          sm: "var(--icons-size-sm)",
-          md: "var(--icons-size-md)",
-          lg: "var(--icons-size-lg)",
-          xl: "var(--icons-size-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: {
-        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: {
-        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)"
-      }
-    },
-  },
-}

package/dist/ibis/ibis-design.css

@@ -1,267 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --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: #009a08;
-  --color-red: #b70c00;
-  --color-orange: #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;
-  --color-gradients-skeleton-start: rgba(255, 255, 255, 0.25);
-  --color-gradients-skeleton-middle: rgba(255, 255, 255, 0.6);
-  --color-gradients-skeleton-end: rgba(255, 255, 255, 0.25);
-  --color-gradients-button-start: #9665df;
-  --color-gradients-button-end: #7945c8;
-  --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: var(--color-black);
-  --color-text-inverse: var(--color-white);
-  --color-border-default: var(--color-neutral-200);
-  --color-border-focus: var(--color-primary-300);
-  --color-status-success: var(--color-green);
-  --color-status-error: var(--color-red);
-  --color-status-warning: var(--color-orange);
-  --gradient-brand-primary: [object Object];
-  --gradient-skeleton: [object Object];
-  --text-style-body-font-family: var(--font-family-sans);
-  --text-style-body-font-size: var(--font-size-body-md);
-  --text-style-body-line-height: var(--line-height-normal);
-  --text-style-body-font-weight: var(--font-weight-normal);
-  --text-style-heading-font-family: var(--font-family-heading);
-  --text-style-heading-font-size: var(--font-size-heading-h2);
-  --text-style-heading-line-height: var(--line-height-tight);
-  --text-style-heading-font-weight: var(--font-weight-bold);
-  --shadow-default: 0 0 3px 0 var(--shadow-color-black-soft), 0 0 2px -1px var(--shadow-color-black-soft);
-  --shadow-md: 0 0 6px -1px var(--shadow-color-black-soft), 0 0 4px -2px var(--shadow-color-black-soft);
-  --shadow-lg: 0 0 15px -3px var(--shadow-color-black-soft), 0 0 6px -4px var(--shadow-color-black-soft);
-  --shadow-xl: 0 0 25px -5px var(--shadow-color-black-soft), 0 0 10px -6px var(--shadow-color-black-soft);
-  --shadow-2xl: 0 0 50px -12px var(--shadow-color-black-strong);
-  --shadow-inner: 0 0 4px 0 var(--shadow-color-black-soft);
-  --shadow-button-inner: 0 0 4px 0 var(--shadow-color-brand-soft), 0 0 1px 0 var(--shadow-color-white-soft);
-  --component-button-primary-default-border-width: var(--border-width-thin);
-  --component-button-primary-default-padding-x: var(--spacing-4);
-  --component-button-primary-default-padding-y: var(--spacing-2);
-  --component-button-primary-hover-background: var(--color-primary-900);
-  --component-button-primary-focused-background: var(--color-primary-900);
-  --component-button-primary-focused-border-width: var(--border-width-medium);
-  --component-button-primary-disabled-background: var(--color-neutral-200);
-  --component-button-primary-disabled-color: var(--color-neutral-300);
-  --component-button-primary-disabled-border-color: var(--color-neutral-300);
-  --component-button-secondary-default-background: var(--color-primary-50);
-  --component-button-secondary-default-color: var(--color-primary-900);
-  --component-button-secondary-default-border-color: var(--color-primary-50);
-  --component-button-secondary-default-border-width: var(--border-width-thin);
-  --component-button-secondary-default-padding-x: var(--spacing-4);
-  --component-button-secondary-default-padding-y: var(--spacing-2);
-  --component-button-secondary-hover-background: var(--color-primary-50);
-  --component-button-secondary-hover-border-color: var(--color-primary-900);
-  --component-button-secondary-focused-background: var(--color-primary-50);
-  --component-button-secondary-focused-border-color: var(--color-primary-900);
-  --component-button-secondary-focused-border-width: var(--border-width-thick);
-  --component-button-secondary-disabled-background: var(--color-white);
-  --component-button-secondary-disabled-color: var(--color-neutral-300);
-  --component-button-secondary-disabled-border-color: var(--color-neutral-300);
-  --component-toaster-default-background: var(--color-neutral-200);
-  --component-toaster-default-border-color: var(--color-neutral-200);
-  --component-toaster-default-border-width: var(--border-width-thin);
-  --component-toaster-success-border-width: var(--border-width-thin);
-  --component-toaster-error-border-width: var(--border-width-thin);
-  --component-toaster-accent-background: var(--color-neutral-200);
-  --component-toaster-accent-color: var(--color-black);
-  --component-toaster-accent-border-color: var(--color-neutral-200);
-  --component-toaster-accent-border-width: var(--border-width-thin);
-  --component-banner-default-background: var(--color-neutral-200);
-  --component-banner-default-background-opacity: var(--opacity-1);
-  --component-banner-default-border-color: var(--color-neutral-200);
-  --component-banner-default-border-width: var(--border-width-thin);
-  --component-banner-success-background-opacity: var(--opacity-1);
-  --component-banner-success-border-width: var(--border-width-thin);
-  --component-banner-error-background-opacity: var(--opacity-1);
-  --component-banner-error-border-width: var(--border-width-thin);
-  --component-banner-accent-background: var(--color-neutral-200);
-  --component-banner-accent-background-opacity: var(--opacity-1);
-  --component-banner-accent-color: var(--color-black);
-  --component-banner-accent-border-color: var(--color-neutral-200);
-  --component-banner-accent-border-width: var(--border-width-thin);
-  --component-button-primary-default-background: var(--gradient-brand-primary);
-  --component-button-primary-default-color: var(--color-text-inverse);
-  --component-button-primary-default-border-color: var(--color-border-default);
-  --component-button-primary-default-shadow: var(--shadow-button-inner);
-  --component-button-primary-hover-border-color: var(--color-border-default);
-  --component-toaster-default-color: var(--color-text-primary);
-  --component-toaster-success-background: var(--color-status-success);
-  --component-toaster-success-color: var(--color-text-inverse);
-  --component-toaster-success-border-color: var(--color-status-success);
-  --component-toaster-error-background: var(--color-status-error);
-  --component-toaster-error-color: var(--color-text-inverse);
-  --component-toaster-error-border-color: var(--color-status-error);
-  --component-banner-default-color: var(--color-text-primary);
-  --component-banner-success-background: var(--color-status-success);
-  --component-banner-success-color: var(--color-text-inverse);
-  --component-banner-success-border-color: var(--color-status-success);
-  --component-banner-error-background: var(--color-status-error);
-  --component-banner-error-color: var(--color-text-inverse);
-  --component-banner-error-border-color: var(--color-status-error);
-}