procode-vs-theme 2.2.0 → 2.4.0

package/dist/src/components/_table.scss

@@ -0,0 +1,171 @@
+@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;
+
+// Data grid
+//
+//   <div class="qo-grid-shell">
+//     <div class="qo-grid-scroll">
+//       <table class="qo-table">
+//         <thead><tr class="qo-table-header">…</tr>
+//                <tr class="qo-table-filter">…</tr></thead>
+//         <tbody>…</tbody>
+//       </table>
+//     </div>
+//     <div class="qo-grid-footer">…</div>
+//   </div>
+//
+// Row heights come from the component-height tokens, so a grid lines up with
+// the toolbar above it without either side re-deciding.
+
+.qo-grid-shell {
+  overflow: hidden;
+  background-color: cl.$background-default;
+  border: bo.$border-width-sm solid cl.$border-light;
+  border-radius: bo.$border-radius-md;
+  box-shadow: cl.$shadow-sm;
+}
+
+// Horizontal scroll rather than squeezing columns until text is unreadable.
+.qo-grid-scroll {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.qo-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  color: cl.$text-dark;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-md;
+
+  th,
+  td {
+    border-right: bo.$border-width-sm solid cl.$border-light;
+    border-bottom: bo.$border-width-sm solid cl.$border-light;
+  }
+
+  tr > *:last-child { border-right: 0; }
+  tbody tr:last-child td { border-bottom: 0; }
+
+  tbody tr {
+    height: sz.$grid-row-height;
+    transition: background-color 0.15s ease;
+  }
+
+  tbody tr:hover { background-color: cl.$background-hover; }
+
+  tbody td {
+    padding: sp.$space-3;
+    background: inherit;
+    vertical-align: middle;
+    font-size: ft.$font-size-md;
+    font-weight: ft.$font-weight-regular;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+  }
+
+  // Variants
+  &.qo-table-auto { table-layout: auto; }
+  &.qo-table-borderless th,
+  &.qo-table-borderless td { border: 0; }
+  &.qo-table-striped tbody tr:nth-child(even) { background-color: cl.$background-light; }
+  &.qo-table-compact tbody tr { height: sz.$grid-filter-height; }
+  &.qo-table-compact tbody td { padding: sp.$space-2; }
+  &.qo-table-static tbody tr:hover { background-color: transparent; }
+}
+
+.qo-table-header th {
+  height: sz.$grid-header-height;
+  padding: 0 sp.$space-3;
+  background-color: cl.$background-header;
+  color: cl.$text-dark;
+  text-align: left;
+  vertical-align: middle;
+  font-size: ft.$font-size-sm;
+  font-weight: ft.$font-weight-semibold;
+  line-height: 1.2;
+  white-space: nowrap;
+}
+
+// A sortable header is a button in spirit — it needs hover and focus.
+.qo-table-sort {
+  display: inline-flex;
+  align-items: center;
+  gap: sp.$space-1;
+  cursor: pointer;
+  user-select: none;
+
+  &:hover { color: cl.$text-primary; }
+  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
+  &.qo-table-sort-active { color: cl.$text-primary; }
+}
+
+.qo-table-filter th {
+  height: sz.$grid-filter-height;
+  padding: sp.$space-2;
+  background-color: cl.$background-default;
+  vertical-align: middle;
+}
+
+// Cell content helpers
+.qo-table-link {
+  color: cl.$text-primary;
+  font-size: ft.$font-size-md;
+  font-weight: ft.$font-weight-medium;
+  text-decoration: none;
+
+  &:hover { text-decoration: underline; }
+  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; border-radius: bo.$border-radius-sm; }
+}
+
+.qo-table-meta {
+  display: block;
+  margin-top: 2px;
+  color: cl.$text-secondary;
+  font-size: ft.$font-size-xs;
+  font-weight: ft.$font-weight-regular;
+}
+
+.qo-table-cell-group {
+  display: inline-flex;
+  align-items: center;
+  gap: sp.$space-2;
+}
+
+// A row the user must not act on — protected/system records.
+.qo-table-row-locked {
+  background-color: cl.$background-light;
+  &:hover { background-color: cl.$background-secondary; }
+}
+
+.qo-lock-icon {
+  color: cl.$text-default;
+  font-size: ft.$font-size-sm;
+}
+
+// Footer / results summary
+.qo-grid-footer {
+  min-height: sz.$grid-filter-height;
+  padding: sp.$space-2 sp.$space-3;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: sp.$space-3;
+  background-color: cl.$background-default;
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
+.qo-grid-summary {
+  color: cl.$text-dark;
+  font-size: ft.$font-size-sm;
+  font-weight: ft.$font-weight-regular;
+}

package/dist/src/components/_tabs.scss

@@ -0,0 +1,77 @@
+@use "../base/color" as cl;
+@use "../base/border" as bo;
+@use "../base/font" as ft;
+@use "../base/space" as sp;
+
+// Tabs
+//
+//   <nav class="qo-tabs">
+//     <button class="qo-tab qo-tab-active">Users</button>
+//     <button class="qo-tab">User Roles</button>
+//   </nav>
+
+.qo-tabs {
+  display: flex;
+  align-items: center;
+  gap: sp.$space-6;
+  height: 56px;
+
+  &.qo-tabs-sm { height: 40px; gap: sp.$space-4; }
+  &.qo-tabs-pill { gap: sp.$space-2; height: auto; }
+
+  @media (max-width: 768px) { height: 40px; }
+}
+
+.qo-tab {
+  position: relative;
+  height: 56px;
+  padding: 0 2px;
+  display: inline-flex;
+  align-items: center;
+  border: 0;
+  background: transparent;
+  color: cl.$text-darker;
+  font-family: ft.$font-family-primary;
+  font-size: ft.$font-size-lg;
+  font-weight: ft.$font-weight-medium;
+  cursor: pointer;
+  transition: color 0.2s ease;
+
+  &:hover { color: cl.$text-primary; }
+  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; border-radius: bo.$border-radius-sm; }
+
+  &:disabled { opacity: 0.48; cursor: not-allowed; }
+
+  // The 2px underline is drawn on a pseudo-element so the tab does not shift
+  // by 2px when it becomes active.
+  &.qo-tab-active {
+    color: cl.$text-primary;
+    font-weight: ft.$font-weight-semibold;
+
+    &::after {
+      content: "";
+      position: absolute;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      height: bo.$border-width-md;
+      background-color: cl.$background-primary;
+    }
+  }
+
+  .qo-tabs-sm & { height: 40px; }
+
+  // Pill tabs: filled chip instead of an underline.
+  .qo-tabs-pill & {
+    height: auto;
+    padding: sp.$space-2 sp.$space-3;
+    border-radius: bo.$border-radius-pill;
+
+    &.qo-tab-active {
+      background-color: cl.$background-primary-soft;
+      &::after { content: none; }
+    }
+  }
+
+  @media (max-width: 768px) { height: 40px; }
+}

