@massimo-cassandro/minimo 0.1.12 → 0.2.0

package/src/design-tokens/form.minimo.tokens.jsonc

@@ -0,0 +1,295 @@
+{
+  "form": {
+
+    "label": {
+      "font" : {
+        "size": {
+          "$value": "{font.size.sm}",
+          "$type": "dimension"
+        },
+        "weight": {
+          "$value": "{font.weight.semibold}",
+          "$type": "fontWeight"
+        }
+      },
+      "color": {
+        "$value": "{text.color}",
+        "$type": "color"
+      }
+    },
+    "group": {
+      "padding-block": {
+        "$value": "0 {size.base}",
+        "$type": "dimension"
+      }
+    },
+    "input-group": {
+      "background": {
+        "color": {
+          "$value": "transparent",
+          "$type": "color"
+        }
+      }
+    },
+
+    "control": {
+      "text": {
+        "color": {
+          "$value": "{text.color}",
+          "$type": "color"
+        }
+      },
+      "font": {
+        "style": {
+          "$value": "normal",
+          "$type": "string"
+        },
+        "weight": {
+          "$value": "{font.weight.regular}",
+          "$type": "fontWeight"
+        },
+        "size": {
+          "$value": "{font.size.base}",
+          "$type": "dimension"
+        }
+      },
+
+      "background": {
+        "color": {
+          "$value": "{body.background.color}",
+          "$type": "color"
+        }
+      },
+
+      "padding": {
+        "inline": {
+          "$value": "{size.sm}",
+          "$type": "dimension"
+        },
+        "block": {
+          "$value": "{size.xs}",
+          "$type": "dimension"
+        }
+      },
+
+      "border": {
+        "color": {
+          "$value": "#666",
+          "$type": "color"
+        },
+        "width": {
+          "$value": "1px",
+          "$type": "dimension"
+        },
+        "radius": {
+          "$value": "{radius.xxs}",
+          "$type": "dimension"
+        }
+      },
+
+      "placeholder": {
+        "color": {
+          "$value": "#666",
+          "$type": "color"
+        },
+        "opacity": {
+          "$value": 0.8,
+          "$type": "number"
+        },
+        "font": {
+          "size": {
+            "$value": "{form.control.font.size}",
+            "$type": "dimension"
+          },
+          "style": {
+            "$value": "italic",
+            "$type": "string"
+          }
+        }
+      },
+
+      "disabled": {
+        "background": {
+          "color": {
+            "$value": "#999",
+            "$type": "color"
+          }
+        },
+        "opacity": {
+          "$value": ".3",
+          "$type": "number"
+        }
+      },
+      "required": {
+        "flag-color": {
+          "$value": "#c00",
+          "$type": "color"
+        },
+        "flag-content": {
+          "$value": "'\\002A'",
+          "$type": "string"
+        }
+      },
+      "focus": {
+        "color": {
+          "$value": "hsl(205 69% 45% / .508)",
+          "$type": "color"
+        },
+        "outline": {
+          "width": {
+            "$value": "4px",
+            "$type": "dimension"
+          }
+        }
+      },
+
+      "xs": {
+        "font": {
+          "size": {
+            "$value": "{font.size.xs}",
+            "$type": "dimension"
+          }
+        },
+        "padding": {
+          "inline": {
+            "$value": "{size.xxs}",
+            "$type": "dimension"
+          },
+          "block": {
+            "$value": "{size.xxs}",
+            "$type": "dimension"
+          }
+        }
+      },
+      "sm": {
+        "font": {
+          "size": {
+            "$value": "{font.size.sm}",
+            "$type": "dimension"
+          }
+        },
+        "padding": {
+          "inline": {
+            "$value": "{size.xs}",
+            "$type": "dimension"
+          },
+          "block": {
+            "$value": "{size.xxs}",
+            "$type": "dimension"
+          }
+        }
+      },
+      "md": {
+        "font": {
+          "size": {
+            "$value": "{font.size.md}",
+            "$type": "dimension"
+          }
+        },
+        "padding": {
+          "inline": {
+            "$value": "{size.sm}",
+            "$type": "dimension"
+          },
+          "block": {
+            "$value": "{size.xs}",
+            "$type": "dimension"
+          }
+        }
+      },
+      "lg": {
+        "font": {
+          "size": {
+            "$value": "{font.size.lg}",
+            "$type": "dimension"
+          }
+        },
+        "padding": {
+          "inline": {
+            "$value": "{size.md}",
+            "$type": "dimension"
+          },
+          "block": {
+            "$value": "{size.base}",
+            "$type": "dimension"
+          }
+        }
+      },
+      "xl": {
+        "font": {
+          "size": {
+            "$value": "{font.size.xl}",
+            "$type": "dimension"
+          }
+        },
+        "padding": {
+          "inline": {
+            "$value": "{size.xl}",
+            "$type": "dimension"
+          },
+          "block": {
+            "$value": "{size.md}",
+            "$type": "dimension"
+          }
+        }
+      },
+
+      // /* TODO importazione automatica SVG (NB problemi con svgo) */
+      // /* url('./css/forms/select-indicator.svg?cssInline'); */
+      "select": {
+        "trigger-icon": {
+          "$value": "url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22rgb(5%2C%2048%2C%2056)%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m2%205%206%206%206-6%22%2F%3E%3C%2Fsvg%3E')",
+          "$type": "string"
+        }
+      }
+    },
+
+    "fieldset": {
+      "border": {
+        "width": {
+          "$value": "1px",
+          "$type": "dimension"
+        }
+      },
+      "legend": {
+        "background": {
+          "color": {
+            "$value": "transparent",
+            "$type": "color"
+          }
+        },
+        "color": {
+          "$value": "{text.color}",
+          "$type": "color"
+        }
+      }
+    },
+
+    "end": {
+      "margin": {
+        "block": {
+          "start": {
+            "$value": "{size.base}",
+            "$type": "dimension"
+          },
+          "end": {
+            "$value": "{size.base}",
+            "$type": "dimension"
+          }
+        }
+      }
+    },
+    "user-info": {
+     "font": {
+        "size": {
+          "$value": "{font.size.xs}",
+          "$type": "dimension"
+        }
+      },
+      "color": {
+        "$value": "{text.muted}",
+        "$type": "color"
+      }
+    }
+  }
+}

