@indico-data/design-system 2.47.2 → 2.47.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 (9) hide show
  1. package/lib/index.css +14 -3
  2. package/lib/index.d.ts +1 -1
  3. package/lib/index.esm.css +14 -3
  4. package/lib/types.d.ts +1 -1
  5. package/package.json +1 -1
  6. package/src/components/pill/Pill.stories.tsx +5 -0
  7. package/src/components/pill/styles/Pill.scss +9 -0
  8. package/src/styles/variables/themes/dark.scss +6 -3
  9. package/src/types.ts +8 -1
package/lib/index.css CHANGED
@@ -169,12 +169,14 @@
169
169
  --pf-red-color-100: #fae9e9;
170
170
  --pf-red-color-200: #f4d7d8;
171
171
  --pf-red-color-300: #ebb6b8;
172
- --pf-red-color-400: #df8d91;
172
+ --pf-red-color-350: #f39bb9;
173
+ --pf-red-color-400: #ef76a0;
173
174
  --pf-red-color-500: #ce6068;
174
175
  --pf-red-color-600: #b94553;
175
176
  --pf-red-color-700: #9b3544;
176
177
  --pf-red-color-800: #822f3e;
177
- --pf-red-color-900: #702b39;
178
+ --pf-red-color-850: #702b39;
179
+ --pf-red-color-900: #510e2b;
178
180
  --pf-red-color-950: #3e131b;
179
181
  --pf-orange-color: #f46325;
180
182
  --pf-orange-color-50: #fff5ed;
@@ -223,7 +225,7 @@
223
225
  --pf-purple-color-700: #7a4eb3;
224
226
  --pf-purple-color-800: #664196;
225
227
  --pf-purple-color-900: #55377b;
226
- --pf-purple-color-950: #352253;
228
+ --pf-purple-color-950: #291a40;
227
229
  --pf-white-color: #ffffff;
228
230
  --pf-white-color-1: rgba(255, 255, 255, 0.01);
229
231
  --pf-white-color-3: rgba(255, 255, 255, 0.03);
@@ -245,6 +247,7 @@
245
247
  --pf-neutral-color: var(--pf-gray-color-100);
246
248
  --pf-info-color: var(--pf-secondary-color-200);
247
249
  --pf-brand-color: var(--pf-secondary-color-550);
250
+ --pf-pending-color: var(--pf-red-color-900);
248
251
  --pf-link-color: var(--pf-gray-color-300);
249
252
  --pf-link-hover-color: var(--pf-gray-color-100);
250
253
  }
@@ -1945,6 +1948,9 @@ form {
1945
1948
  --pf-pill-neutral-background-color: var(--pf-gray-color-900);
1946
1949
  --pf-pill-neutral-font-color: var(--pf-gray-color-100);
1947
1950
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
1951
+ --pf-pill-pending-background-color: var(--pf-pending-color);
1952
+ --pf-pill-pending-font-color: var(--pf-white-color);
1953
+ --pf-pill-pending-border-color: var(--pf-red-color-350);
1948
1954
  }
1949
1955
 