package/dist/src/components.ts

@@ -1,23 +1,47 @@
-// VS Theme Components Export
-// Provides access to all component styles
-
-export const buttons = './components/_buttons.scss';
-export const input = './components/_input.scss';
-export const placeholder = './components/_placeholder.scss';
-export const cards = './components/_cards.scss';
-
-// All components combined
-export const allComponents = [
-  buttons,
-  input,
-  placeholder,
-  cards
-];
-
-export default {
-  buttons,
-  input,
-  placeholder,
-  cards,
-  all: allComponents
-};
+// VS Theme Components Export
+// Provides access to all component styles
+
+export const buttons = './components/_buttons.scss';
+export const badge = './components/_badge.scss';
+export const input = './components/_input.scss';
+export const link = './components/_link.scss';
+export const cards = './components/_cards.scss';
+export const table = './components/_table.scss';
+export const pagination = './components/_pagination.scss';
+export const tabs = './components/_tabs.scss';
+export const alert = './components/_alert.scss';
+export const page = './components/_page.scss';
+export const placeholder = './components/_placeholder.scss';
+export const disabled = './components/_disabled.scss';
+
+// All components combined
+export const allComponents = [
+  buttons,
+  badge,
+  input,
+  link,
+  cards,
+  table,
+  pagination,
+  tabs,
+  alert,
+  page,
+  placeholder,
+  disabled
+];
+
+export default {
+  buttons,
+  badge,
+  input,
+  link,
+  cards,
+  table,
+  pagination,
+  tabs,
+  alert,
+  page,
+  placeholder,
+  disabled,
+  all: allComponents
+};

