2025-02-21

src/styles/themes/default/buttons.css

@@ -0,0 +1,54 @@
+button {
+  --button-background-color: var(--color-secondary);
+  --button-border-color: var(--color-primary);
+  --button-font-weight: 100;
+  --button-padding: var(--s-1);
+  --button-text-color: var(--color-primary);
+
+  padding: var(--button-padding);
+  border: 1px solid var(--button-border-color);
+  font-weight: var(--button-font-weight);
+  color: var(--button-text-color);
+  background-color: var(--button-background-color);
+  box-shadow: 4px 4px 0 0 var(--color-primary);
+
+  &:hover {
+    --button-background-color: var(--color-primary);
+    --button-border-color: var(--color-secondary);
+    --button-font-weight: 120;
+    --button-text-color: var(--color-secondary);
+  }
+
+  &:active {
+    transform: translateX(2px) translateY(2px);
+    box-shadow: 1px 1px 0 0 var(--color-primary);
+  }
+
+  &:focus-visible {
+    outline-offset: -0.3rem;
+  }
+
+  /* Inversion des couleurs. */
+  &.invert {
+    --button-background-color: var(--color-primary);
+    --button-border-color: var(--color-secondary);
+    --button-text-color: var(--color-secondary);
+
+    outline-color: var(--color-secondary);
+  }
+
+  /* TODO: Déplacer dans un Composant. */
+  /* Bouton intégré dans un ensemble. */
+  &.integrated {
+    border: initial;
+
+    &:hover {
+      color: var(--color-primary);
+      background: var(--bg75-secondary);
+    }
+
+    &:active {
+      transform: translateX(2px) translateY(2px);
+    }
+  }
+}