@solfacil/girassol 0.2.1 → 0.2.5

package/theme/solfacil/spacing.ts

@@ -1,59 +1,36 @@
-export default {
-  space: {
-    'nano': '0.25rem',
-    'micro': '0.5rem',
-    '3xs': '0.75rem',
-    '2xs': '1rem',
-    'xs': '1.5rem',
+export const sizings = {
+  'quark': '0.25rem',
+  'nano': '0.5rem',
+  'micro': '0.75rem',
+  '3xs': '1rem',
+  '2xs': '1.5rem',
+  'xs': '2rem',
+
+  'sm': '2.5rem',
+  'md': '3rem',
+  'lg': '3.5rem',
+
+  'xl': '4rem',
+  '2xl': '4.5rem',
+  '3xl': '5rem',
+  'mega': '6rem',
+  '2mega': '7.5rem',
+  '3mega': '10rem',
+  'giga': '12.5rem',
+}
 
-    'sm': '2rem',
-    'md': '2.5rem',
-    'lg': '3rem',
-
-    'xl': '4rem',
-    '2xl': '5rem',
-    '3xl': '6rem',
-    'mega': '7.5rem',
-    'huge': '10rem',
-    'giga': '12.5rem',
-  },
 
+export default {
   padding: {
-    'nano': '0.25rem',
-    'micro': '0.5rem',
-    '3xs': '0.75rem',
-    '2xs': '1rem',
-    'xs': '1.5rem',
-
-    'sm': '2rem',
-    'md': '2.5rem',
-    'lg': '3rem',
-
-    'xl': '4rem',
-    '2xl': '5rem',
-    '3xl': '6rem',
-    'mega': '7.5rem',
-    'huge': '10rem',
-    'giga': '12.5rem',
+    auto: 'auto',
+    '0': '0',
+    sizings,
   },
 
   margin: {
-    'nano': '0.25rem',
-    'micro': '0.5rem',
-    '3xs': '0.75rem',
-    '2xs': '1rem',
-    'xs': '1.5rem',
-
-    'sm': '2rem',
-    'md': '2.5rem',
-    'lg': '3rem',
-
-    'xl': '4rem',
-    '2xl': '5rem',
-    '3xl': '6rem',
-    'mega': '7.5rem',
-    'huge': '10rem',
-    'giga': '12.5rem',
+    auto: 'auto',
+    '0': '0',
+    sizings,
   },
 }
 

package/theme/solfacil/utilities.ts

@@ -1,17 +1,19 @@
 import plugin from 'windicss/plugin'
 
-export const componentTypos = plugin(({ addComponents, theme }) => {
+export const componentTypos = plugin(({ addUtilities, theme }) => {
   const wrapperThemeType = (path: string) => `${theme(path)}`
 
 
+  const displayCommons = {
+    fontFamily: wrapperThemeType('fontFamily.highlight'),
+    color: wrapperThemeType('colors.neutral.low.dark'),
+    lineHeight: wrapperThemeType('lineHeight.xs'),
+    fontWeight: wrapperThemeType('fontWeight.medium'),
+  }
   const display = {
     '.fonts-display-large': {
+      ...displayCommons,
       fontSize: wrapperThemeType('fontSize.3xl'),
-      fontFamily: wrapperThemeType('fontFamily.highlight'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.medium'),
-      color: wrapperThemeType('colors.neutral.low.dark'),
-
       '@media (min-width: 1024px)': {
         fontSize: wrapperThemeType('fontSize.mega'),
       },
@@ -19,24 +21,16 @@ export const componentTypos = plugin(({ addComponents, theme }) => {
 
 
     '.fonts-display-medium': {
-      fontFamily: wrapperThemeType('fontFamily.highlight'),
+      ...displayCommons,
       fontSize: wrapperThemeType('fontSize.2xl'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.medium'),
-      color: wrapperThemeType('colors.neutral.low.dark'),
-
       '@media (min-width: 1024px)': {
         fontSize: wrapperThemeType('fontSize.huge'),
       },
     },
 
     '.fonts-display-small': {
-      fontFamily: wrapperThemeType('fontFamily.highlight'),
+      ...displayCommons,
       fontSize: wrapperThemeType('fontSize.xl'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.medium'),
-      color: wrapperThemeType('colors.neutral.low.dark'),
-
       '@media (min-width: 1024px)': {
         fontSize: wrapperThemeType('fontSize.3xl'),
       },
@@ -44,26 +38,25 @@ export const componentTypos = plugin(({ addComponents, theme }) => {
 
   }
 
+  const headingCommons = {
+    fontFamily: wrapperThemeType('fontFamily.highlight'),
+    lineHeight: wrapperThemeType('lineHeight.xs'),
+    color: wrapperThemeType('colors.neutral.low.dark'),
+    fontWeight: wrapperThemeType('fontWeight.medium'),
+
+  }
   const heading = {
     '.fonts-heading-h1': {
+      ...headingCommons,
       fontSize: wrapperThemeType('fontSize.md'),
-      fontFamily: wrapperThemeType('fontFamily.highlight'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.medium'),
-      color: wrapperThemeType('colors.neutral.low.dark'),
-
       '@media (min-width: 1024px)': {
         fontSize: wrapperThemeType('fontSize.xl'),
       },
     },
 
-
     '.fonts-heading-h2': {
-      fontFamily: wrapperThemeType('fontFamily.highlight'),
+      ...headingCommons,
       fontSize: wrapperThemeType('fontSize.sm'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.medium'),
-      color: wrapperThemeType('colors.neutral.low.dark'),
 
       '@media (min-width: 1024px)': {
         fontSize: wrapperThemeType('fontSize.lg'),
@@ -71,11 +64,8 @@ export const componentTypos = plugin(({ addComponents, theme }) => {
     },
 
     '.fonts-heading-h3': {
-      fontFamily: wrapperThemeType('fontFamily.highlight'),
+      ...headingCommons,
       fontSize: wrapperThemeType('fontSize.xs'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.medium'),
-      color: wrapperThemeType('colors.neutral.low.dark'),
 
       '@media (min-width: 1024px)': {
         fontSize: wrapperThemeType('fontSize.sm'),
@@ -83,134 +73,106 @@ export const componentTypos = plugin(({ addComponents, theme }) => {
     },
 
     '.fonts-heading-h4': {
-      fontFamily: wrapperThemeType('fontFamily.highlight'),
+      ...headingCommons,
       fontSize: wrapperThemeType('fontSize.2xs'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.medium'),
-      color: wrapperThemeType('colors.neutral.low.dark'),
 
       '@media (min-width: 1024px)': {
         fontSize: wrapperThemeType('fontSize.2xs'),
       },
     },
-
   }
 
+  const subtitleCommons = {
+    fontFamily: wrapperThemeType('fontFamily.base'),
+    lineHeight: wrapperThemeType('lineHeight.xs'),
+    color: wrapperThemeType('colors.neutral.low.light'),
+    fontWeight: wrapperThemeType('fontWeight.regular'),
+  }
   const subtitle = {
     '.fonts-subtitle-medium': {
-      fontSize: wrapperThemeType('fontSize.md'),
-      fontFamily: wrapperThemeType('fontFamily.base'),
-      lineHeight: wrapperThemeType('lineHeight.2xs'),
-      fontWeight: wrapperThemeType('fontWeight.regular'),
-      color: wrapperThemeType('colors.neutral.low.light'),
-
+      ...subtitleCommons,
+      fontSize: wrapperThemeType('fontSize.2xs'),
       '@media (min-width: 1024px)': {
         fontSize: wrapperThemeType('fontSize.xs'),
       },
     },
 
-
     '.fonts-subtitle-small': {
-      fontSize: wrapperThemeType('fontSize.md'),
-      fontFamily: wrapperThemeType('fontFamily.base'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.regular'),
-      color: wrapperThemeType('colors.neutral.low.light'),
-
+      ...subtitleCommons,
+      fontSize: wrapperThemeType('fontSize.3xs'),
       '@media (min-width: 1024px)': {
-        fontSize: wrapperThemeType('fontSize.3xs'),
+        fontSize: wrapperThemeType('fontSize.2xs'),
       },
     },
   }
-  
+
+  const bodyCommons = {
+    color: wrapperThemeType('colors.neutral.low.medium'),
+    fontFamily: wrapperThemeType('fontFamily.base'),
+    lineHeight: wrapperThemeType('lineHeight.xs'),
+  }
   const body = {
     '.fonts-body-large-regular': {
+      ...bodyCommons,
       fontSize: wrapperThemeType('fontSize.2xs'),
-      fontFamily: wrapperThemeType('fontFamily.base'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.bold'),
-      color: wrapperThemeType('colors.neutral.low.medium'),
+      fontWeight: wrapperThemeType('fontWeight.regular'),
     },
 
     '.fonts-body-larger-bold': {
+      ...bodyCommons,
       fontSize: wrapperThemeType('fontSize.2xs'),
-      fontFamily: wrapperThemeType('fontFamily.base'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
       fontWeight: wrapperThemeType('fontWeight.bold'),
-      color: wrapperThemeType('colors.neutral.low.medium'),
     },
 
     '.fonts-body-medium-regular': {
+      ...bodyCommons,
       fontSize: wrapperThemeType('fontSize.3xs'),
-      fontFamily: wrapperThemeType('fontFamily.base'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
       fontWeight: wrapperThemeType('fontWeight.regular'),
-      color: wrapperThemeType('colors.neutral.low.medium'),
     },
 
     '.fonts-body-medium-bold': {
+      ...bodyCommons,
       fontSize: wrapperThemeType('fontSize.3xs'),
-      fontFamily: wrapperThemeType('fontFamily.base'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
       fontWeight: wrapperThemeType('fontWeight.bold'),
-      color: wrapperThemeType('colors.neutral.low.medium'),
     },
 
     '.fonts-body-small-regular': {
+      ...bodyCommons,
       fontSize: wrapperThemeType('fontSize.micro'),
-      fontFamily: wrapperThemeType('fontFamily.base'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
       fontWeight: wrapperThemeType('fontWeight.regular'),
-      color: wrapperThemeType('colors.neutral.low.medium'),
     },
 
     '.fonts-body-small-bold': {
+      ...bodyCommons,
       fontSize: wrapperThemeType('fontSize.micro'),
-      fontFamily: wrapperThemeType('fontFamily.base'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
       fontWeight: wrapperThemeType('fontWeight.bold'),
-      color: wrapperThemeType('colors.neutral.low.medium'),
     },
   }
 
+  const linkCommons = {
+    fontFamily: wrapperThemeType('fontFamily.base'),
+    lineHeight: wrapperThemeType('lineHeight.xs'),
+    fontWeight: wrapperThemeType('fontWeight.regular'),
+    color: wrapperThemeType('colors.neutral.low.medium'),
+    textDecoration: 'underline',
+    '&:hover': {
+      color: wrapperThemeType('colors.neutral.low.dark'),
+    },
+  }
   const link = {
     '.fonts-link-inline-large': {
+      ...linkCommons,
       fontSize: wrapperThemeType('fontSize.2xs'),
-      fontFamily: wrapperThemeType('fontFamily.base'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.regular'),
-      color: wrapperThemeType('colors.neutral.low.medium'),
-      textDecoration: 'underline',
-
-      '&:hover': {
-        color: wrapperThemeType('colors.neutral.low.dark'),
-      },
     },
 
     '.fonts-link-inline-medium': {
+      ...linkCommons,
       fontSize: wrapperThemeType('fontSize.3xs'),
-      fontFamily: wrapperThemeType('fontFamily.base'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.regular'),
-      color: wrapperThemeType('colors.neutral.low.medium'),
-      textDecoration: 'underline',
-
-      '&:hover': {
-        color: wrapperThemeType('colors.neutral.low.dark'),
-      },
     },
 
     '.fonts-link-inline-small': {
+      ...linkCommons,
       fontSize: wrapperThemeType('fontSize.micro'),
-      fontFamily: wrapperThemeType('fontFamily.base'),
-      lineHeight: wrapperThemeType('lineHeight.xs'),
-      fontWeight: wrapperThemeType('fontWeight.regular'),
-      color: wrapperThemeType('colors.neutral.low.medium'),
-      textDecoration: 'underline',
-
-      '&:hover': {
-        color: wrapperThemeType('colors.neutral.low.dark'),
-      },
     },
   }
 
@@ -225,7 +187,7 @@ export const componentTypos = plugin(({ addComponents, theme }) => {
     },
   }
 
-  addComponents({
+  addUtilities({
     ...display,
     ...heading,
     ...subtitle,

package/windi.config.ts

@@ -4,6 +4,8 @@ import typography from 'windicss/plugin/typography'
 
 import { borders, colors, effects, misc, spacing, typography as typos, utilities } from './theme/solfacil/'
 
+import { sizings } from './theme/solfacil/spacing'
+
 import { safelist } from './theme/safelist'
 
 export default defineConfig({
@@ -18,7 +20,7 @@ export default defineConfig({
       activeSafeList: true,
       data: {
         colors,
-        spacing: spacing.space,
+        spacing: sizings,
       },
     }),
   ],