@stacklist-app/brandkit 1.1.1
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 +95 -0
- package/bin/brandkit.js +49 -0
- package/cli/build.js +35 -0
- package/cli/dev.js +129 -0
- package/cli/generate.js +272 -0
- package/cli/init.js +62 -0
- package/dist/engine.js +847 -0
- package/dist/index.html +173 -0
- package/dist/styles.css +995 -0
- package/integrations/astro.js +26 -0
- package/integrations/vite.js +81 -0
- package/lib/config-schema.js +219 -0
- package/lib/extract-css.js +117 -0
- package/lib/extract-logos.js +98 -0
- package/lib/extract-tailwind.js +146 -0
- package/lib/generate-helpers.js +320 -0
- package/lib/resolve.js +11 -0
- package/lib/template.js +84 -0
- package/package.json +37 -0
package/dist/index.html
ADDED
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Brand Guide</title>
|
|
7
|
+
<link rel="stylesheet" href="styles.css">
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
|
|
11
|
+
<div class="layout">
|
|
12
|
+
|
|
13
|
+
<!-- Sidebar -->
|
|
14
|
+
<nav class="sidebar">
|
|
15
|
+
<div class="sidebar-brand">brandkit</div>
|
|
16
|
+
<ul class="sidebar-nav" id="nav"></ul>
|
|
17
|
+
</nav>
|
|
18
|
+
|
|
19
|
+
<!-- Main Content -->
|
|
20
|
+
<div class="main">
|
|
21
|
+
<div class="page">
|
|
22
|
+
|
|
23
|
+
<!-- Header -->
|
|
24
|
+
<div class="header">
|
|
25
|
+
<div class="header-wordmark" id="header-wordmark"></div>
|
|
26
|
+
<div class="header-meta" id="header-meta"></div>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<!-- Intro -->
|
|
30
|
+
<div class="section">
|
|
31
|
+
<p class="section-intro" id="intro"></p>
|
|
32
|
+
</div>
|
|
33
|
+
|
|
34
|
+
<!-- ═══ COLORS ═══ -->
|
|
35
|
+
|
|
36
|
+
<!-- Palette -->
|
|
37
|
+
<div class="section" id="palette">
|
|
38
|
+
<div class="section-label">Color Palette</div>
|
|
39
|
+
<div class="color-group-label" id="colors-brand-label">Brand</div>
|
|
40
|
+
<div class="color-grid" id="colors-brand" style="margin-bottom: 28px;"></div>
|
|
41
|
+
<div class="color-group-label" id="colors-neutrals-label">Neutrals</div>
|
|
42
|
+
<div class="color-grid" id="colors-neutrals" style="margin-bottom: 28px;"></div>
|
|
43
|
+
<div class="color-group-label" id="colors-semantic-label">Semantic</div>
|
|
44
|
+
<div class="color-grid" id="colors-semantic"></div>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<!-- Gradients -->
|
|
48
|
+
<div class="section" id="gradients">
|
|
49
|
+
<div class="section-label">Gradient System</div>
|
|
50
|
+
<div class="section-intro" id="section-intro-gradients"></div>
|
|
51
|
+
|
|
52
|
+
<div class="gradient-row">
|
|
53
|
+
<div class="gradient-display brand copyable" id="gradient-brand-copy" tabindex="0" role="button" aria-label="Copy gradient CSS">
|
|
54
|
+
<div class="copy-hint"><span>Click to copy</span></div>
|
|
55
|
+
</div>
|
|
56
|
+
<div class="gradient-stops" id="gradient-stops"></div>
|
|
57
|
+
<div class="gradient-label" id="gradient-brand-label"></div>
|
|
58
|
+
</div>
|
|
59
|
+
|
|
60
|
+
<div class="gradient-row">
|
|
61
|
+
<div class="gradient-display subtle copyable" id="gradient-subtle-copy" tabindex="0" role="button" aria-label="Copy subtle gradient CSS">
|
|
62
|
+
<div class="copy-hint"><span>Click to copy</span></div>
|
|
63
|
+
</div>
|
|
64
|
+
<div class="gradient-label" id="gradient-subtle-label"></div>
|
|
65
|
+
</div>
|
|
66
|
+
|
|
67
|
+
<div class="gradient-row" style="margin-bottom: 0;">
|
|
68
|
+
<div style="background: var(--white); border-radius: 20px; padding: 40px; border: 1px solid var(--mist); text-align: center;">
|
|
69
|
+
<span class="gradient-text" id="gradient-text-demo" style="font-family: var(--font-display), sans-serif; font-size: 42px; font-weight: 700; letter-spacing: -0.02em;"></span>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="gradient-label">Gradient Text · Headlines on light backgrounds, stat numbers</div>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<div class="gradient-usage" id="gradient-usage"></div>
|
|
75
|
+
</div>
|
|
76
|
+
|
|
77
|
+
<!-- ═══ LOGOS ═══ -->
|
|
78
|
+
|
|
79
|
+
<div class="section" id="logos">
|
|
80
|
+
<div class="section-label">Logo Assets</div>
|
|
81
|
+
<div class="section-intro" id="section-intro-logos"></div>
|
|
82
|
+
<div class="logo-grid" id="logos-grid"></div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<!-- ═══ CONTENT ═══ -->
|
|
86
|
+
|
|
87
|
+
<!-- Typography -->
|
|
88
|
+
<div class="section" id="typography">
|
|
89
|
+
<div class="section-label">Typography</div>
|
|
90
|
+
<div class="type-specimen">
|
|
91
|
+
<div class="type-sample-display" id="type-display-name"></div>
|
|
92
|
+
<div class="type-details" id="type-display-desc"></div>
|
|
93
|
+
</div>
|
|
94
|
+
<div class="type-specimen">
|
|
95
|
+
<div class="type-sample-body" id="type-body-name"></div>
|
|
96
|
+
<div class="type-details" id="type-body-desc"></div>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<div class="type-tester">
|
|
100
|
+
<div class="type-tester-label">
|
|
101
|
+
Type Tester
|
|
102
|
+
<select id="type-tester-font"></select>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="type-tester-input" contenteditable="true" id="type-tester-input" data-placeholder="Type anything to test..."></div>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div class="type-scale" id="type-scale"></div>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<!-- Text Hierarchy -->
|
|
111
|
+
<div class="section" id="hierarchy">
|
|
112
|
+
<div class="section-label">Text Hierarchy</div>
|
|
113
|
+
<div id="hierarchy-content"></div>
|
|
114
|
+
</div>
|
|
115
|
+
|
|
116
|
+
<!-- Voice & Tone -->
|
|
117
|
+
<div class="section" id="voice">
|
|
118
|
+
<div class="section-label">Voice & Tone</div>
|
|
119
|
+
<div class="section-intro" id="voice-intro"></div>
|
|
120
|
+
<div class="voice-grid" id="voice-grid"></div>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<!-- Spacing -->
|
|
124
|
+
<div class="section" id="spacing">
|
|
125
|
+
<div class="section-label">Spacing Scale</div>
|
|
126
|
+
<div class="section-intro" id="section-intro-spacing"></div>
|
|
127
|
+
<div class="spacing-scale" id="spacing-scale"></div>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<!-- ═══ COMPONENTS ═══ -->
|
|
131
|
+
|
|
132
|
+
<!-- Buttons & Cards -->
|
|
133
|
+
<div class="section" id="components">
|
|
134
|
+
<div class="section-label">Component Patterns</div>
|
|
135
|
+
<div class="section-intro" id="section-intro-components"></div>
|
|
136
|
+
<div id="components-content"></div>
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
<!-- Accessibility -->
|
|
140
|
+
<div class="section" id="accessibility">
|
|
141
|
+
<div class="section-label">Accessibility</div>
|
|
142
|
+
<div class="a11y-grid" id="a11y-grid"></div>
|
|
143
|
+
</div>
|
|
144
|
+
|
|
145
|
+
<!-- CSS Variables -->
|
|
146
|
+
<div class="section" id="variables">
|
|
147
|
+
<div class="section-label">CSS Variables</div>
|
|
148
|
+
<div class="section-intro" id="section-intro-variables"></div>
|
|
149
|
+
<pre class="code-block" id="code-block"></pre>
|
|
150
|
+
</div>
|
|
151
|
+
|
|
152
|
+
<!-- Footer -->
|
|
153
|
+
<div class="guide-footer" id="footer"></div>
|
|
154
|
+
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
</div>
|
|
158
|
+
|
|
159
|
+
<!-- Copy Format Toggle -->
|
|
160
|
+
<div class="copy-format-bar">
|
|
161
|
+
<button class="active" data-format="hex">Hex</button>
|
|
162
|
+
<button data-format="oklch">oklch</button>
|
|
163
|
+
<button data-format="cssVar">CSS Var</button>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<!-- Toast Container -->
|
|
167
|
+
<div class="toast-container" id="toast-container"></div>
|
|
168
|
+
|
|
169
|
+
<!-- Engine -->
|
|
170
|
+
<script src="engine.js"></script>
|
|
171
|
+
|
|
172
|
+
</body>
|
|
173
|
+
</html>
|