@redseed/redseed-ui-tailwindcss 5.4.3 → 6.0.0

package/colors.css

@@ -482,72 +482,4 @@
     --Colors-Effects-Shadows-shadow-3xl_02: hsla(220, 29%, 5%, 0.04);
     --Colors-Effects-Shadows-shadow-skeumorphic-inner: hsla(220, 29%, 5%, 0.05);
     --Colors-Effects-Shadows-shadow-skeumorphic-inner-border: hsla(220, 29%, 5%, 0.18);
-}
-
-html.dark {
-    --Colors-Grey-25: hsla(0, 0%, 98%, 1);
-    --Colors-Grey-50: hsla(0, 0%, 97%, 1);
-    --Colors-Grey-100: hsla(220, 3%, 94%, 1);
-    --Colors-Grey-200: hsla(220, 3%, 93%, 1);
-    --Colors-Grey-300: hsla(220, 4%, 82%, 1);
-    --Colors-Grey-400: hsla(220, 4%, 60%, 1);
-    --Colors-Grey-500: hsla(220, 4%, 54%, 1);
-    --Colors-Grey-600: hsla(220, 5%, 40%, 1);
-    --Colors-Grey-700: hsla(220, 8%, 24%, 1);
-    --Colors-Grey-800: hsla(220, 16%, 16%, 1);
-    --Colors-Grey-900: hsla(220, 18%, 9%, 1);
-    --Colors-Grey-950: hsla(220, 20%, 6%, 1);
-    --Colors-Grey-alpha-25: hsla(0, 0%, 100%, 0.98);
-    --Colors-Grey-alpha-50: hsla(0, 0%, 100%, 0.96);
-    --Colors-Grey-alpha-100: hsla(0, 0%, 100%, 0.94);
-    --Colors-Grey-alpha-200: hsla(0, 0%, 100%, 0.92);
-    --Colors-Grey-alpha-300: hsla(0, 0%, 100%, 0.8);
-    --Colors-Grey-alpha-400: hsla(0, 0%, 100%, 0.56);
-    --Colors-Grey-alpha-500: hsla(0, 0%, 100%, 0.5);
-    --Colors-Grey-alpha-600: hsla(0, 0%, 100%, 0.35);
-    --Colors-Grey-alpha-700: hsla(0, 0%, 100%, 0.16);
-    --Colors-Grey-alpha-800: hsla(0, 0%, 100%, 0.08);
-    --Colors-Grey-alpha-900: hsla(0, 0%, 100%, 0.04);
-    --Colors-Grey-alpha-950: hsla(0, 0%, 100%, 0);
-    --Component-colors-Alpha-alpha-white-10: hsla(220, 20%, 6%, 0.1);
-    --Component-colors-Alpha-alpha-white-20: hsla(220, 20%, 6%, 0.2);
-    --Component-colors-Alpha-alpha-white-30: hsla(220, 20%, 6%, 0.3);
-    --Component-colors-Alpha-alpha-white-40: hsla(220, 20%, 6%, 0.4);
-    --Component-colors-Alpha-alpha-white-50: hsla(220, 20%, 6%, 0.5);
-    --Component-colors-Alpha-alpha-white-60: hsla(220, 20%, 6%, 0.6);
-    --Component-colors-Alpha-alpha-white-70: hsla(220, 20%, 6%, 0.7);
-    --Component-colors-Alpha-alpha-white-80: hsla(220, 20%, 6%, 0.8);
-    --Component-colors-Alpha-alpha-white-90: hsla(220, 20%, 6%, 0.9);
-    --Component-colors-Alpha-alpha-white-100: var(--Colors-Grey-950);
-    --Component-colors-Alpha-alpha-black-10: hsla(0, 0%, 100%, 0.1);
-    --Component-colors-Alpha-alpha-black-20: hsla(0, 0%, 100%, 0.2);
-    --Component-colors-Alpha-alpha-black-30: hsla(0, 0%, 100%, 0.3);
-    --Component-colors-Alpha-alpha-black-40: hsla(0, 0%, 100%, 0.4);
-    --Component-colors-Alpha-alpha-black-50: hsla(0, 0%, 100%, 0.5);
-    --Component-colors-Alpha-alpha-black-60: hsla(0, 0%, 100%, 0.6);
-    --Component-colors-Alpha-alpha-black-70: hsla(0, 0%, 100%, 0.7);
-    --Component-colors-Alpha-alpha-black-80: hsla(0, 0%, 100%, 0.8);
-    --Component-colors-Alpha-alpha-black-90: hsla(0, 0%, 100%, 0.9);
-    --Component-colors-Alpha-alpha-black-100: hsla(0, 0%, 100%, 1);
-    --Colors-Effects-Portfolio-mockups-shadow-main-centre-md: var(--Colors-Base-transparent);
-    --Colors-Effects-Portfolio-mockups-shadow-main-centre-lg: var(--Colors-Base-transparent);
-    --Colors-Effects-Portfolio-mockups-shadow-overlay-lg: var(--Colors-Base-transparent);
-    --Colors-Effects-Portfolio-mockups-shadow-grid-md: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-xs: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-sm_01: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-sm_02: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-md_01: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-md_02: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-lg_01: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-lg_02: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-lg_03: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-xl_01: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-xl_02: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-xl_03: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-2xl_01: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-2xl_02: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-3xl_01: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-3xl_02: var(--Colors-Base-transparent);
-    --Colors-Effects-Shadows-shadow-skeumorphic-inner: hsla(220, 20%, 6%, 0.05);
-    --Colors-Effects-Shadows-shadow-skeumorphic-inner-border: hsla(220, 20%, 6%, 0.18);
 }

