@iress-oss/ids-components 6.0.0-alpha.28 → 6.0.0-alpha.29

package/dist/components/Pill/Pill.d.ts

@@ -6,11 +6,11 @@ export interface IressPillProps extends IressStyledProps<'span'> {
      */
     children?: ReactNode;
     /**
-     * Style of the badge, based on the data colour palette.
-     * Can be a number (10-90) or a string ('10'-'90').
+     * Style of the badge, based on the data colour palette (10-90) or system status colours (danger, info, success, warning).
+     * Can be a number (10-90), a string ('10'-'90'), or a system status ('danger', 'info', 'success', 'warning').
      * @default '90'
      */
-    mode?: 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90';
+    mode?: 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90 | '10' | '20' | '30' | '40' | '50' | '60' | '70' | '80' | '90' | 'danger' | 'info' | 'success' | 'warning';
 }
 export declare const IressPill: {
     ({ children, mode, className, ...restProps }: IressPillProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Pill/Pill.styles.d.ts

@@ -36,5 +36,21 @@ export declare const pill: import('../../styled-system/types').RecipeRuntimeFn<{
             bg: "colour.data.bold.90";
             color: "colour.data.subtle.90";
         };
+        danger: {
+            bg: "colour.system.danger.fill";
+            color: "colour.system.danger.onFill";
+        };
+        info: {
+            bg: "colour.system.info.fill";
+            color: "colour.system.info.onFill";
+        };
+        success: {
+            bg: "colour.system.success.fill";
+            color: "colour.system.success.onFill";
+        };
+        warning: {
+            bg: "colour.system.warning.fill";
+            color: "colour.system.warning.onFill";
+        };
     };
 }>;

package/dist/components/Pill/Pill.styles.js

@@ -14,7 +14,8 @@ const a = o({
     textDecoration: "none",
     minHeight: "[1.35em]",
     minWidth: "[1.5em]",
-    p: "spacing.1",
+    py: "spacing.1",
+    px: "spacing.2",
     verticalAlign: "middle"
   },
   variants: {
@@ -54,6 +55,22 @@ const a = o({
       90: {
         bg: "colour.data.bold.90",
         color: "colour.data.subtle.90"
+      },
+      danger: {
+        bg: "colour.system.danger.fill",
+        color: "colour.system.danger.onFill"
+      },
+      info: {
+        bg: "colour.system.info.fill",
+        color: "colour.system.info.onFill"
+      },
+      success: {
+        bg: "colour.system.success.fill",
+        color: "colour.system.success.onFill"
+      },
+      warning: {
+        bg: "colour.system.warning.fill",
+        color: "colour.system.warning.onFill"
       }
     }
   },

package/dist/patterns/Shadow/Shadow.js

@@ -2331,10 +2331,6 @@ const k = `@layer reset, base, tokens, recipes, utilities;
     padding: var(--spacing-lg);
 }
 
-  .p_spacing\\.1 {
-    padding: var(--spacing-spacing\\.1);
-}
-
   .bg_colour\\.data\\.bold\\.10 {
     background: var(--colors-colour\\.data\\.bold\\.10);
 }
@@ -2371,6 +2367,14 @@ const k = `@layer reset, base, tokens, recipes, utilities;
     background: var(--colors-colour\\.data\\.bold\\.90);
 }
 
+  .bg_colour\\.system\\.info\\.fill {
+    background: var(--colors-colour\\.system\\.info\\.fill);
+}
+
+  .bg_colour\\.system\\.warning\\.fill {
+    background: var(--colors-colour\\.system\\.warning\\.fill);
+}
+
   .bg_colour\\.data\\.subtle\\.50 {
     background: var(--colors-colour\\.data\\.subtle\\.50);
 }
@@ -2415,6 +2419,10 @@ const k = `@layer reset, base, tokens, recipes, utilities;
     padding: var(--spacing-spacing\\.5);
 }
 
+  .p_spacing\\.1 {
+    padding: var(--spacing-spacing\\.1);
+}
+
   .bg_colour\\.data\\.subtle\\.10 {
     background: var(--colors-colour\\.data\\.subtle\\.10);
 }
@@ -2703,10 +2711,6 @@ const k = `@layer reset, base, tokens, recipes, utilities;
     background: var(--colors-colour\\.system\\.danger\\.text);
 }
 
-  .bg_colour\\.system\\.warning\\.fill {
-    background: var(--colors-colour\\.system\\.warning\\.fill);
-}
-
   .bg_colour\\.system\\.warning\\.onFill {
     background: var(--colors-colour\\.system\\.warning\\.on-fill);
 }
@@ -2723,10 +2727,6 @@ const k = `@layer reset, base, tokens, recipes, utilities;
     background: var(--colors-colour\\.system\\.warning\\.surface-hover);
 }
 
-  .bg_colour\\.system\\.info\\.fill {
-    background: var(--colors-colour\\.system\\.info\\.fill);
-}
-
   .bg_colour\\.system\\.info\\.onFill {
     background: var(--colors-colour\\.system\\.info\\.on-fill);
 }
@@ -4432,6 +4432,14 @@ const k = `@layer reset, base, tokens, recipes, utilities;
     color: var(--colors-colour\\.data\\.subtle\\.90);
 }
 
+  .c_colour\\.system\\.info\\.onFill {
+    color: var(--colors-colour\\.system\\.info\\.on-fill);
+}
+
+  .c_colour\\.system\\.warning\\.onFill {
+    color: var(--colors-colour\\.system\\.warning\\.on-fill);
+}
+
   .c_colour\\.data\\.bold\\.50 {
     color: var(--colors-colour\\.data\\.bold\\.50);
 }
@@ -5344,10 +5352,6 @@ const k = `@layer reset, base, tokens, recipes, utilities;
     color: var(--colors-colour\\.system\\.warning\\.fill);
 }
 
-  .c_colour\\.system\\.warning\\.onFill {
-    color: var(--colors-colour\\.system\\.warning\\.on-fill);
-}
-
   .c_colour\\.system\\.warning\\.fillHover {
     color: var(--colors-colour\\.system\\.warning\\.fill-hover);
 }
@@ -5364,10 +5368,6 @@ const k = `@layer reset, base, tokens, recipes, utilities;
     color: var(--colors-colour\\.system\\.info\\.fill);
 }
 
-  .c_colour\\.system\\.info\\.onFill {
-    color: var(--colors-colour\\.system\\.info\\.on-fill);
-}
-
   .c_colour\\.system\\.info\\.fillHover {
     color: var(--colors-colour\\.system\\.info\\.fill-hover);
 }