opensource/AppFlowy-Web
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy-Web.git synced 2025-11-28 02:07:45 +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",
"$value": "#e4e8f5"
},
"250": {
"$type": "color",
"$value": "#dde2f1"
},
"300": {
"$type": "color",
"$value": "#ced3e6"
@@ -16,6 +20,10 @@
"$type": "color",
"$value": "#b5bbd3"
},
"450": {
"$type": "color",
"$value": "#a7adc5"
},
"500": {
"$type": "color",
"$value": "#989eb7"
@@ -269,7 +277,7 @@
"Red": {
"100": {
"$type": "color",
"$value": "#ffd2dd"
"$value": "#ffe6ec"
},
"200": {
"$type": "color",

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

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

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

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

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

@@ -3,7 +3,7 @@
* AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
*
* 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:
* node scripts/system-token/convert-tokens.cjs
@@ -19,14 +19,19 @@
--text-action-hover: #4ec1ff;
--text-info: #00b5ff;
--text-info-hover: #4ec1ff;
--text-success: #248569;
--text-success-hover: #48a982;
--text-info-on-fill: #a9e2ff;
--text-success: #48a982;
--text-success-hover: #71bd9f;
--text-success-on-fill: #c3e5d8;
--text-warning: #db7e21;
--text-warning-hover: #ffa02e;
--text-error: #f33641;
--text-error-hover: #ff5050;
--text-featured: #ffffff;
--text-featured-hover: #e1b3ff;
--text-warning-on-fill: #ffe4ab;
--text-error: #ff5050;
--text-error-hover: #ff7d87;
--text-error-on-fill: #ffa5b4;
--text-featured: #e1b3ff;
--text-featured-hover: #d185ff;
--text-featured-on-fill: #e1b3ff;
--icon-primary: #e4e8f5;
--icon-secondary: #b5bbd3;
--icon-tertiary: #6f748c;
@@ -76,18 +81,18 @@
--fill-theme-thick-hover: #0092d6;
--fill-theme-select: #00b5ff26;
--fill-text-select: #00b5ff33;
--fill-info-light: #a9e2ff;
--fill-info-light-hover: #e3f6ff;
--fill-info-light: #00508f;
--fill-info-light-hover: #0065a9;
--fill-info-thick: #00b5ff;
--fill-info-thick-hover: #4ec1ff;
--fill-success-light: #c3e5d8;
--fill-success-light-hover: #ecf9f5;
--fill-success-light: #305548;
--fill-success-light-hover: #2e6050;
--fill-success-thick: #48a982;
--fill-success-thick-hover: #248569;
--fill-warning-light: #ffe4ab;
--fill-warning-light-hover: #fff3d5;
--fill-error-light: #ffa5b4;
--fill-error-light-hover: #ffd2dd;
--fill-warning-light: #7a3108;
--fill-warning-light-hover: #93450e;
--fill-error-light: #6e0a1e;
--fill-error-light-hover: #8c101c;
--fill-error-thick: #f33641;
--fill-error-thick-hover: #ff5050;
--fill-error-select: #f336411a;
@@ -108,6 +113,7 @@
--surface-inverse: #3d404f;
--surface-secondary: #3d404f;
--surface-overlay: #00000099;
--surface-container-layer-00: #272930;
--surface-container-layer-01: #32343f;
--surface-container-layer-02: #3d404f;
--surface-container-layer-03: #54596e;
@@ -242,6 +248,7 @@
--brand-amber: #ffbd00;
--brand-lemon: #ffce00;
--other-colors-text-highlight: #a9e2ff;
--other-colors-icon-shared: #9ab6ed;
--spacing-spacing-0: 0px;
--spacing-spacing-xs: 4px;
--spacing-spacing-s: 6px;

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

@@ -3,7 +3,7 @@
* AUTO-GENERATED FILE - DO NOT EDIT DIRECTLY
*
* 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:
* node scripts/system-token/convert-tokens.cjs
@@ -19,14 +19,19 @@
--text-action-hover: #0078c0;
--text-info: #0092d6;
--text-info-hover: #0078c0;
--text-info-on-fill: #0078c0;
--text-success: #248569;
--text-success-hover: #29725d;
--text-success-on-fill: #29725d;
--text-warning: #db7e21;
--text-warning-hover: #b75f17;
--text-warning-on-fill: #b75f17;
--text-error: #e71d32;
--text-error-hover: #ad1625;
--text-error-on-fill: #ad1625;
--text-featured: #9327ff;
--text-featured-hover: #7a1dcc;
--text-featured-on-fill: #9327ff;
--icon-primary: #21232a;
--icon-secondary: #6f748c;
--icon-tertiary: #b5bbd3;
@@ -42,7 +47,7 @@
--icon-featured-thick: #9327ff;
--icon-featured-thick-hover: #7a1dcc;
--icon-on-fill: #ffffff;
--border-primary: #e4e8f5;
--border-primary: #dde2f1;
--border-primary-hover: #ced3e6;
--border-secondary: #3d404f;
--border-secondary-hover: #54596e;
@@ -86,7 +91,7 @@
--fill-success-thick-hover: #248569;
--fill-warning-light: #fff3d5;
--fill-warning-light-hover: #ffe4ab;
--fill-error-light: #ffd2dd;
--fill-error-light: #ffe6ec;
--fill-error-light-hover: #ffa5b4;
--fill-error-thick: #e71d32;
--fill-error-thick-hover: #ad1625;
@@ -108,6 +113,7 @@
--surface-inverse: #21232a;
--surface-secondary: #21232a;
--surface-overlay: #00000099;
--surface-container-layer-00: #f8faff;
--surface-container-layer-01: #f8faff;
--surface-container-layer-02: #e4e8f5;
--surface-container-layer-03: #ced3e6;
@@ -242,6 +248,7 @@
--brand-amber: #ffbd00;
--brand-lemon: #ffce00;
--other-colors-text-highlight: #a9e2ff;
--other-colors-icon-shared: #3267d1;
--spacing-spacing-0: 0px;
--spacing-spacing-xs: 4px;
--spacing-spacing-s: 6px;

13
tailwind/new-colors.cjs
View File

@@ -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-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:
* node scripts/system-token/convert-tokens.cjs
@@ -22,14 +22,19 @@ module.exports = {
"action-hover": "var(--text-action-hover)",
"info": "var(--text-info)",
"info-hover": "var(--text-info-hover)",
"info-on-fill": "var(--text-info-on-fill)",
"success": "var(--text-success)",
"success-hover": "var(--text-success-hover)",
"success-on-fill": "var(--text-success-on-fill)",
"warning": "var(--text-warning)",
"warning-hover": "var(--text-warning-hover)",
"warning-on-fill": "var(--text-warning-on-fill)",
"error": "var(--text-error)",
"error-hover": "var(--text-error-hover)",
"error-on-fill": "var(--text-error-on-fill)",
"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": {
"primary": "var(--icon-primary)",
@@ -127,6 +132,7 @@ module.exports = {
"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)",
"container-layer-02": "var(--surface-container-layer-02)",
"container-layer-03": "var(--surface-container-layer-03)"
@@ -268,6 +274,7 @@ module.exports = {
"lemon": "var(--brand-lemon)"
},
"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)"
}
};