procode-vs-theme 2.1.0 → 2.4.0

package/src/components/_cards.scss

@@ -0,0 +1,130 @@
+@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;
+
+// Cards
+//
+//   <div class="qo-card"> … </div>
+//   <div class="qo-card qo-card-hover qo-card-primary"> … </div>
+
+.qo-card {
+  display: block;
+  padding: sp.$space-3 sp.$space-4;
+  background-color: cl.$background-default;
+  border: bo.$border-width-sm solid cl.$border-default;
+  border-radius: bo.$border-radius-md;
+  box-shadow: cl.$shadow-sm;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+
+  &.qo-card-flat { box-shadow: none; }
+  &.qo-card-soft { border-color: cl.$border-light; }
+  &.qo-card-plain { border: 0; box-shadow: none; }
+  &.qo-card-pad-0 { padding: 0; }
+  &.qo-card-pad-sm { padding: sp.$space-2 sp.$space-3; }
+  &.qo-card-pad-lg { padding: sp.$space-4 sp.$space-5; }
+
+  // Only an interactive card gets hover/focus affordance.
+  &.qo-card-hover {
+    cursor: pointer;
+    &:hover { box-shadow: cl.$shadow-md; border-color: cl.$border-secondary; }
+    &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
+  }
+
+  // A left accent stripe in any semantic colour.
+  @each $name, $spec in vr.$variants {
+    &.qo-card-#{$name} {
+      border-left: bo.$border-width-lg solid map.get($spec, base);
+    }
+  }
+}
+
+.qo-card-header {
+  padding-bottom: sp.$space-3;
+  margin-bottom: sp.$space-3;
+  border-bottom: bo.$border-width-sm solid cl.$border-light;
+  color: cl.$text-darker;
+  font-size: ft.$font-size-lg;
+  font-weight: ft.$font-weight-semibold;
+}
+
+.qo-card-body { display: block; }
+
+.qo-card-footer {
+  padding-top: sp.$space-3;
+  margin-top: sp.$space-3;
+  border-top: bo.$border-width-sm solid cl.$border-light;
+}
+
+// Metric / count card — icon chip, label, value, helper.
+.qo-metric-card {
+  min-height: 88px;
+  padding: sp.$space-3 sp.$space-4;
+  display: flex;
+  align-items: center;
+  gap: sp.$space-3;
+  background-color: cl.$background-default;
+  border: bo.$border-width-sm solid cl.$border-default;
+  border-radius: bo.$border-radius-md;
+  box-shadow: cl.$shadow-sm;
+}
+
+.qo-metric-icon {
+  width: 38px;
+  height: 38px;
+  flex: 0 0 38px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: bo.$border-radius-full;
+  background-color: cl.$background-primary-soft;
+  color: cl.$text-primary;
+  font-size: ft.$font-size-xl;
+
+  // Every tint variant, so a metric chip can be any status colour.
+  @each $name, $spec in vr.$tint-variants {
+    &.qo-metric-icon-#{$name} {
+      background-color: map.get($spec, soft);
+      color: map.get($spec, ink);
+    }
+  }
+}
+
+.qo-metric-label {
+  margin: 0 0 2px;
+  color: cl.$text-darker;
+  font-size: ft.$font-size-sm;
+  font-weight: ft.$font-weight-medium;
+  line-height: ft.$line-height-xxs;
+}
+
+.qo-metric-value {
+  margin: 0;
+  color: cl.$text-darker;
+  font-size: 24px;
+  font-weight: ft.$font-weight-bold;
+  line-height: 1.05;
+}
+
+.qo-metric-helper {
+  margin-top: 3px;
+  color: cl.$text-secondary;
+  font-size: ft.$font-size-xs;
+  font-weight: ft.$font-weight-regular;
+}
+
+// Responsive metric row: 5 → 3 → 1 columns.
+.qo-metrics-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(150px, 1fr));
+  gap: sp.$space-3;
+
+  @media (max-width: 1200px) {
+    grid-template-columns: repeat(3, minmax(180px, 1fr));
+  }
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr;
+  }
+}

