@trackunit/ui-design-tokens 0.0.63 → 0.0.64
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/index.cjs
CHANGED
|
@@ -26,8 +26,10 @@ const DEFAULT_CHART_COLORS = [
|
|
|
26
26
|
"#2066FF",
|
|
27
27
|
"#FF9500",
|
|
28
28
|
];
|
|
29
|
+
/**
|
|
30
|
+
* Re-orders the default chart colors to make the first ones more visually different.
|
|
31
|
+
*/
|
|
29
32
|
const getReorderedChartColors = () => [
|
|
30
|
-
// re-ordered to make the first ones more visually different
|
|
31
33
|
DEFAULT_CHART_COLORS[0],
|
|
32
34
|
DEFAULT_CHART_COLORS[4],
|
|
33
35
|
DEFAULT_CHART_COLORS[7],
|
|
@@ -52,8 +54,8 @@ const getReorderedChartColors = () => [
|
|
|
52
54
|
* This allows us to modify them with opacity values and more.
|
|
53
55
|
*
|
|
54
56
|
* @param variable CSS custom property for color
|
|
55
|
-
* @returns Full css for using the color
|
|
56
57
|
* @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
|
|
58
|
+
* @returns {string} Full css for using the color
|
|
57
59
|
*/
|
|
58
60
|
function colorVariableToCss(variable) {
|
|
59
61
|
return `rgb(var(${variable}) / var(--tw-bg-opacity))`;
|
|
@@ -79,7 +81,7 @@ function rgbToHex(r, g, b) {
|
|
|
79
81
|
* Example: color("PRIMARY", 500, "HEX") -> #3b82f6
|
|
80
82
|
*
|
|
81
83
|
* @param variable A color from the `colors` object of the Theme
|
|
82
|
-
* @returns HEX color
|
|
84
|
+
* @returns {string} HEX color
|
|
83
85
|
*/
|
|
84
86
|
const getHEX = (variable) => {
|
|
85
87
|
var _a, _b;
|
|
@@ -511,6 +513,15 @@ const themeColors = {
|
|
|
511
513
|
};
|
|
512
514
|
|
|
513
515
|
const outputOptions = ["HEX", "CSS"];
|
|
516
|
+
/**
|
|
517
|
+
*
|
|
518
|
+
Returns the color value in CSS or HEX format for a given theme color and variant.
|
|
519
|
+
*
|
|
520
|
+
@param ColorKey - A valid theme color name from the available ThemeColorKeys.
|
|
521
|
+
@param {unknown} [arg2] - An optional argument that can be either an OutputOptions or a variant value.
|
|
522
|
+
@param {unknown} [arg3] - An optional argument that can be either an OutputOptions or a variant value.
|
|
523
|
+
@returns {string} - Returns a string containing the color value in CSS or HEX format for the provided arguments.
|
|
524
|
+
*/
|
|
514
525
|
function color(ColorKey, arg2, arg3) {
|
|
515
526
|
var _a, _b;
|
|
516
527
|
const colorName = themeColors[ColorKey].name;
|
package/index.js
CHANGED
|
@@ -22,8 +22,10 @@ const DEFAULT_CHART_COLORS = [
|
|
|
22
22
|
"#2066FF",
|
|
23
23
|
"#FF9500",
|
|
24
24
|
];
|
|
25
|
+
/**
|
|
26
|
+
* Re-orders the default chart colors to make the first ones more visually different.
|
|
27
|
+
*/
|
|
25
28
|
const getReorderedChartColors = () => [
|
|
26
|
-
// re-ordered to make the first ones more visually different
|
|
27
29
|
DEFAULT_CHART_COLORS[0],
|
|
28
30
|
DEFAULT_CHART_COLORS[4],
|
|
29
31
|
DEFAULT_CHART_COLORS[7],
|
|
@@ -48,8 +50,8 @@ const getReorderedChartColors = () => [
|
|
|
48
50
|
* This allows us to modify them with opacity values and more.
|
|
49
51
|
*
|
|
50
52
|
* @param variable CSS custom property for color
|
|
51
|
-
* @returns Full css for using the color
|
|
52
53
|
* @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
|
|
54
|
+
* @returns {string} Full css for using the color
|
|
53
55
|
*/
|
|
54
56
|
function colorVariableToCss(variable) {
|
|
55
57
|
return `rgb(var(${variable}) / var(--tw-bg-opacity))`;
|
|
@@ -75,7 +77,7 @@ function rgbToHex(r, g, b) {
|
|
|
75
77
|
* Example: color("PRIMARY", 500, "HEX") -> #3b82f6
|
|
76
78
|
*
|
|
77
79
|
* @param variable A color from the `colors` object of the Theme
|
|
78
|
-
* @returns HEX color
|
|
80
|
+
* @returns {string} HEX color
|
|
79
81
|
*/
|
|
80
82
|
const getHEX = (variable) => {
|
|
81
83
|
var _a, _b;
|
|
@@ -507,6 +509,15 @@ const themeColors = {
|
|
|
507
509
|
};
|
|
508
510
|
|
|
509
511
|
const outputOptions = ["HEX", "CSS"];
|
|
512
|
+
/**
|
|
513
|
+
*
|
|
514
|
+
Returns the color value in CSS or HEX format for a given theme color and variant.
|
|
515
|
+
*
|
|
516
|
+
@param ColorKey - A valid theme color name from the available ThemeColorKeys.
|
|
517
|
+
@param {unknown} [arg2] - An optional argument that can be either an OutputOptions or a variant value.
|
|
518
|
+
@param {unknown} [arg3] - An optional argument that can be either an OutputOptions or a variant value.
|
|
519
|
+
@returns {string} - Returns a string containing the color value in CSS or HEX format for the provided arguments.
|
|
520
|
+
*/
|
|
510
521
|
function color(ColorKey, arg2, arg3) {
|
|
511
522
|
var _a, _b;
|
|
512
523
|
const colorName = themeColors[ColorKey].name;
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
* This allows us to modify them with opacity values and more.
|
|
7
7
|
*
|
|
8
8
|
* @param variable CSS custom property for color
|
|
9
|
-
* @returns Full css for using the color
|
|
10
9
|
* @example "--color-primart-400" --> "rgb(var(--color-primary-400) / var(--tw-bg-opacity)))"
|
|
10
|
+
* @returns {string} Full css for using the color
|
|
11
11
|
*/
|
|
12
12
|
export declare function colorVariableToCss(variable: string): string;
|