@kaizen/design-tokens 3.1.0

package/dist/src/themes/zen.js

@@ -0,0 +1,293 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.zenTheme = void 0;
+exports.zenTheme = {
+    themeKey: "zen",
+    animation: {
+        easingFunction: {
+            easeInOut: "cubic-bezier(0.455, 0.03, 0.515, 0.955)",
+            easeIn: "cubic-bezier(0.55, 0.085, 0.68, 0.53)",
+            easeOut: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+            linear: "linear",
+            bounceIn: "cubic-bezier(0.485, 0.155, 0.24, 1.245)",
+            bounceOut: "cubic-bezier(0.485, 0.155, 0.515, 0.845)",
+            bounceInOut: "cubic-bezier(0.76, -0.245, 0.24, 1.245)",
+        },
+        duration: {
+            instant: "0ms",
+            immediate: "100ms",
+            rapid: "200ms",
+            fast: "300ms",
+            slow: "400ms",
+            deliberate: "700ms",
+        },
+    },
+    border: {
+        solid: {
+            borderWidth: "2px",
+            borderRadius: "7px",
+            borderStyle: "solid",
+            borderColor: "#e1e2ea",
+        },
+        dashed: {
+            borderWidth: "2px",
+            borderRadius: "7px",
+            borderStyle: "dashed",
+        },
+        borderless: {
+            borderWidth: "2px",
+            borderRadius: "7px",
+            borderStyle: "solid",
+            borderColor: "transparent",
+        },
+        focusRing: {
+            borderWidth: "2px",
+            borderRadius: "10px",
+            borderStyle: "solid",
+        },
+    },
+    color: {
+        purple: {
+            100: "#f0f1f4",
+            200: "#e1e2ea",
+            300: "#c4c5d4",
+            400: "#a7a9c1",
+            500: "#898ba9",
+            600: "#6b6e94",
+            700: "#4b4d68",
+            800: "#35374a",
+        },
+        blue: {
+            100: "#e6f0f7",
+            200: "#cce1f0",
+            300: "#99c3e1",
+            400: "#4d95ca",
+            500: "#0168b3",
+            600: "#00518c",
+            // Duplicate from Heart because it's new
+            700: "#003157",
+        },
+        green: {
+            100: "#e9f6f3",
+            200: "#bce3dc",
+            300: "#90d1c5",
+            400: "#64bfae",
+            500: "#21a38b",
+            600: "#177261",
+            // Duplicate from Heart because it's new
+            700: "#22594a",
+        },
+        yellow: {
+            100: "#fffae8",
+            200: "#fff5d2",
+            300: "#ffeba5",
+            400: "#ffe278",
+            500: "#ffce1e",
+            // Duplicate from Heart because it's new
+            600: "#c68600",
+            // Duplicate from Heart because it's new
+            700: "#876400",
+        },
+        red: {
+            100: "#fcedef",
+            200: "#fccfd4",
+            300: "#fcaeb6",
+            400: "#fc7c89",
+            500: "#e22b3e",
+            600: "#b02130",
+            // Duplicate from Heart because it's new
+            700: "#6c1e20",
+        },
+        orange: {
+            100: "#fff1ee",
+            200: "#fdd6cd",
+            300: "#fdbaab",
+            400: "#fc9e8a",
+            500: "#fa7558",
+            600: "#b85d4a",
+            // Duplicate from Heart because it's new
+            700: "#903c00",
+        },
+        // Should only exist in Heart but we need a consistent type.
+        gray: {
+            100: "#f9f9f9",
+            200: "#f4f4f5",
+            300: "#eaeaec",
+            400: "#cdcdd0",
+            500: "#8c8c97",
+            600: "#524e56",
+        },
+        white: "#ffffff",
+    },
+    dataViz: {
+        favorable: "#6b6e94",
+        unfavorable: "#fccfd4",
+    },
+    layout: {
+        contentMaxWidth: "1392px",
+        contentSideMargin: "72px",
+        mobileActionsDrawerHeight: "60px",
+        navigationBarHeight: "72px",
+        breakpoints: {
+            medium: "768px",
+            large: "1080px",
+        },
+    },
+    shadow: {
+        small: {
+            boxShadow: "0 0 4px rgba(0, 0, 0, 0.09)",
+        },
+        large: {
+            boxShadow: "0 0 12px rgba(0, 0, 0, 0.19)",
+        },
+    },
+    spacing: {
+        xs: "0.375rem",
+        sm: "0.75rem",
+        md: "1.5rem",
+        lg: "2.25rem",
+        xl: "3rem",
+        xxl: "3.75rem",
+        xxxl: "4.5rem",
+        xxxxl: "5.25rem",
+        xxxxxl: "6rem",
+    },
+    typography: {
+        dataLarge: {
+            fontFamily: '"Greycliff CF", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "5.25rem",
+            lineHeight: "5.25rem",
+            letterSpacing: "normal",
+        },
+        dataLargeUnits: {
+            fontFamily: '"Greycliff CF", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "2.625rem",
+            lineHeight: "5.25rem",
+            letterSpacing: "normal",
+        },
+        dataMedium: {
+            fontFamily: '"Greycliff CF", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "3rem",
+            lineHeight: "5rem",
+            letterSpacing: "normal",
+        },
+        dataMediumUnits: {
+            fontFamily: '"Greycliff CF", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "1.5rem",
+            lineHeight: "5rem",
+            letterSpacing: "normal",
+        },
+        dataSmall: {
+            fontFamily: '"Greycliff CF", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "1.5rem",
+            lineHeight: "1.5rem",
+            letterSpacing: "normal",
+        },
+        dataSmallUnits: {
+            fontFamily: '"Greycliff CF", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "1.125rem",
+            lineHeight: "1.5rem",
+            letterSpacing: "normal",
+        },
+        display0: {
+            fontFamily: '"Greycliff CF", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "4.5rem",
+            lineHeight: "4.5rem",
+            letterSpacing: "-0.03em",
+        },
+        heading1: {
+            fontFamily: '"Greycliff CF", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "2.25rem",
+            lineHeight: "2.25rem",
+            letterSpacing: "-0.03em",
+        },
+        heading2: {
+            fontFamily: '"Greycliff CF", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "1.875rem",
+            lineHeight: "2.25rem",
+            letterSpacing: "-0.03em",
+        },
+        heading3: {
+            fontFamily: '"Greycliff CF", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "1.375rem",
+            lineHeight: "1.5rem",
+            letterSpacing: "-0.03em",
+        },
+        heading4: {
+            fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 600,
+            fontSize: "1.125rem",
+            lineHeight: "1.5rem",
+            letterSpacing: "normal",
+        },
+        heading5: {
+            fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 600,
+            fontSize: "1rem",
+            lineHeight: "1.5rem",
+            letterSpacing: "normal",
+        },
+        heading6: {
+            fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "0.875rem",
+            lineHeight: "1.5rem",
+            letterSpacing: "normal",
+        },
+        paragraphIntroLede: {
+            fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 400,
+            fontSize: "1.25rem",
+            lineHeight: "1.875rem",
+            letterSpacing: "-0.5px",
+        },
+        paragraphBody: {
+            fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 400,
+            fontSize: "1rem",
+            lineHeight: "1.5rem",
+            letterSpacing: "normal",
+        },
+        paragraphSmall: {
+            fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 400,
+            fontSize: "0.875rem",
+            lineHeight: "1.125rem",
+            letterSpacing: "normal",
+        },
+        paragraphExtraSmall: {
+            fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 400,
+            fontSize: "0.75rem",
+            lineHeight: "1.125rem",
+            letterSpacing: "normal",
+        },
+        paragraphBold: {
+            fontWeight: 600,
+        },
+        buttonPrimary: {
+            fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 700,
+            fontSize: "1.125rem",
+            lineHeight: "1.5rem",
+            letterSpacing: "normal",
+        },
+        buttonSecondary: {
+            fontFamily: '"Inter", "Noto Sans", Helvetica, Arial, sans-serif',
+            fontWeight: 500,
+            fontSize: "1rem",
+            lineHeight: "1.5rem",
+            letterSpacing: "normal",
+        },
+    },
+};