1950
1956
  .pill {
@@ -2004,6 +2010,11 @@ form {
2004
2010
  color: var(--pf-pill-secondary-font-color);
2005
2011
  border-color: var(--pf-pill-secondary-border-color);
2006
2012
  }
2013
+ .pill--pending {
2014
+ background-color: var(--pf-pill-pending-background-color);
2015
+ color: var(--pf-pill-pending-font-color);
2016
+ border-color: var(--pf-pill-pending-border-color);
2017
+ }
2007
2018
 
2008
2019
  :root [data-theme=light] {
2009
2020
  --sheets-background-color: var(--pf-gray-color-100);
package/lib/index.d.ts CHANGED
@@ -209,7 +209,7 @@ type PermafrostComponent = {
209
209
  'data-testid'?: string;
210
210
  };
211
211
 
212
- type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
212
+ type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info' | 'pending';
213
213
 
214
214
  type Props$6 = PermafrostComponent & {
215
215
  ariaLabel?: string;
package/lib/index.esm.css CHANGED
@@ -169,12 +169,14 @@
169
169
  --pf-red-color-100: #fae9e9;
170
170
  --pf-red-color-200: #f4d7d8;
171
171
  --pf-red-color-300: #ebb6b8;
172
- --pf-red-color-400: #df8d91;
172
+ --pf-red-color-350: #f39bb9;
173
+ --pf-red-color-400: #ef76a0;
173
174
  --pf-red-color-500: #ce6068;
174
175
  --pf-red-color-600: #b94553;
175
176
  --pf-red-color-700: #9b3544;
176
177
  --pf-red-color-800: #822f3e;
177
- --pf-red-color-900: #702b39;
178
+ --pf-red-color-850: #702b39;
179
+ --pf-red-color-900: #510e2b;
178
180
  --pf-red-color-950: #3e131b;
179
181
  --pf-orange-color: #f46325;
180
182
  --pf-orange-color-50: #fff5ed;
@@ -223,7 +225,7 @@
223
225
  --pf-purple-color-700: #7a4eb3;
224
226
  --pf-purple-color-800: #664196;
225
227
  --pf-purple-color-900: #55377b;
226
- --pf-purple-color-950: #352253;
228
+ --pf-purple-color-950: #291a40;
227
229
  --pf-white-color: #ffffff;
228
230
  --pf-white-color-1: rgba(255, 255, 255, 0.01);
229
231
  --pf-white-color-3: rgba(255, 255, 255, 0.03);
@@ -245,6 +247,7 @@
245
247
  --pf-neutral-color: var(--pf-gray-color-100);
246
248
  --pf-info-color: var(--pf-secondary-color-200);
247
249
  --pf-brand-color: var(--pf-secondary-color-550);
250
+ --pf-pending-color: var(--pf-red-color-900);
248
251
  --pf-link-color: var(--pf-gray-color-300);
249
252
  --pf-link-hover-color: var(--pf-gray-color-100);
250
253
  }
@@ -1945,6 +1948,9 @@ form {
1945
1948
  --pf-pill-neutral-background-color: var(--pf-gray-color-900);
1946
1949
  --pf-pill-neutral-font-color: var(--pf-gray-color-100);
1947
1950
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
1951
+ --pf-pill-pending-background-color: var(--pf-pending-color);
1952
+ --pf-pill-pending-font-color: var(--pf-white-color);
1953
+ --pf-pill-pending-border-color: var(--pf-red-color-350);
1948
1954
  }
1949
1955
 
1950
1956
  .pill {
@@ -2004,6 +2010,11 @@ form {
2004
2010
  color: var(--pf-pill-secondary-font-color);
2005
2011
  border-color: var(--pf-pill-secondary-border-color);
2006
2012
  }
2013
+ .pill--pending {
2014
+ background-color: var(--pf-pill-pending-background-color);
2015
+ color: var(--pf-pill-pending-font-color);
2016
+ border-color: var(--pf-pill-pending-border-color);
2017
+ }
2007
2018
 
2008
2019
  :root [data-theme=light] {
2009
2020
  --sheets-background-color: var(--pf-gray-color-100);
package/lib/types.d.ts CHANGED
@@ -6,7 +6,7 @@ export type PermafrostComponent = {
6
6
  };
7
7
  import { IconSizes, IconName } from './components/icons/types';
8
8
  export type { IconSizes, IconName };
9
- export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
9
+ export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info' | 'pending';
10
10
  import { SelectOption } from './components/forms/select/types';
11
11
  export type { SelectOption };
12
12
  import { TableProps, TableColumn, Direction, Alignment } from './components/table/types';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@indico-data/design-system",
3
- "version": "2.47.2",
3
+ "version": "2.47.3",
4
4
  "description": "",
5
5
  "author": "",
6
6
  "main": "lib/index.js",
package/src/components/pill/Pill.stories.tsx CHANGED
@@ -138,6 +138,11 @@ export const AllStatuses: Story = {
138
138
  Neutral
139
139
  </Pill>
140
140
  </Col>
141
+ <Col>
142
+ <Pill color="pending" size="md">
143
+ Pending
144
+ </Pill>
145
+ </Col>
141
146
  </Row>
142
147
  </Container>
143
148
  );
package/src/components/pill/styles/Pill.scss CHANGED
@@ -59,6 +59,10 @@
59
59
  --pf-pill-neutral-background-color: var(--pf-gray-color-900);
60
60
  --pf-pill-neutral-font-color: var(--pf-gray-color-100);
61
61
  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
62
+
63
+ --pf-pill-pending-background-color: var(--pf-pending-color);
64
+ --pf-pill-pending-font-color: var(--pf-white-color);
65
+ --pf-pill-pending-border-color: var(--pf-red-color-350);
62
66
  }
63
67
 
64
68
  .pill {
@@ -121,4 +125,9 @@
121
125
  color: var(--pf-pill-secondary-font-color);
122
126
  border-color: var(--pf-pill-secondary-border-color);
123
127
  }
128
+ &--pending {
129
+ background-color: var(--pf-pill-pending-background-color);
130
+ color: var(--pf-pill-pending-font-color);
131
+ border-color: var(--pf-pill-pending-border-color);
132
+ }
124
133
  }
package/src/styles/variables/themes/dark.scss CHANGED
@@ -69,12 +69,14 @@
69
69
  --pf-red-color-100: #fae9e9;
70
70
  --pf-red-color-200: #f4d7d8;
71
71
  --pf-red-color-300: #ebb6b8;
72
- --pf-red-color-400: #df8d91;
72
+ --pf-red-color-350: #f39bb9;
73
+ --pf-red-color-400: #ef76a0;
73
74
  --pf-red-color-500: #ce6068;
74
75
  --pf-red-color-600: #b94553;
75
76
  --pf-red-color-700: #9b3544;
76
77
  --pf-red-color-800: #822f3e;
77
- --pf-red-color-900: #702b39;
78
+ --pf-red-color-850: #702b39;
79
+ --pf-red-color-900: #510e2b;
78
80
  --pf-red-color-950: #3e131b;
79
81
 
80
82
  //Orange color
@@ -135,7 +137,7 @@
135
137
  --pf-purple-color-700: #7a4eb3;
136
138
  --pf-purple-color-800: #664196;
137
139
  --pf-purple-color-900: #55377b;
138
- --pf-purple-color-950: #352253;
140
+ --pf-purple-color-950: #291a40;
139
141
 
140
142
  // White color
141
143
  --pf-white-color: #ffffff;
@@ -161,6 +163,7 @@
161
163
  --pf-neutral-color: var(--pf-gray-color-100);
162
164
  --pf-info-color: var(--pf-secondary-color-200);
163
165
  --pf-brand-color: var(--pf-secondary-color-550);
166
+ --pf-pending-color: var(--pf-red-color-900);
164
167
 
165
168
  --pf-link-color: var(--pf-gray-color-300);
166
169
  --pf-link-hover-color: var(--pf-gray-color-100);
package/src/types.ts CHANGED
@@ -7,7 +7,14 @@ export type PermafrostComponent = {
7
7
 
8
8
  import { IconSizes, IconName } from './components/icons/types';
9
9
  export type { IconSizes, IconName };
10
- export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
10
+ export type SemanticColor =
11
+ | 'primary'
12
+ | 'secondary'
13
+ | 'warning'
14
+ | 'error'
15
+ | 'success'
16
+ | 'info'
17
+ | 'pending';
11
18
  import { SelectOption } from './components/forms/select/types';
12
19
  export type { SelectOption };
13
20