@btravstack/theme 1.0.0 → 1.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.
Files changed (3) hide show
  1. package/dist/style.css +95 -54
  2. package/dist/tokens.css +131 -50
  3. package/package.json +16 -13
package/dist/style.css CHANGED
@@ -1,82 +1,123 @@
1
1
  /*
2
2
  * @btravstack/theme — VitePress style entry.
3
3
  *
4
- * Maps the btravstack design tokens onto VitePress's own `--vp-*` theme
5
- * variables so every btravstack site (this website + the docs sites) shares
6
- * one look. Pulled in automatically by the theme's index.ts; consumers can
7
- * also import it directly as `@btravstack/theme/style.css`.
4
+ * Maps the btravstack design tokens onto VitePress's own `--vp-*` variables so
5
+ * every btravstack site (the website + the docs sites) shares one look.
6
+ * Because the semantic tokens (--bg, --text, --text-accent, …) flip per scheme
7
+ * in tokens.css, this mapping is written once and adapts automatically:
8
+ * - dark → the btravstack plum surfaces, pink links
9
+ * - light → clean warm-white surfaces, brand darkened to deep beetroot
10
+ * (--text-accent) so links/headings pass WCAG-AA on white
8
11
  *
9
- * Theming covers BOTH color schemes, so it's safe to let VitePress follow
10
- * the visitor's OS preference (its default, `appearance: true`):
11
- * - dark → adopts the btravstack surface palette
12
- * - light → keeps VitePress's light surfaces, with the brand darkened to
13
- * the deep beetroot so links/headings pass WCAG-AA on white.
12
+ * The `:root:root` selector raises specificity to (0,2,0) so the mapping wins
13
+ * over VitePress's own `:root` / `.dark` defaults regardless of load order.
14
14
  */
15
15
  @import "./fonts.css";
16
16
  @import "./tokens.css";
17
17
 
18
- /* ── Brand defaults + typography (both schemes) ────────────────── */
19
- /* `:root:root` / `:root.dark` raise specificity to (0,2,0) so these win
20
- over VitePress's own `:root` / `.dark` defaults regardless of the order
21
- the remote @import lands in the cascade. */
22
18
  :root:root {
23
- --vp-c-brand-1: var(--accent);
24
- --vp-c-brand-2: var(--bt-magenta);
25
- --vp-c-brand-3: var(--accent-deep);
26
- --vp-c-brand-soft: rgba(var(--accent-rgb), 0.14);
27
- --vp-c-brand: var(--accent); /* legacy alias */
19
+ /* Surfaces / text / dividers — scheme-aware via the semantic tokens */
20
+ --vp-c-bg: var(--bg);
21
+ --vp-c-bg-alt: var(--card);
22
+ --vp-c-bg-soft: var(--card-soft);
23
+ --vp-c-bg-elv: var(--card);
24
+
25
+ --vp-c-text-1: var(--text);
26
+ --vp-c-text-2: var(--muted);
27
+ --vp-c-text-3: var(--faint);
28
+
29
+ --vp-c-divider: var(--border);
30
+ --vp-c-border: var(--border-2);
31
+ --vp-c-gutter: var(--border);
32
+
33
+ /* Brand — links/active use accent-as-TEXT (darkens on light for AA) */
34
+ --vp-c-brand-1: var(--text-accent);
35
+ --vp-c-brand-2: var(--bt-pink-soft);
36
+ --vp-c-brand-3: var(--accent-deep);
37
+ --vp-c-brand-soft: rgba(var(--accent-rgb), 0.16);
38
+ --vp-c-brand: var(--text-accent); /* legacy alias */
39
+
40
+ /* Inline code — accent-as-text so it stays readable on the (scheme-aware)
41
+ code inset: pink on dark, deep beetroot on the light code wash */
42
+ --vp-code-color: var(--text-accent);
43
+ --vp-code-bg: var(--code-bg);
28
44
 
29
45
  --vp-font-family-base: var(--sans);
30
46
  --vp-font-family-mono: var(--mono);
31
47
 
32
- /* Solid brand buttons — dark ink on the pink fill, readable in both schemes */
33
- --vp-button-brand-bg: var(--accent);
34
- --vp-button-brand-text: var(--accent-contrast);
35
- --vp-button-brand-border: transparent;
36
- --vp-button-brand-hover-bg: var(--bt-magenta);
37
- --vp-button-brand-hover-text: var(--accent-contrast);
48
+ /* Solid brand buttons — dark ink on the pink FILL, readable in both schemes */
49
+ --vp-button-brand-bg: var(--accent);
50
+ --vp-button-brand-text: var(--accent-contrast);
51
+ --vp-button-brand-border: transparent;
52
+ --vp-button-brand-hover-bg: var(--bt-magenta);
53
+ --vp-button-brand-hover-text: var(--accent-contrast);
38
54
  --vp-button-brand-hover-border: transparent;
39
- --vp-button-brand-active-bg: var(--accent-deep);
40
- --vp-button-brand-active-text: var(--bt-cream);
55
+ --vp-button-brand-active-bg: var(--accent-deep);
56
+ --vp-button-brand-active-text: var(--bt-cream);
41
57
  --vp-button-brand-active-border: transparent;
42
58
 
59
+ /* Custom-block (admonition) tints */
60
+ --vp-custom-block-tip-bg: rgba(var(--green-rgb), 0.08);
61
+ --vp-custom-block-tip-border: rgba(var(--green-rgb), 0.30);
62
+ --vp-custom-block-tip-text: var(--text-green);
63
+ --vp-custom-block-warning-bg: rgba(var(--accent-rgb), 0.08);
64
+ --vp-custom-block-warning-border: var(--accent-line);
65
+ --vp-custom-block-warning-text: var(--text-accent);
66
+
43
67
  /* Home hero: gradient name + beetroot glow behind the logo */
44
68
  --vp-home-hero-name-color: transparent;
45
- --vp-home-hero-name-background: linear-gradient(120deg, var(--accent), var(--bt-pink-soft));
69
+ --vp-home-hero-name-background: linear-gradient(120deg, var(--text-accent), var(--bt-pink-soft));
46
70
  --vp-home-hero-image-background-image: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.30), transparent 72%);
