@servicetitan/hammer-token 0.0.0-themeprovider-refactor.1

package/src/utils/copy-css-utils-cli.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { program } = require("commander");
+const path = require("path");
+const fs = require("fs");
+
+function run() {
+  program
+    .command("copy-css-utils")
+    .description("Copy the CSS Utils files from hammer-token into your project")
+    .argument("<string>", "directory to copy CSS utils files to")
+    .option(
+      "-p, --prefix <char>",
+      "optionally override prefix from 'hammer-' to a custom one",
+    )
+    .action((dir, options) => {
+      console.log(`Copying CSS Utils files to: ${dir}`);
+      const cssUtilsFilesPathString = path.resolve(
+        __dirname,
+        "../../build/web/core/css-utils",
+      );
+      fs.cpSync(cssUtilsFilesPathString, dir, { recursive: true });
+      if (options.prefix) {
+        console.log(`Replacing ".hammer-" with ".${options.prefix}-"`);
+        const copiedFiles = fs.readdirSync(dir, { encoding: "utf-8" });
+        copiedFiles.forEach((file) => {
+          const fileWithDir = `${dir}/${file}`;
+          fs.readFile(fileWithDir, "utf-8", (err, contents) => {
+            if (err) {
+              return console.error(err);
+            }
+
+            const contentsWithNewPrefix = contents.replace(
+              /hammer/gi,
+              options.prefix,
+            );
+
+            fs.writeFile(fileWithDir, contentsWithNewPrefix, "utf-8", (e) => {
+              if (e) console.log(e);
+            });
+          });
+        });
+      }
+    });
+
+  program.parse();
+}
+
+run();

package/src/utils/css-utils-format-utils.js

