@tempoxyz/ds 0.1.1 → 0.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tempoxyz/ds",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "license": "MIT",
   "files": [
     "DESIGN.md",

package/src/web/components/AppShell.tsx

@@ -391,21 +391,6 @@ namespace styles {
     { id: 'tds/web/app-shell/header' },
   )
 
-  export const inline = style(
-    {
-      borderInlineEndColor: 'grayAlpha.200',
-      borderInlineEndStyle: 'solid',
-      borderInlineEndWidth: '1px !custom',
-      height: '100dvh !custom',
-      insetBlockStart: '0 !custom',
-      overflowY: 'auto',
-      position: 'sticky',
-      width: 'var(--sidebar-width, 16.25rem) !custom',
-      '@media (max-width: 1023px)': { display: 'none !custom' },
-    },
-    { id: 'tds/web/app-shell/inline' },
-  )
-
   export const main = variants(
     {
       base: {
@@ -475,6 +460,23 @@ namespace styles {
     { id: 'tds/web/app-shell/sidebar' },
   )
 
+  // Follows `sidebar`, so its compact `display: none` overrides the sidebar's `display: flex` in
+  // server-rendered markup, which always emits the wide layout.
+  export const inline = style(
+    {
+      borderInlineEndColor: 'grayAlpha.200',
+      borderInlineEndStyle: 'solid',
+      borderInlineEndWidth: '1px !custom',
+      height: '100dvh !custom',
+      insetBlockStart: '0 !custom',
+      overflowY: 'auto',
+      position: 'sticky',
+      width: 'var(--sidebar-width, 16.25rem) !custom',
+      '@media (max-width: 1023px)': { display: 'none !custom' },
+    },
+    { id: 'tds/web/app-shell/inline' },
+  )
+
   export const sidebarBody = variants(
     {
       base: {

package/src/web/components/Callout.tsx

@@ -181,11 +181,13 @@ namespace styles {
       ],
       defaultVariants: { intent: 'info', shape: 'default', size: 'medium' },
       variants: {
+        // Light mode takes step 300, since step 100 nearly matches the page background. Dark mode
+        // keeps step 100, which already stands apart from the page while keeping the text legible.
         intent: {
-          info: { backgroundColor: 'blue.100', color: 'blue.900' },
-          negative: { backgroundColor: 'red.100', color: 'red.900' },
-          positive: { backgroundColor: 'green.100', color: 'green.900' },
-          warning: { backgroundColor: 'amber.100', color: 'amber.900' },
+          info: { backgroundColor: 'light-dark(#e6eefe, #161b29) !custom', color: 'blue.900' },
+          negative: { backgroundColor: 'light-dark(#ffe6e0, #2a1410) !custom', color: 'red.900' },
+          positive: { backgroundColor: 'light-dark(#d3f8df, #052315) !custom', color: 'green.900' },
+          warning: { backgroundColor: 'light-dark(#ffede2, #2d1504) !custom', color: 'amber.900' },
         },
         shape: {
           default: {},