@freightos/icons 1.0.2 → 1.0.3

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.
Files changed (5) hide show
  1. package/README.md +10 -9
  2. package/dist/cjs/colors.js +43 -42
  3. package/dist/esm/colors.js +43 -42
  4. package/dist/types/colors.d.ts +5 -4
  5. package/package.json +1 -1
package/README.md CHANGED
@@ -86,9 +86,10 @@ Icons use `currentColor` by default, making them easy to theme. The `color` prop
86
86
 
87
87
  ```tsx
88
88
  // Freightos design system colors (with autocomplete!)
89
- <IconSearch color="primary-blue" />
90
- <IconUser color="semantic-red-40" />
91
- <IconDashboard color="purple-10" />
89
+ <IconSearch color="blue" />
90
+ <IconError color="red" />
91
+ <IconWarning color="yellow" />
92
+ <IconSuccess color="green" />
92
93
 
93
94
  // Inherits parent text color
94
95
  <div className="text-blue-500">
@@ -108,17 +109,17 @@ Icons use `currentColor` by default, making them easy to theme. The `color` prop
108
109
 
109
110
  The following Freightos design system colors are available with autocomplete support:
110
111
 
111
- **Primary Blues:** `primary-blue-10`, `primary-blue-20`, `primary-blue`, `primary-blue-40`, `primary-blue-50`
112
+ **Blues:** `blue-10`, `blue-20`, `blue`, `blue-40`, `blue-50`
112
113
 
113
- **Semantic Reds:** `semantic-red-10`, `semantic-red-20`, `semantic-red`, `semantic-red-40`, `semantic-red-50`
114
+ **Reds:** `red-10`, `red-20`, `red`, `red-40`, `red-50`
114
115
 
115
- **Semantic Yellows:** `semantic-yellow-10`, `semantic-yellow-20`, `semantic-yellow`, `semantic-yellow-30`, `semantic-yellow-40`, `semantic-yellow-50`
116
+ **Yellows:** `yellow-10`, `yellow-20`, `yellow`, `yellow-30`, `yellow-40`, `yellow-50`
116
117
 
117
- **Semantic Greens:** `semantic-green-10`, `semantic-green-20`, `semantic-green`, `semantic-green-40`, `semantic-green-50`
118
+ **Greens:** `green-10`, `green-20`, `green`, `green-40`, `green-50`
118
119
 
119
- **Primary Grays:** `primary-white`, `primary-gray-05`, `primary-gray-10`, `primary-gray-20`, `primary-gray-30`, `primary-gray-40`, `primary-gray-50`, `primary-gray-60`, `primary-gray-70`, `primary-gray-80`, `primary-gray-90`, `primary-gray`
120
+ **Grays:** `white`, `gray-05`, `gray-10`, `gray-20`, `gray-30`, `gray-40`, `gray-50`, `gray-60`, `gray-70`, `gray-80`, `gray-90`, `gray`
120
121
 
121
- **Accent Colors:** `purple-10`, `purple`
122
+ **Purples:** `purple-10`, `purple`
122
123
 
123
124
  **Special:** `transparent`
124
125
 
package/dist/cjs/colors.js CHANGED
@@ -6,9 +6,10 @@
6
6
  * to get autocomplete support for design system colors.
7
7
  *
8
8
  * @example
9
- * <IconSearch color="primary-blue" />
10
- * <IconUser color="semantic-red-40" />
11
- * <IconDashboard color="purple-10" />
9
+ * <IconSearch color="blue" />
10
+ * <IconError color="red" />
11
+ * <IconWarning color="yellow" />
12
+ * <IconSuccess color="green" />
12
13
  */
13
14
  Object.defineProperty(exports, "__esModule", { value: true });
14
15
  exports.FREIGHTOS_COLORS = void 0;
@@ -17,45 +18,45 @@ exports.FREIGHTOS_COLORS = void 0;
17
18
  * This can be used if you need the actual color values in your application.
18
19
  */
19
20
  exports.FREIGHTOS_COLORS = {
20
- // Primary Blues
21
- "primary-blue-10": "#e1f5f9",
22
- "primary-blue-20": "#ace8f0",
23
- "primary-blue": "#2075bd",
24
- "primary-blue-40": "#125c9b",
25
- "primary-blue-50": "#05387d",
26
- // Semantic Reds
27
- "semantic-red-10": "#ffede1",
28
- "semantic-red-20": "#fbbea4",
29
- "semantic-red": "#d8271e",
30
- "semantic-red-40": "#9b0f1f",
31
- "semantic-red-50": "#670521",
32
- // Semantic Yellows
33
- "semantic-yellow-10": "#fef6cc",
34
- "semantic-yellow-20": "#fdea9a",
35
- "semantic-yellow": "#edaf07",
36
- "semantic-yellow-30": "#dc9500",
37
- "semantic-yellow-40": "#9c6b02",
38
- "semantic-yellow-50": "#714601",
39
- // Semantic Greens
40
- "semantic-green-10": "#eafdea",
41
- "semantic-green-20": "#bdf6c2",
42
- "semantic-green": "#47a96e",
43
- "semantic-green-40": "#237957",
44
- "semantic-green-50": "#0d5143",
45
- // Primary Grays
46
- "primary-white": "#ffffff",
47
- "primary-gray-05": "#fbfbfb",
48
- "primary-gray-10": "#f6f6f6",
49
- "primary-gray-20": "#e5e6e6",
50
- "primary-gray-30": "#c6c7c7",
51
- "primary-gray-40": "#afb2b2",
52
- "primary-gray-50": "#999c9d",
53
- "primary-gray-60": "#8a8d8f",
54
- "primary-gray-70": "#6a6f73",
55
- "primary-gray-80": "#53575f",
56
- "primary-gray-90": "#3b3f4b",
57
- "primary-gray": "#232537",
58
- // Accent Colors
21
+ // Blues
22
+ "blue-10": "#e1f5f9",
23
+ "blue-20": "#ace8f0",
24
+ blue: "#2075bd",
25
+ "blue-40": "#125c9b",
26
+ "blue-50": "#05387d",
27
+ // Reds
28
+ "red-10": "#ffede1",
29
+ "red-20": "#fbbea4",
30
+ red: "#d8271e",
31
+ "red-40": "#9b0f1f",
32
+ "red-50": "#670521",
33
+ // Yellows
34
+ "yellow-10": "#fef6cc",
35
+ "yellow-20": "#fdea9a",
36
+ yellow: "#edaf07",
37
+ "yellow-30": "#dc9500",
38
+ "yellow-40": "#9c6b02",
39
+ "yellow-50": "#714601",
40
+ // Greens
41
+ "green-10": "#eafdea",
42
+ "green-20": "#bdf6c2",
43
+ green: "#47a96e",
44
+ "green-40": "#237957",
45
+ "green-50": "#0d5143",
46
+ // Grays
47
+ white: "#ffffff",
48
+ "gray-05": "#fbfbfb",
49
+ "gray-10": "#f6f6f6",
50
+ "gray-20": "#e5e6e6",
51
+ "gray-30": "#c6c7c7",
52
+ "gray-40": "#afb2b2",
53
+ "gray-50": "#999c9d",
54
+ "gray-60": "#8a8d8f",
55
+ "gray-70": "#6a6f73",
56
+ "gray-80": "#53575f",
57
+ "gray-90": "#3b3f4b",
58
+ gray: "#232537",
59
+ // Purples
59
60
  "purple-10": "#e7d8fc",
60
61
  purple: "#715397",
61
62
  // Special
package/dist/esm/colors.js CHANGED
@@ -5,54 +5,55 @@
5
5
  * to get autocomplete support for design system colors.
6
6
  *
7
7
  * @example
8
- * <IconSearch color="primary-blue" />
9
- * <IconUser color="semantic-red-40" />
10
- * <IconDashboard color="purple-10" />
8
+ * <IconSearch color="blue" />
9
+ * <IconError color="red" />
10
+ * <IconWarning color="yellow" />
11
+ * <IconSuccess color="green" />
11
12
  */
12
13
  /**
13
14
  * Maps Freightos design system color names to their hex values.
14
15
  * This can be used if you need the actual color values in your application.
15
16
  */
16
17
  export const FREIGHTOS_COLORS = {
17
- // Primary Blues
18
- "primary-blue-10": "#e1f5f9",
19
- "primary-blue-20": "#ace8f0",
20
- "primary-blue": "#2075bd",
21
- "primary-blue-40": "#125c9b",
22
- "primary-blue-50": "#05387d",
23
- // Semantic Reds
24
- "semantic-red-10": "#ffede1",
25
- "semantic-red-20": "#fbbea4",
26
- "semantic-red": "#d8271e",
27
- "semantic-red-40": "#9b0f1f",
28
- "semantic-red-50": "#670521",
29
- // Semantic Yellows
30
- "semantic-yellow-10": "#fef6cc",
31
- "semantic-yellow-20": "#fdea9a",
32
- "semantic-yellow": "#edaf07",
33
- "semantic-yellow-30": "#dc9500",
34
- "semantic-yellow-40": "#9c6b02",
35
- "semantic-yellow-50": "#714601",
36
- // Semantic Greens
37
- "semantic-green-10": "#eafdea",
38
- "semantic-green-20": "#bdf6c2",
39
- "semantic-green": "#47a96e",
40
- "semantic-green-40": "#237957",
41
- "semantic-green-50": "#0d5143",
42
- // Primary Grays
43
- "primary-white": "#ffffff",
44
- "primary-gray-05": "#fbfbfb",
45
- "primary-gray-10": "#f6f6f6",
46
- "primary-gray-20": "#e5e6e6",
47
- "primary-gray-30": "#c6c7c7",
48
- "primary-gray-40": "#afb2b2",
49
- "primary-gray-50": "#999c9d",
50
- "primary-gray-60": "#8a8d8f",
51
- "primary-gray-70": "#6a6f73",
52
- "primary-gray-80": "#53575f",
53
- "primary-gray-90": "#3b3f4b",
54
- "primary-gray": "#232537",
55
- // Accent Colors
18
+ // Blues
19
+ "blue-10": "#e1f5f9",
20
+ "blue-20": "#ace8f0",
21
+ blue: "#2075bd",
22
+ "blue-40": "#125c9b",
23
+ "blue-50": "#05387d",
24
+ // Reds
25
+ "red-10": "#ffede1",
26
+ "red-20": "#fbbea4",
27
+ red: "#d8271e",
28
+ "red-40": "#9b0f1f",
29
+ "red-50": "#670521",
30
+ // Yellows
31
+ "yellow-10": "#fef6cc",
32
+ "yellow-20": "#fdea9a",
33
+ yellow: "#edaf07",
34
+ "yellow-30": "#dc9500",
35
+ "yellow-40": "#9c6b02",
36
+ "yellow-50": "#714601",
37
+ // Greens
38
+ "green-10": "#eafdea",
39
+ "green-20": "#bdf6c2",
40
+ green: "#47a96e",
41
+ "green-40": "#237957",
42
+ "green-50": "#0d5143",
43
+ // Grays
44
+ white: "#ffffff",
45
+ "gray-05": "#fbfbfb",
46
+ "gray-10": "#f6f6f6",
47
+ "gray-20": "#e5e6e6",
48
+ "gray-30": "#c6c7c7",
49
+ "gray-40": "#afb2b2",
50
+ "gray-50": "#999c9d",
51
+ "gray-60": "#8a8d8f",
52
+ "gray-70": "#6a6f73",
53
+ "gray-80": "#53575f",
54
+ "gray-90": "#3b3f4b",
55
+ gray: "#232537",
56
+ // Purples
56
57
  "purple-10": "#e7d8fc",
57
58
  purple: "#715397",
58
59
  // Special
package/dist/types/colors.d.ts CHANGED
@@ -5,11 +5,12 @@
5
5
  * to get autocomplete support for design system colors.
6
6
  *
7
7
  * @example
8
- * <IconSearch color="primary-blue" />
9
- * <IconUser color="semantic-red-40" />
10
- * <IconDashboard color="purple-10" />
8
+ * <IconSearch color="blue" />
9
+ * <IconError color="red" />
10
+ * <IconWarning color="yellow" />
11
+ * <IconSuccess color="green" />
11
12
  */
12
- export type FreightosColor = "primary-blue-10" | "primary-blue-20" | "primary-blue" | "primary-blue-40" | "primary-blue-50" | "semantic-red-10" | "semantic-red-20" | "semantic-red" | "semantic-red-40" | "semantic-red-50" | "semantic-yellow-10" | "semantic-yellow-20" | "semantic-yellow" | "semantic-yellow-30" | "semantic-yellow-40" | "semantic-yellow-50" | "semantic-green-10" | "semantic-green-20" | "semantic-green" | "semantic-green-40" | "semantic-green-50" | "primary-white" | "primary-gray-05" | "primary-gray-10" | "primary-gray-20" | "primary-gray-30" | "primary-gray-40" | "primary-gray-50" | "primary-gray-60" | "primary-gray-70" | "primary-gray-80" | "primary-gray-90" | "primary-gray" | "purple-10" | "purple" | "transparent";
13
+ export type FreightosColor = "blue-10" | "blue-20" | "blue" | "blue-40" | "blue-50" | "red-10" | "red-20" | "red" | "red-40" | "red-50" | "yellow-10" | "yellow-20" | "yellow" | "yellow-30" | "yellow-40" | "yellow-50" | "green-10" | "green-20" | "green" | "green-40" | "green-50" | "white" | "gray-05" | "gray-10" | "gray-20" | "gray-30" | "gray-40" | "gray-50" | "gray-60" | "gray-70" | "gray-80" | "gray-90" | "gray" | "purple-10" | "purple" | "transparent";
13
14
  /**
14
15
  * Maps Freightos design system color names to their hex values.
15
16
  * This can be used if you need the actual color values in your application.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@freightos/icons",
3
- "version": "1.0.2",
3
+ "version": "1.0.3",
4
4
  "description": "A comprehensive icon library for Freightos applications with full TypeScript support",
5
5
  "main": "./dist/cjs/index.js",
6
6
  "module": "./dist/esm/index.js",