@indico-data/design-system 2.55.2 → 2.57.0

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 (31) hide show
  1. package/lib/components/index.d.ts +1 -0
  2. package/lib/components/truncate/Truncate.d.ts +2 -0
  3. package/lib/components/truncate/Truncate.stories.d.ts +9 -0
  4. package/lib/components/truncate/__tests__/Truncate.test.d.ts +1 -0
  5. package/lib/components/truncate/index.d.ts +1 -0
  6. package/lib/components/truncate/types.d.ts +7 -0
  7. package/lib/index.css +200 -78
  8. package/lib/index.d.ts +11 -1
  9. package/lib/index.esm.css +200 -78
  10. package/lib/index.esm.js +54 -2
  11. package/lib/index.esm.js.map +1 -1
  12. package/lib/index.js +54 -1
  13. package/lib/index.js.map +1 -1
  14. package/package.json +2 -1
  15. package/src/components/floatUI/FloatUI.stories.tsx +7 -4
  16. package/src/components/forms/date/datePicker/DatePicker.tsx +2 -2
  17. package/src/components/index.ts +1 -0
  18. package/src/components/menu/Menu.stories.tsx +14 -1
  19. package/src/components/menu/styles/Menu.scss +11 -0
  20. package/src/components/truncate/Truncate.mdx +34 -0
  21. package/src/components/truncate/Truncate.stories.tsx +86 -0
  22. package/src/components/truncate/Truncate.tsx +55 -0
  23. package/src/components/truncate/__tests__/Truncate.test.tsx +61 -0
  24. package/src/components/truncate/index.ts +1 -0
  25. package/src/components/truncate/styles/Truncate.scss +22 -0
  26. package/src/components/truncate/types.ts +7 -0
  27. package/src/index.ts +1 -1
  28. package/src/styles/index.scss +1 -0
  29. package/src/styles/variables/themes/dark.scss +19 -0
  30. package/src/styles/variables/themes/light.scss +178 -88
  31. package/plugin-build-tool.json +0 -4
