@sveltia/ui 0.5.0 → 0.6.1

package/package/components/util/app-shell.svelte

@@ -52,175 +52,193 @@
 
 <style global>@import url("https://fonts.googleapis.com/css2?family=Merriweather+Sans:ital,wght@0,300;0,600;1,300&family=Noto+Sans+Mono&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
-:global(:root[data-theme=light]) {
-  --foreground-color-1-hsl: var(--base-hue) 5% 0%;
-  --foreground-color-2-hsl: var(--base-hue) 5% 20%;
-  --foreground-color-3-hsl: var(--base-hue) 5% 40%;
-  --foreground-color-4-hsl: var(--base-hue) 5% 60%;
-  --background-color-1-hsl: var(--base-hue) 5% 100%;
-  --background-color-2-hsl: var(--base-hue) 5% 98%;
-  --background-color-3-hsl: var(--base-hue) 5% 94%;
-  --background-color-4-hsl: var(--base-hue) 5% 90%;
-  --background-color-5-hsl: var(--base-hue) 5% 86%;
-  --border-color-1-hsl: var(--base-hue) 5% 78%;
-  --border-color-2-hsl: var(--base-hue) 5% 82%;
-  --shadow-color: var(--base-hue) 10% 0%;
-  --primary-accent-color: hsl(var(--base-hue) 80% 45%);
-  --primary-accent-color-lighter: hsl(var(--base-hue) 80% 40%);
-  --primary-accent-color-darker: hsl(var(--base-hue) 80% 50%);
-  --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
-  --error-color-hue: 0;
-  --warning-color-hue: 40;
-  --info-color-hue: 210;
-  --success-color-hue: 100;
-  --alert-foreground-color-saturation: 88%;
-  --alert-foreground-color-lightness: 28%;
-  --alert-background-color-saturation: 68%;
-  --alert-background-color-lightness: 88%;
-  --alert-border-color-saturation: 48%;
-  --alert-border-color-lightness: 68%;
+:global(:root[data-theme=light]),
+:global(:host[data-theme=light]) {
+  --sui-foreground-color-1-hsl: var(--sui-base-hue) 5% 0%;
+  --sui-foreground-color-2-hsl: var(--sui-base-hue) 5% 20%;
+  --sui-foreground-color-3-hsl: var(--sui-base-hue) 5% 40%;
+  --sui-foreground-color-4-hsl: var(--sui-base-hue) 5% 60%;
+  --sui-background-color-1-hsl: var(--sui-base-hue) 5% 100%;
+  --sui-background-color-2-hsl: var(--sui-base-hue) 5% 98%;
+  --sui-background-color-3-hsl: var(--sui-base-hue) 5% 94%;
+  --sui-background-color-4-hsl: var(--sui-base-hue) 5% 90%;
+  --sui-background-color-5-hsl: var(--sui-base-hue) 5% 86%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 78%;
+  --sui-border-color-2-hsl: var(--sui-base-hue) 5% 82%;
+  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
+  --sui-primary-accent-color: hsl(var(--sui-base-hue) 80% 45%);
+  --sui-primary-accent-color-lighter: hsl(var(--sui-base-hue) 80% 40%);
+  --sui-primary-accent-color-darker: hsl(var(--sui-base-hue) 80% 50%);
+  --sui-primary-accent-color-foreground: hsl(var(--sui-base-hue) 10% 100%);
+  --sui-error-color-hue: 0;
+  --sui-warning-color-hue: 40;
+  --sui-info-color-hue: 210;
+  --sui-success-color-hue: 100;
+  --sui-alert-foreground-color-saturation: 88%;
+  --sui-alert-foreground-color-lightness: 28%;
+  --sui-alert-background-color-saturation: 68%;
+  --sui-alert-background-color-lightness: 88%;
+  --sui-alert-border-color-saturation: 48%;
+  --sui-alert-border-color-lightness: 68%;
 }
 
-:global(:root[data-theme=dark]) {
-  --foreground-color-1-hsl: var(--base-hue) 10% 100%;
-  --foreground-color-2-hsl: var(--base-hue) 10% 80%;
-  --foreground-color-3-hsl: var(--base-hue) 10% 60%;
-  --foreground-color-4-hsl: var(--base-hue) 10% 40%;
-  --background-color-1-hsl: var(--base-hue) 10% 10%;
-  --background-color-2-hsl: var(--base-hue) 10% 12%;
-  --background-color-3-hsl: var(--base-hue) 10% 16%;
-  --background-color-4-hsl: var(--base-hue) 10% 20%;
-  --background-color-5-hsl: var(--base-hue) 10% 24%;
-  --border-color-1-hsl: var(--base-hue) 10% 32%;
-  --border-color-2-hsl: var(--base-hue) 10% 28%;
-  --shadow-color: var(--base-hue) 10% 0%;
-  --primary-accent-color: hsl(var(--base-hue) 100% 45%);
-  --primary-accent-color-lighter: hsl(var(--base-hue) 100% 55%);
-  --primary-accent-color-darker: hsl(var(--base-hue) 100% 35%);
-  --primary-accent-color-foreground: hsl(var(--base-hue) 10% 100%);
-  --error-color-hue: 0;
-  --warning-color-hue: 40;
-  --info-color-hue: 210;
-  --success-color-hue: 100;
-  --alert-foreground-color-saturation: 48%;
-  --alert-foreground-color-lightness: 68%;
-  --alert-background-color-saturation: 88%;
-  --alert-background-color-lightness: 8%;
-  --alert-border-color-saturation: 38%;
-  --alert-border-color-lightness: 18%;
+:global(:root[data-theme=dark]),
+:global(:host[data-theme=dark]) {
+  --sui-foreground-color-1-hsl: var(--sui-base-hue) 10% 100%;
+  --sui-foreground-color-2-hsl: var(--sui-base-hue) 10% 80%;
+  --sui-foreground-color-3-hsl: var(--sui-base-hue) 10% 60%;
+  --sui-foreground-color-4-hsl: var(--sui-base-hue) 10% 40%;
+  --sui-background-color-1-hsl: var(--sui-base-hue) 10% 10%;
+  --sui-background-color-2-hsl: var(--sui-base-hue) 10% 12%;
+  --sui-background-color-3-hsl: var(--sui-base-hue) 10% 16%;
+  --sui-background-color-4-hsl: var(--sui-base-hue) 10% 20%;
+  --sui-background-color-5-hsl: var(--sui-base-hue) 10% 24%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 32%;
+  --sui-border-color-2-hsl: var(--sui-base-hue) 10% 28%;
+  --sui-shadow-color: var(--sui-base-hue) 10% 0%;
+  --sui-primary-accent-color: hsl(var(--sui-base-hue) 100% 45%);
+  --sui-primary-accent-color-lighter: hsl(var(--sui-base-hue) 100% 55%);
+  --sui-primary-accent-color-darker: hsl(var(--sui-base-hue) 100% 35%);
+  --sui-primary-accent-color-foreground: hsl(var(--sui-base-hue) 10% 100%);
+  --sui-error-color-hue: 0;
+  --sui-warning-color-hue: 40;
+  --sui-info-color-hue: 210;
+  --sui-success-color-hue: 100;
+  --sui-alert-foreground-color-saturation: 48%;
+  --sui-alert-foreground-color-lightness: 68%;
+  --sui-alert-background-color-saturation: 88%;
+  --sui-alert-background-color-lightness: 8%;
+  --sui-alert-border-color-saturation: 38%;
+  --sui-alert-border-color-lightness: 18%;
 }
 
-:global(:root) {
-  --base-hue: 210;
-  --highlight-foreground-color: hsl(var(--foreground-color-1-hsl));
-  --primary-foreground-color: hsl(var(--foreground-color-2-hsl));
-  --secondary-foreground-color: hsl(var(--foreground-color-3-hsl));
-  --tertiary-foreground-color: hsl(var(--foreground-color-3-hsl));
-  --disabled-foreground-color: hsl(var(--foreground-color-4-hsl));
-  --error-foreground-color: hsl(
-    var(--error-color-hue) var(--alert-foreground-color-saturation)
-      var(--alert-foreground-color-lightness)
+:global(:root),
+:global(:host) {
+  --sui-base-hue: 210;
+  --sui-highlight-foreground-color: hsl(var(--sui-foreground-color-1-hsl));
+  --sui-primary-foreground-color: hsl(var(--sui-foreground-color-2-hsl));
+  --sui-secondary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
+  --sui-tertiary-foreground-color: hsl(var(--sui-foreground-color-3-hsl));
+  --sui-disabled-foreground-color: hsl(var(--sui-foreground-color-4-hsl));
+  --sui-error-foreground-color: hsl(
+    var(--sui-error-color-hue) var(--sui-alert-foreground-color-saturation)
+      var(--sui-alert-foreground-color-lightness)
   );
-  --warning-foreground-color: hsl(
-    var(--warning-color-hue) var(--alert-foreground-color-saturation)
-      var(--alert-foreground-color-lightness)
+  --sui-warning-foreground-color: hsl(
+    var(--sui-warning-color-hue) var(--sui-alert-foreground-color-saturation)
+      var(--sui-alert-foreground-color-lightness)
   );
-  --info-foreground-color: hsl(
-    var(--info-color-hue) var(--alert-foreground-color-saturation)
-      var(--alert-foreground-color-lightness)
+  --sui-info-foreground-color: hsl(
+    var(--sui-info-color-hue) var(--sui-alert-foreground-color-saturation)
+      var(--sui-alert-foreground-color-lightness)
   );
-  --success-foreground-color: hsl(
-    var(--success-color-hue) var(--alert-foreground-color-saturation)
-      var(--alert-foreground-color-lightness)
+  --sui-success-foreground-color: hsl(
+    var(--sui-success-color-hue) var(--sui-alert-foreground-color-saturation)
+      var(--sui-alert-foreground-color-lightness)
   );
-  --highlight-background-color: hsl(var(--background-color-5-hsl));
-  --content-background-color: hsl(var(--background-color-1-hsl));
-  --primary-background-color: hsl(var(--background-color-2-hsl));
-  --primary-background-color-translucent: hsl(var(--background-color-2-hsl) / 80%);
-  --secondary-background-color: hsl(var(--background-color-3-hsl));
-  --secondary-background-color-translucent: hsl(var(--background-color-3-hsl) / 80%);
-  --tertiary-background-color: hsl(var(--background-color-4-hsl));
-  --tertiary-background-color-translucent: hsl(var(--background-color-4-hsl) / 80%);
-  --control-background-color: hsl(var(--background-color-1-hsl));
-  --disabled-background-color: hsl(var(--background-color-4-hsl));
-  --error-background-color: hsl(
-    var(--error-color-hue) var(--alert-background-color-saturation)
-      var(--alert-background-color-lightness)
+  --sui-highlight-background-color: hsl(var(--sui-background-color-5-hsl));
+  --sui-content-background-color: hsl(var(--sui-background-color-1-hsl));
+  --sui-primary-background-color: hsl(var(--sui-background-color-2-hsl));
+  --sui-primary-background-color-translucent: hsl(var(--sui-background-color-2-hsl) / 80%);
+  --sui-secondary-background-color: hsl(var(--sui-background-color-3-hsl));
+  --sui-secondary-background-color-translucent: hsl(var(--sui-background-color-3-hsl) / 80%);
+  --sui-tertiary-background-color: hsl(var(--sui-background-color-4-hsl));
+  --sui-tertiary-background-color-translucent: hsl(var(--sui-background-color-4-hsl) / 80%);
+  --sui-disabled-background-color: hsl(var(--sui-background-color-4-hsl));
+  --sui-error-background-color: hsl(
+    var(--sui-error-color-hue) var(--sui-alert-background-color-saturation)
+      var(--sui-alert-background-color-lightness)
   );
-  --warning-background-color: hsl(
-    var(--warning-color-hue) var(--alert-background-color-saturation)
-      var(--alert-background-color-lightness)
+  --sui-warning-background-color: hsl(
+    var(--sui-warning-color-hue) var(--sui-alert-background-color-saturation)
+      var(--sui-alert-background-color-lightness)
   );
-  --info-background-color: hsl(
-    var(--info-color-hue) var(--alert-background-color-saturation)
-      var(--alert-background-color-lightness)
+  --sui-info-background-color: hsl(
+    var(--sui-info-color-hue) var(--sui-alert-background-color-saturation)
+      var(--sui-alert-background-color-lightness)
   );
-  --success-background-color: hsl(
-    var(--success-color-hue) var(--alert-background-color-saturation)
-      var(--alert-background-color-lightness)
+  --sui-success-background-color: hsl(
+    var(--sui-success-color-hue) var(--sui-alert-background-color-saturation)
+      var(--sui-alert-background-color-lightness)
   );
-  --primary-border-color: hsl(var(--border-color-1-hsl));
-  --secondary-border-color: hsl(var(--border-color-2-hsl));
-  --control-border-color: hsl(var(--border-color-2-hsl));
-  --checkbox-border-color: hsl(var(--foreground-color-3-hsl));
-  --error-border-color: hsl(
-    var(--error-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  --sui-primary-border-color: hsl(var(--sui-border-color-1-hsl));
+  --sui-secondary-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-checkbox-border-color: hsl(var(--sui-foreground-color-3-hsl));
+  --sui-error-border-color: hsl(
+    var(--sui-error-color-hue) var(--sui-alert-border-color-saturation)
+      var(--sui-alert-border-color-lightness)
   );
-  --warning-border-color: hsl(
-    var(--warning-color-hue) var(--alert-border-color-saturation)
-      var(--alert-border-color-lightness)
+  --sui-warning-border-color: hsl(
+    var(--sui-warning-color-hue) var(--sui-alert-border-color-saturation)
+      var(--sui-alert-border-color-lightness)
   );
-  --info-border-color: hsl(
-    var(--info-color-hue) var(--alert-border-color-saturation) var(--alert-border-color-lightness)
+  --sui-info-border-color: hsl(
+    var(--sui-info-color-hue) var(--sui-alert-border-color-saturation)
+      var(--sui-alert-border-color-lightness)
   );
-  --success-border-color: hsl(
-    var(--success-color-hue) var(--alert-border-color-saturation)
-      var(--alert-border-color-lightness)
+  --sui-success-border-color: hsl(
+    var(--sui-success-color-hue) var(--sui-alert-border-color-saturation)
+      var(--sui-alert-border-color-lightness)
   );
-  --popup-shadow-color: hsl(var(--shadow-color) / 40%);
-  --popup-backdrop-color: hsl(var(--shadow-color) / 40%);
-  --font-family--default: "Merriweather Sans", sans-serif;
-  --font-size--xxx-large: 24px;
-  --font-size--xx-large: 20px;
-  --font-size--x-large: 18px;
-  --font-size--large: 16px;
-  --font-size--default: 14px;
-  --font-size--small: 12px;
-  --font-size--x-small: 10px;
-  --font-weight--normal: 300;
-  --font-weight--bold: 600;
-  --font-family--monospace: "Noto Sans Mono", monospace;
-  --font-size--monospace: 13px;
-  --control--small--border-width: 1px;
-  --control--small--border-radius: 2px;
-  --control--small--height: 24px;
-  --control--medium--border-width: 1px;
-  --control--medium--border-radius: 4px;
-  --control--medium--height: 32px;
-  --control--large--border-width: 1px;
-  --control--large--border-radius: 8px;
-  --control--large--height: 40px;
-  --button--small--border-radius: var(--control--small--border-radius);
-  --button--small--height: var(--control--small--height);
-  --button--medium--border-radius: var(--control--medium--border-radius);
-  --button--medium--height: var(--control--medium--height);
-  --button--large--border-radius: var(--control--large--border-radius);
-  --button--large--height: var(--control--large--height);
-  --option--small--border-radius: var(--control--small--border-radius);
-  --option--small--height: var(--control--small--height);
-  --option--medium--border-radius: var(--control--medium--border-radius);
-  --option--medium--height: var(--control--medium--height);
-  --option--large--border-radius: var(--control--large--border-radius);
-  --option--large--height: var(--control--large--height);
-  --input--small--border-radius: var(--control--small--border-radius);
-  --input--small--height: var(--control--small--height);
-  --input--medium--border-radius: var(--control--medium--border-radius);
-  --input--medium--height: var(--control--medium--height);
-  --input--large--border-radius: var(--control--large--border-radius);
-  --input--large--height: var(--control--large--height);
-  --tab--small--height: var(--control--small--height);
-  --tab--medium--height: var(--control--medium--height);
-  --tab--large--height: var(--control--large--height);
+  --sui-popup-shadow-color: hsl(var(--sui-shadow-color) / 40%);
+  --sui-popup-backdrop-color: hsl(var(--sui-shadow-color) / 40%);
+  --sui-font-family-default: "Merriweather Sans", sans-serif;
+  --sui-font-size-xxx-large: 24px;
+  --sui-font-size-xx-large: 20px;
+  --sui-font-size-x-large: 18px;
+  --sui-font-size-large: 16px;
+  --sui-font-size-default: 14px;
+  --sui-font-size-small: 12px;
+  --sui-font-size-x-small: 10px;
+  --sui-font-weight-normal: 300;
+  --sui-font-weight-bold: 600;
+  --sui-font-family-monospace: "Noto Sans Mono", monospace;
+  --sui-font-size-monospace: 13px;
+  --sui-line-height-default: 1.25;
+  --sui-line-height-compact: 1.5;
+  --sui-line-height-comfortable: 1.75;
+  --sui-control-small-border-width: 1px;
+  --sui-control-small-border-radius: 2px;
+  --sui-control-small-height: 24px;
+  --sui-control-medium-border-width: 1px;
+  --sui-control-medium-border-radius: 4px;
+  --sui-control-medium-height: 32px;
+  --sui-control-large-border-width: 1px;
+  --sui-control-large-border-radius: 8px;
+  --sui-control-large-height: 40px;
+  --sui-control-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-control-foreground-color: var(--sui-primary-foreground-color);
+  --sui-control-background-color: hsl(var(--sui-background-color-1-hsl));
+  --sui-control-font-family: var(--sui-font-family-default);
+  --sui-control-font-size: var(--sui-font-size-default);
+  --sui-control-line-height: var(--sui-line-height-default);
+  --sui-button-small-border-radius: var(--sui-control-small-border-radius);
+  --sui-button-small-height: var(--sui-control-small-height);
+  --sui-button-medium-border-radius: var(--sui-control-medium-border-radius);
+  --sui-button-medium-height: var(--sui-control-medium-height);
+  --sui-button-large-border-radius: var(--sui-control-large-border-radius);
+  --sui-button-large-height: var(--sui-control-large-height);
+  --sui-option-small-border-radius: var(--sui-control-small-border-radius);
+  --sui-option-small-height: var(--sui-control-small-height);
+  --sui-option-medium-border-radius: var(--sui-control-medium-border-radius);
+  --sui-option-medium-height: var(--sui-control-medium-height);
+  --sui-option-large-border-radius: var(--sui-control-large-border-radius);
+  --sui-option-large-height: var(--sui-control-large-height);
+  --sui-textbox-small-border-radius: var(--sui-control-small-border-radius);
+  --sui-textbox-small-height: var(--sui-control-small-height);
+  --sui-textbox-medium-border-radius: var(--sui-control-medium-border-radius);
+  --sui-textbox-medium-height: var(--sui-control-medium-height);
+  --sui-textbox-large-border-radius: var(--sui-control-large-border-radius);
+  --sui-textbox-large-height: var(--sui-control-large-height);
+  --sui-textbox-foreground-color: var(--sui-control-foreground-color);
+  --sui-textbox-background-color: var(--sui-control-background-color);
+  --sui-textbox-font-family: var(--sui-font-family-default);
+  --sui-textbox-font-size: var(--sui-font-size-default);
+  --sui-textbox-singleline-line-height: var(--sui-line-height-compact);
+  --sui-textbox-multiline-line-height: var(--sui-line-height-comfortable);
+  --sui-tab-small-height: var(--sui-control-small-height);
+  --sui-tab-medium-height: var(--sui-control-medium-height);
+  --sui-tab-large-height: var(--sui-control-large-height);
 }
 
 :global(.material-symbols-outlined) {
@@ -228,6 +246,7 @@
 }
 
 :global(*) {
+  overflow-anchor: none;
   scroll-behavior: smooth;
   box-sizing: border-box;
   outline-offset: 1px;
@@ -244,7 +263,7 @@
 }
 
 :global(:focus-visible) {
-  outline-color: var(--primary-accent-color-lighter);
+  outline-color: var(--sui-primary-accent-color-lighter);
 }
 
 :global(h1),
@@ -254,15 +273,15 @@
 :global(h5),
 :global(h6) {
   margin: 0;
-  font-weight: var(--font-weight--bold);
+  font-weight: var(--sui-font-weight-bold);
 }
 
 :global(strong) {
-  font-weight: var(--font-weight--bold);
+  font-weight: var(--sui-font-weight-bold);
 }
 
 :global(a) {
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
   text-decoration: none;
 }
 
@@ -272,28 +291,18 @@
   vertical-align: top;
 }
 
-:global(button),
-:global(input),
-:global(textarea),
-:global(select),
-:global(option) {
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
 :global(p),
 :global(li) {
-  line-height: 1.75;
+  line-height: var(--sui-line-height-comfortable);
 }
 
 :global(code),
 :global(pre) {
-  font-family: var(--font-family--monospace);
+  font-family: var(--sui-font-family-monospace);
 }
 
 :global(pre) {
-  line-height: 1.5;
+  line-height: var(--sui-line-height-compact);
   -webkit-user-select: text;
   user-select: text;
 }
@@ -309,7 +318,7 @@
   max-width: 100%;
   height: 100%;
   max-height: 100%;
-  color: inherit;
+  color: var(--sui-primary-foreground-color);
   background: transparent;
   -webkit-user-select: none;
   user-select: none;
@@ -326,14 +335,13 @@
   overflow: hidden;
   width: 100%;
   height: 100%;
-  color: var(--primary-foreground-color);
-  background-color: var(--primary-background-color);
-  font-family: var(--font-family--default);
-  font-size: var(--font-size--default);
-  font-weight: var(--font-weight--normal);
+  color: var(--sui-primary-foreground-color);
+  background-color: var(--sui-primary-background-color);
+  font-family: var(--sui-font-family-default);
+  font-size: var(--sui-font-size-default);
+  font-weight: var(--sui-font-weight-normal);
   -webkit-user-select: none;
   user-select: none;
   touch-action: none;
-  overflow-anchor: none;
   cursor: default;
 }</style>

package/package/components/util/popup.svelte

@@ -153,17 +153,17 @@
   position: fixed;
   overflow-y: auto;
   outline-width: 0 !important;
-  color: var(--primary-foreground-color);
-  background-color: var(--secondary-background-color-translucent);
+  color: var(--sui-primary-foreground-color);
+  background-color: var(--sui-secondary-background-color-translucent);
   backdrop-filter: blur(16px);
-  box-shadow: 0 8px 16px var(--popup-shadow-color);
+  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   will-change: opacity, transform;
   transition-property: opacity, transform;
 }
 .content.listbox, .content.menu {
   border-width: 1px;
   border-style: solid;
-  border-color: var(--secondary-border-color);
+  border-color: var(--sui-secondary-border-color);
   border-radius: 4px;
 }
 .content.listbox :global(.sui.listbox),

package/package/styles/core.scss

@@ -7,10 +7,15 @@
 @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block");
 
 .material-symbols-outlined {
-  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 300,
+    "GRAD" 0,
+    "opsz" 24;
 }
 
 * {
+  overflow-anchor: none;
   scroll-behavior: smooth;
   box-sizing: border-box;
   outline-offset: 1px;
@@ -27,7 +32,7 @@
 }
 
 :focus-visible {
-  outline-color: var(--primary-accent-color-lighter);
+  outline-color: var(--sui-primary-accent-color-lighter);
 }
 
 h1,
@@ -37,15 +42,15 @@ h4,
 h5,
 h6 {
   margin: 0;
-  font-weight: var(--font-weight--bold);
+  font-weight: var(--sui-font-weight-bold);
 }
 
 strong {
-  font-weight: var(--font-weight--bold);
+  font-weight: var(--sui-font-weight-bold);
 }
 
 a {
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
   text-decoration: none;
 }
 
@@ -55,28 +60,18 @@ iframe {
   vertical-align: top;
 }
 
-button,
-input,
-textarea,
-select,
-option {
-  font-family: inherit;
-  font-size: inherit;
-  color: inherit;
-}
-
 p,
 li {
-  line-height: 1.75;
+  line-height: var(--sui-line-height-comfortable);
 }
 
 code,
 pre {
-  font-family: var(--font-family--monospace);
+  font-family: var(--sui-font-family-monospace);
 }
 
 pre {
-  line-height: 1.5;
+  line-height: var(--sui-line-height-compact);
   -webkit-user-select: text;
   user-select: text;
 }
@@ -92,7 +87,7 @@ dialog {
   max-width: 100%;
   height: 100%;
   max-height: 100%;
-  color: inherit;
+  color: var(--sui-primary-foreground-color);
   background: transparent;
   -webkit-user-select: none;
   user-select: none;