@dolanske/vui 1.2.1 → 1.4.0

package/src/style/fonts.scss

@@ -0,0 +1,73 @@
+// Regular
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 300;
+  src: url('/fonts/Inter_18pt-Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/Inter_18pt-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  src: url('/fonts/Inter_18pt-Medium.ttf') format('truetype');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/fonts/Inter_18pt-SemiBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 700;
+  src: url('/fonts/Inter_18pt-Bold.ttf') format('truetype');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 800;
+  src: url('/fonts/Inter_18pt-ExtraBold.ttf') format('truetype');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 900;
+  src: url('/fonts/Inter_18pt-Black.ttf') format('truetype');
+}
+
+// Monospace
+@font-face {
+  font-display: swap;
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 400;
+  src: url('/fonts/GeistMono-Regular.ttf') format('truetype');
+}
+
+@font-face {
+  font-display: swap;
+  font-family: 'Geist Mono';
+  font-style: normal;
+  font-weight: 600;
+  src: url('/fonts/GeistMono-SemiBold.ttf') format('truetype');
+}

package/src/style/layout.scss

@@ -19,12 +19,16 @@ $containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
   }
 }
 
-$widths: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100;
+$sizes: 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100;
 
-@each $width in $widths {
+@each $size in $sizes {
   $extra: '%';
-  .w-#{$width} {
-    width: #{$width + $extra} !important;
+  .w-#{$size} {
+    width: #{$size + $extra} !important;
+  }
+
+  .h-#{$size} {
+    height: #{$size + $extra} !important;
   }
 }
 
@@ -163,19 +167,6 @@ $sizes: 0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl';
   .p-#{$size} {
     padding: var(--space-#{$size});
   }
-
-  // Gap
-  // .g-#{$size} {
-  //   gap: var(--space-#{$size});
-  // }
-
-  // .g-y-#{$size} {
-  //   row-gap: var(--space-#{$size});
-  // }
-
-  // .g-x-#{$size} {
-  //   column-gap: var(--space-#{$size});
-  // }
 }
 
 // Z-index
@@ -186,25 +177,3 @@ $zindexes: 0, 10, 20, 30, 40, 50, auto;
     z-index: $zindex;
   }
 }
-
-// Grid
-
-// .grid {
-//   display: grid;
-// }
-
-// .inline-grid {
-//   display: inline-table;
-// }
-
-// $cols: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
-
-// @each $col in $cols {
-//   .col-#{$col} {
-//     grid-template-columns: repeat($col, 1fr);
-//   }
-
-//   .row {
-//     grid-template-rows: repeat($col, 1fr);
-//   }
-// }

package/src/style/theme.scss

@@ -41,7 +41,7 @@
   --light-color-bg-accent-lowered: hsla(from var(--light-color-accent) h s l / 0.6);
   --light-color-bg-accent-raised: hsla(from var(--light-color-accent) h s l / 0.75);
 
-  --light-box-shadow: 0 2px 12px rgba(8, 8, 8, 0.075);
+  --light-box-shadow: 0 2px 12px rgba(8, 8, 8, 0.085);
   --light-box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.2);
 }
 

package/src/style/tooltip.scss

@@ -32,7 +32,7 @@ Available tooltip positions:
     max-width: 512px;
     opacity: 0;
     cursor: default;
-    z-index: -1;
+    z-index: var(--z-behind);
     visibility: hidden;
     pointer-events: none;
     max-width: 256px;
@@ -43,7 +43,7 @@ Available tooltip positions:
     &:before {
       visibility: visible;
       opacity: 1;
-      z-index: 99999;
+      z-index: var(--z-popout);
     }
   }
 }
@@ -67,7 +67,7 @@ Available tooltip positions:
   content: attr(data-title-left);
   top: 50%;
   transform: translateY(-50%);
-  z-index: 99999;
+  z-index: var(--z-popout);
   right: calc(100% + 4px);
 }
 
@@ -75,7 +75,7 @@ Available tooltip positions:
   content: attr(data-title-right);
   top: 50%;
   transform: translateY(-50%);
-  z-index: 99999;
+  z-index: var(--z-popout);
   left: calc(100% + 4px);
 }
 

package/src/style/typography.scss

