design token update

docs/src/pages/concepts/design-tokens.mdx

@@ -7,6 +7,17 @@ switchTheme: true
 
 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.
 
+## Design Tokens are
+
+- Colors
+- Dimension
+- Sizing
+- Spacing
+- Shadows
+- Borders
+- Opacity
+- Typography
+
 ## 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.
@@ -21,12 +32,6 @@ By defining semantic colors, designers and developers speak the same language. F
 Now, when talking about a particular element, everyone should also directly know its color role as well as its interactivity. This is to prevent an element from accidentally having a different hover color than all other elements with the same color role.
 Another advantage of semantic colors is that new designers and developers can more quickly understand the structure of components and how they are built.
 
-## How are the semantic colors composed?
-
-The semantic colors are composed as follows.
-
-The colors are composed as follows.
-
 <Preview>
   <SemanticColorsDemo />
 </Preview>

themes/theme-b2b/src/semantic-colors.ts → themes/theme-b2b/src/design-token.ts

@@ -59,3 +59,17 @@ export const textColors = {
     link: colors.blue60,
   },
 };
+
+export const uiColors = {
+  page: {
+    background: colors.gray10,
+    foreground: colors.gray00,
+  },
+};
+
+export const boxShadows = {
+  boxShadow: {
+    soft: '0 4px 4px rgba(210, 210, 210, .25)',
+    medium: '0 4px 4px rgba(165, 165, 165, .25)',
+  },
+};

themes/theme-b2b/src/index.ts

@@ -8,7 +8,7 @@ import {
   secondaryColors,
   disabledColors,
   statusColors,
-} from './semantic-colors';
+} from './design-token';
 
 export const webFontUrl = [
   'https://fonts.bunny.net/css?family=inter:400,600,700',