@carissa-io/theme-default 0.3.13 → 0.3.14

package/DESIGN.md

@@ -270,6 +270,16 @@ The close button is a plain "x" in `--c-muted`, `--c-text` on hover, with the us
 components, and it is the same in both modes (it dims whatever mode the page is in). The box fades in and rises 0.5rem in `$transition-duration`; with reduced motion it
 just appears.
 
+**Scroll edges (Modal and Drawer).** The body scrolls between the header and the footer, so a long body used to be cut flush against the title and the buttons with nothing
+to show where the scroll area ends. The theme draws that edge: a **1px `--c-disabled-border` line** under the header and over the footer (the footer line exists only
+when there is a footer), plus a fixed 0.5rem gap between each line and the header or footer content (the components' default, left as it is). The line is the quiet
+neutral border, not `--c-muted` (the Divider's 5.74:1 line would compete with the content and with the box border): on `--c-background` it is **1.48:1 in light**
+(`#d4d4d4` on `#fff`) and **1.91:1 in dark** (`#404040` on `#0a0a0a`). It is a decorative separator (the scroll position and the content are exposed by the scrollable region
+itself), so the 3:1 non-text minimum does not apply; the test only requires it to be distinguishable from the background (above 1.1:1) and records the two ratios,
+in the same spirit as the Progress track (a faint guide, 1.3:1). It is a custom property, so dark mode needs no extra rule. The unscrolled layout is the same as before:
+the header keeps 1.25rem above and 0.5rem below its content, and the body keeps the remaining 0.75rem (1.25rem less the 0.5rem gap) on each side, so the distance
+between the title and the content is still 1.25rem, now with the line inside it; a body without a header or without a footer keeps the whole 1.25rem on that side.
+
 ## Toast
 From [components-toast](components/components-toast): the fixed region of toasts (24rem wide, 1rem from the edges, 0.75rem between toasts, above the page content) and its six
 placements. The look of each toast is the Alert's (see above), so its colors, roles and contrast are the Alert's in both modes. The action is a bold, underlined
@@ -359,6 +369,7 @@ and `--c-text` for the current page (`aria-current="page"`). The content collaps
 From [components-drawer](components/components-drawer): `Drawer`, the Modal's box as a panel on an edge of the screen (`start`, `end`, `top`, `bottom`; `sm` 20rem, `md` 28rem, `lg` 40rem). It is `--c-background` with `--c-text` (17.93:1 / 18.16:1), a 1px `--c-muted` border
 (the edge that still reads in dark), square, with the Modal's layered shadow and the same padding (1.5rem by 1.25rem) and close button (`--c-muted`, `--c-text` on hover). The **backdrop** is `rgb(0 0 0 / 0.5)` in both modes, with the shadow the only literal color of the block.
 The panel slides in over `$transition-duration`; with reduced motion it just appears.
+The header and footer lines and the 0.5rem gaps are the Modal's (see [Modal](#modal), scroll edges): 1px `--c-disabled-border`, 1.48:1 light and 1.91:1 dark on `--c-background`.
 
 ## Menu
 From [components-menu](components/components-menu): `Menu`, `MenuItem`, `MenuSeparator` and `MenuLabel`. The panel is the Popover's (`--c-background`, a 1px `--c-muted` border, flat). Items are `--c-text` with 0.625rem of block and 0.75rem of side padding, and hover and keyboard focus share a `--c-surface-active`

package/dist/index.css

@@ -1651,7 +1651,8 @@
   gap: 1rem;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 1.25rem 1.5rem 0;
+  padding: 1.25rem 1.5rem 0.5rem;
+  border-bottom: 1px solid var(--c-disabled-border);
 }
 
 .c-modal__heading {
@@ -1692,9 +1693,17 @@
 .c-modal__body {
   flex: 1 1 auto;
   min-height: 0;
-  padding: 1.25rem 1.5rem;
+  padding-inline: 1.5rem;
+  padding-top: max(0px, 1.25rem - 0.5rem);
+  padding-bottom: max(0px, 1.25rem - 0.5rem);
   overflow-y: auto;
 }
+.c-modal__body:first-child {
+  padding-top: 1.25rem;
+}
+.c-modal__body:last-child {
+  padding-bottom: 1.25rem;
+}
 
 .c-modal__footer {
   display: flex;
@@ -1702,7 +1711,8 @@
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: flex-end;
-  padding: 0 1.5rem 1.25rem;
+  padding: 0.5rem 1.5rem 1.25rem;
+  border-top: 1px solid var(--c-disabled-border);
 }
 
 @keyframes c-toast-enter {
@@ -3563,7 +3573,8 @@ hr.c-divider {
   gap: 1rem;
   align-items: flex-start;
   justify-content: space-between;
-  padding: 1.25rem 1.5rem 0;
+  padding: 1.25rem 1.5rem 0.5rem;
+  border-bottom: 1px solid var(--c-disabled-border);
 }
 
 .c-drawer__heading {
@@ -3604,9 +3615,17 @@ hr.c-divider {
 .c-drawer__body {
   flex: 1 1 auto;
   min-height: 0;
-  padding: 1.25rem 1.5rem;
+  padding-inline: 1.5rem;
+  padding-top: max(0px, 1.25rem - 0.5rem);
+  padding-bottom: max(0px, 1.25rem - 0.5rem);
   overflow-y: auto;
 }
+.c-drawer__body:first-child {
+  padding-top: 1.25rem;
+}
+.c-drawer__body:last-child {
+  padding-bottom: 1.25rem;
+}
 
 .c-drawer__footer {
   display: flex;
@@ -3614,7 +3633,8 @@ hr.c-divider {
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: flex-end;
-  padding: 0 1.5rem 1.25rem;
+  padding: 0.5rem 1.5rem 1.25rem;
+  border-top: 1px solid var(--c-disabled-border);
 }
 
 .c-menu {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.13",
+  "version": "0.3.14",
   "description": "Carissa UI: the default theme (Swiss minimalism) as SCSS variable overrides of the Carissa components, with a compiled CSS build",
   "type": "module",
   "style": "dist/index.css",
@@ -56,7 +56,7 @@
     "@carissa-io/components-card": "^0.1.0",
     "@carissa-io/components-alert": "^0.1.0",
     "@carissa-io/components-spinner": "^0.1.0",
-    "@carissa-io/components-modal": "^0.1.0",
+    "@carissa-io/components-modal": "^0.1.2",
     "@carissa-io/components-toast": "^0.1.0",
     "@carissa-io/components-divider": "^0.1.0",
     "@carissa-io/components-badge": "^0.1.0",
@@ -74,7 +74,7 @@
     "@carissa-io/components-stepper": "^0.1.0",
     "@carissa-io/components-sidebar": "^0.1.0",
     "@carissa-io/components-navbar": "^0.1.0",
-    "@carissa-io/components-drawer": "^0.1.0",
+    "@carissa-io/components-drawer": "^0.1.2",
     "@carissa-io/components-menu": "^0.1.0",
     "@carissa-io/components-table": "^0.1.0",
     "@carissa-io/components-list": "^0.1.0",
@@ -324,7 +324,7 @@
     "@carissa-io/components-date-range": "^0.1.0",
     "@carissa-io/components-description-list": "^0.1.0",
     "@carissa-io/components-divider": "^0.1.0",
-    "@carissa-io/components-drawer": "^0.1.0",
+    "@carissa-io/components-drawer": "^0.1.2",
     "@carissa-io/components-empty-state": "^0.1.0",
     "@carissa-io/components-faq": "^0.1.0",
     "@carissa-io/components-field": "^0.1.0",
@@ -335,7 +335,7 @@
     "@carissa-io/components-listbox": "^0.1.1",
     "@carissa-io/components-live-region": "^0.1.0",
     "@carissa-io/components-menu": "^0.1.0",
-    "@carissa-io/components-modal": "^0.1.0",
+    "@carissa-io/components-modal": "^0.1.2",
     "@carissa-io/components-navbar": "^0.1.0",
     "@carissa-io/components-number-input": "^0.1.0",
     "@carissa-io/components-otp-input": "^0.1.0",

package/scss/index.scss

@@ -655,7 +655,8 @@
 // Modal: a box on the page background with a 1px muted border (the edge that still reads in dark, where a shadow is almost
 // invisible), the theme radius, and the same 1.5rem / 1.25rem padding as Card. The backdrop is the one literal color: black
 // at 50%, the same in both modes. Its index forwards the typography styles, already loaded and configured above, so this
-// block goes after the Typography one (and after Card, which forwards it too).
+// block goes after the Typography one (and after Card, which forwards it too). The scroll edges: a 1px --c-disabled-border line
+// under the header and over the footer (the clip edge of the scrolling body), with the component's default 0.5rem gaps.
 @use '@carissa-io/components-modal/scss' as modal with (
     $c-modal-background: $var-background,
     $c-modal-color: $var-text,
@@ -666,6 +667,10 @@
     $c-modal-padding-x: 1.5rem,
     $c-modal-padding-y: 1.25rem,
     $c-modal-gap: 1rem,
+    $c-modal-header-divider-width: 1px,
+    $c-modal-header-divider-color: $var-disabled-border,
+    $c-modal-footer-divider-width: 1px,
+    $c-modal-footer-divider-color: $var-disabled-border,
     $c-modal-margin: 1rem,
     $c-modal-width-sm: 24rem,
     $c-modal-width-md: 32rem,
@@ -1141,7 +1146,7 @@
 // Drawer: the Modal's box as a panel on the edge: --c-background with --c-text, a 1px --c-muted border (the edge that still
 // reads in dark), the same padding and the same close button. The backdrop is the one literal color, black at 50% in both
 // modes, and so is the shadow. Its index forwards the typography styles, already loaded and configured above: this block
-// goes after the Typography one.
+// goes after the Typography one. The scroll edges are the Modal's: 1px --c-disabled-border lines, default 0.5rem gaps.
 @use '@carissa-io/components-drawer/scss' as drawer with (
     $c-drawer-background: $var-background,
     $c-drawer-color: $var-text,
@@ -1152,6 +1157,10 @@
     $c-drawer-padding-x: 1.5rem,
     $c-drawer-padding-y: 1.25rem,
     $c-drawer-gap: 1rem,
+    $c-drawer-header-divider-width: 1px,
+    $c-drawer-header-divider-color: $var-disabled-border,
+    $c-drawer-footer-divider-width: 1px,
+    $c-drawer-footer-divider-color: $var-disabled-border,
     $c-drawer-size-sm: 20rem,
     $c-drawer-size-md: 28rem,
     $c-drawer-size-lg: 40rem,