@twentyfirstmedia/pro 0.1.1 → 0.2.1

package/dist/tailwind.css

@@ -64,6 +64,20 @@
   --color-on-frame-danger: var(--on-frame-danger);
   --color-scrim: var(--scrim);
   --color-scrim-strong: var(--scrim-strong);
+  --color-glass: var(--glass);
+  --color-glass-strong: var(--glass-strong);
+  --color-glass-control: var(--glass-control);
+  --color-glass-well: var(--glass-well);
+  --color-glass-hover: var(--glass-hover);
+  --color-glass-border: var(--glass-border);
+  --color-glass-highlight: var(--glass-highlight);
+  --color-glass-sheen: var(--glass-sheen);
+  --color-ambient-base: var(--ambient-base);
+  --color-ambient-1: var(--ambient-1);
+  --color-ambient-2: var(--ambient-2);
+  --color-ambient-3: var(--ambient-3);
+  --color-ambient-4: var(--ambient-4);
+  --color-ambient-scrim: var(--ambient-scrim);
   --color-bg-000: var(--bg-000);
   --color-bg-100: var(--bg-100);
   --color-bg-200: var(--bg-200);
@@ -131,6 +145,7 @@
   --shadow-lift: var(--shadow-lift);
   --shadow-float: var(--shadow-float);
   --shadow-overlay: var(--shadow-overlay);
+  --shadow-glass: var(--shadow-glass);
   --font-*: initial;
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);

package/dist/tokens.css

@@ -27,6 +27,10 @@
   --dur-enter: var(--duration-base);
   --dur-slow: var(--duration-base);
   --stagger-step: 0ms;
+  --dur-exit: var(--duration-fast);
+  --motion-time: 1;
+  --motion-travel: 1;
+  --motion-blur: 0px;
   --ease-out: var(--ease-standard);
   --ease-spring: var(--ease-standard);
   --ease-in-out: var(--ease-standard);
@@ -233,6 +237,20 @@
   --on-frame-danger: var(--danger);
   --scrim: rgba(0,0,0,0.62);
   --scrim-strong: var(--scrim);
+  --glass: color-mix(in srgb, var(--card) 72%, transparent);
+  --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-control: color-mix(in srgb, var(--foreground) 7%, transparent);
+  --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
+  --glass-hover: color-mix(in srgb, var(--foreground) 9%, transparent);
+  --glass-border: color-mix(in srgb, var(--foreground) 14%, transparent);
+  --glass-highlight: rgba(255, 255, 255, 0.07);
+  --glass-sheen: transparent;
+  --ambient-base: var(--background);
+  --ambient-1: color-mix(in oklab, var(--chart-1) 30%, var(--background));
+  --ambient-2: color-mix(in oklab, var(--chart-4) 26%, var(--background));
+  --ambient-3: color-mix(in oklab, var(--chart-2) 22%, var(--background));
+  --ambient-4: color-mix(in oklab, var(--foreground) 8%, var(--background));
+  --ambient-scrim: rgba(9, 9, 11, 0.55);
   --bg-000: var(--background);
   --bg-100: var(--card);
   --bg-200: var(--muted);
@@ -290,6 +308,7 @@
   --shadow-lift: none;
   --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
   --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
+  --shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.5);
   --button-radius: var(--radius-1);
   --field-radius: var(--radius-1);
   --badge-radius: var(--radius-1);
@@ -299,6 +318,8 @@
   --panel-shadow: none;
   --panel-pad: var(--space-4);
   --panel-gap: 1px;
