@neovici/cosmoz-tokens 1.2.0 → 2.0.1

package/README.md

@@ -57,43 +57,6 @@ customElements.define(
 );
 ```
 
-### Using utilities in web components
-
-The utilities stylesheet provides **layout primitives** as a `CSSStyleSheet` for use with Shadow DOM:
-
-> **Philosophy:** This is intentionally a minimal set. Web components have scoped CSS,
-> so you don't need utility classes for everything. Use CSS custom properties
-> (tokens) directly in your component styles for margins, padding, colors, etc.
-
-```js
-import { component } from '@pionjs/pion';
-import { normalize } from '@neovici/cosmoz-tokens/normalize';
-import { utilities } from '@neovici/cosmoz-tokens/utilities';
-import { style } from './my-component.css.js';
-
-const MyComponent = () => {
-	return html`<div class="flex items-center gap-4">Hello World</div>`;
-};
-
-customElements.define(
-	'my-component',
-	component(MyComponent, {
-		styleSheets: [normalize, utilities, style],
-	}),
-);
-```
-
-Available utility classes:
-
-| Category | Classes                                                                                                                         |
-| -------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| Flexbox  | `flex`, `flex-col`, `flex-wrap`, `items-center`, `items-start`, `items-end`, `justify-center`, `justify-between`, `justify-end` |
-| Gap      | `gap-0`, `gap-1`, `gap-2`, `gap-3`, `gap-4`, `gap-5`, `gap-6`, `gap-8`                                                          |
-| Display  | `hidden`, `block`, `grid`                                                                                                       |
-| Sizing   | `w-full`, `h-full`                                                                                                              |
-| Position | `relative`, `absolute`                                                                                                          |
-| Text     | `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": "1.2.0",
+  "version": "2.0.1",
   "description": "Design tokens for Cosmoz web components based on Untitled UI",
   "keywords": [
     "design-tokens",
@@ -26,10 +26,6 @@
       "types": "./src/normalize.css.d.ts",
       "default": "./src/normalize.css.js"
     },
-    "./utilities": {
-      "types": "./src/utilities.css.d.ts",
-      "default": "./src/utilities.css.js"
-    },
     "./primitives": "./src/primitives.css",
     "./typography": "./src/typography.css",
     "./spacing": "./src/spacing.css",

package/src/utilities.css.d.ts

@@ -1,18 +0,0 @@
-/**
- * Raw CSS string for utilities - can be used in Light DOM contexts.
- *
- * @example
- * import { utilitiesCSS } from '@neovici/cosmoz-tokens/utilities';
- * html`<style>${utilitiesCSS}</style>`;
- */
-export const utilitiesCSS: string;
-
-/**
- * Utilities stylesheet as a CSSStyleSheet for Shadow DOM usage.
- * Use with the `styleSheets` option in @pionjs/pion components.
- *
- * @example
- * import { utilities } from '@neovici/cosmoz-tokens/utilities';
- * customElements.define('my-el', component(MyEl, { styleSheets: [utilities] }));
- */
-export const utilities: CSSStyleSheet;

package/src/utilities.css.js

@@ -1,118 +0,0 @@
-/**
- * Cosmoz Design Tokens - Utilities
- *
- * Minimal layout primitives for web component shadow DOMs.
- * Uses --cz-spacing for consistent spacing scale.
- *
- * Philosophy: This is intentionally a minimal set. Web components have scoped CSS,
- * so you don't need utility classes for everything. Use CSS custom properties
- * (tokens) directly in your component styles for margins, padding, colors, etc.
- */
-
-import { css, sheet } from '@pionjs/pion';
-
-/**
- * Raw CSS for utilities - can be used in Light DOM contexts
- * @example
- * import { utilitiesCSS } from '@neovici/cosmoz-tokens/utilities';
- * html`<style>${utilitiesCSS}</style>`;
- */
-export const utilitiesCSS = css`
-	/* Flexbox */
-	.flex {
-		display: flex;
-	}
-	.flex-col {
-		display: flex;
-		flex-direction: column;
-	}
-	.flex-wrap {
-		flex-wrap: wrap;
-	}
-	.items-center {
-		align-items: center;
-	}
-	.items-start {
-		align-items: flex-start;
-	}
-	.items-end {
-		align-items: flex-end;
-	}
-	.justify-center {
-		justify-content: center;
-	}
-	.justify-between {
-		justify-content: space-between;
-	}
-	.justify-end {
-		justify-content: flex-end;
-	}
-
-	/* Gap (using --cz-spacing: 4px) */
-	.gap-0 {
-		gap: 0;
-	}
-	.gap-1 {
-		gap: calc(var(--cz-spacing) * 1);
-	}
-	.gap-2 {
-		gap: calc(var(--cz-spacing) * 2);
-	}
-	.gap-3 {
-		gap: calc(var(--cz-spacing) * 3);
-	}
-	.gap-4 {
-		gap: calc(var(--cz-spacing) * 4);
-	}
-	.gap-5 {
-		gap: calc(var(--cz-spacing) * 5);
-	}
-	.gap-6 {
-		gap: calc(var(--cz-spacing) * 6);
-	}
-	.gap-8 {
-		gap: calc(var(--cz-spacing) * 8);
-	}
-
-	/* Display */
-	.hidden {
-		display: none;
-	}
-	.block {
-		display: block;
-	}
-	.grid {
-		display: grid;
-	}
-
-	/* Sizing */
-	.w-full {
-		width: 100%;
-	}
-	.h-full {
-		height: 100%;
-	}
-
-	/* Position */
-	.relative {
-		position: relative;
-	}
-	.absolute {
-		position: absolute;
-	}
-
-	/* Text */
-	.truncate {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-`;
-
-/**
- * CSSStyleSheet for utilities - use with Shadow DOM components
- * @example
- * import { utilities } from '@neovici/cosmoz-tokens/utilities';
- * customElements.define('my-el', component(MyEl, { styleSheets: [utilities] }));
- */
-export const utilities = sheet(utilitiesCSS);