package/dist/src/index.scss

@@ -1,71 +1,82 @@
-// Reset
-@forward "./utilities/reset";
-
-// CSS Custom Properties
-@forward "./base/custom-properties";
-
-// Typography
-@forward "./utilities/typography/font";
-@forward "./utilities/typography/color";
-
-// Background
-@forward "./utilities/background-color/index.scss";
-
-// Border
-@forward "./utilities/border/border-color";
-@forward "./utilities/border/border-radius";
-@forward "./utilities/border/border-size";
-
-// Spacing
-@forward "./utilities/spaces/gap";
-@forward "./utilities/spaces/margin";
-@forward "./utilities/spaces/padding";
-
-// Box shadow
-@forward "./utilities/box-shadow/index.scss";
-
-
-// Display
-@forward "./utilities/display";
-
-// Flex
-@forward "./utilities/flex";
-
-// Text
-@forward "./utilities/text";
-
-// Position
-@forward "./utilities/position";
-
-// Overflow
-@forward "./utilities/overflow";
-
-// Opacity
-@forward "./utilities/opacity";
-
-// Cursor
-@forward "./utilities/cursor";
-
-// Sizing (width/height)
-@forward "./utilities/sizing";
-
-// Visibility
-@forward "./utilities/visibility";
-
-// Base variables & mixins
-@forward "./base/mixins/media-query-mx";
-@forward "./base/mixins/breakpoints";
-@forward "./base/border";
-@forward "./base/color";
-@forward "./base/font";
-@forward "./base/space";
-@forward "./base/size";
-
-// Components
-@forward "./components/buttons";
-@forward "./components/input";
-@forward "./components/placeholder";
-@forward "./components/disabled";
-
-// Layout
-@forward "./layout/drawer";
+// Reset
+@forward "./utilities/reset";
+
+// CSS Custom Properties
+@forward "./base/custom-properties";
+
+// Typography
+@forward "./utilities/typography/font";
+@forward "./utilities/typography/color";
+
+// Background
+@forward "./utilities/background-color/index.scss";
+
+// Border
+@forward "./utilities/border/border-color";
+@forward "./utilities/border/border-radius";
+@forward "./utilities/border/border-size";
+
+// Spacing
+@forward "./utilities/spaces/gap";
+@forward "./utilities/spaces/margin";
+@forward "./utilities/spaces/padding";
+
+// Box shadow
+@forward "./utilities/box-shadow/index.scss";
+
+// Interaction, elevation, component heights, focus
+@forward "./utilities/interaction";
+
+// Display
+@forward "./utilities/display";
+
+// Flex
+@forward "./utilities/flex";
+
+// Text
+@forward "./utilities/text";
+
+// Position
+@forward "./utilities/position";
+
+// Overflow
+@forward "./utilities/overflow";
+
+// Opacity
+@forward "./utilities/opacity";
+
+// Cursor
+@forward "./utilities/cursor";
+
+// Sizing (width/height)
+@forward "./utilities/sizing";
+
+// Visibility
+@forward "./utilities/visibility";
+
+// Base variables & mixins
+@forward "./base/mixins/media-query-mx";
+@forward "./base/mixins/breakpoints";
+@forward "./base/border";
+@forward "./base/color";
+@forward "./base/font";
+@forward "./base/space";
+@forward "./base/size";
+@forward "./base/variants";
+
+// Components
+@forward "./components/buttons";
+@forward "./components/badge";
+@forward "./components/input";
+@forward "./components/link";
+@forward "./components/cards";
+@forward "./components/table";
+@forward "./components/pagination";
+@forward "./components/tabs";
+@forward "./components/alert";
+@forward "./components/page";
+@forward "./components/placeholder";
+@forward "./components/disabled";
+
+// Layout
+@forward "./layout/drawer";