package/src/styles/variables/themes/light.scss CHANGED
@@ -1,98 +1,188 @@
1
1
  :root [data-theme='light'] {
2
2
  // Primary Color
3
- --pf-primary-color: #6833d0;
4
-
5
- --pf-primary-color-100: #f0ebfa;
6
- --pf-primary-color-200: #d5c6f2;
7
- --pf-primary-color-300: #baa1e9;
8
- --pf-primary-color-400: #8c64db;
9
- --pf-primary-color-500: #6833d0;
10
- --pf-primary-color-600: #5e2ebb;
11
- --pf-primary-color-700: #5329a6;
12
- --pf-primary-color-800: #492492;
13
- --pf-primary-color-900: #3e1f7d;
14
- --pf-primary-color-1000: #271153;
3
+ --pf-primary-color: #b4cadf;
4
+
5
+ --pf-primary-color-50: #5b8ab7;
6
+ --pf-primary-color-100: #6d96c3;
7
+ --pf-primary-color-200: #7b9fc5;
8
+ --pf-primary-color-300: #90adc8;
9
+ --pf-primary-color-400: #a3bdd4;
10
+ --pf-primary-color-500: #b4cadf;
11
+ --pf-primary-color-600: #c4d8eb;
12
+ --pf-primary-color-700: #d2e1f0;
13
+ --pf-primary-color-800: #dfeaf3;
14
+ --pf-primary-color-900: #eef4fa;
15
+ --pf-primary-color-950: #f6f9fc;
15
16
 
16
17
  // Secondary Color
17
- --pf-secondary-color: #0070f5;
18
- --pf-secondary-color-100: #dceafd;
19
- --pf-secondary-color-200: #b3d4fc;
20
- --pf-secondary-color-300: #7ab5fa;
21
- --pf-secondary-color-400: #4797f5;
22
- --pf-secondary-color-500: #0070f5;
23
- --pf-secondary-color-600: #0067e1;
24
- --pf-secondary-color-700: #005ac4;
25
- --pf-secondary-color-800: #004eac;
26
- --pf-secondary-color-900: #004393;
27
-
28
- //Gray Color
29
- --pf-gray-color: #444444;
30
-
31
- --pf-gray-color-100: #eeeeee;
32
- --pf-gray-color-200: #d0d0d0;
33
- --pf-gray-color-300: #a9a9a9;
34
- --pf-gray-color-400: #737373;
35
- --pf-gray-color-500: #444444;
36
- --pf-gray-color-600: #373737;
37
- --pf-gray-color-700: #2c2c2c;
38
- --pf-gray-color-800: #1f1f1f;
39
- --pf-gray-color-900: #141414;
40
-
41
- // Steel Color
42
- --pf-steel-color: #7c8594;
43
-
44
- --pf-steel-color-100: #f4f6f8;
45
- --pf-steel-color-200: #d9dee5;
46
- --pf-steel-color-300: #bcc3cd;
47
- --pf-steel-color-400: #a0a9b5;
48
- --pf-steel-color-500: #7c8594;
49
- --pf-steel-color-600: #5f697a;
50
- --pf-steel-color-700: #454e5e;
51
- --pf-steel-color-800: #2d3444;
52
- --pf-steel-color-900: #1b202c;
53
-
54
- //Green Color *do success warning etc etc
55
- --pf-green-color: #008a00;
56
- --pf-green-color-100: #d6ecd6;
57
- --pf-green-color-200: #99d099;
58
- --pf-green-color-300: #66b966;
59
- --pf-green-color-400: #33a133;
60
- --pf-green-color-500: #008a00;
61
- --pf-green-color-600: #007c00;
62
- --pf-green-color-700: #006e00;
63
- --pf-green-color-800: #006100;
64
- --pf-green-color-900: #005300;
18
+ --pf-secondary-color: #3892f3;
65
19
 
66
- //Orange color
67
- --pf-orange-color: #ffa424;
68
- --pf-orange-color-100: #ffdfb2;
69
- --pf-orange-color-200: #ffd292;
70
- --pf-orange-color-300: #ffc471;
71
- --pf-orange-color-400: #ffb650;
72
- --pf-orange-color-500: #ffa424;
73
- --pf-orange-color-600: #f29c22;
74
- --pf-orange-color-700: #e69420;
75
- --pf-orange-color-800: #cc831d;
76
- --pf-orange-color-900: #b37319;
20
+ --pf-secondary-color-50: #002b66;
21
+ --pf-secondary-color-100: #003b8c;
22
+ --pf-secondary-color-200: #004cb0;
23
+ --pf-secondary-color-300: #0060d6;
24
+ --pf-secondary-color-400: #0070f5;
25
+ --pf-secondary-color-500: #3892f3;
26
+ --pf-secondary-color-550: #66adff;
27
+ --pf-secondary-color-600: #91c5ff;
28
+ --pf-secondary-color-700: #b8dbff;
29
+ --pf-secondary-color-800: #d4eaff;
30
+ --pf-secondary-color-900: #e0f2ff;
31
+ --pf-secondary-color-950: #eaf4ff;
32
+
33
+ // Tertiary Color
34
+ --pf-tertiary-color: #8394a9;
35
+
36
+ --pf-tertiary-color-50: #142838;
37
+ --pf-tertiary-color-100: #203148;
38
+ --pf-tertiary-color-200: #2e4563;
39
+ --pf-tertiary-color-300: #3e587a;
40
+ --pf-tertiary-color-400: #55677f;
41
+ --pf-tertiary-color-450: #6d8097;
42
+ --pf-tertiary-color-500: #8394a9;
43
+ --pf-tertiary-color-600: #93a3bb;
44
+ --pf-tertiary-color-700: #a5b4c6;
45
+ --pf-tertiary-color-800: #b2bfd0;
46
+ --pf-tertiary-color-900: #c4ccd7;
47
+ --pf-tertiary-color-950: #d6dde5;
48
+
49
+ // Gray Color
50
+ --pf-gray-color: #525252;
51
+
52
+ --pf-gray-color-50: #0a0a0a;
53
+ --pf-gray-color-100: #171717;
54
+ --pf-gray-color-200: #262626;
55
+ --pf-gray-color-300: #404040;
56
+ --pf-gray-color-400: #525252;
57
+ --pf-gray-color-450: #737373; // MISSING
58
+ --pf-gray-color-500: #737373;
59
+ --pf-gray-color-600: #989898;
60
+ --pf-gray-color-700: #bdbdbd;
61
+ --pf-gray-color-800: #dcdcdc;
62
+ --pf-gray-color-900: #efefef;
63
+ --pf-gray-color-950: #f6f6f6;
77
64
 
78
65
  //Red color
79
- --pf-red-color: #e72326;
80
- --pf-red-color-100: #ffd6d6;
81
- --pf-red-color-200: #f49ea0;
82
- --pf-red-color-300: #ef696b;
83
- --pf-red-color-400: #eb4649;
84
- --pf-red-color-500: #e72326;
85
- --pf-red-color-600: #d52023;
86
- --pf-red-color-700: #c21d20;
87
- --pf-red-color-800: #b01b1d;
88
- --pf-red-color-900: #9d181a;
66
+ --pf-red-color: #f4a5ae;
67
+
68
+ --pf-red-color-50: #5b0d16;
69
+ --pf-red-color-100: #761821;
70
+ --pf-red-color-200: #8f252f;
71
+ --pf-red-color-300: #ad303d;
72
+ --pf-red-color-350: #b8424c;
73
+ --pf-red-color-400: #c84a57;
74
+ --pf-red-color-450: #dc5a66;
75
+ --pf-red-color-500: #f4a5ae;
76
+ --pf-red-color-600: #ebb6b8;
77
+ --pf-red-color-700: #f9d5dc;
78
+ --pf-red-color-800: #f4d7d8;
79
+ --pf-red-color-850: #fae9e9;
80
+ --pf-red-color-900: #fcebeb;
81
+ --pf-red-color-950: #fcf5f4;
82
+
83
+ //Orange color
84
+ --pf-orange-color: #ff873f;
85
+
86
+ --pf-orange-color-50: #721e01;
87
+ --pf-orange-color-100: #992702;
88
+ --pf-orange-color-200: #b33403;
89
+ --pf-orange-color-300: #d94b04;
90
+ --pf-orange-color-400: #f25c05;
91
+ --pf-orange-color-500: #ff873f;
92
+ --pf-orange-color-600: #ffa26d;
93
+ --pf-orange-color-700: #ffc9aa;
94
+ --pf-orange-color-800: #ffe3d1;
95
+ --pf-orange-color-900: #fff3ec;
96
+ --pf-orange-color-950: #fffaf7;
97
+
98
+ //Yellow color
99
+ --pf-yellow-color: #ffa400;
100
+
101
+ --pf-yellow-color-50: #312602;
102
+ --pf-yellow-color-100: #664200;
103
+ --pf-yellow-color-200: #895c00;
104
+ --pf-yellow-color-300: #b37300;
105
+ --pf-yellow-color-400: #e08e00;
106
+ --pf-yellow-color-500: #ffa400;
107
+ --pf-yellow-color-600: #ffb621;
108
+ --pf-yellow-color-700: #ffc344;
109
+ --pf-yellow-color-800: #ffd369;
110
+ --pf-yellow-color-900: #ffeaa1;
111
+ --pf-yellow-color-950: #fff4d0;
112
+
113
+ //Green Color
114
+ --pf-green-color: #39c29d;
115
+
116
+ --pf-green-color-50: #003325;
117
+ --pf-green-color-100: #075f48;
118
+ --pf-green-color-200: #0a906c;
119
+ --pf-green-color-300: #03aaaa;
120
+ --pf-green-color-400: #26b890;
121
+ --pf-green-color-500: #39c29d;
122
+ --pf-green-color-600: #52ccae;
123
+ --pf-green-color-700: #6cd6ba;
124
+ --pf-green-color-800: #83e2c7;
125
+ --pf-green-color-900: #c1f1e2;
126
+ --pf-green-color-950: #83e2c7;
127
+
128
+ // Purple Color
129
+ --pf-purple-color: #9776d3;
130
+
131
+ --pf-purple-color-50: #291a40;
132
+ --pf-purple-color-100: #55377b;
133
+ --pf-purple-color-200: #664196;
134
+ --pf-purple-color-300: #7a4eb3;
135
+ --pf-purple-color-400: #8b60c7;
136
+ --pf-purple-color-500: #9776d3;
137
+ --pf-purple-color-600: #b6a3e2;
138
+ --pf-purple-color-700: #cfc4ee;
139
+ --pf-purple-color-800: #e4dff5;
140
+ --pf-purple-color-900: #f1edfa;
141
+ --pf-purple-color-950: #f7f6fc;
142
+
143
+ // White color
144
+ --pf-white-color: #ffffff;
145
+ --pf-white-color-1: rgba(255, 255, 255, 0.01);
146
+ --pf-white-color-3: rgba(255, 255, 255, 0.03);
147
+ --pf-white-color-5: rgba(255, 255, 255, 0.05);
148
+ --pf-white-color-10: rgba(255, 255, 255, 0.1);
149
+ --pf-white-color-15: rgba(255, 255, 255, 0.15);
150
+ --pf-white-color-20: rgba(255, 255, 255, 0.2);
151
+ --pf-white-color-30: rgba(255, 255, 255, 0.3);
152
+ --pf-white-color-40: rgba(255, 255, 255, 0.4);
153
+ --pf-white-color-50: rgba(255, 255, 255, 0.5);
154
+ --pf-white-color-60: rgba(255, 255, 255, 0.6);
155
+ --pf-white-color-70: rgba(255, 255, 255, 0.7);
156
+ --pf-white-color-80: rgba(255, 255, 255, 0.8);
157
+ --pf-white-color-90: rgba(255, 255, 255, 0.9);
158
+ --pf-white-color-100: rgba(255, 255, 255, 1);
159
+
160
+ // Black color
161
+ --pf-black-color: #000000;
162
+ --pf-black-color-1: rgba(0, 0, 0, 0.01);
163
+ --pf-black-color-3: rgba(0, 0, 0, 0.03);
164
+ --pf-black-color-5: rgba(0, 0, 0, 0.05);
165
+ --pf-black-color-10: rgba(0, 0, 0, 0.1);
166
+ --pf-black-color-15: rgba(0, 0, 0, 0.15);
167
+ --pf-black-color-20: rgba(0, 0, 0, 0.2);
168
+ --pf-black-color-30: rgba(0, 0, 0, 0.3);
169
+ --pf-black-color-40: rgba(0, 0, 0, 0.4);
170
+ --pf-black-color-50: rgba(0, 0, 0, 0.5);
171
+ --pf-black-color-60: rgba(0, 0, 0, 0.6);
172
+ --pf-black-color-70: rgba(0, 0, 0, 0.7);
173
+ --pf-black-color-80: rgba(0, 0, 0, 0.8);
174
+ --pf-black-color-90: rgba(0, 0, 0, 0.9);
175
+ --pf-black-color-100: rgba(0, 0, 0, 1);
89
176
 
90
177
  // Utility Colors
91
- --pf-error-color: var(--pf-red-color-600);
92
- --pf-success-color: var(--pf-green-color-600);
93
- --pf-warning-color: var(--pf-orange-color-600);
94
- --pf-neutral-color: var(--pf-gray-color);
95
- --pf-info-color: var(--pf-secondary-color-600);
96
- --pf-link-color: var(--pf-secondary-color);
97
- --pf-link-hover-color: var(--pf-secondary-color-400);
178
+ --pf-error-color: var(--pf-red-color);
179
+ --pf-success-color: var(--pf-green-color);
180
+ --pf-warning-color: var(--pf-yellow-color-300);
181
+ --pf-neutral-color: var(--pf-gray-color-100);
182
+ --pf-info-color: var(--pf-secondary-color-200);
183
+ --pf-brand-color: var(--pf-secondary-color-550);
184
+ --pf-pending-color: var(--pf-red-color-900);
185
+
186
+ --pf-link-color: var(--pf-gray-color-300);
187
+ --pf-link-hover-color: var(--pf-gray-color-100);
98
188
  }
package/plugin-build-tool.json DELETED
@@ -1,4 +0,0 @@
1
- {
2
- "harness_lang": "JavaScript,TypeScript,CSS",
3
- "harness_build_tool": "Node"
4
- }