@kungal/ui-tokens 0.2.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/LICENSE +661 -0
- package/README.md +56 -0
- package/package.json +47 -0
- package/src/base.css +77 -0
- package/src/index.css +15 -0
- package/src/tokens.css +554 -0
package/README.md
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
# @kungal/ui-tokens
|
|
2
|
+
|
|
3
|
+
KunUI's design tokens as **pure, framework-agnostic CSS**. This is the
|
|
4
|
+
single source of truth for the visual language — semantic color scales
|
|
5
|
+
(7 colors × 50–950 + light/dark), the 5-bucket radius system, the
|
|
6
|
+
z-index layering, and animation keyframes — expressed as Tailwind v4
|
|
7
|
+
`@theme` declarations and CSS custom properties.
|
|
8
|
+
|
|
9
|
+
No JavaScript. No framework. Consumable identically by Vue, React, or
|
|
10
|
+
plain HTML.
|
|
11
|
+
|
|
12
|
+
## Install
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
pnpm add @kungal/ui-tokens tailwindcss
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
Import **after** Tailwind in your app's entry stylesheet, then point
|
|
21
|
+
Tailwind's scanner at whichever KunUI render layer you use:
|
|
22
|
+
|
|
23
|
+
```css
|
|
24
|
+
@import 'tailwindcss';
|
|
25
|
+
@import '@kungal/ui-tokens'; /* tokens + opinionated base */
|
|
26
|
+
@source '../node_modules/@kungal/ui-vue'; /* or @kungal/ui-react */
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
### Entry points
|
|
30
|
+
|
|
31
|
+
| Import | Contents |
|
|
32
|
+
| --- | --- |
|
|
33
|
+
| `@kungal/ui-tokens` / `@kungal/ui-tokens/index.css` | tokens **+** base layer (resets, page bg, scrollbar/font) |
|
|
34
|
+
| `@kungal/ui-tokens/css` | tokens **only** (`@theme`, colors, radius, z-index, animations) |
|
|
35
|
+
| `@kungal/ui-tokens/base.css` | opinionated base layer only |
|
|
36
|
+
|
|
37
|
+
Use `@kungal/ui-tokens/css` when the host app wants the design tokens but owns
|
|
38
|
+
its own global element styling.
|
|
39
|
+
|
|
40
|
+
## Dark mode
|
|
41
|
+
|
|
42
|
+
Dark values live under `.kun-dark-mode`. Toggle by adding/removing that
|
|
43
|
+
class on a root element (`<html class="kun-dark-mode">`). The Tailwind
|
|
44
|
+
`dark:` variant is wired to it via `@custom-variant dark`.
|
|
45
|
+
|
|
46
|
+
## Overriding
|
|
47
|
+
|
|
48
|
+
Any token is a CSS variable — override in your app's `:root`:
|
|
49
|
+
|
|
50
|
+
```css
|
|
51
|
+
:root {
|
|
52
|
+
--primary-500: 280, 90%, 55%; /* rebrand primary */
|
|
53
|
+
--radius-kun-md: 0.375rem; /* tighter default radius */
|
|
54
|
+
--z-kun-modal: 1200; /* coexist with a third-party widget */
|
|
55
|
+
}
|
|
56
|
+
```
|
package/package.json
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@kungal/ui-tokens",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "KunUI design tokens — framework-agnostic Tailwind v4 theme (semantic colors, radius, z-index, animations).",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"keywords": [
|
|
7
|
+
"kungal",
|
|
8
|
+
"kun-ui",
|
|
9
|
+
"design-tokens",
|
|
10
|
+
"tailwindcss",
|
|
11
|
+
"tailwind",
|
|
12
|
+
"theme",
|
|
13
|
+
"css-variables"
|
|
14
|
+
],
|
|
15
|
+
"license": "AGPL-3.0-only",
|
|
16
|
+
"repository": {
|
|
17
|
+
"type": "git",
|
|
18
|
+
"url": "git+https://github.com/kungal/kun-ui.git",
|
|
19
|
+
"directory": "packages/ui-tokens"
|
|
20
|
+
},
|
|
21
|
+
"homepage": "https://github.com/kungal/kun-ui#readme",
|
|
22
|
+
"bugs": "https://github.com/kungal/kun-ui/issues",
|
|
23
|
+
"publishConfig": {
|
|
24
|
+
"access": "public"
|
|
25
|
+
},
|
|
26
|
+
"sideEffects": [
|
|
27
|
+
"*.css"
|
|
28
|
+
],
|
|
29
|
+
"files": [
|
|
30
|
+
"src"
|
|
31
|
+
],
|
|
32
|
+
"exports": {
|
|
33
|
+
".": "./src/index.css",
|
|
34
|
+
"./css": "./src/tokens.css",
|
|
35
|
+
"./tokens.css": "./src/tokens.css",
|
|
36
|
+
"./base.css": "./src/base.css",
|
|
37
|
+
"./index.css": "./src/index.css"
|
|
38
|
+
},
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"tailwindcss": "^4.0.0"
|
|
41
|
+
},
|
|
42
|
+
"scripts": {
|
|
43
|
+
"build": "echo \"@kungal/ui-tokens ships CSS source, no build step\"",
|
|
44
|
+
"typecheck": "echo \"@kungal/ui-tokens has no TypeScript\"",
|
|
45
|
+
"clean": "echo \"@kungal/ui-tokens has nothing to clean\""
|
|
46
|
+
}
|
|
47
|
+
}
|
package/src/base.css
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @kungal/ui-tokens/base — opinionated base layer (OPTIONAL).
|
|
3
|
+
*
|
|
4
|
+
* Global resets + page background + scrollbar/font helpers that KunUI
|
|
5
|
+
* apps generally want. Kept separate from tokens.css so a host app that
|
|
6
|
+
* only wants the design tokens (colors/radius/z/animations) can import
|
|
7
|
+
* `@kungal/ui-tokens/css` alone and NOT have its global element styles touched.
|
|
8
|
+
*
|
|
9
|
+
* Import after tokens.css if you want it:
|
|
10
|
+
* @import '@kungal/ui-tokens/css';
|
|
11
|
+
* @import '@kungal/ui-tokens/base.css';
|
|
12
|
+
*/
|
|
13
|
+
|
|
14
|
+
@layer base {
|
|
15
|
+
*,
|
|
16
|
+
::after,
|
|
17
|
+
::before,
|
|
18
|
+
::backdrop,
|
|
19
|
+
::file-selector-button {
|
|
20
|
+
border-color: var(--color-default-200, currentColor);
|
|
21
|
+
color: var(--color-foreground);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
span {
|
|
25
|
+
color: inherit;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
*:focus {
|
|
29
|
+
outline: none;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Root container needs a SOLID background. Otherwise dark mode only
|
|
33
|
+
* swaps the CSS variables and `bg-background` (hsla at
|
|
34
|
+
* --kun-global-opacity = 0.7) composites over unpainted browser-default
|
|
35
|
+
* white → muddy gray instead of black. Solid hsl() (not hsla) since
|
|
36
|
+
* nothing sits behind the root. */
|
|
37
|
+
html,
|
|
38
|
+
body {
|
|
39
|
+
background-color: hsl(var(--background));
|
|
40
|
+
color: hsl(var(--foreground));
|
|
41
|
+
min-height: 100vh;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
@layer utilities {
|
|
46
|
+
body {
|
|
47
|
+
font-family:
|
|
48
|
+
-apple-system,
|
|
49
|
+
BlinkMacSystemFont,
|
|
50
|
+
Helvetica Neue,
|
|
51
|
+
Helvetica,
|
|
52
|
+
Arial,
|
|
53
|
+
PingFang SC,
|
|
54
|
+
Hiragino Sans GB,
|
|
55
|
+
Microsoft YaHei,
|
|
56
|
+
sans-serif !important;
|
|
57
|
+
text-autospace: normal;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.scrollbar-hide {
|
|
61
|
+
scrollbar-width: none;
|
|
62
|
+
-ms-overflow-style: none;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.scrollbar-hide::-webkit-scrollbar {
|
|
66
|
+
display: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.scrollbar-visible {
|
|
70
|
+
scrollbar-width: thin;
|
|
71
|
+
-ms-overflow-style: thin;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.scrollbar-visible::-webkit-scrollbar {
|
|
75
|
+
display: block;
|
|
76
|
+
}
|
|
77
|
+
}
|
package/src/index.css
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* @kungal/ui-tokens — convenience entry that pulls in both the design tokens
|
|
3
|
+
* and the opinionated base layer.
|
|
4
|
+
*
|
|
5
|
+
* Note: this does NOT `@import 'tailwindcss'` — the consuming app owns
|
|
6
|
+
* that, and must import Tailwind BEFORE this file:
|
|
7
|
+
*
|
|
8
|
+
* @import 'tailwindcss';
|
|
9
|
+
* @import '@kungal/ui-tokens'; // tokens + base
|
|
10
|
+
*
|
|
11
|
+
* If you want tokens only (no global element resets), import
|
|
12
|
+
* '@kungal/ui-tokens/css' instead.
|
|
13
|
+
*/
|
|
14
|
+
@import './tokens.css';
|
|
15
|
+
@import './base.css';
|