@lindaui/tokens 0.2.0 → 0.2.2

package/dist/index.css

@@ -220,6 +220,9 @@
   }
 }
 @layer utilities {
+  .pointer-events-auto {
+    pointer-events: auto;
+  }
   .pointer-events-none {
     pointer-events: none;
   }
@@ -229,12 +232,21 @@
   .absolute {
     position: absolute;
   }
+  .fixed {
+    position: fixed;
+  }
   .relative {
     position: relative;
   }
   .inset-0 {
     inset: 0;
   }
+  .inset-x-0 {
+    inset-inline: 0;
+  }
+  .top-0 {
+    top: 0;
+  }
   .top-3 {
     top: calc(var(--spacing) * 3);
   }
@@ -256,9 +268,6 @@
   .left-3 {
     left: calc(var(--spacing) * 3);
   }
-  .left-3\.5 {
-    left: calc(var(--spacing) * 3.5);
-  }
   .left-4 {
     left: calc(var(--spacing) * 4);
   }
@@ -364,6 +373,9 @@
   .inline {
     display: inline;
   }
+  .inline-block {
+    display: inline-block;
+  }
   .inline-flex {
     display: inline-flex;
   }
@@ -424,6 +436,9 @@
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -643,6 +658,9 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .min-w-\[240px\] {
+    min-width: 240px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -736,6 +754,13 @@
   .gap-\[3px\] {
     gap: 3px;
   }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-3 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -750,6 +775,9 @@
       margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
+  .gap-x-2 {
+    column-gap: calc(var(--spacing) * 2);
+  }
   .self-center {
     align-self: center;
   }
@@ -833,9 +861,6 @@
       border-color: color-mix(in oklab, var(--destructive) 35%, transparent);
     }
   }
-  .bg-\[oklch\(0\.16_0\.02_240\)\] {
-    background-color: oklch(0.16 0.02 240);
-  }
   .bg-\[var\(--accent\)\]\/10 {
     background-color: var(--accent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -896,6 +921,9 @@
       background-color: color-mix(in oklab, var(--destructive) 15%, transparent);
     }
   }
+  .bg-foreground {
+    background-color: var(--foreground);
+  }
   .bg-green-100 {
     background-color: var(--color-green-100);
   }
@@ -947,6 +975,24 @@
   .bg-yellow-100 {
     background-color: var(--color-yellow-100);
   }
+  .bg-linear-to-b {
+    --tw-gradient-position: to bottom;
+    @supports (background-image: linear-gradient(in lab, red, red)) {
+      --tw-gradient-position: to bottom in oklab;
+    }
+    background-image: linear-gradient(var(--tw-gradient-stops));
+  }
+  .from-black\/25 {
+    --tw-gradient-from: color-mix(in srgb, #000 25%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-gradient-from: color-mix(in oklab, var(--color-black) 25%, transparent);
+    }
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
+  .to-transparent {
+    --tw-gradient-to: transparent;
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .fill-foreground {
     fill: var(--foreground);
   }
@@ -1004,6 +1050,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -1046,9 +1095,15 @@
   .pt-4 {
     padding-top: calc(var(--spacing) * 4);
   }
+  .pt-\[max\(0\.75rem\,env\(safe-area-inset-top\)\)\] {
+    padding-top: max(0.75rem, env(safe-area-inset-top));
+  }
   .pt-\[max\(env\(safe-area-inset-top\)\,2rem\)\] {
     padding-top: max(env(safe-area-inset-top), 2rem);
   }
+  .pr-3 {
+    padding-right: calc(var(--spacing) * 3);
+  }
   .pr-8 {
     padding-right: calc(var(--spacing) * 8);
   }
@@ -1061,6 +1116,12 @@
   .pb-4 {
     padding-bottom: calc(var(--spacing) * 4);
   }
+  .pl-2 {
+    padding-left: calc(var(--spacing) * 2);
+  }
+  .pl-\[max\(0\.875rem\,env\(safe-area-inset-left\)\)\] {
+    padding-left: max(0.875rem, env(safe-area-inset-left));
+  }
   .text-center {
     text-align: center;
   }
@@ -1168,15 +1229,9 @@
   .text-\[inherit\] {
     color: inherit;
   }
-  .text-\[oklch\(0\.9_0\.01_220\)\] {
-    color: oklch(0.9 0.01 220);
-  }
   .text-\[oklch\(0\.16_0\.02_240\)\] {
     color: oklch(0.16 0.02 240);
   }
-  .text-\[oklch\(0\.72_0\.16_18\)\] {
-    color: oklch(0.72 0.16 18);
-  }
   .text-\[var\(--accent\)\] {
     color: var(--accent);
   }
@@ -1198,6 +1253,9 @@
   .text-\[var\(--warning\)\] {
     color: var(--warning);
   }
+  .text-background {
+    color: var(--background);
+  }
   .text-black {
     color: var(--color-black);
   }
@@ -1252,20 +1310,14 @@
   .text-viewer-foreground {
     color: var(--viewer-foreground);
   }
-  .text-white {
-    color: var(--color-white);
-  }
-  .text-white\/65 {
-    color: color-mix(in srgb, #fff 65%, transparent);
+  .text-viewer-foreground\/70 {
+    color: var(--viewer-foreground);
     @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white) 65%, transparent);
+      color: color-mix(in oklab, var(--viewer-foreground) 70%, transparent);
     }
   }
-  .text-white\/70 {
-    color: color-mix(in srgb, #fff 70%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white) 70%, transparent);
-    }
+  .text-white {
+    color: var(--color-white);
   }
   .text-yellow-800 {
     color: var(--color-yellow-800);
@@ -1311,6 +1363,10 @@
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
+  .shadow-sm {
+    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .filter {
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
@@ -1351,6 +1407,13 @@
       }
     }
   }
+  .hover\:bg-border {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--border);
+      }
+    }
+  }
   .active\:bg-accent {
     &:active {
       background-color: var(--accent);
@@ -12886,6 +12949,46 @@
     font-size: 18px;
   }
 }
