cosmos-docusaurus-theme 1.0.0 → 1.0.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.
Files changed (4) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/README.md +40 -33
  3. package/package.json +1 -1
  4. package/src/css/theme.css +50 -49
package/CHANGELOG.md CHANGED
@@ -7,6 +7,15 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
7
7
 
8
8
  ---
9
9
 
10
+ ## [1.0.1] — 2026-03-09
11
+
12
+ ### Fixed
13
+
14
+ - Aligned dark palette to **Void** (Tailwind gray-950/900/800 neutral blacks — not TailAdmin bluish-gray)
15
+ - Aligned light palette to **Slate** (warm brown text tones `#1a1714` / `#5c574f` — not cold blue-gray)
16
+ - Corrected all hardcoded color values in sidebar, navbar border, footer border, scrollbar
17
+ - Updated screenshots to reflect corrected palette
18
+
10
19
  ## [1.0.0] — 2024-03-09
11
20
 
12
21
  ### Added
package/README.md CHANGED
@@ -1,27 +1,44 @@
1
1
  # cosmos-docusaurus-theme
2
2
 
3
- [![npm version](https://img.shields.io/npm/v/cosmos-docusaurus-theme.svg)](https://www.npmjs.com/package/cosmos-docusaurus-theme)
4
- [![npm downloads](https://img.shields.io/npm/dm/cosmos-docusaurus-theme.svg)](https://www.npmjs.com/package/cosmos-docusaurus-theme)
3
+ <div align="center">
4
+
5
+ **A clean, dark-first Docusaurus theme based on [TailAdmin](https://tailadmin.com) design system.**
6
+
7
+ [![npm version](https://img.shields.io/npm/v/cosmos-docusaurus-theme.svg?style=flat-square)](https://www.npmjs.com/package/cosmos-docusaurus-theme)
8
+ [![npm downloads](https://img.shields.io/npm/dm/cosmos-docusaurus-theme.svg?style=flat-square)](https://www.npmjs.com/package/cosmos-docusaurus-theme)
5
9
  [![CI](https://github.com/SckyzO/cosmos-docusaurus-theme/actions/workflows/ci.yml/badge.svg)](https://github.com/SckyzO/cosmos-docusaurus-theme/actions/workflows/ci.yml)
6
- [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
10
+ [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](LICENSE)
11
+ [![Docusaurus](https://img.shields.io/badge/Docusaurus-3.x-green?style=flat-square)](https://docusaurus.io)
7
12
 
8
- A clean, dark-first Docusaurus theme based on the [TailAdmin](https://tailadmin.com) design system.
13
+ ### [Live Demo](https://sckyzo.github.io/cosmos-docusaurus-theme/) &nbsp;·&nbsp; [Release notes](https://github.com/SckyzO/cosmos-docusaurus-theme/releases) &nbsp;·&nbsp; [npm](https://www.npmjs.com/package/cosmos-docusaurus-theme)
14
+
15
+ </div>
16
+
17
+ ---
18
+
19
+ ## Features
9
20
 
10
21
  - **CSS-only** — no swizzled components, no JavaScript
11
22
  - **Dark mode first-class** (default), full light mode support
12
- - **Outfit** + **JetBrains Mono** typography
23
+ - **[Outfit](https://fonts.google.com/specimen/Outfit)** + **JetBrains Mono** typography
13
24
  - **Indigo** brand palette (`#465fff`) mapped to Infima variables
25
+ - Styled navbar, sidebar, code blocks, admonitions, tables, pagination, footer, scrollbar
26
+ - Optional utility classes for API reference and status docs
14
27
  - Compatible with **Docusaurus 3+**
15
28
 
16
- **[Live Demo](https://sckyzo.github.io/cosmos-docusaurus-theme)**
17
-
18
29
  ---
19
30
 
20
31
  ## Screenshots
21
32
 
22
- > Light and dark mode — navbar, sidebar, code blocks, admonitions
33
+ > Dark mode (default) — navbar, sidebar, code blocks, admonitions
23
34
 
24
- <!-- Screenshots are added after the first gh-pages deployment -->
35
+ ![Dark mode screenshot](https://raw.githubusercontent.com/SckyzO/cosmos-docusaurus-theme/main/docs/screenshots/dark.png)
36
+
37
+ > Light mode
38
+
39
+ ![Light mode screenshot](https://raw.githubusercontent.com/SckyzO/cosmos-docusaurus-theme/main/docs/screenshots/light.png)
40
+
41
+ > See the full theme live at **[sckyzo.github.io/cosmos-docusaurus-theme](https://sckyzo.github.io/cosmos-docusaurus-theme/)**
25
42
 
26
43
  ---
27
44
 
@@ -33,7 +50,7 @@ npm install cosmos-docusaurus-theme
33
50
 
34
51
  ## Usage
35
52
 
36
- Register it as a Docusaurus theme plugin in `docusaurus.config.js`:
53
+ Register as a Docusaurus theme plugin in `docusaurus.config.js`:
37
54
 
38
55
  ```js title="docusaurus.config.js"
39
56
  export default {
@@ -48,12 +65,10 @@ export default {
48
65
  };
49
66
  ```
50
67
 
51
- The CSS is injected automatically. No `customCss` entry needed.
68
+ The CSS is injected automatically via `getClientModules()`. No `customCss` entry needed.
52
69
 
53
70
  ### Alternative — direct CSS import
54
71
 
55
- If you prefer to control injection manually:
56
-
57
72
  ```js title="docusaurus.config.js"
58
73
  export default {
59
74
  presets: [
@@ -70,7 +85,7 @@ export default {
70
85
 
71
86
  ## Customization
72
87
 
73
- Override any Infima variable after the theme import:
88
+ Override any Infima variable in your own `custom.css` after the theme is loaded:
74
89
 
75
90
  ```css title="src/css/custom.css"
76
91
  /* Change brand color */
@@ -88,31 +103,23 @@ Override any Infima variable after the theme import:
88
103
  :root {
89
104
  --ifm-font-family-base: 'Inter', system-ui, sans-serif;
90
105
  }
91
-
92
- /* Adjust sidebar width */
93
- :root {
94
- --ifm-sidebar-width: 320px;
95
- --doc-sidebar-width: 320px;
96
- }
97
106
  ```
98
107
 
99
108
  ---
100
109
 
101
110
  ## Utility classes
102
111
 
103
- The theme ships optional utility classes for API and operational docs:
104
-
105
- | Class | Usage |
106
- |------------------|----------------------------------------|
107
- | `.method-get` | HTTP GET label (green, monospace) |
108
- | `.method-post` | HTTP POST label (blue, monospace) |
109
- | `.method-put` | HTTP PUT label (orange, monospace) |
110
- | `.method-delete` | HTTP DELETE label (red, monospace) |
111
- | `.method-patch` | HTTP PATCH label (purple, monospace) |
112
- | `.status-ok` | OK state (green, bold) |
113
- | `.status-warn` | WARN state (orange, bold) |
114
- | `.status-crit` | CRIT state (red, bold) |
115
- | `.status-unknown`| UNKNOWN state (gray, bold) |
112
+ | Class | Usage |
113
+ |------------------|-------------------------------------|
114
+ | `.method-get` | HTTP GET label (green, monospace) |
115
+ | `.method-post` | HTTP POST label (blue, monospace) |
116
+ | `.method-put` | HTTP PUT label (orange, monospace) |
117
+ | `.method-delete` | HTTP DELETE label (red, monospace) |
118
+ | `.method-patch` | HTTP PATCH label (purple, monospace)|
119
+ | `.status-ok` | OK state (green, bold) |
120
+ | `.status-warn` | WARN state (orange, bold) |
121
+ | `.status-crit` | CRIT state (red, bold) |
122
+ | `.status-unknown`| UNKNOWN state (gray, bold) |
116
123
 
117
124
  ---
118
125
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cosmos-docusaurus-theme",
3
- "version": "1.0.0",
3
+ "version": "1.0.1",
4
4
  "description": "A clean, dark-first Docusaurus CSS theme based on TailAdmin design system with Outfit typography",
5
5
  "keywords": [
6
6
  "docusaurus",
package/src/css/theme.css CHANGED
@@ -1,12 +1,13 @@
1
1
  /**
2
2
  * Cosmos Docusaurus Theme
3
3
  *
4
- * A clean, dark-first Docusaurus CSS theme based on the TailAdmin design system.
5
- * Colors, typography, shadows and spacing extracted from TailAdmin's design tokens.
6
- * Mapped to Docusaurus Infima CSS variables for seamless integration.
4
+ * A clean, dark-first Docusaurus CSS theme.
5
+ * Palette aligned with the Rackscope design system:
6
+ * - Dark → "Void" : Tailwind gray-950/900/800 neutral blacks
7
+ * - Light → "Slate" : Tailwind gray-50/white with warm brown text tones
7
8
  *
8
9
  * Brand: #465fff (indigo)
9
- * Font: Outfit (same as TailAdmin) + JetBrains Mono for code
10
+ * Font: Outfit + JetBrains Mono for code
10
11
  *
11
12
  * Usage:
12
13
  * In docusaurus.config.js → theme.customCss:
@@ -41,19 +42,19 @@
41
42
  --ifm-h2-font-size: 1.6rem;
42
43
  --ifm-h3-font-size: 1.25rem;
43
44
 
44
- /* Background — TailAdmin gray-50 / white */
45
+ /* Background — Slate: Tailwind gray-50 / white */
45
46
  --ifm-background-color: #f9fafb; /* gray-50 */
46
- --ifm-background-surface-color: #fff; /* white */
47
+ --ifm-background-surface-color: #fff; /* white */
47
48
 
48
- /* Text — TailAdmin gray-900 / gray-500 */
49
- --ifm-font-color-base: #101828; /* gray-900 */
50
- --ifm-font-color-secondary: #667085; /* gray-500 */
49
+ /* Text — Slate: warm brown tones (not cold blue-gray) */
50
+ --ifm-font-color-base: #1a1714; /* warm near-black */
51
+ --ifm-font-color-secondary: #5c574f; /* warm muted brown */
51
52
 
52
- /* Navbar — 72px height to match TailAdmin header proportions */
53
+ /* Navbar — 72px height */
53
54
  --ifm-navbar-height: 72px;
54
55
  --ifm-navbar-background-color: #fff;
55
56
  --ifm-navbar-shadow: 0px 1px 3px 0px rgb(16,24,40,0.10), 0px 1px 2px 0px rgb(16,24,40,0.06);
56
- --ifm-navbar-link-color: #344054; /* gray-700 */
57
+ --ifm-navbar-link-color: #2c2822; /* warm dark text */
57
58
  --ifm-navbar-link-hover-color: #465fff; /* brand-500 */
58
59
  --ifm-navbar-link-active-color: #465fff;
59
60
 
@@ -61,24 +62,24 @@
61
62
  --ifm-sidebar-width: 280px;
62
63
  --doc-sidebar-width: 280px;
63
64
  --ifm-sidebar-padding: 16px;
64
- --docusaurus-collapse-button-bg-hover-color: #f2f4f7; /* gray-100 */
65
+ --docusaurus-collapse-button-bg-hover-color: #f3f4f6; /* gray-100 */
65
66
 
66
67
  /* Links */
67
68
  --ifm-link-color: #465fff;
68
69
  --ifm-link-hover-color: #3641f5;
69
70
 
70
- /* Borders — TailAdmin gray-200 */
71
- --ifm-toc-border-color: #e4e7ec;
72
- --ifm-hr-border-color: #e4e7ec;
73
- --ifm-color-emphasis-300: #e4e7ec;
74
- --ifm-color-emphasis-600: #667085;
71
+ /* Borders — Slate: Tailwind gray-200 */
72
+ --ifm-toc-border-color: #e5e7eb;
73
+ --ifm-hr-border-color: #e5e7eb;
74
+ --ifm-color-emphasis-300: #e5e7eb;
75
+ --ifm-color-emphasis-600: #5c574f;
75
76
 
76
77
  /* Code blocks */
77
- --ifm-code-background: #f2f4f7; /* gray-100 */
78
- --prism-background-color:#1d2939; /* gray-800 — TailAdmin dark surface */
78
+ --ifm-code-background: #f3f4f6; /* Tailwind gray-100 */
79
+ --prism-background-color:#1f2937; /* Void gray-800 — dark code on light pages */
79
80
  --docusaurus-highlighted-code-line-bg: rgb(70, 95, 255, 0.1);
80
81
 
81
- /* Shadows — from TailAdmin elevation tokens */
82
+ /* Shadows */
82
83
  --ifm-global-shadow-md: 0px 4px 8px -2px rgb(16,24,40,0.10), 0px 2px 4px -2px rgb(16,24,40,0.06);
83
84
  --ifm-global-shadow-lw: 0px 1px 2px 0px rgb(16,24,40,0.05);
84
85
 
@@ -87,7 +88,7 @@
87
88
  --ifm-menu-link-padding-vertical: 8px;
88
89
 
89
90
  /* Table */
90
- --ifm-table-border-color: #e4e7ec;
91
+ --ifm-table-border-color: #e5e7eb;
91
92
  --ifm-table-head-background: #f9fafb;
92
93
  }
93
94
 
@@ -103,36 +104,36 @@
103
104
  --ifm-color-primary-lightest:#dde9ff; /* brand-100 */
104
105
  --docusaurus-highlighted-code-line-bg: rgb(117, 146, 255, 0.15);
105
106
 
106
- /* Background — TailAdmin dark surfaces */
107
- --ifm-background-color: #0f1117; /* deeper than gray-dark for body */
108
- --ifm-background-surface-color: #1a2231; /* gray-dark — card/sidebar surfaces */
109
- --ifm-navbar-background-color: #1a2231;
110
- --ifm-footer-background-color: #0c111d; /* gray-950 */
107
+ /* Background — Void: Tailwind gray-950 / gray-900 neutral blacks */
108
+ --ifm-background-color: #030712; /* gray-950 — deepest background */
109
+ --ifm-background-surface-color: #111827; /* gray-900 — cards, sidebar, panels */
110
+ --ifm-navbar-background-color: #111827; /* gray-900 */
111
+ --ifm-footer-background-color: #030712; /* gray-950 */
111
112
 
112
- /* Text */
113
- --ifm-font-color-base: #e4e7ec; /* light body text */
114
- --ifm-font-color-secondary: #98a2b3; /* muted / secondary text */
113
+ /* Text — neutral grays, no blue tint */
114
+ --ifm-font-color-base: #e5e5e5; /* neutral light */
115
+ --ifm-font-color-secondary: #a3a3a3; /* neutral muted */
115
116
 
116
- /* Borders — TailAdmin gray-700 */
117
- --ifm-toc-border-color: #344054;
118
- --ifm-hr-border-color: #344054;
119
- --ifm-color-emphasis-300: #344054;
120
- --ifm-color-emphasis-600: #98a2b3;
121
- --ifm-table-border-color: #344054;
122
- --ifm-table-head-background: #1d2939;
117
+ /* Borders — Void: Tailwind gray-800 */
118
+ --ifm-toc-border-color: #1f2937;
119
+ --ifm-hr-border-color: #1f2937;
120
+ --ifm-color-emphasis-300: #1f2937;
121
+ --ifm-color-emphasis-600: #a3a3a3;
122
+ --ifm-table-border-color: #1f2937;
123
+ --ifm-table-head-background: #111827;
123
124
 
124
125
  /* Links */
125
126
  --ifm-link-color: #7592ff;
126
127
  --ifm-link-hover-color: #9cb9ff;
127
128
 
128
129
  /* Navbar */
129
- --ifm-navbar-link-color: #d0d5dd; /* gray-300 */
130
+ --ifm-navbar-link-color: #e5e5e5;
130
131
  --ifm-navbar-link-hover-color: #7592ff;
131
132
  --ifm-navbar-link-active-color:#7592ff;
132
- --ifm-navbar-shadow: 0px 1px 0px 0px #344054;
133
+ --ifm-navbar-shadow: 0px 1px 0px 0px #1f2937;
133
134
 
134
135
  /* Code */
135
- --ifm-code-background: #1d2939;
136
+ --ifm-code-background: #1f2937; /* gray-800 */
136
137
 
137
138
  /* Sidebar collapse button */
138
139
  --docusaurus-collapse-button-bg-hover-color: rgb(255,255,255,0.05);
@@ -176,7 +177,7 @@ html {
176
177
  }
177
178
 
178
179
  [data-theme='dark'] .navbar {
179
- border-bottom-color: #344054;
180
+ border-bottom-color: #1f2937; /* Void gray-800 */
180
181
  }
181
182
 
182
183
  /* ── Sidebar ─────────────────────────────────────────────────────────────── */
@@ -185,8 +186,8 @@ html {
185
186
  }
186
187
 
187
188
  [data-theme='dark'] .theme-doc-sidebar-container {
188
- border-right-color: #344054 !important;
189
- background: #1a2231;
189
+ border-right-color: #1f2937 !important; /* Void gray-800 */
190
+ background: #111827; /* Void gray-900 */
190
191
  }
191
192
 
192
193
  .theme-doc-sidebar-menu {
@@ -222,20 +223,20 @@ html {
222
223
  }
223
224
 
224
225
  .menu__list-item-collapsible:hover {
225
- background: #f2f4f7; /* gray-100 */
226
+ background: #f3f4f6; /* Slate gray-100 */
226
227
  }
227
228
 
228
229
  [data-theme='dark'] .menu__list-item-collapsible:hover {
229
230
  background: rgb(255,255,255,0.05);
230
231
  }
231
232
 
232
- /* Sidebar section separator — uppercase label style from TailAdmin */
233
+ /* Sidebar section separator — uppercase label */
233
234
  .sidebar_menu_section_title {
234
235
  font-size: 0.6875rem;
235
236
  font-weight: 700;
236
237
  letter-spacing: 0.08em;
237
238
  text-transform: uppercase;
238
- color: #98a2b3; /* gray-400 */
239
+ color: #a3a3a3; /* neutral gray-400 */
239
240
  padding: 12px 12px 4px;
240
241
  }
241
242
 
@@ -346,7 +347,7 @@ code {
346
347
  }
347
348
 
348
349
  [data-theme='dark'] .footer {
349
- border-top-color: #344054;
350
+ border-top-color: #1f2937; /* Void gray-800 */
350
351
  }
351
352
 
352
353
  /* ── Pagination nav ───────────────────────────────────────────────────────── */
@@ -377,11 +378,11 @@ code {
377
378
  }
378
379
 
379
380
  ::-webkit-scrollbar-thumb:hover {
380
- background: #98a2b3;
381
+ background: #a3a3a3; /* neutral gray-400 */
381
382
  }
382
383
 
383
384
  [data-theme='dark'] ::-webkit-scrollbar-thumb {
384
- background: #344054;
385
+ background: #374151; /* Void gray-700 */
385
386
  }
386
387
 
387
388
  [data-theme='dark'] ::-webkit-scrollbar-thumb:hover {
@@ -442,6 +443,6 @@ code {
442
443
  }
443
444
 
444
445
  .status-unknown {
445
- color: #667085;
446
+ color: #6b7280; /* neutral gray-500 */
446
447
  font-weight: 600;
447
448
  }