package/src/components/_input.scss

@@ -1,32 +1,186 @@
-@use "../base/mixins/font_size-mx" as mx;
-@use "../base/font" as ft;
-@use "../base/color" as cl;
-@use "../base/border" as bo;
-
-$input-padding-xs: 5.5px !default;
-$input-padding-md: 8px !default;
-$input-padding-xl: 16px !default;
-
-.qo-input {
-  display: inline-block;
-  border-radius: bo.$border-radius-sm;
-}
-.qo-input-full {
-  display: block;
-  border-radius: bo.$border-radius-sm;
-  width: 100%;
-  padding: $input-padding-xl;
-  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
-}
-.qo-input-xs {
-  padding: $input-padding-xs;
-  @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
-}
-.qo-input-md {
-  padding: $input-padding-md;
-  @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
-}
-.qo-input-default {
-  background-color: cl.$background-default;
-  border: bo.$border-width-sm solid cl.$border-default;
-}
+@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;
+
+// Form controls
+//
+//   <input class="qo-input" />
+//   <input class="qo-input qo-input-sm qo-input-danger" />
+//
+// One class carries rest, :hover, :focus, :disabled and :read-only. The focus
+// ring is the theme's single `$focus-ring` token, so every control on a screen
+// focuses identically.
+
+$input-sizes: (
+  xs: (24px, sp.$space-2, ft.$font-size-xs),
+  sm: (sz.$control-height-sm, sp.$space-2, ft.$font-size-sm),
+  md: (sz.$control-height, sp.$space-3, ft.$font-size-md),
+  lg: (48px, sp.$space-4, ft.$font-size-lg),
+) !default;
+
+.qo-input {
+  width: 100%;
+  height: sz.$control-height;
+  padding: 0 sp.$space-3;
+  display: inline-flex;
+  align-items: center;
+  border: bo.$border-width-sm solid cl.$border-default;
+  border-radius: bo.$border-radius-md;
+  background-color: cl.$background-default;
+  color: cl.$text-dark;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-md;
+  font-weight: ft.$font-weight-regular;
+  line-height: 1;
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+
+  &::placeholder {
+    color: cl.$text-placeholder;
+    font-family: ft.$font-family-primary;
+    font-weight: ft.$font-weight-regular;
+    // Explicit colour, never reduced opacity — opacity renders inconsistently
+    // across Chrome/Edge/Firefox.
+    opacity: 1;
+  }
+
+  &:hover:not(:disabled):not([readonly]) { border-color: cl.$border-secondary; }
+
+  &:focus,
+  &:focus-visible {
+    outline: 0;
+    border-color: cl.$border-primary;
+    box-shadow: cl.$focus-ring;
+  }
+
+  &:disabled,
+  &.qo-disabled {
+    background-color: cl.$background-disabled;
+    color: cl.$text-default;
+    cursor: not-allowed;
+  }
+
+  &[readonly] {
+    background-color: cl.$background-light;
+    cursor: default;
+  }
+
+  @each $name, $spec in $input-sizes {
+    &.qo-input-#{$name} {
+      height: nth($spec, 1);
+      padding: 0 nth($spec, 2);
+      font-size: nth($spec, 3);
+    }
+  }
+
+  &.qo-input-full { display: flex; width: 100%; }
+  &.qo-input-auto { width: auto; }
+  &.qo-input-pill { border-radius: bo.$border-radius-pill; }
+
+  // Validation states. Each re-colours the border and its own focus ring so
+  // the ring never contradicts the state.
+  @each $name in (success, warning, danger, info) {
+    &.qo-input-#{$name} {
+      border-color: map.get(map.get(vr.$variants, $name), base);
+      &:focus,
+      &:focus-visible {
+        border-color: map.get(map.get(vr.$variants, $name), base);
+        box-shadow: 0 0 0 3px rgba(0, 0, 0, 0);
+        outline: 2px solid map.get(map.get(vr.$variants, $name), soft);
+        outline-offset: 0;
+      }
+    }
+  }
+
+  // A textarea keeps the ramp but must not be pinned to a control height.
+  &.qo-input-textarea {
+    height: auto;
+    min-height: 80px;
+    padding: sp.$space-2 sp.$space-3;
+    line-height: ft.$line-height-md;
+  }
+}
+
+// Retained from 2.2.0 — `qo-input-default` was the only way to get a bordered
+// input before `.qo-input` carried its own border.
+.qo-input-default {
+  background-color: cl.$background-default;
+  border: bo.$border-width-sm solid cl.$border-default;
+}
+
+// Label + help + error, so a field is one block rather than three guesses.
+.qo-label {
+  display: inline-block;
+  margin-bottom: sp.$space-1;
+  color: cl.$text-darker;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-sm;
+  font-weight: ft.$font-weight-semibold;
+
+  &.qo-label-required::after {
+    content: " *";
+    color: cl.$text-danger;
+  }
+}
+
+.qo-help {
+  display: block;
+  margin-top: sp.$space-1;
+  color: cl.$text-secondary;
+  font-size: ft.$font-size-xs;
+}
+
+.qo-field {
+  display: block;
+  & + & { margin-top: sp.$space-3; }
+}
+
+// An input with a leading or trailing icon. The icon is positioned, not
+// padded in by hand, so it cannot drift out of the control.
+.qo-input-group {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+
+  > .qo-input-icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    color: cl.$text-default;
+    font-size: ft.$font-size-md;
+    pointer-events: none;
+  }
+
+  > .qo-input-icon-start { left: sp.$space-3; }
+  > .qo-input-icon-end { right: sp.$space-3; }
+
+  > .qo-input-icon-start ~ .qo-input { padding-left: 38px; }
+  > .qo-input:has(~ .qo-input-icon-end) { padding-right: 38px; }
+
+  // Search is the listing page's most common group: the magnifier is primary
+  // coloured and the control is the full-height one.
+  &.qo-input-group-search > .qo-input-icon { color: cl.$text-primary; }
+}
+
+// Checkbox / radio — sized and coloured, not restyled from scratch.
+.qo-check {
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  accent-color: cl.$background-primary;
+  cursor: pointer;
+
+  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
+  &:disabled { cursor: not-allowed; opacity: 0.45; }
+}
+
+// Native select needs the control ramp plus room for its own arrow.
+.qo-select {
+  @extend .qo-input;
+  padding-right: sp.$space-6;
+  cursor: pointer;
+}

