@trackunit/ui-design-tokens 0.0.63 → 0.0.65

package/index.cjs

@@ -25,10 +25,15 @@ const DEFAULT_CHART_COLORS = [
     "#5E5CE6",
     "#2066FF",
     "#FF9500",
+    "#E2E8F0",
 ];
+/**
+ * Re-orders the default chart colors to make the first ones more visually different.
+ */
 const getReorderedChartColors = () => [
-    // re-ordered to make the first ones more visually different
     DEFAULT_CHART_COLORS[0],
+    DEFAULT_CHART_COLORS[22],
+    DEFAULT_CHART_COLORS[1],
     DEFAULT_CHART_COLORS[4],
     DEFAULT_CHART_COLORS[7],
     DEFAULT_CHART_COLORS[9],
@@ -37,7 +42,6 @@ const getReorderedChartColors = () => [
     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],
@@ -52,8 +56,8 @@ const getReorderedChartColors = () => [
  * This allows us to modify them with opacity values and more.
  *
  * @param variable CSS custom property for color
- * @returns Full css for using the color
  * @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
+ * @returns {string} Full css for using the color
  */
 function colorVariableToCss(variable) {
     return `rgb(var(${variable}) / var(--tw-bg-opacity))`;
@@ -79,7 +83,7 @@ function rgbToHex(r, g, b) {
  *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
  *
  * @param variable A color from the `colors` object of the Theme
- * @returns HEX color
+ * @returns {string} HEX color
  */
 const getHEX = (variable) => {
     var _a, _b;
@@ -511,6 +515,15 @@ const themeColors = {
 };
 
 const outputOptions = ["HEX", "CSS"];
+/**
+ *
+Returns the color value in CSS or HEX format for a given theme color and variant.
+ *
+@param ColorKey - A valid theme color name from the available ThemeColorKeys.
+@param {unknown} [arg2] - An optional argument that can be either an OutputOptions or a variant value.
+@param {unknown} [arg3] - An optional argument that can be either an OutputOptions or a variant value.
+@returns {string} - Returns a string containing the color value in CSS or HEX format for the provided arguments.
+ */
 function color(ColorKey, arg2, arg3) {
     var _a, _b;
     const colorName = themeColors[ColorKey].name;

package/index.js

@@ -21,10 +21,15 @@ const DEFAULT_CHART_COLORS = [
     "#5E5CE6",
     "#2066FF",
     "#FF9500",
+    "#E2E8F0",
 ];
+/**
+ * Re-orders the default chart colors to make the first ones more visually different.
+ */
 const getReorderedChartColors = () => [
-    // re-ordered to make the first ones more visually different
     DEFAULT_CHART_COLORS[0],
+    DEFAULT_CHART_COLORS[22],
+    DEFAULT_CHART_COLORS[1],
     DEFAULT_CHART_COLORS[4],
     DEFAULT_CHART_COLORS[7],
     DEFAULT_CHART_COLORS[9],
@@ -33,7 +38,6 @@ const getReorderedChartColors = () => [
     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],
@@ -48,8 +52,8 @@ const getReorderedChartColors = () => [
  * This allows us to modify them with opacity values and more.
  *
  * @param variable CSS custom property for color
- * @returns Full css for using the color
  * @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
+ * @returns {string} Full css for using the color
  */
 function colorVariableToCss(variable) {
     return `rgb(var(${variable}) / var(--tw-bg-opacity))`;
@@ -75,7 +79,7 @@ function rgbToHex(r, g, b) {
  *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
  *
  * @param variable A color from the `colors` object of the Theme
- * @returns HEX color
+ * @returns {string} HEX color
  */
 const getHEX = (variable) => {
     var _a, _b;
@@ -507,6 +511,15 @@ const themeColors = {
 };
 
 const outputOptions = ["HEX", "CSS"];
+/**
+ *
+Returns the color value in CSS or HEX format for a given theme color and variant.
+ *
+@param ColorKey - A valid theme color name from the available ThemeColorKeys.
+@param {unknown} [arg2] - An optional argument that can be either an OutputOptions or a variant value.
+@param {unknown} [arg3] - An optional argument that can be either an OutputOptions or a variant value.
+@returns {string} - Returns a string containing the color value in CSS or HEX format for the provided arguments.
+ */
 function color(ColorKey, arg2, arg3) {
     var _a, _b;
     const colorName = themeColors[ColorKey].name;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/ui-design-tokens",
-  "version": "0.0.63",
+  "version": "0.0.65",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "module": "./index.js",

package/src/tokens/chartColorsDefault.d.ts

@@ -1,2 +1,5 @@
 export declare const DEFAULT_CHART_COLORS: string[];
+/**
+ * Re-orders the default chart colors to make the first ones more visually different.
+ */
 export declare const getReorderedChartColors: () => string[];

package/src/tokens/utils/colorVariableToCss.d.ts

@@ -6,7 +6,7 @@
  * This allows us to modify them with opacity values and more.
  *
  * @param variable CSS custom property for color
- * @returns Full css for using the color
  * @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
+ * @returns {string} Full css for using the color
  */
 export declare function colorVariableToCss(variable: string): string;

package/src/tokens/utils/getHEX.d.ts

@@ -5,6 +5,6 @@
  *  Example: color("PRIMARY", 500, "HEX") -> #3b82f6
  *
  * @param variable A color from the `colors` object of the Theme
- * @returns HEX color
+ * @returns {string} HEX color
  */
 export declare const getHEX: (variable: string) => string;