package/dist/src/types.d.ts

@@ -0,0 +1,205 @@
+import type { CSSProperties as ReactCSSProperties } from "react";
+/**
+ * Use a custom type for CSS properties becauase we should eventually write a more strongly typed version using template literal types.
+ * This could definitely be contributed back to the community too. An example starting point here https://github.com/ghoullier/awesome-template-literal-types#css-parser
+ * For example:
+ * ```ts
+ * type Font = {
+ *   fontSize: `${number}rem`,
+ *
+ *  }
+ * type HexDigit = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F ;
+ * type Color = `rgba(${number}, ${number}, ${number}, ${number}) | #${HexDigit}${HexDigit}${HexDigit}` // You get the point
+ *
+ * ```
+ * */
+declare type KaizenCSSProperties = ReactCSSProperties;
+declare type Hex = string;
+export declare type TypographyFont = {
+    fontFamily: KaizenCSSProperties["fontFamily"];
+    fontWeight: KaizenCSSProperties["fontWeight"];
+    fontSize: KaizenCSSProperties["fontSize"];
+    lineHeight: KaizenCSSProperties["lineHeight"];
+    letterSpacing: KaizenCSSProperties["letterSpacing"];
+};
+export declare type ThemeKey = "zen" | "heart" | "custom";
+export declare type Theme = {
+    themeKey: ThemeKey;
+    border: {
+        solid: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+            borderColor: KaizenCSSProperties["borderColor"];
+        };
+        dashed: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+        };
+        borderless: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+            borderColor: KaizenCSSProperties["borderColor"];
+        };
+        focusRing: {
+            borderWidth: KaizenCSSProperties["borderWidth"];
+            borderRadius: KaizenCSSProperties["borderRadius"];
+            borderStyle: KaizenCSSProperties["borderStyle"];
+        };
+    };
+    animation: {
+        easingFunction: {
+            easeInOut: string;
+            easeIn: string;
+            easeOut: string;
+            linear: string;
+            bounceIn: string;
+            bounceOut: string;
+            bounceInOut: string;
+        };
+        duration: {
+            instant: string;
+            immediate: string;
+            rapid: string;
+            fast: string;
+            slow: string;
+            deliberate: string;
+        };
+    };
+    color: {
+        purple: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+            "800": Hex;
+        };
+        blue: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        green: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        yellow: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        red: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        orange: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+            "700": Hex;
+        };
+        gray: {
+            "100": Hex;
+            "200": Hex;
+            "300": Hex;
+            "400": Hex;
+            "500": Hex;
+            "600": Hex;
+        };
+        white: Hex;
+    };
+    dataViz: {
+        favorable: Hex;
+        unfavorable: Hex;
+    };
+    layout: {
+        contentMaxWidth: string;
+        contentSideMargin: string;
+        mobileActionsDrawerHeight: string;
+        navigationBarHeight: string;
+        breakpoints: {
+            medium: string;
+            large: string;
+        };
+    };
+    shadow: {
+        small: {
+            boxShadow: string;
+        };
+        large: {
+            boxShadow: string;
+        };
+    };
+    spacing: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        xxl: string;
+        xxxl: string;
+        xxxxl: string;
+        xxxxxl: string;
+    };
+    typography: {
+        dataLarge: TypographyFont;
+        dataLargeUnits: TypographyFont;
+        dataMedium: TypographyFont;
+        dataMediumUnits: TypographyFont;
+        dataSmall: TypographyFont;
+        dataSmallUnits: TypographyFont;
+        display0: TypographyFont;
+        heading1: TypographyFont;
+        heading2: TypographyFont;
+        heading3: TypographyFont;
+        heading4: TypographyFont;
+        heading5: TypographyFont;
+        heading6: TypographyFont;
+        paragraphIntroLede: TypographyFont;
+        paragraphBody: TypographyFont;
+        paragraphSmall: TypographyFont;
+        paragraphExtraSmall: TypographyFont;
+        paragraphBold: {
+            fontWeight: KaizenCSSProperties["fontWeight"];
+        };
+        buttonPrimary: TypographyFont;
+        buttonSecondary: TypographyFont;
+    };
+};
+export declare type DeepMapObjectLeafs<T, LeafType> = T extends string | number | bigint | boolean | symbol | null | undefined | ((...params: any[]) => any) ? LeafType : T extends Record<any, any> ? {
+    [Key in keyof T]: DeepMapObjectLeafs<T[Key], LeafType>;
+} : T;
+/**
+ * Apologies for the complex types.
+ * This type represents the Theme type but with every leaf value in the tree mapped strictly to a string, rather than a number or a more complex type such as a string union.
+ * The reason for this is to have a more accurate type for the generated hierarchy of design tokens which are represented as CSS custom properties, e.g. `var(--color-purple-800)`.
+ */
+export declare type CSSVariableTheme = DeepMapObjectLeafs<Theme, string>;
+export {};
+//# sourceMappingURL=types.d.ts.map

