@guardian/stand 0.0.9 → 0.0.11

package/dist/styleD/build/typescript/base/sizing.js

@@ -1,6 +1,7 @@
 const baseSizing = {
   "size-1-px": "1px",
   "size-2-px": "2px",
+  "size-8-px": "8px",
   "size-16-px": "16px",
   "size-18-px": "18px",
   "size-20-px": "20px",
@@ -10,6 +11,7 @@ const baseSizing = {
   "size-48-px": "48px",
   "size-1-rem": "0.0625rem",
   "size-2-rem": "0.125rem",
+  "size-8-rem": "0.5rem",
   "size-16-rem": "1rem",
   "size-18-rem": "1.125rem",
   "size-20-rem": "1.25rem",

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

@@ -0,0 +1,88 @@
+'use strict';
+
+const componentAvatar = {
+  shared: {
+    color: {
+      green: {
+        text: "#24491d",
+        background: "#cde4c9",
+        border: "unset"
+      },
+      blue: {
+        text: "#092f62",
+        background: "#c5d9f4",
+        border: "unset"
+      },
+      red: {
+        text: "#65170e",
+        background: "#f5c6c0",
+        border: "unset"
+      },
+      cyan: {
+        text: "#00344e",
+        background: "#b8d8e7",
+        border: "unset"
+      },
+      teal: {
+        text: "#0e2729",
+        background: "#c5dfe1",
+        border: "unset"
+      },
+      "cool-purple": {
+        text: "#394069",
+        background: "#dbdff7",
+        border: "unset"
+      },
+      "warm-purple": {
+        text: "#381350",
+        background: "#dac3e8",
+        border: "unset"
+      },
+      magenta: {
+        text: "#581734",
+        background: "#edc6d7",
+        border: "unset"
+      },
+      orange: {
+        text: "#693c16",
+        background: "#fcddc6",
+        border: "unset"
+      },
+      yellow: {
+        text: "#5b4a0b",
+        background: "#fbeebf",
+        border: "unset"
+      },
+      outlined: {
+        text: "#000000",
+        background: "none",
+        border: "0.0625rem solid #8d8d8d"
+      }
+    },
+    display: "inline-flex",
+    "align-items": "center",
+    "justify-content": "center",
+    overflow: "hidden",
+    "flex-shrink": "0",
+    "border-radius": "50%",
+    "user-select": "none"
+  },
+  sm: {
+    size: "2rem",
+    typography: {
+      font: "normal 700 0.75rem/1 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  md: {
+    size: "2.5rem",
+    typography: {
+      font: "normal 700 0.875rem/1 Open Sans",
+      letterSpacing: "-0.0125rem",
+      fontWidth: 95
+    }
+  }
+};
+
+exports.componentAvatar = componentAvatar;

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

@@ -0,0 +1,86 @@
+const componentAvatar = {
+  shared: {
+    color: {
+      green: {
+        text: "#24491d",
+        background: "#cde4c9",
+        border: "unset"
+      },
+      blue: {
+        text: "#092f62",
+        background: "#c5d9f4",
+        border: "unset"
+      },
+      red: {
+        text: "#65170e",
+        background: "#f5c6c0",
+        border: "unset"
+      },
+      cyan: {
+        text: "#00344e",
+        background: "#b8d8e7",
+        border: "unset"
+      },
+      teal: {
+        text: "#0e2729",
+        background: "#c5dfe1",
+        border: "unset"
+      },
+      "cool-purple": {
+        text: "#394069",
+        background: "#dbdff7",
+        border: "unset"
+      },
+      "warm-purple": {
+        text: "#381350",
+        background: "#dac3e8",
+        border: "unset"
+      },
+      magenta: {
+        text: "#581734",
+        background: "#edc6d7",
+        border: "unset"
+      },
+      orange: {
+        text: "#693c16",
+        background: "#fcddc6",
+        border: "unset"
+      },
+      yellow: {
+        text: "#5b4a0b",
+        background: "#fbeebf",
+        border: "unset"
+      },
+      outlined: {
+        text: "#000000",
+        background: "none",
+        border: "0.0625rem solid #8d8d8d"
+      }
+    },
+    display: "inline-flex",
+    "align-items": "center",
+    "justify-content": "center",
+    overflow: "hidden",
+    "flex-shrink": "0",
+    "border-radius": "50%",
+    "user-select": "none"
+  },
+  sm: {
+    size: "2rem",
+    typography: {
+      font: "normal 700 0.75rem/1 Open Sans",
+      letterSpacing: "0rem",
+      fontWidth: 95
+    }
+  },
+  md: {
+    size: "2.5rem",
+    typography: {
+      font: "normal 700 0.875rem/1 Open Sans",
+      letterSpacing: "-0.0125rem",
+      fontWidth: 95
+    }
+  }
+};
+
+export { componentAvatar };

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

@@ -0,0 +1,523 @@
+'use strict';
+
+const componentButton = {
+  shared: {
+    display: "inline-flex",
+    "-webkit-appearance": "none",
+    "text-align": "inherit",
+    "box-shadow": "none",
+    cursor: "pointer",
+    "justify-content": "center",
+    "align-items": "center",
+    "text-decoration": "none",
+    ":disabled": {
+      cursor: "not-allowed"
+    },
+    ":focus-visible": {
+      outline: "0.125rem solid #0072a9",
+      "outline-offset": "0.125rem"
+    }
+  },
+  "emphasised-primary": {
+    shared: {
+      color: "#ffffff",
+      backgroundColor: "#0d4289",
+      borderRadius: "0.25rem",
+      border: "0.0625rem solid #0d4289",
+      ":hover": {
+        backgroundColor: "#092f62",
+        border: "0.0625rem solid #092f62"
+      },
+      ":active": {
+        backgroundColor: "#061d3c",
+        border: "0.0625rem solid #061d3c"
+      },
+      ":disabled": {
+        color: "#999999",
+        backgroundColor: "#dcdcdc",
+        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"
+      }
+    }
+  },
+  "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": {
+    shared: {
+      color: "#ffffff",
+      backgroundColor: "#545454",
+      borderRadius: "0.25rem",
+      border: "0.0625rem solid #545454",
+      ":hover": {
+        backgroundColor: "#333333",
+        border: "0.0625rem solid #333333"
+      },
+      ":active": {
+        backgroundColor: "#121212",
+        border: "0.0625rem solid #121212"
+      },
+      ":disabled": {
+        color: "#999999",
+        backgroundColor: "#dcdcdc",
+        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-secondary": {
+    shared: {
+      color: "#000000",
+      backgroundColor: "none",
+      borderRadius: "0.25rem",
+      border: "0.0625rem solid #545454",
+      ":hover": {
+        backgroundColor: "#ededed",
+        border: "0.0625rem solid #545454"
+      },
+      ":active": {
+        backgroundColor: "#dcdcdc",
+        border: "0.0625rem solid #545454"
+      },
+      ":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"
+      }
+    }
+  }
+};
+
+exports.componentButton = componentButton;