Remove glows, refine feature legend, forms, and showcase pages

- Delete glows.css and GlowsPage (unused)
- Enhance DTFeatureLegend and feature-legend.css with improved layout
- Update DTRadioGroup styling
- Refine bevels.css, forms-dt.css
- Update AnimationsPage, CardsAdvancedPage, FormsPage, HomePage
- Add type:module to web package.json

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

packages/web/package.json

@@ -28,6 +28,7 @@
   "main": "dist/index.css",
   "exports": {
     ".": "./dist/index.css",
+    "./dist/index.css": "./dist/index.css",
     "./tokens/*": "./dist/tokens/*",
     "./components/*": "./dist/components/*",
     "./fonts/*": "./dist/fonts/*",

packages/web/src/components/bevels.css

@@ -450,14 +450,13 @@
 /* ============================================================================
    Card Color Modes — per-instance color overrides
    Sets --dt-card-color, --dt-card-color-selected, --dt-card-color-rgb,
-   --dt-glow-color, and --accent-mode for use by all card sub-components.
+   and --accent-mode for use by all card sub-components.
    Source: dt-shopify-storefront .mode-* classes
    ============================================================================ */
 [data-brand="dt"] .mode-normal {
   --dt-card-color: var(--mode-normal);
   --dt-card-color-rgb: var(--mode-normal-rgb);
   --dt-card-color-selected: var(--mode-normal-selected);
-  --dt-glow-color: var(--mode-normal);
   --accent-mode: var(--mode-emphasis);
 }
 
@@ -465,7 +464,6 @@
   --dt-card-color: var(--mode-emphasis);
   --dt-card-color-rgb: var(--mode-emphasis-rgb);
   --dt-card-color-selected: var(--mode-emphasis-selected);
-  --dt-glow-color: var(--mode-emphasis);
   --accent-mode: var(--mode-normal);
 }
 
@@ -473,7 +471,6 @@
   --dt-card-color: var(--mode-warning);
   --dt-card-color-rgb: var(--mode-warning-rgb);
   --dt-card-color-selected: var(--mode-warning-selected);
-  --dt-glow-color: var(--mode-warning);
   --accent-mode: var(--mode-emphasis);
 }
 
@@ -481,7 +478,6 @@
   --dt-card-color: var(--mode-success);
   --dt-card-color-rgb: var(--mode-success-rgb);
   --dt-card-color-selected: var(--mode-success-selected);
-  --dt-glow-color: var(--mode-success);
   --accent-mode: var(--mode-emphasis);
 }
 
@@ -489,7 +485,6 @@
   --dt-card-color: var(--mode-other);
   --dt-card-color-rgb: var(--mode-other-rgb);
   --dt-card-color-selected: var(--mode-other-selected);
-  --dt-glow-color: var(--mode-other);
   --accent-mode: var(--mode-normal);
 }
 

packages/web/src/components/feature-legend.css

@@ -2,55 +2,184 @@
 /* Source: dt-shopify-storefront UseCaseLegend component */
 
 /* ============================================================================
-   Feature Legend — icon grid with rotated labels
+   Feature Legend — interactive icon grid with rotated labels, hover details,
+   ? toggle, bordered grid with dark cell backgrounds.
    ============================================================================ */
 .dt-feature-legend {
   display: flex;
   flex-direction: column;
-  gap: 0;
 }
 
+/* ---- Header bar ---- */
 .dt-feature-legend-header {
-  padding: 8px 16px;
+  display: flex;
+  flex-direction: row;
   background: var(--dt-card-color, var(--color-primary));
   color: var(--color-bg);
+  transition: height 0.2s ease-out, opacity 0.2s ease-out;
+}
+
+.dt-feature-legend-header-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 8px 12px 6px;
+}
+
+.dt-feature-legend-title {
   font-weight: 700;
+  font-size: 1.75rem;
+  line-height: 1.1;
+  color: var(--color-bg);
+}
+
+.dt-feature-legend-detail {
   font-size: 0.875rem;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+  margin-top: 2px;
+  min-height: 1.25em;
+}
+
+.dt-feature-legend-detail .dt-feature-supported { color: var(--color-bg); }
+.dt-feature-legend-detail .dt-feature-disabled { color: var(--color-bg); opacity: 0.7; }
+.dt-feature-legend-detail .dt-feature-unsupported { color: #7f1d1d; }
+
+.dt-feature-legend-hint {
+  opacity: 0.5;
+}
+
+/* ? toggle button on right edge */
+.dt-feature-legend-toggle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 30px;
+  background: var(--dt-card-color, var(--color-primary));
+  color: var(--color-bg);
+  border: none;
+  font-weight: 700;
+  font-size: 1.25rem;
+  cursor: pointer;
+  transition: opacity 0.15s;
+}
+
+.dt-feature-legend-toggle:hover {
+  opacity: 0.8;
+}
+
+/* ---- Grid body ---- */
+.dt-feature-legend-body {
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
 }
 
 .dt-feature-legend-grid {
   display: flex;
   flex-wrap: wrap;
-  gap: 0;
+  justify-content: space-around;
+  flex: 1;
+  border: 2px solid var(--dt-card-color, var(--color-primary));
+  padding-top: 8px;
+  padding-bottom: 8px;
+  overflow: visible;
+  transition: padding 0.3s ease-out;
 }
 