+  --glass-filter: blur(16px) saturate(120%) brightness(0.8);
+  --glass-tint: 40%;
   color-scheme: dark;
 }
 @media (prefers-color-scheme: dark) {
@@ -364,6 +385,20 @@
     --on-frame-danger: var(--danger);
     --scrim: rgba(0,0,0,0.62);
     --scrim-strong: var(--scrim);
+    --glass: color-mix(in srgb, var(--card) 72%, transparent);
+    --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
+    --glass-control: color-mix(in srgb, var(--foreground) 7%, transparent);
+    --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
+    --glass-hover: color-mix(in srgb, var(--foreground) 9%, transparent);
+    --glass-border: color-mix(in srgb, var(--foreground) 14%, transparent);
+    --glass-highlight: rgba(255, 255, 255, 0.07);
+    --glass-sheen: transparent;
+    --ambient-base: var(--background);
+    --ambient-1: color-mix(in oklab, var(--chart-1) 30%, var(--background));
+    --ambient-2: color-mix(in oklab, var(--chart-4) 26%, var(--background));
+    --ambient-3: color-mix(in oklab, var(--chart-2) 22%, var(--background));
+    --ambient-4: color-mix(in oklab, var(--foreground) 8%, var(--background));
+    --ambient-scrim: rgba(9, 9, 11, 0.55);
     --bg-000: var(--background);
     --bg-100: var(--card);
     --bg-200: var(--muted);
@@ -421,6 +456,7 @@
     --shadow-lift: none;
     --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
     --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
+    --shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.5);
     --button-radius: var(--radius-1);
     --field-radius: var(--radius-1);
     --badge-radius: var(--radius-1);
@@ -430,6 +466,8 @@
     --panel-shadow: none;
     --panel-pad: var(--space-4);
     --panel-gap: 1px;
+    --glass-filter: blur(16px) saturate(120%) brightness(0.8);
+    --glass-tint: 40%;
     color-scheme: dark;
   }
 }
@@ -496,6 +534,20 @@
     --on-frame-danger: var(--danger);
     --scrim: rgba(17,17,20,0.36);
     --scrim-strong: var(--scrim);
+    --glass: color-mix(in srgb, var(--card) 74%, transparent);
+    --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
+    --glass-control: color-mix(in srgb, var(--card) 55%, transparent);
+    --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
+    --glass-hover: color-mix(in srgb, var(--foreground) 7%, transparent);
+    --glass-border: color-mix(in srgb, var(--foreground) 12%, transparent);
+    --glass-highlight: rgba(255, 255, 255, 0.7);
+    --glass-sheen: transparent;
+    --ambient-base: var(--background);
+    --ambient-1: color-mix(in oklab, var(--chart-1) 22%, var(--background));
+    --ambient-2: color-mix(in oklab, var(--chart-4) 18%, var(--background));
+    --ambient-3: color-mix(in oklab, var(--chart-2) 16%, var(--background));
+    --ambient-4: color-mix(in oklab, var(--foreground) 6%, var(--background));
+    --ambient-scrim: rgba(246, 246, 247, 0.4);
     --bg-000: var(--background);
     --bg-100: var(--card);
     --bg-200: var(--muted);
@@ -553,6 +605,7 @@
     --shadow-lift: none;
     --shadow-float: 0 16px 40px rgba(17,17,20,0.12);
     --shadow-overlay: 0 16px 40px rgba(17,17,20,0.12);
+    --shadow-glass: 0 8px 24px rgba(17, 17, 20, 0.1);
     --button-radius: var(--radius-1);
     --field-radius: var(--radius-1);
     --badge-radius: var(--radius-1);
@@ -562,6 +615,8 @@
     --panel-shadow: none;
     --panel-pad: var(--space-4);
     --panel-gap: 1px;
+    --glass-filter: blur(16px) saturate(130%) brightness(1.04);
+    --glass-tint: 40%;
     color-scheme: light;
   }
 }
@@ -627,6 +682,20 @@
   --on-frame-danger: var(--danger);
   --scrim: rgba(0,0,0,0.62);
   --scrim-strong: var(--scrim);
+  --glass: color-mix(in srgb, var(--card) 72%, transparent);
+  --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-control: color-mix(in srgb, var(--foreground) 7%, transparent);
+  --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
+  --glass-hover: color-mix(in srgb, var(--foreground) 9%, transparent);
+  --glass-border: color-mix(in srgb, var(--foreground) 14%, transparent);
+  --glass-highlight: rgba(255, 255, 255, 0.07);
+  --glass-sheen: transparent;
+  --ambient-base: var(--background);
+  --ambient-1: color-mix(in oklab, var(--chart-1) 30%, var(--background));
+  --ambient-2: color-mix(in oklab, var(--chart-4) 26%, var(--background));
+  --ambient-3: color-mix(in oklab, var(--chart-2) 22%, var(--background));
+  --ambient-4: color-mix(in oklab, var(--foreground) 8%, var(--background));
+  --ambient-scrim: rgba(9, 9, 11, 0.55);
   --bg-000: var(--background);
   --bg-100: var(--card);
   --bg-200: var(--muted);
