@trackunit/ui-design-tokens 0.0.32-versioning-public-packages.0

package/README.md

@@ -0,0 +1,7 @@
+# ui-design-tokens
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-design-tokens` to execute the unit tests via [Jest](https://jestjs.io).

package/index.d.ts

@@ -0,0 +1,10 @@
+export * from "./tokens/chartColorsDefault";
+export * from "./tokens/colors";
+export * from "./tokens/elevation";
+export * from "./tokens/getHEX";
+export * from "./tokens/getValues";
+export * from "./tokens/mediaQuery";
+export * from "./tokens/size";
+export * from "./tokens/tokens";
+export * from "./tokens/typography";
+export * from "./tokens/zIndex";

package/index.js

@@ -0,0 +1,312 @@
+import { generateMedia } from 'styled-media-query';
+
+const DEFAULT_CHART_COLORS = ["#2580C7", "#36A2DA", "#3FBCEA", "#06708D", "#01B7A9", "#A2DEDA", "#F9E9A0", "#FDD008", "#FBB385", "#FF7373", "#E6BCF3", "#9D96F5", "#8378EA", "#96BFFF", "#979A9A", "#0065E5", "#FF5A5A", "#00A658", "#5AC8fA", "#5E5CE6", "#2066FF", "#FF9500"];
+const getReorderedChartColors = () => [// re-ordered to make the first ones more visually different
+DEFAULT_CHART_COLORS[0], DEFAULT_CHART_COLORS[4], DEFAULT_CHART_COLORS[7], DEFAULT_CHART_COLORS[9], DEFAULT_CHART_COLORS[12], DEFAULT_CHART_COLORS[5], DEFAULT_CHART_COLORS[6], DEFAULT_CHART_COLORS[8], DEFAULT_CHART_COLORS[10], DEFAULT_CHART_COLORS[1], DEFAULT_CHART_COLORS[11], DEFAULT_CHART_COLORS[3], DEFAULT_CHART_COLORS[2], DEFAULT_CHART_COLORS[13]];
+
+/**
+ * The values assigned are loosely based on the hue/neutral's
+ * respective relative luminance, where 0% is black and 100% is white.
+ * However, it is slightly adjusted to be in reverse, where X0 will
+ * always represent the lightest version, while X100 will present the
+ * darkest version of a hue/neutral.
+ */
+function getColorValue(variable) {
+  return `rgb(var(${variable}) / var(--tw-bg-opacity))`;
+}
+const black = "#1a1b1c";
+const white = "#fff";
+const neutral = {
+  N5: getColorValue("--color-neutral-50"),
+  N10: getColorValue("--color-neutral-100"),
+  N20: getColorValue("--color-neutral-200"),
+  N30: getColorValue("--color-neutral-300"),
+  N40: getColorValue("--color-neutral-400"),
+  N50: getColorValue("--color-neutral-500"),
+  N60: getColorValue("--color-neutral-600"),
+  N70: getColorValue("--color-neutral-700"),
+  N80: getColorValue("--color-neutral-800"),
+  N90: getColorValue("--color-neutral-900")
+};
+const blue = {
+  B5: getColorValue("--color-blue-50"),
+  B10: getColorValue("--color-blue-100"),
+  B20: getColorValue("--color-blue-200"),
+  B30: getColorValue("--color-blue-300"),
+  B40: getColorValue("--color-blue-400"),
+  B50: getColorValue("--color-blue-500"),
+  B60: getColorValue("--color-blue-600"),
+  B70: getColorValue("--color-blue-700"),
+  B80: getColorValue("--color-blue-800"),
+  B90: getColorValue("--color-blue-900")
+};
+const green = {
+  G5: getColorValue("--color-green-50"),
+  G10: getColorValue("--color-green-100"),
+  G20: getColorValue("--color-green-200"),
+  G30: getColorValue("--color-green-300"),
+  G40: getColorValue("--color-green-400"),
+  G50: getColorValue("--color-green-500"),
+  G60: getColorValue("--color-green-600"),
+  G70: getColorValue("--color-green-700"),
+  G80: getColorValue("--color-green-800"),
+  G90: getColorValue("--color-green-900")
+};
+const red = {
+  R5: getColorValue("--color-red-50"),
+  R10: getColorValue("--color-red-100"),
+  R20: getColorValue("--color-red-200"),
+  R30: getColorValue("--color-red-300"),
+  R40: getColorValue("--color-red-400"),
+  R50: getColorValue("--color-red-500"),
+  R60: getColorValue("--color-red-600"),
+  R70: getColorValue("--color-red-700"),
+  R80: getColorValue("--color-red-800"),
+  R90: getColorValue("--color-red-900")
+};
+const orange = {
+  O5: getColorValue("--color-amber-50"),
+  O10: getColorValue("--color-amber-100"),
+  O20: getColorValue("--color-amber-200"),
+  O30: getColorValue("--color-amber-300"),
+  O40: getColorValue("--color-amber-400"),
+  O50: getColorValue("--color-amber-500"),
+  O60: getColorValue("--color-amber-600"),
+  O70: getColorValue("--color-amber-700"),
+  O80: getColorValue("--color-amber-800"),
+  O90: getColorValue("--color-amber-900")
+};
+const purple = {
+  P5: getColorValue("--color-violet-50"),
+  P10: getColorValue("--color-violet-100"),
+  P20: getColorValue("--color-violet-200"),
+  P30: getColorValue("--color-violet-300"),
+  P40: getColorValue("--color-violet-400"),
+  P50: getColorValue("--color-violet-500"),
+  P60: getColorValue("--color-violet-600"),
+  P70: getColorValue("--color-violet-700"),
+  P80: getColorValue("--color-violet-800"),
+  P90: getColorValue("--color-violet-900")
+};
+const utilization = {
+  working: "#2EC5E9",
+  moving: "#E690B1",
+  idling: "#FDDD0E",
+  stopped: "#6577DB",
+  active: "#3FDB93",
+  operating: "#65ACDB"
+};
+const colors = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, neutral), blue), green), red), orange), purple), {
+  utilization,
+  black,
+  white
+});
+
+/**
+ * Elevation is based on N100 with an alpha channel. E(X)A variants
+ * are for active versions(e.g. hover).
+ */
+const elevation = {
+  E05: "var(--box-shadow-sm)",
+  E10: "var(--box-shadow-DEFAULT)",
+  E10A: "var(--box-shadow-md)",
+  E20: "var(--box-shadow-lg)",
+  E30: "var(--box-shadow-xl)",
+  E40: "var(--box-shadow-2xl)"
+};
+
+function componentToHex(c) {
+  if (c === null || c === undefined) {
+    return "00";
+  }
+
+  const hex = c.toString(16);
+  return hex.length === 1 ? "0" + hex : hex;
+}
+
+function rgbToHex(r, g, b) {
+  if (isNaN(r) || isNaN(g) || isNaN(b)) {
+    return "#000000";
+  }
+
+  return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
+}
+/**
+ * Returns the HEX color based on a Color from the theme.
+ *  Reads the RGB value from the underlying CSS variable and convert to HEX.
+ *
+ *  Example: getHEX(theme.colors.B50) -> #3b82f6
+ *
+ * @param variable A color from the `colors` object of the Theme
+ * @returns HEX color
+ */
+
+
+const getHEX = variable => {
+  var _a, _b;
+
+  const regex = /rgb\(var\((.*?)\) \/ var\(--tw-bg-opacity\)\)/g;
+  const root = document.documentElement;
+  const match = regex.exec(variable);
+  const colorValue = getComputedStyle(root).getPropertyValue((_b = (_a = match === null || match === void 0 ? void 0 : match[1]) === null || _a === void 0 ? void 0 : _a.trim()) !== null && _b !== void 0 ? _b : variable);
+  const RGB = colorValue.trim().split(" ").map(channel => Number(channel));
+  return rgbToHex(RGB[0], RGB[1], RGB[2]);
+};
+
+/**
+ * Reads the value of the CSS custom Property connected to the design torken.
+ * ATTENTION: For colors use getHEX
+ */
+function getValuesFromDesignToken(designToken) {
+  var _a;
+
+  if (typeof designToken === "string" && designToken.includes("var(")) {
+    const regex = /var\((.*?)\)/g;
+    const root = document.documentElement;
+    const match = regex.exec(designToken);
+    const tokenValue = getComputedStyle(root).getPropertyValue((_a = match === null || match === void 0 ? void 0 : match[1]) !== null && _a !== void 0 ? _a : designToken);
+    return tokenValue;
+  }
+
+  return designToken;
+}
+
+const breakpoints = {
+  xs: 0,
+  sm: 480,
+  md: 768,
+  lg: 1024,
+  xl: 1200,
+  xxl: 1600,
+  xxxl: 1900 // full HD
+
+};
+/**
+ * Track units media queries.
+ */
+
+const mediaQuery = generateMedia({
+  xs: breakpoints.xs + "px",
+  sm: breakpoints.sm + "px",
+  md: breakpoints.md + "px",
+  lg: breakpoints.lg + "px",
+  xl: breakpoints.xl + "px",
+  xxl: breakpoints.xxl + "px",
+  xxxl: breakpoints.xxxl + "px" // full HD
+
+});
+const windowWidth = {
+  lessThan: size => {
+    return window.innerWidth < breakpoints[size];
+  },
+  greaterThan: size => {
+    return window.innerWidth > breakpoints[size];
+  },
+  between: (first, second) => {
+    return window.innerWidth < breakpoints[first] && window.innerWidth < breakpoints[second];
+  }
+};
+/*
+--------
+TAILWIND
+--------
+sm	640px	@media (min-width: 640px) { ... }
+md	768px	@media (min-width: 768px) { ... }
+lg	1024px	@media (min-width: 1024px) { ... }
+xl	1280px	@media (min-width: 1280px) { ... }
+2xl	1536px	@media (min-width: 1536px) { ... }
+*/
+
+/*
+--------
+FLUENTUI
+--------
+small	320px - 479px
+medium	480px - 639px
+large	640px - 1023px
+extra large	1024px - 1365px
+extra extra large	1366px - 1919px
+extra extra extra large	1920px and up
+*/
+
+/**
+--------
+BOOTSTRAP
+--------
+ grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+);
+ */
+
+const size = {
+  /** --spacing-0: 0px; */
+  none: "var(--spacing-0)",
+
+  /** --spacing-1: 0.25rem; */
+  tiny: "var(--spacing-1)",
+
+  /** --spacing-2: 0.5rem; */
+  mini: "var(--spacing-2)",
+
+  /** --spacing-3: 0.75rem; */
+  small: "var(--spacing-3)",
+
+  /** --spacing-4: 1rem; */
+  medium: "var(--spacing-4)",
+
+  /** --spacing-6: 1.5rem; */
+  large: "var(--spacing-6)",
+
+  /** --spacing-8: 2rem; */
+  giant: "var(--spacing-8)",
+
+  /** --spacing-10: 2.5rem; */
+  enormous: "var(--spacing-10)"
+};
+
+/**
+ * Based on a root size of 16px.
+ */
+const fontSize = {
+  primary: "var( --font-size-3xl)",
+  secondary: "var(--font-size-lg)",
+  tertiary: "var(--font-size-base)",
+  subtitle: "var(--font-size-base)",
+  body: "var(--font-size-sm)",
+  small: "var(--font-size-xs)" // 12px
+
+};
+/**
+ * Primary font weights.
+ */
+
+const fontWeight = {
+  normal: 400,
+  bold: 600
+};
+
+const zIndex = {
+  hidden: -1,
+  default: 1,
+  top: 5,
+  overlay: 10,
+  popover: 20,
+  toast: 100
+};
+
+const tokens = {
+  colors,
+  size,
+  fontSize,
+  fontWeight,
+  elevation,
+  zIndex,
+  fontFamily: `'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif`
+};
+
+export { DEFAULT_CHART_COLORS, black, blue, breakpoints, colors, elevation, fontSize, fontWeight, getColorValue, getHEX, getReorderedChartColors, getValuesFromDesignToken, green, mediaQuery, neutral, orange, purple, red, size, tokens, utilization, white, windowWidth, zIndex };

