From ef401c0ce00c13df9d8b9816bfe3a6f379ae2f1b Mon Sep 17 00:00:00 2001 From: Rucha Mahabal Date: Thu, 21 May 2026 19:16:00 +0530 Subject: [PATCH] feat: export tailwindconfig tokens --- package.json | 5 +- tailwind/plugin.js | 156 ++------------------------------------------- tailwind/tokens.js | 45 +++++++++++++ 3 files changed, 53 insertions(+), 153 deletions(-) create mode 100644 tailwind/tokens.js diff --git a/package.json b/package.json index 3ab2aaa33..bbc166f59 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,9 @@ "import": "./tailwind/index.js", "default": "./tailwind/index.js" }, + "./tailwind/tokens.js": { + "import": "./tailwind/tokens.js" + }, "./vite": { "import": "./vite/index.js" }, @@ -182,4 +185,4 @@ "lint-staged": { "*.{js,css,md,vue}": "prettier --write" } -} +} \ No newline at end of file diff --git a/tailwind/plugin.js b/tailwind/plugin.js index cdfe8c1be..7ccc472a8 100644 --- a/tailwind/plugin.js +++ b/tailwind/plugin.js @@ -4,6 +4,7 @@ import { generateSemanticColors, generateCSSVariables, } from './colorPalette.js' +import { borderRadius, boxShadow, fontSize } from './tokens.js' let colorPalette = generateColorPalette() let semanticColors = generateSemanticColors() @@ -52,163 +53,14 @@ export default plugin( { theme: { colors: colorPalette, - borderRadius: { - none: '0px', // 0 - sm: '0.25rem', // 4px - DEFAULT: '0.5rem', // 8px - md: '0.625rem', // 10px - lg: '0.75rem', // 12px - xl: '1rem', // 16px - '2xl': '1.25rem', // 20px - full: '9999px', // 9999px - }, - boxShadow: { - sm: '0px 1px 2px rgba(0, 0, 0, 0.1)', - DEFAULT: - '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)', - md: '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)', - lg: '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)', - xl: '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)', - '2xl': - '0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 24px -3px rgba(0, 0, 0, 0.1)', - none: 'none', - }, + borderRadius: borderRadius, + boxShadow: boxShadow, container: { padding: { xl: '5rem', }, }, - fontSize: { - '2xs': [ - '11px', - { - lineHeight: '1.15', - letterSpacing: '0.01em', - fontWeight: '420', - }, - ], - xs: [ - '12px', - { - lineHeight: '1.15', - letterSpacing: '0.02em', - fontWeight: '420', - }, - ], - sm: [ - '13px', - { - lineHeight: '1.15', - letterSpacing: '0.02em', - fontWeight: '420', - }, - ], - base: [ - '14px', - { - lineHeight: '1.15', - letterSpacing: '0.02em', - fontWeight: '420', - }, - ], - lg: [ - '16px', - { - lineHeight: '1.15', - letterSpacing: '0.02em', - fontWeight: '400', - }, - ], - xl: [ - '18px', - { - lineHeight: '1.15', - letterSpacing: '0.01em', - fontWeight: '400', - }, - ], - '2xl': [ - '20px', - { - lineHeight: '1.15', - letterSpacing: '0.01em', - fontWeight: '400', - }, - ], - '3xl': [ - '24px', - { - lineHeight: '1.15', - fontWeight: 400, - letterSpacing: '0.005em', - }, - ], - // font size for paragraphs - 'p-2xs': [ - '11px', - { - lineHeight: '1.6', - letterSpacing: '0.01em', - fontWeight: '420', - }, - ], - 'p-xs': [ - '12px', - { - lineHeight: '1.6', - letterSpacing: '0.02em', - fontWeight: '420', - }, - ], - 'p-sm': [ - '13px', - { - lineHeight: '1.5', - letterSpacing: '0.02em', - fontWeight: '420', - }, - ], - 'p-base': [ - '14px', - { - lineHeight: '1.5', - letterSpacing: '0.02em', - fontWeight: '420', - }, - ], - 'p-lg': [ - '16px', - { - lineHeight: '1.5', - letterSpacing: '0.02em', - fontWeight: '400', - }, - ], - 'p-xl': [ - '18px', - { - lineHeight: '1.42', - letterSpacing: '0.01em', - fontWeight: '400', - }, - ], - 'p-2xl': [ - '20px', - { - lineHeight: '1.38', - letterSpacing: '0.01em', - fontWeight: '400', - }, - ], - 'p-3xl': [ - '24px', - { - lineHeight: '1.2', - fontWeight: 400, - letterSpacing: '0.005em', - }, - ], - }, + fontSize: fontSize, screens: { sm: '640px', md: '768px', diff --git a/tailwind/tokens.js b/tailwind/tokens.js new file mode 100644 index 000000000..97b0c7420 --- /dev/null +++ b/tailwind/tokens.js @@ -0,0 +1,45 @@ +const borderRadius = { + none: '0px', // 0 + sm: '0.25rem', // 4px + DEFAULT: '0.5rem', // 8px + md: '0.625rem', // 10px + lg: '0.75rem', // 12px + xl: '1rem', // 16px + '2xl': '1.25rem', // 20px + full: '9999px', // 9999px +} + +const boxShadow = { + sm: '0px 1px 2px rgba(0, 0, 0, 0.1)', + DEFAULT: + '0px 0px 1px rgba(0, 0, 0, 0.45), 0px 1px 2px rgba(0, 0, 0, 0.1)', + md: '0px 0px 1px rgba(0, 0, 0, 0.12), 0px 0.5px 2px rgba(0, 0, 0, 0.15), 0px 2px 3px rgba(0, 0, 0, 0.16)', + lg: '0px 0px 1px rgba(0, 0, 0, 0.35), 0px 6px 8px -4px rgba(0, 0, 0, 0.1)', + xl: '0px 0px 1px rgba(0, 0, 0, 0.19), 0px 1px 2px rgba(0, 0, 0, 0.07), 0px 6px 15px -5px rgba(0, 0, 0, 0.11)', + '2xl': + '0px 0px 1px rgba(0, 0, 0, 0.2), 0px 1px 3px rgba(0, 0, 0, 0.05), 0px 10px 24px -3px rgba(0, 0, 0, 0.1)', + none: 'none', +} + +const fontSize = { + '2xs': ['11px', { lineHeight: '1.15', letterSpacing: '0.01em', fontWeight: '420' }], + xs: ['12px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '420' }], + sm: ['13px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '420' }], + base: ['14px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '420' }], + lg: ['16px', { lineHeight: '1.15', letterSpacing: '0.02em', fontWeight: '400' }], + xl: ['18px', { lineHeight: '1.15', letterSpacing: '0.01em', fontWeight: '400' }], + '2xl': ['20px', { lineHeight: '1.15', letterSpacing: '0.01em', fontWeight: '400' }], + '3xl': ['24px', { lineHeight: '1.15', fontWeight: 400, letterSpacing: '0.005em' }], + // font size for paragraphs + 'p-2xs': ['11px', { lineHeight: '1.6', letterSpacing: '0.01em', fontWeight: '420' }], + 'p-xs': ['12px', { lineHeight: '1.6', letterSpacing: '0.02em', fontWeight: '420' }], + 'p-sm': ['13px', { lineHeight: '1.5', letterSpacing: '0.02em', fontWeight: '420' }], + 'p-base': ['14px', { lineHeight: '1.5', letterSpacing: '0.02em', fontWeight: '420' }], + 'p-lg': ['16px', { lineHeight: '1.5', letterSpacing: '0.02em', fontWeight: '400' }], + 'p-xl': ['18px', { lineHeight: '1.42', letterSpacing: '0.01em', fontWeight: '400' }], + 'p-2xl': ['20px', { lineHeight: '1.38', letterSpacing: '0.01em', fontWeight: '400' }], + 'p-3xl': ['24px', { lineHeight: '1.2', fontWeight: 400, letterSpacing: '0.005em' }], +} + +export { borderRadius, boxShadow, fontSize } +export * from "./colorPalette.js"