@redseed/redseed-ui-tailwindcss 6.4.3 → 6.5.0

package/components/form_field_checkbox.css

@@ -3,7 +3,7 @@
 }
 
 .rsui-form-field-checkbox__label {
-    @apply ml-2 font-normal;
+    @apply ml-2 font-normal leading-6;
 }
 
 .rsui-form-field-checkbox__label--required {

package/components/form_field_radio_group.css

@@ -7,7 +7,7 @@
 }
 
 .rsui-form-field-radio-group__item {
-    @apply relative flex items-center gap-4 cursor-pointer;
+    @apply relative flex items-center gap-x-2 cursor-pointer;
 }
 
 .rsui-form-field-radio-group__item--disabled {
@@ -23,7 +23,7 @@
 }
 
 .rsui-form-field-radio-group__control--active {
-    @apply bg-primary-background border-primary-background flex items-center justify-center;
+    @apply bg-background-brand-contrast border-border-primary flex items-center justify-center;
 }
 
 .rsui-form-field-radio-group__control--active div {

package/components/form_field_suffix.css

@@ -1,5 +1,4 @@
 .rsui-form-field-suffix .rsui-form-field-text__suffix {
     @apply border rounded-r-md;
-    @apply bg-background-secondary border-l-border-primary border-r-border-secondary;
+    @apply bg-background-secondary border-background-secondary border-l-border-primary;
 }
-

package/components/link_primary.css

@@ -1,4 +1,3 @@
 .rsui-link-primary {
-    @apply text-primary-background;
+    @apply text-text-primary;
 }
-

package/components/linked_list_item.css

@@ -12,11 +12,11 @@
 }
 
 .rsui-linked-list-item--active {
-    @apply text-primary-background;
+    @apply text-text-primary;
 }
 
 .rsui-linked-list-item--done {
-    @apply text-primary-background;
+    @apply text-text-primary;
 }
 
 .rsui-linked-list-item__status {
@@ -38,4 +38,3 @@
 .rsui-linked-list-item__body {
     @apply font-normal text-sm text-text-secondary leading-normal;
 }
-

package/components/loader.css

@@ -7,7 +7,7 @@
 }
 
 .rsui-loader--primary path {
-    @apply fill-primary-background;
+    @apply fill-text-primary;
 }
 
 .rsui-loader--secondary path {
@@ -17,4 +17,3 @@
 .rsui-loader--white path {
     @apply fill-background-primary;
 }
-

package/components/progress_circle.css

@@ -2,15 +2,34 @@
     @apply relative m-0 p-0 bg-background-primary rounded-full before:hidden after:hidden;
 }
 
-.rsui-progress-circle--sm { @apply size-16 text-xs; }
-.rsui-progress-circle--md { @apply size-20 text-sm; }
-.rsui-progress-circle--lg { @apply size-24 text-base; }
+.rsui-progress-circle--sm {
+    @apply size-16 text-xs;
+}
+
+.rsui-progress-circle--md {
+    @apply size-20 text-sm;
+}
 
-.rsui-progress-circle svg { @apply w-full h-full -rotate-90 transition-all; }
-.rsui-progress-circle svg circle { stroke-linecap: round; }
+.rsui-progress-circle--lg {
+    @apply size-24 text-base;
+}
 
-.rsui-progress-circle__background-circle { @apply stroke-border-primary stroke-4 fill-none transition-all; }
-.rsui-progress-circle__progress-circle { @apply stroke-primary-background stroke-4 fill-none transition-all duration-0; }
+.rsui-progress-circle svg {
+    @apply w-full h-full -rotate-90 transition-all;
+}
 
-.rsui-progress-circle__content { @apply absolute inset-0 w-full h-full flex items-center justify-center; }
+.rsui-progress-circle svg circle {
+    stroke-linecap: round;
+}
 
+.rsui-progress-circle__background-circle {
+    @apply stroke-border-primary stroke-4 fill-none transition-all;
+}
+
+.rsui-progress-circle__progress-circle {
+    @apply stroke-text-primary stroke-4 fill-none transition-all duration-0;
+}
+
+.rsui-progress-circle__content {
+    @apply absolute inset-0 w-full h-full flex items-center justify-center;
+}

package/components/progress_tracker_step.css

@@ -14,7 +14,7 @@
 
 .rsui-progress-tracker-step--active::after,
 .rsui-progress-tracker-step--completed::after {
-    @apply bg-primary-background;
+    @apply bg-background-primary-contrast;
 }
 
 .rsui-progress-tracker-step--clickable {
@@ -27,10 +27,9 @@
 }
 
 .rsui-progress-tracker-step__indicator--completed {
-    @apply bg-primary-background border-primary-background text-primary-foreground;
+    @apply bg-background-primary-contrast border-background-primary-contrast text-text-on-color;
 }
 
 .rsui-progress-tracker-step__indicator--active {
-    @apply bg-primary-foreground border-primary-background text-primary-background;
+    @apply bg-background-primary border-background-primary-contrast text-text-primary;
 }
-

package/components/radio_card.css