@@ -684,6 +753,7 @@
   --shadow-lift: none;
   --shadow-float: 0 16px 40px rgba(0,0,0,0.55);
   --shadow-overlay: 0 16px 40px rgba(0,0,0,0.55);
+  --shadow-glass: 0 12px 32px rgba(0, 0, 0, 0.5);
   --button-radius: var(--radius-1);
   --field-radius: var(--radius-1);
   --badge-radius: var(--radius-1);
@@ -693,6 +763,8 @@
   --panel-shadow: none;
   --panel-pad: var(--space-4);
   --panel-gap: 1px;
+  --glass-filter: blur(16px) saturate(120%) brightness(0.8);
+  --glass-tint: 40%;
   color-scheme: dark;
 }
 :where([data-theme="light"], .light) {
@@ -757,6 +829,20 @@
   --on-frame-danger: var(--danger);
   --scrim: rgba(17,17,20,0.36);
   --scrim-strong: var(--scrim);
+  --glass: color-mix(in srgb, var(--card) 74%, transparent);
+  --glass-strong: color-mix(in srgb, var(--card) 88%, transparent);
+  --glass-control: color-mix(in srgb, var(--card) 55%, transparent);
+  --glass-well: color-mix(in srgb, var(--foreground) 5%, transparent);
+  --glass-hover: color-mix(in srgb, var(--foreground) 7%, transparent);
+  --glass-border: color-mix(in srgb, var(--foreground) 12%, transparent);
+  --glass-highlight: rgba(255, 255, 255, 0.7);
+  --glass-sheen: transparent;
+  --ambient-base: var(--background);
+  --ambient-1: color-mix(in oklab, var(--chart-1) 22%, var(--background));
+  --ambient-2: color-mix(in oklab, var(--chart-4) 18%, var(--background));
+  --ambient-3: color-mix(in oklab, var(--chart-2) 16%, var(--background));
+  --ambient-4: color-mix(in oklab, var(--foreground) 6%, var(--background));
+  --ambient-scrim: rgba(246, 246, 247, 0.4);
   --bg-000: var(--background);
   --bg-100: var(--card);
   --bg-200: var(--muted);
@@ -814,6 +900,7 @@
   --shadow-lift: none;
   --shadow-float: 0 16px 40px rgba(17,17,20,0.12);
   --shadow-overlay: 0 16px 40px rgba(17,17,20,0.12);
+  --shadow-glass: 0 8px 24px rgba(17, 17, 20, 0.1);
   --button-radius: var(--radius-1);
   --field-radius: var(--radius-1);
   --badge-radius: var(--radius-1);
@@ -823,6 +910,8 @@
   --panel-shadow: none;
   --panel-pad: var(--space-4);
   --panel-gap: 1px;
+  --glass-filter: blur(16px) saturate(130%) brightness(1.04);
+  --glass-tint: 40%;
   color-scheme: light;
 }
 @media (pointer: coarse) {
@@ -848,3 +937,67 @@
   --density-font-size: 14px;
   --density-line-height: 20px;
 }
+:where([data-motion="expressive"]) {
+  --dur-enter: 360ms;
+  --dur-slow: 560ms;
+  --dur-exit: 140ms;
+  --stagger-step: 45ms;
+  --motion-time: 1;
+  --motion-travel: 0.8;
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
+  --motion-blur: 0px;
+}
+:where([data-motion="off"]) {
+  --duration-fast: 0ms;
+  --duration-base: 0ms;
+  --dur-fast: 0ms;
+  --dur-base: 0ms;
+  --dur-enter: 0ms;
+  --dur-slow: 0ms;
+  --dur-exit: 0ms;
+  --stagger-step: 0ms;
+  --motion-time: 0;
+  --motion-travel: 0;
+  --motion-blur: 0px;
+}
+@media (prefers-reduced-motion: reduce) {
+  :where(:root, [data-motion], [data-theme]) {
+    --duration-fast: 0ms;
+    --duration-base: 0ms;
+    --dur-fast: 0ms;
+    --dur-base: 0ms;
+    --dur-enter: 0ms;
+    --dur-slow: 0ms;
+    --dur-exit: 0ms;
+    --stagger-step: 0ms;
+    --motion-time: 0;
+    --motion-travel: 0;
+    --motion-blur: 0px;
+  }
+}
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  :where(:root, [data-theme], .dark, .light) {
+    --glass: var(--glass-strong);
+  }
+}
+@media (prefers-contrast: more) {
+  :where(:root, [data-theme], .dark, .light) {
+    --glass: var(--glass-strong);
+  }
+}
+@media (prefers-reduced-transparency: reduce) {
+  :where(:root, [data-theme], .dark, .light) {
+    --glass: var(--card);
+    --glass-strong: var(--popover);
+    --glass-sheen: transparent;
+    --glass-filter: none;
+  }
+}
+@media (forced-colors: active) {
+  :where(:root, [data-theme], .dark, .light) {
+    --glass: var(--card);
+    --glass-strong: var(--popover);
+    --glass-sheen: transparent;
+    --glass-filter: none;
+  }
+}

