@dodlhuat/basix 1.4.3 → 1.5.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

@@ -21,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 {
@@ -45,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;
@@ -88,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;
   }
 }
 
@@ -105,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;
@@ -240,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;
   }
@@ -257,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;
   }
@@ -286,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;
@@ -359,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;
@@ -379,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);
@@ -410,7 +406,7 @@
   img {
     max-width: 100%;
     height: auto;
-    border-radius: calc($border-radius * 0.75);
+    border-radius: $radius-sm;
   }
 
   a {
@@ -543,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;
@@ -590,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,

package/css/form.scss

@@ -35,7 +35,7 @@
 textarea, select, .select .dropdown, input {
   width: 100%;
   border: 1.5px solid var(--divider);
-  border-radius: calc($border-radius * 1.5);
+  border-radius: $radius-md;
   padding: 0 calc($spacing * 0.65);
   box-sizing: border-box;
   background-color: var(--background);
@@ -92,9 +92,10 @@ select {
   }
 
   .dropdown-selected {
+    position: relative;
     border: 1.5px solid var(--divider);
-    padding: 0 calc($spacing * 0.65);
-    border-radius: calc($border-radius * 1.5);
+    padding: 0 calc($spacing * 2) 0 calc($spacing * 0.65);
+    border-radius: $radius-md;
     cursor: pointer;
     background: var(--background);
     height: calc($form-height * 1.3);
@@ -118,12 +119,24 @@ select {
     }
 
     &::after {
-      font-family: "Material Symbols Outlined 24pt", serif;
-      content: "\e5cf";
-      float: right;
-      color: var(--secondary-text);
+      content: "";
+      position: absolute;
+      top: 50%;
+      right: calc($spacing * 0.65);
+      width: 1.125rem;
+      height: 1.125rem;
+      background-color: var(--secondary-text);
+      mask-image: url("../svg-icons/keyboard_arrow_down.svg");
+      -webkit-mask-image: url("../svg-icons/keyboard_arrow_down.svg");
+      mask-repeat: no-repeat;
+      -webkit-mask-repeat: no-repeat;
+      mask-position: center;
+      -webkit-mask-position: center;
+      mask-size: contain;
+      -webkit-mask-size: contain;
+      transform: translateY(-50%);
       transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
-      line-height: inherit;
+      pointer-events: none;
     }
   }
 
@@ -132,7 +145,7 @@ select {
     @include field-shadow-focus($ambient: false);
 
     &::after {
-      transform: rotate(180deg);
+      transform: translateY(-50%) rotate(180deg);
     }
   }
 
@@ -141,17 +154,12 @@ select {
     top: calc(100% + 6px);
     left: 0;
     right: 0;
-    border: 1.5px solid var(--divider);
-    border-radius: calc($border-radius * 1.5);
     display: none;
     flex-direction: column;
     z-index: 10;
     max-height: 260px;
     overflow-y: auto;
-    background-color: var(--background);
-    box-shadow:
-      0 8px 32px rgba(0, 0, 0, 0.11),
-      0 2px 8px rgba(0, 0, 0, 0.06);
+    @include float-panel($radius-md);
     padding: 0.25rem;
     gap: 1px;
     transform-origin: top center;
@@ -160,7 +168,7 @@ select {
   .dropdown-option {
     padding: 0.6rem calc($spacing * 0.65);
     cursor: pointer;
-    border-radius: calc($border-radius * 1.1);
+    border-radius: $border-radius;
     transition: background 0.1s ease;
     font-size: 0.9375rem;
     position: relative;
@@ -171,7 +179,7 @@ select {
   }
 
   .dropdown-option.selected {
-    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+    background: color-mix(in srgb, var(--accent-color) $tint-medium, transparent);
     color: var(--accent-color);
     font-weight: 500;
 
@@ -221,9 +229,8 @@ select {
         transform: translateY(-50%);
         cursor: pointer;
         color: var(--accent-color);
-        font-size: 0.9375rem;
-        font-weight: 500;
-        letter-spacing: 0;
+        width: 0.9375rem;
+        height: 0.9375rem;
       }
     }
 
@@ -299,7 +306,7 @@ select {
   &.error {
     input, textarea, select {
       border-color: var(--error);
-      background-color: color-mix(in srgb, var(--error) 3%, var(--background));
+      background-color: color-mix(in srgb, var(--error) $tint-subtle, var(--background));
       @include field-shadow-rest();
       animation: field-error-shake 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
 
@@ -369,7 +376,7 @@ select {
 
     &:first-child {
       border-right: none;
-      border-radius: calc($border-radius * 1.5) 0 0 calc($border-radius * 1.5);
+      border-radius: $radius-md 0 0 $radius-md;
 
       & + input {
         border-top-left-radius: 0;
@@ -379,7 +386,7 @@ select {
 
     &:last-child {
       border-left: none;
-      border-radius: 0 calc($border-radius * 1.5) calc($border-radius * 1.5) 0;
+      border-radius: 0 $radius-md $radius-md 0;
     }
   }
 
@@ -402,12 +409,12 @@ input.input-sm, textarea.input-sm {
   min-height: calc($form-height * 0.85);
   font-size: 0.875rem;
   padding: 0 calc($spacing * 0.5);
-  border-radius: calc($border-radius * 1.1);
+  border-radius: $border-radius;
 }
 
 input.input-lg, textarea.input-lg {
   min-height: calc($form-height * 1.65);
   font-size: 1.125rem;
   padding: 0 calc($spacing * 0.75);
-  border-radius: calc($border-radius * 1.75);
+  border-radius: $radius-lg;
 }

package/css/gallery.scss

@@ -28,6 +28,10 @@
   position: relative;
   cursor: pointer;
 
+  &:has(img:not(.loaded)) {
+    @include shimmer-bg;
+  }
+
   &:hover {
     transform: translateY(-4px);
     box-shadow:
@@ -49,6 +53,17 @@
   }
 }
 
+.masonry-item--skeleton {
+  cursor: default;
+  pointer-events: none;
+
+  .masonry-item-skeleton-img {
+    display: block;
+    width: 100%;
+    @include shimmer-bg;
+  }
+}
+
 .masonry-item img {
   width: 100%;
   height: auto;

package/css/group-picker.scss

@@ -16,7 +16,7 @@
     padding: calc($spacing * 0.35) calc($spacing * 0.6);
     background: var(--background);
     border: 1px solid var(--divider);
-    border-radius: $radius-sm;
+    border-radius: $radius-xs;
     margin-bottom: calc($spacing * 0.75);
     box-shadow: $shadow;
     transition: border-color 0.15s ease, box-shadow 0.15s ease;
@@ -31,8 +31,9 @@
       align-items: center;
       justify-content: center;
 
-      .icon {
-        font-size: 0.7rem;
+      .icon-svg {
+        width: 0.7rem;
+        height: 0.7rem;
         top: 0;
       }
     }
@@ -73,7 +74,8 @@
     left: calc($spacing * 0.55);
     top: 50%;
     transform: translateY(-50%);
-    font-size: 1rem;
+    width: 1rem;
+    height: 1rem;
     color: var(--secondary-text);
     pointer-events: none;
     opacity: 0.45;
@@ -86,7 +88,7 @@
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
     border: 1px solid var(--divider);
-    border-radius: $radius-sm;
+    border-radius: $radius-xs;
     background: var(--background);
     box-shadow: $shadow;
   }
@@ -102,8 +104,9 @@
     text-align: center;
     gap: calc($spacing * 0.5);
 
-    .icon {
-      font-size: 2rem;
+    .icon-svg {
+      width: 2rem;
+      height: 2rem;
       opacity: 0.2;
     }
   }
@@ -116,7 +119,7 @@
     }
 
     &.is-expanded > .group-picker__group-header {
-      background: color-mix(in srgb, var(--accent-color) 4%, transparent);
+      background: color-mix(in srgb, var(--accent-color) $tint-subtle, transparent);
 
       .group-picker__group-label {
         color: var(--accent-color);
@@ -145,13 +148,17 @@
 
   &__chevron {
     flex-shrink: 0;
-    font-size: 1rem;
     color: var(--secondary-text);
     opacity: 0.5;
     transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
                 color 0.15s ease,
                 opacity 0.15s ease;
 
+    .icon-svg {
+      width: 1rem;
+      height: 1rem;
+    }
+
     .group-picker__group.is-expanded & {
       transform: rotate(90deg);
       color: var(--accent-color);
@@ -167,7 +174,7 @@
     transition: color 0.15s ease;
 
     mark {
-      background: color-mix(in srgb, var(--warning) 22%, transparent);
+      background: color-mix(in srgb, var(--warning) $tint-strong, transparent);
       color: inherit;
       border-radius: 2px;
       padding: 0 2px;
@@ -181,7 +188,7 @@
     letter-spacing: 0.025em;
     text-transform: uppercase;
     padding: calc($spacing * 0.15) calc($spacing * 0.6);
-    border-radius: calc($border-radius * 3);
+    border-radius: $radius-xl;
     border: 1px solid var(--divider);
     background: transparent;
     color: var(--secondary-text);
@@ -192,7 +199,7 @@
     &:hover:not(.button-primary):not(:disabled) {
       border-color: var(--accent-color);
       color: var(--accent-color);
-      background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+      background: color-mix(in srgb, var(--accent-color) $tint-subtle, transparent);
       transform: none;
     }
 
@@ -201,7 +208,7 @@
     }
 
     &.button-primary {
-      border-radius: calc($border-radius * 3);
+      border-radius: $radius-xl;
       font-size: 0.6875rem;
       font-weight: 500;
       letter-spacing: 0.025em;
@@ -216,7 +223,7 @@
     cursor: pointer;
 
     &.is-selected > .group-picker__group-header {
-      background: color-mix(in srgb, var(--accent-color) 6%, transparent);
+      background: color-mix(in srgb, var(--accent-color) $tint-subtle, transparent);
 
       .group-picker__group-label {
         color: var(--accent-color);
@@ -231,12 +238,16 @@
 
   &__leaf-check {
     flex-shrink: 0;
-    font-size: 1.1rem;
     color: var(--accent-color);
     opacity: 0;
     transform: scale(0.3);
     transition: opacity 0.18s ease,
                 transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
+
+    .icon-svg {
+      width: 1.1rem;
+      height: 1.1rem;
+    }
   }
 
   &__subgroups {
@@ -266,7 +277,7 @@
     transition: background 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
 
     &.is-selected {
-      background: color-mix(in srgb, var(--accent-color) 12%, var(--background));
+      background: color-mix(in srgb, var(--accent-color) $tint-medium, var(--background));
       color: var(--accent-color);
       outline: 1px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
       font-weight: 500;
@@ -279,7 +290,7 @@
     }
 
     mark {
-      background: color-mix(in srgb, var(--warning) 22%, transparent);
+      background: color-mix(in srgb, var(--warning) $tint-strong, transparent);
       color: inherit;
       border-radius: 2px;
       padding: 0 2px;