@guardian/stand 0.0.38 → 0.0.39

package/dist/styleD/build/typescript/component/{TopBar.cjs → topBar.cjs}

@@ -1,16 +1,16 @@
 'use strict';
 
 const componentTopBar = {
-  "background-color": "#f6f6f6",
+  backgroundColor: "#f6f6f6",
   display: "flex",
   height: "4rem",
-  "justify-content": "flex-start",
-  "border-right": "0.0625rem solid #cccccc",
-  "border-top": "0.0625rem solid #cccccc",
-  "border-bottom": "0.0625rem solid #cccccc",
-  "border-left": "0.0625rem solid #cccccc",
+  justifyContent: "flex-start",
+  borderRight: "0.0625rem solid #cccccc",
+  borderTop: "0.0625rem solid #cccccc",
+  borderBottom: "0.0625rem solid #cccccc",
+  borderLeft: "0.0625rem solid #cccccc",
   spacer: {
-    "margin-left": "auto"
+    marginLeft: "auto"
   },
   collapsedNavMenu: {
     button: {
@@ -21,22 +21,22 @@ const componentTopBar = {
       border: "none",
       cursor: "pointer",
       hovered: {
-        "background-color": "#ededed"
+        backgroundColor: "#ededed"
       },
       active: {
-        "background-color": "#ededed"
+        backgroundColor: "#ededed"
       }
     },
     popover: {
-      "background-color": "#f6f6f6",
+      backgroundColor: "#f6f6f6",
       border: "0.0625rem solid #cccccc",
       offset: 1,
       containerPadding: 0
     }
   },
-  Item: {
+  item: {
     display: "flex",
-    "align-items": "center",
+    alignItems: "center",
     height: "100%",
     sm: {
       padding: {
@@ -64,15 +64,15 @@ const componentTopBar = {
     },
     border: "0.0625rem solid #cccccc"
   },
-  Navigation: {
+  navigation: {
     shared: {
       display: "inline-flex",
       position: "relative",
-      "align-items": "center",
+      alignItems: "center",
       cursor: "pointer",
-      "text-decoration": "none",
+      textDecoration: "none",
       height: "100%",
-      ":disabled": {
+      disabled: {
         cursor: "not-allowed",
         color: "#999999"
       },
@@ -82,17 +82,17 @@ const componentTopBar = {
         bottom: "0",
         left: "1rem"
       },
-      ":focus-visible": {
+      focusVisible: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "-0.0625rem"
+        outlineOffset: "-0.0625rem"
       },
-      "border-top": "0.5rem solid transparent",
+      borderTop: "0.5rem solid transparent",
       divider: "0.0625rem solid #cccccc",
       _menuOpen: {
         width: "100%",
         height: "64px",
         selected: {
-          "background-color": "#ededed"
+          backgroundColor: "#ededed"
         }
       }
     },
@@ -109,11 +109,11 @@ const componentTopBar = {
     },
     selected: {
       color: "#000000",
-      "border-bottom": "0.5rem solid #0072a9"
+      borderBottom: "0.5rem solid #0072a9"
     },
     unselected: {
       color: "#545454",
-      "border-bottom": "0.5rem solid transparent"
+      borderBottom: "0.5rem solid transparent"
     },
     md: {
       typography: {
@@ -130,11 +130,11 @@ const componentTopBar = {
       }
     }
   },
-  ToolName: {
+  toolName: {
     display: "flex",
     color: "#000000",
-    "align-items": "center",
-    gap: "8px",
+    alignItems: "center",
+    gap: "0.5rem",
     typography: {
       font: "normal 700 1.25rem/1.15 GH Guardian Headline",
       letterSpacing: "0rem",
@@ -145,7 +145,7 @@ const componentTopBar = {
       height: "2rem"
     },
     subsection: {
-      gap: "2px",
+      gap: "0.125rem",
       typography: {
         font: "normal 700 1rem/1.15 Open Sans",
         letterSpacing: "-0.0125rem",
@@ -181,12 +181,12 @@ const componentTopBar = {
       },
       focused: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "-0.125rem"
+        outlineOffset: "-0.125rem"
       },
       collapsed: {
         paddingLeft: "0.25rem",
         paddingRight: "0.25rem",
-        "justify-content": "center"
+        justifyContent: "center"
       }
     }
   }

package/dist/styleD/build/typescript/component/{TopBar.js → topBar.js}

@@ -1,14 +1,14 @@
 const componentTopBar = {
-  "background-color": "#f6f6f6",
+  backgroundColor: "#f6f6f6",
   display: "flex",
   height: "4rem",
-  "justify-content": "flex-start",
-  "border-right": "0.0625rem solid #cccccc",
-  "border-top": "0.0625rem solid #cccccc",
-  "border-bottom": "0.0625rem solid #cccccc",
-  "border-left": "0.0625rem solid #cccccc",
+  justifyContent: "flex-start",
+  borderRight: "0.0625rem solid #cccccc",
+  borderTop: "0.0625rem solid #cccccc",
+  borderBottom: "0.0625rem solid #cccccc",
+  borderLeft: "0.0625rem solid #cccccc",
   spacer: {
-    "margin-left": "auto"
+    marginLeft: "auto"
   },
   collapsedNavMenu: {
     button: {
@@ -19,22 +19,22 @@ const componentTopBar = {
       border: "none",
       cursor: "pointer",
       hovered: {
-        "background-color": "#ededed"
+        backgroundColor: "#ededed"
       },
       active: {
-        "background-color": "#ededed"
+        backgroundColor: "#ededed"
       }
     },
     popover: {
-      "background-color": "#f6f6f6",
+      backgroundColor: "#f6f6f6",
       border: "0.0625rem solid #cccccc",
       offset: 1,
       containerPadding: 0
     }
   },
-  Item: {
+  item: {
     display: "flex",
-    "align-items": "center",
+    alignItems: "center",
     height: "100%",
     sm: {
       padding: {
@@ -62,15 +62,15 @@ const componentTopBar = {
     },
     border: "0.0625rem solid #cccccc"
   },
-  Navigation: {
+  navigation: {
     shared: {
       display: "inline-flex",
       position: "relative",
-      "align-items": "center",
+      alignItems: "center",
       cursor: "pointer",
-      "text-decoration": "none",
+      textDecoration: "none",
       height: "100%",
-      ":disabled": {
+      disabled: {
         cursor: "not-allowed",
         color: "#999999"
       },
@@ -80,17 +80,17 @@ const componentTopBar = {
         bottom: "0",
         left: "1rem"
       },
-      ":focus-visible": {
+      focusVisible: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "-0.0625rem"
+        outlineOffset: "-0.0625rem"
       },
-      "border-top": "0.5rem solid transparent",
+      borderTop: "0.5rem solid transparent",
       divider: "0.0625rem solid #cccccc",
       _menuOpen: {
         width: "100%",
         height: "64px",
         selected: {
-          "background-color": "#ededed"
+          backgroundColor: "#ededed"
         }
       }
     },
@@ -107,11 +107,11 @@ const componentTopBar = {
     },
     selected: {
       color: "#000000",
-      "border-bottom": "0.5rem solid #0072a9"
+      borderBottom: "0.5rem solid #0072a9"
     },
     unselected: {
       color: "#545454",
-      "border-bottom": "0.5rem solid transparent"
+      borderBottom: "0.5rem solid transparent"
     },
     md: {
       typography: {
@@ -128,11 +128,11 @@ const componentTopBar = {
       }
     }
   },
-  ToolName: {
+  toolName: {
     display: "flex",
     color: "#000000",
-    "align-items": "center",
-    gap: "8px",
+    alignItems: "center",
+    gap: "0.5rem",
     typography: {
       font: "normal 700 1.25rem/1.15 GH Guardian Headline",
       letterSpacing: "0rem",
@@ -143,7 +143,7 @@ const componentTopBar = {
       height: "2rem"
     },
     subsection: {
-      gap: "2px",
+      gap: "0.125rem",
       typography: {
         font: "normal 700 1rem/1.15 Open Sans",
         letterSpacing: "-0.0125rem",
@@ -179,12 +179,12 @@ const componentTopBar = {
       },
       focused: {
         outline: "0.125rem solid #0072a9",
-        "outline-offset": "-0.125rem"
+        outlineOffset: "-0.125rem"
       },
       collapsed: {
         paddingLeft: "0.25rem",
         paddingRight: "0.25rem",
-        "justify-content": "center"
+        justifyContent: "center"
       }
     }
   }

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

@@ -4,13 +4,13 @@ const semanticColors = {
   text: {
     strong: "#000000",
     weak: "#545454",
-    "strong-inverse": "#dcdcdc",
-    "weak-inverse": "#cccccc",
-    "stronger-inverse": "#ffffff",
+    strongInverse: "#dcdcdc",
+    weakInverse: "#cccccc",
+    strongerInverse: "#ffffff",
     error: "#8c2113",
     warning: "#433608",
     success: "#326528",
-    "success-inverse": "#cde4c9",
+    successInverse: "#cde4c9",
     information: "#00344e",
     disabled: "#999999",
     green: "#24491d",
@@ -18,64 +18,65 @@ const semanticColors = {
     red: "#65170e",
     cyan: "#00344e",
     teal: "#0e2729",
-    "cool-purple": "#394069",
-    "warm-purple": "#381350",
+    coolPurple: "#394069",
+    warmPurple: "#381350",
     magenta: "#581734",
     orange: "#693c16",
     yellow: "#5b4a0b"
   },
   bg: {
     base: "#ffffff",
-    "raised-level-1": "#f6f6f6",
-    "raised-level-2": "#ededed"
+    raisedLevel1: "#f6f6f6",
+    raisedLevel2: "#ededed",
+    raisedLevel3: "#e6e6e6"
   },
   border: {
     stronger: "#545454",
     strong: "#8d8d8d",
     weak: "#cccccc",
     weaker: "#ededed",
-    "strong-inverse": "#ffffff",
+    strongInverse: "#ffffff",
     disabled: "#dcdcdc",
     accent: "#0d4289",
     error: "#b42a19",
     focused: "#0072a9",
     selected: "#0072a9",
-    "selected-inverse": "#8abed7"
+    selectedInverse: "#8abed7"
   },
   fill: {
-    "accent-strong": "#0d4289",
-    "accent-strong-hover": "#092f62",
-    "accent-strong-pressed": "#061d3c",
+    accentStrong: "#0d4289",
+    accentStrongHover: "#092f62",
+    accentStrongPressed: "#061d3c",
     strong: "#545454",
-    "strong-hover": "#333333",
-    "strong-pressed": "#121212",
+    strongHover: "#333333",
+    strongPressed: "#121212",
     weak: "#ffffff",
-    "weak-hover": "#f6f6f6",
-    "weak-pressed": "#ededed",
+    weakHover: "#f6f6f6",
+    weakPressed: "#ededed",
     disabled: "#dcdcdc",
-    "disabled-inverse": "#666666",
+    disabledInverse: "#666666",
     link: "#00496c",
-    "link-hover": "#00344e",
-    "link-pressed": "#00202f",
-    "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",
+    linkHover: "#00344e",
+    linkPressed: "#00202f",
+    greenWeak: "#cde4c9",
+    blueWeak: "#c5d9f4",
+    redWeak: "#f5c6c0",
+    cyanWeak: "#b8d8e7",
+    tealWeak: "#c5dfe1",
+    coolPurpleWeak: "#dbdff7",
+    warmPurpleWeak: "#dac3e8",
+    magentaWeak: "#edc6d7",
+    orangeWeak: "#fcddc6",
+    yellowWeak: "#fbeebf",
     selected: "#005d8b",
-    "draft-strong": "#f1c21b",
-    "live-weak": "#aed2a6",
-    "warning-weak": "#fbeebf",
-    "information-weak": "#e8f0fb",
-    "error-weak": "#f5c6c0",
-    "error-strong": "#b42a19",
-    "success-weak": "#cde4c9",
-    "success-strong": "#326528"
+    draftStrong: "#f1c21b",
+    liveWeak: "#aed2a6",
+    warningWeak: "#fbeebf",
+    informationWeak: "#e8f0fb",
+    errorWeak: "#f5c6c0",
+    errorStrong: "#b42a19",
+    successWeak: "#cde4c9",
+    successStrong: "#326528"
   }
 };
 

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

@@ -2,13 +2,13 @@ const semanticColors = {
   text: {
     strong: "#000000",
     weak: "#545454",
-    "strong-inverse": "#dcdcdc",
-    "weak-inverse": "#cccccc",
-    "stronger-inverse": "#ffffff",
+    strongInverse: "#dcdcdc",
+    weakInverse: "#cccccc",
+    strongerInverse: "#ffffff",
     error: "#8c2113",
     warning: "#433608",
     success: "#326528",
-    "success-inverse": "#cde4c9",
+    successInverse: "#cde4c9",
     information: "#00344e",
     disabled: "#999999",
     green: "#24491d",
@@ -16,64 +16,65 @@ const semanticColors = {
     red: "#65170e",
     cyan: "#00344e",
     teal: "#0e2729",
-    "cool-purple": "#394069",
-    "warm-purple": "#381350",
+    coolPurple: "#394069",
+    warmPurple: "#381350",
     magenta: "#581734",
     orange: "#693c16",
     yellow: "#5b4a0b"
   },
   bg: {
     base: "#ffffff",
-    "raised-level-1": "#f6f6f6",
-    "raised-level-2": "#ededed"
+    raisedLevel1: "#f6f6f6",
+    raisedLevel2: "#ededed",
+    raisedLevel3: "#e6e6e6"
   },
   border: {
     stronger: "#545454",
     strong: "#8d8d8d",
     weak: "#cccccc",
     weaker: "#ededed",
-    "strong-inverse": "#ffffff",
+    strongInverse: "#ffffff",
     disabled: "#dcdcdc",
     accent: "#0d4289",
     error: "#b42a19",
     focused: "#0072a9",
     selected: "#0072a9",
-    "selected-inverse": "#8abed7"
+    selectedInverse: "#8abed7"
   },
   fill: {
-    "accent-strong": "#0d4289",
-    "accent-strong-hover": "#092f62",
-    "accent-strong-pressed": "#061d3c",
+    accentStrong: "#0d4289",
+    accentStrongHover: "#092f62",
+    accentStrongPressed: "#061d3c",
     strong: "#545454",
-    "strong-hover": "#333333",
-    "strong-pressed": "#121212",
+    strongHover: "#333333",
+    strongPressed: "#121212",
     weak: "#ffffff",
-    "weak-hover": "#f6f6f6",
-    "weak-pressed": "#ededed",
+    weakHover: "#f6f6f6",
+    weakPressed: "#ededed",
     disabled: "#dcdcdc",
-    "disabled-inverse": "#666666",
+    disabledInverse: "#666666",
     link: "#00496c",
-    "link-hover": "#00344e",
-    "link-pressed": "#00202f",
-    "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",
+    linkHover: "#00344e",
+    linkPressed: "#00202f",
+    greenWeak: "#cde4c9",
+    blueWeak: "#c5d9f4",
+    redWeak: "#f5c6c0",
+    cyanWeak: "#b8d8e7",
+    tealWeak: "#c5dfe1",
+    coolPurpleWeak: "#dbdff7",
+    warmPurpleWeak: "#dac3e8",
+    magentaWeak: "#edc6d7",
+    orangeWeak: "#fcddc6",
+    yellowWeak: "#fbeebf",
     selected: "#005d8b",
-    "draft-strong": "#f1c21b",
-    "live-weak": "#aed2a6",
-    "warning-weak": "#fbeebf",
-    "information-weak": "#e8f0fb",
-    "error-weak": "#f5c6c0",
-    "error-strong": "#b42a19",
-    "success-weak": "#cde4c9",
-    "success-strong": "#326528"
+    draftStrong: "#f1c21b",
+    liveWeak: "#aed2a6",
+    warningWeak: "#fbeebf",
+    informationWeak: "#e8f0fb",
+    errorWeak: "#f5c6c0",
+    errorStrong: "#b42a19",
+    successWeak: "#cde4c9",
+    successStrong: "#326528"
   }
 };
 

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

@@ -2,14 +2,14 @@
 
 const semanticGrid = {
   gutter: {
-    "lg-px": "16px",
-    "md-px": "16px",
-    "sm-px": "16px"
+    lgPx: "16px",
+    mdPx: "16px",
+    smPx: "16px"
   },
   margin: {
-    "lg-px": "24px",
-    "md-px": "24px",
-    "sm-px": "16px"
+    lgPx: "24px",
+    mdPx: "24px",
+    smPx: "16px"
   },
   columns: {
     lg: 12,

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

@@ -1,13 +1,13 @@
 const semanticGrid = {
   gutter: {
-    "lg-px": "16px",
-    "md-px": "16px",
-    "sm-px": "16px"
+    lgPx: "16px",
+    mdPx: "16px",
+    smPx: "16px"
   },
   margin: {
-    "lg-px": "24px",
-    "md-px": "24px",
-    "sm-px": "16px"
+    lgPx: "24px",
+    mdPx: "24px",
+    smPx: "16px"
   },
   columns: {
     lg: 12,

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

@@ -17,14 +17,14 @@ const semanticSizing = {
   border: {
     default: "0.0625rem",
     md: "0.125rem",
-    "extra-wide": "0.5rem"
+    extraWide: "0.5rem"
   },
   sidebar: {
-    "md-px": "200px",
-    "lg-px": "280px"
+    mdPx: "200px",
+    lgPx: "280px"
   },
   layout: {
-    "max-width-px": "1584px"
+    maxWidthPx: "1584px"
   }
 };
 

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

@@ -15,14 +15,14 @@ const semanticSizing = {
   border: {
     default: "0.0625rem",
     md: "0.125rem",
-    "extra-wide": "0.5rem"
+    extraWide: "0.5rem"
   },
   sidebar: {
-    "md-px": "200px",
-    "lg-px": "280px"
+    mdPx: "200px",
+    lgPx: "280px"
   },
   layout: {
-    "max-width-px": "1584px"
+    maxWidthPx: "1584px"
   }
 };