package/dist/src/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"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"}

package/dist/src/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/elm/Kaizen/Theme.elm

@@ -0,0 +1,29 @@
+module Kaizen.Theme exposing (Theme(..), defaultTheme, themeDecoder)
+
+import Json.Decode as Decode exposing (Decoder)
+
+
+type Theme
+    = Heart
+    | Zen
+
+
+defaultTheme =
+    Heart
+
+
+themeDecoder : Decoder Theme
+themeDecoder =
+    Decode.string
+        |> Decode.map
+            (\themeString ->
+                case themeString of
+                    "zen" ->
+                        Zen
+
+                    "heart" ->
+                        Heart
+
+                    _ ->
+                        defaultTheme
+            )

package/index.ts

@@ -0,0 +1,9 @@
+// These are exposed at the top level because it seems like they are the most useful and relevent to usage of design tokens.
+export * from "./src/themes"
+export * from "./src/types"
+export * from "./src/ThemeManager"
+export * from "./react"
+
+export { makeCssVariableDefinitionsMap } from "./src/lib/makeCssVariableDefinitionsMap"
+export { makeCSSVariableTheme } from "./src/lib/makeCssVariableTheme"
+export { mapLeafsOfObject } from "./src/lib/mapLeafsOfObject"

package/less/animation.less