@@ -11,7 +11,8 @@ h4,
 h5,
 h6 {
   display: block;
-  font-weight: 800;
+  font-weight: var(--font-weight-extrabold);
+  line-height: var(--line-height-title);
 }
 
 h1 {
@@ -44,8 +45,8 @@ table td,
 blockquote,
 p {
   font-size: var(--font-size-m);
-  line-height: 1.4em;
-  font-weight: 400;
+  line-height: var(--line-height-base);
+  font-weight: var(--font-weight);
 
   & > * {
     line-height: inherit;
@@ -62,20 +63,9 @@ p {
     }
   }
 
-  code {
-    font-family: var(--global-font-mono);
-    border-radius: var(--border-radius-s);
-    background-color: var(--color-bg-raised);
-    color: var(--color-text);
-    border: 1px solid var(--color-border);
-    padding: 0px 3px;
-    font-weight: var(--font-weight);
-    font-size: var(--font-size-s);
-  }
-
   strong,
   b {
-    font-weight: var(--font-weight-700);
+    font-weight: var(--font-weight-bold);
   }
 
   i {
@@ -87,6 +77,20 @@ p {
   }
 }
 
+code {
+  display: inline-block;
+  font-family: var(--global-font-mono);
+  border-radius: var(--border-radius-s);
+  background-color: var(--color-bg-raised);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+  padding: 0px 4px;
+  font-weight: var(--font-weight);
+  font-size: var(--font-size-s);
+  min-height: 22px;
+  line-height: var(--line-height-base);
+}
+
 hr {
   border-bottom: 1px solid var(--color-border);
 }
@@ -102,27 +106,41 @@ blockquote {
   padding-block: var(--space-s);
   padding-left: var(--space-l);
   border-left: 3px solid var(--color-border);
+  line-height: var(--line-height-base);
 }
 
 pre {
   font-family: var(--global-font-mono);
   font-size: var(--font-size-s);
-  font-weight: 300;
-  line-height: 1.2em;
+  font-weight: var(--font-weight);
+  line-height: var(--line-height-base);
   padding: var(--space-m);
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius-m);
   white-space: pre-wrap;
   background-color: var(--color-bg-raised);
-  z-index: 1;
+  z-index: var(--z-default);
   position: relative;
 
+  code {
+    min-height: unset;
+    padding: unset;
+    border-radius: unset;
+    border: unset;
+    color: inherit;
+    font-weight: inherit;
+    font-size: inherit;
+    background-color: inherit;
+    font-family: inherit;
+    line-height: inherit;
+  }
+
   &[data-lang]::after {
     content: attr(data-lang);
     font-family: var(--global-font);
     display: block;
     position: absolute;
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
     top: 6px;
     right: 6px;
     padding: 5px;
@@ -207,7 +225,7 @@ table {
     padding-block: var(--space-s);
     min-width: 80px;
     font-size: var(--font-size-m);
-    line-height: 1.4em;
+    line-height: var(--line-height-base);
     font-variant-numeric: tabular-nums;
     vertical-align: top;
 
@@ -219,7 +237,7 @@ table {
   }
 
   th {
-    font-weight: 600;
+    font-weight: var(--font-weight-semibold);
     font-size: var(--font-size-xs);
     text-transform: uppercase;
   }
@@ -227,7 +245,7 @@ table {
   tr {
     td {
       border-bottom: 1px solid var(--color-border);
-      font-weight: 400;
+      font-weight: var(--font-weight);
     }
 
     &:first-child {
@@ -286,7 +304,7 @@ dl {
   dt {
     padding-left: 0;
     color: var(--color-text-lighter);
-    font-weight: 500;
+    font-weight: var(--font-weight-medium);
     font-size: var(--font-size-m);
     grid-column-start: 1;
   }
@@ -297,10 +315,12 @@ dl {
   }
 }
 
-article,
-.typeset {
+article {
   width: 100%;
+}
 
+article,
+.typeset {
   ol,
   ul {
     ol,

package/src/vite-env.d.ts

@@ -1 +1 @@
-/// <reference types="vite/client" />
+/// <reference types="vite/client" />

package/dist/components/Accordion/Accordion.vue.d.ts

@@ -1,47 +0,0 @@
-export interface AccordionProps {
-    open?: boolean;
-    label?: string;
-    card?: boolean;
-}
-declare function open(): void;
-declare function close(): void;
-declare function toggle(): void;
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        trigger?(_: {
-            open: typeof open;
-            close: typeof close;
-            toggle: typeof toggle;
-            isOpen: boolean;
-        }): any;
-        header?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {
-        content: HTMLDivElement;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<AccordionProps, {
-    open: typeof open;
-    close: typeof close;
-    toggle: typeof toggle;
-    isOpen: import('vue').Ref<boolean, boolean>;
-}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    open: () => any;
-    close: () => any;
-}, string, import('vue').PublicProps, Readonly<AccordionProps> & Readonly<{
-    onOpen?: (() => any) | undefined;
-    onClose?: (() => any) | undefined;
-}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
-    content: HTMLDivElement;
-}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Accordion/AccordionGroup.vue.d.ts

@@ -1,21 +0,0 @@
-interface Props {
-    /**
-     * If set to true, if an accordion opens, all other close
-     */
-    single?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<Record<string, any>> & Record<string, any>;
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Alert/Alert.vue.d.ts

@@ -1,36 +0,0 @@
-interface Props {
-    variant?: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
-    /**
-     * Override the variant's default icon
-     */
-    icon?: string;
-    /**
-     * Setting a title and description will use slightly different styling other
-     * than slots.
-     */
-    title?: string;
-    /**
-     * Use strong color
-     */
-    filled?: boolean;
-    description?: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-        default?(_: {}): any;
-        end?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Avatar/Avatar.vue.d.ts

@@ -1,25 +0,0 @@
-import { Sizes } from '../../shared/types';
-interface Props {
-    size?: Sizes | number;
-    url?: string;
-    fallback?: string;
-    icon?: string;
-    alt?: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Badge/Badge.vue.d.ts

@@ -1,22 +0,0 @@
-interface Props {
-    variant?: 'neutral' | 'danger' | 'warning' | 'success' | 'info' | 'accent';
-    outline?: boolean;
-    filled?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Breadcrumbs/BreadcrumbItem.vue.d.ts

@@ -1,22 +0,0 @@
-export interface BreadcrumbItemProps {
-    label?: string;
-    href?: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLLIElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<BreadcrumbItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<BreadcrumbItemProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLLIElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Breadcrumbs/Breadcrumbs.vue.d.ts

@@ -1,18 +0,0 @@
-interface Props {
-    separator?: string;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: Readonly<Record<string, any>> & Record<string, any>;
-    refs: {};
-    rootEl: HTMLUListElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLUListElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Button/Button.vue.d.ts

@@ -1,32 +0,0 @@
-import { Sizes } from '../../shared/types';
-export type Variants = 'fill' | 'danger' | 'success' | 'link' | 'accent' | 'gray';
-interface Props {
-    loading?: boolean;
-    size?: Sizes;
-    expand?: boolean;
-    square?: boolean;
-    icon?: string;
-    variant?: Variants;
-    outline?: boolean;
-    disabled?: boolean;
-    plain?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        start?(_: {}): any;
-        default?(_: {}): any;
-        end?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLButtonElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/ButtonGroup/ButtonGroup.vue.d.ts

@@ -1,22 +0,0 @@
-import { Space } from '../../shared/types';
-interface Props {
-    vertical?: boolean;
-    gap?: Space | number;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Calendar/Calendar.vue.d.ts

@@ -1,27 +0,0 @@
-import { VueDatePickerProps } from '@vuepic/vue-datepicker';
-type __VLS_Props = VueDatePickerProps & {
-    expand?: boolean;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        trigger?(_: {}): any;
-    };
-    refs: {};
-    rootEl: any;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    expand: boolean;
-    format: string | ((date: Date) => string) | ((dates: Date[]) => string);
-    autoApply: boolean;
-    autoPosition: boolean | "top" | "bottom";
-    monthNameFormat: "long" | "short";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/Card/Card.vue.d.ts

@@ -1,26 +0,0 @@
-export interface Props {
-    separators?: boolean;
-    headerSeparator?: boolean;
-    footerSeparator?: boolean;
-    padding?: boolean;
-}
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        header?(_: {}): any;
-        'header-end'?(_: {}): any;
-        default?(_: {}): any;
-        footer?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
-export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};