diff --git a/design-tokens/tokens/color.dark.json b/design-tokens/tokens/color.dark.json index 08d8675d9..0d8c4534a 100644 --- a/design-tokens/tokens/color.dark.json +++ b/design-tokens/tokens/color.dark.json @@ -7,9 +7,19 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "primary": { + "$type": "color", + "$value": "{color.brand}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -22,9 +32,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -36,9 +44,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -50,9 +56,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -64,9 +68,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -78,9 +80,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -92,9 +92,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -107,9 +105,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -121,9 +117,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -135,9 +129,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -149,9 +141,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -165,9 +155,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -179,9 +167,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -193,9 +179,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -210,9 +194,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -224,9 +206,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -238,9 +218,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -255,9 +233,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -269,9 +245,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -283,9 +257,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -297,9 +269,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -311,9 +281,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -326,9 +294,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -342,9 +308,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -356,9 +320,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -370,9 +332,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -384,9 +344,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -398,9 +356,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -412,9 +368,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -427,9 +381,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -442,9 +394,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -459,9 +409,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -473,9 +421,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -487,9 +433,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -501,9 +445,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -515,9 +457,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -529,9 +469,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -543,9 +481,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -557,9 +493,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -571,9 +505,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -585,9 +517,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -599,9 +529,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -613,9 +541,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -627,9 +553,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -641,9 +565,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } diff --git a/design-tokens/tokens/color.light.json b/design-tokens/tokens/color.light.json index 45fdfa3c3..8043f422f 100644 --- a/design-tokens/tokens/color.light.json +++ b/design-tokens/tokens/color.light.json @@ -7,9 +7,19 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "primary": { + "$type": "color", + "$value": "{color.brand}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -22,9 +32,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -36,9 +44,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -50,9 +56,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -64,9 +68,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -78,9 +80,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -92,9 +92,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -107,9 +105,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -121,9 +117,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -135,9 +129,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -149,9 +141,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -165,9 +155,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -179,9 +167,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -193,9 +179,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -210,9 +194,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -224,9 +206,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -238,9 +218,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -255,9 +233,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -269,9 +245,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -283,9 +257,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -297,9 +269,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -311,9 +281,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -326,9 +294,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -342,9 +308,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -356,9 +320,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -370,9 +332,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -384,9 +344,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -398,9 +356,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -412,9 +368,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -427,9 +381,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -442,9 +394,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -459,9 +409,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -473,9 +421,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -487,9 +433,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -501,9 +445,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -515,9 +457,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -529,9 +469,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -543,9 +481,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -557,9 +493,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -571,9 +505,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -585,9 +517,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -599,9 +529,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -613,9 +541,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -627,9 +553,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } @@ -641,9 +565,7 @@ "$extensions": { "com.figma": { "hiddenFromPublishing": false, - "scopes": [ - "ALL_SCOPES" - ], + "scopes": ["ALL_SCOPES"], "codeSyntax": {} } } diff --git a/design-tokens/tones/color.warm-light.json b/design-tokens/tones/color.warm-light.json new file mode 100644 index 000000000..33bffe2cd --- /dev/null +++ b/design-tokens/tones/color.warm-light.json @@ -0,0 +1,348 @@ +{ + "primary": { + "$type": "color", + "$value": "{color.purple.20}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "background": { + "default": { + "$type": "color", + "$value": "{color.white.100}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "front": { + "$type": "color", + "$value": "{color.white.100}", + "$description": "Background color applied on top of background-back.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "back": { + "$type": "color", + "$value": "{color.tan.10}", + "$description": "Background color applied to the base layer of the application.", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "contrast": { + "$type": "color", + "$value": "{color.black.4}", + "$description": "abc", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "active": { + "$type": "color", + "$value": "{color.background.contrast}", + "$description": "abc", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "selected": { + "$type": "color", + "$value": "{color.brand}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "status": { + "critical": { + "$type": "color", + "$value": "{color.red.20-12pc}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "ok": { + "$type": "color", + "$value": "{color.green.10-12pc}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "warning": { + "$type": "color", + "$value": "{color.yellow.10-12pc}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "info": { + "$type": "color", + "$value": "{color.blue.10-12pc}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + } + }, + "validation": { + "critical": { + "$type": "color", + "$value": "{color.red.20-24pc}", + "$description": "abc", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "warning": { + "$type": "color", + "$value": "{color.yellow.10-24pc}", + "$description": "abc", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "ok": { + "$type": "color", + "$value": "{color.green.10-24pc}", + "$description": "abc", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + } + } + }, + "chart": { + "qualitative": { + "10": { + "$type": "color", + "$value": "{color.blue.20}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "20": { + "$type": "color", + "$value": "{color.orange.20}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "30": { + "$type": "color", + "$value": "{color.purple.20}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "40": { + "$type": "color", + "$value": "{color.teal.10}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "50": { + "$type": "color", + "$value": "{color.yellow.30}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "60": { + "$type": "color", + "$value": "{color.purple.10}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "70": { + "$type": "color", + "$value": "{color.blue.10}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "10-secondary": { + "$type": "color", + "$value": "{color.blue.20-12pc}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "20-secondary": { + "$type": "color", + "$value": "{color.orange.20-12pc}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "30-secondary": { + "$type": "color", + "$value": "{color.purple.20 -12pc}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "40-secondary": { + "$type": "color", + "$value": "{color.teal.10-12pc}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "50-secondary": { + "$type": "color", + "$value": "{color.yellow.30-12pc}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "60-secondary": { + "$type": "color", + "$value": "{color.purple.10-12pc}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + }, + "70-secondary": { + "$type": "color", + "$value": "{color.blue.10-12pc}", + "$description": "", + "$extensions": { + "com.figma": { + "hiddenFromPublishing": false, + "scopes": ["ALL_SCOPES"], + "codeSyntax": {} + } + } + } + } + } +} diff --git a/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx b/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx index f83ae175e..b887f5b40 100644 --- a/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx +++ b/sandbox/grommet-app/src/components/DashboardCard/DashboardCard.jsx @@ -15,6 +15,7 @@ import { LinkNext, ShareRounded } from 'grommet-icons'; export const DashboardCard = ({ icon, external, + hideCta, level, title, subtitle, @@ -54,13 +55,15 @@ export const DashboardCard = ({ {subtitle} - - {external ? ( - - ) : ( - - )} - + {!hideCta ? ( + + {external ? ( + + ) : ( + + )} + + ) : undefined} {children && ( ( title={service.name} subtitle={service.category} description={service.description || 'hi'} - actions={} + actions={} level={3} /> ))} diff --git a/sandbox/grommet-app/src/pages/GetStarted.jsx b/sandbox/grommet-app/src/pages/GetStarted.jsx index dd012fad1..adbe45814 100644 --- a/sandbox/grommet-app/src/pages/GetStarted.jsx +++ b/sandbox/grommet-app/src/pages/GetStarted.jsx @@ -4,8 +4,23 @@ import { DashboardCard } from '../components'; import { AppsRounded, UserAdd } from 'grommet-icons'; import { useContext } from 'react'; -export const GetStarted = ({ heading = true }) => { +export const GetStarted = ({ heading = true, kind }) => { const size = useContext(ResponsiveContext); + + let kindStyles = {}; + if (kind === 'next') + kindStyles = { + container: { + background: { color: 'background-contrast' }, + pad: 'xsmall', + border: true, + round: 'xsmall', + }, + icon: { + size: 'xlarge', + color: 'primary', + }, + }; return ( {heading && ( @@ -29,9 +44,12 @@ export const GetStarted = ({ heading = true }) => { title="Find services" subtitle="Discover and launch services from our catalog." icon={ - // TO DO is this override fine? - - + + } level={3} @@ -40,7 +58,11 @@ export const GetStarted = ({ heading = true }) => { title="Manage workspace" level={3} subtitle="Set up this workspace, users, access, and more." - icon={} + icon={ + + + + } /> @@ -49,4 +71,5 @@ export const GetStarted = ({ heading = true }) => { GetStarted.propTypes = { heading: PropTypes.bool, + kind: PropTypes.oneOfType(['next', 'push']), }; diff --git a/sandbox/grommet-app/src/pages/next/Notifications.jsx b/sandbox/grommet-app/src/pages/next/Notifications.jsx index 7c69b9c64..3b821b058 100644 --- a/sandbox/grommet-app/src/pages/next/Notifications.jsx +++ b/sandbox/grommet-app/src/pages/next/Notifications.jsx @@ -50,35 +50,37 @@ export const Notifications = () => { - - Recents - - - {datum => ( - - - {statuses[datum.status].iconCompact} + + + Recents + + + {datum => ( + + + {statuses[datum.status].iconCompact} + + + {datum.service} + + + {datum.message} + - - {datum.service} - + {Intl.DateTimeFormat(undefined, { + timeStyle: 'short', + }).format(new Date(datum.createdAt))} - {datum.message} - - - {Intl.DateTimeFormat(undefined, { - timeStyle: 'short', - }).format(new Date(datum.createdAt))} - - )} - + )} + + ); diff --git a/sandbox/grommet-app/src/pages/next/QuickActions.jsx b/sandbox/grommet-app/src/pages/next/QuickActions.jsx index 70102c243..7d669b9c4 100644 --- a/sandbox/grommet-app/src/pages/next/QuickActions.jsx +++ b/sandbox/grommet-app/src/pages/next/QuickActions.jsx @@ -19,7 +19,7 @@ export const QuickActions = ({ edit = true, icons }) => { {edit && (