@sveltia/ui 0.5.0 → 0.6.1

package/package/components/alert/alert.svelte

@@ -28,28 +28,28 @@
   align-items: center;
   gap: var(--gap, 8px);
   padding: var(--padding, 8px);
-  border-width: var(--border-width, var(--control--medium--border-width));
+  border-width: var(--border-width, var(--sui-control-medium-border-width));
   border-style: var(--border-style, solid);
-  border-radius: var(--border-radius, var(--control--medium--border-radius));
-  font-size: var(--font-size, var(--font-size--default));
+  border-radius: var(--border-radius, var(--sui-control-medium-border-radius));
+  font-size: var(--font-size, var(--sui-font-size-default));
 }
 .alert.error {
-  border-color: var(--error-border-color);
-  color: var(--error-foreground-color);
-  background-color: var(--error-background-color);
+  border-color: var(--sui-error-border-color);
+  color: var(--sui-error-foreground-color);
+  background-color: var(--sui-error-background-color);
 }
 .alert.warning {
-  border-color: var(--warning-border-color);
-  color: var(--warning-foreground-color);
-  background-color: var(--warning-background-color);
+  border-color: var(--sui-warning-border-color);
+  color: var(--sui-warning-foreground-color);
+  background-color: var(--sui-warning-background-color);
 }
 .alert.info {
-  border-color: var(--info-border-color);
-  color: var(--info-foreground-color);
-  background-color: var(--info-background-color);
+  border-color: var(--sui-info-border-color);
+  color: var(--sui-info-foreground-color);
+  background-color: var(--sui-info-background-color);
 }
 .alert.success {
-  border-color: var(--success-border-color);
-  color: var(--success-foreground-color);
-  background-color: var(--success-background-color);
+  border-color: var(--sui-success-border-color);
+  color: var(--sui-success-foreground-color);
+  background-color: var(--sui-success-background-color);
 }</style>

package/package/components/button/button.svelte

@@ -119,10 +119,13 @@
   border-style: solid;
   border-color: transparent;
   padding: 0;
-  color: inherit;
+  color: var(--sui-control-foreground-color);
   background-color: transparent;
   box-shadow: none;
-  font: inherit;
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
+  font-weight: normal;
   text-align: left;
   cursor: pointer;
   transition: all 200ms;