package/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@trackunit/ui-design-tokens",
+  "version": "0.0.32-versioning-public-packages.0",
+  "repository": "https://github.com/Trackunit/manager",
+  "license": "MIT",
+  "module": "./index.js",
+  "main": "./index.js",
+  "type": "module",
+  "types": "./index.d.ts",
+  "dependencies": {
+    "styled-media-query": "^2.1.2"
+  },
+  "peerDependencies": {}
+}

package/tokens/chartColorsDefault.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_CHART_COLORS: string[];
+export declare const getReorderedChartColors: () => string[];

package/tokens/colors.d.ts

@@ -0,0 +1,163 @@
+/**
+ * The values assigned are loosely based on the hue/neutral's
+ * respective relative luminance, where 0% is black and 100% is white.
+ * However, it is slightly adjusted to be in reverse, where X0 will
+ * always represent the lightest version, while X100 will present the
+ * darkest version of a hue/neutral.
+ */
+export declare function getColorValue(variable: string): string;
+export declare const black = "#1a1b1c";
+export declare const white = "#fff";
+export declare const neutral: {
+    readonly N5: string;
+    readonly N10: string;
+    readonly N20: string;
+    readonly N30: string;
+    readonly N40: string;
+    readonly N50: string;
+    readonly N60: string;
+    readonly N70: string;
+    readonly N80: string;
+    readonly N90: string;
+};
+export declare const blue: {
+    readonly B5: string;
+    readonly B10: string;
+    readonly B20: string;
+    readonly B30: string;
+    readonly B40: string;
+    readonly B50: string;
+    readonly B60: string;
+    readonly B70: string;
+    readonly B80: string;
+    readonly B90: string;
+};
+export declare const green: {
+    readonly G5: string;
+    readonly G10: string;
+    readonly G20: string;
+    readonly G30: string;
+    readonly G40: string;
+    readonly G50: string;
+    readonly G60: string;
+    readonly G70: string;
+    readonly G80: string;
+    readonly G90: string;
+};
+export declare const red: {
+    readonly R5: string;
+    readonly R10: string;
+    readonly R20: string;
+    readonly R30: string;
+    readonly R40: string;
+    readonly R50: string;
+    readonly R60: string;
+    readonly R70: string;
+    readonly R80: string;
+    readonly R90: string;
+};
+export declare const orange: {
+    readonly O5: string;
+    readonly O10: string;
+    readonly O20: string;
+    readonly O30: string;
+    readonly O40: string;
+    readonly O50: string;
+    readonly O60: string;
+    readonly O70: string;
+    readonly O80: string;
+    readonly O90: string;
+};
+export declare const purple: {
+    readonly P5: string;
+    readonly P10: string;
+    readonly P20: string;
+    readonly P30: string;
+    readonly P40: string;
+    readonly P50: string;
+    readonly P60: string;
+    readonly P70: string;
+    readonly P80: string;
+    readonly P90: string;
+};
+export declare const utilization: {
+    working: string;
+    moving: string;
+    idling: string;
+    stopped: string;
+    active: string;
+    operating: string;
+};
+export declare const colors: {
+    readonly utilization: {
+        working: string;
+        moving: string;
+        idling: string;
+        stopped: string;
+        active: string;
+        operating: string;
+    };
+    readonly black: "#1a1b1c";
+    readonly white: "#fff";
+    readonly P5: string;
+    readonly P10: string;
+    readonly P20: string;
+    readonly P30: string;
+    readonly P40: string;
+    readonly P50: string;
+    readonly P60: string;
+    readonly P70: string;
+    readonly P80: string;
+    readonly P90: string;
+    readonly O5: string;
+    readonly O10: string;
+    readonly O20: string;
+    readonly O30: string;
+    readonly O40: string;
+    readonly O50: string;
+    readonly O60: string;
+    readonly O70: string;
+    readonly O80: string;
+    readonly O90: string;
+    readonly R5: string;
+    readonly R10: string;
+    readonly R20: string;
+    readonly R30: string;
+    readonly R40: string;
+    readonly R50: string;
+    readonly R60: string;
+    readonly R70: string;
+    readonly R80: string;
+    readonly R90: string;
+    readonly G5: string;
+    readonly G10: string;
+    readonly G20: string;
+    readonly G30: string;
+    readonly G40: string;
+    readonly G50: string;
+    readonly G60: string;
+    readonly G70: string;
+    readonly G80: string;
+    readonly G90: string;
+    readonly B5: string;
+    readonly B10: string;
+    readonly B20: string;
+    readonly B30: string;
+    readonly B40: string;
+    readonly B50: string;
+    readonly B60: string;
+    readonly B70: string;
+    readonly B80: string;
+    readonly B90: string;
+    readonly N5: string;
+    readonly N10: string;
+    readonly N20: string;
+    readonly N30: string;
+    readonly N40: string;
+    readonly N50: string;
+    readonly N60: string;
+    readonly N70: string;
+    readonly N80: string;
+    readonly N90: string;
+};
+export declare type Colors = typeof colors;

