javascript/AppFlowy-Web
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy-Web.git synced 2026-03-13 10:00:26 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
1d172f5dfffd11c4e890d4582de04caa39ddab5c
AppFlowy-Web/scripts/system-token/semantic.dark.json
Kilu.He 1d172f5dff chore: modified design tokens (#101)
2025-04-21 14:41:32 +08:00

1010 lines
22 KiB
JSON
Raw Blame History

{
"Text": {
"primary": {
"$type": "color",
"$value": "{Neutral.200}"
},
"secondary": {
"$type": "color",
"$value": "{Neutral.400}"
},
"tertiary": {
"$type": "color",
"$value": "{Neutral.600}"
},
"quaternary": {
"$type": "color",
"$value": "{Neutral.1000}"
},
"on-fill": {
"$type": "color",
"$value": "{Neutral.white}"
},
"action": {
"$type": "color",
"$value": "{Blue.500}"
},
"action-hover": {
"$type": "color",
"$value": "{Blue.400}"
},
"info": {
"$type": "color",
"$value": "{Blue.500}"
},
"info-hover": {
"$type": "color",
"$value": "{Blue.400}"
},
"success": {
"$type": "color",
"$value": "{Green.600}"
},
"success-hover": {
"$type": "color",
"$value": "{Green.500}"
},
"warning": {
"$type": "color",
"$value": "{Orange.600}"
},
"warning-hover": {
"$type": "color",
"$value": "{Orange.500}"
},
"error": {
"$type": "color",
"$value": "{Red.500}"
},
"error-hover": {
"$type": "color",
"$value": "{Red.400}"
},
"featured": {
"$type": "color",
"$value": "{Purple.500}"
},
"featured-hover": {
"$type": "color",
"$value": "{Purple.400}"
}
},
"Icon": {
"primary": {
"$type": "color",
"$value": "{Neutral.200}"
},
"secondary": {
"$type": "color",
"$value": "{Neutral.400}"
},
"tertiary": {
"$type": "color",
"$value": "{Neutral.600}"
},
"quaternary": {
"$type": "color",
"$value": "{Neutral.1000}"
},
"info-thick": {
"$type": "color",
"$value": "{Blue.500}"
},
"info-thick-hover": {
"$type": "color",
"$value": "{Blue.400}"
},
"success-thick": {
"$type": "color",
"$value": "{Green.600}"
},
"success-thick-hover": {
"$type": "color",
"$value": "{Green.500}"
},
"warning-thick": {
"$type": "color",
"$value": "{Orange.600}"
},
"warning-thick-hover": {
"$type": "color",
"$value": "{Orange.500}"
},
"error-thick": {
"$type": "color",
"$value": "{Red.500}"
},
"error-thick-hover": {
"$type": "color",
"$value": "{Red.400}"
},
"featured-thick": {
"$type": "color",
"$value": "{Purple.500}"
},
"featured-thick-hover": {
"$type": "color",
"$value": "{Purple.400}"
},
"on-fill": {
"$type": "color",
"$value": "{Neutral.white}"
}
},
"Border": {
"primary": {
"$type": "color",
"$value": "{Neutral.800}"
},
"primary-hover": {
"$type": "color",
"$value": "{Neutral.700}"
},
"secondary": {
"$type": "color",
"$value": "{Neutral.300}"
},
"secondary-hover": {
"$type": "color",
"$value": "{Neutral.200}"
},
"tertiary": {
"$type": "color",
"$value": "{Neutral.100}"
},
"tertiary-hover": {
"$type": "color",
"$value": "{Neutral.white}"
},
"theme-thick": {
"$type": "color",
"$value": "{Blue.500}"
},
"theme-thick-hover": {
"$type": "color",
"$value": "{Blue.600}"
},
"info-thick": {
"$type": "color",
"$value": "{Blue.500}"
},
"info-thick-hover": {
"$type": "color",
"$value": "{Blue.400}"
},
"success-thick": {
"$type": "color",
"$value": "{Green.600}"
},
"success-thick-hover": {
"$type": "color",
"$value": "{Green.500}"
},
"warning-thick": {
"$type": "color",
"$value": "{Orange.600}"
},
"warning-thick-hover": {
"$type": "color",
"$value": "{Orange.500}"
},
"error-thick": {
"$type": "color",
"$value": "{Red.500}"
},
"error-thick-hover": {
"$type": "color",
"$value": "{Red.400}"
},
"featured-thick": {
"$type": "color",
"$value": "{Purple.500}"
},
"featured-thick-hover": {
"$type": "color",
"$value": "{Purple.400}"
}
},
"Fill": {
"primary": {
"$type": "color",
"$value": "{Neutral.900}"
},
"primary-hover": {
"$type": "color",
"$value": "{Neutral.800}"
},
"secondary": {
"$type": "color",
"$value": "{Neutral.600}"
},
"secondary-hover": {
"$type": "color",
"$value": "{Neutral.500}"
},
"tertiary": {
"$type": "color",
"$value": "{Neutral.300}"
},
"tertiary-hover": {
"$type": "color",
"$value": "{Neutral.200}"
},
"quaternary": {
"$type": "color",
"$value": "{Neutral.100}"
},
"quaternary-hover": {
"$type": "color",
"$value": "{Neutral.white}"
},
"content": {
"$type": "color",
"$value": "{Neutral.alpha-white-0}"
},
"content-hover": {
"$type": "color",
"$value": "{Neutral.alpha-grey-100-05}",
"$description": "Used for hover state, eg. button, navigation item, menu item and grid item."
},
"content-visible": {
"$type": "color",
"$value": "{Neutral.alpha-grey-100-05}",
"$description": "Used for hover state, eg. button, navigation item, menu item and grid item."
},
"content-visible-hover": {
"$type": "color",
"$value": "{Neutral.alpha-grey-100-10}"
},
"theme-thick": {
"$type": "color",
"$value": "{Blue.500}"
},
"theme-thick-hover": {
"$type": "color",
"$value": "{Blue.600}"
},
"theme-select": {
"$type": "color",
"$value": "{Blue.alpha-blue-500-15}"
},
"info-light": {
"$type": "color",
"$value": "{Blue.200}"
},
"info-light-hover": {
"$type": "color",
"$value": "{Blue.100}"
},
"info-thick": {
"$type": "color",
"$value": "{Blue.500}"
},
"info-thick-hover": {
"$type": "color",
"$value": "{Blue.400}"
},
"success-light": {
"$type": "color",
"$value": "{Green.200}"
},
"success-light-hover": {
"$type": "color",
"$value": "{Green.100}"
},
"warning-light": {
"$type": "color",
"$value": "{Orange.200}"
},
"warning-light-hover": {
"$type": "color",
"$value": "{Orange.100}"
},
"error-light": {
"$type": "color",
"$value": "{Red.200}"
},
"error-light-hover": {
"$type": "color",
"$value": "{Red.100}"
},
"error-thick": {
"$type": "color",
"$value": "{Red.500}"
},
"error-thick-hover": {
"$type": "color",
"$value": "{Red.400}"
},
"error-select": {
"$type": "color",
"$value": "{Red.alpha-red-500-10}"
},
"featured-light": {
"$type": "color",
"$value": "{Purple.200}"
},
"featured-light-hover": {
"$type": "color",
"$value": "{Purple.100}"
},
"featured-thick": {
"$type": "color",
"$value": "{Purple.500}"
},
"featured-thick-hover": {
"$type": "color",
"$value": "{Purple.400}"
}
},
"Surface": {
"primary": {
"$type": "color",
"$value": "{Neutral.900}"
},
"primary-hover": {
"$type": "color",
"$value": "{Neutral.800}"
},
"secondary": {
"$type": "color",
"$value": "{Neutral.800}"
},
"overlay": {
"$type": "color",
"$value": "{Neutral.alpha-black-60}"
}
},
"Background": {
"primary": {
"$type": "color",
"$value": "{Neutral.1000}"
},
"secondary": {
"$type": "color",
"$value": "{Neutral.900}"
},
"tertiary": {
"$type": "color",
"$value": "{Neutral.800}"
},
"quaternary": {
"$type": "color",
"$value": "{Neutral.700}"
}
},
"Badge_Color": {
"1": {
"1-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Rose.100}"
},
"1-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Rose.200}"
},
"1-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Rose.300}"
},
"1-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Rose.400}"
},
"1-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Rose.500}"
},
"1-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Rose.600}"
}
},
"2": {
"2-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.100}"
},
"2-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.200}"
},
"2-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.300}"
},
"2-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.400}"
},
"2-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.500}"
},
"2-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.600}"
}
},
"3": {
"3-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.100}"
},
"3-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.200}"
},
"3-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.300}"
},
"3-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.400}"
},
"3-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.500}"
},
"3-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.600}"
}
},
"4": {
"4-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Mango.100}"
},
"4-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Mango.200}"
},
"4-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Mango.300}"
},
"4-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Mango.400}"
},
"4-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Mango.500}"
},
"4-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Mango.600}"
}
},
"5": {
"5-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.100}"
},
"5-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.200}"
},
"5-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.300}"
},
"5-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.400}"
},
"5-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.500}"
},
"5-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.600}"
}
},
"6": {
"6-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Olive.100}"
},
"6-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Olive.200}"
},
"6-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Olive.300}"
},
"6-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Olive.400}"
},
"6-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Olive.500}"
},
"6-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Olive.600}"
}
},
"7": {
"7-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Lime.100}"
},
"7-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Lime.200}"
},
"7-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Lime.300}"
},
"7-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lime.400}"
},
"7-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lime.500}"
},
"7-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lime.600}"
}
},
"8": {
"8-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Grass.100}"
},
"8-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Grass.200}"
},
"8-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Grass.300}"
},
"8-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Grass.400}"
},
"8-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Grass.500}"
},
"8-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Grass.600}"
}
},
"9": {
"9-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Forest.100}"
},
"9-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Forest.200}"
},
"9-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Forest.300}"
},
"9-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Forest.400}"
},
"9-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Forest.500}"
},
"9-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Forest.600}"
}
},
"10": {
"10-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Jade.100}"
},
"10-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Jade.200}"
},
"10-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Jade.300}"
},
"10-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Jade.400}"
},
"10-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Jade.500}"
},
"10-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Jade.600}"
}
},
"11": {
"11-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.100}"
},
"11-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.200}"
},
"11-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.300}"
},
"11-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.400}"
},
"11-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.500}"
},
"11-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.600}"
}
},
"12": {
"12-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Azure.100}"
},
"12-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Azure.200}"
},
"12-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Azure.300}"
},
"12-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Azure.400}"
},
"12-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Azure.500}"
},
"12-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Azure.600}"
}
},
"13": {
"13-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Denim.100}"
},
"13-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Denim.200}"
},
"13-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Denim.300}"
},
"13-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Denim.400}"
},
"13-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Denim.500}"
},
"13-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Denim.600}"
}
},
"14": {
"14-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.100}"
},
"14-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.200}"
},
"14-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.300}"
},
"14-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.400}"
},
"14-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.500}"
},
"14-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.600}"
}
},
"15": {
"15-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.100}"
},
"15-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.200}"
},
"15-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.300}"
},
"15-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.400}"
},
"15-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.500}"
},
"15-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.600}"
}
},
"16": {
"16-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.100}"
},
"16-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.200}"
},
"16-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.300}"
},
"16-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.400}"
},
"16-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.500}"
},
"16-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.600}"
}
},
"17": {
"17-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.100}"
},
"17-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.200}"
},
"17-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.300}"
},
"17-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.400}"
},
"17-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.500}"
},
"17-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.600}"
}
},
"18": {
"18-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.100}"
},
"18-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.200}"
},
"18-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.300}"
},
"18-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.400}"
},
"18-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.500}"
},
"18-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.600}"
}
},
"19": {
"19-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.100}"
},
"19-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.200}"
},
"19-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.300}"
},
"19-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.400}"
},
"19-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.500}"
},
"19-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.600}"
}
},
"20": {
"20-1-light": {
"$type": "color",
"$value": "{Subtle_Color.Iron.100}"
},
"20-2-light": {
"$type": "color",
"$value": "{Subtle_Color.Iron.200}"
},
"20-3-light": {
"$type": "color",
"$value": "{Subtle_Color.Iron.300}"
},
"20-1-thick": {
"$type": "color",
"$value": "{Subtle_Color.Iron.400}"
},
"20-2-thick": {
"$type": "color",
"$value": "{Subtle_Color.Iron.500}"
},
"20-3-thick": {
"$type": "color",
"$value": "{Subtle_Color.Iron.600}"
}
}
},
"Brand": {
"Skyline": {
"$type": "color",
"$value": "#00b5ff"
},
"Aqua": {
"$type": "color",
"$value": "#00c8ff"
},
"Violet": {
"$type": "color",
"$value": "#9327ff"
},
"Amethyst": {
"$type": "color",
"$value": "#8427e0"
},
"Berry": {
"$type": "color",
"$value": "#e3006d"
},
"Coral": {
"$type": "color",
"$value": "#fb006d"
},
"Golden": {
"$type": "color",
"$value": "#f7931e"
},
"Amber": {
"$type": "color",
"$value": "#ffbd00"
},
"Lemon": {
"$type": "color",
"$value": "#ffce00"
}
},
"Other_Colors": {
"text-highlight": {
"$type": "color",
"$value": "{Blue.200}"
}
},
"Spacing": {
"spacing-0": {
"$type": "dimension",
"$value": "{Spacing.0}"
},
"spacing-xs": {
"$type": "dimension",
"$value": "{Spacing.100}"
},
"spacing-s": {
"$type": "dimension",
"$value": "{Spacing.200}"
},
"spacing-m": {
"$type": "dimension",
"$value": "{Spacing.300}"
},
"spacing-l": {
"$type": "dimension",
"$value": "{Spacing.400}"
},
"spacing-xl": {
"$type": "dimension",
"$value": "{Spacing.500}"
},
"spacing-xxl": {
"$type": "dimension",
"$value": "{Spacing.600}"
},
"spacing-full": {
"$type": "dimension",
"$value": "{Spacing.1000}"
}
},
"Border_Radius": {
"border-radius-0": {
"$type": "dimension",
"$value": "{Border-Radius.0}"
},
"border-radius-xs": {
"$type": "dimension",
"$value": "{Border-Radius.100}"
},
"border-radius-s": {
"$type": "dimension",
"$value": "{Border-Radius.200}"
},
"border-radius-m": {
"$type": "dimension",
"$value": "{Border-Radius.300}"
},
"border-radius-l": {
"$type": "dimension",
"$value": "{Border-Radius.400}"
},
"border-radius-xl": {
"$type": "dimension",
"$value": "{Border-Radius.500}"
},
"border-radius-xxl": {
"$type": "dimension",
"$value": "{Border-Radius.600}"
},
"border-radius-full": {
"$type": "dimension",
"$value": "{Border-Radius.1000}"
}
}
}
Reference in New Issue View Git Blame Copy Permalink