@redgate/brand-web-toolkit 0.0.7 → 0.0.8

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.
@@ -0,0 +1,7 @@
1
+ import { IIcon } from '../icons/Icon';
2
+ export type INotification = {
3
+ type: 'info' | 'fail' | 'success' | 'warning';
4
+ icon?: boolean | IIcon['icon'];
5
+ children: React.ReactElement;
6
+ };
7
+ export default function Notification({ type, icon, children }: INotification): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,39 @@
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
2
+ import Icon from '../icons/Icon.js';
3
+
4
+ function NotificationIcon({ type, icon, }) {
5
+ if (icon === false || icon === undefined) {
6
+ return null;
7
+ }
8
+ const defaultIcon = {
9
+ info: 'PlusCircle',
10
+ fail: 'CloseCircle',
11
+ success: 'TickCircle',
12
+ warning: 'MinusCircle',
13
+ };
14
+ return jsx(Icon, { icon: icon === true ? defaultIcon[type] : icon, size: 24 });
15
+ }
16
+ function Notification({ type, icon, children }) {
17
+ const notificationColours = {
18
+ info: {
19
+ border: 'border-fg-info-secondary',
20
+ text: 'text-fg-info-secondary',
21
+ },
22
+ fail: {
23
+ border: 'border-fg-error-secondary',
24
+ text: 'text-fg-error-secondary',
25
+ },
26
+ success: {
27
+ border: 'border-fg-success-secondary',
28
+ text: 'text-fg-success-secondary',
29
+ },
30
+ warning: {
31
+ border: 'border-fg-warning-secondary',
32
+ text: 'text-fg-warning-secondary',
33
+ },
34
+ };
35
+ return (jsx("div", { className: `flex bg-bg-secondary p-5 border-l-10 ${notificationColours[type].border}`, children: jsxs("div", { className: `flex grow items-start gap-5`, children: [icon && (jsx("span", { className: notificationColours[type].text, children: jsx(NotificationIcon, { type: type, icon: icon }) })), jsx("div", { className: "flex flex-col grow", children: children })] }) }));
36
+ }
37
+
38
+ export { Notification as default };
39
+ //# sourceMappingURL=Notification.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Notification.js","sources":["../../../../components/notification/Notification.tsx"],"sourcesContent":["import Icon, { IIcon } from '../icons/Icon';\n\nexport type INotification = {\n type: 'info' | 'fail' | 'success' | 'warning';\n icon?: boolean | IIcon['icon'];\n children: React.ReactElement;\n};\n\nfunction NotificationIcon({\n type,\n icon,\n}: {\n type: INotification['type'];\n icon: INotification['icon'];\n}) {\n if (icon === false || icon === undefined) {\n return null;\n }\n\n const defaultIcon: Record<INotification['type'], IIcon['icon']> = {\n info: 'PlusCircle',\n fail: 'CloseCircle',\n success: 'TickCircle',\n warning: 'MinusCircle',\n };\n\n return <Icon icon={icon === true ? defaultIcon[type] : icon} size={24} />;\n}\n\nexport default function Notification({ type, icon, children }: INotification) {\n const notificationColours: Record<\n INotification['type'],\n { border: string; text: string }\n > = {\n info: {\n border: 'border-fg-info-secondary',\n text: 'text-fg-info-secondary',\n },\n fail: {\n border: 'border-fg-error-secondary',\n text: 'text-fg-error-secondary',\n },\n success: {\n border: 'border-fg-success-secondary',\n text: 'text-fg-success-secondary',\n },\n warning: {\n border: 'border-fg-warning-secondary',\n text: 'text-fg-warning-secondary',\n },\n };\n\n return (\n <div\n className={`flex bg-bg-secondary p-5 border-l-10 ${notificationColours[type].border}`}\n >\n <div className={`flex grow items-start gap-5`}>\n {icon && (\n <span className={notificationColours[type].text}>\n <NotificationIcon type={type} icon={icon} />\n </span>\n )}\n <div className=\"flex flex-col grow\">{children}</div>\n </div>\n </div>\n );\n}\n"],"names":["_jsx","_jsxs"],"mappings":";;;AAQA,SAAS,gBAAgB,CAAC,EACtB,IAAI,EACJ,IAAI,GAIP,EAAA;IACG,IAAI,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,SAAS,EAAE;AACtC,QAAA,OAAO,IAAI;IACf;AAEA,IAAA,MAAM,WAAW,GAAiD;AAC9D,QAAA,IAAI,EAAE,YAAY;AAClB,QAAA,IAAI,EAAE,aAAa;AACnB,QAAA,OAAO,EAAE,YAAY;AACrB,QAAA,OAAO,EAAE,aAAa;KACzB;IAED,OAAOA,GAAA,CAAC,IAAI,EAAA,EAAC,IAAI,EAAE,IAAI,KAAK,IAAI,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,IAAI,EAAE,IAAI,EAAE,EAAE,EAAA,CAAI;AAC7E;AAEc,SAAU,YAAY,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAiB,EAAA;AACxE,IAAA,MAAM,mBAAmB,GAGrB;AACA,QAAA,IAAI,EAAE;AACF,YAAA,MAAM,EAAE,0BAA0B;AAClC,YAAA,IAAI,EAAE,wBAAwB;AACjC,SAAA;AACD,QAAA,IAAI,EAAE;AACF,YAAA,MAAM,EAAE,2BAA2B;AACnC,YAAA,IAAI,EAAE,yBAAyB;AAClC,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,MAAM,EAAE,6BAA6B;AACrC,YAAA,IAAI,EAAE,2BAA2B;AACpC,SAAA;AACD,QAAA,OAAO,EAAE;AACL,YAAA,MAAM,EAAE,6BAA6B;AACrC,YAAA,IAAI,EAAE,2BAA2B;AACpC,SAAA;KACJ;IAED,QACIA,GAAA,CAAA,KAAA,EAAA,EACI,SAAS,EAAE,CAAA,qCAAA,EAAwC,mBAAmB,CAAC,IAAI,CAAC,CAAC,MAAM,CAAA,CAAE,YAErFC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,CAAA,2BAAA,CAA6B,EAAA,QAAA,EAAA,CACxC,IAAI,KACDD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAA,QAAA,EAC3CA,GAAA,CAAC,gBAAgB,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAA,CAAI,GACzC,CACV,EACDA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,QAAQ,EAAA,CAAO,CAAA,EAAA,CAClD,EAAA,CACJ;AAEd;;;;"}
@@ -0,0 +1,2 @@
1
+ import Notification from './Notification';
2
+ export { Notification };
@@ -0,0 +1,2 @@
1
+ export { default as Notification } from './Notification.js';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@redgate/brand-web-toolkit",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "description": "Web toolkit for the Redgate Brand design system",
5
5
  "main": "components/index.js",
