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>
This commit is contained in:
michael
2026-03-08 10:03:48 -07:00
parent 54b58a6ac6
commit 0cfa83259e
13 changed files with 384 additions and 283 deletions

View File

@@ -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;