wires/hypnagaga_old
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

tailwind: route to design tokens changed, new breakpoints

Browse source
This commit is contained in:
madrilene 2024-01-30 18:32:14 +01:00
parent 329c7bb20a
commit 6a1a0c8789
1 changed files with 14 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

26
tailwind.config.js
View file

@ -4,14 +4,14 @@ const plugin = require('tailwindcss/plugin');
const postcss = require('postcss'); const postcss = require('postcss');
const postcssJs = require('postcss-js'); const postcssJs = require('postcss-js');
const clampGenerator = require('./src/assets/css-utils/clamp-generator.js'); const clampGenerator = require('./src/utilities/clamp-generator.js');
const tokensToTailwind = require('./src/assets/css-utils/tokens-to-tailwind.js'); const tokensToTailwind = require('./src/utilities/tokens-to-tailwind.js');
// Raw design tokens // Raw design tokens
const colorTokens = require('./src/assets/design-tokens/colors.json'); const colorTokens = require('./src/_data/designTokens/colors.json');
const fontTokens = require('./src/assets/design-tokens/fonts.json'); const fontTokens = require('./src/_data/designTokens/fonts.json');
const spacingTokens = require('./src/assets/design-tokens/spacing.json'); const spacingTokens = require('./src/_data/designTokens/spacing.json');
const textSizeTokens = require('./src/assets/design-tokens/text-sizes.json'); const textSizeTokens = require('./src/_data/designTokens/sizes.json');
// Process design tokens // Process design tokens
const colors = tokensToTailwind(colorTokens.items); const colors = tokensToTailwind(colorTokens.items);
@ -20,21 +20,23 @@ const fontSize = tokensToTailwind(clampGenerator(textSizeTokens.items));
const spacing = tokensToTailwind(clampGenerator(spacingTokens.items)); const spacing = tokensToTailwind(clampGenerator(spacingTokens.items));
module.exports = { module.exports = {
content: ['./src/**/*.{html,js,md,njk,liquid,twig,webc}'], content: ['./src/**/*.{html,js,md,njk,liquid,webc}'],
presets: [], presets: [],
theme: { theme: {
screens: { screens: {
md: '50em', sm: '40em',
lg: '80em' md: '63em',
lg: '80em',
xl: '100em'
}, },
colors, colors,
spacing, spacing,
fontSize, fontSize,
fontFamily, fontFamily,
fontWeight: { fontWeight: {
normal: 400, normal: 500,
bold: 700, semi: 600,
black: 800 bold: 800
}, },
backgroundColor: ({theme}) => theme('colors'), backgroundColor: ({theme}) => theme('colors'),
textColor: ({theme}) => theme('colors'), textColor: ({theme}) => theme('colors'),