@indico-data/design-system 3.3.0 → 3.4.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 (13) hide show
  1. package/lib/index.css +165 -180
  2. package/lib/index.esm.css +165 -180
  3. package/lib/stylesAndAnimations/colors/constants.d.ts +34 -4
  4. package/package.json +1 -1
  5. package/src/components/button/styles/_variables.scss +11 -11
  6. package/src/styles/_colors.scss +1 -1
  7. package/src/styles/globals.scss +9 -9
  8. package/src/styles/variables/_borders.scss +1 -1
  9. package/src/styles/variables/_colors.scss +60 -77
  10. package/src/stylesAndAnimations/colors/BaseColorPalette.mdx +56 -0
  11. package/src/stylesAndAnimations/colors/Colors.tsx +34 -9
  12. package/src/stylesAndAnimations/colors/constants.ts +211 -351
  13. package/src/stylesAndAnimations/colors/Colors.mdx +0 -32
package/src/styles/globals.scss CHANGED
@@ -46,9 +46,9 @@
46
46
  --pf-background-color-tertiary: var(--pf-gray-color-200);
47
47
  --pf-background-color-quaternary: var(--pf-gray-color-250);
48
48
  --pf-background-color-accent: var(--pf-secondary-color-200);
49
- --pf-background-color-highlight: var(--pf-brand-color-250);
50
- --pf-background-brand-solid: var(--pf-brand-color-500);
51
- --pf-background-brand-hover: var(--pf-brand-color-600);
49
+ --pf-background-color-highlight: var(--pf-blue-color-250);
50
+ --pf-background-brand-solid: var(--pf-blue-color-500);
51
+ --pf-background-brand-hover: var(--pf-blue-color-600);
52
52
  --pf-background-color-inverted: var(--pf-tertiary-color-900);
53
53
 
54
54
  // Fonts
@@ -57,15 +57,15 @@
57
57
  --pf-font-color-soft: var(--pf-gray-color-700);
58
58
  --pf-font-color-muted: var(--pf-gray-color-800);
59
59
  --pf-font-color-placeholder: var(--pf-gray-color-450);
60
- --pf-font-color-accent: var(--pf-brand-color-500);
60
+ --pf-font-color-accent: var(--pf-blue-color-500);
61
61
  --pf-font-color-disabled: var(--pf-gray-color-400);
62
62
 
63
63
  // Links
64
- --pf-link-color: var(--pf-brand-color-500);
65
- --pf-link-hover-color: var(--pf-brand-color-600);
64
+ --pf-link-color: var(--pf-blue-color-500);
65
+ --pf-link-hover-color: var(--pf-blue-color-600);
66
66
  --pf-secondary-link-color: var(--pf-tertiary-color-700);
67
67
  --pf-secondary-link-hover-color: var(--pf-tertiary-color-800);
68
- --pf-active-link-color: var(--pf-brand-color-500);
68
+ --pf-active-link-color: var(--pf-blue-color-500);
69
69
 
70
70
  // Chart Colors
71
71
  --pf-line-chart-color-one: #2b97af;
@@ -85,8 +85,8 @@
85
85
  --pf-background-color-secondary: var(--pf-primary-color-800);
86
86
  --pf-background-color-tertiary: var(--pf-primary-color-600);
87
87
  --pf-background-color-quaternary: var(--pf-primary-color-500);
88
- --pf-background-color-accent: var(--pf-brand-color-800);
89
- --pf-background-color-highlight: var(--pf-brand-color-700);
88
+ --pf-background-color-accent: var(--pf-blue-color-800);
89
+ --pf-background-color-highlight: var(--pf-blue-color-700);
90
90
  --pf-background-brand-solid: var(--pf-secondary-color-450);
91
91
  --pf-background-brand-hover: var(--pf-secondary-color-600);
92
92
  --pf-background-color-inverted: var(--pf-tertiary-color-50);
package/src/styles/variables/_borders.scss CHANGED
@@ -20,7 +20,7 @@
20
20
  --pf-border-color-secondary: var(--pf-gray-color-250);
21
21
  --pf-border-hover-color: var(--pf-gray-color-400);
22
22
  --pf-border-color-soft: var(--pf-secondary-color-450);