package/dist/tokens.json

@@ -491,6 +491,118 @@
       },
       "usage": "Backdrop behind modals and the command palette."
     },
+    {
+      "name": "glass",
+      "value": {
+        "light": "color-mix(in srgb, {card} 74%, transparent)",
+        "dark": "color-mix(in srgb, {card} 72%, transparent)"
+      },
+      "usage": "Glass surfaces: panels, cards, docks and map overlays floating over content. Opaque enough that body text stays at 4.5:1 or more over any backdrop."
+    },
+    {
+      "name": "glass-strong",
+      "value": {
+        "light": "color-mix(in srgb, {card} 88%, transparent)",
+        "dark": "color-mix(in srgb, {card} 88%, transparent)"
+      },
+      "usage": "Glass for text-heavy floating layers: menus, popovers, dialogs, drawers."
+    },
+    {
+      "name": "glass-control",
+      "value": {
+        "light": "color-mix(in srgb, {card} 55%, transparent)",
+        "dark": "color-mix(in srgb, {foreground} 7%, transparent)"
+      },
+      "usage": "Inputs, secondary buttons and chips on glass (replaces surface inside a glass surface)."
+    },
+    {
+      "name": "glass-well",
+      "value": {
+        "light": "color-mix(in srgb, {foreground} 5%, transparent)",
+        "dark": "color-mix(in srgb, {foreground} 5%, transparent)"
+      },
+      "usage": "Tab tracks, badges, search fields and nested cards on glass (replaces surface-sunken)."
+    },
+    {
+      "name": "glass-hover",
+      "value": {
+        "light": "color-mix(in srgb, {foreground} 7%, transparent)",
+        "dark": "color-mix(in srgb, {foreground} 9%, transparent)"
+      },
+      "usage": "Hover and selection highlight on glass (replaces accent)."
+    },
+    {
+      "name": "glass-border",
+      "value": {
+        "light": "color-mix(in srgb, {foreground} 12%, transparent)",
+        "dark": "color-mix(in srgb, {foreground} 14%, transparent)"
+      },
+      "usage": "The hairline edge of a glass surface."
+    },
+    {
+      "name": "glass-highlight",
+      "value": {
+        "light": "rgba(255, 255, 255, 0.7)",
+        "dark": "rgba(255, 255, 255, 0.07)"
+      },
+      "usage": "Light catching the top edge of a glass surface."
+    },
+    {
+      "name": "glass-sheen",
+      "value": {
+        "light": "transparent",
+        "dark": "transparent"
+      },
+      "usage": "Pro glass is flat: no sheen."
+    },
+    {
+      "name": "ambient-base",
+      "value": {
+        "light": "{background}",
+        "dark": "{background}"
+      },
+      "usage": "Ground of the Ambient background, under the colour fields."
+    },
+    {
+      "name": "ambient-1",
+      "value": {
+        "light": "color-mix(in oklab, {chart-1} 22%, {background})",
+        "dark": "color-mix(in oklab, {chart-1} 30%, {background})"
+      },
+      "usage": "First colour field of the Ambient gradient (a faint aurora in Pro)."
+    },
+    {
+      "name": "ambient-2",
+      "value": {
+        "light": "color-mix(in oklab, {chart-4} 18%, {background})",
+        "dark": "color-mix(in oklab, {chart-4} 26%, {background})"
+      },
+      "usage": "Second colour field of the Ambient gradient."
+    },
+    {
+      "name": "ambient-3",
+      "value": {
+        "light": "color-mix(in oklab, {chart-2} 16%, {background})",
+        "dark": "color-mix(in oklab, {chart-2} 22%, {background})"
+      },
+      "usage": "Third colour field of the Ambient gradient."
+    },
+    {
+      "name": "ambient-4",
+      "value": {
+        "light": "color-mix(in oklab, {foreground} 6%, {background})",
+        "dark": "color-mix(in oklab, {foreground} 8%, {background})"
+      },
+      "usage": "Fourth colour field of the Ambient gradient."
+    },
+    {
+      "name": "ambient-scrim",
+      "value": {
+        "light": "rgba(246, 246, 247, 0.4)",
+        "dark": "rgba(9, 9, 11, 0.55)"
+      },
+      "usage": "Softens a photo or video under glass so the page keeps its calm."
+    },
     {
       "name": "bg-000",
       "value": {
@@ -948,6 +1060,14 @@
         "dark": "0 16px 40px rgba(0,0,0,0.55)"
       },
       "usage": "Only floating layers: menus, popovers, dialogs, toasts, command palette. Always paired with a line-200 border."
+    },
+    {
+      "name": "shadow-glass",
+      "value": {
+        "light": "0 8px 24px rgba(17, 17, 20, 0.1)",
+        "dark": "0 12px 32px rgba(0, 0, 0, 0.5)"
+      },
+      "usage": "Shadow under glass surfaces."
     }
   ],
   "component": [
@@ -995,6 +1115,19 @@
       "name": "panel-gap",
       "value": "1px",
       "usage": "Gap between panels in a grid: the hairline in Pro, air between cards in Halo."
+    },
+    {
+      "name": "glass-filter",
+      "value": {
+        "light": "blur(16px) saturate(130%) brightness(1.04)",
+        "dark": "blur(16px) saturate(120%) brightness(0.8)"
+      },
+      "usage": "backdrop-filter of glass surfaces: blur, colour lift and a nudge towards the theme's side."
+    },
+    {
+      "name": "glass-tint",
+      "value": "40%",
+      "usage": "How strongly a tint (StatTile, tinted Card) colours the glass it sits on."
     }
   ],
   "font": [
@@ -1303,6 +1436,26 @@
       "value": "0ms",
       "usage": "No staggered entrances in Pro."
     },