@@ -0,0 +1,49 @@
+/** THIS IS AN AUTOGENERATED FILE **/
+
+@animation-easing-function-ease-in-out: var(
+  --animation-easing-function-ease-in-out,
+  cubic-bezier(0.455, 0.03, 0.515, 0.955)
+);
+@animation-easing-function-ease-in-out-id: --animation-easing-function-ease-in-out;
+@animation-easing-function-ease-in: var(
+  --animation-easing-function-ease-in,
+  cubic-bezier(0.55, 0.085, 0.68, 0.53)
+);
+@animation-easing-function-ease-in-id: --animation-easing-function-ease-in;
+@animation-easing-function-ease-out: var(
+  --animation-easing-function-ease-out,
+  cubic-bezier(0.25, 0.46, 0.45, 0.94)
+);
+@animation-easing-function-ease-out-id: --animation-easing-function-ease-out;
+@animation-easing-function-linear: var(
+  --animation-easing-function-linear,
+  linear
+);
+@animation-easing-function-linear-id: --animation-easing-function-linear;
+@animation-easing-function-bounce-in: var(
+  --animation-easing-function-bounce-in,
+  cubic-bezier(0.485, 0.155, 0.24, 1.245)
+);
+@animation-easing-function-bounce-in-id: --animation-easing-function-bounce-in;
+@animation-easing-function-bounce-out: var(
+  --animation-easing-function-bounce-out,
+  cubic-bezier(0.485, 0.155, 0.515, 0.845)
+);
+@animation-easing-function-bounce-out-id: --animation-easing-function-bounce-out;
+@animation-easing-function-bounce-in-out: var(
+  --animation-easing-function-bounce-in-out,
+  cubic-bezier(0.76, -0.245, 0.24, 1.245)
+);
+@animation-easing-function-bounce-in-out-id: --animation-easing-function-bounce-in-out;
+@animation-duration-instant: var(--animation-duration-instant, 0ms);
+@animation-duration-instant-id: --animation-duration-instant;
+@animation-duration-immediate: var(--animation-duration-immediate, 100ms);
+@animation-duration-immediate-id: --animation-duration-immediate;
+@animation-duration-rapid: var(--animation-duration-rapid, 200ms);
+@animation-duration-rapid-id: --animation-duration-rapid;
+@animation-duration-fast: var(--animation-duration-fast, 300ms);
+@animation-duration-fast-id: --animation-duration-fast;
+@animation-duration-slow: var(--animation-duration-slow, 400ms);
+@animation-duration-slow-id: --animation-duration-slow;
+@animation-duration-deliberate: var(--animation-duration-deliberate, 700ms);
+@animation-duration-deliberate-id: --animation-duration-deliberate;

