@dodlhuat/basix 1.3.2 → 1.3.3

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,7 +83,6 @@
     color: var(--secondary-text);
   }
 
-  // Hover, keyboard focus, or submenu-parent active — same treatment
   &:hover,
   &.is-focused,
   &.is-active {
@@ -124,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;
 }
@@ -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;
   }