@redseed/redseed-ui-vue3 6.3.1 → 6.3.3

package/docs/03-form-components.md

@@ -339,7 +339,7 @@ const planOptions = [
     <template #help>Accepted formats: PDF, DOC, DOCX (max 10MB)</template>
     <template #error v-if="uploadError">{{ uploadError }}</template>
     
-    <template #state-text-default>Drag files here or click to browse</template>
+    <template #state-text-primary>Drag files here or click to browse</template>
     <template #state-text-uploading>Uploading...</template>
     <template #state-text-processing>Processing...</template>
     <template #state-text-error>Upload failed</template>
@@ -451,7 +451,7 @@ const planOptions = [
         <template #help>Upload your resume (PDF, DOC, DOCX - max 5MB)</template>
         <template #error v-if="resumeError">{{ resumeError }}</template>
         
-        <template #state-text-default>Drag resume here or click to browse</template>
+        <template #state-text-primary>Drag resume here or click to browse</template>
         <template #state-text-uploading>Uploading resume...</template>
         <template #state-text-processing>Processing resume...</template>
         <template #state-text-error>Upload failed</template>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "6.3.1",
+  "version": "6.3.3",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Button/ButtonPrimary.vue

@@ -9,15 +9,15 @@ import ButtonSlot from './ButtonSlot.vue'
 <style lang="scss" scoped>
 .rsui-button-primary {
     // default colors
-    @apply text-primary-foreground bg-primary-background border-primary-background;
+    @apply text-text-on-color bg-button-primary border-button-primary;
     // default hover state
-    @apply hover:text-primary-foreground-hover hover:bg-primary-background-hover hover:border-primary-background-hover;
+    @apply hover:text-text-on-color hover:bg-button-primary-hover hover:border-button-primary-hover;
     // default focus state
-    @apply focus-visible:ring-primary-background focus-visible:border-primary-background;
+    @apply focus-visible:ring-button-primary focus-visible:border-button-primary;
     // default active state
-    @apply active:bg-primary-background active:border-primary-background;
+    @apply active:bg-button-primary-active active:border-button-primary-active;
     // 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;
+    @apply disabled:bg-button-disabled disabled:border-button-disabled disabled:text-text-primary;
+    @apply disabled:active:bg-button-disabled disabled:active:border-button-disabled;
 }
 </style>

package/src/components/Button/ButtonSecondary.vue

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

package/src/components/Button/ButtonTertiary.vue

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

package/src/components/ButtonGroup/ButtonGroupItem.vue

@@ -38,15 +38,20 @@ 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-rsui-grey-700 border-rsui-grey-400;
+    @apply text-button-secondary bg-background-primary border-button-secondary;
     // default hover state
-    @apply hover:bg-rsui-grey-200;
-    // default active/pressed state
-    @apply active:ring-0 active:bg-white;
+    @apply hover:text-button-secondary-hover hover:bg-background-primary hover:border-button-secondary-hover;
+    // default focus state
+    @apply focus-visible:ring-button-secondary focus-visible:border-button-secondary;
+    // default active state
+    @apply active:bg-background-primary active:border-button-secondary-active;
     // default disabled state
-    @apply disabled:text-rsui-grey-400 disabled:bg-white;
+    @apply disabled:bg-button-disabled disabled:border-button-disabled disabled:text-text-primary;
+    @apply disabled:active:bg-button-disabled disabled:active:border-button-disabled;
+    
+
     &--selected {
-        @apply bg-rsui-grey-200 active:bg-rsui-grey-200 cursor-default;
+        @apply bg-background-primary active:bg-background-primary cursor-default;
     }
     &__label {
         @apply gap-x-2 px-1 inline-flex items-center;

package/src/components/Card/Card.vue

@@ -77,7 +77,7 @@ function onClick() {
 .rsui-card {
     @apply relative flex flex-col;
     @apply transition duration-200;
-    @apply rounded-xl bg-white border border-rsui-grey-400;
+    @apply rounded-xl bg-background-primary border border-border-primary;
 
     &--hoverable {
         @apply hover:shadow-md;

package/src/components/Card/CardHeader.vue

@@ -146,7 +146,7 @@ function handleMoreActionsClick() {
     @apply border-b border-transparent;
 
     &--divider {
-        @apply border-rsui-grey-400;
+        @apply border-border-primary;
     }
 
     &__header {
@@ -158,7 +158,7 @@ function handleMoreActionsClick() {
     }
 
     &__avatar {
-        @apply size-14 rounded-full overflow-hidden flex items-center justify-center bg-rsui-grey-50;
+        @apply size-14 rounded-full overflow-hidden flex items-center justify-center bg-background-secondary;
         @apply mt-2.5 md:mt-0;
     }
 
@@ -172,7 +172,7 @@ function handleMoreActionsClick() {
     }
 
     &__title {
-        @apply text-lg leading-7 font-semibold text-rsui-grey-900;
+        @apply text-lg leading-7 font-semibold text-text-primary;
 
         &--single-line {
             @apply line-clamp-2 md:line-clamp-1;
@@ -180,7 +180,7 @@ function handleMoreActionsClick() {
     }
 
     &__subtitle {
-        @apply text-sm leading-5 text-rsui-grey-700;
+        @apply text-sm leading-5 text-text-secondary;
 
         &--single-line {
             @apply line-clamp-3 md:line-clamp-1;
@@ -200,7 +200,7 @@ function handleMoreActionsClick() {
     }
 
     &__more-actions-icon {
-        @apply size-5 text-rsui-grey-400;
+        @apply size-5 text-text-secondary;
     }
 }
 </style>

package/src/components/FormField/FormFieldUploaderWrapper.vue

@@ -138,7 +138,7 @@ function removeAction() {
             </div>
 
             <div class="rsui-form-field-uploader__state-text">
-                <slot name="state-text-default" v-if="stateDefault">
+                <slot name="state-text-primary" v-if="stateDefault">
                     Media
                 </slot>
                 <slot name="state-text-uploading" v-if="stateUploading">

package/src/components/Layouts/PageHeader.vue

@@ -83,13 +83,13 @@ const showMetaModal = ref(false)
         @apply pr-2 flex flex-row items-center space-x-6;
 
         h1 {
-            @apply text-3xl font-semibold text-rsui-grey-900;
+            @apply text-3xl font-semibold text-text-primary;
             @apply lg:mr-4;
         }
     }
 
     &__subtitle {
-        @apply text-base text-rsui-grey-700 leading-relaxed;
+        @apply text-base text-text-secondary leading-relaxed;
     }
 
     &__status-actions {

package/src/components/Layouts/SectionHeader.vue

@@ -128,11 +128,11 @@ function handleMoreActionsClick() {
     }
 
     &__title {
-        @apply text-lg leading-7 font-semibold line-clamp-2 md:line-clamp-1;
+        @apply text-lg leading-7 font-semibold line-clamp-2 md:line-clamp-1 text-text-primary;
     }
 
     &__subtitle {
-        @apply text-sm leading-5 line-clamp-3 md:line-clamp-1;
+        @apply text-sm leading-5 line-clamp-3 md:line-clamp-1 text-text-secondary;
     }
 
     &__toolbar {
@@ -148,7 +148,7 @@ function handleMoreActionsClick() {
     }
 
     &__more-actions-icon {
-        @apply size-5 text-rsui-grey-400;
+        @apply size-5 text-text-secondary;
     }
 }
 </style>

package/src/components/MessageBox/MessageBox.vue

@@ -52,23 +52,23 @@ function close() {
     @apply border rounded-lg overflow-hidden p-4;
 
     &--default {
-        @apply bg-message-box-background-default border-message-box-border-default text-message-box-text-default;
+        @apply bg-background-primary border-border-primary text-text-primary;
     }
 
     &--info {
-        @apply bg-message-box-background-info border-message-box-border-info text-message-box-text-info;
+        @apply bg-background-info border-border-info text-text-primary;
     }
 
     &--success {
-        @apply bg-message-box-background-success border-message-box-border-success text-message-box-text-success;
+        @apply bg-background-success border-border-success text-text-primary;
     }
 
     &--warning {
-        @apply bg-message-box-background-warning border-message-box-border-warning text-message-box-text-warning;
+        @apply bg-background-warning border-border-warning text-text-primary;
     }
 
     &--error {
-        @apply bg-message-box-background-error border-message-box-border-error text-message-box-text-error;
+        @apply bg-background-error border-border-error text-text-primary;
     }
 
     &__head {

package/src/components/MetaInfo/MetaInfo.vue

@@ -43,16 +43,16 @@ const emit = defineEmits(['click'])
         @apply size-4;
     }
     &__label {
-        @apply font-semibold text-sm text-rsui-grey-900 leading-4;
+        @apply font-semibold text-sm text-text-primary leading-4;
     }
     &__help {
-        @apply text-rsui-grey-400 size-4 cursor-pointer;
+        @apply text-text-secondary size-4 cursor-pointer;
         svg {
             @apply size-full;
         }
     }
     &__value {
-        @apply text-xs text-rsui-grey-700 leading-5;
+        @apply text-xs text-text-secondary leading-5;
     }
 }
 </style>

package/src/components/Section/Section.vue

@@ -3,7 +3,7 @@ const props = defineProps({
     variant: {
         type: String,
         default: 'default',
-        validator: (value) => ['default', 'muted', 'accent', 'success', 'warning', 'error'].includes(value)
+        validator: (value) => ['default', 'secondary', 'brand', 'success', 'warning', 'error'].includes(value)
     }
 })
 </script>
@@ -30,27 +30,27 @@ const props = defineProps({
     @apply border border-solid rounded-xl p-6;
 
     &--default {
-        @apply bg-section-background-default border-section-border-default text-section-text-default;
+        @apply bg-background-primary border-border-primary text-text-primary;
     }
     
-    &--muted {
-        @apply bg-section-background-muted border-section-border-muted text-section-text-muted;
+    &--secondary {
+        @apply bg-background-secondary border-border-secondary text-text-primary;
     }
     
-    &--accent {
-        @apply bg-section-background-accent border-section-border-accent text-section-text-accent;
+    &--brand {
+        @apply bg-background-brand border-border-brand text-text-primary;
     }
     
     &--success {
-        @apply bg-section-background-success border-section-border-success text-section-text-success;
+        @apply bg-background-success border-border-success text-text-primary;
     }
     
     &--warning {
-        @apply bg-section-background-warning border-section-border-warning text-section-text-warning;
+        @apply bg-background-warning border-border-warning text-text-primary;
     }
     
     &--error {
-        @apply bg-section-background-error border-section-border-error text-section-text-error;
+        @apply bg-background-error border-border-error text-text-primary;
     }
 }
 </style>