@redseed/redseed-ui-vue3 2.3.1 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "2.3.1",
+  "version": "2.4.1",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/Button/ButtonDanger.vue

@@ -1,34 +1,16 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonSlot from './ButtonSlot.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
-
-const buttonClass = computed(() => [
-    'rsui-button-danger',
-])
 </script>
 <template>
-<ButtonSlot
-    :class="buttonClass"
-    v-bind="$attrs"
->
+<ButtonSlot class="rsui-button-danger">
     <slot></slot>
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
 .rsui-button-danger {
     // default colors
-    @apply bg-danger-content text-danger ring-danger/30 border-danger/40;
-    // default hover state
-    @apply hover:border-danger;
-    // default focus state
-    @apply focus-visible:border-danger/30;
+    @apply bg-danger-content text-danger border-danger;
     // default active state
-    @apply active:border-danger active:bg-danger/10;
-    // default disabled state
-    @apply disabled:text-danger/20 disabled:border-danger/20 disabled:bg-danger-content;
+    @apply active:border-danger active:bg-danger-content;
 }
 </style>

package/src/components/Button/ButtonDangerFull.vue

@@ -1,16 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonDanger from './ButtonDanger.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonDanger
-    full
-    v-bind="$attrs"
->
+<ButtonDanger full>
     <slot></slot>
 </ButtonDanger>
 </template>

package/src/components/Button/ButtonDangerFullRounded.vue

@@ -1,17 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonDanger from './ButtonDanger.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonDanger
-    full
-    rounded
-    v-bind="$attrs"
->
+<ButtonDanger full rounded>
     <slot></slot>
 </ButtonDanger>
 </template>

package/src/components/Button/ButtonDangerRounded.vue

@@ -1,16 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonDanger from './ButtonDanger.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonDanger
-    rounded
-    v-bind="$attrs"
->
+<ButtonDanger rounded>
     <slot></slot>
 </ButtonDanger>
 </template>

package/src/components/Button/ButtonPrimary.vue

@@ -1,32 +1,17 @@
 <script setup>
 import { computed } from 'vue'
 import ButtonSlot from './ButtonSlot.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
-
-const buttonClass = computed(() => [
-    'rsui-button-primary',
-])
 </script>
 <template>
-<ButtonSlot
-    :class="buttonClass"
-    v-bind="$attrs"
->
+<ButtonSlot class="rsui-button-primary">
     <slot></slot>
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
 .rsui-button-primary {
     // default colors
-    @apply bg-primary text-primary-content ring-primary/30 border-primary;
-    // default focus state
-    @apply focus-visible:border-primary/30;
+    @apply bg-primary text-primary-content border-primary;
     // default active state
-    @apply active:border-primary active:bg-primary/80;
-    // default disabled state
-    @apply disabled:text-primary-content disabled:border-transparent disabled:bg-primary/30;
+    @apply active:border-primary active:bg-primary;
 }
 </style>

package/src/components/Button/ButtonPrimaryFull.vue

@@ -1,16 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonPrimary from './ButtonPrimary.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonPrimary
-    full
-    v-bind="$attrs"
->
+<ButtonPrimary full>
     <slot></slot>
 </ButtonPrimary>
 </template>

package/src/components/Button/ButtonPrimaryFullRounded.vue

@@ -1,17 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonPrimary from './ButtonPrimary.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonPrimary
-    full
-    rounded
-    v-bind="$attrs"
->
+<ButtonPrimary full rounded>
     <slot></slot>
 </ButtonPrimary>
 </template>

package/src/components/Button/ButtonPrimaryRounded.vue

@@ -1,16 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonPrimary from './ButtonPrimary.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonPrimary
-    rounded
-    v-bind="$attrs"
->
+<ButtonPrimary rounded>
     <slot></slot>
 </ButtonPrimary>
 </template>

package/src/components/Button/ButtonSecondary.vue

@@ -1,32 +1,16 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonSlot from './ButtonSlot.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
-
-const buttonClass = computed(() => [
-    'rsui-button-secondary',
-])
 </script>
 <template>
