@neovici/cosmoz-tokens 1.0.0 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +38 -4
- package/package.json +8 -12
- package/src/utilities.css.js +118 -0
package/README.md
CHANGED
|
@@ -57,6 +57,43 @@ customElements.define(
|
|
|
57
57
|
);
|
|
58
58
|
```
|
|
59
59
|
|
|
60
|
+
### Using utilities in web components
|
|
61
|
+
|
|
62
|
+
The utilities stylesheet provides **layout primitives** as a `CSSStyleSheet` for use with Shadow DOM:
|
|
63
|
+
|
|
64
|
+
> **Philosophy:** This is intentionally a minimal set. Web components have scoped CSS,
|
|
65
|
+
> so you don't need utility classes for everything. Use CSS custom properties
|
|
66
|
+
> (tokens) directly in your component styles for margins, padding, colors, etc.
|
|
67
|
+
|
|
68
|
+
```js
|
|
69
|
+
import { component } from '@pionjs/pion';
|
|
70
|
+
import { normalize } from '@neovici/cosmoz-tokens/normalize';
|
|
71
|
+
import { utilities } from '@neovici/cosmoz-tokens/utilities';
|
|
72
|
+
import { style } from './my-component.css.js';
|
|
73
|
+
|
|
74
|
+
const MyComponent = () => {
|
|
75
|
+
return html`<div class="flex items-center gap-4">Hello World</div>`;
|
|
76
|
+
};
|
|
77
|
+
|
|
78
|
+
customElements.define(
|
|
79
|
+
'my-component',
|
|
80
|
+
component(MyComponent, {
|
|
81
|
+
styleSheets: [normalize, utilities, style],
|
|
82
|
+
}),
|
|
83
|
+
);
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Available utility classes:
|
|
87
|
+
|
|
88
|
+
| Category | Classes |
|
|
89
|
+
| -------- | ------------------------------------------------------------------------------------------------------------------------------- |
|
|
90
|
+
| Flexbox | `flex`, `flex-col`, `flex-wrap`, `items-center`, `items-start`, `items-end`, `justify-center`, `justify-between`, `justify-end` |
|
|
91
|
+
| Gap | `gap-0`, `gap-1`, `gap-2`, `gap-3`, `gap-4`, `gap-5`, `gap-6`, `gap-8` |
|
|
92
|
+
| Display | `hidden`, `block`, `grid` |
|
|
93
|
+
| Sizing | `w-full`, `h-full` |
|
|
94
|
+
| Position | `relative`, `absolute` |
|
|
95
|
+
| Text | `truncate` |
|
|
96
|
+
|
|
60
97
|
## Dark Mode
|
|
61
98
|
|
|
62
99
|
Semantic tokens automatically adapt to dark mode. Enable it by adding a class or data attribute to the root element:
|
|
@@ -127,10 +164,7 @@ document.documentElement.dataset.theme = 'dark';
|
|
|
127
164
|
npm install
|
|
128
165
|
|
|
129
166
|
# Run Storybook
|
|
130
|
-
npm run storybook
|
|
131
|
-
|
|
132
|
-
# Run tests
|
|
133
|
-
npm test
|
|
167
|
+
npm run storybook:start
|
|
134
168
|
|
|
135
169
|
# Build Storybook
|
|
136
170
|
npm run storybook:build
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@neovici/cosmoz-tokens",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Design tokens for Cosmoz web components based on Untitled UI",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"design-tokens",
|
|
@@ -23,6 +23,7 @@
|
|
|
23
23
|
"exports": {
|
|
24
24
|
".": "./src/index.css",
|
|
25
25
|
"./normalize": "./src/normalize.css.js",
|
|
26
|
+
"./utilities": "./src/utilities.css.js",
|
|
26
27
|
"./primitives": "./src/primitives.css",
|
|
27
28
|
"./typography": "./src/typography.css",
|
|
28
29
|
"./spacing": "./src/spacing.css",
|
|
@@ -35,8 +36,6 @@
|
|
|
35
36
|
"scripts": {
|
|
36
37
|
"lint": "eslint --cache .",
|
|
37
38
|
"start": "wds",
|
|
38
|
-
"test": "wtr --coverage",
|
|
39
|
-
"test:watch": "wtr --watch",
|
|
40
39
|
"storybook:start": "storybook dev -p 8000",
|
|
41
40
|
"storybook:build": "storybook build",
|
|
42
41
|
"storybook:deploy": "storybook-to-ghpages",
|
|
@@ -64,23 +63,20 @@
|
|
|
64
63
|
"@pionjs/pion": "^2.5.2"
|
|
65
64
|
},
|
|
66
65
|
"devDependencies": {
|
|
67
|
-
"@commitlint/cli": "^
|
|
68
|
-
"@commitlint/config-conventional": "^
|
|
66
|
+
"@commitlint/cli": "^20.0.0",
|
|
67
|
+
"@commitlint/config-conventional": "^20.0.0",
|
|
69
68
|
"@neovici/cfg": "^2.8.0",
|
|
70
|
-
"@open-wc/testing": "^4.0.0",
|
|
71
69
|
"@semantic-release/changelog": "^6.0.0",
|
|
72
70
|
"@semantic-release/git": "^10.0.0",
|
|
73
|
-
"@storybook/web-components-vite": "^
|
|
71
|
+
"@storybook/web-components-vite": "^10.0.0",
|
|
74
72
|
"@web/dev-server": "^0.4.0",
|
|
75
|
-
"@web/test-runner": "^0.18.0",
|
|
76
|
-
"@web/test-runner-playwright": "^0.11.0",
|
|
77
73
|
"eslint": "^9.0.0",
|
|
78
74
|
"http-server": "^14.1.1",
|
|
79
75
|
"husky": "^9.0.0",
|
|
80
|
-
"lint-staged": "^
|
|
76
|
+
"lint-staged": "^16.0.0",
|
|
81
77
|
"lit-html": "^3.0.0",
|
|
82
|
-
"semantic-release": "^
|
|
83
|
-
"storybook": "^
|
|
78
|
+
"semantic-release": "^25.0.0",
|
|
79
|
+
"storybook": "^10.0.0"
|
|
84
80
|
},
|
|
85
81
|
"overrides": {
|
|
86
82
|
"conventional-changelog-conventionalcommits": ">= 8.0.0"
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cosmoz Design Tokens - Utilities
|
|
3
|
+
*
|
|
4
|
+
* Minimal layout primitives for web component shadow DOMs.
|
|
5
|
+
* Uses --cz-spacing for consistent spacing scale.
|
|
6
|
+
*
|
|
7
|
+
* Philosophy: This is intentionally a minimal set. Web components have scoped CSS,
|
|
8
|
+
* so you don't need utility classes for everything. Use CSS custom properties
|
|
9
|
+
* (tokens) directly in your component styles for margins, padding, colors, etc.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
import { css, sheet } from '@pionjs/pion';
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* Raw CSS for utilities - can be used in Light DOM contexts
|
|
16
|
+
* @example
|
|
17
|
+
* import { utilitiesCSS } from '@neovici/cosmoz-tokens/utilities';
|
|
18
|
+
* html`<style>${utilitiesCSS}</style>`;
|
|
19
|
+
*/
|
|
20
|
+
export const utilitiesCSS = css`
|
|
21
|
+
/* Flexbox */
|
|
22
|
+
.flex {
|
|
23
|
+
display: flex;
|
|
24
|
+
}
|
|
25
|
+
.flex-col {
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
}
|
|
29
|
+
.flex-wrap {
|
|
30
|
+
flex-wrap: wrap;
|
|
31
|
+
}
|
|
32
|
+
.items-center {
|
|
33
|
+
align-items: center;
|
|
34
|
+
}
|
|
35
|
+
.items-start {
|
|
36
|
+
align-items: flex-start;
|
|
37
|
+
}
|
|
38
|
+
.items-end {
|
|
39
|
+
align-items: flex-end;
|
|
40
|
+
}
|
|
41
|
+
.justify-center {
|
|
42
|
+
justify-content: center;
|
|
43
|
+
}
|
|
44
|
+
.justify-between {
|
|
45
|
+
justify-content: space-between;
|
|
46
|
+
}
|
|
47
|
+
.justify-end {
|
|
48
|
+
justify-content: flex-end;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
/* Gap (using --cz-spacing: 4px) */
|
|
52
|
+
.gap-0 {
|
|
53
|
+
gap: 0;
|
|
54
|
+
}
|
|
55
|
+
.gap-1 {
|
|
56
|
+
gap: calc(var(--cz-spacing) * 1);
|
|
57
|
+
}
|
|
58
|
+
.gap-2 {
|
|
59
|
+
gap: calc(var(--cz-spacing) * 2);
|
|
60
|
+
}
|
|
61
|
+
.gap-3 {
|
|
62
|
+
gap: calc(var(--cz-spacing) * 3);
|
|
63
|
+
}
|
|
64
|
+
.gap-4 {
|
|
65
|
+
gap: calc(var(--cz-spacing) * 4);
|
|
66
|
+
}
|
|
67
|
+
.gap-5 {
|
|
68
|
+
gap: calc(var(--cz-spacing) * 5);
|
|
69
|
+
}
|
|
70
|
+
.gap-6 {
|
|
71
|
+
gap: calc(var(--cz-spacing) * 6);
|
|
72
|
+
}
|
|
73
|
+
.gap-8 {
|
|
74
|
+
gap: calc(var(--cz-spacing) * 8);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
/* Display */
|
|
78
|
+
.hidden {
|
|
79
|
+
display: none;
|
|
80
|
+
}
|
|
81
|
+
.block {
|
|
82
|
+
display: block;
|
|
83
|
+
}
|
|
84
|
+
.grid {
|
|
85
|
+
display: grid;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
/* Sizing */
|
|
89
|
+
.w-full {
|
|
90
|
+
width: 100%;
|
|
91
|
+
}
|
|
92
|
+
.h-full {
|
|
93
|
+
height: 100%;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
/* Position */
|
|
97
|
+
.relative {
|
|
98
|
+
position: relative;
|
|
99
|
+
}
|
|
100
|
+
.absolute {
|
|
101
|
+
position: absolute;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
/* Text */
|
|
105
|
+
.truncate {
|
|
106
|
+
overflow: hidden;
|
|
107
|
+
text-overflow: ellipsis;
|
|
108
|
+
white-space: nowrap;
|
|
109
|
+
}
|
|
110
|
+
`;
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* CSSStyleSheet for utilities - use with Shadow DOM components
|
|
114
|
+
* @example
|
|
115
|
+
* import { utilities } from '@neovici/cosmoz-tokens/utilities';
|
|
116
|
+
* customElements.define('my-el', component(MyEl, { styleSheets: [utilities] }));
|
|
117
|
+
*/
|
|
118
|
+
export const utilities = sheet(utilitiesCSS);
|