From bee19cb71f694b2b205d9fa9610bdd98fc6831c1 Mon Sep 17 00:00:00 2001 From: michael Date: Tue, 3 Mar 2026 20:30:44 -0800 Subject: [PATCH] Add per-package README and LICENSE for npm Each published package now includes its own README (shown on npm) and a copy of the MIT license so both travel with the tarball. Co-Authored-By: Claude Opus 4.6 --- packages/react-native/LICENSE | 21 +++++ packages/react-native/README.md | 154 ++++++++++++++++++++++++++++++++ packages/tokens/LICENSE | 21 +++++ packages/tokens/README.md | 79 ++++++++++++++++ packages/web/LICENSE | 21 +++++ packages/web/README.md | 84 +++++++++++++++++ 6 files changed, 380 insertions(+) create mode 100644 packages/react-native/LICENSE create mode 100644 packages/react-native/README.md create mode 100644 packages/tokens/LICENSE create mode 100644 packages/tokens/README.md create mode 100644 packages/web/LICENSE create mode 100644 packages/web/README.md diff --git a/packages/react-native/LICENSE b/packages/react-native/LICENSE new file mode 100644 index 0000000..3d865e7 --- /dev/null +++ b/packages/react-native/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 Dangerous Things + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/react-native/README.md b/packages/react-native/README.md new file mode 100644 index 0000000..5336a59 --- /dev/null +++ b/packages/react-native/README.md @@ -0,0 +1,154 @@ +# @dangerousthings/react-native + +React Native components for the Dangerous Things design system — 18 themed components built on React Native Paper with cyberpunk beveled aesthetics. + +## Install + +```bash +npm install @dangerousthings/react-native +``` + +### Peer Dependencies + +```bash +npm install react-native-paper react-native-safe-area-context react-native-svg +``` + +Optional for custom fonts: + +```bash +npx expo install expo-font +``` + +## Setup + +Wrap your app with `DTThemeProvider`: + +```tsx +import { DTThemeProvider } from "@dangerousthings/react-native"; + +export default function App() { + return ( + + {/* your app */} + + ); +} +``` + +Options: + +```tsx + +``` + +## Components + +### Basic + +| Component | Description | +|-----------|-------------| +| `DTButton` | Beveled button with variant colors (normal, emphasis, warning, success, other) | +| `DTCard` | Beveled card with optional header and title | +| `DTChip` | Compact labeled element (MD3 chip style) | +| `DTLabel` | Top-right beveled label with status colors | + +### Forms + +| Component | Description | +|-----------|-------------| +| `DTTextInput` | Sharp-cornered input with focus glow | +| `DTCheckbox` | Beveled checkbox with opposing corner cuts | +| `DTSwitch` | Angular toggle switch | +| `DTRadioGroup` | Hexagonal radio buttons | +| `DTQuantityStepper` | Beveled +/- increment buttons | +| `DTSearchInput` | Search-styled text input | + +### Layout & Display + +| Component | Description | +|-----------|-------------| +| `DTProgressBar` | Angular progress bar with optional label | +| `DTMediaFrame` | Diagonal beveled frame for images | +| `DTAccordion` | Collapsible sections with accent border | +| `DTHexagon` | Decorative hexagon SVG shape | + +### Interactive + +| Component | Description | +|-----------|-------------| +| `DTModal` | Modal dialog with beveled corners | +| `DTDrawer` | Side drawer with edge bevels | +| `DTGallery` | Image gallery | +| `DTMenu` | Dropdown menu with item variants | + +## Usage Examples + +```tsx +import { DTButton, DTCard, DTTextInput } from "@dangerousthings/react-native"; + +// Button with variant + + Scan NFC + + +// Card with title + + Chip detected + + +// Text input with error state + +``` + +## Theme Utilities + +```tsx +import { useDTTheme, getColor, getVariantColor } from "@dangerousthings/react-native"; + +// Access the full theme in a component +const theme = useDTTheme(); +theme.colors.primary; // "#00FFFF" + +// Get a color with optional opacity +getColor("modeNormal", 0.5); // "rgba(0, 255, 255, 0.5)" + +// Resolve a variant name to its color +getVariantColor("emphasis"); // "#FFFF00" +``` + +## Bevel Utilities + +Build SVG paths for custom beveled shapes: + +```tsx +import { + buildBeveledRectPath, + buildButtonBevelPath, + buildCardBevelPath, +} from "@dangerousthings/react-native"; + +// Custom bevel +const path = buildBeveledRectPath(200, 48, { bottomRight: 12 }); + +// Preset bevel paths +const buttonPath = buildButtonBevelPath(200, 48); +const cardPath = buildCardBevelPath(300, 200); +``` + +## Re-exported Paper Components + +For convenience, these React Native Paper components are re-exported: + +`Text`, `Surface`, `IconButton`, `ActivityIndicator`, `Divider`, `List`, `Portal`, `Modal`, `Snackbar`, `TextInput` + +## License + +[MIT](LICENSE) diff --git a/packages/tokens/LICENSE b/packages/tokens/LICENSE new file mode 100644 index 0000000..3d865e7 --- /dev/null +++ b/packages/tokens/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 Dangerous Things + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/tokens/README.md b/packages/tokens/README.md new file mode 100644 index 0000000..3852c72 --- /dev/null +++ b/packages/tokens/README.md @@ -0,0 +1,79 @@ +# @dangerousthings/tokens + +Canonical design tokens for the Dangerous Things design system — colors, typography, and shape values defined in TypeScript and exported as CSS custom properties. + +## Install + +```bash +npm install @dangerousthings/tokens +``` + +## Brands + +Three 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. + +## Usage + +### TypeScript / JavaScript + +```ts +import { dt } from "@dangerousthings/tokens/brands/dt"; + +console.log(dt.color.dark.primary); // "#00ffff" +console.log(dt.typography.heading); // "Tektur Variable" +console.log(dt.shape.bevelMd); // "2rem" +``` + +Import all brands at once: + +```ts +import { brands } from "@dangerousthings/tokens"; + +Object.keys(brands); // ["dt", "classic", "supra"] +``` + +### Types + +```ts +import type { BrandTokens, ColorTokens, ThemeBrand } from "@dangerousthings/tokens"; +``` + +### CSS Custom Properties + +Generated CSS files are available per brand: + +```css +@import "@dangerousthings/tokens/css/dt.css"; +``` + +This provides custom properties like `--color-primary`, `--color-primary-rgb`, `--font-heading`, `--bevel-md`, etc. + +## Exports + +| Path | Description | +|------|-------------| +| `@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 + +- **Color** — background, surface, text, brand primary/secondary/accent, semantic (success, warning, error, info) +- **Typography** — heading, body, and mono font families +- **Shape** — bevel sizes (sm/md/lg) and border radius (sm/md/lg) + +## License + +[MIT](LICENSE) diff --git a/packages/web/LICENSE b/packages/web/LICENSE new file mode 100644 index 0000000..3d865e7 --- /dev/null +++ b/packages/web/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2025 Dangerous Things + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/web/README.md b/packages/web/README.md new file mode 100644 index 0000000..43f5250 --- /dev/null +++ b/packages/web/README.md @@ -0,0 +1,84 @@ +# @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. + +## Install + +```bash +npm install @dangerousthings/web +``` + +## Usage + +Import the full bundle (base tokens + all components): + +```css +@import "@dangerousthings/web"; +``` + +Or import individual pieces: + +```css +/* Brand tokens */ +@import "@dangerousthings/web/tokens/dt.css"; + +/* Individual components */ +@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 + +Swap the token import to change the entire look: + +```css +/* Neon cyberpunk */ +@import "@dangerousthings/web/tokens/dt.css"; + +/* Dark navy + magenta */ +@import "@dangerousthings/web/tokens/classic.css"; + +/* Material Design 3 */ +@import "@dangerousthings/web/tokens/supra.css"; +``` + +### Theme Registry (JS) + +For runtime theme switching: + +```ts +import { themes, brands } from "@dangerousthings/web/theme-registry"; +``` + +## CSS Modules + +| File | Description | +|------|-------------| +| `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 + +**Bevels** — `.dt-bevel-card`, `.dt-bevel-btn`, `.dt-bevel-label`, `.dt-bevel-modal`, `.dt-bevel-drawer-left`, `.dt-bevel-drawer-right`, `.dt-bevel-sm` + +**Glows** — `.dt-glow`, `.dt-glow-strong`, `.dt-glow-inset`, `.dt-text-glow` + +**Elevation** — `.supra-elevation-1` through `.supra-elevation-5` + +## Exports + +| Path | Description | +|------|-------------| +| `@dangerousthings/web` | Full CSS bundle (base + all components) | +| `@dangerousthings/web/tokens/*` | Per-brand CSS custom properties | +| `@dangerousthings/web/components/*` | Individual CSS component modules | +| `@dangerousthings/web/fonts/*` | Tektur font files | +| `@dangerousthings/web/theme-registry` | JS theme definitions for runtime switching | + +## License + +[MIT](LICENSE)