@guardian/stand 0.0.8 → 0.0.10

package/dist/styleD/build/typescript/base/spacing.cjs

@@ -3,7 +3,9 @@
 const baseSpacing = {
   "2-px": "2px",
   "4-px": "4px",
+  "6-px": "6px",
   "8-px": "8px",
+  "10-px": "10px",
   "12-px": "12px",
   "16-px": "16px",
   "20-px": "20px",
@@ -18,7 +20,9 @@ const baseSpacing = {
   "96-px": "96px",
   "2-rem": "0.125rem",
   "4-rem": "0.25rem",
+  "6-rem": "0.375rem",
   "8-rem": "0.5rem",
+  "10-rem": "0.625rem",
   "12-rem": "0.75rem",
   "16-rem": "1rem",
   "20-rem": "1.25rem",

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

@@ -1,7 +1,9 @@
 const baseSpacing = {
   "2-px": "2px",
   "4-px": "4px",
+  "6-px": "6px",
   "8-px": "8px",
+  "10-px": "10px",
   "12-px": "12px",
   "16-px": "16px",
   "20-px": "20px",
@@ -16,7 +18,9 @@ const baseSpacing = {
   "96-px": "96px",
   "2-rem": "0.125rem",
   "4-rem": "0.25rem",
+  "6-rem": "0.375rem",
   "8-rem": "0.5rem",
+  "10-rem": "0.625rem",
   "12-rem": "0.75rem",
   "16-rem": "1rem",
   "20-rem": "1.25rem",

package/dist/styleD/build/typescript/base/typography.cjs

@@ -63,7 +63,8 @@ const baseTypography = {
   "line-height": {
     tight: 1.15,
     normal: 1.3,
-    loose: 1.4
+    loose: 1.4,
+    interactive: 1
   },
   "letter-spacing": {
     "densest-px": "-1px",

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

@@ -61,7 +61,8 @@ const baseTypography = {
   "line-height": {
     tight: 1.15,
     normal: 1.3,
-    loose: 1.4
+    loose: 1.4,
+    interactive: 1
   },
   "letter-spacing": {
     "densest-px": "-1px",

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,331 @@
+'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"
+      },
+      typography: {
+        font: "normal 700 0.75rem/1 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      }
+    },
+    sm: {
+      height: "2rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.625rem",
+        bottom: "0.25rem",
+        left: "0.625rem"
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    },
+    md: {
+      height: "2.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.75rem",
+        bottom: "0.25rem",
+        left: "0.75rem"
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    },
+    lg: {
+      height: "3rem",
+      padding: {
+        top: "0.25rem",
+        right: "1rem",
+        bottom: "0.25rem",
+        left: "1rem"
+      },
+      typography: {
+        font: "normal 700 1rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    }
+  },
+  "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"
+      },
+      typography: {
+        font: "normal 700 0.75rem/1 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      }
+    },
+    sm: {
+      height: "2rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.625rem",
+        bottom: "0.25rem",
+        left: "0.625rem"
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    },
+    md: {
+      height: "2.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.75rem",
+        bottom: "0.25rem",
+        left: "0.75rem"
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    },
+    lg: {
+      height: "3rem",
+      padding: {
+        top: "0.25rem",
+        right: "1rem",
+        bottom: "0.25rem",
+        left: "1rem"
+      },
+      typography: {
+        font: "normal 700 1rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    }
+  },
+  "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"
+      },
+      typography: {
+        font: "normal 700 0.75rem/1 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      }
+    },
+    sm: {
+      height: "2rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.625rem",
+        bottom: "0.25rem",
+        left: "0.625rem"
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    },
+    md: {
+      height: "2.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.75rem",
+        bottom: "0.25rem",
+        left: "0.75rem"
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    },
+    lg: {
+      height: "3rem",
+      padding: {
+        top: "0.25rem",
+        right: "1rem",
+        bottom: "0.25rem",
+        left: "1rem"
+      },
+      typography: {
+        font: "normal 700 1rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    }
+  },
+  "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"
+      },
+      typography: {
+        font: "normal 700 0.75rem/1 Open Sans",
+        letterSpacing: "0rem",
+        fontWidth: 95
+      }
+    },
+    sm: {
+      height: "2rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.625rem",
+        bottom: "0.25rem",
+        left: "0.625rem"
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    },
+    md: {
+      height: "2.5rem",
+      padding: {
+        top: "0.25rem",
+        right: "0.75rem",
+        bottom: "0.25rem",
+        left: "0.75rem"
+      },
+      typography: {
+        font: "normal 700 0.875rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    },
+    lg: {
+      height: "3rem",
+      padding: {
+        top: "0.25rem",
+        right: "1rem",
+        bottom: "0.25rem",
+        left: "1rem"
+      },
+      typography: {
+        font: "normal 700 1rem/1 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    }
+  }
+};
+
+exports.componentButton = componentButton;