@indico-data/design-system 2.47.1 → 2.47.3

package/lib/index.css

@@ -169,12 +169,14 @@
   --pf-red-color-100: #fae9e9;
   --pf-red-color-200: #f4d7d8;
   --pf-red-color-300: #ebb6b8;
-  --pf-red-color-400: #df8d91;
+  --pf-red-color-350: #f39bb9;
+  --pf-red-color-400: #ef76a0;
   --pf-red-color-500: #ce6068;
   --pf-red-color-600: #b94553;
   --pf-red-color-700: #9b3544;
   --pf-red-color-800: #822f3e;
-  --pf-red-color-900: #702b39;
+  --pf-red-color-850: #702b39;
+  --pf-red-color-900: #510e2b;
   --pf-red-color-950: #3e131b;
   --pf-orange-color: #f46325;
   --pf-orange-color-50: #fff5ed;
@@ -223,7 +225,7 @@
   --pf-purple-color-700: #7a4eb3;
   --pf-purple-color-800: #664196;
   --pf-purple-color-900: #55377b;
-  --pf-purple-color-950: #352253;
+  --pf-purple-color-950: #291a40;
   --pf-white-color: #ffffff;
   --pf-white-color-1: rgba(255, 255, 255, 0.01);
   --pf-white-color-3: rgba(255, 255, 255, 0.03);
@@ -245,6 +247,7 @@
   --pf-neutral-color: var(--pf-gray-color-100);
   --pf-info-color: var(--pf-secondary-color-200);
   --pf-brand-color: var(--pf-secondary-color-550);
+  --pf-pending-color: var(--pf-red-color-900);
   --pf-link-color: var(--pf-gray-color-300);
   --pf-link-hover-color: var(--pf-gray-color-100);
 }