package/src/design-tokens/gradients-shadowes.minimo.tokens.jsonc

@@ -0,0 +1,4 @@
+{}
+
+
+// --box-shadow-base: 0 0 1.2rem #00000040;

package/src/design-tokens/headings.minimo.tokens.jsonc

@@ -0,0 +1,57 @@
+{
+
+  "headings": {
+    "text": {
+      "align": {
+        "$type": "string",
+        "$value": "inherit"
+      }
+    },
+    "color": {
+      "$type": "color",
+      "$value": "{text.color}"
+    },
+    "font": {
+      "weight": {
+        "$type": "string",
+        "$value": "{font.weight.semibold}"
+      }
+    },
+    "h1": {
+      "font": {
+        "weight": {
+          "$type": "string",
+          "$value": "{headings.font.weight}"
+        },
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.2xl}"
+        }
+      }
+    },
+    "h2": {
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.xl}"
+        }
+      }
+    },
+    "h3": {
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.lg}"
+        }
+      }
+    },
+    "h4": {
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.size.md}"
+        }
+      }
+    },
+  }
+}

package/src/design-tokens/link.minimo.tokens.jsonc

@@ -0,0 +1,41 @@
+{
+  "link": {
+    "color": {
+      "$type": "color",
+      "$value": "#0d12ae"
+    },
+    "visited": {
+      "color": {
+        "$type": "color",
+        "$value": "#ae0da3"
+      },
+    },
+    "hover": {
+      "color": null
+    },
+    "focus": {
+      "outline": {
+        "color": {
+          "$type": "color",
+          "$value": "{link.color}"
+        },
+        "width": {
+          "$type": "dimension",
+          "$value": "2px"
+        },
+      }
+    },
+    "active": {
+      "color": {
+        "$type": "color",
+        "$value": "#51054C"
+      },
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "transparent"
+        }
+      }
+    }
+  }
+}

package/src/design-tokens/radius.minimo.tokens.jsonc

