@mild-ui/tokens 0.0.0-stage → 1.2.0

package/src/primitives/colors.json

@@ -0,0 +1,267 @@
+{
+  "color": {
+    "blue": {
+      "$description": "Source: $mild-base-colors.blue.",
+      "$type": "color",
+      "50": {
+        "$value": "#f0f9ff"
+      },
+      "100": {
+        "$value": "#e0f2fe"
+      },
+      "200": {
+        "$value": "#bae6fd"
+      },
+      "300": {
+        "$value": "#7dd3fc"
+      },
+      "400": {
+        "$value": "#38bdf8"
+      },
+      "500": {
+        "$value": "#0ea5e9"
+      },
+      "600": {
+        "$value": "#0284c7"
+      },
+      "700": {
+        "$value": "#0369a1"
+      },
+      "800": {
+        "$value": "#075985"
+      },
+      "900": {
+        "$value": "#0c4a6e"
+      },
+      "950": {
+        "$value": "#082f49"
+      }
+    },
+    "gray": {
+      "$description": "Source: $mild-base-colors.gray.",
+      "$type": "color",
+      "50": {
+        "$value": "#f9fafb"
+      },
+      "100": {
+        "$value": "#f3f4f6"
+      },
+      "200": {
+        "$value": "#e5e7eb"
+      },
+      "300": {
+        "$value": "#d1d5db"
+      },
+      "400": {
+        "$value": "#9ca3af"
+      },
+      "500": {
+        "$value": "#6b7280"
+      },
+      "600": {
+        "$value": "#4b5563"
+      },
+      "700": {
+        "$value": "#374151"
+      },
+      "800": {
+        "$value": "#1f2937"
+      },
+      "900": {
+        "$value": "#111827"
+      },
+      "950": {
+        "$value": "#030712"
+      }
+    },
+    "red": {
+      "$description": "Source: $mild-base-colors.red.",
+      "$type": "color",
+      "50": {
+        "$value": "#fef2f2"
+      },
+      "100": {
+        "$value": "#fee2e2"
+      },
+      "200": {
+        "$value": "#fecaca"
+      },
+      "300": {
+        "$value": "#fca5a5"
+      },
+      "400": {
+        "$value": "#f87171"
+      },
+      "500": {
+        "$value": "#ef4444"
+      },
+      "600": {
+        "$value": "#dc2626"
+      },
+      "700": {
+        "$value": "#b91c1c"
+      },
+      "800": {
+        "$value": "#991b1b"
+      },
+      "900": {
+        "$value": "#7f1d1d"
+      },
+      "950": {
+        "$value": "#450a0a"
+      }
+    },
+    "green": {
+      "$description": "Source: $mild-base-colors.green.",
+      "$type": "color",
+      "50": {
+        "$value": "#f0fdf4"
+      },
+      "100": {
+        "$value": "#dcfce7"
+      },
+      "200": {
+        "$value": "#bbf7d0"
+      },
+      "300": {
+        "$value": "#86efac"
+      },
+      "400": {
+        "$value": "#4ade80"
+      },
+      "500": {
+        "$value": "#22c55e"
+      },
+      "600": {
+        "$value": "#16a34a"
+      },
+      "700": {
+        "$value": "#15803d"
+      },
+      "800": {
+        "$value": "#166534"
+      },
+      "900": {
+        "$value": "#14532d"
+      },
+      "950": {
+        "$value": "#052e16"
+      }
+    },
+    "yellow": {
+      "$description": "Source: $mild-base-colors.yellow.",
+      "$type": "color",
+      "50": {
+        "$value": "#fefce8"
+      },
+      "100": {
+        "$value": "#fef9c3"
+      },
+      "200": {
+        "$value": "#fef08a"
+      },
+      "300": {
+        "$value": "#fde047"
+      },
+      "400": {
+        "$value": "#facc15"
+      },
+      "500": {
+        "$value": "#eab308"
+      },
+      "600": {
+        "$value": "#ca8a04"
+      },
+      "700": {
+        "$value": "#a16207"
+      },
+      "800": {
+        "$value": "#854d0e"
+      },
+      "900": {
+        "$value": "#713f12"
+      },
+      "950": {
+        "$value": "#422006"
+      }
+    },
+    "white": {
+      "$type": "color",
+      "$value": "#ffffff",
+      "$description": "Source: $mild-color-white."
+    },
+    "black": {
+      "$type": "color",
+      "$value": "#000000",
+      "$description": "Source: $mild-color-black."
+    },
+    "black-alpha": {
+      "$description": "Translucent black, 10 = 10% opaque. Source: $mild-alpha-steps over $mild-color-black.",
+      "$type": "color",
+      "0": {
+        "$value": "rgba(0, 0, 0, 0)"
+      },
+      "10": {
+        "$value": "rgba(0, 0, 0, 0.1)"
+      },
+      "20": {
+        "$value": "rgba(0, 0, 0, 0.2)"
+      },
+      "30": {
+        "$value": "rgba(0, 0, 0, 0.3)"
+      },
+      "40": {
+        "$value": "rgba(0, 0, 0, 0.4)"
+      },
+      "50": {
+        "$value": "rgba(0, 0, 0, 0.5)"
+      },
+      "60": {
+        "$value": "rgba(0, 0, 0, 0.6)"
+      },
+      "70": {
+        "$value": "rgba(0, 0, 0, 0.7)"
+      },
+      "80": {
+        "$value": "rgba(0, 0, 0, 0.8)"
+      },
+      "90": {
+        "$value": "rgba(0, 0, 0, 0.9)"
+      }
+    },
+    "white-alpha": {
+      "$description": "Translucent white, 10 = 10% opaque. Source: $mild-alpha-steps over $mild-color-white.",
+      "$type": "color",
+      "0": {
+        "$value": "rgba(255, 255, 255, 0)"
+      },
+      "10": {
+        "$value": "rgba(255, 255, 255, 0.1)"
+      },
+      "20": {
+        "$value": "rgba(255, 255, 255, 0.2)"
+      },
+      "30": {
+        "$value": "rgba(255, 255, 255, 0.3)"
+      },
+      "40": {
+        "$value": "rgba(255, 255, 255, 0.4)"
+      },
+      "50": {
+        "$value": "rgba(255, 255, 255, 0.5)"
+      },
+      "60": {
+        "$value": "rgba(255, 255, 255, 0.6)"
+      },
+      "70": {
+        "$value": "rgba(255, 255, 255, 0.7)"
+      },
+      "80": {
+        "$value": "rgba(255, 255, 255, 0.8)"
+      },
+      "90": {
+        "$value": "rgba(255, 255, 255, 0.9)"
+      }
+    }
+  }
+}

