pxd 0.0.13 → 0.0.16

package/dist/styles/tw.css

@@ -1,149 +1,112 @@
 @custom-variant dark (&:is(.dark *));
 
-@utility scrollbar-hidden {
-  & {
-    scrollbar-width: none;
-    -ms-overflow-style: none;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  &::-webkit-scrollbar {
-    display: none;
-  }
-}
-
-@utility smallest {
-  & {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-  }
-}
-
-@utility peer-focus-ring {
-  .peer:focus-visible ~ & {
-    box-shadow: 0 0 0 2px var(--background-100),0 0 0 4px var(--color-ring)
-  }
-}
-
-@utility self-focus-ring {
-  &:focus-visible {
-    box-shadow: 0 0 0 2px var(--background-100),0 0 0 4px var(--color-ring)
-  }
-}
-
 :root {
   --radius: 0.5rem;
 
   --background-100: #fff;
   --background-200: #f8f8f8;
 
-  --color-primary: hsl(var(--gray-1000-value));
-
-  --gray-alpha-100: hsla(0, 0%, 0%, 0.05);
-  --gray-alpha-200: hsla(0, 0%, 0%, 0.08);
-  --gray-alpha-300: hsla(0, 0%, 0%, 0.12);
-  --gray-alpha-400: hsla(0, 0%, 0%, 0.17);
-  --gray-alpha-500: hsla(0, 0%, 0%, 0.21);
-  --gray-alpha-600: hsla(0, 0%, 0%, 0.34);
-  --gray-alpha-700: hsla(0, 0%, 0%, 0.44);
-  --gray-alpha-800: hsla(0, 0%, 0%, 0.51);
-  --gray-alpha-900: hsla(0, 0%, 0%, 0.61);
-  --gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
-
-  --gray-100-value: 0, 0%, 95%;
-  --gray-200-value: 0, 0%, 93%;
-  --gray-300-value: 0, 0%, 90%;
-  --gray-400-value: 0, 0%, 85%;
-  --gray-500-value: 0, 0%, 79%;
-  --gray-600-value: 0, 0%, 66%;
-  --gray-700-value: 0, 0%, 56%;
-  --gray-800-value: 0, 0%, 49%;
-  --gray-900-value: 0, 0%, 40%;
-  --gray-1000-value: 0, 0%, 9%;
-
-  --blue-100-value: 212, 100%, 97%;
-  --blue-200-value: 210, 100%, 96%;
-  --blue-300-value: 210, 100%, 94%;
-  --blue-400-value: 209, 100%, 90%;
-  --blue-500-value: 209, 100%, 80%;
-  --blue-600-value: 208, 100%, 66%;
-  --blue-700-value: 212, 100%, 48%;
-  --blue-800-value: 212, 100%, 41%;
-  --blue-900-value: 211, 100%, 42%;
-  --blue-1000-value: 211, 100%, 15%;
-
-  --red-100-value: 0, 100%, 97%;
-  --red-200-value: 0, 100%, 96%;
-  --red-300-value: 0, 100%, 95%;
-  --red-400-value: 0, 90%, 92%;
-  --red-500-value: 0, 82%, 85%;
-  --red-600-value: 359, 90%, 71%;
-  --red-700-value: 358, 75%, 59%;
-  --red-800-value: 358, 70%, 52%;
-  --red-900-value: 358, 66%, 48%;
-  --red-1000-value: 355, 49%, 15%;
-
-  --amber-100-value: 39, 100%, 95%;
-  --amber-200-value: 44, 100%, 92%;
-  --amber-300-value: 43, 96%, 90%;
-  --amber-400-value: 42, 100%, 78%;
-  --amber-500-value: 38, 100%, 71%;
-  --amber-600-value: 36, 90%, 62%;
-  --amber-700-value: 39, 100%, 57%;
-  --amber-800-value: 35, 100%, 52%;
-  --amber-900-value: 30, 100%, 32%;
-  --amber-1000-value: 20, 79%, 17%;
-
-  --green-100-value: 120, 60%, 96%;
-  --green-200-value: 120, 60%, 95%;
-  --green-300-value: 120, 60%, 91%;
-  --green-400-value: 122, 60%, 86%;
-  --green-500-value: 124, 60%, 75%;
-  --green-600-value: 125, 60%, 64%;
-  --green-700-value: 131, 41%, 46%;
-  --green-800-value: 132, 43%, 39%;
-  --green-900-value: 133, 50%, 32%;
-  --green-1000-value: 128, 29%, 15%;
-
-  --teal-100-value: 169, 70%, 96%;
-  --teal-200-value: 167, 70%, 94%;
-  --teal-300-value: 168, 70%, 90%;
-  --teal-400-value: 170, 70%, 85%;
-  --teal-500-value: 170, 70%, 72%;
-  --teal-600-value: 170, 70%, 57%;
-  --teal-700-value: 173, 80%, 36%;
-  --teal-800-value: 173, 83%, 30%;
-  --teal-900-value: 174, 91%, 25%;
-  --teal-1000-value: 171, 80%, 13%;
-
-  --purple-100-value: 276, 100%, 97%;
-  --purple-200-value: 277, 87%, 97%;
-  --purple-300-value: 274, 78%, 95%;
-  --purple-400-value: 276, 71%, 92%;
-  --purple-500-value: 274, 70%, 82%;
-  --purple-600-value: 273, 72%, 73%;
-  --purple-700-value: 272, 51%, 54%;
-  --purple-800-value: 272, 47%, 45%;
-  --purple-900-value: 274, 71%, 43%;
-  --purple-1000-value: 276, 100%, 15%;
-
-  --pink-100-value: 330, 100%, 96%;
-  --pink-200-value: 340, 90%, 96%;
-  --pink-300-value: 340, 82%, 94%;
-  --pink-400-value: 341, 76%, 91%;
-  --pink-500-value: 340, 75%, 84%;
-  --pink-600-value: 341, 75%, 73%;
-  --pink-700-value: 336, 80%, 58%;
-  --pink-800-value: 336, 74%, 51%;
-  --pink-900-value: 336, 65%, 45%;
-  --pink-1000-value: 333, 74%, 15%;
+  --ring: var(--color-blue-900-value);
+  --primary: var(--color-gray-1000-value);
+
+  --color-gray-alpha-100: hsla(0, 0%, 0%, 0.05);
+  --color-gray-alpha-200: hsla(0, 0%, 0%, 0.08);
+  --color-gray-alpha-300: hsla(0, 0%, 0%, 0.12);
+  --color-gray-alpha-400: hsla(0, 0%, 0%, 0.17);
+  --color-gray-alpha-500: hsla(0, 0%, 0%, 0.21);
+  --color-gray-alpha-600: hsla(0, 0%, 0%, 0.34);
+  --color-gray-alpha-700: hsla(0, 0%, 0%, 0.44);
+  --color-gray-alpha-800: hsla(0, 0%, 0%, 0.51);
+  --color-gray-alpha-900: hsla(0, 0%, 0%, 0.61);
+  --color-gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
+
+  --color-gray-100-value: 0, 0%, 95%;
+  --color-gray-200-value: 0, 0%, 93%;
+  --color-gray-300-value: 0, 0%, 90%;
+  --color-gray-400-value: 0, 0%, 85%;
+  --color-gray-500-value: 0, 0%, 79%;
+  --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-1000-value: 0, 0%, 9%;
+
+  --color-blue-100-value: 212, 100%, 97%;
+  --color-blue-200-value: 210, 100%, 96%;
+  --color-blue-300-value: 210, 100%, 94%;
+  --color-blue-400-value: 209, 100%, 90%;
+  --color-blue-500-value: 209, 100%, 80%;
+  --color-blue-600-value: 208, 100%, 66%;
+  --color-blue-700-value: 212, 100%, 48%;
+  --color-blue-800-value: 212, 100%, 41%;
+  --color-blue-900-value: 211, 100%, 42%;
+  --color-blue-1000-value: 211, 100%, 15%;
+
+  --color-red-100-value: 0, 100%, 97%;
+  --color-red-200-value: 0, 100%, 96%;
+  --color-red-300-value: 0, 100%, 95%;
+  --color-red-400-value: 0, 90%, 92%;
+  --color-red-500-value: 0, 82%, 85%;
+  --color-red-600-value: 359, 90%, 71%;
+  --color-red-700-value: 358, 75%, 59%;
+  --color-red-800-value: 358, 70%, 52%;
+  --color-red-900-value: 358, 66%, 48%;
+  --color-red-1000-value: 355, 49%, 15%;
+
+  --color-amber-100-value: 39, 100%, 95%;
+  --color-amber-200-value: 44, 100%, 92%;
+  --color-amber-300-value: 43, 96%, 90%;
+  --color-amber-400-value: 42, 100%, 78%;
+  --color-amber-500-value: 38, 100%, 71%;
+  --color-amber-600-value: 36, 90%, 62%;
+  --color-amber-700-value: 39, 100%, 57%;
+  --color-amber-800-value: 35, 100%, 52%;
+  --color-amber-900-value: 30, 100%, 32%;
+  --color-amber-1000-value: 20, 79%, 17%;
+
+  --color-green-100-value: 120, 60%, 96%;
+  --color-green-200-value: 120, 60%, 95%;
+  --color-green-300-value: 120, 60%, 91%;
+  --color-green-400-value: 122, 60%, 86%;
+  --color-green-500-value: 124, 60%, 75%;
+  --color-green-600-value: 125, 60%, 64%;
+  --color-green-700-value: 131, 41%, 46%;
+  --color-green-800-value: 132, 43%, 39%;
+  --color-green-900-value: 133, 50%, 32%;
+  --color-green-1000-value: 128, 29%, 15%;
+
+  --color-teal-100-value: 169, 70%, 96%;
+  --color-teal-200-value: 167, 70%, 94%;
+  --color-teal-300-value: 168, 70%, 90%;
+  --color-teal-400-value: 170, 70%, 85%;
+  --color-teal-500-value: 170, 70%, 72%;
+  --color-teal-600-value: 170, 70%, 57%;
+  --color-teal-700-value: 173, 80%, 36%;
+  --color-teal-800-value: 173, 83%, 30%;
+  --color-teal-900-value: 174, 91%, 25%;
+  --color-teal-1000-value: 171, 80%, 13%;
+
+  --color-purple-100-value: 276, 100%, 97%;
+  --color-purple-200-value: 277, 87%, 97%;
+  --color-purple-300-value: 274, 78%, 95%;
+  --color-purple-400-value: 276, 71%, 92%;
+  --color-purple-500-value: 274, 70%, 82%;
+  --color-purple-600-value: 273, 72%, 73%;
+  --color-purple-700-value: 272, 51%, 54%;
+  --color-purple-800-value: 272, 47%, 45%;
+  --color-purple-900-value: 274, 71%, 43%;
+  --color-purple-1000-value: 276, 100%, 15%;
+
+  --color-pink-100-value: 330, 100%, 96%;
+  --color-pink-200-value: 340, 90%, 96%;
+  --color-pink-300-value: 340, 82%, 94%;
+  --color-pink-400-value: 341, 76%, 91%;
+  --color-pink-500-value: 340, 75%, 84%;
+  --color-pink-600-value: 341, 75%, 73%;
+  --color-pink-700-value: 336, 80%, 58%;
+  --color-pink-800-value: 336, 74%, 51%;
+  --color-pink-900-value: 336, 65%, 45%;
+  --color-pink-1000-value: 333, 74%, 15%;
 
   color-scheme: light;
   background-color: var(--color-background);
@@ -154,228 +117,224 @@
   --background-100: #121212;
   --background-200: #000;
 
-  --gray-100-value: 0, 0%, 10%;
-  --gray-200-value: 0, 0%, 12%;
-  --gray-300-value: 0, 0%, 16%;
-  --gray-400-value: 0, 0%, 18%;
-  --gray-500-value: 0, 0%, 27%;
-  --gray-600-value: 0, 0%, 53%;
-  --gray-700-value: 0, 0%, 56%;
-  --gray-800-value: 0, 0%, 49%;
-  --gray-900-value: 0, 0%, 63%;
-  --gray-1000-value: 0, 0%, 93%;
-
-  --blue-100-value: 216, 50%, 12%;
-  --blue-200-value: 214, 59%, 15%;
-  --blue-300-value: 213, 71%, 20%;
-  --blue-400-value: 212, 78%, 23%;
-  --blue-500-value: 211, 86%, 27%;
-  --blue-600-value: 206, 100%, 50%;
-  --blue-700-value: 212, 100%, 48%;
-  --blue-800-value: 212, 100%, 41%;
-  --blue-900-value: 210, 100%, 66%;
-  --blue-1000-value: 206, 100%, 96%;
-
-  --red-100-value: 357, 37%, 12%;
-  --red-200-value: 357, 46%, 16%;
-  --red-300-value: 356, 54%, 22%;
-  --red-400-value: 357, 55%, 26%;
-  --red-500-value: 357, 60%, 32%;
-  --red-600-value: 358, 75%, 59%;
-  --red-700-value: 358, 75%, 59%;
-  --red-800-value: 358, 69%, 52%;
-  --red-900-value: 358, 100%, 69%;
-  --red-1000-value: 353, 90%, 96%;
-
-  --amber-100-value: 35, 100%, 8%;
-  --amber-200-value: 32, 100%, 10%;
-  --amber-300-value: 33, 100%, 15%;
-  --amber-400-value: 35, 100%, 17%;
-  --amber-500-value: 35, 91%, 22%;
-  --amber-600-value: 39, 85%, 49%;
-  --amber-700-value: 39, 100%, 57%;
-  --amber-800-value: 35, 100%, 52%;
-  --amber-900-value: 39, 90%, 50%;
-  --amber-1000-value: 40, 94%, 93%;
-
-  --green-100-value: 136, 50%, 9%;
-  --green-200-value: 137, 50%, 12%;
-  --green-300-value: 136, 50%, 14%;
-  --green-400-value: 135, 70%, 16%;
-  --green-500-value: 135, 70%, 23%;
-  --green-600-value: 135, 70%, 34%;
-  --green-700-value: 131, 41%, 46%;
-  --green-800-value: 132, 43%, 39%;
-  --green-900-value: 131, 43%, 57%;
-  --green-1000-value: 136, 73%, 94%;
-
-  --teal-100-value: 169, 78%, 7%;
-  --teal-200-value: 170, 74%, 9%;
-  --teal-300-value: 171, 75%, 13%;
-  --teal-400-value: 171, 85%, 13%;
-  --teal-500-value: 172, 85%, 20%;
-  --teal-600-value: 172, 85%, 32%;
-  --teal-700-value: 173, 80%, 36%;
-  --teal-800-value: 173, 83%, 30%;
-  --teal-900-value: 174, 90%, 41%;
-  --teal-1000-value: 166, 71%, 93%;
-
-  --purple-100-value: 283, 30%, 12%;
-  --purple-200-value: 281, 38%, 16%;
-  --purple-300-value: 279, 44%, 23%;
-  --purple-400-value: 277, 46%, 28%;
-  --purple-500-value: 274, 49%, 35%;
-  --purple-600-value: 272, 51%, 54%;
-  --purple-700-value: 272, 51%, 54%;
-  --purple-800-value: 272, 47%, 45%;
-  --purple-900-value: 275, 80%, 71%;
-  --purple-1000-value: 281, 73%, 96%;
-
-  --pink-100-value: 335, 32%, 12%;
-  --pink-200-value: 335, 43%, 16%;
-  --pink-300-value: 335, 47%, 21%;
-  --pink-400-value: 335, 51%, 22%;
-  --pink-500-value: 335, 57%, 27%;
-  --pink-600-value: 336, 75%, 40%;
-  --pink-700-value: 336, 80%, 58%;
-  --pink-800-value: 336, 74%, 51%;
-  --pink-900-value: 341, 90%, 67%;
-  --pink-1000-value: 333, 90%, 96%;
-
-  --gray-alpha-100: hsla(0, 0%, 100%, .06);
-  --gray-alpha-200: hsla(0, 0%, 100%, .09);
-  --gray-alpha-300: hsla(0, 0%, 100%, .13);
-  --gray-alpha-400: hsla(0, 0%, 100%, .14);
-  --gray-alpha-500: hsla(0, 0%, 100%, .24);
-  --gray-alpha-600: hsla(0, 0%, 100%, .51);
-  --gray-alpha-700: hsla(0, 0%, 100%, .54);
-  --gray-alpha-800: hsla(0, 0%, 100%, .47);
-  --gray-alpha-900: hsla(0, 0%, 100%, .61);
-  --gray-alpha-1000: hsla(0, 0%, 100%, .92);
+  --color-gray-alpha-100: hsla(0, 0%, 100%, 0.06);
+  --color-gray-alpha-200: hsla(0, 0%, 100%, 0.09);
+  --color-gray-alpha-300: hsla(0, 0%, 100%, 0.13);
+  --color-gray-alpha-400: hsla(0, 0%, 100%, 0.14);
+  --color-gray-alpha-500: hsla(0, 0%, 100%, 0.24);
+  --color-gray-alpha-600: hsla(0, 0%, 100%, 0.51);
+  --color-gray-alpha-700: hsla(0, 0%, 100%, 0.54);
+  --color-gray-alpha-800: hsla(0, 0%, 100%, 0.47);
+  --color-gray-alpha-900: hsla(0, 0%, 100%, 0.61);
+  --color-gray-alpha-1000: hsla(0, 0%, 100%, 0.92);
+
+  --color-gray-100-value: 0, 0%, 10%;
+  --color-gray-200-value: 0, 0%, 12%;
+  --color-gray-300-value: 0, 0%, 16%;
+  --color-gray-400-value: 0, 0%, 18%;
+  --color-gray-500-value: 0, 0%, 27%;
+  --color-gray-600-value: 0, 0%, 53%;
+  --color-gray-700-value: 0, 0%, 56%;
+  --color-gray-800-value: 0, 0%, 49%;
+  --color-gray-900-value: 0, 0%, 63%;
+  --color-gray-1000-value: 0, 0%, 93%;
+
+  --color-blue-100-value: 216, 50%, 12%;
+  --color-blue-200-value: 214, 59%, 15%;
+  --color-blue-300-value: 213, 71%, 20%;
+  --color-blue-400-value: 212, 78%, 23%;
+  --color-blue-500-value: 211, 86%, 27%;
+  --color-blue-600-value: 206, 100%, 50%;
+  --color-blue-700-value: 212, 100%, 48%;
+  --color-blue-800-value: 212, 100%, 41%;
+  --color-blue-900-value: 210, 100%, 66%;
+  --color-blue-1000-value: 206, 100%, 96%;
+
+  --color-red-100-value: 357, 37%, 12%;
+  --color-red-200-value: 357, 46%, 16%;
+  --color-red-300-value: 356, 54%, 22%;
+  --color-red-400-value: 357, 55%, 26%;
+  --color-red-500-value: 357, 60%, 32%;
+  --color-red-600-value: 358, 75%, 59%;
+  --color-red-700-value: 358, 75%, 59%;
+  --color-red-800-value: 358, 69%, 52%;
+  --color-red-900-value: 358, 100%, 69%;
+  --color-red-1000-value: 353, 90%, 96%;
+
+  --color-amber-100-value: 35, 100%, 8%;
+  --color-amber-200-value: 32, 100%, 10%;
+  --color-amber-300-value: 33, 100%, 15%;
+  --color-amber-400-value: 35, 100%, 17%;
+  --color-amber-500-value: 35, 91%, 22%;
+  --color-amber-600-value: 39, 85%, 49%;
+  --color-amber-700-value: 39, 100%, 57%;
+  --color-amber-800-value: 35, 100%, 52%;
+  --color-amber-900-value: 39, 90%, 50%;
+  --color-amber-1000-value: 40, 94%, 93%;
+
+  --color-green-100-value: 136, 50%, 9%;
+  --color-green-200-value: 137, 50%, 12%;
+  --color-green-300-value: 136, 50%, 14%;
+  --color-green-400-value: 135, 70%, 16%;
+  --color-green-500-value: 135, 70%, 23%;
+  --color-green-600-value: 135, 70%, 34%;
+  --color-green-700-value: 131, 41%, 46%;
+  --color-green-800-value: 132, 43%, 39%;
+  --color-green-900-value: 131, 43%, 57%;
+  --color-green-1000-value: 136, 73%, 94%;
+
+  --color-teal-100-value: 169, 78%, 7%;
+  --color-teal-200-value: 170, 74%, 9%;
+  --color-teal-300-value: 171, 75%, 13%;
+  --color-teal-400-value: 171, 85%, 13%;
+  --color-teal-500-value: 172, 85%, 20%;
+  --color-teal-600-value: 172, 85%, 32%;
+  --color-teal-700-value: 173, 80%, 36%;
+  --color-teal-800-value: 173, 83%, 30%;
+  --color-teal-900-value: 174, 90%, 41%;
+  --color-teal-1000-value: 166, 71%, 93%;
+
+  --color-purple-100-value: 283, 30%, 12%;
+  --color-purple-200-value: 281, 38%, 16%;
+  --color-purple-300-value: 279, 44%, 23%;
+  --color-purple-400-value: 277, 46%, 28%;
+  --color-purple-500-value: 274, 49%, 35%;
+  --color-purple-600-value: 272, 51%, 54%;
+  --color-purple-700-value: 272, 51%, 54%;
+  --color-purple-800-value: 272, 47%, 45%;
+  --color-purple-900-value: 275, 80%, 71%;
+  --color-purple-1000-value: 281, 73%, 96%;
+
+  --color-pink-100-value: 335, 32%, 12%;
+  --color-pink-200-value: 335, 43%, 16%;
+  --color-pink-300-value: 335, 47%, 21%;
+  --color-pink-400-value: 335, 51%, 22%;
+  --color-pink-500-value: 335, 57%, 27%;
+  --color-pink-600-value: 336, 75%, 40%;
+  --color-pink-700-value: 336, 80%, 58%;
+  --color-pink-800-value: 336, 74%, 51%;
+  --color-pink-900-value: 341, 90%, 67%;
+  --color-pink-1000-value: 333, 90%, 96%;
 
   color-scheme: dark;
 }
 
 @theme inline {
-  --color-foreground: hsl(var(--gray-1000-value));
+  --color-primary: hsl(var(--primary));
+
+  --color-input: var(--color-gray-alpha-300);
+  --color-border: hsl(var(--color-gray-300-value));
+  --color-border-hover: hsl(var(--color-gray-500-value));
+  --color-border-active: hsl(var(--color-gray-600-value));
+
+  --color-foreground: hsl(var(--color-gray-1000-value));
+  --color-foreground-secondary: hsl(var(--color-gray-900-value));
   --color-background: var(--background-100);
   --color-background-secondary: var(--background-200);
-  --color-background-muted: hsl(var(--gray-100-value));
-  --color-background-hover: hsl(var(--gray-200-value));
-  --color-background-active: hsl(var(--gray-300-value));
-
-  --color-primary: var(--color-primary);
-  --color-secondary: hsl(var(--gray-700-value));
-  --color-muted: var(--gray-alpha-800);
-  --color-amber: hsl(var(--amber-700-value));
-  --color-accent: hsl(var(--green-700-value));
-  --color-danger: hsl(var(--red-700-value));
-
-  --color-border: hsl(var(--gray-300-value));
-  --color-border-hover: hsl(var(--gray-500-value));
-  --color-border-active: hsl(var(--gray-600-value));
-
-  --color-input: var(--gray-alpha-300);
-  --color-ring: hsl(var(--blue-900-value));
-
-  --color-gray-100: hsl(var(--gray-100-value));
-  --color-gray-200: hsl(var(--gray-200-value));
-  --color-gray-300: hsl(var(--gray-300-value));
-  --color-gray-400: hsl(var(--gray-400-value));
-  --color-gray-500: hsl(var(--gray-500-value));
-  --color-gray-600: hsl(var(--gray-600-value));
-  --color-gray-700: hsl(var(--gray-700-value));
-  --color-gray-800: hsl(var(--gray-800-value));
-  --color-gray-900: hsl(var(--gray-900-value));
-  --color-gray-1000: hsl(var(--gray-1000-value));
-
-  --color-gray-alpha-100: var(--gray-alpha-100);
-  --color-gray-alpha-200: var(--gray-alpha-200);
-  --color-gray-alpha-300: var(--gray-alpha-300);
-  --color-gray-alpha-400: var(--gray-alpha-400);
-  --color-gray-alpha-500: var(--gray-alpha-500);
-  --color-gray-alpha-600: var(--gray-alpha-600);
-  --color-gray-alpha-700: var(--gray-alpha-700);
-  --color-gray-alpha-800: var(--gray-alpha-800);
-  --color-gray-alpha-900: var(--gray-alpha-900);
-  --color-gray-alpha-1000: var(--gray-alpha-1000);
-
-  --color-red-100: hsl(var(--red-100-value));
-  --color-red-200: hsl(var(--red-200-value));
-  --color-red-300: hsl(var(--red-300-value));
-  --color-red-400: hsl(var(--red-400-value));
-  --color-red-500: hsl(var(--red-500-value));
-  --color-red-600: hsl(var(--red-600-value));
-  --color-red-700: hsl(var(--red-700-value));
-  --color-red-800: hsl(var(--red-800-value));
-  --color-red-900: hsl(var(--red-900-value));
-  --color-red-1000: hsl(var(--red-1000-value));
-
-  --color-blue-100: hsl(var(--blue-100-value));
-  --color-blue-200: hsl(var(--blue-200-value));
-  --color-blue-300: hsl(var(--blue-300-value));
-  --color-blue-400: hsl(var(--blue-400-value));
-  --color-blue-500: hsl(var(--blue-500-value));
-  --color-blue-600: hsl(var(--blue-600-value));
-  --color-blue-700: hsl(var(--blue-700-value));
-  --color-blue-800: hsl(var(--blue-800-value));
-  --color-blue-900: hsl(var(--blue-900-value));
-  --color-blue-1000: hsl(var(--blue-1000-value));
-
-  --color-amber-100: hsl(var(--amber-100-value));
-  --color-amber-200: hsl(var(--amber-200-value));
-  --color-amber-300: hsl(var(--amber-300-value));
-  --color-amber-400: hsl(var(--amber-400-value));
-  --color-amber-500: hsl(var(--amber-500-value));
-  --color-amber-600: hsl(var(--amber-600-value));
-  --color-amber-700: hsl(var(--amber-700-value));
-  --color-amber-800: hsl(var(--amber-800-value));
-  --color-amber-900: hsl(var(--amber-900-value));
-  --color-amber-1000: hsl(var(--amber-1000-value));
-
-  --color-green-100: hsl(var(--green-100-value));
-  --color-green-200: hsl(var(--green-200-value));
-  --color-green-300: hsl(var(--green-300-value));
-  --color-green-400: hsl(var(--green-400-value));
-  --color-green-500: hsl(var(--green-500-value));
-  --color-green-600: hsl(var(--green-600-value));
-  --color-green-700: hsl(var(--green-700-value));
-  --color-green-800: hsl(var(--green-800-value));
-  --color-green-900: hsl(var(--green-900-value));
-  --color-green-1000: hsl(var(--green-1000-value));
-
-  --color-teal-100: hsl(var(--teal-100-value));
-  --color-teal-200: hsl(var(--teal-200-value));
-  --color-teal-300: hsl(var(--teal-300-value));
-  --color-teal-400: hsl(var(--teal-400-value));
-  --color-teal-500: hsl(var(--teal-500-value));
-  --color-teal-600: hsl(var(--teal-600-value));
-  --color-teal-700: hsl(var(--teal-700-value));
-  --color-teal-800: hsl(var(--teal-800-value));
-  --color-teal-900: hsl(var(--teal-900-value));
-  --color-teal-1000: hsl(var(--teal-1000-value));
-
-  --color-purple-100: hsl(var(--purple-100-value));
-  --color-purple-200: hsl(var(--purple-200-value));
-  --color-purple-300: hsl(var(--purple-300-value));
-  --color-purple-400: hsl(var(--purple-400-value));
-  --color-purple-500: hsl(var(--purple-500-value));
-  --color-purple-600: hsl(var(--purple-600-value));
-  --color-purple-700: hsl(var(--purple-700-value));
-  --color-purple-800: hsl(var(--purple-800-value));
-  --color-purple-900: hsl(var(--purple-900-value));
-  --color-purple-1000: hsl(var(--purple-1000-value));
-
-  --color-pink-100: hsl(var(--pink-100-value));
-  --color-pink-200: hsl(var(--pink-200-value));
-  --color-pink-300: hsl(var(--pink-300-value));
-  --color-pink-400: hsl(var(--pink-400-value));
-  --color-pink-500: hsl(var(--pink-500-value));
-  --color-pink-600: hsl(var(--pink-600-value));
-  --color-pink-700: hsl(var(--pink-700-value));
-  --color-pink-800: hsl(var(--pink-800-value));
-  --color-pink-900: hsl(var(--pink-900-value));
-  --color-pink-1000: hsl(var(--pink-1000-value));
+  --color-background-hover: hsl(var(--color-gray-200-value));
+  --color-background-active: hsl(var(--color-gray-300-value));
+
+  --color-gray-alpha-100: var(--color-gray-alpha-100);
+  --color-gray-alpha-200: var(--color-gray-alpha-200);
+  --color-gray-alpha-300: var(--color-gray-alpha-300);
+  --color-gray-alpha-400: var(--color-gray-alpha-400);
+  --color-gray-alpha-500: var(--color-gray-alpha-500);
+  --color-gray-alpha-600: var(--color-gray-alpha-600);
+  --color-gray-alpha-700: var(--color-gray-alpha-700);
+  --color-gray-alpha-800: var(--color-gray-alpha-800);
+  --color-gray-alpha-900: var(--color-gray-alpha-900);
+  --color-gray-alpha-1000: var(--color-gray-alpha-1000);
+
+  --color-gray-100: hsl(var(--color-gray-100-value));
+  --color-gray-200: hsl(var(--color-gray-200-value));
+  --color-gray-300: hsl(var(--color-gray-300-value));
+  --color-gray-400: hsl(var(--color-gray-400-value));
+  --color-gray-500: hsl(var(--color-gray-500-value));
+  --color-gray-600: hsl(var(--color-gray-600-value));
+  --color-gray-700: hsl(var(--color-gray-700-value));
+  --color-gray-800: hsl(var(--color-gray-800-value));
+  --color-gray-900: hsl(var(--color-gray-900-value));
+  --color-gray-1000: hsl(var(--color-gray-1000-value));
+
+  --color-red-100: hsl(var(--color-red-100-value));
+  --color-red-200: hsl(var(--color-red-200-value));
+  --color-red-300: hsl(var(--color-red-300-value));
+  --color-red-400: hsl(var(--color-red-400-value));
+  --color-red-500: hsl(var(--color-red-500-value));
+  --color-red-600: hsl(var(--color-red-600-value));
+  --color-red-700: hsl(var(--color-red-700-value));
+  --color-red-800: hsl(var(--color-red-800-value));
+  --color-red-900: hsl(var(--color-red-900-value));
+  --color-red-1000: hsl(var(--color-red-1000-value));
+
+  --color-blue-100: hsl(var(--color-blue-100-value));
+  --color-blue-200: hsl(var(--color-blue-200-value));
+  --color-blue-300: hsl(var(--color-blue-300-value));
+  --color-blue-400: hsl(var(--color-blue-400-value));
+  --color-blue-500: hsl(var(--color-blue-500-value));
+  --color-blue-600: hsl(var(--color-blue-600-value));
+  --color-blue-700: hsl(var(--color-blue-700-value));
+  --color-blue-800: hsl(var(--color-blue-800-value));
+  --color-blue-900: hsl(var(--color-blue-900-value));
+  --color-blue-1000: hsl(var(--color-blue-1000-value));
+
+  --color-amber-100: hsl(var(--color-amber-100-value));
+  --color-amber-200: hsl(var(--color-amber-200-value));
+  --color-amber-300: hsl(var(--color-amber-300-value));
+  --color-amber-400: hsl(var(--color-amber-400-value));
+  --color-amber-500: hsl(var(--color-amber-500-value));
+  --color-amber-600: hsl(var(--color-amber-600-value));
+  --color-amber-700: hsl(var(--color-amber-700-value));
+  --color-amber-800: hsl(var(--color-amber-800-value));
+  --color-amber-900: hsl(var(--color-amber-900-value));
+  --color-amber-1000: hsl(var(--color-amber-1000-value));
+
+  --color-green-100: hsl(var(--color-green-100-value));
+  --color-green-200: hsl(var(--color-green-200-value));
+  --color-green-300: hsl(var(--color-green-300-value));
+  --color-green-400: hsl(var(--color-green-400-value));
+  --color-green-500: hsl(var(--color-green-500-value));
+  --color-green-600: hsl(var(--color-green-600-value));
+  --color-green-700: hsl(var(--color-green-700-value));
+  --color-green-800: hsl(var(--color-green-800-value));
+  --color-green-900: hsl(var(--color-green-900-value));
+  --color-green-1000: hsl(var(--color-green-1000-value));
+
+  --color-teal-100: hsl(var(--color-teal-100-value));
+  --color-teal-200: hsl(var(--color-teal-200-value));
+  --color-teal-300: hsl(var(--color-teal-300-value));
+  --color-teal-400: hsl(var(--color-teal-400-value));
+  --color-teal-500: hsl(var(--color-teal-500-value));
+  --color-teal-600: hsl(var(--color-teal-600-value));
+  --color-teal-700: hsl(var(--color-teal-700-value));
+  --color-teal-800: hsl(var(--color-teal-800-value));
+  --color-teal-900: hsl(var(--color-teal-900-value));
+  --color-teal-1000: hsl(var(--color-teal-1000-value));
+
+  --color-purple-100: hsl(var(--color-purple-100-value));
+  --color-purple-200: hsl(var(--color-purple-200-value));
+  --color-purple-300: hsl(var(--color-purple-300-value));
+  --color-purple-400: hsl(var(--color-purple-400-value));
+  --color-purple-500: hsl(var(--color-purple-500-value));
+  --color-purple-600: hsl(var(--color-purple-600-value));
+  --color-purple-700: hsl(var(--color-purple-700-value));
+  --color-purple-800: hsl(var(--color-purple-800-value));
+  --color-purple-900: hsl(var(--color-purple-900-value));
+  --color-purple-1000: hsl(var(--color-purple-1000-value));
+
+  --color-pink-100: hsl(var(--color-pink-100-value));
+  --color-pink-200: hsl(var(--color-pink-200-value));
+  --color-pink-300: hsl(var(--color-pink-300-value));
+  --color-pink-400: hsl(var(--color-pink-400-value));
+  --color-pink-500: hsl(var(--color-pink-500-value));
+  --color-pink-600: hsl(var(--color-pink-600-value));
+  --color-pink-700: hsl(var(--color-pink-700-value));
+  --color-pink-800: hsl(var(--color-pink-800-value));
+  --color-pink-900: hsl(var(--color-pink-900-value));
+  --color-pink-1000: hsl(var(--color-pink-1000-value));
+
+  --z-1: 1;
+  --spacing-em: 1em;
 
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
@@ -390,9 +349,44 @@
   --shadow-lg: 0 30px 60px rgba(0, 0, 0, 0.12);
   --shadow-hover: 0 30px 60px rgba(0, 0, 0, 0.12);
   --shadow-sticky: 0 12px 10px -10px rgba(0, 0, 0, 0.12);
+}
 
-  --spacing-em: 1em;
-  --z-1: 1;
+@utility scrollbar-hidden {
+  & {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility peer-focus-ring {
+  .peer:focus-visible ~ & {
+    box-shadow: 0 0 0 2px var(--background-100), 0 0 0 4px hsl(var(--ring));
+  }
+}
+
+@utility self-focus-ring {
+  &:focus-visible {
+    box-shadow: 0 0 0 2px var(--background-100), 0 0 0 4px hsl(var(--ring));
+  }
+}
+
+@utility smallest {
+  & {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
 }
 
 @layer base {
@@ -400,3 +394,15 @@
     @apply border-border;
   }
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  .pxd-transition--fade-enter-active,
+  .pxd-transition--fade-leave-active {
+    transition: opacity 0.2s ease;
+  }
+
+  .pxd-transition--fade-enter-from,
+  .pxd-transition--fade-leave-to {
+    opacity: 0;
+  }
+}