@hiscovega/grisso 1.0.0

package/lib/defaults.js

@@ -0,0 +1,97 @@
+/**
+ * Configuración por defecto de Grisso.
+ * Equivale a grisso.config.scss.
+ */
+const defaults = {
+    columns: 12,
+    breakpoints: {
+        tablet: "(min-width: 700px)",
+        desktop: "(min-width: 1024px)",
+        ultrawide: "(min-width: 1680px)",
+    },
+    spacing: {
+        auto: "auto",
+        zero: "0",
+        "0": "0",
+        "4xs": "var(--spc-4xs)",
+        "3xs": "var(--spc-3xs)",
+        "2xs": "var(--spc-2xs)",
+        xs: "var(--spc-xs)",
+        sm: "var(--spc-sm)",
+        md: "var(--spc-md)",
+        lg: "var(--spc-lg)",
+        xl: "var(--spc-xl)",
+        "2xl": "var(--spc-2xl)",
+        "3xl": "var(--spc-3xl)",
+        "4xl": "var(--spc-4xl)",
+        "5xl": "var(--spc-5xl)",
+    },
+    brandColors: {
+        "1": "var(--brand-1)",
+        "2": "var(--brand-2)",
+        "3": "var(--brand-3)",
+    },
+    foregroundColors: {
+        "1": "var(--text-1)",
+        "2": "var(--text-2)",
+        "3": "var(--text-3)",
+        "4": "var(--text-4)",
+    },
+    iconColors: {
+        "1": "var(--icon-1)",
+        "2": "var(--icon-2)",
+        "3": "var(--icon-3)",
+        "4": "var(--icon-4)",
+        disabled: "var(--icon-disabled)",
+    },
+    supportColors: {
+        success: "var(--success)",
+        error: "var(--error)",
+        warning: "var(--warning)",
+    },
+    backgroundColors: {
+        ui: "var(--bg-ui)",
+        "1": "var(--bg-1)",
+        "2": "var(--bg-2)",
+        "3": "var(--bg-3)",
+        "4": "var(--bg-4)",
+        "5": "var(--bg-5)",
+        disabled: "var(--bg-disabled)",
+    },
+    overlayColors: {
+        "1": "var(--overlay-1)",
+        "2": "var(--overlay-2)",
+        "3": "var(--overlay-3)",
+        "4": "var(--overlay-4)",
+    },
+    borderWidth: {
+        none: "var(--border-width-none)",
+        xs: "var(--border-width-xs)",
+        sm: "var(--border-width-sm)",
+        md: "var(--border-width-md)",
+        lg: "var(--border-width-lg)",
+    },
+    opacity: {
+        "0": "0",
+        "1": "var(--opacity-1)",
+        "2": "var(--opacity-2)",
+        "3": "var(--opacity-3)",
+        "4": "var(--opacity-4)",
+        "5": "var(--opacity-5)",
+        "6": "var(--opacity-6)",
+    },
+    shadows: {
+        sm: "var(--box-shadow-sm)",
+        md: "var(--box-shadow-md)",
+        lg: "var(--box-shadow-lg)",
+        xl: "var(--box-shadow-xl)",
+    },
+    borderColors: {
+        "1": "var(--border-1)",
+        "2": "var(--border-2)",
+        "3": "var(--border-3)",
+        "4": "var(--border-4)",
+        disabled: "var(--border-disabled)",
+    },
+};
+export default defaults;

package/lib/generators.d.ts

