@guardian/stand 0.0.16 → 0.0.17

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

@@ -18,7 +18,7 @@ const componentButton = {
       "outline-offset": "0.125rem"
     }
   },
-  "emphasised-primary": {
+  primary: {
     shared: {
       color: "#ffffff",
       backgroundColor: "#0d4289",
@@ -143,132 +143,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",
@@ -393,18 +268,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/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

@@ -56,6 +56,7 @@ const componentMenu = {
         left: "1rem"
       },
       "border-bottom": "0.0625rem solid #cccccc",
+      "background-color": "#ffffff",
       icon: {
         "grid-area": "icon",
         "align-self": "start",
@@ -94,7 +95,7 @@ const componentMenu = {
         "border-bottom": "none"
       },
       ":hover": {
-        "background-color": "#ededed"
+        "background-color": "#f6f6f6"
       },
       ":focus-visible": {
         outline: "0.125rem solid #0072a9",

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

@@ -54,6 +54,7 @@ const componentMenu = {
         left: "1rem"
       },
       "border-bottom": "0.0625rem solid #cccccc",
+      "background-color": "#ffffff",
       icon: {
         "grid-area": "icon",
         "align-self": "start",
@@ -92,7 +93,7 @@ const componentMenu = {
         "border-bottom": "none"
       },
       ":hover": {
-        "background-color": "#ededed"
+        "background-color": "#f6f6f6"
       },
       ":focus-visible": {
         outline: "0.125rem solid #0072a9",

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

@@ -2,6 +2,7 @@
 
 const semanticSizing = {
   height: {
+    xxs: "1.25rem",
     xs: "1.5rem",
     sm: "2rem",
     md: "2.5rem",

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

@@ -1,5 +1,6 @@
 const semanticSizing = {
   height: {
+    xxs: "1.25rem",
     xs: "1.5rem",
     sm: "2rem",
     md: "2.5rem",

package/dist/types/TopBar.d.ts

@@ -12,8 +12,17 @@
  * If you only need the built CSS (./component/TopBar.css),
  * you don't need to install these.
  */
-export { TopBarToolName } from './components/topbar/toolName/TopBarToolName';
-export type { TopBarToolNameProps } from './components/topbar/toolName/types';
-export type { PartialTopBarToolNameTheme as TopBarToolNameTheme } from './components/topbar/toolName/styles';
 export { componentTopBar } from './styleD/build/typescript/component/TopBar';
 export type { ComponentTopBar } from './styleD/build/typescript/component/TopBar';
+export { TopBarToolName } from './components/topbar/topBarToolName/TopBarToolName';
+export type { TopBarToolNameProps } from './components/topbar/topBarToolName/types';
+export type { PartialTopBarToolNameTheme as TopBarToolNameTheme } from './components/topbar/topBarToolName/styles';
+export { TopBarNavigation } from './components/topbar/topBarNavigation/TopBarNavigation';
+export type { TopBarNavigationProps } from './components/topbar/topBarNavigation/types';
+export type { PartialTopBarNavigationTheme as TopBarNavigationTheme } from './components/topbar/topBarNavigation/styles';
+export { TopBarItem } from './components/topbar/topBarItem/TopBarItem';
+export type { TopBarItemProps } from './components/topbar/topBarItem/types';
+export type { PartialTopBarItemTheme as TopBarItemTheme } from './components/topbar/topBarItem/styles';
+export { TopBar } from './components/topbar/TopBar';
+export type { TopBarProps } from './components/topbar/types';
+export type { PartialTopBarTheme as TopBarTheme } from './components/topbar/styles';