@dodlhuat/basix 1.4.2 → 1.5.0

package/css/form.scss

@@ -1,5 +1,6 @@
 @use "properties";
 @use "parameters" as *;
+@use "mixins" as *;
 
 @keyframes field-error-shake {
   0%, 100% { transform: translateX(0); }
@@ -34,16 +35,14 @@
 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);
   min-height: calc($form-height * 1.3);
   font-size: $spacing;
   color: var(--primary-text);
-  box-shadow:
-    inset 0 1.5px 4px rgba(0, 0, 0, 0.05),
-    0 1px 2px rgba(0, 0, 0, 0.04);
+  @include field-shadow-rest();
   transition:
     border-color 0.16s ease,
     box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1),
@@ -58,17 +57,12 @@ textarea, select, .select .dropdown, input {
 
   &:hover:not(:focus):not(:disabled):not([readonly]) {
     border-color: color-mix(in srgb, var(--accent-color) 45%, var(--divider));
-    box-shadow:
-      inset 0 1.5px 4px rgba(0, 0, 0, 0.045),
-      0 2px 8px rgba(0, 0, 0, 0.07);
+    @include field-shadow-hover();
   }
 
   &:focus {
     border-color: var(--accent-color);
-    box-shadow:
-      inset 0 1px 3px rgba(0, 0, 0, 0.03),
-      0 0 0 3.5px color-mix(in srgb, var(--accent-color) 13%, transparent),
-      0 2px 12px rgba(0, 0, 0, 0.06);
+    @include field-shadow-focus();
   }
 
   &:disabled {
@@ -98,16 +92,15 @@ 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);
     line-height: calc($form-height * 1.3);
-    box-shadow:
-      inset 0 1.5px 4px rgba(0, 0, 0, 0.05),
-      0 1px 2px rgba(0, 0, 0, 0.04);
+    @include field-shadow-rest();
     transition:
       border-color 0.16s ease,
       box-shadow 0.22s cubic-bezier(0.16, 1, 0.3, 1);
@@ -115,39 +108,44 @@ select {
 
     &:hover {
       border-color: color-mix(in srgb, var(--accent-color) 45%, var(--divider));
-      box-shadow:
-        inset 0 1.5px 4px rgba(0, 0, 0, 0.045),
-        0 2px 8px rgba(0, 0, 0, 0.07);
+      @include field-shadow-hover();
     }
 
     &:focus,
     &:focus-visible {
       outline: none;
       border-color: var(--accent-color);
-      box-shadow:
-        inset 0 1px 3px rgba(0, 0, 0, 0.03),
-        0 0 0 3.5px color-mix(in srgb, var(--accent-color) 13%, transparent),
-        0 2px 12px rgba(0, 0, 0, 0.06);
+      @include field-shadow-focus();
     }
 
     &::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;
     }
   }
 
   .dropdown.open .dropdown-selected {
     border-color: var(--accent-color);
-    box-shadow:
-      inset 0 1px 3px rgba(0, 0, 0, 0.03),
-      0 0 0 3.5px color-mix(in srgb, var(--accent-color) 13%, transparent);
+    @include field-shadow-focus($ambient: false);
 
     &::after {
-      transform: rotate(180deg);
+      transform: translateY(-50%) rotate(180deg);
     }
   }
 
@@ -156,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;
@@ -175,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;
@@ -186,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;
 
@@ -236,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;
       }
     }
 
@@ -314,17 +306,13 @@ select {
   &.error {
     input, textarea, select {
       border-color: var(--error);
-      background-color: color-mix(in srgb, var(--error) 3%, var(--background));
-      box-shadow:
-        inset 0 1.5px 4px rgba(0, 0, 0, 0.05),
-        0 1px 2px rgba(0, 0, 0, 0.04);
+      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;
 
       &:focus {
         border-color: var(--error);
-        box-shadow:
-          inset 0 1px 3px rgba(0, 0, 0, 0.03),
-          0 0 0 3.5px color-mix(in srgb, var(--error) 13%, transparent);
+        @include field-shadow-focus($color: var(--error), $ambient: false);
       }
     }
 
@@ -347,9 +335,7 @@ select {
 
       &:focus {
         border-color: var(--success);
-        box-shadow:
-          inset 0 1px 3px rgba(0, 0, 0, 0.03),
-          0 0 0 3.5px color-mix(in srgb, var(--success) 13%, transparent);
+        @include field-shadow-focus($color: var(--success), $ambient: false);
       }
     }
 
@@ -390,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;
@@ -400,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;
     }
   }
 
@@ -423,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;