@dolanske/vui 0.5.0 → 1.0.1

package/src/components/Badge/badge.scss

@@ -5,8 +5,14 @@
   height: 26px;
   padding-inline: var(--space-s);
   border-radius: 999px;
-  font-weight: 300;
   font-size: var(--font-size-s);
+  color: var(--color-text);
+  border: 1px solid transparent;
+
+  svg,
+  path {
+    color: var(--color-text);
+  }
 
   &.filled {
     font-weight: 500;
@@ -24,66 +30,177 @@
     }
 
     color: var(--color-text);
-    border: 1px solid var(--color-border);
+    // border: 1px solid var(--color-border);
   }
 
   &.vui-badge-variant-info {
+    color: var(--color-text-blue);
+
+    svg,
+    path {
+      color: var(--color-text-blue);
+    }
+
     &:not(.outline) {
-      background-color: var(--color-bg-blue-lowered);
+      background-color: hsla(from var(--color-bg-blue-raised) h s l / 0.2);
 
       &.filled {
         background-color: var(--color-text-blue);
         color: var(--color-text-invert);
-        border-color: transparent;
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
       }
     }
 
-    color: var(--color-text);
-    border: 1px solid var(--color-border-blue);
+    &.outline {
+      border-color: var(--color-text-blue);
+    }
   }
 
   &.vui-badge-variant-success {
+    color: var(--color-text-green);
+
+    svg,
+    path {
+      color: var(--color-text-green);
+    }
+
     &:not(.outline) {
-      background-color: var(--color-bg-green-lowered);
+      background-color: hsla(from var(--color-bg-green-raised) h s l / 0.15);
 
       &.filled {
         background-color: var(--color-text-green);
         color: var(--color-text-invert);
-        border-color: transparent;
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
       }
     }
 
-    color: var(--color-text);
-    border: 1px solid var(--color-border-green);
+    &.outline {
+      border-color: var(--color-text-green);
+    }
   }
 
   &.vui-badge-variant-warning {
+    color: var(--color-text-yellow);
+
+    svg,
+    path {
+      color: var(--color-text-yellow);
+    }
+
     &:not(.outline) {
-      background-color: var(--color-bg-yellow-lowered);
+      background-color: hsla(from var(--color-bg-yellow-raised) h s l / 0.15);
 
       &.filled {
         background-color: var(--color-text-yellow);
         color: var(--color-text-invert);
-        border-color: transparent;
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
       }
     }
 
-    color: var(--color-text);
-    border: 1px solid var(--color-border-yellow);
+    &.outline {
+      border-color: var(--color-text-yellow);
+    }
   }
 
   &.vui-badge-variant-danger {
+    color: var(--color-text-red);
+
+    svg,
+    path {
+      color: var(--color-text-red);
+    }
+
     &:not(.outline) {
-      background-color: var(--color-bg-red-lowered);
+      background-color: hsla(from var(--color-bg-red-raised) h s l / 0.15);
 
       &.filled {
         background-color: var(--color-text-red);
         color: var(--color-text-invert);
-        border-color: transparent;
+
+        svg,
+        path {
+          color: var(--color-text-yellow);
+        }
+      }
+    }
+
+    &.outline {
+      border-color: var(--color-text-red);
+    }
+
+    color: var(--color-text-red);
+  }
+
+  &.vui-badge-variant-accent {
+    color: var(--color-accent);
+
+    svg,
+    path {
+      color: var(--color-accent);
+    }
+
+    &:not(.outline) {
+      background-color: hsla(from var(--color-bg-accent-raised) h s l / 0.15);
+
+      &.filled {
+        background-color: var(--color-accent);
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
       }
     }
 
+    &.outline {
+      border-color: var(--color-accent);
+    }
+  }
+}
+
+:root.light {
+  .vui-badge.vui-badge-variant-accent:not(.outline).filled,
+  .vui-badge.vui-badge-variant-warning:not(.outline).filled {
     color: var(--color-text);
-    border: 1px solid var(--color-border-red);
+
+    svg,
+    path {
+      color: var(--color-text);
+    }
+  }
+
+  .vui-badge.vui-badge-variant-success:not(.filled, .outline) {
+    background-color: hsla(from var(--color-text-green) h s l / 0.15);
+  }
+
+  .vui-badge.vui-badge-variant-warning:not(.outline).filled {
+    background-color: var(--color-bg-yellow-raised);
+  }
+
+  .vui-badge.vui-badge-variant-success:not(.outline).filled {
+    color: var(--color-text-invert);
+    background-color: var(--color-text-green);
+
+    svg,
+    path {
+      color: var(--color-text-invert);
+    }
+  }
+
+  .vui-badge:not(.filled) {
+    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
   }
 }