@@ -7,12 +7,12 @@
 .rsui-radio-card--flexible { @apply max-w-full w-full; }
 
 .rsui-radio-card--selected {
-    @apply focus-visible:ring-0 border-primary-background;
+    @apply focus-visible:ring-0 border-border-primary;
 }
 
 .rsui-radio-card--selected::after {
     content: '';
-    @apply absolute inset-0 rounded-md opacity-10 bg-primary-background;
+    @apply absolute inset-0 rounded-md opacity-10 bg-background-primary-contrast;
 }
 
 .rsui-radio-card--disabled {
@@ -45,12 +45,12 @@
 }
 
 .rsui-radio-card__title-row--selected::after {
-    @apply border-6 border-primary-background;
+    @apply border-6 border-text-primary;
 }
 
 .group-hover\/radio-card .rsui-radio-card__title-row--selected::after,
 .group-focus-visible\/radio-card .rsui-radio-card__title-row--selected::after {
-    @apply border-primary-background;
+    @apply border-text-primary;
 }
 
 .rsui-radio-card__title-row--disabled::after {

package/components/sorting.css

@@ -3,10 +3,6 @@
     @apply w-fit text-text-primary;
 }
 
-.rsui-sorting--primary {
-    @apply text-primary-foreground;
-}
-
 .rsui-sorting__icon {
     @apply size-4 transition;
 }
@@ -14,4 +10,3 @@
 .rsui-sorting__icon--desc {
     @apply transform rotate-180;
 }
-

package/components/toggle.css

@@ -1,5 +1,5 @@
 .rsui-toggle {
-    @apply flex flex-col space-y-2 border-0 bg-transparent p-0;
+    @apply flex flex-col gap-y-2 border-0 bg-transparent p-0;
 }
 
 .rsui-toggle--disabled label {
@@ -10,8 +10,18 @@
     @apply cursor-not-allowed;
 }
 
+.rsui-toggle--sm input {
+    @apply w-[2.25rem] h-5 px-0.5;
+    @apply before:size-4;
+}
+
+.rsui-toggle--md input {
+    @apply w-[2.75rem] h-6 px-0.5;
+    @apply before:size-5;
+}
+
 .rsui-toggle__control {
-    @apply justify-between flex items-center space-x-8;
+    @apply justify-between flex items-center gap-x-8;
 }
 
 .rsui-toggle label {
@@ -19,11 +29,23 @@
 }
 
 .rsui-toggle input {
-    @apply appearance-none shrink-0 w-[2.6rem] h-6 px-1 bg-text-secondary border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 ring-0 flex items-center;
-    @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-sm before:transform before:ring-0 before:transition before:ease-in-out before:duration-200;
+    /* default styles */
+    @apply appearance-none cursor-pointer transition-colors ease-in-out duration-200 ring-0;
+    @apply shrink-0 rounded-full flex items-center;
+    /* default colors */
+    @apply bg-background-tertiary border-background-tertiary text-transparent;
+    /* focus styles */
+    @apply focus:outline-button-primary;
+    /* checked styles */
+    @apply checked:before:translate-x-full;
+    @apply checked:bg-button-primary checked:border-button-primary;
+    /* disabled styles */
+    @apply disabled:pointer-events-none;
+    @apply disabled:before:bg-background-tertiary;
+    /* before pseudo-element styles */
+    @apply before:inline-block before:rounded-full before:shadow-sm;
+    @apply before:translate-x-0 before:transform before:ring-0 before:transition before:ease-in-out before:duration-200;
+    @apply before:bg-background-primary;
 }
 
 .rsui-toggle__help {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-tailwindcss",
-  "version": "6.4.3",
+  "version": "6.5.0",
   "description": "RedSeed UI Tailwindcss",
   "main": "index.js",
   "style": "index.css",
@@ -12,7 +12,7 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@tailwindcss/vite": "^4.1.15",
-    "tailwindcss": "^4.1.15"
+    "@tailwindcss/vite": "^4.1.16",
+    "tailwindcss": "^4.1.16"
   }
 }

package/tokens.css

@@ -12,6 +12,7 @@
     --color-background-primary: var(--Colors-Base-white);
     --color-background-primary-contrast: var(--Colors-Grey-800);
     --color-background-secondary: var(--Colors-Grey-50);
+    --color-background-tertiary: var(--Colors-Grey-100);
     --color-background-secondary-contrast: var(--Colors-Grey-800);
     --color-background-disabled: var(--Colors-Grey-100);
     --color-background-disabled-contrast: var(--Colors-Grey-400);
@@ -29,8 +30,8 @@
     --color-background-ai-to: var(--Colors-Background-AI-2);
     --color-background-ai-contrast: var(--Colors-RedSeed-Purple-500);
 
-    --color-border-primary: var(--Colors-Grey-300);
-    --color-border-secondary: var(--Colors-Grey-200);
+    --color-border-primary: var(--Colors-Grey-400);
+    --color-border-secondary: var(--Colors-Grey-300);
     --color-border-disabled: var(--Colors-Grey-300);
     --color-border-brand: var(--Colors-Brand-200);
     --color-border-success: var(--Colors-Success-200);
@@ -54,9 +55,4 @@
     --color-button-danger-active: var(--Colors-Error-800);
     --color-button-separator: var(--Colors-Grey-200);
     --color-button-disabled: var(--Colors-Grey-300);
-
-    --color-primary-foreground: var(--Colors-Base-white);
-    --color-primary-background: var(--Colors-Brand-500);
-    --color-primary-foreground-hover: var(--Colors-Base-white);
-    --color-primary-background-hover: var(--Colors-Brand-700);
 }