@notambourine/brand-kit 1.1.1 → 1.1.2
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 +29 -0
- package/SKILL.md +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -107,6 +107,35 @@ cp -R node_modules/@notambourine/brand-kit/{fonts,logo} public/
|
|
|
107
107
|
load it first and serve `fonts/` beside it. The paths inside it are relative to the CSS
|
|
108
108
|
file, so inlining it into a `<style>` block breaks the faces.
|
|
109
109
|
|
|
110
|
+
### With Tailwind or StyleX
|
|
111
|
+
|
|
112
|
+
A surface with its own faces and base layer imports `vars.css` alone and writes
|
|
113
|
+
`var()` against the semantic aliases. Neither system needs anything from this kit
|
|
114
|
+
beyond the custom properties.
|
|
115
|
+
|
|
116
|
+
```js
|
|
117
|
+
import "@notambourine/brand-kit/vars.css";
|
|
118
|
+
|
|
119
|
+
const styles = stylex.create({
|
|
120
|
+
card: { backgroundColor: "var(--bg-card)", padding: "var(--sp-6)" },
|
|
121
|
+
});
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
Tailwind claims the `--font-*` and `--ease-*` namespaces for its own utilities, which
|
|
125
|
+
is why those two groups ship a `--nt-*` primitive under the alias: a Tailwind surface
|
|
126
|
+
reads the primitive. StyleX hashes the names it generates and collides with neither.
|
|
127
|
+
|
|
128
|
+
Two StyleX-specific traps. Bridging through `stylex.defineVars` breaks `.theme-light`,
|
|
129
|
+
because StyleX declares those properties on `:root` and a custom property resolves
|
|
130
|
+
where it is declared, so a `.theme-light` subtree still inherits the dark value; a raw
|
|
131
|
+
`var()` string resolves at the element and themes correctly. And StyleX outranks the
|
|
132
|
+
element styles in `elements.css` only while `useCSSLayers` is off - turn layers on and
|
|
133
|
+
an unlayered `h1` wins, so import into a layer StyleX orders itself against:
|
|
134
|
+
|
|
135
|
+
```css
|
|
136
|
+
@import "@notambourine/brand-kit/tokens.css" layer(base);
|
|
137
|
+
```
|
|
138
|
+
|
|
110
139
|
The package ships the stylesheets, `fonts/`, `logo/`, and `SKILL.md`. The logo build
|
|
111
140
|
script and `hello-world.html` stay in the repo. Pin an exact version and bump it on
|
|
112
141
|
purpose; a caret range moves the brand under a consumer with no diff to review.
|
package/SKILL.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: system
|
|
3
|
-
description: NoTambourine brand system - colors, type, spacing,
|
|
3
|
+
description: NoTambourine brand system - colors, tokens, type, spacing, components, deck theme, voice, and the audit that checks work against them. Use when building or styling anything NoTambourine-branded, when asked for the brand colors, or when checking copy before it ships.
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
# NoTambourine brand
|