@dolanske/vui 1.0.4 → 1.1.0

package/src/components/Button/button.scss

@@ -1,279 +1,279 @@
-.vui-button {
-  --button-height: var(--interactive-el-height);
-  --button-padding: 8px;
-
-  &.disabled {
-    // color: var(--color-text-lighter) !important;
-    cursor: not-allowed !important;
-    filter: saturate(75%) opacity(50%);
-
-    svg path {
-      color: var(--color-text-light) !important;
-    }
-  }
-
-  &.expand {
-    width: 100%;
-  }
-
-  &.loading {
-    .vui-spinner {
-      opacity: 1;
-    }
-
-    .vui-button-slot {
-      opacity: 0;
-    }
-  }
-
-  &.icon {
-    width: var(--button-height);
-    padding: 0;
-  }
-
-  .vui-button-slot svg {
-    display: block;
-    color: var(--color-text);
-    width: 17px;
-    height: 17px;
-  }
-
-  &.square {
-    width: var(--button-height);
-    min-width: var(--button-height);
-    min-height: var(--button-height);
-    padding: 0;
-  }
-
-  &.dashed {
-    border-style: dashed !important;
-  }
-
-  svg path {
-    transition: var(--transition-fast);
-  }
-
-  height: var(--button-height);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: var(--border-radius-s);
-  background: transparent;
-  padding-inline: var(--button-padding);
-  font-size: var(--font-size-s);
-  position: relative;
-  transition: var(--transition-fast);
-  border: 1px solid transparent;
-  background-color: transparent;
-  color: var(--color-text);
-
-  // Default gray
-
-  .vui-button-slot {
-    display: flex;
-    place-items: center;
-    transition: var(--transition-fast);
-    opacity: 1;
-  }
-
-  .vui-button-slot-start,
-  .vui-button-slot-end {
-    display: flex;
-    place-items: center;
-  }
-
-  .vui-button-slot-start {
-    margin-right: 6px;
-  }
-
-  .vui-button-slot-end {
-    margin-left: 6px;
-  }
-
-  .vui-spinner {
-    transition: var(--transition-fast);
-    opacity: 0;
-    position: absolute;
-    pointer-events: none;
-  }
-
-  // Variants
-  &.vui-button-variant-danger {
-    &:not(.plain):not(.outline) {
-      color: var(--color-text);
-      background-color: var(--color-bg-red-raised);
-
-      svg,
-      path {
-        color: var(--color-text);
-      }
-    }
-
-    &.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-success {
-    &:not(.plain):not(.outline) {
-      color: var(--color-text);
-      background-color: var(--color-bg-green-raised);
-
-      svg,
-      path {
-        color: var(--color-text);
-      }
-    }
-
-    &.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-gray {
-    &:not(.plain):not(.outline) {
-      color: var(--color-text);
-      background-color: var(--color-button-gray);
-
-      svg,
-      path {
-        color: var(--color-text);
-      }
-    }
-
-    &.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-fill {
-    &:not(.plain):not(.outline) {
-      color: var(--color-text-invert);
-      background-color: var(--color-button-fill);
-
-      svg,
-      path {
-        color: var(--color-text-invert);
-      }
-    }
-
-    &.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(.outline) {
-      color: var(--color-text);
-      background-color: var(--color-bg-accent-raised);
-
-      svg,
-      path {
-        color: var(--color-text);
-      }
-    }
-
-    &.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);
-    }
-  }
-
-  &.vui-button-variant-link {
-    color: var(--color-text);
-    background: transparent;
-    text-underline-offset: 4px;
-    cursor: pointer;
-
-    &: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);
-        }
-      }
-    }
-  }
-}
+.vui-button {
+  --button-height: var(--interactive-el-height);
+  --button-padding: 8px;
+
+  &.disabled {
+    // color: var(--color-text-lighter) !important;
+    cursor: not-allowed !important;
+    filter: saturate(75%) opacity(50%);
+
+    svg path {
+      color: var(--color-text-light) !important;
+    }
+  }
+
+  &.expand {
+    width: 100%;
+  }
+
+  &.loading {
+    .vui-spinner {
+      opacity: 1;
+    }
+
+    .vui-button-slot {
+      opacity: 0;
+    }
+  }
+
+  &.icon {
+    width: var(--button-height);
+    padding: 0;
+  }
+
+  .vui-button-slot svg {
+    display: block;
+    color: var(--color-text);
+    width: 17px;
+    height: 17px;
+  }
+
+  &.square {
+    width: var(--button-height);
+    min-width: var(--button-height);
+    min-height: var(--button-height);
+    padding: 0;
+  }
+
+  &.dashed {
+    border-style: dashed !important;
+  }
+
+  svg path {
+    transition: var(--transition-fast);
+  }
+
+  height: var(--button-height);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--border-radius-s);
+  background: transparent;
+  padding-inline: var(--button-padding);
+  font-size: var(--font-size-s);
+  position: relative;
+  transition: var(--transition-fast);
+  border: 1px solid transparent;
+  background-color: transparent;
+  color: var(--color-text);
+
+  // Default gray
+
+  .vui-button-slot {
+    display: flex;
+    place-items: center;
+    transition: var(--transition-fast);
+    opacity: 1;
+  }
+
+  .vui-button-slot-start,
+  .vui-button-slot-end {
+    display: flex;
+    place-items: center;
+  }
+
+  .vui-button-slot-start {
+    margin-right: 6px;
+  }
+
+  .vui-button-slot-end {
+    margin-left: 6px;
+  }
+
+  .vui-spinner {
+    transition: var(--transition-fast);
+    opacity: 0;
+    position: absolute;
+    pointer-events: none;
+  }
+
+  // Variants
+  &.vui-button-variant-danger {
+    &:not(.plain):not(.outline) {
+      color: var(--color-text);
+      background-color: var(--color-bg-red-raised);
+
+      svg,
+      path {
+        color: var(--color-text);
+      }
+    }
+
+    &.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-success {
+    &:not(.plain):not(.outline) {
+      color: var(--color-text);
+      background-color: var(--color-bg-green-raised);
+
+      svg,
+      path {
+        color: var(--color-text);
+      }
+    }
+
+    &.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-gray {
+    &:not(.plain):not(.outline) {
+      color: var(--color-text);
+      background-color: var(--color-button-gray);
+
+      svg,
+      path {
+        color: var(--color-text);
+      }
+    }
+
+    &.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-fill {
+    &:not(.plain):not(.outline) {
+      color: var(--color-text-invert);
+      background-color: var(--color-button-fill);
+
+      svg,
+      path {
+        color: var(--color-text-invert);
+      }
+    }
+
+    &.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(.outline) {
+      color: var(--color-text);
+      background-color: var(--color-bg-accent-raised);
+
+      svg,
+      path {
+        color: var(--color-text);
+      }
+    }
+
+    &.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);
+    }
+  }
+
+  &.vui-button-variant-link {
+    color: var(--color-text);
+    background: transparent;
+    text-underline-offset: 4px;
+    cursor: pointer;
+
+    &: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,28 +1,28 @@
-<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>
-
-<template>
-  <Flex
-    :row="!vertical"
-    :column="vertical"
-    class="vui-button-group"
-    :class="{ vertical }"
-    :gap
-    inline
-  >
-    <slot />
-  </Flex>
-</template>
+<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>
+
+<template>
+  <Flex
+    :row="!vertical"
+    :column="vertical"
+    class="vui-button-group"
+    :class="{ vertical }"
+    :gap
+    inline
+  >
+    <slot />
+  </Flex>
+</template>