@dodlhuat/basix 1.4.2 → 1.5.0

package/css/icons.scss

@@ -1,328 +1,8 @@
-@font-face {
-  font-family: "Material Symbols Outlined 24pt";
-  src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2");
+.icon-svg {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  fill: currentColor;
+  flex-shrink: 0;
+  vertical-align: middle;
 }
-
-.icon {
-  font-family: "Material Symbols Outlined 24pt", serif;
-  font-style: normal;
-  font-weight: normal;
-  font-variant: normal;
-  text-transform: none;
-  line-height: 1;
-  font-size: 24px;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.icon-delete::before {
-  content: "\e872";
-}
-
-.icon-search::before {
-  content: "\e8b6";
-}
-
-.icon-splitscreen_vertical_add::before {
-  content: "\f4fc";
-}
-
-.icon-splitscreen_add::before {
-  content: "\f4fd";
-}
-
-.icon-push_pin::before {
-  content: "\f10d";
-}
-
-.icon-block::before {
-  content: "\e033";
-}
-
-.icon-check_circle::before {
-  content: "\e86c";
-}
-
-.icon-stars::before {
-  content: "\e8d0";
-}
-
-.icon-support::before {
-  content: "\ef73";
-}
-
-.icon-refresh::before {
-  content: "\e5d5";
-}
-
-.icon-sync::before {
-  content: "\e627";
-}
-
-.icon-language::before {
-  content: "\e894";
-}
-
-.icon-article::before {
-  content: "\ef42";
-}
-
-.icon-list_alt::before {
-  content: "\e0ee";
-}
-
-.icon-add_box::before {
-  content: "\e146";
-}
-
-.icon-disabled_by_default::before {
-  content: "\f230";
-}
-
-.icon-help_center::before {
-  content: "\f1c0";
-}
-
-.icon-pages::before {
-  content: "\e7f9";
-}
-
-.icon-add_photo_alternate::before {
-  content: "\e43e";
-}
-
-.icon-calendar_today::before {
-  content: "\e935";
-}
-
-.icon-assignment_turned_in::before {
-  content: "\e862";
-}
-
-.icon-finance::before {
-  content: "\e6bf";
-}
-
-.icon-save::before {
-  content: "\e161";
-}
-
-.icon-folder::before {
-  content: "\e2c7";
-}
-
-.icon-folder_off::before {
-  content: "\eb83";
-}
-
-.icon-folder_open::before {
-  content: "\e2c8";
-}
-
-.icon-mail::before {
-  content: "\e0be";
-}
-
-.icon-attach_file::before {
-  content: "\e226";
-}
-
-.icon-chat_bubble::before {
-  content: "\e0ca";
-}
-
-.icon-cases::before {
-  content: "\e992";
-}
-
-.icon-send::before {
-  content: "\e163";
-}
-
-.icon-bookmark::before {
-  content: "\e866";
-}
-
-.icon-label::before {
-  content: "\e892";
-}
-
-.icon-filter_alt::before {
-  content: "\ef4f";
-}
-
-.icon-filter_alt_off::before {
-  content: "\eb32";
-}
-
-.icon-notifications_active::before {
-  content: "\e7f7";
-}
-
-.icon-more_horiz::before {
-  content: "\e5d3";
-}
-
-.icon-more_vert::before {
-  content: "\e5d4";
-}
-
-.icon-navigate_before::before {
-  content: "\e408";
-}
-
-.icon-navigate_next::before {
-  content: "\e409";
-}
-
-.icon-keyboard_double_arrow_left::before {
-  content: "\eac3";
-}
-
-.icon-keyboard_double_arrow_right::before {
-  content: "\eac9";
-}
-
-.icon-first_page::before {
-  content: "\e5dc";
-}
-
-.icon-last_page::before {
-  content: "\e5dd";
-}
-
-.icon-expand_less::before {
-  content: "\e5ce";
-}
-
-.icon-expand_more::before {
-  content: "\e5cf";
-}
-
-.icon-zoom_in_map::before {
-  content: "\eb2d";
-}
-
-.icon-zoom_out_map::before {
-  content: "\e56b";
-}
-
-.icon-drag_pan::before {
-  content: "\f71e";
-}
-
-.icon-format_list_bulleted::before {
-  content: "\e241";
-}
-
-.icon-format_list_numbered::before {
-  content: "\e242";
-}
-
-.icon-check::before {
-  content: "\e5ca";
-}
-
-.icon-remove::before {
-  content: "\e15b";
-}
-
-.icon-add::before {
-  content: "\e145";
-}
-
-.icon-close::before {
-  content: "\e14c";
-}
-
-.icon-format_bold::before {
-  content: "\e238";
-}
-
-.icon-format_italic::before {
-  content: "\e23f";
-}
-
-.icon-format_underlined::before {
-  content: "\e249";
-}
-
-.icon-home::before {
-  content: "\e88a";
-}
-
-.icon-favorite::before {
-  content: "\e87d";
-}
-
-.icon-edit::before {
-  content: "\e150";
-}
-
-.icon-layers::before {
-  content: "\e53b";
-}
-
-.icon-cloud::before {
-  content: "\e2bd";
-}
-
-.icon-print::before {
-  content: "\e555";
-}
-
-.icon-share::before {
-  content: "\e80d";
-}
-
-.icon-tune::before {
-  content: "\e429";
-}
-
-.icon-power_settings_new::before {
-  content: "\e8ac";
-}
-
-.icon-timeline::before {
-  content: "\e922";
-}
-
-.icon-bar_chart::before {
-  content: "\e26b";
-}
-
-.icon-bar_chart_4_bars::before {
-  content: "\f681";
-}
-
-.icon-finance_mode::before {
-  content: "\ef92";
-}
-
-.icon-database::before {
-  content: "\f20e";
-}
-
-.icon-settings::before {
-  content: "\e8b8";
-}
-
-.icon-person::before {
-  content: "\e7fd";
-}
-
-.icon-menu_open::before {
-  content: "\e7ad";
-}
-
-.icon-menu::before {
-  content: "\e7ac";
-}
-
-.icon-light::before {
-  content: "\e81a";
-}
-
-.icon-dark::before {
-  content: "\ef44";
-}

package/css/lightbox.scss

@@ -59,9 +59,9 @@
   transition: background 0.2s ease, color 0.2s ease, opacity 0.3s ease;
   -webkit-tap-highlight-color: transparent;
 
-  .icon {
-    font-size: 1.25rem;
-    line-height: 1;
+  .icon-svg {
+    width: 1.25rem;
+    height: 1.25rem;
   }
 
   &:hover {
@@ -219,9 +219,9 @@
               transform 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 {
@@ -247,7 +247,7 @@
     width: 2rem;
     height: 2rem;
 
-    .icon { font-size: 1.25rem; }
+    .icon-svg { width: 1.25rem; height: 1.25rem; }
   }
 
   .lightbox-prev { left: calc($spacing * 0.5); }

package/css/mixins.scss

@@ -1,3 +1,5 @@
+@use "parameters" as *;
+
 @mixin focus-ring($offset: 2px) {
   outline: 2px solid var(--accent-color);
   outline-offset: $offset;
@@ -6,3 +8,78 @@
 @mixin focus-glow($tint: 35%, $size: 3px, $color: var(--accent-color)) {
   box-shadow: 0 0 0 #{$size} color-mix(in srgb, #{$color} #{$tint}, transparent);
 }
+
+@mixin field-shadow-rest() {
+  box-shadow:
+    inset 0 1.5px 4px rgba(0, 0, 0, 0.05),
+    0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+@mixin field-shadow-hover() {
+  box-shadow:
+    inset 0 1.5px 4px rgba(0, 0, 0, 0.045),
+    0 2px 8px rgba(0, 0, 0, 0.07);
+}
+
+@mixin field-shadow-focus($color: var(--accent-color), $ambient: true) {
+  @if $ambient {
+    box-shadow:
+      inset 0 1px 3px rgba(0, 0, 0, 0.03),
+      0 0 0 3.5px color-mix(in srgb, #{$color} 13%, transparent),
+      0 2px 12px rgba(0, 0, 0, 0.06);
+  } @else {
+    box-shadow:
+      inset 0 1px 3px rgba(0, 0, 0, 0.03),
+      0 0 0 3.5px color-mix(in srgb, #{$color} 13%, transparent);
+  }
+}
+
+// Shared shell for floating panels (dropdowns, menus, popovers): background,
+// border and elevation. Radius stays per-caller since components intentionally
+// vary there.
+@mixin float-panel($radius: $radius-panel) {
+  background: var(--background);
+  border: 1px solid var(--divider);
+  border-radius: $radius;
+  box-shadow:
+    0 8px 32px rgba(0, 0, 0, 0.11),
+    0 2px 8px rgba(0, 0, 0, 0.06);
+}
+
+@mixin hide-scrollbar {
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+// Tinted "tag" look shared by badges and chips: a translucent tint of $color
+// over the background, plus a matching tinted border.
+@mixin tinted-tag($color, $bg-tint: $tint-medium, $border-tint: $tint-strong) {
+  background: color-mix(in srgb, #{$color} #{$bg-tint}, var(--background));
+  color: $color;
+  border-color: color-mix(in srgb, #{$color} #{$border-tint}, transparent);
+}
+
+// Loading shimmer, shared by the .placeholder utility and any component's
+// own skeleton state. Relies on the global `placeholder-shimmer` keyframe.
+@mixin shimmer-bg {
+  background: linear-gradient(
+    90deg,
+    var(--divider) 25%,
+    var(--secondary-background) 50%,
+    var(--divider) 75%
+  );
+  background-size: 200% 100%;
+  animation: placeholder-shimmer 1.5s ease-in-out infinite;
+}
+
+@mixin muted-icon-color {
+  color: var(--secondary-text);
+  transition: color 0.15s ease;
+
+  &:hover {
+    color: var(--primary-text);
+  }
+}

package/css/modal.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 .modal-wrapper {
   position: fixed;
@@ -58,12 +59,7 @@
     right: $spacing;
     cursor: pointer;
     z-index: 1;
-    color: var(--secondary-text);
-    transition: color 0.15s ease;
-
-    &:hover {
-      color: var(--primary-text);
-    }
+    @include muted-icon-color;
   }
 
   .header {
@@ -122,13 +118,13 @@
     width: 100%;
     max-width: 100%;
     max-height: 85vh;
-    border-radius: calc($border-radius * 3) calc($border-radius * 3) 0 0;
+    border-radius: $radius-xl $radius-xl 0 0;
     border-bottom: none;
     transform: translateY(20px);
     padding-bottom: calc($spacing + env(safe-area-inset-bottom));
 
     .header {
-      border-radius: calc($border-radius * 3) calc($border-radius * 3) 0 0;
+      border-radius: $radius-xl $radius-xl 0 0;
     }
 
     .footer {

package/css/parameters.scss

@@ -3,7 +3,13 @@ $border-radius: 0.4rem;
 $form-height: 2rem;
 $shadow: 0 1px 2px rgba(56, 65, 74, .15);
 
-$radius-sm:    calc($border-radius / 2);
+$radius-xs:    calc($border-radius * 0.5);
+$radius-sm:    calc($border-radius * 0.75);
+$radius-md:    calc($border-radius * 1.5);
 $radius-lg:    calc($border-radius * 2);
 $radius-panel: calc($border-radius * 2.5);
-$radius-xl:    calc($border-radius * 4);
+$radius-xl:    calc($border-radius * 4);
+
+$tint-subtle: 8%;
+$tint-medium: 12%;
+$tint-strong: 20%;

package/css/placeholder.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 .placeholder {
   display: inline-block;
@@ -7,14 +8,7 @@
   min-height: calc($spacing * 0.65);
   margin-right: calc($spacing / 2);
   border-radius: $border-radius;
-  background: linear-gradient(
-    90deg,
-    var(--divider) 25%,
-    var(--secondary-background) 50%,
-    var(--divider) 75%
-  );
-  background-size: 200% 100%;
-  animation: placeholder-shimmer 1.5s ease-in-out infinite;
+  @include shimmer-bg;
 
   @for $i from 1 through 12 {
     &.w-#{$i} {
@@ -22,12 +16,3 @@
     }
   }
 }
-
-@keyframes placeholder-shimmer {
-  0% {
-    background-position: 200% 0;
-  }
-  100% {
-    background-position: -200% 0;
-  }
-}

package/css/popover.scss

@@ -1,18 +1,13 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 $arrow: 6px;
 
 .popover {
   position: fixed;
   z-index: 900;
-  background: var(--background);
-  border: 1px solid var(--divider);
-  border-radius: $radius-panel;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.03),
-    0 4px 6px -2px rgba(0, 0, 0, 0.05),
-    0 12px 24px -4px rgba(0, 0, 0, 0.12);
+  @include float-panel;
   min-width: 160px;
   max-width: 320px;
   opacity: 0;

package/css/properties.scss

@@ -20,11 +20,6 @@
   --primary-dark: #1A1B1F;
   --primary-light: #F0F1F3;
   --hover: rgba(0, 0, 0, 0.04);
-  --radius-sm: 0.25rem;
-  --radius-md: 0.4rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-full: 9999px;
 }
 
 [data-theme="dark"] {

package/css/push-menu.scss

@@ -100,7 +100,7 @@ nav.push-menu {
   flex-shrink: 0;
   width: 1.75rem;
   height: 1.75rem;
-  border-radius: calc($border-radius * 0.75);
+  border-radius: $radius-sm;
   border: none;
   background: rgba(255, 255, 255, 0.08);
   color: rgba(255, 255, 255, 0.65);

package/css/range-slider.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 $track-height: 4px;
 $thumb-size: 1.1rem;
@@ -70,30 +71,30 @@ $thumb-size: 1.1rem;
 
     &:hover::-webkit-slider-thumb {
       transform: scale(1.15);
-      box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 15%, transparent);
+      @include focus-glow($tint: 15%, $size: 6px);
     }
 
     &:hover::-moz-range-thumb {
       transform: scale(1.15);
-      box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent-color) 15%, transparent);
+      @include focus-glow($tint: 15%, $size: 6px);
     }
 
     &:active::-webkit-slider-thumb {
       transform: scale(1.22);
-      box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-color) 18%, transparent);
+      @include focus-glow($tint: 18%, $size: 9px);
     }
 
     &:active::-moz-range-thumb {
       transform: scale(1.22);
-      box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent-color) 18%, transparent);
+      @include focus-glow($tint: 18%, $size: 9px);
     }
 
     &:focus-visible::-webkit-slider-thumb {
-      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 25%, transparent);
+      @include focus-glow($tint: 25%, $size: 4px);
     }
 
     &:focus-visible::-moz-range-thumb {
-      box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color) 25%, transparent);
+      @include focus-glow($tint: 25%, $size: 4px);
     }
 
     &:disabled {

package/css/stepper.scss

@@ -1,11 +1,12 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 $indicator-size: 2rem;
 $connector-thickness: 2px;
 
 @keyframes stepper-pulse {
-  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-color) 35%, transparent); }
+  0%   { @include focus-glow($tint: 35%, $size: 0); }
   65%  { box-shadow: 0 0 0 6px transparent; }
   100% { box-shadow: 0 0 0 0 transparent; }
 }
@@ -116,7 +117,7 @@ $connector-thickness: 2px;
   &.active {
     .stepper-indicator {
       border-color: var(--accent-color);
-      background: color-mix(in srgb, var(--accent-color) 10%, var(--background));
+      background: color-mix(in srgb, var(--accent-color) $tint-medium, var(--background));
       color: var(--accent-color);
       animation: stepper-pulse 2.4s ease-out 3;
     }
@@ -151,7 +152,7 @@ $connector-thickness: 2px;
   &.error {
     .stepper-indicator {
       border-color: var(--error);
-      background: color-mix(in srgb, var(--error) 10%, var(--background));
+      background: color-mix(in srgb, var(--error) $tint-medium, var(--background));
       color: var(--error);
       animation: none;
     }