47
71
  --vp-home-hero-image-filter: blur(8px);
48
72
  }
49
73
 
50
- /* ── Light scheme: darken the brand so it passes WCAG-AA on white ── */
51
- :root:not(.dark) {
52
- --vp-c-brand-1: var(--accent-deep); /* link / active text — ~7:1 on white */
53
- --vp-c-brand-2: var(--bt-deep-2); /* hover, a touch darker */
54
- --vp-c-brand-3: var(--accent-deep);
55
- --vp-c-brand-soft: rgba(var(--accent-rgb), 0.10);
56
- /* deeper gradient so the hero name reads on a light background */
57
- --vp-home-hero-name-background: linear-gradient(120deg, var(--accent-deep), var(--bt-magenta));
58
- }
74
+ /* ── Playful flourishes shared across every btravstack site ───── */
59
75
 
60
- /* ── Dark scheme: btravstack surfaces (matches the landing page) ── */
61
- :root.dark {
62
- --vp-c-bg: var(--bg);
63
- --vp-c-bg-alt: var(--card);
64
- --vp-c-bg-soft: var(--card-soft);
65
- --vp-c-bg-elv: var(--card);
76
+ /* Home hero: a soft beetroot glow + a gently floating logo */
77
+ .VPHome { position: relative; overflow-x: clip; }
78
+ .VPHome::before {
79
+ content: "";
80
+ position: absolute;
81
+ top: -90px;
82
+ left: 50%;
83
+ transform: translateX(-50%);
84
+ width: 760px;
85
+ max-width: 120vw;
86
+ height: 480px;
87
+ z-index: 0;
88
+ pointer-events: none;
89
+ background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.16), transparent 70%);
90
+ filter: blur(10px);
91
+ }
92
+ :root.dark .VPHome::before {
93
+ background: radial-gradient(closest-side, rgba(var(--accent-rgb), 0.28), transparent 70%);
94
+ }
95
+ .VPHero { position: relative; z-index: 1; }
96
+ .VPHero .image-container { animation: btv-floaty 6s ease-in-out infinite; }
97
+ .VPHero .image-src { filter: drop-shadow(0 18px 40px rgba(142, 26, 82, 0.4)); }
98
+ @keyframes btv-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
66
99
 
67
- --vp-c-text-1: var(--text);
68
- --vp-c-text-2: var(--muted);
69
- --vp-c-text-3: var(--faint);
100
+ /* Feature cards: rounder, with a brand-tinted lift on hover */
101
+ .VPFeature {
102
+ border-radius: var(--radius-xl);
103
+ transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
104
+ }
105
+ .VPFeature:hover {
106
+ transform: translateY(-4px);
107
+ border-color: var(--vp-c-brand-1);
108
+ box-shadow: 0 18px 40px -24px rgba(var(--accent-rgb), 0.5);
109
+ }
110
+ .VPFeature .icon { border-radius: var(--radius) !important; }
70
111
 
