Components and Frameworks to give new features to streamlit
Project description
Change Theme (on the Client Side!)
Code example
import streamlit as st
from streamlit_plugins.components.theme_changer import st_theme_changer
st.title("Theme Changer Component")
st.caption("Just push the button to change the theme! On the client side, of course.")
# specify the primary menu definition
st_theme_changer()
st_theme_changer(render_mode="pills")
Custom Config
The theme name can’t be "Dark" or "Light" since those are reserved for the default Streamlit themes.
Editable custom theme app
import streamlit as st
from streamlit_plugins.components.theme_changer import get_active_theme_key, st_theme_changer
from streamlit_plugins.components.theme_changer.entity import ThemeInfo, ThemeInput, ThemeBaseLight, ThemeBaseDark
# make it look nice from the start
st.set_page_config(layout='wide', initial_sidebar_state='collapsed')
st.title("Theme Changer Component")
st.caption("Just push the button to change the theme! On the client side, of course.")
init_theme_data = dict(
soft_light=ThemeInput(
name="Soft Sunrise",
icon=":material/sunny_snowing:",
order=0,
themeInfo=ThemeInfo(
base=ThemeBaseLight.base,
primaryColor="#6100FF",
backgroundColor="#EFF4FF",
secondaryBackgroundColor="#E7EEF5",
textColor="#000000",
widgetBackgroundColor="#F3F5F7",
widgetBorderColor="#9000FF",
skeletonBackgroundColor="#E0E0E0",
bodyFont=ThemeBaseLight.bodyFont,
codeFont=ThemeBaseLight.codeFont,
fontFaces=ThemeBaseLight.fontFaces,
)
),
soft_dark=ThemeInput(
name="Dark Midnight",
icon=":material/nights_stay:",
order=1,
themeInfo=ThemeInfo(
base=ThemeBaseDark.base,
primaryColor="#7AF8FF",
backgroundColor="#000000",
secondaryBackgroundColor="#045367",
textColor="#f0f8ff",
widgetBackgroundColor="#092927",
widgetBorderColor="#75D9FF",
skeletonBackgroundColor="#365252",
bodyFont=ThemeBaseDark.bodyFont,
codeFont=ThemeBaseDark.codeFont,
fontFaces=ThemeBaseDark.fontFaces,
)
),
sepia=ThemeInput(
name="Sepia",
icon=":material/gradient:",
order=2,
themeInfo=ThemeInfo(
base=ThemeBaseLight.base,
primaryColor="#FF0004",
backgroundColor="#F9F9E0",
secondaryBackgroundColor="#EFEFB4",
textColor="#000000",
widgetBackgroundColor="#F5F5D7",
widgetBorderColor="#E2DEAD",
skeletonBackgroundColor="#F5F5DC",
bodyFont=ThemeBaseLight.bodyFont,
codeFont=ThemeBaseLight.codeFont,
fontFaces=ThemeBaseLight.fontFaces,
)
)
)
if st.session_state.get("theme_data") is None:
st.session_state["theme_data"] = init_theme_data
theme_data = st.session_state["theme_data"]
st_theme_changer(themes_data=theme_data, render_mode="init", default_init_theme_name="soft_dark")
st_theme_changer(themes_data=theme_data, rerun_whole_st=True)
with st.expander("Theme Editor", expanded=False):
with st.container(border=False):
theme_keys = list(theme_data.keys())
tabs = st.tabs(theme_keys)
for i, tab in enumerate(tabs):
theme_key = theme_keys[i]
with tab:
with st.form(key=f"{theme_key}_form", border=False):
col1, col2, col3 = st.columns(3)
name = col1.text_input("Theme Label", value=theme_data[theme_key].name, key=f"{theme_key}_text_input")
icon = col2.text_input("Theme Icon", value=theme_data[theme_key].icon, key=f"{theme_key}_icon_input")
order = col3.number_input("Order", value=theme_data[theme_key].order, key=f"{theme_key}_order_input")
col1, col2, col3 = st.columns(3)
primaryColor = col1.color_picker("Primary Color", value=theme_data[theme_key].themeInfo.primaryColor, key=f"{theme_key}_primary_color_input")
textColor = col2.color_picker("Text Color", value=theme_data[theme_key].themeInfo.textColor, key=f"{theme_key}_text_color_input")
col1, col2, col3 = st.columns(3)
backgroundColor = col1.color_picker("Background Color", value=theme_data[theme_key].themeInfo.backgroundColor, key=f"{theme_key}_background_color_input")
secondaryBackgroundColor = col2.color_picker("Secondary Background Color", value=theme_data[theme_key].themeInfo.secondaryBackgroundColor, key=f"{theme_key}_secondary_background_color_input")
skeletonBackgroundColor = col3.color_picker("Skeleton Background Color", value=theme_data[theme_key].themeInfo.skeletonBackgroundColor, key=f"{theme_key}_skeleton_background_color_input")
col1, col2, col3 = st.columns(3)
widgetBackgroundColor = col1.color_picker("Widget Background Color", value=theme_data[theme_key].themeInfo.widgetBackgroundColor, key=f"{theme_key}_widget_background_color_input")
widgetBorderColor = col2.color_picker("Widget Border Color", value=theme_data[theme_key].themeInfo.widgetBorderColor, key=f"{theme_key}_widget_border_color_input")
baseWidgetRadius = col3.number_input("Base Widget Radius", value=theme_data[theme_key].themeInfo.radii["baseWidgetRadius"], key=f"{theme_key}_base_widget_radius_input")
col1, col2, col3 = st.columns(3)
checkbox_radius = col1.number_input("Checkbox Radius", value=theme_data[theme_key].themeInfo.radii["checkboxRadius"], key=f"{theme_key}_checkbox_radius_input")
col2.checkbox("Example Checkbox", key=f"{theme_key}_example_checkbox")
col1, col2, col3 = st.columns(3)
tiny_font_size = col1.number_input("Tiny Font Size", value=theme_data[theme_key].themeInfo.fontSizes["tinyFontSize"], key=f"{theme_key}_tiny_font_size_input")
small_font_size = col2.number_input("Small Font Size", value=theme_data[theme_key].themeInfo.fontSizes["smallFontSize"], key=f"{theme_key}_small_font_size_input")
base_font_size = col3.number_input("Base Font Size", value=theme_data[theme_key].themeInfo.fontSizes["baseFontSize"], key=f"{theme_key}_base_font_size_input")
col1, col2 = st.columns(2)
bodyFont = col1.text_input("Body Font", value=theme_data[theme_key].themeInfo.bodyFont, key=f"{theme_key}_body_font_input")
codeFont = col2.text_input("Code Font", value=theme_data[theme_key].themeInfo.codeFont, key=f"{theme_key}_code_font_input")
# fontFaces = col3.text_area("Font Faces", value=str(theme_data[theme_key].themeInfo.fontFaces), key=f"{theme_key}_font_faces_input")
theme_data[theme_key].name = name
theme_data[theme_key].icon = icon
theme_data[theme_key].order = order
theme_data[theme_key].themeInfo.primaryColor = primaryColor
theme_data[theme_key].themeInfo.backgroundColor = backgroundColor
theme_data[theme_key].themeInfo.secondaryBackgroundColor = secondaryBackgroundColor
theme_data[theme_key].themeInfo.textColor = textColor
theme_data[theme_key].themeInfo.widgetBackgroundColor = widgetBackgroundColor
theme_data[theme_key].themeInfo.widgetBorderColor = widgetBorderColor
theme_data[theme_key].themeInfo.skeletonBackgroundColor = skeletonBackgroundColor
theme_data[theme_key].themeInfo.bodyFont = bodyFont
theme_data[theme_key].themeInfo.codeFont = codeFont
theme_data[theme_key].themeInfo.radii["baseWidgetRadius"] = baseWidgetRadius
theme_data[theme_key].themeInfo.fontSizes["tinyFontSize"] = tiny_font_size
theme_data[theme_key].themeInfo.fontSizes["smallFontSize"] = small_font_size
theme_data[theme_key].themeInfo.fontSizes["baseFontSize"] = base_font_size
update_theme = st.form_submit_button("Save")
if update_theme:
st.session_state["theme_data"] = theme_data
if get_active_theme_key() == theme_key:
st_theme_changer(themes_data=theme_data, render_mode="change", default_init_theme_name=theme_key)
st.rerun()
with st.sidebar:
st_theme_changer(
themes_data=theme_data, render_mode="pills",
rerun_whole_st=True, key="first_pills"
)
All Theme Configurations (CSS Properties)
Theme Configuration Table
Here’s an overview of the theme configuration options and what they do:
| Key | Value | Description |
|---|---|---|
primaryColor |
"#1A6CE7" |
The main accent color used throughout your app. For example, widgets like st.checkbox, st.slider, and st.text_input (when focused) use this color. |
backgroundColor |
"#FFFFFF" |
The main background color of your app. |
secondaryBackgroundColor |
"#F5F5F5" |
Used as a secondary background color, like for the sidebar or interactive widgets. |
textColor |
"#1A1D21" |
Controls the text color for most elements in your app. |
font |
0 1 2 ["sans serif" "serif" "monospace"] |
Sets the font used in your app. Options are "sans serif", "serif", or "monospace". Defaults to "sans serif" if unset. |
base |
0 1 [light dark] |
Lets you create custom themes by slightly modifying one of the preset Streamlit themes. |
*widgetBackgroundColor |
"#FFFFFF" |
Background color for widgets like inputs or sliders. |
*widgetBorderColor |
"#D3DAE8" |
Border color for widgets and interactive elements. |
*skeletonBackgroundColor |
"#CCDDEE" |
Background color for loading placeholders (skeletons). |
*bodyFont |
"Inter", "Source Sans Pro", sans-serif |
Default font for body text. |
*codeFont |
"Apercu Mono", "Source Code Pro", monospace |
Font used for code or monospaced text. |
*fontFaces |
Array of font families with URLs and weights | Custom fonts, including font-family, URL, and weight (e.g., Inter, Apercu Mono). |
*radii.checkboxRadius |
3 |
Border radius for checkboxes. |
*radii.baseWidgetRadius |
6 |
Border radius for widgets like buttons or inputs. |
*fontSizes.tinyFontSize |
10 |
Font size for tiny text (e.g., labels). |
*fontSizes.smallFontSize |
12 |
Font size for small text, like secondary descriptions. |
*fontSizes.baseFontSize |
14 |
Base font size for regular text. |
The parameters marked with a * are new in Streamlit’s configuration. You can tweak them to adjust fonts and font sizes.
Properties with a.in their names are part of nested objects. Details about these nested objects are provided below.
Font Faces Details "fontFaces": [...]
"family" |
"url" |
"weight" |
Description |
|---|---|---|---|
Inter |
https://rsms.me/inter/font-files/Inter-Regular.woff2?v=3.19 |
400 | Regular weight of the Inter font. |
Inter |
https://rsms.me/inter/font-files/Inter-SemiBold.woff2?v=3.19 |
600 | Semi-bold weight of the Inter font. |
Inter |
https://rsms.me/inter/font-files/Inter-Bold.woff2?v=3.19 |
700 | Bold weight of the Inter font. |
Apercu Mono |
https://app.snowflake.com/static/2c4863733dec5a69523e.woff2 |
400 | Regular weight of the Apercu Mono font. |
Apercu Mono |
https://app.snowflake.com/static/e903ae189d31a97e231e.woff2 |
500 | Medium weight of the Apercu Mono font. |
Apercu Mono |
https://app.snowflake.com/static/32447307374154c88bc0.woff2 |
700 | Bold weight of the Apercu Mono font. |
Theme Configuration: Properties and Data Types
Enum Descriptions
Font Family (font)
0(SANS_SERIF): Standard sans-serif font family.1(SERIF): Standard serif font family.2(MONOSPACE): Monospaced font family, often for code.
Base Theme (base)
0(LIGHT): Light base theme.1(DARK): Dark base theme.
Nested Object Details
radii
| Sub-Property | Type | Description |
|---|---|---|
checkboxRadius |
number |
Radius for checkboxes. |
baseWidgetRadius |
number |
Radius for widgets like buttons or inputs. |
fontSizes
| Sub-Property | Type | Description |
|---|---|---|
tinyFontSize |
number |
Font size for tiny text. |
smallFontSize |
number |
Font size for small text. |
baseFontSize |
number |
Default font size for regular text. |
Workaround for Switching Themes Without Custom Components
You can use query parameters in the URL to switch between light and dark themes. However, this requires a page reload and won’t allow custom themes. Examples:
?embed_options=light_theme?embed_options=dark_theme
Override Base "Dark" or "Light" Themes (Maybe in future 🤞0)
Currently, you can’t override the default "Dark" or "Light" themes directly in Streamlit. Until the Streamlit team releases support for the SET_CUSTOM_THEME_CONFIG event, you’re limited to modifying the available properties listed above. But for your understanding, here's the all properties that streamlit team can configurate the frontend styles for Dark and Light themes.
{
"name": "Dark",
"emotion": {
"inSidebar": false,
"breakpoints": {
"hideWidgetDetails": 180,
"hideNumberInputControls": 120,
"sm": "576px",
"columns": "640px",
"md": "768px"
},
"colors": {
"transparent": "transparent",
"black": "#000000",
"white": "#ffffff",
"gray10": "#fafafa",
"gray20": "#f0f2f6",
"gray30": "#e6eaf1",
"gray40": "#d5dae5",
"gray50": "#bfc5d3",
"gray60": "#a3a8b8",
"gray70": "#808495",
"gray80": "#555867",
"gray85": "#31333F",
"gray90": "#262730",
"gray100": "#0e1117",
"red10": "#fff0f0",
"red20": "#ffdede",
"red30": "#ffc7c7",
"red40": "#ffabab",
"red50": "#ff8c8c",
"red60": "#ff6c6c",
"red70": "#ff4b4b",
"red80": "#ff2b2b",
"red90": "#bd4043",
"red100": "#7d353b",
"orange10": "#fffae8",
"orange20": "#fff6d0",
"orange30": "#ffecb0",
"orange40": "#ffe08e",
"orange50": "#ffd16a",
"orange60": "#ffbd45",
"orange70": "#ffa421",
"orange80": "#ff8700",
"orange90": "#ed6f13",
"orange100": "#d95a00",
"yellow10": "#ffffe1",
"yellow20": "#ffffc2",
"yellow30": "#ffffa0",
"yellow40": "#ffff7d",
"yellow50": "#ffff59",
"yellow60": "#fff835",
"yellow70": "#ffe312",
"yellow80": "#faca2b",
"yellow90": "#edbb16",
"yellow100": "#dea816",
"yellow110": "#916e10",
"green10": "#dffde9",
"green20": "#c0fcd3",
"green30": "#9ef6bb",
"green40": "#7defa1",
"green50": "#5ce488",
"green60": "#3dd56d",
"green70": "#21c354",
"green80": "#09ab3b",
"green90": "#158237",
"green100": "#177233",
"blueGreen10": "#dcfffb",
"blueGreen20": "#bafff7",
"blueGreen30": "#93ffee",
"blueGreen40": "#6bfde3",
"blueGreen50": "#45f4d5",
"blueGreen60": "#20e7c5",
"blueGreen70": "#00d4b1",
"blueGreen80": "#29b09d",
"blueGreen90": "#2c867c",
"blueGreen100": "#246e69",
"lightBlue10": "#e0feff",
"lightBlue20": "#bffdff",
"lightBlue30": "#9af8ff",
"lightBlue40": "#73efff",
"lightBlue50": "#4be4ff",
"lightBlue60": "#24d4ff",
"lightBlue70": "#00c0f2",
"lightBlue80": "#00a4d4",
"lightBlue90": "#0d8cb5",
"lightBlue100": "#15799e",
"blue10": "#e4f5ff",
"blue20": "#c7ebff",
"blue30": "#a6dcff",
"blue40": "#83c9ff",
"blue50": "#60b4ff",
"blue60": "#3d9df3",
"blue70": "#1c83e1",
"blue80": "#0068c9",
"blue90": "#0054a3",
"blue100": "#004280",
"purple10": "#f5ebff",
"purple20": "#ebd6ff",
"purple30": "#dbbbff",
"purple40": "#c89dff",
"purple50": "#b27eff",
"purple60": "#9a5dff",
"purple70": "#803df5",
"purple80": "#6d3fc0",
"purple90": "#583f84",
"purple100": "#3f3163",
"bgColor": "#0e1117",
"secondaryBg": "#262730",
"bodyText": "#fafafa",
"warning": "#ffffc2",
"warningBg": "rgba(255, 227, 18, 0.2)",
"success": "#dffde9",
"successBg": "rgba(61, 213, 109, 0.2)",
"infoBg": "rgba(61, 157, 243, 0.2)",
"info": "#c7ebff",
"danger": "#ffdede",
"dangerBg": "rgba(255, 108, 108, 0.2)",
"primary": "#ff4b4b",
"disabled": "#808495",
"lightestGray": "#f0f2f6",
"lightGray": "#e6eaf1",
"gray": "#a3a8b8",
"darkGray": "#808495",
"red": "#ff2b2b",
"blue": "#0068c9",
"green": "#09ab3b",
"yellow": "#faca2b",
"linkText": "hsla(209, 100%, 59%, 1)",
"fadedText05": "rgba(250, 250, 250, 0.1)",
"fadedText10": "rgba(250, 250, 250, 0.2)",
"fadedText20": "rgba(250, 250, 250, 0.3)",
"fadedText40": "rgba(250, 250, 250, 0.4)",
"fadedText60": "rgba(250, 250, 250, 0.6)",
"bgMix": "rgba(26, 28, 36, 1)",
"darkenedBgMix100": "hsla(228, 16%, 72%, 1)",
"darkenedBgMix25": "rgba(172, 177, 195, 0.25)",
"darkenedBgMix15": "rgba(172, 177, 195, 0.15)",
"lightenedBg05": "hsla(220, 24%, 10%, 1)",
"borderColor": "rgba(250, 250, 250, 0.2)",
"borderColorLight": "rgba(250, 250, 250, 0.1)",
"codeTextColor": "#09ab3b",
"codeHighlightColor": "rgba(26, 28, 36, 1)",
"metricPositiveDeltaColor": "#09ab3b",
"metricNegativeDeltaColor": "#ff2b2b",
"metricNeutralDeltaColor": "rgba(250, 250, 250, 0.6)",
"docStringModuleText": "#fafafa",
"docStringTypeText": "#21c354",
"docStringContainerBackground": "rgba(38, 39, 48, 0.4)",
"headingColor": "#fafafa",
"navTextColor": "#bfc5d3",
"navActiveTextColor": "#fafafa",
"navIconColor": "#808495",
"sidebarControlColor": "#fafafa"
},
"fonts": {
"sansSerif": "\"Source Sans Pro\", sans-serif",
"monospace": "\"Source Code Pro\", monospace",
"serif": "\"Source Serif Pro\", serif",
"materialIcons": "Material Symbols Rounded"
},
"fontSizes": {
"twoSm": "12px",
"sm": "14px",
"md": "1rem",
"mdLg": "1.125rem",
"lg": "1.25rem",
"xl": "1.5rem",
"twoXL": "1.75rem",
"threeXL": "2.25rem",
"fourXL": "2.75rem",
"twoSmPx": 12,
"smPx": 14,
"mdPx": 16
},
"fontWeights": {
"normal": 400,
"bold": 600,
"extrabold": 700
},
"genericFonts": {
"bodyFont": "\"Source Sans Pro\", sans-serif",
"codeFont": "\"Source Code Pro\", monospace",
"headingFont": "\"Source Sans Pro\", sans-serif",
"iconFont": "Material Symbols Rounded"
},
"iconSizes": {
"xs": "0.5rem",
"sm": "0.75rem",
"md": "0.9rem",
"base": "1rem",
"lg": "1.25rem",
"xl": "1.5rem",
"twoXL": "1.8rem",
"threeXL": "2.3rem"
},
"lineHeights": {
"none": 1,
"headings": 1.2,
"tight": 1.25,
"inputWidget": 1.4,
"small": 1.5,
"base": 1.6,
"menuItem": 2
},
"radii": {
"md": "0.25rem",
"default": "0.5rem",
"xl": "0.75rem",
"xxl": "1rem",
"full": "9999px"
},
"sizes": {
"full": "100%",
"headerHeight": "3.75rem",
"fullScreenHeaderHeight": "2.875rem",
"sidebarTopSpace": "6rem",
"toastWidth": "21rem",
"contentMaxWidth": "46rem",
"maxChartTooltipWidth": "30rem",
"checkbox": "1rem",
"borderWidth": "1px",
"smallElementHeight": "1.5rem",
"minElementHeight": "2.5rem",
"largestElementHeight": "4.25rem",
"smallLogoHeight": "1.25rem",
"defaultLogoHeight": "1.5rem",
"largeLogoHeight": "2rem",
"sliderThumb": "0.75rem",
"wideSidePadding": "5rem",
"headerDecorationHeight": "0.125rem",
"appRunningMen": "1.6rem",
"appStatusMaxWidth": "20rem",
"spinnerSize": "1.375rem",
"spinnerThickness": "0.2rem",
"tabHeight": "2.5rem",
"minPopupWidth": "20rem",
"maxTooltipHeight": "18.75rem",
"chatAvatarSize": "2rem",
"clearIconSize": "1.5em",
"numberInputControlsWidth": "2rem",
"emptyDropdownHeight": "5.625rem",
"dropdownItemHeight": "2.5rem",
"maxDropdownHeight": "18.75rem",
"appDefaultBottomPadding": "3.5rem"
},
"spacing": {
"px": "1px",
"none": "0",
"threeXS": "0.125rem",
"twoXS": "0.25rem",
"xs": "0.375rem",
"sm": "0.5rem",
"md": "0.75rem",
"lg": "1rem",
"xl": "1.25rem",
"twoXL": "1.5rem",
"threeXL": "2rem",
"fourXL": "4rem"
},
"zIndices": {
"hide": -1,
"auto": "auto",
"base": 0,
"priority": 1,
"sidebar": 100,
"menuButton": 110,
"balloons": 1000000,
"header": 999990,
"sidebarMobile": 999995,
"popupMenu": 1000040,
"fullscreenWrapper": 1000050,
"tablePortal": 1000110,
"bottom": 99,
"cacheSpinner": 101,
"toast": 100,
"vegaTooltips": 1000060
}
},
"basewebTheme": {
"animation": {
"timing100": "100ms",
"timing200": "200ms",
"timing300": "300ms",
"timing400": "400ms",
"timing500": "500ms",
"timing600": "600ms",
"timing700": "700ms",
"timing800": "800ms",
"timing900": "900ms",
"timing1000": "1000ms",
"easeInCurve": "cubic-bezier(.8, .2, .6, 1)",
"easeOutCurve": "cubic-bezier(.2, .8, .4, 1)",
"easeInOutCurve": "cubic-bezier(0.4, 0, 0.2, 1)",
"easeInQuinticCurve": "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
"easeOutQuinticCurve": "cubic-bezier(0.23, 1, 0.32, 1)",
"easeInOutQuinticCurve": "cubic-bezier(0.86, 0, 0.07, 1)",
"linearCurve": "cubic-bezier(0, 0, 1, 1)"
},
"borders": {
"border100": {
"borderColor": "hsla(0, 0%, 0%, 0.04)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"border200": {
"borderColor": "hsla(0, 0%, 0%, 0.08)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"border300": {
"borderColor": "hsla(0, 0%, 0%, 0.12)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"border400": {
"borderColor": "hsla(0, 0%, 0%, 0.16)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"border500": {
"borderColor": "hsla(0, 0%, 0%, 0.2)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"border600": {
"borderColor": "hsla(0, 0%, 0%, 0.24)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"radius100": "0.5rem",
"radius200": "0.5rem",
"radius300": "0.5rem",
"radius400": "0.5rem",
"radius500": "0.5rem",
"useRoundedCorners": true,
"buttonBorderRadiusMini": "0.25rem",
"buttonBorderRadius": "0.5rem",
"checkboxBorderRadius": "0.25rem",
"inputBorderRadiusMini": "0.25rem",
"inputBorderRadius": "0.5rem",
"popoverBorderRadius": "0.5rem",
"surfaceBorderRadius": "0.5rem",
"tagBorderRadius": "0.25rem"
},
"breakpoints": {
"small": 320,
"medium": 600,
"large": 1136
},
"colors": {
"primaryA": "#ff4b4b",
"primaryB": "#141414",
"primary": "#ff4b4b",
"primary50": "#F6F6F6",
"primary100": "#ff4b4b",
"primary200": "#ff4b4b",
"primary300": "#ff4b4b",
"primary400": "#ff4b4b",
"primary500": "#ff4b4b",
"primary600": "#ff4b4b",
"primary700": "#ff4b4b",
"accent": "rgba(255, 75, 75, 0.5)",
"accent50": "#EFF3FE",
"accent100": "#D4E2FC",
"accent200": "#A0BFF8",
"accent300": "#5B91F5",
"accent400": "#276EF1",
"accent500": "#1E54B7",
"accent600": "#174291",
"accent700": "#102C60",
"negative": "#AB1300",
"negative50": "#FFEFED",
"negative100": "#FED7D2",
"negative200": "#F1998E",
"negative300": "#E85C4A",
"negative400": "#E11900",
"negative500": "#AB1300",
"negative600": "#870F00",
"negative700": "#5A0A00",
"warning": "#BC8B2C",
"warning50": "#FFFAF0",
"warning100": "#FFF2D9",
"warning200": "#FFE3AC",
"warning300": "#FFCF70",
"warning400": "#FFC043",
"warning500": "#BC8B2C",
"warning600": "#996F00",
"warning700": "#674D1B",
"positive": "#048848",
"positive50": "#E6F2ED",
"positive100": "#ADDEC9",
"positive200": "#66D19E",
"positive300": "#06C167",
"positive400": "#048848",
"positive500": "#03703C",
"positive600": "#03582F",
"positive700": "#10462D",
"white": "#ffffff",
"black": "#000000",
"mono100": "#0e1117",
"mono200": "#262730",
"mono300": "#e6eaf1",
"mono400": "#e6eaf1",
"mono500": "#a3a8b8",
"mono600": "rgba(250, 250, 250, 0.4)",
"mono700": "#a3a8b8",
"mono800": "#fafafa",
"mono900": "#fafafa",
"mono1000": "#000000",
"ratingInactiveFill": "#6B6B6B",
"ratingStroke": "#333333",
"bannerActionLowInfo": "#D4E2FC",
"bannerActionLowNegative": "#FED7D2",
"bannerActionLowPositive": "#ADDEC9",
"bannerActionLowWarning": "#FFE3AC",
"bannerActionHighInfo": "#1E54B7",
"bannerActionHighNegative": "#AB1300",
"bannerActionHighPositive": "#03703C",
"bannerActionHighWarning": "#FFE3AC",
"buttonPrimaryFill": "#FFFFFF",
"buttonPrimaryText": "#FFFFFF",
"buttonPrimaryHover": "#ff4b4b",
"buttonPrimaryActive": "#ff4b4b",
"buttonPrimarySelectedFill": "#ff4b4b",
"buttonPrimarySelectedText": "#FFFFFF",
"buttonPrimarySpinnerForeground": "#276EF1",
"buttonPrimarySpinnerBackground": "#141414",
"buttonSecondaryFill": "#ff4b4b",
"buttonSecondaryText": "#FFFFFF",
"buttonSecondaryHover": "#ff4b4b",
"buttonSecondaryActive": "#ff4b4b",
"buttonSecondarySelectedFill": "#ff4b4b",
"buttonSecondarySelectedText": "#FFFFFF",
"buttonSecondarySpinnerForeground": "#276EF1",
"buttonSecondarySpinnerBackground": "#141414",
"buttonTertiaryFill": "transparent",
"buttonTertiaryText": "#FFFFFF",
"buttonTertiaryHover": "#F6F6F6",
"buttonTertiaryActive": "#ff4b4b",
"buttonTertiarySelectedFill": "#ff4b4b",
"buttonTertiarySelectedText": "#FFFFFF",
"buttonTertiaryDisabledActiveFill": "#F6F6F6",
"buttonTertiaryDisabledActiveText": "rgba(250, 250, 250, 0.4)",
"buttonTertiarySpinnerForeground": "#276EF1",
"buttonTertiarySpinnerBackground": "#ff4b4b",
"buttonDisabledFill": "hsla(220, 24%, 10%, 1)",
"buttonDisabledText": "rgba(250, 250, 250, 0.4)",
"buttonDisabledActiveFill": "#a3a8b8",
"buttonDisabledActiveText": "#0e1117",
"buttonDisabledSpinnerForeground": "rgba(250, 250, 250, 0.4)",
"buttonDisabledSpinnerBackground": "#d5dae5",
"breadcrumbsText": "#000000",
"breadcrumbsSeparatorFill": "#a3a8b8",
"calendarBackground": "#0e1117",
"calendarForeground": "#fafafa",
"calendarForegroundDisabled": "#a3a8b8",
"calendarHeaderBackground": "#262730",
"calendarHeaderForeground": "#fafafa",
"calendarHeaderBackgroundActive": "#262730",
"calendarHeaderForegroundDisabled": "#d5dae5",
"calendarDayForegroundPseudoSelected": "#fafafa",
"calendarDayBackgroundPseudoSelectedHighlighted": "#ff4b4b",
"calendarDayForegroundPseudoSelectedHighlighted": "#fafafa",
"calendarDayBackgroundSelected": "#ff4b4b",
"calendarDayForegroundSelected": "#ffffff",
"calendarDayBackgroundSelectedHighlighted": "#ff4b4b",
"calendarDayForegroundSelectedHighlighted": "#ffffff",
"comboboxListItemFocus": "#262730",
"comboboxListItemHover": "#e6eaf1",
"fileUploaderBackgroundColor": "#262730",
"fileUploaderBackgroundColorActive": "#F6F6F6",
"fileUploaderBorderColorActive": "#FFFFFF",
"fileUploaderBorderColorDefault": "#a3a8b8",
"fileUploaderMessageColor": "#fafafa",
"linkText": "#FFFFFF",
"linkVisited": "#ff4b4b",
"linkHover": "#ff4b4b",
"linkActive": "#ff4b4b",
"listHeaderFill": "#FFFFFF",
"listBodyFill": "#FFFFFF",
"progressStepsCompletedText": "#FFFFFF",
"progressStepsCompletedFill": "#FFFFFF",
"progressStepsActiveText": "#FFFFFF",
"progressStepsActiveFill": "#FFFFFF",
"toggleFill": "#FFFFFF",
"toggleFillChecked": "#FFFFFF",
"toggleFillDisabled": "rgba(250, 250, 250, 0.4)",
"toggleTrackFill": "#d5dae5",
"toggleTrackFillDisabled": "#262730",
"tickFill": "hsla(220, 24%, 10%, 1)",
"tickFillHover": "#262730",
"tickFillActive": "#262730",
"tickFillSelected": "#ff4b4b",
"tickFillSelectedHover": "#ff4b4b",
"tickFillSelectedHoverActive": "#ff4b4b",
"tickFillError": "#FFEFED",
"tickFillErrorHover": "#FED7D2",
"tickFillErrorHoverActive": "#F1998E",
"tickFillErrorSelected": "#E11900",
"tickFillErrorSelectedHover": "#AB1300",
"tickFillErrorSelectedHoverActive": "#870F00",
"tickFillDisabled": "rgba(250, 250, 250, 0.4)",
"tickBorder": "#a3a8b8",
"tickBorderError": "#E11900",
"tickMarkFill": "#f0f2f6",
"tickMarkFillError": "#FFFFFF",
"tickMarkFillDisabled": "hsla(220, 24%, 10%, 1)",
"sliderTrackFill": "#d5dae5",
"sliderHandleFill": "#E2E2E2",
"sliderHandleFillDisabled": "#ff4b4b",
"sliderHandleInnerFill": "#d5dae5",
"sliderTrackFillHover": "#a3a8b8",
"sliderTrackFillActive": "rgba(250, 250, 250, 0.4)",
"sliderTrackFillDisabled": "#262730",
"sliderHandleInnerFillDisabled": "#d5dae5",
"sliderHandleInnerFillSelectedHover": "#FFFFFF",
"sliderHandleInnerFillSelectedActive": "#ff4b4b",
"inputBorder": "#262730",
"inputFill": "#262730",
"inputFillError": "#FFEFED",
"inputFillDisabled": "#262730",
"inputFillActive": "#262730",
"inputFillPositive": "#E6F2ED",
"inputTextDisabled": "rgba(250, 250, 250, 0.4)",
"inputBorderError": "#F1998E",
"inputBorderPositive": "#66D19E",
"inputEnhancerFill": "#e6eaf1",
"inputEnhancerFillDisabled": "#262730",
"inputEnhancerTextDisabled": "rgba(250, 250, 250, 0.4)",
"inputPlaceholder": "rgba(250, 250, 250, 0.6)",
"inputPlaceholderDisabled": "rgba(250, 250, 250, 0.4)",
"menuFill": "#0e1117",
"menuFillHover": "#262730",
"menuFontDefault": "#fafafa",
"menuFontDisabled": "#a3a8b8",
"menuFontHighlighted": "#fafafa",
"menuFontSelected": "#fafafa",
"modalCloseColor": "#fafafa",
"modalCloseColorHover": "#fafafa",
"modalCloseColorFocus": "#fafafa",
"tabBarFill": "#262730",
"tabColor": "#fafafa",
"notificationInfoBackground": "rgba(61, 157, 243, 0.2)",
"notificationInfoText": "#c7ebff",
"notificationPositiveBackground": "rgba(61, 213, 109, 0.2)",
"notificationPositiveText": "#dffde9",
"notificationWarningBackground": "rgba(255, 227, 18, 0.2)",
"notificationWarningText": "#ffffc2",
"notificationNegativeBackground": "rgba(255, 108, 108, 0.2)",
"notificationNegativeText": "#ffdede",
"tagFontDisabledRampUnit": "100",
"tagSolidFontRampUnit": "0",
"tagSolidRampUnit": "400",
"tagOutlinedFontRampUnit": "400",
"tagOutlinedRampUnit": "200",
"tagSolidHoverRampUnit": "50",
"tagSolidActiveRampUnit": "100",
"tagSolidDisabledRampUnit": "50",
"tagSolidFontHoverRampUnit": "500",
"tagLightRampUnit": "50",
"tagLightHoverRampUnit": "100",
"tagLightActiveRampUnit": "100",
"tagLightFontRampUnit": "500",
"tagLightFontHoverRampUnit": "500",
"tagOutlinedHoverRampUnit": "50",
"tagOutlinedActiveRampUnit": "0",
"tagOutlinedFontHoverRampUnit": "400",
"tagNeutralFontDisabled": "rgba(250, 250, 250, 0.4)",
"tagNeutralOutlinedDisabled": "#e6eaf1",
"tagNeutralSolidFont": "#FFFFFF",
"tagNeutralSolidBackground": "#000000",
"tagNeutralOutlinedBackground": "rgba(250, 250, 250, 0.4)",
"tagNeutralOutlinedFont": "#000000",
"tagNeutralSolidHover": "#e6eaf1",
"tagNeutralSolidActive": "#e6eaf1",
"tagNeutralSolidDisabled": "#262730",
"tagNeutralSolidFontHover": "#fafafa",
"tagNeutralLightBackground": "#e6eaf1",
"tagNeutralLightHover": "#e6eaf1",
"tagNeutralLightActive": "#e6eaf1",
"tagNeutralLightDisabled": "#262730",
"tagNeutralLightFont": "#fafafa",
"tagNeutralLightFontHover": "#fafafa",
"tagNeutralOutlinedActive": "#fafafa",
"tagNeutralOutlinedFontHover": "#fafafa",
"tagNeutralOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tagPrimaryFontDisabled": "rgba(250, 250, 250, 0.4)",
"tagPrimaryOutlinedDisabled": "transparent",
"tagPrimarySolidFont": "#FFFFFF",
"tagPrimarySolidBackground": "#ff4b4b",
"tagPrimaryOutlinedFontHover": "#FFFFFF",
"tagPrimaryOutlinedFont": "#FFFFFF",
"tagPrimarySolidHover": "#ff4b4b",
"tagPrimarySolidActive": "#ff4b4b",
"tagPrimarySolidDisabled": "#F6F6F6",
"tagPrimarySolidFontHover": "#ff4b4b",
"tagPrimaryLightBackground": "#F6F6F6",
"tagPrimaryLightHover": "#ff4b4b",
"tagPrimaryLightActive": "#ff4b4b",
"tagPrimaryLightDisabled": "#F6F6F6",
"tagPrimaryLightFont": "#ff4b4b",
"tagPrimaryLightFontHover": "#ff4b4b",
"tagPrimaryOutlinedActive": "#ff4b4b",
"tagPrimaryOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tagPrimaryOutlinedBackground": "#ff4b4b",
"tagAccentFontDisabled": "#A0BFF8",
"tagAccentOutlinedDisabled": "#A0BFF8",
"tagAccentSolidFont": "#FFFFFF",
"tagAccentSolidBackground": "#276EF1",
"tagAccentOutlinedBackground": "#A0BFF8",
"tagAccentOutlinedFont": "#276EF1",
"tagAccentSolidHover": "#EFF3FE",
"tagAccentSolidActive": "#D4E2FC",
"tagAccentSolidDisabled": "#EFF3FE",
"tagAccentSolidFontHover": "#1E54B7",
"tagAccentLightBackground": "#EFF3FE",
"tagAccentLightHover": "#D4E2FC",
"tagAccentLightActive": "#D4E2FC",
"tagAccentLightDisabled": "#EFF3FE",
"tagAccentLightFont": "#1E54B7",
"tagAccentLightFontHover": "#1E54B7",
"tagAccentOutlinedActive": "#174291",
"tagAccentOutlinedFontHover": "#276EF1",
"tagAccentOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tagPositiveFontDisabled": "#66D19E",
"tagPositiveOutlinedDisabled": "#66D19E",
"tagPositiveSolidFont": "#FFFFFF",
"tagPositiveSolidBackground": "#048848",
"tagPositiveOutlinedBackground": "#66D19E",
"tagPositiveOutlinedFont": "#048848",
"tagPositiveSolidHover": "#E6F2ED",
"tagPositiveSolidActive": "#ADDEC9",
"tagPositiveSolidDisabled": "#E6F2ED",
"tagPositiveSolidFontHover": "#03703C",
"tagPositiveLightBackground": "#E6F2ED",
"tagPositiveLightHover": "#ADDEC9",
"tagPositiveLightActive": "#ADDEC9",
"tagPositiveLightDisabled": "#E6F2ED",
"tagPositiveLightFont": "#03703C",
"tagPositiveLightFontHover": "#03703C",
"tagPositiveOutlinedActive": "#03582F",
"tagPositiveOutlinedFontHover": "#048848",
"tagPositiveOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tagWarningFontDisabled": "#FFCF70",
"tagWarningOutlinedDisabled": "#FFCF70",
"tagWarningSolidFont": "#674D1B",
"tagWarningSolidBackground": "#FFC043",
"tagWarningOutlinedBackground": "#FFCF70",
"tagWarningOutlinedFont": "#996F00",
"tagWarningSolidHover": "#FFFAF0",
"tagWarningSolidActive": "#FFF2D9",
"tagWarningSolidDisabled": "#FFFAF0",
"tagWarningSolidFontHover": "#BC8B2C",
"tagWarningLightBackground": "#FFFAF0",
"tagWarningLightHover": "#FFF2D9",
"tagWarningLightActive": "#FFF2D9",
"tagWarningLightDisabled": "#FFFAF0",
"tagWarningLightFont": "#BC8B2C",
"tagWarningLightFontHover": "#BC8B2C",
"tagWarningOutlinedActive": "#996F00",
"tagWarningOutlinedFontHover": "#996F00",
"tagWarningOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tagNegativeFontDisabled": "#F1998E",
"tagNegativeOutlinedDisabled": "#F1998E",
"tagNegativeSolidFont": "#FFFFFF",
"tagNegativeSolidBackground": "#E11900",
"tagNegativeOutlinedBackground": "#F1998E",
"tagNegativeOutlinedFont": "#E11900",
"tagNegativeSolidHover": "#FFEFED",
"tagNegativeSolidActive": "#FED7D2",
"tagNegativeSolidDisabled": "#FFEFED",
"tagNegativeSolidFontHover": "#AB1300",
"tagNegativeLightBackground": "#FFEFED",
"tagNegativeLightHover": "#FED7D2",
"tagNegativeLightActive": "#FED7D2",
"tagNegativeLightDisabled": "#FFEFED",
"tagNegativeLightFont": "#AB1300",
"tagNegativeLightFontHover": "#AB1300",
"tagNegativeOutlinedActive": "#870F00",
"tagNegativeOutlinedFontHover": "#E11900",
"tagNegativeOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tableHeadBackgroundColor": "#0e1117",
"tableBackground": "#0e1117",
"tableStripedBackground": "#262730",
"tableFilter": "rgba(250, 250, 250, 0.4)",
"tableFilterHeading": "#a3a8b8",
"tableFilterBackground": "#0e1117",
"tableFilterFooterBackground": "#262730",
"toastText": "#FFFFFF",
"toastPrimaryText": "#FFFFFF",
"toastInfoBackground": "#276EF1",
"toastInfoText": "#FFFFFF",
"toastPositiveBackground": "#048848",
"toastPositiveText": "#FFFFFF",
"toastWarningBackground": "#FFC043",
"toastWarningText": "#000000",
"toastNegativeBackground": "#E11900",
"toastNegativeText": "#FFFFFF",
"spinnerTrackFill": "#fafafa",
"progressbarTrackFill": "#262730",
"tooltipBackground": "#fafafa",
"tooltipText": "#0e1117",
"backgroundPrimary": "#0e1117",
"backgroundSecondary": "#262730",
"backgroundTertiary": "#0e1117",
"backgroundInversePrimary": "#E2E2E2",
"backgroundInverseSecondary": "#1F1F1F",
"contentPrimary": "#fafafa",
"contentSecondary": "#545454",
"contentTertiary": "#6B6B6B",
"contentInversePrimary": "#141414",
"contentInverseSecondary": "#CBCBCB",
"contentInverseTertiary": "#AFAFAF",
"borderOpaque": "rgba(172, 177, 195, 0.25)",
"borderTransparent": "rgba(226, 226, 226, 0.08)",
"borderSelected": "#ff4b4b",
"borderInverseOpaque": "#333333",
"borderInverseTransparent": "rgba(20, 20, 20, 0.2)",
"borderInverseSelected": "#141414",
"backgroundStateDisabled": "#F6F6F6",
"backgroundOverlayDark": "rgba(0, 0, 0, 0.3)",
"backgroundOverlayLight": "rgba(0, 0, 0, 0.08)",
"backgroundOverlayArt": "rgba(0, 0, 0, 0.00)",
"backgroundAccent": "#276EF1",
"backgroundNegative": "#AB1300",
"backgroundWarning": "#BC8B2C",
"backgroundPositive": "#048848",
"backgroundLightAccent": "#EFF3FE",
"backgroundLightNegative": "#FFEFED",
"backgroundLightWarning": "#FFFAF0",
"backgroundLightPositive": "#E6F2ED",
"backgroundAlwaysDark": "#000000",
"backgroundAlwaysLight": "#FFFFFF",
"contentStateDisabled": "#AFAFAF",
"contentAccent": "#276EF1",
"contentOnColor": "#FFFFFF",
"contentOnColorInverse": "#000000",
"contentNegative": "#AB1300",
"contentWarning": "#996F00",
"contentPositive": "#048848",
"borderStateDisabled": "#F6F6F6",
"borderAccent": "#276EF1",
"borderAccentLight": "#A0BFF8",
"borderNegative": "#F1998E",
"borderWarning": "#FFE3AC",
"borderPositive": "#66D19E",
"safety": "#276EF1",
"eatsGreen400": "#048848",
"freightBlue400": "#0E1FC1",
"jumpRed400": "#E11900",
"rewardsTier1": "#276EF1",
"rewardsTier2": "#FFC043",
"rewardsTier3": "#8EA3AD",
"rewardsTier4": "#000000",
"membership": "#996F00",
"datepickerBackground": "#0e1117",
"inputEnhanceFill": "#262730"
},
"direction": "auto",
"grid": {
"columns": [
4,
8,
12
],
"gutters": [
16,
36,
36
],
"margins": [
16,
36,
64
],
"gaps": 0,
"unit": "px",
"maxWidth": 1280
},
"lighting": {
"shadow400": "0 1px 4px hsla(0, 0%, 0%, 0.16)",
"shadow500": "0 2px 8px hsla(0, 0%, 0%, 0.16)",
"shadow600": "0 4px 16px hsla(0, 0%, 0%, 0.16)",
"shadow700": "0 8px 24px hsla(0, 0%, 0%, 0.16)",
"overlay0": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0)",
"overlay100": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.04)",
"overlay200": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.08)",
"overlay300": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12)",
"overlay400": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16)",
"overlay500": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2)",
"overlay600": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)",
"shallowAbove": "0px -4px 16px rgba(0, 0, 0, 0.12)",
"shallowBelow": "0px 4px 16px rgba(0, 0, 0, 0.12)",
"deepAbove": "0px -16px 48px rgba(0, 0, 0, 0.22)",
"deepBelow": "0px 16px 48px rgba(0, 0, 0, 0.22)"
},
"mediaQuery": {
"small": "@media screen and (min-width: 320px)",
"medium": "@media screen and (min-width: 600px)",
"large": "@media screen and (min-width: 1136px)"
},
"sizing": {
"scale0": "2px",
"scale100": "4px",
"scale200": "6px",
"scale300": "8px",
"scale400": "10px",
"scale500": "12px",
"scale550": "14px",
"scale600": "16px",
"scale650": "18px",
"scale700": "20px",
"scale750": "22px",
"scale800": "24px",
"scale850": "28px",
"scale900": "32px",
"scale950": "36px",
"scale1000": "40px",
"scale1200": "48px",
"scale1400": "56px",
"scale1600": "64px",
"scale2400": "96px",
"scale3200": "128px",
"scale4800": "192px"
},
"typography": {
"font100": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "12px",
"fontWeight": "normal",
"lineHeight": "20px"
},
"font150": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font200": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font250": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font300": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font350": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font400": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font450": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font550": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "20px",
"fontWeight": 700,
"lineHeight": "28px"
},
"font650": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "24px",
"fontWeight": 700,
"lineHeight": "32px"
},
"font750": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "28px",
"fontWeight": 700,
"lineHeight": "36px"
},
"font850": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "32px",
"fontWeight": 700,
"lineHeight": "40px"
},
"font950": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"font1050": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "40px",
"fontWeight": 700,
"lineHeight": "52px"
},
"font1150": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"font1250": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "44px",
"fontWeight": 700,
"lineHeight": "52px"
},
"font1350": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "52px",
"fontWeight": 700,
"lineHeight": "64px"
},
"font1450": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "96px",
"fontWeight": 700,
"lineHeight": "112px"
},
"ParagraphXSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "12px",
"fontWeight": "normal",
"lineHeight": "20px"
},
"ParagraphSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"ParagraphMedium": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"ParagraphLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"LabelXSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"LabelSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"LabelMedium": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"LabelLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"HeadingXSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "20px",
"fontWeight": 700,
"lineHeight": "28px"
},
"HeadingSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "24px",
"fontWeight": 700,
"lineHeight": "32px"
},
"HeadingMedium": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "28px",
"fontWeight": 700,
"lineHeight": "36px"
},
"HeadingLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "32px",
"fontWeight": 700,
"lineHeight": "40px"
},
"HeadingXLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"HeadingXXLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "40px",
"fontWeight": 700,
"lineHeight": "52px"
},
"DisplayXSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"DisplaySmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "44px",
"fontWeight": 700,
"lineHeight": "52px"
},
"DisplayMedium": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "52px",
"fontWeight": 700,
"lineHeight": "64px"
},
"DisplayLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "96px",
"fontWeight": 700,
"lineHeight": "112px"
},
"MonoParagraphXSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "12px",
"fontWeight": "normal",
"lineHeight": "20px"
},
"MonoParagraphSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "14px",
"fontWeight": "normal",
"lineHeight": "20px"
},
"MonoParagraphMedium": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "16px",
"fontWeight": "normal",
"lineHeight": "24px"
},
"MonoParagraphLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "18px",
"fontWeight": "normal",
"lineHeight": "28px"
},
"MonoLabelXSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "12px",
"fontWeight": 500,
"lineHeight": "16px"
},
"MonoLabelSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "14px",
"fontWeight": 500,
"lineHeight": "16px"
},
"MonoLabelMedium": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "16px",
"fontWeight": 500,
"lineHeight": "20px"
},
"MonoLabelLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "18px",
"fontWeight": 500,
"lineHeight": "24px"
},
"MonoHeadingXSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "20px",
"fontWeight": 700,
"lineHeight": "28px"
},
"MonoHeadingSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "24px",
"fontWeight": 700,
"lineHeight": "32px"
},
"MonoHeadingMedium": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "28px",
"fontWeight": 700,
"lineHeight": "36px"
},
"MonoHeadingLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "32px",
"fontWeight": 700,
"lineHeight": "40px"
},
"MonoHeadingXLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"MonoHeadingXXLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "40px",
"fontWeight": 700,
"lineHeight": "52px"
},
"MonoDisplayXSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"MonoDisplaySmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "44px",
"fontWeight": 700,
"lineHeight": "52px"
},
"MonoDisplayMedium": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "52px",
"fontWeight": 700,
"lineHeight": "64px"
},
"MonoDisplayLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "96px",
"fontWeight": 700,
"lineHeight": "112px"
},
"font460": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontSizeSm": "14px",
"fontWeight": "normal",
"lineHeight": 1.6,
"lineHeightTight": 1.25
},
"font470": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontSizeSm": "14px",
"fontWeight": "normal",
"lineHeight": 1.6,
"lineHeightTight": 1.25
},
"font500": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontSizeSm": "14px",
"fontWeight": "normal",
"lineHeight": 1.6,
"lineHeightTight": 1.25
},
"font600": {}
},
"zIndex": {
"modal": 2000
}
},
"primitives": {
"primaryA": "#E2E2E2",
"primaryB": "#141414",
"primary": "#FFFFFF",
"primary50": "#F6F6F6",
"primary100": "#EEEEEE",
"primary200": "#E2E2E2",
"primary300": "#CBCBCB",
"primary400": "#AFAFAF",
"primary500": "#6B6B6B",
"primary600": "#545454",
"primary700": "#333333",
"accent": "#276EF1",
"accent50": "#EFF3FE",
"accent100": "#D4E2FC",
"accent200": "#A0BFF8",
"accent300": "#5B91F5",
"accent400": "#276EF1",
"accent500": "#1E54B7",
"accent600": "#174291",
"accent700": "#102C60",
"negative": "#AB1300",
"negative50": "#FFEFED",
"negative100": "#FED7D2",
"negative200": "#F1998E",
"negative300": "#E85C4A",
"negative400": "#E11900",
"negative500": "#AB1300",
"negative600": "#870F00",
"negative700": "#5A0A00",
"warning": "#BC8B2C",
"warning50": "#FFFAF0",
"warning100": "#FFF2D9",
"warning200": "#FFE3AC",
"warning300": "#FFCF70",
"warning400": "#FFC043",
"warning500": "#BC8B2C",
"warning600": "#996F00",
"warning700": "#674D1B",
"positive": "#048848",
"positive50": "#E6F2ED",
"positive100": "#ADDEC9",
"positive200": "#66D19E",
"positive300": "#06C167",
"positive400": "#048848",
"positive500": "#03703C",
"positive600": "#03582F",
"positive700": "#10462D",
"white": "#FFFFFF",
"black": "#000000",
"mono100": "#CBCBCB",
"mono200": "#AFAFAF",
"mono300": "#6B6B6B",
"mono400": "#545454",
"mono500": "#333333",
"mono600": "#292929",
"mono700": "#1F1F1F",
"mono800": "#141414",
"mono900": "#111111",
"mono1000": "#000000",
"ratingInactiveFill": "#6B6B6B",
"ratingStroke": "#333333",
"primaryFontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
}
}
JSON Base Configuration for Streamlit Light Theme
{
"name": "Light",
"emotion": {
"inSidebar": false,
"breakpoints": {
"hideWidgetDetails": 180,
"hideNumberInputControls": 120,
"sm": "576px",
"columns": "640px",
"md": "768px"
},
"colors": {
"transparent": "transparent",
"black": "#000000",
"white": "#ffffff",
"gray10": "#fafafa",
"gray20": "#f0f2f6",
"gray30": "#e6eaf1",
"gray40": "#d5dae5",
"gray50": "#bfc5d3",
"gray60": "#a3a8b8",
"gray70": "#808495",
"gray80": "#555867",
"gray85": "#31333F",
"gray90": "#262730",
"gray100": "#0e1117",
"red10": "#fff0f0",
"red20": "#ffdede",
"red30": "#ffc7c7",
"red40": "#ffabab",
"red50": "#ff8c8c",
"red60": "#ff6c6c",
"red70": "#ff4b4b",
"red80": "#ff2b2b",
"red90": "#bd4043",
"red100": "#7d353b",
"orange10": "#fffae8",
"orange20": "#fff6d0",
"orange30": "#ffecb0",
"orange40": "#ffe08e",
"orange50": "#ffd16a",
"orange60": "#ffbd45",
"orange70": "#ffa421",
"orange80": "#ff8700",
"orange90": "#ed6f13",
"orange100": "#d95a00",
"yellow10": "#ffffe1",
"yellow20": "#ffffc2",
"yellow30": "#ffffa0",
"yellow40": "#ffff7d",
"yellow50": "#ffff59",
"yellow60": "#fff835",
"yellow70": "#ffe312",
"yellow80": "#faca2b",
"yellow90": "#edbb16",
"yellow100": "#dea816",
"yellow110": "#916e10",
"green10": "#dffde9",
"green20": "#c0fcd3",
"green30": "#9ef6bb",
"green40": "#7defa1",
"green50": "#5ce488",
"green60": "#3dd56d",
"green70": "#21c354",
"green80": "#09ab3b",
"green90": "#158237",
"green100": "#177233",
"blueGreen10": "#dcfffb",
"blueGreen20": "#bafff7",
"blueGreen30": "#93ffee",
"blueGreen40": "#6bfde3",
"blueGreen50": "#45f4d5",
"blueGreen60": "#20e7c5",
"blueGreen70": "#00d4b1",
"blueGreen80": "#29b09d",
"blueGreen90": "#2c867c",
"blueGreen100": "#246e69",
"lightBlue10": "#e0feff",
"lightBlue20": "#bffdff",
"lightBlue30": "#9af8ff",
"lightBlue40": "#73efff",
"lightBlue50": "#4be4ff",
"lightBlue60": "#24d4ff",
"lightBlue70": "#00c0f2",
"lightBlue80": "#00a4d4",
"lightBlue90": "#0d8cb5",
"lightBlue100": "#15799e",
"blue10": "#e4f5ff",
"blue20": "#c7ebff",
"blue30": "#a6dcff",
"blue40": "#83c9ff",
"blue50": "#60b4ff",
"blue60": "#3d9df3",
"blue70": "#1c83e1",
"blue80": "#0068c9",
"blue90": "#0054a3",
"blue100": "#004280",
"purple10": "#f5ebff",
"purple20": "#ebd6ff",
"purple30": "#dbbbff",
"purple40": "#c89dff",
"purple50": "#b27eff",
"purple60": "#9a5dff",
"purple70": "#803df5",
"purple80": "#6d3fc0",
"purple90": "#583f84",
"purple100": "#3f3163",
"bgColor": "#ffffff",
"secondaryBg": "#f0f2f6",
"bodyText": "#31333F",
"warning": "#926C05",
"warningBg": "rgba(255, 227, 18, 0.1)",
"success": "#177233",
"successBg": "rgba(33, 195, 84, 0.1)",
"infoBg": "rgba(28, 131, 225, 0.1)",
"info": "#004280",
"danger": "#7d353b",
"dangerBg": "rgba(255, 43, 43, 0.09)",
"primary": "#ff4b4b",
"disabled": "#d5dae5",
"lightestGray": "#f0f2f6",
"lightGray": "#e6eaf1",
"gray": "#a3a8b8",
"darkGray": "#808495",
"red": "#ff2b2b",
"blue": "#0068c9",
"green": "#09ab3b",
"yellow": "#faca2b",
"linkText": "#0068c9",
"fadedText05": "rgba(49, 51, 63, 0.1)",
"fadedText10": "rgba(49, 51, 63, 0.2)",
"fadedText20": "rgba(49, 51, 63, 0.3)",
"fadedText40": "rgba(49, 51, 63, 0.4)",
"fadedText60": "rgba(49, 51, 63, 0.6)",
"bgMix": "rgba(248, 249, 251, 1)",
"darkenedBgMix100": "hsla(220, 27%, 68%, 1)",
"darkenedBgMix25": "rgba(151, 166, 195, 0.25)",
"darkenedBgMix15": "rgba(151, 166, 195, 0.15)",
"lightenedBg05": "hsla(0, 0%, 100%, 1)",
"borderColor": "rgba(49, 51, 63, 0.2)",
"borderColorLight": "rgba(49, 51, 63, 0.1)",
"codeTextColor": "#09ab3b",
"codeHighlightColor": "rgba(248, 249, 251, 1)",
"metricPositiveDeltaColor": "#09ab3b",
"metricNegativeDeltaColor": "#ff2b2b",
"metricNeutralDeltaColor": "rgba(49, 51, 63, 0.6)",
"docStringModuleText": "#31333F",
"docStringTypeText": "#21c354",
"docStringContainerBackground": "rgba(240, 242, 246, 0.4)",
"headingColor": "#31333F",
"navTextColor": "#555867",
"navActiveTextColor": "#262730",
"navIconColor": "#a3a8b8",
"sidebarControlColor": "#808495"
},
"fonts": {
"sansSerif": "\"Source Sans Pro\", sans-serif",
"monospace": "\"Source Code Pro\", monospace",
"serif": "\"Source Serif Pro\", serif",
"materialIcons": "Material Symbols Rounded"
},
"fontSizes": {
"twoSm": "12px",
"sm": "14px",
"md": "1rem",
"mdLg": "1.125rem",
"lg": "1.25rem",
"xl": "1.5rem",
"twoXL": "1.75rem",
"threeXL": "2.25rem",
"fourXL": "2.75rem",
"twoSmPx": 12,
"smPx": 14,
"mdPx": 16
},
"fontWeights": {
"normal": 400,
"bold": 600,
"extrabold": 700
},
"genericFonts": {
"bodyFont": "\"Source Sans Pro\", sans-serif",
"codeFont": "\"Source Code Pro\", monospace",
"headingFont": "\"Source Sans Pro\", sans-serif",
"iconFont": "Material Symbols Rounded"
},
"iconSizes": {
"xs": "0.5rem",
"sm": "0.75rem",
"md": "0.9rem",
"base": "1rem",
"lg": "1.25rem",
"xl": "1.5rem",
"twoXL": "1.8rem",
"threeXL": "2.3rem"
},
"lineHeights": {
"none": 1,
"headings": 1.2,
"tight": 1.25,
"inputWidget": 1.4,
"small": 1.5,
"base": 1.6,
"menuItem": 2
},
"radii": {
"md": "0.25rem",
"default": "0.5rem",
"xl": "0.75rem",
"xxl": "1rem",
"full": "9999px"
},
"sizes": {
"full": "100%",
"headerHeight": "3.75rem",
"fullScreenHeaderHeight": "2.875rem",
"sidebarTopSpace": "6rem",
"toastWidth": "21rem",
"contentMaxWidth": "46rem",
"maxChartTooltipWidth": "30rem",
"checkbox": "1rem",
"borderWidth": "1px",
"smallElementHeight": "1.5rem",
"minElementHeight": "2.5rem",
"largestElementHeight": "4.25rem",
"smallLogoHeight": "1.25rem",
"defaultLogoHeight": "1.5rem",
"largeLogoHeight": "2rem",
"sliderThumb": "0.75rem",
"wideSidePadding": "5rem",
"headerDecorationHeight": "0.125rem",
"appRunningMen": "1.6rem",
"appStatusMaxWidth": "20rem",
"spinnerSize": "1.375rem",
"spinnerThickness": "0.2rem",
"tabHeight": "2.5rem",
"minPopupWidth": "20rem",
"maxTooltipHeight": "18.75rem",
"chatAvatarSize": "2rem",
"clearIconSize": "1.5em",
"numberInputControlsWidth": "2rem",
"emptyDropdownHeight": "5.625rem",
"dropdownItemHeight": "2.5rem",
"maxDropdownHeight": "18.75rem",
"appDefaultBottomPadding": "3.5rem"
},
"spacing": {
"px": "1px",
"none": "0",
"threeXS": "0.125rem",
"twoXS": "0.25rem",
"xs": "0.375rem",
"sm": "0.5rem",
"md": "0.75rem",
"lg": "1rem",
"xl": "1.25rem",
"twoXL": "1.5rem",
"threeXL": "2rem",
"fourXL": "4rem"
},
"zIndices": {
"hide": -1,
"auto": "auto",
"base": 0,
"priority": 1,
"sidebar": 100,
"menuButton": 110,
"balloons": 1000000,
"header": 999990,
"sidebarMobile": 999995,
"popupMenu": 1000040,
"fullscreenWrapper": 1000050,
"tablePortal": 1000110,
"bottom": 99,
"cacheSpinner": 101,
"toast": 100,
"vegaTooltips": 1000060
}
},
"basewebTheme": {
"animation": {
"timing100": "100ms",
"timing200": "200ms",
"timing300": "300ms",
"timing400": "400ms",
"timing500": "500ms",
"timing600": "600ms",
"timing700": "700ms",
"timing800": "800ms",
"timing900": "900ms",
"timing1000": "1000ms",
"easeInCurve": "cubic-bezier(.8, .2, .6, 1)",
"easeOutCurve": "cubic-bezier(.2, .8, .4, 1)",
"easeInOutCurve": "cubic-bezier(0.4, 0, 0.2, 1)",
"easeInQuinticCurve": "cubic-bezier(0.755, 0.05, 0.855, 0.06)",
"easeOutQuinticCurve": "cubic-bezier(0.23, 1, 0.32, 1)",
"easeInOutQuinticCurve": "cubic-bezier(0.86, 0, 0.07, 1)",
"linearCurve": "cubic-bezier(0, 0, 1, 1)"
},
"borders": {
"border100": {
"borderColor": "hsla(0, 0%, 0%, 0.04)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"border200": {
"borderColor": "hsla(0, 0%, 0%, 0.08)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"border300": {
"borderColor": "hsla(0, 0%, 0%, 0.12)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"border400": {
"borderColor": "hsla(0, 0%, 0%, 0.16)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"border500": {
"borderColor": "hsla(0, 0%, 0%, 0.2)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"border600": {
"borderColor": "hsla(0, 0%, 0%, 0.24)",
"borderStyle": "solid",
"borderWidth": "1px"
},
"radius100": "0.5rem",
"radius200": "0.5rem",
"radius300": "0.5rem",
"radius400": "0.5rem",
"radius500": "0.5rem",
"useRoundedCorners": true,
"buttonBorderRadiusMini": "0.25rem",
"buttonBorderRadius": "0.5rem",
"checkboxBorderRadius": "0.25rem",
"inputBorderRadiusMini": "0.25rem",
"inputBorderRadius": "0.5rem",
"popoverBorderRadius": "0.5rem",
"surfaceBorderRadius": "0.5rem",
"tagBorderRadius": "0.25rem"
},
"breakpoints": {
"small": 320,
"medium": 600,
"large": 1136
},
"colors": {
"primaryA": "#ff4b4b",
"primaryB": "#FFFFFF",
"primary": "#ff4b4b",
"primary50": "#F6F6F6",
"primary100": "#ff4b4b",
"primary200": "#ff4b4b",
"primary300": "#ff4b4b",
"primary400": "#ff4b4b",
"primary500": "#ff4b4b",
"primary600": "#ff4b4b",
"primary700": "#ff4b4b",
"accent": "rgba(255, 75, 75, 0.5)",
"accent50": "#EFF3FE",
"accent100": "#D4E2FC",
"accent200": "#A0BFF8",
"accent300": "#5B91F5",
"accent400": "#276EF1",
"accent500": "#1E54B7",
"accent600": "#174291",
"accent700": "#102C60",
"negative": "#E11900",
"negative50": "#FFEFED",
"negative100": "#FED7D2",
"negative200": "#F1998E",
"negative300": "#E85C4A",
"negative400": "#E11900",
"negative500": "#AB1300",
"negative600": "#870F00",
"negative700": "#5A0A00",
"warning": "#FFC043",
"warning50": "#FFFAF0",
"warning100": "#FFF2D9",
"warning200": "#FFE3AC",
"warning300": "#FFCF70",
"warning400": "#FFC043",
"warning500": "#BC8B2C",
"warning600": "#996F00",
"warning700": "#674D1B",
"positive": "#03703C",
"positive50": "#E6F2ED",
"positive100": "#ADDEC9",
"positive200": "#66D19E",
"positive300": "#06C167",
"positive400": "#048848",
"positive500": "#03703C",
"positive600": "#03582F",
"positive700": "#10462D",
"white": "#ffffff",
"black": "#000000",
"mono100": "#ffffff",
"mono200": "#f0f2f6",
"mono300": "#e6eaf1",
"mono400": "#e6eaf1",
"mono500": "#a3a8b8",
"mono600": "rgba(49, 51, 63, 0.4)",
"mono700": "#a3a8b8",
"mono800": "#31333F",
"mono900": "#31333F",
"mono1000": "#000000",
"ratingInactiveFill": "#EEEEEE",
"ratingStroke": "#CBCBCB",
"bannerActionLowInfo": "#D4E2FC",
"bannerActionLowNegative": "#FED7D2",
"bannerActionLowPositive": "#ADDEC9",
"bannerActionLowWarning": "#FFE3AC",
"bannerActionHighInfo": "#1E54B7",
"bannerActionHighNegative": "#AB1300",
"bannerActionHighPositive": "#03703C",
"bannerActionHighWarning": "#FFE3AC",
"buttonPrimaryFill": "#000000",
"buttonPrimaryText": "#FFFFFF",
"buttonPrimaryHover": "#ff4b4b",
"buttonPrimaryActive": "#ff4b4b",
"buttonPrimarySelectedFill": "#ff4b4b",
"buttonPrimarySelectedText": "#FFFFFF",
"buttonPrimarySpinnerForeground": "#276EF1",
"buttonPrimarySpinnerBackground": "#FFFFFF",
"buttonSecondaryFill": "#ff4b4b",
"buttonSecondaryText": "#000000",
"buttonSecondaryHover": "#ff4b4b",
"buttonSecondaryActive": "#ff4b4b",
"buttonSecondarySelectedFill": "#ff4b4b",
"buttonSecondarySelectedText": "#000000",
"buttonSecondarySpinnerForeground": "#276EF1",
"buttonSecondarySpinnerBackground": "#FFFFFF",
"buttonTertiaryFill": "transparent",
"buttonTertiaryText": "#000000",
"buttonTertiaryHover": "#F6F6F6",
"buttonTertiaryActive": "#ff4b4b",
"buttonTertiarySelectedFill": "#ff4b4b",
"buttonTertiarySelectedText": "#000000",
"buttonTertiaryDisabledActiveFill": "#F6F6F6",
"buttonTertiaryDisabledActiveText": "rgba(49, 51, 63, 0.4)",
"buttonTertiarySpinnerForeground": "#276EF1",
"buttonTertiarySpinnerBackground": "#ff4b4b",
"buttonDisabledFill": "hsla(0, 0%, 100%, 1)",
"buttonDisabledText": "rgba(49, 51, 63, 0.4)",
"buttonDisabledActiveFill": "#a3a8b8",
"buttonDisabledActiveText": "#ffffff",
"buttonDisabledSpinnerForeground": "rgba(49, 51, 63, 0.4)",
"buttonDisabledSpinnerBackground": "#d5dae5",
"breadcrumbsText": "#000000",
"breadcrumbsSeparatorFill": "#a3a8b8",
"calendarBackground": "#ffffff",
"calendarForeground": "#31333F",
"calendarForegroundDisabled": "#a3a8b8",
"calendarHeaderBackground": "#f0f2f6",
"calendarHeaderForeground": "#31333F",
"calendarHeaderBackgroundActive": "#f0f2f6",
"calendarHeaderForegroundDisabled": "#d5dae5",
"calendarDayForegroundPseudoSelected": "#31333F",
"calendarDayBackgroundPseudoSelectedHighlighted": "#ff4b4b",
"calendarDayForegroundPseudoSelectedHighlighted": "#31333F",
"calendarDayBackgroundSelected": "#ff4b4b",
"calendarDayForegroundSelected": "#ffffff",
"calendarDayBackgroundSelectedHighlighted": "#ff4b4b",
"calendarDayForegroundSelectedHighlighted": "#ffffff",
"comboboxListItemFocus": "#f0f2f6",
"comboboxListItemHover": "#e6eaf1",
"fileUploaderBackgroundColor": "#f0f2f6",
"fileUploaderBackgroundColorActive": "#F6F6F6",
"fileUploaderBorderColorActive": "#000000",
"fileUploaderBorderColorDefault": "#a3a8b8",
"fileUploaderMessageColor": "#31333F",
"linkText": "#000000",
"linkVisited": "#ff4b4b",
"linkHover": "#ff4b4b",
"linkActive": "#ff4b4b",
"listHeaderFill": "#FFFFFF",
"listBodyFill": "#FFFFFF",
"progressStepsCompletedText": "#FFFFFF",
"progressStepsCompletedFill": "#000000",
"progressStepsActiveText": "#FFFFFF",
"progressStepsActiveFill": "#000000",
"toggleFill": "#FFFFFF",
"toggleFillChecked": "#000000",
"toggleFillDisabled": "rgba(49, 51, 63, 0.4)",
"toggleTrackFill": "#d5dae5",
"toggleTrackFillDisabled": "#f0f2f6",
"tickFill": "hsla(0, 0%, 100%, 1)",
"tickFillHover": "#f0f2f6",
"tickFillActive": "#f0f2f6",
"tickFillSelected": "#ff4b4b",
"tickFillSelectedHover": "#ff4b4b",
"tickFillSelectedHoverActive": "#ff4b4b",
"tickFillError": "#FFEFED",
"tickFillErrorHover": "#FED7D2",
"tickFillErrorHoverActive": "#F1998E",
"tickFillErrorSelected": "#E11900",
"tickFillErrorSelectedHover": "#AB1300",
"tickFillErrorSelectedHoverActive": "#870F00",
"tickFillDisabled": "rgba(49, 51, 63, 0.4)",
"tickBorder": "#a3a8b8",
"tickBorderError": "#E11900",
"tickMarkFill": "#f0f2f6",
"tickMarkFillError": "#FFFFFF",
"tickMarkFillDisabled": "hsla(0, 0%, 100%, 1)",
"sliderTrackFill": "#d5dae5",
"sliderHandleFill": "#000000",
"sliderHandleFillDisabled": "#ff4b4b",
"sliderHandleInnerFill": "#d5dae5",
"sliderTrackFillHover": "#a3a8b8",
"sliderTrackFillActive": "rgba(49, 51, 63, 0.4)",
"sliderTrackFillDisabled": "#f0f2f6",
"sliderHandleInnerFillDisabled": "#d5dae5",
"sliderHandleInnerFillSelectedHover": "#000000",
"sliderHandleInnerFillSelectedActive": "#ff4b4b",
"inputBorder": "#f0f2f6",
"inputFill": "#f0f2f6",
"inputFillError": "#FFEFED",
"inputFillDisabled": "#f0f2f6",
"inputFillActive": "#f0f2f6",
"inputFillPositive": "#E6F2ED",
"inputTextDisabled": "rgba(49, 51, 63, 0.4)",
"inputBorderError": "#F1998E",
"inputBorderPositive": "#66D19E",
"inputEnhancerFill": "#e6eaf1",
"inputEnhancerFillDisabled": "#f0f2f6",
"inputEnhancerTextDisabled": "rgba(49, 51, 63, 0.4)",
"inputPlaceholder": "rgba(49, 51, 63, 0.6)",
"inputPlaceholderDisabled": "rgba(49, 51, 63, 0.4)",
"menuFill": "#ffffff",
"menuFillHover": "#f0f2f6",
"menuFontDefault": "#31333F",
"menuFontDisabled": "#a3a8b8",
"menuFontHighlighted": "#31333F",
"menuFontSelected": "#31333F",
"modalCloseColor": "#31333F",
"modalCloseColorHover": "#31333F",
"modalCloseColorFocus": "#31333F",
"tabBarFill": "#f0f2f6",
"tabColor": "#31333F",
"notificationInfoBackground": "rgba(28, 131, 225, 0.1)",
"notificationInfoText": "#004280",
"notificationPositiveBackground": "rgba(33, 195, 84, 0.1)",
"notificationPositiveText": "#177233",
"notificationWarningBackground": "rgba(255, 227, 18, 0.1)",
"notificationWarningText": "#926C05",
"notificationNegativeBackground": "rgba(255, 43, 43, 0.09)",
"notificationNegativeText": "#7d353b",
"tagFontDisabledRampUnit": "100",
"tagSolidFontRampUnit": "0",
"tagSolidRampUnit": "400",
"tagOutlinedFontRampUnit": "400",
"tagOutlinedRampUnit": "200",
"tagSolidHoverRampUnit": "50",
"tagSolidActiveRampUnit": "100",
"tagSolidDisabledRampUnit": "50",
"tagSolidFontHoverRampUnit": "500",
"tagLightRampUnit": "50",
"tagLightHoverRampUnit": "100",
"tagLightActiveRampUnit": "100",
"tagLightFontRampUnit": "500",
"tagLightFontHoverRampUnit": "500",
"tagOutlinedHoverRampUnit": "50",
"tagOutlinedActiveRampUnit": "0",
"tagOutlinedFontHoverRampUnit": "400",
"tagNeutralFontDisabled": "rgba(49, 51, 63, 0.4)",
"tagNeutralOutlinedDisabled": "#e6eaf1",
"tagNeutralSolidFont": "#FFFFFF",
"tagNeutralSolidBackground": "#000000",
"tagNeutralOutlinedBackground": "rgba(49, 51, 63, 0.4)",
"tagNeutralOutlinedFont": "#000000",
"tagNeutralSolidHover": "#e6eaf1",
"tagNeutralSolidActive": "#e6eaf1",
"tagNeutralSolidDisabled": "#f0f2f6",
"tagNeutralSolidFontHover": "#31333F",
"tagNeutralLightBackground": "#e6eaf1",
"tagNeutralLightHover": "#e6eaf1",
"tagNeutralLightActive": "#e6eaf1",
"tagNeutralLightDisabled": "#f0f2f6",
"tagNeutralLightFont": "#31333F",
"tagNeutralLightFontHover": "#31333F",
"tagNeutralOutlinedActive": "#31333F",
"tagNeutralOutlinedFontHover": "#31333F",
"tagNeutralOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tagPrimaryFontDisabled": "rgba(49, 51, 63, 0.4)",
"tagPrimaryOutlinedDisabled": "transparent",
"tagPrimarySolidFont": "#FFFFFF",
"tagPrimarySolidBackground": "#ff4b4b",
"tagPrimaryOutlinedFontHover": "#000000",
"tagPrimaryOutlinedFont": "#000000",
"tagPrimarySolidHover": "#ff4b4b",
"tagPrimarySolidActive": "#ff4b4b",
"tagPrimarySolidDisabled": "#F6F6F6",
"tagPrimarySolidFontHover": "#ff4b4b",
"tagPrimaryLightBackground": "#F6F6F6",
"tagPrimaryLightHover": "#ff4b4b",
"tagPrimaryLightActive": "#ff4b4b",
"tagPrimaryLightDisabled": "#F6F6F6",
"tagPrimaryLightFont": "#ff4b4b",
"tagPrimaryLightFontHover": "#ff4b4b",
"tagPrimaryOutlinedActive": "#ff4b4b",
"tagPrimaryOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tagPrimaryOutlinedBackground": "#ff4b4b",
"tagAccentFontDisabled": "#A0BFF8",
"tagAccentOutlinedDisabled": "#A0BFF8",
"tagAccentSolidFont": "#FFFFFF",
"tagAccentSolidBackground": "#276EF1",
"tagAccentOutlinedBackground": "#A0BFF8",
"tagAccentOutlinedFont": "#276EF1",
"tagAccentSolidHover": "#EFF3FE",
"tagAccentSolidActive": "#D4E2FC",
"tagAccentSolidDisabled": "#EFF3FE",
"tagAccentSolidFontHover": "#1E54B7",
"tagAccentLightBackground": "#EFF3FE",
"tagAccentLightHover": "#D4E2FC",
"tagAccentLightActive": "#D4E2FC",
"tagAccentLightDisabled": "#EFF3FE",
"tagAccentLightFont": "#1E54B7",
"tagAccentLightFontHover": "#1E54B7",
"tagAccentOutlinedActive": "#174291",
"tagAccentOutlinedFontHover": "#276EF1",
"tagAccentOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tagPositiveFontDisabled": "#66D19E",
"tagPositiveOutlinedDisabled": "#66D19E",
"tagPositiveSolidFont": "#FFFFFF",
"tagPositiveSolidBackground": "#048848",
"tagPositiveOutlinedBackground": "#66D19E",
"tagPositiveOutlinedFont": "#048848",
"tagPositiveSolidHover": "#E6F2ED",
"tagPositiveSolidActive": "#ADDEC9",
"tagPositiveSolidDisabled": "#E6F2ED",
"tagPositiveSolidFontHover": "#03703C",
"tagPositiveLightBackground": "#E6F2ED",
"tagPositiveLightHover": "#ADDEC9",
"tagPositiveLightActive": "#ADDEC9",
"tagPositiveLightDisabled": "#E6F2ED",
"tagPositiveLightFont": "#03703C",
"tagPositiveLightFontHover": "#03703C",
"tagPositiveOutlinedActive": "#03582F",
"tagPositiveOutlinedFontHover": "#048848",
"tagPositiveOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tagWarningFontDisabled": "#FFCF70",
"tagWarningOutlinedDisabled": "#FFCF70",
"tagWarningSolidFont": "#674D1B",
"tagWarningSolidBackground": "#FFC043",
"tagWarningOutlinedBackground": "#FFCF70",
"tagWarningOutlinedFont": "#996F00",
"tagWarningSolidHover": "#FFFAF0",
"tagWarningSolidActive": "#FFF2D9",
"tagWarningSolidDisabled": "#FFFAF0",
"tagWarningSolidFontHover": "#BC8B2C",
"tagWarningLightBackground": "#FFFAF0",
"tagWarningLightHover": "#FFF2D9",
"tagWarningLightActive": "#FFF2D9",
"tagWarningLightDisabled": "#FFFAF0",
"tagWarningLightFont": "#BC8B2C",
"tagWarningLightFontHover": "#BC8B2C",
"tagWarningOutlinedActive": "#996F00",
"tagWarningOutlinedFontHover": "#996F00",
"tagWarningOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tagNegativeFontDisabled": "#F1998E",
"tagNegativeOutlinedDisabled": "#F1998E",
"tagNegativeSolidFont": "#FFFFFF",
"tagNegativeSolidBackground": "#E11900",
"tagNegativeOutlinedBackground": "#F1998E",
"tagNegativeOutlinedFont": "#E11900",
"tagNegativeSolidHover": "#FFEFED",
"tagNegativeSolidActive": "#FED7D2",
"tagNegativeSolidDisabled": "#FFEFED",
"tagNegativeSolidFontHover": "#AB1300",
"tagNegativeLightBackground": "#FFEFED",
"tagNegativeLightHover": "#FED7D2",
"tagNegativeLightActive": "#FED7D2",
"tagNegativeLightDisabled": "#FFEFED",
"tagNegativeLightFont": "#AB1300",
"tagNegativeLightFontHover": "#AB1300",
"tagNegativeOutlinedActive": "#870F00",
"tagNegativeOutlinedFontHover": "#E11900",
"tagNegativeOutlinedHover": "rgba(0, 0, 0, 0.08)",
"tableHeadBackgroundColor": "#ffffff",
"tableBackground": "#ffffff",
"tableStripedBackground": "#f0f2f6",
"tableFilter": "rgba(49, 51, 63, 0.4)",
"tableFilterHeading": "#a3a8b8",
"tableFilterBackground": "#ffffff",
"tableFilterFooterBackground": "#f0f2f6",
"toastText": "#FFFFFF",
"toastPrimaryText": "#FFFFFF",
"toastInfoBackground": "#276EF1",
"toastInfoText": "#FFFFFF",
"toastPositiveBackground": "#048848",
"toastPositiveText": "#FFFFFF",
"toastWarningBackground": "#FFC043",
"toastWarningText": "#000000",
"toastNegativeBackground": "#E11900",
"toastNegativeText": "#FFFFFF",
"spinnerTrackFill": "#31333F",
"progressbarTrackFill": "#f0f2f6",
"tooltipBackground": "#31333F",
"tooltipText": "#ffffff",
"backgroundPrimary": "#ffffff",
"backgroundSecondary": "#f0f2f6",
"backgroundTertiary": "#ffffff",
"backgroundInversePrimary": "#000000",
"backgroundInverseSecondary": "#1F1F1F",
"contentPrimary": "#31333F",
"contentSecondary": "#545454",
"contentTertiary": "#6B6B6B",
"contentInversePrimary": "#FFFFFF",
"contentInverseSecondary": "#CBCBCB",
"contentInverseTertiary": "#AFAFAF",
"borderOpaque": "rgba(151, 166, 195, 0.25)",
"borderTransparent": "rgba(0, 0, 0, 0.08)",
"borderSelected": "#ff4b4b",
"borderInverseOpaque": "#333333",
"borderInverseTransparent": "rgba(255, 255, 255, 0.2)",
"borderInverseSelected": "#FFFFFF",
"backgroundStateDisabled": "#F6F6F6",
"backgroundOverlayDark": "rgba(0, 0, 0, 0.3)",
"backgroundOverlayLight": "rgba(0, 0, 0, 0.08)",
"backgroundOverlayArt": "rgba(0, 0, 0, 0.00)",
"backgroundAccent": "#276EF1",
"backgroundNegative": "#E11900",
"backgroundWarning": "#FFC043",
"backgroundPositive": "#048848",
"backgroundLightAccent": "#EFF3FE",
"backgroundLightNegative": "#FFEFED",
"backgroundLightWarning": "#FFFAF0",
"backgroundLightPositive": "#E6F2ED",
"backgroundAlwaysDark": "#000000",
"backgroundAlwaysLight": "#FFFFFF",
"contentStateDisabled": "#AFAFAF",
"contentAccent": "#276EF1",
"contentOnColor": "#FFFFFF",
"contentOnColorInverse": "#000000",
"contentNegative": "#E11900",
"contentWarning": "#996F00",
"contentPositive": "#048848",
"borderStateDisabled": "#F6F6F6",
"borderAccent": "#276EF1",
"borderAccentLight": "#A0BFF8",
"borderNegative": "#F1998E",
"borderWarning": "#FFE3AC",
"borderPositive": "#66D19E",
"safety": "#276EF1",
"eatsGreen400": "#048848",
"freightBlue400": "#0E1FC1",
"jumpRed400": "#E11900",
"rewardsTier1": "#276EF1",
"rewardsTier2": "#FFC043",
"rewardsTier3": "#8EA3AD",
"rewardsTier4": "#000000",
"membership": "#996F00",
"datepickerBackground": "#ffffff",
"inputEnhanceFill": "#f0f2f6"
},
"direction": "auto",
"grid": {
"columns": [
4,
8,
12
],
"gutters": [
16,
36,
36
],
"margins": [
16,
36,
64
],
"gaps": 0,
"unit": "px",
"maxWidth": 1280
},
"lighting": {
"shadow400": "0 1px 4px hsla(0, 0%, 0%, 0.16)",
"shadow500": "0 2px 8px hsla(0, 0%, 0%, 0.16)",
"shadow600": "0 4px 16px hsla(0, 0%, 0%, 0.16)",
"shadow700": "0 8px 24px hsla(0, 0%, 0%, 0.16)",
"overlay0": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0)",
"overlay100": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.04)",
"overlay200": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.08)",
"overlay300": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.12)",
"overlay400": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.16)",
"overlay500": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.2)",
"overlay600": "inset 0 0 0 1000px hsla(0, 0%, 0%, 0.24)",
"shallowAbove": "0px -4px 16px rgba(0, 0, 0, 0.12)",
"shallowBelow": "0px 4px 16px rgba(0, 0, 0, 0.12)",
"deepAbove": "0px -16px 48px rgba(0, 0, 0, 0.22)",
"deepBelow": "0px 16px 48px rgba(0, 0, 0, 0.22)"
},
"mediaQuery": {
"small": "@media screen and (min-width: 320px)",
"medium": "@media screen and (min-width: 600px)",
"large": "@media screen and (min-width: 1136px)"
},
"sizing": {
"scale0": "2px",
"scale100": "4px",
"scale200": "6px",
"scale300": "8px",
"scale400": "10px",
"scale500": "12px",
"scale550": "14px",
"scale600": "16px",
"scale650": "18px",
"scale700": "20px",
"scale750": "22px",
"scale800": "24px",
"scale850": "28px",
"scale900": "32px",
"scale950": "36px",
"scale1000": "40px",
"scale1200": "48px",
"scale1400": "56px",
"scale1600": "64px",
"scale2400": "96px",
"scale3200": "128px",
"scale4800": "192px"
},
"typography": {
"font100": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "12px",
"fontWeight": "normal",
"lineHeight": "20px"
},
"font150": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font200": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font250": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font300": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font350": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font400": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font450": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"font550": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "20px",
"fontWeight": 700,
"lineHeight": "28px"
},
"font650": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "24px",
"fontWeight": 700,
"lineHeight": "32px"
},
"font750": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "28px",
"fontWeight": 700,
"lineHeight": "36px"
},
"font850": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "32px",
"fontWeight": 700,
"lineHeight": "40px"
},
"font950": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"font1050": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "40px",
"fontWeight": 700,
"lineHeight": "52px"
},
"font1150": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"font1250": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "44px",
"fontWeight": 700,
"lineHeight": "52px"
},
"font1350": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "52px",
"fontWeight": 700,
"lineHeight": "64px"
},
"font1450": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "96px",
"fontWeight": 700,
"lineHeight": "112px"
},
"ParagraphXSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "12px",
"fontWeight": "normal",
"lineHeight": "20px"
},
"ParagraphSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"ParagraphMedium": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"ParagraphLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"LabelXSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"LabelSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"LabelMedium": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"LabelLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontWeight": "normal",
"lineHeight": 1.6,
"fontSizeSm": "14px",
"lineHeightTight": 1.25
},
"HeadingXSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "20px",
"fontWeight": 700,
"lineHeight": "28px"
},
"HeadingSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "24px",
"fontWeight": 700,
"lineHeight": "32px"
},
"HeadingMedium": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "28px",
"fontWeight": 700,
"lineHeight": "36px"
},
"HeadingLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "32px",
"fontWeight": 700,
"lineHeight": "40px"
},
"HeadingXLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"HeadingXXLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "40px",
"fontWeight": 700,
"lineHeight": "52px"
},
"DisplayXSmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"DisplaySmall": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "44px",
"fontWeight": 700,
"lineHeight": "52px"
},
"DisplayMedium": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "52px",
"fontWeight": 700,
"lineHeight": "64px"
},
"DisplayLarge": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "96px",
"fontWeight": 700,
"lineHeight": "112px"
},
"MonoParagraphXSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "12px",
"fontWeight": "normal",
"lineHeight": "20px"
},
"MonoParagraphSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "14px",
"fontWeight": "normal",
"lineHeight": "20px"
},
"MonoParagraphMedium": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "16px",
"fontWeight": "normal",
"lineHeight": "24px"
},
"MonoParagraphLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "18px",
"fontWeight": "normal",
"lineHeight": "28px"
},
"MonoLabelXSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "12px",
"fontWeight": 500,
"lineHeight": "16px"
},
"MonoLabelSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "14px",
"fontWeight": 500,
"lineHeight": "16px"
},
"MonoLabelMedium": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "16px",
"fontWeight": 500,
"lineHeight": "20px"
},
"MonoLabelLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "18px",
"fontWeight": 500,
"lineHeight": "24px"
},
"MonoHeadingXSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "20px",
"fontWeight": 700,
"lineHeight": "28px"
},
"MonoHeadingSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "24px",
"fontWeight": 700,
"lineHeight": "32px"
},
"MonoHeadingMedium": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "28px",
"fontWeight": 700,
"lineHeight": "36px"
},
"MonoHeadingLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "32px",
"fontWeight": 700,
"lineHeight": "40px"
},
"MonoHeadingXLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"MonoHeadingXXLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "40px",
"fontWeight": 700,
"lineHeight": "52px"
},
"MonoDisplayXSmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "36px",
"fontWeight": 700,
"lineHeight": "44px"
},
"MonoDisplaySmall": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "44px",
"fontWeight": 700,
"lineHeight": "52px"
},
"MonoDisplayMedium": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "52px",
"fontWeight": 700,
"lineHeight": "64px"
},
"MonoDisplayLarge": {
"fontFamily": "\"Lucida Console\", Monaco, monospace",
"fontSize": "96px",
"fontWeight": 700,
"lineHeight": "112px"
},
"font460": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontSizeSm": "14px",
"fontWeight": "normal",
"lineHeight": 1.6,
"lineHeightTight": 1.25
},
"font470": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontSizeSm": "14px",
"fontWeight": "normal",
"lineHeight": 1.6,
"lineHeightTight": 1.25
},
"font500": {
"fontFamily": "\"Source Sans Pro\", sans-serif",
"fontSize": "1rem",
"fontSizeSm": "14px",
"fontWeight": "normal",
"lineHeight": 1.6,
"lineHeightTight": 1.25
},
"font600": {}
},
"zIndex": {
"modal": 2000
}
},
"primitives": {
"primaryA": "#000000",
"primaryB": "#FFFFFF",
"primary": "#000000",
"primary50": "#F6F6F6",
"primary100": "#EEEEEE",
"primary200": "#E2E2E2",
"primary300": "#CBCBCB",
"primary400": "#AFAFAF",
"primary500": "#6B6B6B",
"primary600": "#545454",
"primary700": "#333333",
"accent": "#276EF1",
"accent50": "#EFF3FE",
"accent100": "#D4E2FC",
"accent200": "#A0BFF8",
"accent300": "#5B91F5",
"accent400": "#276EF1",
"accent500": "#1E54B7",
"accent600": "#174291",
"accent700": "#102C60",
"negative": "#E11900",
"negative50": "#FFEFED",
"negative100": "#FED7D2",
"negative200": "#F1998E",
"negative300": "#E85C4A",
"negative400": "#E11900",
"negative500": "#AB1300",
"negative600": "#870F00",
"negative700": "#5A0A00",
"warning": "#FFC043",
"warning50": "#FFFAF0",
"warning100": "#FFF2D9",
"warning200": "#FFE3AC",
"warning300": "#FFCF70",
"warning400": "#FFC043",
"warning500": "#BC8B2C",
"warning600": "#996F00",
"warning700": "#674D1B",
"positive": "#03703C",
"positive50": "#E6F2ED",
"positive100": "#ADDEC9",
"positive200": "#66D19E",
"positive300": "#06C167",
"positive400": "#048848",
"positive500": "#03703C",
"positive600": "#03582F",
"positive700": "#10462D",
"white": "#FFFFFF",
"black": "#000000",
"mono100": "#FFFFFF",
"mono200": "#F6F6F6",
"mono300": "#EEEEEE",
"mono400": "#E2E2E2",
"mono500": "#CBCBCB",
"mono600": "#AFAFAF",
"mono700": "#6B6B6B",
"mono800": "#545454",
"mono900": "#333333",
"mono1000": "#000000",
"ratingInactiveFill": "#EEEEEE",
"ratingStroke": "#CBCBCB",
"primaryFontFamily": "system-ui, \"Helvetica Neue\", Helvetica, Arial, sans-serif"
}
}
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file streamlit_component_theme_changer-0.7.9.tar.gz.
File metadata
- Download URL: streamlit_component_theme_changer-0.7.9.tar.gz
- Upload date:
- Size: 47.4 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.14.3
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
f916acb3e774cd9fb6d8f1dc4940146ec680f8f366a1d743ba3567bfee7bcffd
|
|
| MD5 |
ed48a9b7708c7f3a9c1101af1dac9b53
|
|
| BLAKE2b-256 |
95155679edad98864494538d9bf883612b2ce51734aae074fbfa7f2faee3683b
|
File details
Details for the file streamlit_component_theme_changer-0.7.9-py3-none-any.whl.
File metadata
- Download URL: streamlit_component_theme_changer-0.7.9-py3-none-any.whl
- Upload date:
- Size: 28.8 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.2.0 CPython/3.14.3
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
6067d71a587b36056619f23674cec23231d22c5cc5cf25dc209b5a491773ef4f
|
|
| MD5 |
60339a7bc7502a8eedf8e87cad5897e7
|
|
| BLAKE2b-256 |
28e33e5234d088c9fbf640a3e25057f93261e33cc564aa595c08438abe8cbe24
|
