chore: adjust color tokens v0.0.5.1 (AppFlowy-IO#13)

* chore: import json

* chore: generate css variables

* chore: adjust toast and tooltip

Author: richardshiue

scripts/system-token/semantic.dark.json

@@ -426,10 +426,6 @@
       "$type": "color",
       "$value": "{Neutral.800}"
     },
-    "secondary": {
-      "$type": "color",
-      "$value": "{Neutral.800}"
-    },
     "overlay": {
       "$type": "color",
       "$value": "{Neutral.alpha-black-60}"
@@ -1024,7 +1020,7 @@
   "Other_Colors": {
     "text-highlight": {
       "$type": "color",
-      "$value": "{Blue.200}"
+      "$value": "{Blue.1000}"
     },
     "icon-shared": {
       "$type": "color",

scripts/system-token/semantic.light.json

@@ -426,10 +426,6 @@
       "$type": "color",
       "$value": "{Neutral.1000}"
     },
-    "secondary": {
-      "$type": "color",
-      "$value": "{Neutral.1000}"
-    },
     "overlay": {
       "$type": "color",
       "$value": "{Neutral.alpha-black-60}"

src/components/ui/sonner.tsx

@@ -16,7 +16,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       visibleToasts={1}
       toastOptions={{
         className:
-          '!shadow-toast px-4 py-2 max-w-[360px] w-fit gap-2 bg-surface-secondary border-none text-text-on-fill rounded-400',
+          '!shadow-toast px-4 py-2 max-w-[360px] w-fit gap-2 bg-surface-inverse border-none text-text-on-fill rounded-400',
         classNames: {
           actionButton: '!text-text-action font-semibold !px-2 hover:!text-text-action-hover bg-transparent hover:bg-transparent',
         },

src/components/ui/tooltip.tsx

@@ -48,7 +48,7 @@ function TooltipContent ({
 
           // Styling and layout
           'shadow-tooltip max-w-[360px] z-50 origin-[--radix-tooltip-content-transform-origin]',
-          'w-fit rounded-400 bg-surface-secondary px-3 py-2 text-sm text-text-on-fill',
+          'w-fit rounded-400 bg-surface-inverse px-3 py-2 text-sm text-text-on-fill',
           'flex flex-col whitespace-pre-wrap break-all',
 
           className,

src/styles/variables/semantic.dark.css

@@ -3,7 +3,7 @@
  * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
  * 
  * Generated from: semantic.dark.json
- * Generated time: 2025-06-17T06:26:25.623Z
+ * Generated time: 2025-06-24T06:01:38.064Z
  * 
  * To modify these values, edit the source JSON files and run the token conversion script:
  * node scripts/system-token/convert-tokens.cjs
@@ -111,7 +111,6 @@
   --surface-layer-04: #363845;
   --surface-layer-04-hover: #3d404f;
   --surface-inverse: #3d404f;
-  --surface-secondary: #3d404f;
   --surface-overlay: #00000099;
   --surface-container-layer-00: #272930;
   --surface-container-layer-01: #32343f;
@@ -247,7 +246,7 @@
   --brand-golden: #f7931e;
   --brand-amber: #ffbd00;
   --brand-lemon: #ffce00;
-  --other-colors-text-highlight: #a9e2ff;
+  --other-colors-text-highlight: #003c77;
   --other-colors-icon-shared: #9ab6ed;
   --spacing-spacing-0: 0px;
   --spacing-spacing-xs: 4px;

src/styles/variables/semantic.light.css

@@ -3,7 +3,7 @@
  * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
  * 
  * Generated from: semantic.light.json
- * Generated time: 2025-06-17T06:26:25.620Z
+ * Generated time: 2025-06-24T06:01:38.059Z
  * 
  * To modify these values, edit the source JSON files and run the token conversion script:
  * node scripts/system-token/convert-tokens.cjs
@@ -111,7 +111,6 @@
   --surface-layer-04: #ffffff;
   --surface-layer-04-hover: #f8faff;
   --surface-inverse: #21232a;
-  --surface-secondary: #21232a;
   --surface-overlay: #00000099;
   --surface-container-layer-00: #f8faff;
   --surface-container-layer-01: #f8faff;

tailwind/new-colors.cjs

@@ -3,7 +3,7 @@
  * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
  * 
  * This file is auto-generated by convert-tokens.cjs script
- * Generation time: 2025-06-17T06:26:25.623Z
+ * Generation time: 2025-06-24T06:01:38.065Z
  * 
  * To modify these colors, edit the source JSON files and run the token conversion script:
  * node scripts/system-token/convert-tokens.cjs
@@ -130,7 +130,6 @@ module.exports = {
     "layer-04": "var(--surface-layer-04)",
     "layer-04-hover": "var(--surface-layer-04-hover)",
     "inverse": "var(--surface-inverse)",
-    "secondary": "var(--surface-secondary)",
     "overlay": "var(--surface-overlay)",
     "container-layer-00": "var(--surface-container-layer-00)",
     "container-layer-01": "var(--surface-container-layer-01)",