@@ -0,0 +1,20 @@
+import type { Breakpoints, TokenMap, Declarations } from "./types.js";
+/**
+ * Generadores de clases CSS utility.
+ * Replican los mixins grisso_simple_class, grisso_complex_class de SCSS.
+ */
+/**
+ * Genera una clase simple con variantes responsive.
+ * Equivalente al mixin grisso_simple_class.
+ */
+export declare function simpleClass(className: string, property: string, value: string, breakpoints: Breakpoints): string;
+/**
+ * Genera clases basadas en un mapa de tokens con variantes responsive.
+ * Equivalente al mixin grisso_complex_class.
+ */
+export declare function complexClass(prefix: string, properties: string | string[], tokens: TokenMap, breakpoints: Breakpoints): string;
+/**
+ * Genera una clase con declaraciones custom y variantes responsive.
+ * Para casos especiales: divide >*+*, truncate, smoothing, outline-none, etc.
+ */
+export declare function customClass(className: string, declarations: Declarations, breakpoints: Breakpoints, selectorSuffix?: string): string;

package/lib/generators.js

@@ -0,0 +1,49 @@
+/**
+ * Generadores de clases CSS utility.
+ * Replican los mixins grisso_simple_class, grisso_complex_class de SCSS.
+ */
+/**
+ * Genera una clase simple con variantes responsive.
+ * Equivalente al mixin grisso_simple_class.
+ */
+export function simpleClass(className, property, value, breakpoints) {
+    let css = `.${className} { ${property}: ${value}; }\n`;
+    for (const [bp, mq] of Object.entries(breakpoints)) {
+        css += `@media ${mq} { .${bp}-${className} { ${property}: ${value}; } }\n`;
+    }
+    return css;
+}
+/**
+ * Genera clases basadas en un mapa de tokens con variantes responsive.
+ * Equivalente al mixin grisso_complex_class.
+ */
+export function complexClass(prefix, properties, tokens, breakpoints) {
+    const props = Array.isArray(properties) ? properties : [properties];
+    let css = "";
+    for (const [name, value] of Object.entries(tokens)) {
+        for (const prop of props) {
+            css += `.${prefix}${name} { ${prop}: ${value}; }\n`;
+        }
+        for (const [bp, mq] of Object.entries(breakpoints)) {
+            for (const prop of props) {
+                css += `@media ${mq} { .${bp}-${prefix}${name} { ${prop}: ${value}; } }\n`;
+            }
+        }
+    }
+    return css;
+}
+/**
+ * Genera una clase con declaraciones custom y variantes responsive.
+ * Para casos especiales: divide >*+*, truncate, smoothing, outline-none, etc.
+ */
+export function customClass(className, declarations, breakpoints, selectorSuffix) {
+    const suffix = selectorSuffix || "";
+    const decls = Object.entries(declarations)
+        .map(([p, v]) => `${p}: ${v}`)
+        .join("; ");
+    let css = `.${className}${suffix} { ${decls}; }\n`;
+    for (const [bp, mq] of Object.entries(breakpoints)) {
+        css += `@media ${mq} { .${bp}-${className}${suffix} { ${decls}; } }\n`;
+    }
+    return css;
+}

package/lib/index.d.ts

@@ -0,0 +1,9 @@
+import { resolveConfig } from "./resolve-config.js";
+/**
+ * Genera el CSS completo de Grisso.
+ *
+ * @param configPath - Ruta a grisso.config.mjs del consumidor
+ * @returns CSS raw (sin minificar, sin vendor prefixes)
+ */
+export declare function generateCSS(configPath?: string): Promise<string>;
+export { resolveConfig };

package/lib/index.js

@@ -0,0 +1,17 @@
+import { resolveConfig } from "./resolve-config.js";
+import partials from "./partials/index.js";
+/**
+ * Genera el CSS completo de Grisso.
+ *
+ * @param configPath - Ruta a grisso.config.mjs del consumidor
+ * @returns CSS raw (sin minificar, sin vendor prefixes)
+ */
+export async function generateCSS(configPath) {
+    const config = await resolveConfig(configPath);
+    let css = "";
+    for (const partial of partials) {
+        css += partial(config);
+    }
+    return css;
+}
+export { resolveConfig };

package/lib/partials/backgrounds.d.ts

@@ -0,0 +1,2 @@
+import type { GrissoConfig } from "../types.js";
+export default function backgrounds(config: GrissoConfig): string;

