@guardian/stand 0.0.9 → 0.0.10

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

@@ -0,0 +1,329 @@
+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
+      }
+    }
+  }
+};
+
+export { componentButton };

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

@@ -16,7 +16,7 @@ const componentByline = {
     borderRadius: "8px",
     paddingX: "4px",
     paddingY: "2px",
-    selectedBorderColor: "#bdd4f4",
+    selectedBorderColor: "#c5d9f4",
     taggedBackgroundColor: "#dcdcdc",
     untaggedColor: "#000000"
   },

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

@@ -14,7 +14,7 @@ const componentByline = {
     borderRadius: "8px",
     paddingX: "4px",
     paddingY: "2px",
-    selectedBorderColor: "#bdd4f4",
+    selectedBorderColor: "#c5d9f4",
     taggedBackgroundColor: "#dcdcdc",
     untaggedColor: "#000000"
   },

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

@@ -0,0 +1,19 @@
+'use strict';
+
+const componentIcon = {
+  shared: {
+    display: "inline-flex",
+    "user-select": "none"
+  },
+  sm: {
+    size: "1.125rem"
+  },
+  md: {
+    size: "1.25rem"
+  },
+  lg: {
+    size: "1.5rem"
+  }
+};
+
+exports.componentIcon = componentIcon;

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

@@ -0,0 +1,17 @@
+const componentIcon = {
+  shared: {
+    display: "inline-flex",
+    "user-select": "none"
+  },
+  sm: {
+    size: "1.125rem"
+  },
+  md: {
+    size: "1.25rem"
+  },
+  lg: {
+    size: "1.5rem"
+  }
+};
+
+export { componentIcon };

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

@@ -0,0 +1,7 @@
+'use strict';
+
+const componentTypography = {
+  color: "#000000"
+};
+
+exports.componentTypography = componentTypography;

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

@@ -0,0 +1,5 @@
+const componentTypography = {
+  color: "#000000"
+};
+
+export { componentTypography };

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

@@ -0,0 +1,37 @@
+'use strict';
+
+const componentUserMenu = {
+  container: {
+    backgroundColor: "#dcdcdc",
+    width: "300px",
+    paddingY: "0.25rem",
+    paddingX: "0.25rem"
+  },
+  heading: {
+    fontWeight: 700,
+    fontSize: "1.125rem",
+    paddingTop: "0px",
+    paddingRight: "0px",
+    paddingBottom: "0px",
+    paddingLeft: "0px",
+    textAlign: "left"
+  },
+  label: {
+    fontWeight: 700,
+    fontSize: "0.875rem",
+    paddingTop: "15px",
+    paddingRight: "0px",
+    paddingBottom: "0.375rem",
+    paddingLeft: "0px",
+    textAlign: "left"
+  },
+  toggleButton: {
+    baseBackgroundColor: "#ededed",
+    disabledBackgroundColor: "#dcdcdc",
+    baseBorderColor: "#dcdcdc",
+    selectedBorderColor: "#0d4289",
+    gap: "0.25rem"
+  }
+};
+
+exports.componentUserMenu = componentUserMenu;

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

@@ -0,0 +1,35 @@
+const componentUserMenu = {
+  container: {
+    backgroundColor: "#dcdcdc",
+    width: "300px",
+    paddingY: "0.25rem",
+    paddingX: "0.25rem"
+  },
+  heading: {
+    fontWeight: 700,
+    fontSize: "1.125rem",
+    paddingTop: "0px",
+    paddingRight: "0px",
+    paddingBottom: "0px",
+    paddingLeft: "0px",
+    textAlign: "left"
+  },
+  label: {
+    fontWeight: 700,
+    fontSize: "0.875rem",
+    paddingTop: "15px",
+    paddingRight: "0px",
+    paddingBottom: "0.375rem",
+    paddingLeft: "0px",
+    textAlign: "left"
+  },
+  toggleButton: {
+    baseBackgroundColor: "#ededed",
+    disabledBackgroundColor: "#dcdcdc",
+    baseBorderColor: "#dcdcdc",
+    selectedBorderColor: "#0d4289",
+    gap: "0.25rem"
+  }
+};
+
+export { componentUserMenu };