package/tokens/elevation.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Elevation is based on N100 with an alpha channel. E(X)A variants
+ * are for active versions(e.g. hover).
+ */
+export declare const elevation: {
+    readonly E05: "var(--box-shadow-sm)";
+    readonly E10: "var(--box-shadow-DEFAULT)";
+    readonly E10A: "var(--box-shadow-md)";
+    readonly E20: "var(--box-shadow-lg)";
+    readonly E30: "var(--box-shadow-xl)";
+    readonly E40: "var(--box-shadow-2xl)";
+};
+export declare type Elevation = typeof elevation;

package/tokens/getHEX.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Returns the HEX color based on a Color from the theme.
+ *  Reads the RGB value from the underlying CSS variable and convert to HEX.
+ *
+ *  Example: getHEX(theme.colors.B50) -> #3b82f6
+ *
+ * @param variable A color from the `colors` object of the Theme
+ * @returns HEX color
+ */
+export declare const getHEX: (variable: string) => string;

package/tokens/getValues.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Reads the value of the CSS custom Property connected to the design torken.
+ * ATTENTION: For colors use getHEX
+ */
+export declare function getValuesFromDesignToken(designToken: string | number): string | number;

package/tokens/mediaQuery.d.ts

@@ -0,0 +1,40 @@
+export declare const breakpoints: {
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    xxl: number;
+    xxxl: number;
+};
+export declare type Breakpoint = keyof typeof breakpoints;
+/**
+ * Track units media queries.
+ */
+export declare const mediaQuery: import("styled-media-query").MediaGenerator<{
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+    xxxl: string;
+}, any>;
+export declare const windowWidth: {
+    lessThan: (size: keyof typeof breakpoints) => boolean;
+    greaterThan: (size: keyof typeof breakpoints) => boolean;
+    between: (first: keyof typeof breakpoints, second: keyof typeof breakpoints) => boolean;
+};
+/**
+--------
+BOOTSTRAP
+--------
+ grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px
+);
+ */