6
6
  "module": "components/index.js",
@@ -8,6 +8,7 @@
8
8
  "Courier New", monospace;
9
9
  --text-xl: 20px;
10
10
  --text-xl--line-height: var(--line-height-10);
11
+ --font-weight-bold: 700;
11
12
  --default-font-family: var(--font-family-body);
12
13
  --default-mono-font-family: var(--font-mono);
13
14
  --color-white: #FFFFFF;
@@ -152,6 +153,10 @@
152
153
  --color-text-secondary: var(--color-indigo-400);
153
154
  --color-fg-accent-primary: var(--color-indigo-600);
154
155
  --color-fg-accent-secondary: var(--color-indigo-500);
156
+ --color-fg-error-secondary: var(--color-red-500);
157
+ --color-fg-warning-secondary: var(--color-yellow-500);
158
+ --color-fg-success-secondary: var(--color-green-500);
159
+ --color-fg-info-secondary: var(--color-blue-500);
155
160
  --color-bg-primary: var(--color-white);
156
161
  --color-bg-secondary: var(--color-gray-50);
157
162
  --color-bg-tertiary: var(--color-gray-100);
@@ -334,6 +339,9 @@
334
339
  .contents {
335
340
  display: contents;
336
341
  }
342
+ .flex {
343
+ display: flex;
344
+ }
337
345
  .grid {
338
346
  display: grid;
339
347
  }
