pxd 0.0.61 → 0.0.63

package/dist/styles/source.css

@@ -9,16 +9,16 @@
   --background-100-value: 0, 0%, 100%;
   --background-200-value: 0, 0%, 97%;
 
-  --color-gray-alpha-100-value: hsla(0, 0%, 0%, 0.05);
-  --color-gray-alpha-200-value: hsla(0, 0%, 0%, 0.082);
-  --color-gray-alpha-300-value: hsla(0, 0%, 0%, 0.12);
-  --color-gray-alpha-400-value: hsla(0, 0%, 0%, 0.17);
-  --color-gray-alpha-500-value: hsla(0, 0%, 0%, 0.21);
-  --color-gray-alpha-600-value: hsla(0, 0%, 0%, 0.34);
-  --color-gray-alpha-700-value: hsla(0, 0%, 0%, 0.44);
-  --color-gray-alpha-800-value: hsla(0, 0%, 0%, 0.51);
-  --color-gray-alpha-900-value: hsla(0, 0%, 0%, 0.61);
-  --color-gray-alpha-1000-value: hsla(0, 0%, 0%, 0.91);
+  --color-gray-alpha-100-value: #0000000d;
+  --color-gray-alpha-200-value: #00000015;
+  --color-gray-alpha-300-value: #0000001f;
+  --color-gray-alpha-400-value: #0000002b;
+  --color-gray-alpha-500-value: #00000036;
+  --color-gray-alpha-600-value: #00000057;
+  --color-gray-alpha-700-value: #00000070;
+  --color-gray-alpha-800-value: #00000082;
+  --color-gray-alpha-900-value: #0000009c;
+  --color-gray-alpha-1000-value: #000000e8;
 
   --color-gray-100-value: 0, 0%, 95%;
   --color-gray-200-value: 0, 0%, 93%;
@@ -28,7 +28,7 @@
   --color-gray-600-value: 0, 0%, 66%;
   --color-gray-700-value: 0, 0%, 56%;
   --color-gray-800-value: 0, 0%, 49%;
-  --color-gray-900-value: 0, 0%, 40%;
+  --color-gray-900-value: 0, 0%, 30%;
   --color-gray-1000-value: 0, 0%, 9%;
 
   --color-blue-100-value: 212, 100%, 97%;
@@ -113,29 +113,42 @@
   --primary-active: hsla(var(--primary), 90%);
 
   --radius: 0.5rem;
-  --duration: 0.15s;
+  --duration: 0.2s;
   --timing-function: ease-out;
   --ring: var(--primary);
 
-  --shadow-border-default-value: 0 0 0 1px rgba(0, 0, 0, 0.08);
-  --shadow-border-small-value: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
-  --shadow-border-medium-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.04),
-    0px 8px 8px -8px rgba(0, 0, 0, 0.04);
-  --shadow-border-large-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 2px 2px rgba(0, 0, 0, 0.04),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04);
-  --shadow-border-tooltip-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.02), 0px 4px 8px rgba(0, 0, 0, 0.04);
-  --shadow-border-menu-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06);
-  --shadow-border-modal-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
-  --shadow-border-fullscreen-value:
-    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
+  --shadow-background-border: 0 0 0 1px hsl(var(--background-200-value));
+  --shadow-border-value: 0 0 0 1px #00000014;
+  --shadow-small-value: 0px 2px 2px #0000000a;
+  --shadow-medium-value: 0px 2px 2px #0000000a, 0px 8px 8px -8px #0000000a;
+  --shadow-large-value: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
+  --shadow-tooltip-value: 0px 1px 1px #00000005, 0px 4px 8px #0000000a;
+  --shadow-menu-value:
+    0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
+  --shadow-modal-value:
+    0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
+  --shadow-fullscreen-value:
+    0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
+
+  /* component variables defaults */
+  --pxd-initial-index: 10;
+  --active-graph-item-radius: 0.125rem;
+  --avatar-size: 2rem;
+  --chip-size: 0.75rem;
+  --fader-size: 1rem;
+  --fader-color: var(--color-gray-100);
+  --hold-button-durations: 2000ms;
+  --hold-button-progress-color: var(--color-gray-alpha-600);
+  --popover-arrow-color: var(--color-gray-1000);
+  --popover-offset: 8;
+  --popover-scale: 0.95;
+  --popover-index: max(var(--pxd-initial-index), 10);
+  --overlay-index: calc(var(--popover-index) - 5);
+  --modal-index: calc(var(--overlay-index) + 5);
+  --modal-width: 33.75rem;
+  --placeholder-gap: 0.75rem;
+  --toggle-active-color: var(--color-primary);
+  --toggle-inactive-color: var(--color-gray-alpha-100);
 
   -webkit-tap-highlight-color: transparent;
   text-rendering: optimizeLegibility;
