Created
February 24, 2020 09:57
-
-
Save pavanprakash21/c2a1daeb5bb65ef6756355eab0ed5e7a to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const theme = { | |
"global": { | |
"colors": { | |
"icon": { | |
"0": "#", | |
"1": "6", | |
"2": "6", | |
"3": "6", | |
"4": "6", | |
"5": "6", | |
"6": "6", | |
"dark": "#f8f8f8", | |
"light": "#666666" | |
}, | |
"active": { | |
"0": "r", | |
"1": "g", | |
"2": "b", | |
"3": "a", | |
"4": "(", | |
"5": "2", | |
"6": "2", | |
"7": "1", | |
"8": ",", | |
"9": "2", | |
"10": "2", | |
"11": "1", | |
"12": ",", | |
"13": "2", | |
"14": "2", | |
"15": "1", | |
"16": ",", | |
"17": "0", | |
"18": ".", | |
"19": "5", | |
"20": ")", | |
"light": "#f50057", | |
"dark": "#ff4081" | |
}, | |
"black": "#000000", | |
"border": { | |
"dark": "rgba(255,255,255,0.33)", | |
"light": "rgba(0,0,0,0.33)" | |
}, | |
"brand": "#00ABD4", | |
"control": { | |
"dark": "#ffffff", | |
"light": "#00ABD4" | |
}, | |
"focus": "#2AD2C9", | |
"placeholder": "#AAAAAA", | |
"selected": "brand", | |
"text": { | |
"dark": "#f8f8f8", | |
"light": "#444444" | |
}, | |
"white": "#FFFFFF", | |
"accent-1": "#2AD2C9", | |
"accent-2": "#FFC107", | |
"accent-3": "#9C27B0", | |
"accent-4": "#673AB7", | |
"dark-1": "#333333", | |
"dark-2": "#555555", | |
"dark-3": "#777777", | |
"dark-4": "#999999", | |
"dark-5": "#999999", | |
"dark-6": "#999999", | |
"light-1": "#F8F8F8", | |
"light-2": "#F2F2F2", | |
"light-3": "#EDEDED", | |
"light-4": "#DADADA", | |
"light-5": "#DADADA", | |
"light-6": "#DADADA", | |
"neutral-1": "#795548", | |
"neutral-2": "#009688", | |
"neutral-3": "#8BC34A", | |
"neutral-4": "#CDDC39", | |
"status-critical": "#FF4081", | |
"status-error": "#F44336", | |
"status-warning": "#FFEB3B", | |
"status-ok": "#4CAF50", | |
"status-unknown": "#9E9E9E", | |
"status-disabled": "#9E9E9E", | |
"neutral-5": "#FF9800" | |
}, | |
"animation": { | |
"duration": "1s", | |
"jiggle": { | |
"duration": "0.1s" | |
} | |
}, | |
"borderSize": { | |
"xsmall": "1px", | |
"small": "2px", | |
"medium": "4px", | |
"large": "12px", | |
"xlarge": "24px" | |
}, | |
"breakpoints": { | |
"small": { | |
"value": 768, | |
"borderSize": { | |
"xsmall": "1px", | |
"small": "2px", | |
"medium": "4px", | |
"large": "6px", | |
"xlarge": "12px" | |
}, | |
"edgeSize": { | |
"none": "0px", | |
"hair": "1px", | |
"xxsmall": "2px", | |
"xsmall": "3px", | |
"small": "6px", | |
"medium": "12px", | |
"large": "24px", | |
"xlarge": "48px" | |
}, | |
"size": { | |
"xxsmall": "24px", | |
"xsmall": "48px", | |
"small": "96px", | |
"medium": "192px", | |
"large": "384px", | |
"xlarge": "768px", | |
"full": "100%" | |
} | |
}, | |
"medium": { | |
"value": 1536 | |
}, | |
"large": {} | |
}, | |
"deviceBreakpoints": { | |
"phone": "small", | |
"tablet": "medium", | |
"computer": "large" | |
}, | |
"control": { | |
"border": { | |
"width": "1px", | |
"radius": "0px", | |
"color": "border" | |
} | |
}, | |
"debounceDelay": 300, | |
"drop": { | |
"background": "#f8f8f8", | |
"border": { | |
"width": "0px", | |
"radius": "0px" | |
}, | |
"shadowSize": "small", | |
"zIndex": "20" | |
}, | |
"edgeSize": { | |
"none": "0px", | |
"hair": "1px", | |
"xxsmall": "3px", | |
"xsmall": "6px", | |
"small": "12px", | |
"medium": "24px", | |
"large": "48px", | |
"xlarge": "96px", | |
"responsiveBreakpoint": "small" | |
}, | |
"elevation": { | |
"light": { | |
"none": "none", | |
"xsmall": "0px 1px 2px rgba(0, 0, 0, 0.20)", | |
"small": "0px 2px 4px rgba(0, 0, 0, 0.20)", | |
"medium": "0px 4px 8px rgba(0, 0, 0, 0.20)", | |
"large": "0px 8px 16px rgba(0, 0, 0, 0.20)", | |
"xlarge": "0px 12px 24px rgba(0, 0, 0, 0.20)" | |
}, | |
"dark": { | |
"none": "none", | |
"xsmall": "0px 2px 2px rgba(255, 255, 255, 0.40)", | |
"small": "0px 4px 4px rgba(255, 255, 255, 0.40)", | |
"medium": "0px 6px 8px rgba(255, 255, 255, 0.40)", | |
"large": "0px 8px 16px rgba(255, 255, 255, 0.40)", | |
"xlarge": "0px 12px 24px rgba(255, 255, 255, 0.40)" | |
} | |
}, | |
"focus": { | |
"border": { | |
"color": "#f50057" | |
} | |
}, | |
"font": { | |
"size": "18px", | |
"height": "24px", | |
"maxWidth": "432px", | |
"family": "\"Roboto\", \"Helvetica\", \"Arial\", sans-serif" | |
}, | |
"hover": { | |
"background": { | |
"dark": "#ff4081", | |
"light": "#f50057" | |
}, | |
"color": { | |
"dark": "white", | |
"light": "black" | |
}, | |
"text": { | |
"light": "#000000", | |
"dark": "#f8f8f8" | |
} | |
}, | |
"input": { | |
"padding": "12px", | |
"weight": 600 | |
}, | |
"opacity": { | |
"strong": 0.8, | |
"medium": 0.4, | |
"weak": 0.1 | |
}, | |
"selected": { | |
"background": "selected", | |
"color": "white" | |
}, | |
"spacing": "24px", | |
"size": { | |
"xxsmall": "48px", | |
"xsmall": "96px", | |
"small": "192px", | |
"medium": "384px", | |
"large": "768px", | |
"xlarge": "1152px", | |
"xxlarge": "1536px", | |
"full": "100%" | |
} | |
}, | |
"icon": { | |
"size": { | |
"small": "12px", | |
"medium": "24px", | |
"large": "48px", | |
"xlarge": "96px" | |
} | |
}, | |
"accordion": { | |
"icons": {} | |
}, | |
"anchor": { | |
"textDecoration": "none", | |
"fontWeight": 600, | |
"color": { | |
"dark": "#7986cb", | |
"light": "#3f51b5" | |
}, | |
"hover": { | |
"textDecoration": "underline" | |
} | |
}, | |
"box": { | |
"responsiveBreakpoint": "small" | |
}, | |
"button": { | |
"border": { | |
"width": "2px", | |
"radius": "0px" | |
}, | |
"primary": { | |
"color": { | |
"light": "#3f51b5", | |
"dark": "#7986cb" | |
} | |
}, | |
"disabled": { | |
"opacity": 0.3 | |
}, | |
"minWidth": "96px", | |
"maxWidth": "384px", | |
"padding": { | |
"vertical": "4px", | |
"horizontal": "22px" | |
} | |
}, | |
"calendar": { | |
"small": { | |
"fontSize": "14px", | |
"lineHeight": 1.375, | |
"daySize": "27.428571428571427px", | |
"slideDuration": "0.2s" | |
}, | |
"medium": { | |
"fontSize": "18px", | |
"lineHeight": 1.45, | |
"daySize": "54.857142857142854px", | |
"slideDuration": "0.5s" | |
}, | |
"large": { | |
"fontSize": "30px", | |
"lineHeight": 1.11, | |
"daySize": "109.71428571428571px", | |
"slideDuration": "0.8s" | |
}, | |
"icons": { | |
"small": {} | |
} | |
}, | |
"carousel": { | |
"icons": {} | |
}, | |
"chart": {}, | |
"checkBox": { | |
"border": { | |
"color": { | |
"dark": "rgba(255, 255, 255, 0.5)", | |
"light": "rgba(0, 0, 0, 0.15)" | |
}, | |
"width": "2px" | |
}, | |
"check": { | |
"radius": "0px", | |
"thickness": "4px" | |
}, | |
"icon": {}, | |
"icons": {}, | |
"hover": { | |
"border": { | |
"color": { | |
"dark": "white", | |
"light": "black" | |
} | |
} | |
}, | |
"size": "24px", | |
"toggle": { | |
"color": { | |
"dark": "#bdbdbd", | |
"light": "#00ABD4" | |
}, | |
"radius": "24px", | |
"size": "48px", | |
"knob": {} | |
}, | |
"color": { | |
"light": "#00ABD4", | |
"dark": "#a7ecff" | |
} | |
}, | |
"clock": { | |
"analog": { | |
"hour": { | |
"color": { | |
"dark": "light-2", | |
"light": "dark-3" | |
}, | |
"width": "8px", | |
"size": "24px", | |
"shape": "round" | |
}, | |
"minute": { | |
"color": { | |
"dark": "light-4", | |
"light": "dark-3" | |
}, | |
"width": "4px", | |
"size": "12px", | |
"shape": "round" | |
}, | |
"second": { | |
"color": { | |
"dark": "accent-1", | |
"light": "accent-1" | |
}, | |
"width": "3px", | |
"size": "9px", | |
"shape": "round" | |
}, | |
"size": { | |
"small": "72px", | |
"medium": "96px", | |
"large": "144px", | |
"xlarge": "216px", | |
"huge": "288px" | |
} | |
}, | |
"digital": { | |
"text": { | |
"xsmall": { | |
"size": "10px", | |
"height": 1.5 | |
}, | |
"small": { | |
"size": "14px", | |
"height": 1.43 | |
}, | |
"medium": { | |
"size": "18px", | |
"height": 1.375 | |
}, | |
"large": { | |
"size": "22px", | |
"height": 1.167 | |
}, | |
"xlarge": { | |
"size": "26px", | |
"height": 1.1875 | |
}, | |
"xxlarge": { | |
"size": "34px", | |
"height": 1.125 | |
} | |
} | |
} | |
}, | |
"collapsible": { | |
"minSpeed": 200, | |
"baseline": 500 | |
}, | |
"dataTable": { | |
"header": {}, | |
"groupHeader": { | |
"border": { | |
"side": "bottom", | |
"size": "xsmall" | |
}, | |
"fill": "vertical", | |
"pad": { | |
"horizontal": "small", | |
"vertical": "xsmall" | |
}, | |
"background": { | |
"dark": "dark-2", | |
"light": "light-2" | |
} | |
}, | |
"icons": {}, | |
"resize": { | |
"border": { | |
"side": "right", | |
"color": "border" | |
} | |
}, | |
"primary": { | |
"weight": "bold" | |
} | |
}, | |
"diagram": { | |
"line": { | |
"color": "accent-1" | |
} | |
}, | |
"formField": { | |
"border": { | |
"color": "border", | |
"position": "inner", | |
"side": "bottom", | |
"error": { | |
"color": { | |
"dark": "white", | |
"light": "status-critical" | |
} | |
} | |
}, | |
"content": { | |
"pad": { | |
"horizontal": "small", | |
"bottom": "small" | |
} | |
}, | |
"error": { | |
"margin": { | |
"vertical": "xsmall", | |
"horizontal": "small" | |
}, | |
"color": { | |
"dark": "status-critical", | |
"light": "status-critical" | |
} | |
}, | |
"help": { | |
"margin": { | |
"left": "small" | |
}, | |
"color": { | |
"dark": "dark-3", | |
"light": "dark-3" | |
} | |
}, | |
"label": { | |
"margin": { | |
"vertical": "xsmall", | |
"horizontal": "small" | |
} | |
}, | |
"margin": { | |
"bottom": "small" | |
} | |
}, | |
"grommet": {}, | |
"heading": { | |
"font": {}, | |
"level": { | |
"1": { | |
"font": {}, | |
"small": { | |
"size": "34px", | |
"height": "40px", | |
"maxWidth": "816px" | |
}, | |
"medium": { | |
"size": "50px", | |
"height": "56px", | |
"maxWidth": "1200px" | |
}, | |
"large": { | |
"size": "82px", | |
"height": "88px", | |
"maxWidth": "1968px" | |
}, | |
"xlarge": { | |
"size": "114px", | |
"height": "120px", | |
"maxWidth": "2736px" | |
} | |
}, | |
"2": { | |
"font": {}, | |
"small": { | |
"size": "26px", | |
"height": "32px", | |
"maxWidth": "624px" | |
}, | |
"medium": { | |
"size": "34px", | |
"height": "40px", | |
"maxWidth": "816px" | |
}, | |
"large": { | |
"size": "50px", | |
"height": "56px", | |
"maxWidth": "1200px" | |
}, | |
"xlarge": { | |
"size": "66px", | |
"height": "72px", | |
"maxWidth": "1584px" | |
} | |
}, | |
"3": { | |
"font": {}, | |
"small": { | |
"size": "22px", | |
"height": "28px", | |
"maxWidth": "528px" | |
}, | |
"medium": { | |
"size": "26px", | |
"height": "32px", | |
"maxWidth": "624px" | |
}, | |
"large": { | |
"size": "34px", | |
"height": "40px", | |
"maxWidth": "816px" | |
}, | |
"xlarge": { | |
"size": "42px", | |
"height": "48px", | |
"maxWidth": "1008px" | |
} | |
}, | |
"4": { | |
"font": {}, | |
"small": { | |
"size": "18px", | |
"height": "24px", | |
"maxWidth": "432px" | |
}, | |
"medium": { | |
"size": "18px", | |
"height": "24px", | |
"maxWidth": "432px" | |
}, | |
"large": { | |
"size": "18px", | |
"height": "24px", | |
"maxWidth": "432px" | |
}, | |
"xlarge": { | |
"size": "18px", | |
"height": "24px", | |
"maxWidth": "432px" | |
} | |
}, | |
"5": { | |
"font": {}, | |
"small": { | |
"size": "16px", | |
"height": "22px", | |
"maxWidth": "384px" | |
}, | |
"medium": { | |
"size": "16px", | |
"height": "22px", | |
"maxWidth": "384px" | |
}, | |
"large": { | |
"size": "16px", | |
"height": "22px", | |
"maxWidth": "384px" | |
}, | |
"xlarge": { | |
"size": "16px", | |
"height": "22px", | |
"maxWidth": "384px" | |
} | |
}, | |
"6": { | |
"font": {}, | |
"small": { | |
"size": "14px", | |
"height": "20px", | |
"maxWidth": "336px" | |
}, | |
"medium": { | |
"size": "14px", | |
"height": "20px", | |
"maxWidth": "336px" | |
}, | |
"large": { | |
"size": "14px", | |
"height": "20px", | |
"maxWidth": "336px" | |
}, | |
"xlarge": { | |
"size": "14px", | |
"height": "20px", | |
"maxWidth": "336px" | |
} | |
} | |
}, | |
"responsiveBreakpoint": "small", | |
"weight": 600 | |
}, | |
"layer": { | |
"background": "white", | |
"border": { | |
"radius": "4px" | |
}, | |
"container": { | |
"zIndex": "15" | |
}, | |
"overlay": { | |
"background": "rgba(0, 0, 0, 0.5)" | |
}, | |
"responsiveBreakpoint": "small", | |
"zIndex": "10" | |
}, | |
"menu": { | |
"icons": {} | |
}, | |
"meter": { | |
"color": "accent-1" | |
}, | |
"paragraph": { | |
"small": { | |
"size": "14px", | |
"height": "20px", | |
"maxWidth": "336px" | |
}, | |
"medium": { | |
"size": "18px", | |
"height": "24px", | |
"maxWidth": "432px" | |
}, | |
"large": { | |
"size": "22px", | |
"height": "28px", | |
"maxWidth": "528px" | |
}, | |
"xlarge": { | |
"size": "26px", | |
"height": "32px", | |
"maxWidth": "624px" | |
}, | |
"xxlarge": { | |
"size": "34px", | |
"height": "40px", | |
"maxWidth": "816px" | |
} | |
}, | |
"radioButton": { | |
"border": { | |
"color": { | |
"dark": "rgba(255, 255, 255, 0.5)", | |
"light": "rgba(0, 98, 186, 0.5)" | |
}, | |
"width": "2px" | |
}, | |
"check": { | |
"radius": "100%" | |
}, | |
"hover": { | |
"border": { | |
"color": { | |
"dark": "white", | |
"light": "black" | |
} | |
} | |
}, | |
"icon": {}, | |
"icons": {}, | |
"gap": "small", | |
"size": "24px" | |
}, | |
"rangeInput": { | |
"track": { | |
"height": "4px", | |
"color": [ | |
null, | |
";" | |
] | |
}, | |
"thumb": {} | |
}, | |
"rangeSelector": { | |
"background": { | |
"invert": { | |
"color": "light-4" | |
} | |
} | |
}, | |
"select": { | |
"container": {}, | |
"control": {}, | |
"icons": {}, | |
"options": { | |
"box": { | |
"align": "start", | |
"pad": "small" | |
}, | |
"text": { | |
"margin": "none" | |
} | |
}, | |
"step": 20 | |
}, | |
"tab": { | |
"active": { | |
"color": "text" | |
}, | |
"border": { | |
"side": "bottom", | |
"size": "small", | |
"color": { | |
"dark": "accent-1", | |
"light": "brand" | |
}, | |
"active": { | |
"color": { | |
"dark": "white", | |
"light": "black" | |
} | |
}, | |
"hover": { | |
"color": { | |
"dark": "white", | |
"light": "black" | |
} | |
} | |
}, | |
"color": "control", | |
"hover": { | |
"color": { | |
"dark": "white", | |
"light": "black" | |
} | |
}, | |
"margin": { | |
"vertical": "xxsmall", | |
"horizontal": "small" | |
}, | |
"pad": { | |
"bottom": "xsmall" | |
} | |
}, | |
"tabs": { | |
"header": {}, | |
"panel": {} | |
}, | |
"table": { | |
"header": { | |
"align": "start", | |
"pad": { | |
"horizontal": "small", | |
"vertical": "xsmall" | |
}, | |
"border": "bottom", | |
"verticalAlign": "bottom", | |
"fill": "vertical" | |
}, | |
"body": { | |
"align": "start", | |
"pad": { | |
"horizontal": "small", | |
"vertical": "xsmall" | |
} | |
}, | |
"footer": { | |
"align": "start", | |
"pad": { | |
"horizontal": "small", | |
"vertical": "xsmall" | |
}, | |
"border": "top", | |
"verticalAlign": "top", | |
"fill": "vertical" | |
} | |
}, | |
"text": { | |
"xsmall": { | |
"size": "12px", | |
"height": "18px", | |
"maxWidth": "288px" | |
}, | |
"small": { | |
"size": "14px", | |
"height": "20px", | |
"maxWidth": "336px" | |
}, | |
"medium": { | |
"size": "18px", | |
"height": "24px", | |
"maxWidth": "432px" | |
}, | |
"large": { | |
"size": "22px", | |
"height": "28px", | |
"maxWidth": "528px" | |
}, | |
"xlarge": { | |
"size": "26px", | |
"height": "32px", | |
"maxWidth": "624px" | |
}, | |
"xxlarge": { | |
"size": "34px", | |
"height": "40px", | |
"maxWidth": "816px" | |
} | |
}, | |
"video": { | |
"captions": { | |
"background": "rgba(0, 0, 0, 0.7)" | |
}, | |
"icons": {}, | |
"scrubber": { | |
"color": "light-4" | |
} | |
}, | |
"worldMap": { | |
"color": "light-3", | |
"continent": { | |
"active": "8px", | |
"base": "6px" | |
}, | |
"hover": { | |
"color": "light-4" | |
}, | |
"place": { | |
"active": "20px", | |
"base": "8px" | |
} | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment