@neovici/cosmoz-tokens 3.1.1 → 3.2.1

package/README.md

@@ -57,6 +57,43 @@ customElements.define(
 );
 ```
 
+### CSS Utilities
+
+Reusable Lit CSS template literals for common styling patterns.
+
+#### Skeuomorphic Highlight
+
+Adds a subtle "lit from above" inner highlight effect to buttons using a `::before` pseudo-element with a gradient mask:
+
+```js
+import { skeumorphicHighlight } from '@neovici/cosmoz-tokens/skeumorphic';
+
+const styles = css`
+	.button {
+		${skeumorphicHighlight}
+	}
+`;
+```
+
+Customization via CSS custom properties:
+
+- `--skeumorphic-color`: Border color (default: `rgba(255, 255, 255, 0.12)`)
+- `--skeumorphic-radius`: Inner border radius (default: `calc(var(--cz-radius-md) - 1px)`)
+
+#### Truncate
+
+Truncate text with ellipsis (equivalent to Tailwind's `truncate`):
+
+```js
+import { truncate } from '@neovici/cosmoz-tokens/truncate';
+
+const styles = css`
+	.label {
+		${truncate}
+	}
+`;
+```
+
 ## Dark Mode
 
 Semantic tokens automatically adapt to dark mode. Enable it by adding a class or data attribute to the root element:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-tokens",
-  "version": "3.1.1",
+  "version": "3.2.1",
   "description": "Design tokens for Cosmoz web components based on Untitled UI",
   "keywords": [
     "design-tokens",
@@ -34,6 +34,10 @@
     "./skeumorphic": {
       "types": "./src/skeumorphic.css.d.ts",
       "default": "./src/skeumorphic.css.js"
+    },
+    "./truncate": {
+      "types": "./src/truncate.css.d.ts",
+      "default": "./src/truncate.css.js"
     }
   },
   "files": [

package/src/normalize.css.js

@@ -2,24 +2,65 @@
  * Cosmoz Design Tokens - Normalize
  * Re-usable normalize stylesheet for web component shadow DOMs.
  * Based on Tailwind's preflight.css, adapted for shadow DOM usage.
+ *
+ * Note: We intentionally avoid resetting margin/padding/border on * selector
+ * to prevent conflicts with child web components whose :host styles would
+ * be overridden by the parent's * selector.
  */
 
 import { css, sheet } from '@pionjs/pion';
 
 export const normalize = sheet(css`
 	/*
-	 * 1. Prevent padding and border from affecting element width.
-	 * 2. Remove default margins and padding.
-	 * 3. Reset all borders.
+	 * Use border-box sizing for all elements.
+	 * This is safe and doesn't conflict with child component styles.
 	 */
 	*,
-	::after,
 	::before,
+	::after,
 	::backdrop,
 	::file-selector-button {
 		box-sizing: border-box;
+	}
+
+	/*
+	 * Reset margins and padding on elements that typically have browser defaults.
+	 * This is more targeted than using * to avoid affecting custom elements.
+	 */
+	h1,
+	h2,
+	h3,
+	h4,
+	h5,
+	h6,
+	p,
+	blockquote,
+	pre,
+	ul,
+	ol,
+	li,
+	dl,
+	dt,
+	dd,
+	figure,
+	figcaption,
+	fieldset,
+	legend,
+	form,
+	hr,
+	table,
+	th,
+	td {
 		margin: 0;
 		padding: 0;
+	}
+
+	/*
+	 * Reset borders on elements that typically have them.
+	 */
+	fieldset,
+	hr,
+	iframe {
 		border: 0 solid;
 	}
 
@@ -118,9 +159,11 @@ export const normalize = sheet(css`
 	}
 
 	/*
+	 * Reset form controls:
 	 * 1. Inherit font styles in all browsers.
-	 * 2. Remove border radius.
-	 * 3. Remove background color.
+	 * 2. Remove default margins, padding, and borders.
+	 * 3. Remove border radius.
+	 * 4. Remove background color.
 	 */
 	button,
 	input,
@@ -128,6 +171,9 @@ export const normalize = sheet(css`
 	optgroup,
 	textarea,
 	::file-selector-button {
+		margin: 0;
+		padding: 0;
+		border: 0 solid;
 		font: inherit;
 		font-feature-settings: inherit;
 		font-variation-settings: inherit;

package/src/truncate.css.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Truncate text with ellipsis.
+ * Prevents text from wrapping and adds an ellipsis (...) when text overflows.
+ *
+ * Equivalent to Tailwind's `truncate` utility.
+ *
+ * @example
+ * import { truncate } from '@neovici/cosmoz-tokens/truncate';
+ *
+ * export const styles = css`
+ *   .label {
+ *     ${truncate}
+ *   }
+ * `;
+ */
+export const truncate: string;

package/src/truncate.css.js

@@ -0,0 +1,22 @@
+import { css } from '@pionjs/pion';
+
+/**
+ * Truncate text with ellipsis.
+ * Prevents text from wrapping and adds an ellipsis (...) when text overflows.
+ *
+ * Equivalent to Tailwind's `truncate` utility.
+ *
+ * @example
+ * import { truncate } from '@neovici/cosmoz-tokens/truncate';
+ *
+ * export const styles = css`
+ *   .label {
+ *     ${truncate}
+ *   }
+ * `;
+ */
+export const truncate = css`
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`;