@redseed/redseed-ui-vue3 2.3.1 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "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;