@olympusoss/canvas 3.1.0 → 3.2.1

package/README.md

@@ -25,9 +25,13 @@ Or import selectively:
 @import "@olympusoss/canvas/styles/tokens/colors.css";
 @import "@olympusoss/canvas/styles/tokens/typography.css";
 @import "@olympusoss/canvas/styles/base.css";
-@import "@olympusoss/canvas/styles/components/button.css";
+@import "@olympusoss/canvas/styles/atoms/button.css";
 ```
 
+Component CSS is organized by atomic-design level: `styles/atoms/`,
+`styles/molecules/`, `styles/organisms/`. (Importing the all-in-one
+`styles/canvas.css` pulls in everything and is unaffected by this layout.)
+
 Use component classes in your HTML:
 
 ```html

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olympusoss/canvas",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "type": "module",
   "description": "CSS-first design system for the Olympus platform",
   "main": "./src/index.ts",
@@ -29,6 +29,7 @@
     "check-duplicates": "bun scripts/check-duplicates.ts",
     "check-contrast": "bun scripts/check-contrast.ts",
     "screenshots": "bun scripts/capture-screenshots.ts",
+    "verify-docs": "bun scripts/verify-docs.ts",
     "changeset": "changeset",
     "version-packages": "changeset version",
     "release": "changeset publish",

package/styles/{components → atoms}/combobox.css

