@sps-woodland/tokens 7.0.0

package/src/vanilla-extract/sprinkleValues.ts

@@ -0,0 +1,605 @@
+/* eslint-disable */
+/**
+ * GENERATED
+ * Do not edit directly
+ */
+export const sprinkleValues = Object.freeze({
+  colors: {
+    "red-light": "#fbe6ea",
+    "red-medium": "#de002e",
+    "red-dark": "#a30d2d",
+    "blue-extra-light": "#f2f8fb",
+    "blue-light": "#e6f2f8",
+    "blue-medium": "#007db8",
+    "blue-dark": "#09638d",
+    "green-light": "#e7f3ec",
+    "green-medium": "#0b8940",
+    "green-dark": "#106b39",
+    "purple-light": "#f4ecf2",
+    "purple-medium-light": "#e3d0de",
+    "purple-medium": "#91467f",
+    "purple-dark": "#6e3c65",
+    "orange-light": "#fcf1e7",
+    "orange-medium": "#e7760b",
+    "orange-dark": "#aa5e14",
+    "grey-extra-light": "#f3f4f4",
+    "grey-light": "#e9e9ea",
+    "grey-medium-light": "#d2d4d4",
+    "grey-medium": "#717779",
+    "grey-medium-dark": "#4b5356",
+    "grey-dark": "#1f282c",
+    "yellow-light": "#fff8e0",
+    "yellow-medium": "#ffcc00",
+    white: "#ffffff",
+    black: "#000000",
+    none: "#000000",
+  },
+  fontSizes: {
+    "body-sm": "0.75rem",
+    "body-md": "0.875rem",
+    "component-sm": "0.75rem",
+    "title-sm": "1rem",
+    "title-md": "1.125rem",
+    "title-lg": "1.25rem",
+    "title-xl": "1.5rem",
+  },
+  lineHeights: {
+    "body-sm": "1.125rem",
+    "body-md": "1.25rem",
+    "component-sm": "0.875rem",
+    "title-sm": "1rem",
+    "title-md": "1.125rem",
+    "title-lg": "1.25rem",
+    "title-xl": "1.5rem",
+  },
+  spacing: {
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "2rem",
+    none: 0,
+    auto: "auto",
+  },
+  asset: {
+    font: {
+      "Source Sans Pro": {
+        "400": {
+          normal: "fonts/source-sans-pro-v9-latin-regular",
+          italic: "fonts/source-sans-pro-v9-latin-italic",
+        },
+        "600": {
+          normal: "fonts/source-sans-pro-v9-latin-600",
+          italic: "fonts/source-sans-pro-v9-latin-600italic",
+        },
+      },
+      "Source Code Pro": {
+        "400": {
+          normal: "fonts/source-code-pro-v6-latin-regular",
+          italic: "fonts/source-code-pro-v6-latin-italic",
+        },
+        "600": {
+          normal: "fonts/source-code-pro-v6-latin-600",
+          italic: "fonts/source-code-pro-v6-latin-600italic",
+        },
+      },
+      "SPS-Icons": { "400": { normal: "fonts/icomoon-sps-icons" } },
+    },
+  },
+  border: {
+    style: { standard: "solid" },
+    radius: { none: "0", xxs: "0.125rem", xs: "0.25rem" },
+    width: { none: "0", standard: "0.0625rem" },
+  },
+  component: {
+    "cap-content": { "line-height": "1.875rem" },
+    card: {
+      "background-color": "#ffffff",
+      border: {
+        style: "solid",
+        width: "0.0625rem",
+        color: "#d2d4d4",
+        radius: "0.25rem",
+      },
+    },
+    "card-body": { padding: "1rem" },
+    "card-title": { "font-weight": 600 },
+    "clickable-tag": {
+      height: "1.125rem",
+      "line-height": "0.75rem",
+      "icon-font-size": "0.625rem",
+      "icon-top-offset": "-0.0625rem",
+    },
+    "content-row": {
+      "background-color": "#ffffff",
+      "border-width": "0.0625rem",
+      "border-style": "solid",
+      "border-color": "#d2d4d4",
+      "border-radius": "0.25rem",
+      "expanded-border-radius-top": "0.25rem",
+      "expanded-border-radius-bottom": "0",
+      "selected-background-color": "#e6f2f8",
+      "selected-border-color": "#007db8",
+      "expand-button-border": "0",
+      "expand-button-color": "#007db8",
+      "expand-button-hover-color": "#09638d",
+      "expand-button-font-size": "1rem",
+      "expand-button-line-height": "1.125rem",
+      padding: "1rem",
+      "card-spacing-margin": "1rem",
+    },
+    "content-row-col": { "padding-small": "0.5rem" },
+    "content-row-expansion": {
+      "background-color": "#f3f4f4",
+      "border-color": "#d2d4d4",
+      "border-radius-top": "0",
+      "border-radius-bottom": "0.25rem",
+    },
+    "content-tiles": {
+      color: "#000000",
+      "background-color": "#ffffff",
+      border: {
+        radius: "0.25rem",
+        width: "0.0625rem",
+        style: "solid",
+        borderColor: "#d2d4d4",
+        hover: { borderColor: "#007db8", color: "#000000" },
+        error: { borderColor: "#de002e", hover: { borderColor: "#de002e" } },
+        warning: { borderColor: "#e7760b" },
+        disabled: {
+          borderColor: "#d2d4d4",
+          backgroundColor: "#f3f4f4",
+          color: "#d2d4d4",
+          hover: { borderColor: "#d2d4d4" },
+        },
+      },
+      disabled: { opacity: ".25" },
+      cursor: { notAllowed: "not-allowed", pointer: "pointer" },
+      height: "8.625rem",
+      transition: "all 0.25s ease",
+      "text-decoration": "none",
+      links: { color: "#000000" },
+      image: { height: "3.75rem", width: "3.75rem" },
+      icons: { warning: "#e7760b", error: "#de002e", disabled: "#717779" },
+      iconContainer: { padding: "0.5rem" },
+      title: { icon: { padding: "0.5rem", color: "#007db8" } },
+      imageContainer: {
+        height: "3.75rem",
+        width: "3.75rem",
+        marginTop: "1rem",
+        marginBottom: "1rem",
+      },
+    },
+    "feedback-block": {
+      kind: {
+        tip: {
+          "background-color": "#fff8e0",
+          "border-color": "#ffcc00",
+          iconColor: "#ffcc00",
+          microIconColor: "#09638d",
+        },
+        success: {
+          "background-color": "#e7f3ec",
+          "border-color": "#0b8940",
+          iconColor: "#0b8940",
+        },
+        warning: {
+          "background-color": "#fcf1e7",
+          "border-color": "#e7760b",
+          iconColor: "#e7760b",
+        },
+        info: {
+          "background-color": "#e6f2f8",
+          "border-color": "#09638d",
+          iconColor: "#09638d",
+        },
+        error: {
+          "background-color": "#fbe6ea",
+          "border-color": "#de002e",
+          iconColor: "#de002e",
+        },
+      },
+      standard: {
+        "border-radius": "0.125rem",
+        "border-style": "solid",
+        "border-width": "0.0625rem",
+        "font-size": "0.875rem",
+        "font-weight": 400,
+        "line-height": "1.25rem ",
+        "margin-bottom": "1rem ",
+        "padding-top": "0.5rem",
+        "padding-bottom": "0.5rem",
+        "padding-left": "1rem",
+        "padding-right": "1rem",
+      },
+      micro: {
+        height: "1rem",
+        text: {
+          color: "#4b5356",
+          "font-size": "0.75rem",
+          "font-weight": 600,
+          "line-height": "1.125rem",
+          "margin-left": "0.25rem",
+        },
+      },
+      icon: {
+        standard: { "margin-right": "0.5rem", "font-size": "1.25rem" },
+        micro: {
+          "font-size": "0.875rem",
+          "font-weight": 400,
+          "line-height": "1.125rem",
+        },
+      },
+    },
+    "file-upload": { "icon-size": "3rem" },
+    "filter-tile": {
+      height: "6.625rem",
+      maxWidth: "15.625rem",
+      minWidth: "6.875rem",
+      marginEndChildren: "0",
+      title: { height: "2.25rem" },
+      tileValue: { heightFontSizeLineHeight: "1.875rem" },
+    },
+    "key-value-set": {
+      "font-size": "0.75rem",
+      "line-height": "1.125rem",
+      spacing: "0.5rem",
+      key: { "font-weight": 600 },
+    },
+    "key-value-tag": {
+      "key-section": {
+        "border-left-radius": "0.125rem",
+        "border-right-radius": "0",
+      },
+      "value-section": {
+        background: "#ffffff",
+        "border-left-radius": "0",
+        "border-right-radius": "0.125rem",
+        "box-shadow-color": "#4b5356",
+        "box-shadow-width": "0.0625rem",
+        "padding-vertical": "0.125rem",
+        "padding-horizontal": "0.25rem",
+        "link-color": "#4b5356",
+      },
+    },
+    "page-subtitle": {
+      text: {
+        color: "#4b5356",
+        "font-size": "1.125rem",
+        "line-height": "1.125rem",
+        "margin-top": "0.25rem",
+      },
+      icon: {
+        "font-size": "0.75rem",
+        "line-height": "1.125rem",
+        "margin-left": "0.25rem",
+        "margin-right": "0.25rem",
+      },
+    },
+    "page-title": {
+      text: {
+        color: "#1f282c",
+        "font-size": "1.5rem",
+        "line-height": "1.5rem",
+      },
+      icon: {
+        "font-size": "1.125rem",
+        "line-height": "1.5rem",
+        "margin-right": "0.25rem",
+      },
+    },
+    "product-bar": {
+      "min-height": "3.75rem",
+      width: "77.5rem",
+      "logo-size": "1.5rem",
+      "nav-underline": "0.125rem",
+      "nav-height": "3.625rem",
+      "vertical-rule-height": "2.125rem",
+    },
+    "rich-text-editor": {
+      "background-color": "#ffffff",
+      border: {
+        color: "#717779",
+        style: "solid",
+        radius: "0.25rem",
+        width: "0.0625rem",
+      },
+      "font-size": "0.875rem",
+      "line-height": "1.25rem",
+      padding: { input: { x: "0.5rem", y: "0.25rem" }, toolbar: "0.25rem" },
+      disabled: { "border-color": "#d2d4d4", "input-color": "#717779" },
+    },
+    "rich-text-editor-toolbar-button": {
+      "background-color": "#ffffff",
+      border: {
+        color: "#ffffff",
+        style: "solid",
+        radius: "0.25rem",
+        width: "0.0625rem",
+      },
+      padding: { x: "0.5rem", y: "0.25rem" },
+      hover: { "background-color": "#d2d4d4", "border-color": "#d2d4d4" },
+      active: { "background-color": "#e6f2f8", "border-color": "#007db8" },
+    },
+    "slack-link": {
+      "font-size": "0.875rem",
+      "border-color": "#007db8",
+      "border-size": "0.0625rem",
+      "border-style": "solid",
+      icon: { "font-size": "1rem", "margin-right": "0.25rem" },
+    },
+    "sorting-header": {
+      width: "100%",
+      padding: "0",
+      borderRadius: "0.25rem",
+      backgroundColor: "#e9e9ea",
+      cell: {
+        typeColor: "#4b5356",
+        activeTypeColor: "#1f282c",
+        fontSize: "0.75rem",
+        fontWeight: 600,
+        lineHeight: "1.25rem",
+        padding: "0.5rem",
+        activeBackgroundColor: "#d2d4d4",
+        hoverBackgroundColor: "#f3f4f4",
+      },
+    },
+    spinner: {
+      sm: { dimension: "1.125rem", thickness: "0.125rem" },
+      md: { dimension: "2.25rem", thickness: "0.25rem" },
+      lg: { dimension: "4.5rem", thickness: "0.5rem" },
+    },
+    tabs: {
+      container: {
+        "background-color": "#e9e9ea",
+        border: {
+          color: "#d2d4d4",
+          width: "0.0625rem",
+          style: "solid",
+          radius: "0.25rem",
+        },
+        padding: "1rem",
+      },
+      navigation: { "margin-bottom": "1rem" },
+    },
+    tab: {
+      border: { style: "solid", width: "0.0625rem", radius: "0.25rem" },
+      type: { "line-height": "0.875rem ", size: "0.75rem", weight: 600 },
+      padding: { x: "1rem", y: "0.5rem" },
+      container: {
+        "border-color": "#000000",
+        color: "#717779",
+        active: {
+          "background-color": "#ffffff",
+          "border-color": "#d2d4d4",
+          color: "#1f282c",
+        },
+        hover: { "background-color": "#f3f4f4", "border-color": "#d2d4d4" },
+      },
+      navigation: {
+        "background-color": "#ffffff",
+        "border-color": "#d2d4d4",
+        color: "#4b5356",
+        active: {
+          "background-color": "#007db8",
+          "border-color": "#007db8",
+          color: "#ffffff",
+        },
+        hover: { "background-color": "#f3f4f4" },
+        disabled: { color: "#717779" },
+      },
+    },
+    tag: { "line-height": "0.75rem", "icon-line-height": "0.625rem" },
+    "vertical-rule": { thickness: "0.0625rem" },
+    "zero-state": {
+      "image-height": "6.25rem",
+      "image-width": "12.5rem",
+      "icon-font-size": "3rem",
+      "icon-line-height": "3rem",
+    },
+    "content-tile": {
+      height: "8.625rem",
+      image: {
+        height: "3.75rem",
+        width: "3.75rem",
+        marginBottom: "1rem",
+        marginTop: "1rem",
+      },
+      container: { spacing: "0.5rem" },
+      titleContainer: { spacing: "0.5rem" },
+    },
+  },
+  grid: { columns: { standard: 12 }, gutter: "1rem" },
+  icon: {
+    "angle-left": { character: "\\e900" },
+    "angle-right": { character: "\\e901" },
+    archive: { character: "\\e902" },
+    "arrow-down": { character: "\\e903" },
+    "arrow-left-circle": { character: "\\e904" },
+    "arrow-left": { character: "\\e905" },
+    "arrow-right": { character: "\\e906" },
+    "arrow-up": { character: "\\e907" },
+    asterisk: { character: "\\e908" },
+    ban: { character: "\\e909" },
+    barcode: { character: "\\e90a" },
+    bell: { character: "\\e90b" },
+    bolt: { character: "\\e90c" },
+    book: { character: "\\e90d" },
+    building: { character: "\\e90e" },
+    "burst-bolt": { character: "\\e90f" },
+    burst: { character: "\\e910" },
+    "calendar-blank": { character: "\\e911" },
+    calendar: { character: "\\e912" },
+    camera: { character: "\\e913" },
+    "chart-area": { character: "\\e914" },
+    "chart-bar": { character: "\\e915" },
+    "chart-line": { character: "\\e916" },
+    "chart-pie": { character: "\\e917" },
+    checkmark: { character: "\\e918" },
+    "chevron-down": { character: "\\e919" },
+    "chevron-left": { character: "\\e91a" },
+    "chevron-right": { character: "\\e91b" },
+    "chevron-up": { character: "\\e91c" },
+    "circle-outline": { character: "\\e91d" },
+    clock: { character: "\\e91e" },
+    "code-fork": { character: "\\e91f" },
+    "comment-bubble-question": { character: "\\e920" },
+    "comment-bubble": { character: "\\e921" },
+    conversation: { character: "\\e922" },
+    "column-switcher": { character: "\\e923" },
+    "credit-card": { character: "\\e924" },
+    dashboard: { character: "\\e925" },
+    database: { character: "\\e926" },
+    disk: { character: "\\e927" },
+    "dollar-sign": { character: "\\e928" },
+    "double-angle-left": { character: "\\e929" },
+    "double-angle-right": { character: "\\e92a" },
+    "download-cloud": { character: "\\e92b" },
+    drill: { character: "\\e92c" },
+    duplicate: { character: "\\e92d" },
+    ellipses: { character: "\\e92e" },
+    envelope: { character: "\\e92f" },
+    exchange: { character: "\\e930" },
+    "expand-collapse": { character: "\\e931" },
+    eye: { character: "\\e932" },
+    "file-duplicate": { character: "\\e933" },
+    "file-pdf": { character: "\\e934" },
+    "file-presentation": { character: "\\e935" },
+    "file-size": { character: "\\e936" },
+    "file-solid-text": { character: "\\e937" },
+    "file-solid": { character: "\\e938" },
+    "file-spreadsheet": { character: "\\e939" },
+    "file-text": { character: "\\e93a" },
+    file: { character: "\\e93b" },
+    filter: { character: "\\e93c" },
+    flag: { character: "\\e93d" },
+    "folder-open": { character: "\\e93e" },
+    "folder-solid-open": { character: "\\e93f" },
+    "folder-solid": { character: "\\e940" },
+    folder: { character: "\\e941" },
+    gear: { character: "\\e942" },
+    globe: { character: "\\e943" },
+    grid: { character: "\\e944" },
+    group: { character: "\\e945" },
+    "hand-stop": { character: "\\e946" },
+    handshake: { character: "\\e947" },
+    hat: { character: "\\e948" },
+    heart: { character: "\\e949" },
+    history: { character: "\\e94a" },
+    inbox: { character: "\\e94b" },
+    incoming: { character: "\\e94c" },
+    "info-circle": { character: "\\e94d" },
+    intercom: { character: "\\e94e" },
+    "item-tag": { character: "\\e94f" },
+    key: { character: "\\e950" },
+    "life-preserver": { character: "\\e951" },
+    lightbulb: { character: "\\e952" },
+    link: { character: "\\e953" },
+    linkedin: { character: "\\e954" },
+    "list-cards": { character: "\\e955" },
+    "list-columns": { character: "\\e956" },
+    "list-summary": { character: "\\e957" },
+    "list-table": { character: "\\e958" },
+    list: { character: "\\e959" },
+    location: { character: "\\e95a" },
+    locked: { character: "\\e95b" },
+    "map-marker": { character: "\\e95c" },
+    map: { character: "\\e95d" },
+    maximize: { character: "\\e95e" },
+    minimize: { character: "\\e95f" },
+    "minus-circle": { character: "\\e960" },
+    minus: { character: "\\e961" },
+    "new-file": { character: "\\e962" },
+    "new-screen": { character: "\\e963" },
+    outgoing: { character: "\\e964" },
+    "paper-plane": { character: "\\e965" },
+    pencil: { character: "\\e966" },
+    photo: { character: "\\e967" },
+    pinterest: { character: "\\e968" },
+    play: { character: "\\e969" },
+    "plus-circle": { character: "\\e96a" },
+    "plus-sign": { character: "\\e96b" },
+    presentation: { character: "\\e96c" },
+    printer: { character: "\\e96d" },
+    "qr-code": { character: "\\e96e" },
+    "question-circle": { character: "\\e96f" },
+    "quote-left": { character: "\\e970" },
+    "quote-right": { character: "\\e971" },
+    random: { character: "\\e972" },
+    refresh: { character: "\\e973" },
+    rocket: { character: "\\e974" },
+    "search-plus": { character: "\\e975" },
+    search: { character: "\\e976" },
+    share: { character: "\\e977" },
+    "shopping-cart": { character: "\\e978" },
+    "sort-alpha-asc": { character: "\\e979" },
+    "sort-alpha-desc": { character: "\\e97a" },
+    "sort-num-asc": { character: "\\e97b" },
+    "sort-num-desc": { character: "\\e97c" },
+    "star-outline": { character: "\\e97d" },
+    star: { character: "\\e97e" },
+    "archive-circle": { character: "\\e97f" },
+    "x-circle": { character: "\\e980" },
+    "exclamation-circle": { character: "\\e981" },
+    "descending-ellipses-circle": { character: "\\e982" },
+    "double-angle-right-circle": { character: "\\e983" },
+    "locked-circle": { character: "\\e984" },
+    "asterisk-circle": { character: "\\e985" },
+    "checkmark-circle": { character: "\\e986" },
+    "clock-circle": { character: "\\e987" },
+    "calendar-blank-circle": { character: "\\e988" },
+    "ban-circle": { character: "\\e989" },
+    "disk-circle": { character: "\\e98b" },
+    "template-circle": { character: "\\e98c" },
+    "exclamation-triangle": { character: "\\e98d" },
+    table: { character: "\\e98e" },
+    tabs: { character: "\\e98f" },
+    "thumbs-down-outline": { character: "\\e990" },
+    "thumbs-down": { character: "\\e991" },
+    "thumbs-up-outline": { character: "\\e992" },
+    "thumbs-up": { character: "\\e993" },
+    trash: { character: "\\e994" },
+    "truck-shipping": { character: "\\e995" },
+    twitter: { character: "\\e996" },
+    undo: { character: "\\e997" },
+    unlocked: { character: "\\e998" },
+    "upload-cloud": { character: "\\e999" },
+    wrench: { character: "\\e99a" },
+    x: { character: "\\e99b" },
+    "arrow-right-circle": { character: "\\e99c" },
+    "calendar-select": { character: "\\e99d" },
+    tag: { character: "\\e99e" },
+    user: { character: "\\e99f" },
+    "eye-slash": { character: "\\e9a0" },
+    "bell-filled": { character: "\\e9a1" },
+    "nested-list": { character: "\\e9a2" },
+    pin: { character: "\\e9a3" },
+    "user-impersonation": { character: "\\e9a4" },
+    "status-archived": { character: "\\e97f", color: "#1f282c" },
+    "status-cancelled": { character: "\\e980", color: "#de002e" },
+    "status-error": { character: "\\e981", color: "#de002e" },
+    "status-in-process": { character: "\\e982", color: "#91467f" },
+    "status-in-transit": { character: "\\e983", color: "#91467f" },
+    "status-locked": { character: "\\e984", color: "#1f282c" },
+    "status-new": { character: "\\e985", color: "#007db8" },
+    "status-ok": { character: "\\e986", color: "#0b8940" },
+    "status-on-hold": { character: "\\e987", color: "#1f282c" },
+    "status-outdated": { character: "\\e988", color: "#1f282c" },
+    "status-rejected": { character: "\\e989", color: "#de002e" },
+    "status-saved": { character: "\\e98b", color: "#91467f" },
+    "status-saving": { character: "\\e98b", color: "#91467f" },
+    "status-template": { character: "\\e98c", color: "#007db8" },
+    "status-warning": { character: "\\e98d", color: "#e7760b" },
+    xs: "0.75rem",
+    sm: "0.875rem",
+    md: "1rem",
+    lg: "1.25rem",
+  },
+  type: { weight: { normal: 400, bold: 600 }, decoration: { none: "none" } },
+  system: {
+    xxs: "0.125rem",
+    xs: "0.25rem",
+    sm: "0.5rem",
+    md: "1rem",
+    lg: "2rem",
+  },
+});

