@solfacil/girassol 0.2.3 → 0.2.6

package/theme/solfacil/index.ts

@@ -5,7 +5,8 @@ import spacing from './spacing'
 import effects from './effects'
 import misc from './miscs'
 
-import { componentTypos ,debug, maxLines, outlinesForFocus, placeholder } from './utilities'
+import { screens } from './screens'
+import { componentTypos, debug, maxLines, outlinesForFocus, placeholder } from './utilities'
 
 
 export {
@@ -15,6 +16,7 @@ export {
   borders,
   effects,
   misc,
+  screens,
 }
 
 export const utilities = {

package/theme/solfacil/miscs.ts

@@ -1,8 +1,19 @@
+import { sizings } from './spacing'
+
 export default {
   width: {
     'fit-content': 'fit-content',
+    ...sizings,
   },
-
+  
+  height: sizings,
+  minHeight: sizings,  
+  maxHeight: sizings,
+  minWidth: sizings,
+  maxWidth: sizings,
+  
+  spacing: sizings,
+  
   colors: {
     transparent: 'transparent',
   },

package/theme/solfacil/screens.ts

@@ -0,0 +1,5 @@
+export const screens = {
+  'sm': { max: '767px' },
+  'md': { min: '768px', max: '1365px' },
+  'lg': { min: '1366px' },
+}

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

@@ -4,14 +4,16 @@ 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(({ addUtilities, 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(({ addUtilities, 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(({ addUtilities, 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(({ addUtilities, 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.xs'),
-      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.xs'),
+        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'),
-      },
     },
   }
 

package/windi.config.ts

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