@navinc/base-react-components
Version:
Nav's Pattern Library
233 lines • 9.16 kB
JavaScript
import { createThemes } from 'tw-colors';
import { colors } from './base-theme.js';
const primeColors = {
// Prime colors do not change in light or dark mode
prime: colors.primeBlue50,
primeDim: colors.primeBlue25,
onPrime: colors.primeBlue10,
primeContainer: colors.primeBlue0,
onPrimeContainer: colors.primeBlue100,
};
const commonColors = {
inherit: 'inherit',
current: 'currentColor',
transparent: 'transparent',
white: '#ffffff',
neutral10: colors.neutral10,
};
export const themeColors = {
light: Object.assign(Object.assign({}, primeColors), {
// Error
error: colors.red50, onError: colors.red100, errorContainer: colors.red90, onErrorContainer: colors.red40, errorBright: colors.redBright50,
// Warn
warn: colors.yellow50, onWarn: colors.yellow100, warnContainer: colors.yellow90, onWarnContainer: colors.yellow40, warnBright: colors.yellowBright50,
// Success
success: colors.green40, onSuccess: colors.green100, successContainer: colors.green90, onSuccessContainer: colors.green40, successBright: colors.greenBright40,
// Super
super: colors.teal60, onSuper: colors.teal100, superContainer: colors.teal90, onSuperContainer: colors.teal40, superBright: colors.tealBright60,
// Info
info: colors.blue40, onInfo: colors.blue100, infoContainer: colors.blue90, onInfoContainer: colors.blue40, infoBright: colors.blueBright40,
// Primary
primary: colors.purple50, onPrimary: colors.purple100, primaryContainer: colors.purple90, onPrimaryContainer: colors.purple40, inversePrimary: colors.purple80, primaryDim: colors.purple20, primaryBright: colors.purpleBright50,
// Surfaces and backgrounds
background: colors.neutral99, surface: colors.neutral100, surfaceDim: colors.neutral94, surfaceBright: colors.neutral100, surfaceContainer: colors.neutral100, surfaceContainerLow: colors.neutral96, surfaceContainerLowest: colors.neutral94, surfaceContainerHigh: colors.neutral100, surfaceContainerHighest: colors.neutral100, onSurface: colors.neutral10, onSurfaceVariant: colors.neutralVariant40, onSurfaceDim: colors.neutral70, outline: colors.neutralVariant50, outlineVariant: colors.neutral87, inverseSurface: colors.neutral20, inverseOnSurface: colors.neutral95 }),
dark: Object.assign(Object.assign({}, primeColors), {
// Error
error: colors.red80, onError: colors.red20, errorContainer: colors.red40, onErrorContainer: colors.red90, errorBright: colors.redBright80,
// Warn
warn: colors.yellow80, onWarn: colors.yellow20, warnContainer: colors.yellow40, onWarnContainer: colors.yellow90, warnBright: colors.yellowBright80,
// Success
success: colors.green80, onSuccess: colors.green20, successContainer: colors.green30, onSuccessContainer: colors.green90, successBright: colors.greenBright80,
// Super
super: colors.teal80, onSuper: colors.teal20, superContainer: colors.teal50, onSuperContainer: colors.teal90, superBright: colors.tealBright80,
// Info
info: colors.blue80, onInfo: colors.blue20, infoContainer: colors.blue50, onInfoContainer: colors.blue90, infoBright: colors.blueBright80,
// Primary
primary: colors.purple60, onPrimary: colors.purple100, primaryContainer: colors.purple50, onPrimaryContainer: colors.purple90, inversePrimary: colors.purple40, primaryDim: colors.purple80, primaryBright: colors.purpleBright80,
// Surfaces and backgrounds
background: colors.neutral4, surface: colors.neutral6, surfaceDim: colors.neutral12, surfaceBright: colors.neutral24, surfaceContainer: colors.neutral12, surfaceContainerLow: colors.neutral10, surfaceContainerLowest: colors.neutral4, surfaceContainerHigh: colors.neutral17, surfaceContainerHighest: colors.neutral22, onSurface: colors.neutral90, onSurfaceVariant: colors.neutralVariant80, onSurfaceDim: colors.neutral30, outline: colors.neutralVariant60, outlineVariant: colors.neutral30, inverseSurface: colors.neutral90, inverseOnSurface: colors.neutral20 }),
};
export const tailwindColorsPlugin = createThemes(themeColors, {
defaultTheme: 'light',
strict: true,
});
export const tailwindTheme = {
extend: {
opacity: {
4: '0.04',
6: '0.06',
8: '0.08',
},
fontWeight: {
inherit: 'inherit',
},
colors: commonColors,
backgroundImage: {
'primary-linear-gradient': 'linear-gradient(173deg,rgba(206,203,245,0.05) 20.4%, #CECBF5 279.42%)',
},
keyframes: {
fadeIn: {
'0%': { opacity: '0' },
'100%': { opacity: '1' },
},
fadeOut: {
'0%': { opacity: '1' },
'100%': { opacity: '0' },
},
radixAccordionDown: {
'0%': { height: '0' },
'100%': { height: 'var(--radix-accordion-content-height)' },
},
radixAccordionUp: {
'0%': { height: 'var(--radix-accordion-content-height)' },
'100%': { height: '0' },
},
shimmer: {
'0%': {
backgroundPosition: '200% 0',
},
'100%': {
backgroundPosition: '-200% 0',
},
},
drawerIn: {
'0%': { opacity: '0', transform: 'translate(-50%, 40px)' },
'100%': { opacity: '1', transform: 'translate(-50%, 0)' },
},
drawerOut: {
'0%': { opacity: '1', transform: 'translate(-50%, 0)' },
'100%': { opacity: '0', transform: 'translate(-50%, 100%)' },
},
},
animation: {
'drawer-in': 'drawerIn 0.3s ease-in-out',
'drawer-out': 'drawerOut 0.3s ease-in-out',
},
},
colors: {},
spacing: {
auto: 'auto',
0: '0px',
px: '1px',
25: '2px',
50: '4px',
75: '6px',
100: '8px',
// Medium
150: '12px',
200: '16px',
250: '20px',
300: '24px',
350: '28px',
// Large
400: '32px',
500: '40px',
600: '48px',
800: '64px',
1000: '80px',
},
screens: {
sm: '768px',
tablet: '768px',
md: '1024px',
laptop: '1024px',
lg: '1280px',
desktop: '1280px',
},
borderRadius: {
0: '0',
100: '4px',
200: '6px',
300: '8px',
400: '12px',
500: '16px',
600: '20px',
700: '24px',
full: '9999px',
},
boxShadow: {
none: 'none',
elevation1: '0 0 0 1px rgb(0 0 0 / 10%), 0 4px 1px -2px rgb(0 0 0 / 8%)',
elevation2: '0 0 0 1px rgb(0 0 0 / 10%), 0 4px 4px -2px rgb(0 0 0 / 5%), 0 8px 8px -4px rgb(0 0 0 / 5%), 0 16px 16px -8px rgb(0 0 0 / 5%)',
elevation3: '0 0 0 1px rgb(0 0 0 / 10%), 0 8px 8px -4px rgb(0 0 0 / 5%), 0 16px 16px -8px rgb(0 0 0 / 5%), 0 32px 32px -16px rgb(0 0 0 / 5%)',
elevation4: '0 0 0 1px rgb(0 0 0 / 10%), 0 16px 16px -16px rgb(0 0 0 / 5%), 0 32px 32px -16px rgb(0 0 0 / 5%), 0 64px 64px -32px rgb(0 0 0 / 5%)',
buttonActive: '0px 0px 0px 1px rgba(0, 0, 0, 0.30), 0px 4px 1px -2px rgba(0, 0, 0, 0.08)',
},
fontSize: {
display1: [
'45px',
{
lineHeight: '52px',
letterSpacing: '-0.5px',
},
],
display2: [
'36px',
{
lineHeight: '42px',
letterSpacing: '-0.5px',
},
],
title1: [
'28px',
{
lineHeight: '34px',
letterSpacing: '-0.25px',
},
],
title2: [
'22px',
{
lineHeight: '28px',
letterSpacing: '-0.25px',
},
],
title3: [
'20px',
{
lineHeight: '24px',
letterSpacing: '0',
},
],
headline: [
'16px',
{
lineHeight: '22px',
letterSpacing: '0',
},
],
body1: [
'16px',
{
lineHeight: '22px',
letterSpacing: '-0.25px',
},
],
body2: [
'14px',
{
lineHeight: '20px',
letterSpacing: '-0.25px',
},
],
caption1: [
'12px',
{
lineHeight: '16px',
letterSpacing: '0',
},
],
caption2: [
'11px',
{
lineHeight: '13px',
letterSpacing: '0',
},
],
},
fontFamily: {
primary: 'Inter, sans-serif',
secondary: 'Manrope, sans-serif',
},
};
//# sourceMappingURL=tailwind.js.map