@guardian/stand 0.0.8 → 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

@@ -11,11 +11,23 @@ const semanticColors = {
     warning: "#433608",
     success: "#326528",
     information: "#00344e",
-    disabled: "#999999"
+    disabled: "#999999",
+    green: "#24491d",
+    blue: "#092f62",
+    red: "#65170e",
+    cyan: "#00344e",
+    teal: "#0e2729",
+    "cool-purple": "#394069",
+    "warm-purple": "#381350",
+    magenta: "#581734",
+    orange: "#693c16",
+    yellow: "#5b4a0b",
+    "interactive-disabled": "#999999"
   },
   bg: {
-    "default-onDark": "#121212",
-    "default-onLight": "#ffffff"
+    base: "#ffffff",
+    "raised-1": "#f6f6f6",
+    "raised-2": "#ededed"
   },
   surface: {
     "light-1": "#f6f6f6",
@@ -23,16 +35,46 @@ const semanticColors = {
     "dark-1": "#333333"
   },
   border: {
-    subtle: "#cccccc",
     default: "#8d8d8d",
+    secondary: "#cccccc",
+    tertiary: "#ededed",
     strong: "#545454",
-    "inverse-strong": "#ffffff"
+    "inverse-strong": "#ffffff",
+    "interactive-emphasised": "#0d4289",
+    "interactive-neutral": "#545454",
+    "interactive-disabled": "#dcdcdc",
+    "interactive-focused": "#0072a9",
+    "interactive-selected": "#0072a9"
   },
   status: {
     "status-draft": "#f1c21b",
     "status-live": "#4e9e3e",
     "status-selected": "#0072a9",
     "status-focused": "#0072a9"
+  },
+  fill: {
+    "interactive-primary-emphasised": "#0d4289",
+    "interactive-primary-emphasised-hover": "#092f62",
+    "interactive-primary-emphasised-pressed": "#061d3c",
+    "interactive-secondary-emphasised-hover": "#e8f0fb",
+    "interactive-secondary-emphasised-pressed": "#c5d9f4",
+    "interactive-primary-neutral": "#545454",
+    "interactive-primary-neutral-hover": "#333333",
+    "interactive-primary-neutral-pressed": "#121212",
+    "interactive-secondary-neutral-hover": "#ededed",
+    "interactive-secondary-neutral-pressed": "#dcdcdc",
+    "interactive-disabled": "#dcdcdc",
+    "green-subtle": "#cde4c9",
+    "blue-subtle": "#c5d9f4",
+    "red-subtle": "#f5c6c0",
+    "cyan-subtle": "#b8d8e7",
+    "teal-subtle": "#c5dfe1",
+    "cool-purple-subtle": "#dbdff7",
+    "warm-purple-subtle": "#dac3e8",
+    "magenta-subtle": "#edc6d7",
+    "orange-subtle": "#fcddc6",
+    "yellow-subtle": "#fbeebf",
+    selected: "#005d8b"
   }
 };
 

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

@@ -9,11 +9,23 @@ const semanticColors = {
     warning: "#433608",
     success: "#326528",
     information: "#00344e",
-    disabled: "#999999"
+    disabled: "#999999",
+    green: "#24491d",
+    blue: "#092f62",
+    red: "#65170e",
+    cyan: "#00344e",
+    teal: "#0e2729",
+    "cool-purple": "#394069",
+    "warm-purple": "#381350",
+    magenta: "#581734",
+    orange: "#693c16",
+    yellow: "#5b4a0b",
+    "interactive-disabled": "#999999"
   },
   bg: {
-    "default-onDark": "#121212",
-    "default-onLight": "#ffffff"
+    base: "#ffffff",
+    "raised-1": "#f6f6f6",
+    "raised-2": "#ededed"
   },
   surface: {
     "light-1": "#f6f6f6",
@@ -21,16 +33,46 @@ const semanticColors = {
     "dark-1": "#333333"
   },
   border: {
-    subtle: "#cccccc",
     default: "#8d8d8d",
+    secondary: "#cccccc",
+    tertiary: "#ededed",
     strong: "#545454",
-    "inverse-strong": "#ffffff"
+    "inverse-strong": "#ffffff",
+    "interactive-emphasised": "#0d4289",
+    "interactive-neutral": "#545454",
+    "interactive-disabled": "#dcdcdc",
+    "interactive-focused": "#0072a9",
+    "interactive-selected": "#0072a9"
   },
   status: {
     "status-draft": "#f1c21b",
     "status-live": "#4e9e3e",
     "status-selected": "#0072a9",
     "status-focused": "#0072a9"
+  },
+  fill: {
+    "interactive-primary-emphasised": "#0d4289",
+    "interactive-primary-emphasised-hover": "#092f62",
+    "interactive-primary-emphasised-pressed": "#061d3c",
+    "interactive-secondary-emphasised-hover": "#e8f0fb",
+    "interactive-secondary-emphasised-pressed": "#c5d9f4",
+    "interactive-primary-neutral": "#545454",
+    "interactive-primary-neutral-hover": "#333333",
+    "interactive-primary-neutral-pressed": "#121212",
+    "interactive-secondary-neutral-hover": "#ededed",
+    "interactive-secondary-neutral-pressed": "#dcdcdc",
+    "interactive-disabled": "#dcdcdc",
+    "green-subtle": "#cde4c9",
+    "blue-subtle": "#c5d9f4",
+    "red-subtle": "#f5c6c0",
+    "cyan-subtle": "#b8d8e7",
+    "teal-subtle": "#c5dfe1",
+    "cool-purple-subtle": "#dbdff7",
+    "warm-purple-subtle": "#dac3e8",
+    "magenta-subtle": "#edc6d7",
+    "orange-subtle": "#fcddc6",
+    "yellow-subtle": "#fbeebf",
+    selected: "#005d8b"
   }
 };
 

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

@@ -13,7 +13,9 @@ const semanticSizing = {
     lg: "1.5rem"
   },
   border: {
-    md: "0.125rem"
+    default: "0.0625rem",
+    md: "0.125rem",
+    "extra-wide": "0.5rem"
   }
 };
 

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

@@ -11,7 +11,9 @@ const semanticSizing = {
     lg: "1.5rem"
   },
   border: {
-    md: "0.125rem"
+    default: "0.0625rem",
+    md: "0.125rem",
+    "extra-wide": "0.5rem"
   }
 };
 

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

@@ -190,6 +190,21 @@ const semanticTypography = {
     font: "italic 700 1rem/1.4 GuardianTextEgyptian",
     letterSpacing: "0rem",
     fontWidth: 100
+  },
+  "interactive-xs": {
+    font: "normal 700 0.75rem/1 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "interactive-sm": {
+    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

@@ -188,6 +188,21 @@ const semanticTypography = {
     font: "italic 700 1rem/1.4 GuardianTextEgyptian",
     letterSpacing: "0rem",
     fontWidth: 100
+  },
+  "interactive-xs": {
+    font: "normal 700 0.75rem/1 Open Sans",
+    letterSpacing: "0rem",
+    fontWidth: 95
+  },
+  "interactive-sm": {
+    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
   }
 };