@lanaco/lnc-react-ui
Version:
React component library
2,626 lines (2,625 loc) • 199 kB
JavaScript
import { jsxs as W, Fragment as m } from "react/jsx-runtime";
import { useState as D, useEffect as w, cloneElement as C, isValidElement as v, Children as h } from "react";
var $ = function() {
}, B = typeof window < "u", A = function(e, t) {
return B ? window.matchMedia(e).matches : (process.env.NODE_ENV !== "production" && console.warn("`useMedia` When server side rendering, defaultState should be defined to prevent a hydration mismatches."), !1);
}, x = function(e, t) {
var a = D(A(e)), o = a[0], n = a[1];
return w(function() {
var r = !0, d = window.matchMedia(e), b = function() {
r && n(!!d.matches);
};
return d.addEventListener("change", b), n(d.matches), function() {
r = !1, d.removeEventListener("change", b);
};
}, [e]), o;
};
const k = {
name: "Lanaco Light",
class: "lnc-light",
colorContext: {
primary: "teal",
secondary: "blue",
success: "green",
warning: "yellow",
danger: "red",
information: "violet",
neutral: "neutral"
},
components: {
Input: {
default: {
palette: "gray",
enabled: {
background: 0,
border: 200,
placeholder: 500,
text: 900,
prefix: 500,
suffix: 500,
caret: 900,
fontWeight: 400
},
focus: {
background: 0,
border: 200,
placeholder: 500,
text: 900,
prefix: 500,
suffix: 500,
caret: 900,
fontWeight: 400
},
hover: {
background: 0,
border: 200,
placeholder: 500,
text: 900,
prefix: 500,
suffix: 500,
caret: 900,
fontWeight: 400
},
active: {
background: 0,
border: 200,
placeholder: 500,
text: 900,
prefix: 500,
suffix: 500,
caret: 900,
fontWeight: 400
},
disabled: {
border: 200
}
},
teal: {
enabled: {
caret: 500
}
},
green: {
enabled: {
border: 300,
text: 900,
prefix: 600,
suffix: 600
}
},
yellow: {
enabled: {
border: 300,
text: 900,
prefix: 600,
suffix: 600
}
},
red: {
enabled: {
border: 300,
text: 900,
prefix: 600,
suffix: 600
}
}
},
DateInput: {
default: {
palette: "gray",
enabled: {
background: 0,
border: 200,
placeholder: 500,
text: 900,
textWeekDays: 400,
fontWeight: 200,
todayColor: 600
},
hover: {
text: 600,
background: 600,
backgroundOpacity: 200
},
active: {
background: 500,
text: 0,
textDay: 600,
backgroundDay: 600,
backgroundDayOpacity: 200
},
disabled: {
border: 200,
text: 400,
background: 0
}
},
teal: {
enabled: {
today: 600
},
hover: {
text: 600,
background: 500,
backgroundOpacity: 200
},
active: {
background: 500,
text: 0,
textDay: 600,
backgroundDay: 500,
backgroundDayOpacity: 200
}
},
blue: {
enabled: {
today: 600
},
hover: {
text: 600,
background: 500,
backgroundOpacity: 200
},
active: {
background: 500,
text: 0,
textDay: 600,
backgroundDay: 500,
backgroundDayOpacity: 200
}
},
red: {
enabled: {
today: 600
},
hover: {
text: 600,
background: 500,
backgroundOpacity: 200
},
active: {
background: 500,
text: 0,
textDay: 600,
backgroundDay: 500,
backgroundDayOpacity: 200
}
},
violet: {
enabled: {
today: 600
},
hover: {
text: 600,
background: 500,
backgroundOpacity: 200
},
active: {
background: 500,
text: 0,
textDay: 600,
backgroundDay: 500,
backgroundDayOpacity: 200
}
},
yellow: {
enabled: {
today: 600
},
hover: {
text: 600,
background: 500,
backgroundOpacity: 200
},
active: {
background: 500,
text: 0,
textDay: 600,
backgroundDay: 500,
backgroundDayOpacity: 200
}
},
green: {
enabled: {
today: 600
},
hover: {
text: 600,
background: 500,
backgroundOpacity: 200
},
active: {
background: 500,
text: 0,
textDay: 600,
backgroundDay: 500,
backgroundDayOpacity: 200
}
},
gray: {
enabled: {
today: 600
},
hover: {
text: 600,
background: 500,
backgroundOpacity: 200
},
active: {
background: 500,
text: 0,
textDay: 600,
backgroundDay: 500,
backgroundDayOpacity: 200
}
},
neutral: {
enabled: {
today: 600
},
hover: {
text: 600,
background: 500,
backgroundOpacity: 200
},
active: {
background: 500,
text: 0,
textDay: 600,
backgroundDay: 500,
backgroundDayOpacity: 200
}
}
},
Chip: {
default: {
palette: "gray",
enabled: {
background: 50,
backgroundOpacity: 50,
text: 900,
fontWeight: 700,
backdropFilter: "blur(48px)"
},
hover: {
background: 100,
backgroundOpacity: 100,
text: 900,
fontWeight: 700
},
focus: {
background: 100,
backgroundOpacity: 100,
text: 900,
fontWeight: 700
},
active: {
background: 100,
backgroundOpacity: 200,
text: 900,
fontWeight: 700
}
},
teal: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 500,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 500,
backgroundOpacity: 300,
text: 600
},
active: {
background: 500,
backgroundOpacity: 400,
text: 600
}
},
blue: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 500,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 500,
backgroundOpacity: 300,
text: 600
},
active: {
background: 500,
backgroundOpacity: 400,
text: 600
}
},
red: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 500,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 500,
backgroundOpacity: 300,
text: 600
},
active: {
background: 500,
backgroundOpacity: 400,
text: 600
}
},
violet: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 500,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 500,
backgroundOpacity: 300,
text: 600
},
active: {
background: 500,
backgroundOpacity: 400,
text: 600
}
},
yellow: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 500,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 500,
backgroundOpacity: 300,
text: 600
},
active: {
background: 500,
backgroundOpacity: 400,
text: 600
}
},
green: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 500,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 500,
backgroundOpacity: 300,
text: 600
},
active: {
background: 500,
backgroundOpacity: 400,
text: 600
}
},
gray: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 500,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 500,
backgroundOpacity: 300,
text: 600
},
active: {
background: 500,
backgroundOpacity: 400,
text: 600
}
},
neutral: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 500,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 500,
backgroundOpacity: 300,
text: 600
},
active: {
background: 500,
backgroundOpacity: 400,
text: 600
}
}
},
Icon: {
default: {
palette: "gray",
enabled: {
icon: 600
}
},
teal: {
enabled: {
icon: 600
}
},
blue: {
enabled: {
icon: 600
}
},
red: {
enabled: {
icon: 600
}
},
violet: {
enabled: {
icon: 600
}
},
yellow: {
enabled: {
icon: 600
}
},
green: {
enabled: {
icon: 600
}
},
gray: {
enabled: {
icon: 500
}
},
neutral: {
enabled: {
icon: 600
}
}
},
StarRating: {
default: {
palette: "gray",
enabled: {
fontSize: "1rem",
lineHeight: "1.25rem",
filledColor: 900,
emptyColor: 300,
textColor: 500
},
disabled: { filledColor: 500, emptyColor: 300, textColor: 500 }
},
neutral: {
enabled: {
fontSize: "1rem",
lineHeight: "1.25rem",
filledColor: 900,
emptyColor: 300,
textColor: 500
}
},
yellow: { enabled: { filledColor: 500 } }
},
TabRegular: {
default: {
palette: "gray",
enabled: {
text: 500,
line: 300,
fontWeight: 700,
lineHeight: "2px"
},
hover: {
text: 500,
line: 300,
fontWeight: 700,
lineHeight: "1px"
},
active: {
text: 500,
line: 300,
fontWeight: 700
}
},
teal: {
enabled: {},
hover: {
text: 700,
line: 700
},
active: {
text: 700,
line: 700
}
},
blue: {
enabled: {},
hover: {
text: 700,
line: 700
},
active: {
text: 700,
line: 700
}
},
red: {
enabled: {},
hover: {
text: 700,
line: 700
},
active: {
text: 700,
line: 700
}
},
violet: {
enabled: {},
hover: {
text: 700,
line: 700
},
active: {
text: 700,
line: 700
}
},
yellow: {
enabled: {},
hover: {
text: 700,
line: 700
},
active: {
text: 700,
line: 700
}
},
green: {
enabled: {},
hover: {
text: 700,
line: 700
},
active: {
text: 700,
line: 700
}
},
gray: {
enabled: {},
hover: {
text: 700,
line: 700
},
active: {
text: 700,
line: 700
}
},
neutral: {
enabled: {},
hover: {
text: 700,
line: 700
},
active: {
text: 700,
line: 700
}
}
},
TabPill: {
default: {
palette: "gray",
enabled: {
background: 0,
backgroundOpacity: 0,
text: 500,
fontWeight: 600
},
hover: {
background: 100,
backgroundOpacity: 1e3,
text: 500,
fontWeight: 600
},
active: {
background: 0,
backgroundOpacity: 0,
text: 500,
fontWeight: 600
}
},
teal: {
enabled: {},
hover: {
background: 100,
backgroundOpacity: 500,
text: 700
},
active: {
background: 100,
backgroundOpacity: 1e3,
text: 700
}
},
blue: {
enabled: {},
hover: {
background: 100,
backgroundOpacity: 50,
text: 700
},
active: {
background: 100,
backgroundOpacity: 0,
text: 700
}
},
red: {
enabled: {},
hover: {
background: 100,
backgroundOpacity: 50,
text: 700
},
active: {
background: 100,
backgroundOpacity: 0,
text: 700
}
},
violet: {
enabled: {},
hover: {
background: 100,
backgroundOpacity: 50,
text: 700
},
active: {
background: 100,
backgroundOpacity: 0,
text: 700
}
},
yellow: {
enabled: {},
hover: {
background: 100,
backgroundOpacity: 50,
text: 700
},
active: {
background: 100,
backgroundOpacity: 0,
text: 700
}
},
green: {
enabled: {},
hover: {
background: 100,
backgroundOpacity: 50,
text: 700
},
active: {
background: 100,
backgroundOpacity: 0,
text: 700
}
},
gray: {
enabled: {},
hover: {
background: 100,
backgroundOpacity: 50,
text: 700
},
active: {
background: 100,
backgroundOpacity: 0,
text: 700
}
},
neutral: {
enabled: {},
hover: {
background: 100,
backgroundOpacity: 50,
text: 700
},
active: {
background: 100,
backgroundOpacity: 0,
text: 700
}
}
},
TabUnderline: {
default: {
palette: "gray",
enabled: {
background: 0,
backgroundOpacity: 0,
text: 500,
line: 200,
fontWeight: 700,
lineHeight: "2px"
},
hover: {
background: 0,
backgroundOpacity: 0,
text: 500,
line: 200,
fontWeight: 700,
lineHeight: "1px"
},
active: {
background: 0,
backgroundOpacity: 0,
fontWeight: 700
}
},
teal: {
enabled: {},
hover: {},
active: {
background: 0,
backgroundOpacity: 0,
text: 700,
line: 700
}
},
blue: {
enabled: {},
hover: {},
active: {
background: 0,
backgroundOpacity: 0,
text: 700,
line: 700
}
},
red: {
enabled: {},
hover: {},
active: {
background: 0,
backgroundOpacity: 0,
text: 700,
line: 700
}
},
violet: {
enabled: {},
hover: {},
active: {
background: 0,
backgroundOpacity: 0,
text: 700,
line: 700
}
},
yellow: {
enabled: {},
hover: {},
active: {
background: 0,
backgroundOpacity: 0,
text: 700,
line: 700
}
},
green: {
enabled: {},
hover: {},
active: {
background: 0,
backgroundOpacity: 0,
text: 700,
line: 700
}
},
gray: {
enabled: {},
hover: {},
active: {
background: 0,
backgroundOpacity: 0,
text: 700,
line: 700
}
},
neutral: {
enabled: {},
hover: {},
active: {
background: 0,
backgroundOpacity: 0,
text: 700,
line: 700
}
}
},
Checkbox: {
default: {
palette: "gray",
enabled: {
background: 0,
border: 300,
text: 600,
fontWeight: 600,
sizes: {
small: "1rem",
medium: "1.25rem",
large: "1.5rem"
}
},
focus: {
border: 300,
text: 600,
backgroundOpacity: 1e3,
fontWeight: 600
},
hover: {
background: 900,
backgroundOpacity: 100,
border: 300,
text: 600,
fontWeight: 600
},
active: {
background: 600,
backgroundOpacity: 1e3,
border: 600,
text: 600,
fontWeight: 600
},
disabled: {
border: 300
}
},
teal: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
blue: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
red: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
violet: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
yellow: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
green: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
gray: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
neutral: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
}
},
Radio: {
default: {
palette: "gray",
enabled: {
background: 0,
border: 300,
text: 600,
fontWeight: 600,
sizes: {
small: "1rem",
medium: "1.25rem",
large: "1.5rem"
}
},
focus: {
border: 300,
text: 600,
backgroundOpacity: 1e3,
fontWeight: 600
},
hover: {
background: 900,
backgroundOpacity: 100,
border: 300,
text: 600,
fontWeight: 600
},
active: {
background: 600,
backgroundOpacity: 1e3,
border: 600,
text: 600,
fontWeight: 600
},
disabled: {
border: 300,
background: 300
}
},
teal: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
blue: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
red: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
violet: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
yellow: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
green: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
gray: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
},
neutral: {
active: {
background: 600,
border: 600
},
focus: {
border: 600
},
indterminate: {
background: 600,
border: 600
}
}
},
Alert: {
default: {
palette: "gray",
enabled: {
background: 50,
backgroundOpacity: 1e3,
text: 700,
action: 800,
title: 800,
fontWeight: 400,
fontWeightAction: 600,
fontWeightTitle: 600
}
},
teal: {
enabled: {
background: 50,
backgroundOpacity: 1e3,
text: 700,
action: 800,
title: 800,
fontWeight: 400,
fontWeightAction: 600,
fontWeightTitle: 600
}
},
blue: {
enabled: {
background: 50,
backgroundOpacity: 1e3,
text: 700,
action: 800,
title: 800,
fontWeight: 400,
fontWeightAction: 600,
fontWeightTitle: 600
}
},
red: {
enabled: {
background: 50,
backgroundOpacity: 1e3,
text: 700,
action: 800,
title: 800,
fontWeight: 400,
fontWeightAction: 600,
fontWeightTitle: 600
}
},
violet: {
enabled: {
background: 50,
backgroundOpacity: 1e3,
text: 700,
action: 800,
title: 800,
fontWeight: 400,
fontWeightAction: 600,
fontWeightTitle: 600
}
},
yellow: {
enabled: {
background: 50,
backgroundOpacity: 1e3,
text: 700,
action: 800,
title: 800,
fontWeight: 400,
fontWeightAction: 600,
fontWeightTitle: 600
}
},
green: {
enabled: {
background: 50,
backgroundOpacity: 1e3,
text: 700,
action: 800,
title: 800,
fontWeight: 400,
fontWeightAction: 600,
fontWeightTitle: 600
}
},
gray: {
enabled: {
background: 50,
backgroundOpacity: 1e3,
text: 700,
action: 800,
title: 800,
fontWeight: 400,
fontWeightAction: 600,
fontWeightTitle: 600
}
},
neutral: {
enabled: {
background: 50,
backgroundOpacity: 1e3,
text: 700,
action: 800,
title: 800,
fontWeight: 400,
fontWeightAction: 600,
fontWeightTitle: 600
}
}
},
Notification: {
default: {
palette: "gray",
enabled: {
background: 0,
backgroundOpacity: 1e3,
text: 500,
action: 600,
title: 800,
fontWeight: 400,
fontWeightAction: 600,
fontWeightTitle: 600,
border: 200,
icon: 600
}
},
teal: {
enabled: {
icon: 600
}
},
blue: {
enabled: {
icon: 600
}
},
red: {
enabled: {
icon: 600
}
},
violet: {
enabled: {
icon: 600
}
},
yellow: {
enabled: {
icon: 600
}
},
green: {
enabled: {
icon: 600
}
},
gray: {
enabled: {
icon: 600
}
},
neutral: {
enabled: {
icon: 600
}
}
},
ButtonFilled: {
default: {
palette: "gray",
enabled: {
background: 50,
backgroundOpacity: 50,
text: 0,
fontWeight: 700
},
hover: {
background: 100,
backgroundOpacity: 100,
text: 0,
fontWeight: 700
},
focus: {
background: 100,
backgroundOpacity: 100,
text: 0,
fontWeight: 700
},
active: {
background: 100,
backgroundOpacity: 200,
text: 0,
fontWeight: 700
},
disabled: {
background: 200
}
},
teal: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
}
},
blue: {
enabled: {
background: 600
},
hover: {
background: 700
},
focus: {
background: 700
},
active: {
background: 800
}
},
red: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
}
},
violet: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
}
},
yellow: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
}
},
green: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
}
},
gray: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
},
disabled: {
background: 200
}
},
neutral: {
enabled: {
background: 400
},
hover: {
background: 500
},
focus: {
background: 500
},
active: {
background: 600
}
}
},
ButtonTinted: {
default: {
palette: "gray",
enabled: {
background: 50,
backgroundOpacity: 50,
text: 900,
fontWeight: 700
},
hover: {
background: 100,
backgroundOpacity: 100,
text: 900,
fontWeight: 700
},
focus: {
background: 100,
backgroundOpacity: 100,
text: 900,
fontWeight: 700
},
active: {
background: 100,
backgroundOpacity: 200,
text: 900,
fontWeight: 700
},
disabled: {
background: 200
}
},
teal: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 600,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 600,
backgroundOpacity: 300,
text: 600
},
active: {
background: 700,
backgroundOpacity: 400,
text: 600
}
},
blue: {
enabled: {
background: 600,
backgroundOpacity: 200,
text: 700
},
hover: {
background: 700,
backgroundOpacity: 300,
text: 700
},
focus: {
background: 700,
backgroundOpacity: 300,
text: 700
},
active: {
background: 800,
backgroundOpacity: 400,
text: 700
}
},
red: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 600,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 600,
backgroundOpacity: 300,
text: 600
},
active: {
background: 700,
backgroundOpacity: 400,
text: 600
}
},
violet: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 600,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 600,
backgroundOpacity: 300,
text: 600
},
active: {
background: 700,
backgroundOpacity: 400,
text: 600
}
},
yellow: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 600,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 600,
backgroundOpacity: 300,
text: 600
},
active: {
background: 700,
backgroundOpacity: 400,
text: 600
}
},
green: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 600,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 600,
backgroundOpacity: 300,
text: 600
},
active: {
background: 700,
backgroundOpacity: 400,
text: 600
}
},
gray: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 600,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 600,
backgroundOpacity: 300,
text: 600
},
active: {
background: 700,
backgroundOpacity: 400,
text: 600
},
disabled: {
background: 200
}
},
neutral: {
enabled: {
background: 500,
backgroundOpacity: 200,
text: 600
},
hover: {
background: 600,
backgroundOpacity: 300,
text: 600
},
focus: {
background: 600,
backgroundOpacity: 300,
text: 600
},
active: {
background: 700,
backgroundOpacity: 400,
text: 600
}
}
},
ButtonBasic: {
default: {
palette: "gray",
enabled: {
border: 900,
borderOpacity: 100,
background: 0,
backgroundOpacity: 50,
text: 600,
fontWeight: 700
},
hover: {
border: 900,
borderOpacity: 100,
background: 900,
backgroundOpacity: 50,
text: 600,
fontWeight: 700
},
focus: {
border: 900,
borderOpacity: 100,
background: 900,
backgroundOpacity: 50,
text: 600,
fontWeight: 700
},
active: {
border: 900,
borderOpacity: 100,
background: 900,
backgroundOpacity: 100,
text: 600,
fontWeight: 700
},
disabled: {
background: 0,
backgroundOpacity: 50
}
},
teal: {
enabled: {
text: 600
},
hover: {
text: 600
},
focus: {
text: 600
},
active: {
text: 600
},
disabled: {
text: 400
}
},
blue: {
enabled: {
text: 600
},
hover: {
text: 600
},
focus: {
text: 600
},
active: {
text: 600
},
disabled: {
text: 400
}
},
red: {
enabled: {
text: 600
},
hover: {
text: 600
},
focus: {
text: 600
},
active: {
text: 600
},
disabled: {
text: 400
}
},
violet: {
enabled: {
text: 600
},
hover: {
text: 600
},
focus: {
text: 600
},
active: {
text: 600
},
disabled: {
text: 400
}
},
yellow: {
enabled: {
text: 600
},
hover: {
text: 600
},
focus: {
text: 600
},
active: {
text: 600
},
disabled: {
text: 400
}
},
green: {
enabled: {
text: 600
},
hover: {
text: 600
},
focus: {
text: 600
},
active: {
text: 600
},
disabled: {
text: 400
}
},
gray: {
enabled: {
text: 600
},
hover: {
text: 600
},
focus: {
text: 600
},
active: {
text: 600
},
disabled: {
text: 400
}
},
neutral: {
enabled: {
text: 600
},
hover: {
text: 600
},
focus: {
text: 600
},
active: {
text: 600
},
disabled: {
text: 400
}
}
},
Badge: {
default: {
palette: "gray",
enabled: {
background: 600,
fontWeight: 600,
text: 0
}
},
teal: {
enabled: {
background: 600,
fontWeight: 600,
text: 0
}
},
blue: {
enabled: {
background: 600,
fontWeight: 600,
text: 0
}
},
red: {
enabled: {
background: 600,
fontWeight: 600,
text: 0
}
},
violet: {
enabled: {
background: 600,
fontWeight: 600,
text: 0
}
},
yellow: {
enabled: {
background: 600,
fontWeight: 600,
text: 0
}
},
green: {
enabled: {
background: 600,
fontWeight: 600,
text: 0
}
},
gray: {
enabled: {
background: 600,
fontWeight: 600,
text: 0
}
},
neutral: {
enabled: {
background: 600,
fontWeight: 600,
text: 0
}
}
},
Spinner: {
default: {
palette: "gray",
enabled: {
background: 600,
fontWeight: 600,
text: 600,
unfilled: 200
}
},
teal: {
enabled: {
background: 600,
fontWeight: 600,
text: 600
}
},
blue: {
enabled: {
background: 600,
fontWeight: 600,
text: 600
}
},
red: {
enabled: {
background: 600,
fontWeight: 600,
text: 600
}
},
violet: {
enabled: {
background: 600,
fontWeight: 600,
text: 600
}
},
yellow: {
enabled: {
background: 600,
fontWeight: 600,
text: 600
}
},
green: {
enabled: {
background: 600,
fontWeight: 600,
text: 600
}
},
gray: {
enabled: {
background: 600,
fontWeight: 600,
text: 600
}
},
neutral: {
enabled: {
background: 600,
fontWeight: 600,
text: 600
}
}
},
Progress: {
default: {
palette: "gray",
enabled: {
background: 600,
fontWeight: 700,
text: 0,
unfilled: 300,
sizes: {
small: "1rem",
medium: "1.25rem",
large: "1.5rem"
}
}
},
teal: {
enabled: {
background: 600
}
},
blue: {
enabled: {
background: 600
}
},
red: {
enabled: {
background: 600
}
},
violet: {
enabled: {
background: 600
}
},
yellow: {
enabled: {
background: 600
}
},
green: {
enabled: {
background: 600
}
},
gray: {
enabled: {
background: 600
}
},
neutral: {
enabled: {
background: 600
}
}
},
Range: {
default: {
palette: "gray",
enabled: {
background: 600,
fontWeight: 700,
text: 0,
unfilled: 300
},
disabled: {
background: 500
}
},
teal: {
enabled: {
background: 600
}
},
blue: {
enabled: {
background: 600
}
},
red: {
enabled: {
background: 600
}
},
violet: {
enabled: {
background: 600
}
},
yellow: {
enabled: {
background: 600
}
},
green: {
enabled: {
background: 600
}
},
gray: {
enabled: {
background: 600
}
},
neutral: {
enabled: {
background: 600
}
}
},
ButtonGroup: {
default: {
palette: "gray",
enabled: {
border: 200
}
}
},
TableCell: {
default: {
palette: "gray",
enabled: {},
hover: {},
focus: {},
active: {},
disabled: {}
}
},
Table: {
default: {
palette: "gray",
enabled: {
border: 300,
background: 0
},
hover: {
border: 300,
background: 0
},
focus: {
border: 300,
background: 0
},
active: {
border: 300,
background: 0
},
disabled: {
border: 300,
background: 0
}
}
},
TableHeadCell: {
default: {
palette: "gray",
enabled: {
border: 300,
background: 50,
text: 900,
fontWeight: 700
},
hover: {
border: 300,
background: 100,
text: 900,
fontWeight: 700
},
focus: {
border: 300,
background: 50,
text: 900,
fontWeight: 700
},
active: {
border: 300,
background: 50,
text: 900,
fontWeight: 700
},
disabled: {
background: 0,
backgroundOpacity: 50
}
}
},
TableRow: {
default: {
palette: "gray",
enabled: {
border: 200,
background: 0
},
hover: {
border: 200,
background: 50
},
focus: {
border: 200,
background: 50
},
active: {
border: 200,
background: 50
},
disabled: {
border: 200,
background: 50
}
},
teal: {
active: {
background: 50
}
},
blue: {
active: {
background: 50
}
},
red: {
active: {
background: 50
}
},
violet: {
active: {
background: 50
}
},
yellow: {
active: {
background: 50
}
},
green: {
active: {
background: 50
}
},
gray: {
active: {
background: 50
}
},
neutral: {
active: {
background: 50
}
}
},
Modal: {
default: {
palette: "gray",
enabled: {
bg: 0,
cancelButton: 400
},
hover: {
cancelBtnBg: 900,
cancelBtnBgOpacity: 50
},
focus: {
cancelBtnBg: 900,
cancelBtnBgOpacity: 100
}
}
},
ConfirmationForm: {
default: {
palette: "gray",
enabled: {
icon: 600,
trackBg: 100
}
},
teal: {
enabled: {
icon: 600
}
},
blue: {
enabled: {
icon: 600
}
},
red: {
enabled: {
icon: 600
}
},
violet: {
enabled: {
icon: 600
}
},
yellow: {
enabled: {
icon: 600
}
},
green: {
enabled: {
icon: 600
}
},
gray: {
enabled: {
icon: 600
}
},
neutral: {
enabled: {
icon: 600
}
}
},
Popover: {
default: {
palette: "gray",
enabled: {
bg: 0,
boxShadow: "0px 20px 25px -5px rgba(0, 0, 0, 0.1), 0px -10px 10px -5px rgba(0, 0, 0, 0.02)"
}
}
},
FormField: {
default: {
palette: "gray",
enabled: {
label: 600,
text: 600,
fontWeight: 600
}
},
red: {
enabled: {
text: 600
}
},
yellow: {
enabled: {
text: 600
}
},
green: {
enabled: {
text: 600
}
}
},
Toggle: {
default: {
palette: "gray",
enabled: {
background: 900,
backgroundOpacity: 200
},
hover: {
background: 900,
backgroundOpacity: 300
},
focus: {
background: 900,
backgroundOpacity: 300
},
active: {
background: 900,
backgroundOpacity: 400
},
disabled: {
background: 900,
backgroundOpacity: 200
}
},
teal: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
}
},
blue: {
enabled: {
background: 600
},
hover: {
background: 700
},
focus: {
background: 700
},
active: {
background: 800
}
},
red: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
}
},
violet: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
}
},
yellow: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
}
},
green: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
}
},
gray: {
enabled: {
background: 500
},
hover: {
background: 600
},
focus: {
background: 600
},
active: {
background: 700
},
disabled: {
background: 200
}
},
neutral: {
enabled: {
background: 400
},
hover: {
background: 500
},
focus: {
background: 500
},
active: {
background: 600
}
}
},
ToggleSlider: {
default: {
palette: "gray",
enabled: {
background: 50,
backgroundOpacity: 1e3,
fontWeight: 900
},
hover: {
background: 50,
backgroundOpacity: 1e3
},
focus: {
background: 50,
backgroundOpacity: 1e3
},
active: {
background: 50,
backgroundOpacity: 1e3
},
disabled: {
background: 50,
backgroundOpacity: 700
}
}
},
ToggleIcon: {
default: {
palette: "gray",
enabled: {
text: 400
},
hover: {
text: 400
},
focus: {
text: 400
},
active: {
text: 400
},
disabled: {
text: 400
}
}
},
UploadedFile: {
default: {
palette: "gray",
enabled: {
color: 600
}
},
teal: {
enabled: {
color: 600
}
},
blue: {
enabled: {
color: 600
}
},
red: {
enabled: {
color: 600
}
},
violet: {
enabled: {
color: 600
}
},
yellow: {
enabled: {
color: 600
}
},
green: {
enabled: {
color: 600
}
},
gray: {
enabled: {
color: 600
}
},
neutral: {
enabled: {
color: 600
}
}
},
Dropdown: {
default: {
palette: "gray",
enabled: {
background: 0,
removeIcon: 400
},
hover: {
background: 100
},
selected: {
background: 500
}
},
teal: {
hover: {
background: 100
},
selected: {
background: 500
}
},
blue: {
hover: {