procode-vs-theme 2.2.0 → 2.4.0

package/src/components/_alert.scss

@@ -0,0 +1,83 @@
+@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/variants" as vr;
+
+// Alerts / inline banners
+//
+//   <div class="qo-alert qo-alert-info">
+//     <i class="qo-alert-icon fa-solid fa-circle-info"></i>
+//     Lite User Role cannot be edited.
+//   </div>
+
+.qo-alert {
+  padding: 9px sp.$space-3;
+  display: flex;
+  align-items: center;
+  gap: sp.$space-2;
+  border: bo.$border-width-sm solid transparent;
+  border-radius: bo.$border-radius-sm;
+  background-color: cl.$background-info-soft;
+  color: cl.$text-info;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-sm;
+  font-weight: ft.$font-weight-medium;
+  line-height: ft.$line-height-sm;
+
+  &.qo-alert-block { align-items: flex-start; }
+  &.qo-alert-lg { padding: sp.$space-3 sp.$space-4; font-size: ft.$font-size-md; }
+
+  // Tint fill + ink, for every semantic and status variant.
+  @each $name, $spec in vr.$tint-variants {
+    &.qo-alert-#{$name} {
+      background-color: map.get($spec, soft);
+      color: map.get($spec, ink);
+    }
+  }
+
+  // Outlined form, for a banner that must not read as a filled block.
+  @each $name, $spec in vr.$variants {
+    &.qo-alert-outline-#{$name} {
+      background-color: transparent;
+      border-color: map.get($spec, base);
+      color: map.get($spec, ink);
+    }
+  }
+
+  // Left accent stripe.
+  @each $name, $spec in vr.$variants {
+    &.qo-alert-accent-#{$name} {
+      border-left: bo.$border-width-lg solid map.get($spec, base);
+    }
+  }
+}
+
+.qo-alert-icon {
+  flex: 0 0 auto;
+  font-size: ft.$font-size-lg;
+  line-height: 1;
+}
+
+.qo-alert-title {
+  display: block;
+  margin-bottom: 2px;
+  font-weight: ft.$font-weight-semibold;
+}
+
+// Dismiss affordance — an alert that can be closed needs a real button.
+.qo-alert-close {
+  margin-left: auto;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font-size: ft.$font-size-lg;
+  line-height: 1;
+  cursor: pointer;
+  opacity: 0.7;
+
+  &:hover { opacity: 1; }
+  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; border-radius: bo.$border-radius-sm; }
+}

package/src/components/_badge.scss

@@ -0,0 +1,100 @@
+@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;
+
+// Badges / pills
+//
+//   <span class="qo-badge qo-badge-success">Active</span>
+//   <span class="qo-badge qo-badge-system">System</span>
+//
+// Tint fill + matching ink by default — that is the listing page's treatment
+// for user type, status and role origin. `qo-badge-solid-*` gives the filled
+// form for the cases that need more weight.
+
+$badge-sizes: (
+  sm: (20px, sp.$space-2, ft.$font-size-xxs),
+  md: (sz.$badge-height, sp.$space-3, ft.$font-size-xs),
+  lg: (28px, sp.$space-3, ft.$font-size-sm),
+) !default;
+
+.qo-badge {
+  min-height: sz.$badge-height;
+  padding: 0 sp.$space-3;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: sp.$space-1;
+  border: bo.$border-width-sm solid transparent;
+  border-radius: bo.$border-radius-pill;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-xs;
+  font-weight: ft.$font-weight-semibold;
+  line-height: 1;
+  white-space: nowrap;
+
+  @each $name, $spec in $badge-sizes {
+    &.qo-badge-#{$name} {
+      min-height: nth($spec, 1);
+      padding: 0 nth($spec, 2);
+      font-size: nth($spec, 3);
+    }
+  }
+
+  &.qo-badge-square { border-radius: bo.$border-radius-sm; }
+  // Status pills sit in a grid column and read better at one width.
+  &.qo-badge-fixed { min-width: 84px; }
+
+  // ---- tint (default) — every semantic and every status ----
+  @each $name, $spec in vr.$tint-variants {
+    &.qo-badge-#{$name} {
+      background-color: map.get($spec, soft);
+      color: map.get($spec, ink);
+    }
+  }
+
+  // ---- solid ----
+  @each $name, $spec in vr.$variants {
+    &.qo-badge-solid-#{$name} {
+      background-color: map.get($spec, base);
+      color: map.get($spec, on);
+    }
+  }
+
+  // ---- outline ----
+  @each $name, $spec in vr.$variants {
+    &.qo-badge-outline-#{$name} {
+      background-color: transparent;
+      border-color: map.get($spec, base);
+      color: map.get($spec, ink);
+    }
+  }
+
+  // A badge used as a filter chip is interactive; everything else is not.
+  &.qo-badge-action {
+    cursor: pointer;
+    transition: filter 0.2s ease, box-shadow 0.2s ease;
+    &:hover { filter: brightness(0.96); }
+    &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
+  }
+}
+
+// A small count bubble — the "3" on a filter button.
+.qo-badge-dot {
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: bo.$border-radius-pill;
+  background-color: cl.$background-danger;
+  color: cl.$text-light;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-xxs;
+  font-weight: ft.$font-weight-bold;
+  line-height: 1;
+}