package/dist/src/utilities/_interaction.scss

@@ -0,0 +1,72 @@
+@use "../base/color" as cl;
+@use "../base/size" as sz;
+@use "../base/mixins/meta-class" as mc;
+
+// Interaction & elevation utilities
+//
+// These carry their own states, so there is no separate `qo-hover-*` family
+// to remember — `qo-focusable` is the focus ring, `qo-clickable` is the whole
+// pointer affordance.
+
+@include mc.meta("qo-shadow-none", (box-shadow: none));
+@include mc.meta("qo-shadow-sm", (box-shadow: cl.$shadow-sm));
+@include mc.meta("qo-shadow-md", (box-shadow: cl.$shadow-md));
+@include mc.meta("qo-shadow-lg", (box-shadow: cl.$shadow-lg));
+@include mc.meta("qo-shadow-xl", (box-shadow: cl.$shadow-xl));
+
+// Component heights, so a bare div can line up with a control.
+@include mc.meta("qo-h-control", (height: sz.$control-height));
+@include mc.meta("qo-h-control-sm", (height: sz.$control-height-sm));
+@include mc.meta("qo-h-badge", (height: sz.$badge-height));
+@include mc.meta("qo-h-grid-header", (height: sz.$grid-header-height));
+@include mc.meta("qo-h-grid-filter", (height: sz.$grid-filter-height));
+@include mc.meta("qo-h-grid-row", (height: sz.$grid-row-height));
+@include mc.meta("qo-min-h-control", (min-height: sz.$control-height));
+
+// Give anything the theme's single focus treatment.
+.qo-focusable:focus-visible {
+  outline: 0;
+  box-shadow: cl.$focus-ring;
+}
+.qo-focus-ring { box-shadow: cl.$focus-ring; }
+
+// The full interactive affordance for a non-button element.
+.qo-clickable {
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+
+  &:hover { background-color: cl.$background-hover; }
+  &:focus-visible { outline: 0; box-shadow: cl.$focus-ring; }
+}
+
+// Hover feedback without a colour change — for cards and tiles.
+.qo-hoverable {
+  transition: box-shadow 0.2s ease;
+  &:hover { box-shadow: cl.$shadow-md; }
+}
+
+.qo-no-hover:hover { background-color: transparent; }
+
+// Screen-reader-only, for the icon-button labels the spec requires.
+.qo-sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border: 0 !important;
+}
+
+// Honour a reduced-motion preference across every transition above.
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    transition: none !important;
+    animation: none !important;
+  }
+}

package/dist/src/utilities/background-color/index.scss

@@ -14,3 +14,16 @@
 @include mc.meta("qo-bg-light", (background-color: cl.$background-light));
 @include mc.meta("qo-bg-tertiary", (background-color: cl.$background-tertiary));
 @include mc.meta("qo-bg-lime", (background-color: cl.$background-lime));
+@include mc.meta("qo-bg-disabled", (background-color: cl.$background-disabled));
+@include mc.meta("qo-bg-hover", (background-color: cl.$background-hover));
+@include mc.meta("qo-bg-header", (background-color: cl.$background-header));
+
+// Soft / tint fills — badges, banners, icon chips
+@include mc.meta("qo-bg-primary-soft", (background-color: cl.$background-primary-soft));
+@include mc.meta("qo-bg-success-soft", (background-color: cl.$background-success-soft));
+@include mc.meta("qo-bg-warning-soft", (background-color: cl.$background-warning-soft));
+@include mc.meta("qo-bg-danger-soft", (background-color: cl.$background-danger-soft));
+@include mc.meta("qo-bg-info-soft", (background-color: cl.$background-info-soft));
+@include mc.meta("qo-bg-lite-soft", (background-color: cl.$background-lite-soft));
+@include mc.meta("qo-bg-system-soft", (background-color: cl.$background-system-soft));
+@include mc.meta("qo-bg-custom-soft", (background-color: cl.$background-custom-soft));

