@pure-ds/storybook 0.1.0

package/public/assets/pds/styles/pds-utilities.css

@@ -0,0 +1,763 @@
+@layer utilities {
+
+/* Icon System */
+
+pds-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  vertical-align: middle;
+  pointer-events: none;
+}
+
+/* Icon size utilities */
+.icon-xs,
+pds-icon[size="xs"] {
+  width: var(--icon-size-xs);
+  height: var(--icon-size-xs);
+}
+
+.icon-sm,
+pds-icon[size="sm"] {
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
+}
+
+.icon-md,
+pds-icon[size="md"] {
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+}
+
+.icon-lg,
+pds-icon[size="lg"] {
+  width: var(--icon-size-lg);
+  height: var(--icon-size-lg);
+}
+
+.icon-xl,
+pds-icon[size="xl"] {
+  width: var(--icon-size-xl);
+  height: var(--icon-size-xl);
+}
+
+.icon-2xl,
+pds-icon[size="2xl"] {
+  width: var(--icon-size-2xl);
+  height: var(--icon-size-2xl);
+}
+
+/* Icon color utilities */
+.icon-primary,
+pds-icon.primary {
+  color: var(--color-primary-600);
+}
+
+.icon-secondary,
+pds-icon.secondary {
+  color: var(--color-secondary-600);
+}
+
+.icon-accent,
+pds-icon.accent {
+  color: var(--color-accent-600);
+}
+
+.icon-success,
+pds-icon.success {
+  color: var(--color-success-600);
+}
+
+.icon-warning,
+pds-icon.warning {
+  color: var(--color-warning-600);
+}
+
+.icon-danger,
+pds-icon.danger {
+  color: var(--color-danger-600);
+}
+
+.icon-info,
+pds-icon.info {
+  color: var(--color-info-600);
+}
+
+.icon-muted,
+pds-icon.muted {
+  color: var(--color-text-muted);
+}
+
+.icon-subtle,
+pds-icon.subtle {
+  color: var(--color-text-subtle);
+}
+
+/* Icon with text combinations */
+.icon-text {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+.icon-text-start {
+  flex-direction: row;
+}
+
+.icon-text-end {
+  flex-direction: row-reverse;
+}
+
+/* Button icon utilities */
+button, a {
+  pds-icon {
+    flex-shrink: 0;
+  }
+
+  &.icon-only {
+    padding: var(--spacing-2);
+    min-width: 44px;
+    width: 44px;
+    height: 44px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+/* Icon in inputs */
+.input-icon {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  pds-icon {
+    position: absolute;
+    left: var(--spacing-3);
+    color: var(--color-text-muted);
+    pointer-events: none;
+    width: var(--icon-size-md);
+    height: var(--icon-size-md);
+  }
+
+  input {
+    padding-left: calc(var(--icon-size-md) + var(--spacing-6));
+    width: 100%;
+  }
+}
+
+.input-icon-end {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  pds-icon {
+    position: absolute;
+    left: unset;
+    right: var(--spacing-3);
+    color: var(--color-text-muted);
+    pointer-events: none;
+    width: var(--icon-size-md);
+    height: var(--icon-size-md);
+  }
+
+  input {
+    padding-left: var(--spacing-4);
+    padding-right: calc(var(--icon-size-md) + var(--spacing-6));
+    width: 100%;
+  }
+}
+
+
+
+
+/* ============================================================================
+   Layout Utilities
+   Modern grid and flex system for building responsive layouts
+   ============================================================================ */
+
+/* Container */
+.container {
+  display: block;
+  width: 100%;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: var(--spacing-6);
+}
+
+/* Grid System */
+.grid {
+  display: grid;
+  gap: var(--spacing-4);
+}
+
+.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
+.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
+
+/* Auto-fit grids (responsive) */
+.grid-auto-sm { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
+.grid-auto-md { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
+.grid-auto-lg { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
+.grid-auto-xl { grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); }
+
+/* Gap utilities */
+.gap-0 { gap: 0; }
+.gap-xs { gap: var(--spacing-1); }
+.gap-sm { gap: var(--spacing-2); }
+.gap-md { gap: var(--spacing-4); }
+.gap-lg { gap: var(--spacing-6); }
+.gap-xl { gap: var(--spacing-8); }
+
+
+/* Flexbox System */
+.flex {
+  display: flex;
+}
+
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.flex-row {
+  flex-direction: row;
+}
+
+/* Flex alignment */
+.items-start { align-items: flex-start; }
+.items-center { align-items: center; }
+.items-end { align-items: flex-end; }
+.items-stretch { align-items: stretch; }
+.items-baseline { align-items: baseline; }
+
+.justify-start { justify-content: flex-start; }
+.justify-center { justify-content: center; }
+.justify-end { justify-content: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-around { justify-content: space-around; }
+.justify-evenly { justify-content: space-evenly; }
+
+/* Responsive helpers */
+@media (max-width: 767px) {
+  .mobile-stack { flex-direction: column; }
+  .mobile-stack > * { width: 100%; }
+}
+
+/* ============================================================================
+   Backdrop Utilities
+   Reusable backdrop layer for modal components (dialogs, drawers, overlays)
+   ============================================================================ */
+
+/* Base backdrop class for modal overlays */
+.backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--backdrop-bg);
+  backdrop-filter: var(--backdrop-filter);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  z-index: var(--z-modal, 1040);
+
+  &.active {
+    opacity: var(--backdrop-opacity, 1);
+    pointer-events: auto;
+  }
+
+  /* Backdrop variants */
+  &-light {
+    --backdrop-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.2));
+    --backdrop-brightness: 1.1;
+  }
+
+  &-dark {
+    --backdrop-bg: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
+    --backdrop-brightness: 0.6;
+  }
+
+  &-blur-sm {
+    --backdrop-blur: 5px;
+  }
+
+  &-blur-md {
+    --backdrop-blur: 10px;
+  }
+
+  &-blur-lg {
+    --backdrop-blur: 20px;
+  }
+}
+
+
+/* Optional utilities/features controlled by config options */
+/* - Body background mesh rule (applies one of the generated mesh vars) */
+/* - Liquid glass utility class */
+/* Optional background mesh applied from config */
+body {
+  background: var(--background-mesh-04);
+  background-attachment: fixed;
+}
+/* Liquid glass utility (opt-in via options.liquidGlassEffects) */
+.liquid-glass {
+  border-radius: var(--radius-lg);
+  /* Subtle translucent fill blended with surface */
+  background: color-mix(in oklab, var(--color-surface-subtle) 45%, transparent);
+
+  background-image: linear-gradient(
+    135deg,
+    rgba(255,255,255,0.35),
+    rgba(255,255,255,0.12)
+  );
+  /* Frosted glass blur + saturation */
+  -webkit-backdrop-filter: blur(12px) saturate(140%);
+  backdrop-filter: blur(12px) saturate(140%);
+  /* Soft inner highlight and outer depth */
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.6),
+    inset 0 -40px 80px rgba(255,255,255,0.12),
+    0 10px 30px rgba(0,0,0,0.10);
+  /* Glossy border with slight light and dark edges */
+  border: 1px solid color-mix(in oklab, var(--color-primary-500) 22%, transparent);
+  outline: 1px solid color-mix(in oklab, #ffffff 18%, transparent);
+  outline-offset: -1px;
+}
+
+html[data-theme="dark"] .liquid-glass {
+  background: color-mix(in oklab, var(--color-surface-inverse) 45%, transparent);
+  background-image: linear-gradient(
+    135deg,
+    color-mix(in oklab, var(--color-primary-300) 40%, transparent),
+    color-mix(in oklab, var(--color-surface-overlay) 48%, transparent)
+  );
+  box-shadow:
+    inset 0 1px 0 rgba(255,255,255,0.12),
+    inset 0 -40px 80px rgba(0,0,0,0.55),
+    0 18px 38px rgba(0,0,0,0.65);
+  border: 1px solid color-mix(in oklab, var(--color-primary-300) 26%, transparent);
+  outline: 1px solid color-mix(in oklab, #ffffff 16%, transparent);
+}
+
+/* Fallback when backdrop-filter isn't supported */
+@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
+  .liquid-glass {
+    /* Strengthen fill a bit to compensate for lack of blur */
+    background: color-mix(in oklab, var(--color-surface-subtle) 70%, rgba(255,255,255,0.4));
+    box-shadow:
+      inset 0 1px 0 rgba(255,255,255,0.6),
+      0 10px 24px rgba(0,0,0,0.08);
+  }
+
+  html[data-theme="dark"] .liquid-glass {
+    background: color-mix(in oklab, var(--color-surface-inverse) 70%, transparent);
+    box-shadow:
+      inset 0 1px 0 rgba(255,255,255,0.1),
+      0 18px 32px rgba(0,0,0,0.58);
+  }
+}
+
+
+/* ============================================================================
+   Border Gradient Utilities
+   Card outlines with gradient borders and glow effects
+   ============================================================================ */
+
+
+/* Gradient border utility - premium/promo card style */
+.border-gradient {
+  border: var(--border-width-medium) solid transparent;
+  background:
+    linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
+    linear-gradient(var(--gradient-angle, 135deg),
+      var(--color-primary-400),
+      var(--color-accent-400)
+    ) border-box;
+}
+
+/* Gradient border variants - different color combinations */
+.border-gradient-primary {
+  border: var(--border-width-medium) solid transparent;
+  background:
+    linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
+    linear-gradient(var(--gradient-angle, 135deg),
+      var(--color-primary-300),
+      var(--color-primary-600)
+    ) border-box;
+}
+
+.border-gradient-accent {
+  border: var(--border-width-medium) solid transparent;
+  background:
+    linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
+    linear-gradient(var(--gradient-angle, 135deg),
+      var(--color-accent-300),
+      var(--color-accent-600)
+    ) border-box;
+}
+
+.border-gradient-secondary {
+  border: var(--border-width-medium) solid transparent;
+  background:
+    linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
+    linear-gradient(var(--gradient-angle, 135deg),
+      var(--color-secondary-300),
+      var(--color-secondary-600)
+    ) border-box;
+}
+
+/* Gradient border with different strengths/thickness */
+.border-gradient-soft {
+  border: 1px solid transparent;
+  background:
+    linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
+    linear-gradient(var(--gradient-angle, 135deg),
+      var(--color-primary-400),
+      var(--color-accent-400)
+    ) border-box;
+}
+
+.border-gradient-medium {
+  border: 2px solid transparent;
+  background:
+    linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
+    linear-gradient(var(--gradient-angle, 135deg),
+      var(--color-primary-400),
+      var(--color-accent-400)
+    ) border-box;
+}
+
+.border-gradient-strong {
+  border: 3px solid transparent;
+  background:
+    linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
+    linear-gradient(var(--gradient-angle, 135deg),
+      var(--color-primary-400),
+      var(--color-accent-400)
+    ) border-box;
+}
+
+/* Glow effect utility - for callouts and active states */
+.border-glow {
+  box-shadow: 0 0 12px var(--color-primary-500);
+}
+
+.border-glow-sm {
+  box-shadow: 0 0 6px var(--color-primary-500);
+}
+
+.border-glow-lg {
+  box-shadow: 0 0 20px var(--color-primary-500);
+}
+
+/* Combined gradient + glow for premium effects */
+.border-gradient-glow {
+  border: var(--border-width-medium) solid transparent;
+  background:
+    linear-gradient(var(--color-surface-base), var(--color-surface-base)) padding-box,
+    linear-gradient(135deg,
+      var(--color-primary-400),
+      var(--color-accent-400)
+    ) border-box;
+  box-shadow: 0 0 12px var(--color-primary-500);
+}
+
+/* Semantic glow variants */
+.border-glow-primary {
+  box-shadow: 0 0 12px var(--color-primary-500);
+}
+
+.border-glow-accent {
+  box-shadow: 0 0 12px var(--color-accent-500);
+}
+
+.border-glow-success {
+  box-shadow: 0 0 12px var(--color-success-500);
+}
+
+.border-glow-warning {
+  box-shadow: 0 0 12px var(--color-warning-500);
+}
+
+.border-glow-danger {
+  box-shadow: 0 0 12px var(--color-danger-500);
+}
+
+
+
+/* Surface utilities */
+
+.surface {
+  background-color: var(--color-surface-base);
+}
+
+.surface-subtle {
+  background-color: var(--color-surface-subtle);
+}
+
+.surface-elevated {
+  background-color: var(--color-surface-elevated);
+}
+
+.surface-sunken {
+  background-color: var(--color-surface-sunken);
+}
+
+.surface-overlay {
+  background-color: var(--color-surface-overlay);
+}
+
+/* Translucent semantic variants */
+.surface-translucent {
+  background-color: var(--color-surface-translucent-50);
+}
+
+.surface-translucent-25 {
+  background-color: var(--color-surface-translucent-25);
+}
+
+.surface-translucent-50 {
+  background-color: var(--color-surface-translucent-50);
+}
+
+.surface-translucent-75 {
+  background-color: var(--color-surface-translucent-75);
+}
+
+/* Legacy utility retained for backwards compatibility (opinionated overlay) */
+.surface-overlay {
+  padding: var(--spacing-4);
+  background-color: var(--color-surface-overlay);
+  box-shadow: var(--shadow-lg);
+  border-radius: var(--radius-md);
+}
+
+
+/* Inverse surface (dark) using PDS tokens; text/icons inherit currentColor */
+.surface-inverse {
+  background-color: var(--color-surface-inverse);
+  /* Ensure foregrounds inside use the correct smart-surface tokens */
+  color: var(--surface-inverse-text);
+  --color-text-primary: var(--surface-inverse-text);
+  --color-text-secondary: var(--surface-inverse-text-secondary);
+  --color-text-muted: var(--surface-inverse-text-muted);
+  /* Ensure code/pre and other muted surfaces have contrast on inverse */
+  --color-surface-muted: rgba(255, 255, 255, 0.08);
+  /* Optional: adjust borders/shadows if utilities/components read these */
+  --color-border: var(--surface-inverse-border);
+
+  pds-icon {
+    color: var(--surface-inverse-icon);
+  }
+}
+
+/* Shadow utilities */
+.shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.shadow-base, .shadow {
+  box-shadow: var(--shadow-base);
+}
+
+.shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.shadow-xl {
+  box-shadow: var(--shadow-xl);
+}
+
+.shadow-inner {
+  box-shadow: var(--shadow-inner);
+}
+
+.shadow-none {
+  box-shadow: none;
+}
+
+.text-muted {
+  color: var(--color-text-muted);
+}
+
+
+/* Media Element Utilities */
+
+/* Gallery images */
+.img-gallery {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 1;
+  object-fit: cover;
+  border-radius: var(--radius-sm);
+}
+
+/* Responsive images with different radius sizes */
+.img-rounded-sm { border-radius: var(--radius-sm); }
+.img-rounded-md { border-radius: var(--radius-md); }
+.img-rounded-lg { border-radius: var(--radius-lg); }
+.img-rounded-xl { border-radius: var(--radius-xl); }
+.img-rounded-full { border-radius: var(--radius-full); }
+
+/* Inline images */
+.img-inline {
+  display: inline;
+  vertical-align: middle;
+  border-radius: var(--radius-xs);
+  margin: 0 var(--spacing-1);
+  max-width: 60px;
+  height: auto;
+}
+
+/* Video specific utilities */
+.video-responsive {
+  width: 100%;
+  max-width: 600px;
+  height: auto;
+  border-radius: var(--radius-md);
+}
+
+/* Figure utilities */
+.figure-responsive {
+  width: 100%;
+  height: auto;
+}
+
+
+
+/* Mobile-First Responsive Design */
+
+/* Small devices (640px and up) */
+@media (min-width: 640px) {
+  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
+  .sm\:flex-row { flex-direction: row; }
+  .sm\:text-sm { font-size: var(--font-size-sm); }
+  .sm\:p-6 { padding: var(--spacing-6); }
+  .sm\:gap-6 { gap: var(--spacing-6); }
+  .sm\:hidden { display: none; }
+  .sm\:block { display: block; }
+}
+
+/* Medium devices (768px and up) */
+@media (min-width: 768px) {
+  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
+  .md\:text-lg { font-size: var(--font-size-lg); }
+  .md\:p-8 { padding: var(--spacing-8); }
+  .md\:gap-8 { gap: var(--spacing-8); }
+  .md\:flex-row { flex-direction: row; }
+  .md\:w-1\/2 { width: 50%; }
+  .md\:w-1\/3 { width: 33.333333%; }
+  .md\:hidden { display: none; }
+  .md\:block { display: block; }
+}
+
+/* Large devices (1024px and up) */
+@media (min-width: 1024px) {
+  .lg\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
+  .lg\:text-xl { font-size: var(--font-size-xl); }
+  .lg\:p-12 { padding: var(--spacing-12); }
+  .lg\:gap-12 { gap: var(--spacing-12); }
+  .lg\:w-1\/4 { width: 25%; }
+  .lg\:hidden { display: none; }
+  .lg\:block { display: block; }
+}
+
+/* Touch device optimizations */
+@media (hover: none) and (pointer: coarse) {
+  /* Touch devices - larger touch targets for interactive elements */
+  button, a, select, textarea,
+  input:not([type="radio"]):not([type="checkbox"]) {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  
+  /* Radio and checkbox inputs: keep reasonable size but ensure label tap area is large */
+  input[type="radio"],
+  input[type="checkbox"] {
+    /* Keep native size - labels provide the touch target */
+    min-height: unset;
+    min-width: unset;
+  }
+  
+  /* Ensure labels with radio/checkbox have adequate touch targets */
+  /* Exclude button-style fieldsets which already have proper sizing */
+  label:has(input[type="radio"]):not(fieldset.buttons label),
+  label:has(input[type="checkbox"]):not(fieldset.buttons label),
+  fieldset[role="radiogroup"]:not(.buttons) label,
+  fieldset[role="group"]:not(.buttons) label {
+    min-height: 44px;
+    display: inline-flex;
+    align-items: center;
+    padding: var(--spacing-2) 0;
+  }
+  
+  /* Disable hover effects
+   on touch devices */
+  .card {
+    &:hover {
+      box-shadow: var(--shadow-base);
+    }
+  }
+  
+  a {
+    &:hover {
+      color: var(--color-primary-600);
+    }
+  }
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* High contrast mode */
+@media (prefers-contrast: high) {
+  :root {
+    --color-primary-600: #0000ff;
+    --color-primary-700: #0000cc;
+  }
+  
+  button, input, textarea, select {
+    border-width: 2px;
+  }
+}
+
+/* Print styles */
+@media print {
+  *, *::before, *::after {
+    background: transparent !important;
+    color: black !important;
+    box-shadow: none !important;
+  }
+  
+  a, a:visited {
+    text-decoration: underline;
+  }
+  
+  button {
+    display: none;
+  }
+  
+  .mobile-hidden, .desktop-hidden {
+    display: block !important;
+  }
+}
+
+
+
+}