@dodlhuat/basix 1.3.1 → 1.3.3

package/css/chart.scss

@@ -1,9 +1,6 @@
 @use "properties";
 @use "parameters" as *;
 
-// ─── Chart color palette ────────────────────────────────────────────────────
-// Readable via JS: getComputedStyle(el).getPropertyValue('--chart-color-1')
-
 .chart {
   --chart-color-1: var(--accent-color);
   --chart-color-2: var(--success);
@@ -15,8 +12,6 @@
   --chart-color-8: #EC4899;
 }
 
-// ─── Wrapper ────────────────────────────────────────────────────────────────
-
 .chart {
   position: relative;
   width: 100%;
@@ -24,8 +19,6 @@
   color: var(--primary-text);
   font-size: 0.875rem;
 
-  // ─── Header ───────────────────────────────────────────────────────────────
-
   &-header {
     margin-bottom: calc($spacing * 0.75);
   }
@@ -43,8 +36,6 @@
     margin-top: calc($spacing * 0.2);
   }
 
-  // ─── Canvas ───────────────────────────────────────────────────────────────
-
   &-canvas {
     width: 100%;
     position: relative;
@@ -57,8 +48,6 @@
     overflow: visible;
   }
 
-  // ─── Axes & grid ──────────────────────────────────────────────────────────
-
   .chart-axis-line {
     stroke: var(--divider);
     stroke-width: 1;
@@ -77,8 +66,6 @@
     font-family: inherit;
   }
 
-  // ─── Line & area ──────────────────────────────────────────────────────────
-
   .chart-line {
     fill: none;
     stroke-linecap: round;
@@ -92,7 +79,6 @@
     animation: chart-fade-in 0.8s ease forwards;
   }
 
-  // Dots visible by default (small), expand on hover via group
   .chart-point-dot {
     transition: r 0.15s ease;
   }
@@ -114,8 +100,6 @@
     }
   }
 
-  // ─── Column & bar ─────────────────────────────────────────────────────────
-
   .chart-bar {
     transition: opacity 0.15s ease, filter 0.15s ease;
     cursor: pointer;
@@ -139,8 +123,6 @@
     }
   }
 
-  // ─── Pie ──────────────────────────────────────────────────────────────────
-
   .chart-slice {
     cursor: pointer;
     transform-box: fill-box;
@@ -155,8 +137,6 @@
     }
   }
 
-  // ─── Legend ───────────────────────────────────────────────────────────────
-
   &-legend {
     display: flex;
     flex-wrap: wrap;
@@ -180,7 +160,6 @@
     flex-shrink: 0;
   }
 
-  // Pie legend variant — bigger swatches, stacked nicely
   &-pie-legend {
     display: flex;
     flex-wrap: wrap;
@@ -210,8 +189,6 @@
     margin-left: calc($spacing * 0.15);
   }
 
-  // ─── Tooltip ──────────────────────────────────────────────────────────────
-
   &-tooltip {
     position: fixed;
     background: var(--primary-dark);
@@ -242,8 +219,6 @@
   }
 }
 
-// ─── Animations ─────────────────────────────────────────────────────────────
-
 @keyframes chart-draw {
   from { stroke-dashoffset: var(--path-length, 9999); }
   to   { stroke-dashoffset: 0; }

package/css/chat-bubbles.scss

@@ -5,8 +5,6 @@
   --bubble-radius: 18px;
 }
 
-// ── Container ─────────────────────────────────────────────────────────────────
-
 .chat {
   display: flex;
   flex-direction: column;
@@ -15,14 +13,11 @@
   width: 100%;
 }
 
-// Extra breathing room between direction changes
 .chat-message.incoming + .chat-message.outgoing,
 .chat-message.outgoing + .chat-message.incoming {
   margin-top: calc($spacing * 0.5);
 }
 
