cats-ui-lib 2.2.5 → 2.2.7

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 (35) hide show
  1. package/README.md +780 -780
  2. package/assets/images/building-07.svg +3 -3
  3. package/assets/images/check-disabled.svg +3 -3
  4. package/assets/images/check-white.svg +3 -3
  5. package/assets/images/chevron-down-white.svg +3 -3
  6. package/assets/images/chevron-down.svg +3 -3
  7. package/assets/images/chevron-right-blue.svg +3 -3
  8. package/assets/images/chevron-right-red.svg +3 -3
  9. package/assets/images/chevron-up.svg +3 -3
  10. package/assets/images/clock-refresh.svg +3 -3
  11. package/assets/images/file-check-02.svg +3 -3
  12. package/assets/images/filled-dropdown.svg +3 -3
  13. package/assets/images/indeterminate.svg +3 -3
  14. package/assets/images/key-01.svg +3 -3
  15. package/assets/images/log-out-04.svg +3 -3
  16. package/assets/images/menu-collapsed.svg +4 -4
  17. package/assets/images/message-smile-square.svg +3 -3
  18. package/assets/images/settings-04.svg +3 -3
  19. package/assets/images/shuffle-01.svg +3 -3
  20. package/assets/images/spanish-flag.svg +72 -72
  21. package/assets/images/star-yellow.svg +3 -3
  22. package/assets/images/user-image.svg +9 -9
  23. package/assets/images/users-01.svg +3 -3
  24. package/assets/images/x-cancel-btn.svg +3 -3
  25. package/fesm2022/cats-ui-lib.mjs +153 -139
  26. package/fesm2022/cats-ui-lib.mjs.map +1 -1
  27. package/index.d.ts +2 -3
  28. package/package.json +1 -1
  29. package/styles/_fonts.scss +82 -82
  30. package/styles/_functions.scss +10 -10
  31. package/styles/_index.scss +6 -6
  32. package/styles/_mixins.scss +65 -65
  33. package/styles/_reset.scss +69 -69
  34. package/styles/_utilities.scss +894 -894
  35. package/styles/_variables.scss +126 -126
