Skip to content

Commit cf10bf0

Browse files
tayseataysea
authored
Merge pull request #4354 from grommet/notification-colors
Add notification colors
2 parents 2560e37 + a65ebcf commit cf10bf0

File tree

4 files changed

+603
-230
lines changed

4 files changed

+603
-230
lines changed

‎design-tokens/tokens/semantic/color.dark.json

+180-50
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,56 @@
145145
}
146146
}
147147
},
148+
"ok": {
149+
"$type": "color",
150+
"$value": "{base.color.green.500-Opacity30}",
151+
"$description": "",
152+
"$extensions": {
153+
"com.figma": {
154+
"hiddenFromPublishing": false,
155+
"scopes": ["FRAME_FILL", "SHAPE_FILL"],
156+
"codeSyntax": {}
157+
}
158+
}
159+
},
160+
"primary": {
161+
"default": {
162+
"$type": "color",
163+
"$value": "{base.color.green.600}",
164+
"$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.",
165+
"$extensions": {
166+
"com.figma": {
167+
"hiddenFromPublishing": false,
168+
"scopes": ["FRAME_FILL", "SHAPE_FILL"],
169+
"codeSyntax": {}
170+
}
171+
}
172+
},
173+
"hover": {
174+
"$type": "color",
175+
"$value": "{TBD}",
176+
"$description": "Hover color variant of the primary color.",
177+
"$extensions": {
178+
"com.figma": {
179+
"hiddenFromPublishing": false,
180+
"scopes": ["FRAME_FILL", "SHAPE_FILL"],
181+
"codeSyntax": {}
182+
}
183+
}
184+
}
185+
},
186+
"info": {
187+
"$type": "color",
188+
"$value": "{base.color.blue.400-Opacity12}",
189+
"$description": "",
190+
"$extensions": {
191+
"com.figma": {
192+
"hiddenFromPublishing": false,
193+
"scopes": ["FRAME_FILL", "SHAPE_FILL"],
194+
"codeSyntax": {}
195+
}
196+
}
197+
},
148198
"selected": {
149199
"strong": {
150200
"enabled": {
@@ -198,56 +248,6 @@
198248
}
199249
}
200250
}
201-
},
202-
"primary": {
203-
"default": {
204-
"$type": "color",
205-
"$value": "{base.color.green.600}",
206-
"$description": "The default primary color of components at a rest/ enabled state. The term ‘primary’ denoting hierarchy - the most important thing. Use to style components prominently and give greater visual hierarchy.",
207-
"$extensions": {
208-
"com.figma": {
209-
"hiddenFromPublishing": false,
210-
"scopes": ["FRAME_FILL", "SHAPE_FILL"],
211-
"codeSyntax": {}
212-
}
213-
}
214-
},
215-
"hover": {
216-
"$type": "color",
217-
"$value": "{TBD}",
218-
"$description": "Hover color variant of the primary color.",
219-
"$extensions": {
220-
"com.figma": {
221-
"hiddenFromPublishing": false,
222-
"scopes": ["FRAME_FILL", "SHAPE_FILL"],
223-
"codeSyntax": {}
224-
}
225-
}
226-
}
227-
},
228-
"ok": {
229-
"$type": "color",
230-
"$value": "{base.color.green.500-Opacity30}",
231-
"$description": "",
232-
"$extensions": {
233-
"com.figma": {
234-
"hiddenFromPublishing": false,
235-
"scopes": ["FRAME_FILL", "SHAPE_FILL"],
236-
"codeSyntax": {}
237-
}
238-
}
239-
},
240-
"info": {
241-
"$type": "color",
242-
"$value": "{base.color.blue.400-Opacity12}",
243-
"$description": "",
244-
"$extensions": {
245-
"com.figma": {
246-
"hiddenFromPublishing": false,
247-
"scopes": ["FRAME_FILL", "SHAPE_FILL"],
248-
"codeSyntax": {}
249-
}
250-
}
251251
}
252252
},
253253
"border": {
@@ -592,6 +592,136 @@
592592
"codeSyntax": {}
593593
}
594594
}
595+
},
596+
"onCritical": {
597+
"strong": {
598+
"$type": "color",
599+
"$value": "{color.text.strong}",
600+
"$description": "Text color to be used on status backgrounds.",
601+
"$extensions": {
602+
"com.figma": {
603+
"hiddenFromPublishing": false,
604+
"scopes": ["TEXT_FILL"],
605+
"codeSyntax": {}
606+
}
607+
}
608+
},
609+
"default": {
610+
"$type": "color",
611+
"$value": "{color.text.default}",
612+
"$description": "Text color to be used on status backgrounds.",
613+
"$extensions": {
614+
"com.figma": {
615+
"hiddenFromPublishing": false,
616+
"scopes": ["TEXT_FILL"],
617+
"codeSyntax": {}
618+
}
619+
}
620+
}
621+
},
622+
"onInfo": {
623+
"strong": {
624+
"$type": "color",
625+
"$value": "{color.text.strong}",
626+
"$description": "Text color to be used on status backgrounds.",
627+
"$extensions": {
628+
"com.figma": {
629+
"hiddenFromPublishing": false,
630+
"scopes": ["TEXT_FILL"],
631+
"codeSyntax": {}
632+
}
633+
}
634+
},
635+
"default": {
636+
"$type": "color",
637+
"$value": "{color.text.default}",
638+
"$description": "Text color to be used on status backgrounds.",
639+
"$extensions": {
640+
"com.figma": {
641+
"hiddenFromPublishing": false,
642+
"scopes": ["TEXT_FILL"],
643+
"codeSyntax": {}
644+
}
645+
}
646+
}
647+
},
648+
"onOk": {
649+
"strong": {
650+
"$type": "color",
651+
"$value": "{color.text.strong}",
652+
"$description": "Text color to be used on status backgrounds.",
653+
"$extensions": {
654+
"com.figma": {
655+
"hiddenFromPublishing": false,
656+
"scopes": ["TEXT_FILL"],
657+
"codeSyntax": {}
658+
}
659+
}
660+
},
661+
"default": {
662+
"$type": "color",
663+
"$value": "{color.text.default}",
664+
"$description": "Text color to be used on status backgrounds.",
665+
"$extensions": {
666+
"com.figma": {
667+
"hiddenFromPublishing": false,
668+
"scopes": ["TEXT_FILL"],
669+
"codeSyntax": {}
670+
}
671+
}
672+
}
673+
},
674+
"onUnknown": {
675+
"strong": {
676+
"$type": "color",
677+
"$value": "{color.text.strong}",
678+
"$description": "Text color to be used on status backgrounds.",
679+
"$extensions": {
680+
"com.figma": {
681+
"hiddenFromPublishing": false,
682+
"scopes": ["TEXT_FILL"],
683+
"codeSyntax": {}
684+
}
685+
}
686+
},
687+
"default": {
688+
"$type": "color",
689+
"$value": "{color.text.default}",
690+
"$description": "Text color to be used on status backgrounds.",
691+
"$extensions": {
692+
"com.figma": {
693+
"hiddenFromPublishing": false,
694+
"scopes": ["TEXT_FILL"],
695+
"codeSyntax": {}
696+
}
697+
}
698+
}
699+
},
700+
"onWarning": {
701+
"strong": {
702+
"$type": "color",
703+
"$value": "{color.text.strong}",
704+
"$description": "Text color to be used on status backgrounds.",
705+
"$extensions": {
706+
"com.figma": {
707+
"hiddenFromPublishing": false,
708+
"scopes": ["TEXT_FILL"],
709+
"codeSyntax": {}
710+
}
711+
}
712+
},
713+
"default": {
714+
"$type": "color",
715+
"$value": "{color.text.default}",
716+
"$description": "Text color to be used on status backgrounds.",
717+
"$extensions": {
718+
"com.figma": {
719+
"hiddenFromPublishing": false,
720+
"scopes": ["TEXT_FILL"],
721+
"codeSyntax": {}
722+
}
723+
}
724+
}
595725
}
596726
},
597727
"icon": {

0 commit comments

Comments
 (0)