71
- --vp-c-divider: var(--border);
72
- --vp-c-border: var(--border-2);
73
- --vp-c-gutter: var(--border);
112
+ /* Brand buttons: springy hover */
113
+ .VPButton.brand { transition: filter 0.15s, transform 0.15s; }
114
+ .VPButton.brand:hover { filter: brightness(1.07); transform: translateY(-1px); }
74
115
 
75
- --vp-c-brand-1: var(--accent); /* pink reads great on dark */
76
- --vp-c-brand-2: var(--bt-pink-soft);
77
- --vp-c-brand-soft: rgba(var(--accent-rgb), 0.16);
116
+ /* Rounder, pinker code */
117
+ .vp-doc :not(pre) > code { border-radius: 7px; }
118
+ .vp-doc div[class*="language-"] { border-radius: var(--radius); }
119
+ .vp-doc .custom-block { border-radius: var(--radius); }
78
120
 
79
- /* Inline + block code */
80
- --vp-code-color: var(--bt-pink-soft);
81
- --vp-code-bg: rgba(0, 0, 0, 0.35);
121
+ @media (prefers-reduced-motion: reduce) {
122
+ .VPHero .image-container { animation: none; }
82
123
  }
package/dist/tokens.css CHANGED
@@ -1,55 +1,102 @@
1
1
  /*
2
2
  * btravstack design tokens — the single source of truth.
3
- * Every surface (this landing page + the VitePress docs sites) derives
4
- * its look from these CSS custom properties. Change a value here, bump
5
- * the version, and every consumer updates.
6
3
  *
7
- * Naming: semantic tokens (--bg, --text, --accent) are what you should
8
- * reference in app code. The raw --bt-* brand palette underneath them is
9
- * the provenance, exposed so adapters (e.g. VitePress) can remap freely.
4
+ * Mirrors the btravstack Design System (tokens/colors.css, themes.css,
5
+ * typography.css, spacing.css). Reference the SEMANTIC tokens (--bg, --text,
6
+ * --accent, --text-accent, --radius, --space-*) in app code; the raw --bt-*
7
+ * palette underneath is the provenance, exposed so adapters (e.g. VitePress)
8
+ * can remap freely.
9
+ *
10
+ * Dark is the canonical default. The light scheme overrides the semantic
11
+ * tokens; it activates on `:root:not(.dark)` (VitePress's appearance system)
12
+ * as well as an explicit `.light` / `[data-theme="light"]`.
13
+ *
14
+ * Fills vs text: keep --accent / --green for FILLS (buttons, glow, washes);
15
+ * use --text-accent / --text-green for COLORED TEXT and icons — light mode
16
+ * darkens those to deep beetroot so links/labels pass WCAG-AA on white.
10
17
  */
