Update button style

src/_includes/partials/skip-link.html

@@ -1 +1 @@
-<a href="#main-content" class="btn">Skip to main content</a>
+<a href="#main-content" class="button">Skip to main content</a>

src/css/components/button.css

@@ -1,40 +1,72 @@
-button,
+.button {
-.btn {
+  --button-bg: #342a21;
-  --hover: rgba(var(--neutral-highest), 0.8);
+  --button-color: #ffffff;
-  --active: rgba(var(--neutral-highest), 0.8);
+  --button-hover-bg: #4b4b4a;
-  cursor: pointer;
+  --button-hover-color: #ffffff;
-  border-radius: var(--border-radius);
+  --button-border-width: 3px;
-  width: fit-content;
+  --button-border-style: solid;
-  max-width: 100%;
+  --button-border-color: var(--button-bg);
-  min-height: 2.5rem;
+  --button-radius: 0.5em;
-  max-height: none;
+
-  color: rgb(var(--neutral-lower));
-  background-color: var(--text);
-  font-size: 1rem;
-  line-height: 1.5rem;
-  font-weight: var(--font-weight-semibold);
-  font-stretch: var(--font-stretch, condensed);
-  border: none;
-  flex-direction: row;
-  align-items: center;
-  padding: 0.5rem 1rem;
-  text-decoration: none;
-  transition: background-color 0.1s ease-in-out;
   display: inline-flex;
+  align-items: center;
+  gap: var(--button-gap, 0.5em);
+  padding: var(--button-padding, 0.7em 1.2em);
+
+  background: var(--button-bg);
+  color: var(--button-color);
+
+  border-width: var(--button-border-width);
+  border-style: var(--button-border-style);
+  border-color: var(--button-border-color);
+  border-radius: var(--button-radius);
+
+  text-decoration: none;
+  font-weight: var(--button-font-weight, 700);
+  font-size: var(--button-font-size, 1em);
+  letter-spacing: 0.05ch;
+  font-family: sans-serif;
+  line-height: 1.1; /* Set or buttons will be different sizes (<a>/<button>) */
+
+  cursor: pointer;
 }
-button:disabled,
+
-.btn:disabled {
+.button svg {
-  --hover: inherit;
+  height: var(--button-icon-size, 1.2cap);
-  --active: inherit;
+  width: auto;
-  color: #929292;
+  flex: none;
-  cursor: not-allowed;
-  background-color: #e5e5e5;
 }
-button:not(:disabled):hover,
+
-.btn:not(:disabled):hover {
+/* Hover/focus/active */
-  background-color: var(--hover);
+.button:hover {
+  background: var(--button-hover-bg);
+  color: var(--button-hover-color);
+}
+
+.button:focus {
+  outline-width: var(--button-outline-width, var(--button-border-width));
+  outline-style: var(--button-outline-style, var(--button-border-style));
+  outline-color: var(--button-outline-color, var(--button-border-color));
+  outline-offset: var(
+    --button-outline-offset,
+    calc(var(--button-border-width) * 2)
+  );
+}
+
+.button:active {
+  transform: scale(99%);
+}
+
+/* Variants */
+.button[data-button-variant="negative"] {
+  --button-bg: #b33c48;
+  --button-border-color: #a62f3d;
+  --button-hover-bg: #c24a56;
+}
+
+/* Ghost buttons */
+.button[data-ghost-button] {
+  --button-bg: transparent;
+  --button-border-color: currentColor;
+  --button-color: currentColor;
 }
-button:not(:disabled):active,
-.btn:not(:disabled):active {
-  background-color: var(--active);
-}

src/css/components/download.css

@@ -3,7 +3,4 @@
 }
 .download p {
   font-size: 1.4rem;
-}
-.btn-download {
-  color: rgb(var(--brand-secondary-lower));
 }

src/pages/sections/download.liquid

@@ -7,5 +7,5 @@ order: 4
 <div class="flex justify-center items-center download">
     <p>Vous souhaitez imprimer ce document ?</p>
     <i>--></i>
-    <button type="button" onclick="window.print()" class="btn btn-download icon--right icon-download">Télécharger en PDF</button>
+    <button type="button" onclick="window.print()" class="button icon--right icon-download">Télécharger en PDF</button>
 </div>