Change background color for text

docs/src/pages/concepts/semantic-colors.mdx → docs/src/pages/concepts/design-tokens.mdx

@@ -1,8 +1,12 @@
 ---
-title: Semantic Colors
+title: Design Token
 switchTheme: true
 ---
 
+## What are design tokens?
+
+Design tokens are the overarching design characteristics required for creating and maintaining a design system. These are, for example, the basic values for spacing, border, colors, animations, etc., which are defined centrally and maintained independently of individual components.
+
 ## Why do we introduce semantic colors?
 
 When developing UI elements, the definition of colors and their use plays a central role. For this purpose, the UX/UI designer defines a color palette and makes the information available to the developer.
@@ -23,39 +27,6 @@ The semantic colors are composed as follows.
 
 The colors are composed as follows.
 
-Primary
-
-- primary
-- text
-- hover
-
-Secondary
-
-- secondary
-- text
-- hover
-
-Disabled
-
-- disabled
-- text
-- background
-
-Status
-
-- info
-  - info
-  - text
-  - border
-- success
-- warning
-- error
-
-Text
-
-- text
-- link
-
 <Preview>
   <SemanticColorsDemo />
 </Preview>

themes/theme-b2b/src/semantic-colors.ts

@@ -2,7 +2,7 @@ import { colors } from './colors';
 
 export const themeColors = {
   text: colors.gray70,
-  background: colors.gray10,
+  background: colors.gray00,
   primary: colors.orange60,
   secondary: colors.gray70,
   disabled: colors.gray40,
@@ -43,6 +43,7 @@ export const statusColors = {
       border: colors.blue80,
     },
 
+    // To Do? Naming changes?
     success: themeColors.success,
 
     warning: themeColors.warning,