opensource/AppFlowy-Web
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy-Web.git synced 2025-11-28 18:28:02 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: update color tokens to v0.0.5 (#1)

Browse Source 
* chore: import json

* chore: generate css vars
This commit is contained in:
Richard Shiue
2025-06-17 17:20:09 +08:00
committed by GitHub
parent 1b030ed242
commit 0f0ac60ae9
6 changed files with 126 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
scripts/system-token/primitive.json
View File

@@ -8,6 +8,10 @@
"$type": "color", "$type": "color",
"$value": "#e4e8f5" "$value": "#e4e8f5"
}, },
"250": {
"$type": "color",
"$value": "#dde2f1"
},
"300": { "300": {
"$type": "color", "$type": "color",
"$value": "#ced3e6" "$value": "#ced3e6"
@@ -16,6 +20,10 @@
"$type": "color", "$type": "color",
"$value": "#b5bbd3" "$value": "#b5bbd3"
}, },
"450": {
"$type": "color",
"$value": "#a7adc5"
},
"500": { "500": {
"$type": "color", "$type": "color",
"$value": "#989eb7" "$value": "#989eb7"
@@ -269,7 +277,7 @@
"Red": { "Red": {
"100": { "100": {
"$type": "color", "$type": "color",
"$value": "#ffd2dd" "$value": "#ffe6ec"
}, },
"200": { "200": {
"$type": "color", "$type": "color",

58
scripts/system-token/semantic.dark.json
View File

@@ -36,13 +36,21 @@
"$type": "color", "$type": "color",
"$value": "{Blue.400}" "$value": "{Blue.400}"
}, },
"info-on-fill": {
"$type": "color",
"$value": "{Blue.200}"
},
"success": { "success": {
"$type": "color", "$type": "color",
"$value": "{Green.600}" "$value": "{Green.500}"
}, },
"success-hover": { "success-hover": {
"$type": "color", "$type": "color",
"$value": "{Green.500}" "$value": "{Green.400}"
},
"success-on-fill": {
"$type": "color",
"$value": "{Green.200}"
}, },
"warning": { "warning": {
"$type": "color", "$type": "color",
@@ -52,19 +60,31 @@
"$type": "color", "$type": "color",
"$value": "{Orange.500}" "$value": "{Orange.500}"
}, },
"error": { "warning-on-fill": {
"$type": "color", "$type": "color",
"$value": "{Red.500}" "$value": "{Orange.200}"
}, },
"error-hover": { "error": {
"$type": "color", "$type": "color",
"$value": "{Red.400}" "$value": "{Red.400}"
}, },
"error-hover": {
"$type": "color",
"$value": "{Red.300}"
},
"error-on-fill": {
"$type": "color",
"$value": "{Red.200}"
},
"featured": { "featured": {
"$type": "color", "$type": "color",
"$value": "{Neutral.white}" "$value": "{Purple.200}"
}, },
"featured-hover": { "featured-hover": {
"$type": "color",
"$value": "{Purple.300}"
},
"featured-on-fill": {
"$type": "color", "$type": "color",
"$value": "{Purple.200}" "$value": "{Purple.200}"
} }
@@ -282,11 +302,11 @@
}, },
"info-light": { "info-light": {
"$type": "color", "$type": "color",
"$value": "{Blue.200}" "$value": "{Blue.900}"
}, },
"info-light-hover": { "info-light-hover": {
"$type": "color", "$type": "color",
"$value": "{Blue.100}" "$value": "{Blue.800}"
}, },
"info-thick": { "info-thick": {
"$type": "color", "$type": "color",
@@ -298,11 +318,11 @@
}, },
"success-light": { "success-light": {
"$type": "color", "$type": "color",
"$value": "{Green.200}" "$value": "{Green.900}"
}, },
"success-light-hover": { "success-light-hover": {
"$type": "color", "$type": "color",
"$value": "{Green.100}" "$value": "{Green.800}"
}, },
"success-thick": { "success-thick": {
"$type": "color", "$type": "color",
@@ -314,19 +334,19 @@
}, },
"warning-light": { "warning-light": {
"$type": "color", "$type": "color",
"$value": "{Orange.200}" "$value": "{Orange.900}"
}, },
"warning-light-hover": { "warning-light-hover": {
"$type": "color", "$type": "color",
"$value": "{Orange.100}" "$value": "{Orange.800}"
}, },
"error-light": { "error-light": {
"$type": "color", "$type": "color",
"$value": "{Red.200}" "$value": "{Red.900}"
}, },
"error-light-hover": { "error-light-hover": {
"$type": "color", "$type": "color",
"$value": "{Red.100}" "$value": "{Red.800}"
}, },
"error-thick": { "error-thick": {
"$type": "color", "$type": "color",
@@ -416,6 +436,11 @@
} }
}, },
"Surface_Container": { "Surface_Container": {
"layer-00": {
"$type": "color",
"$value": "{Neutral.900}",
"$description": "Settings Side Panel"
},
"layer-01": { "layer-01": {
"$type": "color", "$type": "color",
"$value": "{Neutral.850}", "$value": "{Neutral.850}",
@@ -1000,6 +1025,11 @@
"text-highlight": { "text-highlight": {
"$type": "color", "$type": "color",
"$value": "{Blue.200}" "$value": "{Blue.200}"
},
"icon-shared": {
"$type": "color",
"$value": "{Subtle_Color.Denim.400}",
"$description": "Sidebar Shared Category"
} }
}, },
"Spacing": { "Spacing": {

32
scripts/system-token/semantic.light.json
View File

@@ -36,6 +36,10 @@
"$type": "color", "$type": "color",
"$value": "{Blue.700}" "$value": "{Blue.700}"
}, },
"info-on-fill": {
"$type": "color",
"$value": "{Blue.700}"
},
"success": { "success": {
"$type": "color", "$type": "color",
"$value": "{Green.600}" "$value": "{Green.600}"
@@ -44,6 +48,10 @@
"$type": "color", "$type": "color",
"$value": "{Green.700}" "$value": "{Green.700}"
}, },
"success-on-fill": {
"$type": "color",
"$value": "{Green.700}"
},
"warning": { "warning": {
"$type": "color", "$type": "color",
"$value": "{Orange.600}" "$value": "{Orange.600}"
@@ -52,6 +60,10 @@
"$type": "color", "$type": "color",
"$value": "{Orange.700}" "$value": "{Orange.700}"
}, },
"warning-on-fill": {
"$type": "color",
"$value": "{Orange.700}"
},
"error": { "error": {
"$type": "color", "$type": "color",
"$value": "{Red.600}" "$value": "{Red.600}"
@@ -60,6 +72,10 @@
"$type": "color", "$type": "color",
"$value": "{Red.700}" "$value": "{Red.700}"
}, },
"error-on-fill": {
"$type": "color",
"$value": "{Red.700}"
},
"featured": { "featured": {
"$type": "color", "$type": "color",
"$value": "{Purple.500}" "$value": "{Purple.500}"
@@ -67,6 +83,10 @@
"featured-hover": { "featured-hover": {
"$type": "color", "$type": "color",
"$value": "{Purple.600}" "$value": "{Purple.600}"
},
"featured-on-fill": {
"$type": "color",
"$value": "{Purple.500}"
} }
}, },
"Icon": { "Icon": {
@@ -134,7 +154,7 @@
"Border": { "Border": {
"primary": { "primary": {
"$type": "color", "$type": "color",
"$value": "{Neutral.200}" "$value": "{Neutral.250}"
}, },
"primary-hover": { "primary-hover": {
"$type": "color", "$type": "color",
@@ -416,6 +436,11 @@
} }
}, },
"Surface_Container": { "Surface_Container": {
"layer-00": {
"$type": "color",
"$value": "{Neutral.100}",
"$description": "Settings Side Panel"
},
"layer-01": { "layer-01": {
"$type": "color", "$type": "color",
"$value": "{Neutral.100}", "$value": "{Neutral.100}",
@@ -1000,6 +1025,11 @@
"text-highlight": { "text-highlight": {
"$type": "color", "$type": "color",
"$value": "{Blue.200}" "$value": "{Blue.200}"
},
"icon-shared": {
"$type": "color",
"$value": "{Subtle_Color.Denim.500}",
"$description": "Sidebar Shared Category"
} }
}, },
"Spacing": { "Spacing": {

37
src/styles/variables/semantic.dark.css
View File

@@ -3,7 +3,7 @@
* AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
* *
* Generated from: semantic.dark.json * Generated from: semantic.dark.json
* Generated time: 2025-06-10T08:51:13.564Z * Generated time: 2025-06-17T06:26:25.623Z
* *
* To modify these values, edit the source JSON files and run the token conversion script: * To modify these values, edit the source JSON files and run the token conversion script:
* node scripts/system-token/convert-tokens.cjs * node scripts/system-token/convert-tokens.cjs
@@ -19,14 +19,19 @@
--text-action-hover: #4ec1ff; --text-action-hover: #4ec1ff;
--text-info: #00b5ff; --text-info: #00b5ff;
--text-info-hover: #4ec1ff; --text-info-hover: #4ec1ff;
--text-success: #248569; --text-info-on-fill: #a9e2ff;
--text-success-hover: #48a982; --text-success: #48a982;
--text-success-hover: #71bd9f;
--text-success-on-fill: #c3e5d8;
--text-warning: #db7e21; --text-warning: #db7e21;
--text-warning-hover: #ffa02e; --text-warning-hover: #ffa02e;
--text-error: #f33641; --text-warning-on-fill: #ffe4ab;
--text-error-hover: #ff5050; --text-error: #ff5050;
--text-featured: #ffffff; --text-error-hover: #ff7d87;
--text-featured-hover: #e1b3ff; --text-error-on-fill: #ffa5b4;
--text-featured: #e1b3ff;
--text-featured-hover: #d185ff;
--text-featured-on-fill: #e1b3ff;
--icon-primary: #e4e8f5; --icon-primary: #e4e8f5;
--icon-secondary: #b5bbd3; --icon-secondary: #b5bbd3;
--icon-tertiary: #6f748c; --icon-tertiary: #6f748c;
@@ -76,18 +81,18 @@
--fill-theme-thick-hover: #0092d6; --fill-theme-thick-hover: #0092d6;
--fill-theme-select: #00b5ff26; --fill-theme-select: #00b5ff26;
--fill-text-select: #00b5ff33; --fill-text-select: #00b5ff33;
--fill-info-light: #a9e2ff; --fill-info-light: #00508f;
--fill-info-light-hover: #e3f6ff; --fill-info-light-hover: #0065a9;
--fill-info-thick: #00b5ff; --fill-info-thick: #00b5ff;
--fill-info-thick-hover: #4ec1ff; --fill-info-thick-hover: #4ec1ff;
--fill-success-light: #c3e5d8; --fill-success-light: #305548;
--fill-success-light-hover: #ecf9f5; --fill-success-light-hover: #2e6050;
--fill-success-thick: #48a982; --fill-success-thick: #48a982;
--fill-success-thick-hover: #248569; --fill-success-thick-hover: #248569;
--fill-warning-light: #ffe4ab; --fill-warning-light: #7a3108;
--fill-warning-light-hover: #fff3d5; --fill-warning-light-hover: #93450e;
--fill-error-light: #ffa5b4; --fill-error-light: #6e0a1e;
--fill-error-light-hover: #ffd2dd; --fill-error-light-hover: #8c101c;
--fill-error-thick: #f33641; --fill-error-thick: #f33641;
--fill-error-thick-hover: #ff5050; --fill-error-thick-hover: #ff5050;
--fill-error-select: #f336411a; --fill-error-select: #f336411a;
@@ -108,6 +113,7 @@
--surface-inverse: #3d404f; --surface-inverse: #3d404f;
--surface-secondary: #3d404f; --surface-secondary: #3d404f;
--surface-overlay: #00000099; --surface-overlay: #00000099;
--surface-container-layer-00: #272930;
--surface-container-layer-01: #32343f; --surface-container-layer-01: #32343f;
--surface-container-layer-02: #3d404f; --surface-container-layer-02: #3d404f;
--surface-container-layer-03: #54596e; --surface-container-layer-03: #54596e;
@@ -242,6 +248,7 @@
--brand-amber: #ffbd00; --brand-amber: #ffbd00;
--brand-lemon: #ffce00; --brand-lemon: #ffce00;
--other-colors-text-highlight: #a9e2ff; --other-colors-text-highlight: #a9e2ff;
--other-colors-icon-shared: #9ab6ed;
--spacing-spacing-0: 0px; --spacing-spacing-0: 0px;
--spacing-spacing-xs: 4px; --spacing-spacing-xs: 4px;
--spacing-spacing-s: 6px; --spacing-spacing-s: 6px;

13
src/styles/variables/semantic.light.css
View File

@@ -3,7 +3,7 @@
* AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
* *
* Generated from: semantic.light.json * Generated from: semantic.light.json
* Generated time: 2025-06-10T08:51:13.561Z * Generated time: 2025-06-17T06:26:25.620Z
* *
* To modify these values, edit the source JSON files and run the token conversion script: * To modify these values, edit the source JSON files and run the token conversion script:
* node scripts/system-token/convert-tokens.cjs * node scripts/system-token/convert-tokens.cjs
@@ -19,14 +19,19 @@
--text-action-hover: #0078c0; --text-action-hover: #0078c0;
--text-info: #0092d6; --text-info: #0092d6;
--text-info-hover: #0078c0; --text-info-hover: #0078c0;
--text-info-on-fill: #0078c0;
--text-success: #248569; --text-success: #248569;
--text-success-hover: #29725d; --text-success-hover: #29725d;
--text-success-on-fill: #29725d;
--text-warning: #db7e21; --text-warning: #db7e21;
--text-warning-hover: #b75f17; --text-warning-hover: #b75f17;
--text-warning-on-fill: #b75f17;
--text-error: #e71d32; --text-error: #e71d32;
--text-error-hover: #ad1625; --text-error-hover: #ad1625;
--text-error-on-fill: #ad1625;
--text-featured: #9327ff; --text-featured: #9327ff;
--text-featured-hover: #7a1dcc; --text-featured-hover: #7a1dcc;
--text-featured-on-fill: #9327ff;
--icon-primary: #21232a; --icon-primary: #21232a;
--icon-secondary: #6f748c; --icon-secondary: #6f748c;
--icon-tertiary: #b5bbd3; --icon-tertiary: #b5bbd3;
@@ -42,7 +47,7 @@
--icon-featured-thick: #9327ff; --icon-featured-thick: #9327ff;
--icon-featured-thick-hover: #7a1dcc; --icon-featured-thick-hover: #7a1dcc;
--icon-on-fill: #ffffff; --icon-on-fill: #ffffff;
--border-primary: #e4e8f5; --border-primary: #dde2f1;
--border-primary-hover: #ced3e6; --border-primary-hover: #ced3e6;
--border-secondary: #3d404f; --border-secondary: #3d404f;
--border-secondary-hover: #54596e; --border-secondary-hover: #54596e;
@@ -86,7 +91,7 @@
--fill-success-thick-hover: #248569; --fill-success-thick-hover: #248569;
--fill-warning-light: #fff3d5; --fill-warning-light: #fff3d5;
--fill-warning-light-hover: #ffe4ab; --fill-warning-light-hover: #ffe4ab;
--fill-error-light: #ffd2dd; --fill-error-light: #ffe6ec;
--fill-error-light-hover: #ffa5b4; --fill-error-light-hover: #ffa5b4;
--fill-error-thick: #e71d32; --fill-error-thick: #e71d32;
--fill-error-thick-hover: #ad1625; --fill-error-thick-hover: #ad1625;
@@ -108,6 +113,7 @@
--surface-inverse: #21232a; --surface-inverse: #21232a;
--surface-secondary: #21232a; --surface-secondary: #21232a;
--surface-overlay: #00000099; --surface-overlay: #00000099;
--surface-container-layer-00: #f8faff;
--surface-container-layer-01: #f8faff; --surface-container-layer-01: #f8faff;
--surface-container-layer-02: #e4e8f5; --surface-container-layer-02: #e4e8f5;
--surface-container-layer-03: #ced3e6; --surface-container-layer-03: #ced3e6;
@@ -242,6 +248,7 @@
--brand-amber: #ffbd00; --brand-amber: #ffbd00;
--brand-lemon: #ffce00; --brand-lemon: #ffce00;
--other-colors-text-highlight: #a9e2ff; --other-colors-text-highlight: #a9e2ff;
--other-colors-icon-shared: #3267d1;
--spacing-spacing-0: 0px; --spacing-spacing-0: 0px;
--spacing-spacing-xs: 4px; --spacing-spacing-xs: 4px;
--spacing-spacing-s: 6px; --spacing-spacing-s: 6px;

13
tailwind/new-colors.cjs
View File

@@ -3,7 +3,7 @@
* AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY * AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
* *
* This file is auto-generated by convert-tokens.cjs script * This file is auto-generated by convert-tokens.cjs script
* Generation time: 2025-06-10T08:51:13.565Z * Generation time: 2025-06-17T06:26:25.623Z
* *
* To modify these colors, edit the source JSON files and run the token conversion script: * To modify these colors, edit the source JSON files and run the token conversion script:
* node scripts/system-token/convert-tokens.cjs * node scripts/system-token/convert-tokens.cjs
@@ -22,14 +22,19 @@ module.exports = {
"action-hover": "var(--text-action-hover)", "action-hover": "var(--text-action-hover)",
"info": "var(--text-info)", "info": "var(--text-info)",
"info-hover": "var(--text-info-hover)", "info-hover": "var(--text-info-hover)",
"info-on-fill": "var(--text-info-on-fill)",
"success": "var(--text-success)", "success": "var(--text-success)",
"success-hover": "var(--text-success-hover)", "success-hover": "var(--text-success-hover)",
"success-on-fill": "var(--text-success-on-fill)",
"warning": "var(--text-warning)", "warning": "var(--text-warning)",
"warning-hover": "var(--text-warning-hover)", "warning-hover": "var(--text-warning-hover)",
"warning-on-fill": "var(--text-warning-on-fill)",
"error": "var(--text-error)", "error": "var(--text-error)",
"error-hover": "var(--text-error-hover)", "error-hover": "var(--text-error-hover)",
"error-on-fill": "var(--text-error-on-fill)",
"featured": "var(--text-featured)", "featured": "var(--text-featured)",
"featured-hover": "var(--text-featured-hover)" "featured-hover": "var(--text-featured-hover)",
"featured-on-fill": "var(--text-featured-on-fill)"
}, },
"icon": { "icon": {
"primary": "var(--icon-primary)", "primary": "var(--icon-primary)",
@@ -127,6 +132,7 @@ module.exports = {
"inverse": "var(--surface-inverse)", "inverse": "var(--surface-inverse)",
"secondary": "var(--surface-secondary)", "secondary": "var(--surface-secondary)",
"overlay": "var(--surface-overlay)", "overlay": "var(--surface-overlay)",
"container-layer-00": "var(--surface-container-layer-00)",
"container-layer-01": "var(--surface-container-layer-01)", "container-layer-01": "var(--surface-container-layer-01)",
"container-layer-02": "var(--surface-container-layer-02)", "container-layer-02": "var(--surface-container-layer-02)",
"container-layer-03": "var(--surface-container-layer-03)" "container-layer-03": "var(--surface-container-layer-03)"
@@ -268,6 +274,7 @@ module.exports = {
"lemon": "var(--brand-lemon)" "lemon": "var(--brand-lemon)"
}, },
"other": { "other": {
"colors-text-highlight": "var(--other-colors-text-highlight)" "colors-text-highlight": "var(--other-colors-text-highlight)",
"colors-icon-shared": "var(--other-colors-icon-shared)"
} }
}; };