achery-ui 0.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +161 -0
- package/dist/accents-DrqL1lLe.d.cts +48 -0
- package/dist/accents-DrqL1lLe.d.ts +48 -0
- package/dist/chunk-IARZATZY.js +91 -0
- package/dist/chunk-IARZATZY.js.map +1 -0
- package/dist/chunk-SSWJ4EPA.cjs +95 -0
- package/dist/chunk-SSWJ4EPA.cjs.map +1 -0
- package/dist/index.cjs +1026 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.css +1281 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.cts +1293 -0
- package/dist/index.d.ts +1293 -0
- package/dist/index.js +975 -0
- package/dist/index.js.map +1 -0
- package/dist/tokens/index.cjs +183 -0
- package/dist/tokens/index.cjs.map +1 -0
- package/dist/tokens/index.d.cts +188 -0
- package/dist/tokens/index.d.ts +188 -0
- package/dist/tokens/index.js +155 -0
- package/dist/tokens/index.js.map +1 -0
- package/package.json +68 -0
package/README.md
ADDED
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
# achery-ui
|
|
2
|
+
|
|
3
|
+
Achery Workshop design system — autumn alchemy, hard edges, botanical marginalia.
|
|
4
|
+
|
|
5
|
+
A React component library with a strong visual identity: square corners, stamp shadows, compressed type, and decorative glyphs drawn from alchemical and botanical illustration traditions.
|
|
6
|
+
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
## Install
|
|
10
|
+
|
|
11
|
+
```sh
|
|
12
|
+
pnpm add achery-ui
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
**Peer dependencies** (install separately if not already present):
|
|
16
|
+
|
|
17
|
+
```sh
|
|
18
|
+
pnpm add react react-dom
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Requires **React 19+**.
|
|
22
|
+
|
|
23
|
+
---
|
|
24
|
+
|
|
25
|
+
## Quick start
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
// 1. Import styles once at your app entry point
|
|
29
|
+
import 'achery-ui/style.css'
|
|
30
|
+
|
|
31
|
+
// 2. Wrap your app in AcheryProvider
|
|
32
|
+
import { AcheryProvider } from 'achery-ui'
|
|
33
|
+
|
|
34
|
+
export default function App() {
|
|
35
|
+
return (
|
|
36
|
+
<AcheryProvider defaultTheme="light" defaultAccent="terracotta">
|
|
37
|
+
<YourApp />
|
|
38
|
+
</AcheryProvider>
|
|
39
|
+
)
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// 3. Use components anywhere in the tree
|
|
43
|
+
import { Button, Badge, Card, Heading } from 'achery-ui'
|
|
44
|
+
|
|
45
|
+
function RecipeCard({ recipe }) {
|
|
46
|
+
return (
|
|
47
|
+
<Card variant="stamp" marginalia="fern">
|
|
48
|
+
<Heading level={2}>{recipe.name}</Heading>
|
|
49
|
+
<Badge tone="saved">Published</Badge>
|
|
50
|
+
<Button variant="accent" glyph="book">Open</Button>
|
|
51
|
+
</Card>
|
|
52
|
+
)
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
---
|
|
57
|
+
|
|
58
|
+
## Entry points
|
|
59
|
+
|
|
60
|
+
| Import | Contents | React Native safe? |
|
|
61
|
+
|---|---|---|
|
|
62
|
+
| `achery-ui` | All components + theme | No (DOM + CSS) |
|
|
63
|
+
| `achery-ui/style.css` | Component styles | No |
|
|
64
|
+
| `achery-ui/tokens` | Design tokens as TypeScript values | **Yes** |
|
|
65
|
+
|
|
66
|
+
The `/tokens` entry is zero-DOM, zero-React — safe to import from React Native or any non-browser context.
|
|
67
|
+
|
|
68
|
+
---
|
|
69
|
+
|
|
70
|
+
## Components
|
|
71
|
+
|
|
72
|
+
| Component | Description |
|
|
73
|
+
|---|---|
|
|
74
|
+
| `AcheryProvider` | Theme root — wraps your app |
|
|
75
|
+
| `useTheme` | Hook: read/set theme and accent |
|
|
76
|
+
| `Button` | Five variants, three sizes, glyphs, kbd hints |
|
|
77
|
+
| `Badge` | Status/category label with five tones |
|
|
78
|
+
| `Eyebrow` | Uppercase section label with optional count |
|
|
79
|
+
| `Toggle` | Binary on/off switch |
|
|
80
|
+
| `Glyph` | 33-icon SVG glyph set |
|
|
81
|
+
| `Marginalia` | Decorative corner glyph (aria-hidden) |
|
|
82
|
+
| `Typography` | `Display`, `Heading`, `Body`, `Mono` |
|
|
83
|
+
| `Field` | Form field wrapper: label + hint/error |
|
|
84
|
+
| `Input` | Single-line text input |
|
|
85
|
+
| `Textarea` | Multi-line text input |
|
|
86
|
+
| `Select` | Native select dropdown |
|
|
87
|
+
| `SearchInput` | Search input with compass icon |
|
|
88
|
+
| `Card` | Surface container: flat or stamp variant |
|
|
89
|
+
| `Tabs` | Accessible tab navigation |
|
|
90
|
+
| `Tooltip` | Hover/focus contextual label |
|
|
91
|
+
| `Sidebar` | Vertical nav with groups and active state |
|
|
92
|
+
| `AppBar` | Top bar: brand, search, accent picker, theme toggle |
|
|
93
|
+
| `Table` | Sortable data table, row selection, hybrid state |
|
|
94
|
+
| `Modal` | Accessible dialog with focus trap |
|
|
95
|
+
| `ToastProvider` + `useToast` | Imperative toast notifications |
|
|
96
|
+
|
|
97
|
+
Full props reference: [COMPONENTS.md](COMPONENTS.md) · Detailed docs: [src/components/README.md](src/components/README.md)
|
|
98
|
+
|
|
99
|
+
---
|
|
100
|
+
|
|
101
|
+
## Theming
|
|
102
|
+
|
|
103
|
+
```tsx
|
|
104
|
+
import { useTheme } from 'achery-ui'
|
|
105
|
+
|
|
106
|
+
const { theme, toggleTheme, accent, setAccent } = useTheme()
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
**Themes:** `light` · `dark`
|
|
110
|
+
**Accents:** `terracotta` · `moss` · `plum` · `ochre` · `rust` · `copper`
|
|
111
|
+
|
|
112
|
+
Full theming guide: [src/theme/README.md](src/theme/README.md)
|
|
113
|
+
|
|
114
|
+
---
|
|
115
|
+
|
|
116
|
+
## Design language
|
|
117
|
+
|
|
118
|
+
See [docs/styleguide.md](docs/styleguide.md) for the full visual language reference — palette rationale, typography roles, spacing scale, glyphs, motion, and copy voice.
|
|
119
|
+
|
|
120
|
+
---
|
|
121
|
+
|
|
122
|
+
## Versioning
|
|
123
|
+
|
|
124
|
+
Versions follow [Semantic Versioning](https://semver.org). Changes are documented in [CHANGELOG.md](CHANGELOG.md).
|
|
125
|
+
|
|
126
|
+
On merge to `main`, a GitHub Action automatically creates a GitHub Release and publishes to npm if the version in `package.json` has changed since the last tag.
|
|
127
|
+
|
|
128
|
+
---
|
|
129
|
+
|
|
130
|
+
## Development
|
|
131
|
+
|
|
132
|
+
```sh
|
|
133
|
+
pnpm install
|
|
134
|
+
pnpm storybook # component explorer at localhost:6006
|
|
135
|
+
pnpm build # build library → dist/
|
|
136
|
+
pnpm build:watch # rebuild on file changes
|
|
137
|
+
pnpm typecheck # tsc --noEmit
|
|
138
|
+
pnpm build-storybook # static storybook → storybook-static/
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
### Working on a branch
|
|
142
|
+
|
|
143
|
+
See [CLAUDE.md](CLAUDE.md) for the full contribution workflow, including versioning and changelog rules.
|
|
144
|
+
|
|
145
|
+
---
|
|
146
|
+
|
|
147
|
+
## Package structure
|
|
148
|
+
|
|
149
|
+
```
|
|
150
|
+
src/
|
|
151
|
+
tokens/ # /tokens entry point — React Native safe
|
|
152
|
+
types/ # Shared TypeScript types
|
|
153
|
+
theme/ # ThemeProvider, useTheme, CSS contracts
|
|
154
|
+
glyphs/ # Glyph component + 33 inlined SVG components
|
|
155
|
+
components/ # All UI components (stories colocated)
|
|
156
|
+
docs/ # Storybook MDX documentation pages
|
|
157
|
+
dist/ # Built output (gitignored)
|
|
158
|
+
.github/
|
|
159
|
+
workflows/
|
|
160
|
+
release.yml # Auto-release on version bump to main
|
|
161
|
+
```
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
declare const accentColors: {
|
|
2
|
+
readonly terracotta: {
|
|
3
|
+
readonly main: "#c46a3a";
|
|
4
|
+
readonly light: "#d97a4a";
|
|
5
|
+
readonly deep: "#a05526";
|
|
6
|
+
readonly fg: "#fbf8f0";
|
|
7
|
+
readonly fgDark: "#14130f";
|
|
8
|
+
};
|
|
9
|
+
readonly moss: {
|
|
10
|
+
readonly main: "#4a5a32";
|
|
11
|
+
readonly light: "#8da866";
|
|
12
|
+
readonly deep: "#2e3a20";
|
|
13
|
+
readonly fg: "#fbf8f0";
|
|
14
|
+
readonly fgDark: "#14130f";
|
|
15
|
+
};
|
|
16
|
+
readonly plum: {
|
|
17
|
+
readonly main: "#5d4a6a";
|
|
18
|
+
readonly light: "#8b6fa8";
|
|
19
|
+
readonly deep: "#5d4a6a";
|
|
20
|
+
readonly fg: "#fbf8f0";
|
|
21
|
+
readonly fgDark: "#14130f";
|
|
22
|
+
};
|
|
23
|
+
readonly ochre: {
|
|
24
|
+
readonly main: "#b8924a";
|
|
25
|
+
readonly light: "#e0bc70";
|
|
26
|
+
readonly deep: "#9a7430";
|
|
27
|
+
readonly fg: "#1f1d18";
|
|
28
|
+
readonly fgDark: "#1f1d18";
|
|
29
|
+
};
|
|
30
|
+
readonly rust: {
|
|
31
|
+
readonly main: "#8a3a22";
|
|
32
|
+
readonly light: "#c46a3a";
|
|
33
|
+
readonly deep: "#8a3a22";
|
|
34
|
+
readonly fg: "#fbf8f0";
|
|
35
|
+
readonly fgDark: "#14130f";
|
|
36
|
+
};
|
|
37
|
+
readonly copper: {
|
|
38
|
+
readonly main: "#b8742a";
|
|
39
|
+
readonly light: "#d68f48";
|
|
40
|
+
readonly deep: "#8a531a";
|
|
41
|
+
readonly fg: "#1f1d18";
|
|
42
|
+
readonly fgDark: "#1f1d18";
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
type AccentColor = keyof typeof accentColors;
|
|
46
|
+
declare const accentColorNames: AccentColor[];
|
|
47
|
+
|
|
48
|
+
export { type AccentColor as A, accentColorNames as a, accentColors as b };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
declare const accentColors: {
|
|
2
|
+
readonly terracotta: {
|
|
3
|
+
readonly main: "#c46a3a";
|
|
4
|
+
readonly light: "#d97a4a";
|
|
5
|
+
readonly deep: "#a05526";
|
|
6
|
+
readonly fg: "#fbf8f0";
|
|
7
|
+
readonly fgDark: "#14130f";
|
|
8
|
+
};
|
|
9
|
+
readonly moss: {
|
|
10
|
+
readonly main: "#4a5a32";
|
|
11
|
+
readonly light: "#8da866";
|
|
12
|
+
readonly deep: "#2e3a20";
|
|
13
|
+
readonly fg: "#fbf8f0";
|
|
14
|
+
readonly fgDark: "#14130f";
|
|
15
|
+
};
|
|
16
|
+
readonly plum: {
|
|
17
|
+
readonly main: "#5d4a6a";
|
|
18
|
+
readonly light: "#8b6fa8";
|
|
19
|
+
readonly deep: "#5d4a6a";
|
|
20
|
+
readonly fg: "#fbf8f0";
|
|
21
|
+
readonly fgDark: "#14130f";
|
|
22
|
+
};
|
|
23
|
+
readonly ochre: {
|
|
24
|
+
readonly main: "#b8924a";
|
|
25
|
+
readonly light: "#e0bc70";
|
|
26
|
+
readonly deep: "#9a7430";
|
|
27
|
+
readonly fg: "#1f1d18";
|
|
28
|
+
readonly fgDark: "#1f1d18";
|
|
29
|
+
};
|
|
30
|
+
readonly rust: {
|
|
31
|
+
readonly main: "#8a3a22";
|
|
32
|
+
readonly light: "#c46a3a";
|
|
33
|
+
readonly deep: "#8a3a22";
|
|
34
|
+
readonly fg: "#fbf8f0";
|
|
35
|
+
readonly fgDark: "#14130f";
|
|
36
|
+
};
|
|
37
|
+
readonly copper: {
|
|
38
|
+
readonly main: "#b8742a";
|
|
39
|
+
readonly light: "#d68f48";
|
|
40
|
+
readonly deep: "#8a531a";
|
|
41
|
+
readonly fg: "#1f1d18";
|
|
42
|
+
readonly fgDark: "#1f1d18";
|
|
43
|
+
};
|
|
44
|
+
};
|
|
45
|
+
type AccentColor = keyof typeof accentColors;
|
|
46
|
+
declare const accentColorNames: AccentColor[];
|
|
47
|
+
|
|
48
|
+
export { type AccentColor as A, accentColorNames as a, accentColors as b };
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
// src/tokens/palette.ts
|
|
2
|
+
var palette = {
|
|
3
|
+
ink: "#1f1d18",
|
|
4
|
+
inkDeep: "#14130f",
|
|
5
|
+
paper: "#fbf8f0",
|
|
6
|
+
paperWarm: "#f0e9d6",
|
|
7
|
+
paperToasted: "#e6dec5",
|
|
8
|
+
cream: "#e8dfc8",
|
|
9
|
+
creamSoft: "#d8cdb0",
|
|
10
|
+
mossDeep: "#2e3a20",
|
|
11
|
+
moss: "#4a5a32",
|
|
12
|
+
mossMid: "#6b7a48",
|
|
13
|
+
mossLight: "#8da866",
|
|
14
|
+
sage: "#b6c898",
|
|
15
|
+
terracotta: "#c46a3a",
|
|
16
|
+
terracottaDeep: "#a05526",
|
|
17
|
+
terracottaLight: "#d97a4a",
|
|
18
|
+
plum: "#5d4a6a",
|
|
19
|
+
plumMid: "#7a5e8a",
|
|
20
|
+
plumLight: "#8b6fa8",
|
|
21
|
+
rust: "#8a3a22",
|
|
22
|
+
ochre: "#b8924a",
|
|
23
|
+
leather: "#6b3a26",
|
|
24
|
+
leatherMid: "#8a4e34",
|
|
25
|
+
leatherLight: "#a86a48",
|
|
26
|
+
copper: "#b8742a",
|
|
27
|
+
copperDeep: "#8a531a",
|
|
28
|
+
copperLight: "#d68f48",
|
|
29
|
+
copperPatina: "#5a7a6a",
|
|
30
|
+
silver: "#a8a098",
|
|
31
|
+
silverDeep: "#6e6a62",
|
|
32
|
+
silverLight: "#c8c0b6",
|
|
33
|
+
wood: "#7a5a3a",
|
|
34
|
+
woodLight: "#a88660",
|
|
35
|
+
woodDeep: "#4a3422",
|
|
36
|
+
gold: "#c69a4a",
|
|
37
|
+
goldDeep: "#9a7430",
|
|
38
|
+
goldLight: "#e0bc70",
|
|
39
|
+
success: "#6ba03d"
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
// src/tokens/accents.ts
|
|
43
|
+
var accentColors = {
|
|
44
|
+
terracotta: {
|
|
45
|
+
main: palette.terracotta,
|
|
46
|
+
light: palette.terracottaLight,
|
|
47
|
+
deep: palette.terracottaDeep,
|
|
48
|
+
fg: palette.paper,
|
|
49
|
+
fgDark: palette.inkDeep
|
|
50
|
+
},
|
|
51
|
+
moss: {
|
|
52
|
+
main: palette.moss,
|
|
53
|
+
light: palette.mossLight,
|
|
54
|
+
deep: palette.mossDeep,
|
|
55
|
+
fg: palette.paper,
|
|
56
|
+
fgDark: palette.inkDeep
|
|
57
|
+
},
|
|
58
|
+
plum: {
|
|
59
|
+
main: palette.plum,
|
|
60
|
+
light: palette.plumLight,
|
|
61
|
+
deep: palette.plum,
|
|
62
|
+
fg: palette.paper,
|
|
63
|
+
fgDark: palette.inkDeep
|
|
64
|
+
},
|
|
65
|
+
ochre: {
|
|
66
|
+
main: palette.ochre,
|
|
67
|
+
light: palette.goldLight,
|
|
68
|
+
deep: palette.goldDeep,
|
|
69
|
+
fg: palette.ink,
|
|
70
|
+
fgDark: palette.ink
|
|
71
|
+
},
|
|
72
|
+
rust: {
|
|
73
|
+
main: palette.rust,
|
|
74
|
+
light: palette.terracotta,
|
|
75
|
+
deep: palette.rust,
|
|
76
|
+
fg: palette.paper,
|
|
77
|
+
fgDark: palette.inkDeep
|
|
78
|
+
},
|
|
79
|
+
copper: {
|
|
80
|
+
main: palette.copper,
|
|
81
|
+
light: palette.copperLight,
|
|
82
|
+
deep: palette.copperDeep,
|
|
83
|
+
fg: palette.ink,
|
|
84
|
+
fgDark: palette.ink
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
var accentColorNames = Object.keys(accentColors);
|
|
88
|
+
|
|
89
|
+
export { accentColorNames, accentColors, palette };
|
|
90
|
+
//# sourceMappingURL=chunk-IARZATZY.js.map
|
|
91
|
+
//# sourceMappingURL=chunk-IARZATZY.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tokens/palette.ts","../src/tokens/accents.ts"],"names":[],"mappings":"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","file":"chunk-IARZATZY.js","sourcesContent":["export const palette = {\n ink: '#1f1d18',\n inkDeep: '#14130f',\n\n paper: '#fbf8f0',\n paperWarm: '#f0e9d6',\n paperToasted: '#e6dec5',\n cream: '#e8dfc8',\n creamSoft: '#d8cdb0',\n\n mossDeep: '#2e3a20',\n moss: '#4a5a32',\n mossMid: '#6b7a48',\n mossLight: '#8da866',\n sage: '#b6c898',\n\n terracotta: '#c46a3a',\n terracottaDeep: '#a05526',\n terracottaLight: '#d97a4a',\n\n plum: '#5d4a6a',\n plumMid: '#7a5e8a',\n plumLight: '#8b6fa8',\n\n rust: '#8a3a22',\n ochre: '#b8924a',\n\n leather: '#6b3a26',\n leatherMid: '#8a4e34',\n leatherLight: '#a86a48',\n\n copper: '#b8742a',\n copperDeep: '#8a531a',\n copperLight: '#d68f48',\n copperPatina: '#5a7a6a',\n\n silver: '#a8a098',\n silverDeep: '#6e6a62',\n silverLight: '#c8c0b6',\n\n wood: '#7a5a3a',\n woodLight: '#a88660',\n woodDeep: '#4a3422',\n\n gold: '#c69a4a',\n goldDeep: '#9a7430',\n goldLight: '#e0bc70',\n\n success: '#6ba03d',\n} as const\n\nexport type PaletteKey = keyof typeof palette\n","import { palette } from './palette.js'\n\nexport const accentColors = {\n terracotta: {\n main: palette.terracotta,\n light: palette.terracottaLight,\n deep: palette.terracottaDeep,\n fg: palette.paper,\n fgDark: palette.inkDeep,\n },\n moss: {\n main: palette.moss,\n light: palette.mossLight,\n deep: palette.mossDeep,\n fg: palette.paper,\n fgDark: palette.inkDeep,\n },\n plum: {\n main: palette.plum,\n light: palette.plumLight,\n deep: palette.plum,\n fg: palette.paper,\n fgDark: palette.inkDeep,\n },\n ochre: {\n main: palette.ochre,\n light: palette.goldLight,\n deep: palette.goldDeep,\n fg: palette.ink,\n fgDark: palette.ink,\n },\n rust: {\n main: palette.rust,\n light: palette.terracotta,\n deep: palette.rust,\n fg: palette.paper,\n fgDark: palette.inkDeep,\n },\n copper: {\n main: palette.copper,\n light: palette.copperLight,\n deep: palette.copperDeep,\n fg: palette.ink,\n fgDark: palette.ink,\n },\n} as const\n\nexport type AccentColor = keyof typeof accentColors\nexport const accentColorNames = Object.keys(accentColors) as AccentColor[]\n"]}
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
// src/tokens/palette.ts
|
|
4
|
+
var palette = {
|
|
5
|
+
ink: "#1f1d18",
|
|
6
|
+
inkDeep: "#14130f",
|
|
7
|
+
paper: "#fbf8f0",
|
|
8
|
+
paperWarm: "#f0e9d6",
|
|
9
|
+
paperToasted: "#e6dec5",
|
|
10
|
+
cream: "#e8dfc8",
|
|
11
|
+
creamSoft: "#d8cdb0",
|
|
12
|
+
mossDeep: "#2e3a20",
|
|
13
|
+
moss: "#4a5a32",
|
|
14
|
+
mossMid: "#6b7a48",
|
|
15
|
+
mossLight: "#8da866",
|
|
16
|
+
sage: "#b6c898",
|
|
17
|
+
terracotta: "#c46a3a",
|
|
18
|
+
terracottaDeep: "#a05526",
|
|
19
|
+
terracottaLight: "#d97a4a",
|
|
20
|
+
plum: "#5d4a6a",
|
|
21
|
+
plumMid: "#7a5e8a",
|
|
22
|
+
plumLight: "#8b6fa8",
|
|
23
|
+
rust: "#8a3a22",
|
|
24
|
+
ochre: "#b8924a",
|
|
25
|
+
leather: "#6b3a26",
|
|
26
|
+
leatherMid: "#8a4e34",
|
|
27
|
+
leatherLight: "#a86a48",
|
|
28
|
+
copper: "#b8742a",
|
|
29
|
+
copperDeep: "#8a531a",
|
|
30
|
+
copperLight: "#d68f48",
|
|
31
|
+
copperPatina: "#5a7a6a",
|
|
32
|
+
silver: "#a8a098",
|
|
33
|
+
silverDeep: "#6e6a62",
|
|
34
|
+
silverLight: "#c8c0b6",
|
|
35
|
+
wood: "#7a5a3a",
|
|
36
|
+
woodLight: "#a88660",
|
|
37
|
+
woodDeep: "#4a3422",
|
|
38
|
+
gold: "#c69a4a",
|
|
39
|
+
goldDeep: "#9a7430",
|
|
40
|
+
goldLight: "#e0bc70",
|
|
41
|
+
success: "#6ba03d"
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
// src/tokens/accents.ts
|
|
45
|
+
var accentColors = {
|
|
46
|
+
terracotta: {
|
|
47
|
+
main: palette.terracotta,
|
|
48
|
+
light: palette.terracottaLight,
|
|
49
|
+
deep: palette.terracottaDeep,
|
|
50
|
+
fg: palette.paper,
|
|
51
|
+
fgDark: palette.inkDeep
|
|
52
|
+
},
|
|
53
|
+
moss: {
|
|
54
|
+
main: palette.moss,
|
|
55
|
+
light: palette.mossLight,
|
|
56
|
+
deep: palette.mossDeep,
|
|
57
|
+
fg: palette.paper,
|
|
58
|
+
fgDark: palette.inkDeep
|
|
59
|
+
},
|
|
60
|
+
plum: {
|
|
61
|
+
main: palette.plum,
|
|
62
|
+
light: palette.plumLight,
|
|
63
|
+
deep: palette.plum,
|
|
64
|
+
fg: palette.paper,
|
|
65
|
+
fgDark: palette.inkDeep
|
|
66
|
+
},
|
|
67
|
+
ochre: {
|
|
68
|
+
main: palette.ochre,
|
|
69
|
+
light: palette.goldLight,
|
|
70
|
+
deep: palette.goldDeep,
|
|
71
|
+
fg: palette.ink,
|
|
72
|
+
fgDark: palette.ink
|
|
73
|
+
},
|
|
74
|
+
rust: {
|
|
75
|
+
main: palette.rust,
|
|
76
|
+
light: palette.terracotta,
|
|
77
|
+
deep: palette.rust,
|
|
78
|
+
fg: palette.paper,
|
|
79
|
+
fgDark: palette.inkDeep
|
|
80
|
+
},
|
|
81
|
+
copper: {
|
|
82
|
+
main: palette.copper,
|
|
83
|
+
light: palette.copperLight,
|
|
84
|
+
deep: palette.copperDeep,
|
|
85
|
+
fg: palette.ink,
|
|
86
|
+
fgDark: palette.ink
|
|
87
|
+
}
|
|
88
|
+
};
|
|
89
|
+
var accentColorNames = Object.keys(accentColors);
|
|
90
|
+
|
|
91
|
+
exports.accentColorNames = accentColorNames;
|
|
92
|
+
exports.accentColors = accentColors;
|
|
93
|
+
exports.palette = palette;
|
|
94
|
+
//# sourceMappingURL=chunk-SSWJ4EPA.cjs.map
|
|
95
|
+
//# sourceMappingURL=chunk-SSWJ4EPA.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/tokens/palette.ts","../src/tokens/accents.ts"],"names":[],"mappings":"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","file":"chunk-SSWJ4EPA.cjs","sourcesContent":["export const palette = {\n ink: '#1f1d18',\n inkDeep: '#14130f',\n\n paper: '#fbf8f0',\n paperWarm: '#f0e9d6',\n paperToasted: '#e6dec5',\n cream: '#e8dfc8',\n creamSoft: '#d8cdb0',\n\n mossDeep: '#2e3a20',\n moss: '#4a5a32',\n mossMid: '#6b7a48',\n mossLight: '#8da866',\n sage: '#b6c898',\n\n terracotta: '#c46a3a',\n terracottaDeep: '#a05526',\n terracottaLight: '#d97a4a',\n\n plum: '#5d4a6a',\n plumMid: '#7a5e8a',\n plumLight: '#8b6fa8',\n\n rust: '#8a3a22',\n ochre: '#b8924a',\n\n leather: '#6b3a26',\n leatherMid: '#8a4e34',\n leatherLight: '#a86a48',\n\n copper: '#b8742a',\n copperDeep: '#8a531a',\n copperLight: '#d68f48',\n copperPatina: '#5a7a6a',\n\n silver: '#a8a098',\n silverDeep: '#6e6a62',\n silverLight: '#c8c0b6',\n\n wood: '#7a5a3a',\n woodLight: '#a88660',\n woodDeep: '#4a3422',\n\n gold: '#c69a4a',\n goldDeep: '#9a7430',\n goldLight: '#e0bc70',\n\n success: '#6ba03d',\n} as const\n\nexport type PaletteKey = keyof typeof palette\n","import { palette } from './palette.js'\n\nexport const accentColors = {\n terracotta: {\n main: palette.terracotta,\n light: palette.terracottaLight,\n deep: palette.terracottaDeep,\n fg: palette.paper,\n fgDark: palette.inkDeep,\n },\n moss: {\n main: palette.moss,\n light: palette.mossLight,\n deep: palette.mossDeep,\n fg: palette.paper,\n fgDark: palette.inkDeep,\n },\n plum: {\n main: palette.plum,\n light: palette.plumLight,\n deep: palette.plum,\n fg: palette.paper,\n fgDark: palette.inkDeep,\n },\n ochre: {\n main: palette.ochre,\n light: palette.goldLight,\n deep: palette.goldDeep,\n fg: palette.ink,\n fgDark: palette.ink,\n },\n rust: {\n main: palette.rust,\n light: palette.terracotta,\n deep: palette.rust,\n fg: palette.paper,\n fgDark: palette.inkDeep,\n },\n copper: {\n main: palette.copper,\n light: palette.copperLight,\n deep: palette.copperDeep,\n fg: palette.ink,\n fgDark: palette.ink,\n },\n} as const\n\nexport type AccentColor = keyof typeof accentColors\nexport const accentColorNames = Object.keys(accentColors) as AccentColor[]\n"]}
|