@dolanske/vui 0.2.0 → 0.3.0

package/src/style/core.scss

@@ -1,3 +1,4 @@
+@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
 
@@ -7,32 +8,39 @@
 @use './fonts.scss';
 
 :root {
+  --container-xs: 360px;
   --container-s: 498px;
   --container-m: 856px;
   --container-l: 1140px;
   --container-xl: 1540px;
+  --container-xxl: 1920px;
 
   --border-radius-xs: 2px;
   --border-radius-s: 4px;
   --border-radius-m: 8px;
   --border-radius-l: 12px;
 
+  --font-size-xxs: 1rem;
   --font-size-xs: 1.15rem;
   --font-size-s: 1.3rem;
   --font-size-ms: 1.45rem;
   --font-size-m: 1.6rem;
-  --font-size-l: 1.65rem;
+  --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: 26px;
-  --space-xl: 40px;
-  --space-xxl: 52px;
+  --space-l: 24px;
+  --space-xl: 34px;
+  --space-xxl: 48px;
   --space-xxxl: 64px;
 
-  --transition-quick: 0.08s all ease-in-out;
+  --transition-fast: 0.08s all ease-in-out;
   --transition: 0.14s all ease-in-out;
   --transition-slow: 0.3s all ease-in-out;
 
@@ -43,6 +51,7 @@
   --color-text: rgb(231, 231, 231);
   --color-text-light: rgb(158, 158, 158);
   --color-text-lighter: rgb(100, 100, 100);
+  --color-text-lightest: rgb(65, 65, 65);
   --color-text-invert: rgb(17, 17, 17);
 
   --color-button-gray: rgb(28, 28, 28);
@@ -74,10 +83,10 @@
   --color-border-weak: rgb(36, 36, 36);
 
   --color-accent: rgb(56, 214, 219);
-  --color-accent-disabled: hsl(from var(--color-accent) calc(h) calc(s * 0.5) calc(l));
+  --color-accent-disabled: hsl(from var(--color-accent) calc(h) calc(s * 0.4) calc(l));
   --color-bg-accent-lowered: hsl(from var(--color-accent) calc(h) s calc(l * 0.2));
-  --color-bg-accent-raised: hsl(from var(--color-accent) calc(h) s calc(l * 0.6));
-  --color-border-accent: hsl(from var(--color-accent) calc(h) s calc(l * 0.5));
+  --color-bg-accent-raised: hsl(from var(--color-accent) calc(h) s calc(l * 0.5));
+  --color-border-accent: hsl(from var(--color-accent) calc(h) s calc(l * 0.4));
 
   --box-shadow: 0 2px 12px rgba(8, 8, 8, 0.2);
   --box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.4);
@@ -122,10 +131,11 @@ body {
   min-height: 100dvh;
 }
 
-@import './typography.scss';
-@import './layout.scss';
-@import './animation.scss';
-@import './tooltip.scss';
-@import './utils.scss';
+@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('fonts.scss');
 
-@import './media-query.scss';
+@include meta.load-css('media-query.scss');

package/src/style/fonts.scss

@@ -0,0 +1,23 @@
+$sizes: 'xxs', 'xs', 's', 'ms', 'm', 'l', 'xl', 'xxl', 'xxxl', 'xxxxl';
+
+@each $size in $sizes {
+  .text-#{$size} {
+    font-size: var(--font-size-#{$size});
+  }
+}
+
+.text-color {
+  color: var(--color-text);
+}
+
+.text-color-accent {
+  color: var(--color-accent);
+}
+
+$colors: 'light', 'lighter', 'lightest', 'red', 'green', 'yellow', 'blue';
+
+@each $color in $colors {
+  .text-color-#{$color} {
+    font-size: var(--color-text-#{$color});
+  }
+}

package/src/style/layout.scss

