@carissa-io/theme-default 0.3.0 → 0.3.2

package/DESIGN.md

@@ -45,12 +45,19 @@ Both modes ship in the same package; dark is **opt-in per app** with `data-mode`
 | `disabled-text` | `#a3a3a3` | `#737373` |
 | `disabled-border` | `#d4d4d4` | `#404040` |
 | `error` | `#dc3545` | `#f87171` |
+| `success` | `#15803d` | `#4ade80` |
+| `warning` | `#a16207` | `#fbbf24` |
+| `info` | `#1d4ed8` | `#60a5fa` |
 | `focus` | `#000000` | `#ffffff` |
 
 Decisions: dark inverts the contrast of the light theme, it does not invent a new look (near-black ground, the primary action becomes white,
 square corners and the 1px focus ring stay). The ground is `#0a0a0a`, not pure black, so surfaces (`#171717`) can be told apart. Primary and focus
 are pure white as black is in light. The error red is lighter (`#f87171`) because `#dc3545` is too dim on a dark ground.
 
+The status roles `success`, `warning` and `info` (with `error`, the four colors of the Alert) are chosen to pass 4.5:1 as text on both `background` and
+`surface` in each mode (the same value is 3:1 or more as a border or an icon on the background). In light they are the 700 steps of green, amber and blue
+(`#15803d`, `#a16207`, `#1d4ed8`); in dark the 400 steps (`#4ade80`, `#fbbf24`, `#60a5fa`). The light warning on the surface is the tightest pair (4.52).
+
 Contrast (WCAG 2.x): text 4.5:1, borders and the focus ring 3:1.
 
 | Pair | Light | Dark |
@@ -61,8 +68,14 @@ Contrast (WCAG 2.x): text 4.5:1, borders and the focus ring 3:1.
 | `on-primary` on `primary` | 21.00 | 21.00 |
 | `error` on `background` | 4.53 | 7.16 |
 | `focus` on `background` | 21.00 | 19.80 |
+| `success` on `background` / on `surface` | 5.02 / 4.60 | 11.36 / 10.29 |
+| `warning` on `background` / on `surface` | 4.92 / 4.52 | 11.86 / 10.74 |
+| `info` on `background` / on `surface` | 6.70 / 6.15 | 7.79 / 7.05 |
+| `error` on `surface` | 4.15 | 6.48 |
 | `disabled-text` on `surface` (disabled, exempt) | 2.31 | 3.78 |
 
+The light `error` on `surface` (4.15) is below 4.5 for text, so the Alert never sets text in the status color (only the icon and the accent border, which need 3:1).
+
 `muted` on `surface` in light (4.35) is a known gap that already existed (muted text on the hover surface); the disabled states are exempt from
 WCAG but are listed in the backlog for a contrast review. Known gap in dark: the 0-width listbox option separator keeps the component default
 (`#dee2e6`); it draws nothing today.
@@ -101,7 +114,7 @@ Field text is 1rem (16px, which also avoids the zoom-on-focus of mobile browsers
 Three variants from [components-button](components/components-button), all square, 44px tall, with the same uppercase,
 bold, tracked 11px label as the field labels and 200ms color transitions.
 - **Primary:** black background, white text; hover `#262626`, active `#404040`.
-- **Secondary:** white background, 1px `#737373` border; the border turns black on hover.
+- **Secondary:** white background, 1px `#737373` border; on hover the border turns black and the background becomes `#e5e5e5` (`--c-surface-active`), so the state reads without relying on the border alone.
 - **Ghost:** transparent; a `#f5f5f5` surface appears on hover.
 - **Disabled:** `#a3a3a3` text on a `#f5f5f5` surface (primary), or a lighter border (secondary, ghost); no hover.
 - **Focus:** keyboard focus (`:focus-visible`) follows the general rule below: secondary and ghost thicken their border to
@@ -224,6 +237,22 @@ field has the focus. The clear button appears on the right only while there is t
 Errors, required marker and disabled look are the Input's. The Input and Textarea accept `start` and `end` content (a prefix
 icon, a unit) in the same muted color (`#737373`) with `0.5rem` between the content and the text.
 
+## Card
+From [components-card](components/components-card): `Card` with `CardHeader`, `CardBody` and `CardFooter`; the title and description are the Typography
+`Heading` (level 4 size) and the small muted `Text`. Square corners (`$radius`), 1.5rem at the sides and 1.25rem above and below each part. Colors come only
+from the custom properties, so the card works in both modes.
+
+- **Outlined (default):** `--c-background` with a 1px `--c-muted` border.
+- **Filled:** `--c-surface`, same border.
+- **Elevated:** the outlined card plus a subtle layered shadow (`0 1px 2px` and `0 4px 12px` of black at 6% and 8%). The border stays on purpose: a shadow
+  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
+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
+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)
 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