package/src/components/_link.scss

@@ -0,0 +1,34 @@
+@use "sass:map";
+@use "../base/color" as cl;
+@use "../base/border" as bo;
+@use "../base/variants" as vr;
+
+// Links — one class carrying rest, hover, active and focus.
+.qo-link {
+  color: cl.$text-primary;
+  text-decoration: none;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover { color: cl.$text-primary-hover; text-decoration: underline; }
+  &:focus-visible {
+    outline: 0;
+    box-shadow: cl.$focus-ring;
+    border-radius: bo.$border-radius-sm;
+  }
+
+  &.qo-link-muted {
+    color: cl.$text-secondary;
+    &:hover { color: cl.$text-dark; }
+  }
+
+  &.qo-link-underline { text-decoration: underline; }
+  &.qo-link-plain:hover { text-decoration: none; }
+
+  @each $name, $spec in vr.$variants {
+    &.qo-link-#{$name} {
+      color: map.get($spec, ink);
+      &:hover { color: map.get($spec, hover); }
+    }
+  }
+}

package/src/components/_page.scss

@@ -0,0 +1,87 @@
+@use "../base/color" as cl;
+@use "../base/border" as bo;
+@use "../base/font" as ft;
+@use "../base/space" as sp;
+
+// Page shell, header and toolbar — the listing-page layout primitives.
+//
+//   <section class="qo-page">
+//     <header class="qo-page-header"> … </header>
+//     <div class="qo-toolbar"> … </div>
+//   </section>
+
+.qo-page {
+  min-height: 100%;
+  padding: sp.$space-4 sp.$space-5 sp.$space-5;
+  background-color: cl.$background-light;
+  color: cl.$text-dark;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-base;
+  line-height: ft.$line-height-base;
+
+  @media (max-width: 768px) { padding: sp.$space-3; }
+}
+
+.qo-page-header {
+  min-height: 56px;
+  padding: 0 sp.$space-4;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  background-color: cl.$background-default;
+  border: bo.$border-width-sm solid cl.$border-light;
+  border-radius: bo.$border-radius-md bo.$border-radius-md 0 0;
+
+  @media (max-width: 768px) {
+    grid-template-columns: 1fr auto;
+    row-gap: sp.$space-2;
+    padding: sp.$space-2 sp.$space-3;
+  }
+}
+
+.qo-page-title {
+  margin: 0;
+  color: cl.$text-darker;
+  font-size: ft.$font-size-xxl;
+  font-weight: ft.$font-weight-bold;
+  line-height: ft.$line-height-xxs;
+}
+
+.qo-page-subtitle {
+  margin: 0;
+  color: cl.$text-secondary;
+  font-size: ft.$font-size-sm;
+  font-weight: ft.$font-weight-regular;
+}
+
+.qo-page-action { justify-self: end; }
+
+// Toolbar — search + actions, wrapping to its own row when narrow.
+.qo-toolbar {
+  display: flex;
+  align-items: center;
+  gap: sp.$space-2;
+
+  &.qo-toolbar-between { justify-content: space-between; }
+  &.qo-toolbar-end { justify-content: flex-end; }
+  &.qo-toolbar-wrap { flex-wrap: wrap; }
+
+  @media (max-width: 1200px) { flex-wrap: wrap; }
+
+  @media (max-width: 768px) {
+    align-items: stretch;
+    // A text button stretches to fill the row; an icon button keeps its square.
+    > .qo-btn:not(.qo-btn-icon) { flex: 1 1 auto; }
+  }
+}
+
+// The flexible search region inside a toolbar.
+.qo-toolbar-search {
+  position: relative;
+  flex: 1 1 auto;
+  min-width: 280px;
+
+  @media (max-width: 1200px) { flex-basis: 100%; }
+}
+
+.qo-toolbar-spacer { flex: 1 1 auto; }

