@redseed/redseed-ui-vue3 6.4.3 → 6.4.4

package/docs/04-card-components.md

@@ -175,6 +175,16 @@ Card components provide containers for displaying content in organized, visually
 </template>
 ```
 
+For smaller cards that should display more columns per row, use the compact variant:
+
+```vue
+<template>
+  <CardGroup variant="compact" :totalItems="cards.length" :controlApplied="false" :pagination="false">
+    <!-- cards -->
+  </CardGroup>
+</template>
+```
+
 ## Best Practices
 
 1. **Content Hierarchy:** Use CardHeader for consistent title and action placement across cards.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "6.4.3",
+  "version": "6.4.4",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",
@@ -12,10 +12,10 @@
   "license": "ISC",
   "dependencies": {
     "@heroicons/vue": "^2.2.0",
-    "@vueuse/components": "^13.6.0",
-    "@vueuse/core": "^13.6.0",
+    "@vueuse/components": "^13.9.0",
+    "@vueuse/core": "^13.9.0",
     "lodash": "^4.17.21",
     "lottie-web": "^5.13.0",
-    "vue": "^3.5.18"
+    "vue": "^3.5.21"
   }
 }

package/src/components/ActivityFeeds/ActivityFeed.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 
     &--line {
         & > *:not(:last-child) {
-            @apply after:absolute after:inset-x-0 after:-bottom-4 after:border-t after:border-rsui-grey-400;
+            @apply after:absolute after:inset-x-0 after:-bottom-4 after:border-t after:border-border-primary;
         }
     }
 }

package/src/components/ActivityFeeds/FeedItem.vue

@@ -123,10 +123,10 @@ function handleClick() {
 
     &__avatar {
         @apply relative shrink-0 size-12 rounded-full flex items-center justify-center;
-        @apply bg-rsui-grey-100 border border-rsui-grey-200;
+        @apply bg-background-disabled border border-border-secondary;
 
         :deep(> svg) {
-            @apply size-7 text-rsui-grey-500;
+            @apply size-7 text-text-secondary;
         }
     }
 
@@ -136,14 +136,14 @@ function handleClick() {
     }
 
     &__avatar-indicator-dot {
-        @apply size-4 rounded-full bg-rsui-grey-300 border-2 border-white;
+        @apply size-4 rounded-full bg-border-primary border-2 border-background-primary;
 
         &--online {
-            @apply bg-rsui-success-500;
+            @apply bg-text-success;
         }
 
         &--busy {
-            @apply bg-rsui-error-500;
+            @apply bg-text-error;
         }
     }
 
@@ -160,15 +160,15 @@ function handleClick() {
     }
 
     &__heading-text {
-        @apply shrink-0 text-sm font-medium text-rsui-grey-800;
+        @apply shrink-0 text-sm font-medium text-text-primary;
     }
 
     &__heading-subtext {
-        @apply text-xs text-rsui-grey-700;
+        @apply text-xs text-text-secondary;
     }
 
     &__supporting-text {
-        @apply text-sm font-medium text-rsui-grey-700;
+        @apply text-sm font-medium text-text-secondary;
     }
 
     &__dot {

package/src/components/Avatar/AvatarText.vue

@@ -7,6 +7,6 @@
 </template>
 <style scoped lang='scss'>
     .rsui-avatar-circle {
-        @apply w-full h-full rounded-full bg-rsui-grey-100 flex items-center justify-center text-rsui-grey-500 border border-rsui-grey-300 font-semibold;
+        @apply w-full h-full rounded-full bg-background-secondary flex items-center justify-center text-text-secondary border border-border-primary font-semibold;
     }
 </style>

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -38,11 +38,11 @@ function clickItem(item) {
     @apply flex flex-wrap items-center gap-x-2 gap-y-2;
     &__item {
         @apply relative select-none pr-4 last:pr-0 last:after:hidden;
-        @apply text-sm text-rsui-grey-400 leading-6;
+        @apply text-sm text-text-disabled leading-6;
         @apply after:absolute after:right-0.5 after:content-['\007C'];
-        @apply after:w-0.5 after:h-full after:text-rsui-grey-400;
+        @apply after:w-0.5 after:h-full after:text-text-disabled;
         &--action {
-            @apply cursor-pointer hover:text-rsui-grey-900 transition-colors duration-200;
+            @apply cursor-pointer hover:text-text-primary transition-colors duration-200;
         }
     }
 }

package/src/components/Button/ButtonSlot.vue

@@ -98,16 +98,16 @@ const buttonSlotClass = computed(() => [
     // default font
     @apply font-semibold text-sm;
     // default colors
-    @apply bg-white text-rsui-grey-400 ring-0 ring-rsui-grey-400 border-rsui-grey-400;
+    @apply bg-background-primary text-text-secondary ring-0 ring-border-primary border-border-primary;
     // default hover state
-    @apply hover:bg-rsui-grey-100;
+    @apply hover:bg-background-secondary;
     // default focus state
-    @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-rsui-grey-400 focus-visible:border-rsui-grey-400;
+    @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-border-primary focus-visible:border-border-primary;
     // default active state
-    @apply active:ring-0 active:bg-white;
+    @apply active:ring-0 active:bg-background-primary;
     // default disabled state
-    @apply disabled:bg-rsui-grey-100 disabled:border-transparent disabled:text-rsui-grey-200;
-    @apply disabled:active:ring-0 disabled:active:bg-rsui-grey-100 disabled:active:border-transparent;
+    @apply disabled:bg-background-disabled disabled:border-transparent disabled:text-text-disabled;
+    @apply disabled:active:ring-0 disabled:active:bg-background-disabled disabled:active:border-transparent;
     @apply disabled:focus-visible:ring-0;
 
     :deep(svg) {

package/src/components/Button/ButtonTertiary.vue

@@ -17,7 +17,7 @@ import ButtonSlot from './ButtonSlot.vue'
     // default active state
     @apply active:bg-transparent active:border-transparent;
     // default disabled state
-    @apply disabled:bg-transparent disabled:border-transparent disabled:text-rsui-grey-400;
+    @apply disabled:bg-transparent disabled:border-transparent disabled:text-text-disabled;
     @apply disabled:active:bg-transparent disabled:active:border-transparent;
 }
 </style>

package/src/components/Card/ButtonCard.vue

@@ -48,9 +48,9 @@ const props = defineProps({
 </template>
 <style lang="scss" scoped>
 .rsui-button-card {
-    @apply hover:shadow-none hover:border-rsui-grey-900;
+    @apply hover:shadow-none hover:border-text-primary;
     &--disabled {
-        @apply hover:border-rsui-grey-400;
+        @apply hover:border-border-primary;
         @apply focus-visible:ring-0;
     }
     &__content {
@@ -58,7 +58,7 @@ const props = defineProps({
     }
     &__icon {
         @apply size-12 flex shrink-0 items-center justify-center rounded-lg transition duration-200;
-        @apply border border-rsui-grey-700 text-rsui-grey-700;
+        @apply border border-text-secondary text-text-secondary;
         :deep(svg) {
             @apply size-5;
             path {
@@ -70,19 +70,19 @@ const props = defineProps({
         @apply flex flex-col;
     }
     &__title {
-        @apply text-rsui-grey-800 font-semibold line-clamp-1;
-        @apply group-hover/button-card:text-rsui-grey-900;
+        @apply text-text-primary font-semibold line-clamp-1;
+        @apply group-hover/button-card:text-text-primary;
         &--disabled {
-            @apply text-rsui-grey-400;
-            @apply group-hover/button-card:text-rsui-grey-400;
+            @apply text-text-disabled;
+            @apply group-hover/button-card:text-text-disabled;
         }
     }
     &__supporting-text {
-        @apply text-sm text-rsui-grey-700 line-clamp-1;
-        @apply group-hover/button-card:text-rsui-grey-800;
+        @apply text-sm text-text-secondary line-clamp-1;
+        @apply group-hover/button-card:text-text-primary;
         &--disabled {
-            @apply text-rsui-grey-400;
-            @apply group-hover/button-card:text-rsui-grey-400;
+            @apply text-text-disabled;
+            @apply group-hover/button-card:text-text-disabled;
         }
     }
 }

package/src/components/Card/MetricCard.vue

@@ -47,7 +47,7 @@ function handleIconClick() {
     }
 
     &__icon {
-        @apply text-rsui-grey-800 transition-transform pointer-events-auto cursor-pointer size-6;
+        @apply text-text-primary transition-transform pointer-events-auto cursor-pointer size-6;
     }
 
     &__content {
@@ -55,11 +55,11 @@ function handleIconClick() {
     }
 
     &__title {
-        @apply text-sm font-normal text-rsui-grey-700 mt-4;
+        @apply text-sm font-normal text-text-secondary mt-4;
     }
 
     &__value {
-        @apply text-3xl font-semibold text-rsui-grey-900 leading-9;
+        @apply text-3xl font-semibold text-text-primary leading-9;
     }
 }
 </style>

package/src/components/Card/RadioCard.vue

@@ -106,10 +106,10 @@ function handleClick(event) {
 </template>
 <style lang="scss" scoped>
 .rsui-radio-card {
-    @apply max-w-80 w-80 bg-white border border-rsui-grey-200 rounded-md shadow-sm outline-none select-none;
+    @apply max-w-80 w-80 bg-background-primary border border-border-secondary rounded-md shadow-sm outline-none select-none;
     @apply relative cursor-pointer transition-all;
     @apply flex flex-col gap-3 p-4;
-    @apply focus-visible:ring-4 focus-visible:ring-rsui-grey-400;
+    @apply focus-visible:ring-4 focus-visible:ring-border-primary;
 
     &--flexible {
         @apply max-w-full w-full;
@@ -122,13 +122,13 @@ function handleClick(event) {
     }
 
     &--disabled {
-        @apply focus-visible:ring-0 border-rsui-grey-200 cursor-default;
-        @apply after:absolute after:content-[''] after:inset-0 after:bg-rsui-grey-200;
+        @apply focus-visible:ring-0 border-border-secondary cursor-default;
+        @apply after:absolute after:content-[''] after:inset-0 after:bg-border-secondary;
         @apply after:rounded-md after:opacity-65;
     }
 
     &__title-row {
-        @apply relative text-base font-medium text-rsui-grey-900 line-clamp-2 min-h-6 pr-8;
+        @apply relative text-base font-medium text-text-primary line-clamp-2 min-h-6 pr-8;
 
         // Radio button position
         @apply after:absolute after:top-0 after:right-0;
@@ -137,10 +137,10 @@ function handleClick(event) {
         // Radio button animation
         @apply after:transition-all;
         // Radio button decoration
-        @apply after:border after:border-rsui-grey-400 after:bg-white;
+        @apply after:border after:border-border-primary after:bg-background-primary;
         // Radio button event
-        @apply group-hover/radio-card:after:border-rsui-grey-700;
-        @apply group-focus-visible/radio-card:after:border-rsui-grey-700;
+        @apply group-hover/radio-card:after:border-text-secondary;
+        @apply group-focus-visible/radio-card:after:border-text-secondary;
 
         &--selected {
             @apply after:border-6 after:border-primary-background;
@@ -153,14 +153,14 @@ function handleClick(event) {
         }
 
         &--selected-disabled {
-            @apply after:border-6 after:border-white after:bg-rsui-grey-400;
-            @apply group-hover/radio-card:after:border-white;
-            @apply group-focus-visible/radio-card:after:border-white;
+            @apply after:border-6 after:border-background-primary after:bg-border-primary;
+            @apply group-hover/radio-card:after:border-background-primary;
+            @apply group-focus-visible/radio-card:after:border-background-primary;
         }
     }
 
     &__content-row {
-        @apply text-sm font-normal text-rsui-grey-700;
+        @apply text-sm font-normal text-text-secondary;
     }
 
     &__meta-row {

package/src/components/CardGroup/CardGroup.vue

@@ -5,6 +5,11 @@ import Pagination from '../Pagination/Pagination.vue'
 import { useResponsiveWidth } from '../../helpers'
 
 const props = defineProps({
+    variant: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'compact'].includes(value)
+    },
     controlApplied: {
         type: Boolean,
         default: false
@@ -34,6 +39,7 @@ const { responsiveWidth } = useResponsiveWidth(cardGroupElement)
 const cardGroupClasses = computed(() => [
     'rsui-card-group',
     {
+        'rsui-card-group--compact': props.variant === 'compact',
         'rsui-card-group--2xs': responsiveWidth.value['2xs'],
         'rsui-card-group--xs': responsiveWidth.value['xs'],
         'rsui-card-group--sm': responsiveWidth.value['sm'],
@@ -156,8 +162,41 @@ const showNotFoundMessage = computed(() => !props.totalItems && props.controlApp
             @apply gap-4 grid-cols-5;
         }
     }
+
+    &--compact {
+        .rsui-card-group__cards {
+            @apply gap-4 grid-cols-1;
+        }
+    }
+
+    &--compact.rsui-card-group--xs {
+        .rsui-card-group__cards {
+            @apply gap-4 grid-cols-2;
+        }
+    }
+
+    &--compact.rsui-card-group--sm {
+        .rsui-card-group__cards {
+            @apply gap-4 grid-cols-3;
+        }
+    }
+
+    &--compact.rsui-card-group--md,
+    &--compact.rsui-card-group--lg,
+    &--compact.rsui-card-group--xl {
+        .rsui-card-group__cards {
+            @apply gap-4 grid-cols-4;
+        }
+    }
+
+    &--compact.rsui-card-group--2xl,
+    &--compact.rsui-card-group--3xl {
+        .rsui-card-group__cards {
+            @apply gap-4 grid-cols-6;
+        }
+    }
     &__pagination {
         @apply w-full flex items-center justify-center mb-4;
     }
 }
-</style>
+</style>

package/src/components/DropdownMenu/DropdownMenu.vue

@@ -102,7 +102,7 @@ onUnmounted(() => document.removeEventListener('keydown', closeOnEscape))
     }
     &__container {
         @apply hidden absolute z-50 mt-2 p-2 w-76 origin-top;
-        @apply rounded-md shadow-full-light bg-white;
+        @apply rounded-md shadow-full-light bg-background-primary;
         @apply flex flex-col space-y-2;
         &--open {
             @apply block;

package/src/components/DropdownMenu/DropdownOption.vue

@@ -10,9 +10,9 @@ const emit = defineEmits(['click'])
 </template>
 <style lang="scss" scoped>
 .rsui-dropdown-option {
-    @apply cursor-pointer p-4 bg-white rounded-md text-base text-rsui-grey-900 transition;
+    @apply cursor-pointer p-4 bg-background-primary rounded-md text-base text-text-primary transition;
     @apply w-full inline-flex items-center whitespace-nowrap will-change-transform gap-1.5;
-    @apply hover:bg-rsui-grey-200;
+    @apply hover:bg-background-secondary;
 
     :deep(svg) {
         @apply size-6;

package/src/components/Empty/Empty.vue

@@ -102,7 +102,7 @@ const emptyClass = computed(() => [
 <style lang="scss" scoped>
 .rsui-empty {
     @apply w-full flex flex-col items-center justify-center gap-5;
-    @apply px-3 py-4 rounded-md text-rsui-grey-900;
+    @apply px-3 py-4 rounded-md text-text-primary;
     &--wide {
         .rsui-empty__image {
             :deep(svg) {

package/src/components/Form/FormFieldset.vue

@@ -20,7 +20,7 @@ defineOptions({
     fieldset {
     }
     legend {
-        @apply text-base text-rsui-grey-900 font-semibold;
+        @apply text-base text-text-primary font-semibold;
     }
     &__fields {
         @apply mt-3 px-2;

package/src/components/Form/FormSlot.vue

@@ -37,7 +37,7 @@
 .rsui-form-slot {
     @apply min-w-80 sm:min-w-96 sm:w-112;
     @apply flex flex-col sm:justify-center items-center;
-    @apply text-base text-rsui-grey-900;
+    @apply text-base text-text-primary;
 
     &__image {
         @apply mb-8;
@@ -47,16 +47,16 @@
         @apply w-full relative flex justify-center mb-2;
 
         &-line {
-            @apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-rsui-grey-200 after:h-px after:w-full;
+            @apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-border-secondary after:h-px after:w-full;
         }
 
         &-or {
-            @apply relative z-1 bg-white px-6 text-rsui-grey-900;
+            @apply relative z-1 bg-background-primary px-6 text-text-primary;
         }
     }
 
     &__content {
-        @apply w-full sm:max-w-md px-10 xs:px-12 md:px-16 py-10 bg-white shadow-md overflow-hidden rounded-lg;
+        @apply w-full sm:max-w-md px-10 xs:px-12 md:px-16 py-10 bg-background-primary shadow-md overflow-hidden rounded-lg;
         & > * {
             @apply first:mt-0 mt-4;
         }

package/src/components/FormField/FormFieldCheckbox.vue

@@ -63,19 +63,19 @@ function check(event) {
     &__label {
         @apply ml-2 font-normal;
         &--required {
-            @apply after:content-['*'] after:text-rsui-error-500;
+            @apply after:content-['*'] after:text-text-error;
         }
     }
     &__check {
-        @apply size-6 shrink-0 relative bg-white rounded-md cursor-pointer;
-        @apply has-[:disabled]:text-rsui-grey-400 has-[:disabled]:cursor-default;
+        @apply size-6 shrink-0 relative bg-background-primary rounded-md cursor-pointer;
+        @apply has-[:disabled]:text-text-disabled has-[:disabled]:cursor-default;
 
         input[type="checkbox"] {
             @apply appearance-none absolute inset-0 z-0 rounded-md transition focus:outline-none cursor-pointer;
-            @apply w-full h-full text-rsui-grey-900 border border-rsui-grey-200 text-transparent bg-none;
-            @apply focus:ring focus:ring-rsui-grey-400 focus:border-rsui-grey-400;
-            @apply invalid:border-rsui-error-500 invalid:ring-0;
-            @apply disabled:text-rsui-grey-400 disabled:bg-rsui-grey-200 disabled:cursor-default;
+            @apply w-full h-full text-text-primary border border-border-secondary text-transparent bg-none;
+            @apply focus:ring 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;
         }
         svg {
             @apply size-full relative z-1;

package/src/components/FormField/FormFieldCombobox.vue

@@ -487,10 +487,10 @@ defineExpose({
         @apply relative flex flex-nowrap overflow-hidden;
         @apply text-base transition;
         @apply w-full border rounded-lg ring-0;
-        @apply bg-white placeholder-rsui-grey-500 border-rsui-grey-500;
-        @apply has-[:focus]:border-rsui-grey-500;
-        @apply has-[:user-invalid]:border-rsui-error-500 has-[:user-invalid]:ring-0;
-        @apply has-[:disabled]:text-rsui-grey-500 has-[:disabled]:bg-rsui-grey-100 has-[:disabled]:border-rsui-grey-200 has-[:disabled]:ring-0;
+        @apply bg-background-primary placeholder-text-secondary border-border-primary;
+        @apply has-[:focus]:border-border-primary;
+        @apply has-[:user-invalid]:border-border-error has-[:user-invalid]:ring-0;
+        @apply has-[:disabled]:text-text-disabled has-[:disabled]:bg-background-disabled has-[:disabled]:border-border-disabled has-[:disabled]:ring-0;
     }
 
     &__prefix {
@@ -505,13 +505,13 @@ defineExpose({
 
     &__placeholder {
         @apply absolute inset-0 flex items-center px-4 pr-12 pointer-events-none;
-        @apply text-rsui-grey-500 select-none;
+        @apply text-text-secondary select-none;
     }
 
     &__icon {
         @apply absolute top-0 right-3 bottom-0 flex items-center justify-center;
-        @apply text-rsui-grey-900 h-full w-8 cursor-pointer;
-        @apply hover:text-rsui-grey-700 transition-colors;
+        @apply text-text-primary h-full w-8 cursor-pointer;
+        @apply hover:text-text-secondary transition-colors;
         &--open {
             svg {
                 @apply -rotate-180;
@@ -524,7 +524,7 @@ defineExpose({
 
     &__options {
         @apply hidden absolute top-0 w-full z-50;
-        @apply bg-white p-2 mt-2 rounded-lg shadow-full-light;
+        @apply bg-background-primary p-2 mt-2 rounded-lg shadow-full-light;
         @apply max-h-[80vh] sm:max-h-[60vh] overflow-y-auto;
         &--open {
             @apply block;
@@ -533,15 +533,15 @@ defineExpose({
 
     &__option {
         @apply flex flex-nowrap items-center justify-between cursor-pointer px-4 py-3 rounded-lg;
-        @apply bg-white hover:bg-rsui-grey-200 text-rsui-grey-900 transition;
+        @apply bg-background-primary hover:bg-background-secondary text-text-primary transition;
         &--disabled {
-            @apply opacity-50 hover:bg-white cursor-auto;
+            @apply opacity-50 hover:bg-background-primary cursor-auto;
         }
         &--error {
-            @apply text-rsui-error-500;
+            @apply text-text-error;
         }
         &--hint {
-            @apply text-rsui-grey-600 italic;
+            @apply text-text-secondary italic;
         }
         &-label {
             @apply text-base truncate;
@@ -555,14 +555,14 @@ defineExpose({
     }
 
     &__spinner {
-        @apply size-4 border-2 border-rsui-grey-300 border-t-rsui-grey-600 rounded-full animate-spin;
+        @apply size-4 border-2 border-border-primary border-t-text-secondary rounded-full animate-spin;
     }
 
     input[type='text'] {
         @apply flex-1;
-        @apply text-base text-rsui-grey-900 transition py-3 px-4 pr-12 outline-none focus:outline-none;
-        @apply bg-white placeholder-rsui-grey-500;
-        @apply disabled:text-rsui-grey-500 disabled:bg-rsui-grey-100 disabled:border-rsui-grey-200 disabled:ring-0;
+        @apply text-base text-text-primary transition py-3 px-4 pr-12 outline-none focus:outline-none;
+        @apply bg-background-primary placeholder-text-secondary;
+        @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:border-border-disabled disabled:ring-0;
     }
 }
 </style>

package/src/components/FormField/FormFieldPasswordToggle.vue

@@ -51,7 +51,7 @@ defineExpose({
 <style lang="scss" scoped>
 .rsui-form-field-password {
     &__icon {
-        @apply size-5 text-rsui-grey-500;
+        @apply size-5 text-text-secondary;
     }
     // :deep(.rsui-form-field-text__group) {
     //     input {

package/src/components/FormField/FormFieldRadioGroup.vue

@@ -72,11 +72,11 @@ function setValue(value) {
         @apply appearance-none;
     }
     &__control {
-        @apply shrink-0 size-6 border border-gray-400 rounded-full bg-white;
+        @apply shrink-0 size-6 border border-border-primary rounded-full bg-background-primary;
         &--active {
             @apply bg-primary-background border-primary-background flex items-center justify-center;
             div {
-                @apply size-3 bg-white rounded-full;
+                @apply size-3 bg-background-primary rounded-full;
             }
         }
     }

package/src/components/FormField/FormFieldSearch.vue

@@ -35,7 +35,7 @@ defineExpose({
 <style lang="scss" scoped>
 .rsui-form-field-search {
     &__icon {
-        @apply size-5 text-rsui-grey-400;
+        @apply size-5 text-text-secondary;
     }
     :deep(.rsui-form-field-text__prefix) {
         @apply pr-0;

package/src/components/FormField/FormFieldSelect.vue

@@ -242,7 +242,7 @@ defineExpose({
 
     &__options {
         @apply hidden absolute top-0 w-full z-50;
-        @apply bg-white p-2 mt-2 rounded-lg shadow-full-light;
+        @apply bg-background-primary p-2 mt-2 rounded-lg shadow-full-light;
         @apply max-h-[80vh] sm:max-h-[60vh] overflow-y-auto;
         &--open {
             @apply block;
@@ -251,9 +251,9 @@ defineExpose({
 
     &__option {
         @apply flex flex-nowrap items-center justify-between cursor-pointer px-4 py-3 rounded-lg;
-        @apply bg-white hover:bg-rsui-grey-200 text-rsui-grey-900 transition;
+        @apply bg-background-primary hover:bg-background-secondary text-text-primary transition;
         &--disabled {
-            @apply opacity-50 hover:bg-white cursor-auto;
+            @apply opacity-50 hover:bg-background-primary cursor-auto;
         }
         &-label {
             @apply text-base truncate;
@@ -268,8 +268,8 @@ defineExpose({
 
     &__icon {
         @apply absolute top-0 right-5 bottom-0 flex items-center justify-center;
-        @apply text-rsui-grey-900 h-full w-8 pointer-events-none;
-        @apply peer-disabled:text-rsui-grey-500;
+        @apply text-text-primary h-full w-8 pointer-events-none;
+        @apply peer-disabled:text-text-disabled;
         &--open {
             svg {
                 @apply -rotate-180;
@@ -284,10 +284,10 @@ defineExpose({
         @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 bg-white text-rsui-grey-900 placeholder-rsui-grey-500 border-rsui-grey-500;
-        @apply focus:border-rsui-grey-500;
-        @apply invalid:border-rsui-error-500 invalid:ring-0;
-        @apply disabled:text-rsui-grey-500 disabled:bg-rsui-grey-100 disabled:border-rsui-grey-200 disabled:ring-0 disabled:cursor-default;
+        @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;
+        @apply disabled:text-text-disabled disabled:bg-background-disabled disabled:border-border-disabled disabled:ring-0 disabled:cursor-default;
     }
 
     option {

package/src/components/FormField/FormFieldSlot.vue

@@ -77,10 +77,10 @@ const formFieldSlotLabelClass = computed(() => [
 
     &__label {
         &--required {
-            @apply after:content-['*'] after:text-rsui-error-500 after:ml-1;
+            @apply after:content-['*'] after:text-text-error after:ml-1;
         }
         label {
-            @apply font-medium text-sm text-rsui-grey-800;
+            @apply font-medium text-sm text-text-primary;
         }
     }
 
@@ -89,11 +89,11 @@ const formFieldSlotLabelClass = computed(() => [
     }
 
     &__help {
-        @apply text-xs text-rsui-grey-500;
+        @apply text-xs text-text-secondary;
     }
 
     &__error {
-        @apply text-sm text-rsui-error-500;
+        @apply text-sm text-text-error;
     }
 }
 </style>