Theming
ion is designed to be customized to fit your brand. Using CSS variables, you can easily change the look and feel of ion to match your brand. The ion library is best served with our codegen, if you're interested, check us out here (opens in a new tab). If You prefer to install the code manually, copy the files below.
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
body {
background: var(--background);
color: var(--foreground);
}
:root {
--shadow-low: 0px 1px 8px 0px var(--shadow-weak);
--shadow-medium: 0px 4px 20px 0px var(--shadow-weak);
--shadow-high: 0px 1px 8px 0px var(--shadow), 0px 16px 40px 0px var(--shadow-strong);
--background: #ffffff;
--disabled: #eff1f4;
--overlay: rgba(38, 38, 38, 0.75);
--container: #f8f9fc;
--container-high: #eff1f4;
--foreground: #0b0707;
--secondary: #384355;
--subtle: #60718f;
--on-disabled: #b1bacb;
--stroke: #d2d7e1;
--stroke-strong: #b1bacb;
--stroke-subtle: #dee2e9;
--stroke-disabled: #eff1f4;
--stroke-inverse: #7b8ba7;
--primary-accent: #fff7ff;
--primary-container: #f8edff;
--stroke-primary: #d9b9ff;
--primary: #9b45ff;
--on-primary: #ffffff;
--on-primary-container: #8400f1;
--primary-strong: #d8b8ff;
--primary-hover: #8400f1;
--on-primary-hover: #ffffff;
--neutral-accent: #f8f9fc;
--neutral-container: #eff1f4;
--neutral-stroke: #9ba8bd;
--neutral: #4c5971;
--on-neutral: #ffffff;
--on-neutral-container: #1e242e;
--neutral-hover: #140d0d;
--on-neutral-hover: #eff1f4;
--neutral-pressed: #000000;
--on-neutral-pressed: #ffffff;
--success-accent: #e8fff0;
--success-container: #bdffdd;
--stroke-success: #00a575;
--success: #006c4c;
--on-success: #ffffff;
--on-success-container: #003826;
--success-strong: #25c28d;
--success-hover: #005138;
--on-success-hover: #ffffff;
--success-pressed: #00452f;
--on-success-pressed: #ffffff;
--warning-accent: #fff9ea;
--warning-container: #fff2ab;
--stroke-warning: #a39100;
--warning: #6a5f00;
--on-warning: #ffffff;
--on-warning-container: #373100;
--warning-status: #c0ac00;
--warning-hover: #504700;
--on-warning-hover: #ffffff;
--warning-pressed: #443c00;
--on-warning-pressed: #ffffff;
--danger-accent: #fff8f7;
--danger-container: #ffedeb;
--stroke-danger: #ff5451;
--danger: #b91a24;
--on-danger: #ffffff;
--on-danger-container: #68000a;
--danger-strong: #ff5451;
--danger-hover: #930013;
--on-danger-hover: #ffffff;
--danger-pressed: #7d000f;
--on-danger-pressed: #ffffff;
--info-accent: #f9f9ff;
--info-container: #ecf0ff;
--stroke-info: #6590de;
--info: #2d5da7;
--on-info: #ffffff;
--on-info-container: #002f66;
--info-strong: #6590de;
--info-hover: #07458e;
--on-info-hover: #ffffff;
--info-pressed: #003a7b;
--on-info-pressed: #ffffff;
--shadow-weak: rgba(0, 0, 0, 0.10000000149011612);
--shadow: rgba(17, 17, 17, 0.10000000149011612);
--shadow-strong: rgba(17, 17, 17, 0.15000000596046448);
--radius-xs: 6px;
--radius-sm: 8px;
--radius: 10px;
--radius-md: 12px;
--radius-lg: 16px;
}
.dark {
--background: #000000;
--disabled: #161a21;
--overlay: rgba(11, 7, 7, 0.5);
--container: #1e242e;
--container-high: #272e3a;
--foreground: #fbfcff;
--secondary: #9ba8bd;
--subtle: #60718f;
--on-disabled: #384355;
--stroke: #303847;
--stroke-strong: #384355;
--stroke-subtle: #272e3a;
--stroke-disabled: #161a21;
--stroke-inverse: #384355;
--primary-accent: #fff7ff;
--primary-container: #f8edff;
--stroke-primary: #d9b9ff;
--primary: #9b45ff;
--on-primary: #ffffff;
--on-primary-container: #8400f1;
--primary-strong: #d8b8ff;
--primary-hover: #8400f1;
--on-primary-hover: #ffffff;
--neutral-accent: #140e0e;
--neutral-container: #1e242e;
--neutral-stroke: #4c5971;
--neutral: #4c5971;
--on-neutral: #ffffff;
--on-neutral-container: #d2d7e1;
--neutral-hover: #dee2e9;
--on-neutral-hover: #140d0d;
--neutral-pressed: #bcc5d3;
--on-neutral-pressed: #000000;
--success-accent: #00150c;
--success-container: #002c1d;
--stroke-success: #006c4c;
--success: #00a575;
--on-success: #ffffff;
--on-success-container: #4edea7;
--success-strong: #005138;
--success-hover: #005138;
--on-success-hover: #ffffff;
--success-pressed: #00452f;
--on-success-pressed: #ffffff;
--warning-accent: #141100;
--warning-container: #2c2600;
--stroke-warning: #6a5f00;
--warning: #867800;
--on-warning: #ffffff;
--on-warning-container: #dec800;
--warning-status: #504700;
--warning-hover: #504700;
--on-warning-hover: #ffffff;
--warning-pressed: #443c00;
--on-warning-pressed: #ffffff;
--danger-accent: #2d0002;
--danger-container: #540007;
--stroke-danger: #b91a24;
--danger: #ff5451;
--on-danger: #ffffff;
--on-danger-container: #ffb3ad;
--danger-strong: #b91a24;
--danger-hover: #930013;
--on-danger-hover: #ffffff;
--danger-pressed: #7d000f;
--on-danger-pressed: #ffffff;
--info-accent: #00102c;
--info-container: #002453;
--stroke-info: #2d5da7;
--info: #6590de;
--on-info: #ffffff;
--on-info-container: #f9f9ff;
--info-strong: #2d5da7;
--info-hover: #07458e;
--on-info-hover: #ffffff;
--info-pressed: #003a7b;
--on-info-pressed: #ffffff;
--shadow-weak: rgba(255, 255, 255, 0.20000000298023224);
--shadow: rgba(238, 238, 238, 0.20000000298023224);
--shadow-strong: rgba(238, 238, 238, 0.25);
}
}
@layer components {
.primary-focus {
outline: none;
box-shadow: 0px 0px 0px 3px var(--primary-container);
}
.neutral-focus {
outline: none;
box-shadow: 0px 0px 0px 3px var(--neutral-container);
}
.danger-focus {
outline: none;
box-shadow: 0px 0px 0px 3px var(--danger-container);
}
}
tailwind.config.js
export default {
darkMode: ['class'],
content: [
'./src/**/*.{js,ts,jsx,tsx}',
],
theme: {
screens: {
xs: '320px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
extend: {
fontFamily: {
headers: ['var(--font-montserrat)'],
sans: ['var(--font-geist-sans)', 'ui-sans-serif'],
},
colors: {
background: 'var(--background)',
disabled: 'var(--disabled)',
overlay: 'var(--overlay)',
container: {
DEFAULT: 'var(--container)',
high: 'var(--container-high)',
},
inverse: {
DEFAULT: 'var(--inverse)',
},
on: {
inverse: 'var(--on-inverse)',
disabled: 'var(--on-disabled)',
primary: 'var(--on-primary)',
'primary-container': 'var(--on-primary-container)',
'primary-hover': 'var(--on-primary-hover)',
'primary-pressed': 'var(--on-primary-pressed)',
neutral: 'var(--on-neutral)',
'neutral-container': 'var(--on-neutral-container)',
'neutral-hover': 'var(--on-neutral-hover)',
'neutral-pressed': 'var(--on-neutral-pressed)',
success: 'var(--on-success)',
'success-container': 'var(--on-success-container)',
'success-hover': 'var(--on-success-hover)',
'success-pressed': 'var(--on-success-pressed)',
warning: 'var(--on-warning)',
'warning-container': 'var(--on-warning-container)',
'warning-hover': 'var(--on-warning-hover)',
'warning-pressed': 'var(--on-warning-pressed)',
danger: 'var(--on-danger)',
'danger-container': 'var(--on-danger-container)',
'danger-hover': 'var(--on-danger-hover)',
'danger-pressed': 'var(--on-danger-pressed)',
info: 'var(--on-info)',
'info-container': 'var(--on-info-container)',
'info-hover': 'var(--on-info-hover)',
'info-pressed': 'var(--on-info-pressed)',
},
foreground: 'var(--foreground)',
secondary: 'var(--secondary)',
subtle: 'var(--subtle)',
stroke: {
DEFAULT: 'var(--stroke)',
strong: 'var(--stroke-strong)',
subtle: 'var(--stroke-subtle)',
disabled: 'var(--stroke-disabled)',
inverse: 'var(--stroke-inverse)',
primary: 'var(--stroke-primary)',
success: 'var(--stroke-success)',
warning: 'var(--stroke-warning)',
danger: 'var(--stroke-danger)',
info: 'var(--stroke-info)',
},
primary: {
accent: 'var(--primary-accent)',
container: 'var(--primary-container)',
DEFAULT: 'var(--primary)',
strong: 'var(--primary-strong)',
hover: 'var(--primary-hover)',
pressed: 'var(--primary-pressed)',
},
neutral: {
accent: 'var(--neutral-accent)',
container: 'var(--neutral-container)',
stroke: 'var(--neutral-stroke)',
DEFAULT: 'var(--neutral)',
hover: 'var(--neutral-hover)',
pressed: 'var(--neutral-pressed)',
},
success: {
accent: 'var(--success-accent)',
container: 'var(--success-container)',
DEFAULT: 'var(--success)',
strong: 'var(--success-strong)',
hover: 'var(--success-hover)',
pressed: 'var(--success-pressed)',
},
warning: {
accent: 'var(--warning-accent)',
container: 'var(--warning-container)',
DEFAULT: 'var(--warning)',
status: 'var(--warning-status)',
hover: 'var(--warning-hover)',
pressed: 'var(--warning-pressed)',
},
danger: {
accent: 'var(--danger-accent)',
container: 'var(--danger-container)',
DEFAULT: 'var(--danger)',
strong: 'var(--danger-strong)',
hover: 'var(--danger-hover)',
pressed: 'var(--danger-pressed)',
},
info: {
accent: 'var(--info-accent)',
container: 'var(--info-container)',
DEFAULT: 'var(--info)',
strong: 'var(--info-strong)',
hover: 'var(--info-hover)',
pressed: 'var(--info-pressed)',
},
shadow: {
weak: 'var(--shadow-weak)',
DEFAULT: 'var(--shadow)',
strong: 'var(--shadow-strong)',
},
tremor: {
brand: {
faint: 'var(--primary-accent)',
muted: 'var(--primary-container)',
subtle: 'var(--primary-stroke)',
DEFAULT: 'var(--primary)',
emphasis: 'var(--primary-pressed)',
inverted: 'var(--on-primary)',
},
background: {
muted: 'var(--disabled)',
subtle: 'var(--container)',
DEFAULT: 'var(--background)',
emphasis: 'var(--container-high)',
},
border: {
DEFAULT: 'var(--stroke)',
},
ring: {
DEFAULT: 'var(--primary)',
},
content: {
subtle: 'var(--on-disabled)',
DEFAULT: 'var(--subtle)',
emphasis: 'var(--secondary)',
strong: 'var(--foreground)',
inverted: 'var(--background)',
},
},
},
borderRadius: {
'radius-xs': 'var(--radius-xs)',
'radius-sm': 'var(--radius-sm)',
radius: 'var(--radius)',
'radius-md': 'var(--radius-md)',
'radius-lg': 'var(--radius-lg)',
},
keyframes: {
'accordion-down': {
from: {
height: '0',
},
to: {
height: 'var(--radix-accordion-content-height)',
},
},
'accordion-up': {
from: {
height: 'var(--radix-accordion-content-height)',
},
to: {
height: '0',
},
},
},
animation: {
'accordion-down': 'accordion-down 0.2s ease-out',
'accordion-up': 'accordion-up 0.2s ease-out',
},
fontSize: {
'tremor-label': [
'0.75rem',
{
lineHeight: '1rem',
},
],
'tremor-default': [
'0.875rem',
{
lineHeight: '1.25rem',
},
],
'tremor-title': [
'1.125rem',
{
lineHeight: '1.75rem',
},
],
'tremor-metric': [
'1.875rem',
{
lineHeight: '2.25rem',
},
],
},
boxShadow: {
low: '0px 1px 8px 0px var(--shadow-weak)',
medium: '0px 4px 20px 0px var(--shadow-weak)',
high: '0px 1px 8px 0px var(--shadow), 0px 16px 40px 0px var(--shadow-strong)',
},
},
},
plugins: [require('tailwindcss-animate')],
safelist: [
{
pattern:
/^(?:bg|bg-on|text|text-on|border|border-on|fill|ring)-(?:primary|neutral|danger)(?:|-sub|-container|-accent|-pressed|-hover)$/,
variants: ['hover', 'ui-selected', 'active'],
},
{
pattern:
/^(bg-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
variants: ['hover', 'ui-selected'],
},
{
pattern:
/^(text-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
variants: ['hover', 'ui-selected'],
},
{
pattern:
/^(border-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
variants: ['hover', 'ui-selected'],
},
{
pattern:
/^(ring-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
},
{
pattern:
/^(stroke-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
},
{
pattern:
/^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
},
{
pattern:
/^(?:bg|bg-on|text|text-on|border|border-on|fill|ring)-(?:primary|neutral|danger)(?:|-sub|-container|-accent|-pressed|-hover)$/,
variants: ['hover', 'ui-selected', 'active'],
},
],
};