@techv/design-system 0.1.2 → 0.1.4

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 (10) hide show
  1. package/README.md +235 -33
  2. package/dist/cjs/index.js +14 -0
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/cjs/tokens/dist/esm/index.js +187 -130
  5. package/dist/cjs/tokens/dist/esm/index.js.map +1 -1
  6. package/dist/esm/index.js +1 -1
  7. package/dist/esm/tokens/dist/esm/index.js +174 -131
  8. package/dist/esm/tokens/dist/esm/index.js.map +1 -1
  9. package/dist/styles.css +115 -52
  10. package/package.json +3 -3
package/dist/styles.css CHANGED
@@ -1,9 +1,7 @@
1
1
  :root {
2
- /* Base */
3
2
  --color-white: #ffffff;
4
3
  --color-black: #000000;
5
4
 
6
- /* Brand */
7
5
  --color-brand-50: #eef2ff;
8
6
  --color-brand-100: #c7d2fe;
9
7
  --color-brand-300: #a5b4fc;
@@ -12,7 +10,6 @@
12
10
  --color-brand-700: #3730a3;
13
11
  --color-brand-900: #312e81;
14
12
 
15
- /* Semantic / Status */
16
13
  --color-success-50: #ecfdf5;
17
14
  --color-success-100: #d1fae5;
18
15
  --color-success-200: #a7f3d0;
@@ -34,7 +31,6 @@
34
31
  --color-info-500: #3b82f6;
35
32
  --color-info-50: #eff6ff;
36
33
 
37
- /* Gray */
38
34
  --color-gray-50: #f9fafb;
39
35
  --color-gray-100: #f3f4f6;
40
36
  --color-gray-200: #e5e7eb;
@@ -46,7 +42,6 @@
46
42
  --color-gray-800: #1f2937;
47
43
  --color-gray-900: #111827;
48
44
 
49
- /* Semantic aliases */
50
45
  --color-surface: #ffffff;
51
46
  --color-bg: #f9fafb;
52
47
  --color-text-primary: #111827;
@@ -56,65 +51,133 @@
56
51
  --color-border-strong: #d1d5db;
57
52
  --color-focus-ring: #4f46e5;
58
53
 
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 */
54
+ --red-50: #fef2f2; --red-100: #fee2e2; --red-200: #fecaca; --red-300: #fca5a5;
55
+ --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c;
56
+ --red-800: #991b1b; --red-900: #7f1d1d;
57
+
58
+ --orange-50: #fff7ed; --orange-100: #ffedd5; --orange-200: #fed7aa; --orange-300: #fdba74;
59
+ --orange-400: #fb923c; --orange-500: #f97316; --orange-600: #ea580c; --orange-700: #c2410c;
60
+ --orange-800: #9a3412; --orange-900: #7c2d12;
61
+
62
+ --amber-50: #fffbeb; --amber-100: #fef3c7; --amber-200: #fde68a; --amber-300: #fcd34d;
63
+ --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309;
64
+ --amber-800: #92400e; --amber-900: #78350f;
65
+
66
+ --yellow-50: #fefce8; --yellow-100: #fef9c3; --yellow-200: #fef08a; --yellow-300: #fde047;
67
+ --yellow-400: #facc15; --yellow-500: #eab308; --yellow-600: #ca8a04; --yellow-700: #a16207;
68
+ --yellow-800: #854d0e; --yellow-900: #713f12;
69
+
70
+ --lime-50: #f7fee7; --lime-100: #ecfccb; --lime-200: #d9f99d; --lime-300: #bef264;
71
+ --lime-400: #a3e635; --lime-500: #84cc16; --lime-600: #65a30d; --lime-700: #4d7c0f;
72
+ --lime-800: #3f6212; --lime-900: #365314;
73
+
74
+ --green-50: #f0fdf4; --green-100: #dcfce7; --green-200: #bbf7d0; --green-300: #86efac;
75
+ --green-400: #4ade80; --green-500: #22c55e; --green-600: #16a34a; --green-700: #15803d;
76
+ --green-800: #166534; --green-900: #14532d;
77
+
78
+ --teal-50: #f0fdfa; --teal-100: #ccfbf1; --teal-200: #99f6e4; --teal-300: #5eead4;
79
+ --teal-400: #2dd4bf; --teal-500: #14b8a6; --teal-600: #0d9488; --teal-700: #0f766e;
80
+ --teal-800: #115e59; --teal-900: #134e4a;
81
+
82
+ --cyan-50: #ecfeff; --cyan-100: #cffafe; --cyan-200: #a5f3fc; --cyan-300: #67e8f9;
83
+ --cyan-400: #22d3ee; --cyan-500: #06b6d4; --cyan-600: #0891b2; --cyan-700: #0e7490;
84
+ --cyan-800: #155e75; --cyan-900: #164e63;
85
+
86
+ --sky-50: #f0f9ff; --sky-100: #e0f2fe; --sky-200: #bae6fd; --sky-300: #7dd3fc;
87
+ --sky-400: #38bdf8; --sky-500: #0ea5e9; --sky-600: #0284c7; --sky-700: #0369a1;
88
+ --sky-800: #075985; --sky-900: #0c4a6e;
89
+
90
+ --blue-50: #eff6ff; --blue-100: #dbeafe; --blue-200: #bfdbfe; --blue-300: #93c5fd;
91
+ --blue-400: #60a5fa; --blue-500: #3b82f6; --blue-600: #2563eb; --blue-700: #1d4ed8;
92
+ --blue-800: #1e40af; --blue-900: #1e3a8a;
93
+
94
+ --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe; --indigo-300: #a5b4fc;
95
+ --indigo-400: #818cf8; --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca;
96
+ --indigo-800: #3730a3; --indigo-900: #312e81;
97
+
98
+ --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-200: #ddd6fe; --violet-300: #c4b5fd;
99
+ --violet-400: #a78bfa; --violet-500: #8b5cf6; --violet-600: #7c3aed; --violet-700: #6d28d9;
100
+ --violet-800: #5b21b6; --violet-900: #4c1d95;
101
+
102
+ --purple-50: #faf5ff; --purple-100: #f3e8ff; --purple-200: #e9d5ff; --purple-300: #d8b4fe;
103
+ --purple-400: #c084fc; --purple-500: #a855f7; --purple-600: #9333ea; --purple-700: #7e22ce;
104
+ --purple-800: #6b21a8; --purple-900: #581c87;
105
+
106
+ --pink-50: #fdf2f8; --pink-100: #fce7f3; --pink-200: #fbcfe8; --pink-300: #f9a8d4;
107
+ --pink-400: #f472b6; --pink-500: #ec4899; --pink-600: #db2777; --pink-700: #be185d;
108
+ --pink-800: #9d174d; --pink-900: #831843;
109
+
110
+ --rose-50: #fff1f2; --rose-100: #ffe4e6; --rose-200: #fecdd3; --rose-300: #fda4af;
111
+ --rose-400: #fb7185; --rose-500: #f43f5e; --rose-600: #e11d48; --rose-700: #be123c;
112
+ --rose-800: #9f1239; --rose-900: #881337;
113
+
114
+ --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1;
115
+ --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155;
116
+ --slate-800: #1e293b; --slate-900: #0f172a;
117
+
118
+ --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-200: #e5e7eb; --gray-300: #d1d5db;
119
+ --gray-400: #9ca3af; --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151;
120
+ --gray-800: #1f2937; --gray-900: #111827;
121
+
122
+ --zinc-50: #fafafa; --zinc-100: #f4f4f5; --zinc-200: #e4e4e7; --zinc-300: #d4d4d8;
123
+ --zinc-400: #a1a1aa; --zinc-500: #71717a; --zinc-600: #52525b; --zinc-700: #3f3f46;
124
+ --zinc-800: #27272a; --zinc-900: #18181b;
125
+
126
+ --spacing-px: 1px; --spacing-0: 0px; --spacing-0_5: 2px; --spacing-1: 4px;
127
+ --spacing-1_5: 6px; --spacing-2: 8px; --spacing-2_5: 10px; --spacing-3: 12px;
128
+ --spacing-3_5: 14px; --spacing-4: 16px; --spacing-5: 20px; --spacing-6: 24px;
129
+ --spacing-7: 28px; --spacing-8: 32px; --spacing-9: 36px; --spacing-10: 40px;
130
+ --spacing-12: 48px; --spacing-14: 56px; --spacing-16: 64px; --spacing-20: 80px;
131
+ --spacing-24: 96px; --spacing-32: 128px;
132
+
133
+ --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 20px;
134
+ --fs-2xl: 24px; --fs-3xl: 30px; --fs-4xl: 36px; --fs-5xl: 48px;
135
+
136
+ --fw-3: 300; --fw-4: 400; --fw-5: 500; --fw-6: 600;
137
+ --fw-7: 700; --fw-8: 800; --fw-9: 900;
138
+
139
+ --br-none: 0px; --br-sm: 2px; --br-md: 4px; --br-lg: 8px;
140
+ --br-xl: 12px; --br-2xl: 16px; --br-3xl: 24px; --br-full: 9999px;
141
+
142
+ --bw-0: 0px; --bw-1: 1px; --bw-2: 2px; --bw-4: 4px;
143
+
144
+ --sh-none: none;
145
+ --sh-1: 0 1px 2px rgba(0,0,0,0.05);
146
+ --sh-2: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
147
+ --sh-3: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
148
+ --sh-4: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
149
+ --sh-5: 0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04);
150
+
151
+ --space-2xs: 2px; --space-xs: 4px; --space-sm: 8px; --space-md: 16px;
152
+ --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px;
153
+
154
+ --radius-none: 0; --radius-xs: 2px; --radius-sm: 4px; --radius-md: 6px;
155
+ --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px;
156
+ --radius-button: 8px; --radius-card: 12px; --radius-modal: 16px; --radius-badge: 9999px;
157
+
80
158
  --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;
