@tekton-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/README.md +43 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +2 -0
- package/dist/index.js.map +1 -0
- package/dist/motion.d.ts +20 -0
- package/dist/motion.d.ts.map +1 -0
- package/dist/motion.js +2 -0
- package/dist/motion.js.map +1 -0
- package/dist/types.d.ts +135 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/package.json +56 -0
package/README.md
ADDED
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
# @tekton/tokens
|
|
2
|
+
|
|
3
|
+
TypeScript token type definitions for Tekton Design System with compile-time enforcement.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
Provides TypeScript interfaces for design tokens that enforce CSS variable references at compile time.
|
|
8
|
+
|
|
9
|
+
## Installation
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
pnpm add @tekton/tokens
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Usage
|
|
16
|
+
|
|
17
|
+
```typescript
|
|
18
|
+
import type { TektonTokens, TokenReference } from '@tekton/tokens';
|
|
19
|
+
|
|
20
|
+
// TokenReference ensures only CSS variables are allowed
|
|
21
|
+
const background: TokenReference = 'var(--tekton-bg-surface-default)';
|
|
22
|
+
|
|
23
|
+
// TypeScript error: Type '"#ffffff"' is not assignable to type 'TokenReference'
|
|
24
|
+
// const invalid: TokenReference = '#ffffff';
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
## Token Categories
|
|
28
|
+
|
|
29
|
+
- **BgTokens**: Background colors (surface, primary, secondary, etc.)
|
|
30
|
+
- **FgTokens**: Foreground/text colors
|
|
31
|
+
- **SpacingTokens**: Spacing scale (0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24)
|
|
32
|
+
- **RadiusTokens**: Border radius (none, sm, md, lg, xl, full)
|
|
33
|
+
- **TypographyTokens**: Font families, sizes, weights, line heights
|
|
34
|
+
- **ShadowTokens**: Box shadows (none, sm, md, lg, xl)
|
|
35
|
+
|
|
36
|
+
## SPEC Reference
|
|
37
|
+
|
|
38
|
+
- [SPEC-STYLED-001](/.moai/specs/SPEC-STYLED-001/spec.md)
|
|
39
|
+
- TAG-002: Token Type Definitions
|
|
40
|
+
|
|
41
|
+
## License
|
|
42
|
+
|
|
43
|
+
MIT
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAMA,YAAY,EACV,cAAc,EACd,QAAQ,EACR,QAAQ,EACR,aAAa,EACb,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,oBAAoB,EACpB,kBAAkB,EAClB,YAAY,EACZ,YAAY,GACb,MAAM,YAAY,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}
|
package/dist/motion.d.ts
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import type { TokenReference } from './types.js';
|
|
2
|
+
export interface MotionDurationTokens {
|
|
3
|
+
instant: TokenReference;
|
|
4
|
+
fast: TokenReference;
|
|
5
|
+
moderate: TokenReference;
|
|
6
|
+
slow: TokenReference;
|
|
7
|
+
complex: TokenReference;
|
|
8
|
+
}
|
|
9
|
+
export interface MotionEasingTokens {
|
|
10
|
+
linear: TokenReference;
|
|
11
|
+
standard: TokenReference;
|
|
12
|
+
emphasized: TokenReference;
|
|
13
|
+
decelerate: TokenReference;
|
|
14
|
+
accelerate: TokenReference;
|
|
15
|
+
}
|
|
16
|
+
export interface MotionTokens {
|
|
17
|
+
duration: MotionDurationTokens;
|
|
18
|
+
easing: MotionEasingTokens;
|
|
19
|
+
}
|
|
20
|
+
//# sourceMappingURL=motion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../src/motion.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAMjD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,cAAc,CAAC;IACxB,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,EAAE,cAAc,CAAC;IACzB,IAAI,EAAE,cAAc,CAAC;IACrB,OAAO,EAAE,cAAc,CAAC;CACzB;AAMD,MAAM,WAAW,kBAAkB;IACjC,MAAM,EAAE,cAAc,CAAC;IACvB,QAAQ,EAAE,cAAc,CAAC;IACzB,UAAU,EAAE,cAAc,CAAC;IAC3B,UAAU,EAAE,cAAc,CAAC;IAC3B,UAAU,EAAE,cAAc,CAAC;CAC5B;AAMD,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,oBAAoB,CAAC;IAC/B,MAAM,EAAE,kBAAkB,CAAC;CAC5B"}
|
package/dist/motion.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"motion.js","sourceRoot":"","sources":["../src/motion.ts"],"names":[],"mappings":""}
|
package/dist/types.d.ts
ADDED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
export type TokenReference = `var(--tekton-${string})`;
|
|
2
|
+
export interface BgTokens {
|
|
3
|
+
surface: {
|
|
4
|
+
default: TokenReference;
|
|
5
|
+
elevated: TokenReference;
|
|
6
|
+
sunken: TokenReference;
|
|
7
|
+
};
|
|
8
|
+
primary: {
|
|
9
|
+
default: TokenReference;
|
|
10
|
+
hover: TokenReference;
|
|
11
|
+
active: TokenReference;
|
|
12
|
+
};
|
|
13
|
+
secondary: {
|
|
14
|
+
default: TokenReference;
|
|
15
|
+
hover: TokenReference;
|
|
16
|
+
active: TokenReference;
|
|
17
|
+
};
|
|
18
|
+
accent: {
|
|
19
|
+
default: TokenReference;
|
|
20
|
+
hover: TokenReference;
|
|
21
|
+
active: TokenReference;
|
|
22
|
+
};
|
|
23
|
+
destructive: {
|
|
24
|
+
default: TokenReference;
|
|
25
|
+
hover: TokenReference;
|
|
26
|
+
active: TokenReference;
|
|
27
|
+
};
|
|
28
|
+
ghost: {
|
|
29
|
+
default: TokenReference;
|
|
30
|
+
hover: TokenReference;
|
|
31
|
+
active: TokenReference;
|
|
32
|
+
};
|
|
33
|
+
outline: {
|
|
34
|
+
default: TokenReference;
|
|
35
|
+
hover: TokenReference;
|
|
36
|
+
active: TokenReference;
|
|
37
|
+
};
|
|
38
|
+
}
|
|
39
|
+
export interface FgTokens {
|
|
40
|
+
primary: TokenReference;
|
|
41
|
+
secondary: TokenReference;
|
|
42
|
+
muted: TokenReference;
|
|
43
|
+
inverse: TokenReference;
|
|
44
|
+
link: TokenReference;
|
|
45
|
+
error: TokenReference;
|
|
46
|
+
success: TokenReference;
|
|
47
|
+
warning: TokenReference;
|
|
48
|
+
info: TokenReference;
|
|
49
|
+
}
|
|
50
|
+
export interface SpacingTokens {
|
|
51
|
+
[key: number]: TokenReference;
|
|
52
|
+
0: TokenReference;
|
|
53
|
+
1: TokenReference;
|
|
54
|
+
2: TokenReference;
|
|
55
|
+
3: TokenReference;
|
|
56
|
+
4: TokenReference;
|
|
57
|
+
5: TokenReference;
|
|
58
|
+
6: TokenReference;
|
|
59
|
+
8: TokenReference;
|
|
60
|
+
10: TokenReference;
|
|
61
|
+
12: TokenReference;
|
|
62
|
+
16: TokenReference;
|
|
63
|
+
20: TokenReference;
|
|
64
|
+
24: TokenReference;
|
|
65
|
+
}
|
|
66
|
+
export interface RadiusTokens {
|
|
67
|
+
none: TokenReference;
|
|
68
|
+
sm: TokenReference;
|
|
69
|
+
md: TokenReference;
|
|
70
|
+
lg: TokenReference;
|
|
71
|
+
xl: TokenReference;
|
|
72
|
+
full: TokenReference;
|
|
73
|
+
}
|
|
74
|
+
export interface TypographyTokens {
|
|
75
|
+
fontFamily: {
|
|
76
|
+
sans: TokenReference;
|
|
77
|
+
mono: TokenReference;
|
|
78
|
+
};
|
|
79
|
+
fontSize: {
|
|
80
|
+
xs: TokenReference;
|
|
81
|
+
sm: TokenReference;
|
|
82
|
+
base: TokenReference;
|
|
83
|
+
lg: TokenReference;
|
|
84
|
+
xl: TokenReference;
|
|
85
|
+
'2xl': TokenReference;
|
|
86
|
+
'3xl': TokenReference;
|
|
87
|
+
'4xl': TokenReference;
|
|
88
|
+
};
|
|
89
|
+
fontWeight: {
|
|
90
|
+
normal: TokenReference;
|
|
91
|
+
medium: TokenReference;
|
|
92
|
+
semibold: TokenReference;
|
|
93
|
+
bold: TokenReference;
|
|
94
|
+
};
|
|
95
|
+
lineHeight: {
|
|
96
|
+
tight: TokenReference;
|
|
97
|
+
normal: TokenReference;
|
|
98
|
+
relaxed: TokenReference;
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
export interface ShadowTokens {
|
|
102
|
+
none: TokenReference;
|
|
103
|
+
sm: TokenReference;
|
|
104
|
+
md: TokenReference;
|
|
105
|
+
lg: TokenReference;
|
|
106
|
+
xl: TokenReference;
|
|
107
|
+
}
|
|
108
|
+
export interface MotionDurationTokens {
|
|
109
|
+
instant: TokenReference;
|
|
110
|
+
fast: TokenReference;
|
|
111
|
+
moderate: TokenReference;
|
|
112
|
+
slow: TokenReference;
|
|
113
|
+
complex: TokenReference;
|
|
114
|
+
}
|
|
115
|
+
export interface MotionEasingTokens {
|
|
116
|
+
linear: TokenReference;
|
|
117
|
+
standard: TokenReference;
|
|
118
|
+
emphasized: TokenReference;
|
|
119
|
+
decelerate: TokenReference;
|
|
120
|
+
accelerate: TokenReference;
|
|
121
|
+
}
|
|
122
|
+
export interface MotionTokens {
|
|
123
|
+
duration: MotionDurationTokens;
|
|
124
|
+
easing: MotionEasingTokens;
|
|
125
|
+
}
|
|
126
|
+
export interface TektonTokens {
|
|
127
|
+
bg: BgTokens;
|
|
128
|
+
fg: FgTokens;
|
|
129
|
+
spacing: SpacingTokens;
|
|
130
|
+
radius: RadiusTokens;
|
|
131
|
+
typography: TypographyTokens;
|
|
132
|
+
shadow: ShadowTokens;
|
|
133
|
+
motion: MotionTokens;
|
|
134
|
+
}
|
|
135
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
|
package/dist/types.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
|
package/package.json
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@tekton-ui/tokens",
|
|
3
|
+
"version": "0.2.0",
|
|
4
|
+
"description": "TypeScript token type definitions with compile-time enforcement",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"types": "./dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": "./dist/index.js",
|
|
11
|
+
"types": "./dist/index.d.ts"
|
|
12
|
+
}
|
|
13
|
+
},
|
|
14
|
+
"files": [
|
|
15
|
+
"dist",
|
|
16
|
+
"README.md",
|
|
17
|
+
"package.json"
|
|
18
|
+
],
|
|
19
|
+
"publishConfig": {
|
|
20
|
+
"access": "public",
|
|
21
|
+
"registry": "https://registry.npmjs.org/"
|
|
22
|
+
},
|
|
23
|
+
"repository": {
|
|
24
|
+
"type": "git",
|
|
25
|
+
"url": "https://github.com/soo-kate-yeon/tekton",
|
|
26
|
+
"directory": "packages/tokens"
|
|
27
|
+
},
|
|
28
|
+
"scripts": {
|
|
29
|
+
"build": "tsc",
|
|
30
|
+
"test": "vitest run",
|
|
31
|
+
"test:watch": "vitest",
|
|
32
|
+
"test:coverage": "vitest run --coverage",
|
|
33
|
+
"lint": "eslint src __tests__ --ext .ts",
|
|
34
|
+
"prepublishOnly": "pnpm build"
|
|
35
|
+
},
|
|
36
|
+
"dependencies": {},
|
|
37
|
+
"devDependencies": {
|
|
38
|
+
"@types/node": "^22.10.5",
|
|
39
|
+
"@typescript-eslint/eslint-plugin": "^8.20.0",
|
|
40
|
+
"@typescript-eslint/parser": "^8.20.0",
|
|
41
|
+
"@vitest/coverage-v8": "^2.1.8",
|
|
42
|
+
"eslint": "^9.18.0",
|
|
43
|
+
"typescript": "^5.7.3",
|
|
44
|
+
"vitest": "^2.1.8"
|
|
45
|
+
},
|
|
46
|
+
"engines": {
|
|
47
|
+
"node": ">=20.0.0"
|
|
48
|
+
},
|
|
49
|
+
"license": "MIT",
|
|
50
|
+
"keywords": [
|
|
51
|
+
"design-tokens",
|
|
52
|
+
"typescript",
|
|
53
|
+
"type-safety",
|
|
54
|
+
"design-system"
|
|
55
|
+
]
|
|
56
|
+
}
|