@@ -29,7 +29,7 @@ peer dependencies).
 ## Color modes
 The theme has a light and a dark palette in one package. The palette is a set of CSS custom properties (`--c-background`, `--c-text`,
 `--c-muted`, `--c-surface`, `--c-surface-active`, `--c-primary`, `--c-on-primary`, `--c-primary-hover`, `--c-primary-active`,
-`--c-disabled-text`, `--c-disabled-border`, `--c-error`, `--c-focus`) that every component reads. **Dark is opt-in per app**: without
+`--c-disabled-text`, `--c-disabled-border`, `--c-error`, `--c-success`, `--c-warning`, `--c-info`, `--c-focus`) that every component reads. **Dark is opt-in per app**: without
 the attribute below the app is light, exactly as before.
 
 An app opts in with one line in the file where it imports the theme (`App/theme.js`), setting the mode on `<html>`:
@@ -86,6 +86,9 @@ change.
 | `$disabled-text` | `#a3a3a3` | disabled text and marks |
 | `$disabled-border` | `#d4d4d4` | disabled borders |
 | `$error` | `#dc3545` | error text and borders |
+| `$success` | `#15803d` | success accent and icon (Alert) |
+| `$warning` | `#a16207` | warning accent and icon (Alert) |
+| `$info` | `#1d4ed8` | info accent and icon (Alert) |
 | `$font-family` | `'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif` | type stack |
 | `$font-family-mono` | `ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace` | monospace stack for system data and code |
 | `$radius` | `0` | corner radius |