+.dt-feature-legend-grid.with-labels {
+  padding-top: 160px;
+  padding-bottom: 8px;
+}
+
+.dt-feature-legend-grid.with-labels.with-labels-bottom {
+  padding-bottom: 160px;
+}
+
+/* ---- Grid item / cell ---- */
 .dt-feature-legend-item {
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: 4px;
+  justify-content: center;
   padding: 8px 4px;
-  flex: 0 0 20%; /* 5 columns */
+  background: var(--color-bg);
+  cursor: pointer;
 }
 
+/* ---- Icon ---- */
 .dt-feature-legend-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-size: 42px;
   line-height: 1;
   color: var(--dt-feature-color, var(--color-primary));
+  transition: opacity 0.15s;
 }
 
-.dt-feature-legend-label {
-  font-size: 0.75rem;
+.dt-feature-legend-item:hover .dt-feature-legend-icon {
+  animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* ---- Rotated vertical label ---- */
+.dt-feature-legend-rotated-label {
+  position: absolute;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  padding: 8px 2px;
+  z-index: 1;
+  opacity: 0;
+  transition: opacity 0.3s ease-out 0.15s; /* delay so padding opens first */
+  pointer-events: none;
+}
+
+.dt-feature-legend-rotated-label.label-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.dt-feature-legend-rotated-label.label-above {
+  bottom: 100%;
+}
+
+.dt-feature-legend-rotated-label.label-below {
+  top: 100%;
+}
+
+.dt-feature-legend-rotated-label span {
+  writing-mode: vertical-rl;
+  transform: rotate(180deg);
+  color: var(--dt-feature-color, var(--color-primary));
+  font-size: 1rem;
   font-weight: 600;
-  color: var(--dt-feature-color, var(--color-text-primary));
-  text-align: center;
-  line-height: 1.2;
-  overflow-wrap: break-word;
+  white-space: nowrap;
+  padding: 4px 2px;
 }
 
-/* Feature state color classes */
+/* ---- Feature state color classes ---- */
 .dt-feature-supported   { --dt-feature-color: var(--mode-normal, var(--color-primary)); }
 .dt-feature-disabled    { --dt-feature-color: var(--mode-emphasis, var(--color-secondary)); }
 .dt-feature-unsupported { --dt-feature-color: var(--mode-warning, var(--color-error)); }
+
+/* ---- Variant header colors ---- */
+.mode-normal  .dt-feature-legend-header,
+.mode-normal  .dt-feature-legend-toggle { background: var(--mode-normal, var(--color-primary)); }
+.mode-normal  .dt-feature-legend-grid   { border-color: var(--mode-normal, var(--color-primary)); }
+
+.mode-emphasis .dt-feature-legend-header,
+.mode-emphasis .dt-feature-legend-toggle { background: var(--mode-emphasis, var(--color-secondary)); }
+.mode-emphasis .dt-feature-legend-grid   { border-color: var(--mode-emphasis, var(--color-secondary)); }
+
+.mode-warning .dt-feature-legend-header,
+.mode-warning .dt-feature-legend-toggle { background: var(--mode-warning, var(--color-error)); }
+.mode-warning .dt-feature-legend-grid   { border-color: var(--mode-warning, var(--color-error)); }
+
+.mode-success .dt-feature-legend-header,
+.mode-success .dt-feature-legend-toggle { background: var(--mode-success, var(--color-accent)); }
+.mode-success .dt-feature-legend-grid   { border-color: var(--mode-success, var(--color-accent)); }
+
+.mode-other .dt-feature-legend-header,
+.mode-other .dt-feature-legend-toggle { background: var(--mode-other, var(--color-other)); }
+.mode-other .dt-feature-legend-grid   { border-color: var(--mode-other, var(--color-other)); }

packages/web/src/components/forms-dt.css

@@ -143,49 +143,38 @@
 /* ============================================================================
    Radio Button — Hexagonal indicator
    Matches RN DTRadioGroup: outlined hexagon with inner filled dot on check.
-   Outer hexagon is always stroked (accent border); inner dot appears on check.
+   Uses a custom span (.dt-radio-hex) since ::before on <input> is unreliable.
    ============================================================================ */
-[data-brand="dt"] input[type="radio"] {
-  appearance: none;
-  -webkit-appearance: none;
-  display: grid;
-  place-content: center;
+[data-brand="dt"] .dt-radio-hex {
+  position: relative;
+  display: inline-block;
   width: 22px;
   height: 22px;
   flex-shrink: 0;
-  margin: 0;
-  border: none;
   background: var(--color-primary);
-  cursor: pointer;
   clip-path: polygon(
     50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%
   );
   transition: background var(--transition-fast);
 }
 
-/* Inner surface — creates the outlined hexagon look (accent border + transparent center) */
-[data-brand="dt"] input[type="radio"]::before {
-  content: '';
+/* Inner surface — outlined hexagon look (accent border + dark center) */
+[data-brand="dt"] .dt-radio-hex-inner {
   position: absolute;
   inset: 2px;
   background: var(--color-bg);
   clip-path: polygon(
     50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%
   );
-  transition: background var(--transition-fast);
+  transition: all var(--transition-fast);
 }
 
-/* Checked: inner dot fills with accent color (smaller inset for the dot effect) */
-[data-brand="dt"] input[type="radio"]:checked::before {
+/* Checked: inner dot fills with accent color (smaller inset) */
+[data-brand="dt"] .dt-radio-hex.checked .dt-radio-hex-inner {
   inset: 5px;
   background: var(--color-primary);
 }
 
-[data-brand="dt"] input[type="radio"]:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 /* Radio group option container */
 .dt-radio-option {
   display: flex;
@@ -403,11 +392,6 @@
   animation: dt-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
-/* Nested level indentation */
-.dt-menu-item[style*="--dt-menu-level"] {
-  padding-left: calc(0.75rem + var(--dt-menu-level, 0) * 1rem);
-}
-
 /* Classic brand: rounded, thinner borders */
 [data-brand="classic"] .dt-menu-item {
   border-top-width: 2px;

packages/web/src/components/glows.css

@@ -1,81 +0,0 @@
-/* dt-web-theme: Glow & Neon Effects */
-/* Source: dt-shopify-storefront glow patterns */
-/*                                                                         */
-/* Elements with clip-path use filter: drop-shadow() instead of box-shadow */
-/* because clip-path clips box-shadow but filter follows the clipped shape. */
-
-/* ============================================================================
-   Button Glows — filter: drop-shadow (buttons have clip-path)
-   ============================================================================ */
-[data-brand="dt"] .btn-primary {
-  box-shadow: none;
-  filter: drop-shadow(0 0 10px rgba(var(--color-primary-rgb), 0.3));
-}
-
-[data-brand="dt"] .btn-primary:hover {
-  box-shadow: none;
-  filter: drop-shadow(0 0 15px rgba(var(--color-accent-rgb), 0.4));
-}
-
-[data-brand="dt"] .btn-secondary:hover {
-  filter: drop-shadow(0 0 8px rgba(var(--color-primary-rgb), 0.3));
-}
-
-[data-brand="dt"] .btn-danger {
-  box-shadow: none;
-  filter: drop-shadow(0 0 10px rgba(var(--color-error-rgb), 0.3));
-}
-
-[data-brand="dt"] .btn-danger:hover {
-  box-shadow: none;
-  filter: drop-shadow(0 0 15px rgba(var(--color-error-rgb), 0.4));
-}
-
-/* ============================================================================
-   Link Glow
-   ============================================================================ */
-[data-brand="dt"] a:hover {
-  text-shadow: 0 0 8px var(--dt-glow-color, var(--color-primary));
-}
-
-/* ============================================================================
-   Terminal Inset Glow (no clip-path, box-shadow OK)
-   ============================================================================ */
-[data-brand="dt"] .terminal {
-  box-shadow: inset 0 0 10px rgba(var(--color-accent-rgb), 0.05),
-              0 0 10px rgba(var(--color-accent-rgb), 0.1);
-}
-
-/* ============================================================================
-   Card Hover Glow — filter: drop-shadow (cards have clip-path)
-   ============================================================================ */
-[data-brand="dt"] .card:hover,
-[data-brand="dt"] .dt-bevel-card:hover {
-  filter: drop-shadow(0 0 8px rgba(var(--dt-card-color-rgb, var(--color-primary-rgb)), 0.3));
-}
-
-/* ============================================================================
-   Input Focus Glow (no clip-path on inputs, box-shadow OK)
-   ============================================================================ */
-[data-brand="dt"] .input:focus {
-  box-shadow: 0 4px 0 1px var(--color-primary);
-}
-
-/* ============================================================================
-   Generic Glow Utilities
-   ============================================================================ */
-.dt-glow {
-  filter: drop-shadow(0 0 10px rgba(var(--color-primary-rgb), 0.3));
-}
-
-.dt-glow-strong {
-  filter: drop-shadow(0 0 15px rgba(var(--color-primary-rgb), 0.5));
-}
-
-.dt-glow-inset {
-  box-shadow: inset 0 0 10px rgba(var(--color-primary-rgb), 0.1);
-}
-
-.dt-text-glow {
-  text-shadow: 0 0 8px currentColor;
-}

packages/web/src/index.css

@@ -13,7 +13,6 @@
 
 /* Component styles — DT visual identity */
 @import './components/bevels.css';
-@import './components/glows.css';
 @import './components/forms-dt.css';
 @import './components/animations.css';
 @import './components/scrollbar.css';