Initial commit

src/colors.js

@@ -0,0 +1,34 @@
+import colorSchemes from "../config/colors.js";
+import { helperClassesToCss } from "./utils/helper-classes.js";
+
+const lightScheme = colorSchemes.light;
+const darkScheme = colorSchemes.dark;
+
+const colorToCss = (key, value) => `--color-${key}: ${value};`;
+
+const colorSchemeToCss = (scheme) =>
+  Object.entries(scheme).reduce(
+    (css, [key, value]) => css + colorToCss(key, value),
+    ``,
+  );
+
+const lightCss = colorSchemeToCss(lightScheme);
+const darkCss = colorSchemeToCss(darkScheme);
+
+const colorSchemeToHelperClassesCss = (scheme, helperClasses) => {
+  return Object.entries(scheme).reduce((css, [key]) => {
+    return css + helperClassesToCss(helperClasses, key, `var(--color-${key})`);
+  }, ``);
+};
+
+const helperClasses = [
+  ["text", ["color"]],
+  ["bg", ["background-color"]],
+];
+
+const helperClassesCss = colorSchemeToHelperClassesCss(
+  lightScheme,
+  helperClasses,
+);
+
+export default `:root{${lightCss}}${helperClassesCss}@media (prefers-color-scheme: dark) {:root{${darkCss}}}`;

src/font-family.js

@@ -0,0 +1,56 @@
+import fonts from "../config/fonts.js";
+
+function fontsToCss(fonts) {
+  return Object.entries(fonts).reduce((css, [, fontProperties]) => {
+    const family = fontProperties.family;
+    const format = fontProperties.format;
+    const styles = fontProperties.styles;
+
+    return (
+      css +
+      Object.entries(styles).reduce((css, [variant, fontFamily]) => {
+        const url = fontFamily.path;
+        const style = fontFamily.fontStyle;
+        const weight = fontFamily.fontWeight;
+        const stretch = fontFamily.fontStretch;
+        const postScriptName = [family, variant].join("-").replaceAll(" ", "");
+
+        return (
+          css +
+          fontFamilyToCss(
+            family,
+            style,
+            weight,
+            stretch,
+            url,
+            family,
+            postScriptName,
+            format,
+          )
+        );
+      }, ``)
+    );
+  }, ``);
+}
+
+function fontFamilyToCss(
+  family,
+  style,
+  weight,
+  stretch,
+  url,
+  localName,
+  postScriptName,
+  format,
+) {
+  return `@font-face {
+    font-family: ${family};
+    font-style: ${style};
+    font-weight: ${weight};
+    font-stretch: ${stretch};
+    font-display: swap;
+    src: local("${localName}"), local("${postScriptName}"), url("${url}") format("${format}")
+}\n`;
+}
+
+export default fontsToCss(fonts);

src/font-variables.js

@@ -0,0 +1,57 @@
+/*
+ * Fallbacks from Modern Font Stacks.
+ * https://modernfontstacks.com/
+ */
+
+import fonts from "../config/fonts.js";
+
+const displayFallbacks = [
+  "ui-monospace",
+  "Cascadia Code",
+  "Source Code Pro",
+  "Menlo",
+  "Consolas",
+  "DejaVu Sans Mono",
+  "monospace",
+];
+
+const bodyFallbacks = [
+  "ui-monospace",
+  "Cascadia Code",
+  "Source Code Pro",
+  "Menlo",
+  "Consolas",
+  "DejaVu Sans Mono",
+  "monospace",
+];
+
+const monoFallbacks = [
+  "ui-monospace",
+  "Cascadia Code",
+  "Source Code Pro",
+  "Menlo",
+  "Consolas",
+  "DejaVu Sans Mono",
+  "monospace",
+];
+
+const fallbacks = {
+  display: displayFallbacks,
+  body: bodyFallbacks,
+  monospace: monoFallbacks,
+};
+
+const fontsToCss = (fonts) => {
+  return Object.entries(fonts).reduce((css, [fontType, fontProperties]) => {
+    const family = fontProperties.family;
+
+    const fontTypeCss = fontFamilyToCss(fontType, family);
+
+    return css + fontTypeCss;
+  }, ``);
+};
+
+const fontFamilyToCss = (type, value) =>
+  `--font-family-${type}: ${value},${fallbacks[type].join(",")};`;
+
+export default `:root{${fontsToCss(fonts)}}`;