package/src/primitives/dimensions.json

@@ -0,0 +1,51 @@
+{
+  "dimension": {
+    "$description": "Fractional sizes. Source: $mild-dimensions (emitted by @mild-ui/core as --mild-space-*).",
+    "full": { "$value": "100%" },
+    "1-2": { "$value": "50%" },
+    "1-3": { "$value": "33.333333%" },
+    "2-3": { "$value": "66.666667%" },
+    "1-4": { "$value": "25%" },
+    "3-4": { "$value": "75%" },
+    "1-5": { "$value": "20%" },
+    "2-5": { "$value": "40%" },
+    "3-5": { "$value": "60%" },
+    "4-5": { "$value": "80%" },
+    "1-6": { "$value": "16.666667%" },
+    "5-6": { "$value": "83.333333%" },
+    "1-7": { "$value": "14.285714%" },
+    "2-7": { "$value": "28.571429%" },
+    "3-7": { "$value": "42.857143%" },
+    "4-7": { "$value": "57.142857%" },
+    "5-7": { "$value": "71.428571%" },
+    "6-7": { "$value": "85.714286%" },
+    "1-8": { "$value": "12.5%" },
+    "3-8": { "$value": "37.5%" },
+    "5-8": { "$value": "62.5%" },
+    "7-8": { "$value": "87.5%" },
+    "1-9": { "$value": "11.111111%" },
+    "2-9": { "$value": "22.222222%" },
+    "4-9": { "$value": "44.444444%" },
+    "5-9": { "$value": "55.555556%" },
+    "7-9": { "$value": "77.777778%" },
+    "8-9": { "$value": "88.888889%" },
+    "1-10": { "$value": "10%" },
+    "3-10": { "$value": "30%" },
+    "7-10": { "$value": "70%" },
+    "9-10": { "$value": "90%" },
+    "1-11": { "$value": "9.090909%" },
+    "2-11": { "$value": "18.181818%" },
+    "3-11": { "$value": "27.272727%" },
+    "4-11": { "$value": "36.363636%" },
+    "5-11": { "$value": "45.454545%" },
+    "6-11": { "$value": "54.545455%" },
+    "7-11": { "$value": "63.636364%" },
+    "8-11": { "$value": "72.727273%" },
+    "9-11": { "$value": "81.818182%" },
+    "10-11": { "$value": "90.909091%" },
+    "1-12": { "$value": "8.333333%" },
+    "5-12": { "$value": "41.666667%" },
+    "7-12": { "$value": "58.333333%" },
+    "11-12": { "$value": "91.666667%" }
+  }
+}

