@guardian/stand 0.0.16 → 0.0.18

package/dist/styleD/build/typescript/component/avatar.cjs

@@ -6,57 +6,123 @@ const componentAvatar = {
       green: {
         text: "#24491d",
         background: "#cde4c9",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#aed2a6"
+        },
+        ":active": {
+          background: "#8ec183"
+        }
       },
       blue: {
         text: "#092f62",
         background: "#c5d9f4",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#93b9ec"
+        },
+        ":active": {
+          background: "#699ee5"
+        }
       },
       red: {
         text: "#65170e",
         background: "#f5c6c0",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#eea198"
+        },
+        ":active": {
+          background: "#e87c6f"
+        }
       },
       cyan: {
         text: "#00344e",
         background: "#b8d8e7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#8abed7"
+        },
+        ":active": {
+          background: "#5ca5c8"
+        }
       },
       teal: {
         text: "#0e2729",
         background: "#c5dfe1",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#a0cace"
+        },
+        ":active": {
+          background: "#7bb5bb"
+        }
       },
       "cool-purple": {
         text: "#394069",
         background: "#dbdff7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#c3caf3"
+        },
+        ":active": {
+          background: "#acb5ee"
+        }
       },
       "warm-purple": {
         text: "#381350",
         background: "#dac3e8",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#c29dd9"
+        },
+        ":active": {
+          background: "#aa76cb"
+        }
       },
       magenta: {
         text: "#581734",
         background: "#edc6d7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#e2a1be"
+        },
+        ":active": {
+          background: "#d67ca4"
+        }
       },
       orange: {
         text: "#693c16",
         background: "#fcddc6",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#fac7a1"
+        },
+        ":active": {
+          background: "#f9b27c"
+        }
       },
       yellow: {
         text: "#5b4a0b",
         background: "#fbeebf",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#f9e396"
+        },
+        ":active": {
+          background: "#f6d86d"
+        }
       },
       outlined: {
         text: "#000000",
         background: "none",
-        border: "0.0625rem solid #8d8d8d"
+        border: "0.0625rem solid #8d8d8d",
+        ":hover": {
+          background: "#ededed"
+        },
+        ":active": {
+          background: "#dcdcdc"
+        }
       }
     },
     display: "inline-flex",
@@ -65,7 +131,24 @@ const componentAvatar = {
     overflow: "hidden",
     "flex-shrink": "0",
     "border-radius": "50%",
-    "user-select": "none"
+    "user-select": "none",
+    link: {
+      width: "fit-content",
+      ":focus-visible": {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0.125rem"
+      },
+      "text-decoration": "none"
+    },
+    button: {
+      background: "none",
+      border: "none",
+      padding: "0",
+      cursor: "pointer",
+      ":disabled": {
+        cursor: "not-allowed"
+      }
+    }
   },
   sm: {
     size: "2rem",

package/dist/styleD/build/typescript/component/avatar.js

@@ -4,57 +4,123 @@ const componentAvatar = {
       green: {
         text: "#24491d",
         background: "#cde4c9",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#aed2a6"
+        },
+        ":active": {
+          background: "#8ec183"
+        }
       },
       blue: {
         text: "#092f62",
         background: "#c5d9f4",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#93b9ec"
+        },
+        ":active": {
+          background: "#699ee5"
+        }
       },
       red: {
         text: "#65170e",
         background: "#f5c6c0",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#eea198"
+        },
+        ":active": {
+          background: "#e87c6f"
+        }
       },
       cyan: {
         text: "#00344e",
         background: "#b8d8e7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#8abed7"
+        },
+        ":active": {
+          background: "#5ca5c8"
+        }
       },
       teal: {
         text: "#0e2729",
         background: "#c5dfe1",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#a0cace"
+        },
+        ":active": {
+          background: "#7bb5bb"
+        }
       },
       "cool-purple": {
         text: "#394069",
         background: "#dbdff7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#c3caf3"
+        },
+        ":active": {
+          background: "#acb5ee"
+        }
       },
       "warm-purple": {
         text: "#381350",
         background: "#dac3e8",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#c29dd9"
+        },
+        ":active": {
+          background: "#aa76cb"
+        }
       },
       magenta: {
         text: "#581734",
         background: "#edc6d7",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#e2a1be"
+        },
+        ":active": {
+          background: "#d67ca4"
+        }
       },
       orange: {
         text: "#693c16",
         background: "#fcddc6",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#fac7a1"
+        },
+        ":active": {
+          background: "#f9b27c"
+        }
       },
       yellow: {
         text: "#5b4a0b",
         background: "#fbeebf",
-        border: "unset"
+        border: "unset",
+        ":hover": {
+          background: "#f9e396"
+        },
+        ":active": {
+          background: "#f6d86d"
+        }
       },
       outlined: {
         text: "#000000",
         background: "none",
-        border: "0.0625rem solid #8d8d8d"
+        border: "0.0625rem solid #8d8d8d",
+        ":hover": {
+          background: "#ededed"
+        },
+        ":active": {
+          background: "#dcdcdc"
+        }
       }
     },
     display: "inline-flex",
