{ "id": "button_simple_builder", "mixin": "button_simple", "module": "sisass_components/buttons", "selector": ".button_simple_builder_button", "adapter": "button_simple", "title": "Constructor de button_simple", "description": "Elige un punto de partida visual y ajusta sus parámetros para generar un botón reutilizable.", "option_sets": { "border_styles": [ "none", "solid", "dashed", "dotted", "double", "groove", "ridge", "inset", "outset" ], "cursors": [ "auto", "default", "none", "context-menu", "help", "pointer", "progress", "wait", "cell", "crosshair", "text", "vertical-text", "alias", "copy", "move", "no-drop", "not-allowed", "grab", "grabbing", "e-resize", "n-resize", "ne-resize", "nw-resize", "s-resize", "se-resize", "sw-resize", "w-resize", "ew-resize", "ns-resize", "nesw-resize", "nwse-resize", "col-resize", "row-resize", "all-scroll", "zoom-in", "zoom-out", "inherit", "initial", "revert", "revert-layer", "unset" ] }, "groups": [ { "id": "content", "label": "Contenido", "open": true }, { "id": "dimensions", "label": "Dimensiones", "open": true }, { "id": "colors", "label": "Colores", "open": true }, { "id": "borders", "label": "Bordes" }, { "id": "typography", "label": "Tipografía", "description": "Las fuentes disponibles en el campo Family son las tipografías usadas por esta documentación y solo están cargadas aquí para la vista previa. Si eliges una para tu botón, también debes incorporarla en tu proyecto; de lo contrario, el navegador usará otra fuente disponible y el resultado puede verse diferente." }, { "id": "behavior", "label": "Comportamiento" } ], "fields": [ { "path": "label", "label": "Texto del botón", "group": "content", "control": "text", "default": "Continuar", "full": true, "output": false }, { "path": "width", "key": "width", "aliases": ["w"], "label": "Width", "group": "dimensions", "control": "text", "default": "110px", "css_variable": "--builder-width" }, { "path": "height", "key": "height", "aliases": ["h"], "label": "Height", "group": "dimensions", "control": "text", "default": "47px", "css_variable": "--builder-height" }, { "path": "aspect_ratio", "key": "aspect_ratio", "aliases": ["ratio", "ar"], "preferred_alias": "ar", "label": "Aspect ratio", "help": "opcional", "group": "dimensions", "control": "text", "default": null, "placeholder": "null", "optional": true, "full": true, "css_variable": "--builder-aspect-ratio" }, { "path": "padding", "key": "padding", "aliases": ["p"], "label": "Padding", "group": "dimensions", "control": "text", "default": "10px", "css_variable": "--builder-padding" }, { "path": "bg", "key": "bg", "aliases": [], "label": "Fondo normal", "group": "colors", "control": "color", "default": "#ffffff", "allow_css_value": true, "css_variable": "--builder-bg" }, { "path": "color", "key": "color", "aliases": ["c"], "label": "Texto normal", "group": "colors", "control": "color", "default": "#000000", "allow_css_value": true, "css_variable": "--builder-color" }, { "path": "bg_hover", "key": "bg_hover", "aliases": ["bgh"], "label": "Fondo hover", "group": "colors", "control": "color", "default": "#000000", "allow_css_value": true, "css_variable": "--builder-bg-hover" }, { "path": "color_hover", "key": "color_hover", "aliases": ["ch"], "label": "Texto hover", "group": "colors", "control": "color", "default": "#ffffff", "allow_css_value": true, "css_variable": "--builder-color-hover" }, { "path": "bg_active", "key": "bg_active", "aliases": ["bga"], "label": "Fondo activo", "group": "colors", "control": "color", "default": "#000000", "allow_css_value": true, "css_variable": "--builder-bg-active" }, { "path": "color_active", "key": "color_active", "aliases": ["ca"], "label": "Texto activo", "group": "colors", "control": "color", "default": "#ffffff", "allow_css_value": true, "css_variable": "--builder-color-active" }, { "path": "bg_disabled", "key": "bg_disabled", "aliases": ["bgd"], "label": "Fondo disabled", "group": "colors", "control": "color", "default": "#b2b2b2", "allow_css_value": true, "css_variable": "--builder-bg-disabled" }, { "path": "color_disabled", "key": "color_disabled", "aliases": ["cd"], "label": "Texto disabled", "group": "colors", "control": "color", "default": "#666666", "allow_css_value": true, "css_variable": "--builder-color-disabled" }, { "path": "border_radius", "key": "border-radius", "aliases": ["radius"], "label": "Border radius", "group": "borders", "control": "text", "default": "0px", "css_variable": "--builder-border-radius" }, { "path": "border", "key": "border", "aliases": ["bd"], "label": "Border normal", "group": "borders", "control": "border", "default": "1px solid #000000", "options_source": "border_styles", "full": true, "css_variable": "--builder-border" }, { "path": "border_hover", "key": "border_hover", "aliases": ["bdh"], "label": "Border hover", "group": "borders", "control": "border", "default": "1px solid #000000", "options_source": "border_styles", "full": true, "css_variable": "--builder-border-hover" }, { "path": "border_active", "key": "border_active", "aliases": ["bda"], "label": "Border activo", "group": "borders", "control": "border", "default": "1px solid #000000", "options_source": "border_styles", "full": true, "css_variable": "--builder-border-active" }, { "path": "border_disabled", "key": "border_disabled", "aliases": ["bdd"], "label": "Border disabled", "group": "borders", "control": "border", "default": "1px solid #b2b2b2", "options_source": "border_styles", "full": true, "css_variable": "--builder-border-disabled" }, { "path": "tf.align", "key": "align", "aliases": ["a"], "parent": "tf", "label": "Align", "group": "typography", "control": "select", "default": "left", "options": ["left", "center", "right", "justify"], "css_variable": "--builder-text-align" }, { "path": "tf.transform", "key": "transform", "aliases": ["t"], "parent": "tf", "label": "Transform", "group": "typography", "control": "select", "default": "initial", "options": ["initial", "uppercase", "lowercase", "capitalize"], "css_variable": "--builder-text-transform" }, { "path": "tf.decoration", "key": "decoration", "aliases": ["d"], "parent": "tf", "label": "Decoration", "group": "typography", "control": "select", "default": "initial", "options": ["initial", "none", "underline", "line-through"], "css_variable": "--builder-text-decoration" }, { "path": "tf.wrap", "key": "wrap", "aliases": ["wr"], "parent": "tf", "label": "Wrap", "group": "typography", "control": "select", "default": "initial", "options": ["initial", "nowrap", "wrap", "balance"], "css_variable": "--builder-text-wrap" }, { "path": "tf.size", "key": "size", "aliases": ["s"], "parent": "tf", "label": "Size", "group": "typography", "control": "text", "default": "1rem", "css_variable": "--builder-font-size" }, { "path": "tf.family", "key": "family", "aliases": ["f"], "parent": "tf", "label": "Family", "group": "typography", "control": "select", "default": "sans-serif", "quote": true, "options": [ { "value": "sans-serif", "label": "sans-serif (predeterminada)" }, "Nunito Sans", "Fira Sans", "Montserrat", "Roboto" ], "css_variable": "--builder-font-family" }, { "path": "tf.weight", "key": "weight", "aliases": ["w"], "parent": "tf", "label": "Weight", "group": "typography", "control": "select", "default": "normal", "options": ["normal", "bold", "300", "500", "700", "900"], "css_variable": "--builder-font-weight" }, { "path": "tf.style", "key": "style", "aliases": [], "parent": "tf", "label": "Style", "group": "typography", "control": "select", "default": "normal", "options": ["normal", "italic", "oblique"], "css_variable": "--builder-font-style" }, { "path": "tf.line_height", "key": "line-height", "aliases": ["lh"], "parent": "tf", "label": "Line height", "group": "typography", "control": "text", "default": "none", "css_variable": "--builder-line-height" }, { "path": "tf.variant", "key": "variant", "aliases": ["v"], "parent": "tf", "label": "Variant", "group": "typography", "control": "select", "default": "normal", "options": ["normal", "small-caps"], "css_variable": "--builder-font-variant" }, { "path": "time", "key": "time", "aliases": ["t"], "label": "Time", "group": "behavior", "control": "text", "default": "500ms", "css_variable": "--builder-time" }, { "path": "cursor", "key": "cursor", "aliases": ["cur"], "label": "Cursor", "group": "behavior", "control": "select", "default": "pointer", "options_source": "cursors", "css_variable": "--builder-cursor" }, { "path": "cursor_disabled", "key": "cursor_disabled", "aliases": ["curd"], "label": "Cursor disabled", "group": "behavior", "control": "select", "default": "not-allowed", "options_source": "cursors", "css_variable": "--builder-cursor-disabled" }, { "path": "reset", "key": "reset", "aliases": ["r"], "label": "Aplicar reset inicial (all: initial;)", "group": "behavior", "control": "boolean", "default": true, "full": true } ], "presets": [ { "id": "default", "label": "Por defecto", "values": {} }, { "id": "light", "label": "Claro", "values": { "bg": "#f8fafc", "bg_hover": "#e2e8f0", "bg_active": "#cbd5e1", "bg_disabled": "#e5e7eb", "color": "#0f172a", "color_hover": "#0f172a", "color_active": "#0f172a", "color_disabled": "#64748b", "border_radius": "6px", "border": "1px solid #cbd5e1", "border_hover": "1px solid #94a3b8", "border_active": "1px solid #64748b", "border_disabled": "1px solid #cbd5e1" } }, { "id": "dark", "label": "Oscuro", "values": { "bg": "#334155", "bg_hover": "#1e293b", "bg_active": "#0f172a", "bg_disabled": "#e5e7eb", "color": "#ffffff", "color_hover": "#ffffff", "color_active": "#ffffff", "color_disabled": "#64748b", "border_radius": "6px", "border": "1px solid #334155", "border_hover": "1px solid #1e293b", "border_active": "1px solid #0f172a", "border_disabled": "1px solid #cbd5e1" } }, { "id": "outline", "label": "Con contorno", "values": { "label": "Conocer más", "bg": "transparent", "bg_hover": "#334155", "bg_active": "#0f172a", "color": "#334155", "color_hover": "#ffffff", "color_active": "#ffffff", "color_disabled": "#64748b", "border_radius": "6px", "border": "2px solid #334155", "border_hover": "2px solid #334155", "border_active": "2px solid #0f172a", "border_disabled": "1px solid #cbd5e1" } }, { "id": "disabled", "label": "Deshabilitado", "values": { "label": "No disponible", "bg": "#e5e7eb", "bg_hover": "#e5e7eb", "bg_active": "#e5e7eb", "bg_disabled": "#e5e7eb", "color": "#64748b", "color_hover": "#64748b", "color_active": "#64748b", "color_disabled": "#64748b", "border": "1px solid #cbd5e1", "border_hover": "1px solid #cbd5e1", "border_active": "1px solid #cbd5e1", "border_disabled": "1px solid #cbd5e1" } }, { "id": "custom", "label": "Personalizado", "custom": true } ], "preview": { "default_background": "light", "default_state": "normal", "backgrounds": [ { "id": "light", "label": "Claro" }, { "id": "dark", "label": "Oscuro" } ], "states": [ { "id": "normal", "label": "Normal" }, { "id": "active", "label": "Active" }, { "id": "disabled", "label": "Disabled" } ] } }