package/src/vanilla-extract/sprinkles.css.ts

@@ -0,0 +1,19 @@
+import { createSprinkles } from "@vanilla-extract/sprinkles";
+
+import { borderProperties } from "./properties/border.css";
+import { colorProperties } from "./properties/color.css";
+import { gridProperties } from "./properties/grid.css";
+import { marginProperties } from "./properties/margin.css";
+import { paddingProperties } from "./properties/padding.css";
+import { typeProperties } from "./properties/type.css";
+
+export const sprinkles = createSprinkles(
+  borderProperties,
+  colorProperties,
+  gridProperties,
+  marginProperties,
+  paddingProperties,
+  typeProperties,
+);
+export const sp = sprinkles;
+export type Sprinkles = Parameters<typeof sprinkles>[0];

package/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "extends": "../../../tsconfig.base.json",
+    "compilerOptions": {
+        "baseUrl": "tsconfig",
+        "rootDir": "src/",
+        "outDir": "./dist/out-tsc",
+        "target": "es5",
+        "esModuleInterop": true,
+        "declaration": true
+    },
+    "include": ["src/**/*"],
+    "exclude": ["node_modules", "lib"]
+}

package/vite.config.js

@@ -0,0 +1,21 @@
+import path from "path";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+import pkg from "./package.json";
+
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+    outDir: path.resolve(__dirname, "./lib"),
+    emptyOutDir: false,
+    rollupOptions: {
+      external: pkg.peerDependencies ? Object.keys(pkg.peerDependencies) : [],
+    },
+  },
+});