11
18
  :root {
12
19
  /* ── Brand palette (raw beetroot) ─────────────────────────────── */
13
- --bt-pink: #E0589A; /* beetroot flesh — primary accent */
14
- --bt-pink-soft: #EE9CC4; /* highlight veins */
15
- --bt-magenta: #CE3D80; /* mid root */
16
- --bt-deep: #8E1A52; /* dark root */
17
- --bt-deep-2: #7A1646; /* root tail */
18
- --bt-leaf: #3DAE62; /* center leaf */
19
- --bt-leaf-dark: #2C8B4E; /* side leaves */
20
- --bt-green: #46B86C; /* "success" green (checks) */
21
- --bt-cream: #F5EFF3; /* near-white text */
22
- --bt-ink: #1a0c14; /* near-black, for text on accent */
23
-
24
- /* ── Surfaces ─────────────────────────────────────────────────── */
25
- --bg: #15101c;
26
- --bg-grad: #1b1326; /* radial hero glow inner stop */
27
- --card: #1d1726;
28
- --card-soft: #241c31;
20
+ --bt-pink: #E0589A; /* beetroot flesh — primary accent */
21
+ --bt-pink-soft: #EE9CC4; /* highlight veins */
22
+ --bt-magenta: #CE3D80; /* mid root */
23
+ --bt-deep: #8E1A52; /* dark root */
24
+ --bt-deep-2: #7A1646; /* root tail */
25
+ --bt-leaf: #3DAE62; /* center leaf */
26
+ --bt-leaf-dark: #2C8B4E; /* side leaves */
27
+ --bt-green: #46B86C; /* "success" green (checks) */
28
+ --bt-cream: #F5EFF3; /* near-white text */
29
+ --bt-ink: #1a0c14; /* near-black, for text on accent */
30
+
31
+ /* ── Surfaces (dark scheme — the canonical btravstack look) ───── */
32
+ --bg: #15101c;
33
+ --bg-grad: #1b1326; /* radial hero glow inner stop */
34
+ --card: #1d1726;
35
+ --card-soft: #241c31;
29
36
 
30
37
  /* ── Borders / dividers ──────────────────────────────────────── */
31
- --border: rgba(255, 255, 255, 0.08);
32
- --border-2: rgba(255, 255, 255, 0.12);
38
+ --border: rgba(255, 255, 255, 0.08);
39
+ --border-2: rgba(255, 255, 255, 0.12);
33
40
 
34
41
  /* ── Text ────────────────────────────────────────────────────── */
35
- --text: #F5EFF3;
36
- --muted: #AEA1BC;
37
- --faint: #7E7290;
38
-
39
- /* ── Accent (semantic alias of the brand pink) ───────────────── */
40
- --accent: #E0589A;
41
- --accent-deep: #8E1A52;
42
- --accent-contrast:#1a0c14; /* readable text on an accent fill */
43
- --accent-rgb: 224, 88, 154; /* for rgba(var(--accent-rgb), .3) */
44
- --green: #46B86C;
45
-
46
- /* ── Typography ──────────────────────────────────────────────── */
42
+ --text: #F5EFF3;
43
+ --muted: #AEA1BC;
44
+ --faint: #7E7290;
45
+
46
+ /* ── Accent (brand FILL) ─────────────────────────────────────── */
47
+ --accent: #E0589A;
48
+ --accent-deep: #8E1A52;
49
+ --accent-contrast: #1a0c14; /* readable text on an accent fill */
50
+ --accent-rgb: 224, 88, 154;
51
+ --green: #46B86C;
52
+ --green-rgb: 70, 184, 108;
53
+
54
+ /* ── Accent-as-TEXT (split from fill; light darkens these for AA) ─ */
55
+ --text-accent: #E0589A;
56
+ --text-green: #46B86C;
57
+
58
+ /* ── Glass (frosted sticky headers) ──────────────────────────── */
59
+ --glass: rgba(21, 16, 28, 0.66);
60
+
61
+ /* ── Accent washes / lines / code inset ──────────────────────── */
62
+ --accent-wash: rgba(224, 88, 154, 0.10);
63
+ --accent-wash-2: rgba(224, 88, 154, 0.16);
64
+ --accent-line: rgba(224, 88, 154, 0.25);
65
+ --code-bg: rgba(0, 0, 0, 0.35); /* inline code inset */
66
+
67
+ /* ── Typography: families ────────────────────────────────────── */
47
68
  --sans: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
48
69
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
49
- --fw-medium: 500;
50
- --fw-semibold: 600;
51
- --fw-bold: 700;
52
- --fw-extrabold:800;
70
+
71
+ /* ── Typography: weights ─────────────────────────────────────── */
72
+ --fw-medium: 500;
73
+ --fw-semibold: 600;
74
+ --fw-bold: 700;
75
+ --fw-extrabold: 800;
76
+
77
+ /* ── Typography: display / heading scale (clamped, fluid) ─────── */
78
+ --fs-hero: clamp(52px, 9vw, 92px);
79
+ --fs-h1: clamp(34px, 6vw, 56px);
80
+ --fs-h2: clamp(28px, 4vw, 40px);
81
+ --fs-h3: 23px;
82
+ --fs-h4: 18px;
83
+
84
+ /* ── Typography: body / UI scale ─────────────────────────────── */
85
+ --fs-lead: clamp(20px, 2.6vw, 26px);
86
+ --fs-body-lg: 17px;
87
+ --fs-body: 15px;
88
+ --fs-body-sm: 14px;
89
+ --fs-caption: 13px;
90
+ --fs-eyebrow: 13px;
91
+
92
+ /* ── Typography: tracking + line heights ─────────────────────── */
93
+ --tracking-hero: -2.5px;
94
+ --tracking-tight: -1px;
95
+ --tracking-snug: -0.5px;
96
+ --tracking-eyebrow: 1.5px;
97
+ --lh-tight: 1.08;
98
+ --lh-snug: 1.3;
99
+ --lh-body: 1.6;
53
100
 
54
101
  /* ── Radii ───────────────────────────────────────────────────── */
55
102
  --radius-sm: 9px;
@@ -60,22 +107,56 @@
60
107
  --radius-pill: 999px;
61
108
 
62
109
  /* ── Spacing scale ───────────────────────────────────────────── */
63
- --space-1: 6px;
64
- --space-2: 9px;
65
- --space-3: 14px;
66
- --space-4: 18px;
67
- --space-5: 22px;
68
- --space-6: 28px;
110
+ --space-1: 6px;
111
+ --space-2: 9px;
112
+ --space-3: 14px;
113
+ --space-4: 18px;
114
+ --space-5: 22px;
115
+ --space-6: 28px;
69
116
 
70
117
  /* ── Shadows ─────────────────────────────────────────────────── */
71
118
  --shadow-card: 0 24px 60px -28px rgba(0, 0, 0, 0.8);
72
119
  --shadow-accent: 0 12px 30px -10px rgba(224, 88, 154, 0.6);
73
120
  --shadow-toast: 0 18px 40px -16px rgba(0, 0, 0, 0.8);
74
121
 
75
- /* ── Layout ──────────────────────────────────────────────────── */
76
- --container: 1180px;
77
-
78
- /* ── Motion ──────────────────────────────────────────────────── */
122
+ /* ── Layout & motion ─────────────────────────────────────────── */
123
+ --container: 1180px;
79
124
  --speed-fast: 0.15s;
80
125
  --speed: 0.2s;
126
+ --ease: ease;
127
+ }
128
+
129
+ /*
130
+ * Light scheme — warm, faintly beetroot-tinted near-whites. Only the semantic
131
+ * tokens flip; the raw --bt-* palette is unchanged. Brand FILLS stay vibrant
132
+ * pink (dark ink on top); accent-as-TEXT darkens to deep beetroot for AA.
133
+ */
134
+ :root:not(.dark),
135
+ [data-theme="light"],
136
+ .light {
137
+ --bg: #FBF7F9;
138
+ --bg-grad: #FCEDF4;
139
+ --card: #FFFFFF;
140
+ --card-soft: #F6EDF2;
141
+
142
+ --border: rgba(26, 12, 20, 0.10);
143
+ --border-2: rgba(26, 12, 20, 0.17);
144
+
145
+ --text: #1F0E18;
146
+ --muted: #6A5965;
147
+ --faint: #978996;
148
+
149
+ --accent: #E0589A; /* fill unchanged (dark ink on top) */
150
+ --text-accent: #A52260; /* ~5.6:1 on white — links, eyebrows, wordmark */
151
+ --text-green: #15683A; /* ~5.2:1 on white — affirmative text */
152
+
153
+ --accent-wash: rgba(224, 88, 154, 0.12);
154
+ --accent-wash-2: rgba(224, 88, 154, 0.16);
155
+ --accent-line: rgba(142, 26, 82, 0.22);
156
+ --glass: rgba(255, 255, 255, 0.72);
157
+ --code-bg: #F4EAF0;
158
+
159
+ --shadow-card: 0 18px 44px -26px rgba(142, 26, 82, 0.30);
160
+ --shadow-accent: 0 12px 26px -10px rgba(224, 88, 154, 0.45);
161
+ --shadow-toast: 0 18px 40px -16px rgba(40, 16, 30, 0.18);
81
162
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@btravstack/theme",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Shared VitePress theme and design tokens for btravstack sites",
5
5
  "license": "MIT",
6
6
  "author": "Benoit TRAVERS",
@@ -11,7 +11,9 @@
11
11
  "url": "git+https://github.com/btravstack/btravstack.github.io.git",
12
12
  "directory": "packages/theme"
13
13
  },
