@undp/design-system-react
Version:
React based design system for UNDP
300 lines (299 loc) • 11.4 kB
JavaScript
/** @type {import('tailwindcss').Config} */
module.exports = {
darkMode: ['class'],
content: ['./src/**/*.{js,jsx,ts,tsx}', './index.html'],
theme: {
extend: {
backgroundImage: {
'double-primary':
'linear-gradient(var(--primary), var(--primary)), linear-gradient(var(--primary), var(--primary))',
'double-background':
'linear-gradient(var(--background), var(--background)), linear-gradient(var(--background), var(--background))',
'double-foreground':
'linear-gradient(var(--foreground), var(--foreground)), linear-gradient(var(--foreground), var(--foreground))',
'double-secondary':
'linear-gradient(var(--secondary), var(--secondary)), linear-gradient(var(--secondary), var(--secondary))',
'double-tertiary':
'linear-gradient(var(--tertiary), var(--tertiary)), linear-gradient(var(--tertiary), var(--tertiary))',
'double-quaternary':
'linear-gradient(var(--quaternary), var(--quaternary)), linear-gradient(var(--quaternary), var(--quaternary))',
'double-success':
'linear-gradient(var(--success), var(--success)), linear-gradient(var(--success), var(--success))',
'double-warning':
'linear-gradient(var(--warning), var(--warning)), linear-gradient(var(--warning), var(--warning))',
'double-error':
'linear-gradient(var(--error), var(--error)), linear-gradient(var(--error), var(--error))',
'double-info':
'linear-gradient(var(--info), var(--info)), linear-gradient(var(--info), var(--info))',
},
colors: {
foreground: 'var(--foreground)',
background: 'var(--background)',
'foreground-soft': 'var(--foreground-soft)',
'background-soft': 'var(--background-soft)',
ring: 'var(--ring)',
'card-hover-color': 'var(--card-hover-color)',
'footer-background': 'var(--footer-background)',
error: {
DEFAULT: 'var(--error)',
hover: 'var(--error-hover)',
light: 'var(--error-light)',
},
warning: {
DEFAULT: 'var(--warning)',
hover: 'var(--warning-hover)',
light: 'var(--warning-light)',
},
success: {
DEFAULT: 'var(--success)',
hover: 'var(--success-hover)',
light: 'var(--success-light)',
},
info: {
DEFAULT: 'var(--info)',
hover: 'var(--info-hover)',
light: 'var(--info-light)',
},
primary: {
DEFAULT: 'var(--primary)',
hover: 'var(--primary-hover)',
light: 'var(--primary-light)',
},
secondary: {
DEFAULT: 'var(--secondary)',
hover: 'var(--secondary-hover)',
light: 'var(--secondary-light)',
},
tertiary: {
DEFAULT: 'var(--tertiary)',
hover: 'var(--tertiary-hover)',
light: 'var(--tertiary-light)',
},
quaternary: {
DEFAULT: 'var(--quaternary)',
hover: 'var(--quaternary-hover)',
light: 'var(--quaternary-light)',
},
content: {
primary: 'var(--content-primary)',
secondary: 'var(--content-secondary)',
tertiary: 'var(--content-tertiary)',
quaternary: 'var(--content-quaternary)',
disabled: 'var(--content-disabled)',
placeholder: 'var(--content-placeholder)',
reverse: 'var(--content-reverse)',
},
surface: {
DEFAULT: 'var(--surface)',
hover: 'var(--surface-hover)',
hard: 'var(--surface-hard)',
'hard-hover': 'var(--surface-hard-hover)',
background: 'var(--background)',
foreground: 'var(--foreground)',
'2xs': 'var(--surface-2xs)',
xs: 'var(--surface-xs)',
sm: 'var(--surface-sm)',
md: 'var(--surface-md)',
lg: 'var(--surface-lg)',
xl: 'var(--surface-xl)',
'2xl': 'var(--surface-2xl)',
'3xl': 'var(--surface-3xl)',
'4xl': 'var(--surface-4xl)',
},
stroke: {
DEFAULT: 'var(--stroke)',
hover: 'var(--stroke-hover)',
background: 'var(--background)',
foreground: 'var(--foreground)',
'2xs': 'var(--stroke-2xs)',
xs: 'var(--stroke-xs)',
sm: 'var(--stroke-sm)',
md: 'var(--stroke-md)',
lg: 'var(--stroke-lg)',
xl: 'var(--stroke-xl)',
'2xl': 'var(--stroke-2xl)',
'3xl': 'var(--stroke-3xl)',
'4xl': 'var(--stroke-4xl)',
},
blue: {
DEFAULT: 'var(--blue-600)',
100: 'var(--blue-100)',
200: 'var(--blue-200)',
300: 'var(--blue-300)',
400: 'var(--blue-400)',
500: 'var(--blue-500)',
600: 'var(--blue-600)',
700: 'var(--blue-700)',
},
gray: {
100: 'var(--gray-100)',
200: 'var(--gray-200)',
300: 'var(--gray-300)',
400: 'var(--gray-400)',
500: 'var(--gray-500)',
530: 'var(--gray-530)',
560: 'var(--gray-560)',
600: 'var(--gray-600)',
650: 'var(--gray-650)',
700: 'var(--gray-700)',
},
accent: {
yellow: {
DEFAULT: 'var(--yellow-400)',
200: 'var(--yellow-200)',
400: 'var(--yellow-400)',
600: 'var(--yellow-600)',
},
red: {
DEFAULT: 'var(--red-600)',
200: 'var(--red-200)',
400: 'var(--red-400)',
600: 'var(--red-600)',
},
green: {
DEFAULT: 'var(--green-400)',
200: 'var(--green-200)',
400: 'var(--green-400)',
600: 'var(--green-600)',
},
azure: {
DEFAULT: 'var(--azure-400)',
200: 'var(--azure-200)',
400: 'var(--azure-400)',
600: 'var(--azure-600)',
},
},
sdg: {
1: 'var(--sdg-1)',
2: 'var(--sdg-2)',
3: 'var(--sdg-3)',
4: 'var(--sdg-4)',
5: 'var(--sdg-5)',
6: 'var(--sdg-6)',
7: 'var(--sdg-7)',
8: 'var(--sdg-8)',
9: 'var(--sdg-9)',
10: 'var(--sdg-10)',
11: 'var(--sdg-11)',
12: 'var(--sdg-12)',
13: 'var(--sdg-13)',
14: 'var(--sdg-14)',
15: 'var(--sdg-15)',
16: 'var(--sdg-16)',
17: 'var(--sdg-17)',
},
},
fontSize: {
h1: ['var(--text-h1)', { lineHeight: 'var(--leading-h1)' }],
'h1-sm': ['var(--text-h1-sm)', { lineHeight: 'var(--leading-h1)' }],
'h1-xs': ['var(--text-h1-xs)', { lineHeight: 'var(--leading-h1)' }],
h2: ['var(--text-h2)', { lineHeight: 'var(--leading-h2)' }],
'h2-sm': ['var(--text-h2-sm)', { lineHeight: 'var(--leading-h2)' }],
'h2-xs': ['var(--text-h2-xs)', { lineHeight: 'var(--leading-h2)' }],
h3: ['var(--text-h3)', { lineHeight: 'var(--leading-h3)' }],
'h3-sm': ['var(--text-h3-sm)', { lineHeight: 'var(--leading-h3)' }],
'h3-xs': ['var(--text-h3-xs)', { lineHeight: 'var(--leading-h3)' }],
h4: ['var(--text-h4)', { lineHeight: 'var(--leading-h4)' }],
'h4-sm': ['var(--text-h4-sm)', { lineHeight: 'var(--leading-h4)' }],
'h4-xs': ['var(--text-h4-xs)', { lineHeight: 'var(--leading-h4)' }],
h5: ['var(--text-h5)', { lineHeight: 'var(--leading-h5)' }],
'h5-sm': ['var(--text-h5-sm)', { lineHeight: 'var(--leading-h5)' }],
'h5-xs': ['var(--text-h5-xs)', { lineHeight: 'var(--leading-h5)' }],
h6: ['var(--text-h6)', { lineHeight: 'var(--leading-h6)' }],
'h6-sm': ['var(--text-h6-sm)', { lineHeight: 'var(--leading-h6)' }],
'h6-xs': ['var(--text-h6-xs)', { lineHeight: 'var(--leading-h6)' }],
p: ['var(--text-p)', { lineHeight: 'var(--leading-p)' }],
'p-sm': ['var(--text-p-sm)', { lineHeight: 'var(--leading-p)' }],
'p-xs': ['var(--text-p-xs)', { lineHeight: 'var(--leading-p)' }],
'2xl': ['var(--text-2xl)', { lineHeight: 'var(--leading-base)' }],
xl: ['var(--text-xl)', { lineHeight: 'var(--leading-base)' }],
lg: ['var(--text-lg)', { lineHeight: 'var(--leading-base)' }],
base: ['var(--text-base)', { lineHeight: 'var(--leading-base)' }],
sm: ['var(--text-sm)', { lineHeight: 'var(--leading-base)' }],
xs: ['var(--text-xs)', { lineHeight: 'var(--leading-base)' }],
'2xs': ['var(--text-2xs)', { lineHeight: 'var(--leading-base)' }],
},
backdropBlur: {
frosted: 'var(--blur-frosted)',
},
borderRadius: {
DEFAULT: 'var(--rounded-base)',
base: 'var(--rounded-base)',
sm: 'var(--rounded-sm)',
md: 'var(--rounded-md)',
lg: 'var(--rounded-lg)',
xl: 'var(--rounded-xl)',
'2xl': 'var(--rounded-2xl)',
full: '9999px',
},
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',
spin: 'spin 1s linear infinite',
},
fontFamily: {
body: ['var(--font-body)', 'sans-serif'],
'sans-ar': ['Noto Sans Arabic', 'sans-serif'],
'sans-az': ['Noto Sans', 'sans-serif'],
'sans-bn': ['UN Bangla', 'sans-serif'],
'sans-he': ['Noto Sans Hebrew', 'sans-serif'],
'sans-hi': ['Noto Sans Devanagari', 'sans-serif'],
'sans-ja': ['Noto Sans JP', 'sans-serif'],
'sans-ka': ['Noto Sans Georgian', 'sans-serif'],
'sans-km': ['Noto Sans Khmer', 'sans-serif'],
'sans-ko': ['Noto Sans KR', 'sans-serif'],
'sans-my': ['Noto Sans Myanmar', 'sans-serif'],
'sans-ne': ['Noto Sans', 'sans-serif'],
'sans-zh': ['Noto Sans SC', 'sans-serif'],
serif: ['var(--font-serif)', 'serif'],
heading: [
'var(--font-heading)',
'SohneBreit',
'ProximaNova',
'proxima-nova',
'Helvetica Neue',
'Roboto',
'sans-serif',
],
mono: ['monospace'],
},
opacity: {
disabled: 'var(--opacity-disabled)',
frosted: 'var(--opacity-frosted)',
},
boxShadow: { header: '0 3px 6px rgb(0 0 0 / 10%)' },
height: {
header: '7.1875rem',
inherit: 'inherit',
},
lineHeight: {
none: 'var(--leading-none)',
xs: 'var(--leading-xs)',
sm: 'var(--leading-sm)',
base: 'var(--leading-base)',
lg: 'var(--leading-lg)',
xl: 'var(--leading-xl)',
'2xl': 'var(--leading-2xl)',
h1: 'var(--leading-h1)',
h2: 'var(--leading-h2)',
h3: 'var(--leading-h3)',
h4: 'var(--leading-h4)',
h5: 'var(--leading-h5)',
h6: 'var(--leading-h6)',
p: 'var(--leading-p)',
},
textAlign: ['rtl'],
},
},
corePlugins: { preflight: false },
};