package/src/components/_pagination.scss

@@ -0,0 +1,71 @@
+@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;
+
+// Pagination
+//
+//   <nav class="qo-pagination">
+//     <button class="qo-page-btn">‹</button>
+//     <button class="qo-page-btn qo-page-btn-active">1</button>
+//   </nav>
+
+.qo-pagination {
+  display: flex;
+  align-items: center;
+  gap: sp.$space-1;
+}
+
+.qo-page-btn {
+  height: sz.$control-height-sm;
+  min-width: sz.$control-height-sm;
+  padding: 0 9px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: bo.$border-width-sm solid cl.$border-light;
+  border-radius: bo.$border-radius-sm;
+  background-color: cl.$background-default;
+  color: cl.$text-dark;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-sm;
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+
+  &:hover:not(:disabled) {
+    background-color: cl.$background-primary-soft;
+    border-color: cl.$border-primary-soft;
+    color: cl.$text-primary;
+  }
+
+  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
+
+  &:disabled {
+    opacity: 0.48;
+    cursor: not-allowed;
+  }
+
+  &.qo-page-btn-active {
+    border-color: cl.$border-primary-soft;
+    background-color: cl.$background-primary-soft;
+    color: cl.$text-primary;
+    font-weight: ft.$font-weight-semibold;
+  }
+}
+
+// The rows-per-page select sits in the same ramp as the page buttons.
+.qo-page-size {
+  height: sz.$control-height-sm;
+  min-width: sz.$control-height-sm;
+  padding: 0 9px;
+  border: bo.$border-width-sm solid cl.$border-light;
+  border-radius: bo.$border-radius-sm;
+  background-color: cl.$background-default;
+  color: cl.$text-dark;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-sm;
+  cursor: pointer;
+
+  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
+}