14
- "files": ["dist"],
14
+ "files": [
15
+ "dist"
16
+ ],
15
17
  "exports": {
16
18
  ".": {
17
19
  "types": "./dist/index.d.mts",
@@ -20,22 +22,23 @@
20
22
  "./style.css": "./dist/style.css",
21
23
  "./tokens.css": "./dist/tokens.css"
22
24
  },
23
- "sideEffects": ["**/*.css"],
25
+ "sideEffects": [
26
+ "**/*.css"
27
+ ],
24
28
  "publishConfig": {
25
29
  "access": "public"
26
30
  },
27
- "scripts": {
28
- "build": "tsdown && cp src/*.css dist/",
29
- "dev": "tsdown --watch",
30
- "prepack": "pnpm run build"
31
- },
32
31
  "peerDependencies": {
33
32
  "vitepress": "^1.6.0"
34
33
  },
35
34
  "devDependencies": {
36
- "@types/node": "catalog:",
37
- "tsdown": "catalog:",
38
- "typescript": "catalog:",
39
- "vitepress": "catalog:"
35
+ "@types/node": "24.13.2",
36
+ "tsdown": "0.22.3",
37
+ "typescript": "6.0.3",
38
+ "vitepress": "1.6.4"
39
+ },
40
+ "scripts": {
41
+ "build": "tsdown && cp src/*.css dist/",
42
+ "dev": "tsdown --watch"
40
43
  }
41
- }
44
+ }