From 05f655f72c1ccf2c1fa4ec9d838c60bda4e8dcd2 Mon Sep 17 00:00:00 2001 From: Biya Paul <77636493+bpsmartdesign@users.noreply.github.com> Date: Sun, 23 Jul 2023 23:12:47 +0100 Subject: [PATCH] feat: create paragraph plugin component (#13) Co-authored-by: Sacha Stafyniak --- README.md | 25 ++++++ src/plugins/components/index.ts | 2 + src/plugins/components/paragraph.ts | 130 ++++++++++++++++++++++++++++ 3 files changed, 157 insertions(+) create mode 100644 src/plugins/components/paragraph.ts diff --git a/README.md b/README.md index 72b1fee..30bd906 100644 --- a/README.md +++ b/README.md @@ -1595,6 +1595,31 @@ export default withShurikenUI({ text: 'primary-800', textDark: 'primary-200', }, + paragraph: { + textXS: 'xs', + textSM: 'sm', + textMD: 'base', + textLG: 'lg', + textXL: 'xl', + text2XL: '2xl', + text3XL: '3xl', + text4XL: '4xl', + text5XL: '5xl', + text6XL: '6xl', + text7XL: '7xl', + text8XL: '8xl', + text9XL: '9xl', + textLight: 'light', + textNormal: 'normal', + textMedium: 'medium', + textSemibold: 'semibold', + textBold: 'bold', + textExtrabold: 'extrabold', + textLeadNone: 'none', + textLeadNormal: 'normal', + textLeadTight: 'tight', + textLeadSnug: 'snug', + textLeadLoose: 'loose', placeholderPage: { minSize: '[400px]', innerSize: 'full', diff --git a/src/plugins/components/index.ts b/src/plugins/components/index.ts index 495103d..ca45112 100644 --- a/src/plugins/components/index.ts +++ b/src/plugins/components/index.ts @@ -20,6 +20,7 @@ import link from './link' import listbox from './listbox' import mark from './mark' import mask from './mask' +import paragraph from './paragraph' import message from './message' import placeload from './placeload' import snack from './snack' @@ -55,6 +56,7 @@ const components = [ listbox, mark, mask, + paragraph, message, placeload, placeholderPage, diff --git a/src/plugins/components/paragraph.ts b/src/plugins/components/paragraph.ts new file mode 100644 index 0000000..23a4f0c --- /dev/null +++ b/src/plugins/components/paragraph.ts @@ -0,0 +1,130 @@ +import plugin from 'tailwindcss/plugin' +import { defu } from 'defu' +import { type PluginOption, defaultPluginOptions } from '../options' + +const defaultParagraphConfig = { + textXS: 'xs', + textSM: 'sm', + textMD: 'base', + textLG: 'lg', + textXL: 'xl', + text2XL: '2xl', + text3XL: '3xl', + text4XL: '4xl', + text5XL: '5xl', + text6XL: '6xl', + text7XL: '7xl', + text8XL: '8xl', + text9XL: '9xl', + textLight: 'light', + textNormal: 'normal', + textMedium: 'medium', + textSemibold: 'semibold', + textBold: 'bold', + textExtrabold: 'extrabold', + textLeadNone: 'none', + textLeadNormal: 'normal', + textLeadTight: 'tight', + textLeadSnug: 'snug', + textLeadLoose: 'loose', +} + +export default plugin.withOptions( + function (options: PluginOption) { + const { prefix } = defu(options, defaultPluginOptions) + + return function ({ addComponents, theme }) { + const config = theme( + 'shurikenUi.paragraph' + ) satisfies typeof defaultParagraphConfig + + addComponents({ + [`.${prefix}-paragraph`]: { + [`@apply font-sans`]: {}, + + [`&.${prefix}-paragraph-xs`]: { + [`@apply text-${config.textXS}`]: {}, + }, + [`&.${prefix}-paragraph-sm`]: { + [`@apply text-${config.textSM}`]: {}, + }, + [`&.${prefix}-paragraph-md`]: { + [`@apply text-${config.textMD}`]: {}, + }, + [`&.${prefix}-paragraph-lg`]: { + [`@apply text-${config.textLG}`]: {}, + }, + [`&.${prefix}-paragraph-xl`]: { + [`@apply text-${config.textXL}`]: {}, + }, + [`&.${prefix}-paragraph-2xl`]: { + [`@apply text-${config.text2XL}`]: {}, + }, + [`&.${prefix}-paragraph-3xl`]: { + [`@apply text-${config.text3XL}`]: {}, + }, + [`&.${prefix}-paragraph-4xl`]: { + [`@apply text-${config.text4XL}`]: {}, + }, + [`&.${prefix}-paragraph-5xl`]: { + [`@apply text-${config.text5XL}`]: {}, + }, + [`&.${prefix}-paragraph-6xl`]: { + [`@apply text-${config.text6XL}`]: {}, + }, + [`&.${prefix}-paragraph-7xl`]: { + [`@apply text-${config.text7XL}`]: {}, + }, + [`&.${prefix}-paragraph-8xl`]: { + [`@apply text-${config.text8XL}`]: {}, + }, + [`&.${prefix}-paragraph-9xl`]: { + [`@apply text-${config.text9XL}`]: {}, + }, + [`&.${prefix}-weight-light`]: { + [`@apply font-${config.textLight}`]: {}, + }, + [`&.${prefix}-weight-normal`]: { + [`@apply font-${config.textNormal}`]: {}, + }, + [`&.${prefix}-weight-medium`]: { + [`@apply font-${config.textMedium}`]: {}, + }, + [`&.${prefix}-weight-semibold`]: { + [`@apply font-${config.textSemibold}`]: {}, + }, + [`&.${prefix}-weight-bold`]: { + [`@apply font-${config.textBold}`]: {}, + }, + [`&.${prefix}-weight-extrabold`]: { + [`@apply font-${config.textExtrabold}`]: {}, + }, + [`&.${prefix}-lead-none`]: { + [`@apply leading-${config.textLeadNone}`]: {}, + }, + [`&.${prefix}-lead-normal`]: { + [`@apply leading-${config.textLeadNormal}`]: {}, + }, + [`&.${prefix}-lead-tight`]: { + [`@apply leading-${config.textLeadTight}`]: {}, + }, + [`&.${prefix}-lead-snug`]: { + [`@apply leading-${config.textLeadSnug}`]: {}, + }, + [`&.${prefix}-lead-loose`]: { + [`@apply leading-${config.textLeadLoose}`]: {}, + }, + }, + }) + } + }, + function () { + return { + theme: { + shurikenUi: { + paragraph: defaultParagraphConfig, + }, + }, + } + } +)