@solfacil/girassol 0.2.0 → 0.2.4

package/theme/safelist.ts

@@ -0,0 +1,104 @@
+type Data = {
+  colors: Record<string, any>
+  spacing: Record<string, any>
+}
+
+type Args = {
+  activeSafeList: boolean
+  data: Data
+}
+
+export function safelist({ activeSafeList = true, data }: Args): string[] {
+  if (activeSafeList) {
+    const colors = data.colors ? safelistElementColors(safelistColors(data.colors)) : []
+    const spacing = data.spacing ? safelistSpacing(data.spacing) : []
+
+    const gaps = range(20).map(i => `gap-${i}`)
+    const gridRows = range(14).map(i => `grid-rows-${i}`)
+    const gridCols = range(14).map(i => `grid-cols-${i}`)
+    const rowsStart = range(14).map(i => `row-start-${i}`)
+    const colsStart = range(14).map(i => `col-start-${i}`)
+    const rowsSpan = range(14).map(i => `row-span-${i}`)
+    const colsSpan = range(14).map(i => `col-span-${i}`)
+
+    return [
+      ...colors,
+      ...spacing,
+      ...gaps,
+      ...gridRows,
+      ...gridCols,
+      ...rowsStart,
+      ...colsStart,
+      ...rowsSpan,
+      ...colsSpan,
+    ]
+  }
+
+
+  return []
+}
+
+export function safelistColors(colors: Data['colors']) {
+  const colorsNames: string[] = []
+
+  for (const category in colors) {
+    for (const color in colors[category]) {
+      const current = colors[category][color]
+
+      if (typeof current === 'string') {
+        colorsNames.push(`${category}-${color}`)
+      }
+
+      if (typeof current === 'object') {
+        for (const insideColor in colors[category][color]) {
+          colorsNames.push(`${category}-${color}-${insideColor}`)
+        }
+      }
+    }
+  }
+
+  return colorsNames
+}
+
+export function safelistElementColors(colorsNames: string[]) {
+  const elements = ['text', 'bg', 'outline', 'fill', 'stroke', 'border', 'text-decoration-color', 'text-stroke-color']
+  const elementColors: string[] = []
+
+  elements.forEach((element: string) => {
+    colorsNames.forEach((color: string) => {
+      elementColors.push(`${element}-${color}`)
+    })
+  })
+
+  return elementColors
+}
+
+
+export function safelistSpacing(spacing: Data['spacing']): string[] {
+  const spacingTokenNames = Object.keys(spacing)
+  const paddings = ['p', 'px', 'py', 'pl', 'pr', 'pt', 'pb']
+  const margins = ['m', 'mx', 'my', 'ml', 'mr', 'mt', 'mb']
+
+  const typos = ['text', 'tracking', 'decoration', 'underline-offset', 'indent', 'text-stroke']
+  const svg = ['stroke']
+  const border = ['border-a', 'border-x', 'border-y', 'border-l', 'border-r', 'border-t', 'border-b']
+
+  const elements = [...paddings, ...margins, ...typos, ...svg, ...border]
+  
+  const elementSpacing: string[] = []
+
+  elements.forEach((element: string) => {
+    spacingTokenNames.forEach((space: string) => {
+      elementSpacing.push(`${element}-${space}`)
+    })
+  })
+
+  margins.forEach(margin =>  elementSpacing.push(`${margin}-auto`))
+  paddings.forEach(padding =>  elementSpacing.push(`${padding}-auto`))
+
+  return elementSpacing
+}
+
+export function range(size: number, startAt = 1) {
+  return Array.from(Array(size).keys()).map(i => i + startAt)
+}

package/theme/solfacil/colors.ts