@@ -155,16 +168,16 @@
   --background-100-value: 0, 0%, 5%;
   --background-200-value: 0, 0%, 0%;
 
-  --color-gray-alpha-100-value: hsla(0, 0%, 100%, 0.06);
-  --color-gray-alpha-200-value: hsla(0, 0%, 100%, 0.09);
-  --color-gray-alpha-300-value: hsla(0, 0%, 100%, 0.13);
-  --color-gray-alpha-400-value: hsla(0, 0%, 100%, 0.14);
-  --color-gray-alpha-500-value: hsla(0, 0%, 100%, 0.24);
-  --color-gray-alpha-600-value: hsla(0, 0%, 100%, 0.51);
-  --color-gray-alpha-700-value: hsla(0, 0%, 100%, 0.54);
-  --color-gray-alpha-800-value: hsla(0, 0%, 100%, 0.47);
-  --color-gray-alpha-900-value: hsla(0, 0%, 100%, 0.61);
-  --color-gray-alpha-1000-value: hsla(0, 0%, 100%, 0.92);
+  --color-gray-alpha-100-value: #ffffff0f;
+  --color-gray-alpha-200-value: #ffffff17;
+  --color-gray-alpha-300-value: #ffffff21;
+  --color-gray-alpha-400-value: #ffffff24;
+  --color-gray-alpha-500-value: #ffffff3d;
+  --color-gray-alpha-600-value: #ffffff82;
+  --color-gray-alpha-700-value: #ffffff8a;
+  --color-gray-alpha-800-value: #ffffff78;
+  --color-gray-alpha-900-value: #ffffff9c;
+  --color-gray-alpha-1000-value: #ffffffeb;
 
   --color-gray-100-value: 0, 0%, 10%;
   --color-gray-200-value: 0, 0%, 12%;
@@ -254,27 +267,17 @@
   --color-pink-900-value: 341, 90%, 67%;
   --color-pink-1000-value: 333, 90%, 96%;
 
-  --shadow-border-default-value: 0 0 0 1px rgba(255, 255, 255, 0.145);
-  --shadow-border-small-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0 1px 2px 0 rgba(0, 0, 0, 0.04);
-  --shadow-border-medium-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 2px 2px rgba(0, 0, 0, 0.32),
-    0px 8px 8px -8px rgba(0, 0, 0, 0.16);
-  --shadow-border-large-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 2px 2px rgba(0, 0, 0, 0.04),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04);
-  --shadow-border-tooltip-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 4px 8px rgba(0, 0, 0, 0.04);
-  --shadow-border-menu-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 4px 8px -4px rgba(0, 0, 0, 0.04), 0px 16px 24px -8px rgba(0, 0, 0, 0.06);
-  --shadow-border-modal-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
-  --shadow-border-fullscreen-value:
-    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 1px 1px rgba(0, 0, 0, 0.02),
-    0px 8px 16px -4px rgba(0, 0, 0, 0.04), 0px 24px 32px -8px rgba(0, 0, 0, 0.06);
+  --shadow-border-value: 0 0 0 1px #ffffff25;
+  --shadow-small-value: 0px 1px 2px #00000029;
+  --shadow-medium-value: 0px 2px 2px #00000052, 0px 8px 8px -8px #00000029;
+  --shadow-large-value: 0px 2px 2px #0000000a, 0px 8px 16px -4px #0000000a;
+  --shadow-tooltip-value: 0px 1px 1px #00000005, 0px 4px 8px #0000000a;
+  --shadow-menu-value:
+    0px 1px 1px #00000005, 0px 4px 8px -4px #0000000a, 0px 16px 24px -8px #0000000f;
+  --shadow-modal-value:
+    0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
+  --shadow-fullscreen-value:
+    0px 1px 1px #00000005, 0px 8px 16px -4px #0000000a, 0px 24px 32px -8px #0000000f;
 
   color-scheme: dark;
 }
