@dodlhuat/basix 1.4.3 → 1.5.0

package/README.md

@@ -1,4 +1,4 @@
-# Basix 1.4.3
+# Basix 1.5.0
 
 Basix is intended as a starter for the rapid development of a design. Each design element can be added individually to
 include only the data required. It is using plain javascript / typescript and therefore is not dependent on any plugin.
@@ -9,6 +9,40 @@ A demo can be found here: <a href="http://www.andibauer.at/basix/" target="_blan
 
 ## Migration Guide
 
+### 1.4.3 → 1.5.0
+
+#### Breaking changes
+
+**Font icons removed — SVG sprite is now the only icon system**
+
+The `.icon` base class, all `.icon-*` glyph classes, and the bundled `MaterialSymbolsOutlined.woff2` font have been removed from `icons.scss` and `fonts/`. Every component that rendered a font-icon glyph now renders an inline `<svg><use href="svg-icons/icons.svg#name"/></svg>` instead. If your own markup used the font classes directly, replace them:
+
+```html
+<!-- Before (1.4.3) -->
+<span class="icon icon-close"></span>
+
+<!-- After (1.5.0) -->
+<svg class="icon-svg"><use href="svg-icons/icons.svg#close"/></svg>
+```
+
+A handful of glyph names used by the font don't exist under the same name in the sprite; use the sprite's equivalents:
+
+| Font glyph | SVG sprite equivalent |
+|---|---|
+| `icon-navigate_before` / `icon-navigate_next` | `chevron_left` / `chevron_right` |
+| `icon-expand_more` | `keyboard_arrow_down` |
+| `icon-light` / `icon-dark` | `light_mode` / `dark_mode` |
+
+#### Other changes
+
+- **`BottomSheet`, `Lightbox`, `GroupPicker`, `Modal`, `Toast`, `SidebarNav`, `Carousel`, `Select`** — gained an `iconBasePath` option (default `'svg-icons/'`) controlling where each component looks for the SVG sprite, matching the existing `Calendar`/`Stepper` convention.
+- **`PushMenu.init()`** now accepts an optional `{ iconBasePath }` argument (previously took no arguments).
+- **`Lightbox.bind()`** now accepts an optional second `iconBasePath` argument, threaded through to every lightbox it opens.
+- **New design tokens** in `parameters.scss`: a 3-step tint scale (`$tint-subtle`/`$tint-medium`/`$tint-strong`) for state-color backgrounds, and an expanded, properly-ordered radius scale (`$radius-xs/sm/md/lg/panel/xl`). Several components' corner radii and background tints shifted slightly to align to these scales — no component's visual language changed, just consolidated toward consistent steps.
+- **New shared mixins** in `mixins.scss`: `float-panel` (floating dropdown/menu/popover shell), `hide-scrollbar`, `tinted-tag` (badge/chip tint), `muted-icon-color` (close-button hover).
+- **Bug fix** — `DatePicker`'s day-of-week headers and clock labels referenced an undefined `--text-muted` custom property (silently falling back to inherited text color). Fixed to use the existing `--secondary-text` token.
+- **CI** — added a GitHub Actions workflow (lint, typecheck, build, and a check that committed `js/`/`css` build output matches source) and `sass` is now a real `devDependency` instead of relying on a global install.
+
 ### 1.4.2 → 1.4.3
 
 No breaking changes.
@@ -124,20 +158,20 @@ The Card component is a CSS-only component that creates visually contained conte
 
 ### Icons
 
-Basix ships icons in two formats:
-
-**Font icons** — a reduced Google Material Icon font (~5.5 KB vs the full 242.5 KB). Use the `.icon` class with a modifier.
+Basix ships the full Google Material Icon set (~6,400+ icons) as a single `svg-icons/icons.svg` sprite. Reference any icon by name with `<use>`, and style size/color with the `.icon-svg` class — it inherits `currentColor`, so the icon follows the surrounding text color automatically.
 
 ``` html
-<span class="icon icon-home"></span>
+<svg class="icon-svg"><use href="svg-icons/icons.svg#home"/></svg>
 ```
 
-**SVG sprite** — the full Google Material Icon set (~6,400+ icons) in a single `svg-icons/icons.svg` sprite. Preferred for consistent sizing, `currentColor` inheritance, and use inside JS-generated markup.
+Components that render icons from JS (`Modal`, `Toast`, `BottomSheet`, `Lightbox`, `Carousel`, `GroupPicker`, `SidebarNav`, `Calendar`, `Stepper`, `PushMenu`, `Select`, `ContextMenu`) accept an `iconBasePath` option (default `'svg-icons/'`) so you can point them at the sprite's location relative to your page:
 
