Update button styles

src/_includes/partials/components/link.liquid

@@ -4,6 +4,7 @@
   {% if class %}class="{{ class }}"{% endif %}
   {% if title %}title="{{ title }}"
   {% else %}title="{{ label }}"{% endif %}
+  {% if attr %}{{ attr }}{% endif %}
   {% if target %}target="{{ target }}"{% endif %}
   >{% if icon %}{% icon icon %}{% endif %}{% if showLabel == true or  showLabel == nil %}{{ label }}{% endif %}
 </a>

src/_includes/partials/components/socials.liquid

@@ -2,13 +2,13 @@
   {% if socials %}
     {% for social in socials %}
       <li>
-        {% render 'partials/components/link', icon: social.icon, showLabel: showLabel, label: social.title, href: social.link, class: classes, target: "_blank" %}
+        {% render 'partials/components/link', icon: social.icon, showLabel: showLabel, label: social.title, href: social.link, class: "button", attr: "data-ghost-button", target: "_blank" %}
       </li>
     {% endfor %}
     {% if mail %}
       <li>
         {% capture href %}mailto:{{ mail }}{% endcapture %}
-        {% render 'partials/components/link', icon: "mail", showLabel: showLabel, label: "Contactez moi par mail", href: href, class: classes, target: "_blank" %}
+        {% render 'partials/components/link', icon: "mail", showLabel: showLabel, label: "Contactez moi par mail", href: href, class: "button", attr: "data-ghost-button", target: "_blank" %}
       </li>
     {% endif %}
   {% endif %}

src/css/components/button.css

@@ -43,7 +43,7 @@
   color: var(--button-hover-color);
 }
 
-.button:focus {
+.button:focus:focus-visible {
   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));
@@ -64,9 +64,17 @@
   --button-hover-bg: #c24a56;
 }
 
-/* Ghost buttons */
-.button[data-ghost-button] {
+/* Outline buttons */
+.button[data-outline-button] {
   --button-bg: transparent;
   --button-border-color: currentColor;
   --button-color: currentColor;
 }
+
+/* Ghost buttons */
+.button[data-ghost-button] {
+  --button-bg: transparent;
+  --button-border-color: transparent;
+  --button-color: currentColor;
+  --button-padding: .2em .4em;
+}

src/css/components/socials-list.css

@@ -1,19 +1,11 @@
 .socials-list {
   gap: 0.2rem;
   margin-block-start: 1rem;
+  --button-icon-size: 1.2em;
 }
 .socials-list--label {
-  gap: 2rem;
+  gap: .6rem;
 }
 .socials-list--label a {
-  --item-color: black;
-  --icon-color: #262626;
-  text-underline-offset: 0.25rem;
-  font-weight: 500;
-  -webkit-text-decoration: underline #262626;
-  text-decoration: underline #262626;
-}
-.socials-list--label a:hover {
-  --item-color: var(--text-2);
-  --icon-color: var(--text-2);
+  --button-font-weight: 600;
 }