@solfacil/girassol 0.18.0 → 0.19.0

package/theme/safelist.ts

@@ -1,6 +1,8 @@
 type Data = {
   colors: Record<string, any>
   spacing: Record<string, any>
+  effects: Record<string, any>
+  borders: Record<string, any>
 }
 
 type Args = {
@@ -10,18 +12,26 @@ type Args = {
 
 export function safelist({ activeSafeList = true, data }: Args): string[] {
   if (activeSafeList) {
-    const colors = data.colors ? safelistElementColors(safelistColors(data.colors)) : []
+    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}`)
+    const effects = safelistEffects(data.effects)
 
-    return [
+    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}`)
+
+    const maxLines = range(10).map((i) => `max-lines-${i}`)
+
+    const borders = safelistBorders(data.borders.borderRadius, data.borders.borderWidth)
+
+    return  [
       'debug',
       'debug-all',
       ...colors,
@@ -33,10 +43,14 @@ export function safelist({ activeSafeList = true, data }: Args): string[] {
       ...colsStart,
       ...rowsSpan,
       ...colsSpan,
+      ...effects,
+      ...maxLines,
+      ...borders,
+      ...safelistTypography(),
+      ...safelistIconSizes(),
     ]
   }
 
-
   return []
 }
 
@@ -63,9 +77,22 @@ export function safelistColors(colors: Data['colors']) {
 }
 
 export function safelistElementColors(colorsNames: string[]) {
-  const elements = ['text', 'bg', 'outline', 'fill', 'stroke', 'border', 'text-decoration-color', 'text-stroke-color']
+  const elements = [
+    'text',
+    'bg',
+    'outline',
+    'fill',
+    'stroke',
+    'border',
+    'shadow',
+    'text-decoration-color',
+    'text-stroke-color',
+  ]
+
   const elementColors: string[] = []
 
+  elements.forEach((element) => elementColors.push(`${element}-transparent`))
+
   elements.forEach((element: string) => {
     colorsNames.forEach((color: string) => {
       elementColors.push(`${element}-${color}`)
@@ -75,19 +102,80 @@ export function safelistElementColors(colorsNames: string[]) {
   return elementColors
 }
 
+export function safelistBorders(borderRadius: Data['spacing'], borderWidth: Data['spacing']): string[] {
+  const borderAxis = [
+    'border',
+    'border-a',
+    'border-x',
+    'border-y',
+    'border-l',
+    'border-r',
+    'border-t',
+    'border-b',
+  ]
+  const borderWidthAxis = [
+    'rounded',
+    'rounded-x',
+    'rounded-y',
+    'rounded-l',
+    'rounded-r',
+    'rounded-t',
+    'rounded-b',
+  ]
+
+  const elementsBorder: string[] = []
+
+
+  Object.keys(borderWidth).forEach((element: string) => {
+    borderAxis.forEach((axis) => {
+      elementsBorder.push(`${axis}-${element}`)
+    })
+  })
+  
+  Object.keys(borderRadius).forEach((element: string) => {
+    borderWidthAxis.forEach((axis) => {
+      elementsBorder.push(`${axis}-${element}`)
+    })
+  })
+
+  return elementsBorder
+}
 
 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 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[] = []
+  const border = [
+    'border-a',
+    'border-x',
+    'border-y',
+    'border-l',
+    'border-r',
+    'border-t',
+    'border-b',
+  ]
+
+  const staticTokens = ['w-full', 'h-full', 'w-fit-content']
+
+  const elements = [
+    ...paddings,
+    ...margins,
+    ...typos,
+    ...svg,
+    ...border,
+  ]
+
+  const elementSpacing: string[] = staticTokens
 
   elements.forEach((element: string) => {
     spacingTokenNames.forEach((space: string) => {
@@ -95,12 +183,60 @@ export function safelistSpacing(spacing: Data['spacing']): string[] {
     })
   })
 
-  margins.forEach(margin =>  elementSpacing.push(`${margin}-auto`))
-  paddings.forEach(padding =>  elementSpacing.push(`${padding}-auto`))
+  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)
-}
+  return Array.from(Array(size).keys()).map((i) => i + startAt)
+}
+
+export function safelistEffects(effects: Data['effects']) {
+  const opacitiesPrefix = ['text', 'bg', 'shadow']
+
+  const opacities = Object.keys(effects.opacity).flatMap((opacity) =>
+    opacitiesPrefix.map((prefix) => `${prefix}-${opacity}`),
+  )
+
+  const shadows = Object.keys(effects.boxShadow).flatMap(
+    (shadow) => `shadow-${shadow}`,
+  )
+
+  return [...opacities, ...shadows]
+}
+
+export function safelistIconSizes() {
+  return [
+    'icon-size-small',
+    'icon-size-medium',
+    'icon-size-large',
+    'icon-size-x-large',
+    'icon-size-giga',
+  ]
+}
+
+export function safelistTypography() {
+  return [
+    'fonts-display-large',
+    'fonts-display-medium',
+    'fonts-display-small',
+    'fonts-heading-h1',
+    'fonts-heading-h2',
+    'fonts-heading-h3',
+    'fonts-heading-h4',
+    'fonts-body-x-large-regular',
+    'fonts-body-x-large-bold',
+    'fonts-body-large-regular',
+    'fonts-body-large-bold',
+    'fonts-body-medium-regular',
+    'fonts-body-medium-bold',
+    'fonts-body-small-regular',
+    'fonts-body-small-bold',
+    'fonts-link-inline-large',
+    'fonts-link-inline-medium',
+    'fonts-link-inline-small',
+    'fonts-overline-small',
+  ]
+}

package/dist/cli/src/cli.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cli/src/commands/create:component.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cli/src/commands/generate:plugin.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cli/src/commands/generate:types.d.ts

@@ -1,7 +0,0 @@
-import type { GluegunToolbox } from 'gluegun';
-declare const _default: {
-    name: string;
-    description: string;
-    run: (toolbox: GluegunToolbox) => Promise<void>;
-};
-export default _default;

package/dist/cli/src/commands/girassol-cli.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/cli/src/extensions/cli-extension.d.ts

@@ -1 +0,0 @@
-export {};

package/dist/theme/solfacil/borders.d.ts

@@ -1,18 +0,0 @@
-declare const _default: {
-    borderRadius: {
-        none: number;
-        sm: string;
-        md: string;
-        lg: string;
-        full: string;
-        half: string;
-    };
-    borderWidth: {
-        none: number;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-    };
-};
-export default _default;

package/dist/theme/solfacil/colors.d.ts

@@ -1,63 +0,0 @@
-declare const _default: {
-    brand: {
-        primary: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-        secondary: {
-            medium: string;
-            light: string;
-            pure: string;
-            dark: string;
-        };
-    };
-    highlight: {
-        pure: string;
-        light: string;
-        medium: string;
-        dark: string;
-    };
-    neutral: {
-        low: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-        high: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-    };
-    feedback: {
-        positive: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-        warning: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-        informative: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-        negative: {
-            pure: string;
-            light: string;
-            medium: string;
-            dark: string;
-        };
-    };
-};
-export default _default;

package/dist/theme/solfacil/effects.d.ts

@@ -1,17 +0,0 @@
-declare const _default: {
-    opacity: {
-        DEFAULT: number;
-        semiopaque: number;
-        intense: number;
-        medium: number;
-        light: number;
-        none: number;
-    };
-    boxShadow: {
-        weak: string;
-        moderate: string;
-        intense: string;
-        strong: string;
-    };
-};
-export default _default;

package/dist/theme/solfacil/index.d.ts

@@ -1,18 +0,0 @@
-import colors from './colors';
-import typography from './typography';
-import borders from './borders';
-import spacing from './spacing';
-import effects from './effects';
-import misc from './miscs';
-import { screens } from './screens';
-export { colors, typography, spacing, borders, effects, misc, screens, };
-export declare const utilities: {
-    componentTypos: import("windicss/types/interfaces").PluginOutput;
-    outlinesForFocus: import("windicss/types/interfaces").PluginOutput;
-    maxLines: import("windicss/types/interfaces").PluginOutput;
-    debug: import("windicss/types/interfaces").PluginOutput;
-    placeholder: import("windicss/types/interfaces").PluginOutput;
-    scrollbarBase: import("windicss/types/interfaces").PluginOutput;
-    iconSizes: import("windicss/types/interfaces").PluginOutput;
-    resetFillFields: import("windicss/types/interfaces").PluginOutput;
-};

package/dist/theme/solfacil/miscs.d.ts

@@ -1,144 +0,0 @@
-declare const _default: {
-    width: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-        'fit-content': string;
-    };
-    height: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    minHeight: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    maxHeight: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    minWidth: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    maxWidth: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    spacing: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-    };
-    colors: {
-        transparent: string;
-    };
-    outline: {
-        focused: string;
-        'focused-invert': string;
-    };
-};
-export default _default;

package/dist/theme/solfacil/screens.d.ts

@@ -1,29 +0,0 @@
-export declare const screens: {
-    'xsm:site': {
-        max: string;
-    };
-    'sm:site': {
-        min: string;
-    };
-    'md:site': {
-        min: string;
-    };
-    'lg:site': {
-        min: string;
-    };
-    'xlg:site': {
-        min: string;
-    };
-    'xsm:system': {
-        max: string;
-    };
-    'sm:system': {
-        min: string;
-    };
-    'md:system': {
-        min: string;
-    };
-    'lg:system': {
-        min: string;
-    };
-};

package/dist/theme/solfacil/spacing.d.ts

@@ -1,64 +0,0 @@
-export declare const sizings: {
-    quark: string;
-    nano: string;
-    micro: string;
-    '4xs': string;
-    '3xs': string;
-    '2xs': string;
-    xs: string;
-    sm: string;
-    md: string;
-    lg: string;
-    xl: string;
-    '2xl': string;
-    '3xl': string;
-    mega: string;
-    '2mega': string;
-    '3mega': string;
-    giga: string;
-};
-declare const _default: {
-    padding: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-        auto: string;
-        '0': string;
-    };
-    margin: {
-        quark: string;
-        nano: string;
-        micro: string;
-        '4xs': string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        mega: string;
-        '2mega': string;
-        '3mega': string;
-        giga: string;
-        auto: string;
-        '0': string;
-    };
-};
-export default _default;

package/dist/theme/solfacil/typography.d.ts

@@ -1,41 +0,0 @@
-declare const _default: {
-    fontFamily: {
-        sans: string[];
-        base: string[];
-        highlight: string[];
-    };
-    fontSize: {
-        micro: string;
-        '3xs': string;
-        '2xs': string;
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        '2xl': string;
-        '3xl': string;
-        huge: string;
-        mega: string;
-        giga: string;
-    };
-    lineHeight: {
-        default: number;
-        xs: number;
-        sm: number;
-        md: number;
-        lg: number;
-        xl: number;
-        '2xl': number;
-    };
-    fontWeight: {
-        regular: number;
-        bold: number;
-    };
-    letterSpacing: {
-        default: string;
-        md: string;
-        sm: string;
-    };
-};
-export default _default;

package/dist/theme/solfacil/utilities.d.ts

@@ -1,8 +0,0 @@
-export declare const componentTypos: import("windicss/types/interfaces").PluginOutput;
-export declare const outlinesForFocus: import("windicss/types/interfaces").PluginOutput;
-export declare const maxLines: import("windicss/types/interfaces").PluginOutput;
-export declare const debug: import("windicss/types/interfaces").PluginOutput;
-export declare const placeholder: import("windicss/types/interfaces").PluginOutput;
-export declare const scrollbarBase: import("windicss/types/interfaces").PluginOutput;
-export declare const iconSizes: import("windicss/types/interfaces").PluginOutput;
-export declare const resetFillFields: import("windicss/types/interfaces").PluginOutput;

package/dist/types/components/accordion/accordion.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/components/breadcrumb/breadcrumb.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/components/collapsible/collapsible.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/components/date-picker/datepicker.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/components/empty-state/empty-state.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/components/file-upload/file-upload.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/types/components/filters/chip/removable-chip/removable-chip.spec.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';