@@ -289,15 +292,14 @@
 
 @theme inline {
   --font-sans:
-    'Inter', 'Inter Fallback', 'Geist', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji',
-    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+    'Inter', 'Inter Fallback', 'Geist', Arial, ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
 
   --color-primary: hsl(var(--primary));
   --color-primary-hover: var(--primary-hover);
   --color-primary-active: var(--primary-active);
 
-  --color-input: var(--color-gray-alpha-300);
-  --color-border: hsl(var(--color-gray-300-value));
+  --color-border: var(--color-gray-alpha-300-value);
   --color-border-hover: hsl(var(--color-gray-500-value));
   --color-border-active: hsl(var(--color-gray-600-value));
 
@@ -306,7 +308,7 @@
   --color-background-100: hsl(var(--background-100-value));
   --color-background-200: hsl(var(--background-200-value));
   --color-background-hover: hsl(var(--color-gray-200-value));
-  --color-background-active: hsl(var(--color-gray-400-value));
+  --color-background-active: hsl(var(--color-gray-300-value));
 
   --color-gray-alpha-100: var(--color-gray-alpha-100-value);
   --color-gray-alpha-200: var(--color-gray-alpha-200-value);
@@ -409,6 +411,7 @@
 
   --default-transition-duration: var(--duration);
   --default-transition-timing-function: var(--timing-function);
+  --faster-transition-duration: calc(var(--duration) * 0.7);
 
   --z-1: 1;
   --spacing-em: 1em;
@@ -420,17 +423,32 @@
   --radius-xl: calc(var(--radius) + 4px);
   --radius-inherit: inherit;
 
-  --shadow-border-default: var(--shadow-border-default-value);
-  --shadow-border-small: var(--shadow-border-small-value);
-  --shadow-border-medium: var(--shadow-border-medium-value);
-  --shadow-border-large: var(--shadow-border-large-value);
-  --shadow-border-tooltip: var(--shadow-border-tooltip-value);
-  --shadow-border-menu: var(--shadow-border-menu-value);
-  --shadow-border-modal: var(--shadow-border-modal-value);
-  --shadow-border-fullscreen: var(--shadow-border-fullscreen-value);
-
-  --text-13px: 13px;
-  --text-15px: 15px;
+  --shadow-small: var(--shadow-small-value);
+  --shadow-medium: var(--shadow-medium-value);
+  --shadow-large: var(--shadow-large-value);
+  --shadow-tooltip: var(--shadow-tooltip-value);
+  --shadow-menu: var(--shadow-menu-value);
+  --shadow-modal: var(--shadow-modal-value);
+  --shadow-fullscreen: var(--shadow-fullscreen-value);
+
+  --shadow-border-base: var(--shadow-border-value);
+  --shadow-border-small:
+    var(--shadow-border-value), var(--shadow-small-value), var(--shadow-background-border);
+  --shadow-border-medium:
+    var(--shadow-border-value), var(--shadow-medium-value), var(--shadow-background-border);
+  --shadow-border-large:
+    var(--shadow-border-value), var(--shadow-large-value), var(--shadow-background-border);
+  --shadow-border-tooltip:
+    var(--shadow-border-value), var(--shadow-tooltip-value), var(--shadow-background-border);
+  --shadow-border-menu:
+    var(--shadow-border-value), var(--shadow-menu-value), var(--shadow-background-border);
+  --shadow-border-modal:
+    var(--shadow-border-value), var(--shadow-modal-value), var(--shadow-background-border);
+  --shadow-border-fullscreen:
+    var(--shadow-border-value), var(--shadow-fullscreen-value), var(--shadow-background-border);
+
+  --text-13: 13px;
+  --text-15: 15px;
 }
 
 @utility default-animation-duration {
@@ -461,20 +479,30 @@
   }
 }
 