-``` html
-<svg class="icon-svg"><use href="svg-icons/icons.svg#home"/></svg>
+``` js
+new Modal({ content: '…', iconBasePath: '../svg-icons/' });
 ```
 
+A couple of purely-decorative icons that need to render with zero markup (the `Breadcrumb` separator, the native `<select>` dropdown arrow) use `mask-image` against small standalone SVGs (`svg-icons/chevron_right.svg`, `svg-icons/keyboard_arrow_down.svg`) instead of the sprite, since sprite symbols are only instantiable via `<use>`.
+
 ---
 
 ## Forms
@@ -443,7 +477,7 @@ The Chips component displays small interactive elements like tags or filters. CS
     <div class="chip clickable">Clickable Chip</div>
     <div class="chip closeable">
         Closeable Chip
-        <button class="close"><span class="icon icon-close"></span></button>
+        <button class="close"><svg class="icon-svg"><use href="svg-icons/icons.svg#close"/></svg></button>
     </div>
 </div>
 ```

package/css/alert.scss

@@ -17,7 +17,7 @@ $alert-border-width: 4px;
   }
 
   .alert-close:hover {
-    background: color-mix(in srgb, $accent 12%, transparent);
+    background: color-mix(in srgb, $accent $tint-medium, transparent);
   }
 }
 
@@ -48,28 +48,28 @@ $alert-border-width: 4px;
   &-info {
     @include alert-variant(
       var(--accent-color),
-      color-mix(in srgb, var(--accent-color) 8%, var(--background))
+      color-mix(in srgb, var(--accent-color) $tint-subtle, var(--background))
     );
   }
 
   &-success {
     @include alert-variant(
       var(--success),
-      color-mix(in srgb, var(--success) 8%, var(--background))
+      color-mix(in srgb, var(--success) $tint-subtle, var(--background))
     );
   }
 
   &-warning {
     @include alert-variant(
       var(--warning),
-      color-mix(in srgb, var(--warning) 8%, var(--background))
+      color-mix(in srgb, var(--warning) $tint-subtle, var(--background))
     );
   }
 
   &-error {
     @include alert-variant(
       var(--error),
-      color-mix(in srgb, var(--error) 8%, var(--background))
+      color-mix(in srgb, var(--error) $tint-subtle, var(--background))
     );
   }
 
@@ -110,28 +110,28 @@ $alert-border-width: 4px;
     &-info {
       @include alert-variant(
         var(--accent-color),
-        color-mix(in srgb, var(--accent-color) 10%, var(--background))
+        color-mix(in srgb, var(--accent-color) $tint-medium, var(--background))
       );
     }
 
     &-success {
       @include alert-variant(
         var(--success),
-        color-mix(in srgb, var(--success) 10%, var(--background))
+        color-mix(in srgb, var(--success) $tint-medium, var(--background))
       );
     }
 
     &-warning {
       @include alert-variant(
         var(--warning),
-        color-mix(in srgb, var(--warning) 10%, var(--background))
+        color-mix(in srgb, var(--warning) $tint-medium, var(--background))
       );
     }
 
     &-error {
       @include alert-variant(
         var(--error),
-        color-mix(in srgb, var(--error) 10%, var(--background))
+        color-mix(in srgb, var(--error) $tint-medium, var(--background))
       );
     }
   }

package/css/badge.scss

@@ -1,10 +1,6 @@
 @use "properties";
 @use "parameters" as *;