@@ -1889,17 +1892,6 @@ form {
 .modal .modal-content .modal-body h2 {
   font-size: var(--pf-font-size-h1);
 }
-.modal .modal-content .modal-body h1,
-.modal .modal-content .modal-body h2,
-.modal .modal-content .modal-body h3,
-.modal .modal-content .modal-body h4,
-.modal .modal-content .modal-body h5,
-.modal .modal-content .modal-body h6 {
-  margin-bottom: var(--pf-margin-4);
-}
-.modal .modal-content .modal-body p {
-  margin-bottom: var(--pf-margin-4);
-}
 .modal .modal-content .modal-body hr {
   margin-top: var(--pf-margin-8);
   margin-bottom: var(--pf-margin-8);
@@ -1956,6 +1948,9 @@ form {
   --pf-pill-neutral-background-color: var(--pf-gray-color-900);
   --pf-pill-neutral-font-color: var(--pf-gray-color-100);
   --pf-pill-neutral-border-color: var(--pf-gray-color-700);
+  --pf-pill-pending-background-color: var(--pf-pending-color);
+  --pf-pill-pending-font-color: var(--pf-white-color);
+  --pf-pill-pending-border-color: var(--pf-red-color-350);
 }
 
 .pill {
@@ -2015,6 +2010,11 @@ form {
   color: var(--pf-pill-secondary-font-color);
   border-color: var(--pf-pill-secondary-border-color);
 }
+.pill--pending {
+  background-color: var(--pf-pill-pending-background-color);
+  color: var(--pf-pill-pending-font-color);
+  border-color: var(--pf-pill-pending-border-color);
+}
 
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);

package/lib/index.d.ts

@@ -209,7 +209,7 @@ type PermafrostComponent = {
     'data-testid'?: string;
 };
 
-type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
+type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info' | 'pending';
 
 type Props$6 = PermafrostComponent & {
     ariaLabel?: string;

package/lib/index.esm.css

@@ -169,12 +169,14 @@
   --pf-red-color-100: #fae9e9;
   --pf-red-color-200: #f4d7d8;
   --pf-red-color-300: #ebb6b8;
-  --pf-red-color-400: #df8d91;
+  --pf-red-color-350: #f39bb9;
+  --pf-red-color-400: #ef76a0;
   --pf-red-color-500: #ce6068;
   --pf-red-color-600: #b94553;
   --pf-red-color-700: #9b3544;
   --pf-red-color-800: #822f3e;
-  --pf-red-color-900: #702b39;
+  --pf-red-color-850: #702b39;
+  --pf-red-color-900: #510e2b;
   --pf-red-color-950: #3e131b;
   --pf-orange-color: #f46325;
   --pf-orange-color-50: #fff5ed;
@@ -223,7 +225,7 @@
   --pf-purple-color-700: #7a4eb3;
   --pf-purple-color-800: #664196;
   --pf-purple-color-900: #55377b;
-  --pf-purple-color-950: #352253;
+  --pf-purple-color-950: #291a40;
   --pf-white-color: #ffffff;
   --pf-white-color-1: rgba(255, 255, 255, 0.01);
   --pf-white-color-3: rgba(255, 255, 255, 0.03);
@@ -245,6 +247,7 @@
   --pf-neutral-color: var(--pf-gray-color-100);
   --pf-info-color: var(--pf-secondary-color-200);
   --pf-brand-color: var(--pf-secondary-color-550);
+  --pf-pending-color: var(--pf-red-color-900);
   --pf-link-color: var(--pf-gray-color-300);
   --pf-link-hover-color: var(--pf-gray-color-100);
 }
@@ -1889,17 +1892,6 @@ form {
 .modal .modal-content .modal-body h2 {
   font-size: var(--pf-font-size-h1);
 }
-.modal .modal-content .modal-body h1,
-.modal .modal-content .modal-body h2,
-.modal .modal-content .modal-body h3,
-.modal .modal-content .modal-body h4,
-.modal .modal-content .modal-body h5,
-.modal .modal-content .modal-body h6 {
-  margin-bottom: var(--pf-margin-4);
-}
-.modal .modal-content .modal-body p {
-  margin-bottom: var(--pf-margin-4);
-}
 .modal .modal-content .modal-body hr {
   margin-top: var(--pf-margin-8);
   margin-bottom: var(--pf-margin-8);
@@ -1956,6 +1948,9 @@ form {
   --pf-pill-neutral-background-color: var(--pf-gray-color-900);
   --pf-pill-neutral-font-color: var(--pf-gray-color-100);
   --pf-pill-neutral-border-color: var(--pf-gray-color-700);
+  --pf-pill-pending-background-color: var(--pf-pending-color);
+  --pf-pill-pending-font-color: var(--pf-white-color);
+  --pf-pill-pending-border-color: var(--pf-red-color-350);
 }
 
 .pill {
@@ -2015,6 +2010,11 @@ form {
   color: var(--pf-pill-secondary-font-color);
   border-color: var(--pf-pill-secondary-border-color);
 }
+.pill--pending {
+  background-color: var(--pf-pill-pending-background-color);
+  color: var(--pf-pill-pending-font-color);
+  border-color: var(--pf-pill-pending-border-color);
+}
 
 :root [data-theme=light] {
   --sheets-background-color: var(--pf-gray-color-100);

package/lib/types.d.ts

@@ -6,7 +6,7 @@ export type PermafrostComponent = {
 };
 import { IconSizes, IconName } from './components/icons/types';
 export type { IconSizes, IconName };
-export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
+export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info' | 'pending';
 import { SelectOption } from './components/forms/select/types';
 export type { SelectOption };
 import { TableProps, TableColumn, Direction, Alignment } from './components/table/types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.47.1",
+  "version": "2.47.3",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/modal/Modal.stories.tsx

@@ -183,8 +183,8 @@ export const Default: Story = {
         <Row>
           <Col sm={4}>
             <Modal {...args} isOpen={isOpen} onRequestClose={handleClose}>
-              <h2>The Legend of Zelda</h2>
-              <p>
+              <h2 className="mb-4">The Legend of Zelda</h2>
+              <p className="mb-4">
                 In the mystical realm of Hyrule, where ancient magic flows through verdant fields
                 and towering mountains, a timeless tale unfolds across countless generations. The
                 legendary hero Link, eternally reborn when darkness threatens the land, stands as
@@ -192,7 +192,7 @@ export const Default: Story = {
                 Through the ages, he has faced the malevolent forces of Ganon, whose insatiable
                 desire for power has brought destruction and chaos to this peaceful kingdom.
               </p>
-              <p>
+              <p className="mb-4">
                 Princess Zelda, blessed with the wisdom of the goddesses and keeper of the royal
                 bloodline, serves as both ruler and guardian of Hyrule's most sacred treasures.
                 Together with Link, she maintains the delicate balance between light and shadow,
@@ -244,8 +244,8 @@ export const ConfirmationModal: Story = {
         <Row>
           <Col sm={4}>
             <Modal {...args} isOpen={isOpen} onRequestClose={handleClose}>
-              <h2>Would you like to continue?</h2>
-              <p>
+              <h2 className="mb-4">Would you like to continue?</h2>
+              <p className="mb-4">
                 If you would like to proceed, please click the confirm button. Otherwise, click the
                 cancel button.
               </p>

package/src/components/modal/styles/Modal.scss

@@ -72,19 +72,6 @@
         font-size: var(--pf-font-size-h1);
       }
 
-      h1,
-      h2,
-      h3,
-      h4,
-      h5,
-      h6 {
-        margin-bottom: var(--pf-margin-4);
-      }
-
-      p {
-        margin-bottom: var(--pf-margin-4);
-      }
-
       // We should build a divider component for this
       hr {
         margin-top: var(--pf-margin-8);

package/src/components/pill/Pill.stories.tsx

@@ -138,6 +138,11 @@ export const AllStatuses: Story = {
               Neutral
             </Pill>
           </Col>
+          <Col>
+            <Pill color="pending" size="md">
+              Pending
+            </Pill>
+          </Col>
         </Row>
       </Container>
     );

package/src/components/pill/styles/Pill.scss

@@ -59,6 +59,10 @@
   --pf-pill-neutral-background-color: var(--pf-gray-color-900);
   --pf-pill-neutral-font-color: var(--pf-gray-color-100);
   --pf-pill-neutral-border-color: var(--pf-gray-color-700);
+
+  --pf-pill-pending-background-color: var(--pf-pending-color);
+  --pf-pill-pending-font-color: var(--pf-white-color);
+  --pf-pill-pending-border-color: var(--pf-red-color-350);
 }
 
 .pill {
@@ -121,4 +125,9 @@
     color: var(--pf-pill-secondary-font-color);
     border-color: var(--pf-pill-secondary-border-color);
   }
+  &--pending {
+    background-color: var(--pf-pill-pending-background-color);
+    color: var(--pf-pill-pending-font-color);
+    border-color: var(--pf-pill-pending-border-color);
+  }
 }

package/src/styles/variables/themes/dark.scss

@@ -69,12 +69,14 @@
   --pf-red-color-100: #fae9e9;
   --pf-red-color-200: #f4d7d8;
   --pf-red-color-300: #ebb6b8;
-  --pf-red-color-400: #df8d91;
+  --pf-red-color-350: #f39bb9;
+  --pf-red-color-400: #ef76a0;
   --pf-red-color-500: #ce6068;
   --pf-red-color-600: #b94553;
   --pf-red-color-700: #9b3544;
   --pf-red-color-800: #822f3e;
-  --pf-red-color-900: #702b39;
+  --pf-red-color-850: #702b39;
+  --pf-red-color-900: #510e2b;
   --pf-red-color-950: #3e131b;
 
   //Orange color
@@ -135,7 +137,7 @@
   --pf-purple-color-700: #7a4eb3;
   --pf-purple-color-800: #664196;
   --pf-purple-color-900: #55377b;
-  --pf-purple-color-950: #352253;
+  --pf-purple-color-950: #291a40;
 
   // White color
   --pf-white-color: #ffffff;
@@ -161,6 +163,7 @@
   --pf-neutral-color: var(--pf-gray-color-100);
   --pf-info-color: var(--pf-secondary-color-200);
   --pf-brand-color: var(--pf-secondary-color-550);
+  --pf-pending-color: var(--pf-red-color-900);
 
   --pf-link-color: var(--pf-gray-color-300);
   --pf-link-hover-color: var(--pf-gray-color-100);

package/src/types.ts

@@ -7,7 +7,14 @@ export type PermafrostComponent = {
 
 import { IconSizes, IconName } from './components/icons/types';
 export type { IconSizes, IconName };
-export type SemanticColor = 'primary' | 'secondary' | 'warning' | 'error' | 'success' | 'info';
+export type SemanticColor =
+  | 'primary'
+  | 'secondary'
+  | 'warning'
+  | 'error'
+  | 'success'
+  | 'info'
+  | 'pending';
 import { SelectOption } from './components/forms/select/types';
 export type { SelectOption };