-<ButtonSlot
-    :class="buttonClass"
-    v-bind="$attrs"
->
+<ButtonSlot class="rsui-button-secondary">
     <slot></slot>
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
 .rsui-button-secondary {
     // default colors
-    @apply bg-secondary text-secondary-content ring-secondary/30 border-secondary;
-    // default focus state
-    @apply focus-visible:border-secondary/30;
+    @apply bg-secondary text-secondary-content border-secondary;
     // default active state
-    @apply active:border-secondary active:bg-secondary/80;
-    // default disabled state
-    @apply disabled:text-secondary-content disabled:border-transparent disabled:bg-secondary/30;
+    @apply active:border-secondary active:bg-secondary;
 }
 </style>

package/src/components/Button/ButtonSecondaryFull.vue

@@ -1,16 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonSecondary from './ButtonSecondary.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonSecondary
-    full
-    v-bind="$attrs"
->
+<ButtonSecondary full>
     <slot></slot>
 </ButtonSecondary>
 </template>

package/src/components/Button/ButtonSecondaryFullRounded.vue

@@ -1,17 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonSecondary from './ButtonSecondary.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonSecondary
-    full
-    rounded
-    v-bind="$attrs"
->
+<ButtonSecondary full rounded>
     <slot></slot>
 </ButtonSecondary>
 </template>

package/src/components/Button/ButtonSecondaryRounded.vue

@@ -1,16 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonSecondary from './ButtonSecondary.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonSecondary
-    rounded
-    v-bind="$attrs"
->
+<ButtonSecondary rounded>
     <slot></slot>
 </ButtonSecondary>
 </template>

package/src/components/Button/ButtonSlot.vue

