fix(docs): update colors page with correct values and theme support

- Fix info color #00bcd4 -> #1890ff, success #4caf50 -> #52c41a
- Remove incorrect Default and Secondary cards
- Use CSS variables for color swatches so they update with theme presets
- Replace hardcoded colors in SCSS with --ty-* custom properties
- Update primary colors description to reflect the token system

Author: wangdicoder

apps/docs/src/containers/color/color-page.scss

@@ -21,12 +21,12 @@
     font-weight: 600;
 
     tr {
-      border: 1px solid rgba(0, 0, 0, .1);
+      border: 1px solid var(--ty-color-border-secondary);
     }
 
     td {
       padding: 10px;
-      color: #525F7F;
+      color: var(--ty-color-text-secondary);
       width: 400px;
       line-height: 40px;
     }
@@ -49,7 +49,7 @@
     align-items: center;
     justify-content: space-around;
     border-radius: 0 0 5px 5px;
-    background-color: #f4f5f7;
+    background-color: var(--ty-color-bg-spotlight);
     padding: 20px 10px;
   }
 
@@ -59,11 +59,11 @@
 
   &__title {
     font-size: 11px;
-    color: #62748c;
+    color: var(--ty-color-text-tertiary);
   }
 
   &__subtitle {
     font-size: 14px;
-    color: #525f7f;
+    color: var(--ty-color-text-secondary);
   }
 }

apps/docs/src/containers/color/index.tsx

@@ -5,13 +5,17 @@ import { useLocaleContext } from '../../context/locale-context';
 type ColorCardProps = {
   name: string;
   hex: string;
+  cssVar?: string;
   nameLabel: string;
   hexLabel: string;
 };
 
-const ColorCard = ({ name, hex, nameLabel, hexLabel }: ColorCardProps): React.ReactElement => (
+const ColorCard = ({ name, hex, cssVar, nameLabel, hexLabel }: ColorCardProps): React.ReactElement => (
   <div className="color-card">
-    <div className="color-card__header" style={{ backgroundColor: hex }} />
+    <div
+      className="color-card__header"
+      style={{ backgroundColor: cssVar ? `var(${cssVar})` : hex }}
+    />
     <div className="color-card__footer">
       <div>
         <p className="color-card__title">{nameLabel}</p>
@@ -48,13 +52,11 @@ const ColorPage = (): React.ReactElement => {
       <h2 className="markdown__heading-2">{s.color.primaryTitle}</h2>
       <p className="markdown__p">{s.color.primaryDesc}</p>
       <div className="color-page__color-panel">
-        <ColorCard name={s.color.defaultColor} hex="#172b4d" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
-        <ColorCard name={s.color.primary} hex="#6E41BF" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
-        <ColorCard name={s.color.secondary} hex="#f7fafc" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
-        <ColorCard name={s.color.info} hex="#00bcd4" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
-        <ColorCard name={s.color.success} hex="#4caf50" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
-        <ColorCard name={s.color.danger} hex="#f44336" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
-        <ColorCard name={s.color.warning} hex="#ff9800" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
+        <ColorCard name={s.color.primary} hex="#6e41bf" cssVar="--ty-color-primary" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
+        <ColorCard name={s.color.info} hex="#1890ff" cssVar="--ty-color-info" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
+        <ColorCard name={s.color.success} hex="#52c41a" cssVar="--ty-color-success" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
+        <ColorCard name={s.color.warning} hex="#ff9800" cssVar="--ty-color-warning" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
+        <ColorCard name={s.color.danger} hex="#f44336" cssVar="--ty-color-danger" nameLabel={s.color.nameLabel} hexLabel={s.color.hexLabel} />
       </div>
 
       <h2 className="markdown__heading-2">{s.color.neutralsTitle}</h2>