@muonic/muon 0.0.2-beta.0

package/tokens/theme/color.json

@@ -0,0 +1,482 @@
+{
+  "theme": {
+    "color": {
+      "primary": {
+        "description": "Main brand color.",
+        "value": "#644BED",
+        "attributes": {
+          "category": "color"
+        }
+      },
+      "secondary": {
+        "description": "Supporting brand color.",
+        "value": "orange",
+        "attributes": {
+          "category": "color"
+        }
+      },
+      "__private_focus": {
+        "value": "{ theme.color.primary.value }",
+        "modify": [
+          {
+            "type": "brighten",
+            "amount": 1.39
+          }
+        ]
+      },
+      "focus": {
+        "description": "Color used for the outline focus state. Defaults to a brightened primary color.",
+        "value": "{ theme.color.__private_focus.value }",
+        "attributes": {
+          "category": "color"
+        }
+      },
+      "__private_disabled": {
+        "value": "{ theme.color.darkest.value }",
+        "modify": [
+          {
+            "type": "brighten",
+            "amount": 4
+          }
+        ]
+      },
+      "disabled": {
+        "description": "Color used to indicate a disabled element. Defaults to a brightened version of the darkest color.",
+        "value": "{ theme.color.__private_disabled.value }",
+        "attributes": {
+          "category": "color"
+        }
+      },
+      "__private_placeholder": {
+        "value": "{ theme.color.darkest.value }",
+        "modify": [
+          {
+            "type": "brighten",
+            "amount": 4
+          }
+        ]
+      },
+      "placeholder": {
+        "description": "Color used for placeholder elements. Defaults to a brightened version of the darkest color.",
+        "value": "{ theme.color.__private_placeholder.value }",
+        "attributes": {
+          "category": "color"
+        }
+      },
+      "transparent": {
+        "description": "Fully transparent.",
+        "value": "transparent",
+        "attributes": {
+          "category": "color"
+        }
+      },
+      "current": {
+        "description": "Color inherited from parent.",
+        "value": "currentColor",
+        "attributes": {
+          "category": "color"
+        }
+      },
+      "lightest": {
+        "description": "The lightest color.",
+        "value": "#FFFFFF",
+        "attributes": {
+          "category": "color"
+        }
+      },
+      "darkest": {
+        "description": "The darkest color.",
+        "value": "#000000",
+        "attributes": {
+          "category": "color"
+        }
+      },
+      "base": {
+        "background": {
+          "description": "Base background color. Defaults to lightest color.",
+          "value": "{ theme.color.lightest.value }",
+          "attributes": {
+            "category": "color"
+          }
+        }
+      },
+      "text": {
+        "light": {
+          "description": "Light color for text. Defaults to lightest color.",
+          "value": "{ theme.color.lightest.value}",
+          "attributes": {
+            "category": "color"
+          }
+        },
+        "__private_dark": {
+          "value": "{ theme.color.darkest.value }",
+          "modify": [
+            {
+              "type": "brighten",
+              "amount": 1.5
+            }
+          ]
+        },
+        "dark": {
+          "description": "Dark color for text. Defaults to a brightened version of the darkest color.",
+          "value": "{ theme.color.text.__private_dark.value }",
+          "attributes": {
+            "category": "color"
+          }
+        }
+      },
+      "neutral": {
+        "light": {
+          "50": {
+            "description": "5% darkened version of the lightest color.",
+            "value": "{ theme.color.lightest.value }",
+            "modify": [{
+              "type": "darken",
+              "amount": 0.5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "100": {
+            "description": "10% darkened version of the lightest color.",
+            "value": "{ theme.color.lightest.value }",
+            "modify": [{
+              "type": "darken",
+              "amount": 1
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "150": {
+            "description": "15% darkened version of the lightest color.",
+            "value": "{ theme.color.lightest.value }",
+            "modify": [{
+              "type": "darken",
+              "amount": 1.5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "200": {
+            "description": "20% darkened version of the lightest color.",
+            "value": "{ theme.color.lightest.value }",
+            "modify": [{
+              "type": "darken",
+              "amount": 2
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "250": {
+            "description": "25% darkened version of the lightest color.",
+            "value": "{ theme.color.lightest.value }",
+            "modify": [{
+              "type": "darken",
+              "amount": 2.5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "300": {
+            "description": "30% darkened version of the lightest color.",
+            "value": "{ theme.color.lightest.value }",
+            "modify": [{
+              "type": "darken",
+              "amount": 3
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "350": {
+            "description": "35% darkened version of the lightest color.",
+            "value": "{ theme.color.lightest.value }",
+            "modify": [{
+              "type": "darken",
+              "amount": 3.5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "400": {
+            "description": "40% darkened version of the lightest color.",
+            "value": "{ theme.color.lightest.value }",
+            "modify": [{
+              "type": "darken",
+              "amount": 4
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "450": {
+            "description": "45% darkened version of the lightest color.",
+            "value": "{ theme.color.lightest.value }",
+            "modify": [{
+              "type": "darken",
+              "amount": 4.5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "500": {
+            "description": "50% darkened version of the lightest color.",
+            "value": "{ theme.color.lightest.value }",
+            "modify": [{
+              "type": "darken",
+              "amount": 5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          }
+        },
+        "dark": {
+          "50": {
+            "description": "5% brightened version of the darkest color.",
+            "value": "{ theme.color.darkest.value }",
+            "modify": [{
+              "type": "brighten",
+              "amount": 0.5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "100": {
+            "description": "10% brightened version of the darkest color.",
+            "value": "{ theme.color.darkest.value }",
+            "modify": [{
+              "type": "brighten",
+              "amount": 1
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "150": {
+            "description": "15% brightened version of the darkest color.",
+            "value": "{ theme.color.darkest.value }",
+            "modify": [{
+              "type": "brighten",
+              "amount": 1.5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "200": {
+            "description": "20% brightened version of the darkest color.",
+            "value": "{ theme.color.darkest.value }",
+            "modify": [{
+              "type": "brighten",
+              "amount": 2
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "250": {
+            "description": "25% brightened version of the darkest color.",
+            "value": "{ theme.color.darkest.value }",
+            "modify": [{
+              "type": "brighten",
+              "amount": 2.5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "300": {
+            "description": "30% brightened version of the darkest color.",
+            "value": "{ theme.color.darkest.value }",
+            "modify": [{
+              "type": "brighten",
+              "amount": 3
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "350": {
+            "description": "35% brightened version of the darkest color.",
+            "value": "{ theme.color.darkest.value }",
+            "modify": [{
+              "type": "brighten",
+              "amount": 3.5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "400": {
+            "description": "40% brightened version of the darkest color.",
+            "value": "{ theme.color.darkest.value }",
+            "modify": [{
+              "type": "brighten",
+              "amount": 4
+            }]
+          },
+          "450": {
+            "description": "45% brightened version of the darkest color.",
+            "value": "{ theme.color.darkest.value }",
+            "modify": [{
+              "type": "brighten",
+              "amount": 4.5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          },
+          "500": {
+            "description": "50% brightened version of the darkest color.",
+            "value": "{ theme.color.darkest.value }",
+            "modify": [{
+              "type": "brighten",
+              "amount": 5
+            }],
+            "attributes": {
+              "category": "color"
+            }
+          }
+        }
+      },
+      "action": {
+        "@": {
+          "description": "Color used for an action.",
+          "value": "#1565C0",
+          "attributes": {
+            "category": "color"
+          }
+        },
+        "__private_500": {
+          "value": "{ theme.color.action.@.value }",
+          "modify": [
+            {
+              "type": "brighten",
+              "amount": 2
+            }
+          ]
+        },
+        "500": {
+          "description": "20% brightened version of the color used for an action.",
+          "value": "{ theme.color.action.__private_500.value }",
+          "attributes": {
+            "category": "color"
+          }
+        }
+      },
+      "error": {
+        "@": {
+          "description": "Color indicative of an error.",
+          "value": "#EB002F",
+          "attributes": {
+            "category": "color"
+          }
+        },
+        "__private_500": {
+          "value": "{ theme.color.error.@.value }",
+          "modify": [
+            {
+              "type": "brighten",
+              "amount": 2
+            }
+          ]
+        },
+        "500": {
+          "description": "20% brightened version of the color indicative of an error.",
+          "value": "{ theme.color.error.__private_500.value }",
+          "attributes": {
+            "category": "color"
+          }
+        }
+      },
+      "warning": {
+        "@": {
+          "description": "Color indicative of a warning.",
+          "value": "#E3660E",
+          "attributes": {
+            "category": "color"
+          }
+        },
+        "__private_500": {
+          "value": "{ theme.color.warning.@.value }",
+          "modify": [
+            {
+              "type": "brighten",
+              "amount": 2
+            }
+          ]
+        },
+        "500": {
+          "description": "20% brightened version of the color indicative of a warning.",
+          "value": "{ theme.color.warning.__private_500.value }",
+          "attributes": {
+            "category": "color"
+          }
+        }
+      },
+      "success": {
+        "@": {
+          "description": "Color indicative of success.",
+          "value": "#23D160",
+          "attributes": {
+            "category": "color"
+          }
+        },
+        "__private_500": {
+          "value": "{ theme.color.success.@.value }",
+          "modify": [
+            {
+              "type": "brighten",
+              "amount": 2
+            }
+          ]
+        },
+        "500": {
+          "description": "20% brightened version of the color indicative of success.",
+          "value": "{ theme.color.success.__private_500.value }",
+          "attributes": {
+            "category": "color"
+          }
+        }
+      },
+      "information": {
+        "@": {
+          "description": "Color indicative of information.",
+          "value": "#209CEE",
+          "attributes": {
+            "category": "color"
+          }
+        },
+        "__private_500": {
+          "value": "{ theme.color.information.@.value }",
+          "modify": [
+            {
+              "type": "brighten",
+              "amount": 2
+            }
+          ]
+        },
+        "500": {
+          "description": "20% brightened version of the color indicative of information.",
+          "value": "{ theme.color.information.__private_500.value }",
+          "modify": [{
+            "type": "brighten",
+            "amount": 2
+          }],
+          "attributes": {
+            "category": "color"
+          }
+        }
+      }
+    }
+  }
+}

package/tokens/theme/font.json

@@ -0,0 +1,61 @@
+{
+  "theme": {
+    "font": {
+      "family": {
+        "default": {
+          "description": "The default font family.",
+          "value": "sans-serif"
+        },
+        "monospace": {
+          "description": "The monospaced font family.",
+          "value": "monospace"
+        },
+        "label": {
+          "description": "The font used for labels. Inherits theme's default font family.",
+          "value": "{ theme.font.family.default.value }"
+        },
+        "heading": {
+          "description": "The font used for headings. Inherits theme's default font family.",
+          "value": "{ theme.font.family.default.value }"
+        }
+      },
+      "size": {
+        "default": {
+          "description": "Default size of the font.",
+          "value": "{ theme.spacer.md.value }",
+          "attributes": {
+            "category": "size"
+          }
+        },
+        "label": {
+          "description": "Font used for labels.",
+          "value": "{ theme.spacer.md.value }",
+          "attributes": {
+            "category": "size"
+          }
+        },
+        "heading": {
+          "description": "Font size used for headings.",
+          "value": "{ theme.spacer.lg.value }",
+          "attributes": {
+            "category": "size"
+          }
+        }
+      },
+      "weight": {
+        "default": {
+          "description": "The default weight of the font.",
+          "value": "400"
+        },
+        "label": {
+          "description": "Weight of the font used for labels.",
+          "value": "{ theme.font.weight.heading.value }"
+        },
+        "heading": {
+          "description": "Weight of the font used for headings.",
+          "value": "600"
+        }
+      }
+    }
+  }
+}

package/tokens/theme/size.json

@@ -0,0 +1,27 @@
+{
+  "theme": {
+    "size": {
+      "sm": {
+        "description": "Small size.",
+        "value": "1",
+        "attributes": {
+          "category": "size"
+        }
+      },
+      "md": {
+        "description": "Medium size.",
+        "value": "1.25",
+        "attributes": {
+          "category": "size"
+        }
+      },
+      "lg": {
+        "description": "Large size.",
+        "value": "1.5",
+        "attributes": {
+          "category": "size"
+        }
+      }
+    }
+  }
+}

package/tokens/theme/spacer.json

@@ -0,0 +1,73 @@
+{
+  "theme": {
+    "spacer": {
+      "description": "A spacer is the invisible space between elements. The unit is supplied by the size transform (default rem).",
+      "zero": {
+        "description": "No space at all.",
+        "value": "0",
+        "attributes": {
+          "category": "size"
+        }
+      },
+      "sm": {
+        "description": "Small sized space.",
+        "value": "0.5",
+        "attributes": {
+          "category": "size"
+        }
+      },
+      "md": {
+        "description": "Medium sized space.",
+        "value": "1",
+        "attributes": {
+          "category": "size"
+        }
+      },
+      "lg": {
+        "description": "Large sized space.",
+        "value": "1.5",
+        "attributes": {
+          "category": "size"
+        }
+      },
+      "xl": {
+        "description": "Extra large sized space.",
+        "value": "2",
+        "attributes": {
+          "category": "size"
+        }
+      },
+      "negative": {
+        "description": "A negative spacer pulls.",
+        "sm": {
+          "description": "Negative version of the small space.",
+          "value": "-{ theme.spacer.sm.value }",
+          "attributes": {
+            "category": "size"
+          }
+        },
+        "md": {
+          "description": "Negative version of the medium space.",
+          "value": "-{ theme.spacer.md.value }",
+          "attributes": {
+            "category": "size"
+          }
+        },
+        "lg": {
+          "description": "Negative version of the large space.",
+          "value": "-{ theme.spacer.lg.value }",
+          "attributes": {
+            "category": "size"
+          }
+        },
+        "xl": {
+          "description": "Negative version of the extra large space.",
+          "value": "-{ theme.spacer.xl.value }",
+          "attributes": {
+            "category": "size"
+          }
+        }
+      }
+    }
+  }
+}

package/tokens/utils/formats/reference.js

@@ -0,0 +1,17 @@
+module.exports = {
+  name: 'json/reference',
+  formatter: function ({ dictionary }) {
+    const tokens = dictionary.allTokens.map((token) => {
+      token.usesReference = dictionary.usesReference(token.original.value);
+      if (token.usesReference) {
+        token.references = dictionary.getReferences(token.original.value);
+      }
+
+      token.nestedName = token.path.join('.').toLowerCase();
+
+      return token;
+    });
+
+    return JSON.stringify(tokens, null, 2);
+  }
+};

package/tokens/utils/modular-scale.js

@@ -0,0 +1,33 @@
+// https://medium.com/swlh/how-to-round-to-a-certain-number-of-decimal-places-in-javascript-ed74c471c1b8
+const toDecimalPlaces = (number, decimalPlaces) => Number(Math.round(number + 'e' + decimalPlaces) + 'e-' + decimalPlaces);
+
+const ratios = {
+  // "minor-second": 1.067, // commented out are not used
+  'major-second': 1.125,
+  'minor-third': 1.2,
+  'major-third': 1.25
+  // "perfect-fourth": 1.333,
+  // "aug-fourth": 1.414,
+  // "perfect-fifth": 1.5,
+  // "minor-sixth": 1.6,
+  // "golden-section": 1.618,
+  // "major-sixth": 1.667,
+  // "minor-seventh": 1.778,
+  // "major-seventh": 1.875,
+  // "octave": 2,
+  // "major-tenth": 2.5,
+  // "major-eleventh": 2.667,
+  // "major-twelfth": 3,
+  // "double-octave": 4
+};
+
+const calculate = (base, ratio, exponent) => {
+  const r = ratios[ratio];
+  const result = base * Math.pow(r, exponent);
+
+  return toDecimalPlaces(result, 3);
+};
+
+module.exports = {
+  calculate
+};