From baf8cd3b2ad830e0b3094c2285dc2f42f3f3126b Mon Sep 17 00:00:00 2001 From: michael Date: Wed, 4 Mar 2026 10:36:04 -0800 Subject: [PATCH] Remove supra brand from design system Supra (VivoKey MD3 theme) has been extracted into a standalone Dangerous-Pi theme plugin. Remove all supra references from tokens, web CSS, showcase apps, and documentation. - Delete supra brand tokens and elevation.css - Update ThemeBrand type to "dt" | "classic" - Remove supra from CSS generation, imports, and bevels - Update CLAUDE.md and package READMEs Co-Authored-By: Claude Opus 4.6 --- CLAUDE.md | 291 +++++++++++++++++++- packages/tokens/README.md | 7 +- packages/tokens/src/brands/supra.ts | 66 ----- packages/tokens/src/index.ts | 11 +- packages/tokens/src/scripts/generate-css.ts | 3 +- packages/tokens/src/types.ts | 2 +- packages/web/README.md | 9 +- packages/web/src/base.css | 2 +- packages/web/src/components/bevels.css | 14 +- packages/web/src/components/elevation.css | 96 ------- packages/web/src/index.css | 4 - 11 files changed, 308 insertions(+), 197 deletions(-) delete mode 100644 packages/tokens/src/brands/supra.ts delete mode 100644 packages/web/src/components/elevation.css diff --git a/CLAUDE.md b/CLAUDE.md index 3100e01..1c1c4ea 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -5,10 +5,10 @@ Monorepo for the Dangerous Things design system. Three npm packages publish under `@dangerousthings/*`: - **tokens** — canonical design tokens in TypeScript, compiled to JS and auto-generated as CSS custom properties -- **web** — CSS themes (bevels, glows, elevation, forms) consumed by web apps +- **web** — CSS themes (bevels, glows, forms) consumed by web apps - **react-native** — React Native components built on React Native Paper -Three brand themes: **dt** (neon cyberpunk / beveled), **classic** (dark navy / magenta), **supra** (MD3 / blue). +Two brand themes: **dt** (neon cyberpunk / beveled), **classic** (dark navy / magenta). ## Build & Tooling @@ -30,7 +30,7 @@ Three brand themes: **dt** (neon cyberpunk / beveled), **classic** (dark navy / When adding or modifying a design token, component, or visual behavior, keep all three layers in sync: -1. **Tokens** — add/update the value in every brand file (`packages/tokens/src/brands/{dt,classic,supra}.ts`) and in the shared type (`packages/tokens/src/types.ts`). +1. **Tokens** — add/update the value in every brand file (`packages/tokens/src/brands/{dt,classic}.ts`) and in the shared type (`packages/tokens/src/types.ts`). 2. **Web** — if the token maps to a CSS component, update the relevant CSS file under `packages/web/src/components/`. Ensure the CSS custom property name matches the token path (e.g., `--dt-color-brand-primary`). 3. **React Native** — update the corresponding component(s) under `packages/react-native/src/components/` and ensure the theme provider maps the new token. @@ -98,3 +98,288 @@ GitHub Actions runs on push to `main` and on PRs: - CSS uses BEM-ish class names prefixed with `dt-` (e.g., `.dt-bevel-card`). - React Native components are prefixed `DT` (e.g., `DTButton`). - Keep files focused — one component per file, one brand per file. + +## Storefront Component Migration — Features to Extend + +The DT Shopify Storefront (`dt-shopify-storefront`) is the genesis project for this design system. Several +storefront features are not yet represented in the design system and need to be baked in. This section +documents everything that must be supported before the storefront can fully adopt design system components. + +### Card Color Modes (per-card `--mode`) + +The storefront assigns each card a color mode that controls border, header background, glow, and accent colors. +The design system's current `.card` component only uses `--color-primary` (always cyan). Cards must support +per-instance mode overrides. + +**Five modes (tokens already exist, need component support):** + +| Mode | Token | Default (DT dark) | Use Case | +|---|---|---|---| +| `mode-normal` | `--color-primary` | `#00FFFF` cyan | Default product cards | +| `mode-emphasis` | `--color-secondary` | `#FFFF00` yellow | Highlighted/selected states | +| `mode-warning` | `--color-error` | `#FF0000` red | Lab products, warnings | +| `mode-success` | `--color-accent` | `#00FF00` green | Positive/success states | +| `mode-other` | `--color-other` | `#FF00FF` magenta | Bundles, alternative states | + +Each mode also has a `*-selected` variant at 70% opacity for hover/active states. + +**Implementation pattern in storefront:** +```css +.mode-normal { + --mode: var(--mode-normal); + --accent-mode: var(--mode-emphasis); + --selected: var(--mode-normal-selected); +} +.selected { + background-color: var(--selected) !important; + color: black !important; +} +``` + +**Recommendation:** Add a `--dt-card-color` custom property that defaults to `--color-primary` and can be +overridden per-card. All card sub-components (header bg, border, glow, progress bar) should reference this +variable instead of `--color-primary` directly. + +### Card Progress Bar (thick left edge) + +Product cards have a vertical progress bar on the left edge that fills based on a percentage value. +This does not exist in the design system. + +**Storefront implementation:** +- CSS variable: `--card-thick-edge-width: 0.75em` +- Class: `.progress` — left-side vertical bar inheriting the card's `--mode` color +- Fill: Dynamic height (0-100%) controlled by `progress` prop +- Hover: Fills to 100% on hover +- States: `.progress-indicator` (semi-transparent), `.progress-indicator-1` (darker with bevel clip) + +**Recommendation:** Add an optional `.dt-card-progress` child element to the card component, driven by +a `--dt-card-progress` custom property (0-100). + +### Card Chip Badges + +Product cards display contextual badges (e.g., "LAB", "BUNDLE") positioned absolute bottom-right of the +image area, with background color matching the card's mode. + +**Recommendation:** The existing `.badge` component in `bevels.css` could be extended with positioning +utilities (`.badge-overlay`, `.badge-bottom-right`) and mode-color-aware variants. + +### Card Hover / Selected State + +On hover, the storefront card fills with the mode's selected color and the progress bar fills to 100%. +The entire card gets a `.selected` class. The design system's `.card:hover` only applies a `drop-shadow` +but doesn't change fill color. + +**Recommendation:** Add `.card.selected` and `.card:hover` states that fill with `var(--dt-card-color-selected)` +(defaulting to `rgba(var(--color-primary-rgb), 0.7)`). + +### Staggered Card Container (Sequential Loading Animation) + +The storefront animates product cards with staggered scale-in entrances — each card scales from 0 to 1 with +an incrementing delay. This creates a sequential "loading" effect across the grid. + +**Current storefront pattern (per-card, using framer-motion):** +```tsx + +``` + +**Recommendation:** Create a `dt-stagger-container` component that automatically assigns staggered +`animation-delay` values to its children. This should work with pure CSS (using `nth-child` or CSS +custom properties) so consumers don't need a JS animation library. Example: + +```css +.dt-stagger-container { + --dt-stagger-duration: 0.33s; + --dt-stagger-interval: 75ms; +} +.dt-stagger-container > * { + animation: dt-scale-in var(--dt-stagger-duration) ease-in-out both; +} +.dt-stagger-container > :nth-child(1) { animation-delay: calc(0 * var(--dt-stagger-interval)); } +.dt-stagger-container > :nth-child(2) { animation-delay: calc(1 * var(--dt-stagger-interval)); } +/* ... up to a reasonable limit, or use @property for dynamic calculation */ + +@keyframes dt-scale-in { + from { transform: scale(0); } + to { transform: scale(1); } +} +``` + +### Animation Library + +The storefront uses several animation patterns that should be standardized in the design system: + +**Entrance animations:** +- `dt-scale-in` — scale 0→1 (card entrance, staggered) +- `dt-fade-in` — opacity 0→1 +- `dt-slide-up` — translateY(100%)→0 (mobile menus, modals) + +**Interactive animations:** +- `dt-pulse` — opacity oscillation for hover glow (`2s cubic-bezier(0.4, 0, 0.6, 1) infinite`) +- `dt-ping` — scale + fade-out ping effect (used on active filter indicators) +- `dt-spin` — 360deg rotation (loading spinners) + +**Transition utilities:** +- `dt-accordion-expand` — max-height 0→auto with 250ms ease-in-out +- `dt-chevron-rotate` — 180deg rotation for expand/collapse indicators +- `dt-progress-fill` — height transition for progress bars + +**Recommendation:** Add `packages/web/src/components/animations.css` with `@keyframes` definitions +and utility classes. These should be brand-independent (no color references in animations). + +### Filter System UI + +The storefront's filter system includes several components that are not in the design system: + +**NestedMenu:** Hierarchical filter navigation with recursive submenus. +- Level 0: Large icons (4xl) with vertical rotated labels below +- Level 1+: `.menu-item-clipped` buttons with bevel clip-path and thick top border +- Submenus: Portal-rendered, absolute positioned, hover-activated with 120ms close delay +- Selected state: `mode-emphasis` color, `menu-item-clipped-selected` class + +**FilterAccordion:** Expandable filter panel with nested levels. +- Thick top border (5px in cyberpunk, 1px in clean) +- Active state: border and text color switch to `--mode-emphasis` +- Indent per level: `paddingLeft: (level + 1) * 16px` +- Chevron: MdExpandMore with 180deg rotation on expand + +**MobileFilterMenu:** Full-screen overlay with spring animation. +- Backdrop: `rgba(0,0,0,0.5)` with blur(4px) +- Slide-up animation: `y: 100%` → `y: 0` +- Active filter count badge in header +- "Clear All Filters" button when filters are active + +**Recommendation:** These are complex interactive components. Start with CSS patterns +(`.dt-menu-item`, `.dt-filter-header`) and leave JS behavior to consumers. + +### Icon Set — Product Features & Filtering + +The storefront uses a specific set of icons from `react-icons` for product features and UI controls. +These should be documented as the canonical icon set for the DT design system. + +**Product Feature Icons (react-icons/md — Material Design):** + +| Feature | Icon | Package | +|---|---|---| +| Illumination | `MdLightbulbOutline` | react-icons/md | +| Visibility/Glow | `MdOutlineVisibility` | react-icons/md | +| Data Sharing | `MdOutlineMobileScreenShare` | react-icons/md | +| UID Cloning/Magic | `MdOutlineCopyAll` | react-icons/md | +| Payment/NFC | `MdOutlineCreditCard` | react-icons/md | +| Smartphone Compat | `MdOutlinePhonelinkRing` | react-icons/md | +| Access Control | `MdOutlineVpnKey` | react-icons/md | +| Temperature | `MdOutlineThermostat` | react-icons/md | +| NFC Sensing | `MdOutlineSensors` | react-icons/md | +| Fitness/Bio | `MdOutlineFitbit` | react-icons/md | +| Vibration | `MdOutlineVibration` | react-icons/md | +| Exploration | `MdOutlineExplore` | react-icons/md | +| Cryptography | `LuBinary` | react-icons/lu | +| Digital Security | `FaUserShield` | react-icons/fa | +| Temperature (alt) | `BsThermometerHalf` | react-icons/bs | + +**UI Control Icons:** + +| Control | Icon | Package | +|---|---|---| +| Filter toggle | `MdFilterList` | react-icons/md | +| Expand/collapse | `MdExpandMore` | react-icons/md | +| Close/dismiss | `MdClose` | react-icons/md | +| Dropdown arrow | `MdOutlineKeyboardArrowDown` | react-icons/md | +| No image placeholder | `MdOutlineHideImage` | react-icons/md | +| More details | `CgMoreR` | react-icons/cg | +| Loading spinner | `FaSpinner` | react-icons/fa6 | +| Cart | `FaCartShopping` | react-icons/fa6 | +| Add to cart | `FaCartPlus` | react-icons/fa6 | +| Search | `FaMagnifyingGlass` | react-icons/fa6 | +| Back | `FaArrowLeft` | react-icons/fa6 | +| User (logged in) | `FaUser` | react-icons/fa6 | +| User (logged out) | `FaUserSlash` | react-icons/fa6 | +| Delete | `FaTrash` | react-icons/fa | + +**Custom SVG Icons (ThemeToggle.tsx):** +- Sun icon (24x24) — switch to clean theme +- Terminal/matrix icon (24x24) — switch to cyberpunk theme + +**Icon display standard:** Feature icons render at 42px in the UseCaseLegend grid. UI icons at 1.5em. +Icons inherit color from their parent's `--mode` variable. + +**Recommendation:** The design system should document this icon set as the canonical reference. +Consider bundling an icon sprite or re-exporting the specific react-icons subset as +`@dangerousthings/icons` for consistency across projects. + +### Feature Legend Component + +The storefront has a specialized `UseCaseLegend` component that displays product features in a +grid with icons, rotated labels, and a hover-driven detail header. This is a key product page +component that should be represented in the design system. + +**Structure:** +- **Header bar:** Full-width, mode-colored background, shows chip name + hovered feature details +- **Icon grid:** 5-column flex layout with icons + vertical rotated labels +- **Labels:** `writing-mode: vertical-rl` + `transform: rotate(180deg)`, 0.85rem, font-weight 600 +- **Feature states:** Supported (mode-normal/cyan), disabled (mode-other/magenta), unsupported (mode-warning/red) + +**Color assignment in the legend uses hardcoded hex values** in `app/lib/cyberTheme.ts` — these +need to be migrated to use CSS variables. This is a known pre-existing issue in the storefront. + +### Theme Branching Pattern + +Many storefront components have two rendering paths: cyberpunk and clean. The design system should +support this via the two-axis theme system (`data-brand` + `data-theme`) so that components +automatically adapt without conditional JS logic. + +**Key differences between branches:** + +| Aspect | Cyberpunk (DT brand) | Clean | +|---|---|---| +| Clip-paths | Heavy bevels | `border-radius: 0.75rem` | +| Colors | Neon (#00FFFF, #FF00FF) | B&W or muted tones | +| Hover effects | Pulse glow animations | None | +| Typography | Tektur | system-ui sans-serif | +| Text shadows | `0 0 8px var(--mode)` | None | +| Borders | Thick neon (5px top) | Subtle 1px | + +**Recommendation:** The clean theme should be a brand variant (e.g., `data-brand="classic"`) that +nullifies bevels, glows, and animations via CSS. Components should not need JS `if (isClean)` branches +if the design system CSS handles the visual differences. + +### Scrollbar Styling + +The storefront styles scrollbars in cyberpunk mode: +```css +scrollbar-width: thin; +scrollbar-color: var(--mode-normal) transparent; +::-webkit-scrollbar { width: 6px; } +::-webkit-scrollbar-thumb { background: var(--mode-normal); border-radius: 3px; } +``` + +**Recommendation:** Add to design system as a utility: `.dt-scrollbar` or scope under `[data-brand="dt"]`. + +## Known Issues + +### Link hover glow ignores per-element mode colors (glows.css) + +`packages/web/dist/components/glows.css` line 37-38 applies a blanket link hover glow: + +```css +[data-brand="dt"] a:hover { + text-shadow: 0 0 8px var(--color-primary); +} +``` + +`--color-primary` is always the brand's primary color (cyan for DT). This means **every** link glows cyan on hover, even inside elements that define their own mode color (e.g., a product card with `--mode: var(--mode-warning)` still gets a cyan glow instead of red). + +**Workaround (dt-shopify-storefront):** The storefront overrides this with a higher-specificity rule: +```css +[data-brand="dt"] .card-container a:hover { + text-shadow: 0 0 8px var(--mode); +} +``` + +**Proper fix:** The link glow rule should respect a local color variable. Options: +1. Use `currentColor` instead of `var(--color-primary)` — glows whatever color the text already is +2. Introduce a `--glow-color` custom property defaulting to `--color-primary`, which components can override locally +3. Scope the rule more narrowly so it doesn't apply inside component containers that define their own color context diff --git a/packages/tokens/README.md b/packages/tokens/README.md index 3852c72..1c994f6 100644 --- a/packages/tokens/README.md +++ b/packages/tokens/README.md @@ -10,13 +10,12 @@ npm install @dangerousthings/tokens ## Brands -Three brand themes are included: +Two brand themes are included: | Brand | Description | |-------|-------------| | **dt** | Neon cyberpunk — Tektur font, beveled corners, cyan/yellow/magenta palette | | **classic** | Dark navy with magenta accents, standard border radius | -| **supra** | Material Design 3 — VivoKey blue, rounded corners, elevation shadows | Each brand provides dark and light mode values. @@ -37,7 +36,7 @@ Import all brands at once: ```ts import { brands } from "@dangerousthings/tokens"; -Object.keys(brands); // ["dt", "classic", "supra"] +Object.keys(brands); // ["dt", "classic"] ``` ### Types @@ -63,10 +62,8 @@ This provides custom properties like `--color-primary`, `--color-primary-rgb`, ` | `@dangerousthings/tokens` | All brands, theme definitions, and types | | `@dangerousthings/tokens/brands/dt` | DT brand tokens | | `@dangerousthings/tokens/brands/classic` | Classic brand tokens | -| `@dangerousthings/tokens/brands/supra` | Supra brand tokens | | `@dangerousthings/tokens/css/dt.css` | DT CSS custom properties | | `@dangerousthings/tokens/css/classic.css` | Classic CSS custom properties | -| `@dangerousthings/tokens/css/supra.css` | Supra CSS custom properties | ## Token Categories diff --git a/packages/tokens/src/brands/supra.ts b/packages/tokens/src/brands/supra.ts deleted file mode 100644 index 40d5cc4..0000000 --- a/packages/tokens/src/brands/supra.ts +++ /dev/null @@ -1,66 +0,0 @@ -import type { BrandTokens } from "../types.js"; - -export const supra: BrandTokens = { - id: "supra", - name: "VivoKey Supra", - description: "Material Design 3 with VivoKey blue, rounded corners, elevation shadows", - - dark: { - bg: "#000000", - surface: "#28292E", - surfaceHover: "#303136", - border: "#42667E", - - textPrimary: "#ffffff", - textSecondary: "#e2e8f0", - textMuted: "#94a3b8", - - primary: "#42667E", - primaryDim: "#385872", - secondary: "#8BAEC7", - accent: "#8BAEC7", - other: "#F67448", - - success: "#8BB174", - warning: "#F67448", - error: "#ED4337", - info: "#42667E", - }, - - light: { - bg: "#ffffff", - surface: "#AFB8C2", - surfaceHover: "#C5CCD4", - border: "#000000", - - textPrimary: "#000000", - textSecondary: "#374151", - textMuted: "#6b7280", - - primary: "#000000", - primaryDim: "#1f2937", - secondary: "#F67448", - accent: "#FDFE1B", - other: "#F67448", - - success: "#8BB174", - warning: "#F67448", - error: "#ED4337", - info: "#42667E", - }, - - typography: { - heading: "var(--font-sans)", - body: "var(--font-sans)", - mono: "'SF Mono', Monaco, 'Cascadia Code', monospace", - }, - - shape: { - bevelSm: "0px", - bevelMd: "0px", - bevelLg: "0px", - radiusSm: "0.5rem", - radius: "0.625rem", - radiusLg: "0.75rem", - }, -}; diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts index a27a127..8b6bbb5 100644 --- a/packages/tokens/src/index.ts +++ b/packages/tokens/src/index.ts @@ -10,15 +10,13 @@ export type { export { dt } from "./brands/dt.js"; export { classic } from "./brands/classic.js"; -export { supra } from "./brands/supra.js"; import { dt } from "./brands/dt.js"; import { classic } from "./brands/classic.js"; -import { supra } from "./brands/supra.js"; import type { BrandTokens, ThemeDefinition } from "./types.js"; /** All brand tokens keyed by id */ -export const brands: Record = { dt, classic, supra }; +export const brands: Record = { dt, classic }; /** Theme registry for UI selectors */ export const themes: ThemeDefinition[] = [ @@ -36,11 +34,4 @@ export const themes: ThemeDefinition[] = [ supportsModes: ["dark", "light", "auto"], defaultMode: "dark", }, - { - id: "supra", - name: supra.name, - description: supra.description, - supportsModes: ["dark", "light", "auto"], - defaultMode: "dark", - }, ]; diff --git a/packages/tokens/src/scripts/generate-css.ts b/packages/tokens/src/scripts/generate-css.ts index 7180787..398b657 100644 --- a/packages/tokens/src/scripts/generate-css.ts +++ b/packages/tokens/src/scripts/generate-css.ts @@ -9,7 +9,6 @@ import { fileURLToPath } from "node:url"; import type { BrandTokens, ColorTokens } from "../types.js"; import { dt } from "../brands/dt.js"; import { classic } from "../brands/classic.js"; -import { supra } from "../brands/supra.js"; const __dirname = dirname(fileURLToPath(import.meta.url)); const outDir = join(__dirname, "..", "css"); @@ -119,7 +118,7 @@ function generateBrandCSS(brand: BrandTokens): string { // --- Main --- mkdirSync(outDir, { recursive: true }); -for (const brand of [dt, classic, supra]) { +for (const brand of [dt, classic]) { const css = generateBrandCSS(brand); const path = join(outDir, `${brand.id}.css`); writeFileSync(path, css, "utf-8"); diff --git a/packages/tokens/src/types.ts b/packages/tokens/src/types.ts index 9818bf7..8159d1d 100644 --- a/packages/tokens/src/types.ts +++ b/packages/tokens/src/types.ts @@ -1,5 +1,5 @@ /** Brand identifiers */ -export type ThemeBrand = "dt" | "classic" | "supra"; +export type ThemeBrand = "dt" | "classic"; /** Color mode */ export type ThemeMode = "dark" | "light" | "auto"; diff --git a/packages/web/README.md b/packages/web/README.md index 43f5250..81512fe 100644 --- a/packages/web/README.md +++ b/packages/web/README.md @@ -1,6 +1,6 @@ # @dangerousthings/web -Web CSS themes and components for the Dangerous Things design system — bevels, glows, form styles, and elevation patterns powered by CSS custom properties. +Web CSS themes and components for the Dangerous Things design system — bevels, glows, and form styles powered by CSS custom properties. ## Install @@ -26,7 +26,6 @@ Or import individual pieces: @import "@dangerousthings/web/components/bevels.css"; @import "@dangerousthings/web/components/glows.css"; @import "@dangerousthings/web/components/forms-dt.css"; -@import "@dangerousthings/web/components/elevation.css"; ``` ### Switching Brands @@ -39,9 +38,6 @@ Swap the token import to change the entire look: /* Dark navy + magenta */ @import "@dangerousthings/web/tokens/classic.css"; - -/* Material Design 3 */ -@import "@dangerousthings/web/tokens/supra.css"; ``` ### Theme Registry (JS) @@ -59,7 +55,6 @@ import { themes, brands } from "@dangerousthings/web/theme-registry"; | `bevels.css` | Angular clip-path bevels for cards, buttons, labels, modals, drawers | | `glows.css` | Neon drop-shadow and text-shadow effects for clipped and standard elements | | `forms-dt.css` | Text inputs, checkboxes, switches, radio buttons, progress bars, accordions, quantity steppers | -| `elevation.css` | Shadow elevation levels for the Supra / MD3 brand | ### Key Classes @@ -67,8 +62,6 @@ import { themes, brands } from "@dangerousthings/web/theme-registry"; **Glows** — `.dt-glow`, `.dt-glow-strong`, `.dt-glow-inset`, `.dt-text-glow` -**Elevation** — `.supra-elevation-1` through `.supra-elevation-5` - ## Exports | Path | Description | diff --git a/packages/web/src/base.css b/packages/web/src/base.css index b0d4e8a..b470161 100644 --- a/packages/web/src/base.css +++ b/packages/web/src/base.css @@ -24,7 +24,7 @@ --radius: 0.5rem; --radius-lg: 0.75rem; - /* Bevel sizes — DT sets real values; Classic/Supra leave at 0 */ + /* Bevel sizes — DT sets real values; Classic leaves at 0 */ --bevel-sm: 0px; --bevel-md: 0px; --bevel-lg: 0px; diff --git a/packages/web/src/components/bevels.css b/packages/web/src/components/bevels.css index 439d261..60f4c40 100644 --- a/packages/web/src/components/bevels.css +++ b/packages/web/src/components/bevels.css @@ -126,7 +126,7 @@ } [data-brand="dt"] .btn-secondary:hover::before { - background: rgba(var(--color-primary-rgb), 0.1); + background: var(--color-surface-hover); } /* ============================================================================ @@ -187,6 +187,18 @@ --badge-fill: rgba(var(--color-info-rgb), 0.25); } +/* ============================================================================ + Badge text override for Classic — ensure readable text in light mode + Status-color text on 25% opacity backgrounds fails WCAG AA on light bg. + Use primary text color instead (same approach as DT badges above). + ============================================================================ */ +[data-brand="classic"] .badge-success, +[data-brand="classic"] .badge-error, +[data-brand="classic"] .badge-warning, +[data-brand="classic"] .badge-info { + color: var(--color-text-primary); +} + /* ============================================================================ Opt-in Bevel Utility Classes Use these for custom elements that need bevel shapes diff --git a/packages/web/src/components/elevation.css b/packages/web/src/components/elevation.css deleted file mode 100644 index e4b7eef..0000000 --- a/packages/web/src/components/elevation.css +++ /dev/null @@ -1,96 +0,0 @@ -/* dt-web-theme: Supra Elevation & MD3 Styles */ -/* Source: react-native-supra-theme/src/theme/paperTheme.ts */ -/* Rounded Material Design 3 aesthetic with elevation shadows */ - -/* ============================================================================ - Card Elevation - ============================================================================ */ -[data-brand="supra"] .card { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18); - border-radius: var(--radius-lg); -} - -[data-brand="supra"] .card:hover { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22); -} - -/* ============================================================================ - Button — Dual-layer inset shadow (hardware button feel) - Source: SupraButton.tsx — inner shadow for tactile appearance - ============================================================================ */ -[data-brand="supra"] .btn-primary { - box-shadow: - inset -2px -2px 4px rgba(0, 0, 0, 0.18), - inset 2px 2px 4px rgba(255, 255, 255, 0.25); - border-radius: var(--radius); -} - -[data-brand="supra"] .btn-primary:hover { - box-shadow: - inset -2px -2px 6px rgba(0, 0, 0, 0.22), - inset 2px 2px 6px rgba(255, 255, 255, 0.3); - transform: translateY(-1px); -} - -[data-brand="supra"] .btn-secondary { - border-radius: var(--radius); -} - -[data-brand="supra"] .btn-danger { - border-radius: var(--radius); -} - -/* ============================================================================ - Badge — Rounded pill (MD3 chip style) - ============================================================================ */ -[data-brand="supra"] .badge { - border-radius: 8px; -} - -/* ============================================================================ - Input — Rounded with standard focus ring - ============================================================================ */ -[data-brand="supra"] .input, -[data-brand="supra"] input, -[data-brand="supra"] textarea, -[data-brand="supra"] select { - border-radius: var(--radius); -} - -[data-brand="supra"] .input:focus, -[data-brand="supra"] input:focus, -[data-brand="supra"] textarea:focus, -[data-brand="supra"] select:focus { - box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2); -} - -/* ============================================================================ - Terminal — Rounded with subtle elevation - ============================================================================ */ -[data-brand="supra"] .terminal { - border-radius: var(--radius); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18); -} - -/* ============================================================================ - Elevation Utility Classes - ============================================================================ */ -.supra-elevation-1 { - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); -} - -.supra-elevation-2 { - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18); -} - -.supra-elevation-3 { - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.22); -} - -.supra-elevation-4 { - box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25); -} - -.supra-elevation-5 { - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); -} diff --git a/packages/web/src/index.css b/packages/web/src/index.css index bc84266..98b0c7b 100644 --- a/packages/web/src/index.css +++ b/packages/web/src/index.css @@ -10,12 +10,8 @@ /* Brand tokens — generated from @dangerousthings/tokens */ @import './tokens/dt.css'; @import './tokens/classic.css'; -@import './tokens/supra.css'; /* Component styles — DT visual identity */ @import './components/bevels.css'; @import './components/glows.css'; @import './components/forms-dt.css'; - -/* Component styles — Supra/MD3 visual identity */ -@import './components/elevation.css';