src/spacing.js

@@ -0,0 +1,50 @@
+import spacing from "../config/spacing.js";
+import { helperClassesToCss } from "./utils/helper-classes.js";
+
+const spacingToCss = (variant, value) => `--spacing-${variant}: ${value}px;`;
+
+const spacingToHelperClassesCss = (spacingValues, helperClasses) => {
+  return Object.entries(spacingValues).reduce((css, [spacingVariant]) => {
+    const variant = spacingVariant.replace(".", "\\.");
+    return (
+      css +
+      helperClassesToCss(helperClasses, variant, `var(--spacing-${variant})`)
+    );
+  }, ``);
+};
+
+const helperClasses = [
+  ["m", ["margin"]],
+  ["my", ["margin-block-start", "margin-block-end"]],
+  ["mx", ["margin-inline-start", "margin-inline-end"]],
+  ["ml", ["margin-inline-start"]],
+  ["mr", ["margin-inline-start"]],
+  ["mt", ["margin-block-start"]],
+  ["mb", ["margin-block-end"]],
+  ["p", ["padding"]],
+  ["py", ["padding-block-start", "padding-block-end"]],
+  ["px", ["padding-inline-start", "padding-inline-end"]],
+  ["pl", ["padding-inline-start"]],
+  ["pr", ["padding-inline-start"]],
+  ["pt", ["padding-block-start"]],
+  ["pb", ["padding-block-end"]],
+  ["w", ["width"]],
+  ["h", ["height"]],
+  ["size", ["width", "height"]],
+  ["radius", ["border-radius"]],
+  ["gap", ["gap"]],
+  ["row-gap", ["row-gap"]],
+  ["column-gap", ["column-gap"]],
+  ["flow-space", ["--flow-space"]],
+];
+
+const spacingVariablesCss = Object.entries(spacing).reduce(
+  (css, [variant, value]) => css + spacingToCss(variant, value),
+  ``,
+);
+
+const helperCss = spacingToHelperClassesCss(spacing, helperClasses);
+
+const css = `:root{${spacingVariablesCss}}${helperCss}`;
+
+export default css;

src/utils/helper-classes.js

@@ -0,0 +1,43 @@
+/**
+ * Given an array of CSS properties, output css properties
+ * with each property equal to `value`
+ */
+export const cssPropertiesToCss = (cssProperties, value) => {
+  return cssProperties.reduce((css, cssProp) => {
+    return css + `${cssProp}:${value};`;
+  }, ``);
+};
+
+/**
+ * Given a helperClass (string) and array of cssProperties,
+ * will generate a css class named helperClass that has
+ * all cssProperties mapped to value.
+ */
+export const helperClassToCss = (helperClass, cssProperties, value) => {
+  const cssProps = cssPropertiesToCss(cssProperties, value);
+  return `.${helperClass}{${cssProps}}`;
+};
+
+/**
+ * Given an array of helperClasses that map to cssProperties,
+ * output a string of CSS that maps the helperClass (with variant modifier)
+ * to the array of css properties with each css property equal to
+ * value
+ *
+ * e.g.
+ * helperClasses = [["text", ["color"]]],
+ * variant = "primary",
+ * value = "#000"
+ *
+ * Will output the following:
+ * .text-primary {
+ *    color: #000;
+ * }
+ */
+export const helperClassesToCss = (helperClasses, variant, value) => {
+  return helperClasses.reduce((css, [helperClass, cssProperties]) => {
+    return (
+      css + helperClassToCss(`${helperClass}-${variant}`, cssProperties, value)
+    );
+  }, ``);
+};