@massimo-cassandro/minimo 0.1.11 → 0.2.0

package/src/design-tokens/btn-close.minimo.tokens.jsonc

@@ -0,0 +1,95 @@
+{
+  "btn": {
+    "close": {
+      "size": {
+        "$value": "1.5rem",
+        "$type": "dimension"
+      },
+      "padding": {
+        "$value": "3px",
+        "$type": "dimension"
+      },
+      "border": {
+        "width": {
+          "$value": "2px",
+          "$type": "dimension"
+        },
+        "color": {
+          "$value": "{btn.close.icon.color}",
+          "$type": "color"
+        },
+        "radius": {
+          "$value": "50%",
+          "$type": "dimension"
+        }
+        
+      },
+      "background": {
+        "color": {
+          "$value": "{body.background.color}",
+          "$type": "color"
+        },
+        
+      },
+      "icon": {
+        "color": {
+          "$value": "{text.color}",
+          "$type": "color"
+        },
+        "bar": {
+          "size": {
+            "$value": "2px",
+            "$type": "dimension"
+          }
+        }
+
+      },
+
+      "hover": {
+        "background": {
+          "color": {
+            "$value": "{btn.close.icon.color}",
+            "$type": "color"
+          }
+        },
+        "icon": {
+          "color": {
+            "$value": "{btn.close.background.color}",
+            "$type": "color"
+          }
+        }
+      },
+
+      "focus": {
+        "outline": {
+          "width": {
+            "$value": "2px",
+            "$type": "dimension"
+          },
+          "offset": {
+            "$value": "2px",
+            "$type": "dimension"
+          },
+          "color": {
+            "$value": "{link.focus.outline.color}",
+            "$type": "color"
+          }
+        }
+      },
+      "active": {
+        "background": {
+          "color": {
+            "$value": "{link.active.background.color}",
+            "$type": "color"
+          }
+        },
+        "icon": {
+          "color": {
+            "$value": "{link.active.color}",
+            "$type": "color"
+          }
+        }
+      }
+    } // end close
+  } // end btn
+}

package/src/design-tokens/btn-primary.minimo.tokens.jsonc

@@ -0,0 +1,100 @@
+{
+  "btn": {
+    "primary": {
+      "background": {
+        "color": {
+          "$value": "{primary.base}",
+          "$type": "color"
+        }
+      },
+      "color": {
+        "$value": "{primary.on-base}",
+        "$type": "color"
+      },
+
+      "border": {
+        "color": {
+          "$value": "{btn.primary.background.color}",
+          "$type": "color"
+        }
+      },
+
+      "focus": {
+        "outline": {
+          "color": {
+            "$value": "color-mix(in srgb, {btn.primary.background.color} 60%, transparent);",
+            "$type": "color"
+          }
+        }
+      },
+
+      "hover": {
+        "background": {
+          "color": {
+            "$value": "{btn.primary.color}",
+            "$type": "color"
+          }
+        },
+        "color": {
+          "$value": "{btn.primary.background.color}",
+          "$type": "color"
+        },
+
+        "border": {
+          "color": {
+            "$value": "{btn.primary.hover.color}",
+            "$type": "color"
+          }
+        }
+      },
+
+      "active": {
+        "background": {
+          "color": {
+            "$value": "color-mix(in srgb, {btn.primary.background.color} 60%, #000);",
+            "$type": "color"
+          }
+        },
+        "color": {
+          "$value": "{btn.primary.color}",
+          "$type": "color"
+        },
+
+        "border": {
+          "color": {
+            "$value": "{btn.primary.active.background.color}",
+            "$type": "color"
+          }
+        },
+      },
+
+      "hollow": {
+        "background": {
+          "color": {
+            "$value": "{btn.primary.color}",
+            "$type": "color"
+          }
+        },
+        "color": {
+          "$value": "{btn.primary.background.color}",
+          "$type": "color"
+        },
+
+        "hover": {
+          "background": {
+            "color": {
+              "$value": "color-mix(in srgb, {btn.primary.hollow.color} 20%, transparent);",
+              "$type": "color"
+            }
+          },
+          "color": {
+            "$value": "{btn.primary.hollow.color}",
+            "$type": "color"
+          }
+
+        },
+
+      } // end hollow
+    } // end primary
+  } // end btn
+}

