@neovici/cosmoz-tokens 4.1.0 → 4.3.0

package/README.md

@@ -124,7 +124,7 @@ document.documentElement.dataset.theme = 'dark';
 
 | Token                             | Description                     |
 | --------------------------------- | ------------------------------- |
-| `--cz-font-body`                  | Body font (Inter)               |
+| `--cz-font-body`                  | Body font (Geist)               |
 | `--cz-font-display`               | Display font (DM Sans)          |
 | `--cz-font-mono`                  | Monospace font                  |
 | `--cz-text-{xs-xl}`               | Text sizes with line heights    |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-tokens",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "description": "Design tokens for Cosmoz web components based on Untitled UI",
   "keywords": [
     "design-tokens",

package/src/fallback.css

@@ -70,6 +70,12 @@
 		--cz-color-border-brand-alt: var(--cz-color-brand-600);
 		--cz-color-border-info: var(--cz-color-info-500);
 		--cz-color-border-info-subtle: var(--cz-color-info-300);
+		--cz-color-border-warning: var(--cz-color-warning-500);
+		--cz-color-border-warning-subtle: var(--cz-color-warning-300);
+		--cz-color-border-success: var(--cz-color-success-500);
+		--cz-color-border-success-subtle: var(--cz-color-success-300);
+		--cz-color-border-processing: var(--cz-color-indigo-500);
+		--cz-color-border-processing-subtle: var(--cz-color-indigo-300);
 		--cz-color-fg-primary: var(--cz-color-gray-900);
 		--cz-color-fg-secondary: var(--cz-color-gray-700);
 		--cz-color-fg-secondary-hover: var(--cz-color-gray-800);
@@ -101,5 +107,7 @@
 		--cz-shadow-xs-skeumorphic:
 			var(--cz-shadow-skeumorphic), var(--cz-shadow-xs);
 		--skeumorphic-color: rgba(255, 255, 255, 0.12);
+		--cz-shadow-pressed-3d: 0px 2px 3px 0px rgba(10, 13, 18, 0.12) inset;
+		--cz-shadow-pressed-3d-solid: 0px 2px 3px 0px rgba(10, 13, 18, 0.2) inset;
 	}
 }

package/src/semantic.css

@@ -280,6 +280,30 @@
 		var(--cz-color-info-300),
 		var(--cz-color-info-500)
 	);
+	--cz-color-border-warning: light-dark(
+		var(--cz-color-warning-500),
+		var(--cz-color-warning-400)
+	);
+	--cz-color-border-warning-subtle: light-dark(
+		var(--cz-color-warning-300),
+		var(--cz-color-warning-500)
+	);
+	--cz-color-border-success: light-dark(
+		var(--cz-color-success-500),
+		var(--cz-color-success-400)
+	);
+	--cz-color-border-success-subtle: light-dark(
+		var(--cz-color-success-300),
+		var(--cz-color-success-500)
+	);
+	--cz-color-border-processing: light-dark(
+		var(--cz-color-indigo-500),
+		var(--cz-color-indigo-400)
+	);
+	--cz-color-border-processing-subtle: light-dark(
+		var(--cz-color-indigo-300),
+		var(--cz-color-indigo-500)
+	);
 
 	/* Foreground colors (icons, decorative elements) */
 	--cz-color-fg-primary: light-dark(

package/src/shadows.css

@@ -2,9 +2,9 @@
  * Cosmoz Design Tokens - Shadows
  * Shadow tokens from Untitled UI
  *
- * Non-color shadow/focus-ring values cannot use light-dark() directly
- * (it only accepts colors), so the theme-varying parts are split into
- * color tokens which are assembled into static shadow values.
+ * Shadow and focus-ring values can't hold light-dark() directly (it only
+ * accepts colors), so theme-varying parts are split into color tokens
+ * and assembled into the static values below.
  */
 
 :root {
@@ -30,9 +30,7 @@
 		0px 32px 64px -12px rgba(10, 13, 18, 0.14),
 		0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
 
-	/* Skeumorphic shadows (for buttons) — ring and highlight colors flip
-	   with color-scheme via the light-dark() color tokens above the
-	   assembled shadow values. */
+	/* Skeumorphic shadows (for buttons) */
 	--cz-color-skeumorphic-ring: light-dark(
 		rgba(10, 13, 18, 0.18),
 		rgba(255, 255, 255, 0.12)
@@ -46,15 +44,26 @@
 		0px -2px 0px 0px var(--cz-color-skeumorphic-highlight) inset;
 	--cz-shadow-xs-skeumorphic: var(--cz-shadow-skeumorphic), var(--cz-shadow-xs);
 
+	/* Pressed / selected 3D sink (for buttons) */
+	--cz-color-pressed-shade: light-dark(
+		rgba(10, 13, 18, 0.12),
+		rgba(0, 0, 0, 0.4)
+	);
+	--cz-color-pressed-shade-strong: light-dark(
+		rgba(10, 13, 18, 0.2),
+		rgba(0, 0, 0, 0.55)
+	);
+	--cz-shadow-pressed-3d: 0px 2px 3px 0px var(--cz-color-pressed-shade) inset;
+	--cz-shadow-pressed-3d-solid: 0px 2px 3px 0px
+		var(--cz-color-pressed-shade-strong) inset;
+
 	/*
-	 * The light-theme skeumorphic ring is near-black, so on a dark surface it
-	 * disappears and the ::before highlight is left acting as the border. Flip
-	 * the highlight border color to light and drop it in dark mode, where it
-	 * would otherwise draw a second border just inside the ring.
+	 * Border color for the ::before highlight; light in light mode, off in
+	 * dark mode where it would double up the ring.
 	 */
 	--skeumorphic-color: light-dark(rgba(255, 255, 255, 0.12), transparent);
 
-	/* Focus ring shadows — colors are theme-varying, shapes are static */
+	/* Focus ring shadows */
 	--cz-color-focus-ring: light-dark(
 		var(--cz-color-brand-100),
 		var(--cz-color-brand-800)

package/src/typography.css

@@ -6,8 +6,8 @@
 :root {
 	/* Font families */
 	--cz-font-body:
-		var(--font-inter, 'Inter'), -apple-system, 'Segoe UI', Roboto, Arial,
-		sans-serif;
+		var(--font-geist, 'Geist Variable'), 'Geist', -apple-system, 'Segoe UI',
+		Roboto, Arial, sans-serif;
 	--cz-font-display:
 		'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
 	--cz-font-mono: