@dolanske/vui 1.0.4 → 1.1.1

package/src/shared/types.ts

@@ -1,29 +1,29 @@
-import type { ComponentPublicInstance } from 'vue'
-
-export enum Size {
-  s = 's',
-  m = 'm',
-  l = 'l',
-}
-
-export type Sizes = 's' | 'm' | 'l'
-
-export type DeepRequired<T> = { [K in keyof T]: DeepRequired<T[K]> } & Required<T>
-
-export type VueClass = string | Record<string, | boolean> | Array<string | Record<string, string | boolean>>
-
-// FLoating UI imported types were ruining the build so here we go
-export type PopoutMaybeElement<T> = T | ComponentPublicInstance | null | undefined
-export type Placement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'
-
-export type Space = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'
-export enum SpaceSize {
-  xxs = 'xxs',
-  xs = 'xs',
-  s = 's',
-  m = 'm',
-  l = 'l',
-  xl = 'xl',
-  xxl = 'xxl',
-  xxxl = 'xxxl',
-}
+import type { ComponentPublicInstance } from 'vue'
+
+export enum Size {
+  s = 's',
+  m = 'm',
+  l = 'l',
+}
+
+export type Sizes = 's' | 'm' | 'l'
+
+export type DeepRequired<T> = { [K in keyof T]: DeepRequired<T[K]> } & Required<T>
+
+export type VueClass = string | Record<string, | boolean> | Array<string | Record<string, string | boolean>>
+
+// FLoating UI imported types were ruining the build so here we go
+export type PopoutMaybeElement<T> = T | ComponentPublicInstance | null | undefined
+export type Placement = 'top' | 'right' | 'bottom' | 'left' | 'top-start' | 'top-end' | 'right-start' | 'right-end' | 'bottom-start' | 'bottom-end' | 'left-start' | 'left-end'
+
+export type Space = 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl' | 'xxxl'
+export enum SpaceSize {
+  xxs = 'xxs',
+  xs = 'xs',
+  s = 's',
+  m = 'm',
+  l = 'l',
+  xl = 'xl',
+  xxl = 'xxl',
+  xxxl = 'xxxl',
+}

package/src/style/animation.scss

