@neovici/cosmoz-tokens 1.0.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 +141 -0
- package/package.json +88 -0
- package/src/index.css +10 -0
- package/src/normalize.css.js +177 -0
- package/src/primitives.css +85 -0
- package/src/semantic.css +174 -0
- package/src/shadows.css +38 -0
- package/src/spacing.css +22 -0
- package/src/typography.css +61 -0
package/README.md
ADDED
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
# @neovici/cosmoz-tokens
|
|
2
|
+
|
|
3
|
+
Design tokens for Cosmoz web components, extracted from Untitled UI.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @neovici/cosmoz-tokens
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
### Import all tokens (CSS)
|
|
14
|
+
|
|
15
|
+
```js
|
|
16
|
+
// Import all design tokens
|
|
17
|
+
import '@neovici/cosmoz-tokens';
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
This imports all token files:
|
|
21
|
+
|
|
22
|
+
- Primitives (colors)
|
|
23
|
+
- Typography (fonts, sizes)
|
|
24
|
+
- Spacing (border radius)
|
|
25
|
+
- Shadows
|
|
26
|
+
- Semantic tokens (with dark mode support)
|
|
27
|
+
|
|
28
|
+
### Import specific token files
|
|
29
|
+
|
|
30
|
+
```js
|
|
31
|
+
// Import only what you need
|
|
32
|
+
import '@neovici/cosmoz-tokens/primitives.css';
|
|
33
|
+
import '@neovici/cosmoz-tokens/typography.css';
|
|
34
|
+
import '@neovici/cosmoz-tokens/spacing.css';
|
|
35
|
+
import '@neovici/cosmoz-tokens/shadows.css';
|
|
36
|
+
import '@neovici/cosmoz-tokens/semantic.css';
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
### Using normalize in web components
|
|
40
|
+
|
|
41
|
+
The normalize stylesheet provides CSS reset styles as a `CSSStyleSheet` for use with Shadow DOM:
|
|
42
|
+
|
|
43
|
+
```js
|
|
44
|
+
import { component } from '@pionjs/pion';
|
|
45
|
+
import { normalize } from '@neovici/cosmoz-tokens/normalize';
|
|
46
|
+
import { style } from './my-component.css.js';
|
|
47
|
+
|
|
48
|
+
const MyComponent = () => {
|
|
49
|
+
return html`<div>Hello World</div>`;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
customElements.define(
|
|
53
|
+
'my-component',
|
|
54
|
+
component(MyComponent, {
|
|
55
|
+
styleSheets: [normalize, style],
|
|
56
|
+
}),
|
|
57
|
+
);
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
## Dark Mode
|
|
61
|
+
|
|
62
|
+
Semantic tokens automatically adapt to dark mode. Enable it by adding a class or data attribute to the root element:
|
|
63
|
+
|
|
64
|
+
```js
|
|
65
|
+
// Using class
|
|
66
|
+
document.documentElement.classList.add('dark-mode');
|
|
67
|
+
|
|
68
|
+
// Or using data attribute
|
|
69
|
+
document.documentElement.dataset.theme = 'dark';
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
## Token Reference
|
|
73
|
+
|
|
74
|
+
### Colors (Primitives)
|
|
75
|
+
|
|
76
|
+
| Token | Description |
|
|
77
|
+
| ----------------------------- | -------------------------------- |
|
|
78
|
+
| `--cz-color-brand-{25-950}` | Brand color scale (indigo-based) |
|
|
79
|
+
| `--cz-color-gray-{25-950}` | Gray scale |
|
|
80
|
+
| `--cz-color-error-{25-950}` | Error/danger colors |
|
|
81
|
+
| `--cz-color-warning-{25-950}` | Warning colors |
|
|
82
|
+
| `--cz-color-success-{25-950}` | Success colors |
|
|
83
|
+
| `--cz-color-white` | Pure white |
|
|
84
|
+
| `--cz-color-black` | Pure black |
|
|
85
|
+
|
|
86
|
+
### Typography
|
|
87
|
+
|
|
88
|
+
| Token | Description |
|
|
89
|
+
| --------------------------------- | ------------------------------- |
|
|
90
|
+
| `--cz-font-body` | Body font (Inter) |
|
|
91
|
+
| `--cz-font-display` | Display font (DM Sans) |
|
|
92
|
+
| `--cz-font-mono` | Monospace font |
|
|
93
|
+
| `--cz-text-{xs-xl}` | Text sizes with line heights |
|
|
94
|
+
| `--cz-text-display-{xs-2xl}` | Display sizes with line heights |
|
|
95
|
+
| `--cz-font-weight-{regular-bold}` | Font weights |
|
|
96
|
+
|
|
97
|
+
### Spacing
|
|
98
|
+
|
|
99
|
+
| Token | Description |
|
|
100
|
+
| ------------------------- | ----------------------- |
|
|
101
|
+
| `--cz-spacing` | Base spacing unit (4px) |
|
|
102
|
+
| `--cz-radius-{none-full}` | Border radius scale |
|
|
103
|
+
|
|
104
|
+
### Shadows
|
|
105
|
+
|
|
106
|
+
| Token | Description |
|
|
107
|
+
| ---------------------------- | ---------------------- |
|
|
108
|
+
| `--cz-shadow-{xs-3xl}` | Shadow scale |
|
|
109
|
+
| `--cz-shadow-skeumorphic` | Button inset shadow |
|
|
110
|
+
| `--cz-shadow-xs-skeumorphic` | Combined shadow |
|
|
111
|
+
| `--cz-focus-ring` | Focus ring for inputs |
|
|
112
|
+
| `--cz-focus-ring-error` | Error state focus ring |
|
|
113
|
+
|
|
114
|
+
### Semantic Colors
|
|
115
|
+
|
|
116
|
+
| Token | Description |
|
|
117
|
+
| --------------------- | ---------------------- |
|
|
118
|
+
| `--cz-color-text-*` | Text colors |
|
|
119
|
+
| `--cz-color-bg-*` | Background colors |
|
|
120
|
+
| `--cz-color-border-*` | Border colors |
|
|
121
|
+
| `--cz-color-fg-*` | Foreground/icon colors |
|
|
122
|
+
|
|
123
|
+
## Development
|
|
124
|
+
|
|
125
|
+
```bash
|
|
126
|
+
# Install dependencies
|
|
127
|
+
npm install
|
|
128
|
+
|
|
129
|
+
# Run Storybook
|
|
130
|
+
npm run storybook
|
|
131
|
+
|
|
132
|
+
# Run tests
|
|
133
|
+
npm test
|
|
134
|
+
|
|
135
|
+
# Build Storybook
|
|
136
|
+
npm run storybook:build
|
|
137
|
+
```
|
|
138
|
+
|
|
139
|
+
## License
|
|
140
|
+
|
|
141
|
+
Apache-2.0
|
package/package.json
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@neovici/cosmoz-tokens",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Design tokens for Cosmoz web components based on Untitled UI",
|
|
5
|
+
"keywords": [
|
|
6
|
+
"design-tokens",
|
|
7
|
+
"css-variables",
|
|
8
|
+
"web-components",
|
|
9
|
+
"untitled-ui"
|
|
10
|
+
],
|
|
11
|
+
"homepage": "https://github.com/Neovici/cosmoz-tokens#readme",
|
|
12
|
+
"bugs": {
|
|
13
|
+
"url": "https://github.com/Neovici/cosmoz-tokens/issues"
|
|
14
|
+
},
|
|
15
|
+
"repository": {
|
|
16
|
+
"type": "git",
|
|
17
|
+
"url": "git+https://github.com/Neovici/cosmoz-tokens.git"
|
|
18
|
+
},
|
|
19
|
+
"license": "Apache-2.0",
|
|
20
|
+
"author": "Neovici Development",
|
|
21
|
+
"type": "module",
|
|
22
|
+
"main": "./src/index.css",
|
|
23
|
+
"exports": {
|
|
24
|
+
".": "./src/index.css",
|
|
25
|
+
"./normalize": "./src/normalize.css.js",
|
|
26
|
+
"./primitives": "./src/primitives.css",
|
|
27
|
+
"./typography": "./src/typography.css",
|
|
28
|
+
"./spacing": "./src/spacing.css",
|
|
29
|
+
"./shadows": "./src/shadows.css",
|
|
30
|
+
"./semantic": "./src/semantic.css"
|
|
31
|
+
},
|
|
32
|
+
"files": [
|
|
33
|
+
"src/"
|
|
34
|
+
],
|
|
35
|
+
"scripts": {
|
|
36
|
+
"lint": "eslint --cache .",
|
|
37
|
+
"start": "wds",
|
|
38
|
+
"test": "wtr --coverage",
|
|
39
|
+
"test:watch": "wtr --watch",
|
|
40
|
+
"storybook:start": "storybook dev -p 8000",
|
|
41
|
+
"storybook:build": "storybook build",
|
|
42
|
+
"storybook:deploy": "storybook-to-ghpages",
|
|
43
|
+
"storybook:preview": "npm run storybook:build && http-server ./storybook-static/ --silent",
|
|
44
|
+
"prepare": "husky"
|
|
45
|
+
},
|
|
46
|
+
"release": {
|
|
47
|
+
"plugins": [
|
|
48
|
+
"@semantic-release/commit-analyzer",
|
|
49
|
+
"@semantic-release/release-notes-generator",
|
|
50
|
+
"@semantic-release/changelog",
|
|
51
|
+
"@semantic-release/github",
|
|
52
|
+
"@semantic-release/npm",
|
|
53
|
+
"@semantic-release/git"
|
|
54
|
+
],
|
|
55
|
+
"branches": [
|
|
56
|
+
"main"
|
|
57
|
+
],
|
|
58
|
+
"preset": "conventionalcommits"
|
|
59
|
+
},
|
|
60
|
+
"publishConfig": {
|
|
61
|
+
"access": "public"
|
|
62
|
+
},
|
|
63
|
+
"dependencies": {
|
|
64
|
+
"@pionjs/pion": "^2.5.2"
|
|
65
|
+
},
|
|
66
|
+
"devDependencies": {
|
|
67
|
+
"@commitlint/cli": "^19.0.0",
|
|
68
|
+
"@commitlint/config-conventional": "^19.0.0",
|
|
69
|
+
"@neovici/cfg": "^2.8.0",
|
|
70
|
+
"@open-wc/testing": "^4.0.0",
|
|
71
|
+
"@semantic-release/changelog": "^6.0.0",
|
|
72
|
+
"@semantic-release/git": "^10.0.0",
|
|
73
|
+
"@storybook/web-components-vite": "^8.0.0",
|
|
74
|
+
"@web/dev-server": "^0.4.0",
|
|
75
|
+
"@web/test-runner": "^0.18.0",
|
|
76
|
+
"@web/test-runner-playwright": "^0.11.0",
|
|
77
|
+
"eslint": "^9.0.0",
|
|
78
|
+
"http-server": "^14.1.1",
|
|
79
|
+
"husky": "^9.0.0",
|
|
80
|
+
"lint-staged": "^15.0.0",
|
|
81
|
+
"lit-html": "^3.0.0",
|
|
82
|
+
"semantic-release": "^24.0.0",
|
|
83
|
+
"storybook": "^8.0.0"
|
|
84
|
+
},
|
|
85
|
+
"overrides": {
|
|
86
|
+
"conventional-changelog-conventionalcommits": ">= 8.0.0"
|
|
87
|
+
}
|
|
88
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,177 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cosmoz Design Tokens - Normalize
|
|
3
|
+
* Re-usable normalize stylesheet for web component shadow DOMs.
|
|
4
|
+
* Based on Tailwind's preflight.css, adapted for shadow DOM usage.
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import { css, sheet } from '@pionjs/pion';
|
|
8
|
+
|
|
9
|
+
export const normalize = sheet(css`
|
|
10
|
+
/*
|
|
11
|
+
* 1. Prevent padding and border from affecting element width.
|
|
12
|
+
* 2. Remove default margins and padding.
|
|
13
|
+
* 3. Reset all borders.
|
|
14
|
+
*/
|
|
15
|
+
*,
|
|
16
|
+
::after,
|
|
17
|
+
::before,
|
|
18
|
+
::backdrop,
|
|
19
|
+
::file-selector-button {
|
|
20
|
+
box-sizing: border-box;
|
|
21
|
+
margin: 0;
|
|
22
|
+
padding: 0;
|
|
23
|
+
border: 0 solid;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
/*
|
|
27
|
+
* 1. Use a consistent sensible line-height in all browsers.
|
|
28
|
+
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
|
29
|
+
* 3. Use a more readable tab size.
|
|
30
|
+
* 4. Use the configured font-family.
|
|
31
|
+
* 5. Disable tap highlights on iOS.
|
|
32
|
+
*/
|
|
33
|
+
:host {
|
|
34
|
+
line-height: 1.5;
|
|
35
|
+
-webkit-text-size-adjust: 100%;
|
|
36
|
+
tab-size: 4;
|
|
37
|
+
font-family: var(--cz-font-body);
|
|
38
|
+
-webkit-tap-highlight-color: transparent;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/*
|
|
42
|
+
* Reset links to optimize for opt-in styling.
|
|
43
|
+
*/
|
|
44
|
+
a {
|
|
45
|
+
color: inherit;
|
|
46
|
+
text-decoration: inherit;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
/*
|
|
50
|
+
* Add the correct font weight in Edge and Safari.
|
|
51
|
+
*/
|
|
52
|
+
b,
|
|
53
|
+
strong {
|
|
54
|
+
font-weight: bolder;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
/*
|
|
58
|
+
* 1. Use the configured mono font-family.
|
|
59
|
+
* 2. Correct the odd em font sizing in all browsers.
|
|
60
|
+
*/
|
|
61
|
+
code,
|
|
62
|
+
kbd,
|
|
63
|
+
samp,
|
|
64
|
+
pre {
|
|
65
|
+
font-family: var(--cz-font-mono);
|
|
66
|
+
font-size: 1em;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
/*
|
|
70
|
+
* Add the correct font size in all browsers.
|
|
71
|
+
*/
|
|
72
|
+
small {
|
|
73
|
+
font-size: 80%;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
/*
|
|
77
|
+
* Prevent sub and sup from affecting line height.
|
|
78
|
+
*/
|
|
79
|
+
sub,
|
|
80
|
+
sup {
|
|
81
|
+
font-size: 75%;
|
|
82
|
+
line-height: 0;
|
|
83
|
+
position: relative;
|
|
84
|
+
vertical-align: baseline;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
sub {
|
|
88
|
+
bottom: -0.25em;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
sup {
|
|
92
|
+
top: -0.5em;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
/*
|
|
96
|
+
* 1. Make replaced elements display: block by default.
|
|
97
|
+
* 2. Add vertical-align: middle for better alignment.
|
|
98
|
+
*/
|
|
99
|
+
img,
|
|
100
|
+
svg,
|
|
101
|
+
video,
|
|
102
|
+
canvas,
|
|
103
|
+
audio,
|
|
104
|
+
iframe,
|
|
105
|
+
embed,
|
|
106
|
+
object {
|
|
107
|
+
display: block;
|
|
108
|
+
vertical-align: middle;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
/*
|
|
112
|
+
* Constrain images and videos to parent width.
|
|
113
|
+
*/
|
|
114
|
+
img,
|
|
115
|
+
video {
|
|
116
|
+
max-width: 100%;
|
|
117
|
+
height: auto;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/*
|
|
121
|
+
* 1. Inherit font styles in all browsers.
|
|
122
|
+
* 2. Remove border radius.
|
|
123
|
+
* 3. Remove background color.
|
|
124
|
+
*/
|
|
125
|
+
button,
|
|
126
|
+
input,
|
|
127
|
+
select,
|
|
128
|
+
optgroup,
|
|
129
|
+
textarea,
|
|
130
|
+
::file-selector-button {
|
|
131
|
+
font: inherit;
|
|
132
|
+
font-feature-settings: inherit;
|
|
133
|
+
font-variation-settings: inherit;
|
|
134
|
+
letter-spacing: inherit;
|
|
135
|
+
color: inherit;
|
|
136
|
+
border-radius: 0;
|
|
137
|
+
background-color: transparent;
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
/*
|
|
141
|
+
* Reset placeholder opacity in Firefox.
|
|
142
|
+
*/
|
|
143
|
+
::placeholder {
|
|
144
|
+
opacity: 1;
|
|
145
|
+
color: var(--cz-color-text-placeholder, currentcolor);
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
/*
|
|
149
|
+
* Prevent horizontal textarea resize.
|
|
150
|
+
*/
|
|
151
|
+
textarea {
|
|
152
|
+
resize: vertical;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
/*
|
|
156
|
+
* Remove the inner padding in Chrome and Safari on macOS.
|
|
157
|
+
*/
|
|
158
|
+
::-webkit-search-decoration {
|
|
159
|
+
-webkit-appearance: none;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
/*
|
|
163
|
+
* Correct the inability to style the border radius in iOS Safari.
|
|
164
|
+
*/
|
|
165
|
+
button,
|
|
166
|
+
input:where([type='button'], [type='reset'], [type='submit']),
|
|
167
|
+
::file-selector-button {
|
|
168
|
+
appearance: button;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/*
|
|
172
|
+
* Make elements with hidden attribute stay hidden.
|
|
173
|
+
*/
|
|
174
|
+
[hidden]:where(:not([hidden='until-found'])) {
|
|
175
|
+
display: none !important;
|
|
176
|
+
}
|
|
177
|
+
`);
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cosmoz Design Tokens - Primitives
|
|
3
|
+
* Base color palette extracted from Untitled UI
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* Base colors */
|
|
8
|
+
--cz-color-white: rgb(255 255 255);
|
|
9
|
+
--cz-color-black: rgb(0 0 0);
|
|
10
|
+
--cz-color-transparent: rgb(0 0 0 / 0);
|
|
11
|
+
|
|
12
|
+
/* Alpha colors - inverted in dark mode */
|
|
13
|
+
--cz-color-alpha-white: rgb(255 255 255);
|
|
14
|
+
--cz-color-alpha-black: rgb(0 0 0);
|
|
15
|
+
|
|
16
|
+
/* Brand colors - custom indigo based on #3f51b5 */
|
|
17
|
+
--cz-color-brand-25: rgb(245 246 251);
|
|
18
|
+
--cz-color-brand-50: rgb(235 238 249);
|
|
19
|
+
--cz-color-brand-100: rgb(215 221 243);
|
|
20
|
+
--cz-color-brand-200: rgb(179 190 234);
|
|
21
|
+
--cz-color-brand-300: rgb(138 156 221);
|
|
22
|
+
--cz-color-brand-400: rgb(100 120 207);
|
|
23
|
+
--cz-color-brand-500: rgb(77 95 194);
|
|
24
|
+
--cz-color-brand-600: rgb(63 81 181);
|
|
25
|
+
--cz-color-brand-700: rgb(53 68 151);
|
|
26
|
+
--cz-color-brand-800: rgb(44 56 121);
|
|
27
|
+
--cz-color-brand-900: rgb(37 47 96);
|
|
28
|
+
--cz-color-brand-950: rgb(24 30 61);
|
|
29
|
+
|
|
30
|
+
/* Gray colors */
|
|
31
|
+
--cz-color-gray-25: rgb(253 253 253);
|
|
32
|
+
--cz-color-gray-50: rgb(250 250 250);
|
|
33
|
+
--cz-color-gray-100: rgb(245 245 245);
|
|
34
|
+
--cz-color-gray-200: rgb(233 234 235);
|
|
35
|
+
--cz-color-gray-300: rgb(213 215 218);
|
|
36
|
+
--cz-color-gray-400: rgb(164 167 174);
|
|
37
|
+
--cz-color-gray-500: rgb(113 118 128);
|
|
38
|
+
--cz-color-gray-600: rgb(83 88 98);
|
|
39
|
+
--cz-color-gray-700: rgb(65 70 81);
|
|
40
|
+
--cz-color-gray-800: rgb(37 43 55);
|
|
41
|
+
--cz-color-gray-900: rgb(24 29 39);
|
|
42
|
+
--cz-color-gray-950: rgb(10 13 18);
|
|
43
|
+
|
|
44
|
+
/* Error colors */
|
|
45
|
+
--cz-color-error-25: rgb(255 251 250);
|
|
46
|
+
--cz-color-error-50: rgb(254 243 242);
|
|
47
|
+
--cz-color-error-100: rgb(254 228 226);
|
|
48
|
+
--cz-color-error-200: rgb(254 205 202);
|
|
49
|
+
--cz-color-error-300: rgb(253 162 155);
|
|
50
|
+
--cz-color-error-400: rgb(249 112 102);
|
|
51
|
+
--cz-color-error-500: rgb(240 68 56);
|
|
52
|
+
--cz-color-error-600: rgb(217 45 32);
|
|
53
|
+
--cz-color-error-700: rgb(180 35 24);
|
|
54
|
+
--cz-color-error-800: rgb(145 32 24);
|
|
55
|
+
--cz-color-error-900: rgb(122 39 26);
|
|
56
|
+
--cz-color-error-950: rgb(85 22 12);
|
|
57
|
+
|
|
58
|
+
/* Warning colors */
|
|
59
|
+
--cz-color-warning-25: rgb(255 252 245);
|
|
60
|
+
--cz-color-warning-50: rgb(255 250 235);
|
|
61
|
+
--cz-color-warning-100: rgb(254 240 199);
|
|
62
|
+
--cz-color-warning-200: rgb(254 223 137);
|
|
63
|
+
--cz-color-warning-300: rgb(254 200 75);
|
|
64
|
+
--cz-color-warning-400: rgb(253 176 34);
|
|
65
|
+
--cz-color-warning-500: rgb(247 144 9);
|
|
66
|
+
--cz-color-warning-600: rgb(220 104 3);
|
|
67
|
+
--cz-color-warning-700: rgb(181 71 8);
|
|
68
|
+
--cz-color-warning-800: rgb(147 55 13);
|
|
69
|
+
--cz-color-warning-900: rgb(122 46 14);
|
|
70
|
+
--cz-color-warning-950: rgb(78 29 9);
|
|
71
|
+
|
|
72
|
+
/* Success colors */
|
|
73
|
+
--cz-color-success-25: rgb(246 254 249);
|
|
74
|
+
--cz-color-success-50: rgb(236 253 243);
|
|
75
|
+
--cz-color-success-100: rgb(220 250 230);
|
|
76
|
+
--cz-color-success-200: rgb(171 239 198);
|
|
77
|
+
--cz-color-success-300: rgb(117 224 167);
|
|
78
|
+
--cz-color-success-400: rgb(71 205 137);
|
|
79
|
+
--cz-color-success-500: rgb(23 178 106);
|
|
80
|
+
--cz-color-success-600: rgb(7 148 85);
|
|
81
|
+
--cz-color-success-700: rgb(6 118 71);
|
|
82
|
+
--cz-color-success-800: rgb(8 93 58);
|
|
83
|
+
--cz-color-success-900: rgb(7 77 49);
|
|
84
|
+
--cz-color-success-950: rgb(5 51 33);
|
|
85
|
+
}
|
package/src/semantic.css
ADDED
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cosmoz Design Tokens - Semantic
|
|
3
|
+
* Semantic color tokens with light and dark mode support
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* Text colors */
|
|
8
|
+
--cz-color-text-primary: var(--cz-color-gray-900);
|
|
9
|
+
--cz-color-text-secondary: var(--cz-color-gray-700);
|
|
10
|
+
--cz-color-text-secondary-hover: var(--cz-color-gray-800);
|
|
11
|
+
--cz-color-text-tertiary: var(--cz-color-gray-600);
|
|
12
|
+
--cz-color-text-tertiary-hover: var(--cz-color-gray-700);
|
|
13
|
+
--cz-color-text-quaternary: var(--cz-color-gray-500);
|
|
14
|
+
--cz-color-text-disabled: var(--cz-color-gray-500);
|
|
15
|
+
--cz-color-text-placeholder: var(--cz-color-gray-500);
|
|
16
|
+
--cz-color-text-placeholder-subtle: var(--cz-color-gray-300);
|
|
17
|
+
--cz-color-text-error: var(--cz-color-error-600);
|
|
18
|
+
--cz-color-text-error-hover: var(--cz-color-error-700);
|
|
19
|
+
--cz-color-text-warning: var(--cz-color-warning-600);
|
|
20
|
+
--cz-color-text-success: var(--cz-color-success-600);
|
|
21
|
+
--cz-color-text-brand: var(--cz-color-brand-600);
|
|
22
|
+
--cz-color-text-brand-hover: var(--cz-color-brand-700);
|
|
23
|
+
--cz-color-text-on-brand: var(--cz-color-white);
|
|
24
|
+
--cz-color-text-on-brand-secondary: var(--cz-color-brand-200);
|
|
25
|
+
|
|
26
|
+
/* Background colors */
|
|
27
|
+
--cz-color-bg-primary: var(--cz-color-white);
|
|
28
|
+
--cz-color-bg-primary-hover: var(--cz-color-gray-50);
|
|
29
|
+
--cz-color-bg-primary-solid: var(--cz-color-gray-950);
|
|
30
|
+
--cz-color-bg-secondary: var(--cz-color-gray-50);
|
|
31
|
+
--cz-color-bg-secondary-hover: var(--cz-color-gray-100);
|
|
32
|
+
--cz-color-bg-secondary-subtle: var(--cz-color-gray-25);
|
|
33
|
+
--cz-color-bg-tertiary: var(--cz-color-gray-100);
|
|
34
|
+
--cz-color-bg-quaternary: var(--cz-color-gray-200);
|
|
35
|
+
--cz-color-bg-disabled: var(--cz-color-gray-100);
|
|
36
|
+
--cz-color-bg-disabled-subtle: var(--cz-color-gray-50);
|
|
37
|
+
--cz-color-bg-overlay: var(--cz-color-gray-950);
|
|
38
|
+
--cz-color-bg-brand: var(--cz-color-brand-50);
|
|
39
|
+
--cz-color-bg-brand-secondary: var(--cz-color-brand-100);
|
|
40
|
+
--cz-color-bg-brand-solid: var(--cz-color-brand-600);
|
|
41
|
+
--cz-color-bg-brand-solid-hover: var(--cz-color-brand-700);
|
|
42
|
+
--cz-color-bg-brand-section: var(--cz-color-brand-800);
|
|
43
|
+
--cz-color-bg-error: var(--cz-color-error-50);
|
|
44
|
+
--cz-color-bg-error-secondary: var(--cz-color-error-100);
|
|
45
|
+
--cz-color-bg-error-solid: var(--cz-color-error-600);
|
|
46
|
+
--cz-color-bg-error-solid-hover: var(--cz-color-error-700);
|
|
47
|
+
--cz-color-bg-warning: var(--cz-color-warning-50);
|
|
48
|
+
--cz-color-bg-warning-secondary: var(--cz-color-warning-100);
|
|
49
|
+
--cz-color-bg-warning-solid: var(--cz-color-warning-600);
|
|
50
|
+
--cz-color-bg-success: var(--cz-color-success-50);
|
|
51
|
+
--cz-color-bg-success-secondary: var(--cz-color-success-100);
|
|
52
|
+
--cz-color-bg-success-solid: var(--cz-color-success-600);
|
|
53
|
+
|
|
54
|
+
/* Border colors */
|
|
55
|
+
--cz-color-border-primary: var(--cz-color-gray-300);
|
|
56
|
+
--cz-color-border-secondary: var(--cz-color-gray-200);
|
|
57
|
+
--cz-color-border-tertiary: var(--cz-color-gray-100);
|
|
58
|
+
--cz-color-border-disabled: var(--cz-color-gray-300);
|
|
59
|
+
--cz-color-border-disabled-subtle: var(--cz-color-gray-200);
|
|
60
|
+
--cz-color-border-error: var(--cz-color-error-500);
|
|
61
|
+
--cz-color-border-error-subtle: var(--cz-color-error-300);
|
|
62
|
+
--cz-color-border-brand: var(--cz-color-brand-500);
|
|
63
|
+
--cz-color-border-brand-alt: var(--cz-color-brand-600);
|
|
64
|
+
|
|
65
|
+
/* Foreground colors (icons, decorative elements) */
|
|
66
|
+
--cz-color-fg-primary: var(--cz-color-gray-900);
|
|
67
|
+
--cz-color-fg-secondary: var(--cz-color-gray-700);
|
|
68
|
+
--cz-color-fg-secondary-hover: var(--cz-color-gray-800);
|
|
69
|
+
--cz-color-fg-tertiary: var(--cz-color-gray-600);
|
|
70
|
+
--cz-color-fg-tertiary-hover: var(--cz-color-gray-700);
|
|
71
|
+
--cz-color-fg-quaternary: var(--cz-color-gray-400);
|
|
72
|
+
--cz-color-fg-quaternary-hover: var(--cz-color-gray-500);
|
|
73
|
+
--cz-color-fg-disabled: var(--cz-color-gray-400);
|
|
74
|
+
--cz-color-fg-disabled-subtle: var(--cz-color-gray-300);
|
|
75
|
+
--cz-color-fg-white: var(--cz-color-white);
|
|
76
|
+
--cz-color-fg-brand: var(--cz-color-brand-600);
|
|
77
|
+
--cz-color-fg-brand-secondary: var(--cz-color-brand-500);
|
|
78
|
+
--cz-color-fg-error: var(--cz-color-error-600);
|
|
79
|
+
--cz-color-fg-error-secondary: var(--cz-color-error-500);
|
|
80
|
+
--cz-color-fg-warning: var(--cz-color-warning-600);
|
|
81
|
+
--cz-color-fg-warning-secondary: var(--cz-color-warning-500);
|
|
82
|
+
--cz-color-fg-success: var(--cz-color-success-600);
|
|
83
|
+
--cz-color-fg-success-secondary: var(--cz-color-success-500);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Dark mode - both selectors for backward compatibility */
|
|
87
|
+
:root.dark-mode,
|
|
88
|
+
:root[data-theme='dark'] {
|
|
89
|
+
/* Invert alpha colors */
|
|
90
|
+
--cz-color-alpha-white: rgb(12 14 18);
|
|
91
|
+
--cz-color-alpha-black: rgb(255 255 255);
|
|
92
|
+
|
|
93
|
+
/* Text colors */
|
|
94
|
+
--cz-color-text-primary: var(--cz-color-gray-50);
|
|
95
|
+
--cz-color-text-secondary: var(--cz-color-gray-300);
|
|
96
|
+
--cz-color-text-secondary-hover: var(--cz-color-gray-200);
|
|
97
|
+
--cz-color-text-tertiary: var(--cz-color-gray-400);
|
|
98
|
+
--cz-color-text-tertiary-hover: var(--cz-color-gray-300);
|
|
99
|
+
--cz-color-text-quaternary: var(--cz-color-gray-400);
|
|
100
|
+
--cz-color-text-disabled: var(--cz-color-gray-500);
|
|
101
|
+
--cz-color-text-placeholder: var(--cz-color-gray-500);
|
|
102
|
+
--cz-color-text-placeholder-subtle: var(--cz-color-gray-700);
|
|
103
|
+
--cz-color-text-error: var(--cz-color-error-400);
|
|
104
|
+
--cz-color-text-error-hover: var(--cz-color-error-300);
|
|
105
|
+
--cz-color-text-warning: var(--cz-color-warning-400);
|
|
106
|
+
--cz-color-text-success: var(--cz-color-success-400);
|
|
107
|
+
--cz-color-text-brand: var(--cz-color-brand-400);
|
|
108
|
+
--cz-color-text-brand-hover: var(--cz-color-brand-300);
|
|
109
|
+
--cz-color-text-on-brand: var(--cz-color-gray-50);
|
|
110
|
+
--cz-color-text-on-brand-secondary: var(--cz-color-gray-300);
|
|
111
|
+
|
|
112
|
+
/* Background colors */
|
|
113
|
+
--cz-color-bg-primary: var(--cz-color-gray-950);
|
|
114
|
+
--cz-color-bg-primary-hover: var(--cz-color-gray-800);
|
|
115
|
+
--cz-color-bg-primary-solid: var(--cz-color-gray-900);
|
|
116
|
+
--cz-color-bg-secondary: var(--cz-color-gray-900);
|
|
117
|
+
--cz-color-bg-secondary-hover: var(--cz-color-gray-800);
|
|
118
|
+
--cz-color-bg-secondary-subtle: var(--cz-color-gray-900);
|
|
119
|
+
--cz-color-bg-tertiary: var(--cz-color-gray-800);
|
|
120
|
+
--cz-color-bg-quaternary: var(--cz-color-gray-700);
|
|
121
|
+
--cz-color-bg-disabled: var(--cz-color-gray-800);
|
|
122
|
+
--cz-color-bg-disabled-subtle: var(--cz-color-gray-900);
|
|
123
|
+
--cz-color-bg-overlay: var(--cz-color-gray-800);
|
|
124
|
+
--cz-color-bg-brand: var(--cz-color-brand-500);
|
|
125
|
+
--cz-color-bg-brand-secondary: var(--cz-color-brand-600);
|
|
126
|
+
--cz-color-bg-brand-solid: var(--cz-color-brand-600);
|
|
127
|
+
--cz-color-bg-brand-solid-hover: var(--cz-color-brand-500);
|
|
128
|
+
--cz-color-bg-brand-section: var(--cz-color-gray-900);
|
|
129
|
+
--cz-color-bg-error: var(--cz-color-error-950);
|
|
130
|
+
--cz-color-bg-error-secondary: var(--cz-color-error-600);
|
|
131
|
+
--cz-color-bg-error-solid: var(--cz-color-error-600);
|
|
132
|
+
--cz-color-bg-error-solid-hover: var(--cz-color-error-500);
|
|
133
|
+
--cz-color-bg-warning: var(--cz-color-warning-950);
|
|
134
|
+
--cz-color-bg-warning-secondary: var(--cz-color-warning-600);
|
|
135
|
+
--cz-color-bg-warning-solid: var(--cz-color-warning-600);
|
|
136
|
+
--cz-color-bg-success: var(--cz-color-success-950);
|
|
137
|
+
--cz-color-bg-success-secondary: var(--cz-color-success-600);
|
|
138
|
+
--cz-color-bg-success-solid: var(--cz-color-success-600);
|
|
139
|
+
|
|
140
|
+
/* Border colors */
|
|
141
|
+
--cz-color-border-primary: var(--cz-color-gray-700);
|
|
142
|
+
--cz-color-border-secondary: var(--cz-color-gray-800);
|
|
143
|
+
--cz-color-border-tertiary: var(--cz-color-gray-800);
|
|
144
|
+
--cz-color-border-disabled: var(--cz-color-gray-700);
|
|
145
|
+
--cz-color-border-disabled-subtle: var(--cz-color-gray-800);
|
|
146
|
+
--cz-color-border-error: var(--cz-color-error-400);
|
|
147
|
+
--cz-color-border-error-subtle: var(--cz-color-error-500);
|
|
148
|
+
--cz-color-border-brand: var(--cz-color-brand-400);
|
|
149
|
+
--cz-color-border-brand-alt: var(--cz-color-gray-700);
|
|
150
|
+
|
|
151
|
+
/* Foreground colors */
|
|
152
|
+
--cz-color-fg-primary: var(--cz-color-white);
|
|
153
|
+
--cz-color-fg-secondary: var(--cz-color-gray-300);
|
|
154
|
+
--cz-color-fg-secondary-hover: var(--cz-color-gray-200);
|
|
155
|
+
--cz-color-fg-tertiary: var(--cz-color-gray-400);
|
|
156
|
+
--cz-color-fg-tertiary-hover: var(--cz-color-gray-300);
|
|
157
|
+
--cz-color-fg-quaternary: var(--cz-color-gray-600);
|
|
158
|
+
--cz-color-fg-quaternary-hover: var(--cz-color-gray-500);
|
|
159
|
+
--cz-color-fg-disabled: var(--cz-color-gray-500);
|
|
160
|
+
--cz-color-fg-disabled-subtle: var(--cz-color-gray-600);
|
|
161
|
+
--cz-color-fg-white: var(--cz-color-white);
|
|
162
|
+
--cz-color-fg-brand: var(--cz-color-brand-500);
|
|
163
|
+
--cz-color-fg-brand-secondary: var(--cz-color-brand-500);
|
|
164
|
+
--cz-color-fg-error: var(--cz-color-error-500);
|
|
165
|
+
--cz-color-fg-error-secondary: var(--cz-color-error-400);
|
|
166
|
+
--cz-color-fg-warning: var(--cz-color-warning-500);
|
|
167
|
+
--cz-color-fg-warning-secondary: var(--cz-color-warning-400);
|
|
168
|
+
--cz-color-fg-success: var(--cz-color-success-500);
|
|
169
|
+
--cz-color-fg-success-secondary: var(--cz-color-success-400);
|
|
170
|
+
|
|
171
|
+
/* Focus ring adjustments for dark mode */
|
|
172
|
+
--cz-focus-ring: 0 0 0 4px var(--cz-color-brand-800);
|
|
173
|
+
--cz-focus-ring-error: 0 0 0 4px var(--cz-color-error-800);
|
|
174
|
+
}
|
package/src/shadows.css
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cosmoz Design Tokens - Shadows
|
|
3
|
+
* Shadow tokens from Untitled UI
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* Shadow scale */
|
|
8
|
+
--cz-shadow-xs: 0px 1px 2px rgba(10, 13, 18, 0.05);
|
|
9
|
+
--cz-shadow-sm:
|
|
10
|
+
0px 1px 3px rgba(10, 13, 18, 0.1), 0px 1px 2px -1px rgba(10, 13, 18, 0.1);
|
|
11
|
+
--cz-shadow-md:
|
|
12
|
+
0px 4px 6px -1px rgba(10, 13, 18, 0.1),
|
|
13
|
+
0px 2px 4px -2px rgba(10, 13, 18, 0.06);
|
|
14
|
+
--cz-shadow-lg:
|
|
15
|
+
0px 12px 16px -4px rgba(10, 13, 18, 0.08),
|
|
16
|
+
0px 4px 6px -2px rgba(10, 13, 18, 0.03),
|
|
17
|
+
0px 2px 2px -1px rgba(10, 13, 18, 0.04);
|
|
18
|
+
--cz-shadow-xl:
|
|
19
|
+
0px 20px 24px -4px rgba(10, 13, 18, 0.08),
|
|
20
|
+
0px 8px 8px -4px rgba(10, 13, 18, 0.03),
|
|
21
|
+
0px 3px 3px -1.5px rgba(10, 13, 18, 0.04);
|
|
22
|
+
--cz-shadow-2xl:
|
|
23
|
+
0px 24px 48px -12px rgba(10, 13, 18, 0.18),
|
|
24
|
+
0px 4px 4px -2px rgba(10, 13, 18, 0.04);
|
|
25
|
+
--cz-shadow-3xl:
|
|
26
|
+
0px 32px 64px -12px rgba(10, 13, 18, 0.14),
|
|
27
|
+
0px 5px 5px -2.5px rgba(10, 13, 18, 0.04);
|
|
28
|
+
|
|
29
|
+
/* Skeumorphic shadows (for buttons) */
|
|
30
|
+
--cz-shadow-skeumorphic:
|
|
31
|
+
0px 0px 0px 1px rgba(10, 13, 18, 0.18) inset,
|
|
32
|
+
0px -2px 0px 0px rgba(10, 13, 18, 0.05) inset;
|
|
33
|
+
--cz-shadow-xs-skeumorphic: var(--cz-shadow-skeumorphic), var(--cz-shadow-xs);
|
|
34
|
+
|
|
35
|
+
/* Focus ring shadows */
|
|
36
|
+
--cz-focus-ring: 0 0 0 4px var(--cz-color-brand-100);
|
|
37
|
+
--cz-focus-ring-error: 0 0 0 4px var(--cz-color-error-100);
|
|
38
|
+
}
|
package/src/spacing.css
ADDED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cosmoz Design Tokens - Spacing
|
|
3
|
+
* Border radius and spacing scale from Untitled UI
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* Base spacing unit */
|
|
8
|
+
--cz-spacing: 4px;
|
|
9
|
+
|
|
10
|
+
/* Border radius scale */
|
|
11
|
+
--cz-radius-none: 0px;
|
|
12
|
+
--cz-radius-xxs: 2px;
|
|
13
|
+
--cz-radius-xs: 4px;
|
|
14
|
+
--cz-radius-sm: 6px;
|
|
15
|
+
--cz-radius-md: 8px;
|
|
16
|
+
--cz-radius-lg: 10px;
|
|
17
|
+
--cz-radius-xl: 12px;
|
|
18
|
+
--cz-radius-2xl: 16px;
|
|
19
|
+
--cz-radius-3xl: 20px;
|
|
20
|
+
--cz-radius-4xl: 24px;
|
|
21
|
+
--cz-radius-full: 9999px;
|
|
22
|
+
}
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Cosmoz Design Tokens - Typography
|
|
3
|
+
* Font families, sizes, and line heights from Untitled UI
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
:root {
|
|
7
|
+
/* Font families */
|
|
8
|
+
--cz-font-body:
|
|
9
|
+
var(--font-inter, 'Inter'), -apple-system, 'Segoe UI', Roboto, Arial,
|
|
10
|
+
sans-serif;
|
|
11
|
+
--cz-font-display:
|
|
12
|
+
'DM Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
|
|
13
|
+
--cz-font-mono:
|
|
14
|
+
ui-monospace, 'Roboto Mono', SFMono-Regular, Menlo, Monaco, Consolas,
|
|
15
|
+
'Liberation Mono', 'Courier New', monospace;
|
|
16
|
+
|
|
17
|
+
/* Text sizes - based on 4px spacing unit */
|
|
18
|
+
--cz-text-xs: 12px;
|
|
19
|
+
--cz-text-xs-line-height: 18px;
|
|
20
|
+
|
|
21
|
+
--cz-text-sm: 14px;
|
|
22
|
+
--cz-text-sm-line-height: 20px;
|
|
23
|
+
|
|
24
|
+
--cz-text-md: 16px;
|
|
25
|
+
--cz-text-md-line-height: 24px;
|
|
26
|
+
|
|
27
|
+
--cz-text-lg: 18px;
|
|
28
|
+
--cz-text-lg-line-height: 28px;
|
|
29
|
+
|
|
30
|
+
--cz-text-xl: 20px;
|
|
31
|
+
--cz-text-xl-line-height: 30px;
|
|
32
|
+
|
|
33
|
+
/* Display sizes */
|
|
34
|
+
--cz-text-display-xs: 24px;
|
|
35
|
+
--cz-text-display-xs-line-height: 32px;
|
|
36
|
+
|
|
37
|
+
--cz-text-display-sm: 30px;
|
|
38
|
+
--cz-text-display-sm-line-height: 38px;
|
|
39
|
+
|
|
40
|
+
--cz-text-display-md: 36px;
|
|
41
|
+
--cz-text-display-md-line-height: 44px;
|
|
42
|
+
--cz-text-display-md-letter-spacing: -0.72px;
|
|
43
|
+
|
|
44
|
+
--cz-text-display-lg: 48px;
|
|
45
|
+
--cz-text-display-lg-line-height: 60px;
|
|
46
|
+
--cz-text-display-lg-letter-spacing: -0.96px;
|
|
47
|
+
|
|
48
|
+
--cz-text-display-xl: 60px;
|
|
49
|
+
--cz-text-display-xl-line-height: 72px;
|
|
50
|
+
--cz-text-display-xl-letter-spacing: -1.2px;
|
|
51
|
+
|
|
52
|
+
--cz-text-display-2xl: 72px;
|
|
53
|
+
--cz-text-display-2xl-line-height: 90px;
|
|
54
|
+
--cz-text-display-2xl-letter-spacing: -1.44px;
|
|
55
|
+
|
|
56
|
+
/* Font weights */
|
|
57
|
+
--cz-font-weight-regular: 400;
|
|
58
|
+
--cz-font-weight-medium: 500;
|
|
59
|
+
--cz-font-weight-semibold: 600;
|
|
60
|
+
--cz-font-weight-bold: 700;
|
|
61
|
+
}
|