@guardian/stand 0.0.15 → 0.0.17

package/dist/styleD/build/css/semantic/colors.css

@@ -3,11 +3,11 @@
  */
 
 :root {
-	--semantic-colors-text-default: #000000;
-	--semantic-colors-text-subdued: #545454;
-	--semantic-colors-text-inverse-default: #dcdcdc;
-	--semantic-colors-text-inverse-subdued: #cccccc;
-	--semantic-colors-text-inverse-strong: #ffffff;
+	--semantic-colors-text-strong: #000000;
+	--semantic-colors-text-weak: #545454;
+	--semantic-colors-text-strong-inverse: #dcdcdc;
+	--semantic-colors-text-weak-inverse: #cccccc;
+	--semantic-colors-text-stronger-inverse: #ffffff;
 	--semantic-colors-text-error: #8c2113;
 	--semantic-colors-text-warning: #433608;
 	--semantic-colors-text-success: #326528;
@@ -23,47 +23,46 @@
 	--semantic-colors-text-magenta: #581734;
 	--semantic-colors-text-orange: #693c16;
 	--semantic-colors-text-yellow: #5b4a0b;
-	--semantic-colors-text-interactive-disabled: #999999;
 	--semantic-colors-bg-base: #ffffff;
-	--semantic-colors-bg-raised-1: #f6f6f6;
-	--semantic-colors-bg-raised-2: #ededed;
-	--semantic-colors-surface-light-1: #f6f6f6;
-	--semantic-colors-surface-light-2: #ededed;
-	--semantic-colors-surface-dark-1: #333333;
-	--semantic-colors-border-default: #8d8d8d;
-	--semantic-colors-border-secondary: #cccccc;
-	--semantic-colors-border-tertiary: #ededed;
-	--semantic-colors-border-strong: #545454;
-	--semantic-colors-border-inverse-strong: #ffffff;
-	--semantic-colors-border-interactive-emphasised: #0d4289;
-	--semantic-colors-border-interactive-neutral: #545454;
-	--semantic-colors-border-interactive-disabled: #dcdcdc;
-	--semantic-colors-border-interactive-focused: #0072a9;
-	--semantic-colors-border-interactive-selected: #0072a9;
-	--semantic-colors-status-status-draft: #f1c21b;
-	--semantic-colors-status-status-live: #4e9e3e;
-	--semantic-colors-status-status-selected: #0072a9;
-	--semantic-colors-status-status-focused: #0072a9;
-	--semantic-colors-fill-interactive-primary-emphasised: #0d4289;
-	--semantic-colors-fill-interactive-primary-emphasised-hover: #092f62;
-	--semantic-colors-fill-interactive-primary-emphasised-pressed: #061d3c;
-	--semantic-colors-fill-interactive-secondary-emphasised-hover: #e8f0fb;
-	--semantic-colors-fill-interactive-secondary-emphasised-pressed: #c5d9f4;
-	--semantic-colors-fill-interactive-primary-neutral: #545454;
-	--semantic-colors-fill-interactive-primary-neutral-hover: #333333;
-	--semantic-colors-fill-interactive-primary-neutral-pressed: #121212;
-	--semantic-colors-fill-interactive-secondary-neutral-hover: #ededed;
-	--semantic-colors-fill-interactive-secondary-neutral-pressed: #dcdcdc;
-	--semantic-colors-fill-interactive-disabled: #dcdcdc;
-	--semantic-colors-fill-green-subtle: #cde4c9;
-	--semantic-colors-fill-blue-subtle: #c5d9f4;
-	--semantic-colors-fill-red-subtle: #f5c6c0;
-	--semantic-colors-fill-cyan-subtle: #b8d8e7;
-	--semantic-colors-fill-teal-subtle: #c5dfe1;
-	--semantic-colors-fill-cool-purple-subtle: #dbdff7;
-	--semantic-colors-fill-warm-purple-subtle: #dac3e8;
-	--semantic-colors-fill-magenta-subtle: #edc6d7;
-	--semantic-colors-fill-orange-subtle: #fcddc6;
-	--semantic-colors-fill-yellow-subtle: #fbeebf;
+	--semantic-colors-bg-raised-level-1: #f6f6f6;
+	--semantic-colors-bg-raised-level-2: #ededed;
+	--semantic-colors-border-stronger: #545454;
+	--semantic-colors-border-strong: #8d8d8d;
+	--semantic-colors-border-weak: #cccccc;
+	--semantic-colors-border-weaker: #ededed;
+	--semantic-colors-border-strong-inverse: #ffffff;
+	--semantic-colors-border-disabled: #dcdcdc;
+	--semantic-colors-border-accent: #0d4289;
+	--semantic-colors-border-error: #b42a19;
+	--semantic-colors-border-focused: #0072a9;
+	--semantic-colors-border-selected: #0072a9;
+	--semantic-colors-border-selected-inverse: #8abed7;
+	--semantic-colors-fill-accent-strong: #0d4289;
+	--semantic-colors-fill-accent-strong-hover: #092f62;
+	--semantic-colors-fill-accent-strong-pressed: #061d3c;
+	--semantic-colors-fill-strong: #545454;
+	--semantic-colors-fill-strong-hover: #333333;
+	--semantic-colors-fill-strong-pressed: #121212;
+	--semantic-colors-fill-weak: #ffffff;
+	--semantic-colors-fill-weak-hover: #f6f6f6;
+	--semantic-colors-fill-weak-pressed: #ededed;
+	--semantic-colors-fill-disabled: #dcdcdc;
+	--semantic-colors-fill-green-weak: #cde4c9;
+	--semantic-colors-fill-blue-weak: #c5d9f4;
+	--semantic-colors-fill-red-weak: #f5c6c0;
+	--semantic-colors-fill-cyan-weak: #b8d8e7;
+	--semantic-colors-fill-teal-weak: #c5dfe1;
+	--semantic-colors-fill-cool-purple-weak: #dbdff7;
+	--semantic-colors-fill-warm-purple-weak: #dac3e8;
+	--semantic-colors-fill-magenta-weak: #edc6d7;
+	--semantic-colors-fill-orange-weak: #fcddc6;
+	--semantic-colors-fill-yellow-weak: #fbeebf;
 	--semantic-colors-fill-selected: #005d8b;
+	--semantic-colors-fill-draft-strong: #f1c21b;
+	--semantic-colors-fill-live-weak: #aed2a6;
+	--semantic-colors-fill-warning-weak: #fbeebf;
+	--semantic-colors-fill-information-weak: #e8f0fb;
+	--semantic-colors-fill-error-weak: #f5c6c0;
+	--semantic-colors-fill-error-strong: #b42a19;
+	--semantic-colors-fill-success-weak: #edf5ec;
 }