-// ── Message row ───────────────────────────────────────────────────────────────
-
 .chat-message {
   display: flex;
   align-items: flex-end;
@@ -37,7 +32,6 @@
       border-bottom-right-radius: 0;
       filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
 
-      // Tail: right-angle at bubble's bottom-right corner, extends right
       &::after {
         content: '';
         position: absolute;
@@ -60,7 +54,6 @@
       border-bottom-left-radius: 0;
       filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
 
-      // Tail: right-angle at bubble's bottom-left corner, extends left
       &::after {
         content: '';
         position: absolute;
@@ -75,8 +68,6 @@
   }
 }
 
-// ── Avatar ────────────────────────────────────────────────────────────────────
-
 .chat-avatar {
   flex-shrink: 0;
   width: 2rem;
@@ -98,8 +89,6 @@
   }
 }
 
-// ── Bubble ────────────────────────────────────────────────────────────────────
-
 .chat-bubble {
   position: relative;
   max-width: 72%;
@@ -114,8 +103,6 @@
   }
 }
 
-// ── Timestamp ─────────────────────────────────────────────────────────────────
-
 .chat-time {
   display: block;
   font-size: 0.68rem;
@@ -126,8 +113,6 @@
   color: inherit;
 }
 
-// ── Dark mode shadow ──────────────────────────────────────────────────────────
-
 [data-theme="dark"] {
   .chat-message.incoming .chat-bubble  { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35)); }
   .chat-message.outgoing .chat-bubble  { filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.4)); }

package/css/checkbox.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 .styled-checkbox {
   position: absolute;
@@ -22,7 +23,7 @@
     width: $spacing;
     height: $spacing;
     border: 2px solid var(--divider);
-    border-radius: calc($border-radius / 2);
+    border-radius: $radius-sm;
     background-color: var(--background);
     margin-top: 2px;
     transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
@@ -33,7 +34,7 @@
   }
 
   &:focus-visible + label::before {
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent);
+    @include focus-glow(15%);
     border-color: var(--accent-color);
   }
 

package/css/chips.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 .chips {
   display: flex;
@@ -13,7 +14,7 @@
     background: var(--secondary-background);
     color: var(--primary-text);
     padding: calc($spacing * 0.3) calc($spacing * 0.75);
-    border-radius: calc($border-radius * 4);
+    border-radius: $radius-xl;
     font-size: 0.8125rem;
     font-weight: 500;
     line-height: 1.4;
@@ -36,7 +37,7 @@
 
       &:focus-visible {
         outline: none;
-        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 35%, transparent);
+        @include focus-glow();
       }
     }
 
@@ -79,7 +80,6 @@
       }
     }
 
-    // Accent variant
     &-accent {
       background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
       color: var(--accent-color);
@@ -91,7 +91,6 @@
       }
     }
 
-    // Success variant
     &-success {
       background: color-mix(in srgb, var(--success) 12%, var(--background));
       color: var(--success);
@@ -103,7 +102,6 @@
       }
     }
 
-    // Warning variant
     &-warning {
       background: color-mix(in srgb, var(--warning) 12%, var(--background));
       color: var(--warning);
@@ -115,7 +113,6 @@
       }
     }
 
-    // Error variant
     &-error {
       background: color-mix(in srgb, var(--error) 12%, var(--background));
       color: var(--error);
@@ -127,7 +124,6 @@
       }
     }
 