@@ -85,14 +85,17 @@ const buttonSlotClass = computed(() => [
     // default shape
     @apply font-semibold gap-2 rounded-md border transition;
     // default colors
-    @apply bg-black text-white ring-black/20 border-black;
+    @apply bg-white text-rsui-default ring-highlight border-rsui-default;
+    // default hover state
+    @apply hover:brightness-110;
     // default focus state
-    @apply focus-visible:ring-4;
+    @apply focus-visible:ring-4 focus-visible:ring-highlight focus-visible:border-highlight;
     // default active state
-    @apply active:ring-0 active:bg-black/80;
+    @apply active:ring-0 active:bg-white active:filter-none;
     // default disabled state
-    @apply disabled:bg-black/20 disabled:border-transparent;
-    @apply disabled:active:ring-0 disabled:focus-visible:ring-0;
+    @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:focus-visible:ring-0;
     // modifier full width
     &--full {
         @apply w-full;

package/src/components/Button/ButtonTertiary.vue

@@ -1,34 +1,16 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonSlot from './ButtonSlot.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
-
-const buttonClass = computed(() => [
-    'rsui-button-tertiary',
-])
 </script>
 <template>
-<ButtonSlot
-    :class="buttonClass"
-    v-bind="$attrs"
->
+<ButtonSlot class="rsui-button-tertiary">
     <slot></slot>
 </ButtonSlot>
 </template>
 <style lang="scss" scoped>
 .rsui-button-tertiary {
     // default colors
-    @apply bg-tertiary text-tertiary-content ring-tertiary-content/30 border-tertiary-content/40;
-    // default hover state
-    @apply hover:border-tertiary-content;
-    // default focus state
-    @apply focus-visible:border-tertiary-content/30;
+    @apply bg-tertiary text-tertiary-content border-tertiary-content;
     // default active state
-    @apply active:border-tertiary-content active:bg-tertiary-content/10;
-    // default disabled state
-    @apply disabled:text-tertiary-content/20 disabled:border-tertiary-content/20 disabled:bg-tertiary;
+    @apply active:border-tertiary-content active:bg-tertiary;
 }
 </style>

package/src/components/Button/ButtonTertiaryFull.vue

@@ -1,16 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonTertiary from './ButtonTertiary.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonTertiary
-    full
-    v-bind="$attrs"
->
+<ButtonTertiary full>
     <slot></slot>
 </ButtonTertiary>
 </template>

package/src/components/Button/ButtonTertiaryFullRounded.vue

@@ -1,17 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonTertiary from './ButtonTertiary.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonTertiary
-    full
-    rounded
-    v-bind="$attrs"
->
+<ButtonTertiary full rounded>
     <slot></slot>
 </ButtonTertiary>
 </template>

package/src/components/Button/ButtonTertiaryRounded.vue

@@ -1,16 +1,8 @@
 <script setup>
-import { computed } from 'vue'
 import ButtonTertiary from './ButtonTertiary.vue'
-
-defineOptions({
-    inheritAttrs: false,
-})
 </script>
 <template>
-<ButtonTertiary
-    rounded
-    v-bind="$attrs"
->
+<ButtonTertiary rounded>
     <slot></slot>
 </ButtonTertiary>
 </template>

package/src/components/ButtonGroup/ButtonGroupItem.vue

@@ -38,15 +38,15 @@ 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-white text-segment-content border-segment-content/30;
+    @apply bg-segment text-segment-content border-rsui-grey-300;
     // default hover state
-    @apply hover:bg-segment-content/10;
+    @apply hover:bg-rsui-grey-200;
     // default active/pressed state
-    @apply active:ring-0  active:bg-white;
+    @apply active:ring-0  active:bg-segment;
     // default disabled state
-    @apply disabled:text-segment-content/20 disabled:bg-white;
+    @apply disabled:text-rsui-grey-200 disabled:bg-white;
     &--selected {
-        @apply bg-segment-content/10 active:bg-segment-content/10 cursor-default;
+        @apply bg-rsui-grey-200 active:bg-rsui-grey-200 cursor-default;
     }
     &__label {
         @apply gap-x-2 px-1 inline-flex items-center;

package/src/components/Card/Card.vue

@@ -80,7 +80,7 @@ function clicked() {
 .rsui-card {
     @apply flex flex-col;
     @apply select-none transition duration-200;
-    @apply border border-gray-100 rounded-lg bg-white shadow-full-light;
+    @apply rounded-lg bg-white shadow-full-light;
     &--hoverable {
         @apply hover:shadow-md;
     }

package/src/components/DropdownMenu/DropdownOption.vue

@@ -11,6 +11,6 @@ const emit = defineEmits(['click'])
 <style lang="scss" scoped>
 .rsui-dropdown-option {
     @apply cursor-pointer p-4 bg-white rounded-md text-base text-rsui-default transition;
-    @apply hover:bg-gray-200;
+    @apply hover:bg-rsui-grey-200;
 }
 </style>

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-gray-700;
+    @apply text-base text-rsui-default;
 
     &__image {
         @apply mb-8;
@@ -47,11 +47,11 @@
         @apply w-full relative flex justify-center mb-2;
 
         &-line {
-            @apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-gray-300 after:h-px after:w-full;
+            @apply after:content-[''] after:absolute after:top-1/2 after:left-0 after:bg-rsui-grey-200 after:h-px after:w-full;
         }
 
         &-or {
-            @apply relative z-1 bg-white px-6;
+            @apply relative z-1 bg-white px-6 text-rsui-default;
         }
     }
 

package/src/components/FormField/FormFieldCheckbox.vue

@@ -61,7 +61,7 @@ function check(event) {
         input[type="checkbox"] {
             @apply appearance-none absolute inset-0 z-0 rounded-md transition focus:outline-none;
             @apply w-full h-full text-rsui-default border border-rsui-grey-200 text-transparent bg-none;
-            @apply focus:ring focus:ring-rsui-light focus:border-rsui-light;
+            @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;
         }

package/src/components/FormField/FormFieldSelect.vue

@@ -159,7 +159,7 @@ function choose(option) {
         select {
             @apply pl-5 pr-14 truncate;
             @apply appearance-none rounded-full cursor-pointer;
-            @apply focus:ring focus:ring-rsui-light focus:border-rsui-light;
+            @apply focus:ring focus:ring-highlight focus:border-highlight;
             option {
                 @apply hidden;
             }
@@ -176,7 +176,7 @@ function choose(option) {
 
     &__option {
         @apply flex flex-nowrap items-center justify-between cursor-pointer px-4 py-3 rounded-md;
-        @apply bg-white hover:bg-gray-200 text-rsui-default transition;
+        @apply bg-white hover:bg-rsui-grey-200 text-rsui-default transition;
         &--disabled {
             @apply opacity-50 hover:bg-white cursor-auto;
         }

package/src/components/FormField/FormFieldSlot.vue

@@ -62,7 +62,7 @@ const formFieldSlotClass = computed(() => [
 
     &__label {
         label {
-            @apply font-medium text-base text-gray-700;
+            @apply font-medium text-base text-rsui-default;
         }
     }
 
@@ -71,11 +71,11 @@ const formFieldSlotClass = computed(() => [
     }
 
     &__help {
-        @apply text-xs text-gray-500;
+        @apply text-xs text-rsui-light;
     }
 
     &__error {
-        @apply text-sm text-red-500;
+        @apply text-sm text-danger;
     }
 }
 </style>

package/src/components/FormField/FormFieldText.vue

@@ -66,7 +66,7 @@ const inputElement = ref(null)
         @apply text-base transition;
         @apply w-full border rounded-md ring-0;
         @apply bg-white placeholder-rsui-light border-rsui-grey-200;
-        @apply has-[:focus]:ring has-[:focus]:ring-rsui-light has-[:focus]:border-rsui-light;
+        @apply has-[:focus]:ring has-[:focus]:ring-highlight has-[:focus]:border-highlight;
         @apply has-[:invalid]:border-danger has-[:invalid]:ring-0;
         @apply has-[:disabled]:text-rsui-light has-[:disabled]:bg-rsui-grey-200 has-[:disbaled]:ring-0;
     }

package/src/components/FormField/FormFieldTextSuffix.vue

@@ -23,8 +23,8 @@ import FormFieldText from './FormFieldText.vue'
 <style lang="scss" scoped>
 .rsui-form-field-suffix {
     :deep(.rsui-form-field-text__suffix) {
-        @apply border-l rounded-r-md;
-        @apply bg-rsui-grey-200 border-rsui-light;
+        @apply border rounded-r-md;
+        @apply bg-rsui-grey-200 border-l-rsui-light border-r-rsui-grey-200;
     }
 }
 </style>

package/src/components/Image/Image.vue

@@ -122,18 +122,18 @@ const imageClass = computed(() => [
 </template>
 <style lang="scss" scoped>
 .rsui-image {
-    @apply w-full h-full flex items-center justify-center bg-gray-100 overflow-hidden;
+    @apply w-full h-full flex items-center justify-center bg-rsui-grey-100 overflow-hidden;
     &--rounded {
         @apply rounded-lg;
     }
     &__empty {
-        @apply flex items-center justify-center text-gray-300;
+        @apply flex items-center justify-center text-rsui-light;
     }
     &__empty-icon {
         @apply w-1/4;
     }
     &__message {
-        @apply text-gray-400 text-sm;
+        @apply text-rsui-light text-sm;
     }
     picture {
         @apply w-full h-full;

package/src/components/List/ListItem.vue

@@ -150,9 +150,9 @@ function clickItem(event) {
     }
     &__bg {
         @apply absolute inset-0 bg-white transition;
-        @apply hover:bg-gray-100 peer-hover:bg-gray-100;
+        @apply hover:bg-rsui-grey-200 peer-hover:bg-rsui-grey-200;
         &--clickable {
-            @apply active:bg-gray-200;
+            @apply active:bg-rsui-grey-200;
         }
     }
     &__body {
@@ -162,10 +162,10 @@ function clickItem(event) {
         @apply absolute top-0 ml-1 -left-10 lg:-left-14;
         @apply aspect-square overflow-hidden size-9 lg:size-12;
         &-placeholder {
-            @apply size-full rounded-full overflow-hidden bg-neutral-200;
+            @apply size-full rounded-full overflow-hidden bg-rsui-grey-100;
             @apply flex items-center justify-center;
             svg {
-                @apply size-5 lg:size-6 fill-neutral-400;
+                @apply size-5 lg:size-6 fill-rsui-grey-300;
             }
         }
     }

package/src/components/MessageBox/MessageBox.vue

@@ -42,17 +42,17 @@ function close() {
 </template>
 <style lang="scss" scoped>
 .rsui-message-box {
-    @apply border border-gray-100 rounded-lg bg-white overflow-hidden shadow-full-light transition duration-200 p-4;
+    @apply border border-rsui-grey-100 rounded-lg bg-white overflow-hidden shadow-full-light transition duration-200 p-4;
     &__head {
         @apply flex justify-between items-center;
     }
     &__close {
-        @apply w-10 h-10;
+        @apply size-10;
         &-icon {
-            @apply w-10 h-10 cursor-pointer rounded-lg flex items-center justify-center;
-            @apply hover:bg-gray-100 transition duration-200;
+            @apply size-10 cursor-pointer rounded-lg flex items-center justify-center;
+            @apply hover:bg-rsui-grey-200 transition duration-200;
             svg {
-                @apply w-6 h-6 text-gray-500;
+                @apply size-6 text-rsui-light;
             }
         }
     }

package/src/components/MetaInfo/MetaInfo.vue

@@ -40,7 +40,7 @@ const emit = defineEmits(['click'])
         @apply font-semibold text-sm text-rsui-default leading-4;
     }
     &__help {
-        @apply text-gray-400 size-4 cursor-pointer;
+        @apply text-rsui-light size-4 cursor-pointer;
         svg {
             @apply size-full;
         }

package/src/components/Modal/Modal.vue

@@ -184,7 +184,7 @@ onUnmounted(() => {
     &__content {
         @apply absolute max-h-full inset-x-0 overflow-auto overscroll-contain transform transition-all;
         @apply border rounded-lg shadow-full md:w-full md:mx-auto mx-4;
-        @apply bg-gray-100 border-gray-200;
+        @apply bg-white border-rsui-grey-200;
         &--sm {
             @apply sm:max-w-sm xs:mx-4 sm:mx-auto;
         }
@@ -207,14 +207,14 @@ onUnmounted(() => {
 
     &__header {
         @apply sticky top-0 z-1;
-        @apply p-4 bg-gray-100 shrink-0 text-lg font-semibold;
+        @apply p-4 bg-rsui-grey-200 shrink-0 text-lg font-semibold;
     }
     &__body{
         @apply p-4 bg-white;
     }
     &__footer {
         @apply sticky bottom-0 z-1;
-        @apply p-4 bg-gray-100 shrink-0;
+        @apply p-4 bg-rsui-grey-200 shrink-0;
         @apply flex justify-end items-center space-x-2;
         &--start {
             @apply justify-start;

package/src/components/Pagination/Pagination.vue

@@ -259,7 +259,7 @@ function goToPage(page) {
 <style lang="scss" scoped>
 .rsui-pagination {
     @apply flex flex-nowrap items-center;
-    @apply w-fit border border-gray-200 rounded-full p-1;
+    @apply w-fit border border-rsui-grey-200 rounded-full p-1;
     @apply divide-x;
     &__previous {
         @apply size-full flex items-center pr-1;

package/src/components/Pagination/PaginationItem.vue

@@ -46,15 +46,15 @@ function clickItem() {
 .rsui-pagination-item {
     @apply inline-flex items-center justify-center overflow-hidden select-none;
     @apply min-w-9 w-fit h-7 p-1 rounded-md cursor-pointer transition;
-    @apply bg-white hover:bg-gray-100 text-rsui-medium text-sm;
+    @apply bg-white hover:bg-rsui-grey-200 text-rsui-medium text-sm;
     &--active {
-        @apply bg-gray-200 hover:bg-gray-200 text-rsui-default cursor-default;
+        @apply bg-rsui-grey-200 hover:bg-rsui-grey-200 text-rsui-default cursor-default;
     }
     &--freeze {
         @apply bg-white hover:bg-white cursor-default;
     }
     &--disabled {
-        @apply bg-white hover:bg-white text-gray-200 cursor-default;
+        @apply bg-white hover:bg-white text-rsui-grey-200 cursor-default;
     }
 }
 </style>

package/src/components/Progress/ProgressCircle.vue

@@ -98,7 +98,7 @@ watchPostEffect(setProgressCircleDash)
         }
     }
     &__background-circle {
-        @apply stroke-gray-300 stroke-4 fill-none transition-all;
+        @apply stroke-rsui-light stroke-4 fill-none transition-all;
     }
     &__progress-circle {
         @apply stroke-primary stroke-4 fill-none transition-all duration-0;