@@ -1,22 +1,22 @@
-.fade-enter-active,
-.fade-leave-active {
-  transition: var(--transition);
-  will-change: opacity;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-
-.fade-up-enter-active,
-.fade-up-leave-active {
-  transition: var(--transition);
-  transition-property: transform, opacity;
-}
-
-.fade-up-enter-from,
-.fade-up-leave-to {
-  opacity: 0;
-  transform: translateY(8px);
-}
+.fade-enter-active,
+.fade-leave-active {
+  transition: var(--transition);
+  will-change: opacity;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-up-enter-active,
+.fade-up-leave-active {
+  transition: var(--transition);
+  transition-property: transform, opacity;
+}
+
+.fade-up-enter-from,
+.fade-up-leave-to {
+  opacity: 0;
+  transform: translateY(8px);
+}

package/src/style/core.scss

@@ -1,125 +1,119 @@
-@use 'sass:meta';
-// Core of the UI library, it should only contain styles which are relevant to
-// the library and each component should import it
-
-// To overwrite any of these styles, simply create a style file and import it
-// after this one
-@use './reset.scss';
-@use './theme.scss';
-
-// TODO: Split this into based on media query prefers-dark-mode
-:root {
-  color-scheme: dark;
-
-  --container-xs: 360px;
-  --container-s: 498px;
-  --container-m: 856px;
-  --container-l: 1140px;
-  --container-xl: 1540px;
-  --container-xxl: 1920px;
-
-  --border-radius-xs: 3px;
-  --border-radius-s: 5px;
-  --border-radius-m: 8px;
-  --border-radius-l: 12px;
-
-  --font-size-xxs: 1rem;
-  --font-size-xs: 1.15rem;
-  --font-size-s: 1.3rem;
-  --font-size-m: 1.45rem;
-  --font-size-m: 1.5rem;
-  --font-size-l: 1.8rem;
-  --font-size-xl: 2rem;
-  --font-size-xxl: 2.6rem;
-  --font-size-xxxl: 3.4rem;
-  --font-size-xxxxl: 4.8rem;
-
-  --space-xxs: 4px;
-  --space-xs: 8px;
-  --space-s: 12px;
-  --space-m: 18px;
-  --space-l: 24px;
-  --space-xl: 34px;
-  --space-xxl: 48px;
-  --space-xxxl: 64px;
-
-  --transition-fast: 0.1s all ease-in-out;
-  --transition: 0.2s all cubic-bezier(0.65, 0, 0.35, 1);
-  --transition-slow: 0.35s all cubic-bezier(0.65, 0, 0.35, 1);
-
-  --global-font: Inter, sans-serif;
-  --global-font-mono: 'Geist Mono', 'Courier New', Courier, monospace;
-
-  --font-weight-thin: 200;
-  --font-weight-light: 300;
-  --font-weight: 400;
-  --font-weight-medium: 500;
-  --font-weight-semibold: 600;
-  --font-weight-bold: 700;
-  --font-weight-extrabold: 700;
-  --font-weight-black: 900;
-
-  --interactive-el-height: 34px;
-}
-
-@media (prefers-color-scheme: dark) {
-}
-
-// Disable motion for users who have requested it
-@media (prefers-reduced-motion: reduce) {
-  :root {
-    --transition-fast: 0s all linear;
-    --transition: 0s all linear;
-    --transition-slow: 0s all linear;
-  }
-}
-
-:root {
-  font-family: var(--global-font);
-  font-size: 63.5%;
-  // TODO remove - should remove?
-  position: relative;
-  background-color: var(--color-bg);
-
-  overflow-x: hidden;
-  width: 100%;
-  font-weight: var(--font-weight);
-
-  font-feature-settings: normal;
-  font-variation-settings: normal;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  // TODO end remove
-
-  * {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    outline: none;
-
-    &:focus-visible {
-      outline: 2px solid var(--color-text);
-    }
-  }
-}
-
-body {
-  color: var(--color-text);
-  min-height: 100dvh;
-}
-
-// Set base icon color
-.iconify {
-  color: var(--color-text-light);
-}
-
-@include meta.load-css('typography.scss');
-@include meta.load-css('layout.scss');
-@include meta.load-css('animation.scss');
-@include meta.load-css('tooltip.scss');
-@include meta.load-css('utils.scss');
-@include meta.load-css('text.scss');
-@include meta.load-css('media-query.scss');
+@use 'sass:meta';
+// Core of the UI library, it should only contain styles which are relevant to
+// the library and each component should import it
+
+// To overwrite any of these styles, simply create a style file and import it
+// after this one
+@use './reset.scss';
+@use './theme.scss';
+
+:root {
+  color-scheme: dark;
+
+  --container-xs: 360px;
+  --container-s: 498px;
+  --container-m: 856px;
+  --container-l: 1140px;
+  --container-xl: 1540px;
+  --container-xxl: 1920px;
+
+  --border-radius-xs: 3px;
+  --border-radius-s: 5px;
+  --border-radius-m: 8px;
+  --border-radius-l: 12px;
+
+  --font-size-xxs: 1rem;
+  --font-size-xs: 1.15rem;
+  --font-size-s: 1.3rem;
+  --font-size-m: 1.45rem;
+  --font-size-m: 1.5rem;
+  --font-size-l: 1.8rem;
+  --font-size-xl: 2rem;
+  --font-size-xxl: 2.6rem;
+  --font-size-xxxl: 3.4rem;
+  --font-size-xxxxl: 4.8rem;
+
+  --space-xxs: 4px;
+  --space-xs: 8px;
+  --space-s: 12px;
+  --space-m: 18px;
+  --space-l: 24px;
+  --space-xl: 34px;
+  --space-xxl: 48px;
+  --space-xxxl: 64px;
+
+  --transition-fast: 0.075s all ease-in-out;
+  --transition: 0.15s all cubic-bezier(0.65, 0, 0.35, 1);
+  --transition-slow: 0.3s all cubic-bezier(0.65, 0, 0.35, 1);
+
+  --global-font: Inter, sans-serif;
+  --global-font-mono: 'Geist Mono', 'Courier New', Courier, monospace;
+
+  --font-weight-thin: 200;
+  --font-weight-light: 300;
+  --font-weight: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 700;
+  --font-weight-black: 900;
+
+  --interactive-el-height: 34px;
+}
+
+// Disable motion for users who have requested it
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --transition-fast: 0s all linear;
+    --transition: 0s all linear;
+    --transition-slow: 0s all linear;
+  }
+}
+
+:root {
+  font-family: var(--global-font);
+  font-size: 63.5%;
+  position: relative;
+  background-color: var(--color-bg);
+
+  overflow-x: hidden;
+  width: 100%;
+  font-weight: var(--font-weight);
+
+  font-feature-settings: normal;
+  font-variation-settings: normal;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    outline: none;
+
+    &:focus-visible {
+      outline: 2px solid var(--color-text);
+    }
+  }
+}
+
+body {
+  color: var(--color-text);
+  min-height: 100dvh;
+}
+
+// Set base icon color
+.iconify {
+  color: var(--color-text-light);
+}
+
+@include meta.load-css('typography.scss');
+@include meta.load-css('layout.scss');
+@include meta.load-css('animation.scss');
+@include meta.load-css('tooltip.scss');
+@include meta.load-css('utils.scss');
+@include meta.load-css('text.scss');
+@include meta.load-css('media-query.scss');