-
-@mixin badge-variant($color, $bg) {
-  background: $bg;
-  color: $color;
-}
+@use "mixins" as *;
 
 .badge {
   display: inline-flex;
@@ -24,35 +20,19 @@
   color: var(--secondary-text);
 
   &-info {
-    @include badge-variant(
-      var(--accent-color),
-      color-mix(in srgb, var(--accent-color) 12%, var(--background))
-    );
-    border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
+    @include tinted-tag(var(--accent-color));
   }
 
   &-success {
-    @include badge-variant(
-      var(--success),
-      color-mix(in srgb, var(--success) 12%, var(--background))
-    );
-    border-color: color-mix(in srgb, var(--success) 20%, transparent);
+    @include tinted-tag(var(--success));
   }
 
   &-warning {
-    @include badge-variant(
-      var(--warning),
-      color-mix(in srgb, var(--warning) 12%, var(--background))
-    );
-    border-color: color-mix(in srgb, var(--warning) 20%, transparent);
+    @include tinted-tag(var(--warning));
   }
 
   &-error {
-    @include badge-variant(
-      var(--error),
-      color-mix(in srgb, var(--error) 12%, var(--background))
-    );
-    border-color: color-mix(in srgb, var(--error) 20%, transparent);
+    @include tinted-tag(var(--error));
   }
 
   &-solid {

package/css/bottom-sheet.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 .bottom-sheet-wrapper {
   position: fixed;
@@ -142,12 +143,7 @@
 
   .close {
     cursor: pointer;
-    color: var(--secondary-text);
-    transition: color 0.15s ease;
-
-    &:hover {
-      color: var(--primary-text);
-    }
+    @include muted-icon-color;
   }
 }
 

package/css/breadcrumb.scss

@@ -19,11 +19,19 @@
     min-width: 0;
 
     + li::before {
-      content: "\e409";
-      font-family: "Material Symbols Outlined 24pt";
-      font-size: 1.125rem;
-      line-height: 1;
-      color: var(--divider);
+      content: "";
+      display: inline-block;
+      width: 1.125rem;
+      height: 1.125rem;
+      background-color: var(--divider);
+      mask-image: url("../svg-icons/chevron_right.svg");
+      -webkit-mask-image: url("../svg-icons/chevron_right.svg");
+      mask-repeat: no-repeat;
+      -webkit-mask-repeat: no-repeat;
+      mask-position: center;
+      -webkit-mask-position: center;
+      mask-size: contain;
+      -webkit-mask-size: contain;
       flex-shrink: 0;
       user-select: none;
       pointer-events: none;
@@ -38,12 +46,13 @@
       color: var(--secondary-text);
       text-decoration: none;
       padding: 0.25rem 0.375rem;
-      border-radius: $radius-sm;
+      border-radius: $radius-xs;
       white-space: nowrap;
       transition: color 0.15s ease, background 0.15s ease;
 
-      .icon {
-        font-size: 1rem;
+      .icon-svg {
+        width: 1rem;
+        height: 1rem;
       }
 
       &:hover {
@@ -53,7 +62,7 @@
 
       &:focus-visible {
         @include focus-ring(-1px);
-        border-radius: $radius-sm;
+        border-radius: $radius-xs;
       }
     }
 

package/css/calendar.scss

@@ -2,10 +2,10 @@
 @use "mixins" as *;
 
 .cal {
-  --cal-spacing-xs: 4px;
-  --cal-spacing-sm: 8px;
-  --cal-spacing-md: 12px;
-  --cal-spacing-lg: 16px;
+  --cal-spacing-xs: #{calc($spacing * 0.25)};
+  --cal-spacing-sm: #{calc($spacing * 0.5)};
+  --cal-spacing-md: #{calc($spacing * 0.75)};
+  --cal-spacing-lg: #{$spacing};
 
   --cal-bg:          var(--background);
   --cal-bg-alt:      var(--secondary-background);
@@ -324,10 +324,10 @@
   &--cont-after  { border-radius: var(--cal-radius-sm) 0 0 var(--cal-radius-sm); }
   &--cont-before#{&}--cont-after { border-radius: 0; }
 
-  &.badge-success { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--cal-bg)); }
-  &.badge-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, var(--cal-bg)); }
-  &.badge-error   { border-left-color: var(--error);   background: color-mix(in srgb, var(--error)   14%, var(--cal-bg)); }
-  &.badge-info    { border-left-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 14%, var(--cal-bg)); }
+  &.badge-success { border-left-color: var(--success); background: color-mix(in srgb, var(--success) $tint-medium, var(--cal-bg)); }
+  &.badge-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) $tint-medium, var(--cal-bg)); }
+  &.badge-error   { border-left-color: var(--error);   background: color-mix(in srgb, var(--error) $tint-medium, var(--cal-bg)); }
+  &.badge-info    { border-left-color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) $tint-medium, var(--cal-bg)); }
 }
 
 .cal__week-row > .cal__span-bar {
@@ -545,7 +545,7 @@
   padding: 3px 6px;
   overflow: hidden;
   cursor: pointer;
-  background: color-mix(in srgb, var(--cal-accent) 10%, var(--cal-bg));
+  background: color-mix(in srgb, var(--cal-accent) $tint-medium, var(--cal-bg));
   color: var(--cal-text);
   border-left: 3px solid var(--cal-accent);
   z-index: 1;
@@ -569,19 +569,19 @@
 
   &.badge-success {
     border-left-color: var(--success);
-    background: color-mix(in srgb, var(--success) 10%, var(--cal-bg));
+    background: color-mix(in srgb, var(--success) $tint-medium, var(--cal-bg));
   }
   &.badge-warning {
     border-left-color: var(--warning);
-    background: color-mix(in srgb, var(--warning) 10%, var(--cal-bg));
+    background: color-mix(in srgb, var(--warning) $tint-medium, var(--cal-bg));
   }
   &.badge-error {
     border-left-color: var(--error);
-    background: color-mix(in srgb, var(--error) 10%, var(--cal-bg));
+    background: color-mix(in srgb, var(--error) $tint-medium, var(--cal-bg));
   }
   &.badge-info {
     border-left-color: var(--accent-color);
-    background: color-mix(in srgb, var(--accent-color) 10%, var(--cal-bg));
+    background: color-mix(in srgb, var(--accent-color) $tint-medium, var(--cal-bg));
   }
 }
 
