Finetune theming

.changeset/early-years-accept.md

@@ -0,0 +1,21 @@
+---
+'@sl-design-system/breadcrumbs': minor
+'@sl-design-system/radio-group': minor
+'@sl-design-system/text-field': minor
+'@sl-design-system/text-area': minor
+'@sl-design-system/checkbox': minor
+'@sl-design-system/combobox': minor
+'@sl-design-system/listbox': minor
+'@sl-design-system/popover': minor
+'@sl-design-system/editor': minor
+'@sl-design-system/select': minor
+'@sl-design-system/switch': minor
+'@sl-design-system/panel': minor
+'@sl-design-system/form': minor
+'@sl-design-system/grid': minor
+'@sl-design-system/menu': minor
+'@sl-design-system/tabs': minor
+'@sl-design-system/tree': minor
+---
+
+Replace `--sl-size-borderWidth-subtle` with `--sl-size-borderWidth-default`

.changeset/vast-beers-attend.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/switch': patch
+---
+
+Minor style fixes & improvements

packages/components/breadcrumbs/src/breadcrumbs.scss

@@ -66,7 +66,7 @@ a {
   overflow: clip visible;
   padding: var(--sl-size-100);
   text-decoration: underline;
-  text-decoration-thickness: var(--sl-size-borderWidth-subtle);
+  text-decoration-thickness: var(--sl-size-borderWidth-default);
   text-overflow: ellipsis;
   text-underline-offset: var(--sl-size-025);
   white-space: nowrap;

packages/components/checkbox/src/checkbox.scss

@@ -146,7 +146,7 @@
   aspect-ratio: 1;
   background: color-mix(in srgb, var(--_bg-color), var(--_bg-mix-color) calc(100% * var(--_bg-opacity)));
   block-size: var(--sl-size-300);
-  border: var(--sl-size-borderWidth-subtle) solid var(--_border);
+  border: var(--sl-size-borderWidth-default) solid var(--_border);
   border-radius: var(--sl-size-borderRadius-default);
   box-sizing: border-box;
   display: inline-flex;

packages/components/combobox/src/combobox.scss

@@ -21,7 +21,7 @@ sl-text-field {
   max-inline-size: 100%;
 
   &:has(> sl-tag-list) {
-    padding-inline: calc(var(--sl-size-100) - var(--sl-size-borderWidth-subtle)) 0;
+    padding-inline: calc(var(--sl-size-100) - var(--sl-size-borderWidth-default)) 0;
   }
 }
 
@@ -38,7 +38,7 @@ sl-tag {
   outline-width: 0;
 
   &.focused {
-    outline: var(--sl-size-borderWidth-subtle) solid var(--sl-color-border-focused);
+    outline: var(--sl-size-borderWidth-default) solid var(--sl-color-border-focused);
   }
 }
 
@@ -50,7 +50,7 @@ sl-tag {
 
 [part='wrapper'] {
   background: var(--sl-elevation-surface-raised-default);
-  border: var(--sl-size-borderWidth-subtle) solid var(--sl-color-border-plain);
+  border: var(--sl-size-borderWidth-default) solid var(--sl-color-border-plain);
   border-radius: var(--sl-size-borderRadius-default);
   box-shadow: var(--sl-elevation-shadow-overlay);
   box-sizing: border-box;

packages/components/combobox/src/create-custom-option.scss

@@ -1,5 +1,5 @@
 :host {
-  border-block-end: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-subtle);
+  border-block-end: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-default);
   inline-size: 100%;
   margin-block-end: var(--sl-size-075);
   margin-inline: 0;

packages/components/combobox/src/selected-group.scss

@@ -3,7 +3,7 @@
 }
 
 :host([has-groups]) {
-  border-block-end: var(--sl-color-elevation-border-raised) solid var(--sl-size-borderWidth-subtle);
+  border-block-end: var(--sl-color-elevation-border-raised) solid var(--sl-size-borderWidth-default);
   margin-block-end: var(--sl-size-075);
   padding-block-end: var(--sl-size-100);
 
@@ -23,7 +23,7 @@
 }
 
 .other {
-  border-block-start: var(--sl-color-elevation-border-raised) solid var(--sl-size-borderWidth-subtle);
+  border-block-start: var(--sl-color-elevation-border-raised) solid var(--sl-size-borderWidth-default);
   margin-block: var(--sl-size-075) var(--sl-size-025);
   padding-block-start: var(--sl-size-175);
   padding-inline-start: var(--sl-size-300);

packages/components/editor/src/editor.scss

@@ -6,7 +6,7 @@
 
   background: var(--_background);
   background: color-mix(in srgb, var(--_bg-color), var(--_bg-mix-color) calc(100% * var(--_bg-opacity)));
-  border: var(--sl-size-borderWidth-subtle) solid var(--_border);
+  border: var(--sl-size-borderWidth-default) solid var(--_border);
   border-radius: var(--sl-size-borderRadius-default);
   color: var(--sl-color-foreground-plain);
   cursor: text;

packages/components/form/src/form.stories.ts

@@ -95,13 +95,14 @@ export const Reset: Story = {
   args: {
     reset: true,
     reportValidity: true,
-    fields: () =>
-      html` <sl-form-field hint="Has value on load" label="Text field">
-          <sl-text-field name="input" placeholder="Placeholder" required value="Value set initially"></sl-text-field>
-        </sl-form-field>
-        <sl-form-field hint="Has no value on load" label="Text field">
-          <sl-text-field name="input2" placeholder="Placeholder" required></sl-text-field>
-        </sl-form-field>`,
+    fields: () => html`
+      <sl-form-field hint="Has value on load" label="Text field">
+        <sl-text-field name="input" placeholder="Placeholder" required value="Value set initially"></sl-text-field>
+      </sl-form-field>
+      <sl-form-field hint="Has no value on load" label="Text field">
+        <sl-text-field name="input2" placeholder="Placeholder" required></sl-text-field>
+      </sl-form-field>
+    `,
     value: {
       input: 'Value set initially'
     }
@@ -157,29 +158,29 @@ export const Value: Story = {
 
 export const All: Story = {
   args: {
-    fields: () => html`
+    fields: ({ disabled }) => html`
       <sl-form-field hint="Hint text" label="Text field">
-        <sl-text-field name="textField" placeholder="Placeholder" required></sl-text-field>
+        <sl-text-field ?disabled=${disabled} name="textField" placeholder="Placeholder" required></sl-text-field>
       </sl-form-field>
 
       <sl-form-field hint="Hint text" label="Text area">
-        <sl-text-area name="textArea" placeholder="Placeholder" required></sl-text-area>
+        <sl-text-area ?disabled=${disabled} name="textArea" placeholder="Placeholder" required></sl-text-area>
       </sl-form-field>
 
       <sl-form-field hint="Hint text" label="Checkbox">
-        <sl-checkbox name="checkbox" required value="checked">Checkbox</sl-checkbox>
+        <sl-checkbox ?disabled=${disabled} name="checkbox" required value="checked">Checkbox</sl-checkbox>
       </sl-form-field>
 
       <sl-form-field hint="Hint text" label="Checkbox group">
-        <sl-checkbox-group name="checkboxGroup" required>
+        <sl-checkbox-group ?disabled=${disabled} name="checkboxGroup" required>
           <sl-checkbox value="0">Check me</sl-checkbox>
           <sl-checkbox value="1">No me</sl-checkbox>
           <sl-checkbox value="2">I was here first</sl-checkbox>
         </sl-checkbox-group>
       </sl-form-field>
 
       <sl-form-field hint="Hint text" label="Combobox single">
-        <sl-combobox name="comboboxSingle" placeholder="Single select" required>
+        <sl-combobox ?disabled=${disabled} name="comboboxSingle" placeholder="Single select" required>
           <sl-listbox>
             <sl-option>Option 1</sl-option>
             <sl-option>Option 2</sl-option>
@@ -190,7 +191,7 @@ export const All: Story = {
       </sl-form-field>
 
       <sl-form-field hint="Hint text" label="Combobox multiple">
-        <sl-combobox name="comboboxMultiple" multiple placeholder="Multiple select" required>
+        <sl-combobox ?disabled=${disabled} name="comboboxMultiple" multiple placeholder="Multiple select" required>
           <sl-listbox>
             <sl-option>Option 1</sl-option>
             <sl-option>Option 2</sl-option>
@@ -201,28 +202,35 @@ export const All: Story = {
       </sl-form-field>
 
       <sl-form-field hint="Hint text" label="Radio group">
-        <sl-radio-group name="radioGroup" required>
+        <sl-radio-group ?disabled=${disabled} name="radioGroup" required>
           <sl-radio value="1">One</sl-radio>
           <sl-radio value="2">Two</sl-radio>
           <sl-radio value="3">Three</sl-radio>
         </sl-radio-group>
       </sl-form-field>
 
       <sl-form-field hint="Hint text" label="Select">
-        <sl-select name="select" required>
+        <sl-select ?disabled=${disabled} name="select" required>
           <sl-option value="1">Option 1</sl-option>
           <sl-option value="2">Option 2</sl-option>
           <sl-option value="3">Option 3</sl-option>
         </sl-select>
       </sl-form-field>
 
       <sl-form-field hint="Hint text" label="Switch">
-        <sl-switch name="switch" reverse value="toggled">Toggle me</sl-switch>
+        <sl-switch ?disabled=${disabled} name="switch" reverse value="toggled">Toggle me</sl-switch>
       </sl-form-field>
     `
   }
 };
 
+export const AllDisabled: Story = {
+  args: {
+    ...All.args,
+    disabled: true
+  }
+};
+
 export const AllInvalid: Story = {
   args: {
     ...All.args,

packages/components/form/src/label.scss

@@ -5,10 +5,6 @@
   font-weight: var(--sl-text-typeset-fontWeight-demibold);
 }
 
-:host([disabled]) {
-  color: var(--sl-color-foreground-disabled);
-}
-
 .optional,
 .required {
   margin-inline-start: var(--sl-size-050);

packages/components/grid/src/grid.scss

@@ -2,7 +2,7 @@
 :host {
   --_border: var(--_border-width) solid var(--_border-color);
   --_border-color: var(--sl-color-border-plain);
-  --_border-width: var(--sl-size-borderWidth-subtle);
+  --_border-width: var(--sl-size-borderWidth-default);
   --_border-radius: var(--sl-size-borderRadius-default);
   --_cell-background: var(--sl-elevation-surface-raised-default-idle);
   --_cell-border: var(--_border-width) solid var(--_border-color);
@@ -100,8 +100,8 @@
   sl-scrollbar::before {
     background: var(--sl-color-grid-border);
     content: '';
-    inline-size: var(--sl-size-borderWidth-subtle);
-    inset: 0 auto 0 calc(var(--sl-size-borderWidth-subtle) * -1);
+    inline-size: var(--sl-size-borderWidth-default);
+    inset: 0 auto 0 calc(var(--sl-size-borderWidth-default) * -1);
     position: absolute;
   }
 }
@@ -138,8 +138,8 @@
   sl-scrollbar::after {
     background: var(--sl-color-grid-border);
     content: '';
-    inline-size: var(--sl-size-borderWidth-subtle);
-    inset: 0 calc(var(--sl-size-borderWidth-subtle) * -1) 0 auto;
+    inline-size: var(--sl-size-borderWidth-default);
+    inset: 0 calc(var(--sl-size-borderWidth-default) * -1) 0 auto;
     position: absolute;
   }
 }
@@ -171,15 +171,15 @@ thead {
   border-start-end-radius: var(--_border-radius);
   border-start-start-radius: var(--_border-radius);
   inset-block-start: 0;
-  max-inline-size: calc(var(--sl-grid-width) - var(--sl-size-borderWidth-subtle) * 2);
+  max-inline-size: calc(var(--sl-grid-width) - var(--sl-size-borderWidth-default) * 2);
   overflow-x: hidden;
   position: sticky;
   z-index: 1;
 }
 
 tbody {
   background-color: var(--sl-elevation-surface-raised-default-idle);
-  max-inline-size: calc(var(--sl-grid-width) - var(--sl-size-borderWidth-subtle) * 2);
+  max-inline-size: calc(var(--sl-grid-width) - var(--sl-size-borderWidth-default) * 2);
   min-block-size: calc(var(--sl-grid-tbody-min-height) + var(--_border-width));
   overflow: auto clip;
   overscroll-behavior: contain auto;
@@ -406,14 +406,14 @@ a[class^='skip-link'] {
 
 tfoot {
   inset-block-end: 0;
-  max-inline-size: calc(var(--sl-grid-width) - var(--sl-size-borderWidth-subtle) * 2);
+  max-inline-size: calc(var(--sl-grid-width) - var(--sl-size-borderWidth-default) * 2);
   overflow: hidden;
   position: sticky;
 
   td {
     display: flex;
     flex: 1;
-    max-inline-size: calc(var(--sl-grid-width) - var(--sl-size-borderWidth-subtle) * 2);
+    max-inline-size: calc(var(--sl-grid-width) - var(--sl-size-borderWidth-default) * 2);
     padding: 0 !important;
   }
 

packages/components/listbox/src/listbox.scss

@@ -12,7 +12,7 @@
 
 ::slotted(hr) {
   border: 0;
-  border-block-start: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-subtle);
+  border-block-start: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-default);
   margin: var(--sl-size-075) 0;
   padding: 0;
 }

packages/components/listbox/src/option-group-header.scss

@@ -10,7 +10,7 @@
 }
 
 .divider {
-  border-block-start: var(--sl-color-elevation-border-raised) solid var(--sl-size-borderWidth-subtle);
+  border-block-start: var(--sl-color-elevation-border-raised) solid var(--sl-size-borderWidth-default);
   margin-block-start: var(--sl-size-100);
   padding-block-start: var(--sl-size-100);
 }

packages/components/listbox/src/option-group.scss

@@ -5,7 +5,7 @@
 }
 
 :host(:not(:first-of-type)) {
-  border-block-start: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-subtle);
+  border-block-start: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-default);
   margin-block-start: var(--sl-size-075);
   padding-block-start: var(--sl-size-100);
 }

packages/components/menu/src/menu-item.scss

@@ -111,5 +111,5 @@ sl-icon[name='chevron-right'] {
 
 slot[name='submenu']::slotted(sl-menu) {
   // Make sure the first menu item in the nested menu aligns horizontally
-  margin-block-start: calc((var(--sl-size-100) + var(--sl-size-borderWidth-subtle)) * -1);
+  margin-block-start: calc((var(--sl-size-100) + var(--sl-size-borderWidth-default)) * -1);
 }

packages/components/menu/src/menu.scss

@@ -1,6 +1,6 @@
 :host {
   background: var(--sl-elevation-surface-base-default);
-  border: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-subtle);
+  border: var(--sl-size-borderWidth-default) solid var(--sl-color-border-plain);
   border-radius: var(--sl-size-borderRadius-default);
   box-shadow: var(--sl-elevation-shadow-md);
   box-sizing: border-box;
@@ -103,14 +103,14 @@
 }
 
 ::slotted(sl-menu-item-group:not(:first-child)) {
-  border-block-start: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-subtle);
+  border-block-start: var(--sl-size-borderWidth-default) solid var(--sl-color-border-plain);
   margin-block-start: var(--sl-size-075);
   padding-block-start: var(--sl-size-100);
 }
 
 ::slotted(hr) {
   border: 0;
-  border-block-start: var(--sl-color-border-plain) solid var(--sl-size-borderWidth-subtle);
+  border-block-start: var(--sl-size-borderWidth-default) solid var(--sl-color-border-plain);
   margin: var(--sl-size-075) 0;
   padding: 0;
 }

packages/components/panel/src/panel.scss

@@ -3,7 +3,7 @@
   --sl-panel-titles-order: column;
 
   background: var(--sl-elevation-surface-raised-default-idle);
-  border: var(--sl-color-border-bold) solid var(--sl-size-borderWidth-subtle);
+  border: var(--sl-color-border-bold) solid var(--sl-size-borderWidth-default);
   border-radius: var(--sl-size-borderRadius-md);
   display: flex;
   flex-direction: column;

packages/components/popover/src/popover.scss

@@ -3,7 +3,7 @@
   --_arrow-inline-size: var(--sl-size-200);
 
   background: var(--sl-elevation-surface-raised-default);
-  border: var(--sl-size-borderWidth-subtle) solid var(--sl-color-border-plain);
+  border: var(--sl-size-borderWidth-default) solid var(--sl-color-border-plain);
   border-radius: var(--sl-size-borderRadius-default);
   box-shadow: var(--sl-elevation-shadow-overlay);
   box-sizing: border-box;
@@ -27,7 +27,7 @@
    */
   @supports not selector(:popover-open) {
     background: var(--sl-elevation-surface-raised-default) !important;
-    border: var(--sl-size-borderWidth-subtle) solid var(--sl-color-border-plain) !important;
+    border: var(--sl-size-borderWidth-default) solid var(--sl-color-border-plain) !important;
     color: var(--sl-color-foreground-plain) !important;
     margin: 0 !important;
     overflow: visible !important;

packages/components/radio-group/src/radio.scss

@@ -108,7 +108,7 @@
   aspect-ratio: 1;
   background: color-mix(in srgb, var(--_bg-color), var(--_bg-mix-color) calc(100% * var(--_bg-opacity)));
   block-size: var(--sl-size-300);
-  border: var(--sl-size-borderWidth-subtle) solid var(--_border);
+  border: var(--sl-size-borderWidth-default) solid var(--_border);
   border-radius: 50%;
   box-sizing: border-box;
   display: inline-flex;