@carissa-io/theme-default 0.3.2 → 0.3.3

package/DESIGN.md

@@ -248,9 +248,9 @@ 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.
 
 ## Keyboard focus (all controls)

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 {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "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",

package/scss/index.scss

@@ -599,32 +599,32 @@
     $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,