@@ -14,54 +14,125 @@ const config: Config = {
1414 theme : {
1515 extend : {
1616 colors : {
17- icon : 'var(--color-base)' ,
18- // Text
19- primary : 'var(--color-base)' ,
20- contrast : 'var(--color-contrast)' ,
21- secondary : 'var(--color-secondary)' ,
22- inactive : 'var(--color-text-inactive)' ,
23- dark : 'var(--color-text-dark)' ,
24- inverted : 'var(--color-text-inverted)' ,
25- heading : 'var(--color-heading)' ,
26- surface : {
27- DEFAULT : 'var(--color-surface)' ,
28- 0 : 'var(--color-surface-0)' ,
29- 1 : 'var(--color-surface-1)' ,
30- 2 : 'var(--color-surface-2)' ,
31- 3 : 'var(--color-surface-3)' ,
32- 4 : 'var(--color-surface-4)' ,
33- 5 : 'var(--color-surface-5)' ,
17+ // #region New Design System
18+ // Primary Colors
19+ primary : {
20+ 50 : 'var(--color-primary-50)' ,
21+ 100 : 'var(--color-primary-100)' ,
22+ 200 : 'var(--color-primary-200)' ,
23+ 300 : 'var(--color-primary-300)' ,
24+ 400 : 'var(--color-primary-400)' ,
25+ DEFAULT : 'var(--color-primary-default)' ,
26+ 600 : 'var(--color-primary-600)' ,
27+ 700 : 'var(--color-primary-700)' ,
28+ 800 : 'var(--color-primary-800)' ,
29+ 900 : 'var(--color-primary-900)' ,
30+ 950 : 'var(--color-primary-950)' ,
31+ 1000 : 'var(--color-primary-1000)' ,
3432 } ,
35- red : {
36- DEFAULT : 'var(--color-red)' ,
37- 50 : 'var(--color-red-50)' ,
38- 100 : 'var(--color-red-100)' ,
39- 200 : 'var(--color-red-200)' ,
40- 300 : 'var(--color-red-300)' ,
41- 400 : 'var(--color-red-400)' ,
42- 500 : 'var(--color-red-500)' ,
43- 600 : 'var(--color-red-600)' ,
44- 700 : 'var(--color-red-700)' ,
45- 800 : 'var(--color-red-800)' ,
46- 900 : 'var(--color-red-900)' ,
47- 950 : 'var(--color-red-950)' ,
33+ secondary : {
34+ 50 : 'var(--color-secondary-50)' ,
35+ 100 : 'var(--color-secondary-100)' ,
36+ 200 : 'var(--color-secondary-200)' ,
37+ 300 : 'var(--color-secondary-300)' ,
38+ DEFAULT : 'var(--color-secondary-default)' ,
39+ 500 : 'var(--color-secondary-500)' ,
40+ 600 : 'var(--color-secondary-600)' ,
41+ 700 : 'var(--color-secondary-700)' ,
42+ 800 : 'var(--color-secondary-800)' ,
43+ 900 : 'var(--color-secondary-900)' ,
44+ 950 : 'var(--color-secondary-950)' ,
4845 } ,
49- orange : {
50- DEFAULT : 'var(--color-orange)' ,
51- 50 : 'var(--color-orange-50)' ,
52- 100 : 'var(--color-orange-100)' ,
53- 200 : 'var(--color-orange-200)' ,
54- 300 : 'var(--color-orange-300)' ,
55- 400 : 'var(--color-orange-400)' ,
56- 500 : 'var(--color-orange-500)' ,
57- 600 : 'var(--color-orange-600)' ,
58- 700 : 'var(--color-orange-700)' ,
59- 800 : 'var(--color-orange-800)' ,
60- 900 : 'var(--color-orange-900)' ,
61- 950 : 'var(--color-orange-950)' ,
46+ tertiary : {
47+ 50 : 'var(--color-tertiary-50)' ,
48+ 100 : 'var(--color-tertiary-100)' ,
49+ 200 : 'var(--color-tertiary-200)' ,
50+ 300 : 'var(--color-tertiary-300)' ,
51+ DEFAULT : 'var(--color-tertiary-default)' ,
52+ 500 : 'var(--color-tertiary-500)' ,
53+ 600 : 'var(--color-tertiary-600)' ,
54+ 700 : 'var(--color-tertiary-700)' ,
55+ 800 : 'var(--color-tertiary-800)' ,
56+ 900 : 'var(--color-tertiary-900)' ,
57+ 950 : 'var(--color-tertiary-950)' ,
58+ } ,
59+ // Semantic Colors
60+ error : {
61+ 50 : 'var(--color-error-50)' ,
62+ 100 : 'var(--color-error-100)' ,
63+ 200 : 'var(--color-error-200)' ,
64+ 300 : 'var(--color-error-300)' ,
65+ 400 : 'var(--color-error-400)' ,
66+ DEFAULT : 'var(--color-error-default)' ,
67+ 600 : 'var(--color-error-600)' ,
68+ 700 : 'var(--color-error-700)' ,
69+ 800 : 'var(--color-error-800)' ,
70+ 900 : 'var(--color-error-900)' ,
71+ 950 : 'var(--color-error-950)' ,
72+ } ,
73+ success : {
74+ 50 : 'var(--color-success-50)' ,
75+ 100 : 'var(--color-success-100)' ,
76+ 200 : 'var(--color-success-200)' ,
77+ 300 : 'var(--color-success-300)' ,
78+ 400 : 'var(--color-success-400)' ,
79+ DEFAULT : 'var(--color-success-default)' ,
80+ 600 : 'var(--color-success-600)' ,
81+ 700 : 'var(--color-success-700)' ,
82+ 800 : 'var(--color-success-800)' ,
83+ 900 : 'var(--color-success-900)' ,
84+ 950 : 'var(--color-success-950)' ,
85+ } ,
86+ warning : {
87+ 50 : 'var(--color-warning-50)' ,
88+ 100 : 'var(--color-warning-100)' ,
89+ 200 : 'var(--color-warning-200)' ,
90+ 300 : 'var(--color-warning-300)' ,
91+ DEFAULT : 'var(--color-warning-default)' ,
92+ 500 : 'var(--color-warning-500)' ,
93+ 600 : 'var(--color-warning-600)' ,
94+ 700 : 'var(--color-warning-700)' ,
95+ 800 : 'var(--color-warning-800)' ,
96+ 900 : 'var(--color-warning-900)' ,
97+ 950 : 'var(--color-warning-950)' ,
98+ // Legacy nested properties
99+ bg : 'var(--color-warning-bg)' ,
100+ text : 'var(--color-warning-text)' ,
101+ banner : {
102+ text : 'var(--color-warning-banner-text)' ,
103+ bg : 'var(--color-warning-banner-bg)' ,
104+ side : 'var(--color-warning-banner-side)' ,
105+ } ,
106+ } ,
107+ information : {
108+ 50 : 'var(--color-information-50)' ,
109+ 100 : 'var(--color-information-100)' ,
110+ 200 : 'var(--color-information-200)' ,
111+ 300 : 'var(--color-information-300)' ,
112+ DEFAULT : 'var(--color-information-default)' ,
113+ 500 : 'var(--color-information-500)' ,
114+ 600 : 'var(--color-information-600)' ,
115+ 700 : 'var(--color-information-700)' ,
116+ 800 : 'var(--color-information-800)' ,
117+ 900 : 'var(--color-information-900)' ,
118+ 950 : 'var(--color-information-950)' ,
119+ } ,
120+ // Surface Colors
121+ surface : {
122+ 200 : 'var(--color-surface-200)' ,
123+ 300 : 'var(--color-surface-300)' ,
124+ DEFAULT : 'var(--color-surface-default)' ,
125+ 500 : 'var(--color-surface-500)' ,
126+ 600 : 'var(--color-surface-600)' ,
62127 } ,
128+ // Body Colors
129+ body : {
130+ DEFAULT : 'var(--color-body)' ,
131+ contrast : 'var(--color-body-contrast)' ,
132+ inverted : 'var(--color-body-inverted)' ,
133+ } ,
134+ // Base Color Scales
63135 green : {
64- DEFAULT : 'var(--color-green)' ,
65136 50 : 'var(--color-green-50)' ,
66137 100 : 'var(--color-green-100)' ,
67138 200 : 'var(--color-green-200)' ,
@@ -73,9 +144,9 @@ const config: Config = {
73144 800 : 'var(--color-green-800)' ,
74145 900 : 'var(--color-green-900)' ,
75146 950 : 'var(--color-green-950)' ,
147+ 1000 : 'var(--color-green-1000)' ,
76148 } ,
77149 blue : {
78- DEFAULT : 'var(--color-blue)' ,
79150 50 : 'var(--color-blue-50)' ,
80151 100 : 'var(--color-blue-100)' ,
81152 200 : 'var(--color-blue-200)' ,
@@ -89,7 +160,6 @@ const config: Config = {
89160 950 : 'var(--color-blue-950)' ,
90161 } ,
91162 purple : {
92- DEFAULT : 'var(--color-purple)' ,
93163 50 : 'var(--color-purple-50)' ,
94164 100 : 'var(--color-purple-100)' ,
95165 200 : 'var(--color-purple-200)' ,
@@ -102,12 +172,39 @@ const config: Config = {
102172 900 : 'var(--color-purple-900)' ,
103173 950 : 'var(--color-purple-950)' ,
104174 } ,
175+ red : {
176+ 50 : 'var(--color-red-50)' ,
177+ 100 : 'var(--color-red-100)' ,
178+ 200 : 'var(--color-red-200)' ,
179+ 300 : 'var(--color-red-300)' ,
180+ 400 : 'var(--color-red-400)' ,
181+ 500 : 'var(--color-red-500)' ,
182+ 600 : 'var(--color-red-600)' ,
183+ 700 : 'var(--color-red-700)' ,
184+ 800 : 'var(--color-red-800)' ,
185+ 900 : 'var(--color-red-900)' ,
186+ 950 : 'var(--color-red-950)' ,
187+ } ,
188+ orange : {
189+ 50 : 'var(--color-orange-50)' ,
190+ 100 : 'var(--color-orange-100)' ,
191+ 200 : 'var(--color-orange-200)' ,
192+ 300 : 'var(--color-orange-300)' ,
193+ 400 : 'var(--color-orange-400)' ,
194+ 500 : 'var(--color-orange-500)' ,
195+ 600 : 'var(--color-orange-600)' ,
196+ 700 : 'var(--color-orange-700)' ,
197+ 800 : 'var(--color-orange-800)' ,
198+ 900 : 'var(--color-orange-900)' ,
199+ 950 : 'var(--color-orange-950)' ,
200+ } ,
105201 gray : {
106- DEFAULT : 'var(--color-gray)' ,
202+ black : 'var(--color-gray-black)' ,
203+ white : 'var(--color-gray-white)' ,
107204 50 : 'var(--color-gray-50)' ,
108205 100 : 'var(--color-gray-100)' ,
109206 200 : 'var(--color-gray-200)' ,
110- 300 : 'var(--color-gray-300 )' ,
207+ DEFAULT : 'var(--color-gray-default )' ,
111208 400 : 'var(--color-gray-400)' ,
112209 500 : 'var(--color-gray-500)' ,
113210 600 : 'var(--color-gray-600)' ,
@@ -116,6 +213,22 @@ const config: Config = {
116213 900 : 'var(--color-gray-900)' ,
117214 950 : 'var(--color-gray-950)' ,
118215 } ,
216+ neutral : {
217+ 200 : 'var(--color-neutral-200)' ,
218+ 300 : 'var(--color-neutral-300)' ,
219+ 400 : 'var(--color-neutral-400)' ,
220+ 500 : 'var(--color-neutral-500)' ,
221+ 600 : 'var(--color-neutral-600)' ,
222+ } ,
223+ // #endregion
224+
225+ // #region Legacy Design System
226+ icon : 'var(--color-base)' ,
227+ contrast : 'var(--color-contrast)' ,
228+ inactive : 'var(--color-text-inactive)' ,
229+ dark : 'var(--color-text-dark)' ,
230+ inverted : 'var(--color-text-inverted)' ,
231+ heading : 'var(--color-heading)' ,
119232 bg : {
120233 DEFAULT : 'var(--color-bg)' ,
121234 red : 'var(--color-red-bg)' ,
@@ -125,6 +238,7 @@ const config: Config = {
125238 purple : 'var(--color-purple-bg)' ,
126239 raised : 'var(--color-raised-bg)' ,
127240 } ,
241+ // Legacy Banner Colors
128242 banners : {
129243 error : {
130244 bg : 'var(--banner-error-bg)' ,
@@ -207,15 +321,6 @@ const config: Config = {
207321 hover : 'var(--color-link-hover)' ,
208322 active : 'var(--color-link-active)' ,
209323 } ,
210- warning : {
211- bg : 'var(--color-warning-bg)' ,
212- text : 'var(--color-warning-text)' ,
213- banner : {
214- text : 'var(--color-warning-banner-text)' ,
215- bg : 'var(--color-warning-banner-bg)' ,
216- side : 'var(--color-warning-banner-side)' ,
217- } ,
218- } ,
219324 infoBanner : {
220325 text : 'var(--color-info-banner-text)' ,
221326 bg : 'var(--color-info-banner-bg)' ,
@@ -228,6 +333,7 @@ const config: Config = {
228333 border : 'var(--color-table-border)' ,
229334 alternateRow : ' var(--color-table-alternate-row)' ,
230335 } ,
336+ // #endregion
231337 } ,
232338 backgroundImage : {
233339 mazeBg : 'var(--landing-maze-bg)' ,
0 commit comments