procode-vs-theme 2.2.0 → 2.4.0

package/src/components/_buttons.scss

@@ -1,420 +1,189 @@
-@use "sass:color";
-@use "../base/mixins/font_size-mx" as mx;
-@use "../base/font" as ft;
-@use "../base/color" as cl;
-@use "../base/border" as bo;
-
-$btn-padding-xs: 5.5px !default;
-$btn-padding-md: 8px !default;
-$btn-padding-xl: 16px !default;
-
-.qo-btn {
-  display: inline-block;
-  border-radius: bo.$border-radius-sm;
-
-  &.qo-btn-full {
-    display: block;
-    border-radius: bo.$border-radius-sm;
-    width: 100%;
-    padding: $btn-padding-xl;
-    @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
-  }
-
-  &.qo-btn-xs {
-    padding: $btn-padding-xs;
-    @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
-  }
-
-  &.qo-btn-md {
-    padding: $btn-padding-md;
-    @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
-  }
-
-  &.qo-btn-primary {
-    background-color: cl.$background-primary;
-    border: bo.$border-width-sm solid cl.$border-primary;
-    color: cl.$text-light;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-
-    &:hover {
-      background-color: color.adjust(cl.$background-primary, $lightness: -8%);
-      border-color: color.adjust(cl.$border-primary, $lightness: -8%);
-    }
-
-    &:active {
-      background-color: color.adjust(cl.$background-primary, $lightness: -12%);
-      border-color: color.adjust(cl.$border-primary, $lightness: -12%);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-primary;
-      color: cl.$border-primary;
-      &:hover {
-        background-color: cl.$background-primary;
-        border-color: cl.$border-primary;
-        color: cl.$border-primary;
-      }
-    }
-  }
-
-  &.qo-btn-default {
-    background-color: cl.$background-default;
-    border: bo.$border-width-sm solid cl.$border-default;
-    color: cl.$text-dark;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-
-    &:hover {
-      background-color: cl.$background-secondary;
-      border-color: cl.$border-secondary;
-    }
-
-    &:active {
-      background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
-      border-color: cl.$border-secondary;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-default;
-      color: cl.$border-default;
-      &:hover {
-        background-color: cl.$background-default;
-        border-color: cl.$border-default;
-        color: cl.$border-default;
-      }
-    }
-  }
-
-  &.qo-btn-danger {
-    background-color: cl.$background-danger;
-    border: bo.$border-width-sm solid cl.$border-danger;
-    color: cl.$text-danger;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-
-    &:hover {
-      background-color: color.change(cl.$background-danger, $alpha: 0.06);
-    }
-
-    &:active {
-      background-color: color.change(cl.$background-danger, $alpha: 0.12);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-danger;
-      color: cl.$border-danger;
-
-      &:hover {
-        background-color: cl.$background-danger;
-        border-color: cl.$border-danger;
-        color: cl.$border-danger;
-      }
-    }
-  }
-
-  &.qo-btn-success {
-    background-color: cl.$background-success;
-    border: bo.$border-width-sm solid cl.$border-success;
-    color: cl.$text-light;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-
-    &:hover {
-      background-color: color.adjust(cl.$background-success, $lightness: -8%);
-      border-color: color.adjust(cl.$border-success, $lightness: -8%);
-    }
-
-    &:active {
-      background-color: color.adjust(cl.$background-success, $lightness: -12%);
-      border-color: color.adjust(cl.$border-success, $lightness: -12%);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-success;
-      color: cl.$border-success;
-
-      &:hover {
-        background-color: cl.$background-success;
-        border-color: cl.$border-success;
-        color: cl.$border-success;
-      }
-    }
-  }
-
-  &.qo-btn-warning {
-    background-color: cl.$background-warning;
-    border: bo.$border-width-sm solid cl.$border-warning;
-    color: cl.$text-light;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-
-    &:hover {
-      background-color: color.adjust(cl.$background-warning, $lightness: -8%);
-      border-color: color.adjust(cl.$border-warning, $lightness: -8%);
-    }
-
-    &:active {
-      background-color: color.adjust(cl.$background-warning, $lightness: -12%);
-      border-color: color.adjust(cl.$border-warning, $lightness: -12%);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-warning;
-      color: cl.$border-warning;
-
-      &:hover {
-        background-color: cl.$background-warning;
-        border-color: cl.$border-warning;
-        color: cl.$border-warning;
-      }
-    }
-  }
-
-  &.qo-btn-info {
-    background-color: cl.$background-info;
-    border: bo.$border-width-sm solid cl.$border-info;
-    color: cl.$text-light;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease;
-
-    &:hover {
-      background-color: color.adjust(cl.$background-info, $lightness: -8%);
-      border-color: color.adjust(cl.$border-info, $lightness: -8%);
-    }
-
-    &:active {
-      background-color: color.adjust(cl.$background-info, $lightness: -12%);
-      border-color: color.adjust(cl.$border-info, $lightness: -12%);
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-info;
-      color: cl.$border-info;
-
-      &:hover {
-        background-color: cl.$background-info;
-        border-color: cl.$border-info;
-        color: cl.$border-info;
-      }
-    }
-  }
-
-  // Outline variants: transparent bg + colored border/text → hover fills color + white text
-
-  &.qo-btn-outline-primary {
-    background-color: transparent;
-    border: bo.$border-width-sm solid cl.$border-primary;
-    color: cl.$text-primary;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease,
-      color 0.2s ease;
-
-    &:hover {
-      background-color: cl.$background-primary;
-      border-color: cl.$border-primary;
-      color: cl.$text-light;
-    }
-
-    &:active {
-      background-color: color.adjust(cl.$background-primary, $lightness: -8%);
-      border-color: color.adjust(cl.$border-primary, $lightness: -8%);
-      color: cl.$text-light;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-primary;
-      color: cl.$border-primary;
-
-      &:hover {
-        background-color: transparent;
-        border-color: cl.$border-primary;
-        color: cl.$border-primary;
-      }
-    }
-  }
-
-  &.qo-btn-outline-default {
-    background-color: transparent;
-    border: bo.$border-width-sm solid cl.$border-default;
-    color: cl.$text-light;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease,
-      color 0.2s ease;
-
-    &:hover {
-      background-color: cl.$background-secondary;
-      border-color: cl.$border-secondary;
-      color: color.adjust(cl.$text-dark, $lightness: 20%);
-    }
-
-    &:active {
-      background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
-      border-color: cl.$border-secondary;
-      color: cl.$text-light;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-default;
-      color: cl.$border-default;
-
-      &:hover {
-        background-color: transparent;
-        border-color: cl.$border-default;
-        color: cl.$border-default;
-      }
-    }
-  }
-
-  &.qo-btn-outline-danger {
-    background-color: transparent;
-    border: bo.$border-width-sm solid cl.$border-danger;
-    color: cl.$text-danger;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease,
-      color 0.2s ease;
-
-    &:hover {
-      background-color: cl.$background-danger;
-      border-color: cl.$border-danger;
-      color: cl.$text-light;
-    }
-
-    &:active {
-      background-color: color.adjust(cl.$background-danger, $lightness: -8%);
-      border-color: color.adjust(cl.$border-danger, $lightness: -8%);
-      color: cl.$text-light;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-danger;
-      color: cl.$border-danger;
-
-      &:hover {
-        background-color: transparent;
-        border-color: cl.$border-danger;
-        color: cl.$border-danger;
-      }
-    }
-  }
-
-  &.qo-btn-outline-success {
-    background-color: transparent;
-    border: bo.$border-width-sm solid cl.$border-success;
-    color: cl.$text-success;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease,
-      color 0.2s ease;
-
-    &:hover {
-      background-color: cl.$background-success;
-      border-color: cl.$border-success;
-      color: cl.$text-light;
-    }
-
-    &:active {
-      background-color: color.adjust(cl.$background-success, $lightness: -8%);
-      border-color: color.adjust(cl.$border-success, $lightness: -8%);
-      color: cl.$text-light;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-success;
-      color: cl.$border-success;
-
-      &:hover {
-        background-color: transparent;
-        border-color: cl.$border-success;
-        color: cl.$border-success;
-      }
-    }
-  }
-
-  &.qo-btn-outline-warning {
-    background-color: transparent;
-    border: bo.$border-width-sm solid cl.$border-warning;
-    color: cl.$text-warning;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease,
-      color 0.2s ease;
-
-    &:hover {
-      background-color: cl.$background-warning;
-      border-color: cl.$border-warning;
-      color: cl.$text-light;
-    }
-
-    &:active {
-      background-color: color.adjust(cl.$background-warning, $lightness: -8%);
-      border-color: color.adjust(cl.$border-warning, $lightness: -8%);
-      color: cl.$text-light;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-warning;
-      color: cl.$border-warning;
-
-      &:hover {
-        background-color: transparent;
-        border-color: cl.$border-warning;
-        color: cl.$border-warning;
-      }
-    }
-  }
-
-  &.qo-btn-outline-info {
-    background-color: transparent;
-    border: bo.$border-width-sm solid cl.$border-info;
-    color: cl.$text-info;
-    cursor: pointer;
-    transition: background-color 0.2s ease, border-color 0.2s ease,
-      color 0.2s ease;
-
-    &:hover {
-      background-color: cl.$background-info;
-      border-color: cl.$border-info;
-      color: cl.$text-light;
-    }
-
-    &:active {
-      background-color: color.adjust(cl.$background-info, $lightness: -8%);
-      border-color: color.adjust(cl.$border-info, $lightness: -8%);
-      color: cl.$text-light;
-    }
-
-    &:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-      border-color: cl.$border-info;
-      color: cl.$border-info;
-
-      &:hover {
-        background-color: transparent;
-        border-color: cl.$border-info;
-        color: cl.$border-info;
-      }
-    }
-  }
-}
+@use "sass:map";
+@use "../base/color" as cl;
+@use "../base/border" as bo;
+@use "../base/font" as ft;
+@use "../base/space" as sp;
+@use "../base/size" as sz;
+@use "../base/variants" as vr;
+
+// Buttons
+//
+// Bootstrap-shaped: one base class plus a variant class, e.g.
+//   <button class="qo-btn qo-btn-primary">
+//   <button class="qo-btn qo-btn-outline-danger qo-btn-sm">
+//
+// Every variant carries its own :hover, :active, :focus-visible and :disabled
+// states — there are no separate state classes to add.
+//
+// Four families are generated from `$variants` (base/2.3.0):
+//   qo-btn-<v>          solid fill
+//   qo-btn-outline-<v>  transparent, coloured border, fills on hover
+//   qo-btn-soft-<v>     tint fill, deepens on hover
+//   qo-btn-link-<v>     text only, underlines on hover
+
+$btn-padding-x: sp.$space-4 !default;  // 16px
+$btn-padding-x-sm: sp.$space-3 !default;
+$btn-gap: sp.$space-2 !default;
+
+// Size ramp: (height, horizontal padding, font-size, line-height)
+$btn-sizes: (
+  xs: (24px, sp.$space-2, ft.$font-size-xs, ft.$line-height-xs),
+  sm: (sz.$control-height-sm, $btn-padding-x-sm, ft.$font-size-sm, ft.$line-height-sm),
+  md: (sz.$control-height, $btn-padding-x, ft.$font-size-md, ft.$line-height-md),
+  lg: (48px, sp.$space-5, ft.$font-size-lg, ft.$line-height-lg),
+) !default;
+
+.qo-btn {
+  min-height: sz.$control-height;
+  padding: 0 $btn-padding-x;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $btn-gap;
+  border: bo.$border-width-sm solid transparent;
+  border-radius: bo.$border-radius-md;
+  background: transparent;
+  color: cl.$text-dark;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-md;
+  font-weight: ft.$font-weight-medium;
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease,
+    color 0.2s ease, box-shadow 0.2s ease;
+
+  // The one focus treatment for every button. `:focus-visible` so a mouse
+  // click does not leave a ring behind, which is why the old hand-rolled
+  // `:focus` rings were being removed screen by screen.
+  &:focus-visible {
+    outline: 0;
+    box-shadow: cl.$focus-ring;
+  }
+
+  &:disabled,
+  &.qo-disabled {
+    opacity: 0.48;
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  // ---- sizes ----
+  @each $name, $spec in $btn-sizes {
+    &.qo-btn-#{$name} {
+      min-height: nth($spec, 1);
+      padding: 0 nth($spec, 2);
+      font-size: nth($spec, 3);
+    }
+  }
+
+  // Square icon-only button — one per size, so an icon button always lines up
+  // with the text button beside it.
+  &.qo-btn-icon {
+    width: sz.$control-height;
+    padding: 0;
+    @each $name, $spec in $btn-sizes {
+      &.qo-btn-#{$name} { width: nth($spec, 1); }
+    }
+  }
+
+  &.qo-btn-full {
+    display: flex;
+    width: 100%;
+  }
+
+  &.qo-btn-pill { border-radius: bo.$border-radius-pill; }
+  &.qo-btn-square { border-radius: bo.$border-radius-0; }
+
+  // ---- solid ----
+  @each $name, $spec in vr.$variants {
+    &.qo-btn-#{$name} {
+      background-color: map.get($spec, base);
+      border-color: if($name == default, cl.$border-default, map.get($spec, base));
+      color: map.get($spec, on);
+
+      &:hover:not(:disabled):not(.qo-disabled) {
+        background-color: map.get($spec, hover);
+        border-color: if($name == default, cl.$border-secondary, map.get($spec, hover));
+      }
+      &:active:not(:disabled):not(.qo-disabled) {
+        background-color: map.get($spec, active);
+        border-color: if($name == default, cl.$border-secondary, map.get($spec, active));
+      }
+    }
+  }
+
+  // ---- outline ----
+  @each $name, $spec in vr.$variants {
+    &.qo-btn-outline-#{$name} {
+      background-color: transparent;
+      border-color: if($name == default, cl.$border-default, map.get($spec, base));
+      // `ink` rather than `base`: a pale variant's own fill is unreadable as
+      // text on a white page. This is what made `qo-btn-outline-default`
+      // invisible before 2.3.0 — it used $text-light on a transparent ground.
+      color: map.get($spec, ink);
+
+      &:hover:not(:disabled):not(.qo-disabled) {
+        background-color: map.get($spec, base);
+        border-color: map.get($spec, base);
+        color: map.get($spec, on);
+      }
+      &:active:not(:disabled):not(.qo-disabled) {
+        background-color: map.get($spec, active);
+        border-color: map.get($spec, active);
+        color: map.get($spec, on);
+      }
+    }
+  }
+
+  // ---- soft / tint ----
+  @each $name, $spec in vr.$variants {
+    &.qo-btn-soft-#{$name} {
+      background-color: map.get($spec, soft);
+      border-color: transparent;
+      color: map.get($spec, ink);
+
+      &:hover:not(:disabled):not(.qo-disabled) {
+        background-color: map.get($spec, base);
+        color: map.get($spec, on);
+      }
+      &:active:not(:disabled):not(.qo-disabled) {
+        background-color: map.get($spec, active);
+        color: map.get($spec, on);
+      }
+    }
+  }
+
+  // ---- link ----
+  @each $name, $spec in vr.$variants {
+    &.qo-btn-link-#{$name} {
+      min-height: auto;
+      padding: 0;
+      background: transparent;
+      border-color: transparent;
+      color: map.get($spec, ink);
+
+      &:hover:not(:disabled):not(.qo-disabled) {
+        color: map.get($spec, hover);
+        text-decoration: underline;
+      }
+      &:active:not(:disabled):not(.qo-disabled) { color: map.get($spec, active); }
+    }
+  }
+}
+
+// A button group — adjacent buttons sharing one outline.
+.qo-btn-group {
+  display: inline-flex;
+  align-items: center;
+
+  > .qo-btn {
+    border-radius: 0;
+    &:first-child { border-radius: bo.$border-radius-md 0 0 bo.$border-radius-md; }
+    &:last-child { border-radius: 0 bo.$border-radius-md bo.$border-radius-md 0; }
+    &:only-child { border-radius: bo.$border-radius-md; }
+    &:not(:first-child) { margin-left: -#{bo.$border-width-sm}; }
+    &:hover, &:focus-visible { z-index: 1; }
+  }
+}