package/src/design-tokens/btn-secondary.minimo.tokens.jsonc

@@ -0,0 +1,33 @@
+{
+  "btn": {
+    "secondary": {
+
+      "hollow": {
+
+      } // end hollow
+    } // end secondary
+  } // end btn
+}
+// --btn-secondary-bg-color: var(--_secondary);
+// --btn-secondary-fg-color: var(--_secondary-fg);
+// --btn-secondary-border-color: var(--_secondary);
+// --btn-secondary-hover-bg-color: color-mix(in srgb, var(--_btn-secondary-bg-color) 70%, #000);
+// --btn-secondary-hover-fg-color: var(--_btn-secondary-fg-color);
+// --btn-secondary-hover-border-color: var(--_btn-secondary-hover-bg-color);
+// --btn-secondary-active-bg-color: var(--_btn-secondary-hover-fg-color);
+// --btn-secondary-active-fg-color: var(--_btn-secondary-hover-bg-color);
+// --btn-secondary-active-border-color: var(--_btn-secondary-active-bg-color);
+// --btn-secondary-focus-hollow-color: color-mix(in srgb, var(--_btn-secondary-border-color) 50%, transparent);
+
+
+
+// --btn-o-secondary-bg-color: color-mix(in srgb, var(--_secondary) 5%, transparent);
+// --btn-o-secondary-fg-color: var(--_secondary);
+// --btn-o-secondary-border-color: var(--_secondary);
+// --btn-o-secondary-hover-bg-color: color-mix(in srgb, var(--_secondary) 15%, #fff);
+// --btn-o-secondary-hover-fg-color: var(--_secondary);
+// --btn-o-secondary-hover-border-color: var(--_btn-o-secondary-border-color);
+// --btn-o-secondary-active-bg-color: var(--_secondary);
+// --btn-o-secondary-active-fg-color: var(--_secondary-fg);
+// --btn-o-secondary-active-border-color: var(--_btn-o-secondary-border-color);
+// --btn-o-secondary-focus-hollow-color: color-mix(in srgb, var(--_secondary) 50%, #fff);

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

