feat(Text): config redesign and implementation

shuriken-ui · Dec 8, 2023 · 4c48806 · 4c48806
1 parent fc4c890
commit 4c48806
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 49 deletions.
diff --git a/src/plugins/components/text/index.ts b/src/plugins/components/text/index.ts
@@ -17,78 +17,80 @@ export default plugin.withOptions(
       addComponents({
         [`.${prefix}text`]: {
           [`@apply font-sans`]: {},
-
+          //Size
           [`&.${prefix}content-xs`]: {
-            [`@apply text-${config.textXS}`]: {},
+            [`@apply text-${config.size.xs}`]: {},
           },
           [`&.${prefix}content-sm`]: {
-            [`@apply text-${config.textSM}`]: {},
+            [`@apply text-${config.size.sm}`]: {},
           },
           [`&.${prefix}content-md`]: {
-            [`@apply text-${config.textMD}`]: {},
+            [`@apply text-${config.size.md}`]: {},
           },
           [`&.${prefix}content-lg`]: {
-            [`@apply text-${config.textLG}`]: {},
+            [`@apply text-${config.size.lg}`]: {},
           },
           [`&.${prefix}content-xl`]: {
-            [`@apply text-${config.textXL}`]: {},
+            [`@apply text-${config.size.xl}`]: {},
           },
           [`&.${prefix}content-2xl`]: {
-            [`@apply text-${config.text2XL}`]: {},
+            [`@apply text-${config.size.xxl}`]: {},
           },
           [`&.${prefix}content-3xl`]: {
-            [`@apply text-${config.text3XL}`]: {},
+            [`@apply text-${config.size.xxxl}`]: {},
           },
           [`&.${prefix}content-4xl`]: {
-            [`@apply text-${config.text4XL}`]: {},
+            [`@apply text-${config.size.xxxxl}`]: {},
           },
           [`&.${prefix}content-5xl`]: {
-            [`@apply text-${config.text5XL}`]: {},
+            [`@apply text-${config.size.xxxxxl}`]: {},
           },
           [`&.${prefix}content-6xl`]: {
-            [`@apply text-${config.text6XL}`]: {},
+            [`@apply text-${config.size.xxxxxxl}`]: {},
           },
           [`&.${prefix}content-7xl`]: {
-            [`@apply text-${config.text7XL}`]: {},
+            [`@apply text-${config.size.xxxxxxxl}`]: {},
           },
           [`&.${prefix}content-8xl`]: {
-            [`@apply text-${config.text8XL}`]: {},
+            [`@apply text-${config.size.xxxxxxxxl}`]: {},
           },
           [`&.${prefix}content-9xl`]: {
-            [`@apply text-${config.text9XL}`]: {},
+            [`@apply text-${config.size.xxxxxxxxxl}`]: {},
           },
+          //Weight
           [`&.${prefix}weight-light`]: {
-            [`@apply font-${config.textLight}`]: {},
+            [`@apply font-${config.weight.light}`]: {},
           },
           [`&.${prefix}weight-normal`]: {
-            [`@apply font-${config.textNormal}`]: {},
+            [`@apply font-${config.weight.normal}`]: {},
           },
           [`&.${prefix}weight-medium`]: {
-            [`@apply font-${config.textMedium}`]: {},
+            [`@apply font-${config.weight.medium}`]: {},
           },
           [`&.${prefix}weight-semibold`]: {
-            [`@apply font-${config.textSemibold}`]: {},
+            [`@apply font-${config.weight.semibold}`]: {},
           },
           [`&.${prefix}weight-bold`]: {
-            [`@apply font-${config.textBold}`]: {},
+            [`@apply font-${config.weight.bold}`]: {},
           },
           [`&.${prefix}weight-extrabold`]: {
-            [`@apply font-${config.textExtrabold}`]: {},
+            [`@apply font-${config.weight.extrabold}`]: {},
           },
+          //Lead
           [`&.${prefix}lead-none`]: {
-            [`@apply leading-${config.textLeadNone}`]: {},
+            [`@apply leading-${config.lead.none}`]: {},
           },
           [`&.${prefix}lead-normal`]: {
-            [`@apply leading-${config.textLeadNormal}`]: {},
+            [`@apply leading-${config.lead.normal}`]: {},
           },
           [`&.${prefix}lead-tight`]: {
-            [`@apply leading-${config.textLeadTight}`]: {},
+            [`@apply leading-${config.lead.tight}`]: {},
           },
           [`&.${prefix}lead-snug`]: {
-            [`@apply leading-${config.textLeadSnug}`]: {},
+            [`@apply leading-${config.lead.snug}`]: {},
           },
           [`&.${prefix}lead-loose`]: {
-            [`@apply leading-${config.textLeadLoose}`]: {},
+            [`@apply leading-${config.lead.loose}`]: {},
           },
         },
       })

diff --git a/src/plugins/components/text/text.config.ts b/src/plugins/components/text/text.config.ts
@@ -1,30 +1,36 @@
 export const key = 'text' as const
 
 export const defaultConfig = {
-  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',
+  size: {
+    xs: 'xs',
+    sm: 'sm',
+    md: 'base',
+    lg: 'lg',
+    xl: 'xl',
+    xxl: '2xl',
+    xxxl: '3xl',
+    xxxxl: '4xl',
+    xxxxxl: '5xl',
+    xxxxxxl: '6xl',
+    xxxxxxxl: '7xl',
+    xxxxxxxxl: '8xl',
+    xxxxxxxxxl: '9xl',
+  },
+  weight: {
+    light: 'light',
+    normal: 'normal',
+    medium: 'medium',
+    semibold: 'semibold',
+    bold: 'bold',
+    extrabold: 'extrabold',
+  },
+  lead: {
+    none: 'none',
+    normal: 'normal',
+    tight: 'tight',
+    snug: 'snug',
+    loose: 'loose',
+  },
 }
 
 export type TextConfig = typeof defaultConfig