@dolanske/vui 0.4.0 → 1.0.0

package/src/style/layout.scss

@@ -19,21 +19,96 @@ $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;
+
+@each $width in $widths {
+  $extra: '%';
+  .w-#{$width} {
+    width: #{$width + $extra} !important;
+  }
+}
+
+.w-full {
+  width: 100%;
+}
+
+.w-auto {
+  width: auto;
+}
+
 // Layout
+.block {
+  display: block;
+}
+
+.inline-block {
+  display: inline-block;
+}
+
+.inline {
+  display: inline;
+}
+
+// Flex stuff
+
 .flex {
   display: flex;
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+.flex-1 {
+  flex: 1;
+}
+
 .inline-flex {
   display: inline-flex;
 }
 
-.block {
-  display: block;
+.x-center {
+  justify-content: center;
 }
 
-.inline-block {
-  display: inline-block;
+.x-start {
+  justify-content: flex-start;
+}
+
+.x-between {
+  justify-content: space-between;
+}
+
+.x-around {
+  justify-content: space-around;
+}
+
+.x-evenly {
+  justify-content: space-evenly;
+}
+
+.x-end {
+  justify-content: flex-end;
+}
+
+.y-start {
+  align-items: flex-start;
+}
+
+.y-end {
+  align-self: flex-end;
+}
+
+.y-center {
+  align-items: center;
+}
+
+.y-baseline {
+  align-items: baseline;
 }
 
 // Sizes
@@ -51,7 +126,7 @@ $containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
 }
 
 // Generate layout classes from size styles
-$sizes: 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl';
+$sizes: 0, 'xxs', 'xs', 's', 'm', 'l', 'xl', 'xxl', 'xxxl';
 
 @each $size in $sizes {
   // Margin
@@ -134,3 +209,25 @@ $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/{fonts.scss → text.scss}

@@ -51,3 +51,42 @@ $colors: 'light', 'lighter', 'lightest', 'red', 'green', 'yellow', 'blue';
 .text-black {
   font-weight: 900;
 }
+
+// Line truncating
+
+.text-overflow {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+$lines: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
+
+@each $line in $lines {
+  .text-overflow-#{$line} {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    line-clamp: $line;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: $line;
+  }
+}
+
+// White space
+
+.ws-wrap {
+  white-space: wrap;
+}
+
+.ws-pre {
+  white-space: pre;
+}
+
+.ws-prewrap {
+  white-space: pre-wrap;
+}
+
+.ws-nowrap {
+  white-space: nowrap;
+}

package/src/style/theme.scss

@@ -0,0 +1,195 @@
+// Light theme
+:root {
+  --light-color-bg: rgb(246, 246, 246);
+  --light-color-bg-medium: rgb(236, 236, 236);
+  --light-color-bg-raised: rgb(222, 222, 222);
+  --light-color-bg-lowered: rgb(255, 255, 255);
+
+  --light-color-text: rgb(8, 8, 8);
+  --light-color-text-light: rgb(64, 64, 64);
+  --light-color-text-lighter: rgb(92, 92, 92);
+  --light-color-text-lightest: rgb(128, 128, 128);
+  --light-color-text-invert: rgb(248, 248, 248);
+
+  --light-color-button-gray: rgb(224, 224, 224);
+  --light-color-button-gray-hover: rgb(198, 198, 198);
+
+  --light-color-button-fill: rgb(12, 12, 12);
+  --light-color-button-fill-hover: rgb(52, 52, 52);
+
+  --light-color-text-red: rgb(209, 60, 52);
+  --light-color-bg-red-lowered: rgb(172, 45, 45);
+  --light-color-bg-red-raised: rgb(220, 38, 38);
+
+  --light-color-text-green: rgb(77, 160, 29);
+  --light-color-bg-green-lowered: rgb(42, 114, 19);
+  --light-color-bg-green-raised: rgb(61, 146, 35);
+
+  --light-color-text-yellow: rgb(176, 129, 15);
+  --light-color-bg-yellow-lowered: rgb(230, 205, 137);
+  --light-color-bg-yellow-raised: rgb(253, 200, 86);
+
+  --light-color-text-blue: rgb(85, 141, 245);
+  --light-color-bg-blue-lowered: rgb(196, 214, 255);
+  --light-color-bg-blue-raised: rgb(136, 178, 255);
+
+  --light-color-border: rgb(200, 200, 200);
+  --light-color-border-strong: rgb(152, 152, 152);
+  --light-color-border-weak: rgb(224, 224, 224);
+
+  --light-color-accent: rgb(193, 118, 255);
+  --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-strong: 0 4px 15px rgba(8, 8, 8, 0.2);
+}
+
+// Dark theme
+:root {
+  --dark-color-bg: rgb(17, 17, 17);
+  --dark-color-bg-medium: rgb(22, 22, 22);
+  --dark-color-bg-raised: rgb(28, 28, 28);
+  --dark-color-bg-lowered: rgb(12, 12, 12);
+
+  --dark-color-text: rgb(231, 231, 231);
+  --dark-color-text-light: rgb(180, 180, 180);
+  --dark-color-text-lighter: rgb(90, 90, 90);
+  --dark-color-text-lightest: rgb(65, 65, 65);
+  --dark-color-text-invert: rgb(17, 17, 17);
+
+  --dark-color-button-gray: rgb(46, 46, 46);
+  --dark-color-button-gray-hover: rgb(38, 38, 38);
+
+  --dark-color-button-fill: rgb(250, 250, 250);
+  --dark-color-button-fill-hover: rgb(210, 210, 210);
+
+  --dark-color-text-red: rgb(243, 78, 70);
+  --dark-color-bg-red-lowered: rgb(104, 24, 24);
+  --dark-color-bg-red-raised: rgb(127, 29, 29);
+
+  --dark-color-text-green: rgb(106, 207, 48);
+  --dark-color-bg-green-lowered: rgb(40, 95, 8);
+  --dark-color-bg-green-raised: rgb(26, 122, 13);
+
+  --dark-color-text-yellow: rgb(255, 193, 7);
+  --dark-color-bg-yellow-lowered: rgb(78, 52, 0);
+  --dark-color-bg-yellow-raised: rgb(152, 104, 0);
+
+  --dark-color-text-blue: rgb(85, 141, 245);
+  --dark-color-bg-blue-lowered: rgb(13, 32, 74);
+  --dark-color-bg-blue-raised: rgb(26, 59, 119);
+
+  --dark-color-border: rgb(40, 40, 40);
+  --dark-color-border-strong: rgb(54, 54, 54);
+  --dark-color-border-weak: rgb(36, 36, 36);
+
+  --dark-color-accent: rgb(193, 118, 255);
+  --dark-color-bg-accent-lowered: hsla(from var(--dark-color-accent) h s l / 0.45);
+  --dark-color-bg-accent-raised: hsla(from var(--dark-color-accent) h s l / 0.6);
+
+  --dark-box-shadow: 0 2px 12px rgba(8, 8, 8, 0.2);
+  --dark-box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.4);
+}
+
+:root.light {
+  color-scheme: light;
+
+  --color-bg: var(--light-color-bg);
+  --color-bg-medium: var(--light-color-bg-medium);
+  --color-bg-raised: var(--light-color-bg-raised);
+  --color-bg-lowered: var(--light-color-bg-lowered);
+
+  --color-text: var(--light-color-text);
+  --color-text-light: var(--light-color-text-light);
+  --color-text-lighter: var(--light-color-text-lighter);
+  --color-text-lightest: var(--light-color-text-lightest);
+  --color-text-invert: var(--light-color-text-invert);
+
+  --color-button-gray: var(--light-color-button-gray);
+  --color-button-gray-hover: var(--light-color-button-gray-hover);
+
+  --color-button-fill: var(--light-color-button-fill);
+  --color-button-fill-hover: var(--light-color-button-fill-hover);
+
+  --color-text-red: var(--light-color-text-red);
+  --color-bg-red-lowered: var(--light-color-bg-red-lowered);
+  --color-bg-red-raised: var(--light-color-bg-red-raised);
+  --color-border-red: var(--light-color-border-red);
+
+  --color-text-green: var(--light-color-text-green);
+  --color-bg-green-lowered: var(--light-color-bg-green-lowered);
+  --color-bg-green-raised: var(--light-color-bg-green-raised);
+
+  --color-text-yellow: var(--light-color-text-yellow);
+  --color-bg-yellow-lowered: var(--light-color-bg-yellow-lowered);
+  --color-bg-yellow-raised: var(--light-color-bg-yellow-raised);
+  --color-border-yellow: var(--light-color-border-yellow);
+
+  --color-text-blue: var(--light-color-text-blue);
+  --color-bg-blue-lowered: var(--light-color-bg-blue-lowered);
+  --color-bg-blue-raised: var(--light-color-bg-blue-raised);
+  --color-border-blue: var(--light-color-border-blue);
+
+  --color-border: var(--light-color-border);
+  --color-border-strong: var(--light-color-border-strong);
+  --color-border-weak: var(--light-color-border-weak);
+
+  --color-accent: var(--light-color-accent);
+  --color-bg-accent-lowered: var(--light-color-bg-accent-lowered);
+  --color-bg-accent-raised: var(--light-color-bg-accent-raised);
+
+  --box-shadow: var(--light-box-shadow);
+  --box-shadow-strong: var(--light-box-shadow-strong);
+}
+
+:root.dark {
+  color-scheme: dark;
+
+  --color-bg: var(--dark-color-bg);
+  --color-bg-medium: var(--dark-color-bg-medium);
+  --color-bg-raised: var(--dark-color-bg-raised);
+  --color-bg-lowered: var(--dark-color-bg-lowered);
+
+  --color-text: var(--dark-color-text);
+  --color-text-light: var(--dark-color-text-light);
+  --color-text-lighter: var(--dark-color-text-lighter);
+  --color-text-lightest: var(--dark-color-text-lightest);
+  --color-text-invert: var(--dark-color-text-invert);
+
+  --color-button-gray: var(--dark-color-button-gray);
+  --color-button-gray-hover: var(--dark-color-button-gray-hover);
+
+  --color-button-fill: var(--dark-color-button-fill);
+  --color-button-fill-hover: var(--dark-color-button-fill-hover);
+
+  --color-text-red: var(--dark-color-text-red);
+  --color-bg-red-lowered: var(--dark-color-bg-red-lowered);
+  --color-bg-red-raised: var(--dark-color-bg-red-raised);
+  --color-border-red: var(--dark-color-border-red);
+
+  --color-text-green: var(--dark-color-text-green);
+  --color-bg-green-lowered: var(--dark-color-bg-green-lowered);
+  --color-bg-green-raised: var(--dark-color-bg-green-raised);
+
+  --color-text-yellow: var(--dark-color-text-yellow);
+  --color-bg-yellow-lowered: var(--dark-color-bg-yellow-lowered);
+  --color-bg-yellow-raised: var(--dark-color-bg-yellow-raised);
+  --color-border-yellow: var(--dark-color-border-yellow);
+
+  --color-text-blue: var(--dark-color-text-blue);
+  --color-bg-blue-lowered: var(--dark-color-bg-blue-lowered);
+  --color-bg-blue-raised: var(--dark-color-bg-blue-raised);
+  --color-border-blue: var(--dark-color-border-blue);
+
+  --color-border: var(--dark-color-border);
+  --color-border-strong: var(--dark-color-border-strong);
+  --color-border-weak: var(--dark-color-border-weak);
+
+  --color-accent: var(--dark-color-accent);
+  --color-bg-accent-lowered: var(--dark-color-bg-accent-lowered);
+  --color-bg-accent-raised: var(--dark-color-bg-accent-raised);
+
+  --box-shadow: var(--dark-box-shadow);
+  --box-shadow-strong: var(--dark-box-shadow-strong);
+}

package/src/style/tooltip.scss

@@ -17,11 +17,12 @@ Available tooltip positions:
 
   &:before {
     font-family: var(--global-font);
-    font-weight: 400;
-    background-color: var(--color-bg-raised);
-    color: var(--color-text);
+    font-weight: var(--font-weight-regular);
+    background-color: var(--color-button-gray);
+    color: var(--color-text) !important;
+    box-shadow: var(--box-shadow-strong);
 
-    font-size: var(--font-size-ms);
+    font-size: var(--font-size-m);
     position: absolute;
     padding: 4px 8px;
     line-height: 1.3em;
@@ -34,6 +35,8 @@ Available tooltip positions:
     z-index: -1;
     visibility: hidden;
     pointer-events: none;
+    max-width: 256px;
+    width: max-content;
   }
 
   &:hover {
@@ -45,6 +48,21 @@ Available tooltip positions:
   }
 }
 
+:root.light {
+  [data-title-left],
+  [data-title-right],
+  [data-title-bottom],
+  [data-title-bottom-left],
+  [data-title-bottom-right],
+  [data-title-top],
+  [data-title-top-left],
+  [data-title-top-right] {
+    &:before {
+      background-color: var(--color-bg-lowered);
+    }
+  }
+}
+
 [data-title-left]:before {
   content: attr(data-title-left);
   top: 50%;

package/src/style/typography.scss

@@ -53,8 +53,9 @@ p {
   }
 
   a {
-    color: var(--color-text-blue);
+    color: var(--color-text);
     text-decoration: underline;
+    text-underline-offset: 3px;
 
     &:hover {
       text-decoration: none;
@@ -62,16 +63,19 @@ p {
   }
 
   code {
-    border-radius: var(--border-radius-xs);
+    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: 1px 3px;
+    padding: 0px 3px;
+    font-weight: var(--font-weight);
+    font-size: var(--font-size-s);
   }
 
   strong,
   b {
-    font-weight: 700;
+    font-weight: var(--font-weight-700);
   }
 
   i {
@@ -90,7 +94,7 @@ hr {
 span,
 strong,
 p {
-  font-size: var(--font-size-ms);
+  font-size: var(--font-size-m);
 }
 
 blockquote {
@@ -135,10 +139,67 @@ pre {
 table {
   text-indent: 0;
   border-collapse: separate;
-  // width: 100%;
   overflow-x: auto;
   max-width: 100%;
 
+  // TODO: add alternating row colors
+
+  // TODO add only separating header and body with a border, not between rows
+
+  // &.bg-dark {
+  //   background-color: var(--color-bg-lowered);
+  // }
+
+  // &.bg-light {
+  //   background-color: var(--color-bg-lighter);
+  // }
+
+  // &.no-borders {
+  //   th,
+  //   td {
+  //     border: 0 !important;
+  //   }
+  // }
+
+  thead {
+    th {
+      border-bottom: 1px solid var(--color-border);
+      border-top: 1px solid var(--color-border);
+      white-space: nowrap;
+
+      &:first-child {
+        border-top-left-radius: var(--border-radius-s);
+        border-bottom-left-radius: 0 !important;
+      }
+
+      &:last-child {
+        border-top-right-radius: var(--border-radius-s);
+        border-bottom-right-radius: 0 !important;
+      }
+    }
+  }
+
+  tbody {
+    th {
+      border-radius: 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    &:first-child tr:first-child {
+      td {
+        border-top: 1px solid var(--color-border);
+
+        &:first-child {
+          border-top-left-radius: var(--border-radius-s);
+        }
+
+        &:last-child {
+          border-top-right-radius: var(--border-radius-s);
+        }
+      }
+    }
+  }
+
   th,
   td {
     text-align: left;
@@ -148,6 +209,7 @@ table {
     font-size: var(--font-size-m);
     line-height: 1.4em;
     font-variant-numeric: tabular-nums;
+    vertical-align: top;
 
     &:first-child {
       border-left: 1px solid var(--color-border);
@@ -157,18 +219,9 @@ table {
   }
 
   th {
-    border-bottom: 1px solid var(--color-border);
-    border-top: 1px solid var(--color-border);
     font-weight: 600;
-    white-space: nowrap;
-
-    &:first-child {
-      border-top-left-radius: var(--border-radius-s);
-    }
-
-    &:last-child {
-      border-top-right-radius: var(--border-radius-s);
-    }
+    font-size: var(--font-size-xs);
+    text-transform: uppercase;
   }
 
   tr {
@@ -177,7 +230,31 @@ table {
       font-weight: 400;
     }
 
+    &:first-child {
+      th {
+        border-top: 1px solid var(--color-border);
+
+        &:first-child {
+          border-top-left-radius: var(--border-radius-s);
+        }
+
+        &:last-child {
+          border-top-right-radius: var(--border-radius-s);
+        }
+      }
+    }
+
     &:last-child {
+      th {
+        &:first-child {
+          border-bottom-left-radius: var(--border-radius-s);
+        }
+
+        &:last-child {
+          border-bottom-right-radius: var(--border-radius-s);
+        }
+      }
+
       td {
         &:first-child {
           border-bottom-left-radius: var(--border-radius-s);
@@ -210,7 +287,7 @@ dl {
     padding-left: 0;
     color: var(--color-text-lighter);
     font-weight: 500;
-    font-size: var(--font-size-ms);
+    font-size: var(--font-size-m);
     grid-column-start: 1;
   }
 

package/dist/components/Table/Row.vue.d.ts

@@ -1,16 +0,0 @@
-declare function __VLS_template(): {
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    attrs: Partial<{}>;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, 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/src/components/Table/Row.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-//
-</script>
-
-<template>
-  <tr class="vui-table-row">
-    <slot />
-  </tr>
-</template>