+@utility self-focus-ring {
+  & {
+    outline-offset: 2px;
+  }
+  &:focus-visible {
+    outline: 2px solid hsl(var(--ring));
+  }
+}
+
 @utility peer-focus-ring {
+  & {
+    outline-offset: 2px;
+  }
+
   .peer:focus-visible ~ & {
-    box-shadow:
-      0 0 0 2px var(--color-background-100),
-      0 0 0 4px hsl(var(--ring));
+    outline: 2px solid hsl(var(--ring));
   }
 }
 
-@utility self-focus-ring {
-  &:focus-visible {
-    box-shadow:
-      0 0 0 2px var(--color-background-100),
-      0 0 0 4px hsl(var(--ring));
-  }
+@utility transition-appearance {
+  transition-property:
+    opacity, transform, translate, background-color, box-shadow, font-size, border, color;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
 }
 
 @utility visually-hidden {
@@ -486,7 +514,6 @@
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  visibility: hidden;
   border-width: 0;
   opacity: 0;
 }
@@ -503,39 +530,24 @@
   font-family: inherit;
 }
 
-@utility dvh-* {
-  height: calc(--value(integer) * 1vh);
-
-  @supports (height: 1dvh) {
-    height: calc(--value(integer) * 1dvh);
-  }
-}
-
-@utility max-dvh-* {
-  max-height: calc(--value(integer) * 1vh);
-
-  @supports (height: 1dvh) {
-    max-height: calc(--value(integer) * 1dvh);
-  }
-}
-
 @layer base {
   * {
-    @apply border-border;
+    border-color: var(--color-gray-300);
   }
 }
 
 @layer components {
   .pxd-input--border {
-    border: 1px solid var(--border-color, var(--color-gray-alpha-300));
+    border-width: 1px;
+    border-style: solid;
 
     &:not(.is-disabled, .is-readonly):hover {
-      --border-color: hsla(var(--primary), 0.5);
+      border-color: hsla(var(--primary), 0.5);
     }
 
     &:not(.is-disabled, .is-readonly)[data-focusing='true'],
     &:not(.is-disabled, .is-readonly):focus-within {
-      --border-color: var(--color-primary);
+      border-color: var(--color-primary);
       box-shadow: 0 0 0 3px hsla(var(--primary), 0.2);
     }
 
@@ -547,43 +559,28 @@
       &,
       &:focus-within,
       &[data-focusing='true'] {
-        --border-color: hsl(var(--color-red-900-value));
+        border-color: hsl(var(--color-red-900-value));
         box-shadow: 0 0 0 3px hsl(var(--color-red-300-value));
       }
 
       &:focus-within,
       &[data-focusing='true'],
       &:not(.is-disabled, .is-readonly):hover {
-        --border-color: hsl(var(--color-red-900-value));
+        border-color: hsl(var(--color-red-900-value));
         box-shadow: 0 0 0 3px hsl(var(--color-red-500-value));
       }
     }
   }
 }
 
-.pxd-container-mask::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  transition: opacity var(--default-transition-duration) var(--default-transition-timing-function);
-  pointer-events: none;
-  will-change: opacity;
-  z-index: 0;
-}
-
-[class*='pxd-transition--'] {
-  transition-duration: var(--default-transition-duration);
-  transition-timing-function: var(--default-transition-timing-function);
-}
-
 .pxd-transition--fade-enter-active,
 .pxd-transition--fade-leave-active {
   transition-property: opacity;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
   will-change: opacity;
 }
 
-.pxd-container-mask[data-visible='false']::after,
 .pxd-transition--fade-enter-from,
 .pxd-transition--fade-leave-to {
   opacity: 0;
@@ -593,13 +590,21 @@
 .pxd-transition--fade-scale-enter-active,
 .pxd-transition--fade-scale-leave-active {
   transition-property: opacity, transform, filter;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
   will-change: opacity, transform, filter;
 }
 
 .pxd-transition--fade-scale-enter-from,
 .pxd-transition--fade-scale-leave-to {
   opacity: 0;
-  transform: scale(var(--scale, 0.95));
+  filter: blur(5px);
+  transform: scale(0.75);
+}
+
+/* Make exit faster than enter */
+[class*='pxd-transition--'][class*='-leave-active'] {
+  transition-duration: var(--faster-transition-duration) !important;
 }
 
 /*