vanduo-framework 1.1.8

package/css/components/cards.css

@@ -0,0 +1,304 @@
+/**
+ * Vanduo Framework - Cards
+ * Card component for content containers
+ */
+
+:root {
+  /* Card Padding (Fibonacci: 13, 21, 34) */
+  --card-padding: 1.3125rem;
+  /* 21px - fib */
+  --card-padding-sm: 0.8125rem;
+  /* 13px - fib */
+  --card-padding-lg: 2.125rem;
+  /* 34px - fib */
+
+  /* Card Border */
+  --card-border-width: 1px;
+  --card-border-color: var(--border-color);
+  --card-border-radius: var(--btn-border-radius-lg);
+
+  /* Card Background */
+  --card-bg: var(--color-white);
+  --card-bg-filled: var(--bg-secondary);
+
+  /* Card Shadow */
+  --card-shadow: var(--shadow-sm);
+  --card-shadow-elevated: var(--shadow-sm);
+
+  /* Card Glow Effect - uses primary color scale */
+  --card-glow-color: var(--primary-2);
+  --card-glow-border-color: var(--primary-3);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --card-bg: var(--bg-secondary);
+  --card-bg-filled: var(--bg-primary);
+  /* Glow uses lighter primary shades for dark mode visibility */
+  --card-glow-color: var(--primary-3);
+  --card-glow-border-color: var(--primary-4);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --card-bg: var(--bg-secondary);
+    --card-bg-filled: var(--bg-primary);
+    /* Glow uses lighter primary shades for dark mode visibility */
+    --card-glow-color: var(--primary-3);
+    --card-glow-border-color: var(--primary-4);
+  }
+}
+
+/* Base Card */
+.vd-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  word-wrap: break-word;
+  background-color: var(--card-bg);
+  background-clip: border-box;
+  border: var(--card-border-width) solid var(--card-border-color);
+  border-radius: var(--card-border-radius);
+  box-shadow: var(--card-shadow);
+}
+
+/* Card Variants - Elevated (default) */
+.vd-card-elevated,
+.vd-card {
+  box-shadow: var(--card-shadow-elevated);
+}
+
+/* Card Variants - Outlined */
+.vd-card-outlined {
+  box-shadow: none;
+  border: var(--card-border-width) solid var(--card-border-color);
+}
+
+/* Card Variants - Filled */
+.vd-card-filled {
+  background-color: var(--card-bg-filled);
+  box-shadow: none;
+  border: none;
+}
+
+/* Card Header */
+.vd-card-header {
+  padding: var(--card-padding);
+  margin-bottom: 0;
+  background-color: transparent;
+  border-bottom: var(--card-border-width) solid var(--card-border-color);
+  border-top-left-radius: calc(var(--card-border-radius) - var(--card-border-width));
+  border-top-right-radius: calc(var(--card-border-radius) - var(--card-border-width));
+}
+
+.vd-card-header:first-child {
+  border-top-left-radius: var(--card-border-radius);
+  border-top-right-radius: var(--card-border-radius);
+}
+
+.vd-card-header-sm {
+  padding: var(--card-padding-sm);
+}
+
+.vd-card-header-lg {
+  padding: var(--card-padding-lg);
+}
+
+/* Card Body */
+.vd-card-body {
+  flex: 1 1 auto;
+  padding: var(--card-padding);
+}
+
+.vd-card-body-sm {
+  padding: var(--card-padding-sm);
+}
+
+.vd-card-body-lg {
+  padding: var(--card-padding-lg);
+}
+
+/* Card Footer */
+.vd-card-footer {
+  padding: var(--card-padding);
+  margin-top: 0;
+  background-color: transparent;
+  border-top: var(--card-border-width) solid var(--card-border-color);
+  border-bottom-left-radius: calc(var(--card-border-radius) - var(--card-border-width));
+  border-bottom-right-radius: calc(var(--card-border-radius) - var(--card-border-width));
+}
+
+.vd-card-footer:last-child {
+  border-bottom-left-radius: var(--card-border-radius);
+  border-bottom-right-radius: var(--card-border-radius);
+}
+
+.vd-card-footer-sm {
+  padding: var(--card-padding-sm);
+}
+
+.vd-card-footer-lg {
+  padding: var(--card-padding-lg);
+}
+
+/* Card Image */
+.vd-card-image {
+  width: 100%;
+  height: auto;
+  border-top-left-radius: calc(var(--card-border-radius) - var(--card-border-width));
+  border-top-right-radius: calc(var(--card-border-radius) - var(--card-border-width));
+}
+
+.vd-card-image:first-child {
+  border-top-left-radius: var(--card-border-radius);
+  border-top-right-radius: var(--card-border-radius);
+}
+
+.vd-card-image:last-child {
+  border-bottom-left-radius: var(--card-border-radius);
+  border-bottom-right-radius: var(--card-border-radius);
+}
+
+/* Card Image Container */
+.vd-card-image-container {
+  position: relative;
+  overflow: hidden;
+  border-top-left-radius: calc(var(--card-border-radius) - var(--card-border-width));
+  border-top-right-radius: calc(var(--card-border-radius) - var(--card-border-width));
+}
+
+.vd-card-image-container:first-child {
+  border-top-left-radius: var(--card-border-radius);
+  border-top-right-radius: var(--card-border-radius);
+}
+
+.vd-card-image-container img {
+  width: 100%;
+  height: auto;
+  display: block;
+}
+
+/* Card Title */
+.vd-card-title {
+  margin-bottom: 0.5rem;
+  font-size: var(--font-size-xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--text-primary);
+}
+
+.vd-card-title:last-child {
+  margin-bottom: 0;
+}
+
+/* Card Subtitle */
+.vd-card-subtitle {
+  margin-top: -0.25rem;
+  margin-bottom: 0.5rem;
+  font-size: var(--font-size-sm);
+  color: var(--text-secondary);
+}
+
+/* Card Text */
+.vd-card-text {
+  margin-bottom: 1rem;
+  color: var(--text-primary);
+}
+
+.vd-card-text:last-child {
+  margin-bottom: 0;
+}
+
+/* Card Actions */
+.vd-card-actions {
+  display: flex;
+  gap: 0.5rem;
+  padding: var(--card-padding);
+  border-top: var(--card-border-width) solid var(--card-border-color);
+}
+
+.vd-card-actions-sm {
+  padding: var(--card-padding-sm);
+}
+
+.vd-card-actions-lg {
+  padding: var(--card-padding-lg);
+}
+
+/* Card with No Padding */
+.vd-card-no-padding .vd-card-body {
+  padding: 0;
+}
+
+.vd-card-no-padding .vd-card-header {
+  padding: var(--card-padding);
+}
+
+.vd-card-no-padding .vd-card-footer {
+  padding: var(--card-padding);
+}
+
+/* Card Sizes - Compact */
+.vd-card-compact .vd-card-header,
+.vd-card-compact .vd-card-body,
+.vd-card-compact .vd-card-footer {
+  padding: var(--card-padding-sm);
+}
+
+/* Card Sizes - Spacious */
+.vd-card-spacious .vd-card-header,
+.vd-card-spacious .vd-card-body,
+.vd-card-spacious .vd-card-footer {
+  padding: var(--card-padding-lg);
+}
+
+/* Card Glow Effect */
+.vd-card-glow {
+  transition: box-shadow 0.3s ease, border-color 0.3s ease;
+  border-color: var(--card-border-color);
+}
+
+.vd-card-glow:hover {
+  box-shadow: 0 0 15px 0 var(--card-glow-color), var(--card-shadow);
+  border-color: var(--card-glow-border-color);
+}
+
+/* Card Link */
+a.vd-card {
+  text-decoration: none;
+  color: inherit;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+a.vd-card:hover {
+  text-decoration: none;
+  transform: translateY(-2px);
+  box-shadow: var(--shadow-xl);
+}
+
+a.vd-card.vd-card-glow:hover {
+  box-shadow: 0 0 15px 0 var(--card-glow-color), var(--shadow-xl);
+  border-color: var(--card-glow-border-color);
+}
+
+a.vd-card:active {
+  transform: translateY(0);
+}
+
+/* Card Groups (for multiple cards) */
+.vd-card-group {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  /* Fibonacci-inspired spacing */
+}
+
+@media (min-width: 768px) {
+  .vd-card-group {
+    flex-direction: row;
+  }
+
+  .vd-card-group>.vd-card {
+    flex: 1 1 0%;
+  }
+}

package/css/components/chips.css

@@ -0,0 +1,259 @@
+/**
+ * Vanduo Framework - Chips/Tags
+ * Small interactive elements for tags, filters, and selections
+ */
+
+:root {
+  /* Chip Sizing (Fibonacci) */
+  --chip-padding-x: 0.8125rem;     /* 13px - fib */
+  --chip-padding-y: 0.3125rem;     /* 5px  - fib */
+  --chip-padding-x-sm: 0.5rem;     /* 8px  - fib */
+  --chip-padding-y-sm: 0.1875rem;  /* 3px  - fib */
+  --chip-padding-x-lg: 1.3125rem;  /* 21px - fib */
+  --chip-padding-y-lg: 0.5rem;     /* 8px  - fib */
+  --chip-border-radius: 9999px;
+  --chip-font-size: var(--font-size-sm);
+  --chip-font-size-sm: var(--font-size-xs);
+  --chip-font-size-lg: var(--font-size-base);
+
+  /* Chip Colors */
+  --chip-bg: var(--bg-secondary);
+  --chip-text: var(--text-primary);
+  --chip-border: var(--border-color);
+}
+
+/* Dark Theme Overrides */
+[data-theme="dark"] {
+  --chip-bg: var(--color-gray-700);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) {
+    --chip-bg: var(--color-gray-700);
+  }
+}
+
+/* Base Chip */
+.vd-chip,
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: var(--chip-padding-y) var(--chip-padding-x);
+  font-size: var(--chip-font-size);
+  font-weight: var(--font-weight-medium);
+  line-height: 1.2;
+  color: var(--chip-text);
+  background-color: var(--chip-bg);
+  border-radius: var(--chip-border-radius);
+  white-space: nowrap;
+  vertical-align: middle;
+  transition: var(--transition-base);
+}
+
+/* Chip Sizes */
+.vd-chip-sm,
+.tag-sm {
+  padding: var(--chip-padding-y-sm) var(--chip-padding-x-sm);
+  font-size: var(--chip-font-size-sm);
+}
+
+.vd-chip-lg,
+.tag-lg {
+  padding: var(--chip-padding-y-lg) var(--chip-padding-x-lg);
+  font-size: var(--chip-font-size-lg);
+}
+
+/* Chip Color Variants */
+.vd-chip-primary,
+.tag-primary {
+  background-color: var(--color-primary);
+  color: var(--color-white);
+}
+
+.vd-chip-secondary,
+.tag-secondary {
+  background-color: var(--color-secondary);
+  color: var(--color-white);
+}
+
+.vd-chip-success,
+.tag-success {
+  background-color: var(--color-success);
+  color: var(--color-white);
+}
+
+.vd-chip-warning,
+.tag-warning {
+  background-color: var(--color-warning);
+  color: var(--color-gray-900);
+}
+
+.vd-chip-error,
+.tag-error,
+.vd-chip-danger,
+.tag-danger {
+  background-color: var(--color-error);
+  color: var(--color-white);
+}
+
+.vd-chip-info,
+.tag-info {
+  background-color: var(--color-info);
+  color: var(--color-white);
+}
+
+/* Outline Variants */
+.vd-chip-outline,
+.tag-outline {
+  background-color: transparent;
+  border: 1px solid var(--chip-border);
+}
+
+.vd-chip-outline.vd-chip-primary,
+.tag-outline.tag-primary {
+  border-color: var(--color-primary);
+  color: var(--color-primary);
+  background-color: transparent;
+}
+
+.vd-chip-outline.vd-chip-success,
+.tag-outline.tag-success {
+  border-color: var(--color-success);
+  color: var(--color-success);
+  background-color: transparent;
+}
+
+.vd-chip-outline.vd-chip-warning,
+.tag-outline.tag-warning {
+  border-color: var(--color-warning);
+  color: var(--color-warning);
+  background-color: transparent;
+}
+
+.vd-chip-outline.vd-chip-error,
+.tag-outline.tag-error {
+  border-color: var(--color-error);
+  color: var(--color-error);
+  background-color: transparent;
+}
+
+.vd-chip-outline.vd-chip-info,
+.tag-outline.tag-info {
+  border-color: var(--color-info);
+  color: var(--color-info);
+  background-color: transparent;
+}
+
+/* Clickable/Interactive Chip */
+.vd-chip-clickable,
+.tag-clickable,
+a.vd-chip,
+a.tag,
+button.vd-chip,
+button.tag {
+  cursor: pointer;
+  text-decoration: none;
+  border: none;
+}
+
+.vd-chip-clickable:hover,
+.tag-clickable:hover,
+a.vd-chip:hover,
+a.tag:hover,
+button.vd-chip:hover,
+button.tag:hover {
+  filter: brightness(0.9);
+}
+
+.vd-chip-clickable:focus-visible,
+.tag-clickable:focus-visible,
+a.vd-chip:focus-visible,
+a.tag:focus-visible,
+button.vd-chip:focus-visible,
+button.tag:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+/* Dismissible Chip */
+.vd-chip-dismissible,
+.tag-dismissible {
+  padding-right: 0.375rem;
+}
+
+.vd-chip-close,
+.tag-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  padding: 0;
+  margin-left: 0.125rem;
+  font-size: 0.75rem;
+  line-height: 1;
+  color: inherit;
+  background: transparent;
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  opacity: 0.7;
+  transition: opacity 0.15s ease;
+}
+
+.vd-chip-close:hover,
+.tag-close:hover {
+  opacity: 1;
+}
+
+.vd-chip-close::before,
+.tag-close::before {
+  content: '\00D7';
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+/* Chip with Avatar/Image */
+.vd-chip-avatar,
+.tag-avatar {
+  padding-left: 0.25rem;
+}
+
+.vd-chip-avatar img,
+.tag-avatar img {
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.vd-chip-sm.vd-chip-avatar img,
+.tag-sm.tag-avatar img {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.vd-chip-lg.vd-chip-avatar img,
+.tag-lg.tag-avatar img {
+  width: 1.75rem;
+  height: 1.75rem;
+}
+
+/* Chip Group */
+.vd-chip-group,
+.tag-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  .vd-chip,
+  .tag,
+  .vd-chip-close,
+  .tag-close {
+    transition: none;
+  }
+}