cats-data-grid 2.0.73 → 2.0.75

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 (12) hide show
  1. package/assets/images/add-more-right-blue.svg +3 -0
  2. package/assets/images/autosize-all.svg +3 -0
  3. package/assets/images/autosize-this.svg +3 -0
  4. package/assets/images/eye-custom-header.svg +4 -0
  5. package/assets/images/eye-off-custom-header.svg +3 -0
  6. package/fesm2022/cats-data-grid.mjs +463 -45
  7. package/fesm2022/cats-data-grid.mjs.map +1 -1
  8. package/index.d.ts +69 -3
  9. package/package.json +1 -1
  10. package/styles/component/_form.scss +112 -61
  11. package/styles/sass-utils/_mixin.scss +1 -1
  12. package/styles/sass-utils/_variable.scss +120 -69
package/styles/sass-utils/_variable.scss CHANGED
@@ -1,77 +1,128 @@
1
1
  :root {
2
- --white: #ffffff;
3
-
4
- // --default: #000000;
5
- // --black: #1f1f1f;
6
- // --black-dust: #1a1a1a;
7
- // --black-900: #202224;
8
-
9
- --pagination-text: var(--neutral-500);
10
-
11
- // NEUTRAL-COLOR
12
- // --neutral-cross: #d9d9d9;
13
- // --neutral-40: #d5d7da;
14
- --neutral-50: #f0f0f0;
15
- --neutral-100: #e6e7e8;
16
- --neutral-200: #dadbdc;
17
- --neutral-300: #c0c2c5;
18
- --neutral-400: #81858a;
19
- --neutral-500: #434a51;
20
- --neutral-600: #040d17;
21
- // --neutral-900: #010306;
22
-
23
- // BLUE COLOR
24
- --blue-50: #f7fafe;
25
- --blue-100: #eaf3fd;
26
- // --blue-200: #dfecfc;
27
- --blue-300: #c8dff9;
28
- // --blue-400: #92bff4;
29
- --blue-600: #2680ea;
30
- --blue-700: #1c60af;
31
- // --blue-800: #1849d6;
32
-
33
- // GREY COLOR
34
- --grey-50: #e9eaeb;
35
- // --grey-100: #e2e8f0;
36
- // --grey-150: #d6d6d6;
37
- // --grey-200: #64748b;
38
- // --grey-300: #414651;
39
- // --grey-400: #8080808c;
40
- // --grey-600: #535862;
41
- // --light-grey: #81858a;
42
- // --dark-grey: #4a4a4a;
43
-
44
- // --green-50: #f7fbf7;
45
2
  --green-100: #ecf4ec;
46
3
  --green-200: #e1eee2;
47
- // --green-400: #9bc69d;
48
- --green-600: #388e3c;
49
- --green-700: #2a6a2d;
50
-
51
- --red: #ff0000;
52
- // --red-50: #fdf7f7;
53
4
  --red-100: #faeaea;
54
- // --red-200: #f7dfdf;
55
5
  --red-300: #f0c9c9;
56
- --red-700: #941e1e;
57
-
58
- // --yellow-50: #fffdf5;
59
6
  --yellow-100: #fff9e7;
60
- // --yellow-200: #fff6da;
61
- --yellow-300: #ffefc1;
62
- // --yellow-400: #fff9e7;
63
- // --yellow-500: #bf7200;
64
- // --yellow-600: #ffc107;
65
- --yellow-700: #bf9105;
66
- // --yellow-800: #806003;
67
- // --yellow-900: #bf9105;
68
-
69
- // Orange
70
- // --orange-50: rgba(255, 251, 245, 1);
71
- // --orange-100: #fff5e6;
72
- // --orange-200: #fff0d9;
73
- --orange-600: #ff9800;
74
- // --orange-700: rgba(191, 114, 0, 1);
75
-
76
7
  --box-shadow: #0a0d1214;
8
+
9
+ //New Variables
10
+ /* TEXT TOKENS */
11
+ --text-heading-primary: #040d17;
12
+ --text-heading-secondary: #434a51;
13
+ --text-heading-inverse: #ffffff;
14
+
15
+ --text-body-primary: #434a51;
16
+ --text-body-secondary: #81858a;
17
+ --text-body-muted: #c0c2c5;
18
+ --text-body-inversed: #ffffff;
19
+
20
+ --text-link-default: #2680ea;
21
+ --text-link-hover: #1c60af;
22
+ --text-link-muted: #c8dff9;
23
+ --text-link-inverse: #5ca0ef;
24
+
25
+ /* SURFACE TOKENS */
26
+ /* Background */
27
+ --surface-background-canvas: #ffffff;
28
+ --surface-background-default: #f0f0f0;
29
+ --surface-background-subtle: #e6e7e8;
30
+ --surface-background-blue: #f7fafe;
31
+
32
+ /* Contextual */
33
+ --surface-contextual-green: #f7fbf7;
34
+ --surface-contextual-red: #fdf7f7;
35
+ --surface-contextual-yellow: #fffdf5;
36
+
37
+ /* Decorative */
38
+ --surface-decorative-sage-green: #f3fcf9;
39
+ --surface-decorative-amber-brown: #f9f1f1;
40
+ --surface-decorative-teal: #eafafb;
41
+ --surface-decorative-pink: #f9ebf5;
42
+ --surface-decorative-orange: #fffbf5;
43
+ --surface-decorative-purple: #f4f0fa;
44
+ --surface-decorative-blue: #f7fafe;
45
+
46
+ /* Action */
47
+ --surface-action-default: #2680ea;
48
+ --surface-action-hover: #1c60af;
49
+ --surface-action-muted: #e6e7e8;
50
+
51
+ /* BORDER TOKENS */
52
+ /* Core */
53
+ --border-core-default: #dadbdc;
54
+ --border-core-muted: #e6e7e8;
55
+ --border-core-strong: #c0c2c5;
56
+ --border-core-inverted: #81858a;
57
+
58
+ /* Interaction */
59
+ --border-interaction-default: #dfecfc;
60
+ --border-interaction-focus: #2680ea;
61
+
62
+ /* Semantics */
63
+ --border-semantics-red: #f7dfdf;
64
+ --border-semantics-green: #cde2ce;
65
+ --border-semantics-yellow: #ffefc1;
66
+
67
+ /* Decorative */
68
+ --border-decorative-purple: #d9c9ed;
69
+ --border-decorative-orange: #ffe5bf;
70
+ --border-decorative-pink: #eec2e0;
71
+ --border-decorative-teal: #b0edee;
72
+ --border-decorative-amber-brown: #e5c1c5;
73
+ --border-decorative-sage-green: #a8e9d2;
74
+
75
+ /* ICON TOKENS */
76
+ --icons-main-primary: #040d17;
77
+ --icons-main-secondary: #434a51;
78
+ --icons-main-hover: #2680ea;
79
+ --icons-main-muted: #c0c2c5;
80
+ --icons-main-inverse: #ffffff;
81
+
82
+ /* SEMANTICS TOKENS */
83
+ /* Success */
84
+ --semantics-success-subtle: #6aaa6d;
85
+ --semantics-success-default: #388e3c;
86
+ --semantics-success-strong: #2a6a2d;
87
+
88
+ /* Error */
89
+ --semantics-error-subtle: #d45e5e;
90
+ --semantics-error-default: #ff0000;
91
+ --semantics-error-strong: #941e1e;
92
+
93
+ /* Warning */
94
+ --semantics-warning-subtle: #ffd145;
95
+ --semantics-warning-default: #ffc107;
96
+ --semantics-warning-strong: #bf9105;
97
+
98
+ /* ACCENT TOKENS */
99
+ /* Orange */
100
+ --accent-orange-subtle: #ffb240;
101
+ --accent-orange-default: #ff9800;
102
+ --accent-orange-strong: #bf7200;
103
+
104
+ /* Teal */
105
+ --accent-teal-subtle: #6adedf;
106
+ --accent-teal-default: #2ac7c9;
107
+ --accent-teal-strong: #23a4a6;
108
+
109
+ /* Purple */
110
+ --accent-purple-subtle: #976dcd;
111
+ --accent-purple-default: #8656c5;
112
+ --accent-purple-strong: #733fb7;
113
+
114
+ /* Amber Brown */
115
+ --accent-amber-brown-subtle: #deafb4;
116
+ --accent-amber-brown-default: #cf8a91;
117
+ --accent-amber-brown-strong: #c77880;
118
+
119
+ /* Sage Green */
120
+ --accent-sage-green-subtle: #33c994;
121
+ --accent-sage-green-default: #29a277;
122
+ --accent-sage-green-dark: #1f7a5a;
123
+
124
+ /* Pink */
125
+ --accent-pink-subtle: #d772b9;
126
+ --accent-pink-default: #d058ab;
127
+ --accent-pink-dark: #c83d9e;
77
128
  }