123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209 |
- const plugin = require('tailwindcss/plugin');
- const vanillaRTL = require('tailwindcss-vanilla-rtl');
- const { staticColors, transparencies } = require('./src/tokens/colors');
- const {
- generateColorVariables,
- generateThemeColorVariables,
- } = require('./src/tokens/colorVariables');
- const colorThemes = require('./src/tokens/colorThemes');
- const {
- fontFamily,
- fontSize,
- fontWeight,
- letterSpacing,
- lineHeight,
- listStyleType,
- typeScale,
- } = require('./src/tokens/typography');
- const { breakpoints } = require('./src/tokens/breakpoints');
- const {
- borderRadius,
- borderWidth,
- boxShadow,
- } = require('./src/tokens/objectStyles');
- const { spacing } = require('./src/tokens/spacing');
- const scrollbarThin = require('./src/plugins/scrollbarThin');
- const themeColors = Object.fromEntries(
- Object.entries(staticColors).map(([key, hues]) => {
- const shades = Object.fromEntries(
- Object.entries(hues).map(([k, shade]) => [
- k,
- `var(${shade.cssVariable})`,
- ]),
- );
- return [key, shades];
- }),
- );
- const lightThemeColors = colorThemes.light.reduce((colorTokens, category) => {
- Object.entries(category.tokens).forEach(([name, token]) => {
-
- colorTokens[name] = `var(${token.cssVariable})`;
- });
- return colorTokens;
- }, {});
- module.exports = {
- prefix: 'w-',
- theme: {
- screens: {
- ...breakpoints,
- },
- colors: {
- ...themeColors,
- ...lightThemeColors,
- 'white-10': 'var(--w-color-white-10)',
- 'white-15': 'var(--w-color-white-15)',
- 'white-50': 'var(--w-color-white-50)',
- 'white-80': 'var(--w-color-white-80)',
- 'black-5': 'var(--w-color-black-5)',
- 'black-10': 'var(--w-color-black-10)',
- 'black-20': 'var(--w-color-black-20)',
- 'black-25': 'var(--w-color-black-25)',
- 'black-35': 'var(--w-color-black-35)',
- 'black-50': 'var(--w-color-black-50)',
-
- 'inherit': 'inherit',
- 'current': 'currentColor',
- 'transparent': 'transparent',
-
- 'LinkText': 'LinkText',
- 'ButtonText': 'ButtonText',
- },
- fontFamily: {
- sans: 'var(--w-font-sans)',
- mono: 'var(--w-font-mono)',
- },
- fontSize,
- fontWeight,
- lineHeight,
- listStyleType,
- letterSpacing,
- borderRadius,
- borderWidth,
- boxShadow: {
- ...boxShadow,
- none: 'none',
- },
- spacing: {
- ...spacing,
- 'slim-header': '50px',
- },
- extend: {
- outlineOffset: {
- inside: '-3px',
- },
- transitionProperty: {
- sidebar:
- 'inset-inline-start, padding-inline-start, width, transform, margin-top, min-height',
- },
- zIndex: {
- 'header': '100',
- 'sidebar': '110',
- 'sidebar-toggle': '120',
- 'dialog': '130',
- },
- keyframes: {
- 'fade-in': {
- '0%': { opacity: 0 },
- '100%': { opacity: 1 },
- },
- },
- animation: {
- 'fade-in': 'fade-in 150ms both',
- },
- },
- },
- plugins: [
- typeScale,
- vanillaRTL,
- scrollbarThin,
-
- plugin(({ addVariant }) => {
- addVariant('forced-colors', '@media (forced-colors: active)');
- }),
-
- plugin(({ addComponents, theme }) => {
- const scale = {};
- Object.entries(typeScale).forEach(([name, styles]) => {
- scale[`.${name.replace('w-', '')}`] = Object.fromEntries(
- Object.entries(styles).map(([key, value]) => [key, theme(value)]),
- );
- });
- addComponents(scale);
- }),
-
- plugin(({ addBase }) => {
- addBase({
-
- ':root, :host': {
- '--w-font-sans': fontFamily.sans.join(', '),
- '--w-font-mono': fontFamily.mono.join(', '),
- '--w-density-factor': '1',
- ...transparencies,
- ...generateColorVariables(staticColors),
- ...generateThemeColorVariables(colorThemes.light),
- 'color-scheme': 'light',
- },
- '.w-theme-system': {
- '@media (prefers-color-scheme: dark)': {
- ...generateThemeColorVariables(colorThemes.dark),
- 'color-scheme': 'dark',
- },
- },
- '.w-theme-dark': {
- ...generateThemeColorVariables(colorThemes.dark),
- 'color-scheme': 'dark',
- },
- '.w-density-snug': {
- '--w-density-factor': '0.5',
- },
- });
- }),
-
- plugin(({ addVariant }) => {
- addVariant('expanded', '&[aria-expanded=true]');
- }),
- ],
- corePlugins: {
- ...vanillaRTL.disabledCorePlugins,
-
- float: false,
- clear: false,
-
- textTransform: false,
- },
- variants: {
- extend: {
- backgroundColor: ['forced-colors'],
- width: ['forced-colors'],
- height: ['forced-colors'],
- },
- },
- };
|