package/lib/partials/backgrounds.js

@@ -0,0 +1,64 @@
+import { complexClass } from "../generators.js";
+export default function backgrounds(config) {
+    const { breakpoints, backgroundColors } = config;
+    let css = "";
+    // background-color
+    css += complexClass("bg-", "background-color", backgroundColors, breakpoints);
+    // background-attachment
+    const bgAttachment = {
+        fixed: "fixed",
+        local: "local",
+        scroll: "scroll",
+    };
+    css += complexClass("bg-", "background-attachment", bgAttachment, breakpoints);
+    // background-clip
+    const bgClip = {
+        border: "border-box",
+        padding: "padding-box",
+        content: "content-box",
+        text: "text",
+    };
+    css += complexClass("bg-clip-", "background-clip", bgClip, breakpoints);
+    // background-origin
+    const bgOrigin = {
+        border: "border-box",
+        padding: "padding-box",
+        content: "content-box",
+    };
+    css += complexClass("bg-origin-", "background-origin", bgOrigin, breakpoints);
+    // background-position
+    const bgPosition = {
+        bottom: "bottom",
+        center: "center",
+        left: "left",
+        "left-bottom": "left bottom",
+        "left-top": "left top",
+        right: "right",
+        "right-bottom": "right bottom",
+        "right-top": "right top",
+        top: "top",
+    };
+    css += complexClass("bg-", "background-position", bgPosition, breakpoints);
+    // background-repeat
+    const bgRepeat = {
+        repeat: "repeat",
+        "no-repeat": "no-repeat",
+        "repeat-x": "repeat-x",
+        "repeat-y": "repeat-y",
+        "repeat-round": "round",
+        "repeat-space": "space",
+    };
+    css += complexClass("bg-", "background-repeat", bgRepeat, breakpoints);
+    // background-size
+    const bgSize = {
+        auto: "auto",
+        cover: "cover",
+        contain: "contain",
+        inherit: "inherit",
+        initial: "initial",
+        revert: "revert",
+        unset: "unset",
+    };
+    css += complexClass("bg-", "background-size", bgSize, breakpoints);
+    return css;
+}

package/lib/partials/borders.d.ts

@@ -0,0 +1,2 @@
+import type { GrissoConfig } from "../types.js";
+export default function borders(config: GrissoConfig): string;

package/lib/partials/borders.js

@@ -0,0 +1,55 @@
+import { complexClass, customClass } from "../generators.js";
+export default function borders(config) {
+    const { breakpoints, borderWidth, borderColors } = config;
+    let css = "";
+    // Variables locales (equivale a borders/vars.scss)
+    const extendedColors = {
+        ...borderColors,
+        inherit: "inherit",
+        current: "currentColor",
+        transparent: "transparent",
+    };
+    const borderStyle = {
+        solid: "solid",
+        dashed: "dashed",
+        dotted: "dotted",
+        double: "double",
+        hidden: "hidden",
+        none: "none",
+    };
+    // border-width
+    css += complexClass("border-", "border-width", borderWidth, breakpoints);
+    // border-style
+    css += complexClass("border-", "border-style", borderStyle, breakpoints);
+    // divide-color
+    for (const [key, value] of Object.entries(extendedColors)) {
+        css += customClass(`divide-${key}`, { "border-color": value }, breakpoints, " > * + *");
+    }
+    // divide-width
+    for (const [key, value] of Object.entries(borderWidth)) {
+        css += customClass(`divide-x-${key}`, { "border-right-width": value, "border-left-width": value }, breakpoints, " > * + *");
+        css += customClass(`divide-y-${key}`, { "border-top-width": value, "border-bottom-width": value }, breakpoints, " > * + *");
+    }
+    css += customClass("divide-x", { "border-right-width": "0", "border-left-width": "1px" }, breakpoints, " > * + *");
+    css += customClass("divide-y", { "border-top-width": "1px", "border-bottom-width": "0" }, breakpoints, " > * + *");
+    // divide-style
+    for (const [key, value] of Object.entries(borderStyle)) {
+        css += customClass(`divide-${key}`, { "border-style": value }, breakpoints, " > * + *");
+    }
+    // outline-color
+    css += complexClass("outline-", "outline-color", extendedColors, breakpoints);
+    // outline-width
+    css += complexClass("outline-", "outline-width", borderWidth, breakpoints);
+    // outline-style
+    const outlineStyle = {
+        outline: "solid",
+        "outline-dashed": "dashed",
+        "outline-dotted": "dotted",
+        "outline-double": "double",
+    };
+    css += complexClass("", "outline-style", outlineStyle, breakpoints);
+    css += customClass("outline-none", { outline: "2px solid transparent", "outline-offset": "2px" }, breakpoints);
+    // outline-offset
+    css += complexClass("outline-offset-", "outline-offset", borderWidth, breakpoints);
+    return css;
+}