@@ -0,0 +1,185 @@
+const DARK_MODE_CLASS = ".hammer-themeprovider-core-dark";
+
+const cssUtilsFormatter = (dictionary, generateFn, hasDarkValues) => {
+  return dictionary.allTokens
+    .map((token) => {
+      let value = getVarValue(dictionary, token);
+      const name = `${token.name.replace("Default", "")}`;
+      if (hasDarkValues && token.attributes.appearance) {
+        const darkValue = getVarValue(dictionary, token, true);
+        return generateFn(name, value, darkValue);
+      }
+      return generateFn(name, value);
+    })
+    .flat()
+    .map((t) => `${t}`)
+    .sort((a, b) => a.localeCompare(b))
+    .join(`\n`);
+};
+
+const getNewValueFromRef = (value, ref) => {
+  return value.replace(ref.value, function () {
+    // fallback for nested vars
+    if (ref.name === undefined) {
+      return `${ref.value}`;
+    } else {
+      return `var(--${ref.name}, ${ref.value})`;
+    }
+  });
+};
+
+const colorHasAlphaValue = (value) => {
+  // e.g. var(--something)44 isn't valid
+  return /\)[\d]+/.test(value);
+};
+
+/**
+ * Allow for CSS var instead of static value
+ */
+const getVarValue = (dictionary, token, isDarkValue) => {
+  let value;
+
+  if (isDarkValue) {
+    value = JSON.stringify(token.attributes.appearance.dark.value);
+    if (
+      dictionary.usesReference(token.original.attributes.appearance.dark.value)
+    ) {
+      const refs = dictionary.getReferences(
+        token.original.attributes.appearance.dark.value,
+      );
+      refs.forEach((ref) => {
+        const newValue = getNewValueFromRef(value, ref);
+        if (colorHasAlphaValue(newValue) === false) {
+          value = newValue;
+        }
+      });
+    }
+  } else {
+    value = JSON.stringify(token.value);
+    if (dictionary.usesReference(token.original.value)) {
+      const refs = dictionary.getReferences(token.original.value);
+      refs.forEach((ref) => {
+        const newValue = getNewValueFromRef(value, ref);
+        if (colorHasAlphaValue(newValue) === false) {
+          value = newValue;
+        }
+      });
+    }
+  }
+
+  return value.replaceAll('"', "");
+};
+
+const generateBorderClasses = (name, value) => {
+  const classes = [];
+
+  if (name.startsWith("border-radius")) {
+    classes.push(`.${name} {border-radius: ${value}}`);
+  } else if (name.startsWith("border-width")) {
+    classes.push(`.${name} {border-width: ${value}}`);
+  } else if (name.startsWith("border-color")) {
+    classes.push(`.${name} {border-color: ${value}}`);
+  }
+
+  return classes;
+};
+
+const generateColorClasses = (name, value, darkValue) => {
+  const classes = [];
+
+  if (name.startsWith("background-color")) {
+    classes.push(
+      `.${name.replace("background-color", "bg")} {background-color: ${value}}`,
+      `${DARK_MODE_CLASS} .${name.replace("background-color", "bg")} {background-color: ${darkValue}}`,
+    );
+  } else if (name.startsWith("foreground-color")) {
+    classes.push(
+      `.${name.replace("foreground-color", "c")} {color: ${value}}`,
+      `${DARK_MODE_CLASS} .${name.replace("foreground-color", "c")} {color: ${darkValue}}`,
+    );
+  } else if (name.startsWith("overlay-color")) {
+    classes.push(
+      `.${name.replace("overlay-color", "bg-overlay")} {background-color: ${value}}`,
+      `${DARK_MODE_CLASS} .${name.replace("overlay-color", "bg-overlay")} {background-color: ${darkValue}}`,
+    );
+    // primitives
+    // } else if (name.startsWith("color")) {
+    //   classes.push(
+    //     `.${name.replace("color", "c")} {color: ${value}}`,
+    //     `.${name.replace("color", "bg")} {background-color: ${value}}`,
+    //   );
+  } else if (name.startsWith("status-color")) {
+    classes.push(
+      `.${name.replace("status-color", "c-status")} {color: ${value}}`,
+      `.${name.replace("status-color", "bg-status")} {background-color: ${value}}`,
+      `${DARK_MODE_CLASS} .${name.replace("status-color", "c-status")} {color: ${darkValue}}`,
+      `${DARK_MODE_CLASS} .${name.replace("status-color", "bg-status")} {background-color: ${darkValue}}`,
+    );
+    if (!name.includes("danger")) {
+      classes.push(
+        `.${name.replace("status-color", "border-color-status")} {border-color: ${value}}`,
+        `${DARK_MODE_CLASS} .${name.replace("status-color", "border-color-status")} {border-color: ${darkValue}}`,
+      );
+    }
+  } else if (name.startsWith("border-color")) {
+    classes.push(`.${name} {border-color: ${value}}`);
+  }
+
+  return classes;
+};
+
+const generateFontClasses = (name, value) => {
+  const classes = [];
+
+  if (name.startsWith("typography")) {
+    if (name.includes("-font-family")) {
+      classes.push(
+        `.${name.replace("typography", "ff").replace("-font-family", "")} {font-family: ${value}}`,
+      );
+    } else if (name.includes("-font-weight")) {
+      classes.push(
+        `.${name.replace("typography", "fw").replace("-font-weight", "")} {font-weight: ${value}}`,
+      );
+    } else if (name.includes("-size")) {
+      classes.push(
+        `.${name.replace("typography", "fs").replace("-size", "")} {font-size: ${value}}`,
+      );
+    }
+  }
+
+  return classes;
+};
+
+const generateSpacingClasses = (name, value) => {
+  const nameWithoutPrefix = name.substring(name.indexOf("-"));
+
+  const directions = [
+    "inline-start",
+    "inline-end",
+    "block-start",
+    "block-end",
+    "block",
+    "inline",
+  ];
+  const classes = [];
+
+  directions.forEach((direction) => {
+    classes.push(
+      `.m-${direction}${nameWithoutPrefix} {margin-${direction}: var(--${name}, ${value})}`,
+    );
+    classes.push(
+      `.p-${direction}${nameWithoutPrefix} {padding-${direction}: var(--${name}, ${value})}`,
+    );
+  });
+
+  return classes;
+};
+
+module.exports = {
+  cssUtilsFormatter,
+  getVarValue,
+  generateBorderClasses,
+  generateColorClasses,
+  generateFontClasses,
+  generateSpacingClasses,
+};

package/test.txt

@@ -0,0 +1 @@
+v1.0.0!

package/type/types.ts