@@ -343,9 +351,63 @@
343
351
  .inline {
344
352
  display: inline;
345
353
  }
354
+ .grow {
355
+ flex-grow: 1;
356
+ }
346
357
  .transform {
347
358
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
348
359
  }
360
+ .flex-col {
361
+ flex-direction: column;
362
+ }
363
+ .items-start {
364
+ align-items: flex-start;
365
+ }
366
+ .gap-5 {
367
+ gap: var(--spacing-5);
368
+ }
369
+ .border {
370
+ border-style: var(--tw-border-style);
371
+ border-width: 1px;
372
+ }
373
+ .border-l-10 {
374
+ border-left-style: var(--tw-border-style);
375
+ border-left-width: 10px;
376
+ }
377
+ .border-fg-error-secondary {
378
+ border-color: var(--color-fg-error-secondary);
379
+ }
380
+ .border-fg-info-secondary {
381
+ border-color: var(--color-fg-info-secondary);
382
+ }
383
+ .border-fg-success-secondary {
384
+ border-color: var(--color-fg-success-secondary);
385
+ }
386
+ .border-fg-warning-secondary {
387
+ border-color: var(--color-fg-warning-secondary);
388
+ }
389
+ .bg-bg-secondary {
390
+ background-color: var(--color-bg-secondary);
391
+ }
392
+ .p-5 {
393
+ padding: var(--spacing-5);
394
+ }
395
+ .font-bold {
396
+ --tw-font-weight: var(--font-weight-bold);
397
+ font-weight: var(--font-weight-bold);
398
+ }
399
+ .text-fg-error-secondary {
400
+ color: var(--color-fg-error-secondary);
401
+ }
402
+ .text-fg-info-secondary {
403
+ color: var(--color-fg-info-secondary);
404
+ }
405
+ .text-fg-success-secondary {
406
+ color: var(--color-fg-success-secondary);
407
+ }
408
+ .text-fg-warning-secondary {
409
+ color: var(--color-fg-warning-secondary);
410
+ }
349
411
  .lowercase {
350
412
  text-transform: lowercase;
351
413
  }
@@ -472,6 +534,8 @@
472
534
  --color-fg-warning-secondary: var(--color-yellow-400);
473
535
  --color-fg-success-primary: var(--color-green-500);
474
536
  --color-fg-success-secondary: var(--color-green-400);
537
+ --color-fg-info-primary: var(--color-blue-500);
538
+ --color-fg-info-secondary: var(--color-blue-400);
475
539
  --color-bg-quaternary: var(--color-indigo-700);
476
540
  --color-bg-quaternary-hover: var(--color-indigo-700);
477
541
  --color-bg-overlay: var(--color-indigo-800);
@@ -553,6 +617,15 @@
553
617
  syntax: "*";
554
618
  inherits: false;
555
619
  }
620
+ @property --tw-border-style {
621
+ syntax: "*";
622
+ inherits: false;
623
+ initial-value: solid;
624
+ }
625
+ @property --tw-font-weight {
626
+ syntax: "*";
627
+ inherits: false;
628
+ }
556
629
  @layer properties {
557
630
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
558
631
  *, ::before, ::after, ::backdrop {
@@ -561,6 +634,8 @@
561
634
  --tw-rotate-z: initial;
562
635
  --tw-skew-x: initial;
563
636
  --tw-skew-y: initial;
637
+ --tw-border-style: solid;
638
+ --tw-font-weight: initial;
564
639
  }
565
640
  }
566
641
  }
@@ -8,6 +8,7 @@
8
8
  "Courier New", monospace;
9
9
  --text-xl: 20px;
10
10
  --text-xl--line-height: var(--line-height-10);
11
+ --font-weight-bold: 700;
11
12
  --default-font-family: var(--font-family-body);
12
13
  --default-mono-font-family: var(--font-mono);
13
14
  --color-white: #FFFFFF;
@@ -152,6 +153,10 @@
152
153
  --color-text-secondary: var(--color-gray-700);
153
154
  --color-fg-accent-primary: var(--color-red-600);
154
155
  --color-fg-accent-secondary: var(--color-red-500);