package/lib/partials/effects.d.ts

@@ -0,0 +1,2 @@
+import type { GrissoConfig } from "../types.js";
+export default function effects(config: GrissoConfig): string;

package/lib/partials/effects.js

@@ -0,0 +1,17 @@
+import { complexClass } from "../generators.js";
+export default function effects(config) {
+    const { breakpoints, opacity, shadows, overlayColors } = config;
+    let css = "";
+    // opacity
+    css += complexClass("opacity-", "opacity", opacity, breakpoints);
+    // box-shadow
+    const extendedShadows = {
+        ...shadows,
+        inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)",
+        none: "0 0 #0000",
+    };
+    css += complexClass("shadow-", "box-shadow", extendedShadows, breakpoints);
+    // overlay (background-color)
+    css += complexClass("overlay-", "background-color", overlayColors, breakpoints);
+    return css;
+}

package/lib/partials/flex-and-grid.d.ts

@@ -0,0 +1,2 @@
+import type { GrissoConfig } from "../types.js";
+export default function flexAndGrid(config: GrissoConfig): string;

package/lib/partials/flex-and-grid.js

@@ -0,0 +1,195 @@
+import { simpleClass, complexClass } from "../generators.js";
+import { omit } from "../utils.js";
+export default function flexAndGrid(config) {
+    const { columns, breakpoints, spacing } = config;
+    let css = "";
+    // flex-direction
+    const direction = {
+        row: "row",
+        "row-reverse": "row-reverse",
+        col: "column",
+        "col-reverse": "column-reverse",
+    };
+    css += complexClass("flex-", "flex-direction", direction, breakpoints);
+    // flex-wrap
+    const wrap = {
+        wrap: "wrap",
+        "wrap-reverse": "wrap-reverse",
+        nowrap: "nowrap",
+    };
+    css += complexClass("flex-", "flex-wrap", wrap, breakpoints);
+    // flex (shorthand)
+    const flex = {
+        "1": "1 1 0",
+        auto: "1 1 auto",
+        initial: "0 1 auto",
+        none: "none",
+    };
+    css += complexClass("flex-", "flex", flex, breakpoints);
+    // flex-grow
+    css += simpleClass("grow", "flex-grow", "1", breakpoints);
+    css += simpleClass("grow-0", "flex-grow", "0", breakpoints);
+    // flex-shrink
+    css += simpleClass("shrink", "flex-shrink", "1", breakpoints);
+    css += simpleClass("shrink-0", "flex-shrink", "0", breakpoints);
+    // order
+    for (let i = 1; i <= columns; i++) {
+        css += simpleClass(`order-${i}`, "order", String(i), breakpoints);
+    }
+    css += simpleClass("order-first", "order", "-9999", breakpoints);
+    css += simpleClass("order-last", "order", "9999", breakpoints);
+    css += simpleClass("order-none", "order", "0", breakpoints);
+    // justify-items
+    const justifyItems = {
+        start: "start",
+        end: "end",
+        center: "center",
+        stretch: "stretch",
+    };
+    css += complexClass("justify-items-", "justify-items", justifyItems, breakpoints);
+    // justify-content
+    const justifyContent = {
+        normal: "normal",
+        start: "flex-start",
+        end: "flex-end",
+        center: "center",
+        between: "space-between",
+        around: "space-around",
+        evenly: "space-evenly",
+        stretch: "stretch",
+    };
+    css += complexClass("justify-", "justify-content", justifyContent, breakpoints);
+    // align-items
+    const alignItems = {
+        start: "flex-start",
+        end: "flex-end",
+        center: "center",
+        baseline: "baseline",
+        stretch: "stretch",
+    };
+    css += complexClass("items-", "align-items", alignItems, breakpoints);
+    // align-content
+    const alignContent = {
+        normal: "normal",
+        center: "center",
+        start: "flex-start",
+        end: "flex-end",
+        between: "space-between",
+        around: "space-around",
+        evenly: "space-evenly",
+        baseline: "baseline",
+        stretch: "stretch",
+    };
+    css += complexClass("content-", "align-content", alignContent, breakpoints);
+    // align-self
+    const alignSelf = {
+        auto: "normal",
+        start: "flex-start",
+        end: "flex-end",
+        center: "center",
+        baseline: "baseline",
+        stretch: "stretch",
+    };
+    css += complexClass("self-", "align-self", alignSelf, breakpoints);
+    // justify-self
+    const justifySelf = {
+        auto: "auto",
+        start: "start",
+        end: "end",
+        center: "center",
+        stretch: "stretch",
+    };
+    css += complexClass("justify-self-", "justify-self", justifySelf, breakpoints);
+    // grid-template-columns
+    for (let i = 1; i <= columns; i++) {
+        css += simpleClass(`grid-cols-${i}`, "grid-template-columns", `repeat(${i}, minmax(0, 1fr))`, breakpoints);
+    }
+    css += simpleClass("grid-cols-none", "grid-template-columns", "none", breakpoints);
+    // grid-column start/end
+    css += simpleClass("col-auto", "grid-column", "auto", breakpoints);
+    for (let i = 1; i <= columns; i++) {
+        css += simpleClass(`col-span-${i}`, "grid-column", `span ${i} / span ${i}`, breakpoints);
+        css += simpleClass(`col-start-${i}`, "grid-column-start", String(i), breakpoints);
+        css += simpleClass(`col-end-${i}`, "grid-column-end", String(i), breakpoints);
+    }
+    css += simpleClass("col-end-13", "grid-column-end", "13", breakpoints);
+    css += simpleClass("col-span-full", "grid-column", "1 / -1", breakpoints);
+    css += simpleClass("col-start-auto", "grid-column-start", "auto", breakpoints);
+    css += simpleClass("col-end-auto", "grid-column-end", "auto", breakpoints);
+    // grid-template-rows
+    for (let i = 1; i <= columns; i++) {
+        css += simpleClass(`grid-rows-${i}`, "grid-template-rows", `repeat(${i}, minmax(0, 1fr))`, breakpoints);
+    }
+    css += simpleClass("grid-rows-none", "grid-template-rows", "none", breakpoints);
+    // grid-row start/end
+    css += simpleClass("row-auto", "grid-row", "auto", breakpoints);
+    for (let i = 1; i <= columns; i++) {
+        css += simpleClass(`row-span-${i}`, "grid-row", `span ${i} / span ${i}`, breakpoints);
+        css += simpleClass(`row-start-${i}`, "grid-row-start", String(i), breakpoints);
+        css += simpleClass(`row-end-${i}`, "grid-row-end", String(i), breakpoints);
+    }
+    css += simpleClass("row-span-full", "grid-row", "1 / -1", breakpoints);
+    css += simpleClass("row-start-auto", "grid-row-start", "auto", breakpoints);
+    css += simpleClass("row-end-auto", "grid-row-end", "auto", breakpoints);
+    // grid-auto-flow
+    const autoFlow = {
+        row: "row",
+        col: "column",
+        dense: "dense",
+        "row-dense": "row dense",
+        "col-dense": "column dense",
+    };
+    css += complexClass("grid-flow-", "grid-auto-flow", autoFlow, breakpoints);
+    // grid-auto-columns
+    const autoColumns = {
+        auto: "auto",
+        min: "min-content",
+        max: "max-content",
+        fr: "minmax(0, 1fr)",
+    };
+    css += complexClass("auto-cols-", "grid-auto-columns", autoColumns, breakpoints);
+    // grid-auto-rows
+    const autoRows = {
+        auto: "auto",
+        min: "min-content",
+        max: "max-content",
+        fr: "minmax(0, 1fr)",
+    };
+    css += complexClass("auto-rows-", "grid-auto-rows", autoRows, breakpoints);
+    // gap
+    const gap = omit(spacing, "auto");
+    css += complexClass("gap-", "gap", gap, breakpoints);
+    css += complexClass("gap-x-", "column-gap", gap, breakpoints);
+    css += complexClass("gap-y-", "row-gap", gap, breakpoints);
+    // place-content
+    const placeContent = {
+        center: "center",
+        start: "start",
+        end: "end",
+        between: "space-between",
+        around: "space-around",
+        evenly: "space-evenly",
+        baseline: "baseline",
+        stretch: "stretch",
+    };
+    css += complexClass("place-content-", "place-content", placeContent, breakpoints);
+    // place-items
+    const placeItems = {
+        start: "start",
+        end: "end",
+        center: "center",
+        baseline: "baseline",
+        stretch: "stretch",
+    };
+    css += complexClass("place-items-", "place-items", placeItems, breakpoints);
+    // place-self
+    const placeSelf = {
+        auto: "auto",
+        start: "start",
+        end: "end",
+        center: "center",
+        stretch: "stretch",
+    };
+    css += complexClass("place-self-", "place-self", placeSelf, breakpoints);
+    return css;
+}