159
+ --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
160
+ --shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
161
+ --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
162
+ --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05);
163
+ --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 8px 10px rgba(0,0,0,0.04);
164
+
165
+ --duration-instant: 50ms; --duration-fast: 100ms; --duration-normal: 200ms;
166
+ --duration-slow: 300ms; --duration-deliberate: 500ms;
93
167
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
94
168
  --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
95
169
  --ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
96
170
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
97
171
 
98
- /* Typography */
99
172
  --font-display: 'Plus Jakarta Sans', sans-serif;
100
173
  --font-text: 'Inter', sans-serif;
101
174
  --font-mono: 'JetBrains Mono', monospace;
102
175
 
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;
176
+ --button-height-xs: 28px; --button-height-sm: 32px; --button-height-md: 36px;
177
+ --button-height-lg: 42px; --button-height-xl: 50px;
178
+ --focus-ring-width: 3px; --focus-ring-offset: 2px;
115
179
  }
116
180
 
117
- /* ─── Dark mode ─────────────────────────────────────────────────── */
118
181
  [data-theme='dark'] {
119
182
  --color-surface: #111827;
120
183
  --color-bg: #1f2937;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@techv/design-system",
3
- "version": "0.1.2",
3
+ "version": "0.1.4",
4
4
  "author": "Pranav V K <pranavvk@techversantinfotech.com>",
5
5
  "license": "MIT",
6
6
  "main": "./dist/cjs/index.js",
@@ -39,8 +39,8 @@
39
39
  "ts-node": "^10.9.2",
40
40
  "tslib": "^2.6.2",
41
41
  "typescript": "~5.4.5",
42
- "@techv/ui": "0.1.0",
43
- "@techv/tokens": "0.1.0"
42
+ "@techv/tokens": "0.1.0",
43
+ "@techv/ui": "0.1.0"
44
44
  },
45
45
  "publishConfig": {
46
46
  "registry": "https://registry.npmjs.org",