@dodlhuat/basix 1.3.1 → 1.3.3

package/css/flyout-menu.scss

@@ -1,6 +1,3 @@
-/* Flyout menu uses its own dark palette intentionally —
-   it renders over any background regardless of light/dark mode.
-   Scoped here rather than polluting :root. */
 .flyout-menu,
 .flyout-overlay,
 .site-header,
@@ -26,7 +23,6 @@ body {
   min-height: 100vh;
 }
 
-/* Header */
 .site-header {
   display: flex;
   justify-content: space-between;
@@ -80,7 +76,6 @@ body {
   font-size: 1.2rem;
 }
 
-/* Flyout Overlay */
 .flyout-overlay {
   position: fixed;
   top: 0;
@@ -100,22 +95,19 @@ body {
   visibility: visible;
 }
 
-/* Flyout Menu Base */
 .flyout-menu {
   position: fixed;
-  background: var(--flyout-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
+  background: rgba(10, 15, 30, 0.82);
+  backdrop-filter: blur(28px) saturate(1.4);
+  -webkit-backdrop-filter: blur(28px) saturate(1.4);
   z-index: 210;
   display: flex;
   flex-direction: column;
-  padding: 2rem;
-  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+  padding: 1.75rem 1.5rem;
+  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 32px 80px rgba(0, 0, 0, 0.6);
   transition: transform var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1);
-  /* Smoother rollout */
 }
 
-/* Directional Variants */
 .flyout-from-right {
   top: 0;
   right: 0;
@@ -138,37 +130,56 @@ body {
   transform: translate(0, 0);
 }
 
-/* Flyout Header */
 .flyout-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 3rem;
+  margin-bottom: 2.5rem;
+  padding-bottom: 1.25rem;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
 }
 
 .flyout-title {
-  font-size: 1.25rem;
+  font-size: 0.65rem;
   font-weight: 600;
-  color: #94a3b8;
+  color: rgba(255, 255, 255, 0.35);
   text-transform: uppercase;
-  letter-spacing: 0.1em;
+  letter-spacing: 0.14em;
 }
 
 .close-menu {
   background: none;
   border: none;
-  color: var(--flyout-text);
+  color: rgba(255, 255, 255, 0.4);
   cursor: pointer;
-  padding: 0.5rem;
-  transition: transform 0.2s, color 0.2s;
+  padding: 0.3rem;
+  line-height: 0;
+  transition: color 0.2s;
 }
 
 .close-menu:hover {
-  transform: rotate(90deg);
-  color: var(--accent-color);
+  color: #fff;
+}
+
+.flyout-menu button {
+  display: flex;
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  font-size: inherit;
+  font-weight: inherit;
+  white-space: normal;
+  transition: color 0.2s;
+
+  &:hover:not(:disabled),
+  &:active:not(:disabled),
+  &.active {
+    background: none;
+    transform: none;
+    box-shadow: none;
+  }
 }
 
-/* Flyout Links */
 .flyout-links {
   list-style: none;
   flex-grow: 1;
@@ -189,7 +200,7 @@ body {
   border: none;
   font-size: 2rem;
   font-weight: 600;
-  color: var(--flyout-text);
+  color: rgba(255, 255, 255, 0.6);
   text-decoration: none;
   cursor: pointer;
   font-family: inherit;
@@ -205,40 +216,43 @@ body {
   transform: translateY(0);
 }
 
-.flyout-links a:hover,
-.submenu-toggle:hover {
+.flyout-links > li > a:hover,
+.flyout-links > li > .submenu-toggle:hover {
+  color: #fff;
+}
+
+.submenu-toggle.active {
   color: var(--accent-color);
 }
 
 .chevron {
-  transition: transform 0.3s;
-  opacity: 0.7;
+  flex-shrink: 0;
+  opacity: 0.5;
+  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s;
 }
 
 .submenu-toggle.active .chevron {
   transform: rotate(180deg);
+  opacity: 1;
 }
 
-/* Submenu */
 .submenu {
   list-style: none;
   max-height: 0;
   overflow: hidden;
   transition: max-height 0.3s ease-out;
   padding-left: 1rem;
-  border-left: 1px solid rgba(255, 255, 255, 0.1);
+  border-left: 1px solid rgba(255, 255, 255, 0.15);
   margin-top: 0;
 }
 
 .submenu.is-open {
   max-height: 500px;
-  /* Reduced from 2000px for tighter animation */
-  /* Arbitrary large height, increased for nesting */
   margin-top: 1rem;
   transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-  /* Smoother easing */
 }
 
+
 .submenu li {
   margin-bottom: 0.5rem;
 }
@@ -246,30 +260,34 @@ body {
 .submenu a {
   font-size: 1.25rem;
   font-weight: 400;
-  color: #cbd5e1;
+  color: rgba(255, 255, 255, 0.45);
   transform: none !important;
-  /* Override slide-in for submenu items */
+  transition: color 0.2s !important;
   transition-delay: 0s !important;
+
+  &:hover { color: #fff; }
 }
 
 .submenu .submenu-toggle {
   font-size: 1.25rem;
   font-weight: 400;
-  color: #cbd5e1;
+  color: rgba(255, 255, 255, 0.45);
   transform: none !important;
   transition-delay: 0s !important;
   padding: 0;
   margin: 0;
+
+  &:hover { color: #fff; }
 }
 
-/* Flyout Footer */
 .flyout-footer {
-  padding-top: 2rem;
-  border-top: 1px solid var(--flyout-border);
-  color: #64748b;
-  font-size: 0.9rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid rgba(255, 255, 255, 0.07);
+  color: rgba(255, 255, 255, 0.25);
+  font-size: 0.72rem;
+  letter-spacing: 0.03em;
   opacity: 0;
-  transform: translateY(20px);
+  transform: translateY(12px);
   transition: opacity 0.4s, transform 0.4s;
   transition-delay: var(--delay);
 }
@@ -279,7 +297,6 @@ body {
   transform: translateY(0);
 }
 
-/* Mobile Responsiveness */
 @media (max-width: 480px) {
   :root {
     --menu-width: 100%;
@@ -289,7 +306,7 @@ body {
     font-size: 2rem;
   }
 
-  /* Force Fullscreen for all directions */
+  
   .flyout-from-right,
   .flyout-from-left,
   .flyout-from-top {
@@ -300,17 +317,7 @@ body {
     right: auto !important;
     bottom: auto !important;
     border: none !important;
-    /* Remove borders for cleaner fullscreen look */
     border-right: 1px solid var(--flyout-border) !important;
-    /* Add consistent right border */
-    transform: translateX(-100%) !important;
-    /* Force ALL to slide from LEFT with !important */
-  }
-
-  /* Remove specific transforms and force left slide */
-  .flyout-from-right,
-  .flyout-from-left,
-  .flyout-from-top {
     transform: translateX(-100%) !important;
   }
 
@@ -318,7 +325,7 @@ body {
     transform: translate(0, 0) !important;
   }
 
-  /* Reset Top Menu Horizontal Layout to Vertical for Mobile */
+  
   .flyout-from-top .flyout-links {
     flex-direction: column;
     align-items: stretch;
@@ -332,7 +339,7 @@ body {
   .flyout-from-top .flyout-links>li>a,
   .flyout-from-top .flyout-links>li>.submenu-toggle {
     font-size: 2rem;
-    /* Restore larger size */
+    
     justify-content: space-between;
   }
 
@@ -357,6 +364,6 @@ body {
   .flyout-from-top .submenu a {
     font-size: 1.25rem;
     justify-content: space-between;
-    /* Match default behavior */
+    
   }
 }

package/css/form.scss

@@ -1,10 +1,6 @@
 @use "properties";
 @use "parameters" as *;
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Keyframes
-// ─────────────────────────────────────────────────────────────────────────────
-
 @keyframes field-error-shake {
   0%, 100% { transform: translateX(0); }
   18%       { transform: translateX(-5px); }
@@ -35,10 +31,6 @@
   }
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Base field styles
-// ─────────────────────────────────────────────────────────────────────────────
-
 textarea, select, .select .dropdown, input {
   width: 100%;
   border: 1.5px solid var(--divider);
@@ -99,10 +91,6 @@ select {
   cursor: pointer;
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Custom select / dropdown
-// ─────────────────────────────────────────────────────────────────────────────
-
 .select-group {
   .dropdown {
     position: relative;
@@ -286,10 +274,6 @@ select {
   }
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Form group — label + field + hint
-// ─────────────────────────────────────────────────────────────────────────────
-
 .form-group {
   display: flex;
   flex-direction: column;
@@ -383,10 +367,6 @@ select {
   }
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Input group — prefix / suffix addons
-// ─────────────────────────────────────────────────────────────────────────────
-
 .input-group {
   display: flex;
 
@@ -431,10 +411,6 @@ select {
   }
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Readonly
-// ─────────────────────────────────────────────────────────────────────────────
-
 input[readonly], textarea[readonly] {
   background-color: var(--secondary-background);
   color: var(--secondary-text);
@@ -443,10 +419,6 @@ input[readonly], textarea[readonly] {
   border-style: dashed;
 }
 
-// ─────────────────────────────────────────────────────────────────────────────
-// Size variants
-// ─────────────────────────────────────────────────────────────────────────────
-
 input.input-sm, textarea.input-sm {
   min-height: calc($form-height * 0.85);
   font-size: 0.875rem;

package/css/gallery.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 .masonry-container {
   display: flex;
@@ -44,8 +45,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--accent-color);
-    outline-offset: 2px;
+    @include focus-ring();
   }
 }
 
@@ -96,7 +96,6 @@
   font-size: 0.8125rem;
 }
 
-// Staggered entrance for items
 @media (prefers-reduced-motion: no-preference) {
   .masonry-item {
     animation: masonry-in 0.4s cubic-bezier(0.2, 0, 0, 1) both;

package/css/group-picker.scss

@@ -1,13 +1,12 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 .group-picker {
   position: relative;
   width: 100%;
   color: var(--primary-text);
 
-  // ─── Selection summary ─────────────────────────────────────────────────────
-
   &__selection {
     display: flex;
     flex-wrap: wrap;
@@ -17,18 +16,16 @@
     padding: calc($spacing * 0.35) calc($spacing * 0.6);
     background: var(--background);
     border: 1px solid var(--divider);
-    border-radius: calc($border-radius / 2);
+    border-radius: $radius-sm;
     margin-bottom: calc($spacing * 0.75);
     box-shadow: $shadow;
     transition: border-color 0.15s ease, box-shadow 0.15s ease;
 
-    // Chips inside use gap — suppress their own margins
     .chip {
       margin: 0;
       animation: gp-chip-in 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) both;
     }
 
-    // Fix font icon centering inside the absolute close button
     .chip.closeable button {
       display: inline-flex;
       align-items: center;
@@ -48,15 +45,13 @@
 
     &:focus-within {
       border-color: var(--accent-color);
-      box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+      @include focus-glow(15%);
     }
   }
 
-  // Parent chip — solid accent fill
-  // Specificity 0,3,0 via .chip.group-picker__chip--parent → beats .chips .chip (0,2,0)
   &__selection .chip.group-picker__chip--parent {
     background: var(--accent-color);
-    color: var(--background); // same pattern as button.scss button-variant
+    color: var(--background);
 
     button {
       background: color-mix(in srgb, var(--accent-color) 78%, black);
@@ -64,9 +59,6 @@
     }
   }
 
-  // ─── Search ────────────────────────────────────────────────────────────────
-  // Basix <input> handles border, focus ring, shadow — we only position the icon
-
   &__search {
     position: relative;
     margin-bottom: calc($spacing * 0.5);
@@ -88,21 +80,17 @@
     z-index: 1;
   }
 
-  // ─── List container ────────────────────────────────────────────────────────
-
   &__list {
     max-height: 420px;
     overflow-y: auto;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
     border: 1px solid var(--divider);
-    border-radius: calc($border-radius / 2);
+    border-radius: $radius-sm;
     background: var(--background);
     box-shadow: $shadow;
   }
 
-  // ─── Empty state ───────────────────────────────────────────────────────────
-
   &__empty {
     display: flex;
     flex-direction: column;
@@ -120,8 +108,6 @@
     }
   }
 
-  // ─── Group row ─────────────────────────────────────────────────────────────
-
   &__group {
     border-bottom: 1px solid var(--divider);
 
@@ -129,7 +115,6 @@
       border-bottom: none;
     }
 
-    // Expanded state: tint the header and accent the label
     &.is-expanded > .group-picker__group-header {
       background: color-mix(in srgb, var(--accent-color) 4%, transparent);
 
@@ -158,7 +143,6 @@
     }
   }
 
-  // Chevron — accent color when expanded, eased rotation
   &__chevron {
     flex-shrink: 0;
     font-size: 1rem;
@@ -190,7 +174,6 @@
     }
   }
 
-  // Action button — pill style, overrides Basix <button> base where needed
   &__group-action {
     flex-shrink: 0;
     font-size: 0.6875rem;
@@ -217,7 +200,6 @@
       transform: scale(0.94);
     }
 
-    // When button-primary is added by JS — keep pill shape
     &.button-primary {
       border-radius: calc($border-radius * 3);
       font-size: 0.6875rem;
@@ -230,8 +212,6 @@
     }
   }
 
-  // ─── Leaf group ────────────────────────────────────────────────────────────
-
   &__group.is-leaf {
     cursor: pointer;
 
@@ -249,7 +229,6 @@
     }
   }
 
-  // Leaf check icon — springs in on select
   &__leaf-check {
     flex-shrink: 0;
     font-size: 1.1rem;
@@ -260,8 +239,6 @@
                 transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
   }
 
-  // ─── Subgroups accordion ───────────────────────────────────────────────────
-
   &__subgroups {
     height: 0;
     overflow: hidden;
@@ -274,20 +251,17 @@
     }
   }
 
-  // Subgroup chip list — indented to align with label, not chevron
   &__subgroup-list {
     display: flex;
     flex-wrap: wrap;
     gap: calc($spacing * 0.3);
     padding: calc($spacing * 0.3) calc($spacing * 0.85) calc($spacing * 0.75) calc($spacing * 2.35);
 
-    // Chips use gap — suppress their own margins
     .chip {
       margin: 0;
     }
   }
 
-  // Subgroup chip — selected/disabled states on top of .chip.clickable
   &__subgroup {
     transition: background 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
 
@@ -313,8 +287,6 @@
   }
 }
 
-// ─── Chip entrance animation ─────────────────────────────────────────────────
-
 @keyframes gp-chip-in {
   from {
     opacity: 0;
@@ -326,8 +298,6 @@
   }
 }
 
-// ─── Responsive ──────────────────────────────────────────────────────────────
-
 @media (max-width: 768px) {
   .group-picker {
     &__list {

package/css/icons.scss

@@ -1,10 +1,8 @@
-
 @font-face {
   font-family: "Material Symbols Outlined 24pt";
   src: url("../fonts/MaterialSymbolsOutlined.woff2") format("woff2");
 }
 
-
 .icon {
   font-family: "Material Symbols Outlined 24pt", serif;
   font-style: normal;
@@ -17,7 +15,6 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-
 .icon-delete::before {
   content: "\e872";
 }

package/css/lightbox.scss

@@ -95,7 +95,7 @@
   max-width: 100%;
   max-height: calc(90dvh - 3.5rem);
   cursor: zoom-in;
-  border-radius: calc($border-radius * 2);
+  border-radius: $radius-lg;
   overflow: hidden;
   background: rgba(255, 255, 255, 0.04);
 
@@ -149,7 +149,6 @@
   justify-content: center;
   z-index: 1;
 
-  // Override spinner colors for the dark overlay
   .spinner {
     border-color: rgba(255, 255, 255, 0.15);
     border-top-color: rgba(255, 255, 255, 0.7);
@@ -163,7 +162,7 @@
   object-fit: contain;
   opacity: 0;
   transition: opacity 0.25s ease;
-  border-radius: calc($border-radius * 2);
+  border-radius: $radius-lg;
   user-select: none;
   -webkit-user-drag: none;
 
@@ -196,7 +195,6 @@
   user-select: none;
 }
 
-// Prev/Next buttons — glass pill, matches carousel style
 .lightbox-prev,
 .lightbox-next {
   position: fixed;

package/css/mixins.scss

@@ -0,0 +1,8 @@
+@mixin focus-ring($offset: 2px) {
+  outline: 2px solid var(--accent-color);
+  outline-offset: $offset;
+}
+
+@mixin focus-glow($tint: 35%, $size: 3px, $color: var(--accent-color)) {
+  box-shadow: 0 0 0 #{$size} color-mix(in srgb, #{$color} #{$tint}, transparent);
+}

package/css/modal.scss

@@ -35,7 +35,7 @@
 .modal {
   background: var(--background);
   border: 1px solid var(--divider);
-  border-radius: calc($border-radius * 2);
+  border-radius: $radius-lg;
   box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
   padding: $spacing;
   position: fixed;
@@ -70,14 +70,14 @@
     margin: (-$spacing) (-$spacing) $spacing;
     padding: $spacing;
     border-bottom: 1px solid var(--divider);
-    border-radius: calc($border-radius * 2) calc($border-radius * 2) 0 0;
+    border-radius: $radius-lg $radius-lg 0 0;
   }
 
   .footer {
     margin: $spacing (-$spacing) (-$spacing);
     padding: $spacing;
     border-top: 1px solid var(--divider);
-    border-radius: 0 0 calc($border-radius * 2) calc($border-radius * 2);
+    border-radius: 0 0 $radius-lg $radius-lg;
     display: flex;
     justify-content: flex-end;
 

package/css/parameters.scss

@@ -1,4 +1,9 @@
 $spacing: 1rem;
 $border-radius: 0.4rem;
 $form-height: 2rem;
-$shadow: 0 1px 2px rgba(56, 65, 74, .15);
+$shadow: 0 1px 2px rgba(56, 65, 74, .15);
+
+$radius-sm:    calc($border-radius / 2);
+$radius-lg:    calc($border-radius * 2);
+$radius-panel: calc($border-radius * 2.5);
+$radius-xl:    calc($border-radius * 4);