@sola-air-ui/tokens 1.0.1 → 1.0.2
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 +39 -0
- package/package.json +22 -22
package/README.md
ADDED
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# @sola-air-ui/tokens
|
|
2
|
+
|
|
3
|
+
Design tokens for [Sola AIR](https://sola-air.dev) — spacing, radius, type scale, color, and semantic palette values, shared across `@sola-air-ui/ui` components so everything renders from one consistent system instead of hardcoded values scattered per component.
|
|
4
|
+
|
|
5
|
+
## Install
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @sola-air-ui/tokens
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
**As CSS custom properties** (drop into any stylesheet or `.sola` component):
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
@import '@sola-air-ui/tokens/css';
|
|
17
|
+
|
|
18
|
+
.my-panel {
|
|
19
|
+
padding: var(--sola-space-lg);
|
|
20
|
+
border-radius: var(--sola-radius-lg);
|
|
21
|
+
color: var(--sola-text-primary);
|
|
22
|
+
}
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
**As JS values** (for computed styles, chart theming, etc.):
|
|
26
|
+
|
|
27
|
+
```js
|
|
28
|
+
import tokens from '@sola-air-ui/tokens';
|
|
29
|
+
|
|
30
|
+
console.log(tokens.space.lg, tokens.radius.lg, tokens.color.primary);
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Scoping note for widget/iframe environments
|
|
34
|
+
|
|
35
|
+
If you're embedding Sola output inside something that auto-scopes CSS to a container (e.g. a CMS widget sandbox), point the token stylesheet's root selector at your actual mount element rather than `:root` — a scoped `:root` selector matches nothing, since `:root` always resolves to `<html>` regardless of nesting.
|
|
36
|
+
|
|
37
|
+
## License
|
|
38
|
+
|
|
39
|
+
MIT — see the [repo root](https://github.com/rbm3267/sola-air) for the full license and [changelog](https://github.com/rbm3267/sola-air/blob/main/CHANGELOG.md).
|
package/package.json
CHANGED
|
@@ -1,22 +1,22 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@sola-air-ui/tokens",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Design tokens for Sola AIR — spacing, radius, type scale, color, and semantic palette",
|
|
5
|
-
"type": "module",
|
|
6
|
-
"main": "./src/index.js",
|
|
7
|
-
"exports": {
|
|
8
|
-
".": "./src/index.js",
|
|
9
|
-
"./css": "./src/tokens.css"
|
|
10
|
-
},
|
|
11
|
-
"keywords": ["sola", "design-tokens", "css-variables", "design-system", "tokens"],
|
|
12
|
-
"license": "MIT",
|
|
13
|
-
"homepage": "https://sola-air.dev",
|
|
14
|
-
"repository": {
|
|
15
|
-
"type": "git",
|
|
16
|
-
"url": "https://github.com/rbm3267/sola-air"
|
|
17
|
-
},
|
|
18
|
-
"publishConfig": {
|
|
19
|
-
"access": "public",
|
|
20
|
-
"registry": "https://registry.npmjs.org/"
|
|
21
|
-
}
|
|
22
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@sola-air-ui/tokens",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "Design tokens for Sola AIR — spacing, radius, type scale, color, and semantic palette",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./src/index.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": "./src/index.js",
|
|
9
|
+
"./css": "./src/tokens.css"
|
|
10
|
+
},
|
|
11
|
+
"keywords": ["sola", "design-tokens", "css-variables", "design-system", "tokens"],
|
|
12
|
+
"license": "MIT",
|
|
13
|
+
"homepage": "https://sola-air.dev",
|
|
14
|
+
"repository": {
|
|
15
|
+
"type": "git",
|
|
16
|
+
"url": "https://github.com/rbm3267/sola-air"
|
|
17
|
+
},
|
|
18
|
+
"publishConfig": {
|
|
19
|
+
"access": "public",
|
|
20
|
+
"registry": "https://registry.npmjs.org/"
|
|
21
|
+
}
|
|
22
|
+
}
|