package/colors_dark_mode.css

@@ -0,0 +1,67 @@
+:root.dark {
+    --Colors-Grey-25: hsla(0, 0%, 98%, 1);
+    --Colors-Grey-50: hsla(0, 0%, 97%, 1);
+    --Colors-Grey-100: hsla(220, 3%, 94%, 1);
+    --Colors-Grey-200: hsla(220, 3%, 93%, 1);
+    --Colors-Grey-300: hsla(220, 4%, 82%, 1);
+    --Colors-Grey-400: hsla(220, 4%, 60%, 1);
+    --Colors-Grey-500: hsla(220, 4%, 54%, 1);
+    --Colors-Grey-600: hsla(220, 5%, 40%, 1);
+    --Colors-Grey-700: hsla(220, 8%, 24%, 1);
+    --Colors-Grey-800: hsla(220, 16%, 16%, 1);
+    --Colors-Grey-900: hsla(220, 18%, 9%, 1);
+    --Colors-Grey-950: hsla(220, 20%, 6%, 1);
+    --Colors-Grey-alpha-25: hsla(0, 0%, 100%, 0.98);
+    --Colors-Grey-alpha-50: hsla(0, 0%, 100%, 0.96);
+    --Colors-Grey-alpha-100: hsla(0, 0%, 100%, 0.94);
+    --Colors-Grey-alpha-200: hsla(0, 0%, 100%, 0.92);
+    --Colors-Grey-alpha-300: hsla(0, 0%, 100%, 0.8);
+    --Colors-Grey-alpha-400: hsla(0, 0%, 100%, 0.56);
+    --Colors-Grey-alpha-500: hsla(0, 0%, 100%, 0.5);
+    --Colors-Grey-alpha-600: hsla(0, 0%, 100%, 0.35);
+    --Colors-Grey-alpha-700: hsla(0, 0%, 100%, 0.16);
+    --Colors-Grey-alpha-800: hsla(0, 0%, 100%, 0.08);
+    --Colors-Grey-alpha-900: hsla(0, 0%, 100%, 0.04);
+    --Colors-Grey-alpha-950: hsla(0, 0%, 100%, 0);
+    --Component-colors-Alpha-alpha-white-10: hsla(220, 20%, 6%, 0.1);
+    --Component-colors-Alpha-alpha-white-20: hsla(220, 20%, 6%, 0.2);
+    --Component-colors-Alpha-alpha-white-30: hsla(220, 20%, 6%, 0.3);
+    --Component-colors-Alpha-alpha-white-40: hsla(220, 20%, 6%, 0.4);
+    --Component-colors-Alpha-alpha-white-50: hsla(220, 20%, 6%, 0.5);
+    --Component-colors-Alpha-alpha-white-60: hsla(220, 20%, 6%, 0.6);
+    --Component-colors-Alpha-alpha-white-70: hsla(220, 20%, 6%, 0.7);
+    --Component-colors-Alpha-alpha-white-80: hsla(220, 20%, 6%, 0.8);
+    --Component-colors-Alpha-alpha-white-90: hsla(220, 20%, 6%, 0.9);
+    --Component-colors-Alpha-alpha-white-100: var(--Colors-Grey-950);
+    --Component-colors-Alpha-alpha-black-10: hsla(0, 0%, 100%, 0.1);
+    --Component-colors-Alpha-alpha-black-20: hsla(0, 0%, 100%, 0.2);
+    --Component-colors-Alpha-alpha-black-30: hsla(0, 0%, 100%, 0.3);
+    --Component-colors-Alpha-alpha-black-40: hsla(0, 0%, 100%, 0.4);
+    --Component-colors-Alpha-alpha-black-50: hsla(0, 0%, 100%, 0.5);
+    --Component-colors-Alpha-alpha-black-60: hsla(0, 0%, 100%, 0.6);
+    --Component-colors-Alpha-alpha-black-70: hsla(0, 0%, 100%, 0.7);
+    --Component-colors-Alpha-alpha-black-80: hsla(0, 0%, 100%, 0.8);
+    --Component-colors-Alpha-alpha-black-90: hsla(0, 0%, 100%, 0.9);
+    --Component-colors-Alpha-alpha-black-100: hsla(0, 0%, 100%, 1);
+    --Colors-Effects-Portfolio-mockups-shadow-main-centre-md: var(--Colors-Base-transparent);
+    --Colors-Effects-Portfolio-mockups-shadow-main-centre-lg: var(--Colors-Base-transparent);
+    --Colors-Effects-Portfolio-mockups-shadow-overlay-lg: var(--Colors-Base-transparent);
+    --Colors-Effects-Portfolio-mockups-shadow-grid-md: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-xs: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-sm_01: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-sm_02: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-md_01: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-md_02: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-lg_01: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-lg_02: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-lg_03: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-xl_01: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-xl_02: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-xl_03: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-2xl_01: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-2xl_02: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-3xl_01: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-3xl_02: var(--Colors-Base-transparent);
+    --Colors-Effects-Shadows-shadow-skeumorphic-inner: hsla(220, 20%, 6%, 0.05);
+    --Colors-Effects-Shadows-shadow-skeumorphic-inner-border: hsla(220, 20%, 6%, 0.18);
+}

