@nexus-cross/tokens 1.0.0-beta.1
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 +197 -0
- package/dist/TOKENS.md +394 -0
- package/dist/company-vars.css +395 -0
- package/dist/company.css +400 -0
- package/dist/index.d.mts +4574 -0
- package/dist/index.d.ts +4574 -0
- package/dist/index.js +2408 -0
- package/dist/index.mjs +2356 -0
- package/package.json +51 -0
- package/scripts/postinstall.js +57 -0
- package/src/data/borderWidth.json +38 -0
- package/src/data/breakpoint.json +23 -0
- package/src/data/color.json +957 -0
- package/src/data/index.ts +63 -0
- package/src/data/motion.json +64 -0
- package/src/data/opacity.json +65 -0
- package/src/data/radius.json +25 -0
- package/src/data/shadow.json +76 -0
- package/src/data/size.json +46 -0
- package/src/data/space.json +85 -0
- package/src/data/typography.json +626 -0
- package/src/data/zIndex.json +22 -0
- package/src/tailwind.js +260 -0
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Token Data Exports (SSOT)
|
|
3
|
+
*
|
|
4
|
+
* 모든 토큰 JSON 데이터를 export합니다.
|
|
5
|
+
* 패키지와 designer가 이 데이터를 공유합니다.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
import colorData from './color.json';
|
|
9
|
+
import typographyData from './typography.json';
|
|
10
|
+
import spaceData from './space.json';
|
|
11
|
+
import shadowData from './shadow.json';
|
|
12
|
+
import radiusData from './radius.json';
|
|
13
|
+
import borderWidthData from './borderWidth.json';
|
|
14
|
+
import sizeData from './size.json';
|
|
15
|
+
import opacityData from './opacity.json';
|
|
16
|
+
import zIndexData from './zIndex.json';
|
|
17
|
+
import motionData from './motion.json';
|
|
18
|
+
import breakpointData from './breakpoint.json';
|
|
19
|
+
|
|
20
|
+
// Type Definitions
|
|
21
|
+
export type ColorMode = 'light' | 'dark';
|
|
22
|
+
export type Layer = 'primitive' | 'semantic';
|
|
23
|
+
|
|
24
|
+
/**
|
|
25
|
+
* Semantic Mode-Aware 구조
|
|
26
|
+
* semantic 토큰이 mode별로 다른 primitive를 참조
|
|
27
|
+
*/
|
|
28
|
+
export interface ModeAwareSemanticDef {
|
|
29
|
+
light: { source: string };
|
|
30
|
+
dark: { source: string };
|
|
31
|
+
description?: string;
|
|
32
|
+
opacity?: string; // overlay용
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
// Raw Data Exports
|
|
36
|
+
export const rawColorData = colorData;
|
|
37
|
+
export const rawTypographyData = typographyData;
|
|
38
|
+
export const rawSpaceData = spaceData;
|
|
39
|
+
export const rawShadowData = shadowData;
|
|
40
|
+
export const rawRadiusData = radiusData;
|
|
41
|
+
export const rawBorderWidthData = borderWidthData;
|
|
42
|
+
export const rawSizeData = sizeData;
|
|
43
|
+
export const rawOpacityData = opacityData;
|
|
44
|
+
export const rawZIndexData = zIndexData;
|
|
45
|
+
export const rawMotionData = motionData;
|
|
46
|
+
export const rawBreakpointData = breakpointData;
|
|
47
|
+
|
|
48
|
+
// All category data
|
|
49
|
+
export const allCategoryData = {
|
|
50
|
+
color: rawColorData,
|
|
51
|
+
typography: rawTypographyData,
|
|
52
|
+
space: rawSpaceData,
|
|
53
|
+
shadow: rawShadowData,
|
|
54
|
+
radius: rawRadiusData,
|
|
55
|
+
borderWidth: rawBorderWidthData,
|
|
56
|
+
size: rawSizeData,
|
|
57
|
+
opacity: rawOpacityData,
|
|
58
|
+
zIndex: rawZIndexData,
|
|
59
|
+
motion: rawMotionData,
|
|
60
|
+
breakpoint: rawBreakpointData,
|
|
61
|
+
};
|
|
62
|
+
|
|
63
|
+
export type CategoryId = keyof typeof allCategoryData;
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"primitive": {
|
|
3
|
+
"duration": {
|
|
4
|
+
"0": "0ms",
|
|
5
|
+
"75": "75ms",
|
|
6
|
+
"100": "100ms",
|
|
7
|
+
"150": "150ms",
|
|
8
|
+
"200": "200ms",
|
|
9
|
+
"300": "300ms",
|
|
10
|
+
"500": "500ms",
|
|
11
|
+
"700": "700ms",
|
|
12
|
+
"1000": "1000ms"
|
|
13
|
+
},
|
|
14
|
+
"easing": {
|
|
15
|
+
"linear": "linear",
|
|
16
|
+
"ease": "ease",
|
|
17
|
+
"easeIn": "cubic-bezier(0.4, 0, 1, 1)",
|
|
18
|
+
"easeOut": "cubic-bezier(0, 0, 0.2, 1)",
|
|
19
|
+
"easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
|
|
20
|
+
"spring": "cubic-bezier(0.175, 0.885, 0.32, 1.275)"
|
|
21
|
+
}
|
|
22
|
+
},
|
|
23
|
+
"semantic": {
|
|
24
|
+
"transition": {
|
|
25
|
+
"instant": {
|
|
26
|
+
"duration": { "source": "duration.0" },
|
|
27
|
+
"easing": { "source": "easing.linear" },
|
|
28
|
+
"description": "No transition"
|
|
29
|
+
},
|
|
30
|
+
"fast": {
|
|
31
|
+
"duration": { "source": "duration.150" },
|
|
32
|
+
"easing": { "source": "easing.easeOut" },
|
|
33
|
+
"description": "Fast transition"
|
|
34
|
+
},
|
|
35
|
+
"normal": {
|
|
36
|
+
"duration": { "source": "duration.200" },
|
|
37
|
+
"easing": { "source": "easing.easeOut" },
|
|
38
|
+
"description": "Normal transition"
|
|
39
|
+
},
|
|
40
|
+
"slow": {
|
|
41
|
+
"duration": { "source": "duration.300" },
|
|
42
|
+
"easing": { "source": "easing.easeOut" },
|
|
43
|
+
"description": "Slow transition"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"animation": {
|
|
47
|
+
"enter": {
|
|
48
|
+
"duration": { "source": "duration.200" },
|
|
49
|
+
"easing": { "source": "easing.easeOut" },
|
|
50
|
+
"description": "Enter animation"
|
|
51
|
+
},
|
|
52
|
+
"exit": {
|
|
53
|
+
"duration": { "source": "duration.150" },
|
|
54
|
+
"easing": { "source": "easing.easeIn" },
|
|
55
|
+
"description": "Exit animation"
|
|
56
|
+
},
|
|
57
|
+
"bounce": {
|
|
58
|
+
"duration": { "source": "duration.500" },
|
|
59
|
+
"easing": { "source": "easing.spring" },
|
|
60
|
+
"description": "Bounce animation"
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
{
|
|
2
|
+
"primitive": {
|
|
3
|
+
"0": "0",
|
|
4
|
+
"5": "0.05",
|
|
5
|
+
"10": "0.1",
|
|
6
|
+
"20": "0.2",
|
|
7
|
+
"25": "0.25",
|
|
8
|
+
"30": "0.3",
|
|
9
|
+
"40": "0.4",
|
|
10
|
+
"50": "0.5",
|
|
11
|
+
"60": "0.6",
|
|
12
|
+
"70": "0.7",
|
|
13
|
+
"75": "0.75",
|
|
14
|
+
"80": "0.8",
|
|
15
|
+
"90": "0.9",
|
|
16
|
+
"95": "0.95",
|
|
17
|
+
"100": "1"
|
|
18
|
+
},
|
|
19
|
+
"semantic": {
|
|
20
|
+
"overlay": {
|
|
21
|
+
"dim": {
|
|
22
|
+
"source": "50",
|
|
23
|
+
"description": "Standard overlay"
|
|
24
|
+
},
|
|
25
|
+
"light": {
|
|
26
|
+
"source": "30",
|
|
27
|
+
"description": "Light overlay"
|
|
28
|
+
},
|
|
29
|
+
"heavy": {
|
|
30
|
+
"source": "70",
|
|
31
|
+
"description": "Heavy overlay"
|
|
32
|
+
}
|
|
33
|
+
},
|
|
34
|
+
"disabled": {
|
|
35
|
+
"element": {
|
|
36
|
+
"source": "40",
|
|
37
|
+
"description": "Disabled element opacity"
|
|
38
|
+
},
|
|
39
|
+
"text": {
|
|
40
|
+
"source": "50",
|
|
41
|
+
"description": "Disabled text opacity"
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
"hover": {
|
|
45
|
+
"subtle": {
|
|
46
|
+
"source": "5",
|
|
47
|
+
"description": "Subtle hover"
|
|
48
|
+
},
|
|
49
|
+
"default": {
|
|
50
|
+
"source": "10",
|
|
51
|
+
"description": "Default hover"
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
"pressed": {
|
|
55
|
+
"subtle": {
|
|
56
|
+
"source": "10",
|
|
57
|
+
"description": "Subtle pressed"
|
|
58
|
+
},
|
|
59
|
+
"default": {
|
|
60
|
+
"source": "20",
|
|
61
|
+
"description": "Default pressed"
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"primitive": {
|
|
3
|
+
"0": "0px",
|
|
4
|
+
"2": "2px",
|
|
5
|
+
"4": "4px",
|
|
6
|
+
"6": "6px",
|
|
7
|
+
"8": "8px",
|
|
8
|
+
"12": "12px",
|
|
9
|
+
"16": "16px",
|
|
10
|
+
"20": "20px",
|
|
11
|
+
"24": "24px",
|
|
12
|
+
"full": "9999px"
|
|
13
|
+
},
|
|
14
|
+
"semantic": {
|
|
15
|
+
"corner": {
|
|
16
|
+
"none": { "source": "0", "description": "No border radius" },
|
|
17
|
+
"sm": { "source": "4", "description": "Small corner" },
|
|
18
|
+
"md": { "source": "8", "description": "Medium corner" },
|
|
19
|
+
"lg": { "source": "12", "description": "Large corner" },
|
|
20
|
+
"xl": { "source": "16", "description": "Extra large corner" },
|
|
21
|
+
"2xl": { "source": "24", "description": "2X large corner" },
|
|
22
|
+
"full": { "source": "full", "description": "Fully rounded" }
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
}
|
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"primitive": {
|
|
3
|
+
"0": "none",
|
|
4
|
+
"1": "0 1px 2px 0 rgb(0 0 0 / 0.12)",
|
|
5
|
+
"2": "0 1px 3px 0 rgb(0 0 0 / 0.12)",
|
|
6
|
+
"3": "0 2px 8px -1px rgb(0 0 0 / 0.12)",
|
|
7
|
+
"4": "0 4px 15px -3px rgb(0 0 0 / 0.12)",
|
|
8
|
+
"5": "0 5px 25px -5px rgb(0 0 0 / 0.12)",
|
|
9
|
+
"6": "0 6px 50px -12px rgb(0 0 0 / 0.12)",
|
|
10
|
+
"inner": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
|
|
11
|
+
"dark-1": "0 1px 2px 0 rgb(0 0 0 / 0.3)",
|
|
12
|
+
"dark-2": "0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.3)",
|
|
13
|
+
"dark-3": "0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.3)",
|
|
14
|
+
"dark-4": "0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.3)",
|
|
15
|
+
"dark-5": "0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.3)",
|
|
16
|
+
"dark-6": "0 25px 50px -12px rgb(0 0 0 / 0.6)"
|
|
17
|
+
},
|
|
18
|
+
"semantic": {
|
|
19
|
+
"elevation": {
|
|
20
|
+
"none": {
|
|
21
|
+
"light": {
|
|
22
|
+
"source": "0"
|
|
23
|
+
},
|
|
24
|
+
"dark": {
|
|
25
|
+
"source": "0"
|
|
26
|
+
},
|
|
27
|
+
"description": "No shadow"
|
|
28
|
+
},
|
|
29
|
+
"sm": {
|
|
30
|
+
"light": {
|
|
31
|
+
"source": "1"
|
|
32
|
+
},
|
|
33
|
+
"dark": {
|
|
34
|
+
"source": "dark-1"
|
|
35
|
+
},
|
|
36
|
+
"description": "Subtle shadow"
|
|
37
|
+
},
|
|
38
|
+
"md": {
|
|
39
|
+
"light": {
|
|
40
|
+
"source": "2"
|
|
41
|
+
},
|
|
42
|
+
"dark": {
|
|
43
|
+
"source": "dark-2"
|
|
44
|
+
},
|
|
45
|
+
"description": "Default shadow"
|
|
46
|
+
},
|
|
47
|
+
"lg": {
|
|
48
|
+
"light": {
|
|
49
|
+
"source": "3"
|
|
50
|
+
},
|
|
51
|
+
"dark": {
|
|
52
|
+
"source": "dark-3"
|
|
53
|
+
},
|
|
54
|
+
"description": "Elevated shadow"
|
|
55
|
+
},
|
|
56
|
+
"xl": {
|
|
57
|
+
"light": {
|
|
58
|
+
"source": "4"
|
|
59
|
+
},
|
|
60
|
+
"dark": {
|
|
61
|
+
"source": "dark-4"
|
|
62
|
+
},
|
|
63
|
+
"description": "High elevation"
|
|
64
|
+
},
|
|
65
|
+
"2xl": {
|
|
66
|
+
"light": {
|
|
67
|
+
"source": "5"
|
|
68
|
+
},
|
|
69
|
+
"dark": {
|
|
70
|
+
"source": "dark-5"
|
|
71
|
+
},
|
|
72
|
+
"description": "Highest elevation"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
{
|
|
2
|
+
"primitive": {
|
|
3
|
+
"12": "12px",
|
|
4
|
+
"14": "14px",
|
|
5
|
+
"16": "16px",
|
|
6
|
+
"18": "18px",
|
|
7
|
+
"20": "20px",
|
|
8
|
+
"24": "24px",
|
|
9
|
+
"28": "28px",
|
|
10
|
+
"32": "32px",
|
|
11
|
+
"36": "36px",
|
|
12
|
+
"40": "40px",
|
|
13
|
+
"44": "44px",
|
|
14
|
+
"48": "48px",
|
|
15
|
+
"56": "56px",
|
|
16
|
+
"64": "64px",
|
|
17
|
+
"80": "80px",
|
|
18
|
+
"96": "96px"
|
|
19
|
+
},
|
|
20
|
+
"semantic": {
|
|
21
|
+
"icon": {
|
|
22
|
+
"xs": { "source": "12", "description": "Extra small icon" },
|
|
23
|
+
"sm": { "source": "16", "description": "Small icon" },
|
|
24
|
+
"md": { "source": "20", "description": "Medium icon" },
|
|
25
|
+
"lg": { "source": "24", "description": "Large icon" },
|
|
26
|
+
"xl": { "source": "32", "description": "Extra large icon" }
|
|
27
|
+
},
|
|
28
|
+
"control": {
|
|
29
|
+
"xs": { "source": "24", "description": "Extra small control" },
|
|
30
|
+
"sm": { "source": "32", "description": "Small control" },
|
|
31
|
+
"md": { "source": "40", "description": "Medium control" },
|
|
32
|
+
"lg": { "source": "48", "description": "Large control" }
|
|
33
|
+
},
|
|
34
|
+
"touch": {
|
|
35
|
+
"min": { "source": "44", "description": "Minimum touch target" }
|
|
36
|
+
},
|
|
37
|
+
"avatar": {
|
|
38
|
+
"xs": { "source": "24", "description": "Extra small avatar" },
|
|
39
|
+
"sm": { "source": "32", "description": "Small avatar" },
|
|
40
|
+
"md": { "source": "40", "description": "Medium avatar" },
|
|
41
|
+
"lg": { "source": "48", "description": "Large avatar" },
|
|
42
|
+
"xl": { "source": "64", "description": "Extra large avatar" },
|
|
43
|
+
"2xl": { "source": "96", "description": "2X large avatar" }
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
{
|
|
2
|
+
"primitive": {
|
|
3
|
+
"0": "0",
|
|
4
|
+
"1": "0.25rem",
|
|
5
|
+
"2": "0.5rem",
|
|
6
|
+
"3": "0.75rem",
|
|
7
|
+
"4": "1rem",
|
|
8
|
+
"5": "1.25rem",
|
|
9
|
+
"6": "1.5rem",
|
|
10
|
+
"8": "2rem",
|
|
11
|
+
"10": "2.5rem",
|
|
12
|
+
"12": "3rem",
|
|
13
|
+
"16": "4rem",
|
|
14
|
+
"20": "5rem",
|
|
15
|
+
"24": "6rem",
|
|
16
|
+
"32": "8rem",
|
|
17
|
+
"40": "10rem",
|
|
18
|
+
"48": "12rem",
|
|
19
|
+
"56": "14rem",
|
|
20
|
+
"64": "16rem",
|
|
21
|
+
"px": "1px"
|
|
22
|
+
},
|
|
23
|
+
"semantic": {
|
|
24
|
+
"padding": {
|
|
25
|
+
"none": {
|
|
26
|
+
"source": "0",
|
|
27
|
+
"description": "No padding (0px)"
|
|
28
|
+
},
|
|
29
|
+
"2xs": {
|
|
30
|
+
"source": "1",
|
|
31
|
+
"description": "2X extra small padding (4px)"
|
|
32
|
+
},
|
|
33
|
+
"xs": {
|
|
34
|
+
"source": "2",
|
|
35
|
+
"description": "Extra small padding (4px)"
|
|
36
|
+
},
|
|
37
|
+
"sm": {
|
|
38
|
+
"source": "3",
|
|
39
|
+
"description": "Small padding (8px)"
|
|
40
|
+
},
|
|
41
|
+
"md": {
|
|
42
|
+
"source": "4",
|
|
43
|
+
"description": "Medium padding (16px)"
|
|
44
|
+
},
|
|
45
|
+
"lg": {
|
|
46
|
+
"source": "6",
|
|
47
|
+
"description": "Large padding (24px)"
|
|
48
|
+
},
|
|
49
|
+
"xl": {
|
|
50
|
+
"source": "8",
|
|
51
|
+
"description": "Extra large padding (32px)"
|
|
52
|
+
},
|
|
53
|
+
"2xl": {
|
|
54
|
+
"source": "10",
|
|
55
|
+
"description": "2X large padding (48px)"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
"gap": {
|
|
59
|
+
"none": {
|
|
60
|
+
"source": "0",
|
|
61
|
+
"description": "No gap (0px)"
|
|
62
|
+
},
|
|
63
|
+
"xs": {
|
|
64
|
+
"source": "1",
|
|
65
|
+
"description": "Extra small gap (4px)"
|
|
66
|
+
},
|
|
67
|
+
"sm": {
|
|
68
|
+
"source": "2",
|
|
69
|
+
"description": "Small gap (8px)"
|
|
70
|
+
},
|
|
71
|
+
"md": {
|
|
72
|
+
"source": "4",
|
|
73
|
+
"description": "Medium gap (16px)"
|
|
74
|
+
},
|
|
75
|
+
"lg": {
|
|
76
|
+
"source": "6",
|
|
77
|
+
"description": "Large gap (24px)"
|
|
78
|
+
},
|
|
79
|
+
"xl": {
|
|
80
|
+
"source": "8",
|
|
81
|
+
"description": "Extra large gap (32px)"
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
}
|