package/dist/src/utilities/border/_border-color.scss

@@ -9,3 +9,5 @@
 @include mc.meta("qo-border-info", (border-color: cl.$border-info));
 @include mc.meta("qo-border-light", (border-color: cl.$border-light));
 @include mc.meta("qo-border-dark", (border-color: cl.$border-dark));
+@include mc.meta("qo-border-default", (border-color: cl.$border-default));
+@include mc.meta("qo-border-primary-soft", (border-color: cl.$border-primary-soft));

package/dist/src/utilities/box-shadow/index.scss

@@ -1,8 +1,8 @@
-@use "../../base/color" as cl;
-@use "../../base/mixins/meta-class" as mc;
-
-@include mc.meta("qo-boxshadow-none", (box-shadow: none));
-@include mc.meta("qo-boxshadow-sm", (box-shadow: 0 1px 2px 0 cl.$boxshadow-primary));
-@include mc.meta("qo-boxshadow-md", (box-shadow: 0 4px 8px 0 cl.$boxshadow-primary));
-@include mc.meta("qo-boxshadow-lg", (box-shadow: 0 8px 16px 0 cl.$boxshadow-primary));
-@include mc.meta("qo-boxshadow-xl", (box-shadow: 0 12px 24px 0 cl.$boxshadow-primary));
+@use "../../base/color" as cl;
+@use "../../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-boxshadow-none", (box-shadow: none));
+@include mc.meta("qo-boxshadow-sm", (box-shadow: cl.$shadow-sm));
+@include mc.meta("qo-boxshadow-md", (box-shadow: cl.$shadow-md));
+@include mc.meta("qo-boxshadow-lg", (box-shadow: cl.$shadow-lg));
+@include mc.meta("qo-boxshadow-xl", (box-shadow: cl.$shadow-xl));

package/dist/src/utilities/typography/_color.scss

