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

package/build/web/core/semantic.js

@@ -0,0 +1,463 @@
+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 BorderRadiusRoundedStrong = { value: "1rem" };
+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,76 @@
+$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-rounded-strong: 1rem;
+$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 };