@@ -0,0 +1,200 @@
+{
+  "btn": {
+
+    "font": {
+      "style": {
+        "$value": "{form.control.font.style}",
+        "$type": "string"
+      },
+      "weight": {
+        "$value": "{form.control.font.weight}",
+        "$type": "fontWeight"
+      },
+      "size": {
+        "$value": "{form.control.font.size}",
+        "$type": "dimension"
+      }
+    },
+    "border": {
+      "radius": {
+        "$value": "{form.control.border.radius}",
+        "$type": "dimension"
+      },
+      "width": {
+        "$value": "{form.control.border.width}",
+        "$type": "dimension"
+      }
+    },
+
+    "hollow": {
+      "border": {
+        "width": {
+          "$value": "{btn.border.width}",
+          "$type": "dimension"
+        }
+      }
+    },
+
+
+    "disabled": {
+      "opacity": {
+        "$value": "{form.control.disabled.opacity}",
+        "$type": ""
+      }
+    },
+
+    "focus": {
+      "outline": {
+        "width": {
+          "$value": "{form.control.focus.outline.width}",
+          "$type": "dimension"
+        }
+      }
+    },
+
+    "padding": {
+      "inline": {
+        "$value": "{size.base}",
+        "$type": "dimension"
+      },
+      "block": {
+        "$value": "{size.xs}",
+        "$type": "dimension"
+      }
+    },
+
+    "xs": {
+      "font": {
+        "size": {
+          "$value": "{font.size.xs}",
+          "$type": "dimension"
+        }
+      },
+      "padding": {
+        "inline": {
+          "$value": "{size.xxs}",
+          "$type": "dimension"
+        },
+        "block": {
+          "$value": "{size.xxs}",
+          "$type": "dimension"
+        }
+      },
+      "focus": {
+        "outline": {
+          "width": {
+            "$value": "1px",
+            "$type": "dimension"
+          }
+        }
+      }
+    },
+    "sm": {
+      "font": {
+        "size": {
+          "$value": "{font.size.sm}",
+          "$type": "dimension"
+        }
+      },
+      "padding": {
+        "inline": {
+          "$value": "{size.xs}",
+          "$type": "dimension"
+        },
+        "block": {
+          "$value": "{size.xxs}",
+          "$type": "dimension"
+        }
+      },
+      "focus": {
+        "outline": {
+          "width": {
+            "$value": "2px",
+            "$type": "dimension"
+          }
+        }
+      }
+    },
+    "md": {
+      "font": {
+        "size": {
+          "$value": "{font.size.md}",
+          "$type": "dimension"
+        }
+      },
+      "padding": {
+        "inline": {
+          "$value": "{size.sm}",
+          "$type": "dimension"
+        },
+        "block": {
+          "$value": "{size.xs}",
+          "$type": "dimension"
+        }
+      },
+      "focus": {
+        "outline": {
+          "width": {
+            "$value": "3px",
+            "$type": "dimension"
+          }
+        }
+      }
+    },
+    "lg": {
+      "font": {
+        "size": {
+          "$value": "{font.size.lg}",
+          "$type": "dimension"
+        }
+      },
+      "padding": {
+        "inline": {
+          "$value": "{size.md}",
+          "$type": "dimension"
+        },
+        "block": {
+          "$value": "{size.base}",
+          "$type": "dimension"
+        }
+      },
+      "focus": {
+        "outline": {
+          "width": {
+            "$value": "4px",
+            "$type": "dimension"
+          }
+        }
+      }
+    },
+    "xl": {
+      "font": {
+        "size": {
+          "$value": "{font.size.xl}",
+          "$type": "dimension"
+        }
+      },
+      "padding": {
+        "inline": {
+          "$value": "{size.xl}",
+          "$type": "dimension"
+        },
+        "block": {
+          "$value": "{size.md}",
+          "$type": "dimension"
+        }
+      },
+      "focus": {
+        "outline": {
+          "width": {
+            "$value": "6px",
+            "$type": "dimension"
+          }
+        }
+      }
+    }
+
+  } // end btn
+}
+
+

package/src/design-tokens/color-accent.minimo.tokens.jsonc

@@ -0,0 +1,13 @@
+{
+  "accent": {
+    "base": {
+      "$value": "#567d0d",
+      "$type": "color"
+    },
+    "on-base": {
+      "$value": "#fff",
+      "$type": "color"
+    }
+  }
+
+}

package/src/design-tokens/color-neutral.minimo.tokens.jsonc

@@ -0,0 +1,12 @@
+{
+  "neutral": {
+    "base": {
+      "$value": "#666",
+      "$type": "color"
+    },
+    "on-base": {
+      "$value": "#fff",
+      "$type": "color"
+    }
+  }
+}

package/src/design-tokens/color-primary.minimo.tokens.jsonc

@@ -0,0 +1,12 @@
+{
+  "primary": {
+    "base": {
+      "$value": "#083865",
+      "$type": "color"
+    },
+    "on-base": {
+      "$value": "#fff",
+      "$type": "color"
+    }
+  }
+}

package/src/design-tokens/color-secondary.minimo.tokens.jsonc

@@ -0,0 +1,12 @@
+{
+  "secondary": {
+    "base": {
+      "$value": "#650853",
+      "$type": "color"
+    },
+    "on-base": {
+      "$value": "#fff",
+      "$type": "color"
+    }
+  }
+}

package/src/design-tokens/flex-grid.minimo.tokens.jsonc

@@ -0,0 +1,18 @@
+{
+  "flex-grid": {
+    "gap": {
+      "$value": "1.5rem",
+      "$type": "dimension"
+    }
+  },
+  "grid": {
+    "cols": {
+      "$value": 3,
+      "$type": "number"
+    },
+    "min-col-width": {
+      "$value": "6rem",
+      "$type": "dimension"
+    }
+  }
+}