package/lib/partials/icons.d.ts

@@ -0,0 +1,2 @@
+import type { GrissoConfig } from "../types.js";
+export default function icons(config: GrissoConfig): string;

package/lib/partials/icons.js

@@ -0,0 +1,5 @@
+import { complexClass } from "../generators.js";
+export default function icons(config) {
+    const { breakpoints, iconColors } = config;
+    return complexClass("icon-", "color", iconColors, breakpoints);
+}

package/lib/partials/index.d.ts

@@ -0,0 +1,7 @@
+import type { PartialFn } from "../types.js";
+/**
+ * Registry de partials en el orden de importación de grisso.scss.
+ * El orden determina la cascada CSS.
+ */
+declare const partials: PartialFn[];
+export default partials;

package/lib/partials/index.js

@@ -0,0 +1,25 @@
+import layout from "./layout.js";
+import flexAndGrid from "./flex-and-grid.js";
+import spacingPartial from "./spacing.js";
+import sizing from "./sizing.js";
+import backgrounds from "./backgrounds.js";
+import borders from "./borders.js";
+import typography from "./typography.js";
+import effects from "./effects.js";
+import icons from "./icons.js";
+/**
+ * Registry de partials en el orden de importación de grisso.scss.
+ * El orden determina la cascada CSS.
+ */
+const partials = [
+    layout,
+    flexAndGrid,
+    spacingPartial,
+    sizing,
+    backgrounds,
+    borders,
+    typography,
+    effects,
+    icons,
+];
+export default partials;

package/lib/partials/layout.d.ts

@@ -0,0 +1,2 @@
+import type { GrissoConfig } from "../types.js";
+export default function layout(config: GrissoConfig): string;