@guardian/stand 0.0.15 → 0.0.17

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/menu.cjs

@@ -0,0 +1,141 @@
+'use strict';
+
+const componentMenu = {
+  menu: {
+    shared: {
+      display: "flex",
+      "flex-direction": "column",
+      "background-color": "#ffffff",
+      border: "0.0625rem solid #cccccc"
+    }
+  },
+  menuSection: {
+    header: {
+      shared: {
+        display: "flex",
+        "align-items": "center",
+        padding: {
+          top: "0",
+          right: "0.5rem",
+          bottom: "0",
+          left: "0.5rem"
+        },
+        "background-color": "#ededed",
+        color: "#000000"
+      },
+      sm: {
+        height: "1.5rem",
+        typography: {
+          font: "normal 700 0.875rem/1 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        }
+      },
+      md: {
+        height: "2rem",
+        typography: {
+          font: "normal 700 1rem/1 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        }
+      }
+    }
+  },
+  menuItem: {
+    shared: {
+      display: "grid",
+      "grid-template-areas": "'icon label aside'",
+      "grid-template-areas-with-description": "'icon label aside' '. description .'",
+      "grid-template-columns": "auto 6fr 1fr",
+      gap: "0.25rem",
+      "align-items": "center",
+      padding: {
+        top: "0.75rem",
+        right: "1rem",
+        bottom: "0.75rem",
+        left: "1rem"
+      },
+      "border-bottom": "0.0625rem solid #cccccc",
+      "background-color": "#ffffff",
+      icon: {
+        "grid-area": "icon",
+        "align-self": "start",
+        color: "#545454"
+      },
+      label: {
+        "grid-area": "label",
+        color: "#000000",
+        typography: {
+          font: "normal 460 1rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      description: {
+        "grid-area": "description",
+        color: "#545454",
+        typography: {
+          font: "normal 460 0.875rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      aside: {
+        "grid-area": "aside",
+        "justify-self": "end",
+        "align-self": "start",
+        color: "#000000",
+        typography: {
+          font: "normal 460 1rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      ":last-child": {
+        "border-bottom": "none"
+      },
+      ":hover": {
+        "background-color": "#f6f6f6"
+      },
+      ":focus-visible": {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "-0.125rem"
+      }
+    },
+    sm: {
+      icon: {
+        size: "1.125rem",
+        "line-height": 1.3
+      }
+    },
+    md: {
+      icon: {
+        size: "1.25rem",
+        "line-height": 1.3
+      }
+    }
+  },
+  menuSeparator: {
+    shared: {
+      "background-color": "#ededed",
+      height: "0.5rem",
+      width: "100%"
+    }
+  },
+  menuPopover: {
+    shared: {
+      overflow: "auto",
+      shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+    },
+    sm: {
+      "max-width": "200px",
+      width: "100%"
+    },
+    md: {
+      "max-width": "320px",
+      width: "100%"
+    }
+  }
+};
+
+exports.componentMenu = componentMenu;

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

@@ -0,0 +1,139 @@
+const componentMenu = {
+  menu: {
+    shared: {
+      display: "flex",
+      "flex-direction": "column",
+      "background-color": "#ffffff",
+      border: "0.0625rem solid #cccccc"
+    }
+  },
+  menuSection: {
+    header: {
+      shared: {
+        display: "flex",
+        "align-items": "center",
+        padding: {
+          top: "0",
+          right: "0.5rem",
+          bottom: "0",
+          left: "0.5rem"
+        },
+        "background-color": "#ededed",
+        color: "#000000"
+      },
+      sm: {
+        height: "1.5rem",
+        typography: {
+          font: "normal 700 0.875rem/1 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        }
+      },
+      md: {
+        height: "2rem",
+        typography: {
+          font: "normal 700 1rem/1 Open Sans",
+          letterSpacing: "-0.0125rem",
+          fontWidth: 95
+        }
+      }
+    }
+  },
+  menuItem: {
+    shared: {
+      display: "grid",
+      "grid-template-areas": "'icon label aside'",
+      "grid-template-areas-with-description": "'icon label aside' '. description .'",
+      "grid-template-columns": "auto 6fr 1fr",
+      gap: "0.25rem",
+      "align-items": "center",
+      padding: {
+        top: "0.75rem",
+        right: "1rem",
+        bottom: "0.75rem",
+        left: "1rem"
+      },
+      "border-bottom": "0.0625rem solid #cccccc",
+      "background-color": "#ffffff",
+      icon: {
+        "grid-area": "icon",
+        "align-self": "start",
+        color: "#545454"
+      },
+      label: {
+        "grid-area": "label",
+        color: "#000000",
+        typography: {
+          font: "normal 460 1rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      description: {
+        "grid-area": "description",
+        color: "#545454",
+        typography: {
+          font: "normal 460 0.875rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      aside: {
+        "grid-area": "aside",
+        "justify-self": "end",
+        "align-self": "start",
+        color: "#000000",
+        typography: {
+          font: "normal 460 1rem/1.3 Open Sans",
+          letterSpacing: "0rem",
+          fontWidth: 95
+        }
+      },
+      ":last-child": {
+        "border-bottom": "none"
+      },
+      ":hover": {
+        "background-color": "#f6f6f6"
+      },
+      ":focus-visible": {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "-0.125rem"
+      }
+    },
+    sm: {
+      icon: {
+        size: "1.125rem",
+        "line-height": 1.3
+      }
+    },
+    md: {
+      icon: {
+        size: "1.25rem",
+        "line-height": 1.3
+      }
+    }
+  },
+  menuSeparator: {
+    shared: {
+      "background-color": "#ededed",
+      height: "0.5rem",
+      width: "100%"
+    }
+  },
+  menuPopover: {
+    shared: {
+      overflow: "auto",
+      shadow: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+    },
+    sm: {
+      "max-width": "200px",
+      width: "100%"
+    },
+    md: {
+      "max-width": "320px",
+      width: "100%"
+    }
+  }
+};
+
+export { componentMenu };

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

@@ -2,11 +2,11 @@
 
 const semanticColors = {
   text: {
-    default: "#000000",
-    subdued: "#545454",
-    "inverse-default": "#dcdcdc",
-    "inverse-subdued": "#cccccc",
-    "inverse-strong": "#ffffff",
+    strong: "#000000",
+    weak: "#545454",
+    "strong-inverse": "#dcdcdc",
+    "weak-inverse": "#cccccc",
+    "stronger-inverse": "#ffffff",
     error: "#8c2113",
     warning: "#433608",
     success: "#326528",
@@ -21,60 +21,55 @@ const semanticColors = {
     "warm-purple": "#381350",
     magenta: "#581734",
     orange: "#693c16",
-    yellow: "#5b4a0b",
-    "interactive-disabled": "#999999"
+    yellow: "#5b4a0b"
   },
   bg: {
     base: "#ffffff",
-    "raised-1": "#f6f6f6",
-    "raised-2": "#ededed"
-  },
-  surface: {
-    "light-1": "#f6f6f6",
-    "light-2": "#ededed",
-    "dark-1": "#333333"
+    "raised-level-1": "#f6f6f6",
+    "raised-level-2": "#ededed"
   },
   border: {
-    default: "#8d8d8d",
-    secondary: "#cccccc",
-    tertiary: "#ededed",
-    strong: "#545454",
-    "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"
+    stronger: "#545454",
+    strong: "#8d8d8d",
+    weak: "#cccccc",
+    weaker: "#ededed",
+    "strong-inverse": "#ffffff",
+    disabled: "#dcdcdc",
+    accent: "#0d4289",
+    error: "#b42a19",
+    focused: "#0072a9",
+    selected: "#0072a9",
+    "selected-inverse": "#8abed7"
   },
   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"
+    "accent-strong": "#0d4289",
+    "accent-strong-hover": "#092f62",
+    "accent-strong-pressed": "#061d3c",
+    strong: "#545454",
+    "strong-hover": "#333333",
+    "strong-pressed": "#121212",
+    weak: "#ffffff",
+    "weak-hover": "#f6f6f6",
+    "weak-pressed": "#ededed",
+    disabled: "#dcdcdc",
+    "green-weak": "#cde4c9",
+    "blue-weak": "#c5d9f4",
+    "red-weak": "#f5c6c0",
+    "cyan-weak": "#b8d8e7",
+    "teal-weak": "#c5dfe1",
+    "cool-purple-weak": "#dbdff7",
+    "warm-purple-weak": "#dac3e8",
+    "magenta-weak": "#edc6d7",
+    "orange-weak": "#fcddc6",
+    "yellow-weak": "#fbeebf",
+    selected: "#005d8b",
+    "draft-strong": "#f1c21b",
+    "live-weak": "#aed2a6",
+    "warning-weak": "#fbeebf",
+    "information-weak": "#e8f0fb",
+    "error-weak": "#f5c6c0",
+    "error-strong": "#b42a19",
+    "success-weak": "#edf5ec"
   }
 };
 

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

@@ -1,10 +1,10 @@
 const semanticColors = {
   text: {
-    default: "#000000",
-    subdued: "#545454",
-    "inverse-default": "#dcdcdc",
-    "inverse-subdued": "#cccccc",
-    "inverse-strong": "#ffffff",
+    strong: "#000000",
+    weak: "#545454",
+    "strong-inverse": "#dcdcdc",
+    "weak-inverse": "#cccccc",
+    "stronger-inverse": "#ffffff",
     error: "#8c2113",
     warning: "#433608",
     success: "#326528",
@@ -19,60 +19,55 @@ const semanticColors = {
     "warm-purple": "#381350",
     magenta: "#581734",
     orange: "#693c16",
-    yellow: "#5b4a0b",
-    "interactive-disabled": "#999999"
+    yellow: "#5b4a0b"
   },
   bg: {
     base: "#ffffff",
-    "raised-1": "#f6f6f6",
-    "raised-2": "#ededed"
-  },
-  surface: {
-    "light-1": "#f6f6f6",
-    "light-2": "#ededed",
-    "dark-1": "#333333"
+    "raised-level-1": "#f6f6f6",
+    "raised-level-2": "#ededed"
   },
   border: {
-    default: "#8d8d8d",
-    secondary: "#cccccc",
-    tertiary: "#ededed",
-    strong: "#545454",
-    "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"
+    stronger: "#545454",
+    strong: "#8d8d8d",
+    weak: "#cccccc",
+    weaker: "#ededed",
+    "strong-inverse": "#ffffff",
+    disabled: "#dcdcdc",
+    accent: "#0d4289",
+    error: "#b42a19",
+    focused: "#0072a9",
+    selected: "#0072a9",
+    "selected-inverse": "#8abed7"
   },
   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"
+    "accent-strong": "#0d4289",
+    "accent-strong-hover": "#092f62",
+    "accent-strong-pressed": "#061d3c",
+    strong: "#545454",
+    "strong-hover": "#333333",
+    "strong-pressed": "#121212",
+    weak: "#ffffff",
+    "weak-hover": "#f6f6f6",
+    "weak-pressed": "#ededed",
+    disabled: "#dcdcdc",
+    "green-weak": "#cde4c9",
+    "blue-weak": "#c5d9f4",
+    "red-weak": "#f5c6c0",
+    "cyan-weak": "#b8d8e7",
+    "teal-weak": "#c5dfe1",
+    "cool-purple-weak": "#dbdff7",
+    "warm-purple-weak": "#dac3e8",
+    "magenta-weak": "#edc6d7",
+    "orange-weak": "#fcddc6",
+    "yellow-weak": "#fbeebf",
+    selected: "#005d8b",
+    "draft-strong": "#f1c21b",
+    "live-weak": "#aed2a6",
+    "warning-weak": "#fbeebf",
+    "information-weak": "#e8f0fb",
+    "error-weak": "#f5c6c0",
+    "error-strong": "#b42a19",
+    "success-weak": "#edf5ec"
   }
 };
 

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

@@ -0,0 +1,7 @@
+'use strict';
+
+const semanticShadow = {
+  raised: "0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3)"
+};
+
+exports.semanticShadow = semanticShadow;