opensource/AppFlowy-Web
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy-Web.git synced 2025-12-11 18:07:22 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
4406a7a1e06b51a3ee0597d2d32e5b65c5da4c46
AppFlowy-Web/scripts/system-token/semantic.light.json
Richard Shiue 05ec52c066 chore: import color token v0.0.8 (#41) 
* chore: import new color tokens

* chore: generate css vars
2025-08-28 10:21:19 +08:00

1554 lines
35 KiB
JSON
Raw Blame History

{
"Text": {
"primary": {
"$type": "color",
"$value": "{Neutral.1000}"
},
"secondary": {
"$type": "color",
"$value": "{Neutral.600}"
},
"tertiary": {
"$type": "color",
"$value": "{Neutral.500}"
},
"quaternary": {
"$type": "color",
"$value": "{Neutral.200}"
},
"on-fill": {
"$type": "color",
"$value": "{Neutral.white}"
},
"inverse": {
"$type": "color",
"$value": "{Neutral.white}"
},
"action": {
"$type": "color",
"$value": "{Blue.600}"
},
"action-hover": {
"$type": "color",
"$value": "{Blue.700}"
},
"info": {
"$type": "color",
"$value": "{Blue.600}"
},
"info-light": {
"$type": "color",
"$value": "{Blue.alpha-blue-700-75}"
},
"info-hover": {
"$type": "color",
"$value": "{Blue.700}"
},
"info-on-fill": {
"$type": "color",
"$value": "{Blue.700}"
},
"success": {
"$type": "color",
"$value": "{Green.600}"
},
"success-hover": {
"$type": "color",
"$value": "{Green.700}"
},
"success-on-fill": {
"$type": "color",
"$value": "{Green.700}"
},
"warning": {
"$type": "color",
"$value": "{Orange.600}"
},
"warning-hover": {
"$type": "color",
"$value": "{Orange.700}"
},
"warning-on-fill": {
"$type": "color",
"$value": "{Orange.700}"
},
"error": {
"$type": "color",
"$value": "{Red.600}"
},
"error-light": {
"$type": "color",
"$value": "{Red.alpha-red-600-75}"
},
"error-hover": {
"$type": "color",
"$value": "{Red.700}"
},
"error-on-fill": {
"$type": "color",
"$value": "{Red.700}"
},
"featured": {
"$type": "color",
"$value": "{Purple.500}"
},
"featured-hover": {
"$type": "color",
"$value": "{Purple.600}"
},
"featured-on-fill": {
"$type": "color",
"$value": "{Purple.500}"
}
},
"Icon": {
"primary": {
"$type": "color",
"$value": "{Neutral.1000}"
},
"secondary": {
"$type": "color",
"$value": "{Neutral.600}"
},
"tertiary": {
"$type": "color",
"$value": "{Neutral.400}"
},
"quaternary": {
"$type": "color",
"$value": "{Neutral.200}"
},
"info-thick": {
"$type": "color",
"$value": "{Blue.600}"
},
"info-thick-hover": {
"$type": "color",
"$value": "{Blue.700}"
},
"success-thick": {
"$type": "color",
"$value": "{Green.500}"
},
"success-thick-hover": {
"$type": "color",
"$value": "{Green.600}"
},
"warning-thick": {
"$type": "color",
"$value": "{Orange.600}"
},
"warning-thick-hover": {
"$type": "color",
"$value": "{Orange.700}"
},
"error-thick": {
"$type": "color",
"$value": "{Red.600}"
},
"error-thick-hover": {
"$type": "color",
"$value": "{Red.700}"
},
"featured-thick": {
"$type": "color",
"$value": "{Purple.500}"
},
"featured-thick-hover": {
"$type": "color",
"$value": "{Purple.600}"
},
"on-fill": {
"$type": "color",
"$value": "{Neutral.white}"
}
},
"Border": {
"primary": {
"$type": "color",
"$value": "{Neutral.250}"
},
"primary-hover": {
"$type": "color",
"$value": "{Neutral.300}"
},
"secondary": {
"$type": "color",
"$value": "{Neutral.800}"
},
"secondary-hover": {
"$type": "color",
"$value": "{Neutral.700}"
},
"tertiary": {
"$type": "color",
"$value": "{Neutral.1000}"
},
"tertiary-hover": {
"$type": "color",
"$value": "{Neutral.900}"
},
"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.600}"
},
"success-thick": {
"$type": "color",
"$value": "{Green.600}"
},
"success-thick-hover": {
"$type": "color",
"$value": "{Green.700}"
},
"warning-thick": {
"$type": "color",
"$value": "{Orange.600}"
},
"warning-thick-hover": {
"$type": "color",
"$value": "{Orange.700}"
},
"error-thick": {
"$type": "color",
"$value": "{Red.600}"
},
"error-thick-hover": {
"$type": "color",
"$value": "{Red.700}"
},
"featured-thick": {
"$type": "color",
"$value": "{Purple.500}"
},
"featured-thick-hover": {
"$type": "color",
"$value": "{Purple.600}"
}
},
"Fill": {
"primary": {
"$type": "color",
"$value": "{Neutral.100}",
"$description": "No longer available"
},
"primary-hover": {
"$type": "color",
"$value": "{Neutral.200}",
"$description": "No longer available"
},
"secondary": {
"$type": "color",
"$value": "{Neutral.300}",
"$description": "No longer available"
},
"secondary-hover": {
"$type": "color",
"$value": "{Neutral.400}",
"$description": "No longer available"
},
"tertiary": {
"$type": "color",
"$value": "{Neutral.600}",
"$description": "No longer available"
},
"tertiary-hover": {
"$type": "color",
"$value": "{Neutral.500}",
"$description": "No longer available"
},
"quaternary": {
"$type": "color",
"$value": "{Neutral.1000}",
"$description": "No longer available"
},
"quaternary-hover": {
"$type": "color",
"$value": "{Neutral.900}",
"$description": "No longer available"
},
"content": {
"$type": "color",
"$value": "{Neutral.alpha-white-0}"
},
"content-hover": {
"$type": "color",
"$value": "{Neutral.alpha-grey-1000-05}",
"$description": "Used for hover state, eg. button, navigation item, menu item and grid item."
},
"content-visible": {
"$type": "color",
"$value": "{Neutral.alpha-grey-1000-05}",
"$description": "Used for hover state, eg. button, navigation item, menu item and grid item."
},
"content-visible-hover": {
"$type": "color",
"$value": "{Neutral.alpha-grey-1000-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}"
},
"text-select": {
"$type": "color",
"$value": "{Blue.alpha-blue-500-20}"
},
"button-active": {
"$type": "color",
"$value": "{Blue.alpha-blue-500-10}"
},
"info-light": {
"$type": "color",
"$value": "{Blue.100}"
},
"info-light-hover": {
"$type": "color",
"$value": "{Blue.200}"
},
"info-thick": {
"$type": "color",
"$value": "{Blue.500}"
},
"info-thick-hover": {
"$type": "color",
"$value": "{Blue.600}"
},
"success-light": {
"$type": "color",
"$value": "{Green.100}"
},
"success-light-hover": {
"$type": "color",
"$value": "{Green.200}"
},
"success-thick": {
"$type": "color",
"$value": "{Green.500}"
},
"success-thick-hover": {
"$type": "color",
"$value": "{Green.600}"
},
"warning-light": {
"$type": "color",
"$value": "{Orange.100}"
},
"warning-light-hover": {
"$type": "color",
"$value": "{Orange.200}"
},
"error-light": {
"$type": "color",
"$value": "{Red.100}"
},
"error-light-hover": {
"$type": "color",
"$value": "{Red.200}"
},
"error-thick": {
"$type": "color",
"$value": "{Red.600}"
},
"error-thick-hover": {
"$type": "color",
"$value": "{Red.700}"
},
"error-select": {
"$type": "color",
"$value": "{Red.alpha-red-500-10}"
},
"featured-light": {
"$type": "color",
"$value": "{Purple.alpha-purple-100-60}"
},
"featured-light-hover": {
"$type": "color",
"$value": "{Purple.200}"
},
"featured-thick": {
"$type": "color",
"$value": "{Purple.500}"
},
"featured-thick-hover": {
"$type": "color",
"$value": "{Purple.600}"
}
},
"Surface": {
"primary": {
"$type": "color",
"$value": "{Neutral.white}"
},
"primary-hover": {
"$type": "color",
"$value": "{Neutral.100}"
},
"layer-01": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Settings Window"
},
"layer-01-hover": {
"$type": "color",
"$value": "{Neutral.100}"
},
"layer-02": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Modal Window"
},
"layer-02-hover": {
"$type": "color",
"$value": "{Neutral.100}"
},
"layer-03": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Dialog"
},
"layer-03-hover": {
"$type": "color",
"$value": "{Neutral.100}"
},
"layer-04": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Dropdown Menu"
},
"layer-04-hover": {
"$type": "color",
"$value": "{Neutral.100}"
},
"inverse": {
"$type": "color",
"$value": "{Neutral.1000}"
},
"overlay": {
"$type": "color",
"$value": "{Neutral.alpha-black-60}"
}
},
"Surface_Container": {
"layer-00": {
"$type": "color",
"$value": "{Neutral.100}",
"$description": "Settings Side Panel"
},
"layer-01": {
"$type": "color",
"$value": "{Neutral.100}",
"$description": "Settings Side Panel"
},
"layer-02": {
"$type": "color",
"$value": "{Neutral.200}"
},
"layer-03": {
"$type": "color",
"$value": "{Neutral.300}"
}
},
"Background": {
"primary": {
"$type": "color",
"$value": "{Neutral.white}"
}
},
"Palette": {
"text": {
"color-1": {
"$type": "color",
"$value": "{Subtle_Color.Rose.500}"
},
"color-2": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.500}"
},
"color-3": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.500}"
},
"color-4": {
"$type": "color",
"$value": "{Subtle_Color.Mango.500}"
},
"color-5": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.500}"
},
"color-6": {
"$type": "color",
"$value": "{Subtle_Color.Olive.500}"
},
"color-7": {
"$type": "color",
"$value": "{Subtle_Color.Lime.500}"
},
"color-8": {
"$type": "color",
"$value": "{Subtle_Color.Grass.500}"
},
"color-9": {
"$type": "color",
"$value": "{Subtle_Color.Forest.500}"
},
"color-10": {
"$type": "color",
"$value": "{Subtle_Color.Jade.500}"
},
"color-11": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.500}"
},
"color-12": {
"$type": "color",
"$value": "{Subtle_Color.Azure.500}"
},
"color-13": {
"$type": "color",
"$value": "{Subtle_Color.Denim.500}"
},
"color-14": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.500}"
},
"color-15": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.500}"
},
"color-16": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.500}"
},
"color-17": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.500}"
},
"color-18": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.500}"
},
"color-19": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.500}"
},
"color-20": {
"$type": "color",
"$value": "{Subtle_Color.Iron.500}"
}
},
"bg": {
"color-1": {
"$type": "color",
"$value": "{Subtle_Color.Rose.300}"
},
"color-2": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.300}"
},
"color-3": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.300}"
},
"color-4": {
"$type": "color",
"$value": "{Subtle_Color.Mango.300}"
},
"color-5": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.300}"
},
"color-6": {
"$type": "color",
"$value": "{Subtle_Color.Olive.300}"
},
"color-7": {
"$type": "color",
"$value": "{Subtle_Color.Lime.300}"
},
"color-8": {
"$type": "color",
"$value": "{Subtle_Color.Grass.300}"
},
"color-9": {
"$type": "color",
"$value": "{Subtle_Color.Forest.300}"
},
"color-10": {
"$type": "color",
"$value": "{Subtle_Color.Jade.300}"
},
"color-11": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.300}"
},
"color-12": {
"$type": "color",
"$value": "{Subtle_Color.Azure.300}"
},
"color-13": {
"$type": "color",
"$value": "{Subtle_Color.Denim.300}"
},
"color-14": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.300}"
},
"color-15": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.300}"
},
"color-16": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.300}"
},
"color-17": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.300}"
},
"color-18": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.300}"
},
"color-19": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.300}"
},
"color-20": {
"$type": "color",
"$value": "{Subtle_Color.Iron.300}"
}
}
},
"Badge": {
"color-1": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Rose.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Rose.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Rose.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Rose.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Rose.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Rose.600}"
}
},
"color-2": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.600}"
}
},
"color-3": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Tangerine.600}"
}
},
"color-4": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Mango.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Mango.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Mango.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Mango.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Mango.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Mango.600}"
}
},
"color-5": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Lemon.600}"
}
},
"color-6": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Olive.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Olive.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Olive.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Olive.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Olive.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Olive.600}"
}
},
"color-7": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Lime.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Lime.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Lime.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Lime.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Lime.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Lime.600}"
}
},
"color-8": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Grass.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Grass.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Grass.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Grass.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Grass.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Grass.600}"
}
},
"color-9": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Forest.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Forest.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Forest.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Forest.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Forest.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Forest.600}"
}
},
"color-10": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Jade.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Jade.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Jade.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Jade.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Jade.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Jade.600}"
}
},
"color-11": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Aqua.600}"
}
},
"color-12": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Azure.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Azure.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Azure.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Azure.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Azure.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Azure.600}"
}
},
"color-13": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Denim.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Denim.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Denim.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Denim.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Denim.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Denim.600}"
}
},
"color-14": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.600}"
}
},
"color-15": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Lavender.600}"
}
},
"color-16": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.600}"
}
},
"color-17": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Mallow.600}"
}
},
"color-18": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.600}"
}
},
"color-19": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Smoke.600}"
}
},
"color-20": {
"light-1": {
"$type": "color",
"$value": "{Subtle_Color.Iron.100}"
},
"light-2": {
"$type": "color",
"$value": "{Subtle_Color.Iron.200}"
},
"light-3": {
"$type": "color",
"$value": "{Subtle_Color.Iron.300}"
},
"thick-1": {
"$type": "color",
"$value": "{Subtle_Color.Iron.400}"
},
"thick-2": {
"$type": "color",
"$value": "{Subtle_Color.Iron.500}"
},
"thick-3": {
"$type": "color",
"$value": "{Subtle_Color.Iron.600}"
}
}
},
"Tag": {
"fill-01-light": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.200}",
"$description": "Pearl"
},
"fill-01-thick": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.600}",
"$description": "Pearl"
},
"text-01-light": {
"$type": "color",
"$value": "{Subtle_Color.Mauve.600}",
"$description": "Sky"
},
"text-01-thick": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Sky"
},
"fill-02-light": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.200}",
"$description": "Pearl"
},
"fill-02-thick": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.600}",
"$description": "Pearl"
},
"text-02-light": {
"$type": "color",
"$value": "{Subtle_Color.Lilac.600}",
"$description": "Sky"
},
"text-02-thick": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Sky"
},
"fill-03-light": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.200}",
"$description": "Pearl"
},
"fill-03-thick": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.600}",
"$description": "Pearl"
},
"text-03-light": {
"$type": "color",
"$value": "{Subtle_Color.Camellia.600}",
"$description": "Sky"
},
"text-03-thick": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Sky"
},
"fill-04-light": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.200}",
"$description": "Blush"
},
"fill-04-thick": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.600}",
"$description": "Blush"
},
"text-04-light": {
"$type": "color",
"$value": "{Subtle_Color.Papaya.600}",
"$description": "Blush"
},
"text-04-thick": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Blush"
},
"fill-05-light": {
"$type": "color",
"$value": "{Subtle_Color.Mango.200}",
"$description": "Peach"
},
"fill-05-thick": {
"$type": "color",
"$value": "{Subtle_Color.Mango.600}",
"$description": "Peach"
},
"text-05-light": {
"$type": "color",
"$value": "{Subtle_Color.Mango.600}",
"$description": "Peach"
},
"text-05-thick": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Peach"
},
"fill-06-light": {
"$type": "color",
"$value": "{Subtle_Color.Olive.200}",
"$description": "Cream"
},
"fill-06-thick": {
"$type": "color",
"$value": "{Subtle_Color.Olive.600}",
"$description": "Cream"
},
"text-06-light": {
"$type": "color",
"$value": "{Subtle_Color.Olive.600}",
"$description": "Cream"
},
"text-06-thick": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Cream"
},
"fill-07-light": {
"$type": "color",
"$value": "{Subtle_Color.Grass.200}",
"$description": "Mint"
},
"fill-07-thick": {
"$type": "color",
"$value": "{Subtle_Color.Grass.600}",
"$description": "Mint"
},
"text-07-light": {
"$type": "color",
"$value": "{Subtle_Color.Grass.600}",
"$description": "Mint"
},
"text-07-thick": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Mint"
},
"fill-08-light": {
"$type": "color",
"$value": "{Subtle_Color.Jade.200}",
"$description": "Sky"
},
"fill-08-thick": {
"$type": "color",
"$value": "{Subtle_Color.Jade.600}",
"$description": "Sky"
},
"text-08-light": {
"$type": "color",
"$value": "{Subtle_Color.Jade.600}",
"$description": "Sky"
},
"text-08-thick": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Sky"
},
"fill-09-light": {
"$type": "color",
"$value": "{Subtle_Color.Azure.200}",
"$description": "Lilac"
},
"fill-09-thick": {
"$type": "color",
"$value": "{Subtle_Color.Azure.600}",
"$description": "Lilac"
},
"text-09-light": {
"$type": "color",
"$value": "{Subtle_Color.Azure.600}",
"$description": "Lilac"
},
"text-09-thick": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Lilac"
},
"fill-10-light": {
"$type": "color",
"$value": "{Subtle_Color.Iron.200}",
"$description": "Pearl"
},
"fill-10-thick": {
"$type": "color",
"$value": "{Subtle_Color.Iron.600}",
"$description": "Pearl"
},
"text-10-light": {
"$type": "color",
"$value": "{Subtle_Color.Iron.600}",
"$description": "Sky"
},
"text-10-thick": {
"$type": "color",
"$value": "{Neutral.white}",
"$description": "Sky"
}
},
"Comment": {
"fill-01": {
"$type": "color",
"$value": "{Yellow.alpha-yellow-500-15}"
},
"fill-01-select": {
"$type": "color",
"$value": "{Yellow.alpha-yellow-500-25}"
},
"fill-02": {
"$type": "color",
"$value": "{Yellow.alpha-yellow-500-25}"
},
"fill-02-select": {
"$type": "color",
"$value": "{Yellow.alpha-yellow-500-35}"
},
"fill-03": {
"$type": "color",
"$value": "{Yellow.alpha-yellow-500-35}"
},
"fill-03-select": {
"$type": "color",
"$value": "{Yellow.alpha-yellow-500-45}"
},
"border-01": {
"$type": "color",
"$value": "{Yellow.alpha-yellow-500-30}"
},
"border-01-select": {
"$type": "color",
"$value": "{Yellow.alpha-yellow-500-60}"
},
"border-02": {
"$type": "color",
"$value": "{Yellow.alpha-yellow-500-60}"
},
"border-02-select": {
"$type": "color",
"$value": "{Yellow.alpha-yellow-500-90}"
},
"border-03": {
"$type": "color",
"$value": "{Yellow.alpha-yellow-500-90}"
},
"border-03-select": {
"$type": "color",
"$value": "{Yellow.500}"
},
"icon": {
"$type": "color",
"$value": "{Yellow.800}"
},
"highlight": {
"$type": "color",
"$value": "{Subtle_Color.Azure.alpha-azure-500-10}"
}
},
"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}"
},
"icon-shared": {
"$type": "color",
"$value": "{Subtle_Color.Denim.500}",
"$description": "Sidebar Shared Category"
},
"text-event": {
"$type": "color",
"$value": "{Blue.800}"
},
"filled-event": {
"$type": "color",
"$value": "{Blue.100}"
},
"filled-today": {
"$type": "color",
"$value": "#eb368f"
}
},
"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