@servicetitan/hammer-token 0.5.0

package/build/web/core/semantic.js

@@ -0,0 +1,462 @@
+export const BackgroundColor = {
+  value: "#ffffff",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#141414"
+      }
+    }
+  }
+};
+export const BackgroundColorStrong = {
+  value: "#f7f7f7",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#2d2e31"
+      }
+    }
+  }
+};
+export const BackgroundColorStronger = {
+  value: "#eeeeee",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#444445"
+      }
+    }
+  }
+};
+export const BackgroundColorStrongest = {
+  value: "#bcbcbd",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#737475"
+      }
+    }
+  }
+};
+export const BackgroundColorPrimary = {
+  value: "#0265dc",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#78bbfa"
+      }
+    }
+  }
+};
+export const BackgroundColorPrimarySubdued = {
+  value: "#e0f2ff",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#78bbfa33"
+      }
+    }
+  }
+};
+export const BackgroundColorDanger = {
+  value: "#e13212",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ff745f"
+      }
+    }
+  }
+};
+export const BackgroundColorWarning = {
+  value: "#ffbe00",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffe278"
+      }
+    }
+  }
+};
+export const BackgroundColorDisabled = {
+  value: "#606162",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#606162"
+      }
+    }
+  }
+};
+export const BackgroundColorInverted = {
+  value: "#2d2e31",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#fafafa"
+      }
+    }
+  }
+};
+export const BackgroundColorInvertedStrong = {
+  value: "#141414",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
+export const BorderRadiusNone = { value: "0rem" };
+export const BorderRadiusRounded = { value: "0.375rem" };
+export const BorderRadiusPill = { value: "500px" };
+export const BorderRadiusCircular = { value: "100%" };
+export const BorderWidthNone = { value: "0rem" };
+export const BorderWidth = { value: "0.0625rem" };
+export const BorderWidthStrong = { value: "0.125rem" };
+export const BorderColor = {
+  value: "#949596",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#606162"
+      }
+    }
+  }
+};
+export const BorderColorSubdued = {
+  value: "#dfe0e1",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#444445"
+      }
+    }
+  }
+};
+export const BorderColorStrong = {
+  value: "#444445",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#dfe0e1"
+      }
+    }
+  }
+};
+export const BorderColorPrimary = {
+  value: "#0265dc",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#78bbfa"
+      }
+    }
+  }
+};
+export const BorderColorDanger = {
+  value: "#e13212",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ff745f"
+      }
+    }
+  }
+};
+export const FocusRingColor = {
+  value: "#0265dc",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#78bbfa"
+      }
+    }
+  }
+};
+export const FocusRingColorDanger = {
+  value: "#e13212",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ff745f"
+      }
+    }
+  }
+};
+export const FocusRingWidth = { value: "0.25rem" };
+export const ForegroundColor = {
+  value: "#141414",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffffff"
+      }
+    }
+  }
+};
+export const ForegroundColorSubdued = {
+  value: "#737475",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#bcbcbd"
+      }
+    }
+  }
+};
+export const ForegroundColorPrimary = {
+  value: "#0265dc",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#78bbfa"
+      }
+    }
+  }
+};
+export const ForegroundColorDanger = {
+  value: "#e13212",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ff745f"
+      }
+    }
+  }
+};
+export const ForegroundColorInverted = {
+  value: "#ffffff",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#141414"
+      }
+    }
+  }
+};
+export const ForegroundColorOnPrimary = {
+  value: "#ffffff",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#141414"
+      }
+    }
+  }
+};
+export const ForegroundColorOnDanger = {
+  value: "#ffffff",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#141414"
+      }
+    }
+  }
+};
+export const ForegroundColorOnWarning = {
+  value: "#141414",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#141414"
+      }
+    }
+  }
+};
+export const OverlayColorActive = {
+  value: "#14141429",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffffff29"
+      }
+    }
+  }
+};
+export const OverlayColorActivePrimary = {
+  value: "#0265dc4D",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#78bbfa40"
+      }
+    }
+  }
+};
+export const OverlayColorActiveDanger = {
+  value: "#e132124D",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ff745f40"
+      }
+    }
+  }
+};
+export const OverlayColorActiveOn = {
+  value: "#14141429",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#14141429"
+      }
+    }
+  }
+};
+export const OverlayColorActiveOnPrimary = {
+  value: "#14141429",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#14141429"
+      }
+    }
+  }
+};
+export const OverlayColorActiveOnDanger = {
+  value: "#14141429",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#14141429"
+      }
+    }
+  }
+};
+export const OverlayColorHover = {
+  value: "#14141414",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffffff14"
+      }
+    }
+  }
+};
+export const OverlayColorHoverPrimary = {
+  value: "#0265dc1A",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#78bbfa1A"
+      }
+    }
+  }
+};
+export const OverlayColorHoverDanger = {
+  value: "#e132121A",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ff745f1A"
+      }
+    }
+  }
+};
+export const OverlayColorHoverOn = {
+  value: "#14141414",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffffff14"
+      }
+    }
+  }
+};
+export const OverlayColorHoverOnPrimary = {
+  value: "#ffffff29",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffffff29"
+      }
+    }
+  }
+};
+export const OverlayColorHoverOnDanger = {
+  value: "#ffffff29",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffffff29"
+      }
+    }
+  }
+};
+export const ShadowColor = {
+  value: "#14141414",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffffff14"
+      }
+    }
+  }
+};
+export const ShadowSizeFlat = { value: "0rem 0rem 0rem" };
+export const ShadowSizeFloat = { value: "0rem 0.125rem 0.5rem" };
+export const ShadowSizeOverlay = { value: "0rem 0.5rem 1.5rem" };
+export const StatusColorInfo = {
+  value: "#0265dc",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#78bbfa"
+      }
+    }
+  }
+};
+export const StatusColorDanger = {
+  value: "#e13212",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ff745f"
+      }
+    }
+  }
+};
+export const StatusColorSuccess = {
+  value: "#007a4d",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#49cc93"
+      }
+    }
+  }
+};
+export const StatusColorWarning = {
+  value: "#ffbe00",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffe278"
+      }
+    }
+  }
+};
+export const TypographyParagraphSizeXsmall = { value: "0.75rem" };
+export const TypographyParagraphSizeSmall = { value: "0.875rem" };
+export const TypographyParagraphSize = { value: "1rem" };
+export const TypographyParagraphSizeLarge = { value: "1.25rem" };
+export const TypographyParagraphSizeXlarge = { value: "1.5rem" };
+export const TypographyParagraphFontWeight = { value: "400" };
+export const TypographyParagraphFontFamily = { value: "'Nunito Sans', sans-serif" };
+export const TypographyHeadingSizeXsmall = { value: "0.875rem" };
+export const TypographyHeadingSizeSmall = { value: "1rem" };
+export const TypographyHeadingSize = { value: "1.25rem" };
+export const TypographyHeadingSizeLarge = { value: "1.5rem" };
+export const TypographyHeadingSizeXlarge = { value: "2rem" };
+export const TypographyHeadingFontWeight = { value: "700" };
+export const TypographyHeadingFontFamily = { value: "'Sofia Pro', SofiaPro, sans-serif" };
+export const TypographyLabelSizeXsmall = { value: "0.625rem" };
+export const TypographyLabelSizeSmall = { value: "0.75rem" };
+export const TypographyLabelSize = { value: "0.875rem" };
+export const TypographyLabelSizeLarge = { value: "1rem" };
+export const TypographyLabelSizeXlarge = { value: "1.25rem" };
+export const TypographyLabelFontWeight = { value: "600" };
+export const TypographyLabelFontFamily = { value: "'Nunito Sans', sans-serif" };