package/src/components/Breadcrumbs/BreadcrumbItem.vue

@@ -3,7 +3,7 @@ import '../Button/button.scss'
 
 export interface BreadcrumbItemProps {
   label?: string
-  path?: string
+  href?: string
 }
 
 const props = defineProps<BreadcrumbItemProps>()
@@ -11,7 +11,7 @@ const props = defineProps<BreadcrumbItemProps>()
 
 <template>
   <li>
-    <a v-if="props.path" :href="props.path" class="vui-breadcrumb-link">
+    <a v-if="props.href" :href="props.href" class="vui-breadcrumb-link">
       <slot>
         {{ props.label }}
       </slot>

package/src/components/Breadcrumbs/Breadcrumbs.vue

@@ -19,10 +19,9 @@ const slots = defineSlots<{
 
 <template>
   <ul class="vui-breadcrumbs">
-    <template v-for="(vnode, index) of slots.default()" :key="vnode.props.label">
+    <template v-for="(vnode, index) of slots.default()" :key="vnode.props?.label || index">
       <component
         :is="vnode"
-        v-bind="vnode.props"
       />
       <template v-if="index !== slots.default().length - 1">
         <Icon v-if="separator.length > 1 && separator.includes(':')" class="vui-breadcrumb-custom-separator" :icon="separator" />

package/src/components/Breadcrumbs/breadcrumbs.scss

@@ -5,10 +5,11 @@
 
   .vui-breadcrumb-custom-separator {
     color: var(--color-text-lighter);
+    font-size: var(--font-size-m);
   }
 
   li {
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-m);
     color: var(--color-text-lighter);
 
     .vui-breadcrumb-text-simple {

package/src/components/Button/Button.vue

@@ -6,7 +6,7 @@ import { Size } from '../../shared/types'
 import Spinner from '../Spinner/Spinner.vue'
 import './button.scss'
 
-export type Variants = 'default' | 'danger' | 'success' | 'link' | 'blue' | 'accent'
+export type Variants = 'fill' | 'danger' | 'success' | 'link' | 'accent' | 'gray'
 
 interface Props {
   // Provide URL to turn button into anchor
@@ -15,24 +15,18 @@ interface Props {
 
   // State props
   loading?: boolean
+
+  size?: Sizes
   expand?: boolean
   square?: boolean
-  dashed?: boolean
+  icon?: string
+
+  variant?: Variants
+  outline?: boolean
+  // dashed?: boolean
+  // outlineDashed?: boolean
   disabled?: boolean
-  size?: Sizes
-  /**
-   * Sets the hover styling property
-   */
-  active?: boolean
-  /**
-   * No styling applied to the button unless hovered
-   */
   plain?: boolean
-  variant?: Variants
-  /**
-   * The children will be set to an icon and the icon will become a square
-   */
-  icon?: string
 }
 
 const {
@@ -40,14 +34,14 @@ const {
   disabled,
   expand,
   size = 'm',
-  variant = 'default',
+  variant = 'gray',
   icon,
-  dashed,
+  // dashed,
 } = defineProps<Props>()
 
 const height = computed(() => {
   switch (size) {
-    case Size.s: return '24px'
+    case Size.s: return '28px'
     case Size.l: return '40px'
     case Size.m:
     default: return 'var(--interactive-el-height)'
@@ -56,7 +50,7 @@ const height = computed(() => {
 
 const padding = computed(() => {
   switch (size) {
-    case Size.s: return '5px'
+    case Size.s: return '4px'
     case Size.l: return '16px'
     case Size.m:
     default: return '8px'
@@ -67,13 +61,14 @@ const padding = computed(() => {
 <template>
   <button
     class="vui-button"
-    :class="[{ loading, expand, disabled, plain, active, icon, square, dashed }, `vui-button-variant-${variant}`]"
+    :class="[{ loading, expand, disabled, plain, icon, square, outline }, `vui-button-variant-${variant}`]"
     :disabled
     role="button"
     :style="{
       '--button-height': height,
       '--button-padding': padding,
     }"
+    :name="icon && !$slots.default ? icon.split(':')[1] : undefined"
   >
     <Spinner size="s" />
     <div class="vui-button-slot">

package/src/components/Button/button.scss

@@ -3,13 +3,12 @@
   --button-padding: 8px;
 
   &.disabled {
-    pointer-events: none;
-    color: var(--color-text-lighter) !important;
+    // color: var(--color-text-lighter) !important;
     cursor: not-allowed !important;
-    filter: saturate(50%) opacity(0.65);
+    filter: saturate(75%) opacity(50%);
 
     svg path {
-      color: var(--color-text-lighter) !important;
+      color: var(--color-text-light) !important;
     }
   }
 
@@ -30,13 +29,13 @@
   &.icon {
     width: var(--button-height);
     padding: 0;
+  }
 
-    .vui-button-slot {
-      svg {
-        width: 18px;
-        height: 18px;
-      }
-    }
+  .vui-button-slot svg {
+    display: block;
+    color: var(--color-text);
+    width: 17px;
+    height: 17px;
   }
 
   &.square {
@@ -47,7 +46,11 @@
   }
 
   &.dashed {
-    border-style: dashed;
+    border-style: dashed !important;
+  }
+
+  svg path {
+    transition: var(--transition-fast);
   }
 
   height: var(--button-height);
@@ -59,7 +62,7 @@
   padding-inline: var(--button-padding);
   font-size: var(--font-size-s);
   position: relative;
-  transition: var(--transition);
+  transition: var(--transition-fast);
   border: 1px solid transparent;
   background-color: transparent;
   color: var(--color-text);
@@ -69,7 +72,7 @@
   .vui-button-slot {
     display: flex;
     place-items: center;
-    transition: var(--transition);
+    transition: var(--transition-fast);
     opacity: 1;
   }
 
@@ -88,79 +91,133 @@
   }
 
   .vui-spinner {
-    transition: var(--transition);
+    transition: var(--transition-fast);
     opacity: 0;
     position: absolute;
     pointer-events: none;
   }
 
   // Variants
-  &.vui-button-variant-default {
-    &:not(.plain) {
+  &.vui-button-variant-danger {
+    &:not(.plain):not(.outline) {
       color: var(--color-text);
-      background-color: var(--color-button-gray);
-      border: 1px solid var(--color-border);
+      background-color: var(--color-bg-red-raised);
+
+      svg,
+      path {
+        color: var(--color-text);
+      }
     }
 
-    &.active,
-    &:hover {
-      background-color: var(--color-button-gray-hover);
+    &.outline {
+      border-color: var(--color-bg-red-lowered);
+    }
+
+    &:not(.plain):not(.disabled):not(.plain):hover,
+    &:hover:not(.disabled) {
+      background-color: var(--color-bg-red-lowered);
     }
   }
 
-  &.vui-button-variant-danger {
-    &:not(.plain) {
+  &.vui-button-variant-success {
+    &:not(.plain):not(.outline) {
       color: var(--color-text);
-      background-color: var(--color-bg-red-lowered);
-      border: 1px solid var(--color-border-red);
+      background-color: var(--color-bg-green-raised);
+
+      svg,
+      path {
+        color: var(--color-text);
+      }
     }
 
-    &.active,
-    &:hover {
-      border: 1px solid var(--color-bg-red-raised);
-      background-color: var(--color-bg-red-raised);
+    &.outline {
+      border-color: var(--color-bg-green-lowered);
+    }
+
+    &:not(.plain):not(.disabled):not(.plain):hover,
+    &:hover:not(.disabled) {
+      background-color: var(--color-bg-green-lowered);
     }
   }
 
-  &.vui-button-variant-success {
-    &:not(.plain) {
+  &.vui-button-variant-gray {
+    &:not(.plain):not(.outline) {
       color: var(--color-text);
-      background-color: var(--color-bg-green-lowered);
-      border: 1px solid var(--color-border-green);
+      background-color: var(--color-button-gray);
+
+      svg,
+      path {
+        color: var(--color-text);
+      }
     }
 
-    &.active,
-    &:hover {
-      border: 1px solid var(--color-bg-green-raised);
-      background-color: var(--color-bg-green-raised);
+    &.outline {
+      border-color: var(--color-button-gray-hover);
+    }
+
+    &:not(.plain):not(.disabled):not(.plain):hover,
+    &:hover:not(.disabled) {
+      background-color: var(--color-button-gray-hover);
     }
   }
 
-  &.vui-button-variant-blue {
-    &:not(.plain) {
-      color: var(--color-text);
-      background-color: var(--color-bg-blue-lowered);
-      border: 1px solid var(--color-border-blue);
+  &.vui-button-variant-fill {
+    &:not(.plain):not(.outline) {
+      color: var(--color-text-invert);
+      background-color: var(--color-button-fill);
+
+      svg,
+      path {
+        color: var(--color-text-invert);
+      }
     }
 
-    &.active,
-    &:hover {
-      border: 1px solid var(--color-bg-blue-raised);
-      background-color: var(--color-bg-blue-raised);
+    &.outline {
+      border-color: var(--color-button-fill-hover);
+
+      &:hover {
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
+      }
+    }
+
+    &:not(.plain):not(.disabled):not(.plain):hover,
+    &:hover:not(.disabled) {
+      background-color: var(--color-button-fill-hover);
+
+      &.plain {
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
+      }
     }
   }
 
   &.vui-button-variant-accent {
-    &:not(.plain) {
+    &:not(.plain):not(.outline) {
       color: var(--color-text);
-      background-color: var(--color-bg-accent-lowered);
-      border: 1px solid var(--color-border-accent);
+      background-color: var(--color-bg-accent-raised);
+
+      svg,
+      path {
+        color: var(--color-text);
+      }
     }
 
-    &.active,
-    &:hover {
-      border: 1px solid var(--color-bg-accent-raised);
-      background-color: var(--color-bg-accent-raised);
+    &.outline {
+      border-color: var(--color-bg-accent-lowered);
+    }
+
+    &:not(.plain):not(.disabled):not(.plain):hover,
+    &:hover:not(.disabled) {
+      background-color: var(--color-bg-accent-lowered);
     }
   }
 
@@ -170,9 +227,53 @@
     text-underline-offset: 4px;
     cursor: pointer;
 
-    &.active,
-    &:hover {
+    &:not(:disabled).active,
+    &:not(:disabled):hover {
       text-decoration: underline;
     }
   }
 }
+
+:root.light {
+  .vui-button {
+    &.vui-button-variant-danger {
+      &:not(.plain):not(.outline) {
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
+      }
+
+      &.outline:hover {
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
+      }
+    }
+
+    &.vui-button-variant-success {
+      &:not(.plain):not(.outline) {
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
+      }
+
+      &.outline:hover {
+        color: var(--color-text-invert);
+
+        svg,
+        path {
+          color: var(--color-text-invert);
+        }
+      }
+    }
+  }
+}

package/src/components/ButtonGroup/ButtonGroup.vue

@@ -1,13 +1,16 @@
 <script setup lang='ts'>
+import type { Space } from '../../shared/types'
 import Flex from '../Flex/Flex.vue'
 import './button-group.scss'
 
 interface Props {
   vertical?: boolean
+  gap?: Space | number
 }
 
 const {
   vertical,
+  gap = 0,
 } = defineProps<Props>()
 </script>
 
@@ -17,7 +20,7 @@ const {
     :column="vertical"
     class="vui-button-group"
     :class="{ vertical }"
-    :gap="0"
+    :gap
     inline
   >
     <slot />

package/src/components/ButtonGroup/button-group.scss

@@ -21,7 +21,7 @@
     }
 
     &:not(:last-child) {
-      margin-right: -1px;
+      margin-right: 0px;
     }
   }
 
@@ -44,7 +44,7 @@
       }
 
       &:not(:last-child) {
-        margin-bottom: -1px;
+        margin-bottom: 0px;
       }
     }
   }