Compare commits
4 Commits
@dangerous
...
@dangerous
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
ca55f5a497 | ||
|
|
5b215716cc | ||
|
|
0453af85a1 | ||
|
|
bee19cb71f |
@@ -1,5 +1,13 @@
|
|||||||
# @dangerousthings/react-native
|
# @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
|
## 0.2.0
|
||||||
|
|
||||||
### Minor Changes
|
### 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",
|
"name": "@dangerousthings/react-native",
|
||||||
"version": "0.2.0",
|
"version": "0.2.1",
|
||||||
"description": "React Native themed components for the Dangerous Things design system",
|
"description": "React Native themed components for the Dangerous Things design system",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "dist/index.js",
|
"main": "dist/index.js",
|
||||||
|
|||||||
@@ -1,5 +1,11 @@
|
|||||||
# @dangerousthings/tokens
|
# @dangerousthings/tokens
|
||||||
|
|
||||||
|
## 0.2.1
|
||||||
|
|
||||||
|
### Patch Changes
|
||||||
|
|
||||||
|
- 0453af8: Add per-package README and LICENSE for npm
|
||||||
|
|
||||||
## 0.2.0
|
## 0.2.0
|
||||||
|
|
||||||
### Minor Changes
|
### 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",
|
"name": "@dangerousthings/tokens",
|
||||||
"version": "0.2.0",
|
"version": "0.2.1",
|
||||||
"description": "Canonical design tokens for the Dangerous Things design system",
|
"description": "Canonical design tokens for the Dangerous Things design system",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
|
|||||||
@@ -1,5 +1,13 @@
|
|||||||
# @dangerousthings/web
|
# @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
|
## 0.2.0
|
||||||
|
|
||||||
### Minor Changes
|
### 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",
|
"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",
|
"description": "Web CSS theme for the Dangerous Things design system — bevels, glows, form styles",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"main": "dist/index.css",
|
"main": "dist/index.css",
|
||||||
|
|||||||
Reference in New Issue
Block a user