23
- --pf-border-color-accent: var(--pf-brand-color-450);
23
+ --pf-border-color-accent: var(--pf-blue-color-450);
24
24
  --pf-border-color-error: var(--pf-error-color);
25
25
  --pf-border-color-warning: var(--pf-warning-color);
26
26
  --pf-border-color-info: var(--pf-info-color);
package/src/styles/variables/_colors.scss CHANGED
@@ -1,21 +1,20 @@
1
1
  :root {
2
2
  /** BASE COLORS **/
3
-
4
- --pf-blue-color: #1474b8;
5
- --pf-blue-color-50: #f8fafc;
6
- --pf-blue-color-100: #f1f5f9;
7
- --pf-blue-color-150: #e8f1f7;
8
- --pf-blue-color-200: #deedf7;
9
- --pf-blue-color-250: #c6dff1;
10
- --pf-blue-color-300: #add1eb;
11
- --pf-blue-color-400: #3ea2ea;
12
- --pf-blue-color-450: #188bdc;
13
- --pf-blue-color-500: #1474b8;
14
- --pf-blue-color-550: #1268a5;
15
- --pf-blue-color-600: #0f578a;
16
- --pf-blue-color-700: #1d4058;
17
- --pf-blue-color-800: #132939;
18
- --pf-blue-color-900: #0e151b;
3
+ --pf-blue-color: #2989ff;
4
+ --pf-blue-color-50: #f6fafd;
5
+ --pf-blue-color-100: #eef4fc;
6
+ --pf-blue-color-150: #e5effa;
7
+ --pf-blue-color-200: #d8e9fd;
8
+ --pf-blue-color-250: #bbd8fb;
9
+ --pf-blue-color-300: #9ec7fa;
10
+ --pf-blue-color-400: #2989ff;
11
+ --pf-blue-color-450: #0070f5;
12
+ --pf-blue-color-500: #005ccc;
13
+ --pf-blue-color-550: #0054b8;
14
+ --pf-blue-color-600: #004599;
15
+ --pf-blue-color-700: #06356f;
16
+ --pf-blue-color-800: #082345;
17
+ --pf-blue-color-900: #061323;
19
18
 
20
19
  --pf-gray-color: #808080;
21
20
  --pf-gray-color-50: #ffffff;
@@ -65,36 +64,36 @@
65
64
  --pf-pink-color-800: #321b23;
66
65
  --pf-pink-color-900: #1b0e13;
67
66
 
68
- --pf-orange-color: #994b33;
69
- --pf-orange-color-50: #fcf9f7;
67
+ --pf-orange-color: #994733;
68
+ --pf-orange-color-50: #fffbfa;
70
69
  --pf-orange-color-100: #faf2f0;
71
- --pf-orange-color-150: #f7ece8;
72
- --pf-orange-color-200: #f7e4de;
73
- --pf-orange-color-250: #f4cec2;
74
- --pf-orange-color-300: #f5b6a3;
75
- --pf-orange-color-400: #ea673e;
76
- --pf-orange-color-450: #c45331;
77
- --pf-orange-color-500: #994b33;
70
+ --pf-orange-color-150: #f7ebe8;
71
+ --pf-orange-color-200: #f7e3de;
72
+ --pf-orange-color-250: #f4ccc2;
73
+ --pf-orange-color-300: #f5b4a3;
74
+ --pf-orange-color-400: #ea603e;
75
+ --pf-orange-color-450: #c44e31;
76
+ --pf-orange-color-500: #994733;
78
77
  --pf-orange-color-550: #863f2a;
79
- --pf-orange-color-600: #6b3c2e;
80
- --pf-orange-color-700: #522e23;
81
- --pf-orange-color-800: #32201b;
78
+ --pf-orange-color-600: #6b3a2e;
79
+ --pf-orange-color-700: #522d23;
80
+ --pf-orange-color-800: #321f1b;
82
81
  --pf-orange-color-900: #1b110e;
83
82
 
84
- --pf-yellow-color: #ad791f;
83
+ --pf-yellow-color: #ad871f;
85
84
  --pf-yellow-color-50: #fdfbf7;
86
- --pf-yellow-color-100: #fcf7ee;
87
- --pf-yellow-color-150: #faf3e5;
88
- --pf-yellow-color-200: #f9eedc;
89
- --pf-yellow-color-250: #f4e2c2;
90
- --pf-yellow-color-300: #f0d6a8;
91
- --pf-yellow-color-400: #eaab3e;
92
- --pf-yellow-color-450: #dc9518;
93
- --pf-yellow-color-500: #ad791f;
85
+ --pf-yellow-color-100: #fcf8ee;
86
+ --pf-yellow-color-150: #faf5e5;
87
+ --pf-yellow-color-200: #f9f1dc;
88
+ --pf-yellow-color-250: #f4e7c2;
89
+ --pf-yellow-color-300: #f0dda8;
90
+ --pf-yellow-color-400: #eabc3e;
91
+ --pf-yellow-color-450: #dca818;
92
+ --pf-yellow-color-500: #ad871f;
94
93
  --pf-yellow-color-550: #976f00;
95
- --pf-yellow-color-600: #825b17;
96
- --pf-yellow-color-700: #58421d;
97
- --pf-yellow-color-800: #32291b;
94
+ --pf-yellow-color-600: #826517;
95
+ --pf-yellow-color-700: #58481d;
96
+ --pf-yellow-color-800: #322c1b;
98
97
  --pf-yellow-color-900: #1b160e;
99
98
 
100
99
  --pf-green-color: #14b869;
@@ -102,7 +101,7 @@
102
101
  --pf-green-color-100: #effbf5;
103
102
  --pf-green-color-150: #e7f9f0;
104
103
  --pf-green-color-200: #def7eb;
105
- --pf-green-color-250: #c2f4dc;
104
+ --pf-green-color-250: #c2f4db;
106
105
  --pf-green-color-300: #a8f0cd;
107
106
  --pf-green-color-400: #3eea97;
108
107
  --pf-green-color-450: #18dc7e;
@@ -120,7 +119,7 @@
120
119
  --pf-teal-color-200: #dcf9f9;
121
120
  --pf-teal-color-250: #bff8f8;
122
121
  --pf-teal-color-300: #a3f5f5;
123
- --pf-teal-color-400: #3eeaea;
122
+ --pf-teal-color-400: #4edada;
124
123
  --pf-teal-color-450: #25d0d0;
125
124
  --pf-teal-color-500: #29a3a3;
126
125
  --pf-teal-color-550: #267373;
@@ -177,7 +176,7 @@
177
176
  --pf-black-color-90: rgba(0, 0, 0, 0.9);
178
177
  --pf-black-color-100: rgba(0, 0, 0, 1);
179
178
 
180
- /** SEMANTIC COLORS **/
179
+ /** COLOR FAMILIES **/
181
180
 
182
181
  --pf-primary-color: #50647c;
183
182
  --pf-primary-color-50: #f9fafb;
@@ -195,21 +194,21 @@
195
194
  --pf-primary-color-800: #111b28;
196
195
  --pf-primary-color-900: #0c141d;
197
196
 
198
- --pf-secondary-color: var(--pf-blue-color);
199
- --pf-secondary-color-50: var(--pf-blue-color-50);
200
- --pf-secondary-color-100: var(--pf-blue-color-100);
201
- --pf-secondary-color-150: var(--pf-blue-color-150);
202
- --pf-secondary-color-200: var(--pf-blue-color-200);
203
- --pf-secondary-color-250: var(--pf-blue-color-250);
204
- --pf-secondary-color-300: var(--pf-blue-color-300);
205
- --pf-secondary-color-400: var(--pf-blue-color-400);
206
- --pf-secondary-color-450: var(--pf-blue-color-450);
207
- --pf-secondary-color-500: var(--pf-blue-color-500);
208
- --pf-secondary-color-550: var(--pf-blue-color-550);
209
- --pf-secondary-color-600: var(--pf-blue-color-600);
210
- --pf-secondary-color-700: var(--pf-blue-color-700);
211
- --pf-secondary-color-800: var(--pf-blue-color-800);
212
- --pf-secondary-color-900: var(--pf-blue-color-900);
197
+ --pf-secondary-color: #1474b8;
198
+ --pf-secondary-color-50: #f8fafc;
199
+ --pf-secondary-color-100: #f1f5f9;
200
+ --pf-secondary-color-150: #e8f1f7;
201
+ --pf-secondary-color-200: #deedf7;
202
+ --pf-secondary-color-250: #c6dff1;
203
+ --pf-secondary-color-300: #add1eb;
204
+ --pf-secondary-color-400: #3ea2ea;
205
+ --pf-secondary-color-450: #188bdc;
206
+ --pf-secondary-color-500: #1474b8;
207
+ --pf-secondary-color-550: #1268a5;
208
+ --pf-secondary-color-600: #0f578a;
209
+ --pf-secondary-color-700: #1d4058;
210
+ --pf-secondary-color-800: #132939;
211
+ --pf-secondary-color-900: #0e151b;
213
212
 
214
213
  --pf-tertiary-color: #6a7798;
215
214
  --pf-tertiary-color-50: #f8fafb;
@@ -227,22 +226,6 @@
227
226
  --pf-tertiary-color-800: #2c303a;
228
227
  --pf-tertiary-color-900: #111317;
229
228
 
230
- --pf-brand-color: #2989ff;
231
- --pf-brand-color-50: #f6fafd;
232
- --pf-brand-color-100: #eef4fc;
233
- --pf-brand-color-150: #e5effa;
234
- --pf-brand-color-200: #d8e9fd;
235
- --pf-brand-color-250: #bbd8fb;
236
- --pf-brand-color-300: #9ec7fa;
237
- --pf-brand-color-400: #2989ff;
238
- --pf-brand-color-450: #0070f5;
239
- --pf-brand-color-500: #005ccc;
240
- --pf-brand-color-550: #0054b8;
241
- --pf-brand-color-600: #004599;
242
- --pf-brand-color-700: #06356f;
243
- --pf-brand-color-800: #082345;
244
- --pf-brand-color-900: #061323;
245
-
246
229
  /** UTILITY COLORS **/
247
230
 
248
231
  --pf-error-color: var(--pf-red-color-450);
@@ -260,9 +243,9 @@
260
243
  --pf-info-color: var(--pf-secondary-color-450);
261
244
  --pf-info-color-dark: var(--pf-secondary-color-550);
262
245
  --pf-info-color-light: var(--pf-secondary-color-400);
263
- --pf-brand-color: var(--pf-brand-color-450);
264
- --pf-brand-color-dark: var(--pf-brand-color-550);
265
- --pf-brand-color-light: var(--pf-brand-color-300);
246
+ --pf-brand-color: var(--pf-blue-color-450);
247
+ --pf-brand-color-dark: var(--pf-blue-color-550);
248
+ --pf-brand-color-light: var(--pf-blue-color-300);
266
249
  --pf-pending-color: var(--pf-pink-color-500);
267
250
  --pf-pending-color-dark: var(--pf-pink-color-600);
268
251
  --pf-pending-color-light: var(--pf-pink-color-300);
package/src/stylesAndAnimations/colors/BaseColorPalette.mdx ADDED
@@ -0,0 +1,56 @@
1
+ import { Canvas, Meta, Controls } from '@storybook/blocks';
2
+ import * as Colors from './Colors.stories';
3
+
4
+ <Meta title="Styles/Base Palette Colors" />
5
+ # Base Palette Colors
6
+
7
+ These are the base palette colors used to build semantic tokens. Do not use these directly!
8
+
9
+ ## Color Structure
10
+
11
+ ### Base Colors
12
+
13
+ - **Primary**: Blue-gray palette (#50647c) - Main brand colors
14
+ - **Secondary**: Blue palette (#1474b8) - Accent and interactive elements
15
+ - **Tertiary**: Gray-blue palette (#6a7798) - Supporting elements
16
+ - **Gray**: Neutral grays (#808080) - Text and backgrounds
17
+ - **Red**: Error and destructive actions (#a3292d)
18
+ - **Orange**: Warning and attention (#994733)
19
+ - **Yellow**: Caution and highlights (#ad871f)
20
+ - **Green**: Success and positive actions (#14b869)
21
+ - **Purple**: Special and premium features (#5c29a3)
22
+ - **Pink**: Unique and creative elements (#a3292d)
23
+ - **Teal**: Information and data (#29a3a3)
24
+ - **Blue**: Brand and primary actions (#2989ff)
25
+
26
+ ### Color Scale
27
+
28
+ Each color family follows a consistent scale: 50, 100, 150, 200, 250, 300, 400, 450, 500, 550, 600, 700, 800, 900
29
+
30
+ Click on the swatch to copy the color to your clipboard.
31
+
32
+ <Canvas of={Colors.Default} />
33
+
34
+ ## CSS Variable Syntax
35
+
36
+ In order to use or override a color listed above, you would use the following syntax.
37
+
38
+ ### Using A Variable
39
+
40
+ The syntax for invoking a variable in your CSS code follows this pattern.
41
+
42
+ ```css
43
+ .myElement {
44
+ color: var(--pf-primary-color-100);
45
+ }
46
+ ```
47
+
48
+ ### Overriding A Variable
49
+
50
+ The syntax for overriding a variable in your CSS code follows this pattern.
51
+
52
+ ```css
53
+ :root {
54
+ --pf-primary-color-100: #ff0000;
55
+ }
56
+ ```
package/src/stylesAndAnimations/colors/Colors.tsx CHANGED
@@ -1,25 +1,31 @@
1
1
  import React from 'react';
2
2
  import { Container, Row, Col } from 'react-grid-system';
3
- import { colorList, darkThemeColors, lightThemeColors, utilityColorList } from './constants';
3
+ import { colorList, themeColors, utilityColorList } from './constants';
4
4
  import { Swatch } from './Swatch';
5
- import { useTheme } from './hooks';
6
5
 
7
6
  export const Colors = () => {
8
- const theme = useTheme();
9
- const themeColors = theme === 'dark' ? darkThemeColors : lightThemeColors;
10
-
11
7
  return (
12
8
  <Container>
13
9
  <Row>
14
10
  {colorList.map((color) => {
15
- const colorShades = Object.keys(themeColors[color])
11
+ const colorData = themeColors[color];
12
+ if (!colorData || !('base' in colorData)) return null;
13
+
14
+ const colorShades = Object.keys(colorData)
16
15
  .map(Number)
17
16
  .sort((a, b) => a - b);
17
+
18
18
  return (
19
19
  <Col sm={6} key={color}>
20
20
  <h1 className="text-capitalize my-5">{color}</h1>
21
+
22
+ <div className="my-3">
23
+ <Swatch key="base" color={color} colorValue={colorData.base || colorData['500']} />
24
+ </div>
25
+
21
26
  {colorShades.map((shade) => {
22
- const colorValue = themeColors[color][shade];
27
+ const colorValue = colorData[shade.toString() as keyof typeof colorData];
28
+ if (!colorValue) return null;
23
29
  return <Swatch key={shade} color={color} shade={shade} colorValue={colorValue} />;
24
30
  })}
25
31
  </Col>
@@ -28,9 +34,28 @@ export const Colors = () => {
28
34
  </Row>
29
35
  <Row>
30
36
  <Col sm={6} key="utility">
31
- <h1 className="text-capitalize my-5">Utility Colors</h1>
37
+ <h1 className="text-capitalize my-5">Light Mode Utility Colors</h1>
38
+ {utilityColorList.map((color) => {
39
+ return (
40
+ <Swatch
41
+ key={'light-' + color}
42
+ color={color}
43
+ colorValue={themeColors.utilityLight[color]}
44
+ />
45
+ );
46
+ })}
47
+ </Col>
48
+
49
+ <Col sm={6} key="utility">
50
+ <h1 className="text-capitalize my-5">Dark Mode Utility Colors</h1>
32
51
  {utilityColorList.map((color) => {
33
- return <Swatch key={color} color={color} colorValue={themeColors.utility[color]} />;
52
+ return (
53
+ <Swatch
54
+ key={'dark-' + color}
55
+ color={color}
56
+ colorValue={themeColors.utilityDark[color]}
57
+ />
58
+ );
34
59
  })}
35
60
  </Col>
36
61
  </Row>