@@ -625,7 +625,7 @@
   }
 
   &.is-today {
-    background: color-mix(in srgb, var(--cal-accent) 4%, var(--cal-bg));
+    background: color-mix(in srgb, var(--cal-accent) $tint-subtle, var(--cal-bg));
   }
 }
 
@@ -887,7 +887,7 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .cal__body {
-    animation: cal-slide-in 0.25s cubic-bezier(0.2, 0, 0, 1);
+    animation: bx-fade-slide-up 0.25s cubic-bezier(0.2, 0, 0, 1);
   }
 
   .cal__day,
@@ -908,17 +908,6 @@
   }
 }
 
-@keyframes cal-slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 @keyframes cal-cell-in {
   from {
     opacity: 0;

package/css/carousel.scss

@@ -71,9 +71,9 @@
               opacity 0.2s ease;
   -webkit-tap-highlight-color: transparent;
 
-  .icon {
-    font-size: 1.5rem;
-    line-height: 1;
+  .icon-svg {
+    width: 1.5rem;
+    height: 1.5rem;
   }
 
   &:hover {

package/css/chart.scss

@@ -76,7 +76,7 @@
   }
 
   .chart-area {
-    animation: chart-fade-in 0.8s ease forwards;
+    animation: bx-fade-in 0.8s ease forwards;
   }
 
   .chart-point-dot {
@@ -224,11 +224,6 @@
   to   { stroke-dashoffset: 0; }
 }
 
-@keyframes chart-fade-in {
-  from { opacity: 0; }
-  to   { opacity: 1; }
-}
-
 @keyframes chart-grow-y {
   from { transform: scaleY(0); }
   to   { transform: scaleY(1); }

package/css/checkbox.scss

@@ -30,7 +30,7 @@
     width: $spacing;
     height: $spacing;
     border: 2px solid var(--divider);
-    border-radius: $radius-sm;
+    border-radius: $radius-xs;
     background-color: var(--background);
     margin-top: 2px;
     transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;

package/css/chips.scss

@@ -41,12 +41,12 @@
       }
 
       &.selected {
-        background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+        background: color-mix(in srgb, var(--accent-color) $tint-medium, var(--background));
         color: var(--accent-color);
-        border-color: color-mix(in srgb, var(--accent-color) 25%, transparent);
+        border-color: color-mix(in srgb, var(--accent-color) $tint-strong, transparent);
 
         &:hover {
-          background: color-mix(in srgb, var(--accent-color) 18%, var(--background));
+          background: color-mix(in srgb, var(--accent-color) $tint-strong, var(--background));
         }
       }
     }
@@ -73,17 +73,15 @@
         transition: background 0.15s ease, color 0.15s ease;
 
         &:hover {
-          background: color-mix(in srgb, var(--primary-text) 12%, transparent);
+          background: color-mix(in srgb, var(--primary-text) $tint-medium, transparent);
           color: var(--primary-text);
         }
 
         &:active {
-          background: color-mix(in srgb, var(--primary-text) 18%, transparent);
+          background: color-mix(in srgb, var(--primary-text) $tint-strong, transparent);
         }
 
-        .icon,
         .icon-svg {
-          font-size: 0.8rem;
           width: 0.8rem;
           height: 0.8rem;
         }
@@ -91,45 +89,37 @@
     }
 
     &-accent {
-      background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
-      color: var(--accent-color);
-      border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
+      @include tinted-tag(var(--accent-color));
 
       &.closeable button:hover {
-        background: color-mix(in srgb, var(--accent-color) 15%, transparent);
+        background: color-mix(in srgb, var(--accent-color) $tint-strong, transparent);
         color: var(--accent-color);
       }
     }
 
     &-success {
-      background: color-mix(in srgb, var(--success) 12%, var(--background));
-      color: var(--success);
-      border-color: color-mix(in srgb, var(--success) 20%, transparent);
+      @include tinted-tag(var(--success));
 
       &.closeable button:hover {
-        background: color-mix(in srgb, var(--success) 15%, transparent);
+        background: color-mix(in srgb, var(--success) $tint-strong, transparent);
         color: var(--success);
       }
     }
 
     &-warning {
-      background: color-mix(in srgb, var(--warning) 12%, var(--background));
-      color: var(--warning);
-      border-color: color-mix(in srgb, var(--warning) 20%, transparent);
+      @include tinted-tag(var(--warning));
 
       &.closeable button:hover {
-        background: color-mix(in srgb, var(--warning) 15%, transparent);
+        background: color-mix(in srgb, var(--warning) $tint-strong, transparent);
         color: var(--warning);
       }
     }
 
     &-error {
-      background: color-mix(in srgb, var(--error) 12%, var(--background));
-      color: var(--error);
-      border-color: color-mix(in srgb, var(--error) 20%, transparent);
+      @include tinted-tag(var(--error));
 
       &.closeable button:hover {
-        background: color-mix(in srgb, var(--error) 15%, transparent);
+        background: color-mix(in srgb, var(--error) $tint-strong, transparent);
         color: var(--error);
       }
     }

package/css/code-viewer.scss

@@ -30,7 +30,7 @@
   color: #fff;
   border: none;
   padding: calc($spacing * 0.375) calc($spacing * 0.75);
-  border-radius: $radius-sm;
+  border-radius: $radius-xs;
   cursor: pointer;
   font-size: 0.75rem;
   transition: background 0.2s;

package/css/color-picker.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 $thumb-size:        18px;
 $thumb-size-touch:  22px;
@@ -9,15 +10,12 @@ $preview-size:      40px;
 
 .color-picker {
   width: 100%;
-  background: var(--background);
-  border: 1px solid var(--divider);
-  border-radius: $radius-lg;
+  @include float-panel($radius-lg);
   padding: $spacing;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: calc($spacing * 0.75);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 // ─── Saturation / brightness field ────────────────────────────────────────────
@@ -232,7 +230,7 @@ $preview-size:      40px;
 
   &:focus {
     border-color: var(--accent-color);
-    box-shadow: 0 0 0 2px var(--accent-color-tint);
+    @include focus-glow($tint: 12%, $size: 2px);
   }
 }
 

package/css/context-menu.scss

@@ -1,18 +1,13 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 .context-menu {
   position: fixed;
   z-index: 9999;
   min-width: 200px;
   padding: calc($spacing * 0.375) 0;
-  background: var(--background);
-  border: 1px solid var(--divider);
-  border-radius: $radius-panel;
-  box-shadow:
-    0 8px 32px rgba(0, 0, 0, 0.12),
-    0 2px 8px rgba(0, 0, 0, 0.08),
-    0 1px 2px rgba(0, 0, 0, 0.04);
+  @include float-panel;
   list-style: none;
   margin: 0;
   opacity: 0;
@@ -108,7 +103,7 @@
 
     &:hover,
     &.is-focused {
-      background: color-mix(in srgb, var(--error) 8%, var(--background));
+      background: color-mix(in srgb, var(--error) $tint-subtle, var(--background));
       color: var(--error);
 
       .context-menu-icon {

package/css/datepicker.scss

@@ -62,7 +62,7 @@
 
 .datepicker-day-header {
   font-size: 0.875rem;
-  color: var(--text-muted);
+  color: var(--secondary-text);
   font-weight: 500;
   padding: calc($spacing / 2) 0;
 }
@@ -200,7 +200,7 @@
 
 .datepicker-clock-display-segment {
   cursor: pointer;
-  color: var(--text-muted);
+  color: var(--secondary-text);
   border-radius: calc($border-radius / 2);
   padding: 0 calc($spacing / 8);
   transition: color 0.2s, background-color 0.2s;
@@ -215,7 +215,7 @@
 }
 
 .datepicker-clock-display-separator {
-  color: var(--text-muted);
+  color: var(--secondary-text);
 }
 
 .datepicker-clock-face {
@@ -271,7 +271,7 @@
     width: 26px;
     height: 26px;
     font-size: 0.75rem;
-    color: var(--text-muted);
+    color: var(--secondary-text);
   }
 
   &.selected {

package/css/defaults.scss

@@ -88,4 +88,29 @@ code.code {
 
 .flex {
   display: flex;
+}
+
+@keyframes bx-fade-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+@keyframes bx-fade-slide-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes placeholder-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
 }