ply-css 1.3.0

package/src/scss/components/_colors.scss

@@ -0,0 +1,447 @@
+// * -- ply color variables
+@use "variables";
+
+// Base color
+$background-body: #f7f8f8;
+$color-body: #222;
+$color-headings: #000;
+$border-color: #ccc;
+
+// Button base colors and pre-computed hover/active states (Sass build-time)
+$btn-primary-light: #0353e9;
+$btn-primary-light-hover: #0347c6;
+$btn-primary-light-active: #023eaf;
+$btn-secondary-light: #393939;
+$btn-secondary-light-hover: #303030;
+$btn-secondary-light-active: #2b2b2b;
+$btn-primary-dark: #4589ff;
+$btn-primary-dark-hover: #619bff;
+$btn-primary-dark-active: #73a6ff;
+$btn-secondary-dark: #a8a8a8;
+$btn-secondary-dark-hover: #b5b5b5;
+$btn-secondary-dark-active: #bebebe;
+
+// CSS Custom Properties for theming (light/dark)
+// Inspired by IBM Carbon Design System color tokens
+
+:root {
+  // Background
+  --ply-bg-body: #ffffff;
+  --ply-bg-surface: #ffffff;
+  --ply-bg-surface-alt: #f4f4f4;
+  --ply-bg-muted: #e0e0e0;
+
+  // Text
+  --ply-color-body: #161616;
+  --ply-color-headings: #161616;
+  --ply-color-secondary: #525252;
+  --ply-color-muted: #767676;
+  --ply-color-placeholder: #a8a8a8;
+  --ply-color-text-inverse: #ffffff;
+
+
+  // Borders
+  --ply-border-color: #e0e0e0;
+  --ply-border-strong: #8d8d8d;
+
+  // Interactive
+  --ply-color-link: var(--ply-btn-default-bg);
+  --ply-color-link-hover: #{$btn-primary-light-hover};
+  --ply-color-link-hover: color-mix(in oklch, var(--ply-btn-default-bg), black 15%);
+  --ply-color-focus: #0f62fe;
+
+  // Fields
+  --ply-color-field-bg: #f4f4f4;
+  --ply-color-input-border: #8d8d8d;
+  --ply-color-input-bg: #f4f4f4;
+
+  // Code
+  --ply-color-code-bg: #f4f4f4;
+  --ply-color-code-border: #e0e0e0;
+
+  // Tables
+  --ply-color-table-border: #e0e0e0;
+  --ply-color-table-stripped: #f4f4f4;
+  --ply-color-table-hovered: #e8e8e8;
+
+  // Accent (brand-neutral — for icons, badges, focus rings. Independent of button color.)
+  --ply-color-accent: #{$btn-primary-light};
+
+  // Buttons (hex fallback + color-mix for custom theme cascade)
+  --ply-btn-default-bg: #{$btn-primary-light};
+  --ply-btn-default-bg-hover: #{$btn-primary-light-hover};
+  --ply-btn-default-bg-hover: color-mix(in oklch, var(--ply-btn-default-bg), black 15%);
+  --ply-btn-default-bg-active: #{$btn-primary-light-active};
+  --ply-btn-default-bg-active: color-mix(in oklch, var(--ply-btn-default-bg), black 25%);
+  --ply-btn-secondary-bg: #{$btn-secondary-light};
+  --ply-btn-secondary-bg-hover: #{$btn-secondary-light-hover};
+  --ply-btn-secondary-bg-hover: color-mix(in oklch, var(--ply-btn-secondary-bg), black 15%);
+  --ply-btn-secondary-bg-active: #{$btn-secondary-light-active};
+  --ply-btn-secondary-bg-active: color-mix(in oklch, var(--ply-btn-secondary-bg), black 25%);
+  --ply-btn-border-radius: #{variables.$button-radius};
+
+  // Navigation
+  --ply-nav-bg: #ffffff;
+  --ply-nav-color: #161616;
+  --ply-nav-border: #161616;
+  --ply-nav-hover: #e8e8e8;
+  --ply-nav-active-color: #525252;
+
+  // Layers (elevation)
+  --ply-layer-0: #ffffff;
+  --ply-layer-1: #f4f4f4;
+  --ply-layer-2: #e0e0e0;
+  --ply-layer-3: #c6c6c6;
+  --ply-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
+  --ply-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --ply-shadow-3: 0 4px 24px rgba(0, 0, 0, 0.12);
+
+  // Glass
+  --ply-bg-glass: rgba(255, 255, 255, 0.15);
+
+  // Brand backgrounds (WCAG AA — same in both themes, dark saturated values)
+  --ply-bg-blue: #0f62fe;
+  --ply-bg-blue-hover: #0043ce;
+  --ply-bg-blue-active: #002d9c;
+  --ply-bg-red: #da1e28;
+  --ply-bg-red-hover: #a2191f;
+  --ply-bg-red-active: #750e13;
+  --ply-bg-green: #198038;
+  --ply-bg-green-hover: #0e6027;
+  --ply-bg-green-active: #044317;
+  --ply-bg-yellow: #f1c21b;
+  --ply-bg-yellow-hover: #d2a106;
+  --ply-bg-yellow-active: #b28600;
+
+  // Brand palette (WCAG AA — 4.5:1 vs text-inverse per mode)
+  --ply-blue-1: #0f62fe;
+  --ply-blue-2: #0043ce;
+  --ply-blue-3: #002d9c;
+  --ply-red-1: #da1e28;
+  --ply-red-2: #a2191f;
+  --ply-red-3: #750e13;
+  --ply-green-1: #198038;
+  --ply-green-2: #0e6027;
+  --ply-green-3: #044317;
+  --ply-yellow-1: #f1c21b;
+  --ply-yellow-2: #d2a106;
+  --ply-yellow-3: #b28600;
+  --ply-indigo-1: #4f46e5;
+  --ply-indigo-2: #3730a3;
+  --ply-indigo-3: #312e81;
+  --ply-purple-1: #7c3aed;
+  --ply-purple-2: #6d28d9;
+  --ply-purple-3: #5b21b6;
+  --ply-pink-1: #be185d;
+  --ply-pink-2: #9d174d;
+  --ply-pink-3: #831843;
+  --ply-orange-1: #c2410c;
+  --ply-orange-2: #9a3412;
+  --ply-orange-3: #7c2d12;
+  --ply-teal-1: #0f766e;
+  --ply-teal-2: #115e59;
+  --ply-teal-3: #134e4a;
+  --ply-cyan-1: #0e7490;
+  --ply-cyan-2: #155e75;
+  --ply-cyan-3: #164e63;
+
+  // Typography
+  --ply-font-body: #{variables.$font-family-base};
+  --ply-font-heading: #{variables.$font-family-headings};
+  --ply-font-mono: #{variables.$font-family-code};
+
+  // Spacing
+  --ply-space-xs: 0.25rem;
+  --ply-space-sm: 0.5rem;
+  --ply-space-md: 0.75rem;
+  --ply-space-lg: 1.5rem;
+  --ply-space-xl: 2rem;
+  --ply-space-xxl: 3rem;
+}
+
+@mixin dark-theme {
+  // Background — Carbon Gray 100
+  --ply-bg-body: #161616;
+  --ply-bg-surface: #262626;
+  --ply-bg-surface-alt: #262626;
+  --ply-bg-muted: #393939;
+
+  // Text
+  --ply-color-body: #f4f4f4;
+  --ply-color-headings: #f4f4f4;
+  --ply-color-secondary: #c6c6c6;
+  --ply-color-muted: #8d8d8d;
+  --ply-color-placeholder: #6f6f6f;
+  --ply-color-text-inverse: #161616;
+
+  // Borders
+  --ply-border-color: #393939;
+  --ply-border-strong: #6f6f6f;
+
+  // Interactive
+  --ply-color-link: var(--ply-btn-default-bg);
+  --ply-color-link-hover: #{$btn-primary-dark-hover};
+  --ply-color-link-hover: color-mix(in oklch, var(--ply-btn-default-bg), white 15%);
+  --ply-color-focus: #0f62fe;
+
+  // Fields
+  --ply-color-field-bg: #262626;
+  --ply-color-input-border: #6f6f6f;
+  --ply-color-input-bg: #262626;
+
+  // Code
+  --ply-color-code-bg: #262626;
+  --ply-color-code-border: #393939;
+
+  // Tables
+  --ply-color-table-border: #393939;
+  --ply-color-table-stripped: #1c1c1c;
+  --ply-color-table-hovered: #353535;
+
+  // Accent
+  --ply-color-accent: #{$btn-primary-dark};
+
+  // Buttons (hex fallback + color-mix for custom theme cascade)
+  --ply-btn-default-bg: #{$btn-primary-dark};
+  --ply-btn-default-bg-hover: #{$btn-primary-dark-hover};
+  --ply-btn-default-bg-hover: color-mix(in oklch, var(--ply-btn-default-bg), white 15%);
+  --ply-btn-default-bg-active: #{$btn-primary-dark-active};
+  --ply-btn-default-bg-active: color-mix(in oklch, var(--ply-btn-default-bg), white 25%);
+  --ply-btn-secondary-bg: #{$btn-secondary-dark};
+  --ply-btn-secondary-bg-hover: #{$btn-secondary-dark-hover};
+  --ply-btn-secondary-bg-hover: color-mix(in oklch, var(--ply-btn-secondary-bg), white 15%);
+  --ply-btn-secondary-bg-active: #{$btn-secondary-dark-active};
+  --ply-btn-secondary-bg-active: color-mix(in oklch, var(--ply-btn-secondary-bg), white 25%);
+  --ply-btn-default-color: #161616;
+  --ply-btn-secondary-color: #161616;
+
+  // Navigation
+  --ply-nav-bg: #161616;
+  --ply-nav-color: #f4f4f4;
+  --ply-nav-border: #f4f4f4;
+  --ply-nav-hover: #353535;
+  --ply-nav-active-color: #a8a8a8;
+
+  // Layers (elevation)
+  --ply-layer-0: #161616;
+  --ply-layer-1: #262626;
+  --ply-layer-2: #393939;
+  --ply-layer-3: #525252;
+  --ply-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.2);
+  --ply-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --ply-shadow-3: 0 4px 24px rgba(0, 0, 0, 0.4);
+
+  // Glass
+  --ply-bg-glass: rgba(38, 38, 38, 0.25);
+
+  // Brand backgrounds (dark mode — same as light, saturated for contrast with white text)
+  --ply-bg-blue: #0f62fe;
+  --ply-bg-blue-hover: #0043ce;
+  --ply-bg-blue-active: #002d9c;
+  --ply-bg-red: #da1e28;
+  --ply-bg-red-hover: #a2191f;
+  --ply-bg-red-active: #750e13;
+  --ply-bg-green: #198038;
+  --ply-bg-green-hover: #0e6027;
+  --ply-bg-green-active: #044317;
+  --ply-bg-yellow: #f1c21b;
+  --ply-bg-yellow-hover: #d2a106;
+  --ply-bg-yellow-active: #b28600;
+
+  // Brand palette (dark mode — lighter values, same levels)
+  --ply-blue-1: #4589ff;
+  --ply-blue-2: #78a9ff;
+  --ply-blue-3: #a6c8ff;
+  --ply-red-1: #ff8389;
+  --ply-red-2: #fa4d56;
+  --ply-red-3: #da1e28;
+  --ply-green-1: #42be65;
+  --ply-green-2: #6fdc8c;
+  --ply-green-3: #a7f0ba;
+  --ply-yellow-1: #f1c21b;
+  --ply-yellow-2: #d2a106;
+  --ply-yellow-3: #b28600;
+  --ply-indigo-1: #818cf8;
+  --ply-indigo-2: #a5b4fc;
+  --ply-indigo-3: #c7d2fe;
+  --ply-purple-1: #a78bfa;
+  --ply-purple-2: #c4b5fd;
+  --ply-purple-3: #ddd6fe;
+  --ply-pink-1: #f472b6;
+  --ply-pink-2: #f9a8d4;
+  --ply-pink-3: #fbcfe8;
+  --ply-orange-1: #fb923c;
+  --ply-orange-2: #fdba74;
+  --ply-orange-3: #fed7aa;
+  --ply-teal-1: #2dd4bf;
+  --ply-teal-2: #5eead4;
+  --ply-teal-3: #99f6e4;
+  --ply-cyan-1: #22d3ee;
+  --ply-cyan-2: #67e8f9;
+  --ply-cyan-3: #a5f3fc;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    @include dark-theme;
+  }
+}
+
+[data-theme="dark"] {
+  @include dark-theme;
+}
+
+// High contrast mode
+
+@mixin high-contrast-light {
+  --ply-color-body: #000000;
+  --ply-color-headings: #000000;
+  --ply-color-secondary: #1a1a1a;
+  --ply-color-muted: #333333;
+  --ply-border-color: #000000;
+  --ply-border-strong: #000000;
+  --ply-color-link: #0000ee;
+  --ply-color-link-hover: #0000cc;
+  --ply-color-code-bg: #ffffff;
+  --ply-color-code-border: #000000;
+  --ply-color-focus: #000000;
+  --ply-shadow-1: none;
+  --ply-shadow-2: none;
+  --ply-shadow-3: none;
+  --ply-layer-1: #ffffff;
+  --ply-layer-2: #ffffff;
+  --ply-layer-3: #ffffff;
+}
+
+@mixin high-contrast-dark {
+  --ply-color-body: #ffffff;
+  --ply-color-headings: #ffffff;
+  --ply-color-secondary: #e5e5e5;
+  --ply-color-muted: #cccccc;
+  --ply-border-color: #ffffff;
+  --ply-border-strong: #ffffff;
+  --ply-color-link: #6eb5ff;
+  --ply-color-link-hover: #a6d0ff;
+  --ply-color-code-bg: #000000;
+  --ply-color-code-border: #ffffff;
+  --ply-color-focus: #ffffff;
+  --ply-shadow-1: none;
+  --ply-shadow-2: none;
+  --ply-shadow-3: none;
+  --ply-layer-1: #161616;
+  --ply-layer-2: #161616;
+  --ply-layer-3: #161616;
+}
+
+@media (prefers-contrast: more) {
+  :root {
+    @include high-contrast-light;
+  }
+}
+
+@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    @include high-contrast-dark;
+  }
+}
+
+@media (prefers-contrast: more) {
+  [data-theme="dark"] {
+    @include high-contrast-dark;
+  }
+}
+
+// Colors
+$color-gray: #e0e3e5;
+$color-black: #0f0f0f;
+$color-blue: #2575ed;
+$color-red: #de2c3b;
+$color-yellow: #ffc800;
+$color-green: #1a7a32;
+$color-white: #fff;
+
+// Extended palette
+$color-indigo: #4f46e5;
+$color-purple: #7c3aed;
+$color-pink: #db2777;
+$color-orange: #ea580c;
+$color-teal: #0d9488;
+$color-cyan: #0891b2;
+
+// Colors Dark
+$color-gray-dark: #b3b6b7;
+$color-black-dark: #000;
+$color-blue-dark: #1a52a5;
+$color-red-dark: #b2232f;
+$color-yellow-dark: #cca000;
+$color-green-dark: #237f35;
+$color-indigo-dark: #3730a3;
+$color-purple-dark: #5b21b6;
+$color-pink-dark: #9d174d;
+$color-orange-dark: #c2410c;
+$color-teal-dark: #0f766e;
+$color-cyan-dark: #0e7490;
+
+// Colors Light
+$color-gray-light: #f0f1f2;
+$color-black-light: #363738;
+$color-blue-light: #92baf6;
+$color-red-light: #ef969d;
+$color-yellow-light: #ffe480;
+$color-green-light: #96cfa1;
+$color-indigo-light: #a5b4fc;
+$color-purple-light: #c4b5fd;
+$color-pink-light: #f9a8d4;
+$color-orange-light: #fdba74;
+$color-teal-light: #5eead4;
+$color-cyan-light: #67e8f9;
+
+// Colors Pastel
+$color-gray-pastel: #f7f8f8;
+$color-black-pastel: #dadada;
+$color-blue-pastel: #d3e3fb;
+$color-red-pastel: #f8d5d8;
+$color-yellow-pastel: #fff4cc;
+$color-green-pastel: #d5ecd9;
+$color-indigo-pastel: #e0e7ff;
+$color-purple-pastel: #ede9fe;
+$color-pink-pastel: #fce7f3;
+$color-orange-pastel: #ffedd5;
+$color-teal-pastel: #ccfbf1;
+$color-cyan-pastel: #cffafe;
+
+// Neutrals (gray scale)
+$color-neutral-50: #fafafa;
+$color-neutral-100: #f5f5f5;
+$color-neutral-200: #e5e5e5;
+$color-neutral-300: #d4d4d4;
+$color-neutral-400: #a3a3a3;
+$color-neutral-500: #737373;
+$color-neutral-600: #525252;
+$color-neutral-700: #404040;
+$color-neutral-800: #262626;
+$color-neutral-900: #171717;
+
+// Table Color
+$color-table-border: $border-color;
+$color-table-stripped: #f8f8f8;
+$color-table-hovered: #f4f4f4;
+
+// Fieldset
+$color-fieldset-border: #ccc;
+
+// Code
+$color-code-background: #f4f4f4;
+$color-code-border: #d4d4d4;
+
+// Blockquote
+$color-blockquote-border: #ddd;
+
+// Input
+$color-input-border: #ccc;
+$color-input-append-background: #f4f4f4;
+$color-input-append-border: #d4d4d4;
+
+// Links Color
+$color-link: #134da5;
+$color-link-hover: $color-red;