@@ -1,34 +1,38 @@
-@use "sass:color";
-@use "../../base/color" as cl;
-@use "../../base/mixins/meta-class" as mc;
-
-@include mc.meta("qo-text-primary", (color: cl.$text-primary));
-@include mc.meta("qo-text-secondary", (color: cl.$text-secondary));
-@include mc.meta("qo-text-success", (color: cl.$text-success));
-@include mc.meta("qo-text-warning", (color: cl.$text-warning));
-@include mc.meta("qo-text-danger", (color: cl.$text-danger));
-@include mc.meta("qo-text-info", (color: cl.$text-info));
-@include mc.meta("qo-text-default", (color: cl.$text-default));
-@include mc.meta("qo-text-dark", (color: cl.$text-dark));
-@include mc.meta("qo-text-darker", (color: cl.$text-darker));
-@include mc.meta("qo-text-light", (color: cl.$text-light));
-@include mc.meta("qo-text-tertiary", (color: cl.$text-tertiary));
-
-// Higher specificity variants when used with .qo-btn (beats Kendo .k-button-* selectors)
-// Intentionally NOT wrapped in meta() — button overrides must stay high specificity
-.qo-btn {
-  &.qo-text-primary { color: cl.$text-primary; &:hover, &:focus, &:active { color: cl.$text-primary-hover; } }
-  &.qo-text-secondary { color: cl.$text-secondary; &:hover, &:focus, &:active { color: cl.$text-dark; } }
-  &.qo-text-success { color: cl.$text-success; &:hover, &:focus, &:active { color: color.adjust(cl.$text-success, $lightness: -10%); } }
-  &.qo-text-warning { color: cl.$text-warning; &:hover, &:focus, &:active { color: color.adjust(cl.$text-warning, $lightness: -10%); } }
-  &.qo-text-danger { color: cl.$text-danger; &:hover, &:focus, &:active { color: cl.$text-danger-hover; } }
-  &.qo-text-info { color: cl.$text-info; &:hover, &:focus, &:active { color: color.adjust(cl.$text-info, $lightness: -10%); } }
-  &.qo-text-default { color: cl.$text-default; &:hover, &:focus, &:active { color: cl.$text-dark; } }
-  &.qo-text-dark { color: cl.$text-dark; &:hover, &:focus, &:active { color: color.adjust(cl.$text-dark, $lightness: -10%); } }
-  &.qo-text-light { color: cl.$text-light; &:hover, &:focus, &:active { color: cl.$text-light; } }
-  &.qo-text-tertiary { color: cl.$text-tertiary; &:hover, &:focus, &:active { color: color.adjust(cl.$text-tertiary, $lightness: -10%); } }
-}
-
-.qo-validation {
-  color: cl.$text-danger;
-}
+@use "sass:color";
+@use "../../base/color" as cl;
+@use "../../base/mixins/meta-class" as mc;
+
+@include mc.meta("qo-text-primary", (color: cl.$text-primary));
+@include mc.meta("qo-text-secondary", (color: cl.$text-secondary));
+@include mc.meta("qo-text-success", (color: cl.$text-success));
+@include mc.meta("qo-text-warning", (color: cl.$text-warning));
+@include mc.meta("qo-text-danger", (color: cl.$text-danger));
+@include mc.meta("qo-text-info", (color: cl.$text-info));
+@include mc.meta("qo-text-default", (color: cl.$text-default));
+@include mc.meta("qo-text-dark", (color: cl.$text-dark));
+@include mc.meta("qo-text-darker", (color: cl.$text-darker));
+@include mc.meta("qo-text-light", (color: cl.$text-light));
+@include mc.meta("qo-text-tertiary", (color: cl.$text-tertiary));
+@include mc.meta("qo-text-placeholder", (color: cl.$text-placeholder));
+@include mc.meta("qo-text-lite", (color: cl.$text-lite));
+@include mc.meta("qo-text-system", (color: cl.$text-system));
+@include mc.meta("qo-text-custom", (color: cl.$text-custom));
+
+// Higher specificity variants when used with .qo-btn (beats Kendo .k-button-* selectors)
+// Intentionally NOT wrapped in meta() — button overrides must stay high specificity
+.qo-btn {
+  &.qo-text-primary { color: cl.$text-primary; &:hover, &:focus, &:active { color: cl.$text-primary-hover; } }
+  &.qo-text-secondary { color: cl.$text-secondary; &:hover, &:focus, &:active { color: cl.$text-dark; } }
+  &.qo-text-success { color: cl.$text-success; &:hover, &:focus, &:active { color: color.adjust(cl.$text-success, $lightness: -10%); } }
+  &.qo-text-warning { color: cl.$text-warning; &:hover, &:focus, &:active { color: color.adjust(cl.$text-warning, $lightness: -10%); } }
+  &.qo-text-danger { color: cl.$text-danger; &:hover, &:focus, &:active { color: cl.$text-danger-hover; } }
+  &.qo-text-info { color: cl.$text-info; &:hover, &:focus, &:active { color: color.adjust(cl.$text-info, $lightness: -10%); } }
+  &.qo-text-default { color: cl.$text-default; &:hover, &:focus, &:active { color: cl.$text-dark; } }
+  &.qo-text-dark { color: cl.$text-dark; &:hover, &:focus, &:active { color: color.adjust(cl.$text-dark, $lightness: -10%); } }
+  &.qo-text-light { color: cl.$text-light; &:hover, &:focus, &:active { color: cl.$text-light; } }
+  &.qo-text-tertiary { color: cl.$text-tertiary; &:hover, &:focus, &:active { color: color.adjust(cl.$text-tertiary, $lightness: -10%); } }
+}
+
+.qo-validation {
+  color: cl.$text-danger;
+}