-    // Outline variant
     &-outline {
       background: transparent;
       border-color: var(--divider);

package/css/code-viewer.scss

@@ -1,9 +1,6 @@
 @use "properties";
 @use "parameters" as *;
 
-// Structural chrome uses design tokens.
-// Syntax highlight colors are intentional VS Code palette — left as-is.
-
 .code-display {
   background: #1e1e1e;
   border-radius: $border-radius;
@@ -33,7 +30,7 @@
   color: #fff;
   border: none;
   padding: calc($spacing * 0.375) calc($spacing * 0.75);
-  border-radius: calc($border-radius / 2);
+  border-radius: $radius-sm;
   cursor: pointer;
   font-size: 0.75rem;
   transition: background 0.2s;
@@ -60,7 +57,6 @@
   color: #d4d4d4;
 }
 
-/* Syntax Highlighting — VS Code Dark+ palette */
 .keyword   { color: #569cd6; }
 .string    { color: #ce9178; }
 .comment   { color: #6a9955; font-style: italic; }

package/css/context-menu.scss

@@ -1,5 +1,5 @@
-@use "parameters" as *;
 @use "properties";
+@use "parameters" as *;
 
 .context-menu {
   position: fixed;
@@ -8,7 +8,7 @@
   padding: calc($spacing * 0.375) 0;
   background: var(--background);
   border: 1px solid var(--divider);
-  border-radius: calc($border-radius * 2.5);
+  border-radius: $radius-panel;
   box-shadow:
     0 8px 32px rgba(0, 0, 0, 0.12),
     0 2px 8px rgba(0, 0, 0, 0.08),
@@ -41,7 +41,6 @@
   transition: background 0.1s ease, color 0.1s ease;
   position: relative;
 
-  // Icon slot — always present to keep label column aligned
   .context-menu-icon {
     flex-shrink: 0;
     width: 1rem;
@@ -52,9 +51,10 @@
     color: var(--secondary-text);
     transition: color 0.1s ease;
 
-    .icon-svg {
+    svg {
       width: 1rem;
       height: 1rem;
+      fill: currentColor;
     }
   }
 
@@ -83,23 +83,8 @@
     color: var(--secondary-text);
   }
 
-  // Hover + keyboard focus — same treatment as dropdown
   &:hover,
-  &.is-focused {
-    background: var(--secondary-background);
-    color: var(--accent-color);
-
-    .context-menu-icon {
-      color: var(--accent-color);
-    }
-
-    .context-menu-chevron {
-      color: var(--accent-color);
-      opacity: 0.8;
-    }
-  }
-
-  // Submenu-parent active (submenu is open) — keep it highlighted
+  &.is-focused,
   &.is-active {
     background: var(--secondary-background);
     color: var(--accent-color);
@@ -138,7 +123,6 @@
     pointer-events: none;
   }
 
-  // Submenu
   &.has-submenu {
     > .context-menu {
       position: absolute;

package/css/datepicker.scss

@@ -1,5 +1,6 @@
-@use "parameters" as *;
 @use "properties";
+@use "parameters" as *;
+@use "mixins" as *;
 
 .container {
   max-width: 800px;
@@ -15,7 +16,7 @@
   user-select: none;
   box-shadow: $shadow;
   display: none;
-  position: absolute;
+  position: fixed;
   z-index: 1000;
   box-sizing: border-box;
 }
@@ -86,7 +87,7 @@
   font-size: $spacing;
   cursor: pointer;
   border-radius: $border-radius;
-  transition: all 0.2s;
+  transition: background-color 0.2s, color 0.2s;
 }
 
 .datepicker-day:hover:not(.disabled) {
@@ -146,7 +147,7 @@
   font-size: 0.9rem;
   cursor: pointer;
   border-radius: $border-radius;
-  transition: all 0.2s;
+  transition: background-color 0.2s, color 0.2s;
 }
 
 .datepicker-month:hover,
@@ -188,7 +189,6 @@
   background-color: var(--accent-color-lighten);
 }
 
-/* Time Picker */
 .datepicker-time {
   display: flex;
   align-items: center;
@@ -261,12 +261,10 @@
   }
 
   &:focus {
-    outline: 2px solid var(--accent-color);
-    outline-offset: -1px;
+    @include focus-ring(-1px);
   }
 }
 
-/* Set Button */
 .datepicker-set-btn {
   width: 100%;
   padding: calc($spacing / 2) $spacing;
@@ -286,7 +284,6 @@
   }
 }
 
-/* Mobile Responsiveness */
 @media (max-width: 640px) {
   .datepicker-backdrop {
     position: fixed;

package/css/docs.scss

@@ -1,7 +1,5 @@
 @use "parameters" as *;
 
-// ── Sidebar content (logo + search) ──────────────────────────────────────────
-
 .sidebar-nav {
 
     .docs-sidebar-logo {
@@ -256,8 +254,6 @@
     }
 }
 
-// ── Landing page ─────────────────────────────────────────────────────────────
-
 .landing-hero {
     padding: 5rem 2rem 4rem;
     text-align: center;

package/css/dropdown.scss

@@ -1,5 +1,5 @@
-@use "parameters" as *;
 @use "properties";
+@use "parameters" as *;
 
 .dropdown-container {
   position: relative;

package/css/editor.scss

@@ -1,8 +1,6 @@
 @use "properties";
 @use "parameters" as *;
 
-/* ── Editor Component ───────────────────────────────────────────────── */
-
 .editor {
   background: var(--secondary-background);
   border: 1px solid var(--divider);
@@ -13,8 +11,6 @@
   overflow: hidden;
 }
 
-/* ── Toolbar ───────────────────────────────────────────────────────── */
-
 .editor-toolbar {
   display: flex;
   align-items: center;
@@ -31,7 +27,6 @@
   }
 }
 
-/* SVG icon sizing */
 .editor-toolbar .icon-svg {
   fill: currentColor;
   display: block;
@@ -41,7 +36,6 @@
   flex-shrink: 0;
 }
 
-/* Button base */
 .editor-toolbar button {
   display: inline-flex;
   align-items: center;
@@ -74,7 +68,6 @@
     background: color-mix(in srgb, var(--accent-color) 12%, transparent);
     color: var(--accent-color);
 
-    // Subtle dot indicator beneath active button
     &::after {
       content: "";
       position: absolute;
@@ -89,7 +82,6 @@
   }
 }
 
-/* Button clusters — pill-shaped groups */
 .toolbar-group {
   display: flex;
   align-items: center;
@@ -104,7 +96,6 @@
   }
 }
 
-/* Block-format select — reset all global form overrides */
 .editor-block-select {
   width: auto;
   flex-shrink: 0;
@@ -140,13 +131,11 @@
   }
 }
 
-/* Separators: invisible spacers — visual grouping comes from .toolbar-group */
 .toolbar-separator {
   width: 0.35rem;
   flex-shrink: 0;
 }
 
-/* Right-pinned actions */
 .toolbar-end {
   display: flex;
   align-items: center;
@@ -160,7 +149,6 @@
   }
 }
 
-/* Variant button states — scoped to avoid !important */
 .editor-toolbar button.toolbar-btn-accent {
   background: color-mix(in srgb, var(--accent-color) 10%, transparent);
   color: var(--accent-color);
@@ -177,8 +165,6 @@
   }
 }
 
-/* ── Editor Body ───────────────────────────────────────────────────── */
-
 .editor-body {
   display: flex;
   flex: 1;
@@ -278,8 +264,6 @@
   strong { font-weight: 700; }
 }
 
-/* ── Side Panel ────────────────────────────────────────────────────── */
-
 .editor-side {
   width: 320px;
   min-width: 240px;
@@ -435,8 +419,6 @@
   }
 }
 
-/* ── Footer ────────────────────────────────────────────────────────── */
-
 .editor-footer {
   display: flex;
   align-items: center;
@@ -482,8 +464,6 @@
   }
 }
 
-/* ── Responsive ────────────────────────────────────────────────────── */
-
 @media screen and (max-width: 768px) {
   .editor-body {
     flex-direction: column;
@@ -510,7 +490,7 @@
   .editor-toolbar {
     padding: 0.3rem 0.375rem;
     gap: 0.2rem;
-    // Fade hint for horizontal scroll
+
     mask-image: linear-gradient(to right, black 85%, transparent 100%);
 
     button {
@@ -538,8 +518,6 @@
   }
 }
 
-/* ── Link Popover ──────────────────────────────────────────────────── */
-
 .editor-link-popover {
   display: flex;
   flex-direction: column;

package/css/file-uploader.scss

@@ -136,7 +136,7 @@
     color: var(--secondary-text);
     cursor: pointer;
     padding: 0.25rem;
-    border-radius: calc($border-radius / 2);
+    border-radius: $radius-sm;
     transition: color 0.15s ease, background-color 0.15s ease;
     display: flex;
     align-items: center;
@@ -152,7 +152,7 @@
     width: 100%;
     height: 4px;
     background-color: var(--divider);
-    border-radius: calc($border-radius / 2);
+    border-radius: $radius-sm;
     overflow: hidden;
     display: none;
   }