@@ -144,72 +147,72 @@ button[disabled] {
 button:global(.primary), button:global(.secondary), button:global(.tertiary), button:global(.ghost) {
   justify-content: center;
   border-width: 1px;
-  border-radius: var(--button--medium--border-radius);
-  padding: var(--button--medium--padding, 0 8px);
-  height: var(--button--medium--height);
+  border-radius: var(--sui-button-medium-border-radius);
+  padding: var(--sui-button-medium-padding, 0 8px);
+  height: var(--sui-button-medium-height);
 }
 button:global(.primary) :global(.label:only-child), button:global(.secondary) :global(.label:only-child), button:global(.tertiary) :global(.label:only-child), button:global(.ghost) :global(.label:only-child) {
   padding: 0 4px;
 }
 button:global(.primary) {
-  border-color: var(--control-border-color);
-  color: var(--primary-accent-color-foreground);
-  background-color: var(--primary-accent-color);
+  border-color: var(--sui-control-border-color);
+  color: var(--sui-primary-accent-color-foreground);
+  background-color: var(--sui-primary-accent-color);
 }
 button:global(.primary):hover, button:global(.primary):focus-visible {
-  background-color: var(--primary-accent-color-lighter);
+  background-color: var(--sui-primary-accent-color-lighter);
 }
 button:global(.primary):active {
-  background-color: var(--primary-accent-color-darker);
+  background-color: var(--sui-primary-accent-color-darker);
 }
 button:global(.secondary) {
-  border-color: var(--primary-accent-color);
-  color: var(--primary-accent-color-lighter);
-  background-color: var(--tertiary-background-color);
+  border-color: var(--sui-primary-accent-color);
+  color: var(--sui-primary-accent-color-lighter);
+  background-color: var(--sui-tertiary-background-color);
 }
 button:global(.secondary):hover, button:global(.secondary):focus-visible {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 button:global(.secondary)[aria-pressed=true] {
-  background-color: var(--primary-accent-color);
+  background-color: var(--sui-primary-accent-color);
 }
 button:global(.tertiary) {
-  border-color: var(--control-border-color);
-  color: var(--highlight-foreground-color);
-  background-color: var(--tertiary-background-color);
+  border-color: var(--sui-control-border-color);
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-tertiary-background-color);
 }
 button:global(.tertiary):hover, button:global(.tertiary):focus-visible {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 button:global(.tertiary)[aria-pressed=true] {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 button:global(.ghost):hover, button:global(.ghost):focus-visible {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 button:global(.ghost)[aria-pressed=true] {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 button:global(.danger) {
-  background-color: var(--error-background-color);
+  background-color: var(--sui-error-background-color);
 }
 button:global(.large) {
-  height: var(--button--large--height);
+  height: var(--sui-button-large-height);
 }
 button:global(.small) {
-  padding: var(--button--small--padding, 0 8px);
-  height: var(--button--small--height);
-  font-size: var(--font-size--small);
+  padding: var(--sui-button-small-padding, 0 8px);
+  height: var(--sui-button-small-height);
+  font-size: var(--sui-font-size-small);
 }
 button:global(.small) :global(.icon) {
-  font-size: var(--font-size--large);
+  font-size: var(--sui-font-size-large);
 }
 button:global(.pill) {
-  border-radius: var(--button--medium--pill--height, 16px);
-  padding: var(--button--medium--pill--padding, 0 16px);
+  border-radius: var(--sui-button-medium-pill-height, 16px);
+  padding: var(--sui-button-medium-pill-padding, 0 16px);
 }
 button:global(.link) {
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
 }
 button:global(.iconic) {
   justify-content: center;

package/package/components/button/select-button-group.svelte

@@ -57,7 +57,7 @@
 }
 .select-button-group :global(button) {
   border-radius: 0;
-  color: var(--secondary-foreground-color);
+  color: var(--sui-secondary-foreground-color);
 }
 .select-button-group :global(button):first-child {
   border-radius: 4px 0 0 4px;
@@ -69,6 +69,6 @@
   border-radius: 0 4px 4px 0;
 }
 .select-button-group :global(button[aria-checked="true"]) {
-  color: var(--highlight-foreground-color);
-  background-color: var(--highlight-background-color);
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-highlight-background-color);
 }</style>

package/package/components/calendar/calendar.svelte

@@ -195,17 +195,17 @@
   align-items: center;
   width: 24px;
   height: 24px;
-  font-size: var(--font-size--small);
+  font-size: var(--sui-font-size-small);
 }
 .grid div.weekday {
-  color: var(--secondary-foreground-color);
+  color: var(--sui-secondary-foreground-color);
 }
 .grid div.other-month {
-  color: var(--tertiary-foreground-color);
+  color: var(--sui-tertiary-foreground-color);
 }
 .grid div.today :global(button) {
-  color: var(--highlight-foreground-color);
-  background-color: var(--primary-accent-color);
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-primary-accent-color);
 }
 .grid div :global(button) {
   justify-content: center;
@@ -214,15 +214,15 @@
   border-radius: 50%;
 }
 .grid div :global(button):hover {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 .grid div :global(button):focus {
   border-width: 1px;
-  border-color: var(--primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-lighter);
 }
 
 .footer :global(button) {
-  font-size: var(--font-size--small);
+  font-size: var(--sui-font-size-small);
 }
 
 .popup-inner {

package/package/components/checkbox/checkbox.svelte

@@ -94,7 +94,10 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  color: inherit;
+  color: var(--sui-control-foreground-color);
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
@@ -103,30 +106,30 @@
   cursor: default;
 }
 .checkbox.disabled label {
-  color: var(--disabled-foreground-color);
+  color: var(--sui-disabled-foreground-color);
 }
 .checkbox :global(button) {
   align-items: center;
   justify-content: center;
   overflow: hidden;
   border-width: 2px;
-  border-color: var(--checkbox-border-color);
+  border-color: var(--sui-checkbox-border-color);
   border-radius: 4px;
   width: 20px;
   height: 20px;
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
   transition: all 200ms;
 }
 .checkbox :global(button) :global(.icon) {
   font-size: 20px;
 }
 .checkbox :global(button[aria-checked="true"]) {
-  border-color: var(--primary-accent-color-lighter);
-  color: var(--control-background-color);
-  background-color: var(--primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-lighter);
+  color: var(--sui-control-background-color);
+  background-color: var(--sui-primary-accent-color-lighter);
 }
 .checkbox :global(button[aria-checked="mixed"]) {
-  color: var(--checkbox-border-color);
+  color: var(--sui-checkbox-border-color);
 }
 .checkbox :global(button[aria-checked="false"]) {
   color: transparent;

package/package/components/dialog/dialog.svelte

@@ -217,7 +217,7 @@
   justify-content: center;
   align-items: center;
   outline: 0;
-  background-color: var(--popup-backdrop-color);
+  background-color: var(--sui-popup-backdrop-color);
 }
 dialog.open form {
   opacity: 1;
@@ -247,9 +247,9 @@ dialog form {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
-  background-color: var(--secondary-background-color-translucent);
+  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;
 }
@@ -281,12 +281,12 @@ dialog.x-large form {
   box-sizing: content-box;
   margin: 0 16px;
   border-width: 0 0 1px;
-  border-color: var(--secondary-border-color);
+  border-color: var(--sui-secondary-border-color);
   padding: 16px 8px;
   height: 32px;
 }
 .header .title {
-  font-size: var(--font-size--large);
+  font-size: var(--sui-font-size-large);
 }
 
 .footer {

package/package/components/divider/divider.svelte

@@ -25,7 +25,7 @@
 
 <style>.divider {
   flex: none;
-  background-color: var(--secondary-border-color);
+  background-color: var(--sui-secondary-border-color);
 }
 .divider[aria-orientation=horizontal] {
   height: 1px;

package/package/components/drawer/drawer.svelte

@@ -201,7 +201,7 @@
 <style>dialog {
   overflow: hidden;
   outline: 0;
-  background-color: var(--popup-backdrop-color);
+  background-color: var(--sui-popup-backdrop-color);
 }
 dialog.open form {
   opacity: 1;
@@ -232,9 +232,9 @@ dialog form {
   display: flex;
   flex-direction: column;
   border-radius: 4px;
-  background-color: var(--secondary-background-color-translucent);
+  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;
 }
@@ -330,12 +330,12 @@ dialog.horizontal.x-large form {
   box-sizing: content-box;
   margin: 0 16px;
   border-width: 0 0 1px;
-  border-color: var(--secondary-border-color);
+  border-color: var(--sui-secondary-border-color);
   padding: 16px 8px;
   height: 32px;
 }
 .header .title {
-  font-size: var(--font-size--large);
+  font-size: var(--sui-font-size-large);
 }
 
 .footer {

package/package/components/listbox/listbox.svelte

@@ -41,13 +41,17 @@
 <style>[role=listbox] {
   display: flex;
   flex-direction: column;
-  color: inherit;
   margin: 0;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--sui-control-border-color);
   border-radius: 4px;
   padding: 4px;
   min-width: 160px;
+  color: var(--sui-control-foreground-color);
+  background-color: var(--sui-control-background-color);
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
 }
 [role=listbox] :global([role="separator"]) {
   margin: 4px;
@@ -55,7 +59,7 @@
 [role=listbox]:global(.tabs) {
   padding: 0;
   border-width: 0 1px 0 0;
-  border-color: var(--control-border-color);
+  border-color: var(--sui-control-border-color);
 }
 [role=listbox]:global(.tabs) :global(.option button) {
   justify-content: flex-start;
@@ -64,11 +68,11 @@
   padding: 0 12px;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
-  height: var(--tab--medium--height);
+  height: var(--sui-tab-medium-height);
 }
 [role=listbox]:global(.tabs) :global(.option button) :global(.icon) {
   display: none;
 }
 [role=listbox]:global(.tabs) :global(.option button[aria-selected="true"]) {
-  border-color: var(--primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-lighter);
 }</style>

package/package/components/listbox/option-group.svelte

@@ -42,6 +42,6 @@
 
 .label {
   margin: 8px;
-  color: var(--secondary-foreground-color);
-  font-size: var(--font-size--small);
+  color: var(--sui-secondary-foreground-color);
+  font-size: var(--sui-font-size-small);
 }</style>

package/package/components/listbox/option.svelte

@@ -84,14 +84,14 @@
   border-radius: 4px;
   padding: 0 8px 0 16px;
   width: 100%;
-  height: var(--option--medium--height);
+  height: var(--sui-option-medium-height);
   white-space: nowrap;
 }
 .option :global(.focused),
 .option :global([role="option"]:hover) {
-  color: var(--highlight-foreground-color);
-  background-color: var(--highlight-background-color);
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-highlight-background-color);
 }
 .option :global([role="option"][aria-selected="true"]) :global(.icon) {
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
 }</style>

package/package/components/menu/menu-item.svelte

@@ -86,14 +86,14 @@
   padding: 0 16px;
   width: 100%;
   min-width: 160px;
-  height: var(--option--medium--height);
+  height: var(--sui-option-medium-height);
 }
 .menuitem :global(button[aria-checked="true"]) :global(.icon) {
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
 }
 .menuitem :global(button:hover) {
-  color: var(--highlight-foreground-color);
-  background-color: var(--highlight-background-color);
+  color: var(--sui-highlight-foreground-color);
+  background-color: var(--sui-highlight-background-color);
 }
 .menuitem:hover > :global([role="menu"]) {
   opacity: 1;

package/package/components/menu/menu.svelte

@@ -36,7 +36,7 @@
   flex-direction: column;
   margin: 0;
   border-width: 1px;
-  border-color: var(--secondary-border-color);
+  border-color: var(--sui-secondary-border-color);
   border-radius: 4px;
   padding: 4px;
 }

package/package/components/radio/radio.svelte

@@ -83,7 +83,10 @@
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  color: inherit;
+  color: var(--sui-control-foreground-color);
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
@@ -92,17 +95,17 @@
   cursor: default;
 }
 .radio.disabled label {
-  color: var(--disabled-foreground-color);
+  color: var(--sui-disabled-foreground-color);
 }
 .radio :global(button) {
   justify-content: center;
   overflow: hidden;
   border-width: 2px;
-  border-color: var(--checkbox-border-color);
+  border-color: var(--sui-checkbox-border-color);
   border-radius: 24px;
   width: 20px;
   height: 20px;
-  color: var(--primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
   transition: all 200ms;
 }
 .radio :global(button) :global(.icon) {
@@ -110,8 +113,8 @@
   font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
 }
 .radio :global(button[aria-checked="true"]) {
-  border-color: var(--primary-accent-color-lighter);
-  color: var(--primary-accent-color-lighter);
+  border-color: var(--sui-primary-accent-color-lighter);
+  color: var(--sui-primary-accent-color-lighter);
 }
 .radio :global(button[aria-checked="false"]) {
   color: transparent;

package/package/components/select/combobox.svelte

@@ -138,10 +138,10 @@
   display: flex;
   align-items: center;
   position: relative;
-  min-width: var(--combobox-min-width, 160px);
+  min-width: var(--sui-combobox-min-width, 160px);
 }
 .combobox :global(.icon) {
-  font-size: var(--font-size--xx-large);
+  font-size: var(--sui-font-size-xx-large);
   opacity: 0.5;
 }
 .combobox > :global(.icon) {
@@ -163,12 +163,16 @@
   display: flex;
   align-items: center;
   border-width: 1px;
-  border-color: var(--control-border-color);
+  border-color: var(--sui-control-border-color);
   border-radius: 4px;
   padding: 0 32px 0 8px;
   width: 100%;
-  height: var(--input--medium--height);
-  background-color: var(--disabled-background-color);
+  height: var(--sui-textbox-medium-height);
+  color: var(--sui-control-foreground-color);
+  background-color: var(--sui-disabled-background-color);
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
   -webkit-user-select: none;
   user-select: none;
   cursor: pointer;
@@ -178,10 +182,10 @@
   font-style: italic;
 }
 .combobox div[role=combobox]:hover, .combobox div[role=combobox]:focus {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 .combobox div[role=combobox][aria-disabled=true] {
-  background-color: var(--disabled-background-color);
+  background-color: var(--sui-disabled-background-color);
   opacity: 0.4;
   cursor: default;
 }
@@ -200,10 +204,11 @@
   position: fixed;
   z-index: 100;
   border-radius: 4px;
-  box-shadow: 0 8px 16px var(--popup-shadow-color);
+  box-shadow: 0 8px 16px var(--sui-popup-shadow-color);
   overflow: auto;
-  background-color: var(--secondary-background-color);
+  background-color: var(--sui-secondary-background-color);
   backdrop-filter: blur(16px);
+  /* Add .1s delay before the position can be determined */
   transition: opacity 100ms 100ms;
 }
 .combobox + :global([role="listbox"]:not(.open)) {

package/package/components/slider/slider.svelte

@@ -288,10 +288,10 @@
 
 .base {
   position: relative;
-  width: var(--slider-base-width, 200px);
+  width: var(--sui-slider-base-width, 200px);
   height: 8px;
   border-radius: 8px;
-  background-color: var(--control-border-color);
+  background-color: var(--sui-control-border-color);
 }
 
 .bar {
@@ -299,17 +299,17 @@
   top: 0;
   height: 8px;
   border-radius: 8px;
-  background-color: var(--primary-accent-color-lighter);
+  background-color: var(--sui-primary-accent-color-lighter);
 }
 
 [role=slider] {
   position: absolute;
   top: 0;
-  border: 2px solid var(--primary-accent-color-lighter);
+  border: 2px solid var(--sui-primary-accent-color-lighter);
   border-radius: 8px;
   width: 16px;
   height: 16px;
-  background-color: var(--primary-accent-color-foreground);
+  background-color: var(--sui-primary-accent-color-foreground);
   cursor: pointer;
   transform: translate(-8px, -4px);
 }
@@ -318,5 +318,5 @@
   position: absolute;
   top: 12px;
   transform: translateX(-50%);
-  font-size: var(--font-size--x-small);
+  font-size: var(--sui-font-size-x-small);
 }</style>

package/package/components/switch/switch.svelte

@@ -47,10 +47,12 @@
   border-style: solid;
   border-color: transparent;
   padding: 0;
-  color: inherit;
+  color: var(--sui-control-foreground-color);
   background-color: transparent;
   box-shadow: none;
-  font: inherit;
+  font-family: var(--sui-control-font-family);
+  font-size: var(--sui-control-font-size);
+  line-height: var(--sui-control-line-height);
   text-align: left;
   cursor: pointer;
   -webkit-user-select: none;
@@ -69,15 +71,15 @@ button:focus-visible span::before {
   outline-offset: 1px;
   outline-width: 2px;
   outline-style: solid;
-  outline-color: var(--primary-accent-color-lighter);
+  outline-color: var(--sui-primary-accent-color-lighter);
 }
 button[aria-checked=true] span {
-  background-color: var(--primary-accent-color);
+  background-color: var(--sui-primary-accent-color);
   border-color: transparent;
 }
 button[aria-checked=true] span::before {
   transform: translateX(22px);
-  background-color: var(--primary-accent-color-foreground);
+  background-color: var(--sui-primary-accent-color-foreground);
 }
 
 span {
@@ -87,18 +89,18 @@ span {
   padding: 2px;
   display: inline-block;
   border-radius: 16px;
-  background-color: var(--control-border-color);
+  background-color: var(--sui-control-border-color);
   transition: all 200ms;
 }
 span:hover {
-  background-color: var(--highlight-background-color);
+  background-color: var(--sui-highlight-background-color);
 }
 span::before {
   display: inline-block;
   width: 16px;
   height: 16px;
   border-radius: 16px;
-  background-color: var(--primary-accent-color-foreground);
+  background-color: var(--sui-primary-accent-color-foreground);
   transition: all 200ms;
   content: "";
 }</style>

package/package/components/table/table.svelte

@@ -39,6 +39,6 @@
 .table:global(.data) :global(.table-col-header),
 .table:global(.data) :global(.table-row-header),
 .table:global(.data) :global(.table-cell) {
-  border: 1px solid var(--secondary-border-color);
+  border: 1px solid var(--sui-secondary-border-color);
   padding: 8px 8px;
 }</style>