@@ -139,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` and `-typography`. `components-email`, `-password`, `-url` and `-textarea`
+`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search`, `-typography`, `-card` and `-alert`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
 ## Change a value

package/dist/index.css

@@ -11,6 +11,9 @@
   --c-disabled-text: #a3a3a3;
   --c-disabled-border: #d4d4d4;
   --c-error: #dc3545;
+  --c-success: #15803d;
+  --c-warning: #a16207;
+  --c-info: #1d4ed8;
   --c-focus: #000;
   color-scheme: light;
 }
@@ -28,6 +31,9 @@
   --c-disabled-text: #a3a3a3;
   --c-disabled-border: #d4d4d4;
   --c-error: #dc3545;
+  --c-success: #15803d;
+  --c-warning: #a16207;
+  --c-info: #1d4ed8;
   --c-focus: #000;
   color-scheme: light;
 }
@@ -45,6 +51,9 @@
   --c-disabled-text: #737373;
   --c-disabled-border: #404040;
   --c-error: #f87171;
+  --c-success: #4ade80;
+  --c-warning: #fbbf24;
+  --c-info: #60a5fa;
   --c-focus: #fff;
   color-scheme: dark;
 }
@@ -63,6 +72,9 @@
     --c-disabled-text: #737373;
     --c-disabled-border: #404040;
     --c-error: #f87171;
+    --c-success: #4ade80;
+    --c-warning: #fbbf24;
+    --c-info: #60a5fa;
     --c-focus: #fff;
     color-scheme: dark;
   }
@@ -272,12 +284,12 @@
 }
 .c-button--secondary:hover:not(:disabled) {
   color: var(--c-primary);
-  background: var(--c-background);
+  background: var(--c-surface-active);
   border-color: var(--c-primary);
 }
 .c-button--secondary:active:not(:disabled) {
   color: var(--c-primary);
-  background: var(--c-surface);
+  background: var(--c-surface-active);
   border-color: var(--c-primary);
 }
 .c-button--secondary:disabled {
@@ -1336,3 +1348,153 @@
 .c-text--muted {
   color: var(--c-muted);
 }
+
+.c-card {
+  box-sizing: border-box;
+  min-width: 0;
+  color: var(--c-text);
+  background: var(--c-background);
+  border: 1px solid var(--c-muted);
+  border-radius: 0;
+}
+
+.c-card--filled {
+  background: var(--c-surface);
+}
+
+.c-card--elevated {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);
+}
+
+.c-card__header {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1.25rem 1.5rem;
+}
+
+.c-card__title-block {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.c-card__actions {
+  display: flex;
+  flex: none;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.c-card__body {
+  padding: 1.25rem 1.5rem;
+}
+
+.c-card__footer {
+  padding: 1.25rem 1.5rem;
+}
+
+.c-alert {
+  box-sizing: border-box;
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-start;
+  padding: 0.875rem 1rem;
+  font-size: 0.875rem;
+  border: 1px solid;
+  border-left-width: 4px;
+  border-radius: 0;
+}
+
+.c-alert__icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.c-alert__content {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.c-alert__title {
+  display: block;
+  font-weight: 700;
+}
+
+.c-alert__dismiss {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  margin-left: auto;
+  font-size: 1rem;
+  line-height: 1;
+  color: var(--c-muted);
+  cursor: pointer;
+  background: none;
+  border: 0;
+}
+.c-alert__dismiss:hover {
+  color: var(--c-text);
+}
+.c-alert__dismiss:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
+}
+
+.c-alert--info {
+  color: var(--c-text);
+  background: var(--c-surface);
+  border-color: var(--c-muted);
+  border-left-color: var(--c-info);
+}
+.c-alert--info .c-alert__icon {
+  color: var(--c-info);
+}
+.c-alert--info .c-alert__title {
+  color: var(--c-text);
+}
+
+.c-alert--success {
+  color: var(--c-text);
+  background: var(--c-surface);
+  border-color: var(--c-muted);
+  border-left-color: var(--c-success);
+}
+.c-alert--success .c-alert__icon {
+  color: var(--c-success);
+}
+.c-alert--success .c-alert__title {
+  color: var(--c-text);
+}
+
+.c-alert--warning {
+  color: var(--c-text);
+  background: var(--c-surface);
+  border-color: var(--c-muted);
+  border-left-color: var(--c-warning);
+}
+.c-alert--warning .c-alert__icon {
+  color: var(--c-warning);
+}
+.c-alert--warning .c-alert__title {
+  color: var(--c-text);
+}
+
+.c-alert--error {
+  color: var(--c-text);
+  background: var(--c-surface);
+  border-color: var(--c-muted);
+  border-left-color: var(--c-error);
+}
+.c-alert--error .c-alert__icon {
+  color: var(--c-error);
+}
+.c-alert--error .c-alert__title {
+  color: var(--c-text);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "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",
@@ -52,7 +52,9 @@
     "@carissa-io/components-calendar": "^0.1.1",
     "@carissa-io/components-date-picker": "^0.1.1",
     "@carissa-io/components-search": "^0.1.1",
-    "@carissa-io/components-typography": "^0.1.0"
+    "@carissa-io/components-typography": "^0.1.0",
+    "@carissa-io/components-card": "^0.1.0",
+    "@carissa-io/components-alert": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -111,11 +113,19 @@
     },
     "@carissa-io/components-typography": {
       "optional": true
+    },
+    "@carissa-io/components-card": {
+      "optional": true
+    },
+    "@carissa-io/components-alert": {
+      "optional": true
     }
   },
   "devDependencies": {
+    "@carissa-io/components-alert": "^0.1.0",
     "@carissa-io/components-button": "^0.1.1",
     "@carissa-io/components-calendar": "^0.1.1",
+    "@carissa-io/components-card": "^0.1.0",
     "@carissa-io/components-checkbox": "^0.1.1",
     "@carissa-io/components-combobox": "^0.1.1",
     "@carissa-io/components-date-picker": "^0.1.1",

package/scss/_modes.scss

@@ -24,6 +24,9 @@ $light: (
     'disabled-text': t.$disabled-text,
     'disabled-border': t.$disabled-border,
     'error': t.$error,
+    'success': t.$success,
+    'warning': t.$warning,
+    'info': t.$info,
     'focus': t.$focus-color,
 );
 
@@ -41,6 +44,9 @@ $dark: (
     'disabled-text': #737373,
     'disabled-border': #404040,
     'error': #f87171,
+    'success': #4ade80,
+    'warning': #fbbf24,
+    'info': #60a5fa,
     'focus': #fff,
 );
 
@@ -57,6 +63,9 @@ $var-primary-active: var(--c-primary-active);
 $var-disabled-text: var(--c-disabled-text);
 $var-disabled-border: var(--c-disabled-border);
 $var-error: var(--c-error);
+$var-success: var(--c-success);
+$var-warning: var(--c-warning);
+$var-info: var(--c-info);
 $var-focus: var(--c-focus);
 
 // The dropdown arrow of Select, Combobox and Date picker (the same roles as the `$arrow-*` tokens).

package/scss/_tokens.scss

@@ -17,6 +17,10 @@ $primary-active: #404040;
 $disabled-text: #a3a3a3;
 $disabled-border: #d4d4d4;
 $error: #dc3545;
+// Status roles for Alert (AA text contrast on white and on $surface, see DESIGN.md); $error is the fourth one.
+$success: #15803d;
+$warning: #a16207;
+$info: #1d4ed8;
 
 // Values shared by every component, so the whole theme moves together.
 $font-family: ('Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif);

package/scss/index.scss

@@ -83,10 +83,10 @@
     $c-button-secondary-background: $var-background,
     $c-button-secondary-border-color: $var-muted,
     $c-button-secondary-color-hover: $var-primary,
-    $c-button-secondary-background-hover: $var-background,
+    $c-button-secondary-background-hover: $var-surface-active,
     $c-button-secondary-border-color-hover: $var-primary,
     $c-button-secondary-color-active: $var-primary,
-    $c-button-secondary-background-active: $var-surface,
+    $c-button-secondary-background-active: $var-surface-active,
     $c-button-secondary-border-color-active: $var-primary,
     $c-button-secondary-color-disabled: $var-disabled-text,
     $c-button-secondary-background-disabled: $var-background,
@@ -485,7 +485,7 @@
 // Typography: Heading and Text, the hierarchy of every screen. The scale follows DESIGN.md: black (900) with tight
 // tracking for display, 1 and 2, bold (700) from 3 down, regular body; the overline is the field-label style, and the
 // mono variant uses the $font-family-mono token. No margins (spacing belongs to the layout). No other component block
-// forwards it, so it can go anywhere; it stays last.
+// forwards it, so it can go anywhere, except after Card, which does: it comes before the Card block below.
 @use '@carissa-io/components-typography/scss' as typography with (
     // Headings
     $c-heading-font-family: $font-family,
@@ -559,3 +559,74 @@
     $c-text-mono-font-weight: $font-weight-regular,
     $c-text-mono-line-height: $line-height-normal
 );
+
+// Card: a surface with a header, a body and a footer. Its index forwards the typography styles, already loaded and
+// configured above, so this block goes after the Typography one. Outlined = the page background with a muted 1px border;
+// filled = the surface color; elevated = a subtle layered shadow plus the same border, so it still reads in dark mode.
+// Only custom properties for colors (dark mode); the shadow is a plain rgb() with an alpha, no Sass color math.
+@use '@carissa-io/components-card/scss' as card with (
+    $c-card-background: $var-background,
+    $c-card-color: $var-text,
+    $c-card-border-width: 1px,
+    $c-card-border-color: $var-muted,
+    $c-card-radius: $radius,
+    $c-card-filled-background: $var-surface,
+    $c-card-shadow: (0 1px 2px rgb(0 0 0 / 0.06), 0 4px 12px rgb(0 0 0 / 0.08)),
+
+    // Spacing: generous, 24px at the sides
+    $c-card-header-padding-x: 1.5rem,
+    $c-card-header-padding-y: 1.25rem,
+    $c-card-body-padding-x: 1.5rem,
+    $c-card-body-padding-y: 1.25rem,
+    $c-card-footer-padding-x: 1.5rem,
+    $c-card-footer-padding-y: 1.25rem,
+    $c-card-gap: 0.25rem
+);
+
+// Alert: a message about a state. A surface background with a 1px muted border and a 4px accent on the left edge in the
+// variant color (the status roles, $error for the error); the text is the normal text color, the icon carries the
+// variant color. The title keeps the text color too: the light $error is 4.15:1 on the surface, short of AA for text.
+@use '@carissa-io/components-alert/scss' as alert with (
+    $c-alert-radius: $radius,
+    $c-alert-padding-x: 1rem,
+    $c-alert-padding-y: 0.875rem,
+    $c-alert-gap: 0.75rem,
+    $c-alert-border-width: 1px,
+    $c-alert-border-left-width: 4px,
+    $c-alert-font-size: $font-size-small,
+    $c-alert-title-font-weight: $font-weight-bold,
+    $c-alert-dismiss-color: $var-muted,
+    $c-alert-dismiss-color-hover: $var-text,
+
+    // Info
+    $c-alert-info-background: $var-surface,
+    $c-alert-info-border-color: $var-muted,
+    $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-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-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-accent-color: $var-error,
+    $c-alert-error-color: $var-text,
+    $c-alert-error-icon-color: $var-error,
+    $c-alert-error-title-color: $var-text
+);