package/less/border.less

@@ -0,0 +1,47 @@
+/** THIS IS AN AUTOGENERATED FILE **/
+
+@border-solid-border-width: var(--border-solid-border-width, 2px);
+@border-solid-border-width-id: --border-solid-border-width;
+@border-solid-border-radius: var(--border-solid-border-radius, 7px);
+@border-solid-border-radius-id: --border-solid-border-radius;
+@border-solid-border-style: var(--border-solid-border-style, solid);
+@border-solid-border-style-id: --border-solid-border-style;
+@border-solid-border-color: var(--border-solid-border-color, #e1e2ea);
+@border-solid-border-color-rgb: var(
+  --border-solid-border-color-rgb,
+  225,
+  226,
+  234
+);
+@border-solid-border-color-rgb-id: --border-solid-border-color-rgb;
+@border-solid-border-color-id: --border-solid-border-color;
+@border-dashed-border-width: var(--border-dashed-border-width, 2px);
+@border-dashed-border-width-id: --border-dashed-border-width;
+@border-dashed-border-radius: var(--border-dashed-border-radius, 7px);
+@border-dashed-border-radius-id: --border-dashed-border-radius;
+@border-dashed-border-style: var(--border-dashed-border-style, dashed);
+@border-dashed-border-style-id: --border-dashed-border-style;
+@border-borderless-border-width: var(--border-borderless-border-width, 2px);
+@border-borderless-border-width-id: --border-borderless-border-width;
+@border-borderless-border-radius: var(--border-borderless-border-radius, 7px);
+@border-borderless-border-radius-id: --border-borderless-border-radius;
+@border-borderless-border-style: var(--border-borderless-border-style, solid);
+@border-borderless-border-style-id: --border-borderless-border-style;
+@border-borderless-border-color: var(
+  --border-borderless-border-color,
+  transparent
+);
+@border-borderless-border-color-rgb: var(
+  --border-borderless-border-color-rgb,
+  0,
+  0,
+  0
+);
+@border-borderless-border-color-rgb-id: --border-borderless-border-color-rgb;
+@border-borderless-border-color-id: --border-borderless-border-color;
+@border-focus-ring-border-width: var(--border-focus-ring-border-width, 2px);
+@border-focus-ring-border-width-id: --border-focus-ring-border-width;
+@border-focus-ring-border-radius: var(--border-focus-ring-border-radius, 10px);
+@border-focus-ring-border-radius-id: --border-focus-ring-border-radius;
+@border-focus-ring-border-style: var(--border-focus-ring-border-style, solid);
+@border-focus-ring-border-style-id: --border-focus-ring-border-style;