Toolkit theme updates: primary button text and bg tokens (#3294)

* Toolkit theme updates

* update screenshots

toolkit/theme/foundations/colors.ts

@@ -58,6 +58,10 @@ const DEFAULT_THEME_COLORS = {
     primary: {
       _light: { value: '{colors.blue.600}' },
       _dark: { value: '{colors.blue.600}' },
+      text: {
+        _light: { value: '{colors.white}' },
+        _dark: { value: '{colors.white}' },
+      },
     },
   },
   link: {

toolkit/theme/foundations/semanticTokens.ts

@@ -73,6 +73,9 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         bg: {
           DEFAULT: { value: { _light: '{colors.theme.button.primary._light}', _dark: '{colors.theme.button.primary._dark}' } },
         },
+        text: {
+          DEFAULT: { value: { _light: '{colors.theme.button.primary.text._light}', _dark: '{colors.theme.button.primary.text._dark}' } },
+        },
       },
       outline: {
         fg: {
@@ -292,7 +295,7 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
         error: { value: '{colors.text.error}' },
       },
       bg: {
-        DEFAULT: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
+        DEFAULT: { value: '{colors.bg.primary}' },
         readOnly: { value: { _light: '{colors.gray.200}', _dark: '{colors.gray.800}' } },
       },
       border: {

toolkit/theme/recipes/button.recipe.ts

@@ -15,14 +15,14 @@ export const recipe = defineRecipe({
     variant: {
       solid: {
         bg: 'button.solid.bg',
-        color: 'white',
+        color: 'button.solid.text',
         _hover: {
           bg: 'hover',
         },
         _loading: {
           opacity: 1,
           '& .chakra-spinner': {
-            borderColor: 'gray.200',
+            borderColor: 'button.solid.text',
             borderBottomColor: 'spinner.track',
             borderInlineStartColor: 'spinner.track',
           },

toolkit/theme/recipes/field.recipe.ts

@@ -49,7 +49,7 @@ export const recipe = defineSlotRecipe({
       'true': {
         label: {
           pos: 'absolute',
-          bg: 'bg',
+          bg: 'bg.primary',
           top: '2px',
           left: '2px',
           color: 'input.placeholder',

toolkit/theme/recipes/table.recipe.ts

@@ -43,7 +43,7 @@ export const recipe = defineSlotRecipe({
           borderColor: 'border.divider',
         },
         row: {
-          bg: 'bg',
+          bg: 'bg.primary',
         },
       },
     },