package/dist/styleD/build/css/semantic/shadow.css

@@ -0,0 +1,7 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+	--semantic-shadow-raised: 0 0.125rem 0.375rem 0 rgb(0% 0% 0% / 0.3);
+}

package/dist/styleD/build/css/semantic/sizing.css

@@ -3,6 +3,7 @@
  */
 
 :root {
+	--semantic-sizing-height-xxs: 1.25rem;
 	--semantic-sizing-height-xs: 1.5rem;
 	--semantic-sizing-height-sm: 2rem;
 	--semantic-sizing-height-md: 2.5rem;

package/dist/styleD/build/css/semantic/typography.css

@@ -5,22 +5,22 @@
 :root {
 	--semantic-typography-title-sm-font: normal 700 1.125rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-sm-letter-spacing: 0rem;
+	--semantic-typography-title-sm-letter-spacing: 0;
 	--semantic-typography-title-sm-font-width: 100;
 	--semantic-typography-title-md-font: normal 700 1.25rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-md-letter-spacing: 0rem;
+	--semantic-typography-title-md-letter-spacing: 0;
 	--semantic-typography-title-md-font-width: 100;
 	--semantic-typography-title-lg-font: normal 700 1.5rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-lg-letter-spacing: 0rem;
+	--semantic-typography-title-lg-letter-spacing: 0;
 	--semantic-typography-title-lg-font-width: 100;
 	--semantic-typography-title-xl-font: normal 700 2rem/1.15
 		'GH Guardian Headline';
-	--semantic-typography-title-xl-letter-spacing: 0rem;
+	--semantic-typography-title-xl-letter-spacing: 0;
 	--semantic-typography-title-xl-font-width: 100;
 	--semantic-typography-heading-xs-font: normal 700 0.75rem/1.15 'Open Sans';
-	--semantic-typography-heading-xs-letter-spacing: 0rem;
+	--semantic-typography-heading-xs-letter-spacing: 0;
 	--semantic-typography-heading-xs-font-width: 95;
 	--semantic-typography-heading-sm-font: normal 700 0.875rem/1.15 'Open Sans';
 	--semantic-typography-heading-sm-letter-spacing: -0.0125rem;
@@ -39,11 +39,11 @@
 	--semantic-typography-heading-2xl-font-width: 95;
 	--semantic-typography-heading-compact-xs-font: normal 700 0.75rem/1.15
 		'Open Sans';
-	--semantic-typography-heading-compact-xs-letter-spacing: 0rem;
+	--semantic-typography-heading-compact-xs-letter-spacing: 0;
 	--semantic-typography-heading-compact-xs-font-width: 88;
 	--semantic-typography-heading-compact-sm-font: normal 700 0.875rem/1.15
 		'Open Sans';
-	--semantic-typography-heading-compact-sm-letter-spacing: 0rem;
+	--semantic-typography-heading-compact-sm-letter-spacing: 0;
 	--semantic-typography-heading-compact-sm-font-width: 88;
 	--semantic-typography-heading-compact-md-font: normal 700 1rem/1.15
 		'Open Sans';
@@ -62,83 +62,83 @@
 	--semantic-typography-heading-compact-2xl-letter-spacing: -0.03125rem;
 	--semantic-typography-heading-compact-2xl-font-width: 88;
 	--semantic-typography-body-sm-font: normal 460 0.875rem/1.3 'Open Sans';
-	--semantic-typography-body-sm-letter-spacing: 0rem;
+	--semantic-typography-body-sm-letter-spacing: 0;
 	--semantic-typography-body-sm-font-width: 95;
 	--semantic-typography-body-md-font: normal 460 1rem/1.3 'Open Sans';
-	--semantic-typography-body-md-letter-spacing: 0rem;
+	--semantic-typography-body-md-letter-spacing: 0;
 	--semantic-typography-body-md-font-width: 95;
 	--semantic-typography-body-lg-font: normal 460 1.125rem/1.3 'Open Sans';
-	--semantic-typography-body-lg-letter-spacing: 0rem;
+	--semantic-typography-body-lg-letter-spacing: 0;
 	--semantic-typography-body-lg-font-width: 95;
 	--semantic-typography-body-xl-font: normal 460 1.25rem/1.3 'Open Sans';
-	--semantic-typography-body-xl-letter-spacing: 0rem;
+	--semantic-typography-body-xl-letter-spacing: 0;
 	--semantic-typography-body-xl-font-width: 95;
 	--semantic-typography-body-italic-sm-font: italic 460 0.875rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-sm-letter-spacing: 0rem;
+	--semantic-typography-body-italic-sm-letter-spacing: 0;
 	--semantic-typography-body-italic-sm-font-width: 95;
 	--semantic-typography-body-italic-md-font: italic 460 1rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-md-letter-spacing: 0rem;
+	--semantic-typography-body-italic-md-letter-spacing: 0;
 	--semantic-typography-body-italic-md-font-width: 95;
 	--semantic-typography-body-italic-lg-font: italic 460 1.125rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-lg-letter-spacing: 0rem;
+	--semantic-typography-body-italic-lg-letter-spacing: 0;
 	--semantic-typography-body-italic-lg-font-width: 95;
 	--semantic-typography-body-italic-xl-font: italic 460 1.25rem/1.3 'Open Sans';
-	--semantic-typography-body-italic-xl-letter-spacing: 0rem;
+	--semantic-typography-body-italic-xl-letter-spacing: 0;
 	--semantic-typography-body-italic-xl-font-width: 95;
 	--semantic-typography-body-compact-sm-font: normal 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-sm-letter-spacing: 0rem;
+	--semantic-typography-body-compact-sm-letter-spacing: 0;
 	--semantic-typography-body-compact-sm-font-width: 88;
 	--semantic-typography-body-compact-md-font: normal 460 1rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-md-letter-spacing: 0rem;
+	--semantic-typography-body-compact-md-letter-spacing: 0;
 	--semantic-typography-body-compact-md-font-width: 88;
 	--semantic-typography-body-compact-lg-font: normal 460 1.125rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-lg-letter-spacing: 0rem;
+	--semantic-typography-body-compact-lg-letter-spacing: 0;
 	--semantic-typography-body-compact-lg-font-width: 88;
 	--semantic-typography-body-compact-xl-font: normal 460 1.25rem/1.3 'Open Sans';
-	--semantic-typography-body-compact-xl-letter-spacing: 0rem;
+	--semantic-typography-body-compact-xl-letter-spacing: 0;
 	--semantic-typography-body-compact-xl-font-width: 88;
 	--semantic-typography-body-compact-italic-sm-font: italic 460 0.875rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-sm-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-sm-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-sm-font-width: 88;
 	--semantic-typography-body-compact-italic-md-font: italic 460 1rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-md-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-md-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-md-font-width: 88;
 	--semantic-typography-body-compact-italic-lg-font: italic 460 1.125rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-lg-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-lg-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-lg-font-width: 88;
 	--semantic-typography-body-compact-italic-xl-font: italic 460 1.25rem/1.3
 		'Open Sans';
-	--semantic-typography-body-compact-italic-xl-letter-spacing: 0rem;
+	--semantic-typography-body-compact-italic-xl-letter-spacing: 0;
 	--semantic-typography-body-compact-italic-xl-font-width: 88;
 	--semantic-typography-meta-md-font: normal 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-meta-md-letter-spacing: 0rem;
+	--semantic-typography-meta-md-letter-spacing: 0;
 	--semantic-typography-meta-md-font-width: 95;
 	--semantic-typography-meta-compact-md-font: normal 460 0.75rem/1.3 'Open Sans';
-	--semantic-typography-meta-compact-md-letter-spacing: 0rem;
+	--semantic-typography-meta-compact-md-letter-spacing: 0;
 	--semantic-typography-meta-compact-md-font-width: 88;
 	--semantic-typography-article-body-md-font: normal 400 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-md-letter-spacing: 0rem;
+	--semantic-typography-article-body-md-letter-spacing: 0;
 	--semantic-typography-article-body-md-font-width: 100;
 	--semantic-typography-article-body-bold-md-font: normal 700 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-bold-md-letter-spacing: 0rem;
+	--semantic-typography-article-body-bold-md-letter-spacing: 0;
 	--semantic-typography-article-body-bold-md-font-width: 100;
 	--semantic-typography-article-body-italic-md-font: italic 400 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-italic-md-letter-spacing: 0rem;
+	--semantic-typography-article-body-italic-md-letter-spacing: 0;
 	--semantic-typography-article-body-italic-md-font-width: 100;
 	--semantic-typography-article-body-bold-italic-md-font: italic 700 1rem/1.4
 		GuardianTextEgyptian;
-	--semantic-typography-article-body-bold-italic-md-letter-spacing: 0rem;
+	--semantic-typography-article-body-bold-italic-md-letter-spacing: 0;
 	--semantic-typography-article-body-bold-italic-md-font-width: 100;
 	--semantic-typography-interactive-xs-font: normal 700 0.75rem/1 'Open Sans';
-	--semantic-typography-interactive-xs-letter-spacing: 0rem;
+	--semantic-typography-interactive-xs-letter-spacing: 0;
 	--semantic-typography-interactive-xs-font-width: 95;
 	--semantic-typography-interactive-sm-font: normal 700 0.875rem/1 'Open Sans';
 	--semantic-typography-interactive-sm-letter-spacing: -0.0125rem;

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

@@ -32,13 +32,13 @@ const baseTypography = {
     "48-rem": "3rem"
   },
   weight: {
-    "Guardian Headline": {
-      bold: 700
-    },
     "Guardian Text Egyptian": {
       normal: 400,
       bold: 700
     },
+    "Guardian Headline": {
+      bold: 700
+    },
     "Open Sans": {
       light: 340,
       normal: 460,

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

@@ -30,13 +30,13 @@ const baseTypography = {
     "48-rem": "3rem"
   },
   weight: {
-    "Guardian Headline": {
-      bold: 700
-    },
     "Guardian Text Egyptian": {
       normal: 400,
       bold: 700
     },
+    "Guardian Headline": {
+      bold: 700
+    },
     "Open Sans": {
       light: 340,
       normal: 460,

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

@@ -1,6 +1,100 @@
 'use strict';
 
 const componentTopBar = {
+  "background-color": "#f6f6f6",
+  display: "flex",
+  height: "4rem",
+  "justify-content": "space-between",
+  border: "0.0625rem solid #cccccc",
+  Item: {
+    display: "flex",
+    "align-items": "center",
+    height: "100%",
+    sm: {
+      padding: {
+        top: "0",
+        right: "0.75rem",
+        bottom: "0",
+        left: "0.75rem"
+      }
+    },
+    md: {
+      padding: {
+        top: "0",
+        right: "1rem",
+        bottom: "0",
+        left: "1rem"
+      }
+    },
+    lg: {
+      padding: {
+        top: "0",
+        right: "1.5rem",
+        bottom: "0",
+        left: "1.5rem"
+      }
+    },
+    border: "0.0625rem solid #cccccc"
+  },
+  Navigation: {
+    shared: {
+      display: "inline-flex",
+      position: "relative",
+      "align-items": "center",
+      cursor: "pointer",
+      "text-decoration": "none",
+      height: "100%",
+      ":disabled": {
+        cursor: "not-allowed",
+        color: "#999999"
+      },
+      padding: {
+        top: "0",
+        right: "1rem",
+        bottom: "0",
+        left: "1rem"
+      },
+      ":focus-visible": {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "-0.0625rem"
+      },
+      "border-top": "0.5rem solid transparent",
+      divider: "0.0625rem solid #cccccc"
+    },
+    text: {
+      margin: {
+        left: "0.375rem"
+      }
+    },
+    menuIndicator: {
+      margin: {
+        top: "0.375rem",
+        left: "0.125rem"
+      }
+    },
+    selected: {
+      color: "#000000",
+      "border-bottom": "0.5rem solid #0072a9"
+    },
+    unselected: {
+      color: "#545454",
+      "border-bottom": "0.5rem solid transparent"
+    },
+    md: {
+      typography: {
+        font: "normal 700 1rem/1.15 Open Sans",
+        letterSpacing: "-0.03125rem",
+        fontWidth: 95
+      }
+    },
+    sm: {
+      typography: {
+        font: "normal 700 0.875rem/1.15 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    }
+  },
   ToolName: {
     display: "flex",
     "align-items": "center",

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

@@ -1,4 +1,98 @@
 const componentTopBar = {
+  "background-color": "#f6f6f6",
+  display: "flex",
+  height: "4rem",
+  "justify-content": "space-between",
+  border: "0.0625rem solid #cccccc",
+  Item: {
+    display: "flex",
+    "align-items": "center",
+    height: "100%",
+    sm: {
+      padding: {
+        top: "0",
+        right: "0.75rem",
+        bottom: "0",
+        left: "0.75rem"
+      }
+    },
+    md: {
+      padding: {
+        top: "0",
+        right: "1rem",
+        bottom: "0",
+        left: "1rem"
+      }
+    },
+    lg: {
+      padding: {
+        top: "0",
+        right: "1.5rem",
+        bottom: "0",
+        left: "1.5rem"
+      }
+    },
+    border: "0.0625rem solid #cccccc"
+  },
+  Navigation: {
+    shared: {
+      display: "inline-flex",
+      position: "relative",
+      "align-items": "center",
+      cursor: "pointer",
+      "text-decoration": "none",
+      height: "100%",
+      ":disabled": {
+        cursor: "not-allowed",
+        color: "#999999"
+      },
+      padding: {
+        top: "0",
+        right: "1rem",
+        bottom: "0",
+        left: "1rem"
+      },
+      ":focus-visible": {
+        outline: "0.125rem solid #0072a9",
+        "outline-offset": "-0.0625rem"
+      },
+      "border-top": "0.5rem solid transparent",
+      divider: "0.0625rem solid #cccccc"
+    },
+    text: {
+      margin: {
+        left: "0.375rem"
+      }
+    },
+    menuIndicator: {
+      margin: {
+        top: "0.375rem",
+        left: "0.125rem"
+      }
+    },
+    selected: {
+      color: "#000000",
+      "border-bottom": "0.5rem solid #0072a9"
+    },
+    unselected: {
+      color: "#545454",
+      "border-bottom": "0.5rem solid transparent"
+    },
+    md: {
+      typography: {
+        font: "normal 700 1rem/1.15 Open Sans",
+        letterSpacing: "-0.03125rem",
+        fontWidth: 95
+      }
+    },
+    sm: {
+      typography: {
+        font: "normal 700 0.875rem/1.15 Open Sans",
+        letterSpacing: "-0.0125rem",
+        fontWidth: 95
+      }
+    }
+  },
   ToolName: {
     display: "flex",
     "align-items": "center",

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": {