156
+ --color-fg-error-secondary: var(--color-red-500);
157
+ --color-fg-warning-secondary: var(--color-yellow-500);
158
+ --color-fg-success-secondary: var(--color-green-500);
159
+ --color-fg-info-secondary: var(--color-blue-500);
155
160
  --color-bg-primary: var(--color-white);
156
161
  --color-bg-secondary: var(--color-gray-50);
157
162
  --color-bg-tertiary: var(--color-gray-100);
@@ -334,6 +339,9 @@
334
339
  .contents {
335
340
  display: contents;
336
341
  }
342
+ .flex {
343
+ display: flex;
344
+ }
337
345
  .grid {
338
346
  display: grid;
339
347
  }
@@ -343,9 +351,63 @@
343
351
  .inline {
344
352
  display: inline;
345
353
  }
354
+ .grow {
355
+ flex-grow: 1;
356
+ }
346
357
  .transform {
347
358
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
348
359
  }
360
+ .flex-col {
361
+ flex-direction: column;
362
+ }
363
+ .items-start {
364
+ align-items: flex-start;
365
+ }
366
+ .gap-5 {
367
+ gap: var(--spacing-5);
368
+ }
369
+ .border {
370
+ border-style: var(--tw-border-style);
371
+ border-width: 1px;
372
+ }
373
+ .border-l-10 {
374
+ border-left-style: var(--tw-border-style);
375
+ border-left-width: 10px;
376
+ }
377
+ .border-fg-error-secondary {
378
+ border-color: var(--color-fg-error-secondary);
379
+ }
380
+ .border-fg-info-secondary {
381
+ border-color: var(--color-fg-info-secondary);
382
+ }
383
+ .border-fg-success-secondary {
384
+ border-color: var(--color-fg-success-secondary);
385
+ }
386
+ .border-fg-warning-secondary {
387
+ border-color: var(--color-fg-warning-secondary);
388
+ }
389
+ .bg-bg-secondary {
390
+ background-color: var(--color-bg-secondary);
391
+ }
392
+ .p-5 {
393
+ padding: var(--spacing-5);
394
+ }
395
+ .font-bold {
396
+ --tw-font-weight: var(--font-weight-bold);
397
+ font-weight: var(--font-weight-bold);
398
+ }
399
+ .text-fg-error-secondary {
400
+ color: var(--color-fg-error-secondary);
401
+ }
402
+ .text-fg-info-secondary {
403
+ color: var(--color-fg-info-secondary);
404
+ }
405
+ .text-fg-success-secondary {
406
+ color: var(--color-fg-success-secondary);
407
+ }
408
+ .text-fg-warning-secondary {
409
+ color: var(--color-fg-warning-secondary);
410
+ }
349
411
  .lowercase {
350
412
  text-transform: lowercase;
351
413
  }
@@ -475,6 +537,8 @@
475
537
  --color-fg-warning-secondary: var(--color-yellow-400);
476
538
  --color-fg-success-primary: var(--color-green-500);
477
539
  --color-fg-success-secondary: var(--color-green-400);
540
+ --color-fg-info-primary: var(--color-blue-500);
541
+ --color-fg-info-secondary: var(--color-blue-400);
478
542
  --color-bg-quaternary: var(--color-gray-700);
479
543
  --color-bg-quaternary-hover: var(--color-gray-700);
480
544
  --color-bg-overlay: var(--color-gray-800);
@@ -556,6 +620,15 @@
556
620
  syntax: "*";
557
621
  inherits: false;
558
622
  }
623
+ @property --tw-border-style {
624
+ syntax: "*";
625
+ inherits: false;
626
+ initial-value: solid;
627
+ }
628
+ @property --tw-font-weight {
629
+ syntax: "*";
630
+ inherits: false;
631
+ }
559
632
  @layer properties {
560
633
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
561
634
  *, ::before, ::after, ::backdrop {
@@ -564,6 +637,8 @@
564
637
  --tw-rotate-z: initial;
565
638
  --tw-skew-x: initial;
566
639
  --tw-skew-y: initial;
640
+ --tw-border-style: solid;
641
+ --tw-font-weight: initial;
567
642
  }
568
643
  }
