theme-ui#Theme TypeScript Examples
The following examples show how to use
theme-ui#Theme.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: providers.tsx From desktop with MIT License | 6 votes |
|
theme = merge((baseTheme as unknown) as Theme, {
colors: {
background: baseTheme.colors.primaryBackground,
},
fontWeights: {
"500": 500,
},
fonts: {
mono: `Roboto Mono`,
},
borders: {
none: `none`,
default: `1px solid ${baseTheme.colors.whiteFade[20]}`,
sixtywhite: `1px solid ${baseTheme.colors.whiteFade[40]}`,
white: `1px solid ${baseTheme.colors.white}`,
grey: `1px solid ${baseTheme.colors.grey[30]}`,
},
})
Example #2
| Source File: Tabs.tsx From slice-machine with Apache License 2.0 | 6 votes |
|
Icon = ({
theme,
onClick,
}: {
theme: Theme;
onClick: MouseEventHandler<HTMLButtonElement>;
}) => (
<SliceMachineIconButton
size={20}
Icon={HiOutlineCog}
label="Edit tab"
sx={{ cursor: "pointer", color: theme.colors?.icons }}
onClick={onClick}
/>
)
Example #3
| Source File: index.tsx From slice-machine with Apache License 2.0 | 6 votes |
|
borderedSx = (sx: ThemeUIStyleObject) => ({
border: (t: Theme) => `1px solid ${t.colors?.border as string}`,
bg: "transparent",
transition: "all 200ms ease-in",
p: 3,
...sx,
"&:hover": {
transition: "all 200ms ease-out",
bg: "sidebar",
border: (t: Theme) => `1px solid ${t.colors?.sidebar as string}`,
},
})
Example #4
| Source File: index.ts From use-comments with MIT License | 4 votes |
|
theme: Theme = merge(future as Theme, {
initialColorModeName: 'light',
useColorSchemeMediaQuery: true,
// fontSizes: [8, 10, 16, 24, 36, 54, 81, 121],
colors: {
shadow: 'rgba(0,0,0,0.2)',
heading: 'rgb(51, 51, 51)',
modes: {
dark: {
...deep.colors,
shadow: 'rgba(0,0,0,0.4)',
text: 'hsl(210, 60%, 97%)',
heading: '#fff',
},
},
},
sizes: {
container: 1100,
},
fonts: {
heading: 'PT Serif',
body: 'system-ui, sans-serif',
mono: 'Monolisa, Fira Code, Hasklig, Hack, Menlo, Monaco',
},
radii: {
tiny: '4px',
small: '5px',
medium: '10px',
},
styles: {
root: {},
time: {
fontWeight: '200',
color: 'gray',
},
// comment in LiveEdit
article: {
backgroundColor: 'muted',
marginBottom: '6px',
display: 'flex',
flexDirection: 'column',
padding: '10px',
borderRadius: '6px',
'> div': {
display: 'flex',
fontWeight: 'bold',
paddingBottom: '6px',
'> p': {
fontWeight: '200',
paddingLeft: '5px',
},
},
'> p': {
whiteSpace: 'pre-wrap'
}
},
textarea: {
fontFamily: 'body',
},
section: {
paddingX: '2px',
width: '100%',
px: [3, 3, 3, 4],
section: {
px: '2px',
},
},
p: {
my: 2,
width: '70ch',
maxWidth: '100%',
},
code: {
...nightOwl,
fontFamily: 'mono',
fontSize: '0.8em',
padding: '4px 6px',
borderRadius: 'tiny',
},
inlineCode: {
'&&': {
bg: 'muted',
color: 'text',
},
},
pre: {
padding: '8px 10px',
borderRadius: 'small',
},
a: {
color: 'text',
cursor: 'pointer',
textDecoration: 'none',
borderBottom: '2px solid',
borderBottomColor: 'primary',
position: 'relative',
':focus, :hover': {
':before': {
content: '""',
backgroundColor: secondaryLight,
opacity: 0.9,
position: 'absolute',
top: -1,
bottom: -1,
right: -1,
left: -1,
transform: 'rotate(-2deg)',
},
},
},
h1: {
padding: 0,
lineHeight: ['50px', '70px'],
color: 'heading',
fontSize: [6, 7],
},
h2: {
color: 'heading',
fontSize: 5,
},
h3: {
fontFamily: 'body',
fontSize: 2,
},
h4: {
fontFamily: 'body',
},
hr: {
borderStyle: 'dashed',
},
ul: {
width: '70ch',
maxWidth: '100%',
},
ol: {
listStyle: 'none',
counterReset: 'i',
paddingInlineStart: 4,
li: {
position: 'relative',
counterIncrement: 'i',
'> p:first-of-type': {
display: 'inline-block',
},
},
'li:before': {
position: 'absolute',
top: '10px',
fontWeight: 'bold',
fontFamily: 'heading',
fontSize: 3,
display: 'inline-block',
transform: 'rotate(5deg)',
verticalAlign: 'middle',
content: 'counters(i, ".") ". "',
px: '7px',
my: '-7px',
ml: -4,
opacity: 0.9,
bg: secondaryLight,
},
},
img: {
marginY: '25px',
borderRadius: '5px',
boxShadow: '0 6px 42px rgba(0,0,0,0.12)',
},
},
buttons: {
primary: primary,
},
links: {
navLink: {
borderBottom: 'none',
},
button: {
...primary,
':focus, :hover': { '::before': { display: 'none' } },
},
},
forms: {
input: {
'&:focus': {
borderColor: 'primary',
boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
outline: 'none',
},
},
textarea: {
'&:focus': {
borderColor: 'primary',
boxShadow: t => `0 0 0 2px ${t.colors.primary}`,
outline: 'none',
},
},
},
messages: {
primary: {
backgroundColor: alpha('secondary', 0.2),
},
},
})
Example #5
| Source File: theme.ts From slice-machine with Apache License 2.0 | 4 votes |
|
AppTheme = (): Theme =>
({
initialColorModeName: "light",
colors: {
text: "#25252D",
textClear: "#4E4E55",
grayLight: "#E8E8ED",
hoverBackground: "#f2f2f2",
background: "#FFF",
backgroundClear: "#FFF",
primary: "#6E52FF",
purpleLight: "#F6F1FC",
badge: {
published: {
bg: "#E9F6EE",
color: "#27AE60",
},
new: {
bg: "#F6F1FC",
color: "#AC7EE9",
},
modified: {
bg: "#FDF4EC",
color: "#F2994A",
},
},
codeBlockBorder: "#545454",
secondary: "#F9FAFB",
highlight: "hsl(10, 40%, 90%)",
purple: "#5B3DF5",
muted: "#F9F9FB",
icons: "#8091A5",
gray: "#F8F9FA",
grey01: "#F3F5F7",
grey02: "#E6E6EA",
grey04: "#9AA4AF",
grey05: "#667587",
borders: "#C9D0D8",
deep: "#0E2150",
deep1: "#A0ADE7",
lightGreen: "#EBF8F1",
lightOrange: "#FDF4EC",
darkOrange: "#C17C10",
error: "#E55737",
success: "#3AB97A",
headSection: "#fff",
warning: "#E67E22",
sidebar: "#F1F1F4",
link: "#5163BA",
choggleBox: "#5163BA",
code: {
border: "#DFE1E5",
blue: "#3B41BD",
gray: "#667587",
orange: "#EA6D46",
green: "#3AB97A",
},
modes: {
dark: {
text: "#fff",
textClear: "#6E707B",
hoverBackground: "#202020",
grey02: "#E6E6EA",
background: "#202022",
backgroundClear: "#28282C",
primary: "#4E54D7",
secondary: "#28282C",
icons: "#5D5D71",
gray: "#1D1D1F",
borders: "#3A3A46",
deep: "#28282C",
headSection: "#28282C",
warning: "#E67E22",
sidebar: "#28282C",
code: {
border: "#5D5D6F",
blue: "#3B41BD",
gray: "#667587",
orange: "#EA6D46",
green: "#3AB97A",
},
link: "#A9A9C6",
choggleBox: "#fff",
},
},
},
fonts: {
body: 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
heading: "inherit",
monospace: "Menlo, monospace",
},
fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],
breakpoints: ["40em", "56em", "64em"],
fontWeights: {
thin: 300,
body: 400,
heading: 500,
label: 500,
display: 900,
},
lineHeights: {
body: 1.5,
heading: 1.25,
},
textStyles: {
heading: {
fontFamily: "heading",
fontWeight: "heading",
lineHeight: "heading",
},
display: {
variant: "textStyles.heading",
fontSize: [5, 6],
fontWeight: "display",
letterSpacing: "-0.03em",
mt: 3,
},
},
sizes: {
leftSidebar: 220,
sidebar: 340,
},
text: {
xs: {
fontWeight: "400",
color: "textClear",
fontSize: 1,
},
small: {
fontWeight: "500",
fontSize: 2,
},
labelError: {
color: "error",
fontWeight: "body",
fontSize: 1,
margin: 0,
pl: 2,
},
pre: {
fontSize: 1,
fontWeight: "400",
color: "textClear",
bg: "grey01",
p: "2px",
},
},
badges: {
PUBLISHED: {
fontWeight: "body",
color: "badge.published.color",
bg: "badge.published.bg",
px: 1,
py: "1px",
},
NEW_SLICE: {
fontWeight: "body",
color: "badge.new.color",
bg: "badge.new.bg",
px: 1,
py: "1px",
},
MODIFIED: {
fontWeight: "body",
color: "badge.modified.color",
bg: "badge.modified.bg",
px: 1,
py: "1px",
},
circle: {
borderRadius: "50%",
fontSize: "10px",
},
primary: {
color: "text",
bg: "primary",
},
"circle-right": {
top: "-8px",
right: "-8px",
height: "24px",
width: "24px",
display: "flex",
position: "absolute",
alignItems: "center",
justifyContent: "center",
borderRadius: "50%",
},
outline: {
color: "primary",
fontSize: "14px",
fontWeight: "500",
bg: "transparent",
border: "none",
borderColor: "borders",
},
},
buttons: {
primary: {
color: "white",
fontSize: 1,
fontWeight: "body",
bg: "primary",
boxShadow:
"0px 1px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.1)",
userSelect: "none",
transition: "all 150ms cubic-bezier(0.215,0.60,0.355,1)",
"&:hover": {
bg: darken("primary", 0.02),
cursor: "pointer",
boxShadow:
"0px 1px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.1)",
},
"&:focus": {
boxShadow: "0 0 0 1px #fff, 0 0 0 3px rgb(110, 82, 255, 1)",
bg: darken("primary", 0.02),
outline: "none",
},
"&:disabled": {
bg: lighten("primary", 0.2),
},
"&:active": {
boxShadow:
"0px 1px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.1)",
bg: darken("primary", 0.05),
borderColor: darken("primary", 0.08),
outline: "none",
},
},
screenSize: {
p: 0,
display: "flex",
justifyContent: "center",
alignItems: "center",
height: "32px",
width: "32px",
bg: "text",
color: "white",
cursor: "pointer",
boxShadow:
"0px 1px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.1)",
},
secondary: {
bg: "secondary",
fontWeight: "body",
fontSize: "1",
color: "textClear",
border: (t) => `1px solid ${String(t?.colors?.borders)}`,
"&:hover": {
bg: darken("secondary", 0.02),
cursor: "pointer",
},
"&:focus": {
bg: darken("secondary", 0.05),
borderColor: darken("secondary", 0.15),
outline: "none",
},
"&:active": {
bg: darken("secondary", 0.06),
outline: "none",
},
},
small: {
bg: "primary",
borderRadius: "4px",
pl: 2,
pr: 2,
pb: 1,
pt: 1,
fontSize: "12px",
fontWeight: "body",
},
darkSmall: {
borderRadius: "4px",
color: "white",
fontSize: "12px",
fontWeight: "body",
bg: "text",
boxShadow:
"0px 1px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.1)",
userSelect: "none",
transition: "all 150ms cubic-bezier(0.215,0.60,0.355,1)",
"&:hover": {
bg: lighten("text", 0.05),
cursor: "pointer",
},
},
lightSmall: {
borderRadius: "4px",
color: "text",
fontSize: "12px",
fontWeight: "body",
bg: "white",
boxShadow:
"0px 1px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.1)",
userSelect: "none",
transition: "all 150ms cubic-bezier(0.215,0.60,0.355,1)",
"&:hover": {
bg: darken("white", 0.05),
cursor: "pointer",
},
},
actionDelete: {
width: "100%",
borderRadius: "4px",
color: "error",
fontSize: "16px",
fontWeight: "body",
bg: "grey02",
boxShadow:
"0px 1px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px rgba(0, 0, 0, 0.1)",
userSelect: "none",
transition: "all 150ms cubic-bezier(0.215,0.60,0.355,1)",
"&:hover": {
bg: darken("white", 0.05),
cursor: "pointer",
},
},
disabled: {
bg: "#D6CEFC",
fontSize: "1",
color: "white",
cursor: "not-allowed",
borderColor: "transparent",
},
disabledSecondary: {
bg: "#F9F9FA",
fontSize: "1",
color: "#C9D0D8",
cursor: "not-allowed",
border: "1px solid",
borderColor: "1px solid rgba(62, 62, 72, 0.15)",
},
transparent: {
background: "transparent",
border: "none",
p: 1,
color: "primary",
cursor: "pointer",
},
selectIcon: {
"&:hover": {
cursor: "pointer",
},
"&:focus, &:active": {
outline: "none",
},
},
textButton: {
border: "none",
color: "primary",
background: "transparent",
p: 1,
position: "relative",
top: "1px",
ml: 1,
cursor: "pointer",
"&:hover": {
background: "rgba(0,0,0,0.06) !important",
borderRadius: "3px",
},
},
close: {
color: "icons",
"&:hover": {
bg: "rgba(0,0,0,0.08)",
cursor: "pointer",
},
"&:focus": {
outline: "none",
},
},
icon: {
"&:hover": {
bg: "rgba(0,0,0,0.08)",
},
"&:focus": {
outline: "none",
},
},
round: {
display: "flex",
alignItems: "center",
justifyContent: "center",
borderRadius: "50%",
},
},
success: {
done: {
position: "absolute",
top: "57px",
width: "100%",
p: 2,
bg: "success",
},
error: {
position: "absolute",
top: "57px",
width: "100%",
p: 2,
bg: "error",
},
warning: {
position: "absolute",
top: "57px",
width: "100%",
p: 2,
bg: "warning",
},
},
cards: {
primary: {
bg: "gray",
border: "1px solid",
borderRadius: 4,
borderColor: "borders",
},
large: {
py: 2,
bg: "gray",
borderRadius: 4,
boxShadow: "0 0 8px rgba(0, 0, 0, 0.125)",
},
},
forms: {
disabled: {
bg: "muted",
cursor: "not-allowed",
pointerEvents: "none",
},
checkbox: {
color: "icons",
},
radio: {
color: "borders",
"&:checked": {
color: "purple",
},
},
input: {
fontSize: 1,
bg: "headSection",
borderColor: "borders",
fontFamily: "body",
"&::placeholder": {
fontFamily: "body",
color: "textClear",
},
"&:hover": {
borderColor: darken("borders", 0.07),
},
"&:focus, &:active": {
outline: "none",
borderColor: "primary",
boxShadow:
"0 0 0 3px rgba(81, 99, 186, 0.2), inset 0 1px 2px rgba(102, 113, 123, 0.2)",
},
},
textarea: {
fontSize: 1,
resize: "none",
bg: "headSection",
fontFamily: "body",
borderColor: "borders",
"&::placeholder": {
fontFamily: "body",
color: "textClear",
},
"&:hover": {
borderColor: darken("borders", 0.07),
},
"&:focus, &:active": {
outline: "none",
borderColor: "primary",
boxShadow:
"0 0 0 3px rgba(81, 99, 186, 0.2), inset 0 1px 2px rgba(102, 113, 123, 0.2)",
},
},
hint: {
fontSize: 1,
color: (t) => t?.colors?.choggleBox,
},
label: {
fontSize: 1,
primary: {
mb: 2,
fontSize: 1,
fontWeight: "label",
position: "relative",
"& > span": {
mb: 1,
display: "inline-block",
fontWeight: "label",
},
},
border: {
fontSize: 1,
mb: 1,
fontWeight: "body",
pt: "7px",
pb: "6px",
px: 1,
borderRadius: "3px",
border: (t) => `1px solid ${String(t?.colors?.borders)}`,
},
},
},
links: {
hint: {
fontSize: 1,
color: (t) => t?.colors?.link,
margin: "0 4px",
textDecoration: "none",
cursor: "pointer",
display: "inline-block",
},
invisible: {
color: "text",
textDecoration: "none",
cursor: "pointer",
},
sidebar: {
fontSize: 1,
color: "textClear",
textDecoration: "none",
cursor: "pointer",
borderRadius: "6px",
p: 2,
transition: "all 150ms cubic-bezier(0.215,0.60,0.355,1)",
"&:hover": {
color: "text",
bg: "grey02",
},
},
sidebarEmphasis: {
fontSize: 1,
color: "purple",
textDecoration: "none",
cursor: "pointer",
borderRadius: "6px",
p: 2,
transition: "all 150ms cubic-bezier(0.215,0.60,0.355,1)",
"&:hover": {
bg: "grey02",
},
},
},
styles: {
navLink: {
color: "#FFF",
"&:hover": {
color: "#FFF",
},
},
deepNavLink: {
color: "deep1",
},
listItem: {
borderRadius: "3px",
my: 3,
listStyleType: "none",
justifyContent: "space-between",
},
Container: {
p: 3,
maxWidth: 1024,
},
fixedHeader: {
position: "fixed",
alignItems: "center",
justifyContent: "space-between",
height: "48px",
width: "100%",
bg: "background",
p: 2,
top: "0",
left: "0",
},
success: {
position: "absolute",
width: "100%",
p: 2,
},
disabledBox: {
position: "absolute",
zIndex: "1",
height: "100%",
width: "100%",
background: "rgba(0, 0, 0, .1)",
},
root: {
fontFamily: "body",
lineHeight: "body",
fontWeight: "body",
},
h1: {
variant: "textStyles.display",
fontSize: 1,
},
h2: {
variant: "textStyles.heading",
fontSize: 5,
},
h3: {
variant: "textStyles.heading",
fontSize: 4,
},
h4: {
variant: "textStyles.heading",
fontSize: 3,
},
h5: {
variant: "textStyles.heading",
fontSize: 2,
},
h6: {
variant: "textStyles.heading",
fontSize: 1,
},
ul: {
p: 0,
m: 0,
},
li: {
listStyleType: "none",
},
hint: {
display: "block",
fontStyle: "normal",
fontWeight: "normal",
},
inlineCode: {
fontFamily: "monospace",
color: "error",
bg: "muted",
},
table: {
width: "100%",
borderCollapse: "collapse",
borderSpacing: 0,
"td, th": {
textAlign: "left",
borderColor: "muted",
borderBottomStyle: "solid",
},
td: {
p: "24px",
},
"thead tr": {
bg: "grey02",
borderRadius: "4px",
th: {
p: "12px 24px",
},
"th:first-of-type": {
borderBottomLeftRadius: "4px",
borderTopLeftRadius: "4px",
},
"th:last-of-type": {
borderBottomRightRadius: "4px",
borderTopRightRadius: "4px",
},
},
"tbody tr": {
cursor: "pointer",
transition: "all 150ms cubic-bezier(0.215,0.60,0.355,1)",
"&:hover": {
bg: "grey01",
},
},
},
th: {
verticalAlign: "bottom",
borderBottomWidth: "2px",
},
td: {
verticalAlign: "top",
borderBottomWidth: "1px",
},
hr: {
border: 0,
borderBottom: "1px solid",
borderColor: "code.border",
},
img: {
maxWidth: "100%",
},
},
alerts: {
primary: {
color: "background",
bg: "primary",
},
muted: {
color: "text",
bg: "muted",
},
},
} as Theme)