package/src/scss/components/_container-queries.scss

@@ -0,0 +1,35 @@
+@use "media-queries";
+@use "variables";
+
+/* =Container Queries
+-----------------------------------------------------------------------------*/
+
+// Wrapper — enables container queries on any element
+.container-query {
+  container-type: inline-size;
+}
+
+// Container-scoped responsive units
+// Mirror the viewport breakpoints but scope to the container's inline size.
+
+$container-breakpoints: (
+  "phone": media-queries.$breakpoint-phone,
+  "large-phone": media-queries.$breakpoint-large-phone,
+  "tablet": media-queries.$breakpoint-tablet,
+  "small-desktop": media-queries.$breakpoint-small-desktop,
+);
+
+@each $bp-name, $bp-value in $container-breakpoints {
+  @container (max-width: #{$bp-value}) {
+    @each $name, $value in variables.$unit-scale {
+      .container-#{$bp-name}-unit-#{$name} {
+        max-width: $value;
+        flex-basis: $value;
+      }
+    }
+    .container-#{$bp-name}-unit-auto {
+      flex-basis: 0;
+      flex-grow: 1;
+    }
+  }
+}

package/src/scss/components/_cursors.scss

@@ -0,0 +1,24 @@
+/* =Cursor Helpers
+-----------------------------------------------------------------------------*/
+
+$cursor-map: (
+  "pointer": pointer, "finger": pointer,
+  "arrow": default, "default": default,
+  "none": none, "progress": progress,
+  "help": help, "question-mark": help,
+  "text": text, "cell": cell, "plus": cell,
+  "crosshair": crosshair, "alias": alias, "shortcut": alias,
+  "context-menu": context-menu, "copy": copy,
+  "move": move, "no-drop": no-drop, "not-allowed": not-allowed,
+  "all-scroll": all-scroll, "ew-resize": ew-resize,
+  "col-resize": col-resize, "ns-resize": ns-resize,
+  "row-resize": row-resize, "nesw-resize": nesw-resize,
+  "n-resize": n-resize, "e-resize": e-resize,
+  "s-resize": s-resize, "w-resize": w-resize,
+  "ne-resize": ne-resize, "nw-resize": nw-resize,
+  "sw-resize": sw-resize, "se-resize": se-resize,
+);
+
+@each $name, $value in $cursor-map {
+  .cursor-#{$name} { cursor: $value; }
+}