@@ -0,0 +1,215 @@
+export type TokenObj = {
+  value: string;
+  attributes?: {
+    appearance?: {
+      dark?: {
+        value: string;
+      };
+    };
+  };
+};
+
+export type Primitive = {
+  ColorBlue100: TokenObj;
+  ColorBlue200: TokenObj;
+  ColorBlue300: TokenObj;
+  ColorBlue400: TokenObj;
+  ColorBlue500: TokenObj;
+  ColorBlue600: TokenObj;
+  ColorNeutral0: TokenObj;
+  ColorNeutral10: TokenObj;
+  ColorNeutral20: TokenObj;
+  ColorNeutral30: TokenObj;
+  ColorNeutral40: TokenObj;
+  ColorNeutral50: TokenObj;
+  ColorNeutral60: TokenObj;
+  ColorNeutral70: TokenObj;
+  ColorNeutral80: TokenObj;
+  ColorNeutral90: TokenObj;
+  ColorNeutral100: TokenObj;
+  ColorNeutral200: TokenObj;
+  ColorNeutral300: TokenObj;
+  ColorNeutral400: TokenObj;
+  ColorNeutral500: TokenObj;
+  ColorBlueGrey100: TokenObj;
+  ColorBlueGrey200: TokenObj;
+  ColorBlueGrey300: TokenObj;
+  ColorBlueGrey400: TokenObj;
+  ColorBlueGrey500: TokenObj;
+  ColorBlueGrey600: TokenObj;
+  ColorOrange100: TokenObj;
+  ColorOrange200: TokenObj;
+  ColorOrange300: TokenObj;
+  ColorOrange400: TokenObj;
+  ColorOrange500: TokenObj;
+  ColorOrange600: TokenObj;
+  ColorYellow100: TokenObj;
+  ColorYellow200: TokenObj;
+  ColorYellow300: TokenObj;
+  ColorYellow400: TokenObj;
+  ColorYellow500: TokenObj;
+  ColorYellow600: TokenObj;
+  ColorGreen100: TokenObj;
+  ColorGreen200: TokenObj;
+  ColorGreen300: TokenObj;
+  ColorGreen400: TokenObj;
+  ColorGreen500: TokenObj;
+  ColorGreen600: TokenObj;
+  ColorCyan100: TokenObj;
+  ColorCyan200: TokenObj;
+  ColorCyan300: TokenObj;
+  ColorCyan400: TokenObj;
+  ColorCyan500: TokenObj;
+  ColorCyan600: TokenObj;
+  ColorPurple100: TokenObj;
+  ColorPurple200: TokenObj;
+  ColorPurple300: TokenObj;
+  ColorPurple400: TokenObj;
+  ColorPurple500: TokenObj;
+  ColorPurple600: TokenObj;
+  ColorRed100: TokenObj;
+  ColorRed200: TokenObj;
+  ColorRed300: TokenObj;
+  ColorRed400: TokenObj;
+  ColorRed500: TokenObj;
+  ColorRed600: TokenObj;
+  ColorMagenta100: TokenObj;
+  ColorMagenta200: TokenObj;
+  ColorMagenta300: TokenObj;
+  ColorMagenta400: TokenObj;
+  ColorMagenta500: TokenObj;
+  ColorMagenta600: TokenObj;
+  Duration: TokenObj;
+  DurationInstant: TokenObj;
+  DurationFast: TokenObj;
+  DurationSlow: TokenObj;
+  FontFamilyBase: TokenObj;
+  FontFamilyDisplay: TokenObj;
+  FontLineHeightBase: TokenObj;
+  FontLineHeightDisplay: TokenObj;
+  FontWeightNormal: TokenObj;
+  FontWeightSemibold: TokenObj;
+  FontWeightBold: TokenObj;
+  FontSize100: TokenObj;
+  FontSize200: TokenObj;
+  FontSize300: TokenObj;
+  FontSize400: TokenObj;
+  FontSize500: TokenObj;
+  FontSize600: TokenObj;
+  FontSize700: TokenObj;
+  FontSize800: TokenObj;
+  FontSize900: TokenObj;
+  Size0: TokenObj;
+  Size1: TokenObj;
+  Size2: TokenObj;
+  Size3: TokenObj;
+  Size4: TokenObj;
+  Size5: TokenObj;
+  Size6: TokenObj;
+  Size7: TokenObj;
+  Size8: TokenObj;
+  Size9: TokenObj;
+  Size10: TokenObj;
+  Size11: TokenObj;
+  Size12: TokenObj;
+  Size13: TokenObj;
+  Size14: TokenObj;
+  SizeQuarter: TokenObj;
+  SizeHalf: TokenObj;
+  TransitionEase: TokenObj;
+  TransitionEaseIn: TokenObj;
+  TransitionEaseOut: TokenObj;
+  TransitionEaseInOut: TokenObj;
+  BreakpointSm: TokenObj;
+  BreakpointMd: TokenObj;
+  BreakpointLg: TokenObj;
+  BreakpointXl: TokenObj;
+  BreakpointXxl: TokenObj;
+};
+
+export type Semantic = {
+  BackgroundColor: TokenObj;
+  BackgroundColorStrong: TokenObj;
+  BackgroundColorStronger: TokenObj;
+  BackgroundColorStrongest: TokenObj;
+  BackgroundColorPrimary: TokenObj;
+  BackgroundColorPrimarySubdued: TokenObj;
+  BackgroundColorDanger: TokenObj;
+  BackgroundColorWarning: TokenObj;
+  BackgroundColorInverted: TokenObj;
+  BackgroundColorInvertedStrong: TokenObj;
+  BackgroundColorDisabled: TokenObj;
+  BorderRadiusNone: TokenObj;
+  BorderRadiusRounded: TokenObj;
+  BorderRadiusRoundedStrong: TokenObj;
+  BorderRadiusPill: TokenObj;
+  BorderRadiusCircular: TokenObj;
+  BorderWidthNone: TokenObj;
+  BorderWidth: TokenObj;
+  BorderWidthStrong: TokenObj;
+  BorderColor: TokenObj;
+  BorderColorStrong: TokenObj;
+  BorderColorSubdued: TokenObj;
+  BorderColorPrimary: TokenObj;
+  BorderColorDanger: TokenObj;
+  FocusRingColor: TokenObj;
+  FocusRingColorDanger: TokenObj;
+  FocusRingWidth: TokenObj;
+  ForegroundColor: TokenObj;
+  ForegroundColorSubdued: TokenObj;
+  ForegroundColorPrimary: TokenObj;
+  ForegroundColorDanger: TokenObj;
+  ForegroundColorInverted: TokenObj;
+  ForegroundColorOnPrimary: TokenObj;
+  ForegroundColorOnDanger: TokenObj;
+  ForegroundColorOnWarning: TokenObj;
+  OverlayColorActive: TokenObj;
+  OverlayColorActivePrimary: TokenObj;
+  OverlayColorActiveDanger: TokenObj;
+  OverlayColorActiveOn: TokenObj;
+  OverlayColorActiveOnPrimary: TokenObj;
+  OverlayColorActiveOnDanger: TokenObj;
+  OverlayColorHover: TokenObj;
+  OverlayColorHoverPrimary: TokenObj;
+  OverlayColorHoverDanger: TokenObj;
+  OverlayColorHoverOn: TokenObj;
+  OverlayColorHoverOnPrimary: TokenObj;
+  OverlayColorHoverOnDanger: TokenObj;
+  ShadowColor: TokenObj;
+  ShadowSizeFlat: TokenObj;
+  ShadowSizeFloat: TokenObj;
+  ShadowSizeOverlay: TokenObj;
+  StatusColorInfo: TokenObj;
+  StatusColorDanger: TokenObj;
+  StatusColorSuccess: TokenObj;
+  StatusColorWarning: TokenObj;
+  TypographyParagraphSizeXsmall: TokenObj;
+  TypographyParagraphSizeSmall: TokenObj;
+  TypographyParagraphSize: TokenObj;
+  TypographyParagraphSizeLarge: TokenObj;
+  TypographyParagraphSizeXlarge: TokenObj;
+  TypographyParagraphFontWeight: TokenObj;
+  TypographyParagraphFontFamily: TokenObj;
+  TypographyHeadingSizeXsmall: TokenObj;
+  TypographyHeadingSizeSmall: TokenObj;
+  TypographyHeadingSize: TokenObj;
+  TypographyHeadingSizeLarge: TokenObj;
+  TypographyHeadingSizeXlarge: TokenObj;
+  TypographyHeadingFontWeight: TokenObj;
+  TypographyHeadingFontFamily: TokenObj;
+  TypographyLabelSizeXsmall: TokenObj;
+  TypographyLabelSizeSmall: TokenObj;
+  TypographyLabelSize: TokenObj;
+  TypographyLabelSizeLarge: TokenObj;
+  TypographyLabelSizeXlarge: TokenObj;
+  TypographyLabelFontWeight: TokenObj;
+  TypographyLabelFontFamily: TokenObj;
+};
+
+type Token = {
+  primitive: Primitive;
+  semantic: Semantic;
+  name: string;
+};
+
+export default Token;