package/tokens/size.d.ts

@@ -0,0 +1,19 @@
+export declare const size: {
+    /** --spacing-0: 0px; */
+    readonly none: "var(--spacing-0)";
+    /** --spacing-1: 0.25rem; */
+    readonly tiny: "var(--spacing-1)";
+    /** --spacing-2: 0.5rem; */
+    readonly mini: "var(--spacing-2)";
+    /** --spacing-3: 0.75rem; */
+    readonly small: "var(--spacing-3)";
+    /** --spacing-4: 1rem; */
+    readonly medium: "var(--spacing-4)";
+    /** --spacing-6: 1.5rem; */
+    readonly large: "var(--spacing-6)";
+    /** --spacing-8: 2rem; */
+    readonly giant: "var(--spacing-8)";
+    /** --spacing-10: 2.5rem; */
+    readonly enormous: "var(--spacing-10)";
+};
+export declare type Size = typeof size;

package/tokens/tokens.d.ts

@@ -0,0 +1,15 @@
+import { Colors } from "./colors";
+import { Elevation } from "./elevation";
+import { Size } from "./size";
+import { FontSize, FontWeight } from "./typography";
+import { ZIndex } from "./zIndex";
+export interface Tokens {
+    colors: Colors;
+    size: Size;
+    fontSize: FontSize;
+    fontWeight: FontWeight;
+    fontFamily: string;
+    elevation: Elevation;
+    zIndex: ZIndex;
+}
+export declare const tokens: Tokens;

package/tokens/typography.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Based on a root size of 16px.
+ */
+export declare const fontSize: {
+    readonly primary: "var( --font-size-3xl)";
+    readonly secondary: "var(--font-size-lg)";
+    readonly tertiary: "var(--font-size-base)";
+    readonly subtitle: "var(--font-size-base)";
+    readonly body: "var(--font-size-sm)";
+    readonly small: "var(--font-size-xs)";
+};
+export declare type FontSize = typeof fontSize;
+/**
+ * Primary font weights.
+ */
+export declare const fontWeight: {
+    readonly normal: 400;
+    readonly bold: 600;
+};
+export declare type FontWeight = typeof fontWeight;

package/tokens/zIndex.d.ts

@@ -0,0 +1,9 @@
+export declare const zIndex: {
+    readonly hidden: -1;
+    readonly default: 1;
+    readonly top: 5;
+    readonly overlay: 10;
+    readonly popover: 20;
+    readonly toast: 100;
+};
+export declare type ZIndex = typeof zIndex;