@solfacil/girassol 0.1.11 → 0.2.3

package/dist/windi.config.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("windicss/types/interfaces").FullConfig;
+declare const _default: import("vite-plugin-windicss").WindiCssOptions;
 export default _default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solfacil/girassol",
   "description": "Girassol design system",
-  "version": "0.1.11",
+  "version": "0.2.3",
   "authors": [
     {
       "name": "Kevin Martin",
@@ -57,63 +57,63 @@
     "pre-commit": "./.husky/run-staged-tests.js"
   },
   "dependencies": {
-    "@vueuse/core": "^8.6.0",
+    "@vueuse/core": "^9.0.0",
     "gluegun": "latest",
     "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.25.1",
-    "@babel/core": "^7.18.2",
-    "@babel/preset-env": "^7.18.2",
-    "@commitlint/cli": "^17.0.2",
-    "@commitlint/config-conventional": "^17.0.2",
-    "@iconify/json": "^2.1.58",
-    "@storybook/addon-a11y": "^6.5.8",
-    "@storybook/addon-actions": "^6.5.8",
-    "@storybook/addon-essentials": "^6.5.8",
-    "@storybook/addon-links": "^6.5.8",
-    "@storybook/builder-vite": "^0.1.36",
-    "@storybook/theming": "^6.5.8",
-    "@storybook/vue3": "^6.5.8",
+    "@antfu/eslint-config": "^0.25.2",
+    "@babel/core": "^7.18.6",
+    "@babel/preset-env": "^7.18.6",
+    "@commitlint/cli": "^17.0.3",
+    "@commitlint/config-conventional": "^17.0.3",
+    "@iconify/json": "^2.1.84",
+    "@storybook/addon-a11y": "^6.5.9",
+    "@storybook/addon-actions": "^6.5.9",
+    "@storybook/addon-essentials": "^6.5.9",
+    "@storybook/addon-links": "^6.5.9",
+    "@storybook/builder-vite": "^0.2.2",
+    "@storybook/theming": "^6.5.9",
+    "@storybook/vue3": "^6.5.9",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/user-event": "^14.2.0",
+    "@testing-library/user-event": "^14.2.1",
     "@testing-library/vue": "^6.6.0",
-    "@types/jest-axe": "^3.5.3",
+    "@types/jest-axe": "^3.5.4",
     "@types/node": "^17.0.41",
-    "@typescript-eslint/eslint-plugin": "^5.27.1",
-    "@typescript-eslint/parser": "^5.27.1",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@typescript-eslint/eslint-plugin": "^5.30.0",
+    "@typescript-eslint/parser": "^5.30.0",
+    "@vitejs/plugin-vue": "^3.0.1",
     "babel-loader": "^8.2.5",
     "c8": "^7.11.3",
     "cli-spinner": "^0.2.10",
     "commitizen": "^4.2.4",
     "copyfiles": "^2.4.1",
     "critters": "^0.0.16",
-    "eslint": "^8.17.0",
+    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-html": "^6.2.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^8.7.1",
     "eslint-plugin-vuejs-accessibility": "^1.2.0",
     "husky": "^8.0.1",
     "jest-axe": "^5.0.1",
-    "jsdom": "^19.0.0",
+    "jsdom": "^20.0.0",
     "sass": "^1.50.0",
-    "storybook-addon-designs": "^6.2.1",
-    "stylelint": "^14.9.0",
+    "storybook-addon-designs": "^6.3.1",
+    "stylelint": "^14.9.1",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-property-sort-order-smacss": "^9.0.0",
     "stylelint-order": "^5.0.0",
     "ts-node": "^10.8.1",
-    "typescript": "^4.6.3",
-    "unplugin-icons": "^0.14.3",
-    "vite": "^2.9.13",
-    "vite-plugin-inspect": "^0.5.0",
-    "vite-plugin-windicss": "^1.8.4",
-    "vitest": "^0.16.0",
+    "typescript": "^4.7.4",
+    "unplugin-icons": "^0.14.7",
+    "vite": "^3.0.3",
+    "vite-plugin-inspect": "^0.5.1",
+    "vite-plugin-windicss": "^1.8.7",
+    "vitest": "^0.19.1",
     "vue-loader": "^17.0.0",
-    "vue-tsc": "^0.34.15",
-    "windicss": "^3.5.4"
+    "vue-tsc": "^0.39.2",
+    "windicss": "^3.5.6"
   },
   "repository": {
     "type": "git",

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/borders.ts

@@ -4,7 +4,8 @@ export default {
     sm: '0.25rem',
     md: '0.5rem',
     lg: '1rem',
-    full: '40rem',
+    full: '80rem',
+
     half: '50%',
     fully: '100%',
   },

package/theme/solfacil/colors.ts

@@ -1,43 +1,65 @@
 export default {
   brand: {
     primary: {
-      light: '#FFF8EB',
-      medium: '#FFCD70',
-      pure: '#FFB01F',
+      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: {
-      light: '#8f8f8f',
-      medium: '#525252',
-      pure: '#292929',
+      pure: '#000000',
+      light: '#757575',
+      medium: '#505050',
+      dark: '#222222',
     },
-
     high: {
-      light: '#FFFFFF',
-      medium: '#F5F5F5',
-      pure: '#E0E0E0',
+      pure: '#ffffff',
+      light: '#F0f0f0',
+      medium: '#dedede',
+      dark: '#c8c8c8',
     },
   },
-
+  
   feedback: {
     positive: {
-      light: '#eefbf6',
-      medium: '#8ae5bf',
-      pure: '#47d79a',
+      pure: '#1CA36F',
+      light: '#D2EDE2',
+      medium: '#8DD1B7',
+      dark: '#0B412C',
+    },
+    warning: {
+      pure: '#FFB300',
+      light: '#FFF0CC',
+      medium: '#FFD97F',
+      dark: '#664800',
     },
-
     informative: {
-      light: '#ebf8ff',
-      medium: '#70cbff',
-      pure: '#1faeff',
+      pure: '#1976D2',
+      light: '#D1E4F6',
+      medium: '#8CBAE8',
+      dark: '#0A2F54',
     },
-
     negative: {
-      light: '#ffebeb',
-      medium: '#ff7470',
-      pure: '#ff251f',
+      pure: '#D0382D',
+      light: '#F6D7D5',
+      medium: '#E79B96',
+      dark: '#531612',
     },
   },
 }

package/theme/solfacil/effects.ts

@@ -1,15 +1,17 @@
 export default {
-  opacity:  {
+  opacity: {
     'DEFAULT': 1,
 
-    strong: 0.8,
-    moderate: 0.32,
-    weak: 0.16,
+    semiopaque: 0.8,
+    intense: 0.6,
+    medium: 0.32,
+    light: 0.16,
   },
 
   boxShadow: {
-    soft: '0px 8px 16px rgba(41, 41, 41, 0.08)',
-    medium: '0px 12px 24px rgba(41, 41, 41, 0.16)',
-    large: '0px 16px 64px rgba(41, 41, 41, 0.24)',
+    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.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

@@ -1,10 +1,8 @@
 export default {
   fontFamily: {
     sans: ['"Lato"', 'sans-serif'],
-    
     base: ['"Lato"', 'sans-serif'],
     highlight: ['"Rubik"'],
-    code: ['"Roboto Slab", "serif"'],
   },
 
   fontSize: {
@@ -14,21 +12,22 @@ 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': '5.5rem',
+    'giga': '5rem',
   },
 
   lineHeight: {
     'default': 1,
 
     'xs': 1.15,
-    'sm': 1.2,
+    'sm': 1.25,
 
     'md': 1.33,
 

package/theme/solfacil/utilities.ts

@@ -1,14 +1,250 @@
 import plugin from 'windicss/plugin'
 
+export const componentTypos = plugin(({ addUtilities, theme }) => {
+  const wrapperThemeType = (path: string) => `${theme(path)}`
+
+
+  const display = {
+    '.fonts-display-large': {
+      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'),
+      },
+    },
+
+
+    '.fonts-display-medium': {
+      fontFamily: wrapperThemeType('fontFamily.highlight'),
+      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'),
+      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'),
+      },
+    },
+
+  }
+
+  const heading = {
+    '.fonts-heading-h1': {
+      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'),
+      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'),
+      },
+    },
+
+    '.fonts-heading-h3': {
+      fontFamily: wrapperThemeType('fontFamily.highlight'),
+      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'),
+      },
+    },
+
+    '.fonts-heading-h4': {
+      fontFamily: wrapperThemeType('fontFamily.highlight'),
+      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 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'),
+
+      '@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'),
+
+      '@media (min-width: 1024px)': {
+        fontSize: wrapperThemeType('fontSize.xs'),
+      },
+    },
+  }
+  
+  const body = {
+    '.fonts-body-large-regular': {
+      fontSize: wrapperThemeType('fontSize.2xs'),
+      fontFamily: wrapperThemeType('fontFamily.base'),
+      lineHeight: wrapperThemeType('lineHeight.xs'),
+      fontWeight: wrapperThemeType('fontWeight.bold'),
+      color: wrapperThemeType('colors.neutral.low.medium'),
+    },
+
+    '.fonts-body-larger-bold': {
+      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': {
+      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': {
+      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': {
+      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': {
+      fontSize: wrapperThemeType('fontSize.micro'),
+      fontFamily: wrapperThemeType('fontFamily.base'),
+      lineHeight: wrapperThemeType('lineHeight.xs'),
+      fontWeight: wrapperThemeType('fontWeight.bold'),
+      color: wrapperThemeType('colors.neutral.low.medium'),
+    },
+  }
+
+  const link = {
+    '.fonts-link-inline-large': {
+      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': {
+      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': {
+      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'),
+      },
+    },
+  }
+
+  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(),