@sveltia/ui 0.7.1 → 0.7.2

package/package/components/button/button.svelte

@@ -127,10 +127,24 @@
   on:select
 >
   <slot name="start-icon" />
-  {#if label}
-    <span class="label">{label}</span>
+  {#if variant === 'link'}
+    {#if label}
+      <span class="label">
+        {label}
+      </span>
+    {:else}
+      <span class="label">
+        <slot />
+      </span>
+    {/if}
+  {:else}
+    {#if label}
+      <span class="label">
+        {label}
+      </span>
+    {/if}
+    <slot />
   {/if}
-  <slot />
   <slot name="end-icon" />
 </button>
 
@@ -231,7 +245,11 @@ button:global(.link) {
   height: auto !important;
   color: var(--sui-primary-accent-color-text);
 }
-button:global(.link):hover, button:global(.link):focus, button:global(.link):active {
+button:global(.link) :global(.label) {
+  line-height: var(--sui-line-height-compact);
+  white-space: normal;
+}
+button:global(.link):hover :global(.label), button:global(.link):focus :global(.label), button:global(.link):active :global(.label) {
   text-decoration: underline;
 }
 button:global(.small) {

package/package/components/checkbox/checkbox.svelte

@@ -164,7 +164,7 @@
   transition: all 200ms;
 }
 .checkbox :global(button) :global(.icon) {
-  font-size: calc(var(--sui-checkbox-height) - 4px);
+  font-size: calc(var(--sui-checkbox-height) - 2px);
 }
 .checkbox :global(button[aria-checked="true"]) {
   border-color: var(--sui-primary-accent-color);

package/package/components/switch/switch.svelte

@@ -132,7 +132,7 @@ span {
   align-items: center;
   border-width: 1.5px;
   border-style: solid;
-  border-color: var(--sui-control-border-color);
+  border-color: var(--sui-checkbox-border-color);
   border-radius: var(--sui-checkbox-height);
   background-color: var(--sui-control-background-color);
   transition: all 200ms;
@@ -142,7 +142,7 @@ span::before {
   width: calc(var(--sui-checkbox-height) - 6px);
   height: calc(var(--sui-checkbox-height) - 6px);
   border-radius: var(--sui-checkbox-height);
-  background-color: var(--sui-control-border-color);
+  background-color: var(--sui-checkbox-border-color);
   transition: all 200ms;
   content: "";
 }</style>

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

@@ -96,7 +96,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 54%;
   --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%;
   --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -129,7 +129,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%;
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%;
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%;
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 35%;
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 46%;
   --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%;
   --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%;
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -248,7 +248,7 @@
   --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
   --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
   --sui-control-large-height: 48px;
-  --sui-control-border-color: hsl(var(--sui-border-color-1-hsl));
+  --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-4-hsl));
   --sui-control-font-family: var(--sui-font-family-default);
@@ -267,18 +267,18 @@
   --sui-button-background-color: var(--sui-control-background-color);
   --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
   --sui-checkbox-height: 20px;
-  --sui-checkbox-border-color: var(--sui-control-border-color);
+  --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-checkbox-background-color: var(--sui-control-background-color);
   --sui-option-border-radius: var(--sui-control-medium-border-radius);
   --sui-option-padding: var(--sui-control-medium-padding);
   --sui-option-height: var(--sui-control-medium-height);
   --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
-  --sui-listbox-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-listbox-border-color: var(--sui-control-border-color);
   --sui-listbox-foreground-color: var(--sui-control-foreground-color);
   --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
   --sui-textbox-height: var(--sui-control-medium-height);
-  --sui-textbox-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-textbox-border-color: var(--sui-control-border-color);
   --sui-textbox-foreground-color: var(--sui-control-foreground-color);
   --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-textbox-font-family: var(--sui-font-family-default);

package/package/styles/variables.scss

@@ -10,7 +10,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 5% 96%; // secondary
   --sui-background-color-4-hsl: var(--sui-base-hue) 5% 94%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 5% 74%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 65%; // control
+  --sui-border-color-1-hsl: var(--sui-base-hue) 5% 54%; // control
   --sui-border-color-2-hsl: var(--sui-base-hue) 5% 74%; // primary
   --sui-border-color-3-hsl: var(--sui-base-hue) 5% 70%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -45,7 +45,7 @@
   --sui-background-color-3-hsl: var(--sui-base-hue) 10% 14%; // secondary
   --sui-background-color-4-hsl: var(--sui-base-hue) 10% 16%; // tertiary/disabled
   --sui-background-color-5-hsl: var(--sui-base-hue) 10% 26%; // highlight
-  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 35%; // control
+  --sui-border-color-1-hsl: var(--sui-base-hue) 10% 46%; // control
   --sui-border-color-2-hsl: var(--sui-base-hue) 10% 26%; // primary
   --sui-border-color-3-hsl: var(--sui-base-hue) 10% 22%; // secondary
   --sui-shadow-color: var(--sui-base-hue) 10% 0%;
@@ -173,7 +173,7 @@
   --sui-control-large-border-radius: calc(var(--sui-control-large-height) / 8);
   --sui-control-large-padding: 0 calc((var(--sui-control-large-height) / 3));
   --sui-control-large-height: 48px;
-  --sui-control-border-color: hsl(var(--sui-border-color-1-hsl));
+  --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-4-hsl));
   --sui-control-font-family: var(--sui-font-family-default);
@@ -191,10 +191,10 @@
   --sui-button-large-height: var(--sui-control-large-height);
   --sui-button-border-color: var(--sui-control-border-color);
   --sui-button-background-color: var(--sui-control-background-color);
-  // Checkbox
+  // Checkbox, radio button, switch
   --sui-checkbox-border-radius: var(--sui-control-medium-border-radius);
   --sui-checkbox-height: 20px;
-  --sui-checkbox-border-color: var(--sui-control-border-color);
+  --sui-checkbox-border-color: hsl(var(--sui-border-color-1-hsl));
   --sui-checkbox-background-color: var(--sui-control-background-color);
   // Option & menu item
   --sui-option-border-radius: var(--sui-control-medium-border-radius);
@@ -202,13 +202,13 @@
   --sui-option-height: var(--sui-control-medium-height);
   // Listbox
   --sui-listbox-border-radius: var(--sui-control-medium-border-radius);
-  --sui-listbox-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-listbox-border-color: var(--sui-control-border-color);
   --sui-listbox-foreground-color: var(--sui-control-foreground-color);
   --sui-listbox-background-color: hsl(var(--sui-background-color-1-hsl));
   // Textbox: singleline & multiline text fields
   --sui-textbox-border-radius: var(--sui-control-medium-border-radius);
   --sui-textbox-height: var(--sui-control-medium-height);
-  --sui-textbox-border-color: hsl(var(--sui-border-color-2-hsl));
+  --sui-textbox-border-color: var(--sui-control-border-color);
   --sui-textbox-foreground-color: var(--sui-control-foreground-color);
   --sui-textbox-background-color: hsl(var(--sui-background-color-1-hsl));
   --sui-textbox-font-family: var(--sui-font-family-default);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.7.1",
+  "version": "0.7.2",
   "license": "MIT",
   "type": "module",
   "publishConfig": {