@@ -1,4 +1,5 @@
-// Contains basic layout definitions and classes to compose basic layouts
+// Container layout styling
+$containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
 
 .container {
   display: block;
@@ -6,8 +7,135 @@
   width: 100%;
   padding-inline: var(--space-m);
   max-width: var(--container-l);
+
+  @each $container in $containers {
+    &.container-#{$container} {
+      max-width: var(--container-#{$container});
+    }
+  }
+
+  &.container-full {
+    max-width: 100%;
+  }
+}
+
+// Sizes
+
+// Paddings & margins
+
+.mx-auto {
+  margin-inline: auto;
+}
+
+.my-auto {
+  margin-block: auto;
+}
+
+.m-auto {
+  margin: auto;
+}
+
+// Generate layout classes from size styles
+$sizes: 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl';
+
+@each $size in $sizes {
+  // Margin
+  .mb-#{$size} {
+    margin-bottom: var(--space-#{$size});
+  }
+
+  .mr-#{$size} {
+    margin-right: var(--space-#{$size});
+  }
+
+  .ml-#{$size} {
+    margin-left: var(--space-#{$size});
+  }
+
+  .mt-#{$size} {
+    margin-top: var(--space-#{$size});
+  }
+
+  .mx-#{$size} {
+    margin-inline: var(--space-#{$size});
+  }
+
+  .my-#{$size} {
+    margin-block: var(--space-#{$size});
+  }
+
+  .m-#{$size} {
+    margin: var(--space-#{$size});
+  }
+
+  // Padding
+  .pb-#{$size} {
+    padding-bottom: var(--space-#{$size});
+  }
+
+  .pr-#{$size} {
+    padding-right: var(--space-#{$size});
+  }
+
+  .pl-#{$size} {
+    padding-left: var(--space-#{$size});
+  }
+
+  .pt-#{$size} {
+    padding-top: var(--space-#{$size});
+  }
+
+  .px-#{$size} {
+    padding-inline: var(--space-#{$size});
+  }
+
+  .py-#{$size} {
+    padding-block: var(--space-#{$size});
+  }
+
+  .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
+.z-0 {
+  z-index: 0;
+}
+
+.z-10 {
+  z-index: 10;
+}
+
+.z-20 {
+  z-index: 20;
+}
+
+.z-30 {
+  z-index: 30;
+}
+
+.z-40 {
+  z-index: 40;
+}
+
+.z-50 {
+  z-index: 50;
 }
 
-.flex-1 {
-  flex: 1;
+.z-auto {
+  z-index: auto;
 }

package/src/style/typography.scss

@@ -15,27 +15,27 @@ h6 {
 }
 
 h1 {
-  font-size: 5rem;
+  font-size: var(--font-size-xxxxl);
 }
 
 h2 {
-  font-size: 3.5rem;
+  font-size: var(--font-size-xxxl);
 }
 
 h3 {
-  font-size: 2.6rem;
+  font-size: var(--font-size-xxl);
 }
 
 h4 {
-  font-size: 2rem;
+  font-size: var(--font-size-xl);
 }
 
 h5 {
-  font-size: 1.8rem;
+  font-size: var(--font-size-l);
 }
 
 h6 {
-  font-size: 1.6rem;
+  font-size: var(--font-size-m);
 }
 
 figcaption,
@@ -62,7 +62,7 @@ p {
   }
 
   code {
-    border-radius: 2px;
+    border-radius: var(--border-radius-xs);
     background-color: var(--color-bg-raised);
     color: var(--color-text);
     border: 1px solid var(--color-border);
@@ -96,7 +96,7 @@ p {
 blockquote {
   display: block;
   padding-block: var(--space-s);
-  padding-left: 24px;
+  padding-left: var(--space-l);
   border-left: 3px solid var(--color-border);
 }
 
@@ -327,7 +327,7 @@ article,
 
   figure {
     img {
-      margin-bottom: 8px;
+      margin-bottom: var(--space-xs);
     }
 
     figcaption {

package/src/style/utils.scss

@@ -20,3 +20,16 @@ mark {
   padding: 1px;
   border-radius: 2px;
 }
+
+.counter {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 20px;
+  height: 20px;
+  border-radius: 10px;
+  font-size: var(--font-size-xs);
+  color: var(--color-text);
+  background-color: var(--color-button-gray-hover);
+  font-weight: 400;
+}

package/dist/shared/composables.d.ts

@@ -1,3 +0,0 @@
-import { ComputedRef } from 'vue';
-import { Sizes } from './types';
-export declare function useActualGap(gap?: Sizes | number): ComputedRef<string>;

package/src/shared/composables.ts

@@ -1,18 +0,0 @@
-import type { ComputedRef } from 'vue'
-import type { Sizes } from './types'
-import { computed } from 'vue'
-import { Size } from './types'
-
-// Some files may share the same properties
-export function useActualGap(gap?: Sizes | number): ComputedRef<string> {
-  return computed(() => {
-    if (typeof gap === 'number')
-      return `${gap}px`
-    switch (gap) {
-      case Size.s: return '4px'
-      case Size.l: return '16px'
-      case Size.m:
-      default: return '8px'
-    }
-  })
-}