@redseed/redseed-ui-vue3 6.3.0 → 6.3.2

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.0",
+  "version": "6.3.2",
   "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/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/MessageBox/MessageBox.vue

@@ -7,6 +7,11 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    variant: {
+        type: String,
+        default: 'default',
+        validator: (value) => ['default', 'info', 'success', 'warning', 'error'].includes(value)
+    }
 })
 
 const emit = defineEmits(['close'])
@@ -20,7 +25,10 @@ function close() {
 </script>
 <template>
 <div v-if="!isClosed"
-    class="rsui-message-box"
+    :class="[
+        'rsui-message-box',
+        `rsui-message-box--${variant}`
+    ]"
 >
     <div class="rsui-message-box__head">
         <div class="rsui-message-box__title">
@@ -41,7 +49,28 @@ function close() {
 </template>
 <style lang="scss" scoped>
 .rsui-message-box {
-    @apply border border-rsui-grey-100 rounded-lg bg-white overflow-hidden shadow-full-light transition duration-200 p-4;
+    @apply border rounded-lg overflow-hidden p-4;
+
+    &--default {
+        @apply bg-background-primary border-border-primary text-text-primary;
+    }
+
+    &--info {
+        @apply bg-background-info border-border-info text-text-primary;
+    }
+
+    &--success {
+        @apply bg-background-success border-border-success text-text-primary;
+    }
+
+    &--warning {
+        @apply bg-background-warning border-border-warning text-text-primary;
+    }
+
+    &--error {
+        @apply bg-background-error border-border-error text-text-primary;
+    }
+
     &__head {
         @apply flex justify-between items-center;
     }

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>