package/styles/_variables.scss CHANGED
@@ -1,126 +1,126 @@
1
- :root {
2
- --blue-100: #eaf3fd;
3
- --box-shadow: #0a0d1208;
4
- --box-shadow-200: #0a0d1214;
5
- --canvas-shadow: #00000014;
6
- --chunk-shadow: #0a0d120d;
7
-
8
- /* TEXT TOKENS */
9
- --text-heading-primary: #040d17;
10
- --text-heading-secondary: #434a51;
11
- --text-heading-inverse: #ffffff;
12
-
13
- --text-body-primary: #434a51;
14
- --text-body-secondary: #81858a;
15
- --text-body-muted: #c0c2c5;
16
- --text-body-inversed: #ffffff;
17
-
18
- --text-link-default: #2680ea;
19
- --text-link-hover: #1c60af;
20
- --text-link-muted: #c8dff9;
21
- --text-link-inverse: #5ca0ef;
22
-
23
- /* SURFACE TOKENS */
24
- /* Background */
25
- --surface-background-canvas: #ffffff;
26
- --surface-background-default: #f0f0f0;
27
- --surface-background-subtle: #e6e7e8;
28
- --surface-background-blue: #f7fafe;
29
-
30
- /* Contextual */
31
- --surface-contextual-green: #f7fbf7;
32
- --surface-contextual-red: #fdf7f7;
33
- --surface-contextual-yellow: #fffdf5;
34
-
35
- /* Decorative */
36
- --surface-decorative-sage-green: #f3fcf9;
37
- --surface-decorative-amber-brown: #f9f1f1;
38
- --surface-decorative-teal: #eafafb;
39
- --surface-decorative-pink: #f9ebf5;
40
- --surface-decorative-orange: #fffbf5;
41
- --surface-decorative-purple: #f4f0fa;
42
- --surface-decorative-blue: #f7fafe;
43
-
44
- /* Action */
45
- --surface-action-default: #2680ea;
46
- --surface-action-hover: #1c60af;
47
- --surface-action-muted: #e6e7e8;
48
-
49
- /* BORDER TOKENS */
50
- /* Core */
51
- --border-core-default: #dadbdc;
52
- --border-core-muted: #e6e7e8;
53
- --border-core-strong: #c0c2c5;
54
- --border-core-inverted: #81858a;
55
-
56
- /* Interaction */
57
- --border-interaction-default: #dfecfc;
58
- --border-interaction-focus: #2680ea;
59
-
60
- /* Semantics */
61
- --border-semantics-red: #f7dfdf;
62
- --border-semantics-green: #cde2ce;
63
- --border-semantics-yellow: #ffefc1;
64
-
65
- /* Decorative */
66
- --border-decorative-purple: #d9c9ed;
67
- --border-decorative-orange: #ffe5bf;
68
- --border-decorative-pink: #eec2e0;
69
- --border-decorative-teal: #b0edee;
70
- --border-decorative-amber-brown: #e5c1c5;
71
- --border-decorative-sage-green: #a8e9d2;
72
-
73
- /* ICON TOKENS */
74
- --icons-main-primary: #040d17;
75
- --icons-main-secondary: #434a51;
76
- --icons-main-hover: #2680ea;
77
- --icons-main-muted: #c0c2c5;
78
- --icons-main-inverse: #ffffff;
79
-
80
- /* SEMANTICS TOKENS */
81
- /* Success */
82
- --semantics-success-subtle: #6aaa6d;
83
- --semantics-success-default: #388e3c;
84
- --semantics-success-strong: #2a6a2d;
85
-
86
- /* Error */
87
- --semantics-error-subtle: #d45e5e;
88
- --semantics-error-default: #ff0000;
89
- --semantics-error-strong: #941e1e;
90
-
91
- /* Warning */
92
- --semantics-warning-subtle: #ffd145;
93
- --semantics-warning-default: #ffc107;
94
- --semantics-warning-strong: #bf9105;
95
-
96
- /* ACCENT TOKENS */
97
- /* Orange */
98
- --accent-orange-subtle: #ffb240;
99
- --accent-orange-default: #ff9800;
100
- --accent-orange-strong: #bf7200;
101
-
102
- /* Teal */
103
- --accent-teal-subtle: #6adedf;
104
- --accent-teal-default: #2ac7c9;
105
- --accent-teal-strong: #23a4a6;
106
-
107
- /* Purple */
108
- --accent-purple-subtle: #976dcd;
109
- --accent-purple-default: #8656c5;
110
- --accent-purple-strong: #733fb7;
111
-
112
- /* Amber Brown */
113
- --accent-amber-brown-subtle: #deafb4;
114
- --accent-amber-brown-default: #cf8a91;
115
- --accent-amber-brown-strong: #c77880;
116
-
117
- /* Sage Green */
118
- --accent-sage-green-subtle: #33c994;
119
- --accent-sage-green-default: #29a277;
120
- --accent-sage-green-dark: #1f7a5a;
121
-
122
- /* Pink */
123
- --accent-pink-subtle: #d772b9;
124
- --accent-pink-default: #d058ab;
125
- --accent-pink-dark: #c83d9e;
126
- }
1
+ :root {
2
+ --blue-100: #eaf3fd;
3
+ --box-shadow: #0a0d1208;
4
+ --box-shadow-200: #0a0d1214;
5
+ --canvas-shadow: #00000014;
6
+ --chunk-shadow: #0a0d120d;
7
+
8
+ /* TEXT TOKENS */
9
+ --text-heading-primary: #040d17;
10
+ --text-heading-secondary: #434a51;
11
+ --text-heading-inverse: #ffffff;
12
+
13
+ --text-body-primary: #434a51;
14
+ --text-body-secondary: #81858a;
15
+ --text-body-muted: #c0c2c5;
16
+ --text-body-inversed: #ffffff;
17
+
18
+ --text-link-default: #2680ea;
19
+ --text-link-hover: #1c60af;
20
+ --text-link-muted: #c8dff9;
21
+ --text-link-inverse: #5ca0ef;
22
+
23
+ /* SURFACE TOKENS */
24
+ /* Background */
25
+ --surface-background-canvas: #ffffff;
26
+ --surface-background-default: #f0f0f0;
27
+ --surface-background-subtle: #e6e7e8;
28
+ --surface-background-blue: #f7fafe;
29
+
30
+ /* Contextual */
31
+ --surface-contextual-green: #f7fbf7;
32
+ --surface-contextual-red: #fdf7f7;
33
+ --surface-contextual-yellow: #fffdf5;
34
+
35
+ /* Decorative */
36
+ --surface-decorative-sage-green: #f3fcf9;
37
+ --surface-decorative-amber-brown: #f9f1f1;
38
+ --surface-decorative-teal: #eafafb;
39
+ --surface-decorative-pink: #f9ebf5;
40
+ --surface-decorative-orange: #fffbf5;
41
+ --surface-decorative-purple: #f4f0fa;
42
+ --surface-decorative-blue: #f7fafe;
43
+
44
+ /* Action */
45
+ --surface-action-default: #2680ea;
46
+ --surface-action-hover: #1c60af;
47
+ --surface-action-muted: #e6e7e8;
48
+
49
+ /* BORDER TOKENS */
50
+ /* Core */
51
+ --border-core-default: #dadbdc;
52
+ --border-core-muted: #e6e7e8;
53
+ --border-core-strong: #c0c2c5;
54
+ --border-core-inverted: #81858a;
55
+
56
+ /* Interaction */
57
+ --border-interaction-default: #dfecfc;
58
+ --border-interaction-focus: #2680ea;
59
+
60
+ /* Semantics */
61
+ --border-semantics-red: #f7dfdf;
62
+ --border-semantics-green: #cde2ce;
63
+ --border-semantics-yellow: #ffefc1;
64
+
65
+ /* Decorative */
66
+ --border-decorative-purple: #d9c9ed;
67
+ --border-decorative-orange: #ffe5bf;
68
+ --border-decorative-pink: #eec2e0;
69
+ --border-decorative-teal: #b0edee;
70
+ --border-decorative-amber-brown: #e5c1c5;
71
+ --border-decorative-sage-green: #a8e9d2;
72
+
73
+ /* ICON TOKENS */
74
+ --icons-main-primary: #040d17;
75
+ --icons-main-secondary: #434a51;
76
+ --icons-main-hover: #2680ea;
77
+ --icons-main-muted: #c0c2c5;
78
+ --icons-main-inverse: #ffffff;
79
+
80
+ /* SEMANTICS TOKENS */
81
+ /* Success */
82
+ --semantics-success-subtle: #6aaa6d;
83
+ --semantics-success-default: #388e3c;
84
+ --semantics-success-strong: #2a6a2d;
85
+
86
+ /* Error */
87
+ --semantics-error-subtle: #d45e5e;
88
+ --semantics-error-default: #ff0000;
89
+ --semantics-error-strong: #941e1e;
90
+
91
+ /* Warning */
92
+ --semantics-warning-subtle: #ffd145;
93
+ --semantics-warning-default: #ffc107;
94
+ --semantics-warning-strong: #bf9105;
95
+
96
+ /* ACCENT TOKENS */
97
+ /* Orange */
98
+ --accent-orange-subtle: #ffb240;
99
+ --accent-orange-default: #ff9800;
100
+ --accent-orange-strong: #bf7200;
101
+
102
+ /* Teal */
103
+ --accent-teal-subtle: #6adedf;
104
+ --accent-teal-default: #2ac7c9;
105
+ --accent-teal-strong: #23a4a6;
106
+
107
+ /* Purple */
108
+ --accent-purple-subtle: #976dcd;
109
+ --accent-purple-default: #8656c5;
110
+ --accent-purple-strong: #733fb7;
111
+
112
+ /* Amber Brown */
113
+ --accent-amber-brown-subtle: #deafb4;
114
+ --accent-amber-brown-default: #cf8a91;
115
+ --accent-amber-brown-strong: #c77880;
116
+
117
+ /* Sage Green */
118
+ --accent-sage-green-subtle: #33c994;
119
+ --accent-sage-green-default: #29a277;
120
+ --accent-sage-green-dark: #1f7a5a;
121
+
122
+ /* Pink */
123
+ --accent-pink-subtle: #d772b9;
124
+ --accent-pink-default: #d058ab;
125
+ --accent-pink-dark: #c83d9e;
126
+ }