569
644
  }
@@ -8,6 +8,7 @@
8
8
  "Courier New", monospace;
9
9
  --text-xl: 20px;
10
10
  --text-xl--line-height: var(--line-height-10);
11
+ --font-weight-bold: 700;
11
12
  --default-font-family: var(--font-family-body);
12
13
  --default-mono-font-family: var(--font-mono);
13
14
  --color-white: #FFFFFF;
@@ -152,6 +153,10 @@
152
153
  --color-text-secondary: var(--color-gray-700);
153
154
  --color-fg-accent-primary: var(--color-blue-600);
154
155
  --color-fg-accent-secondary: var(--color-blue-500);
156
+ --color-fg-error-secondary: var(--color-red-500);
157
+ --color-fg-warning-secondary: var(--color-yellow-500);
158
+ --color-fg-success-secondary: var(--color-green-500);
159
+ --color-fg-info-secondary: var(--color-blue-500);
155
160
  --color-bg-primary: var(--color-white);
156
161
  --color-bg-secondary: var(--color-gray-50);
157
162
  --color-bg-tertiary: var(--color-gray-100);
@@ -334,6 +339,9 @@
334
339
  .contents {
335
340
  display: contents;
336
341
  }
342
+ .flex {
343
+ display: flex;
344
+ }
337
345
  .grid {
338
346
  display: grid;
339
347
  }
@@ -343,9 +351,63 @@
343
351
  .inline {
344
352
  display: inline;
345
353
  }
354
+ .grow {
355
+ flex-grow: 1;
356
+ }
346
357
  .transform {
347
358
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
348
359
  }
360
+ .flex-col {
361
+ flex-direction: column;
362
+ }
363
+ .items-start {
364
+ align-items: flex-start;
365
+ }
366
+ .gap-5 {
367
+ gap: var(--spacing-5);
368
+ }
369
+ .border {
370
+ border-style: var(--tw-border-style);
371
+ border-width: 1px;
372
+ }
373
+ .border-l-10 {
374
+ border-left-style: var(--tw-border-style);
375
+ border-left-width: 10px;
376
+ }
377
+ .border-fg-error-secondary {
378
+ border-color: var(--color-fg-error-secondary);
379
+ }
380
+ .border-fg-info-secondary {
381
+ border-color: var(--color-fg-info-secondary);
382
+ }
383
+ .border-fg-success-secondary {
384
+ border-color: var(--color-fg-success-secondary);
385
+ }
386
+ .border-fg-warning-secondary {
387
+ border-color: var(--color-fg-warning-secondary);
388
+ }
389
+ .bg-bg-secondary {
390
+ background-color: var(--color-bg-secondary);
391
+ }
392
+ .p-5 {
393
+ padding: var(--spacing-5);
394
+ }
395
+ .font-bold {
396
+ --tw-font-weight: var(--font-weight-bold);
397
+ font-weight: var(--font-weight-bold);
398
+ }
399
+ .text-fg-error-secondary {
400
+ color: var(--color-fg-error-secondary);
401
+ }
402
+ .text-fg-info-secondary {
403
+ color: var(--color-fg-info-secondary);
404
+ }
405
+ .text-fg-success-secondary {
406
+ color: var(--color-fg-success-secondary);
407
+ }
408
+ .text-fg-warning-secondary {
409
+ color: var(--color-fg-warning-secondary);
410
+ }
349
411
  .lowercase {
350
412
  text-transform: lowercase;
351
413
  }
@@ -470,6 +532,8 @@
470
532
  --color-fg-warning-secondary: var(--color-yellow-400);
471
533
  --color-fg-success-primary: var(--color-green-500);
472
534
  --color-fg-success-secondary: var(--color-green-400);
535
+ --color-fg-info-primary: var(--color-blue-500);
536
+ --color-fg-info-secondary: var(--color-blue-400);
473
537
  --color-bg-quaternary: var(--color-gray-700);
474
538
  --color-bg-quaternary-hover: var(--color-gray-700);
475
539
  --color-bg-overlay: var(--color-gray-800);
@@ -551,6 +615,15 @@
551
615
  syntax: "*";
