@dodlhuat/basix 1.4.2 → 1.5.0

package/css/datepicker.scss

@@ -42,7 +42,7 @@
   transition: background-color 0.2s;
 }
 
-.datepicker-nav:hover {
+.datepicker-nav:hover:not(:disabled) {
   background-color: var(--accent-color-lighten);
   color: var(--accent-color-text);
 }
@@ -53,21 +53,6 @@
   font-weight: 600;
 }
 
-.datepicker-select {
-  border: none;
-  background: none;
-  font-family: inherit;
-  font-weight: 600;
-  font-size: 1rem;
-  cursor: pointer;
-  padding: calc($spacing / 4);
-  border-radius: calc($spacing / 4);
-}
-
-.datepicker-select:hover {
-  background-color: var(--accent-color-lighten);
-}
-
 .datepicker-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
@@ -77,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;
 }
@@ -187,83 +172,111 @@
   transition: background-color 0.2s;
 }
 
-.datepicker-title-btn:hover {
+.datepicker-title-btn:hover:not(:disabled) {
   background-color: var(--accent-color-lighten);
 }
 
-.datepicker-time {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.datepicker-clock {
   border-top: 1px solid var(--divider);
   margin-top: $spacing;
   padding-top: $spacing;
 }
 
-.datepicker-time-label {
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--primary-text);
-}
-
-.datepicker-time-controls {
+.datepicker-clock-header {
   display: flex;
   align-items: center;
-  gap: calc($spacing / 4);
-}
-
-.datepicker-time-separator {
-  font-size: 1.1rem;
-  font-weight: 600;
-  color: var(--primary-text);
-  padding: 0 calc($spacing / 8);
+  justify-content: center;
+  gap: $spacing;
+  margin-bottom: $spacing;
 }
 
-.datepicker-time-spinner {
+.datepicker-clock-display {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: calc($spacing / 8);
+  align-items: baseline;
+  font-size: 2rem;
+  font-weight: 600;
+  line-height: 1;
 }
 
-.datepicker-time-btn {
-  background: none;
-  border: 1px solid var(--divider);
-  border-radius: $border-radius;
+.datepicker-clock-display-segment {
   cursor: pointer;
-  padding: calc($spacing / 8) calc($spacing / 2);
-  font-size: 0.6rem;
-  line-height: 1;
-  color: var(--primary-text);
-  transition: background-color 0.2s;
+  color: var(--secondary-text);
+  border-radius: calc($border-radius / 2);
+  padding: 0 calc($spacing / 8);
+  transition: color 0.2s, background-color 0.2s;
 
   &:hover {
     background-color: var(--accent-color-lighten);
-    color: var(--accent-color-text);
+  }
+
+  &.active {
+    color: var(--accent-color);
   }
 }
 
-.datepicker-time-display {
-  width: 2.5rem;
-  text-align: center;
-  font-size: 1rem;
-  font-weight: 600;
-  font-family: inherit;
-  border: 1px solid var(--divider);
-  border-radius: $border-radius;
-  padding: calc($spacing / 4) 0;
-  background: var(--background);
+.datepicker-clock-display-separator {
+  color: var(--secondary-text);
+}
+
+.datepicker-clock-face {
+  position: relative;
+  width: 240px;
+  height: 240px;
+  margin: 0 auto;
+  border-radius: 50%;
+  background-color: var(--accent-color-lighten);
+  cursor: pointer;
+  touch-action: none;
+  user-select: none;
+}
+
+.datepicker-clock-center {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: var(--accent-color);
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.datepicker-clock-hand {
+  position: absolute;
+  left: 50%;
+  bottom: 50%;
+  width: 2px;
+  height: 38%;
+  margin-left: -1px;
+  background-color: var(--accent-color);
+  transform-origin: bottom center;
+  pointer-events: none;
+}
+
+.datepicker-clock-number {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 0.875rem;
   color: var(--primary-text);
-  -moz-appearance: textfield;
+  pointer-events: none;
 
-  &::-webkit-inner-spin-button,
-  &::-webkit-outer-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  &.inner {
+    width: 26px;
+    height: 26px;
+    font-size: 0.75rem;
+    color: var(--secondary-text);
   }
 
-  &:focus {
-    @include focus-ring(-1px);
+  &.selected {
+    background-color: var(--accent-color);
+    color: var(--accent-color-text);
   }
 }
 
@@ -279,10 +292,10 @@
   font-size: 0.875rem;
   font-weight: 600;
   cursor: pointer;
-  transition: opacity 0.2s;
+  transition: background-color 0.2s;
 
-  &:hover {
-    opacity: 0.9;
+  &:hover:not(:disabled) {
+    background-color: color-mix(in srgb, var(--accent-color) 85%, black);
   }
 }
 

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;
+  }
 }

package/css/docs.scss

@@ -89,7 +89,7 @@
         &.is-active {
             color: var(--accent-color);
             border-left-color: var(--accent-color);
-            background: color-mix(in srgb, var(--accent-color) 8%, transparent);
+            background: color-mix(in srgb, var(--accent-color) $tint-subtle, transparent);
             font-weight: 500;
         }
     }
@@ -240,8 +240,8 @@
 
             code {
                 font-size: 0.78em;
-                background: color-mix(in srgb, var(--accent-color) 10%, transparent);
-                border-color: color-mix(in srgb, var(--accent-color) 20%, transparent);
+                background: color-mix(in srgb, var(--accent-color) $tint-medium, transparent);
+                border-color: color-mix(in srgb, var(--accent-color) $tint-strong, transparent);
                 color: var(--accent-color);
             }
         }
@@ -265,8 +265,8 @@
         letter-spacing: 0.1em;
         text-transform: uppercase;
         color: var(--accent-color);
-        background: color-mix(in srgb, var(--accent-color) 10%, transparent);
-        border: 1px solid color-mix(in srgb, var(--accent-color) 25%, transparent);
+        background: color-mix(in srgb, var(--accent-color) $tint-medium, transparent);
+        border: 1px solid color-mix(in srgb, var(--accent-color) $tint-strong, transparent);
         border-radius: 2rem;
         padding: 0.25rem 0.75rem;
         margin-bottom: 1.5rem;
@@ -384,7 +384,7 @@
     gap: 0.5rem;
     padding: 1.25rem 1.25rem 1rem;
     border: 1px solid var(--divider);
-    border-radius: $border-radius * 2;
+    border-radius: $radius-lg;
     text-decoration: none;
     color: var(--primary-text);
     background: var(--primary-bg);

package/css/dropdown.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 .dropdown-container {
   position: relative;
@@ -33,10 +34,7 @@
     top: 100%;
     left: 0;
     margin-top: 6px;
-    background: var(--background);
-    border: 1px solid var(--divider);
-    border-radius: $border-radius;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
+    @include float-panel($border-radius);
     min-width: 220px;
     padding: calc($spacing / 2) 0;
     list-style: none;
@@ -75,10 +73,7 @@
       top: 0;
       left: 100%;
       margin-left: 4px;
-      background-color: var(--background);
-      border: 1px solid var(--divider);
-      border-radius: $border-radius;
-      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
+      @include float-panel($border-radius);
       min-width: 220px;
       padding: calc($spacing / 2) 0;
       list-style: none;

package/css/editor.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 .editor {
   background: var(--secondary-background);
@@ -20,11 +21,7 @@
   background: var(--secondary-background);
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
+  @include hide-scrollbar;
 }
 
 .editor-toolbar .icon-svg {
@@ -44,7 +41,7 @@
   height: 2rem;
   padding: 0;
   border: none;
-  border-radius: calc($border-radius * 0.6);
+  border-radius: $radius-sm;
   background: transparent;
   color: var(--secondary-text);
   cursor: pointer;
@@ -87,12 +84,12 @@
   align-items: center;
   gap: 1px;
   background: color-mix(in srgb, var(--divider) 55%, transparent);
-  border-radius: calc($border-radius * 0.75);
+  border-radius: $radius-sm;
   padding: 2px;
   flex-shrink: 0;
 
   button {
-    border-radius: calc($border-radius * 0.45);
+    border-radius: $radius-xs;
   }
 }
 
@@ -104,7 +101,7 @@
   padding: 0 0.375rem;
   border: none;
   box-shadow: none;
-  border-radius: calc($border-radius * 0.6);
+  border-radius: $radius-sm;
   background: transparent;
   color: var(--secondary-text);
   font-size: 0.75rem;
@@ -239,7 +236,7 @@
   img {
     max-width: 100%;
     height: auto;
-    border-radius: calc($border-radius * 0.875);
+    border-radius: $radius-sm;
     margin: 0.75rem 0;
     display: block;
   }
@@ -256,7 +253,7 @@
     background: color-mix(in srgb, var(--accent-color) 5%, transparent);
     padding: 0.5rem 0.75rem 0.5rem 1rem;
     margin: 0.75rem 0;
-    border-radius: 0 calc($border-radius * 0.5) calc($border-radius * 0.5) 0;
+    border-radius: 0 $radius-xs $radius-xs 0;
     color: var(--secondary-text);
     font-style: italic;
   }
@@ -285,7 +282,7 @@
     border: 1px solid var(--divider);
     background: var(--background);
     color: var(--primary-text);
-    border-radius: calc($border-radius * 0.75);
+    border-radius: $radius-sm;
     padding: 0.625rem;
     tab-size: 2;
     outline: none;
@@ -358,7 +355,7 @@
     padding: 0.3rem 0.5rem;
     font-size: 0.72rem;
     font-weight: 600;
-    border-radius: calc($border-radius * 0.6);
+    border-radius: $radius-sm;
     background: var(--divider);
     color: var(--secondary-text);
     border: none;
@@ -378,7 +375,7 @@
   padding: 0.75rem 1rem;
   background: var(--background);
   border: 1px solid var(--divider);
-  border-radius: calc($border-radius * 0.75);
+  border-radius: $radius-sm;
   line-height: 1.65;
   font-size: 0.9rem;
   color: var(--primary-text);
@@ -409,7 +406,7 @@
   img {
     max-width: 100%;
     height: auto;
-    border-radius: calc($border-radius * 0.75);
+    border-radius: $radius-sm;
   }
 
   a {
@@ -542,7 +539,7 @@
   height: 2rem;
   padding: 0 0.625rem;
   border: 1px solid var(--divider);
-  border-radius: calc($border-radius * 0.6);
+  border-radius: $radius-sm;
   background: var(--background);
   color: var(--primary-text);
   font-size: 0.8125rem;
@@ -551,7 +548,7 @@
 
   &:focus {
     border-color: color-mix(in srgb, var(--accent-color) 60%, transparent);
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 12%, transparent);
+    @include focus-glow($tint: 12%, $size: 2px);
   }
 
   &::placeholder {
@@ -589,7 +586,7 @@
     height: 1.875rem;
     padding: 0 0.75rem;
     border: none;
-    border-radius: calc($border-radius * 0.6);
+    border-radius: $radius-sm;
     font-size: 0.78rem;
     font-weight: 600;
     cursor: pointer;

package/css/file-uploader.scss

@@ -1,17 +1,6 @@
 @use "properties";
 @use "parameters" as *;
 
-@keyframes fileSlideIn {
-  from {
-    opacity: 0;
-    transform: translateY(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 .file-uploader {
   .header h2 {
     font-size: 1.25rem;
@@ -36,7 +25,7 @@
     &:hover,
     &.drag-over {
       border-color: var(--accent-color);
-      background-color: color-mix(in srgb, var(--accent-color) 6%, var(--background));
+      background-color: color-mix(in srgb, var(--accent-color) $tint-subtle, var(--background));
     }
   }
 
@@ -52,7 +41,7 @@
     width: 40px;
     height: 40px;
     border-radius: 50%;
-    background-color: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+    background-color: color-mix(in srgb, var(--accent-color) $tint-medium, var(--background));
     color: var(--accent-color);
     display: flex;
     align-items: center;
@@ -87,7 +76,7 @@
     background-color: var(--secondary-background);
     border: 1px solid var(--divider);
     border-radius: $border-radius;
-    animation: fileSlideIn 0.2s ease-out;
+    animation: bx-fade-slide-up 0.2s ease-out;
     gap: 0.75rem;
   }
 
@@ -136,7 +125,7 @@
     color: var(--secondary-text);
     cursor: pointer;
     padding: 0.25rem;
-    border-radius: $radius-sm;
+    border-radius: $radius-xs;
     transition: color 0.15s ease, background-color 0.15s ease;
     display: flex;
     align-items: center;
@@ -144,7 +133,7 @@
 
     &:hover {
       color: var(--error);
-      background-color: color-mix(in srgb, var(--error) 10%, var(--background));
+      background-color: color-mix(in srgb, var(--error) $tint-medium, var(--background));
     }
   }
 
@@ -152,7 +141,7 @@
     width: 100%;
     height: 4px;
     background-color: var(--divider);
-    border-radius: $radius-sm;
+    border-radius: $radius-xs;
     overflow: hidden;
     display: none;
   }

package/css/flyout-menu.scss

@@ -1,3 +1,6 @@
+@use "properties";
+@use "parameters" as *;
+
 .flyout-menu,
 .flyout-overlay,
 .site-header,
@@ -157,7 +160,8 @@ body {
   transition: color 0.2s;
 }
 
-.close-menu:hover {
+.close-menu:hover:not(:disabled) {
+  background: none;
   color: #fff;
 }