@@ -63,7 +129,24 @@ const componentAvatar = {
     overflow: "hidden",
     "flex-shrink": "0",
     "border-radius": "50%",
-    "user-select": "none"
+    "user-select": "none",
+    link: {
+      width: "fit-content",
+      ":focus-visible": {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "0.125rem"
+      },
+      "text-decoration": "none"
+    },
+    button: {
+      background: "none",
+      border: "none",
+      padding: "0",
+      cursor: "pointer",
+      ":disabled": {
+        cursor: "not-allowed"
+      }
+    }
   },
   sm: {
     size: "2rem",

package/dist/styleD/build/typescript/component/button.cjs

@@ -18,7 +18,7 @@ const componentButton = {
       "outline-offset": "0.125rem"
     }
   },
-  "emphasised-primary": {
+  primary: {
     shared: {
       color: "#ffffff",
       backgroundColor: "#0d4289",
@@ -143,132 +143,7 @@ const componentButton = {
       }
     }
   },
-  "emphasised-secondary": {
-    shared: {
-      color: "#000000",
-      backgroundColor: "none",
-      borderRadius: "0.25rem",
-      border: "0.0625rem solid #0d4289",
-      ":hover": {
-        backgroundColor: "#e8f0fb",
-        border: "0.0625rem solid #0d4289"
-      },
-      ":active": {
-        backgroundColor: "#c5d9f4",
-        border: "0.0625rem solid #0d4289"
-      },
-      ":disabled": {
-        color: "#999999",
-        backgroundColor: "none",
-        border: "0.0625rem solid #dcdcdc"
-      }
-    },
-    xs: {
-      height: "1.5rem",
-      padding: {
-        top: "0.25rem",
-        right: "0.5rem",
-        bottom: "0.25rem",
-        left: "0.5rem",
-        withIcon: {
-          iconLeft: {
-            left: "0.25rem"
-          }
-        }
-      },
-      typography: {
-        font: "normal 700 0.75rem/1 Open Sans",
-        letterSpacing: "0rem",
-        fontWidth: 95
-      },
-      icon: {
-        size: "1.125rem",
-        gap: "0.25rem"
-      },
-      iconButton: {
-        width: "1.5rem"
-      }
-    },
-    sm: {
-      height: "2rem",
-      padding: {
-        top: "0.25rem",
-        right: "0.625rem",
-        bottom: "0.25rem",
-        left: "0.625rem",
-        withIcon: {
-          iconLeft: {
-            left: "0.5rem"
-          }
-        }
-      },
-      typography: {
-        font: "normal 700 0.875rem/1 Open Sans",
-        letterSpacing: "-0.0125rem",
-        fontWidth: 95
-      },
-      icon: {
-        size: "1.125rem",
-        gap: "0.25rem"
-      },
-      iconButton: {
-        width: "2rem"
-      }
-    },
-    md: {
-      height: "2.5rem",
-      padding: {
-        top: "0.25rem",
-        right: "0.75rem",
-        bottom: "0.25rem",
-        left: "0.75rem",
-        withIcon: {
-          iconLeft: {
-            left: "0.5rem"
-          }
-        }
-      },
-      typography: {
-        font: "normal 700 0.875rem/1 Open Sans",
-        letterSpacing: "-0.0125rem",
-        fontWidth: 95
-      },
-      icon: {
-        size: "1.25rem",
-        gap: "0.25rem"
-      },
-      iconButton: {
-        width: "2.5rem"
-      }
-    },
-    lg: {
-      height: "3rem",
-      padding: {
-        top: "0.25rem",
-        right: "1rem",
-        bottom: "0.25rem",
-        left: "1rem",
-        withIcon: {
-          iconLeft: {
-            left: "0.75rem"
-          }
-        }
-      },
-      typography: {
-        font: "normal 700 1rem/1 Open Sans",
-        letterSpacing: "-0.0125rem",
-        fontWidth: 95
-      },
-      icon: {
-        size: "1.5rem",
-        gap: "0.25rem"
-      },
-      iconButton: {
-        width: "3rem"
-      }
-    }
-  },
-  "neutral-primary": {
+  secondary: {
     shared: {
       color: "#ffffff",
       backgroundColor: "#545454",
@@ -393,18 +268,18 @@ const componentButton = {
       }
     }
   },
-  "neutral-secondary": {
+  tertiary: {
     shared: {
       color: "#000000",
       backgroundColor: "none",
       borderRadius: "0.25rem",
       border: "0.0625rem solid #545454",
       ":hover": {
-        backgroundColor: "#ededed",
+        backgroundColor: "#f6f6f6",
         border: "0.0625rem solid #545454"
       },
       ":active": {
-        backgroundColor: "#dcdcdc",
+        backgroundColor: "#ededed",
         border: "0.0625rem solid #545454"
       },
       ":disabled": {

package/dist/styleD/build/typescript/component/button.js

@@ -16,7 +16,7 @@ const componentButton = {
       "outline-offset": "0.125rem"
     }
   },
-  "emphasised-primary": {
+  primary: {
     shared: {
       color: "#ffffff",
       backgroundColor: "#0d4289",
@@ -141,132 +141,7 @@ const componentButton = {
       }
     }
   },
-  "emphasised-secondary": {
-    shared: {
-      color: "#000000",
-      backgroundColor: "none",
-      borderRadius: "0.25rem",
-      border: "0.0625rem solid #0d4289",
-      ":hover": {
-        backgroundColor: "#e8f0fb",
-        border: "0.0625rem solid #0d4289"
-      },
-      ":active": {
-        backgroundColor: "#c5d9f4",
-        border: "0.0625rem solid #0d4289"
-      },
-      ":disabled": {
-        color: "#999999",
-        backgroundColor: "none",
-        border: "0.0625rem solid #dcdcdc"
-      }
-    },
-    xs: {
-      height: "1.5rem",
-      padding: {
-        top: "0.25rem",
-        right: "0.5rem",
-        bottom: "0.25rem",
-        left: "0.5rem",
-        withIcon: {
-          iconLeft: {
-            left: "0.25rem"
-          }
-        }
-      },
-      typography: {
-        font: "normal 700 0.75rem/1 Open Sans",
-        letterSpacing: "0rem",
-        fontWidth: 95
-      },
-      icon: {
-        size: "1.125rem",
-        gap: "0.25rem"
-      },
-      iconButton: {
-        width: "1.5rem"
-      }
-    },
-    sm: {
-      height: "2rem",
-      padding: {
-        top: "0.25rem",
-        right: "0.625rem",
-        bottom: "0.25rem",
-        left: "0.625rem",
-        withIcon: {
-          iconLeft: {
-            left: "0.5rem"
-          }
-        }
-      },
-      typography: {
-        font: "normal 700 0.875rem/1 Open Sans",
-        letterSpacing: "-0.0125rem",
-        fontWidth: 95
-      },
-      icon: {
-        size: "1.125rem",
-        gap: "0.25rem"
-      },
-      iconButton: {
-        width: "2rem"
-      }
-    },
-    md: {
-      height: "2.5rem",
-      padding: {
-        top: "0.25rem",
-        right: "0.75rem",
-        bottom: "0.25rem",
-        left: "0.75rem",
-        withIcon: {
-          iconLeft: {
-            left: "0.5rem"
-          }
-        }
-      },
-      typography: {
-        font: "normal 700 0.875rem/1 Open Sans",
-        letterSpacing: "-0.0125rem",
-        fontWidth: 95
-      },
-      icon: {
-        size: "1.25rem",
-        gap: "0.25rem"
-      },
-      iconButton: {
-        width: "2.5rem"
-      }
-    },
-    lg: {
-      height: "3rem",
-      padding: {
-        top: "0.25rem",
-        right: "1rem",
-        bottom: "0.25rem",
-        left: "1rem",
-        withIcon: {
-          iconLeft: {
-            left: "0.75rem"
-          }
-        }
-      },
-      typography: {
-        font: "normal 700 1rem/1 Open Sans",
-        letterSpacing: "-0.0125rem",
-        fontWidth: 95
-      },
-      icon: {
-        size: "1.5rem",
-        gap: "0.25rem"
-      },
-      iconButton: {
-        width: "3rem"
-      }
-    }
-  },
-  "neutral-primary": {
+  secondary: {
     shared: {
       color: "#ffffff",
       backgroundColor: "#545454",
@@ -391,18 +266,18 @@ const componentButton = {
       }
     }
   },
-  "neutral-secondary": {
+  tertiary: {
     shared: {
       color: "#000000",
       backgroundColor: "none",
       borderRadius: "0.25rem",
       border: "0.0625rem solid #545454",
       ":hover": {
-        backgroundColor: "#ededed",
+        backgroundColor: "#f6f6f6",
         border: "0.0625rem solid #545454"
       },
       ":active": {
-        backgroundColor: "#dcdcdc",
+        backgroundColor: "#ededed",
         border: "0.0625rem solid #545454"
       },
       ":disabled": {

package/dist/styleD/build/typescript/component/inlineMessage.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+const componentInlineMessage = {
+  shared: {
+    display: "inline-flex",
+    gap: "0.25rem",
+    "align-items": "center",
+    icon: {
+      size: "1.25rem"
+    },
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  error: {
+    color: "#8c2113"
+  },
+  success: {
+    color: "#326528"
+  },
+  information: {
+    color: "#00344e"
+  }
+};
+
+exports.componentInlineMessage = componentInlineMessage;

package/dist/styleD/build/typescript/component/inlineMessage.js

@@ -0,0 +1,26 @@
+const componentInlineMessage = {
+  shared: {
+    display: "inline-flex",
+    gap: "0.25rem",
+    "align-items": "center",
+    icon: {
+      size: "1.25rem"
+    },
+    typography: {
+      font: "normal 460 0.875rem/1.3 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  error: {
+    color: "#8c2113"
+  },
+  success: {
+    color: "#326528"
+  },
+  information: {
+    color: "#00344e"
+  }
+};
+
+export { componentInlineMessage };