package/src/primitives/elevation.json

@@ -0,0 +1,14 @@
+{
+  "shadow": {
+    "$description": "Box shadows as CSS values. Source: $mild-shadows.",
+    "xs": { "$value": "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
+    "sm": { "$value": "0 1px 2px 0 rgba(0, 0, 0, 0.05), 0 1px 3px 0 rgba(0, 0, 0, 0.1)" },
+    "base": { "$value": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)" },
+    "md": { "$value": "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)" },
+    "lg": { "$value": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)" },
+    "xl": { "$value": "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)" },
+    "2xl": { "$value": "0 25px 50px -12px rgba(0, 0, 0, 0.25)" },
+    "inner": { "$value": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)" },
+    "none": { "$value": "none" }
+  }
+}

package/src/primitives/radius.json

@@ -0,0 +1,15 @@
+{
+  "radius": {
+    "$description": "Border radius scale. Source: $mild-radius.",
+    "$type": "dimension",
+    "none": { "$value": "0px" },
+    "sm": { "$value": "0.125rem" },
+    "base": { "$value": "0.25rem" },
+    "md": { "$value": "0.375rem" },
+    "lg": { "$value": "0.5rem" },
+    "xl": { "$value": "0.75rem" },
+    "2xl": { "$value": "1rem" },
+    "3xl": { "$value": "1.5rem" },
+    "full": { "$value": "9999px" }
+  }
+}

package/src/primitives/spacing.json

@@ -0,0 +1,46 @@
+{
+  "space-base": {
+    "$type": "dimension",
+    "$value": "0.25rem",
+    "$description": "Base spacing unit (4px). Source: $mild-spacing-base."
+  },
+  "space": {
+    "$description": "Spacing scale. Source: $mild-spacing.",
+    "$type": "dimension",
+    "0": { "$value": "0px" },
+    "px": { "$value": "1px" },
+    "0-5": { "$value": "0.125rem" },
+    "1": { "$value": "0.25rem" },
+    "1-5": { "$value": "0.375rem" },
+    "2": { "$value": "0.5rem" },
+    "2-5": { "$value": "0.625rem" },
+    "3": { "$value": "0.75rem" },
+    "3-5": { "$value": "0.875rem" },
+    "4": { "$value": "1rem" },
+    "5": { "$value": "1.25rem" },
+    "6": { "$value": "1.5rem" },
+    "7": { "$value": "1.75rem" },
+    "8": { "$value": "2rem" },
+    "9": { "$value": "2.25rem" },
+    "10": { "$value": "2.5rem" },
+    "11": { "$value": "2.75rem" },
+    "12": { "$value": "3rem" },
+    "14": { "$value": "3.5rem" },
+    "16": { "$value": "4rem" },
+    "20": { "$value": "5rem" },
+    "24": { "$value": "6rem" },
+    "28": { "$value": "7rem" },
+    "32": { "$value": "8rem" },
+    "36": { "$value": "9rem" },
+    "40": { "$value": "10rem" },
+    "44": { "$value": "11rem" },
+    "48": { "$value": "12rem" },
+    "52": { "$value": "13rem" },
+    "56": { "$value": "14rem" },
+    "60": { "$value": "15rem" },
+    "64": { "$value": "16rem" },
+    "72": { "$value": "18rem" },
+    "80": { "$value": "20rem" },
+    "96": { "$value": "24rem" }
+  }
+}

package/src/primitives/typography.json

@@ -0,0 +1,90 @@
+{
+  "font": {
+    "family": {
+      "$description": "Source: $mild-font-families.",
+      "$type": "fontFamily",
+      "sans": {
+        "$value": [
+          "Inter",
+          "-apple-system",
+          "BlinkMacSystemFont",
+          "Segoe UI",
+          "Roboto",
+          "Helvetica Neue",
+          "Arial",
+          "Noto Sans",
+          "sans-serif",
+          "Apple Color Emoji",
+          "Segoe UI Emoji",
+          "Segoe UI Symbol",
+          "Noto Color Emoji"
+        ]
+      },
+      "serif": { "$value": ["Georgia", "Cambria", "Times New Roman", "Times", "serif"] },
+      "mono": {
+        "$value": [
+          "JetBrains Mono",
+          "SF Mono",
+          "Monaco",
+          "Inconsolata",
+          "Roboto Mono",
+          "source-code-pro",
+          "Menlo",
+          "Consolas",
+          "DejaVu Sans Mono",
+          "monospace"
+        ]
+      }
+    },
+    "size": {
+      "$description": "Source: $mild-font-sizes.",
+      "$type": "dimension",
+      "xs": { "$value": "0.75rem" },
+      "sm": { "$value": "0.875rem" },
+      "base": { "$value": "1rem" },
+      "lg": { "$value": "1.125rem" },
+      "xl": { "$value": "1.25rem" },
+      "2xl": { "$value": "1.5rem" },
+      "3xl": { "$value": "1.875rem" },
+      "4xl": { "$value": "2.25rem" },
+      "5xl": { "$value": "3rem" },
+      "6xl": { "$value": "3.75rem" },
+      "7xl": { "$value": "4.5rem" },
+      "8xl": { "$value": "6rem" },
+      "9xl": { "$value": "8rem" }
+    },
+    "weight": {
+      "$description": "Source: $mild-font-weights.",
+      "$type": "fontWeight",
+      "thin": { "$value": 100 },
+      "extralight": { "$value": 200 },
+      "light": { "$value": 300 },
+      "normal": { "$value": 400 },
+      "medium": { "$value": 500 },
+      "semibold": { "$value": 600 },
+      "bold": { "$value": 700 },
+      "extrabold": { "$value": 800 },
+      "black": { "$value": 900 }
+    }
+  },
+  "line-height": {
+    "$description": "Source: $mild-line-heights.",
+    "$type": "number",
+    "none": { "$value": 1 },
+    "tight": { "$value": 1.25 },
+    "snug": { "$value": 1.375 },
+    "normal": { "$value": 1.5 },
+    "relaxed": { "$value": 1.625 },
+    "loose": { "$value": 2 }
+  },
+  "letter-spacing": {
+    "$description": "Source: $mild-letter-spacing.",
+    "$type": "dimension",
+    "tighter": { "$value": "-0.05em" },
+    "tight": { "$value": "-0.025em" },
+    "normal": { "$value": "0em" },
+    "wide": { "$value": "0.025em" },
+    "wider": { "$value": "0.05em" },
+    "widest": { "$value": "0.1em" }
+  }
+}

package/src/semantics/animation.json

@@ -0,0 +1,12 @@
+{
+  "transition": {
+    "$description": "Transition shorthands built from duration and easing primitives. Source: $mild-transitions.",
+    "none": { "$value": "none" },
+    "all": { "$value": "all {duration.150} {easing.in-out}" },
+    "default": { "$value": "all {duration.150} {easing.in-out}" },
+    "colors": { "$value": "color {duration.150} {easing.in-out}" },
+    "opacity": { "$value": "opacity {duration.150} {easing.in-out}" },
+    "shadow": { "$value": "box-shadow {duration.150} {easing.in-out}" },
+    "transform": { "$value": "transform {duration.150} {easing.in-out}" }
+  }
+}