package/build/web/core/semantic.scss

@@ -0,0 +1,75 @@
+$background-color: var(--background-color, #ffffff);
+$background-color-strong: var(--background-color-strong, #f7f7f7);
+$background-color-stronger: var(--background-color-stronger, #eeeeee);
+$background-color-strongest: var(--background-color-strongest, #bcbcbd);
+$background-color-primary: var(--background-color-primary, #0265dc);
+$background-color-primary-subdued: var(--background-color-primary-subdued, #e0f2ff);
+$background-color-danger: var(--background-color-danger, #e13212);
+$background-color-warning: var(--background-color-warning, #ffbe00);
+$background-color-disabled: var(--background-color-disabled, #606162);
+$background-color-inverted: var(--background-color-inverted, #2d2e31);
+$background-color-inverted-strong: var(--background-color-inverted-strong, #141414);
+$border-radius-none: 0rem;
+$border-radius-rounded: 0.375rem;
+$border-radius-pill: 500px;
+$border-radius-circular: 100%;
+$border-width-none: 0rem;
+$border-width: 0.0625rem;
+$border-width-strong: 0.125rem;
+$border-color: var(--border-color, #949596);
+$border-color-subdued: var(--border-color-subdued, #dfe0e1);
+$border-color-strong: var(--border-color-strong, #444445);
+$border-color-primary: var(--border-color-primary, #0265dc);
+$border-color-danger: var(--border-color-danger, #e13212);
+$focus-ring-color: var(--focus-ring-color, #0265dc);
+$focus-ring-color-danger: var(--focus-ring-color-danger, #e13212);
+$focus-ring-width: 0.25rem;
+$foreground-color: var(--foreground-color, #141414);
+$foreground-color-subdued: var(--foreground-color-subdued, #737475);
+$foreground-color-primary: var(--foreground-color-primary, #0265dc);
+$foreground-color-danger: var(--foreground-color-danger, #e13212);
+$foreground-color-inverted: var(--foreground-color-inverted, #ffffff);
+$foreground-color-on-primary: var(--foreground-color-on-primary, #ffffff);
+$foreground-color-on-danger: var(--foreground-color-on-danger, #ffffff);
+$foreground-color-on-warning: var(--foreground-color-on-warning, #141414);
+$overlay-color-active: var(--overlay-color-active, #14141429);
+$overlay-color-active-primary: var(--overlay-color-active-primary, #0265dc4D);
+$overlay-color-active-danger: var(--overlay-color-active-danger, #e132124D);
+$overlay-color-active-on: var(--overlay-color-active-on, #14141429);
+$overlay-color-active-on-primary: var(--overlay-color-active-on-primary, #14141429);
+$overlay-color-active-on-danger: var(--overlay-color-active-on-danger, #14141429);
+$overlay-color-hover: var(--overlay-color-hover, #14141414);
+$overlay-color-hover-primary: var(--overlay-color-hover-primary, #0265dc1A);
+$overlay-color-hover-danger: var(--overlay-color-hover-danger, #e132121A);
+$overlay-color-hover-on: var(--overlay-color-hover-on, #14141414);
+$overlay-color-hover-on-primary: var(--overlay-color-hover-on-primary, #ffffff29);
+$overlay-color-hover-on-danger: var(--overlay-color-hover-on-danger, #ffffff29);
+$shadow-color: var(--shadow-color, #14141414);
+$shadow-size-flat: 0rem 0rem 0rem;
+$shadow-size-float: 0rem 0.125rem 0.5rem;
+$shadow-size-overlay: 0rem 0.5rem 1.5rem;
+$status-color-info: var(--status-color-info, #0265dc);
+$status-color-danger: var(--status-color-danger, #e13212);
+$status-color-success: var(--status-color-success, #007a4d);
+$status-color-warning: var(--status-color-warning, #ffbe00);
+$typography-paragraph-size-xsmall: 0.75rem;
+$typography-paragraph-size-small: 0.875rem;
+$typography-paragraph-size: 1rem;
+$typography-paragraph-size-large: 1.25rem;
+$typography-paragraph-size-xlarge: 1.5rem;
+$typography-paragraph-font-weight: 400;
+$typography-paragraph-font-family: 'Nunito Sans', sans-serif;
+$typography-heading-size-xsmall: 0.875rem;
+$typography-heading-size-small: 1rem;
+$typography-heading-size: 1.25rem;
+$typography-heading-size-large: 1.5rem;
+$typography-heading-size-xlarge: 2rem;
+$typography-heading-font-weight: 700;
+$typography-heading-font-family: 'Sofia Pro', SofiaPro, sans-serif;
+$typography-label-size-xsmall: 0.625rem;
+$typography-label-size-small: 0.75rem;
+$typography-label-size: 0.875rem;
+$typography-label-size-large: 1rem;
+$typography-label-size-xlarge: 1.25rem;
+$typography-label-font-weight: 600;
+$typography-label-font-family: 'Nunito Sans', sans-serif;

package/build/web/index.d.ts

@@ -0,0 +1,4 @@
+import Token from '../../type/types';
+declare const core: Token;
+export { Token }
+export { core }

package/build/web/index.js

@@ -0,0 +1,3 @@
+import * as core from './core';
+export * as Token from '../../type/types';
+export { core };

package/config.js

@@ -0,0 +1,166 @@
+const StyleDictionary = require("style-dictionary");
+const fs = require("fs-extra");
+
+StyleDictionary.registerFormat({
+  name: `custom/SCSSVariable`,
+  formatter: function ({ dictionary }) {
+    return dictionary.allTokens
+      .map((token) => {
+        let value = token.value;
+        let name = `${token.name.replace("-default", "")}`;
+        if (token.attributes.appearance) {
+          return `$${name}: var(--${name}, ${value});`;
+        }
+        return `$${name}: ${value};`;
+      })
+      .join(`\n`);
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: `custom/es6`,
+  formatter: function ({ dictionary }) {
+    const light = dictionary.allTokens
+      .filter((token) => !!token.attributes.appearance)
+      .map((token) => {
+        let value = JSON.stringify(token.value);
+        let name = token.name.replace("Default", "");
+        return `\t${name}: ${value}`;
+      })
+      .join(`,\n`);
+    const dark = dictionary.allTokens
+      .filter((token) => !!token.attributes.appearance)
+      .map((token) => {
+        let value = JSON.stringify(token.attributes.appearance.dark.value);
+        let name = token.name.replace("Default", "");
+        return `\t${name}: ${value}`;
+      })
+      .join(`,\n`);
+    const common = dictionary.allTokens
+      .filter((token) => !token.attributes.appearance)
+      .map((token) => {
+        let value = JSON.stringify(token.value);
+        let name = token.name.replace("Default", "");
+        return `\t${name}: ${value}`;
+      })
+      .join(`,\n`);
+    return `export const common = {\n${common}\n}\nexport const light = {\n${light}\n}\nexport const dark = {\n${dark}\n}\n`;
+  },
+});
+
+StyleDictionary.registerFormat({
+  name: `custom/es6Variable`,
+  formatter: function ({ dictionary }) {
+    return dictionary.allTokens
+      .map((token) => {
+        let value = token.value;
+        let name = `${token.name.replace("Default", "")}`;
+        if (token.attributes.appearance) {
+          return `export const ${name} = {
+  value: "${value}",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "${token.attributes.appearance.dark.value}"
+      }
+    }
+  }
+};`;
+        }
+        return `export const ${name} = { value: "${value}" };`;
+      })
+      .join(`\n`);
+  },
+});
+
+const getDirectories = (source) =>
+  fs
+    .readdirSync(source, { withFileTypes: true })
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name);
+
+const themes = getDirectories(`src/theme`);
+
+themes.forEach((theme) => {
+  StyleDictionary.extend({
+    source: [`src/theme/${theme}/*.json`],
+    include: ["src/global/primitive/*.json"],
+    platforms: {
+      scss: {
+        transformGroup: "scss",
+        buildPath: `build/web/${theme}/`,
+        files: [
+          {
+            destination: "primitive.scss",
+            format: "custom/SCSSVariable",
+            filter: function (token) {
+              return token.filePath.startsWith("src/global/primitive");
+            },
+          },
+          {
+            destination: "semantic.scss",
+            format: "custom/SCSSVariable",
+            filter: function (token) {
+              return token.filePath.startsWith(`src/theme/${theme}`);
+            },
+          },
+        ],
+      },
+      tsLight: {
+        transformGroup: "js",
+        buildPath: `build/web/${theme}/`,
+        files: [
+          {
+            format: "custom/es6Variable",
+            destination: "primitive.js",
+            filter: function (token) {
+              return token.filePath.startsWith("src/global/primitive");
+            },
+          },
+          {
+            format: "custom/es6",
+            destination: "raw.js",
+            filter: function (token) {
+              return token.filePath.startsWith(`src/theme/${theme}`);
+            },
+          },
+          {
+            format: "custom/es6Variable",
+            destination: "semantic.js",
+            filter: function (token) {
+              return token.filePath.startsWith(`src/theme/${theme}`);
+            },
+          },
+        ],
+      },
+    },
+  }).buildAllPlatforms();
+});
+
+console.log("\n==============================================");
+console.log("Building index files...\n");
+const mainJS = fs.createWriteStream(`build/web/index.js`);
+
+const mainType = fs.createWriteStream(`build/web/index.d.ts`);
+mainType.write(`import Token from '../../type/types';\n`);
+
+themes.forEach((theme) => {
+  const indexJS = fs.createWriteStream(`build/web/${theme}/index.js`);
+  indexJS.write(`import * as semantic from './semantic';\n`);
+  indexJS.write(`import * as primitive from './primitive';\n`);
+  indexJS.write(`const name = '${theme}';\n`);
+  indexJS.write(`export { primitive, semantic, name };\n`);
+  indexJS.end();
+  mainType.write(`declare const ${theme}: Token;\n`);
+  mainJS.write(`import * as ${theme} from './${theme}';\n`);
+});
+
+mainType.write(`export { Token }\n`);
+mainType.write(`export { ${themes.join(", ")} }\n`);
+mainType.end();
+
+mainJS.write(`export * as Token from '../../type/types';\n`);
+mainJS.write(`export { ${themes.join(", ")} };\n`);
+mainJS.end();
+console.log(`Index built!`);
+console.log("==============================================\n");