Compare commits
4 Commits
@dangerous
...
@dangerous
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ca55f5a497 | ||
|
|
5b215716cc | ||
|
|
0453af85a1 | ||
|
|
bee19cb71f |
@@ -1,5 +1,13 @@
|
||||
# @dangerousthings/react-native
|
||||
|
||||
## 0.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 0453af8: Add per-package README and LICENSE for npm
|
||||
- Updated dependencies [0453af8]
|
||||
- @dangerousthings/tokens@0.2.1
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
21
packages/react-native/LICENSE
Normal file
21
packages/react-native/LICENSE
Normal file
@@ -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.
|
||||
154
packages/react-native/README.md
Normal file
154
packages/react-native/README.md
Normal file
@@ -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 (
|
||||
<DTThemeProvider>
|
||||
{/* your app */}
|
||||
</DTThemeProvider>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Options:
|
||||
|
||||
```tsx
|
||||
<DTThemeProvider
|
||||
includeSafeArea={true} // wraps in SafeAreaProvider (default: true)
|
||||
/>
|
||||
```
|
||||
|
||||
## 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
|
||||
<DTButton variant="normal" onPress={handlePress}>
|
||||
Scan NFC
|
||||
</DTButton>
|
||||
|
||||
// Card with title
|
||||
<DTCard title="Scan Results" mode="normal">
|
||||
<Text>Chip detected</Text>
|
||||
</DTCard>
|
||||
|
||||
// Text input with error state
|
||||
<DTTextInput
|
||||
variant="normal"
|
||||
label="Username"
|
||||
error={true}
|
||||
errorMessage="Required"
|
||||
/>
|
||||
```
|
||||
|
||||
## 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)
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@dangerousthings/react-native",
|
||||
"version": "0.2.0",
|
||||
"version": "0.2.1",
|
||||
"description": "React Native themed components for the Dangerous Things design system",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.js",
|
||||
|
||||
@@ -1,5 +1,11 @@
|
||||
# @dangerousthings/tokens
|
||||
|
||||
## 0.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 0453af8: Add per-package README and LICENSE for npm
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
21
packages/tokens/LICENSE
Normal file
21
packages/tokens/LICENSE
Normal file
@@ -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.
|
||||
79
packages/tokens/README.md
Normal file
79
packages/tokens/README.md
Normal file
@@ -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)
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@dangerousthings/tokens",
|
||||
"version": "0.2.0",
|
||||
"version": "0.2.1",
|
||||
"description": "Canonical design tokens for the Dangerous Things design system",
|
||||
"license": "MIT",
|
||||
"type": "module",
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
# @dangerousthings/web
|
||||
|
||||
## 0.2.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 0453af8: Add per-package README and LICENSE for npm
|
||||
- Updated dependencies [0453af8]
|
||||
- @dangerousthings/tokens@0.2.1
|
||||
|
||||
## 0.2.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
21
packages/web/LICENSE
Normal file
21
packages/web/LICENSE
Normal file
@@ -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.
|
||||
84
packages/web/README.md
Normal file
84
packages/web/README.md
Normal file
@@ -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)
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@dangerousthings/web",
|
||||
"version": "0.2.0",
|
||||
"version": "0.2.1",
|
||||
"description": "Web CSS theme for the Dangerous Things design system — bevels, glows, form styles",
|
||||
"license": "MIT",
|
||||
"main": "dist/index.css",
|
||||
|
||||
Reference in New Issue
Block a user