@@ -0,0 +1,45 @@
+{
+  "radius": {
+
+    "base": {
+      "$value": "{size.base}",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "xxs": {
+      "$value": "{size.xxs}",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "xs": {
+      "$value": "{size.xs}",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "sm": {
+      "$value": "{size.sm}",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "md": {
+      "$value": "{size.md}",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "lg": {
+      "$value": "{size.lg}",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "xl": {
+      "$value": "{size.xl}",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "pill": {
+      "$value": "9999rem",
+      "$type": "dimension",
+      "$description": ""
+    }
+  }
+}

package/src/design-tokens/size.minimo.tokens.jsonc

@@ -0,0 +1,101 @@
+{
+
+
+  // in attesa di modifica dello script per il parser automatico delle espressioni
+  // NB: "$type": "string" necessario, dimension converte i valori come se fossero px
+  "size": {
+    "xs": {
+      "$value": ".5rem",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "md": {
+      "$value": "1.2rem",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "3xl": {
+      "$value": "4rem",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "2xl": {
+      "$value": "3rem",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "base": {
+      "$value": "1rem",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "lg": {
+      "$value": "1.5rem",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "xxs": {
+      "$value": ".25rem",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "xl": {
+      "$value": "2rem",
+      "$type": "dimension",
+      "$description": ""
+    },
+    "sm": {
+      "$value": ".75rem",
+      "$type": "dimension",
+      "$description": ""
+    }
+  },
+
+  // "size": {
+  //   "xxs": {
+  //     "$value": "{size.base} * .25",
+  //     "$type": "dimension",
+  //     "$description": ""
+  //   },
+  //   "xs": {
+  //     "$value": "{size.base} * .5",
+  //     "$type": "dimension",
+  //     "$description": ""
+  //   },
+  //   "sm": {
+  //     "$value": "{size.base} * .75",
+  //     "$type": "dimension",
+  //     "$description": ""
+  //   },
+  //   "base": {
+  //     "$value": "1rem",
+  //     "$type": "dimension",
+  //     "$description": ""
+  //   },
+  //   "md": {
+  //     "$value": "{size.base} * 1.2",
+  //     "$type": "dimension",
+  //     "$description": ""
+  //   },
+  //   "lg": {
+  //     "$value": "{size.base} * 1.5",
+  //     "$type": "dimension",
+  //     "$description": ""
+  //   },
+  //   "xl": {
+  //     "$value": "{size.base} * 2",
+  //     "$type": "dimension",
+  //     "$description": ""
+  //   },
+  //   "2xl": {
+  //     "$value": "{size.base} * 3",
+  //     "$type": "dimension",
+  //     "$description": ""
+  //   },
+  //   "3xl": {
+  //     "$value": "{size.base} * 4",
+  //     "$type": "dimension",
+  //     "$description": ""
+  //   }
+  // }
+}

package/src/design-tokens/status.minimo.tokens.jsonc

@@ -0,0 +1,69 @@
+{
+
+  "status": {
+    "danger": {
+      "color": {
+        "$value": "#c00",
+        "$type": "color"
+      },
+      "fg": {
+        "$value": "#fff",
+        "$type": "color"
+      },
+      "border": {
+        "color": {
+          "$value": "{status.danger.color}",
+          "$type": "color"
+        }
+      }
+    },
+    "success": {
+      "color": {
+        "$value": "#046d19",
+        "$type": "color"
+      },
+      "fg": {
+        "$value": "#fff",
+        "$type": "color"
+      },
+      "border": {
+        "color": {
+          "$value": "{status.success.color}",
+          "$type": "color"
+        }
+      }
+    },
+    "info": {
+      "color": {
+        "$value": "#0665c5",
+        "$type": "color"
+      },
+      "fg": {
+        "$value": "#fff",
+        "$type": "color"
+      },
+      "border": {
+        "color": {
+          "$value": "{status.info.color}",
+          "$type": "color"
+        }
+      }
+    },
+    "warning": {
+      "color": {
+        "$value": "#fc0",
+        "$type": "color"
+      },
+      "fg": {
+        "$value": "#4f2900",
+        "$type": "color"
+      },
+      "border": {
+        "color": {
+          "$value": "{status.warning.color}",
+          "$type": "color"
+        }
+      }
+    },
+  }
+}

package/src/design-tokens/table.minimo.tokens.jsonc

@@ -0,0 +1,66 @@
+{
+  "table": {
+    "thead": {
+      "background": {
+        "color": {
+          "$type": "color",
+          "$value": "#ddd"
+        }
+      },
+      "border": {
+        "width" : {
+          "$type": "dimension",
+          "$value": "3px"
+        }
+      }
+    },
+
+    "body": {
+      "background": {
+        "color": null
+      },
+      "border": {
+        "width" : {
+          "$type": "dimension",
+          "$value": "1px"
+        }
+      },
+      "tr": {
+        "alt-bg-color": {
+          "$type": "color",
+          "$value": "#efefef"
+        },
+        "hover-bg-color": {
+          "$type": "color",
+          "$value": "#cbcbcb"
+        }
+      }
+    },
+
+    "border": {
+      "color" : {
+        "$type": "color",
+        "$value": "#333"
+      }
+    },
+
+    "cell": {
+      "padding" : {
+        "block": {
+          "$type": "dimension",
+          "$value": ".3rem"
+        },
+        "inline": {
+          "$type": "dimension",
+          "$value": ".6rem"
+        }
+      },
+      "line-height": {
+        "$type": "number",
+        "$value": "1.3"
+      }
+    }
+
+
+  }
+}