@servicetitan/hammer-token 2.4.0 → 2.5.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @servicetitan/hammer-token@2.4.0 build /home/runner/work/hammer/hammer/packages/hammer-token
+> @servicetitan/hammer-token@2.5.0 build /home/runner/work/hammer/hammer/packages/hammer-token
 > node ./config.js
 
 

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @servicetitan/hammer-token
 
+## 2.5.0
+
+### Minor Changes
+
+- [#1393](https://github.com/servicetitan/hammer/pull/1393) [`0869aed`](https://github.com/servicetitan/hammer/commit/0869aed7c5d63837d10d74576e0932ad14812401) Thanks [@rgdelato](https://github.com/rgdelato)! - [Tokens] Add chart color tokens to `hammer-token` package
+
 ## 2.4.0
 
 ### Minor Changes

package/build/web/core/raw.js

@@ -8,6 +8,23 @@ export const common = {
 	BorderWidthNone: "0rem",
 	BorderWidth: "0.0625rem",
 	BorderWidthStrong: "0.125rem",
+	ChartsMonochrome1Pattern: "solid",
+	ChartsMonochrome2Pattern: "solid",
+	ChartsMonochrome3Pattern: "striped",
+	ChartsMonochrome4Pattern: "solid",
+	ChartsCategorical1Pattern: "solid",
+	ChartsCategorical2Pattern: "solid",
+	ChartsCategorical3Pattern: "solid",
+	ChartsCategorical4Pattern: "solid",
+	ChartsCategorical5Pattern: "solid",
+	ChartsCategorical6Pattern: "solid",
+	ChartsCategorical7Pattern: "solid",
+	ChartsCategorical8Pattern: "solid",
+	ChartsCategorical9Pattern: "solid",
+	ChartsStatusSuccessPattern: "solid",
+	ChartsStatusWarningPattern: "solid",
+	ChartsStatusDangerPattern: "solid",
+	ChartsStatusNeutralPattern: "striped",
 	FocusRingWidth: "0.25rem",
 	ShadowSizeFlat: "0rem 0rem 0rem",
 	ShadowSizeFloat: "0rem 0.125rem 0.5rem",
@@ -55,6 +72,40 @@ export const light = {
 	BorderColorPrimary: "#0265DC",
 	BorderColorSuccess: "#007A4D",
 	BorderColorDanger: "#e13212",
+	ChartsMonochrome1: "#3892F3",
+	ChartsMonochrome1Stroke: "transparent",
+	ChartsMonochrome2: "#08389c",
+	ChartsMonochrome2Stroke: "transparent",
+	ChartsMonochrome3: "#F2F9FF",
+	ChartsMonochrome3Stroke: "#3892F3",
+	ChartsMonochrome4: "#F2F9FF",
+	ChartsMonochrome4Stroke: "#3892F3",
+	ChartsCategorical1: "#3892F3",
+	ChartsCategorical1Stroke: "transparent",
+	ChartsCategorical2: "#0FA2B8",
+	ChartsCategorical2Stroke: "transparent",
+	ChartsCategorical3: "#907AF5",
+	ChartsCategorical3Stroke: "transparent",
+	ChartsCategorical4: "#DE52CE",
+	ChartsCategorical4Stroke: "transparent",
+	ChartsCategorical5: "#C2185B",
+	ChartsCategorical5Stroke: "transparent",
+	ChartsCategorical6: "#759E15",
+	ChartsCategorical6Stroke: "transparent",
+	ChartsCategorical7: "#AC6400",
+	ChartsCategorical7Stroke: "transparent",
+	ChartsCategorical8: "#EB7200",
+	ChartsCategorical8Stroke: "transparent",
+	ChartsCategorical9: "#D57A5C",
+	ChartsCategorical9Stroke: "transparent",
+	ChartsStatusSuccess: "#007A4D",
+	ChartsStatusSuccessStroke: "transparent",
+	ChartsStatusWarning: "#ffbe00",
+	ChartsStatusWarningStroke: "transparent",
+	ChartsStatusDanger: "#e13212",
+	ChartsStatusDangerStroke: "transparent",
+	ChartsStatusNeutral: "#ffffff",
+	ChartsStatusNeutralStroke: "#8C9CA5",
 	FocusRingColor: "#0265DC",
 	FocusRingColorDanger: "#e13212",
 	ForegroundColor: "#141414",
@@ -109,6 +160,40 @@ export const dark = {
 	BorderColorPrimary: "#78BBFA",
 	BorderColorSuccess: "#49CC93",
 	BorderColorDanger: "#ff745f",
+	ChartsMonochrome1: "#8AC3FF",
+	ChartsMonochrome1Stroke: "transparent",
+	ChartsMonochrome2: "#3476FF",
+	ChartsMonochrome2Stroke: "transparent",
+	ChartsMonochrome3: "#141414",
+	ChartsMonochrome3Stroke: "#8AC3FF",
+	ChartsMonochrome4: "#F2F9FF",
+	ChartsMonochrome4Stroke: "#8AC3FF",
+	ChartsCategorical1: "#3892F3",
+	ChartsCategorical1Stroke: "transparent",
+	ChartsCategorical2: "#C6F6FF",
+	ChartsCategorical2Stroke: "transparent",
+	ChartsCategorical3: "#C6B8F4",
+	ChartsCategorical3Stroke: "transparent",
+	ChartsCategorical4: "#D949A9",
+	ChartsCategorical4Stroke: "transparent",
+	ChartsCategorical5: "#ED1369",
+	ChartsCategorical5Stroke: "transparent",
+	ChartsCategorical6: "#8CC30B",
+	ChartsCategorical6Stroke: "transparent",
+	ChartsCategorical7: "#B36800",
+	ChartsCategorical7Stroke: "transparent",
+	ChartsCategorical8: "#FFA037",
+	ChartsCategorical8Stroke: "transparent",
+	ChartsCategorical9: "#D99078",
+	ChartsCategorical9Stroke: "transparent",
+	ChartsStatusSuccess: "#49CC93",
+	ChartsStatusSuccessStroke: "transparent",
+	ChartsStatusWarning: "#ffe278",
+	ChartsStatusWarningStroke: "transparent",
+	ChartsStatusDanger: "#ff745f",
+	ChartsStatusDangerStroke: "transparent",
+	ChartsStatusNeutral: "#141414",
+	ChartsStatusNeutralStroke: "#B4C1C8",
 	FocusRingColor: "#78BBFA",
 	FocusRingColorDanger: "#ff745f",
 	ForegroundColor: "#ffffff",

package/build/web/core/semantic-variables.scss

@@ -19,6 +19,57 @@ $light: (
   border-color-primary: #0265DC,
   border-color-success: #007A4D,
   border-color-danger: #e13212,
+  charts-monochrome-1: #3892F3,
+  charts-monochrome-1-stroke: transparent,
+  charts-monochrome-1-pattern: solid,
+  charts-monochrome-2: #08389c,
+  charts-monochrome-2-stroke: transparent,
+  charts-monochrome-2-pattern: solid,
+  charts-monochrome-3: #F2F9FF,
+  charts-monochrome-3-stroke: #3892F3,
+  charts-monochrome-3-pattern: striped,
+  charts-monochrome-4: #F2F9FF,
+  charts-monochrome-4-stroke: #3892F3,
+  charts-monochrome-4-pattern: solid,
+  charts-categorical-1: #3892F3,
+  charts-categorical-1-stroke: transparent,
+  charts-categorical-1-pattern: solid,
+  charts-categorical-2: #0FA2B8,
+  charts-categorical-2-stroke: transparent,
+  charts-categorical-2-pattern: solid,
+  charts-categorical-3: #907AF5,
+  charts-categorical-3-stroke: transparent,
+  charts-categorical-3-pattern: solid,
+  charts-categorical-4: #DE52CE,
+  charts-categorical-4-stroke: transparent,
+  charts-categorical-4-pattern: solid,
+  charts-categorical-5: #C2185B,
+  charts-categorical-5-stroke: transparent,
+  charts-categorical-5-pattern: solid,
+  charts-categorical-6: #759E15,
+  charts-categorical-6-stroke: transparent,
+  charts-categorical-6-pattern: solid,
+  charts-categorical-7: #AC6400,
+  charts-categorical-7-stroke: transparent,
+  charts-categorical-7-pattern: solid,
+  charts-categorical-8: #EB7200,
+  charts-categorical-8-stroke: transparent,
+  charts-categorical-8-pattern: solid,
+  charts-categorical-9: #D57A5C,
+  charts-categorical-9-stroke: transparent,
+  charts-categorical-9-pattern: solid,
+  charts-status-success: #007A4D,
+  charts-status-success-stroke: transparent,
+  charts-status-success-pattern: solid,
+  charts-status-warning: #ffbe00,
+  charts-status-warning-stroke: transparent,
+  charts-status-warning-pattern: solid,
+  charts-status-danger: #e13212,
+  charts-status-danger-stroke: transparent,
+  charts-status-danger-pattern: solid,
+  charts-status-neutral: #ffffff,
+  charts-status-neutral-stroke: #8C9CA5,
+  charts-status-neutral-pattern: striped,
   focus-ring-color: #0265DC,
   focus-ring-color-danger: #e13212,
   foreground-color: #141414,
@@ -73,6 +124,57 @@ $dark: (
   border-color-primary: #78BBFA,
   border-color-success: #49CC93,
   border-color-danger: #ff745f,
+  charts-monochrome-1: #8AC3FF,
+  charts-monochrome-1-stroke: transparent,
+  charts-monochrome-1-pattern: solid,
+  charts-monochrome-2: #3476FF,
+  charts-monochrome-2-stroke: transparent,
+  charts-monochrome-2-pattern: solid,
+  charts-monochrome-3: #141414,
+  charts-monochrome-3-stroke: #8AC3FF,
+  charts-monochrome-3-pattern: striped,
+  charts-monochrome-4: #F2F9FF,
+  charts-monochrome-4-stroke: #8AC3FF,
+  charts-monochrome-4-pattern: solid,
+  charts-categorical-1: #3892F3,
+  charts-categorical-1-stroke: transparent,
+  charts-categorical-1-pattern: solid,
+  charts-categorical-2: #C6F6FF,
+  charts-categorical-2-stroke: transparent,
+  charts-categorical-2-pattern: solid,
+  charts-categorical-3: #C6B8F4,
+  charts-categorical-3-stroke: transparent,
+  charts-categorical-3-pattern: solid,
+  charts-categorical-4: #D949A9,
+  charts-categorical-4-stroke: transparent,
+  charts-categorical-4-pattern: solid,
+  charts-categorical-5: #ED1369,
+  charts-categorical-5-stroke: transparent,
+  charts-categorical-5-pattern: solid,
+  charts-categorical-6: #8CC30B,
+  charts-categorical-6-stroke: transparent,
+  charts-categorical-6-pattern: solid,
+  charts-categorical-7: #B36800,
+  charts-categorical-7-stroke: transparent,
+  charts-categorical-7-pattern: solid,
+  charts-categorical-8: #FFA037,
+  charts-categorical-8-stroke: transparent,
+  charts-categorical-8-pattern: solid,
+  charts-categorical-9: #D99078,
+  charts-categorical-9-stroke: transparent,
+  charts-categorical-9-pattern: solid,
+  charts-status-success: #49CC93,
+  charts-status-success-stroke: transparent,
+  charts-status-success-pattern: solid,
+  charts-status-warning: #ffe278,
+  charts-status-warning-stroke: transparent,
+  charts-status-warning-pattern: solid,
+  charts-status-danger: #ff745f,
+  charts-status-danger-stroke: transparent,
+  charts-status-danger-pattern: solid,
+  charts-status-neutral: #141414,
+  charts-status-neutral-stroke: #B4C1C8,
+  charts-status-neutral-pattern: striped,
   focus-ring-color: #78BBFA,
   focus-ring-color-danger: #ff745f,
   foreground-color: #ffffff,

package/build/web/core/semantic.js

@@ -207,6 +207,363 @@ export const BorderColorDanger = {
     }
   }
 };
+export const ChartsMonochrome1 = {
+  value: "#3892F3",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#8AC3FF"
+      }
+    }
+  }
+};
+export const ChartsMonochrome1Stroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsMonochrome1Pattern = { value: "solid" };
+export const ChartsMonochrome2 = {
+  value: "#08389c",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#3476FF"
+      }
+    }
+  }
+};
+export const ChartsMonochrome2Stroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsMonochrome2Pattern = { value: "solid" };
+export const ChartsMonochrome3 = {
+  value: "#F2F9FF",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#141414"
+      }
+    }
+  }
+};
+export const ChartsMonochrome3Stroke = {
+  value: "#3892F3",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#8AC3FF"
+      }
+    }
+  }
+};
+export const ChartsMonochrome3Pattern = { value: "striped" };
+export const ChartsMonochrome4 = {
+  value: "#F2F9FF",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#F2F9FF"
+      }
+    }
+  }
+};
+export const ChartsMonochrome4Stroke = {
+  value: "#3892F3",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#8AC3FF"
+      }
+    }
+  }
+};
+export const ChartsMonochrome4Pattern = { value: "solid" };
+export const ChartsCategorical1 = {
+  value: "#3892F3",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#3892F3"
+      }
+    }
+  }
+};
+export const ChartsCategorical1Stroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsCategorical1Pattern = { value: "solid" };
+export const ChartsCategorical2 = {
+  value: "#0FA2B8",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#C6F6FF"
+      }
+    }
+  }
+};
+export const ChartsCategorical2Stroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsCategorical2Pattern = { value: "solid" };
+export const ChartsCategorical3 = {
+  value: "#907AF5",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#C6B8F4"
+      }
+    }
+  }
+};
+export const ChartsCategorical3Stroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsCategorical3Pattern = { value: "solid" };
+export const ChartsCategorical4 = {
+  value: "#DE52CE",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#D949A9"
+      }
+    }
+  }
+};
+export const ChartsCategorical4Stroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsCategorical4Pattern = { value: "solid" };
+export const ChartsCategorical5 = {
+  value: "#C2185B",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ED1369"
+      }
+    }
+  }
+};
+export const ChartsCategorical5Stroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsCategorical5Pattern = { value: "solid" };
+export const ChartsCategorical6 = {
+  value: "#759E15",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#8CC30B"
+      }
+    }
+  }
+};
+export const ChartsCategorical6Stroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsCategorical6Pattern = { value: "solid" };
+export const ChartsCategorical7 = {
+  value: "#AC6400",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#B36800"
+      }
+    }
+  }
+};
+export const ChartsCategorical7Stroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsCategorical7Pattern = { value: "solid" };
+export const ChartsCategorical8 = {
+  value: "#EB7200",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#FFA037"
+      }
+    }
+  }
+};
+export const ChartsCategorical8Stroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsCategorical8Pattern = { value: "solid" };
+export const ChartsCategorical9 = {
+  value: "#D57A5C",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#D99078"
+      }
+    }
+  }
+};
+export const ChartsCategorical9Stroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsCategorical9Pattern = { value: "solid" };
+export const ChartsStatusSuccess = {
+  value: "#007A4D",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#49CC93"
+      }
+    }
+  }
+};
+export const ChartsStatusSuccessStroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsStatusSuccessPattern = { value: "solid" };
+export const ChartsStatusWarning = {
+  value: "#ffbe00",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ffe278"
+      }
+    }
+  }
+};
+export const ChartsStatusWarningStroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsStatusWarningPattern = { value: "solid" };
+export const ChartsStatusDanger = {
+  value: "#e13212",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#ff745f"
+      }
+    }
+  }
+};
+export const ChartsStatusDangerStroke = {
+  value: "transparent",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "transparent"
+      }
+    }
+  }
+};
+export const ChartsStatusDangerPattern = { value: "solid" };
+export const ChartsStatusNeutral = {
+  value: "#ffffff",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#141414"
+      }
+    }
+  }
+};
+export const ChartsStatusNeutralStroke = {
+  value: "#8C9CA5",
+  attributes: {
+    appearance: {
+      dark: {
+        value: "#B4C1C8"
+      }
+    }
+  }
+};
+export const ChartsStatusNeutralPattern = { value: "striped" };
 export const FocusRingColor = {
   value: "#0265DC",
   attributes: {

package/build/web/core/semantic.scss

@@ -27,6 +27,57 @@ $border-color-strong: var(--border-color-strong, #444445);
 $border-color-primary: var(--border-color-primary, #0265DC);
 $border-color-success: var(--border-color-success, #007A4D);
 $border-color-danger: var(--border-color-danger, #e13212);
+$charts-monochrome-1: var(--charts-monochrome-1, #3892F3);
+$charts-monochrome-1-stroke: var(--charts-monochrome-1-stroke, transparent);
+$charts-monochrome-1-pattern: solid;
+$charts-monochrome-2: var(--charts-monochrome-2, #08389c);
+$charts-monochrome-2-stroke: var(--charts-monochrome-2-stroke, transparent);
+$charts-monochrome-2-pattern: solid;
+$charts-monochrome-3: var(--charts-monochrome-3, #F2F9FF);
+$charts-monochrome-3-stroke: var(--charts-monochrome-3-stroke, #3892F3);
+$charts-monochrome-3-pattern: striped;
+$charts-monochrome-4: var(--charts-monochrome-4, #F2F9FF);
+$charts-monochrome-4-stroke: var(--charts-monochrome-4-stroke, #3892F3);
+$charts-monochrome-4-pattern: solid;
+$charts-categorical-1: var(--charts-categorical-1, #3892F3);
+$charts-categorical-1-stroke: var(--charts-categorical-1-stroke, transparent);
+$charts-categorical-1-pattern: solid;
+$charts-categorical-2: var(--charts-categorical-2, #0FA2B8);
+$charts-categorical-2-stroke: var(--charts-categorical-2-stroke, transparent);
+$charts-categorical-2-pattern: solid;
+$charts-categorical-3: var(--charts-categorical-3, #907AF5);
+$charts-categorical-3-stroke: var(--charts-categorical-3-stroke, transparent);
+$charts-categorical-3-pattern: solid;
+$charts-categorical-4: var(--charts-categorical-4, #DE52CE);
+$charts-categorical-4-stroke: var(--charts-categorical-4-stroke, transparent);
+$charts-categorical-4-pattern: solid;
+$charts-categorical-5: var(--charts-categorical-5, #C2185B);
+$charts-categorical-5-stroke: var(--charts-categorical-5-stroke, transparent);
+$charts-categorical-5-pattern: solid;
+$charts-categorical-6: var(--charts-categorical-6, #759E15);
+$charts-categorical-6-stroke: var(--charts-categorical-6-stroke, transparent);
+$charts-categorical-6-pattern: solid;
+$charts-categorical-7: var(--charts-categorical-7, #AC6400);
+$charts-categorical-7-stroke: var(--charts-categorical-7-stroke, transparent);
+$charts-categorical-7-pattern: solid;
+$charts-categorical-8: var(--charts-categorical-8, #EB7200);
+$charts-categorical-8-stroke: var(--charts-categorical-8-stroke, transparent);
+$charts-categorical-8-pattern: solid;
+$charts-categorical-9: var(--charts-categorical-9, #D57A5C);
+$charts-categorical-9-stroke: var(--charts-categorical-9-stroke, transparent);
+$charts-categorical-9-pattern: solid;
+$charts-status-success: var(--charts-status-success, #007A4D);
+$charts-status-success-stroke: var(--charts-status-success-stroke, transparent);
+$charts-status-success-pattern: solid;
+$charts-status-warning: var(--charts-status-warning, #ffbe00);
+$charts-status-warning-stroke: var(--charts-status-warning-stroke, transparent);
+$charts-status-warning-pattern: solid;
+$charts-status-danger: var(--charts-status-danger, #e13212);
+$charts-status-danger-stroke: var(--charts-status-danger-stroke, transparent);
+$charts-status-danger-pattern: solid;
+$charts-status-neutral: var(--charts-status-neutral, #ffffff);
+$charts-status-neutral-stroke: var(--charts-status-neutral-stroke, #8C9CA5);
+$charts-status-neutral-pattern: striped;
 $focus-ring-color: var(--focus-ring-color, #0265DC);
 $focus-ring-color-danger: var(--focus-ring-color-danger, #e13212);
 $focus-ring-width: 0.25rem;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicetitan/hammer-token",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "",
   "main": "build/web/index.js",
   "types": "build/web/index.d.ts",

package/src/theme/core/charts.js

@@ -0,0 +1,439 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
+const { color } = require("../../global/primitive/color");
+const { status } = require("./status");
+
+module.exports = {
+  charts: {
+    monochrome: {
+      ["1"]: {
+        default: {
+          value: "#3892F3",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#8AC3FF",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      ["2"]: {
+        default: {
+          value: "#08389c",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#3476FF",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      ["3"]: {
+        default: {
+          value: "#F2F9FF",
+          attributes: {
+            appearance: {
+              dark: {
+                value: color.neutral["400"].value,
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "#3892F3",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#8AC3FF",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "striped",
+        },
+      },
+      ["4"]: {
+        default: {
+          value: "#F2F9FF",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#F2F9FF",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "#3892F3",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#8AC3FF",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+    },
+    categorical: {
+      ["1"]: {
+        default: {
+          value: "#3892F3",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#3892F3",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      ["2"]: {
+        default: {
+          value: "#0FA2B8",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#C6F6FF",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      ["3"]: {
+        default: {
+          value: "#907AF5",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#C6B8F4",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      ["4"]: {
+        default: {
+          value: "#DE52CE",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#D949A9",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      ["5"]: {
+        default: {
+          value: "#C2185B",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#ED1369",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      ["6"]: {
+        default: {
+          value: "#759E15",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#8CC30B",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      ["7"]: {
+        default: {
+          value: "#AC6400",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#B36800",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      ["8"]: {
+        default: {
+          value: "#EB7200",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#FFA037",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      ["9"]: {
+        default: {
+          value: "#D57A5C",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#D99078",
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+    },
+    status: {
+      success: {
+        default: {
+          value: status.color.success.value,
+          attributes: {
+            appearance: {
+              dark: {
+                value: status.color.success.attributes.appearance.dark.value,
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      warning: {
+        default: {
+          value: status.color.warning.value,
+          attributes: {
+            appearance: {
+              dark: {
+                value: status.color.warning.attributes.appearance.dark.value,
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      danger: {
+        default: {
+          value: status.color.danger.value,
+          attributes: {
+            appearance: {
+              dark: {
+                value: status.color.danger.attributes.appearance.dark.value,
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "transparent",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "transparent",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "solid",
+        },
+      },
+      neutral: {
+        default: {
+          value: color.neutral["0"].value,
+          attributes: {
+            appearance: {
+              dark: {
+                value: color.neutral["400"].value,
+              },
+            },
+          },
+        },
+        stroke: {
+          value: "#8C9CA5",
+          attributes: {
+            appearance: {
+              dark: {
+                value: "#B4C1C8",
+              },
+            },
+          },
+        },
+        pattern: {
+          value: "striped",
+        },
+      },
+    },
+  },
+};

package/type/types.ts

@@ -152,6 +152,57 @@ export type Semantic = {
   BorderColorSubdued: TokenObj;
   BorderColorPrimary: TokenObj;
   BorderColorDanger: TokenObj;
+  ChartsMonochrome1: TokenObj;
+  ChartsMonochrome1Stroke: TokenObj;
+  ChartsMonochrome1Pattern: TokenObj;
+  ChartsMonochrome2: TokenObj;
+  ChartsMonochrome2Stroke: TokenObj;
+  ChartsMonochrome2Pattern: TokenObj;
+  ChartsMonochrome3: TokenObj;
+  ChartsMonochrome3Stroke: TokenObj;
+  ChartsMonochrome3Pattern: TokenObj;
+  ChartsMonochrome4: TokenObj;
+  ChartsMonochrome4Stroke: TokenObj;
+  ChartsMonochrome4Pattern: TokenObj;
+  ChartsCategorical1: TokenObj;
+  ChartsCategorical1Stroke: TokenObj;
+  ChartsCategorical1Pattern: TokenObj;
+  ChartsCategorical2: TokenObj;
+  ChartsCategorical2Stroke: TokenObj;
+  ChartsCategorical2Pattern: TokenObj;
+  ChartsCategorical3: TokenObj;
+  ChartsCategorical3Stroke: TokenObj;
+  ChartsCategorical3Pattern: TokenObj;
+  ChartsCategorical4: TokenObj;
+  ChartsCategorical4Stroke: TokenObj;
+  ChartsCategorical4Pattern: TokenObj;
+  ChartsCategorical5: TokenObj;
+  ChartsCategorical5Stroke: TokenObj;
+  ChartsCategorical5Pattern: TokenObj;
+  ChartsCategorical6: TokenObj;
+  ChartsCategorical6Stroke: TokenObj;
+  ChartsCategorical6Pattern: TokenObj;
+  ChartsCategorical7: TokenObj;
+  ChartsCategorical7Stroke: TokenObj;
+  ChartsCategorical7Pattern: TokenObj;
+  ChartsCategorical8: TokenObj;
+  ChartsCategorical8Stroke: TokenObj;
+  ChartsCategorical8Pattern: TokenObj;
+  ChartsCategorical9: TokenObj;
+  ChartsCategorical9Stroke: TokenObj;
+  ChartsCategorical9Pattern: TokenObj;
+  ChartsChartsStatusSuccess: TokenObj;
+  ChartsChartsStatusSuccessStroke: TokenObj;
+  ChartsChartsStatusSuccessPattern: TokenObj;
+  ChartsChartsStatusWarning: TokenObj;
+  ChartsChartsStatusWarningStroke: TokenObj;
+  ChartsChartsStatusWarningPattern: TokenObj;
+  ChartsChartsStatusDanger: TokenObj;
+  ChartsChartsStatusDangerStroke: TokenObj;
+  ChartsChartsStatusDangerPattern: TokenObj;
+  ChartsChartsStatusNeutral: TokenObj;
+  ChartsChartsStatusNeutralStroke: TokenObj;
+  ChartsChartsStatusNeutralPattern: TokenObj;
   FocusRingColor: TokenObj;
   FocusRingColorDanger: TokenObj;
   FocusRingWidth: TokenObj;