@techv/tokens 0.1.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.
Files changed (7) hide show
  1. package/dist/cjs/index.js +164 -0
  2. package/dist/cjs/index.js.map +1 -0
  3. package/dist/esm/index.js +159 -0
  4. package/dist/esm/index.js.map +1 -0
  5. package/dist/global.css +142 -0
  6. package/dist/types/index.d.ts +173 -0
  7. package/package.json +46 -0
package/dist/cjs/index.js ADDED
@@ -0,0 +1,164 @@
1
+ 'use strict';
2
+
3
+ const tokens = {
4
+ color: {
5
+ brand: {
6
+ 50: '#EEF2FF',
7
+ 100: '#C7D2FE',
8
+ 300: '#A5B4FC',
9
+ 500: '#4F46E5',
10
+ 600: '#4338CA',
11
+ 700: '#3730A3',
12
+ 900: '#312E81',
13
+ },
14
+ success: { 50: '#ECFDF5', 500: '#10B981' },
15
+ danger: { 50: '#FEF2F2', 500: '#EF4444' },
16
+ warning: { 50: '#FFFBEB', 500: '#F59E0B' },
17
+ info: { 50: '#EFF6FF', 500: '#3B82F6' },
18
+ gray: {
19
+ 50: '#F9FAFB',
20
+ 100: '#F3F4F6',
21
+ 200: '#E5E7EB',
22
+ 300: '#D1D5DB',
23
+ 400: '#9CA3AF',
24
+ 500: '#6B7280',
25
+ 600: '#4B5563',
26
+ 700: '#374151',
27
+ 800: '#1F2937',
28
+ 900: '#111827',
29
+ },
30
+ },
31
+ semantic: {
32
+ surface: '#FFFFFF',
33
+ bg: '#F9FAFB',
34
+ textPrimary: '#111827',
35
+ textSecondary: '#6B7280',
36
+ textDisabled: '#D1D5DB',
37
+ border: '#E5E7EB',
38
+ borderStrong: '#D1D5DB',
39
+ focusRing: '#4F46E5',
40
+ },
41
+ space: {
42
+ '2xs': 2,
43
+ xs: 4,
44
+ sm: 8,
45
+ md: 16,
46
+ lg: 24,
47
+ xl: 32,
48
+ '2xl': 48,
49
+ '3xl': 64,
50
+ },
51
+ radius: {
52
+ none: 0,
53
+ xs: 2,
54
+ sm: 4,
55
+ md: 6,
56
+ lg: 8,
57
+ xl: 12,
58
+ '2xl': 16,
59
+ full: 9999,
60
+ },
61
+ shadow: {
62
+ none: 'none',
63
+ xs: '0 1px 2px rgba(0,0,0,0.05)',
64
+ sm: '0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)',
65
+ md: '0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)',
66
+ lg: '0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)',
67
+ xl: '0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04)',
68
+ },
69
+ duration: {
70
+ instant: 50,
71
+ fast: 100,
72
+ normal: 200,
73
+ slow: 300,
74
+ deliberate: 500,
75
+ },
76
+ ease: {
77
+ standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
78
+ decelerate: 'cubic-bezier(0, 0, 0.2, 1)',
79
+ accelerate: 'cubic-bezier(0.4, 0, 1, 1)',
80
+ spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
81
+ },
82
+ font: {
83
+ display: 'Plus Jakarta Sans',
84
+ text: 'Inter',
85
+ mono: 'JetBrains Mono',
86
+ },
87
+ fontSize: {
88
+ h1: '36px',
89
+ h2: '28px',
90
+ h3: '22px',
91
+ h4: '18px',
92
+ h5: '16px',
93
+ bodyLg: '16px',
94
+ bodyMd: '14px',
95
+ caption: '12px',
96
+ code: '12px',
97
+ },
98
+ component: {
99
+ buttonHeight: { xs: '28px', sm: '32px', md: '36px', lg: '42px', xl: '50px' },
100
+ radiusButton: '8px',
101
+ radiusCard: '12px',
102
+ radiusModal: '16px',
103
+ radiusBadge: '9999px',
104
+ focusRingWidth: '3px',
105
+ focusRingOffset: '2px',
106
+ },
107
+ };
108
+ // Flat named exports for backwards-compat convenience
109
+ const colors = {
110
+ brand500: tokens.color.brand[500],
111
+ brand600: tokens.color.brand[600],
112
+ brand700: tokens.color.brand[700],
113
+ brand50: tokens.color.brand[50],
114
+ danger500: tokens.color.danger[500],
115
+ danger50: tokens.color.danger[50],
116
+ success500: tokens.color.success[500],
117
+ success50: tokens.color.success[50],
118
+ warning500: tokens.color.warning[500],
119
+ warning50: tokens.color.warning[50],
120
+ gray50: tokens.color.gray[50],
121
+ gray100: tokens.color.gray[100],
122
+ gray200: tokens.color.gray[200],
123
+ gray300: tokens.color.gray[300],
124
+ gray400: tokens.color.gray[400],
125
+ gray500: tokens.color.gray[500],
126
+ gray600: tokens.color.gray[600],
127
+ gray700: tokens.color.gray[700],
128
+ gray800: tokens.color.gray[800],
129
+ gray900: tokens.color.gray[900],
130
+ surface: tokens.semantic.surface,
131
+ bg: tokens.semantic.bg,
132
+ textPrimary: tokens.semantic.textPrimary,
133
+ textSecondary: tokens.semantic.textSecondary,
134
+ textDisabled: tokens.semantic.textDisabled,
135
+ border: tokens.semantic.border,
136
+ borderStrong: tokens.semantic.borderStrong,
137
+ focusRing: tokens.semantic.focusRing,
138
+ };
139
+ const spacing = {
140
+ '2xs': '2px',
141
+ xs: '4px',
142
+ sm: '8px',
143
+ md: '16px',
144
+ lg: '24px',
145
+ xl: '32px',
146
+ '2xl': '48px',
147
+ '3xl': '64px',
148
+ };
149
+ const radii = {
150
+ none: '0',
151
+ xs: '2px',
152
+ sm: '4px',
153
+ md: '6px',
154
+ lg: '8px',
155
+ xl: '12px',
156
+ '2xl': '16px',
157
+ full: '9999px',
158
+ };
159
+
160
+ exports.colors = colors;
161
+ exports.radii = radii;
162
+ exports.spacing = spacing;
163
+ exports.tokens = tokens;
164
+ //# sourceMappingURL=index.js.map
package/dist/cjs/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["export const tokens = {\n color: {\n brand: {\n 50: '#EEF2FF',\n 100: '#C7D2FE',\n 300: '#A5B4FC',\n 500: '#4F46E5',\n 600: '#4338CA',\n 700: '#3730A3',\n 900: '#312E81',\n },\n success: { 50: '#ECFDF5', 500: '#10B981' },\n danger: { 50: '#FEF2F2', 500: '#EF4444' },\n warning: { 50: '#FFFBEB', 500: '#F59E0B' },\n info: { 50: '#EFF6FF', 500: '#3B82F6' },\n gray: {\n 50: '#F9FAFB',\n 100: '#F3F4F6',\n 200: '#E5E7EB',\n 300: '#D1D5DB',\n 400: '#9CA3AF',\n 500: '#6B7280',\n 600: '#4B5563',\n 700: '#374151',\n 800: '#1F2937',\n 900: '#111827',\n },\n },\n semantic: {\n surface: '#FFFFFF',\n bg: '#F9FAFB',\n textPrimary: '#111827',\n textSecondary: '#6B7280',\n textDisabled: '#D1D5DB',\n border: '#E5E7EB',\n borderStrong: '#D1D5DB',\n focusRing: '#4F46E5',\n },\n space: {\n '2xs': 2,\n xs: 4,\n sm: 8,\n md: 16,\n lg: 24,\n xl: 32,\n '2xl': 48,\n '3xl': 64,\n },\n radius: {\n none: 0,\n xs: 2,\n sm: 4,\n md: 6,\n lg: 8,\n xl: 12,\n '2xl': 16,\n full: 9999,\n },\n shadow: {\n none: 'none',\n xs: '0 1px 2px rgba(0,0,0,0.05)',\n sm: '0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)',\n md: '0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)',\n lg: '0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)',\n xl: '0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04)',\n },\n duration: {\n instant: 50,\n fast: 100,\n normal: 200,\n slow: 300,\n deliberate: 500,\n },\n ease: {\n standard: 'cubic-bezier(0.4, 0, 0.2, 1)',\n decelerate: 'cubic-bezier(0, 0, 0.2, 1)',\n accelerate: 'cubic-bezier(0.4, 0, 1, 1)',\n spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n },\n font: {\n display: 'Plus Jakarta Sans',\n text: 'Inter',\n mono: 'JetBrains Mono',\n },\n fontSize: {\n h1: '36px',\n h2: '28px',\n h3: '22px',\n h4: '18px',\n h5: '16px',\n bodyLg: '16px',\n bodyMd: '14px',\n caption: '12px',\n code: '12px',\n },\n component: {\n buttonHeight: { xs: '28px', sm: '32px', md: '36px', lg: '42px', xl: '50px' },\n radiusButton: '8px',\n radiusCard: '12px',\n radiusModal: '16px',\n radiusBadge: '9999px',\n focusRingWidth: '3px',\n focusRingOffset: '2px',\n },\n};\n// Flat named exports for backwards-compat convenience\nexport const colors = {\n brand500: tokens.color.brand[500],\n brand600: tokens.color.brand[600],\n brand700: tokens.color.brand[700],\n brand50: tokens.color.brand[50],\n danger500: tokens.color.danger[500],\n danger50: tokens.color.danger[50],\n success500: tokens.color.success[500],\n success50: tokens.color.success[50],\n warning500: tokens.color.warning[500],\n warning50: tokens.color.warning[50],\n gray50: tokens.color.gray[50],\n gray100: tokens.color.gray[100],\n gray200: tokens.color.gray[200],\n gray300: tokens.color.gray[300],\n gray400: tokens.color.gray[400],\n gray500: tokens.color.gray[500],\n gray600: tokens.color.gray[600],\n gray700: tokens.color.gray[700],\n gray800: tokens.color.gray[800],\n gray900: tokens.color.gray[900],\n surface: tokens.semantic.surface,\n bg: tokens.semantic.bg,\n textPrimary: tokens.semantic.textPrimary,\n textSecondary: tokens.semantic.textSecondary,\n textDisabled: tokens.semantic.textDisabled,\n border: tokens.semantic.border,\n borderStrong: tokens.semantic.borderStrong,\n focusRing: tokens.semantic.focusRing,\n};\nexport const spacing = {\n '2xs': '2px',\n xs: '4px',\n sm: '8px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n '2xl': '48px',\n '3xl': '64px',\n};\nexport const radii = {\n none: '0',\n xs: '2px',\n sm: '4px',\n md: '6px',\n lg: '8px',\n xl: '12px',\n '2xl': '16px',\n full: '9999px',\n};\n"],"names":[],"mappings":";;AAAY,MAAC,MAAM,GAAG;AACtB,IAAI,KAAK,EAAE;AACX,QAAQ,KAAK,EAAE;AACf,YAAY,EAAE,EAAE,SAAS;AACzB,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,SAAS;AACT,QAAQ,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE;AAClD,QAAQ,MAAM,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE;AACjD,QAAQ,OAAO,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE;AAClD,QAAQ,IAAI,EAAE,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,SAAS,EAAE;AAC/C,QAAQ,IAAI,EAAE;AACd,YAAY,EAAE,EAAE,SAAS;AACzB,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,YAAY,GAAG,EAAE,SAAS;AAC1B,SAAS;AACT,KAAK;AACL,IAAI,QAAQ,EAAE;AACd,QAAQ,OAAO,EAAE,SAAS;AAC1B,QAAQ,EAAE,EAAE,SAAS;AACrB,QAAQ,WAAW,EAAE,SAAS;AAC9B,QAAQ,aAAa,EAAE,SAAS;AAChC,QAAQ,YAAY,EAAE,SAAS;AAC/B,QAAQ,MAAM,EAAE,SAAS;AACzB,QAAQ,YAAY,EAAE,SAAS;AAC/B,QAAQ,SAAS,EAAE,SAAS;AAC5B,KAAK;AACL,IAAI,KAAK,EAAE;AACX,QAAQ,KAAK,EAAE,CAAC;AAChB,QAAQ,EAAE,EAAE,CAAC;AACb,QAAQ,EAAE,EAAE,CAAC;AACb,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,KAAK,EAAE,EAAE;AACjB,QAAQ,KAAK,EAAE,EAAE;AACjB,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,QAAQ,IAAI,EAAE,CAAC;AACf,QAAQ,EAAE,EAAE,CAAC;AACb,QAAQ,EAAE,EAAE,CAAC;AACb,QAAQ,EAAE,EAAE,CAAC;AACb,QAAQ,EAAE,EAAE,CAAC;AACb,QAAQ,EAAE,EAAE,EAAE;AACd,QAAQ,KAAK,EAAE,EAAE;AACjB,QAAQ,IAAI,EAAE,IAAI;AAClB,KAAK;AACL,IAAI,MAAM,EAAE;AACZ,QAAQ,IAAI,EAAE,MAAM;AACpB,QAAQ,EAAE,EAAE,4BAA4B;AACxC,QAAQ,EAAE,EAAE,wDAAwD;AACpE,QAAQ,EAAE,EAAE,wDAAwD;AACpE,QAAQ,EAAE,EAAE,0DAA0D;AACtE,QAAQ,EAAE,EAAE,2DAA2D;AACvE,KAAK;AACL,IAAI,QAAQ,EAAE;AACd,QAAQ,OAAO,EAAE,EAAE;AACnB,QAAQ,IAAI,EAAE,GAAG;AACjB,QAAQ,MAAM,EAAE,GAAG;AACnB,QAAQ,IAAI,EAAE,GAAG;AACjB,QAAQ,UAAU,EAAE,GAAG;AACvB,KAAK;AACL,IAAI,IAAI,EAAE;AACV,QAAQ,QAAQ,EAAE,8BAA8B;AAChD,QAAQ,UAAU,EAAE,4BAA4B;AAChD,QAAQ,UAAU,EAAE,4BAA4B;AAChD,QAAQ,MAAM,EAAE,mCAAmC;AACnD,KAAK;AACL,IAAI,IAAI,EAAE;AACV,QAAQ,OAAO,EAAE,mBAAmB;AACpC,QAAQ,IAAI,EAAE,OAAO;AACrB,QAAQ,IAAI,EAAE,gBAAgB;AAC9B,KAAK;AACL,IAAI,QAAQ,EAAE;AACd,QAAQ,EAAE,EAAE,MAAM;AAClB,QAAQ,EAAE,EAAE,MAAM;AAClB,QAAQ,EAAE,EAAE,MAAM;AAClB,QAAQ,EAAE,EAAE,MAAM;AAClB,QAAQ,EAAE,EAAE,MAAM;AAClB,QAAQ,MAAM,EAAE,MAAM;AACtB,QAAQ,MAAM,EAAE,MAAM;AACtB,QAAQ,OAAO,EAAE,MAAM;AACvB,QAAQ,IAAI,EAAE,MAAM;AACpB,KAAK;AACL,IAAI,SAAS,EAAE;AACf,QAAQ,YAAY,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE;AACpF,QAAQ,YAAY,EAAE,KAAK;AAC3B,QAAQ,UAAU,EAAE,MAAM;AAC1B,QAAQ,WAAW,EAAE,MAAM;AAC3B,QAAQ,WAAW,EAAE,QAAQ;AAC7B,QAAQ,cAAc,EAAE,KAAK;AAC7B,QAAQ,eAAe,EAAE,KAAK;AAC9B,KAAK;AACL;AACA;AACY,MAAC,MAAM,GAAG;AACtB,IAAI,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AACrC,IAAI,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AACrC,IAAI,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC;AACrC,IAAI,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;AACnC,IAAI,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,GAAG,CAAC;AACvC,IAAI,QAAQ,EAAE,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;AACrC,IAAI,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AACzC,IAAI,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;AACvC,IAAI,UAAU,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;AACzC,IAAI,SAAS,EAAE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC;AACvC,IAAI,MAAM,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC;AACjC,IAAI,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACnC,IAAI,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACnC,IAAI,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACnC,IAAI,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACnC,IAAI,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACnC,IAAI,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACnC,IAAI,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACnC,IAAI,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACnC,IAAI,OAAO,EAAE,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;AACnC,IAAI,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,OAAO;AACpC,IAAI,EAAE,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE;AAC1B,IAAI,WAAW,EAAE,MAAM,CAAC,QAAQ,CAAC,WAAW;AAC5C,IAAI,aAAa,EAAE,MAAM,CAAC,QAAQ,CAAC,aAAa;AAChD,IAAI,YAAY,EAAE,MAAM,CAAC,QAAQ,CAAC,YAAY;AAC9C,IAAI,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM;AAClC,IAAI,YAAY,EAAE,MAAM,CAAC,QAAQ,CAAC,YAAY;AAC9C,IAAI,SAAS,EAAE,MAAM,CAAC,QAAQ,CAAC,SAAS;AACxC;AACY,MAAC,OAAO,GAAG;AACvB,IAAI,KAAK,EAAE,KAAK;AAChB,IAAI,EAAE,EAAE,KAAK;AACb,IAAI,EAAE,EAAE,KAAK;AACb,IAAI,EAAE,EAAE,MAAM;AACd,IAAI,EAAE,EAAE,MAAM;AACd,IAAI,EAAE,EAAE,MAAM;AACd,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,KAAK,EAAE,MAAM;AACjB;AACY,MAAC,KAAK,GAAG;AACrB,IAAI,IAAI,EAAE,GAAG;AACb,IAAI,EAAE,EAAE,KAAK;AACb,IAAI,EAAE,EAAE,KAAK;AACb,IAAI,EAAE,EAAE,KAAK;AACb,IAAI,EAAE,EAAE,KAAK;AACb,IAAI,EAAE,EAAE,MAAM;AACd,IAAI,KAAK,EAAE,MAAM;AACjB,IAAI,IAAI,EAAE,QAAQ;AAClB;;;;;;;"}
package/dist/esm/index.js ADDED
@@ -0,0 +1,159 @@
1
+ const tokens = {
2
+ color: {
3
+ brand: {
4
+ 50: '#EEF2FF',
5
+ 100: '#C7D2FE',
6
+ 300: '#A5B4FC',
7
+ 500: '#4F46E5',
8
+ 600: '#4338CA',
9
+ 700: '#3730A3',
10
+ 900: '#312E81',
11
+ },
12
+ success: { 50: '#ECFDF5', 500: '#10B981' },
13
+ danger: { 50: '#FEF2F2', 500: '#EF4444' },
14
+ warning: { 50: '#FFFBEB', 500: '#F59E0B' },
15
+ info: { 50: '#EFF6FF', 500: '#3B82F6' },
16
+ gray: {
17
+ 50: '#F9FAFB',
18
+ 100: '#F3F4F6',
19
+ 200: '#E5E7EB',
20
+ 300: '#D1D5DB',
21
+ 400: '#9CA3AF',
22
+ 500: '#6B7280',
23
+ 600: '#4B5563',
24
+ 700: '#374151',
25
+ 800: '#1F2937',
26
+ 900: '#111827',
27
+ },
28
+ },
29
+ semantic: {
30
+ surface: '#FFFFFF',
31
+ bg: '#F9FAFB',
32
+ textPrimary: '#111827',
33
+ textSecondary: '#6B7280',
34
+ textDisabled: '#D1D5DB',
35
+ border: '#E5E7EB',
36
+ borderStrong: '#D1D5DB',
37
+ focusRing: '#4F46E5',
38
+ },
39
+ space: {
40
+ '2xs': 2,
41
+ xs: 4,
42
+ sm: 8,
43
+ md: 16,
44
+ lg: 24,
45
+ xl: 32,
46
+ '2xl': 48,
47
+ '3xl': 64,
48
+ },
49
+ radius: {
50
+ none: 0,
51
+ xs: 2,
52
+ sm: 4,
53
+ md: 6,
54
+ lg: 8,
55
+ xl: 12,
56
+ '2xl': 16,
57
+ full: 9999,
58
+ },
59
+ shadow: {
60
+ none: 'none',
61
+ xs: '0 1px 2px rgba(0,0,0,0.05)',
62
+ sm: '0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)',
63
+ md: '0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)',
64
+ lg: '0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)',
65
+ xl: '0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04)',
66
+ },
67
+ duration: {
68
+ instant: 50,
69
+ fast: 100,
70
+ normal: 200,
71
+ slow: 300,
72
+ deliberate: 500,
73
+ },
74
+ ease: {
75
+ standard: 'cubic-bezier(0.4, 0, 0.2, 1)',
76
+ decelerate: 'cubic-bezier(0, 0, 0.2, 1)',
77
+ accelerate: 'cubic-bezier(0.4, 0, 1, 1)',
78
+ spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
79
+ },
80
+ font: {
81
+ display: 'Plus Jakarta Sans',
82
+ text: 'Inter',
83
+ mono: 'JetBrains Mono',
84
+ },
85
+ fontSize: {
86
+ h1: '36px',
87
+ h2: '28px',
88
+ h3: '22px',
89
+ h4: '18px',
90
+ h5: '16px',
91
+ bodyLg: '16px',
92
+ bodyMd: '14px',
93
+ caption: '12px',
94
+ code: '12px',
95
+ },
96
+ component: {
97
+ buttonHeight: { xs: '28px', sm: '32px', md: '36px', lg: '42px', xl: '50px' },
98
+ radiusButton: '8px',
99
+ radiusCard: '12px',
100
+ radiusModal: '16px',
101
+ radiusBadge: '9999px',
102
+ focusRingWidth: '3px',
103
+ focusRingOffset: '2px',
104
+ },
105
+ };
106
+ // Flat named exports for backwards-compat convenience
107
+ const colors = {
108
+ brand500: tokens.color.brand[500],
109
+ brand600: tokens.color.brand[600],
110
+ brand700: tokens.color.brand[700],
111
+ brand50: tokens.color.brand[50],
112
+ danger500: tokens.color.danger[500],
113
+ danger50: tokens.color.danger[50],
114
+ success500: tokens.color.success[500],
115
+ success50: tokens.color.success[50],
116
+ warning500: tokens.color.warning[500],
117
+ warning50: tokens.color.warning[50],
118
+ gray50: tokens.color.gray[50],
119
+ gray100: tokens.color.gray[100],
120
+ gray200: tokens.color.gray[200],
121
+ gray300: tokens.color.gray[300],
122
+ gray400: tokens.color.gray[400],
123
+ gray500: tokens.color.gray[500],
124
+ gray600: tokens.color.gray[600],
125
+ gray700: tokens.color.gray[700],
126
+ gray800: tokens.color.gray[800],
127
+ gray900: tokens.color.gray[900],
128
+ surface: tokens.semantic.surface,
129
+ bg: tokens.semantic.bg,
130
+ textPrimary: tokens.semantic.textPrimary,
131
+ textSecondary: tokens.semantic.textSecondary,
132
+ textDisabled: tokens.semantic.textDisabled,
133
+ border: tokens.semantic.border,
134
+ borderStrong: tokens.semantic.borderStrong,
135
+ focusRing: tokens.semantic.focusRing,
136
+ };
137
+ const spacing = {
138
+ '2xs': '2px',
139
+ xs: '4px',
140
+ sm: '8px',
141
+ md: '16px',
142
+ lg: '24px',
143
+ xl: '32px',
144
+ '2xl': '48px',
145
+ '3xl': '64px',
146
+ };
147
+ const radii = {
148
+ none: '0',
149
+ xs: '2px',
150
+ sm: '4px',
151
+ md: '6px',
152
+ lg: '8px',
153
+ xl: '12px',
154
+ '2xl': '16px',
155
+ full: '9999px',
156
+ };
157
+
158
+ export { colors, radii, spacing, tokens };
159
+ //# sourceMappingURL=index.js.map
package/dist/esm/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["export const tokens = {\n color: {\n brand: {\n 50: '#EEF2FF',\n 100: '#C7D2FE',\n 300: '#A5B4FC',\n 500: '#4F46E5',\n 600: '#4338CA',\n 700: '#3730A3',\n 900: '#312E81',\n },\n success: { 50: '#ECFDF5', 500: '#10B981' },\n danger: { 50: '#FEF2F2', 500: '#EF4444' },\n warning: { 50: '#FFFBEB', 500: '#F59E0B' },\n info: { 50: '#EFF6FF', 500: '#3B82F6' },\n gray: {\n 50: '#F9FAFB',\n 100: '#F3F4F6',\n 200: '#E5E7EB',\n 300: '#D1D5DB',\n 400: '#9CA3AF',\n 500: '#6B7280',\n 600: '#4B5563',\n 700: '#374151',\n 800: '#1F2937',\n 900: '#111827',\n },\n },\n semantic: {\n surface: '#FFFFFF',\n bg: '#F9FAFB',\n textPrimary: '#111827',\n textSecondary: '#6B7280',\n textDisabled: '#D1D5DB',\n border: '#E5E7EB',\n borderStrong: '#D1D5DB',\n focusRing: '#4F46E5',\n },\n space: {\n '2xs': 2,\n xs: 4,\n sm: 8,\n md: 16,\n lg: 24,\n xl: 32,\n '2xl': 48,\n '3xl': 64,\n },\n radius: {\n none: 0,\n xs: 2,\n sm: 4,\n md: 6,\n lg: 8,\n xl: 12,\n '2xl': 16,\n full: 9999,\n },\n shadow: {\n none: 'none',\n xs: '0 1px 2px rgba(0,0,0,0.05)',\n sm: '0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)',\n md: '0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)',\n lg: '0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)',\n xl: '0 20px 25px rgba(0,0,0,0.10), 0 8px 10px rgba(0,0,0,0.04)',\n },\n duration: {\n instant: 50,\n fast: 100,\n normal: 200,\n slow: 300,\n deliberate: 500,\n },\n ease: {\n standard: 'cubic-bezier(0.4, 0, 0.2, 1)',\n decelerate: 'cubic-bezier(0, 0, 0.2, 1)',\n accelerate: 'cubic-bezier(0.4, 0, 1, 1)',\n spring: 'cubic-bezier(0.34, 1.56, 0.64, 1)',\n },\n font: {\n display: 'Plus Jakarta Sans',\n text: 'Inter',\n mono: 'JetBrains Mono',\n },\n fontSize: {\n h1: '36px',\n h2: '28px',\n h3: '22px',\n h4: '18px',\n h5: '16px',\n bodyLg: '16px',\n bodyMd: '14px',\n caption: '12px',\n code: '12px',\n },\n component: {\n buttonHeight: { xs: '28px', sm: '32px', md: '36px', lg: '42px', xl: '50px' },\n radiusButton: '8px',\n radiusCard: '12px',\n radiusModal: '16px',\n radiusBadge: '9999px',\n focusRingWidth: '3px',\n focusRingOffset: '2px',\n },\n};\n// Flat named exports for backwards-compat convenience\nexport const colors = {\n brand500: tokens.color.brand[500],\n brand600: tokens.color.brand[600],\n brand700: tokens.color.brand[700],\n brand50: tokens.color.brand[50],\n danger500: tokens.color.danger[500],\n danger50: tokens.color.danger[50],\n success500: tokens.color.success[500],\n success50: tokens.color.success[50],\n warning500: tokens.color.warning[500],\n warning50: tokens.color.warning[50],\n gray50: tokens.color.gray[50],\n gray100: tokens.color.gray[100],\n gray200: tokens.color.gray[200],\n gray300: tokens.color.gray[300],\n gray400: tokens.color.gray[400],\n gray500: tokens.color.gray[500],\n gray600: tokens.color.gray[600],\n gray700: tokens.color.gray[700],\n gray800: tokens.color.gray[800],\n gray900: tokens.color.gray[900],\n surface: tokens.semantic.surface,\n bg: tokens.semantic.bg,\n textPrimary: tokens.semantic.textPrimary,\n textSecondary: tokens.semantic.textSecondary,\n textDisabled: tokens.semantic.textDisabled,\n border: tokens.semantic.border,\n borderStrong: tokens.semantic.borderStrong,\n focusRing: tokens.semantic.focusRing,\n};\nexport const spacing = {\n '2xs': '2px',\n xs: '4px',\n sm: '8px',\n md: '16px',\n lg: '24px',\n xl: '32px',\n '2xl': '48px',\n '3xl': '64px',\n};\nexport const radii = {\n none: '0',\n xs: '2px',\n sm: '4px',\n md: '6px',\n lg: '8px',\n xl: '12px',\n '2xl': '16px',\n full: '9999px',\n};\n"],"names":[],"mappings":"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"}
package/dist/global.css ADDED
@@ -0,0 +1,142 @@
1
+ :root {
2
+ /* Base */
3
+ --color-white: #ffffff;
4
+ --color-black: #000000;
5
+
6
+ /* Brand */
7
+ --color-brand-50: #eef2ff;
8
+ --color-brand-100: #c7d2fe;
9
+ --color-brand-300: #a5b4fc;
10
+ --color-brand-500: #4f46e5;
11
+ --color-brand-600: #4338ca;
12
+ --color-brand-700: #3730a3;
13
+ --color-brand-900: #312e81;
14
+
15
+ /* Semantic / Status */
16
+ --color-success-50: #ecfdf5;
17
+ --color-success-100: #d1fae5;
18
+ --color-success-200: #a7f3d0;
19
+ --color-success-500: #10b981;
20
+ --color-success-600: #059669;
21
+ --color-success-700: #047857;
22
+ --color-danger-50: #fef2f2;
23
+ --color-danger-100: #fee2e2;
24
+ --color-danger-200: #fecaca;
25
+ --color-danger-500: #ef4444;
26
+ --color-danger-600: #dc2626;
27
+ --color-danger-700: #b91c1c;
28
+ --color-warning-50: #fffbeb;
29
+ --color-warning-100: #fef3c7;
30
+ --color-warning-200: #fde68a;
31
+ --color-warning-500: #f59e0b;
32
+ --color-warning-600: #d97706;
33
+ --color-warning-700: #b45309;
34
+ --color-info-500: #3b82f6;
35
+ --color-info-50: #eff6ff;
36
+
37
+ /* Gray */
38
+ --color-gray-50: #f9fafb;
39
+ --color-gray-100: #f3f4f6;
40
+ --color-gray-200: #e5e7eb;
41
+ --color-gray-300: #d1d5db;
42
+ --color-gray-400: #9ca3af;
43
+ --color-gray-500: #6b7280;
44
+ --color-gray-600: #4b5563;
45
+ --color-gray-700: #374151;
46
+ --color-gray-800: #1f2937;
47
+ --color-gray-900: #111827;
48
+
49
+ /* Semantic aliases */
50
+ --color-surface: #ffffff;
51
+ --color-bg: #f9fafb;
52
+ --color-text-primary: #111827;
53
+ --color-text-secondary: #6b7280;
54
+ --color-text-disabled: #d1d5db;
55
+ --color-border: #e5e7eb;
56
+ --color-border-strong: #d1d5db;
57
+ --color-focus-ring: #4f46e5;
58
+
59
+ /* Spacing */
60
+ --space-2xs: 2px;
61
+ --space-xs: 4px;
62
+ --space-sm: 8px;
63
+ --space-md: 16px;
64
+ --space-lg: 24px;
65
+ --space-xl: 32px;
66
+ --space-2xl: 48px;
67
+ --space-3xl: 64px;
68
+
69
+ /* Radius */
70
+ --radius-none: 0;
71
+ --radius-xs: 2px;
72
+ --radius-sm: 4px;
73
+ --radius-md: 6px;
74
+ --radius-lg: 8px;
75
+ --radius-xl: 12px;
76
+ --radius-2xl: 16px;
77
+ --radius-full: 9999px;
78
+
79
+ /* Shadows */
80
+ --shadow-none: none;
81
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
82
+ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
83
+ --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
84
+ --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
85
+ --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
86
+
87
+ /* Motion */
88
+ --duration-instant: 50ms;
89
+ --duration-fast: 100ms;
90
+ --duration-normal: 200ms;
91
+ --duration-slow: 300ms;
92
+ --duration-deliberate: 500ms;
93
+ --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
94
+ --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
95
+ --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
96
+ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
97
+
98
+ /* Typography */
99
+ --font-display: 'Plus Jakarta Sans', sans-serif;
100
+ --font-text: 'Inter', sans-serif;
101
+ --font-mono: 'JetBrains Mono', monospace;
102
+
103
+ /* Component tokens */
104
+ --button-height-xs: 28px;
105
+ --button-height-sm: 32px;
106
+ --button-height-md: 36px;
107
+ --button-height-lg: 42px;
108
+ --button-height-xl: 50px;
109
+ --radius-button: 8px;
110
+ --radius-card: 12px;
111
+ --radius-modal: 16px;
112
+ --radius-badge: 9999px;
113
+ --focus-ring-width: 3px;
114
+ --focus-ring-offset: 2px;
115
+ }
116
+
117
+ /* ─── Dark mode ─────────────────────────────────────────────────── */
118
+ [data-theme='dark'] {
119
+ --color-surface: #111827;
120
+ --color-bg: #1f2937;
121
+ --color-text-primary: #f9fafb;
122
+ --color-text-secondary: #9ca3af;
123
+ --color-text-disabled: #4b5563;
124
+ --color-border: #374151;
125
+ --color-border-strong: #4b5563;
126
+ --color-brand-500: #6366f1;
127
+ --color-focus-ring: #6366f1;
128
+ }
129
+
130
+ @media (prefers-color-scheme: dark) {
131
+ :root:not([data-theme='light']) {
132
+ --color-surface: #111827;
133
+ --color-bg: #1f2937;
134
+ --color-text-primary: #f9fafb;
135
+ --color-text-secondary: #9ca3af;
136
+ --color-text-disabled: #4b5563;
137
+ --color-border: #374151;
138
+ --color-border-strong: #4b5563;
139
+ --color-brand-500: #6366f1;
140
+ --color-focus-ring: #6366f1;
141
+ }
142
+ }
package/dist/types/index.d.ts ADDED
@@ -0,0 +1,173 @@
1
+ export declare const tokens: {
2
+ color: {
3
+ brand: {
4
+ 50: string;
5
+ 100: string;
6
+ 300: string;
7
+ 500: string;
8
+ 600: string;
9
+ 700: string;
10
+ 900: string;
11
+ };
12
+ success: {
13
+ 50: string;
14
+ 500: string;
15
+ };
16
+ danger: {
17
+ 50: string;
18
+ 500: string;
19
+ };
20
+ warning: {
21
+ 50: string;
22
+ 500: string;
23
+ };
24
+ info: {
25
+ 50: string;
26
+ 500: string;
27
+ };
28
+ gray: {
29
+ 50: string;
30
+ 100: string;
31
+ 200: string;
32
+ 300: string;
33
+ 400: string;
34
+ 500: string;
35
+ 600: string;
36
+ 700: string;
37
+ 800: string;
38
+ 900: string;
39
+ };
40
+ };
41
+ semantic: {
42
+ surface: string;
43
+ bg: string;
44
+ textPrimary: string;
45
+ textSecondary: string;
46
+ textDisabled: string;
47
+ border: string;
48
+ borderStrong: string;
49
+ focusRing: string;
50
+ };
51
+ space: {
52
+ '2xs': number;
53
+ xs: number;
54
+ sm: number;
55
+ md: number;
56
+ lg: number;
57
+ xl: number;
58
+ '2xl': number;
59
+ '3xl': number;
60
+ };
61
+ radius: {
62
+ none: number;
63
+ xs: number;
64
+ sm: number;
65
+ md: number;
66
+ lg: number;
67
+ xl: number;
68
+ '2xl': number;
69
+ full: number;
70
+ };
71
+ shadow: {
72
+ none: string;
73
+ xs: string;
74
+ sm: string;
75
+ md: string;
76
+ lg: string;
77
+ xl: string;
78
+ };
79
+ duration: {
80
+ instant: number;
81
+ fast: number;
82
+ normal: number;
83
+ slow: number;
84
+ deliberate: number;
85
+ };
86
+ ease: {
87
+ standard: string;
88
+ decelerate: string;
89
+ accelerate: string;
90
+ spring: string;
91
+ };
92
+ font: {
93
+ display: string;
94
+ text: string;
95
+ mono: string;
96
+ };
97
+ fontSize: {
98
+ h1: string;
99
+ h2: string;
100
+ h3: string;
101
+ h4: string;
102
+ h5: string;
103
+ bodyLg: string;
104
+ bodyMd: string;
105
+ caption: string;
106
+ code: string;
107
+ };
108
+ component: {
109
+ buttonHeight: {
110
+ xs: string;
111
+ sm: string;
112
+ md: string;
113
+ lg: string;
114
+ xl: string;
115
+ };
116
+ radiusButton: string;
117
+ radiusCard: string;
118
+ radiusModal: string;
119
+ radiusBadge: string;
120
+ focusRingWidth: string;
121
+ focusRingOffset: string;
122
+ };
123
+ };
124
+ export declare const colors: {
125
+ brand500: string;
126
+ brand600: string;
127
+ brand700: string;
128
+ brand50: string;
129
+ danger500: string;
130
+ danger50: string;
131
+ success500: string;
132
+ success50: string;
133
+ warning500: string;
134
+ warning50: string;
135
+ gray50: string;
136
+ gray100: string;
137
+ gray200: string;
138
+ gray300: string;
139
+ gray400: string;
140
+ gray500: string;
141
+ gray600: string;
142
+ gray700: string;
143
+ gray800: string;
144
+ gray900: string;
145
+ surface: string;
146
+ bg: string;
147
+ textPrimary: string;
148
+ textSecondary: string;
149
+ textDisabled: string;
150
+ border: string;
151
+ borderStrong: string;
152
+ focusRing: string;
153
+ };
154
+ export declare const spacing: {
155
+ '2xs': string;
156
+ xs: string;
157
+ sm: string;
158
+ md: string;
159
+ lg: string;
160
+ xl: string;
161
+ '2xl': string;
162
+ '3xl': string;
163
+ };
164
+ export declare const radii: {
165
+ none: string;
166
+ xs: string;
167
+ sm: string;
168
+ md: string;
169
+ lg: string;
170
+ xl: string;
171
+ '2xl': string;
172
+ full: string;
173
+ };
package/package.json ADDED
@@ -0,0 +1,46 @@
1
+ {
2
+ "name": "@techv/tokens",
3
+ "version": "0.1.0",
4
+ "author": "Pranav V K <pranavvk@techversantinfotech.com>",
5
+ "license": "MIT",
6
+ "main": "./dist/cjs/index.js",
7
+ "module": "./dist/esm/index.js",
8
+ "types": "./dist/types/index.d.ts",
9
+ "exports": {
10
+ ".": {
11
+ "import": {
12
+ "types": "./dist/types/index.d.ts",
13
+ "default": "./dist/esm/index.js"
14
+ },
15
+ "require": {
16
+ "types": "./dist/types/index.d.ts",
17
+ "default": "./dist/cjs/index.js"
18
+ }
19
+ },
20
+ "./global.css": "./dist/global.css"
21
+ },
22
+ "files": [
23
+ "dist"
24
+ ],
25
+ "sideEffects": [
26
+ "./dist/global.css"
27
+ ],
28
+ "devDependencies": {
29
+ "@rollup/plugin-commonjs": "^25.0.7",
30
+ "@rollup/plugin-node-resolve": "^15.2.3",
31
+ "@rollup/plugin-typescript": "^11.1.6",
32
+ "rollup": "^4.17.2",
33
+ "ts-node": "^10.9.2",
34
+ "tslib": "^2.6.2",
35
+ "typescript": "~5.4.5"
36
+ },
37
+ "publishConfig": {
38
+ "registry": "https://registry.npmjs.org",
39
+ "access": "public"
40
+ },
41
+ "scripts": {
42
+ "build": "rollup -c rollup.config.ts --configPlugin typescript && tsc -p tsconfig.build.json && cp src/global.css dist/global.css",
43
+ "lint": "tsc --noEmit",
44
+ "clean": "rm -rf dist"
45
+ }
46
+ }