package/dist/styleD/build/typescript/semantic/colors.cjs

@@ -25,8 +25,9 @@ const semanticColors = {
     "interactive-disabled": "#999999"
   },
   bg: {
-    "default-onDark": "#121212",
-    "default-onLight": "#ffffff"
+    base: "#ffffff",
+    "raised-1": "#f6f6f6",
+    "raised-2": "#ededed"
   },
   surface: {
     "light-1": "#f6f6f6",
@@ -34,14 +35,16 @@ const semanticColors = {
     "dark-1": "#333333"
   },
   border: {
-    subtle: "#cccccc",
     default: "#8d8d8d",
+    secondary: "#cccccc",
+    tertiary: "#ededed",
     strong: "#545454",
     "inverse-strong": "#ffffff",
     "interactive-emphasised": "#0d4289",
     "interactive-neutral": "#545454",
     "interactive-disabled": "#dcdcdc",
-    "interactive-focused": "#0072a9"
+    "interactive-focused": "#0072a9",
+    "interactive-selected": "#0072a9"
   },
   status: {
     "status-draft": "#f1c21b",
@@ -52,17 +55,17 @@ const semanticColors = {
   fill: {
     "interactive-primary-emphasised": "#0d4289",
     "interactive-primary-emphasised-hover": "#092f62",
-    "interactive-primary-emphasised-pressed": "#092f62",
+    "interactive-primary-emphasised-pressed": "#061d3c",
     "interactive-secondary-emphasised-hover": "#e8f0fb",
-    "interactive-secondary-emphasised-pressed": "#e8f0fb",
+    "interactive-secondary-emphasised-pressed": "#c5d9f4",
     "interactive-primary-neutral": "#545454",
     "interactive-primary-neutral-hover": "#333333",
-    "interactive-primary-neutral-pressed": "#333333",
+    "interactive-primary-neutral-pressed": "#121212",
     "interactive-secondary-neutral-hover": "#ededed",
-    "interactive-secondary-neutral-pressed": "#ededed",
+    "interactive-secondary-neutral-pressed": "#dcdcdc",
     "interactive-disabled": "#dcdcdc",
     "green-subtle": "#cde4c9",
-    "blue-subtle": "#bdd4f4",
+    "blue-subtle": "#c5d9f4",
     "red-subtle": "#f5c6c0",
     "cyan-subtle": "#b8d8e7",
     "teal-subtle": "#c5dfe1",
@@ -70,7 +73,8 @@ const semanticColors = {
     "warm-purple-subtle": "#dac3e8",
     "magenta-subtle": "#edc6d7",
     "orange-subtle": "#fcddc6",
-    "yellow-subtle": "#fbeebf"
+    "yellow-subtle": "#fbeebf",
+    selected: "#005d8b"
   }
 };
 

package/dist/styleD/build/typescript/semantic/colors.js

@@ -23,8 +23,9 @@ const semanticColors = {
     "interactive-disabled": "#999999"
   },
   bg: {
-    "default-onDark": "#121212",
-    "default-onLight": "#ffffff"
+    base: "#ffffff",
+    "raised-1": "#f6f6f6",
+    "raised-2": "#ededed"
   },
   surface: {
     "light-1": "#f6f6f6",
@@ -32,14 +33,16 @@ const semanticColors = {
     "dark-1": "#333333"
   },
   border: {
-    subtle: "#cccccc",
     default: "#8d8d8d",
+    secondary: "#cccccc",
+    tertiary: "#ededed",
     strong: "#545454",
     "inverse-strong": "#ffffff",
     "interactive-emphasised": "#0d4289",
     "interactive-neutral": "#545454",
     "interactive-disabled": "#dcdcdc",
-    "interactive-focused": "#0072a9"
+    "interactive-focused": "#0072a9",
+    "interactive-selected": "#0072a9"
   },
   status: {
     "status-draft": "#f1c21b",
@@ -50,17 +53,17 @@ const semanticColors = {
   fill: {
     "interactive-primary-emphasised": "#0d4289",
     "interactive-primary-emphasised-hover": "#092f62",
-    "interactive-primary-emphasised-pressed": "#092f62",
+    "interactive-primary-emphasised-pressed": "#061d3c",
     "interactive-secondary-emphasised-hover": "#e8f0fb",
-    "interactive-secondary-emphasised-pressed": "#e8f0fb",
+    "interactive-secondary-emphasised-pressed": "#c5d9f4",
     "interactive-primary-neutral": "#545454",
     "interactive-primary-neutral-hover": "#333333",
-    "interactive-primary-neutral-pressed": "#333333",
+    "interactive-primary-neutral-pressed": "#121212",
     "interactive-secondary-neutral-hover": "#ededed",
-    "interactive-secondary-neutral-pressed": "#ededed",
+    "interactive-secondary-neutral-pressed": "#dcdcdc",
     "interactive-disabled": "#dcdcdc",
     "green-subtle": "#cde4c9",
-    "blue-subtle": "#bdd4f4",
+    "blue-subtle": "#c5d9f4",
     "red-subtle": "#f5c6c0",
     "cyan-subtle": "#b8d8e7",
     "teal-subtle": "#c5dfe1",
@@ -68,7 +71,8 @@ const semanticColors = {
     "warm-purple-subtle": "#dac3e8",
     "magenta-subtle": "#edc6d7",
     "orange-subtle": "#fcddc6",
-    "yellow-subtle": "#fbeebf"
+    "yellow-subtle": "#fbeebf",
+    selected: "#005d8b"
   }
 };
 

package/dist/styleD/build/typescript/semantic/sizing.cjs

@@ -14,7 +14,8 @@ const semanticSizing = {
   },
   border: {
     default: "0.0625rem",
-    md: "0.125rem"
+    md: "0.125rem",
+    "extra-wide": "0.5rem"
   }
 };
 

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

@@ -12,7 +12,8 @@ const semanticSizing = {
   },
   border: {
     default: "0.0625rem",
-    md: "0.125rem"
+    md: "0.125rem",
+    "extra-wide": "0.5rem"
   }
 };
 

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

@@ -200,6 +200,11 @@ const semanticTypography = {
     font: "normal 700 0.875rem/1 Open Sans",
     letterSpacing: "-0.0125rem",
     fontWidth: 95
+  },
+  "interactive-md": {
+    font: "normal 700 1rem/1 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 95
   }
 };
 

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

@@ -198,6 +198,11 @@ const semanticTypography = {
     font: "normal 700 0.875rem/1 Open Sans",
     letterSpacing: "-0.0125rem",
     fontWidth: 95
+  },
+  "interactive-md": {
+    font: "normal 700 1rem/1 Open Sans",
+    letterSpacing: "-0.0125rem",
+    fontWidth: 95
   }
 };
 

package/dist/types/avatar.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Avatar component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/avatar.css),
+ * you don't need to install these.
+ */
+export { Avatar } from './components/avatar/Avatar';
+export type { AvatarProps } from './components/avatar/types';
+export type { AvatarTheme } from './components/avatar/styles';
+export { componentAvatar } from './styleD/build/typescript/component/avatar';
+export type { ComponentAvatar } from './styleD/build/typescript/component/avatar';

package/dist/types/button.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Button component entry point
+ *
+ * Peer dependencies required to use these components:
+ * - `@emotion/react`
+ * - `react`
+ * - `react-dom`
+ * - `react-aria-components`
+ * - `typescript`
+ *
+ * See the `peerDependencies` section of package.json for compatible versions.
+ *
+ * If you only need the built CSS (./component/button.css),
+ * you don't need to install these.
+ */
+export { Button } from './components/button/Button';
+export type { ButtonProps } from './components/button/types';
+export type { ButtonTheme } from './components/button/styles';
+export { componentButton } from './styleD/build/typescript/component/button';
+export type { ComponentButton } from './styleD/build/typescript/component/button';