Initial commit to github

styles/blocks/buttons.css

@@ -0,0 +1,158 @@
+/* Button styles */
+
+@theme {
+  /* Configuration */
+
+  /**
+    * Button component settings
+    *
+    * The variables below are used to define the button styles.
+    * Most of these variables come from the main theme configuration.
+    * The following variables are not defined, but have fallback values
+    * in their respective locations and can be added if needed:
+    *
+    * --button-font-weight   (fallback is 600/semibold)
+    * --button-font-size     (fallback is 1rem)
+    * --button-outline-width (fallback is --button-border-width)
+    * --button-outline-style (fallback is --button-border-style)
+    * --button-outline-color (fallback is --button-border-color)
+    */
+
+  --button-bg:                 var(--color-primary);
+  --button-color:              var(--color-white);
+  --button-hover-bg:           var(--color-info);
+  --button-hover-border-color: var(--color-info);
+  --button-hover-color:        var(--color-white);
+  --button-border-width:       3px;
+  --button-border-style:       solid;
+  --button-border-color:       var(--button-bg);
+  --button-radius:             0.5rem;
+}
+
+.btn, .button, .acf-block-preview .button {
+  @apply px-8 py-2 min-w-0;
+
+  background: var(--button-bg);
+  color:      var(--button-color);
+  cursor:     pointer;
+  display:    inline-block;
+  transition: background 200ms, border-color 200ms, color 200ms;
+
+  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, 600);
+  font-size:       var(--button-font-size, 1rem);
+  line-height:     1.1;
+
+  &[data-button-variant="outline"] {
+    background: transparent;
+    &:hover { background: transparent; }
+
+    --button-color:              var(--button-outline-color, var(--button-bg));
+    --button-hover-border-color: var(--button-hover-bg);
+    --button-hover-color:        var(--button-hover-bg);
+  }
+}
+
+/* Hover/focus/active */
+.btn:hover, .button:hover, .acf-block-preview .button:hover {
+  background:   var(--button-hover-bg);
+  border-color: var(--button-hover-border-color);
+  color:        var(--button-hover-color);
+}
+
+.btn:focus, .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: calc(var(--button-border-width) * 2);
+}
+
+.btn:active, .button:active { transform: scale(99%); }
+
+/**
+  * Variants
+  *
+  * The following styles are used to define button variants.
+  * These styles are applied to the button element using the
+  * `data-button-*` attributes.
+  */
+
+/* Sizes */
+.btn[data-button-size="small"], .button[data-button-size="small"]  { @apply px-4 py-0.5; }
+.btn[data-button-size="medium"], .button[data-button-size="medium"] { @apply px-8 py-2; }
+.btn[data-button-size="large"], .button[data-button-size="large"]  { @apply px-12 py-3; }
+
+/* Width */
+.btn[data-button-width="auto"], .button[data-button-width="auto"]  { @apply min-w-0; }
+.btn[data-button-width="small"], .button[data-button-width="small"] { @apply px-2; }
+.btn[data-button-width="wide"], .button[data-button-width="wide"]  { @apply sm:min-w-[20rem]; }
+.button[data-button-width="full"],
+x-button:has(.button[data-button-width="full"]) { @apply w-full; }
+
+/**
+ * Colors
+ *
+ * We don't need to speicifcally target "primary" buttons
+ * as the button styling defaults to "primary".
+ * However, you can, if necessary, by adding a style block
+ * like the ones below and changing the color values.
+ */
+.btn[data-button-color="secondary"], .button[data-button-color="secondary"] {
+  --button-bg:                 var(--color-secondary);
+  --button-color:              var(--color-white);
+  --button-border-color:       var(--color-secondary);
+  --button-outline-color:      oklch(0.48 0.0136 252.2);
+  --button-hover-bg:           var(--color-dark);
+  --button-hover-border-color: var(--color-dark);
+  --button-hover-color:        var(--color-white);
+}
+
+.btn[data-button-color="light"], .button[data-button-color="light"] {
+  --button-bg:                 var(--color-white);
+  --button-color:              var(--color-dark);
+  --button-border-color:       var(--color-white);
+  --button-hover-bg:           var(--color-dark);
+  --button-hover-border-color: var(--color-dark);
+  --button-hover-color:        var(--color-white);
+}
+
+.btn[data-button-color="white"], .button[data-button-color="white"] {
+  --button-bg:                 var(--color-white);
+  --button-color:              var(--color-black);
+  --button-border-color:       var(--color-white);
+  --button-hover-bg:           var(--color-secondary-200);
+  --button-hover-border-color: var(--color-secondary-200);
+  --button-hover-color:        var(--color-black);
+}
+
+.btn[data-button-color="black"], .button[data-button-color="black"] {
+  --button-bg:                 var(--color-black);
+  --button-color:              var(--color-white);
+  --button-border-color:       var(--color-black);
+  --button-hover-bg:           var(--color-secondary);
+  --button-hover-border-color: var(--color-secondary);
+  --button-hover-color:        var(--color-dark);
+}
+
+.back-to-top {
+  background: var(--color-primary, #3857BC);
+  color: #fff;
+  border: none;
+  border-radius: 2em;
+  padding: 0.75em 1.5em;
+  font-size: 1.1rem;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  cursor: pointer;
+  transition: opacity 0.2s, background 0.2s;
+  opacity: 0.85;
+}
+.back-to-top:hover, .back-to-top:focus {
+  background: var(--color-info, #233a7a);
+  opacity: 1;
+  outline: 2px solid var(--color-info, #233a7a);
+}