Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Light theme commit #587

Closed
wants to merge 1 commit into from
Closed

Light theme commit #587

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
178 changes: 131 additions & 47 deletions src/figma/tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -943,14 +943,24 @@
"type": "color"
},
"inverse": {
"value": "#FCFCFC",
"description": "(white010: #FCFCFC) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)",
"type": "color"
"value": "#ffffff",
"type": "color",
"description": "(white000: #FFFFFF) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)"
},
"disabled": {
"value": "#0376C980",
"description": "(blue500: #0376C9 50% opacity) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links",
"type": "color"
},
"default-hover": {
"value": "#0379ce",
"type": "color",
"description": "(#0379CE) For the \"hover\" state of interactive primary elements"
},
"default-pressed": {
"value": "#036db9",
"type": "color",
"description": "(#036DB9) For the \"pressed\" state of interactive primary elements"
}
},
"secondary": {
Expand Down Expand Up @@ -997,68 +1007,98 @@
"type": "color"
},
"inverse": {
"value": "#FCFCFC",
"description": "(white010: #FCFCFC) For elements used on top of error/default (Example: label of danger/critical button)",
"type": "color"
"value": "#ffffff",
"type": "color",
"description": "(white000: #FFFFFF) For elements used on top of error/default (Example: label of danger/critical button)"
},
"disabled": {
"value": "#D7384780",
"description": "(red500: #D73847 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons",
"type": "color"
},
"default-hover": {
"value": "#cd4250",
"type": "color",
"description": "(#CD4250) For the \"hovered\" state of interactive danger/critical elements"
},
"default-pressed": {
"value": "#c63441",
"type": "color",
"description": "(#C63441) For the \"pressed\" state of interactive danger/critical elements"
}
},
"warning": {
"default": {
"value": "#F66A0A",
"description": "(orange500: #F66A0A) For low-mid level alert elements. Used for text, background, icon or border",
"type": "color"
"value": "#bf5208",
"type": "color",
"description": "(orange600: #BF5208) For low-mid level alert elements. Used for text, background, icon or border"
},
"alternative": {
"value": "#FFC70A",
"description": "(yellow600: #FFC70A) [DEPRECATED] warning.alternative should be used as an alternative to warning.default for things such as hover states",
"type": "color"
},
"muted": {
"value": "#FFD33D19",
"description": "(yellow500: #FFD33D 10% opacity) For lowest contrast background used in warning elements. (Example: notification background)",
"type": "color"
"value": "#bf520819",
"type": "color",
"description": "(orange600: #BF5208 10% opacity) For lowest contrast background used in warning elements. (Example: notification background)"
},
"inverse": {
"value": "#FCFCFC",
"description": "(white010: #FCFCFC) For elements used on top of warning/default. Used for text, icon or border",
"type": "color"
"value": "#ffffff",
"type": "color",
"description": "(white000: #FFFFFF) For elements used on top of warning/default. Used for text, icon or border"
},
"disabled": {
"value": "#FFD33D80",
"description": "(yellow500: #FFD33D 50% opacity) [DEPRECATED] warning.disabled should be used for all disabled component colors such as buttons",
"type": "color"
},
"default-hover": {
"value": "#c2540a",
"type": "color",
"description": "(#C2540A) For the \"hover\" state of warning elements"
},
"default-pressed": {
"value": "#a24507",
"type": "color",
"description": "(#A24507) For the \"pressed\" state of warning elements"
}
},
"success": {
"default": {
"value": "#28A745",
"description": "(green500: #28A745) For positive & good semantic elements. Used for text, background, icon or border",
"type": "color"
"value": "#1c8234",
"type": "color",
"description": "(green500: #1C8234) For positive & good semantic elements. Used for text, background, icon or border"
},
"alternative": {
"value": "#1E7E34",
"description": "(green600: #1E7E34) [DEPRECATED] (green600: #1E7E34) success.alternative should be used as an alternative to success.default for things such as hover states",
"type": "color"
},
"muted": {
"value": "#28A74519",
"description": "(green500: #28A74519 10% opacity) For lowest contrast background used in success semantic. (Example: notification background)",
"type": "color"
"value": "#1c823419",
"type": "color",
"description": "(green600: #1C8234 10% opacity) For lowest contrast background used in success semantic. (Example: notification background)"
},
"inverse": {
"value": "#FCFCFC",
"description": "(white010: #FCFCFC) For elements used on top of success/default. Used for text, icon or border",
"type": "color"
"value": "#ffffff",
"type": "color",
"description": "(white000: #FFFFFF) For elements used on top of success/default. Used for text, icon or border"
},
"disabled": {
"value": "#28A74580",
"description": "(green500: #28A745 50% opacity) [DEPRECATED] success.disabled should be used for all disabled success component colors such as buttons",
"type": "color"
},
"default-hover": {
"value": "#208838",
"type": "color",
"description": "(#208838) For the \"hover\" state of success elements"
},
"default-pressed": {
"value": "#1b7431",
"type": "color",
"description": "(#1B7431) For the \"pressed\" state of success elements"
}
},
"info": {
Expand All @@ -1078,9 +1118,9 @@
"type": "color"
},
"inverse": {
"value": "#FCFCFC",
"description": "(white010: #FCFCFC) For elements used on top of info/default. Used for text, icon or border",
"type": "color"
"value": "#ffffff",
"type": "color",
"description": "(white000: #FFFFFF) For elements used on top of info/default. Used for text, icon or border"
},
"disabled": {
"value": "#0376C980",
Expand Down Expand Up @@ -1338,14 +1378,24 @@
"type": "color"
},
"inverse": {
"value": "#FCFCFC",
"description": "(white010: #FCFCFC) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)",
"type": "color"
"value": "#141618",
"type": "color",
"description": "(grey900 : #141618) For elements used on top of primary/default. (Example: label of primary button, check in a checkbox)"
},
"disabled": {
"value": "#1098FC80",
"description": "(blue400: #1098FC) [DEPRECATED] primary.disabled should be used for all disabled primary action components such as buttons or links",
"type": "color"
},
"default-hover": {
"value": "#0092fa",
"type": "color",
"description": "(#0092FA) For the \"hover\" state of interactive primary elements"
},
"default-pressed": {
"value": "#54b6fc",
"type": "color",
"description": "(#54B6FC) For the \"hover\" state of interactive primary elements"
}
},
"secondary": {
Expand Down Expand Up @@ -1377,29 +1427,39 @@
},
"error": {
"default": {
"value": "#D73847",
"description": "(red500: #D73847) For high-level alert danger/critical elements. Used for text, background, icon or border",
"type": "color"
"value": "#ff5263",
"type": "color",
"description": "(#FF5263) For high-level alert danger/critical elements. Used for text, background, icon or border"
},
"alternative": {
"value": "#E06470",
"description": "(red400: #E06470) For the \"pressed\" state of interactive danger/critical elements",
"type": "color"
},
"muted": {
"value": "#D7384726",
"description": "(red500: #D73847 15% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)",
"type": "color"
"value": "#ff526326",
"type": "color",
"description": "(#FF5263) 15% opacity) For lowest contrast background used in high-level alert danger/critical elements. (Example: notification background)"
},
"inverse": {
"value": "#FCFCFC",
"description": "(white010: #FCFCFC) For elements used on top of error/default (Example: label of danger/critical button)",
"type": "color"
"value": "#141618",
"type": "color",
"description": "(grey900: #141618) For elements used on top of error/default (Example: label of danger/critical button)"
},
"disabled": {
"value": "#D7384780",
"description": "(red500: #D73847 50% opacity) [DEPRECATED] error.disabled should be used for all disabled critical action components such as buttons",
"type": "color"
},
"default-hover": {
"value": "#ff4d58",
"type": "color",
"description": "FF4D58: For the \"hover\" state of interactive danger/critical elements"
},
"default-pressed": {
"value": "#f9868e",
"type": "color",
"description": "F9868E: For the \"hover\" state of interactive danger/critical elements"
}
},
"warning": {
Expand Down Expand Up @@ -1427,6 +1487,16 @@
"value": "#FFD33D80",
"description": "(yellow500: #FFD33D 50% opacity) [DEPRECATED] warning.disabled should be used for all disabled component colors such as buttons",
"type": "color"
},
"default-hover": {
"value": "#ffc60a",
"type": "color",
"description": "(#FFC60A): For warning with stronger contrast."
},
"default-pressed": {
"value": "#ffeaa3d1",
"type": "color",
"description": "(#FFEAA3): For the \"pressed\" state of low-mid level alert elements."
}
},
"success": {
Expand All @@ -1446,14 +1516,24 @@
"type": "color"
},
"inverse": {
"value": "#FCFCFC",
"description": "(white010: #FCFCFC) For elements used on top of success/default. Used for text, icon or border",
"type": "color"
"value": "#141618",
"type": "color",
"description": "(grey900 : #141618) For elements used on top of success/default. Used for text, icon or border"
},
"disabled": {
"value": "#28A74580",
"description": "(green500: #28A745 50% opacity) [DEPRECATED] success.disabled should be used for all disabled success component colors such as buttons",
"type": "color"
},
"default-hover": {
"value": "#05b82f",
"type": "color",
"description": "(#05B82F): For success with stronger contrast."
},
"default-pressed": {
"value": "#6aec88",
"type": "color",
"description": "(#6AEC88): For success with stronger contrast."
}
},
"info": {
Expand All @@ -1473,9 +1553,9 @@
"type": "color"
},
"inverse": {
"value": "#FCFCFC",
"description": "(white010: #FCFCFC) For elements used on top of info/default. Used for text, icon or border",
"type": "color"
"value": "#141618",
"type": "color",
"description": "(grey900: #141618) For elements used on top of info/default. Used for text, icon or border"
},
"disabled": {
"value": "#0376C980",
Expand Down Expand Up @@ -1605,6 +1685,10 @@
},
"$themes": [],
"$metadata": {
"tokenSetOrder": ["global", "light", "dark"]
"tokenSetOrder": [
"global",
"light",
"dark"
]
}
}
}
Loading