{
"groups": [
{
"name": "Color System Core",
"help": "Color groups",
"groups": [
{
"name": "Core Palette Colors",
"properties": [
{
"variable": "theme-primary-color",
"label": "Primary color",
"type": "color",
"help": "The color displayed most frequently across the application's screens and components.  Lighter and darker tonal variations of the primary color are generated and used to create a contrast between tones that make it easy to see the division between surfaces (ex. status bar and a toolbar).",
"defaultValue": "#0094ca"
},
{
"variable": "theme-secondary-color",
"label": "Secondary color",
"type": "color",
"help": "A color used to accent select parts of the application UI. It can be complementary or analogous to the primary color, but it should not simply be a light or dark variation of the primary color.  It should contrast well with the elements that will surround it and be applied sparingly as an accent.  Used in elements such as Buttons, floating action buttons, button text, Text fields, cursors, progress bars, etc.",
"defaultValue": "#ed7653"
},
{
"variable": "theme-error-color",
"label": "Error state color",
"type": "color",
"help": "Used as a visual que to the user when something in the application has gone wrong and needs to be emphasized.",
"defaultValue": "#ff1744"
}
]
}
]
},
{
"name": "Core Color System Variations",
"help": "Core color variation patterns used in the style system",
"groups": [
{
"name": "Primary Color Variations",
"properties": [
{
"variable": "theme-primary-color-dark",
"label": "Dark primary color variation",
"type": "color",
"help": "Primary color dark variation",
"defaultValue": "transparent"
},
{
"variable": "theme-primary-color-light",
"label": "Light primary color variation",
"type": "color",
"help": "Primary color light variation",
"defaultValue": "transparent"
}
]
},
{
"name": "Secondary Color Variations",
"properties": [
{
"variable": "theme-secondary-color-dark",
"label": "Dark secondary color variation",
"type": "color",
"help": "Secondary color dark variation",
"defaultValue": "transparent"
},
{
"variable": "theme-secondary-color-light",
"label": "Light secondary color variation",
"type": "color",
"help": "Secondary color light variation",
"defaultValue": "transparent"
}
]
},
{
"name": "Error Color Variations",
"properties": [
{
"variable": "theme-error-color-dark",
"label": "Dark error color variation",
"type": "color",
"help": "Error color dark variation",
"defaultValue": "transparent"
},
{
"variable": "theme-error-color-light",
"label": "Light error color variation",
"type": "color",
"help": "Error color light variation",
"defaultValue": "transparent"
}
]
},
{
"name": "Secondary Color Variations",
"properties": [
{
"variable": "theme-grey-color-dark",
"label": "Grey secondary color variation",
"type": "color",
"help": "Grey color dark variation",
"defaultValue": "transparent"
},
{
"variable": "theme-grey-color-light",
"label": "Light grey color variation",
"type": "color",
"help": "Grey color light variation",
"defaultValue": "transparent"
}
]
},
{
"name": "Common Colors",
"properties": [
{
"variable": "theme-common-color-white",
"label": "The color used as white",
"type": "color",
"help": "The color that will be used as white.",
"defaultValue": "#ffffff"
},
{
"variable": "theme-common-color-black",
"label": "The color used as black",
"type": "color",
"help": "The color that will be used as black.",
"defaultValue": "#000000"
}
]
}
]
},
{
"name": "Extended Color System: Light Shades",
"help": "Additional patterns leveraged by the color style system.  Light shades are used to contrast sibling dark shades.",
"groups": [
{
"name": "Light Typography Colors",
"properties": [
{
"variable": "theme-light-text-emphasis-color",
"label": "Emphasized text color.",
"type": "color",
"help": "Emphasized text color.",
"defaultValue": "rgba(0, 0, 0, 0.8)"
},
{
"variable": "theme-light-text-primary-color",
"label": "Most frequently used text color.",
"type": "color",
"help": "Most frequently used text color.",
"defaultValue": "rgba(0, 0, 0, 0.6)"
},
{
"variable": "theme-light-text-secondary-color",
"label": "Alternate text color.",
"type": "color",
"help": "Alternate text color.",
"defaultValue": "rgba(0, 0, 0, 0.45)"
},
{
"variable": "theme-light-text-muted-color",
"label": "Hinted text color.",
"type": "color",
"help": "Hinted text color.",
"defaultValue": "rgba(0, 0, 0, 0.3)"
}
]
},
{
"name": "Light Divider Colors",
"properties": [
{
"variable": "theme-light-divider-color",
"label": "Main divider color.",
"type": "color",
"help": "Main divider color.",
"defaultValue": "rgba(0, 0, 0, 0.75)"
},
{
"variable": "theme-light-divider-color-muted",
"label": "Softer divider color.",
"type": "color",
"help": "Softer divider color.",
"defaultValue": "rgba(0, 0, 0, 0.55)"
}
]
},
{
"name": "Light Background Colors",
"properties": [
{
"variable": "theme-light-paper-bg-color",
"label": "The Paper component background color.",
"type": "color",
"help": "The Paper component background color.",
"defaultValue": "#ffffff"
},
{
"variable": "theme-light-default-bg-color",
"label": "Most frequently used background color.",
"type": "color",
"help": "Most frequently used background color.",
"defaultValue": "#edf0f2"
},
{
"variable": "theme-light-appbar-bg-color",
"label": "The Appbar component background color.",
"type": "color",
"help": "The Appbar component background color.",
"defaultValue": "#ffffff"
},
{
"variable": "theme-light-header-bg-color",
"label": "Header component background color.",
"type": "color",
"help": "Header component background color.",
"defaultValue": "#0094ca"
},
{
"variable": "theme-light-chip-bg-color",
"label": "Chip component background color.",
"type": "color",
"help": "Chip component background color.",
"defaultValue": "#e0e0e0"
}
]
},
{
"name": "Light Action State Colors",
"properties": [
{
"variable": "theme-light-action-active-color",
"label": "Color for active state.",
"type": "color",
"help": "Color for active state.",
"defaultValue": "rgba(0, 0, 0, 0.45)"
},
{
"variable": "theme-light-action-hover-color",
"label": "Color for hovered state.",
"type": "color",
"help": "Color for hovered state.",
"defaultValue": "rgba(0, 0, 0, 0.08)"
},
{
"variable": "theme-light-action-selected-color",
"label": "Color for selected state.",
"type": "color",
"help": "Color for selected state.",
"defaultValue": "rgba(0, 0, 0, 0.14)"
},
{
"variable": "theme-light-action-disabled-color",
"label": "Text color for disabled state.",
"type": "color",
"help": "Text color for disabled state.",
"defaultValue": "rgba(0, 0, 0, 0.3)"
},
{
"variable": "theme-light-action-disabled-bg-color",
"label": "Background color for disabled state.",
"type": "color",
"help": "Background color for disabled state.",
"defaultValue": "rgba(0, 0, 0, 0.12)"
}
]
}
]
},
{
"name": "Extended Color System: Dark Shades",
"help": "Additional patterns leveraged by the color style system.  dark shades are used to contrast sibling light shades.",
"groups": [
{
"name": "Dark Typography Colors",
"properties": [
{
"variable": "theme-dark-text-emphasis-color",
"label": "Emphasized text color.",
"type": "color",
"help": "Emphasized text color.",
"defaultValue": "rgba(255, 255, 255, 1)"
},
{
"variable": "theme-dark-text-primary-color",
"label": "Most frequently used text color.",
"type": "color",
"help": "Most frequently used text color.",
"defaultValue": "rgba(255, 255, 255, 1)"
},
{
"variable": "theme-dark-text-secondary-color",
"label": "Alternate text color.",
"type": "color",
"help": "Alternate text color.",
"defaultValue": "rgba(255, 255, 255, 45)"
},
{
"variable": "theme-dark-text-muted-color",
"label": "Hinted text color.",
"type": "color",
"help": "Hinted text color.",
"defaultValue": "rgba(0, 0, 0, 0.3)"
},
{
"variable": "theme-dark-text-icon-color",
"label": "Icon color.",
"type": "color",
"help": "Icon color.",
"defaultValue": "rgba(0, 0, 0, 0.5)"
}
]
},
{
"name": "Dark Divider Colors",
"properties": [
{
"variable": "theme-dark-divider-color",
"label": "Main divider color.",
"type": "color",
"help": "Main divider color.",
"defaultValue": "rgba(0, 0, 0, 0.09)"
},
{
"variable": "theme-dark-divider-color-muted",
"label": "Softer divider color.",
"type": "color",
"help": "Softer divider color.",
"defaultValue": "rgba(0, 0, 0, 0.075)"
}
]
},
{
"name": "Dark Background Colors",
"properties": [
{
"variable": "theme-dark-paper-bg-color",
"label": "The Paper component background color.",
"type": "color",
"help": "The Paper component background color.",
"defaultValue": "#778c94"
},
{
"variable": "theme-dark-default-bg-color",
"label": "Most frequently used background color.",
"type": "color",
"help": "Most frequently used background color.",
"defaultValue": "#303030"
},
{
"variable": "theme-dark-appbar-bg-color",
"label": "The Appbar component background color.",
"type": "color",
"help": "The Appbar component background color.",
"defaultValue": "#5d6f76"
},
{
"variable": "theme-dark-header-bg-color",
"label": "Header component background color.",
"type": "color",
"help": "Header component background color.",
"defaultValue": "#0094ca"
},
{
"variable": "theme-dark-chip-bg-color",
"label": "Chip component background color.",
"type": "color",
"help": "Chip component background color.",
"defaultValue": "#5d6f76"
}
]
},
{
"name": "Dark Action State Colors",
"properties": [
{
"variable": "theme-dark-action-active-color",
"label": "Color for active state.",
"type": "color",
"help": "Color for active state.",
"defaultValue": "rgba(255, 255, 255, 1)"
},
{
"variable": "theme-dark-action-disabled-color",
"label": "Text color for disabled state.",
"type": "color",
"help": "Text color for disabled state.",
"defaultValue": "rgba(255, 255, 255, 0.3)"
}
]
}
]
},
{
"name": "Motion System",
"help": "Duration and easing curve patterns that create smooth and consistent motion.",
"groups": [
{
"name": "Duration Patterns",
"properties": [
{
"variable": "theme-duration-shortest",
"label": "Shortest duration",
"type": "text",
"help": "Shortest animation duration.",
"defaultValue": "150"
},
{
"variable": "theme-duration-shorter",
"label": "Second shortest duration",
"type": "text",
"help": "Second shortest animation duration.",
"defaultValue": "200"
},
{
"variable": "theme-duration-short",
"label": "Short duration",
"type": "text",
"help": "Short animation duration.",
"defaultValue": "250"
},
{
"variable": "theme-duration-standard",
"label": "Standard duration",
"type": "text",
"help": "Standard animation duration.",
"defaultValue": "300"
},
{
"variable": "theme-duration-complex",
"label": "Complex animation duration",
"type": "text",
"help": "Complex animation duration.",
"defaultValue": "375"
},
{
"variable": "theme-duration-entering-screen",
"label": "Animation entering screen duration",
"type": "text",
"help": "Animation entering screen duration.",
"defaultValue": "225"
},
{
"variable": "theme-duration-leaving-screen",
"label": "Leaving screen duration",
"type": "text",
"help": "Leaving screen duration.",
"defaultValue": "195"
}
]
},
{
"name": "Easing Curve Patterns",
"properties": [
{
"variable": "theme-ease-in-out",
"label": "Most common easing curve",
"type": "text",
"help": "Most common easing curve",
"defaultValue": "cubic-bezier(0.4, 0, 0.2, 1)"
},
{
"variable": "theme-ease-out",
"label": "Objects enter the screen at full velocity from off-screen and slowly decelerate to a resting point",
"type": "text",
"help": "Objects enter the screen at full velocity from off-screen and slowly decelerate to a resting point",
"defaultValue": "cubic-bezier(0.0, 0, 0.2, 1)"
},
{
"variable": "theme-ease-in",
"label": "Objects leave the screen at full velocity. They do not decelerate when off-screen.",
"type": "text",
"help": "Objects leave the screen at full velocity. They do not decelerate when off-screen.",
"defaultValue": "cubic-bezier(0.4, 0, 1, 1)"
},
{
"variable": "theme-ease-sharp",
"label": "The sharp curve is used by objects that may return to the screen at any time.",
"type": "text",
"help": "The sharp curve is used by objects that may return to the screen at any time.",
"defaultValue": "cubic-bezier(0.4, 0, 0.6, 1)"
}
]
}
]
},
{
"name": "Space System",
"help": "Margin and padding",
"groups": [
{
"name": "Space Scale",
"properties": [
{
"variable": "theme-space-1",
"label": "First space scale value",
"type": "text",
"help": "First space scale value.",
"defaultValue": "8px"
},
{
"variable": "theme-space-2",
"label": "Second space scale value",
"type": "text",
"help": "Second space scale value.",
"defaultValue": "16px"
},
{
"variable": "theme-space-3",
"label": "Third space scale value",
"type": "text",
"help": "Third space scale value.",
"defaultValue": "32px"
},
{
"variable": "theme-space-4",
"label": "Fourth space scale value",
"type": "text",
"help": "Fourth space scale value.",
"defaultValue": "64px"
}
]
}
]
},
{
"name": "Border Radius",
"help": "Border radius",
"groups": [
{
"name": "Border Radius",
"properties": [
{
"variable": "theme-border-radius",
"label": "Border radius",
"type": "text",
"help": "Border radius.",
"defaultValue": "3px"
}
]
}
]
},
{
"name": "Typography System",
"help": "Font styles",
"groups": [
{
"name": "Font Families",
"properties": [
{
"variable": "theme-primary-font-family",
"label": "Primary font family",
"type": "text",
"help": "Primary font family",
"defaultValue": "'Roboto', 'Helvetica', 'Arial', sans-serif"
},
{
"variable": "theme-alt-font-family",
"label": "Alternate font family",
"type": "text",
"help": "Alternate font family",
"defaultValue": "'Noto Sans', sans-serif"
}
]
},
{
"name": "Font Weight Scale",
"properties": [
{
"variable": "theme-font-weight-1",
"label": "Font weight 1",
"type": "text",
"help": "Font weight scale, fist value.",
"defaultValue": "300"
},
{
"variable": "theme-font-weight-2",
"label": "Font weight 2",
"type": "text",
"help": "Font weight scale, second value.",
"defaultValue": "400"
},
{
"variable": "theme-font-weight-3",
"label": "Font weight 3",
"type": "text",
"help": "Font weight scale, third value.",
"defaultValue": "500"
},
{
"variable": "theme-font-weight-4",
"label": "Font weight 4",
"type": "text",
"help": "Font weight scale, fourth value.",
"defaultValue": "600"
}
]
},
{
"name": "Font Size Scale",
"properties": [
{
"variable": "theme-font-size-1",
"label": "Font size 1",
"type": "text",
"help": "Font size scale, first value.",
"defaultValue": "0.75rem"
},
{
"variable": "theme-font-size-2",
"label": "Font size 2",
"type": "text",
"help": "Font size scale, second value.",
"defaultValue": "0.8125rem"
},
{
"variable": "theme-font-size-3",
"label": "Font size 3",
"type": "text",
"help": "Font size scale, third value.",
"defaultValue": "1rem"
},
{
"variable": "theme-font-size-4",
"label": "Font size 4",
"type": "text",
"help": "Font size scale, fourth value.",
"defaultValue": "1.125rem"
},
{
"variable": "theme-font-size-5",
"label": "Font size 5",
"type": "text",
"help": "Font size scale, fifth value.",
"defaultValue": "1.5rem"
},
{
"variable": "theme-font-size-6",
"label": "Font size 6",
"type": "text",
"help": "Font size scale, six value.",
"defaultValue": "1.75rem"
},
{
"variable": "theme-font-size-7",
"label": "Font size 7",
"type": "text",
"help": "Font size scale, seventh value.",
"defaultValue": "2.125rem"
},
{
"variable": "theme-font-size-8",
"label": "Font size 8",
"type": "text",
"help": "Font size scale, eighth value.",
"defaultValue": "2.8125rem"
}
]
},
{
"name": "Line Height Scale",
"properties": [
{
"variable": "theme-line-height-1",
"label": "Line height 1",
"type": "text",
"help": "Line height scale, first value.",
"defaultValue": "1rem"
},
{
"variable": "theme-line-height-2",
"label": "Line height 2",
"type": "text",
"help": "Line height scale, second value.",
"defaultValue": "1.125rem"
},
{
"variable": "theme-line-height-3",
"label": "Line height 3",
"type": "text",
"help": "Line height scale, third value.",
"defaultValue": "1.5rem"
},
{
"variable": "theme-line-height-4",
"label": "Line height 4",
"type": "text",
"help": "Line height scale, fourth value.",
"defaultValue": "1.75rem"
},
{
"variable": "theme-line-height-5",
"label": "Line height 5",
"type": "text",
"help": "Line height scale, fifth value.",
"defaultValue": "2rem"
},
{
"variable": "theme-line-height-6",
"label": "Line height 6",
"type": "text",
"help": "Line height scale, six value.",
"defaultValue": "2.25rem"
},
{
"variable": "theme-line-height-7",
"label": "Line height 7",
"type": "text",
"help": "Line height scale, seventh value.",
"defaultValue": "3rem"
},
{
"variable": "theme-line-height-8",
"label": "Line height 8",
"type": "text",
"help": "Line height scale, eighth value.",
"defaultValue": "4.5rem"
}
]
}
]
}
]
}