+
+ Primitive Colors
+
+ ${Object.keys(primitiveColors).map((key) => renderColorBlock(primitiveColors[key], key))}
+
+
+
+ Semantic Colors
+ Light Theme
+
+ ${Object.keys(semanticColorsLight).map((key) => renderColorBlock(semanticColorsLight[key], key))}
+
+ Dark Theme
+
+ ${Object.keys(semanticColorsDark).map((key) => renderColorBlock(semanticColorsDark[key], key))}
+
+
+
+ Element Colors
+ Light Theme
+
+ ${Object.keys(elementColorsLight).map((key) => renderColorBlock(elementColorsLight[key], key))}
+
+ Dark Theme
+
+ ${Object.keys(elementColorsDark).map((key) => renderColorBlock(elementColorsDark[key], key))}
+
+
+
+ How to Use and Add Tokens
+
+ Primitive Colors: These are the basic colors used throughout the design system.
+ They serve as the foundation for creating more complex color schemes.
+
+
+ Semantic Colors: These colors convey specific meanings and are used to enhance
+ user experience by providing visual cues. For example, the background, text colors, borders, and shadows.
+
+
+ Element Colors: These colors are specific to UI elements like buttons, alerts, and other
+ components. They are derived from the primitive colors and ensure consistency across the application.
+
+
+ Adding Tokens: To add a new color token, update the respective color object in the codebase.
+ Ensure to follow the naming conventions and maintain consistency. Once added, these tokens can be used in
+ your stylesheets or inline styles.
+
+
+