@carissa-io/theme-default 0.3.2 → 0.3.4

package/DESIGN.md

@@ -248,11 +248,32 @@ from the custom properties, so the card works in both modes.
   is almost invisible on the dark ground, the border keeps the edge in dark mode.
 
 ## Alert
-From [components-alert](components/components-alert): `Alert` in `info`, `success`, `warning` and `error`. A `--c-surface` box with a 1px `--c-muted` border
+From [components-alert](components/components-alert): `Alert` in `info`, `success`, `warning` and `error`. A box **tinted with the variant color** (12% of `--c-info`, `--c-success`, `--c-warning` or `--c-error` mixed over `--c-background` with `color-mix`, so it follows the mode) with a 1px border at 35% of the same color
 and a **4px accent on the left edge** in the variant color (`--c-info`, `--c-success`, `--c-warning`, `--c-error`); the icon, when given, has the same color.
-The text and the title are `--c-text` (the status colors are not used for text: see the contrast notes in [Dark mode](#dark-mode)). The title is bold, the text
+The text and the title are `--c-text`, 14.8:1 or more on every tint in both modes; the accent and the icon are at least 3.8:1 on the tint (the status colors are not used for text: see the contrast notes in [Dark mode](#dark-mode)). The title is bold, the text
 0.875rem, square corners. The dismiss button is a plain "x" in `--c-muted`, `--c-text` on hover, with the usual focus ring.
 
+## Spinner
+From [components-spinner](components/components-spinner): `Spinner` in three sizes (`sm` 1rem, `md` 1.5rem, `lg` 2.5rem). A 2px ring in `--c-surface-active` with a
+`--c-primary` arc (black in light, white in dark), one turn every 0.75s, drawn with CSS only. The label is visually hidden text. With
+`prefers-reduced-motion` the turn is replaced by a slow opacity pulse (2s) of the whole ring in `--c-primary`. The arc is 21:1 (light) and
+19.8:1 (dark) on the page background and 16.7:1 and 15.1:1 on its track, far above the 3:1 needed for a graphic; the track is a faint guide (1.3:1) on purpose.
+
+## Modal
+From [components-modal](components/components-modal): `Modal`, a native `<dialog>` in three widths (`sm` 24rem, `md` 32rem, `lg` 48rem, never wider than the viewport
+minus 1rem). The box is `--c-background` with `--c-text`, a **1px `--c-muted` border**, `$radius` (square) and a layered shadow (`0 4px 8px` at 8% and `0 16px 48px` at 20% of
+black). As with the elevated Card the border stays on purpose: a shadow is almost invisible on the dark ground, the border keeps the edge in dark mode. Padding is
+1.5rem at the sides and 1.25rem above and below, like Card. The title is the Typography `Heading` (level 4 size) and the description the small muted `Text`.
+The close button is a plain "x" in `--c-muted`, `--c-text` on hover, with the usual focus ring. The **backdrop** is `rgb(0 0 0 / 0.5)`, the one literal color of these
+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.
+
+## 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
+0.875rem button in `--c-text` (14.8:1 or more on every tint). A toast slides 0.75rem from its edge and fades in over `$transition-duration`; with reduced motion
+only the fade stays. The region is in the page, not in the browser's top layer, so a toast shown while a modal is open sits behind the modal's backdrop.
+
 ## Keyboard focus (all controls)
 One rule keeps the controls coherent: **an outlined control thickens its own border from 1px to 2px, black** (text fields,
 select, combobox, date picker, textarea, upload, empty checkbox, off switch, radio, secondary and ghost buttons); **a filled

package/README.md

@@ -142,7 +142,7 @@ it: check the names against the theme's `scss/_tokens.scss` before you switch.
 
 ## What it configures
 `components-input`, `-button`, `-checkbox`, `-switch`, `-radio-group`, `-slider`, `-popover`, `-listbox`, `-select`,
-`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card` and `-alert`. `components-email`, `-password`, `-url` and `-textarea`
+`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card`, `-alert`, `-spinner`, `-modal` and `-toast`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
 ## Change a value

package/dist/index.css

@@ -1449,8 +1449,8 @@
 
 .c-alert--info {
   color: var(--c-text);
-  background: var(--c-surface);
-  border-color: var(--c-muted);
+  background: color-mix(in srgb, var(--c-info) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-info) 35%, var(--c-background));
   border-left-color: var(--c-info);
 }
 .c-alert--info .c-alert__icon {
@@ -1462,8 +1462,8 @@
 
 .c-alert--success {
   color: var(--c-text);
-  background: var(--c-surface);
-  border-color: var(--c-muted);
+  background: color-mix(in srgb, var(--c-success) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-success) 35%, var(--c-background));
   border-left-color: var(--c-success);
 }
 .c-alert--success .c-alert__icon {
@@ -1475,8 +1475,8 @@
 
 .c-alert--warning {
   color: var(--c-text);
-  background: var(--c-surface);
-  border-color: var(--c-muted);
+  background: color-mix(in srgb, var(--c-warning) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-warning) 35%, var(--c-background));
   border-left-color: var(--c-warning);
 }
 .c-alert--warning .c-alert__icon {
@@ -1488,8 +1488,8 @@
 
 .c-alert--error {
   color: var(--c-text);
-  background: var(--c-surface);
-  border-color: var(--c-muted);
+  background: color-mix(in srgb, var(--c-error) 12%, var(--c-background));
+  border-color: color-mix(in srgb, var(--c-error) 35%, var(--c-background));
   border-left-color: var(--c-error);
 }
 .c-alert--error .c-alert__icon {
@@ -1498,3 +1498,291 @@
 .c-alert--error .c-alert__title {
   color: var(--c-text);
 }
+
+@keyframes c-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes c-spinner-pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+.c-spinner {
+  --c-spinner-size: 1.5rem;
+  box-sizing: border-box;
+  display: inline-block;
+  flex: none;
+  width: var(--c-spinner-size);
+  height: var(--c-spinner-size);
+  vertical-align: middle;
+  border: 2px solid var(--c-surface-active);
+  border-top-color: var(--c-primary);
+  border-radius: 50%;
+  animation: c-spinner-rotate 0.75s linear infinite;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-spinner {
+    border-color: var(--c-primary);
+    animation: c-spinner-pulse 2s ease-in-out infinite;
+  }
+}
+
+.c-spinner--sm {
+  --c-spinner-size: 1rem;
+}
+
+.c-spinner--md {
+  --c-spinner-size: 1.5rem;
+}
+
+.c-spinner--lg {
+  --c-spinner-size: 2.5rem;
+}
+
+.c-spinner__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.c-modal-lock {
+  overflow: hidden;
+}
+
+.c-modal {
+  box-sizing: border-box;
+  width: 32rem;
+  max-width: calc(100vw - 2 * 1rem);
+  max-height: calc(100dvh - 2rem);
+  padding: 0;
+  color: var(--c-text);
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08), 0 16px 48px rgba(0, 0, 0, 0.2);
+  opacity: 0;
+  transition: opacity 0.2s ease-out, transform 0.2s ease-out, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
+  transform: translateY(0.5rem);
+}
+.c-modal[open] {
+  display: flex;
+  flex-direction: column;
+  opacity: 1;
+  transform: none;
+}
+@starting-style {
+  .c-modal[open] {
+    opacity: 0;
+    transform: translateY(0.5rem);
+  }
+}
+.c-modal::backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 0;
+  transition: opacity 0.2s ease-out, overlay 0.2s allow-discrete, display 0.2s allow-discrete;
+}
+.c-modal[open]::backdrop {
+  opacity: 1;
+}
+@starting-style {
+  .c-modal[open]::backdrop {
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-modal {
+    transform: none;
+    transition: none;
+  }
+  @starting-style {
+    .c-modal[open] {
+      transform: none;
+    }
+  }
+  .c-modal::backdrop {
+    transition: none;
+  }
+}
+
+.c-modal--sm {
+  width: 24rem;
+}
+
+.c-modal--md {
+  width: 32rem;
+}
+
+.c-modal--lg {
+  width: 48rem;
+}
+
+.c-modal__header {
+  display: flex;
+  flex: none;
+  gap: 1rem;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem 0;
+}
+
+.c-modal__heading {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.c-modal__title {
+  margin: 0;
+}
+
+.c-modal__description {
+  margin: 0.25rem 0 0;
+}
+
+.c-modal__close {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-left: auto;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: var(--c-muted);
+  cursor: pointer;
+  background: none;
+  border: 0;
+}
+.c-modal__close:hover {
+  color: var(--c-text);
+}
+.c-modal__close:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.c-modal__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: 1.25rem 1.5rem;
+  overflow-y: auto;
+}
+
+.c-modal__footer {
+  display: flex;
+  flex: none;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: flex-end;
+  padding: 0 1.5rem 1.25rem;
+}
+
+@keyframes c-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--c-toast-enter-shift));
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+@keyframes c-toast-fade {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+.c-toast-region {
+  position: fixed;
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  width: 24rem;
+  max-width: calc(100vw - 2 * 1rem);
+  pointer-events: none;
+}
+
+.c-toast-region--top-left,
+.c-toast-region--top-center,
+.c-toast-region--top-right {
+  top: 1rem;
+}
+
+.c-toast-region--bottom-left,
+.c-toast-region--bottom-center,
+.c-toast-region--bottom-right {
+  bottom: 1rem;
+}
+
+.c-toast-region--top-left,
+.c-toast-region--bottom-left {
+  left: 1rem;
+}
+
+.c-toast-region--top-right,
+.c-toast-region--bottom-right {
+  right: 1rem;
+}
+
+.c-toast-region--top-center,
+.c-toast-region--bottom-center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.c-toast-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.c-toast {
+  --c-toast-enter-shift: 0.75rem;
+  pointer-events: auto;
+  animation: c-toast-enter 0.2s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .c-toast {
+    animation-name: c-toast-fade;
+  }
+}
+
+.c-toast-region--top-left .c-toast,
+.c-toast-region--top-center .c-toast,
+.c-toast-region--top-right .c-toast {
+  --c-toast-enter-shift: -0.75rem;
+}
+
+.c-toast__action {
+  display: block;
+  padding: 0;
+  margin-top: 0.5rem;
+  font: inherit;
+  font-size: 0.875rem;
+  font-weight: 700;
+  color: var(--c-text);
+  text-decoration: underline;
+  cursor: pointer;
+  background: none;
+  border: 0;
+}
+.c-toast__action:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "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",
@@ -54,7 +54,10 @@
     "@carissa-io/components-search": "^0.1.1",
     "@carissa-io/components-typography": "^0.1.0",
     "@carissa-io/components-card": "^0.1.0",
-    "@carissa-io/components-alert": "^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-toast": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -119,6 +122,15 @@
     },
     "@carissa-io/components-alert": {
       "optional": true
+    },
+    "@carissa-io/components-spinner": {
+      "optional": true
+    },
+    "@carissa-io/components-modal": {
+      "optional": true
+    },
+    "@carissa-io/components-toast": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -131,12 +143,15 @@
     "@carissa-io/components-date-picker": "^0.1.1",
     "@carissa-io/components-input": "^0.2.1",
     "@carissa-io/components-listbox": "^0.1.1",
+    "@carissa-io/components-modal": "^0.1.0",
     "@carissa-io/components-popover": "^0.1.1",
     "@carissa-io/components-radio-group": "^0.1.1",
     "@carissa-io/components-search": "^0.1.1",
     "@carissa-io/components-select": "^0.1.1",
     "@carissa-io/components-slider": "^0.1.1",
+    "@carissa-io/components-spinner": "^0.1.0",
     "@carissa-io/components-switch": "^0.1.1",
+    "@carissa-io/components-toast": "^0.1.0",
     "@carissa-io/components-typography": "^0.1.0",
     "@carissa-io/components-upload": "^0.1.1",
     "sass-embedded": "^1.105.1",

package/scss/index.scss

@@ -599,34 +599,89 @@
     $c-alert-dismiss-color-hover: $var-text,
 
     // Info
-    $c-alert-info-background: $var-surface,
-    $c-alert-info-border-color: $var-muted,
+    $c-alert-info-background: color-mix(in srgb, $var-info 12%, $var-background),
+    $c-alert-info-border-color: color-mix(in srgb, $var-info 35%, $var-background),
     $c-alert-info-accent-color: $var-info,
     $c-alert-info-color: $var-text,
     $c-alert-info-icon-color: $var-info,
     $c-alert-info-title-color: $var-text,
 
     // Success
-    $c-alert-success-background: $var-surface,
-    $c-alert-success-border-color: $var-muted,
+    $c-alert-success-background: color-mix(in srgb, $var-success 12%, $var-background),
+    $c-alert-success-border-color: color-mix(in srgb, $var-success 35%, $var-background),
     $c-alert-success-accent-color: $var-success,
     $c-alert-success-color: $var-text,
     $c-alert-success-icon-color: $var-success,
     $c-alert-success-title-color: $var-text,
 
     // Warning
-    $c-alert-warning-background: $var-surface,
-    $c-alert-warning-border-color: $var-muted,
+    $c-alert-warning-background: color-mix(in srgb, $var-warning 12%, $var-background),
+    $c-alert-warning-border-color: color-mix(in srgb, $var-warning 35%, $var-background),
     $c-alert-warning-accent-color: $var-warning,
     $c-alert-warning-color: $var-text,
     $c-alert-warning-icon-color: $var-warning,
     $c-alert-warning-title-color: $var-text,
 
     // Error
-    $c-alert-error-background: $var-surface,
-    $c-alert-error-border-color: $var-muted,
+    $c-alert-error-background: color-mix(in srgb, $var-error 12%, $var-background),
+    $c-alert-error-border-color: color-mix(in srgb, $var-error 35%, $var-background),
     $c-alert-error-accent-color: $var-error,
     $c-alert-error-color: $var-text,
     $c-alert-error-icon-color: $var-error,
     $c-alert-error-title-color: $var-text
 );
+
+// Spinner: a thin ring in the surface-active gray with a primary arc (black in light, white in dark), turning at 0.75s per
+// turn; with reduced motion the package swaps the turn for a slow pulse. Colors only through the custom properties.
+@use '@carissa-io/components-spinner/scss' as spinner with (
+    $c-spinner-size-sm: 1rem,
+    $c-spinner-size-md: 1.5rem,
+    $c-spinner-size-lg: 2.5rem,
+    $c-spinner-thickness: 2px,
+    $c-spinner-color: $var-primary,
+    $c-spinner-track-color: $var-surface-active,
+    $c-spinner-duration: 0.75s,
+    $c-spinner-duration-reduced: 2s
+);
+
+// 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).
+@use '@carissa-io/components-modal/scss' as modal with (
+    $c-modal-background: $var-background,
+    $c-modal-color: $var-text,
+    $c-modal-border-width: 1px,
+    $c-modal-border-color: $var-muted,
+    $c-modal-radius: $radius,
+    $c-modal-shadow: (0 4px 8px rgb(0 0 0 / 0.08), 0 16px 48px rgb(0 0 0 / 0.2)),
+    $c-modal-padding-x: 1.5rem,
+    $c-modal-padding-y: 1.25rem,
+    $c-modal-gap: 1rem,
+    $c-modal-margin: 1rem,
+    $c-modal-width-sm: 24rem,
+    $c-modal-width-md: 32rem,
+    $c-modal-width-lg: 48rem,
+    $c-modal-close-size: 1.25rem,
+    $c-modal-close-color: $var-muted,
+    $c-modal-close-color-hover: $var-text,
+    $c-modal-backdrop-color: rgb(0 0 0 / 0.5),
+    $c-modal-transition-duration: $transition-duration,
+    $c-modal-enter-offset: 0.5rem
+);
+
+// Toast: the region and its placement only; the look of each toast is the Alert's (configured above). Its index forwards the
+// alert styles, already loaded and configured by the Alert block, so this block goes after it. The action is a bold
+// underlined 0.875rem button in the text color.
+@use '@carissa-io/components-toast/scss' as toast with (
+    $c-toast-region-offset: 1rem,
+    $c-toast-region-z-index: 1100,
+    $c-toast-gap: 0.75rem,
+    $c-toast-width: 24rem,
+    $c-toast-action-margin-top: 0.5rem,
+    $c-toast-action-font-size: $font-size-small,
+    $c-toast-action-font-weight: $font-weight-bold,
+    $c-toast-action-color: $var-text,
+    $c-toast-enter-duration: $transition-duration,
+    $c-toast-enter-distance: 0.75rem
+);