+@keyframes ti-rec-pulse {
+  0% {
+    transform: scale(0.62);
+    opacity: 0.7;
+  }
+  100% {
+    transform: scale(1.25);
+    opacity: 0;
+  }
+}
+@keyframes ti-rec-blink {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.25;
+  }
+}
+@keyframes ti-wf {
+  0%, 100% {
+    height: 4px;
+  }
+  50% {
+    height: var(--wfmax);
+  }
+}
+@keyframes ti-fade {
+  from {
+    opacity: 0;
+  }
+}
+.ti-rec-pulse {
+  animation: ti-rec-pulse 1.8s ease-out infinite;
+}
+.ti-rec-blink {
+  animation: ti-rec-blink 1.2s ease-in-out infinite;
+}
+.ti-fade {
+  animation: ti-fade 0.25s ease both;
+}
 @property --tw-scale-x {
   syntax: "*";
   inherits: false;
@@ -12931,6 +13034,48 @@
   inherits: false;
   initial-value: solid;
 }
+@property --tw-gradient-position {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-via {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-to {
+  syntax: "<color>";
+  inherits: false;
+  initial-value: #0000;
+}
+@property --tw-gradient-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-via-stops {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-gradient-from-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+  syntax: "<length-percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
 @property --tw-leading {
   syntax: "*";
   inherits: false;
@@ -13124,48 +13269,6 @@
   inherits: false;
   initial-value: 0;
 }
-@property --tw-gradient-position {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-via {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-to {
-  syntax: "<color>";
-  inherits: false;
-  initial-value: #0000;
-}
-@property --tw-gradient-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-via-stops {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-gradient-from-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 0%;
-}
-@property --tw-gradient-via-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 50%;
-}
-@property --tw-gradient-to-position {
-  syntax: "<length-percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
 @property --tw-backdrop-blur {
   syntax: "*";
   inherits: false;
@@ -13275,6 +13378,15 @@
       --tw-skew-y: initial;
       --tw-space-y-reverse: 0;
       --tw-border-style: solid;
+      --tw-gradient-position: initial;
+      --tw-gradient-from: #0000;
+      --tw-gradient-via: #0000;
+      --tw-gradient-to: #0000;
+      --tw-gradient-stops: initial;
+      --tw-gradient-via-stops: initial;
+      --tw-gradient-from-position: 0%;
+      --tw-gradient-via-position: 50%;
+      --tw-gradient-to-position: 100%;
       --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-tracking: initial;
@@ -13336,15 +13448,6 @@
       --tw-outline-style: solid;
       --tw-border-spacing-x: 0;
       --tw-border-spacing-y: 0;
-      --tw-gradient-position: initial;
-      --tw-gradient-from: #0000;
-      --tw-gradient-via: #0000;
-      --tw-gradient-to: #0000;
-      --tw-gradient-stops: initial;
-      --tw-gradient-via-stops: initial;
-      --tw-gradient-from-position: 0%;
-      --tw-gradient-via-position: 50%;
-      --tw-gradient-to-position: 100%;
       --tw-backdrop-blur: initial;
       --tw-backdrop-brightness: initial;
       --tw-backdrop-contrast: initial;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lindaui/tokens",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Brand design tokens (OKLCH light/dark) + HeroUI v3 + Tailwind v4 compiled into a single CSS bundle.",
   "author": "Franco Carballar <francocarballar@gmail.com>",
   "license": "MIT",