@@ -1,32 +1,41 @@
 export default {
   brand: {
     primary: {
+      pure: '#000000',
+      light: '#a3a3a3',
+      medium: '#666666',
+      dark: '#212121',
+    },
+    secondary: {
       medium: '#BFFF00',
       light: '#EFFFC1',
       pure: '#00B569',
       dark: '#008859',
     },
   },
+
   highlight: {
     pure: '#8250DF',
     light: '#E6DCF9',
     medium: '#C0A7EF',
     dark: '#342059',
   },
+
   neutral: {
     low: {
       pure: '#000000',
-      light: '#888888',
-      medium: '#555555',
+      light: '#757575',
+      medium: '#505050',
       dark: '#222222',
     },
     high: {
       pure: '#ffffff',
-      light: '#F5f5f5',
-      medium: '#e0e0e0',
-      dark: '#cccccc',
+      light: '#F0f0f0',
+      medium: '#dedede',
+      dark: '#c8c8c8',
     },
   },
+  
   feedback: {
     positive: {
       pure: '#1CA36F',

package/theme/solfacil/effects.ts

@@ -2,16 +2,16 @@ export default {
   opacity: {
     'DEFAULT': 1,
 
-    strong: 0.8,
+    semiopaque: 0.8,
     intense: 0.6,
-    moderate: 0.32,
-    weak: 0.16,
+    medium: 0.32,
+    light: 0.16,
   },
 
   boxShadow: {
     weak: '0px 4px 8px rgba(41, 41, 41, 0.08)',
     moderate: '0px 8px 24px rgba(41, 41, 41, 0.16)',
-    intense: '0px 16px 32px rgba(41, 41, 41, 0.24)',
-    strong: '0px 16px 48px rgba(41, 41, 41, 0.24)',
+    intense: '0px 16px 32px rgba(41, 41, 41, 0.32)',
+    strong: '0px 16px 48px rgba(41, 41, 41, 0.32)',
   },
 }

package/theme/solfacil/index.ts

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

package/theme/solfacil/spacing.ts

@@ -14,6 +14,7 @@ export default {
     '2xl': '5rem',
     '3xl': '6rem',
     'mega': '7.5rem',
+    'huge': '10rem',
     'giga': '12.5rem',
   },
 
@@ -32,6 +33,7 @@ export default {
     '2xl': '5rem',
     '3xl': '6rem',
     'mega': '7.5rem',
+    'huge': '10rem',
     'giga': '12.5rem',
   },
 
@@ -50,6 +52,7 @@ export default {
     '2xl': '5rem',
     '3xl': '6rem',
     'mega': '7.5rem',
+    'huge': '10rem',
     'giga': '12.5rem',
   },
 }

package/theme/solfacil/typography.ts

@@ -2,7 +2,7 @@ export default {
   fontFamily: {
     sans: ['"Lato"', 'sans-serif'],
     base: ['"Lato"', 'sans-serif'],
-    title: ['"Rubik"'],
+    highlight: ['"Rubik"'],
   },
 
   fontSize: {
@@ -12,12 +12,13 @@ export default {
     'xs': '1.25rem',
 
     'sm': '1.5rem',
-    'md': '2rem',
-    'lg': '2.5rem',
+    'md': '1.75rem',
+    'lg': '2rem',
 
-    'xl': '3rem',
-    '2xl': '3.5rem',
-    '3xl': '4rem',
+    'xl': '2.5rem',
+    '2xl': '3rem',
+    '3xl': '3.5rem',
+    'huge': '4rem',
     'mega': '4.5rem',
     'giga': '5rem',
   },
@@ -26,7 +27,7 @@ export default {
     'default': 1,
 
     'xs': 1.15,
-    'sm': 1.2,
+    'sm': 1.25,
 
     'md': 1.33,
 

package/theme/solfacil/utilities.ts

@@ -1,14 +1,212 @@
 import plugin from 'windicss/plugin'
 
+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'),
+      '@media (min-width: 1024px)': {
+        fontSize: wrapperThemeType('fontSize.mega'),
+      },
+    },
+
+
+    '.fonts-display-medium': {
+      ...displayCommons,
+      fontSize: wrapperThemeType('fontSize.2xl'),
+      '@media (min-width: 1024px)': {
+        fontSize: wrapperThemeType('fontSize.huge'),
+      },
+    },
+
+    '.fonts-display-small': {
+      ...displayCommons,
+      fontSize: wrapperThemeType('fontSize.xl'),
+      '@media (min-width: 1024px)': {
+        fontSize: wrapperThemeType('fontSize.3xl'),
+      },
+    },
+
+  }
+
+  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'),
+      '@media (min-width: 1024px)': {
+        fontSize: wrapperThemeType('fontSize.xl'),
+      },
+    },
+
+    '.fonts-heading-h2': {
+      ...headingCommons,
+      fontSize: wrapperThemeType('fontSize.sm'),
+
+      '@media (min-width: 1024px)': {
+        fontSize: wrapperThemeType('fontSize.lg'),
+      },
+    },
+
+    '.fonts-heading-h3': {
+      ...headingCommons,
+      fontSize: wrapperThemeType('fontSize.xs'),
+
+      '@media (min-width: 1024px)': {
+        fontSize: wrapperThemeType('fontSize.sm'),
+      },
+    },
+
+    '.fonts-heading-h4': {
+      ...headingCommons,
+      fontSize: wrapperThemeType('fontSize.2xs'),
+
+      '@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': {
+      ...subtitleCommons,
+      fontSize: wrapperThemeType('fontSize.2xs'),
+      '@media (min-width: 1024px)': {
+        fontSize: wrapperThemeType('fontSize.xs'),
+      },
+    },
+
+    '.fonts-subtitle-small': {
+      ...subtitleCommons,
+      fontSize: wrapperThemeType('fontSize.3xs'),
+      '@media (min-width: 1024px)': {
+        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'),
+      fontWeight: wrapperThemeType('fontWeight.regular'),
+    },
+
+    '.fonts-body-larger-bold': {
+      ...bodyCommons,
+      fontSize: wrapperThemeType('fontSize.2xs'),
+      fontWeight: wrapperThemeType('fontWeight.bold'),
+    },
+
+    '.fonts-body-medium-regular': {
+      ...bodyCommons,
+      fontSize: wrapperThemeType('fontSize.3xs'),
+      fontWeight: wrapperThemeType('fontWeight.regular'),
+    },
+
+    '.fonts-body-medium-bold': {
+      ...bodyCommons,
+      fontSize: wrapperThemeType('fontSize.3xs'),
+      fontWeight: wrapperThemeType('fontWeight.bold'),
+    },
+
+    '.fonts-body-small-regular': {
+      ...bodyCommons,
+      fontSize: wrapperThemeType('fontSize.micro'),
+      fontWeight: wrapperThemeType('fontWeight.regular'),
+    },
+
+    '.fonts-body-small-bold': {
+      ...bodyCommons,
+      fontSize: wrapperThemeType('fontSize.micro'),
+      fontWeight: wrapperThemeType('fontWeight.bold'),
+    },
+  }
+
+  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'),
+    },
+
+    '.fonts-link-inline-medium': {
+      ...linkCommons,
+      fontSize: wrapperThemeType('fontSize.3xs'),
+    },
+
+    '.fonts-link-inline-small': {
+      ...linkCommons,
+      fontSize: wrapperThemeType('fontSize.micro'),
+    },
+  }
+
+  const overline = {
+    '.fonts-overline-small': {
+      fontSize: wrapperThemeType('fontSize.2xs'),
+      fontFamily: wrapperThemeType('fontFamily.base'),
+      lineHeight: wrapperThemeType('lineHeight.xs'),
+      fontWeight: wrapperThemeType('fontWeight.regular'),
+      color: wrapperThemeType('colors.neutral.low.medium'),
+      textTransform: 'uppercase',
+    },
+  }
+
+  addUtilities({
+    ...display,
+    ...heading,
+    ...subtitle,
+    ...body,
+    ...link,
+    ...overline,
+  })
+})
+
+
 export const outlinesForFocus = plugin(({ addUtilities }) => {
   addUtilities({
     '.outline-focused': {
-      outline: '3px solid #292929',
-      outlineOffset: '0px',
+      outline: '2px solid #8250DF',
+      outlineOffset: '2px',
     },
 
     '.outline-focused-invert': {
-      outline: '3px solid #ffffff',
+      outline: '2px solid #ffffff',
       outlineOffset: '0px',
     },
   })

package/vite.config.ts

@@ -54,6 +54,7 @@ export default defineConfig({
     Icons({
       autoInstall: true,
       compiler: 'vue3',
+      scale: 1.0,
     }),
 
     GirassolComponentsTypes(),

package/windi.config.ts

@@ -4,9 +4,7 @@ import typography from 'windicss/plugin/typography'
 
 import { borders, colors, effects, misc, spacing, typography as typos, utilities } from './theme/solfacil/'
 
-function range(size: number, startAt = 1) {
-  return Array.from(Array(size).keys()).map(i => i + startAt)
-}
+import { safelist } from './theme/safelist'
 
 export default defineConfig({
   darkMode: 'class',
@@ -16,29 +14,13 @@ export default defineConfig({
   },
 
   safelist: [
-    'p-nano',
-    'p-micro',
-    'p-3xs',
-    'p-2xs',
-    'p-xs',
-    'p-sm',
-    'p-md',
-    'p-lg',
-    'm-nano',
-    'm-micro',
-    'm-3xs',
-    'm-2xs',
-    'm-xs',
-    'm-sm',
-    'm-md',
-    'm-lg',
-    range(30).map(i => `grid-rows-${i}`),
-    range(30).map(i => `grid-cols-${i}`),
-    range(10).map(i => `gap-${i}`),
-    range(30).map(i => `row-start-${i}`),
-    range(30).map(i => `col-start-${i}`),
-    range(30).map(i => `row-span-${i}`),
-    range(30).map(i => `col-span-${i}`),
+    ...safelist({
+      activeSafeList: true,
+      data: {
+        colors,
+        spacing: spacing.space,
+      },
+    }),
   ],
 
   plugins: [
@@ -47,6 +29,7 @@ export default defineConfig({
     utilities.maxLines,
     utilities.debug,
     utilities.placeholder,
+    utilities.componentTypos,
   ],
 
   theme: {