@redseed/redseed-ui-vue3 3.1.0 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "3.1.0",
+  "version": "4.0.0",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {
@@ -11,8 +11,8 @@
   "license": "ISC",
   "dependencies": {
     "@heroicons/vue": "^2.2.0",
-    "@vueuse/components": "^12.3.0",
-    "@vueuse/core": "^12.3.0",
+    "@vueuse/components": "^12.8.2",
+    "@vueuse/core": "^12.7.0",
     "lodash": "^4.17.21",
     "lottie-web": "^5.12.2",
     "vue": "^3.5.13"

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-gray-200 flex items-center justify-center text-gray-500;
+        @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;
     }
 </style>

package/src/components/Badge/Badge.vue

@@ -26,10 +26,6 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-    danger: {
-        type: Boolean,
-        default: false,
-    },
 })
 
 const defaultSize = computed(() => !props.sm && !props.md)
@@ -43,7 +39,6 @@ const badgeClass = computed(() => [
         'rsui-badge--info': props.info,
         'rsui-badge--success': props.success,
         'rsui-badge--warning': props.warning,
-        'rsui-badge--danger': props.danger,
     },
 ])
 
@@ -72,19 +67,16 @@ defineExpose({
         @apply px-2 py-2;
     }
     &--neutral {
-        @apply text-rsui-default bg-rsui-grey-200;
+        @apply text-rsui-grey-900 bg-rsui-grey-200;
     }
     &--info {
-        @apply text-info-content bg-info;
+        @apply text-white bg-rsui-info-500;
     }
     &--success {
-        @apply text-success-content bg-success;
+        @apply text-white bg-rsui-success-500;
     }
     &--warning {
-        @apply text-warning-content bg-warning;
-    }
-    &--danger {
-        @apply text-danger-content bg-danger;
+        @apply text-white bg-rsui-warning-500;
     }
 
     :deep(svg) {

package/src/components/Badge/index.js

@@ -1,5 +1,4 @@
 import Badge from './Badge.vue'
-import BadgeDanger from './BadgeDanger.vue'
 import BadgeInfo from './BadgeInfo.vue'
 import BadgeNeutral from './BadgeNeutral.vue'
 import BadgeSuccess from './BadgeSuccess.vue'
@@ -8,7 +7,6 @@ import BadgeGroup from './BadgeGroup.vue'
 
 export {
     Badge,
-    BadgeDanger,
     BadgeInfo,
     BadgeNeutral,
     BadgeSuccess,

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-light leading-6;
+        @apply text-sm text-rsui-grey-400 leading-6;
         @apply after:absolute after:right-0.5 after:content-['\007C'];
-        @apply after:w-0.5 after:h-full after:text-rsui-light;
+        @apply after:w-0.5 after:h-full after:text-rsui-grey-400;
         &--action {
-            @apply cursor-pointer hover:text-rsui-default transition-colors duration-200;
+            @apply cursor-pointer hover:text-rsui-grey-900 transition-colors duration-200;
         }
     }
 }

package/src/components/Button/ButtonPrimary.vue

@@ -1,5 +1,4 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonSlot from './ButtonSlot.vue'
 </script>
 <template>
@@ -10,8 +9,15 @@ import ButtonSlot from './ButtonSlot.vue'
 <style lang="scss" scoped>
 .rsui-button-primary {
     // default colors
-    @apply bg-primary text-primary-content border-primary;
+    @apply text-primary-foreground bg-primary-background border-primary-background;
+    // default hover state
+    @apply hover:text-primary-foreground-hover hover:bg-primary-background-hover hover:border-primary-background-hover;
+    // default focus state
+    @apply focus-visible:ring-primary-background focus-visible:border-primary-background;
     // default active state
-    @apply active:border-primary active:bg-primary;
+    @apply active:bg-primary-background active:border-primary-background;
+    // default disabled state
+    @apply disabled:bg-rsui-grey-200 disabled:border-rsui-grey-200 disabled:text-rsui-grey-400;
+    @apply disabled:active:bg-rsui-grey-200 disabled:active:border-rsui-grey-200;
 }
 </style>

package/src/components/Button/ButtonSecondary.vue

@@ -9,8 +9,15 @@ import ButtonSlot from './ButtonSlot.vue'
 <style lang="scss" scoped>
 .rsui-button-secondary {
     // default colors
-    @apply bg-secondary text-secondary-content border-secondary;
+    @apply text-rsui-grey-800 bg-white border-rsui-grey-700;
+    // default hover state
+    @apply hover:text-rsui-grey-900 hover:bg-white hover:border-rsui-grey-900;
+    // default focus state
+    @apply focus-visible:ring-rsui-grey-700 focus-visible:border-rsui-grey-700;
     // default active state
-    @apply active:border-secondary active:bg-secondary;
+    @apply active:bg-white active:border-rsui-grey-700;
+    // default disabled state
+    @apply disabled:bg-white disabled:border-rsui-grey-100 disabled:text-rsui-grey-400;
+    @apply disabled:active:bg-white disabled:active:border-rsui-grey-100;
 }
 </style>

package/src/components/Button/ButtonSecondaryBrand.vue

@@ -0,0 +1,23 @@
+<script setup>
+import ButtonSlot from './ButtonSlot.vue'
+</script>
+<template>
+<ButtonSlot class="rsui-button-secondary-brand">
+    <slot></slot>
+</ButtonSlot>
+</template>
+<style lang="scss" scoped>
+.rsui-button-secondary-brand {
+    // default colors
+    @apply text-primary-background bg-white border-primary-background;
+    // default hover state
+    @apply hover:text-primary-background-hover hover:bg-white hover:border-primary-background-hover;
+    // default focus state
+    @apply focus-visible:ring-primary-background focus-visible:border-primary-background;
+    // default active state
+    @apply active:bg-white active:border-primary-background;
+    // default disabled state
+    @apply disabled:bg-white disabled:border-rsui-grey-100 disabled:text-rsui-grey-400;
+    @apply disabled:active:bg-white disabled:active:border-rsui-grey-100;
+}
+</style>

package/src/components/Button/ButtonSecondaryBrandFull.vue

@@ -0,0 +1,10 @@
+<script setup>
+import ButtonSecondaryBrand from './ButtonSecondaryBrand.vue'
+</script>
+<template>
+<ButtonSecondaryBrand full>
+    <slot></slot>
+</ButtonSecondaryBrand>
+</template>
+<style lang="scss" scoped>
+</style>

package/src/components/Button/ButtonSlot.vue

@@ -1,15 +1,7 @@
 <script setup>
 import { ref, computed } from 'vue'
 
-defineOptions({
-    inheritAttrs: false,
-})
-
 const props = defineProps({
-    xs: {
-        type: Boolean,
-        default: false,
-    },
     sm: {
         type: Boolean,
         default: false,
@@ -22,15 +14,15 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
-    full: {
+    xl: {
         type: Boolean,
         default: false,
     },
-    rounded: {
+    '2xl': {
         type: Boolean,
         default: false,
     },
-    submit: {
+    full: {
         type: Boolean,
         default: false,
     },
@@ -38,41 +30,60 @@ const props = defineProps({
 
 defineEmits(['click'])
 
-const type = computed(() => props.submit ? 'submit' : 'button')
+// button element ref
+const buttonElementRef = ref(null)
 
-const buttonElement = ref(null)
+// check if the button is an icon only button
+const iconOnly = computed(() => buttonElementRef.value && !buttonElementRef.value.textContent)
 
-const iconOnly = computed(() => buttonElement.value && !buttonElement.value.textContent)
+// button size values
+const sizes = {
+    sm: 'sm',
+    md: 'md',
+    lg: 'lg',
+    xl: 'xl',
+    '2xl': '2xl',
+}
 
-const defaultSize = computed(() => !props.xs && !props.sm && !props.md && !props.lg)
+// computed button size
+const buttonSize = computed(() => {
+    if (props.sm) return sizes.sm
+    if (props.md) return sizes.md
+    if (props.lg) return sizes.lg
+    if (props.xl) return sizes.xl
+    if (props['2xl']) return sizes['2xl']
+
+    // default size to md
+    return sizes.md
+})
 
 const buttonSlotClass = computed(() => [
     'rsui-button-slot',
     {
         // button sizes
-        'rsui-button-slot--xs': props.xs,
-        'rsui-button-slot--sm': props.sm,
-        'rsui-button-slot--md': props.md || defaultSize.value,
-        'rsui-button-slot--lg': props.lg,
-        'rsui-button-slot--xs-icon': props.xs && iconOnly.value,
-        'rsui-button-slot--sm-icon': props.sm && iconOnly.value,
-        'rsui-button-slot--md-icon': (props.md || defaultSize.value) && iconOnly.value,
-        'rsui-button-slot--lg-icon': props.lg && iconOnly.value,
+        'rsui-button-slot--sm': buttonSize.value === sizes.sm,
+        'rsui-button-slot--md': buttonSize.value === sizes.md,
+        'rsui-button-slot--lg': buttonSize.value === sizes.lg,
+        'rsui-button-slot--xl': buttonSize.value === sizes.xl,
+        'rsui-button-slot--2xl': buttonSize.value === sizes['2xl'],
+
+        // button sizes with icon only
+        'rsui-button-slot--sm-icon': buttonSize.value === sizes.sm && iconOnly.value,
+        'rsui-button-slot--md-icon': buttonSize.value === sizes.md && iconOnly.value,
+        'rsui-button-slot--lg-icon': buttonSize.value === sizes.lg && iconOnly.value,
+        'rsui-button-slot--xl-icon': buttonSize.value === sizes.xl && iconOnly.value,
+        'rsui-button-slot--2xl-icon': buttonSize.value === sizes['2xl'] && iconOnly.value,
 
         // button full width
         'rsui-button-slot--full': props.full,
-
-        // button fully rounded
-        'rsui-button-slot--rounded': props.rounded,
     },
 ])
 </script>
 <template>
 <button
-    ref="buttonElement"
+    ref="buttonElementRef"
     :class="buttonSlotClass"
-    :type="type"
-    v-bind="$attrs"
+    type="button"
     @click="$emit('click', $event)"
 >
     <slot></slot>
@@ -83,69 +94,72 @@ const buttonSlotClass = computed(() => [
     // default control
     @apply w-fit h-fit inline-flex shrink-0 items-center justify-center select-none outline-none whitespace-nowrap will-change-transform;
     // default shape
-    @apply font-semibold gap-2 rounded-md border transition;
+    @apply gap-1.5 border rounded-lg transition;
+    // default font
+    @apply font-semibold text-sm;
     // default colors
-    @apply bg-white text-rsui-default ring-highlight border-rsui-default;
+    @apply bg-white text-rsui-grey-400 ring-0 ring-rsui-grey-400 border-rsui-grey-400;
     // default hover state
-    @apply hover:brightness-110;
+    @apply hover:bg-rsui-grey-100;
     // default focus state
-    @apply focus-visible:ring-4 focus-visible:ring-highlight focus-visible:border-highlight;
+    @apply focus-visible:ring-offset-2 focus-visible:ring-2 focus-visible:ring-rsui-grey-400 focus-visible:border-rsui-grey-400;
     // default active state
-    @apply active:ring-0 active:bg-white active:filter-none;
+    @apply active:ring-0 active:bg-white;
     // default disabled state
-    @apply disabled:bg-rsui-grey-200 disabled:border-transparent disabled:text-white disabled:filter-none;
-    @apply disabled:active:bg-rsui-grey-200 disabled:active:ring-0 disabled:active:border-transparent;
+    @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:focus-visible:ring-0;
+
+    :deep(svg) {
+        @apply size-5;
+    }
+
     // modifier full width
     &--full {
         @apply w-full;
     }
-    // modifier fully rounded
-    &--rounded {
-        @apply rounded-full;
-    }
-    // modifier xs size
-    &--xs {
-        @apply text-xs px-2 py-1;
-        &-icon {
-            @apply p-1;
-        }
-        :deep(svg) {
-            @apply size-4;
-        }
-    }
+
     // modifier sm size
     &--sm {
         @apply text-sm px-3 py-2;
         &-icon {
             @apply p-2;
         }
-        :deep(svg) {
-            @apply size-5;
-        }
     }
+
     // modifier md size
     &--md {
-        @apply text-base px-3 py-2;
+        @apply text-sm leading-5 px-3.5 py-2.5;
         &-icon {
-            @apply p-2;
-        }
-        :deep(svg) {
-            @apply size-6;
+            @apply p-2.5;
         }
     }
+
     // modifier lg size
     &--lg {
-        @apply text-lg px-4 py-3;
+        @apply text-base px-4 py-2.5;
         &-icon {
             @apply p-3;
         }
-        :deep(svg) {
-            @apply size-7;
+    }
+
+    // modifier xl size
+    &--xl {
+        @apply text-base leading-6 px-4.5 py-3;
+        &-icon {
+            @apply p-3.5;
         }
     }
-    :deep(svg) {
-        // @apply stroke-1;
+
+    // modifier 2xl size
+    &--2xl {
+        @apply text-lg leading-7 px-5 py-4;
+        &-icon {
+            @apply p-4.5;
+        }
+        :deep(svg) {
+            @apply size-6;
+        }
     }
 }
 </style>

package/src/components/Button/ButtonTertiary.vue

@@ -9,8 +9,15 @@ import ButtonSlot from './ButtonSlot.vue'
 <style lang="scss" scoped>
 .rsui-button-tertiary {
     // default colors
-    @apply bg-tertiary text-tertiary-content border-tertiary-content;
+    @apply text-rsui-grey-700 bg-white border-rsui-grey-400;
+    // default hover state
+    @apply hover:text-rsui-grey-900 hover:bg-rsui-grey-200 hover:border-rsui-grey-200;
+    // default focus state
+    @apply focus-visible:ring-rsui-grey-400 focus-visible:border-rsui-grey-400;
     // default active state
-    @apply active:border-tertiary-content active:bg-tertiary;
+    @apply active:bg-white active:border-rsui-grey-400;
+    // default disabled state
+    @apply disabled:bg-white disabled:border-rsui-grey-100 disabled:text-rsui-grey-400;
+    @apply disabled:active:bg-white disabled:active:border-rsui-grey-100;
 }
 </style>

package/src/components/Button/index.js

@@ -1,37 +1,19 @@
-import ButtonDanger from './ButtonDanger.vue'
-import ButtonDangerFull from './ButtonDangerFull.vue'
-import ButtonDangerFullRounded from './ButtonDangerFullRounded.vue'
-import ButtonDangerRounded from './ButtonDangerRounded.vue'
 import ButtonPrimary from './ButtonPrimary.vue'
 import ButtonPrimaryFull from './ButtonPrimaryFull.vue'
-import ButtonPrimaryFullRounded from './ButtonPrimaryFullRounded.vue'
-import ButtonPrimaryRounded from './ButtonPrimaryRounded.vue'
 import ButtonSecondary from './ButtonSecondary.vue'
 import ButtonSecondaryFull from './ButtonSecondaryFull.vue'
-import ButtonSecondaryFullRounded from './ButtonSecondaryFullRounded.vue'
-import ButtonSecondaryRounded from './ButtonSecondaryRounded.vue'
-import ButtonSlot from './ButtonSlot.vue'
+import ButtonSecondaryBrand from './ButtonSecondaryBrand.vue'
+import ButtonSecondaryBrandFull from './ButtonSecondaryBrandFull.vue'
 import ButtonTertiary from './ButtonTertiary.vue'
 import ButtonTertiaryFull from './ButtonTertiaryFull.vue'
-import ButtonTertiaryFullRounded from './ButtonTertiaryFullRounded.vue'
-import ButtonTertiaryRounded from './ButtonTertiaryRounded.vue'
 
 export {
-    ButtonDanger,
-    ButtonDangerFull,
-    ButtonDangerFullRounded,
-    ButtonDangerRounded,
     ButtonPrimary,
     ButtonPrimaryFull,
-    ButtonPrimaryFullRounded,
-    ButtonPrimaryRounded,
     ButtonSecondary,
     ButtonSecondaryFull,
-    ButtonSecondaryFullRounded,
-    ButtonSecondaryRounded,
-    ButtonSlot,
+    ButtonSecondaryBrand,
+    ButtonSecondaryBrandFull,
     ButtonTertiary,
     ButtonTertiaryFull,
-    ButtonTertiaryFullRounded,
-    ButtonTertiaryRounded,
 }

package/src/components/ButtonGroup/ButtonGroupItem.vue

@@ -38,13 +38,13 @@ const buttonClass = computed(() => [
     // default shape
     @apply first:rounded-l-md last:rounded-r-md first:border-l border-r border-y ring-0;
     // default colors
-    @apply bg-segment text-segment-content border-rsui-grey-300;
+    @apply bg-white text-rsui-grey-700 border-rsui-grey-400;
     // default hover state
     @apply hover:bg-rsui-grey-200;
     // default active/pressed state
-    @apply active:ring-0  active:bg-segment;
+    @apply active:ring-0 active:bg-white;
     // default disabled state
-    @apply disabled:text-rsui-grey-200 disabled:bg-white;
+    @apply disabled:text-rsui-grey-400 disabled:bg-white;
     &--selected {
         @apply bg-rsui-grey-200 active:bg-rsui-grey-200 cursor-default;
     }

package/src/components/Card/RadioCard.vue

@@ -109,15 +109,15 @@ function handleClick(event) {
     @apply max-w-80 w-80 bg-white border border-rsui-grey-200 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-light;
+    @apply focus-visible:ring-4 focus-visible:ring-rsui-grey-400;
 
     &--flexible {
         @apply max-w-full w-full;
     }
 
     &--selected {
-        @apply focus-visible:ring-0 border-primary;
-        @apply after:absolute after:content-[''] after:inset-0 after:bg-primary;
+        @apply focus-visible:ring-0 border-primary-background;
+        @apply after:absolute after:content-[''] after:inset-0 after:bg-primary-background;
         @apply after:rounded-md after:opacity-10;
     }
 
@@ -128,7 +128,7 @@ function handleClick(event) {
     }
 
     &__title-row {
-        @apply relative text-base font-medium text-rsui-default line-clamp-2 min-h-6 pr-8;
+        @apply relative text-base font-medium text-rsui-grey-900 line-clamp-2 min-h-6 pr-8;
 
         // Radio button position
         @apply after:absolute after:top-0 after:right-0;
@@ -137,15 +137,15 @@ function handleClick(event) {
         // Radio button animation
         @apply after:transition-all;
         // Radio button decoration
-        @apply after:border after:border-rsui-light after:bg-white;
+        @apply after:border after:border-rsui-grey-400 after:bg-white;
         // Radio button event
-        @apply group-hover/radio-card:after:border-rsui-medium;
-        @apply group-focus-visible/radio-card:after:border-rsui-medium;
+        @apply group-hover/radio-card:after:border-rsui-grey-700;
+        @apply group-focus-visible/radio-card:after:border-rsui-grey-700;
 
         &--selected {
-            @apply after:border-6 after:border-primary;
-            @apply group-hover/radio-card:after:border-primary;
-            @apply group-focus-visible/radio-card:after:border-primary;
+            @apply after:border-6 after:border-primary-background;
+            @apply group-hover/radio-card:after:border-primary-background;
+            @apply group-focus-visible/radio-card:after:border-primary-background;
         }
 
         &--disabled {
@@ -153,14 +153,14 @@ function handleClick(event) {
         }
 
         &--selected-disabled {
-            @apply after:border-6 after:border-white after:bg-rsui-light;
+            @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;
         }
     }
 
     &__content-row {
-        @apply text-sm font-normal text-rsui-medium;
+        @apply text-sm font-normal text-rsui-grey-700;
     }
 
     &__meta-row {

package/src/components/CardGroup/CardGroup.vue

@@ -94,20 +94,28 @@ const showNotFoundMessage = computed(() => !props.totalItems && props.controlApp
             <template #image>
                 <slot name="empty-image"></slot>
             </template>
+
             <template #title v-if="$slots['empty-title']">
                 <slot name="empty-title"></slot>
             </template>
+
+            <slot name="empty-description">It looks like there's nothing here yet.</slot>
+
+            <template #actions="{ isWide }" v-if="$slots['empty-actions']">
+                <slot name="empty-actions" :isWide="isWide"></slot>
+            </template>
+
             <template #primary-action-label v-if="$slots['empty-action-label']">
                 <slot name="empty-action-label"></slot>
             </template>
+
             <template #secondary-action-label v-if="$slots['empty-secondary-action-label']">
                 <slot name="empty-secondary-action-label"></slot>
             </template>
+
             <template #tertiary-action-label v-if="$slots['empty-tertiary-action-label']">
                 <slot name="empty-tertiary-action-label"></slot>
             </template>
-
-            <slot name="empty-description">It looks like there's nothing here yet.</slot>
         </Empty>
     </div>
     <div v-if="showNotFoundMessage" class="rsui-card-group">

package/src/components/DropdownMenu/DropdownOption.vue

@@ -10,7 +10,7 @@ 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-default transition;
+    @apply cursor-pointer p-4 bg-white rounded-md text-base text-rsui-grey-900 transition;
     @apply hover:bg-rsui-grey-200;
 }
 </style>

package/src/components/Empty/Empty.vue

@@ -93,7 +93,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-default;
+    @apply px-3 py-4 rounded-md text-rsui-grey-900;
     &--wide {
         .rsui-empty__image {
             :deep(svg) {

package/src/components/Form/FormFieldset.vue

@@ -20,7 +20,7 @@ defineOptions({
     fieldset {
     }
     legend {
-        @apply text-base text-rsui-default font-semibold;
+        @apply text-base text-rsui-grey-900 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-default;
+    @apply text-base text-rsui-grey-900;
 
     &__image {
         @apply mb-8;
@@ -51,7 +51,7 @@
         }
 
         &-or {
-            @apply relative z-1 bg-white px-6 text-rsui-default;
+            @apply relative z-1 bg-white px-6 text-rsui-grey-900;
         }
     }
 

package/src/components/FormField/FormFieldCheckbox.vue

@@ -61,19 +61,19 @@ function check(event) {
     &__label {
         @apply ml-2 font-normal;
         &--required {
-            @apply after:content-['*'] after:text-danger;
+            @apply after:content-['*'] after:text-rsui-error-500;
         }
     }
     &__check {
         @apply size-6 shrink-0 relative bg-white rounded-md cursor-pointer;
-        @apply has-[:disabled]:text-rsui-light has-[:disabled]:cursor-default;
+        @apply has-[:disabled]:text-rsui-grey-400 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-default border border-rsui-grey-200 text-transparent bg-none;
-            @apply focus:ring focus:ring-highlight focus:border-highlight;
-            @apply invalid:border-danger invalid:ring-0;
-            @apply disabled:text-rsui-light disabled:bg-rsui-grey-200 disabled:cursor-default;
+            @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;
         }
         svg {
             @apply size-full relative z-1;