@dolanske/vui 0.5.0 → 1.0.1

package/src/style/core.scss

@@ -5,8 +5,9 @@
 // To overwrite any of these styles, simply create a style file and import it
 // after this one
 @use './reset.scss';
-// @use './text.scss';
+@use './theme.scss';
 
+// TODO: Split this into based on media query prefers-dark-mode
 :root {
   color-scheme: dark;
 
@@ -17,16 +18,16 @@
   --container-xl: 1540px;
   --container-xxl: 1920px;
 
-  --border-radius-xs: 2px;
-  --border-radius-s: 4px;
+  --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-ms: 1.45rem;
-  --font-size-m: 1.6rem;
+  --font-size-m: 1.45rem;
+  --font-size-m: 1.5rem;
   --font-size-l: 1.8rem;
   --font-size-xl: 2rem;
   --font-size-xxl: 2.6rem;
@@ -42,63 +43,37 @@
   --space-xxl: 48px;
   --space-xxxl: 64px;
 
-  --transition-fast: 0.15s all cubic-bezier(0.65, 0, 0.35, 1);
+  --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);
 
-  --color-bg: rgb(18, 18, 18);
-  --color-bg-raised: rgb(28, 28, 28);
-  --color-bg-lowered: rgb(14, 14, 14);
-
-  --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);
-  --color-button-gray-hover: rgb(38, 38, 38);
-
-  --color-text-red: rgb(243, 78, 70);
-  --color-bg-red-lowered: rgb(66, 22, 20);
-  --color-bg-red-raised: rgb(119, 31, 26);
-  --color-border-red: rgb(94, 23, 19);
-
-  --color-text-green: rgb(44, 214, 52);
-  --color-text-green-disabled: rgb(109, 193, 113);
-  --color-bg-green-lowered: rgb(19, 46, 9);
-  --color-bg-green-raised: rgb(48, 122, 22);
-  --color-border-green: rgb(27, 70, 12);
-
-  --color-text-yellow: rgb(243, 231, 70);
-  --color-bg-yellow-lowered: rgb(59, 46, 10);
-  --color-bg-yellow-raised: rgb(119, 82, 26);
-  --color-border-yellow: rgb(99, 97, 16);
-
-  --color-text-blue: rgb(85, 141, 245);
-  --color-bg-blue-lowered: rgb(10, 25, 59);
-  --color-bg-blue-raised: rgb(26, 59, 119);
-  --color-border-blue: rgb(20, 45, 112);
-
-  --color-border: rgb(40, 40, 40);
-  --color-border-strong: rgb(54, 54, 54);
-  --color-border-weak: rgb(36, 36, 36);
-
-  --color-accent: rgb(238, 120, 17);
-  --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.45));
-  --color-border-accent: hsl(from var(--color-accent) calc(h) s calc(l * 0.3));
-
-  --box-shadow: 0 2px 12px rgba(8, 8, 8, 0.2);
-  --box-shadow-strong: 0 4px 15px rgba(8, 8, 8, 0.4);
-
-  --global-font: Geist, sans-serif;
+  --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%;
@@ -108,6 +83,7 @@
 
   overflow-x: hidden;
   width: 100%;
+  font-weight: var(--font-weight);
 
   font-feature-settings: normal;
   font-variation-settings: normal;
@@ -146,5 +122,4 @@ body {
 @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');

package/src/style/layout.scss

@@ -19,19 +19,24 @@ $containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
   }
 }
 
-// Layout
-.flex {
-  display: flex;
+$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;
+  }
 }
 
-.flex-1 {
-  flex: 1;
+.w-full {
+  width: 100%;
 }
 
-.inline-flex {
-  display: inline-flex;
+.w-auto {
+  width: auto;
 }
 
+// Layout
 .block {
   display: block;
 }
@@ -44,6 +49,28 @@ $containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
   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;
+}
+
 .x-center {
   justify-content: center;
 }
@@ -52,12 +79,24 @@ $containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
   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: center;
+  align-items: flex-start;
 }
 
 .y-end {
@@ -68,6 +107,10 @@ $containers: 'xs', 's', 'm', 'l', 'xl', 'xxl';
   align-items: center;
 }
 
+.y-baseline {
+  align-items: baseline;
+}
+
 // Sizes
 // Paddings & margins
 .mx-auto {
@@ -83,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
@@ -166,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/text.scss

@@ -72,3 +72,21 @@ $lines: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
     -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;
   }