@@ -62,8 +62,9 @@
   }
 
   .combobox-item.selected {
-    background-color: hsl(var(--accent));
-    color: hsl(var(--accent-foreground));
+    background-color: hsl(var(--primary) / 0.16);
+    color: hsl(var(--primary));
+    font-weight: 500;
   }
 
   .combobox-empty {

package/styles/canvas.css

@@ -16,51 +16,51 @@
 @import "./base.css";
 
 /* Components */
-@import "./components/typography.css";
-@import "./components/button.css";
-@import "./components/input.css";
-@import "./components/card.css";
-@import "./components/badge.css";
-@import "./components/separator.css";
-@import "./components/icon.css";
-@import "./components/avatar.css";
-@import "./components/kbd.css";
-@import "./components/code-block.css";
-@import "./components/sidebar.css";
-@import "./components/topbar.css";
-@import "./components/app-shell.css";
-@import "./components/stat-card.css";
-@import "./components/section-card.css";
-@import "./components/data-table.css";
-@import "./components/field.css";
-@import "./components/page-header.css";
-@import "./components/empty-state.css";
-@import "./components/row-menu.css";
-@import "./components/tooltip.css";
-@import "./components/skeleton.css";
-@import "./components/spinner.css";
-@import "./components/checkbox.css";
-@import "./components/radio.css";
-@import "./components/switch.css";
-@import "./components/select.css";
-@import "./components/textarea.css";
-@import "./components/combobox.css";
-@import "./components/alert.css";
-@import "./components/toast.css";
-@import "./components/dialog.css";
-@import "./components/sheet.css";
-@import "./components/popover.css";
-@import "./components/dropdown.css";
-@import "./components/breadcrumb.css";
-@import "./components/pagination.css";
-@import "./components/tabs.css";
-@import "./components/button-group.css";
-@import "./components/form.css";
-@import "./components/input-group.css";
-@import "./components/command.css";
-@import "./components/stepper.css";
-@import "./components/calendar.css";
-@import "./components/filter-panel.css";
+@import "./atoms/typography.css";
+@import "./atoms/button.css";
+@import "./atoms/input.css";
+@import "./molecules/card.css";
+@import "./atoms/badge.css";
+@import "./atoms/separator.css";
+@import "./atoms/icon.css";
+@import "./atoms/avatar.css";
+@import "./atoms/kbd.css";
+@import "./molecules/code-block.css";
+@import "./organisms/sidebar.css";
+@import "./organisms/topbar.css";
+@import "./organisms/app-shell.css";
+@import "./molecules/stat-card.css";
+@import "./molecules/section-card.css";
+@import "./organisms/data-table.css";
+@import "./molecules/field.css";
+@import "./molecules/page-header.css";
+@import "./molecules/empty-state.css";
+@import "./organisms/row-menu.css";
+@import "./atoms/tooltip.css";
+@import "./atoms/skeleton.css";
+@import "./atoms/spinner.css";
+@import "./atoms/checkbox.css";
+@import "./atoms/radio.css";
+@import "./atoms/switch.css";
+@import "./atoms/select.css";
+@import "./atoms/textarea.css";
+@import "./atoms/combobox.css";
+@import "./molecules/alert.css";
+@import "./molecules/toast.css";
+@import "./organisms/dialog.css";
+@import "./organisms/sheet.css";
+@import "./atoms/popover.css";
+@import "./atoms/dropdown.css";
+@import "./atoms/breadcrumb.css";
+@import "./atoms/pagination.css";
+@import "./organisms/tabs.css";
+@import "./atoms/button-group.css";
+@import "./molecules/form.css";
+@import "./atoms/input-group.css";
+@import "./organisms/command.css";
+@import "./organisms/stepper.css";
+@import "./organisms/calendar.css";
+@import "./organisms/filter-panel.css";
 
 /* Patterns */
 @import "./patterns/backdrops.css";

package/styles/{components → organisms}/command.css

@@ -69,7 +69,8 @@
   }
 
   .command-item.selected {
-    background-color: hsl(var(--accent));
+    background-color: hsl(var(--primary) / 0.16);
+    color: hsl(var(--primary));
   }
 
   .command-sep {

package/styles/{components → organisms}/sidebar.css

@@ -130,9 +130,9 @@
   }
 
   .sidebar-item.active {
-    background-color: hsl(var(--sidebar-accent));
+    background-color: hsl(var(--sidebar-primary) / 0.16);
     opacity: 1;
-    color: hsl(var(--sidebar-accent-foreground));
+    color: hsl(var(--sidebar-primary));
   }
 
   .sidebar.collapsed .sidebar-item {

package/styles/tokens/colors.css

@@ -67,17 +67,19 @@
     --popover-foreground: 0 0% 98%;
     --primary: 240 79.4% 60%;
     --primary-foreground: 0 0% 100%;
-    --secondary: 240 3.7% 15.9%;
+    --secondary: 240 3.7% 20%;
     --secondary-foreground: 0 0% 98%;
-    --muted: 240 3.7% 15.9%;
+    --muted: 240 3.7% 20%;
     --muted-foreground: 240 5% 64.9%;
-    --accent: 240 3.7% 15.9%;
+    --accent: 240 3.7% 20%;
     --accent-foreground: 0 0% 98%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 100%;
-    --border: 240 3.7% 15.9%;
-    --input: 240 3.7% 15.9%;
-    --ring: 240 79.4% 60%;
+    --border: 240 3.7% 22%;
+    --input: 240 3.7% 22%;
+    /* Lighter than the light-theme ring so the focus indicator keeps >=3:1
+       contrast against dark surfaces (cards, menus, accent rows). */
+    --ring: 240 80% 70%;
 
     --chart-1: 220 70% 50%;
     --chart-2: 160 60% 45%;
@@ -89,9 +91,9 @@
     --sidebar-foreground: 240 4.8% 95.9%;
     --sidebar-primary: 240 79.4% 60%;
     --sidebar-primary-foreground: 0 0% 100%;
-    --sidebar-accent: 240 3.7% 15.9%;
+    --sidebar-accent: 240 3.7% 24%;
     --sidebar-accent-foreground: 240 4.8% 95.9%;
-    --sidebar-border: 240 3.7% 15.9%;
+    --sidebar-border: 240 3.7% 24%;
     --sidebar-ring: 217.2 91.2% 59.8%;
 
     --success-bg: 149 50% 22%;