@redseed/redseed-ui-vue3 2.4.0 → 2.4.1

package/package.json

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

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;