@scalio-cloud/ui 0.1.2 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.2.0
+- Dark mode colours from Scalio Rosetta: sidebar and other `bg-muted` areas are now darker than the page
+  (before: lighter grey), primary blue in dark mode `223 100% 45%` (before: brighter `223 85% 62%`), card,
+  border and input slightly adjusted. Light mode unchanged.
+
 ## 0.1.2
 - Published via npm trusted publishing (GitHub Actions OIDC), no npm token. Content unchanged.
 

package/README.md

@@ -48,9 +48,11 @@ see `fonts/licenses/`.
 ## Release
 
 1. Change the files, add a line to `CHANGELOG.md`, bump `version` in `package.json` (semver; tag without `v`).
-2. Merge to `main`, then create the tag (e.g. `0.1.1`, GitHub Releases or `git push origin <tag>`). The `publish`
+2. Merge to `main`, then release it: in the Scalio Dev cockpit (row Scalio UI, "Freigeben" with the version) or
+   in GitHub (Actions -> publish -> Run workflow on main, or create the tag/release yourself). The `publish`
    workflow tests and publishes that version to npmjs.com via trusted publishing (no token; npm org
-   `scalio-cloud`, trusted publisher Scalio-Cloud / scalio-ui / publish.yml).
+   `scalio-cloud`, trusted publisher Scalio-Cloud / scalio-ui / publish.yml) and, when started by hand or from
+   the cockpit, creates the tag and GitHub release with the CHANGELOG lines.
 3. Apps update with `yarn upgrade @scalio-cloud/ui@<version>` in their own PR.
 
 `npm test` checks: light/dark variables match, the preset only uses defined variables, all font files exist,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalio-cloud/ui",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "Scalio Control Room design tokens, Tailwind preset and self-hosted fonts",
   "license": "SEE LICENSE IN README.md",
   "private": false,

package/tokens.css

@@ -35,24 +35,25 @@
 }
 
 .dark {
-  --background: 240 6% 7%;
+  /* Dark mode from Scalio Rosetta (decision 2026-10-25): sidebar/muted darker than the page. */
+  --background: 240 6% 8%;
   --foreground: 0 0% 98%;
-  --card: 240 5% 11%;
+  --card: 240 6% 13%;
   --card-foreground: 0 0% 98%;
-  --popover: 240 6% 10%;
+  --popover: 240 6% 13%;
   --popover-foreground: 0 0% 98%;
-  --primary: 223 85% 62%;
+  --primary: 223 100% 45%;
   --primary-foreground: 0 0% 100%;
   --secondary: 240 4% 16%;
   --secondary-foreground: 0 0% 98%;
-  --muted: 240 4% 16%;
-  --muted-foreground: 240 5% 65%;
-  --accent: 240 4% 18%;
+  --muted: 240 7% 6%;
+  --muted-foreground: 240 5% 70%;
+  --accent: 240 4% 16%;
   --accent-foreground: 0 0% 98%;
-  --destructive: 0 62% 50%;
+  --destructive: 0 84% 60%;
   --destructive-foreground: 0 0% 100%;
-  --border: 240 4% 20%;
-  --input: 240 4% 22%;
-  --ring: 223 85% 62%;
+  --border: 240 6% 18%;
+  --input: 240 6% 24%;
+  --ring: 223 100% 55%;
   color-scheme: dark;
 }