package/src/scss/components/_dialog-patterns.scss

@@ -0,0 +1,176 @@
+@use "colors";
+@use "variables";
+
+/* =Dialog Patterns — Nested/stacked dialog styling
+-----------------------------------------------------------------------------*/
+
+/* Dialog Sizes */
+dialog.dialog-sm {
+  max-width: 24rem;
+}
+
+dialog.dialog-lg {
+  max-width: 48rem;
+}
+
+dialog.dialog-full {
+  max-width: calc(100vw - 2rem);
+  max-height: calc(100vh - 2rem);
+  width: 100%;
+  height: 100%;
+}
+
+/* Dialog Layout Sections */
+dialog {
+  .dialog-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: variables.$padding * 1.33 variables.$base-line;
+    border-bottom: 1px solid var(--ply-border-color);
+
+    h1, h2, h3, h4, h5, h6 {
+      margin: 0;
+      font-size: variables.$font-size-lg;
+    }
+  }
+
+  .dialog-body {
+    padding: variables.$base-line;
+    overflow-y: auto;
+  }
+
+  .dialog-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: variables.$grid-gutter-width;
+    padding: variables.$padding * 1.33 variables.$base-line;
+    border-top: 1px solid var(--ply-border-color);
+  }
+
+  .dialog-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+    border: none;
+    background: none;
+    color: var(--ply-color-secondary);
+    font-size: variables.$font-size-xl;
+    cursor: pointer;
+    border-radius: variables.$border-radius;
+    transition: background-color 0.15s ease;
+
+    &:hover {
+      background-color: var(--ply-bg-surface-alt);
+      color: var(--ply-color-body);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--ply-color-focus, colors.$color-blue);
+      outline-offset: 2px;
+    }
+  }
+}
+
+/* Stacked Dialogs — z-index layering */
+dialog[open] {
+  &.dialog-layer-1 {
+    z-index: 100;
+  }
+
+  &.dialog-layer-2 {
+    z-index: 110;
+  }
+
+  &.dialog-layer-3 {
+    z-index: 120;
+  }
+}
+
+dialog::backdrop {
+  background: var(--ply-backdrop, rgba(0, 0, 0, 0.5));
+}
+
+dialog.dialog-layer-2::backdrop {
+  background: var(--ply-backdrop-nested, rgba(0, 0, 0, 0.35));
+}
+
+dialog.dialog-layer-3::backdrop {
+  background: var(--ply-backdrop-nested, rgba(0, 0, 0, 0.25));
+}
+
+/* Confirmation Dialog — compact variant */
+dialog.dialog-confirm {
+  max-width: 28rem;
+  text-align: center;
+
+  .dialog-body {
+    padding: variables.$base-line * 1.33 variables.$base-line variables.$padding * 1.33;
+  }
+
+  .dialog-footer {
+    justify-content: center;
+    border-top: none;
+    padding-top: 0;
+  }
+}
+
+/* Dialog with scrollable body */
+dialog.dialog-scroll[open] {
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 4rem);
+
+  .dialog-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    min-height: 0;
+  }
+
+  .dialog-header,
+  .dialog-footer {
+    flex-shrink: 0;
+  }
+}
+
+/* Dialog animation */
+dialog[open] {
+  animation: dialog-fade-in 0.15s ease;
+}
+
+dialog[open]::backdrop {
+  animation: dialog-backdrop-in 0.15s ease;
+}
+
+@keyframes dialog-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(-0.5rem);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes dialog-backdrop-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  dialog[open],
+  dialog[open]::backdrop {
+    animation: none;
+  }
+}