@tokis/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/LICENSE +21 -0
- package/README.md +54 -0
- package/dist/cjs/css/generate-css-vars.js +50 -0
- package/dist/cjs/index.js +32 -0
- package/dist/cjs/package.json +3 -0
- package/dist/cjs/primitives/breakpoints.js +9 -0
- package/dist/cjs/primitives/colors.js +26 -0
- package/dist/cjs/primitives/motion.js +13 -0
- package/dist/cjs/primitives/radius.js +10 -0
- package/dist/cjs/primitives/shadows.js +8 -0
- package/dist/cjs/primitives/spacing.js +10 -0
- package/dist/cjs/primitives/typography.js +18 -0
- package/dist/cjs/primitives/zIndex.js +8 -0
- package/dist/cjs/semantic/border.js +9 -0
- package/dist/cjs/semantic/color.js +16 -0
- package/dist/cjs/semantic/surface.js +8 -0
- package/dist/cjs/semantic/text.js +12 -0
- package/dist/cjs/themes/dark.js +23 -0
- package/dist/cjs/themes/index.js +7 -0
- package/dist/cjs/themes/light.js +10 -0
- package/dist/cjs/types.js +2 -0
- package/dist/css/generate-css-vars.d.ts +2 -0
- package/dist/css/generate-css-vars.d.ts.map +1 -0
- package/dist/css/generate-css-vars.js +48 -0
- package/dist/css/generate-css-vars.js.map +1 -0
- package/dist/css/index.css +30 -0
- package/dist/index.d.ts +17 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +17 -0
- package/dist/index.js.map +1 -0
- package/dist/primitives/breakpoints.d.ts +7 -0
- package/dist/primitives/breakpoints.d.ts.map +1 -0
- package/dist/primitives/breakpoints.js +7 -0
- package/dist/primitives/breakpoints.js.map +1 -0
- package/dist/primitives/colors.d.ts +24 -0
- package/dist/primitives/colors.d.ts.map +1 -0
- package/dist/primitives/colors.js +24 -0
- package/dist/primitives/colors.js.map +1 -0
- package/dist/primitives/motion.d.ts +11 -0
- package/dist/primitives/motion.d.ts.map +1 -0
- package/dist/primitives/motion.js +11 -0
- package/dist/primitives/motion.js.map +1 -0
- package/dist/primitives/radius.d.ts +8 -0
- package/dist/primitives/radius.d.ts.map +1 -0
- package/dist/primitives/radius.js +8 -0
- package/dist/primitives/radius.js.map +1 -0
- package/dist/primitives/shadows.d.ts +6 -0
- package/dist/primitives/shadows.d.ts.map +1 -0
- package/dist/primitives/shadows.js +6 -0
- package/dist/primitives/shadows.js.map +1 -0
- package/dist/primitives/spacing.d.ts +8 -0
- package/dist/primitives/spacing.d.ts.map +1 -0
- package/dist/primitives/spacing.js +8 -0
- package/dist/primitives/spacing.js.map +1 -0
- package/dist/primitives/typography.d.ts +16 -0
- package/dist/primitives/typography.d.ts.map +1 -0
- package/dist/primitives/typography.js +16 -0
- package/dist/primitives/typography.js.map +1 -0
- package/dist/primitives/zIndex.d.ts +6 -0
- package/dist/primitives/zIndex.d.ts.map +1 -0
- package/dist/primitives/zIndex.js +6 -0
- package/dist/primitives/zIndex.js.map +1 -0
- package/dist/semantic/border.d.ts +5 -0
- package/dist/semantic/border.d.ts.map +1 -0
- package/dist/semantic/border.js +7 -0
- package/dist/semantic/border.js.map +1 -0
- package/dist/semantic/color.d.ts +13 -0
- package/dist/semantic/color.d.ts.map +1 -0
- package/dist/semantic/color.js +14 -0
- package/dist/semantic/color.js.map +1 -0
- package/dist/semantic/surface.d.ts +5 -0
- package/dist/semantic/surface.d.ts.map +1 -0
- package/dist/semantic/surface.js +6 -0
- package/dist/semantic/surface.js.map +1 -0
- package/dist/semantic/text.d.ts +8 -0
- package/dist/semantic/text.d.ts.map +1 -0
- package/dist/semantic/text.js +10 -0
- package/dist/semantic/text.js.map +1 -0
- package/dist/themes/dark.d.ts +39 -0
- package/dist/themes/dark.d.ts.map +1 -0
- package/dist/themes/dark.js +21 -0
- package/dist/themes/dark.js.map +1 -0
- package/dist/themes/index.d.ts +3 -0
- package/dist/themes/index.d.ts.map +1 -0
- package/dist/themes/index.js +3 -0
- package/dist/themes/index.js.map +1 -0
- package/dist/themes/light.d.ts +39 -0
- package/dist/themes/light.d.ts.map +1 -0
- package/dist/themes/light.js +8 -0
- package/dist/themes/light.js.map +1 -0
- package/dist/types.d.ts +14 -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 +70 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Tokis Contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# /tokens
|
|
2
|
+
|
|
3
|
+
Design token engine for the Tokis design system — color primitives, semantic scales, spacing, typography, shadows, motion, and CSS variable generation.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install /tokens
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
> Or install everything at once: `npm install tokis`
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
### TypeScript / JavaScript
|
|
16
|
+
|
|
17
|
+
```ts
|
|
18
|
+
import {
|
|
19
|
+
colors,
|
|
20
|
+
spacing,
|
|
21
|
+
radius,
|
|
22
|
+
typography,
|
|
23
|
+
shadows,
|
|
24
|
+
motion,
|
|
25
|
+
lightTheme,
|
|
26
|
+
darkTheme,
|
|
27
|
+
generateCSSVars,
|
|
28
|
+
} from '/tokens';
|
|
29
|
+
|
|
30
|
+
// Generate CSS custom properties from a theme
|
|
31
|
+
const css = generateCSSVars(lightTheme);
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### CSS
|
|
35
|
+
|
|
36
|
+
```css
|
|
37
|
+
@import '/tokens/css';
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## What's Included
|
|
41
|
+
|
|
42
|
+
- **Primitive Tokens** — Colors, spacing, radius, typography, shadows, motion, z-index, breakpoints
|
|
43
|
+
- **Semantic Tokens** — Color roles, surface levels, text hierarchy, border styles
|
|
44
|
+
- **Themes** — Light and dark theme definitions
|
|
45
|
+
- **CSS Generation** — `generateCSSVars()` to produce CSS custom properties from any theme object
|
|
46
|
+
- **Full TypeScript** — Every token is fully typed
|
|
47
|
+
|
|
48
|
+
## Documentation
|
|
49
|
+
|
|
50
|
+
Visit [tokis.dev](https://tokis.dev/docs/theming) for the theming and token guide.
|
|
51
|
+
|
|
52
|
+
## License
|
|
53
|
+
|
|
54
|
+
MIT
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.generateCssVariables = generateCssVariables;
|
|
4
|
+
const colors_js_1 = require("../primitives/colors");
|
|
5
|
+
const spacing_js_1 = require("../primitives/spacing");
|
|
6
|
+
const radius_js_1 = require("../primitives/radius");
|
|
7
|
+
const typography_js_1 = require("../primitives/typography");
|
|
8
|
+
const shadows_js_1 = require("../primitives/shadows");
|
|
9
|
+
const motion_js_1 = require("../primitives/motion");
|
|
10
|
+
const zIndex_js_1 = require("../primitives/zIndex");
|
|
11
|
+
const breakpoints_js_1 = require("../primitives/breakpoints");
|
|
12
|
+
const color_js_1 = require("../semantic/color");
|
|
13
|
+
const surface_js_1 = require("../semantic/surface");
|
|
14
|
+
const text_js_1 = require("../semantic/text");
|
|
15
|
+
const border_js_1 = require("../semantic/border");
|
|
16
|
+
function generateCssVariables(scope = ':root') {
|
|
17
|
+
const vars = [];
|
|
18
|
+
const prefix = '--tokis-';
|
|
19
|
+
const add = (name, value) => {
|
|
20
|
+
vars.push(` ${prefix}${name}: ${String(value)};`);
|
|
21
|
+
};
|
|
22
|
+
// Primitive: Colors
|
|
23
|
+
Object.entries(colors_js_1.colors).forEach(([key, value]) => add(`color-${key}`, value));
|
|
24
|
+
// Primitive: Spacing
|
|
25
|
+
Object.entries(spacing_js_1.spacing).forEach(([key, value]) => add(`spacing-${key}`, value));
|
|
26
|
+
// Primitive: Radius
|
|
27
|
+
Object.entries(radius_js_1.radius).forEach(([key, value]) => add(`radius-${key}`, value));
|
|
28
|
+
// Primitive: Typography
|
|
29
|
+
Object.entries(typography_js_1.typography.fontSize).forEach(([key, value]) => add(`font-size-${key}`, value));
|
|
30
|
+
Object.entries(typography_js_1.typography.fontWeight).forEach(([key, value]) => add(`font-weight-${key}`, String(value)));
|
|
31
|
+
add('font-family', typography_js_1.typography.fontFamily);
|
|
32
|
+
// Primitive: Shadows
|
|
33
|
+
Object.entries(shadows_js_1.shadows).forEach(([key, value]) => add(`shadow-${key}`, value));
|
|
34
|
+
// Primitive: Motion
|
|
35
|
+
Object.entries(motion_js_1.motion.duration).forEach(([key, value]) => add(`motion-duration-${key}`, value));
|
|
36
|
+
Object.entries(motion_js_1.motion.easing).forEach(([key, value]) => add(`motion-easing-${key}`, value));
|
|
37
|
+
// Primitive: Z-Index
|
|
38
|
+
Object.entries(zIndex_js_1.zIndex).forEach(([key, value]) => add(`z-index-${key}`, String(value)));
|
|
39
|
+
// Primitive: Breakpoints
|
|
40
|
+
Object.entries(breakpoints_js_1.breakpoints).forEach(([key, value]) => add(`breakpoint-${key}`, value));
|
|
41
|
+
// Semantic: Colors
|
|
42
|
+
Object.entries(color_js_1.semanticColors).forEach(([key, value]) => add(`semantic-color-${key}`, value));
|
|
43
|
+
// Semantic: Surface
|
|
44
|
+
Object.entries(surface_js_1.surface).forEach(([key, value]) => add(`surface-${key}`, value));
|
|
45
|
+
// Semantic: Text
|
|
46
|
+
Object.entries(text_js_1.text).forEach(([key, value]) => add(`text-${key}`, value));
|
|
47
|
+
// Semantic: Border
|
|
48
|
+
Object.entries(border_js_1.border).forEach(([key, value]) => add(`border-${key}`, value));
|
|
49
|
+
return `${scope} {\n${vars.join('\n')}\n}`;
|
|
50
|
+
}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./primitives/colors"), exports);
|
|
18
|
+
__exportStar(require("./primitives/spacing"), exports);
|
|
19
|
+
__exportStar(require("./primitives/radius"), exports);
|
|
20
|
+
__exportStar(require("./primitives/typography"), exports);
|
|
21
|
+
__exportStar(require("./primitives/shadows"), exports);
|
|
22
|
+
__exportStar(require("./primitives/motion"), exports);
|
|
23
|
+
__exportStar(require("./primitives/zIndex"), exports);
|
|
24
|
+
__exportStar(require("./primitives/breakpoints"), exports);
|
|
25
|
+
__exportStar(require("./semantic/color"), exports);
|
|
26
|
+
__exportStar(require("./semantic/surface"), exports);
|
|
27
|
+
__exportStar(require("./semantic/text"), exports);
|
|
28
|
+
__exportStar(require("./semantic/border"), exports);
|
|
29
|
+
__exportStar(require("./themes/light"), exports);
|
|
30
|
+
__exportStar(require("./themes/dark"), exports);
|
|
31
|
+
__exportStar(require("./css/generate-css-vars"), exports);
|
|
32
|
+
__exportStar(require("./types"), exports);
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.colors = void 0;
|
|
4
|
+
exports.colors = {
|
|
5
|
+
primary: '#0066ff',
|
|
6
|
+
secondary: '#ff6600',
|
|
7
|
+
background: '#ffffff',
|
|
8
|
+
surface: '#f5f5f5',
|
|
9
|
+
error: '#d32f2f',
|
|
10
|
+
warning: '#f57c00',
|
|
11
|
+
success: '#388e3c',
|
|
12
|
+
neutral100: '#f5f5f5',
|
|
13
|
+
neutral200: '#eeeeee',
|
|
14
|
+
neutral300: '#e0e0e0',
|
|
15
|
+
neutral400: '#bdbdbd',
|
|
16
|
+
neutral500: '#9e9e9e',
|
|
17
|
+
neutral600: '#757575',
|
|
18
|
+
neutral700: '#616161',
|
|
19
|
+
neutral800: '#424242',
|
|
20
|
+
neutral900: '#212121',
|
|
21
|
+
onPrimary: '#ffffff',
|
|
22
|
+
onSecondary: '#ffffff',
|
|
23
|
+
onBackground: '#212121',
|
|
24
|
+
onSurface: '#424242',
|
|
25
|
+
onError: '#ffffff',
|
|
26
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.motion = void 0;
|
|
4
|
+
exports.motion = {
|
|
5
|
+
duration: {
|
|
6
|
+
fast: '150ms',
|
|
7
|
+
normal: '300ms',
|
|
8
|
+
slow: '500ms',
|
|
9
|
+
},
|
|
10
|
+
easing: {
|
|
11
|
+
easeInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
|
12
|
+
},
|
|
13
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.typography = void 0;
|
|
4
|
+
exports.typography = {
|
|
5
|
+
fontFamily: 'system-ui, sans-serif',
|
|
6
|
+
fontSize: {
|
|
7
|
+
xs: '0.75rem',
|
|
8
|
+
sm: '0.875rem',
|
|
9
|
+
md: '1rem',
|
|
10
|
+
lg: '1.125rem',
|
|
11
|
+
xl: '1.25rem',
|
|
12
|
+
},
|
|
13
|
+
fontWeight: {
|
|
14
|
+
normal: 400,
|
|
15
|
+
medium: 500,
|
|
16
|
+
bold: 700,
|
|
17
|
+
},
|
|
18
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.border = void 0;
|
|
4
|
+
const colors_js_1 = require("../primitives/colors");
|
|
5
|
+
const color_js_1 = require("./color");
|
|
6
|
+
exports.border = {
|
|
7
|
+
default: color_js_1.semanticColors.onSurface,
|
|
8
|
+
focus: colors_js_1.colors.primary,
|
|
9
|
+
};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.semanticColors = void 0;
|
|
4
|
+
const colors_js_1 = require("../primitives/colors");
|
|
5
|
+
exports.semanticColors = {
|
|
6
|
+
primary: colors_js_1.colors.primary,
|
|
7
|
+
secondary: colors_js_1.colors.secondary,
|
|
8
|
+
background: colors_js_1.colors.background,
|
|
9
|
+
surface: colors_js_1.colors.surface,
|
|
10
|
+
error: colors_js_1.colors.error,
|
|
11
|
+
onPrimary: colors_js_1.colors.onPrimary,
|
|
12
|
+
onSecondary: colors_js_1.colors.onSecondary,
|
|
13
|
+
onBackground: colors_js_1.colors.onBackground,
|
|
14
|
+
onSurface: colors_js_1.colors.onSurface,
|
|
15
|
+
onError: colors_js_1.colors.onError,
|
|
16
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.surface = void 0;
|
|
4
|
+
const color_js_1 = require("./color");
|
|
5
|
+
exports.surface = {
|
|
6
|
+
default: color_js_1.semanticColors.surface,
|
|
7
|
+
elevated: color_js_1.semanticColors.background,
|
|
8
|
+
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.text = void 0;
|
|
4
|
+
const colors_js_1 = require("../primitives/colors");
|
|
5
|
+
const color_js_1 = require("./color");
|
|
6
|
+
exports.text = {
|
|
7
|
+
primary: color_js_1.semanticColors.onBackground,
|
|
8
|
+
secondary: color_js_1.semanticColors.onSurface,
|
|
9
|
+
disabled: colors_js_1.colors.neutral500,
|
|
10
|
+
error: colors_js_1.colors.error,
|
|
11
|
+
onPrimary: color_js_1.semanticColors.onPrimary,
|
|
12
|
+
};
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.darkTheme = void 0;
|
|
4
|
+
const colors_js_1 = require("../primitives/colors");
|
|
5
|
+
const color_js_1 = require("../semantic/color");
|
|
6
|
+
const darkColors = {
|
|
7
|
+
...colors_js_1.colors,
|
|
8
|
+
background: '#121212',
|
|
9
|
+
surface: '#1e1e1e',
|
|
10
|
+
onBackground: '#f5f5f5',
|
|
11
|
+
onSurface: '#e0e0e0',
|
|
12
|
+
};
|
|
13
|
+
exports.darkTheme = {
|
|
14
|
+
colors: darkColors,
|
|
15
|
+
semanticColors: {
|
|
16
|
+
...color_js_1.semanticColors,
|
|
17
|
+
background: darkColors.background,
|
|
18
|
+
surface: darkColors.surface,
|
|
19
|
+
onBackground: darkColors.onBackground,
|
|
20
|
+
onSurface: darkColors.onSurface,
|
|
21
|
+
},
|
|
22
|
+
mode: 'dark',
|
|
23
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.darkTheme = exports.lightTheme = void 0;
|
|
4
|
+
var light_js_1 = require("./light");
|
|
5
|
+
Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return light_js_1.lightTheme; } });
|
|
6
|
+
var dark_js_1 = require("./dark");
|
|
7
|
+
Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return dark_js_1.darkTheme; } });
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.lightTheme = void 0;
|
|
4
|
+
const colors_js_1 = require("../primitives/colors");
|
|
5
|
+
const color_js_1 = require("../semantic/color");
|
|
6
|
+
exports.lightTheme = {
|
|
7
|
+
colors: colors_js_1.colors,
|
|
8
|
+
semanticColors: color_js_1.semanticColors,
|
|
9
|
+
mode: 'light',
|
|
10
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"generate-css-vars.d.ts","sourceRoot":"","sources":["../../src/css/generate-css-vars.ts"],"names":[],"mappings":"AAaA,wBAAgB,oBAAoB,CAAC,KAAK,SAAU,GAAG,MAAM,CAgD5D"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import { colors } from '../primitives/colors.js';
|
|
2
|
+
import { spacing } from '../primitives/spacing.js';
|
|
3
|
+
import { radius } from '../primitives/radius.js';
|
|
4
|
+
import { typography } from '../primitives/typography.js';
|
|
5
|
+
import { shadows } from '../primitives/shadows.js';
|
|
6
|
+
import { motion } from '../primitives/motion.js';
|
|
7
|
+
import { zIndex } from '../primitives/zIndex.js';
|
|
8
|
+
import { breakpoints } from '../primitives/breakpoints.js';
|
|
9
|
+
import { semanticColors } from '../semantic/color.js';
|
|
10
|
+
import { surface } from '../semantic/surface.js';
|
|
11
|
+
import { text } from '../semantic/text.js';
|
|
12
|
+
import { border } from '../semantic/border.js';
|
|
13
|
+
export function generateCssVariables(scope = ':root') {
|
|
14
|
+
const vars = [];
|
|
15
|
+
const prefix = '--tokis-';
|
|
16
|
+
const add = (name, value) => {
|
|
17
|
+
vars.push(` ${prefix}${name}: ${String(value)};`);
|
|
18
|
+
};
|
|
19
|
+
// Primitive: Colors
|
|
20
|
+
Object.entries(colors).forEach(([key, value]) => add(`color-${key}`, value));
|
|
21
|
+
// Primitive: Spacing
|
|
22
|
+
Object.entries(spacing).forEach(([key, value]) => add(`spacing-${key}`, value));
|
|
23
|
+
// Primitive: Radius
|
|
24
|
+
Object.entries(radius).forEach(([key, value]) => add(`radius-${key}`, value));
|
|
25
|
+
// Primitive: Typography
|
|
26
|
+
Object.entries(typography.fontSize).forEach(([key, value]) => add(`font-size-${key}`, value));
|
|
27
|
+
Object.entries(typography.fontWeight).forEach(([key, value]) => add(`font-weight-${key}`, String(value)));
|
|
28
|
+
add('font-family', typography.fontFamily);
|
|
29
|
+
// Primitive: Shadows
|
|
30
|
+
Object.entries(shadows).forEach(([key, value]) => add(`shadow-${key}`, value));
|
|
31
|
+
// Primitive: Motion
|
|
32
|
+
Object.entries(motion.duration).forEach(([key, value]) => add(`motion-duration-${key}`, value));
|
|
33
|
+
Object.entries(motion.easing).forEach(([key, value]) => add(`motion-easing-${key}`, value));
|
|
34
|
+
// Primitive: Z-Index
|
|
35
|
+
Object.entries(zIndex).forEach(([key, value]) => add(`z-index-${key}`, String(value)));
|
|
36
|
+
// Primitive: Breakpoints
|
|
37
|
+
Object.entries(breakpoints).forEach(([key, value]) => add(`breakpoint-${key}`, value));
|
|
38
|
+
// Semantic: Colors
|
|
39
|
+
Object.entries(semanticColors).forEach(([key, value]) => add(`semantic-color-${key}`, value));
|
|
40
|
+
// Semantic: Surface
|
|
41
|
+
Object.entries(surface).forEach(([key, value]) => add(`surface-${key}`, value));
|
|
42
|
+
// Semantic: Text
|
|
43
|
+
Object.entries(text).forEach(([key, value]) => add(`text-${key}`, value));
|
|
44
|
+
// Semantic: Border
|
|
45
|
+
Object.entries(border).forEach(([key, value]) => add(`border-${key}`, value));
|
|
46
|
+
return `${scope} {\n${vars.join('\n')}\n}`;
|
|
47
|
+
}
|
|
48
|
+
//# sourceMappingURL=generate-css-vars.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"generate-css-vars.js","sourceRoot":"","sources":["../../src/css/generate-css-vars.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* TOKIS Design Tokens — CSS Variables
|
|
3
|
+
*
|
|
4
|
+
* This file is auto-generated by generateCssVariables().
|
|
5
|
+
* Do not edit manually.
|
|
6
|
+
*
|
|
7
|
+
* Usage:
|
|
8
|
+
* import '/tokens/dist/css/index.css';
|
|
9
|
+
*
|
|
10
|
+
* Theme switching:
|
|
11
|
+
* :root → light theme (default)
|
|
12
|
+
* [data-theme="dark"] → dark theme override
|
|
13
|
+
*
|
|
14
|
+
* Variable naming convention:
|
|
15
|
+
* --tokis-color-{name}
|
|
16
|
+
* --tokis-spacing-{scale}
|
|
17
|
+
* --tokis-radius-{scale}
|
|
18
|
+
* --tokis-font-size-{scale}
|
|
19
|
+
* --tokis-font-weight-{scale}
|
|
20
|
+
* --tokis-shadow-{scale}
|
|
21
|
+
* --tokis-motion-duration-{scale}
|
|
22
|
+
* --tokis-motion-easing-{name}
|
|
23
|
+
* --tokis-z-index-{layer}
|
|
24
|
+
* --tokis-semantic-color-{name}
|
|
25
|
+
* --tokis-surface-{name}
|
|
26
|
+
* --tokis-text-{name}
|
|
27
|
+
* --tokis-border-{name}
|
|
28
|
+
*/
|
|
29
|
+
|
|
30
|
+
/* Populated at build time via generateCssVariables() */
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export * from './primitives/colors.js';
|
|
2
|
+
export * from './primitives/spacing.js';
|
|
3
|
+
export * from './primitives/radius.js';
|
|
4
|
+
export * from './primitives/typography.js';
|
|
5
|
+
export * from './primitives/shadows.js';
|
|
6
|
+
export * from './primitives/motion.js';
|
|
7
|
+
export * from './primitives/zIndex.js';
|
|
8
|
+
export * from './primitives/breakpoints.js';
|
|
9
|
+
export * from './semantic/color.js';
|
|
10
|
+
export * from './semantic/surface.js';
|
|
11
|
+
export * from './semantic/text.js';
|
|
12
|
+
export * from './semantic/border.js';
|
|
13
|
+
export * from './themes/light.js';
|
|
14
|
+
export * from './themes/dark.js';
|
|
15
|
+
export * from './css/generate-css-vars.js';
|
|
16
|
+
export * from './types.js';
|
|
17
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,YAAY,CAAC"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
export * from './primitives/colors.js';
|
|
2
|
+
export * from './primitives/spacing.js';
|
|
3
|
+
export * from './primitives/radius.js';
|
|
4
|
+
export * from './primitives/typography.js';
|
|
5
|
+
export * from './primitives/shadows.js';
|
|
6
|
+
export * from './primitives/motion.js';
|
|
7
|
+
export * from './primitives/zIndex.js';
|
|
8
|
+
export * from './primitives/breakpoints.js';
|
|
9
|
+
export * from './semantic/color.js';
|
|
10
|
+
export * from './semantic/surface.js';
|
|
11
|
+
export * from './semantic/text.js';
|
|
12
|
+
export * from './semantic/border.js';
|
|
13
|
+
export * from './themes/light.js';
|
|
14
|
+
export * from './themes/dark.js';
|
|
15
|
+
export * from './css/generate-css-vars.js';
|
|
16
|
+
export * from './types.js';
|
|
17
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../../src/primitives/breakpoints.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;;CAKd,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../../src/primitives/breakpoints.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,OAAO;IACX,EAAE,EAAE,QAAQ;IACZ,EAAE,EAAE,QAAQ;CACJ,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export declare const colors: {
|
|
2
|
+
readonly primary: "#0066ff";
|
|
3
|
+
readonly secondary: "#ff6600";
|
|
4
|
+
readonly background: "#ffffff";
|
|
5
|
+
readonly surface: "#f5f5f5";
|
|
6
|
+
readonly error: "#d32f2f";
|
|
7
|
+
readonly warning: "#f57c00";
|
|
8
|
+
readonly success: "#388e3c";
|
|
9
|
+
readonly neutral100: "#f5f5f5";
|
|
10
|
+
readonly neutral200: "#eeeeee";
|
|
11
|
+
readonly neutral300: "#e0e0e0";
|
|
12
|
+
readonly neutral400: "#bdbdbd";
|
|
13
|
+
readonly neutral500: "#9e9e9e";
|
|
14
|
+
readonly neutral600: "#757575";
|
|
15
|
+
readonly neutral700: "#616161";
|
|
16
|
+
readonly neutral800: "#424242";
|
|
17
|
+
readonly neutral900: "#212121";
|
|
18
|
+
readonly onPrimary: "#ffffff";
|
|
19
|
+
readonly onSecondary: "#ffffff";
|
|
20
|
+
readonly onBackground: "#212121";
|
|
21
|
+
readonly onSurface: "#424242";
|
|
22
|
+
readonly onError: "#ffffff";
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=colors.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/primitives/colors.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;CAsBT,CAAC"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export const colors = {
|
|
2
|
+
primary: '#0066ff',
|
|
3
|
+
secondary: '#ff6600',
|
|
4
|
+
background: '#ffffff',
|
|
5
|
+
surface: '#f5f5f5',
|
|
6
|
+
error: '#d32f2f',
|
|
7
|
+
warning: '#f57c00',
|
|
8
|
+
success: '#388e3c',
|
|
9
|
+
neutral100: '#f5f5f5',
|
|
10
|
+
neutral200: '#eeeeee',
|
|
11
|
+
neutral300: '#e0e0e0',
|
|
12
|
+
neutral400: '#bdbdbd',
|
|
13
|
+
neutral500: '#9e9e9e',
|
|
14
|
+
neutral600: '#757575',
|
|
15
|
+
neutral700: '#616161',
|
|
16
|
+
neutral800: '#424242',
|
|
17
|
+
neutral900: '#212121',
|
|
18
|
+
onPrimary: '#ffffff',
|
|
19
|
+
onSecondary: '#ffffff',
|
|
20
|
+
onBackground: '#212121',
|
|
21
|
+
onSurface: '#424242',
|
|
22
|
+
onError: '#ffffff',
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=colors.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../src/primitives/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,SAAS;IACpB,UAAU,EAAE,SAAS;IACrB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,UAAU,EAAE,SAAS;IACrB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,YAAY,EAAE,SAAS;IACvB,SAAS,EAAE,SAAS;IACpB,OAAO,EAAE,SAAS;CACV,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
export declare const motion: {
|
|
2
|
+
readonly duration: {
|
|
3
|
+
readonly fast: "150ms";
|
|
4
|
+
readonly normal: "300ms";
|
|
5
|
+
readonly slow: "500ms";
|
|
6
|
+
};
|
|
7
|
+
readonly easing: {
|
|
8
|
+
readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
|
|
9
|
+
};
|
|
10
|
+
};
|
|
11
|
+
//# sourceMappingURL=motion.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/primitives/motion.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;CAST,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"motion.js","sourceRoot":"","sources":["../../src/primitives/motion.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,QAAQ,EAAE;QACR,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,OAAO;KACd;IACD,MAAM,EAAE;QACN,SAAS,EAAE,8BAA8B;KAC1C;CACO,CAAC"}
|