@solfacil/girassol 0.2.0 → 0.2.1

package/dist/types/index.d.ts

@@ -21,30 +21,33 @@ export declare const components: {
             $: import("vue").ComponentInternalInstance;
             $data: {};
             $props: Partial<{
-                invert: boolean;
-                variant: "flat" | "primary" | "secondary";
-                dense: boolean;
+                onColor: boolean;
+                size: "small" | "large" | "medium";
+                variant: "primary" | "secondary" | "tertiary";
             }> & Omit<Readonly<import("vue").ExtractPropTypes<{
                 id: {
                     type: import("vue").PropType<string>;
                     required: true;
                 };
-                invert: {
+                loading: {
+                    type: import("vue").PropType<boolean>;
+                };
+                onColor: {
                     type: import("vue").PropType<boolean>;
                 } & {
                     default: boolean;
                 };
-                variant: {
-                    type: import("vue").PropType<"flat" | "primary" | "secondary">;
+                size: {
+                    type: import("vue").PropType<"small" | "large" | "medium">;
                 } & {
                     default: string;
                 };
-                dense: {
-                    type: import("vue").PropType<boolean>;
+                variant: {
+                    type: import("vue").PropType<"primary" | "secondary" | "tertiary">;
                 } & {
-                    default: boolean;
+                    default: string;
                 };
-            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "invert" | "variant" | "dense">;
+            }>> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, "onColor" | "size" | "variant">;
             $attrs: {
                 [x: string]: unknown;
             };
@@ -63,25 +66,28 @@ export declare const components: {
                     type: import("vue").PropType<string>;
                     required: true;
                 };
-                invert: {
+                loading: {
+                    type: import("vue").PropType<boolean>;
+                };
+                onColor: {
                     type: import("vue").PropType<boolean>;
                 } & {
                     default: boolean;
                 };
-                variant: {
-                    type: import("vue").PropType<"flat" | "primary" | "secondary">;
+                size: {
+                    type: import("vue").PropType<"small" | "large" | "medium">;
                 } & {
                     default: string;
                 };
-                dense: {
-                    type: import("vue").PropType<boolean>;
+                variant: {
+                    type: import("vue").PropType<"primary" | "secondary" | "tertiary">;
                 } & {
-                    default: boolean;
+                    default: string;
                 };
             }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
-                invert: boolean;
-                variant: "flat" | "primary" | "secondary";
-                dense: boolean;
+                onColor: boolean;
+                size: "small" | "large" | "medium";
+                variant: "primary" | "secondary" | "tertiary";
             }> & {
                 beforeCreate?: ((() => void) | (() => void)[]) | undefined;
                 created?: ((() => void) | (() => void)[]) | undefined;
@@ -107,20 +113,23 @@ export declare const components: {
                 type: import("vue").PropType<string>;
                 required: true;
             };
-            invert: {
+            loading: {
+                type: import("vue").PropType<boolean>;
+            };
+            onColor: {
                 type: import("vue").PropType<boolean>;
             } & {
                 default: boolean;
             };
-            variant: {
-                type: import("vue").PropType<"flat" | "primary" | "secondary">;
+            size: {
+                type: import("vue").PropType<"small" | "large" | "medium">;
             } & {
                 default: string;
             };
-            dense: {
-                type: import("vue").PropType<boolean>;
+            variant: {
+                type: import("vue").PropType<"primary" | "secondary" | "tertiary">;
             } & {
-                default: boolean;
+                default: string;
             };
         }>> & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
         __isFragment?: undefined;
@@ -131,25 +140,28 @@ export declare const components: {
             type: import("vue").PropType<string>;
             required: true;
         };
-        invert: {
+        loading: {
+            type: import("vue").PropType<boolean>;
+        };
+        onColor: {
             type: import("vue").PropType<boolean>;
         } & {
             default: boolean;
         };
-        variant: {
-            type: import("vue").PropType<"flat" | "primary" | "secondary">;
+        size: {
+            type: import("vue").PropType<"small" | "large" | "medium">;
         } & {
             default: string;
         };
-        dense: {
-            type: import("vue").PropType<boolean>;
+        variant: {
+            type: import("vue").PropType<"primary" | "secondary" | "tertiary">;
         } & {
-            default: boolean;
+            default: string;
         };
     }>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, {
-        invert: boolean;
-        variant: "flat" | "primary" | "secondary";
-        dense: boolean;
+        onColor: boolean;
+        size: "small" | "large" | "medium";
+        variant: "primary" | "secondary" | "tertiary";
     }> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
         $slots: {
             'icon-left': (_: {}) => any;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@solfacil/girassol",
   "description": "Girassol design system",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "authors": [
     {
       "name": "Kevin Martin",
@@ -57,7 +57,7 @@
     "pre-commit": "./.husky/run-staged-tests.js"
   },
   "dependencies": {
-    "@vueuse/core": "^8.7.5",
+    "@vueuse/core": "^9.0.0",
     "gluegun": "latest",
     "vue": "^3.2.37"
   },
@@ -67,12 +67,12 @@
     "@babel/preset-env": "^7.18.6",
     "@commitlint/cli": "^17.0.3",
     "@commitlint/config-conventional": "^17.0.3",
-    "@iconify/json": "^2.1.70",
+    "@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.1.38",
+    "@storybook/builder-vite": "^0.2.2",
     "@storybook/theming": "^6.5.9",
     "@storybook/vue3": "^6.5.9",
     "@testing-library/jest-dom": "^5.16.4",
@@ -82,7 +82,7 @@
     "@types/node": "^17.0.41",
     "@typescript-eslint/eslint-plugin": "^5.30.0",
     "@typescript-eslint/parser": "^5.30.0",
-    "@vitejs/plugin-vue": "^2.3.3",
+    "@vitejs/plugin-vue": "^3.0.1",
     "babel-loader": "^8.2.5",
     "c8": "^7.11.3",
     "cli-spinner": "^0.2.10",
@@ -107,12 +107,12 @@
     "ts-node": "^10.8.1",
     "typescript": "^4.7.4",
     "unplugin-icons": "^0.14.7",
-    "vite": "^2.9.13",
+    "vite": "^3.0.3",
     "vite-plugin-inspect": "^0.5.1",
-    "vite-plugin-windicss": "^1.8.6",
-    "vitest": "^0.16.0",
+    "vite-plugin-windicss": "^1.8.7",
+    "vitest": "^0.19.1",
     "vue-loader": "^17.0.0",
-    "vue-tsc": "^0.38.2",
+    "vue-tsc": "^0.39.2",
     "windicss": "^3.5.6"
   },
   "repository": {

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,