+    {
+      "name": "dur-exit",
+      "value": "{duration-fast}",
+      "usage": "Overlays leaving: menus, popovers, dialogs, drawers, toasts."
+    },
+    {
+      "name": "motion-time",
+      "value": "1",
+      "usage": "Multiplier for choreography delays (when the dock, side panels and chart data come in)."
+    },
+    {
+      "name": "motion-travel",
+      "value": "1",
+      "usage": "Multiplier for how far things travel when they come in."
+    },
+    {
+      "name": "motion-blur",
+      "value": "0px",
+      "usage": "Blur things come out of as they rise (expressive Halo only)."
+    },
     {
       "name": "ease-out",
       "value": "{ease-standard}",
@@ -1453,5 +1606,30 @@
       "density-font-size": "14px",
       "density-line-height": "20px"
     }
+  },
+  "motionLevels": {
+    "off": {
+      "duration-fast": "0ms",
+      "duration-base": "0ms",
+      "dur-fast": "0ms",
+      "dur-base": "0ms",
+      "dur-enter": "0ms",
+      "dur-slow": "0ms",
+      "dur-exit": "0ms",
+      "stagger-step": "0ms",
+      "motion-time": "0",
+      "motion-travel": "0",
+      "motion-blur": "0px"
+    },
+    "expressive": {
+      "dur-enter": "360ms",
+      "dur-slow": "560ms",
+      "dur-exit": "140ms",
+      "stagger-step": "45ms",
+      "motion-time": "1",
+      "motion-travel": "0.8",
+      "ease-out": "cubic-bezier(0.16, 1, 0.3, 1)",
+      "motion-blur": "0px"
+    }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twentyfirstmedia/pro",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Pro: sharp, dense, hairline grid, dark-first. Same components and props as Halo.",
   "license": "MIT",
   "author": "Twentyfirst Media (https://twentyfirst.media)",
@@ -50,7 +50,7 @@
     "dist"
   ],
   "dependencies": {
-    "@twentyfirstmedia/ui-core": "0.1.1"
+    "@twentyfirstmedia/ui-core": "0.2.1"
   },
   "peerDependencies": {
     "react": ">=18.3",