@cueplusplus/theme-cue 1.0.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/CHANGELOG.md +54 -0
- package/LICENSE +21 -0
- package/README.md +123 -0
- package/index.d.ts +9 -0
- package/index.js +4 -0
- package/manifest.json +83 -0
- package/package.json +58 -0
- package/src/cue.dark.tokens.json +42 -0
- package/src/cue.light.tokens.json +35 -0
- package/theme.css +207 -0
- package/variants.css +0 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# @cueplusplus/theme-cue
|
|
2
|
+
|
|
3
|
+
## 1.0.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- b1c2f25: **Every package now ships the licence it declares.** All sixteen have said `"license": "MIT"` in
|
|
8
|
+
their manifest since they were first published, and none of them carried the text. Installing one
|
|
9
|
+
gave you a licence field and nothing to read; anyone auditing their dependency tree found a package
|
|
10
|
+
that claimed a licence it did not include. Each package root now holds the MIT notice, and npm packs
|
|
11
|
+
a root `LICENSE` whether or not `files` lists it, so it is in the tarball you install.
|
|
12
|
+
|
|
13
|
+
`@cueplusplus/ui` additionally ships `NOTICE.md`, the third-party notice for the assistant-ui code
|
|
14
|
+
vendored into its elements. That one is not automatic — `files` had to name it — and it is byte-for-byte
|
|
15
|
+
the notice that already sat beside the source it covers, because a notice that travels without the
|
|
16
|
+
bytes it describes is not a notice.
|
|
17
|
+
|
|
18
|
+
Nothing else about these packages changed: same exports, same versions of every dependency, same
|
|
19
|
+
registry. If you are upgrading only for this, the diff you receive is licence text.
|
|
20
|
+
|
|
21
|
+
## 1.0.1
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- 64b4bab: Every package manifest's `repository` field now names `cueplusplus/cue-ui`, following the
|
|
26
|
+
repository's rename from an earlier working title.
|
|
27
|
+
|
|
28
|
+
**Nothing to do.** No code, no exports, no types, and no package name: the scope is the
|
|
29
|
+
organisation, not the repository, so every specifier you already import is the one you keep
|
|
30
|
+
importing. What moves is metadata — GitHub Packages matches a package to a repository through that
|
|
31
|
+
field, so from this release the "source" link on each package's registry page, and the repository
|
|
32
|
+
the next publish is attributed to, name `cue-ui`. The `directory` beside it is unchanged, so each
|
|
33
|
+
link still lands on that package rather than on the monorepo root.
|
|
34
|
+
|
|
35
|
+
If you have a bookmark or a script pointing at the old URL, GitHub's rename redirect answers it;
|
|
36
|
+
updating it to `https://github.com/cueplusplus/cue-ui` is tidiness rather than repair.
|
|
37
|
+
|
|
38
|
+
- 362cdda: Each of these packages ships its `README.md` inside its tarball, and that file is the page a
|
|
39
|
+
consumer lands on at the registry; until now the ten presets were a dozen lines with nothing to
|
|
40
|
+
copy. The README now carries the install lines and a quick start — the `.npmrc` scope routing and
|
|
41
|
+
the user-level credential GitHub Packages needs, the `pnpm add` line with the peers the package
|
|
42
|
+
declares, the stylesheet import in the order the cascade requires, and the `ThemeProvider` call
|
|
43
|
+
that registers the manifest — plus what each subpath is, the modes and font stack the theme
|
|
44
|
+
actually defines, and where the theming guide and `docs/CONSUMING.md` are. No code, no exports, no
|
|
45
|
+
types.
|
|
46
|
+
|
|
47
|
+
`@cueplusplus/theme-base`'s quick start says that its second import is a palette the base does not
|
|
48
|
+
ship, and names the install line for one.
|
|
49
|
+
|
|
50
|
+
## 1.0.0
|
|
51
|
+
|
|
52
|
+
### Major Changes
|
|
53
|
+
|
|
54
|
+
- 814c859: `@cueplusplus/theme-cue` is the CUE++ brand palette and the design system's default: monochrome chrome over a near-black product ramp, a white-alpha ink ladder, JetBrains Mono throughout, and a chromatic status vocabulary. Install it, import `@cueplusplus/theme-cue/theme.css`, and pass its manifest to `ThemeProvider`'s `themes` — this is its first published version, `1.0.0`, and every required contrast pair clears its floor.
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 CUE++ contributors
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
# @cueplusplus/theme-cue
|
|
2
|
+
|
|
3
|
+
The `cue` palette for `@cueplusplus/ui` — the CUE++ brand itself, and the palette the system was
|
|
4
|
+
designed around: monochrome chrome over a near-black product ramp, a white-alpha ink ladder, and a
|
|
5
|
+
chromatic status vocabulary. It is the brand seeded in `packages/brand-tokens` translated into a
|
|
6
|
+
product palette rather than a copy of it. A palette is a package here precisely so that it is not
|
|
7
|
+
the only one: install several, register several, and a theme switcher is an array with more than one
|
|
8
|
+
entry in it.
|
|
9
|
+
|
|
10
|
+
## Install
|
|
11
|
+
|
|
12
|
+
The `@cueplusplus` scope is served by **GitHub Packages**, which authenticates every read — a public
|
|
13
|
+
package included. Two lines set that up, and they live in two different files on purpose: the scope
|
|
14
|
+
routing is committed with your project, the credential never is.
|
|
15
|
+
|
|
16
|
+
```ini
|
|
17
|
+
# .npmrc, committed at the root of your project
|
|
18
|
+
@cueplusplus:registry=https://npm.pkg.github.com
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
```sh
|
|
22
|
+
# the credential, once per machine, at the user level
|
|
23
|
+
pnpm config set //npm.pkg.github.com/:_authToken ghp_…
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
The token has to be a **classic** personal access token with the `read:packages` scope — GitHub
|
|
27
|
+
Packages accepts neither a fine-grained PAT nor npm's OIDC flow — and it has to be at the user
|
|
28
|
+
level: pnpm 11 ignores an env-expanded `_authToken` in a project `.npmrc`, and the install fails
|
|
29
|
+
with a `401` and a warning that the setting was ignored. [`docs/CONSUMING.md` §1][consuming] has the
|
|
30
|
+
same credential for CI and for Vercel.
|
|
31
|
+
|
|
32
|
+
```sh
|
|
33
|
+
pnpm add @cueplusplus/theme-cue @cueplusplus/theme-base
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
`@cueplusplus/theme-base` is the one peer this package declares, and it carries the token contract
|
|
37
|
+
the palette is written against. A palette on its own paints nothing: install it beside
|
|
38
|
+
`@cueplusplus/ui` and its own peers — [§2][consuming] has that line.
|
|
39
|
+
|
|
40
|
+
## Quick start
|
|
41
|
+
|
|
42
|
+
The theme stylesheet is the third import, and its position is load-bearing rather than tidy. A theme
|
|
43
|
+
declares its colours under `[data-theme="cue"]`, which ties with the blank base's bare `:root` at
|
|
44
|
+
the same specificity, so the one declared **later** wins. Put it before `styles.css` and the blank
|
|
45
|
+
base paints over it.
|
|
46
|
+
|
|
47
|
+
```css
|
|
48
|
+
/* app/globals.css */
|
|
49
|
+
@import "tailwindcss";
|
|
50
|
+
@import "@cueplusplus/ui/styles.css";
|
|
51
|
+
@import "@cueplusplus/theme-cue/theme.css";
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
Then register the manifest. `themes` is the registry the provider may switch between; `theme` names
|
|
55
|
+
the one that paints.
|
|
56
|
+
|
|
57
|
+
```tsx
|
|
58
|
+
import cue from "@cueplusplus/theme-cue";
|
|
59
|
+
import { ThemeProvider } from "@cueplusplus/ui/system";
|
|
60
|
+
|
|
61
|
+
export function Providers({ children }: { children: React.ReactNode }) {
|
|
62
|
+
return (
|
|
63
|
+
<ThemeProvider themes={[cue]} theme="cue">
|
|
64
|
+
{children}
|
|
65
|
+
</ThemeProvider>
|
|
66
|
+
);
|
|
67
|
+
}
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Importing the package **from its root**, rather than reaching for its `manifest.json` subpath, also
|
|
71
|
+
closes `ThemeName` to the themes you actually installed — so a misspelt `theme` value is a type
|
|
72
|
+
error rather than a page that silently paints the blank base. Add `prepaintScript()` to `<head>`
|
|
73
|
+
with the same `themes` array, so the first frame is not the defaults flashing past: [§4][consuming]
|
|
74
|
+
has it.
|
|
75
|
+
|
|
76
|
+
## What it ships
|
|
77
|
+
|
|
78
|
+
| Subpath | What it is |
|
|
79
|
+
| --- | --- |
|
|
80
|
+
| `@cueplusplus/theme-cue` | the manifest, as both the default export and `manifest` |
|
|
81
|
+
| `@cueplusplus/theme-cue/theme.css` | the palette — the only file a browser needs |
|
|
82
|
+
| `@cueplusplus/theme-cue/variants.css` | the density rungs and font pairings this theme adds. Empty: it adds none |
|
|
83
|
+
| `@cueplusplus/theme-cue/manifest.json` | the same manifest as JSON, for a tool that reads rather than imports |
|
|
84
|
+
| `@cueplusplus/theme-cue/package.json` | |
|
|
85
|
+
|
|
86
|
+
**Both modes.** The manifest is `complete` with `supportsLight: true`, so `theme.css` writes the
|
|
87
|
+
whole colour contract four times over: `[data-theme="cue"]` for dark,
|
|
88
|
+
`[data-theme="cue"][data-mode="light"]` for light, and both again for `[data-mode="system"]` inside
|
|
89
|
+
a `prefers-color-scheme` query.
|
|
90
|
+
|
|
91
|
+
**Fonts: one, the monospace.** The theme block sets its own stack and then hands it to the pairing
|
|
92
|
+
axis:
|
|
93
|
+
|
|
94
|
+
```css
|
|
95
|
+
--cue-font-theme-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
96
|
+
--cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));
|
|
97
|
+
```
|
|
98
|
+
|
|
99
|
+
The second line is the handshake, and it is why the first is safe: a `data-font` pairing stamped on
|
|
100
|
+
an ancestor wins over the theme's stack, which in turn wins over the base's.
|
|
101
|
+
|
|
102
|
+
Sources are `src/cue.{dark,light}.tokens.json`, colour and type only — no geometry token may appear
|
|
103
|
+
in a theme. `theme.css`, `variants.css`, `manifest.json`, `index.js` and `index.d.ts` are written by
|
|
104
|
+
`cue-theme build` and committed; `prepack` runs `cue-theme check`, which rebuilds all five in memory
|
|
105
|
+
and refuses to publish if anything on disk has drifted.
|
|
106
|
+
|
|
107
|
+
`@cueplusplus/tokens` no longer emits any palette: this package is where the `cue` colours live.
|
|
108
|
+
`packages/release/test/theme-packages.test.mjs` holds this directory's `theme.css` against
|
|
109
|
+
`packages/release/test/fixtures/pre-migration/cue.css` — the stylesheet `@cueplusplus/tokens@0.8.0`
|
|
110
|
+
actually shipped — byte for byte after the banner, so "the migration moved no colour" stays a thing
|
|
111
|
+
a gate proves rather than a thing a changelog claims.
|
|
112
|
+
|
|
113
|
+
## Where the rest is
|
|
114
|
+
|
|
115
|
+
- **The theming guide** — <https://ui.cueplusplus.com/docs/theming>. The token vocabulary, the
|
|
116
|
+
density and mode axes, the other nine presets, and `createTheme()` for a palette of your own.
|
|
117
|
+
- **[`docs/CONSUMING.md`][consuming]** — registry access in full, the peer matrix per subpath, and
|
|
118
|
+
the table of what a failed install means.
|
|
119
|
+
- **`CHANGELOG.md`**, in this package — one entry per release, addressed to you rather than to the
|
|
120
|
+
diff, with a **Migrating** section on anything that needs an edit. Read it before an upgrade; the
|
|
121
|
+
version number alone does not say what moved.
|
|
122
|
+
|
|
123
|
+
[consuming]: https://github.com/cueplusplus/cue-ui/blob/main/docs/CONSUMING.md
|
package/index.d.ts
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/** Generated by @cueplusplus/theme-tools. Do not edit by hand. */
|
|
2
|
+
import type { ThemeManifest } from "@cueplusplus/theme-base";
|
|
3
|
+
|
|
4
|
+
export declare const manifest: ThemeManifest;
|
|
5
|
+
export default manifest;
|
|
6
|
+
|
|
7
|
+
declare module "@cueplusplus/theme-base" {
|
|
8
|
+
interface ThemeRegistry { "cue": typeof manifest }
|
|
9
|
+
}
|
package/index.js
ADDED
package/manifest.json
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
{
|
|
2
|
+
"schemaVersion": 1,
|
|
3
|
+
"name": "cue",
|
|
4
|
+
"package": "@cueplusplus/theme-cue",
|
|
5
|
+
"extends": "@cueplusplus/theme-base@^1",
|
|
6
|
+
"mode": "complete",
|
|
7
|
+
"supportsLight": true,
|
|
8
|
+
"colors": {
|
|
9
|
+
"dark": {
|
|
10
|
+
"bg": "#0a0a0a",
|
|
11
|
+
"sunken": "#000000",
|
|
12
|
+
"surface-1": "#121212",
|
|
13
|
+
"surface-2": "#1a1a1a",
|
|
14
|
+
"surface-3": "#242424",
|
|
15
|
+
"fg": "#f5f5f7",
|
|
16
|
+
"fg-muted": "rgba(255,255,255,0.55)",
|
|
17
|
+
"fg-subtle": "rgba(255,255,255,0.35)",
|
|
18
|
+
"border": "rgba(255,255,255,0.10)",
|
|
19
|
+
"border-strong": "rgba(255,255,255,0.25)",
|
|
20
|
+
"border-overlay": "rgba(255,255,255,0.25)",
|
|
21
|
+
"accent": "#ffffff",
|
|
22
|
+
"accent-hover": "rgba(255,255,255,0.85)",
|
|
23
|
+
"accent-fg": "#0a0a0a",
|
|
24
|
+
"ok": "oklch(0.72 0.17 149)",
|
|
25
|
+
"busy": "oklch(0.78 0.13 220)",
|
|
26
|
+
"warn": "oklch(0.8 0.17 75)",
|
|
27
|
+
"warn-fg": "#000000",
|
|
28
|
+
"danger": "#ff5f57",
|
|
29
|
+
"danger-fg": "#000000",
|
|
30
|
+
"info": "oklch(0.75 0.12 252)",
|
|
31
|
+
"stream": "oklch(0.707 0.165 254.624)",
|
|
32
|
+
"selection": "rgba(255,255,255,0.20)",
|
|
33
|
+
"focus": "#ffffff",
|
|
34
|
+
"data-ground": "#000000",
|
|
35
|
+
"scrim": "rgba(0,0,0,0.55)"
|
|
36
|
+
},
|
|
37
|
+
"light": {
|
|
38
|
+
"bg": "#fcfcfc",
|
|
39
|
+
"sunken": "#f0f0f0",
|
|
40
|
+
"surface-1": "#ffffff",
|
|
41
|
+
"surface-2": "#f6f6f6",
|
|
42
|
+
"surface-3": "#ededed",
|
|
43
|
+
"fg": "#0a0a0a",
|
|
44
|
+
"fg-muted": "rgba(0,0,0,0.55)",
|
|
45
|
+
"fg-subtle": "rgba(0,0,0,0.35)",
|
|
46
|
+
"border": "rgba(0,0,0,0.10)",
|
|
47
|
+
"border-strong": "rgba(0,0,0,0.25)",
|
|
48
|
+
"border-overlay": "rgba(0,0,0,0.25)",
|
|
49
|
+
"accent": "#0a0a0a",
|
|
50
|
+
"accent-hover": "rgba(0,0,0,0.85)",
|
|
51
|
+
"accent-fg": "#fcfcfc",
|
|
52
|
+
"ok": "oklch(0.53 0.14 149)",
|
|
53
|
+
"busy": "oklch(0.54 0.1 225)",
|
|
54
|
+
"warn": "oklch(0.55 0.115 70)",
|
|
55
|
+
"warn-fg": "#fcfcfc",
|
|
56
|
+
"danger": "#d03030",
|
|
57
|
+
"danger-fg": "#fcfcfc",
|
|
58
|
+
"info": "oklch(0.55 0.16 258)",
|
|
59
|
+
"stream": "oklch(0.55 0.21 259.815)",
|
|
60
|
+
"selection": "rgba(0,0,0,0.20)",
|
|
61
|
+
"focus": "#0a0a0a",
|
|
62
|
+
"data-ground": "#000000",
|
|
63
|
+
"scrim": "rgba(0,0,0,0.55)"
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
"fonts": {
|
|
67
|
+
"font-mono": "\"JetBrains Mono\", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace"
|
|
68
|
+
},
|
|
69
|
+
"densities": {
|
|
70
|
+
"adds": {},
|
|
71
|
+
"overrides": {}
|
|
72
|
+
},
|
|
73
|
+
"fontPairings": {
|
|
74
|
+
"adds": {},
|
|
75
|
+
"overrides": {}
|
|
76
|
+
},
|
|
77
|
+
"contrast": {
|
|
78
|
+
"passes": true,
|
|
79
|
+
"advisories": 0,
|
|
80
|
+
"waived": 0,
|
|
81
|
+
"digest": "sha256-3f4bbd434814c9d053e36e8434effeaa9ce612c8bb4caa5f5e533a76b0e12994"
|
|
82
|
+
}
|
|
83
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@cueplusplus/theme-cue",
|
|
3
|
+
"version": "1.0.2",
|
|
4
|
+
"description": "The cue theme for @cueplusplus/ui.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"type": "module",
|
|
7
|
+
"keywords": [
|
|
8
|
+
"cue-theme"
|
|
9
|
+
],
|
|
10
|
+
"repository": {
|
|
11
|
+
"type": "git",
|
|
12
|
+
"url": "https://github.com/cueplusplus/cue-ui",
|
|
13
|
+
"directory": "packages/theme-cue"
|
|
14
|
+
},
|
|
15
|
+
"publishConfig": {
|
|
16
|
+
"registry": "https://registry.npmjs.org",
|
|
17
|
+
"access": "public"
|
|
18
|
+
},
|
|
19
|
+
"engines": {
|
|
20
|
+
"node": ">=22"
|
|
21
|
+
},
|
|
22
|
+
"exports": {
|
|
23
|
+
".": {
|
|
24
|
+
"types": "./index.d.ts",
|
|
25
|
+
"default": "./index.js"
|
|
26
|
+
},
|
|
27
|
+
"./theme.css": "./theme.css",
|
|
28
|
+
"./variants.css": "./variants.css",
|
|
29
|
+
"./manifest.json": "./manifest.json",
|
|
30
|
+
"./package.json": "./package.json"
|
|
31
|
+
},
|
|
32
|
+
"files": [
|
|
33
|
+
"index.js",
|
|
34
|
+
"index.d.ts",
|
|
35
|
+
"theme.css",
|
|
36
|
+
"variants.css",
|
|
37
|
+
"manifest.json",
|
|
38
|
+
"src",
|
|
39
|
+
"README.md",
|
|
40
|
+
"CHANGELOG.md"
|
|
41
|
+
],
|
|
42
|
+
"peerDependencies": {
|
|
43
|
+
"@cueplusplus/theme-base": "^1"
|
|
44
|
+
},
|
|
45
|
+
"devDependencies": {
|
|
46
|
+
"eslint": "^9.17.0",
|
|
47
|
+
"publint": "^0.3.23",
|
|
48
|
+
"@cueplusplus/theme-base": "1.0.2",
|
|
49
|
+
"@cueplusplus/theme-tools": "1.0.3",
|
|
50
|
+
"@repo/eslint-config": "0.0.0"
|
|
51
|
+
},
|
|
52
|
+
"scripts": {
|
|
53
|
+
"generate": "node ../theme-tools/dist/cli.mjs build",
|
|
54
|
+
"build": "node ../theme-tools/dist/cli.mjs check",
|
|
55
|
+
"lint": "eslint . --max-warnings 0",
|
|
56
|
+
"check:publish": "publint"
|
|
57
|
+
}
|
|
58
|
+
}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$description": "Theme: cue (default) — the CUE++ brand. Monochrome chrome over a near-black product ramp, white-alpha ink ladder, JetBrains Mono everywhere, and a chromatic status vocabulary. COLOR + TYPE ONLY: no geometry token may appear here.",
|
|
3
|
+
"$extensions": {
|
|
4
|
+
"com.cueplusplus.status-hues": "ok/warn are assistant-ui's own semantic pair (--aui-success, --aui-warning; docs/research/2026-08-22-agent-elements-elements-internals.md \u00a73), stream is its --aui-live blue-400/blue-500 pair verbatim, busy is a console cyan for in-flight and info a calmer blue for news. Light-mode warn sits a step below upstream's oklch(0.68 0.16 70), which measures 2.90:1 on this paper and would fail the 3:1 a signal colour is held to. danger keeps the value it has always had: it was the one tone already chromatic, and it is the one nobody should have to re-learn.",
|
|
5
|
+
"com.cueplusplus.provenance": "The brand these values translate is seeded, with its sources dated and cited, in packages/brand-tokens (see its BRAND.md). Deliberately no build coupling: this file is the product translation of that brand, not a copy of it — most visibly the ramp starts at #0a0a0a rather than the brand's pure #000, because a console UI needs elevation and pure black has nowhere to go. Change a value here on product evidence; change it there on brand evidence."
|
|
6
|
+
},
|
|
7
|
+
"color": {
|
|
8
|
+
"$type": "color",
|
|
9
|
+
"bg": { "$value": "#0a0a0a" },
|
|
10
|
+
"sunken": { "$value": "{primitive.black}" },
|
|
11
|
+
"surface-1": { "$value": "#121212" },
|
|
12
|
+
"surface-2": { "$value": "#1a1a1a" },
|
|
13
|
+
"surface-3": { "$value": "#242424" },
|
|
14
|
+
"fg": { "$value": "#f5f5f7" },
|
|
15
|
+
"fg-muted": { "$value": "{primitive.white-a-55}" },
|
|
16
|
+
"fg-subtle": { "$value": "{primitive.white-a-35}" },
|
|
17
|
+
"border": { "$value": "{primitive.white-a-10}" },
|
|
18
|
+
"border-strong": { "$value": "{primitive.white-a-25}" },
|
|
19
|
+
"border-overlay": { "$value": "{primitive.white-a-25}" },
|
|
20
|
+
"accent": { "$value": "{primitive.white}" },
|
|
21
|
+
"accent-hover": { "$value": "{primitive.white-a-85}" },
|
|
22
|
+
"accent-fg": { "$value": "#0a0a0a" },
|
|
23
|
+
"ok": { "$value": "oklch(0.72 0.17 149)" },
|
|
24
|
+
"busy": { "$value": "oklch(0.78 0.13 220)" },
|
|
25
|
+
"warn": { "$value": "oklch(0.8 0.17 75)" },
|
|
26
|
+
"warn-fg": { "$value": "{primitive.black}" },
|
|
27
|
+
"danger": { "$value": "#ff5f57" },
|
|
28
|
+
"danger-fg": { "$value": "{primitive.black}" },
|
|
29
|
+
"info": { "$value": "oklch(0.75 0.12 252)" },
|
|
30
|
+
"stream": { "$value": "oklch(0.707 0.165 254.624)" },
|
|
31
|
+
"selection": { "$value": "{primitive.white-a-20}" },
|
|
32
|
+
"focus": { "$value": "{primitive.white}" },
|
|
33
|
+
"data-ground": { "$value": "{primitive.black}" },
|
|
34
|
+
"scrim": { "$value": "{primitive.scrim-default}" }
|
|
35
|
+
},
|
|
36
|
+
"type": {
|
|
37
|
+
"font-mono": {
|
|
38
|
+
"$type": "fontFamily",
|
|
39
|
+
"$value": ["JetBrains Mono", "ui-monospace", "SFMono-Regular", "Menlo", "Consolas", "monospace"]
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"$description": "Theme: cue, light mode. The dark ramp inverted — a black-alpha ink ladder mirroring the white-alpha one, near-black accent. Emitted under [data-theme=\"cue\"][data-mode=\"light\"]. COLOR ONLY (font-mono is inherited from the dark block).",
|
|
3
|
+
"$extensions": {
|
|
4
|
+
"com.cueplusplus.provenance": "Brand sources for the cue preset are seeded and dated in packages/brand-tokens (see its BRAND.md). No build coupling — the brand has no light mode at all, so this block is a product invention rather than a transcription."
|
|
5
|
+
},
|
|
6
|
+
"color": {
|
|
7
|
+
"$type": "color",
|
|
8
|
+
"bg": { "$value": "#fcfcfc" },
|
|
9
|
+
"sunken": { "$value": "#f0f0f0" },
|
|
10
|
+
"surface-1": { "$value": "{primitive.white}" },
|
|
11
|
+
"surface-2": { "$value": "#f6f6f6" },
|
|
12
|
+
"surface-3": { "$value": "#ededed" },
|
|
13
|
+
"fg": { "$value": "#0a0a0a" },
|
|
14
|
+
"fg-muted": { "$value": "{primitive.black-a-55}" },
|
|
15
|
+
"fg-subtle": { "$value": "{primitive.black-a-35}" },
|
|
16
|
+
"border": { "$value": "{primitive.black-a-10}" },
|
|
17
|
+
"border-strong": { "$value": "{primitive.black-a-25}" },
|
|
18
|
+
"border-overlay": { "$value": "{primitive.black-a-25}" },
|
|
19
|
+
"accent": { "$value": "#0a0a0a" },
|
|
20
|
+
"accent-hover": { "$value": "{primitive.black-a-85}" },
|
|
21
|
+
"accent-fg": { "$value": "#fcfcfc" },
|
|
22
|
+
"ok": { "$value": "oklch(0.53 0.14 149)" },
|
|
23
|
+
"busy": { "$value": "oklch(0.54 0.1 225)" },
|
|
24
|
+
"warn": { "$value": "oklch(0.55 0.115 70)" },
|
|
25
|
+
"warn-fg": { "$value": "#fcfcfc" },
|
|
26
|
+
"danger": { "$value": "#d03030" },
|
|
27
|
+
"danger-fg": { "$value": "#fcfcfc" },
|
|
28
|
+
"info": { "$value": "oklch(0.55 0.16 258)" },
|
|
29
|
+
"stream": { "$value": "oklch(0.55 0.21 259.815)" },
|
|
30
|
+
"selection": { "$value": "{primitive.black-a-20}" },
|
|
31
|
+
"focus": { "$value": "#0a0a0a" },
|
|
32
|
+
"data-ground": { "$value": "{primitive.black}" },
|
|
33
|
+
"scrim": { "$value": "{primitive.scrim-default}" }
|
|
34
|
+
}
|
|
35
|
+
}
|
package/theme.css
ADDED
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
/*! @cueplusplus/theme-cue — theme "cue"
|
|
2
|
+
* Generated by @cueplusplus/theme-tools from the package's DTCG sources. Do not edit by hand.
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
[data-theme="cue"] {
|
|
6
|
+
color-scheme: dark;
|
|
7
|
+
--cue-bg: #0a0a0a;
|
|
8
|
+
--cue-sunken: #000000;
|
|
9
|
+
--cue-surface-1: #121212;
|
|
10
|
+
--cue-surface-2: #1a1a1a;
|
|
11
|
+
--cue-surface-3: #242424;
|
|
12
|
+
--cue-fg: #f5f5f7;
|
|
13
|
+
--cue-fg-muted: rgba(255,255,255,0.55);
|
|
14
|
+
--cue-fg-subtle: rgba(255,255,255,0.35);
|
|
15
|
+
--cue-border: rgba(255,255,255,0.10);
|
|
16
|
+
--cue-border-strong: rgba(255,255,255,0.25);
|
|
17
|
+
--cue-border-overlay: rgba(255,255,255,0.25);
|
|
18
|
+
--cue-accent: #ffffff;
|
|
19
|
+
--cue-accent-hover: rgba(255,255,255,0.85);
|
|
20
|
+
--cue-accent-fg: #0a0a0a;
|
|
21
|
+
--cue-ok: oklch(0.72 0.17 149);
|
|
22
|
+
--cue-busy: oklch(0.78 0.13 220);
|
|
23
|
+
--cue-warn: oklch(0.8 0.17 75);
|
|
24
|
+
--cue-warn-fg: #000000;
|
|
25
|
+
--cue-danger: #ff5f57;
|
|
26
|
+
--cue-danger-fg: #000000;
|
|
27
|
+
--cue-info: oklch(0.75 0.12 252);
|
|
28
|
+
--cue-stream: oklch(0.707 0.165 254.624);
|
|
29
|
+
--cue-selection: rgba(255,255,255,0.20);
|
|
30
|
+
--cue-focus: #ffffff;
|
|
31
|
+
--cue-data-ground: #000000;
|
|
32
|
+
--cue-scrim: rgba(0,0,0,0.55);
|
|
33
|
+
|
|
34
|
+
/* derived — kept inside the block so color-mix() reads this theme's values */
|
|
35
|
+
--cue-accent-soft: color-mix(in oklch, var(--cue-accent) 14%, transparent);
|
|
36
|
+
--cue-ok-soft: color-mix(in oklch, var(--cue-ok) 12%, transparent);
|
|
37
|
+
--cue-ok-border: color-mix(in oklch, var(--cue-ok) 35%, transparent);
|
|
38
|
+
--cue-busy-soft: color-mix(in oklch, var(--cue-busy) 12%, transparent);
|
|
39
|
+
--cue-busy-border: color-mix(in oklch, var(--cue-busy) 35%, transparent);
|
|
40
|
+
--cue-warn-soft: color-mix(in oklch, var(--cue-warn) 12%, transparent);
|
|
41
|
+
--cue-warn-border: color-mix(in oklch, var(--cue-warn) 35%, transparent);
|
|
42
|
+
--cue-danger-soft: color-mix(in oklch, var(--cue-danger) 12%, transparent);
|
|
43
|
+
--cue-danger-border: color-mix(in oklch, var(--cue-danger) 35%, transparent);
|
|
44
|
+
--cue-info-soft: color-mix(in oklch, var(--cue-info) 12%, transparent);
|
|
45
|
+
--cue-info-border: color-mix(in oklch, var(--cue-info) 35%, transparent);
|
|
46
|
+
--cue-stream-soft: color-mix(in oklch, var(--cue-stream) 12%, transparent);
|
|
47
|
+
--cue-stream-border: color-mix(in oklch, var(--cue-stream) 35%, transparent);
|
|
48
|
+
--cue-hair: color-mix(in oklch, var(--cue-fg) 6%, transparent);
|
|
49
|
+
--cue-hair-strong: color-mix(in oklch, var(--cue-fg) 12%, transparent);
|
|
50
|
+
--cue-row-hover: color-mix(in oklch, var(--cue-fg) 3.5%, transparent);
|
|
51
|
+
|
|
52
|
+
/* font — the theme's override, or the base stack restated */
|
|
53
|
+
--cue-font-theme-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
54
|
+
--cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
[data-theme="cue"][data-mode="light"] {
|
|
58
|
+
color-scheme: light;
|
|
59
|
+
--cue-bg: #fcfcfc;
|
|
60
|
+
--cue-sunken: #f0f0f0;
|
|
61
|
+
--cue-surface-1: #ffffff;
|
|
62
|
+
--cue-surface-2: #f6f6f6;
|
|
63
|
+
--cue-surface-3: #ededed;
|
|
64
|
+
--cue-fg: #0a0a0a;
|
|
65
|
+
--cue-fg-muted: rgba(0,0,0,0.55);
|
|
66
|
+
--cue-fg-subtle: rgba(0,0,0,0.35);
|
|
67
|
+
--cue-border: rgba(0,0,0,0.10);
|
|
68
|
+
--cue-border-strong: rgba(0,0,0,0.25);
|
|
69
|
+
--cue-border-overlay: rgba(0,0,0,0.25);
|
|
70
|
+
--cue-accent: #0a0a0a;
|
|
71
|
+
--cue-accent-hover: rgba(0,0,0,0.85);
|
|
72
|
+
--cue-accent-fg: #fcfcfc;
|
|
73
|
+
--cue-ok: oklch(0.53 0.14 149);
|
|
74
|
+
--cue-busy: oklch(0.54 0.1 225);
|
|
75
|
+
--cue-warn: oklch(0.55 0.115 70);
|
|
76
|
+
--cue-warn-fg: #fcfcfc;
|
|
77
|
+
--cue-danger: #d03030;
|
|
78
|
+
--cue-danger-fg: #fcfcfc;
|
|
79
|
+
--cue-info: oklch(0.55 0.16 258);
|
|
80
|
+
--cue-stream: oklch(0.55 0.21 259.815);
|
|
81
|
+
--cue-selection: rgba(0,0,0,0.20);
|
|
82
|
+
--cue-focus: #0a0a0a;
|
|
83
|
+
--cue-data-ground: #000000;
|
|
84
|
+
--cue-scrim: rgba(0,0,0,0.55);
|
|
85
|
+
|
|
86
|
+
/* derived — kept inside the block so color-mix() reads this theme's values */
|
|
87
|
+
--cue-accent-soft: color-mix(in oklch, var(--cue-accent) 14%, transparent);
|
|
88
|
+
--cue-ok-soft: color-mix(in oklch, var(--cue-ok) 12%, transparent);
|
|
89
|
+
--cue-ok-border: color-mix(in oklch, var(--cue-ok) 35%, transparent);
|
|
90
|
+
--cue-busy-soft: color-mix(in oklch, var(--cue-busy) 12%, transparent);
|
|
91
|
+
--cue-busy-border: color-mix(in oklch, var(--cue-busy) 35%, transparent);
|
|
92
|
+
--cue-warn-soft: color-mix(in oklch, var(--cue-warn) 12%, transparent);
|
|
93
|
+
--cue-warn-border: color-mix(in oklch, var(--cue-warn) 35%, transparent);
|
|
94
|
+
--cue-danger-soft: color-mix(in oklch, var(--cue-danger) 12%, transparent);
|
|
95
|
+
--cue-danger-border: color-mix(in oklch, var(--cue-danger) 35%, transparent);
|
|
96
|
+
--cue-info-soft: color-mix(in oklch, var(--cue-info) 12%, transparent);
|
|
97
|
+
--cue-info-border: color-mix(in oklch, var(--cue-info) 35%, transparent);
|
|
98
|
+
--cue-stream-soft: color-mix(in oklch, var(--cue-stream) 12%, transparent);
|
|
99
|
+
--cue-stream-border: color-mix(in oklch, var(--cue-stream) 35%, transparent);
|
|
100
|
+
--cue-hair: color-mix(in oklch, var(--cue-fg) 6%, transparent);
|
|
101
|
+
--cue-hair-strong: color-mix(in oklch, var(--cue-fg) 12%, transparent);
|
|
102
|
+
--cue-row-hover: color-mix(in oklch, var(--cue-fg) 3.5%, transparent);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@media (prefers-color-scheme: dark) {
|
|
106
|
+
[data-theme="cue"][data-mode="system"] {
|
|
107
|
+
color-scheme: light dark;
|
|
108
|
+
--cue-bg: #0a0a0a;
|
|
109
|
+
--cue-sunken: #000000;
|
|
110
|
+
--cue-surface-1: #121212;
|
|
111
|
+
--cue-surface-2: #1a1a1a;
|
|
112
|
+
--cue-surface-3: #242424;
|
|
113
|
+
--cue-fg: #f5f5f7;
|
|
114
|
+
--cue-fg-muted: rgba(255,255,255,0.55);
|
|
115
|
+
--cue-fg-subtle: rgba(255,255,255,0.35);
|
|
116
|
+
--cue-border: rgba(255,255,255,0.10);
|
|
117
|
+
--cue-border-strong: rgba(255,255,255,0.25);
|
|
118
|
+
--cue-border-overlay: rgba(255,255,255,0.25);
|
|
119
|
+
--cue-accent: #ffffff;
|
|
120
|
+
--cue-accent-hover: rgba(255,255,255,0.85);
|
|
121
|
+
--cue-accent-fg: #0a0a0a;
|
|
122
|
+
--cue-ok: oklch(0.72 0.17 149);
|
|
123
|
+
--cue-busy: oklch(0.78 0.13 220);
|
|
124
|
+
--cue-warn: oklch(0.8 0.17 75);
|
|
125
|
+
--cue-warn-fg: #000000;
|
|
126
|
+
--cue-danger: #ff5f57;
|
|
127
|
+
--cue-danger-fg: #000000;
|
|
128
|
+
--cue-info: oklch(0.75 0.12 252);
|
|
129
|
+
--cue-stream: oklch(0.707 0.165 254.624);
|
|
130
|
+
--cue-selection: rgba(255,255,255,0.20);
|
|
131
|
+
--cue-focus: #ffffff;
|
|
132
|
+
--cue-data-ground: #000000;
|
|
133
|
+
--cue-scrim: rgba(0,0,0,0.55);
|
|
134
|
+
|
|
135
|
+
/* derived — kept inside the block so color-mix() reads this theme's values */
|
|
136
|
+
--cue-accent-soft: color-mix(in oklch, var(--cue-accent) 14%, transparent);
|
|
137
|
+
--cue-ok-soft: color-mix(in oklch, var(--cue-ok) 12%, transparent);
|
|
138
|
+
--cue-ok-border: color-mix(in oklch, var(--cue-ok) 35%, transparent);
|
|
139
|
+
--cue-busy-soft: color-mix(in oklch, var(--cue-busy) 12%, transparent);
|
|
140
|
+
--cue-busy-border: color-mix(in oklch, var(--cue-busy) 35%, transparent);
|
|
141
|
+
--cue-warn-soft: color-mix(in oklch, var(--cue-warn) 12%, transparent);
|
|
142
|
+
--cue-warn-border: color-mix(in oklch, var(--cue-warn) 35%, transparent);
|
|
143
|
+
--cue-danger-soft: color-mix(in oklch, var(--cue-danger) 12%, transparent);
|
|
144
|
+
--cue-danger-border: color-mix(in oklch, var(--cue-danger) 35%, transparent);
|
|
145
|
+
--cue-info-soft: color-mix(in oklch, var(--cue-info) 12%, transparent);
|
|
146
|
+
--cue-info-border: color-mix(in oklch, var(--cue-info) 35%, transparent);
|
|
147
|
+
--cue-stream-soft: color-mix(in oklch, var(--cue-stream) 12%, transparent);
|
|
148
|
+
--cue-stream-border: color-mix(in oklch, var(--cue-stream) 35%, transparent);
|
|
149
|
+
--cue-hair: color-mix(in oklch, var(--cue-fg) 6%, transparent);
|
|
150
|
+
--cue-hair-strong: color-mix(in oklch, var(--cue-fg) 12%, transparent);
|
|
151
|
+
--cue-row-hover: color-mix(in oklch, var(--cue-fg) 3.5%, transparent);
|
|
152
|
+
|
|
153
|
+
/* font — the theme's override, or the base stack restated */
|
|
154
|
+
--cue-font-theme-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
155
|
+
--cue-font-mono: var(--cue-font-pairing-mono, var(--cue-font-theme-mono));
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
@media (prefers-color-scheme: light) {
|
|
160
|
+
[data-theme="cue"][data-mode="system"] {
|
|
161
|
+
color-scheme: light dark;
|
|
162
|
+
--cue-bg: #fcfcfc;
|
|
163
|
+
--cue-sunken: #f0f0f0;
|
|
164
|
+
--cue-surface-1: #ffffff;
|
|
165
|
+
--cue-surface-2: #f6f6f6;
|
|
166
|
+
--cue-surface-3: #ededed;
|
|
167
|
+
--cue-fg: #0a0a0a;
|
|
168
|
+
--cue-fg-muted: rgba(0,0,0,0.55);
|
|
169
|
+
--cue-fg-subtle: rgba(0,0,0,0.35);
|
|
170
|
+
--cue-border: rgba(0,0,0,0.10);
|
|
171
|
+
--cue-border-strong: rgba(0,0,0,0.25);
|
|
172
|
+
--cue-border-overlay: rgba(0,0,0,0.25);
|
|
173
|
+
--cue-accent: #0a0a0a;
|
|
174
|
+
--cue-accent-hover: rgba(0,0,0,0.85);
|
|
175
|
+
--cue-accent-fg: #fcfcfc;
|
|
176
|
+
--cue-ok: oklch(0.53 0.14 149);
|
|
177
|
+
--cue-busy: oklch(0.54 0.1 225);
|
|
178
|
+
--cue-warn: oklch(0.55 0.115 70);
|
|
179
|
+
--cue-warn-fg: #fcfcfc;
|
|
180
|
+
--cue-danger: #d03030;
|
|
181
|
+
--cue-danger-fg: #fcfcfc;
|
|
182
|
+
--cue-info: oklch(0.55 0.16 258);
|
|
183
|
+
--cue-stream: oklch(0.55 0.21 259.815);
|
|
184
|
+
--cue-selection: rgba(0,0,0,0.20);
|
|
185
|
+
--cue-focus: #0a0a0a;
|
|
186
|
+
--cue-data-ground: #000000;
|
|
187
|
+
--cue-scrim: rgba(0,0,0,0.55);
|
|
188
|
+
|
|
189
|
+
/* derived — kept inside the block so color-mix() reads this theme's values */
|
|
190
|
+
--cue-accent-soft: color-mix(in oklch, var(--cue-accent) 14%, transparent);
|
|
191
|
+
--cue-ok-soft: color-mix(in oklch, var(--cue-ok) 12%, transparent);
|
|
192
|
+
--cue-ok-border: color-mix(in oklch, var(--cue-ok) 35%, transparent);
|
|
193
|
+
--cue-busy-soft: color-mix(in oklch, var(--cue-busy) 12%, transparent);
|
|
194
|
+
--cue-busy-border: color-mix(in oklch, var(--cue-busy) 35%, transparent);
|
|
195
|
+
--cue-warn-soft: color-mix(in oklch, var(--cue-warn) 12%, transparent);
|
|
196
|
+
--cue-warn-border: color-mix(in oklch, var(--cue-warn) 35%, transparent);
|
|
197
|
+
--cue-danger-soft: color-mix(in oklch, var(--cue-danger) 12%, transparent);
|
|
198
|
+
--cue-danger-border: color-mix(in oklch, var(--cue-danger) 35%, transparent);
|
|
199
|
+
--cue-info-soft: color-mix(in oklch, var(--cue-info) 12%, transparent);
|
|
200
|
+
--cue-info-border: color-mix(in oklch, var(--cue-info) 35%, transparent);
|
|
201
|
+
--cue-stream-soft: color-mix(in oklch, var(--cue-stream) 12%, transparent);
|
|
202
|
+
--cue-stream-border: color-mix(in oklch, var(--cue-stream) 35%, transparent);
|
|
203
|
+
--cue-hair: color-mix(in oklch, var(--cue-fg) 6%, transparent);
|
|
204
|
+
--cue-hair-strong: color-mix(in oklch, var(--cue-fg) 12%, transparent);
|
|
205
|
+
--cue-row-hover: color-mix(in oklch, var(--cue-fg) 3.5%, transparent);
|
|
206
|
+
}
|
|
207
|
+
}
|
package/variants.css
ADDED
|
File without changes
|