@cavilha/theme
Version:
A theme provider for styling components using MadeiraMadeira webstore design token definitions
449 lines (448 loc) • 14.3 kB
TypeScript
import { PropertyValue } from '@stitches/react';
declare const BaseTheme: {
theme: {
colors: {
hiContrast: string;
loContrast: string;
canvas: string;
brandPrimary: string;
brandSecondary: string;
brandMadeira1: string;
brandMadeira2: string;
brandMadeira3: string;
brandMadeira4: string;
brandMadeira5: string;
brandMadeira6: string;
brandMadeira7: string;
brandMadeira8: string;
brandMadeira9: string;
mono1: string;
mono2: string;
background1: string;
background2: string;
alwaysBlack: string;
alwaysGray: string;
alwaysWhite: string;
primary1: string;
primary2: string;
primary3: string;
primary4: string;
primary1Hover: string;
primary2Hover: string;
primary3Hover: string;
primary4Hover: string;
secondary1: string;
secondary2: string;
secondary3: string;
secondary3RGB: string;
secondary4: string;
secondary0Hover: string;
secondary1Hover: string;
secondary2Hover: string;
secondary3Hover: string;
secondary4Hover: string;
success1: string;
success2: string;
success3: string;
success4: string;
success1Hover: string;
success2Hover: string;
success3Hover: string;
success4Hover: string;
danger1: string;
danger2: string;
danger3: string;
danger4: string;
danger1Hover: string;
danger2Hover: string;
danger3Hover: string;
danger4Hover: string;
warning1: string;
warning2: string;
warning3: string;
warning4: string;
warning1Hover: string;
warning2Hover: string;
warning3Hover: string;
warning4Hover: string;
info1: string;
info2: string;
info3: string;
info4: string;
info1Hover: string;
info2Hover: string;
info3Hover: string;
info4Hover: string;
neutral1: string;
neutral2: string;
neutral3: string;
neutral4: string;
neutral5: string;
neutral6: string;
linkedin: string;
linkedin1: string;
whatsapp1: string;
whatsapp2: string;
whatsapp3: string;
youtube1: string;
youtube2: string;
twitter: string;
twitter1: string;
facebook1: string;
instagram1: string;
pinterest: string;
pinterest1: string;
mono1Opacity1: string;
mono1Opacity2: string;
mono1Opacity3: string;
mono1Opacity4: string;
mono1Opacity5: string;
mono1Opacity6: string;
mono1Opacity7: string;
mono1Opacity8: string;
mono1Opacity9: string;
mono2Opacity1: string;
mono2Opacity2: string;
mono2Opacity3: string;
mono2Opacity4: string;
mono2Opacity5: string;
mono2Opacity6: string;
mono2Opacity7: string;
mono2Opacity8: string;
mono2Opacity9: string;
defaultBorderColor: string;
yellow100: string;
yellow200: string;
yellow300: string;
yellow400: string;
yellow500: string;
yellow600: string;
purple100: string;
purple200: string;
purple300: string;
purple400: string;
purple500: string;
purple600: string;
flagFreight: string;
flagOffer: string;
flagPrivateLabel: string;
flagCampaing: string;
secondaryHover0: string;
};
fonts: {
untitled: string;
mono: string;
};
space: {
none: string;
small1: string;
small2: string;
small3: string;
medium1: string;
medium2: string;
medium3: string;
large1: string;
large2: string;
large3: string;
xlarge1: string;
xlarge2: string;
xlarge3: string;
gridGutter: string;
gridMobileGutter: string;
};
sizes: {
small1: string;
small2: string;
small3: string;
medium1: string;
medium2: string;
medium3: string;
large1: string;
large2: string;
large3: string;
xlarge1: string;
xlarge2: string;
xlarge3: string;
gridColumns: string;
};
fontSizes: {
bodyXSmall: string;
bodySmall: string;
bodyMedium: string;
hero: string;
h1: string;
h2: string;
h3: string;
h4: string;
h5: string;
mobileHero: string;
mobileH1: string;
mobileH2: string;
mobileH3: string;
mobileH4: string;
mobileH5: string;
iconXSmall: string;
iconSmall: string;
iconMedium: string;
iconLarge: string;
iconXLarge: string;
};
fontWeights: {
light: string;
regular: string;
semibold: string;
bold: string;
};
letterSpacings: {
none: string;
small: string;
medium: string;
large: string;
};
lineHeights: {
small1: string;
small2: string;
small3: string;
medium1: string;
medium2: string;
medium3: string;
large1: string;
large2: string;
large3: string;
};
radii: {
none: string;
small: string;
medium: string;
large: string;
xlarge: string;
circle: string;
};
shadows: {
shadowNone: string;
shadowXSmall: string;
shadowSmall: string;
shadowMedium: string;
shadowLarge: string;
focusPressed: string;
};
zIndices: {
1: string;
2: string;
3: string;
4: string;
max: string;
};
};
media: {
sm: string;
md: string;
lg: string;
};
utils: {
p: (value: PropertyValue<'padding'>) => {
padding: {
readonly [$$PropertyValue]: "padding";
};
};
pt: (value: PropertyValue<'paddingTop'>) => {
paddingTop: {
readonly [$$PropertyValue]: "paddingTop";
};
};
pr: (value: PropertyValue<'paddingRight'>) => {
paddingRight: {
readonly [$$PropertyValue]: "paddingRight";
};
};
pb: (value: PropertyValue<'paddingBottom'>) => {
paddingBottom: {
readonly [$$PropertyValue]: "paddingBottom";
};
};
pl: (value: PropertyValue<'paddingLeft'>) => {
paddingLeft: {
readonly [$$PropertyValue]: "paddingLeft";
};
};
px: (value: PropertyValue<'padding'>) => {
paddingLeft: {
readonly [$$PropertyValue]: "padding";
};
paddingRight: {
readonly [$$PropertyValue]: "padding";
};
};
py: (value: PropertyValue<'padding'>) => {
paddingTop: {
readonly [$$PropertyValue]: "padding";
};
paddingBottom: {
readonly [$$PropertyValue]: "padding";
};
};
m: (value: PropertyValue<'margin'>) => {
margin: {
readonly [$$PropertyValue]: "margin";
};
};
mt: (value: PropertyValue<'marginTop'>) => {
marginTop: {
readonly [$$PropertyValue]: "marginTop";
};
};
mr: (value: PropertyValue<'marginRight'>) => {
marginRight: {
readonly [$$PropertyValue]: "marginRight";
};
};
mb: (value: PropertyValue<'marginBottom'>) => {
marginBottom: {
readonly [$$PropertyValue]: "marginBottom";
};
};
ml: (value: PropertyValue<'marginLeft'>) => {
marginLeft: {
readonly [$$PropertyValue]: "marginLeft";
};
};
mx: (value: PropertyValue<'margin'>) => {
marginLeft: {
readonly [$$PropertyValue]: "margin";
};
marginRight: {
readonly [$$PropertyValue]: "margin";
};
};
my: (value: PropertyValue<'margin'>) => {
marginTop: {
readonly [$$PropertyValue]: "margin";
};
marginBottom: {
readonly [$$PropertyValue]: "margin";
};
};
ta: (value: PropertyValue<'textAlign'>) => {
textAlign: {
readonly [$$PropertyValue]: "textAlign";
};
};
fd: (value: PropertyValue<'flexDirection'>) => {
flexDirection: {
readonly [$$PropertyValue]: "flexDirection";
};
};
fw: (value: PropertyValue<'flexWrap'>) => {
flexWrap: {
readonly [$$PropertyValue]: "flexWrap";
};
};
ai: (value: PropertyValue<'alignItems'>) => {
alignItems: {
readonly [$$PropertyValue]: "alignItems";
};
};
ac: (value: PropertyValue<'alignContent'>) => {
alignContent: {
readonly [$$PropertyValue]: "alignContent";
};
};
jc: (value: PropertyValue<'justifyContent'>) => {
justifyContent: {
readonly [$$PropertyValue]: "justifyContent";
};
};
as: (value: PropertyValue<'alignSelf'>) => {
alignSelf: {
readonly [$$PropertyValue]: "alignSelf";
};
};
fg: (value: PropertyValue<'flexGrow'>) => {
flexGrow: {
readonly [$$PropertyValue]: "flexGrow";
};
};
fs: (value: PropertyValue<'flexShrink'>) => {
flexShrink: {
readonly [$$PropertyValue]: "flexShrink";
};
};
fb: (value: PropertyValue<'flexBasis'>) => {
flexBasis: {
readonly [$$PropertyValue]: "flexBasis";
};
};
bc: (value: PropertyValue<'backgroundColor'>) => {
backgroundColor: {
readonly [$$PropertyValue]: "backgroundColor";
};
};
br: (value: PropertyValue<'borderRadius'>) => {
borderRadius: {
readonly [$$PropertyValue]: "borderRadius";
};
};
btrr: (value: PropertyValue<'borderTopRightRadius'>) => {
borderTopRightRadius: {
readonly [$$PropertyValue]: "borderTopRightRadius";
};
};
bbrr: (value: PropertyValue<'borderBottomRightRadius'>) => {
borderBottomRightRadius: {
readonly [$$PropertyValue]: "borderBottomRightRadius";
};
};
bblr: (value: PropertyValue<'borderBottomLeftRadius'>) => {
borderBottomLeftRadius: {
readonly [$$PropertyValue]: "borderBottomLeftRadius";
};
};
btlr: (value: PropertyValue<'borderTopLeftRadius'>) => {
borderTopLeftRadius: {
readonly [$$PropertyValue]: "borderTopLeftRadius";
};
};
bs: (value: PropertyValue<'boxShadow'>) => {
boxShadow: {
readonly [$$PropertyValue]: "boxShadow";
};
};
lh: (value: PropertyValue<'lineHeight'>) => {
lineHeight: {
readonly [$$PropertyValue]: "lineHeight";
};
};
ox: (value: PropertyValue<'overflowX'>) => {
overflowX: {
readonly [$$PropertyValue]: "overflowX";
};
};
oy: (value: PropertyValue<'overflowY'>) => {
overflowY: {
readonly [$$PropertyValue]: "overflowY";
};
};
pe: (value: PropertyValue<'pointerEvents'>) => {
pointerEvents: {
readonly [$$PropertyValue]: "pointerEvents";
};
};
us: (value: PropertyValue<'userSelect'>) => {
userSelect: {
readonly [$$PropertyValue]: "userSelect";
};
};
size: (value: PropertyValue<'width'>) => {
width: {
readonly [$$PropertyValue]: "width";
};
height: {
readonly [$$PropertyValue]: "width";
};
};
linearGradient: (value: string) => {
backgroundImage: string;
};
};
};
export default BaseTheme;