@techfides/ui-library-design 0.9.0 → 0.9.1

package/css/theme.css

@@ -50,13 +50,11 @@
 
 @theme static inline {
   --ceiling-tf-accent: var(--tf-accent-ceiling);
-
   --color-tf-accent: var(--tf-accent);
-  --color-tf-accent-hi: oklch(from var(--tf-accent) 0.73 c h);
-  --color-tf-accent-surface: oklch(from var(--tf-accent) 0.55 c h);
-  --color-tf-accent-deep: oklch(from var(--tf-accent) 0.45 c h);
-  --color-tf-on-accent: #ffffff;
-
+  --color-tf-accent-hi: oklch(from var(--tf-accent) 73% c h);
+  --color-tf-accent-surface: oklch(from var(--tf-accent) 55% c h);
+  --color-tf-accent-deep: oklch(from var(--tf-accent) 45% c h);
+  --color-tf-on-accent: #fff;
   --color-tf-accent-tint: color-mix(
     in oklab,
     var(--tf-accent) var(--tf-tint),
@@ -76,13 +74,11 @@
   --color-tf-panel-2: rgb(255 255 255 / 3%);
   --color-tf-panel-hi: rgb(255 255 255 / 8.5%);
   --color-tf-glass: rgb(255 255 255 / 6.5%);
-
   --color-tf-sunken: rgb(0 0 0 / 26%);
   --color-tf-sunken-hi: rgb(0 0 0 / 20%);
   --color-tf-sunken-quiet: rgb(0 0 0 / 34%);
   --color-tf-control: rgb(255 255 255 / 9%);
   --color-tf-control-hi: rgb(255 255 255 / 12%);
-
   --color-tf-surface-hi: color-mix(in oklab, #fff 4.5%, var(--color-tf-surface));
   --color-tf-surface-quiet: color-mix(in oklab, var(--color-tf-bg) 55%, var(--color-tf-surface));
   --color-tf-shade-under: color-mix(in oklab, var(--color-tf-bg) 38%, transparent);
@@ -95,26 +91,22 @@
   --color-tf-fg: #eef1f6;
   --color-tf-fg-held: color-mix(in oklab, #eef1f6 82%, var(--color-tf-bg));
   --color-tf-muted: #98a1b2;
-
-  --color-tf-success: oklch(0.55 0.19 133);
-  --color-tf-success-hi: oklch(0.73 0.195 133);
-  --color-tf-warning: oklch(0.6 0.13 70);
-  --color-tf-warning-hi: oklch(0.73 0.158 70);
-  --color-tf-info: oklch(0.55 0.196 243);
-  --color-tf-info-hi: oklch(0.73 0.156 243);
-  --color-tf-danger: oklch(0.55 0.241 27);
-  --color-tf-danger-hi: oklch(0.73 0.17 27);
-  --color-tf-on-semantic: #ffffff;
-
+  --color-tf-success: oklch(55% 0.19 133deg);
+  --color-tf-success-hi: oklch(73% 0.195 133deg);
+  --color-tf-warning: oklch(60% 0.13 70deg);
+  --color-tf-warning-hi: oklch(73% 0.158 70deg);
+  --color-tf-info: oklch(55% 0.196 243deg);
+  --color-tf-info-hi: oklch(73% 0.156 243deg);
+  --color-tf-danger: oklch(55% 0.241 27deg);
+  --color-tf-danger-hi: oklch(73% 0.17 27deg);
+  --color-tf-on-semantic: #fff;
   --ceiling-tf-success: 0.169;
   --ceiling-tf-warning: 0.13;
   --ceiling-tf-info: 0.145;
   --ceiling-tf-danger: 0.244;
-
   --tf-tint: 15%;
   --tf-edge: 32%;
   --tf-edge-rest: 32%;
-
   --tf-rest-angle: 110deg;
   --tf-rest-waist: 33%;
   --tf-mixed-angle: 150deg;
@@ -122,11 +114,9 @@
   --tf-milk-reach: 34%;
   --tf-pressed-angle: 124deg;
   --tf-fall-angle: 180deg;
-
   --tf-glass-flat:
     linear-gradient(var(--color-tf-glass), var(--color-tf-glass)), var(--color-tf-bg);
   --tf-rise-angle: 290deg;
-
   --color-tf-success-tint: color-mix(
     in oklab,
     var(--color-tf-success) var(--tf-tint),
@@ -168,10 +158,8 @@
     var(--color-tf-danger) var(--tf-edge),
     var(--color-tf-surface)
   );
-
   --font-tf-display: 'Poppins', system-ui, sans-serif;
   --font-tf-body: 'Inter Variable', 'Inter', system-ui, sans-serif;
-
   --text-tf-numeral: clamp(96px, 11vw, 160px);
   --text-tf-numeral--line-height: 1;
   --text-tf-display: clamp(38px, 4.5vw, 54px);
@@ -198,16 +186,13 @@
   --text-tf-caption--line-height: 1.6;
   --text-tf-caption-sm: 12px;
   --text-tf-caption-sm--line-height: 1.6;
-
   --tracking-tf-tight: -0.022em;
   --tracking-tf-eyebrow: 0.12em;
-
   --breakpoint-*: initial;
   --breakpoint-sm: 40rem;
   --breakpoint-md: 48rem;
   --breakpoint-lg: 64rem;
   --breakpoint-xl: 80rem;
-
   --container-*: initial;
   --max-width-*: initial;
   --container-tf-panel: 24rem;
@@ -216,97 +201,77 @@
   --container-tf-measure: 65ch;
   --container-tf-page: 56rem;
   --container-tf-canvas: 100rem;
-
   --spacing-tf-hairline: 1px;
-
   --spacing-tf-control-2xs: 1.5rem;
   --spacing-tf-control-xs: 2rem;
   --spacing-tf-control-sm: 2.5rem;
   --spacing-tf-control-md: 3rem;
   --spacing-tf-control-lg: 3.5rem;
-
   --spacing-tf-row: 2.25rem;
   --spacing-tf-chip-sm: 1.5rem;
   --spacing-tf-target: 3rem;
-
   --spacing-tf-menu: 12rem;
   --spacing-tf-sidebar: 17rem;
   --spacing-tf-rail: 5rem;
-
   --spacing-tf-icon-2xs: 0.875rem;
   --spacing-tf-icon-xs: 1rem;
   --spacing-tf-icon-sm: 1.125rem;
   --spacing-tf-icon-md: 1.25rem;
   --spacing-tf-icon-lg: 1.375rem;
-
   --spacing-tf-icon-solo-xs: 1rem;
   --spacing-tf-icon-solo-sm: 1.25rem;
   --spacing-tf-icon-solo-md: 1.375rem;
   --spacing-tf-icon-solo-lg: 1.5rem;
-
   --spacing-tf-mark-glyph: 0.875rem;
   --spacing-tf-mark-dot: 0.625rem;
   --spacing-tf-mark-track: 0.375rem;
   --spacing-tf-mark-inset: 0.1875rem;
-
   --tf-mark-path: 23;
   --tf-icon-stroke: 2.75;
   --tf-icon-stroke-solo: 3;
-
   --blur-tf-panel: 16px;
   --blur-tf-glass: 16px;
   --blur-tf-scrim: 6px;
   --blur-tf-cloud-md: 14px;
   --blur-tf-cloud-tight: 10px;
   --blur-tf-cloud-wide: 32px;
-
   --radius-tf-none: 0;
   --radius-tf-inline: 0.375rem;
   --radius-tf-control: 0.625rem;
   --radius-tf-block: 0.75rem;
   --radius-tf-card: 1rem;
   --radius-tf-pill: 9999px;
-
   --shadow-tf-float: 0 18px 44px -18px rgb(0 0 0 / 88%);
   --shadow-tf-mark: 0 1px 2px rgb(0 0 0 / 40%);
-
   --ease-tf: cubic-bezier(0.16, 0.8, 0.3, 1);
   --ease-tf-spring: cubic-bezier(0.34, 1.56, 0.5, 1);
   --ease-tf-glide: cubic-bezier(0.45, 0.05, 0.35, 1);
   --ease-tf-settle: cubic-bezier(0.32, 1.36, 0.58, 1);
-
   --tf-z-raised: 10;
   --tf-z-dropdown: 20;
   --tf-z-tooltip: 30;
   --tf-z-modal: 40;
   --tf-z-toast: 50;
-
   --tf-duration-1: 140ms;
   --tf-duration-2: 240ms;
   --tf-duration-3: 600ms;
   --tf-duration-4: 700ms;
-
   --tf-marquee-pace: calc(var(--spacing-tf-icon-solo-lg) * (1s / var(--tf-duration-3)));
-
   --tf-sweep-duration: calc(var(--tf-duration-3) * 30);
   --tf-twinkle-duration: calc(var(--tf-duration-3) * 26);
   --tf-pulse-duration: calc(var(--tf-duration-3) * 3);
-
   --tf-timing-quick: var(--tf-duration-1) var(--ease-tf);
   --tf-timing-glide: var(--tf-duration-2) var(--ease-tf-glide);
   --tf-timing-drift: var(--tf-duration-3) var(--ease-tf-glide);
   --tf-timing-trail: var(--tf-duration-4) var(--ease-tf-glide);
   --tf-timing-spring: var(--tf-duration-2) var(--ease-tf-spring);
   --tf-timing-settle: var(--tf-duration-2) var(--ease-tf-settle);
-
   --tf-blend-timing: var(--tf-timing-glide);
   --tf-shadow-timing: var(--tf-timing-glide);
   --tf-move-timing: var(--tf-timing-quick);
   --tf-weather-timing: var(--tf-timing-drift);
   --tf-ink-timing: var(--tf-timing-quick);
-
   --tf-cloud-blur: var(--blur-tf-cloud-md);
-
   --animate-tf-blend-in: tf-blend-in var(--tf-duration-2) var(--ease-tf-glide);
   --animate-tf-arrive: tf-arrive var(--tf-duration-2) var(--ease-tf) both;
   --animate-tf-depart: tf-depart var(--tf-duration-1) var(--ease-tf) both;
@@ -476,7 +441,7 @@
 }
 
 @keyframes tf-chip-in {
-  from {
+  0% {
     width: 0;
     padding-inline: 0;
     margin-inline-end: calc(var(--tf-chip-gap, 0px) * -1);
@@ -632,15 +597,10 @@
 }
 
 @custom-variant interactive (&:not(:disabled):not([aria-disabled='true']):not([data-disabled]));
-
 @custom-variant hovered (&:hover, &[data-hover]);
-
 @custom-variant pressed (&:active, &[data-active]);
-
 @custom-variant focused (&:focus-visible, &[data-focus-visible]);
-
 @custom-variant reached (&:focus-within, &[data-reached]);
-
 @custom-variant asleep (
   &:has(:placeholder-shown, [data-placeholder-shown]):not(:focus-within):not([data-reached]):not([data-state='open'])
 );
@@ -732,7 +692,7 @@
 @property --tf-nudge {
   syntax: '<length>';
   inherits: true;
-  initial-value: 0px;
+  initial-value: 0;
 }
 
 @property --tf-tally {
@@ -773,25 +733,25 @@
 
 @property --tf-marquee-run {
   syntax: '<length>';
-  initial-value: 0px;
+  initial-value: 0;
   inherits: true;
 }
 
 @property --tf-marquee-pace {
   syntax: '<length>';
-  initial-value: 0px;
+  initial-value: 0;
   inherits: true;
 }
 
 @property --tf-fade-head {
   syntax: '<length>';
-  initial-value: 0px;
+  initial-value: 0;
   inherits: false;
 }
 
 @property --tf-fade-foot {
   syntax: '<length>';
-  initial-value: 0px;
+  initial-value: 0;
   inherits: false;
 }
 
@@ -856,15 +816,15 @@
 }
 
 @utility tf-fill-scale {
-  --tf-lift: oklch(from var(--tf-base) 0.6 min(calc(var(--tf-c, c) * 1.1), var(--tf-ceiling)) h);
+  --tf-lift: oklch(from var(--tf-base) 60% min(calc(var(--tf-c, c) * 1.1), var(--tf-ceiling)) h);
   --tf-vivid: oklch(
-    from var(--tf-base) 0.51 min(calc(var(--tf-c, c) * 1.05), calc(var(--tf-ceiling) * 0.85)) h
+    from var(--tf-base) 51% min(calc(var(--tf-c, c) * 1.05), calc(var(--tf-ceiling) * 0.85)) h
   );
-  --tf-deep: oklch(from var(--tf-base) 0.42 min(c, calc(var(--tf-ceiling) * 0.7)) h);
+  --tf-deep: oklch(from var(--tf-base) 42% min(c, calc(var(--tf-ceiling) * 0.7)) h);
   --tf-flare: oklch(
-    from var(--tf-base) 0.68 min(calc(var(--tf-c, c) * 1.1), calc(var(--tf-ceiling) * 0.77)) h
+    from var(--tf-base) 68% min(calc(var(--tf-c, c) * 1.1), calc(var(--tf-ceiling) * 0.77)) h
   );
-  --tf-abyss: oklch(from var(--tf-base) 0.33 min(c, calc(var(--tf-ceiling) * 0.55)) h);
+  --tf-abyss: oklch(from var(--tf-base) 33% min(c, calc(var(--tf-ceiling) * 0.55)) h);
 }
 
 @utility bg-tf-blend {
@@ -884,11 +844,11 @@
 }
 
 @utility tf-ink-scale {
-  --tf-lift: oklch(from var(--tf-base) 0.88 calc(var(--tf-c, c) * 1.1) h);
-  --tf-vivid: oklch(from var(--tf-base) 0.82 calc(var(--tf-c, c) * 1.3) h);
-  --tf-deep: oklch(from var(--tf-base) 0.7 c h);
-  --tf-flare: oklch(from var(--tf-base) 0.92 calc(var(--tf-c, c) * 1.15) h);
-  --tf-abyss: oklch(from var(--tf-base) 0.66 calc(var(--tf-c, c) * 1.05) h);
+  --tf-lift: oklch(from var(--tf-base) 88% calc(var(--tf-c, c) * 1.1) h);
+  --tf-vivid: oklch(from var(--tf-base) 82% calc(var(--tf-c, c) * 1.3) h);
+  --tf-deep: oklch(from var(--tf-base) 70% c h);
+  --tf-flare: oklch(from var(--tf-base) 92% calc(var(--tf-c, c) * 1.15) h);
+  --tf-abyss: oklch(from var(--tf-base) 66% calc(var(--tf-c, c) * 1.05) h);
 }
 
 @utility text-tf-blend {
@@ -899,6 +859,7 @@
   --tf-rest-trail: var(--color-tf-fg);
 
   @apply tf-ramp;
+
   background-clip: text;
   color: transparent;
   text-box-trim: trim-start;
@@ -926,9 +887,9 @@
 }
 
 @utility tf-label-lit {
-  --tf-label-lead: var(--tf-label-ink, oklch(from var(--tf-base) 0.73 c h));
-  --tf-label-mid: var(--tf-label-ink, oklch(from var(--tf-base) 0.73 c h));
-  --tf-label-trail: var(--tf-label-ink, oklch(from var(--tf-base) 0.73 c h));
+  --tf-label-lead: var(--tf-label-ink, oklch(from var(--tf-base) 73% c h));
+  --tf-label-mid: var(--tf-label-ink, oklch(from var(--tf-base) 73% c h));
+  --tf-label-trail: var(--tf-label-ink, oklch(from var(--tf-base) 73% c h));
 }
 
 @utility tf-label-failed {
@@ -1041,7 +1002,6 @@
 
 @utility tf-blend-outline {
   @apply tf-ink-scale;
-
   @apply tf-ring-scale;
 
   --tf-outline-lift: var(--tf-ring-lit-bloom);
@@ -1099,7 +1059,7 @@
   mask-image: linear-gradient(
     to bottom,
     transparent 0,
-    transparent var(--tf-fade-head, 0px),
+    transparent var(--tf-fade-head, 0),
     #000 calc(var(--tf-fade-head, 0px) + var(--spacing)),
     #000 calc(100% - var(--tf-fade-foot, 0px)),
     transparent 100%
@@ -1198,10 +1158,10 @@
 }
 
 @utility tf-ring-scale {
-  --tf-ring-dim: oklch(from var(--tf-base) 0.34 calc(var(--tf-c, c) * 0.34) h);
-  --tf-ring-dim-bloom: oklch(from var(--tf-base) 0.45 calc(var(--tf-c, c) * 0.42) h);
-  --tf-ring-lit: oklch(from var(--tf-base) 0.6 calc(var(--tf-c, c) * 0.85) h);
-  --tf-ring-lit-bloom: oklch(from var(--tf-base) 0.78 c h);
+  --tf-ring-dim: oklch(from var(--tf-base) 34% calc(var(--tf-c, c) * 0.34) h);
+  --tf-ring-dim-bloom: oklch(from var(--tf-base) 45% calc(var(--tf-c, c) * 0.42) h);
+  --tf-ring-lit: oklch(from var(--tf-base) 60% calc(var(--tf-c, c) * 0.85) h);
+  --tf-ring-lit-bloom: oklch(from var(--tf-base) 78% c h);
 }
 
 @utility tf-ring-rest {
@@ -1350,7 +1310,7 @@
 
   --tf-rest-lead: var(--tf-ring-base);
   --tf-rest-mid: oklch(from var(--tf-ring-base) l c h / calc(100% - var(--tf-blend-waist)));
-  --tf-rest-trail: oklch(from var(--tf-ring-base) l c h / 0);
+  --tf-rest-trail: oklch(from var(--tf-ring-base) l c h / 0%);
 
   @apply tf-ramp;
 }
@@ -1411,9 +1371,9 @@
 }
 
 @utility tf-cloud-scale {
-  --tf-haze: oklch(from var(--tf-base) 0.85 c h);
-  --tf-haze-lit: oklch(from var(--tf-base) 0.92 c h);
-  --tf-haze-quiet: oklch(from var(--tf-base) 0.6 c h);
+  --tf-haze: oklch(from var(--tf-base) 85% c h);
+  --tf-haze-lit: oklch(from var(--tf-base) 92% c h);
+  --tf-haze-quiet: oklch(from var(--tf-base) 60% c h);
 }
 
 @utility tf-cloud-brand {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techfides/ui-library-design",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Framework-agnostic design core for the TechFides UI library: Tailwind design tokens and component variant recipes",
   "keywords": [
     "cva",