[Color system] add missing variants

src/configs/base.ts

@@ -23,6 +23,24 @@ export const config: Config = {
         figmaName: 'Surface/Default',
       },
     },
+    {
+      name: 'surfaceNeutral',
+      description: 'For use as a background color in neutral badges.',
+      light: {lightness: 91},
+      dark: {lightness: 21},
+      meta: {
+        figmaName: 'SurfaceNeutral/Default',
+      },
+    },
+    {
+      name: 'surfaceNeutralSubdued',
+      description: 'For use as a background color in neutral banners.',
+      light: {lightness: 97},
+      dark: {lightness: 30},
+      meta: {
+        figmaName: 'SurfaceNeutral/Subdued',
+      },
+    },
     {
       name: 'surfaceSubdued',
       description:
@@ -63,6 +81,16 @@ export const config: Config = {
         figmaName: 'Surface/Pressed',
       },
     },
+    {
+      name: 'surfaceDepressed',
+      description:
+        'For use as a surface color on interactive elements such as resource list items and action list items when in a depressed state.',
+      light: {lightness: 62},
+      dark: {lightness: 35},
+      meta: {
+        figmaName: 'Surface/Depressed',
+      },
+    },
     {
       name: 'backdrop',
       description:
@@ -419,6 +447,15 @@ export const config: Config = {
         figmaName: 'Action Secondary/Pressed',
       },
     },
+    {
+      name: 'actionSecondaryDepressed',
+      description: 'Used as a depressed state for secondary buttons',
+      light: {lightness: 48},
+      dark: {lightness: 47},
+      meta: {
+        figmaName: 'Action Secondary/Depressed',
+      },
+    },
   ],
   primary: [
     {
@@ -461,6 +498,16 @@ export const config: Config = {
         figmaName: 'Action Primary/Pressed',
       },
     },
+    {
+      name: 'actionPrimaryDepressed',
+      description:
+        'Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.',
+      light: {lightness: 22},
+      dark: {lightness: 65},
+      meta: {
+        figmaName: 'Action Primary/Depressed',
+      },
+    },
     {
       name: 'iconOnPrimary',
       description:
@@ -583,6 +630,16 @@ export const config: Config = {
         figmaName: 'Surface Critical/Subdued Pressed',
       },
     },
+    {
+      name: 'surfaceCriticalSubduedDepressed',
+      description:
+        'For use as a surface color on critical interactive elements including action list items in a depressed state.',
+      light: {lightness: 82},
+      dark: {lightness: 29},
+      meta: {
+        figmaName: 'Surface Critical/Subdued Depressed',
+      },
+    },
     {
       name: 'textCritical',
       description:
@@ -633,6 +690,16 @@ export const config: Config = {
         figmaName: 'Action Critical/Pressed',
       },
     },
+    {
+      name: 'actionCriticalDepressed',
+      description:
+        'For use as the background color for depressed destructive buttons, and as the background color for error toast messages.',
+      light: {lightness: 22, saturation: saturationAdjustmentFn(2.7)},
+      dark: {lightness: 60},
+      meta: {
+        figmaName: 'Action Critical/Depressed',
+      },
+    },
     {
       name: 'iconOnCritical',
       description: 'For use as a fill color for icons on critical actions.',