package/components/button_group_item.css

@@ -1,6 +1,6 @@
 .rsui-button-group-item {
     /* default control */
-    @apply inline-flex justify-center items-center select-none outline-none p-2 font-semibold text-sm transition;
+    @apply inline-flex justify-center items-center select-none outline-hidden p-2 font-semibold text-sm transition;
 
     /* default shape */
     @apply first:rounded-l-md last:rounded-r-md first:border-l border-r border-y ring-0;

package/components/button_slot.css

@@ -1,6 +1,6 @@
 .rsui-button-slot {
     /* default control */
-    @apply w-fit h-fit inline-flex shrink-0 items-center select-none outline-none whitespace-nowrap will-change-transform;
+    @apply w-fit h-fit inline-flex shrink-0 items-center select-none outline-hidden whitespace-nowrap will-change-transform;
 
     /* default shape */
     @apply border rounded-lg transition gap-1.5;
@@ -53,7 +53,7 @@
 
 /* modifier sm size */
 .rsui-button-slot--sm {
-    @apply text-sm px-spacing-lg py-spacing-md gap-spacing-xs;
+    @apply text-sm px-3 py-2 gap-1;
 }
 
 /* modifier md size */

package/components/checkbox_card.css

@@ -70,7 +70,7 @@
 /* Success state styling */
 /* Increase specificity so it overrides base .rsui-card styles */
 .rsui-card.rsui-checkbox-card--success {
-    @apply bg-rsui-success-100 border-border-success;
+    @apply bg-success-100 border-border-success;
 }
 
 .rsui-checkbox-card--success .rsui-checkbox-card__title-text {

package/components/form_field_checkbox.css

@@ -16,9 +16,9 @@
 }
 
 .rsui-form-field-checkbox__check input[type="checkbox"] {
-    @apply appearance-none absolute inset-0 z-0 rounded-md transition focus:outline-none cursor-pointer;
+    @apply appearance-none absolute inset-0 z-0 rounded-md transition focus:outline-hidden cursor-pointer;
     @apply w-full h-full text-text-primary border border-border-primary text-transparent bg-none;
-    @apply focus:ring focus:ring-border-primary focus:border-border-primary;
+    @apply focus:ring-3 focus:ring-border-primary focus:border-border-primary;
     @apply invalid:border-border-error invalid:ring-0;
     @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:cursor-default;
 }
@@ -30,4 +30,3 @@
 .rsui-form-field-checkbox .rsui-form-field-slot__label::after {
     @apply hidden;
 }
-

package/components/form_field_combobox.css

@@ -92,7 +92,7 @@
 
 .rsui-form-field-combobox input[type='text'] {
     @apply flex-1;
-    @apply text-base text-text-primary transition py-3 px-4 pr-12 outline-none focus:outline-none;
+    @apply text-base text-text-primary transition py-3 px-4 pr-12 outline-hidden focus:outline-hidden;
     @apply bg-background-primary placeholder-text-secondary;
     @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:border-border-disabled disabled:ring-0;
 }

package/components/form_field_select.css

@@ -64,7 +64,7 @@
 .rsui-form-field-select select {
     @apply block w-full border ring-0 bg-none cursor-pointer appearance-none transition;
     @apply py-3 pl-5 pr-14 truncate;
-    @apply text-base rounded-lg outline-none focus:outline-none;
+    @apply text-base rounded-lg outline-hidden focus:outline-hidden;
     @apply bg-background-primary text-text-primary placeholder-text-secondary border-border-primary;
     @apply focus:border-border-primary;
     @apply invalid:border-border-error invalid:ring-0;

package/components/form_field_text.css

@@ -30,8 +30,7 @@
 .rsui-form-field-text input[type='url'],
 .rsui-form-field-text input[type='week'] {
     @apply flex-1;
-    @apply text-base text-text-primary transition py-3 px-4 outline-none focus:outline-none;
+    @apply text-base text-text-primary transition py-3 px-4 outline-hidden focus:outline-hidden;
     @apply bg-background-primary placeholder-text-secondary;
     @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:border-border-disabled disabled:ring-0;
 }
-

package/components/form_field_textarea.css

@@ -4,7 +4,7 @@
 
 .rsui-form-field-textarea textarea {
     @apply w-full border rounded-md ring-0 text-base transition resize-none;
-    @apply py-3 px-4 outline-none focus:outline-none;
+    @apply py-3 px-4 outline-hidden focus:outline-hidden;
     @apply text-text-primary bg-background-primary placeholder-text-secondary border-border-primary;
     @apply focus:border-border-primary;
     @apply invalid:border-border-error invalid:ring-0;
@@ -16,4 +16,3 @@
 .rsui-form-field-textarea textarea::-webkit-scrollbar {
     display: none;
 }
-

package/components/link_slot.css

@@ -1,7 +1,7 @@
 .rsui-link-slot {
     /* default shape and control */
     @apply relative w-fit h-fit inline-flex shrink-0 items-center justify-center whitespace-nowrap will-change-transform;
-    @apply select-none outline-none cursor-pointer transition;
+    @apply select-none outline-hidden cursor-pointer transition;
 
     /* default text styles */
     @apply font-medium text-text-primary gap-2;

package/components/modal.css

@@ -27,7 +27,7 @@
 }
 
 .rsui-modal__background-wrapper {
-    @apply fixed inset-0 transform transition-all backdrop-blur-sm bg-text-primary bg-opacity-70;
+    @apply fixed inset-0 transform transition-all backdrop-blur-xs bg-text-primary/70;
 }
 
 .rsui-modal__background {
@@ -72,4 +72,3 @@
 }
 
 .rsui-modal__footer--start { @apply justify-start; }
-

package/components/pagination.css

@@ -1,5 +1,5 @@
 .rsui-pagination {
-    @apply flex flex-nowrap items-center w-fit border border-border-secondary rounded-full p-1 bg-background-primary divide-x;
+    @apply flex flex-nowrap items-center w-fit border border-border-secondary rounded-full p-1 bg-background-primary divide-x divide-border-secondary;
 }
 
 .rsui-pagination__previous {
@@ -25,4 +25,3 @@
 .rsui-pagination-parent__record-count {
     @apply size-full flex items-center justify-center;
 }
-

package/components/radio_card.css

@@ -1,5 +1,5 @@
 .rsui-radio-card {
-    @apply max-w-80 w-80 bg-background-primary border border-border-secondary rounded-md shadow-sm outline-none select-none;
+    @apply max-w-80 w-80 bg-background-primary border border-border-secondary rounded-md shadow-xs outline-hidden select-none;
     @apply relative cursor-pointer transition-all flex flex-col gap-3 p-4;
     @apply focus-visible:ring-4 focus-visible:ring-border-primary;
 }

package/components/section.css

@@ -1,5 +1,5 @@
 .rsui-section {
-    @apply border border-solid rounded-xl p-6;
+    @apply border border-solid rounded-xl p-6 space-y-4;
 }
 
 .rsui-section--primary {
@@ -18,6 +18,10 @@
     @apply bg-background-success border-border-success text-text-primary;
 }
 
+.rsui-section--info {
+    @apply bg-background-info border-border-info text-text-primary;
+}
+
 .rsui-section--warning {
     @apply bg-background-warning border-border-warning text-text-primary;
 }
@@ -25,4 +29,3 @@
 .rsui-section--error {
     @apply bg-background-error border-border-error text-text-primary;
 }
-

package/components/switcher_item.css

@@ -1,5 +1,5 @@
 .rsui-switcher-item {
-    @apply h-fit inline-flex shrink-0 items-center justify-center select-none outline-none whitespace-nowrap will-change-transform cursor-pointer;
+    @apply h-fit inline-flex shrink-0 items-center justify-center select-none outline-hidden whitespace-nowrap will-change-transform cursor-pointer;
     @apply font-semibold gap-2 rounded-md border border-transparent transition;
     @apply text-base px-3 py-2;
 }
@@ -11,4 +11,3 @@
 .rsui-switcher-item svg {
     @apply size-6;
 }
-

package/components/toggle.css

@@ -23,7 +23,7 @@
     @apply focus:ring-0 focus:ring-transparent focus:checked:border-primary-background;
     @apply checked:bg-none checked:bg-primary-background checked:text-primary-foreground checked:border-primary-background checked:before:bg-primary-foreground checked:before:translate-x-full;
     @apply disabled:opacity-20 disabled:pointer-events-none;
-    @apply before:inline-block before:size-4 before:bg-background-primary before:translate-x-0 before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200;
+    @apply before:inline-block before:size-4 before:bg-background-primary before:translate-x-0 before:rounded-full before:shadow-sm before:transform before:ring-0 before:transition before:ease-in-out before:duration-200;
 }
 
 .rsui-toggle__help {
@@ -33,4 +33,3 @@
 .rsui-toggle__error {
     @apply text-sm text-text-error;
 }
-

package/index.css

@@ -1,4 +1,7 @@
 @import './colors.css';
+@import './colors_dark_mode.css';
+@import './theme.css';
+@import './tokens.css';
 
 @import './components/button_slot.css';
 @import './components/button_primary.css';

package/index.js

@@ -1,157 +1 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-const rsuiColors = require('./colors')
-
-module.exports = {
-    darkMode: 'selector',
-    theme: {
-        container: {
-            center: true,
-            padding: {
-                DEFAULT: '0.25rem', /* 4px */
-                'sm': '2rem', /* 8px */
-                'lg': '4rem', /* 16px */
-                'xl': '5rem', /* 20px */
-                '2xl': '6rem', /* 24px */
-            },
-        },
-        screens: {
-            '2xs': '375px',
-            'xs': '480px',
-            'sm': '640px',
-            'md': '768px',
-            'lg': '1024px',
-            'xl': '1280px',
-            '2xl': '1536px',
-            '3xl': '1920px',
-        },
-        extend: {
-            colors: {
-                // RedSeed UI colors. Should not be extended.
-                'rsui': rsuiColors,
-
-                /**
-                 * Text colors.
-                 */
-                'text-primary': rsuiColors.grey['900'],
-                'text-secondary': rsuiColors.grey['700'],
-                'text-disabled': rsuiColors.grey['400'],
-                'text-brand': rsuiColors.brand['900'],
-                'text-success': rsuiColors.success['600'],
-                'text-warning': rsuiColors.warning['600'],
-                'text-error': rsuiColors.error['600'],
-                'text-on-color': rsuiColors.white,
-
-                /**
-                 * Background colors.
-                 */
-                'background-primary': rsuiColors.white,
-                'background-secondary': rsuiColors.grey['50'],
-                'background-disabled': rsuiColors.grey['100'],
-                'background-brand': rsuiColors.brand['50'],
-                'background-success': rsuiColors.success['50'],
-                'background-warning': rsuiColors.warning['50'],
-                'background-error': rsuiColors.error['50'],
-                'background-info': rsuiColors.blue['50'],
-
-                /**
-                 * Border colors.
-                 */
-                'border-primary': rsuiColors.grey['400'],
-                'border-secondary': rsuiColors.grey['300'],
-                'border-disabled': rsuiColors.grey['200'],
-                'border-brand': rsuiColors.brand['200'],
-                'border-success': rsuiColors.success['200'],
-                'border-warning': rsuiColors.warning['200'],
-                'border-error': rsuiColors.error['200'],
-                'border-info': rsuiColors.blue['200'],
-
-                /**
-                 * Button colors.
-                 */
-                'button-primary': rsuiColors.brand['600'],
-                'button-primary-hover': rsuiColors.brand['700'],
-                'button-primary-active': rsuiColors.brand['800'],
-
-                'button-secondary': rsuiColors.grey['800'],
-                'button-secondary-hover': rsuiColors.grey['700'],
-                'button-secondary-active': rsuiColors.grey['600'],
-
-                'button-tertiary': rsuiColors.brand['600'],
-                'button-tertiary-hover': rsuiColors.brand['700'],
-                'button-tertiary-active': rsuiColors.brand['800'],
-
-                'button-danger-primary': rsuiColors.error['600'],
-                'button-danger-secondary': rsuiColors.error['600'],
-                'button-danger-hover': rsuiColors.error['700'],
-                'button-danger-active': rsuiColors.error['800'],
-
-                'button-separator': rsuiColors.grey['200'],
-                'button-disabled': rsuiColors.grey['300'],
-
-                /**
-                 * Legacy primary colors. Left here so we don't have to update all the components. Yet.
-                 */
-                'primary-foreground': rsuiColors.white,
-                'primary-background': rsuiColors.brand['500'],
-                'primary-foreground-hover': rsuiColors.white,
-                'primary-background-hover': rsuiColors.brand['700'],
-
-            },
-            aspectRatio: {
-                '4/3': '4 / 3',
-                '3/1': '3 / 1',
-                '9/16': '9 / 16',
-                '64/25': '64 / 25'
-            },
-            spacing: {
-                'spacing-xs': '0.25rem', /* 4px */
-                'spacing-md': '0.5rem', /* 8px */
-                'spacing-lg': '0.75rem', /* 12px */
-                '4.5': '1.125rem', /* 18px */
-            },
-            minWidth: {
-                'px': '1px',
-            },
-            width: {
-                '1/7': '14.285714%',
-                '1/8': '12.5%',
-                '13': '3.25rem', /* 52px */
-                '76': '19rem', /* 304px */
-                '100': '25rem', /* 400px */
-                '112': '28rem', /* 448px */
-            },
-            height: {
-                '104': '26rem', /* 416px */
-            },
-            size: {
-                '13': '3.25rem', /* 52px */
-            },
-            strokeWidth: {
-                '3': '3px',
-                '4': '4px',
-            },
-            borderWidth: {
-                '6': '6px',
-            },
-            fontFamily: {
-                'redseed': ['new-rubrik', ...defaultTheme.fontFamily.sans],
-            },
-            zIndex: {
-                '1': '1',
-                '2': '2',
-                '3': '3',
-                '4': '4',
-                '5': '5',
-                '6': '6',
-                '7': '7',
-                '8': '8',
-                '9': '9',
-                '99999': '99999',
-            },
-            boxShadow: {
-                'full': '0 0 6px 1px rgb(0 0 0 / 0.2)',
-                'full-light': '0 0 6px 1px rgb(50 60 69 / 0.1)',
-            },
-        },
-    },
-}
+import './index.css';

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@redseed/redseed-ui-tailwindcss",
-  "version": "5.4.3",
+  "version": "6.0.0",
   "description": "RedSeed UI Tailwindcss",
   "main": "index.js",
+  "style": "index.css",
   "repository": "https://github.com/redseedtraining/redseed-ui",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -11,11 +12,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "tailwindcss": "^3.4.17"
-  },
-  "devDependencies": {
-    "autoprefixer": "^10.4.21",
-    "postcss": "^8.5.6",
-    "postcss-import": "^16.1.1"
+    "@tailwindcss/vite": "^4.1.13",
+    "tailwindcss": "^4.1.13"
   }
 }