552
616
  inherits: false;
553
617
  }
618
+ @property --tw-border-style {
619
+ syntax: "*";
620
+ inherits: false;
621
+ initial-value: solid;
622
+ }
623
+ @property --tw-font-weight {
624
+ syntax: "*";
625
+ inherits: false;
626
+ }
554
627
  @layer properties {
555
628
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
556
629
  *, ::before, ::after, ::backdrop {
@@ -559,6 +632,8 @@
559
632
  --tw-rotate-z: initial;
560
633
  --tw-skew-x: initial;
561
634
  --tw-skew-y: initial;
635
+ --tw-border-style: solid;
636
+ --tw-font-weight: initial;
562
637
  }
563
638
  }
564
639
  }
@@ -110,6 +110,8 @@
110
110
  --color-fg-warning-secondary: var(--color-yellow-500);
111
111
  --color-fg-success-primary: var(--color-green-600);
112
112
  --color-fg-success-secondary: var(--color-green-500);
113
+ --color-fg-info-primary: var(--color-blue-600);
114
+ --color-fg-info-secondary: var(--color-blue-500);
113
115
 
114
116
  --color-bg-quaternary: var(--color-gray-200);
115
117
  --color-bg-quaternary-hover: var(--color-gray-200);
@@ -308,6 +310,8 @@
308
310
  --color-fg-warning-secondary: var(--color-yellow-400);
309
311
  --color-fg-success-primary: var(--color-green-500);
310
312
  --color-fg-success-secondary: var(--color-green-400);
313
+ --color-fg-info-primary: var(--color-blue-500);
314
+ --color-fg-info-secondary: var(--color-blue-400);
311
315
 
312
316
  --color-bg-quaternary: var(--color-indigo-700);
313
317
  --color-bg-quaternary-hover: var(--color-indigo-700);
@@ -103,6 +103,8 @@
103
103
  --color-fg-warning-secondary: var(--color-yellow-500);
104
104
  --color-fg-success-primary: var(--color-green-600);
105
105
  --color-fg-success-secondary: var(--color-green-500);
106
+ --color-fg-info-primary: var(--color-blue-600);
107
+ --color-fg-info-secondary: var(--color-blue-500);
106
108
  --color-bg-quaternary: var(--color-gray-200);
107
109
  --color-bg-quaternary-hover: var(--color-gray-200);
108
110
  --color-bg-overlay: var(--color-gray-950);
@@ -267,6 +269,8 @@
267
269
  --color-fg-warning-secondary: var(--color-yellow-400);
268
270
  --color-fg-success-primary: var(--color-green-500);
269
271
  --color-fg-success-secondary: var(--color-green-400);
272
+ --color-fg-info-primary: var(--color-blue-500);
273
+ --color-fg-info-secondary: var(--color-blue-400);
270
274
  --color-bg-quaternary: var(--color-gray-700);
271
275
  --color-bg-quaternary-hover: var(--color-gray-700);
272
276
  --color-bg-overlay: var(--color-gray-800);
@@ -106,6 +106,8 @@
106
106
  --color-fg-warning-secondary: var(--color-yellow-500);
107
107
  --color-fg-success-primary: var(--color-green-600);
108
108
  --color-fg-success-secondary: var(--color-green-500);
109
+ --color-fg-info-primary: var(--color-blue-600);
110
+ --color-fg-info-secondary: var(--color-blue-500);
109
111
 
110
112
  --color-bg-quaternary: var(--color-gray-200);
111
113
  --color-bg-quaternary-hover: var(--color-gray-200);
@@ -285,6 +287,8 @@
285
287
  --color-fg-warning-secondary: var(--color-yellow-400);
286
288
  --color-fg-success-primary: var(--color-green-500);
287
289
  --color-fg-success-secondary: var(--color-green-400);
290
+ --color-fg-info-primary: var(--color-blue-500);
291
+ --color-fg-info-secondary: var(--color-blue-400);
288
292
  --color-bg-quaternary: var(--color-gray-700);
289
293
  --color-bg-quaternary-hover: var(--color-gray-700);
290
294
  --color-bg-overlay: var(--color-gray-800);