@carissa-io/theme-default 0.2.0 → 0.2.2

package/DESIGN.md

@@ -27,18 +27,29 @@ The same palette is available as Sass tokens (`$black`, `$muted`, `$surface`, `$
 instead of copying the hex values, so a change of value here reaches them with the next release.
 
 ## Typography
-| Variant | Purpose | Style |
-| :--- | :--- | :--- |
-| `h1` | Primary page header | Black (900), tight tracking |
-| `h2` | Section header | Black (900) |
-| `h3` | Sub-section | Bold (700) |
-| `body` | Main content | Regular (400) |
-| `label` | Metadata / tags / field labels | Bold (700), uppercase, widest tracking |
-| `mono` | System data | Technical precision |
+Configured through [components-typography](components/components-typography): `Heading` (the element comes from `level`, the look from `size`)
+and `Text`. Neutral grotesque, no margins (spacing belongs to the layout), color from `$text`; only muted text uses `$muted`.
+
+| Style | Size / line height | Weight | Tracking | Purpose |
+| :--- | :--- | :--- | :--- | :--- |
+| `display` | 3.5rem / 1.05 | Black (900) | -0.04em | Hero statements |
+| `h1` | 2.5rem / 1.1 | Black (900) | -0.03em | Primary page header |
+| `h2` | 1.75rem / 1.2 | Black (900) | -0.02em | Section header |
+| `h3` | 1.25rem / 1.3 | Bold (700) | normal | Sub-section |
+| `h4` | 1.125rem / 1.3 | Bold (700) | normal | Group title |
+| `h5` | 1rem / 1.4 | Bold (700) | normal | Minor title |
+| `h6` | 0.875rem / 1.4 | Bold (700) | normal | Smallest title |
+| `lead` | 1.25rem / 1.5 | Regular (400) | normal | Introductory paragraph |
+| `body` | 1rem / 1.5 | Regular (400) | normal | Main content |
+| `small` | 0.875rem / 1.5 | Regular (400) | normal | Secondary content |
+| `caption` | 0.75rem / 1.4 | Regular (400), muted by use | normal | Notes under media or fields |
+| `overline` | 0.6875rem / 1.4 | Bold (700), uppercase | 0.1em | Metadata / tags: the field-label style |
+| `mono` | 0.875rem / 1.5 | Regular (400) | normal | System data, in `$font-family-mono` |
 
 Font family: a neutral grotesque stack, `Helvetica Neue, Helvetica, Arial, Liberation Sans, sans-serif`, in keeping with
-the International Typographic Style. No webfont is loaded, so a theme never depends on the network. Field text is
-1rem (16px, which also avoids the zoom-on-focus of mobile browsers); labels are 11px.
+the International Typographic Style. No webfont is loaded, so a theme never depends on the network. System data uses the
+`$font-family-mono` token, a system monospace stack (`ui-monospace, SFMono-Regular, Menlo, Consolas, Liberation Mono`).
+Field text is 1rem (16px, which also avoids the zoom-on-focus of mobile browsers); labels are 11px.
 
 ## Buttons
 Three variants from [components-button](components/components-button), all square, 44px tall, with the same uppercase,

package/README.md

@@ -50,6 +50,7 @@ change.
 | `$disabled-border` | `#d4d4d4` | disabled borders |
 | `$error` | `#dc3545` | error text and borders |
 | `$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 |
 | `$min-height` | `2.75rem` | touch target |
 | `$focus-color` | `$black` | focus color |
@@ -84,11 +85,11 @@ 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` and `-search`. `components-email`, `-password`, `-url` and `-textarea`
+`-combobox`, `-upload`, `-calendar`, `-date-picker`, `-search` and `-typography`. `components-email`, `-password`, `-url` and `-textarea`
 are styled through the input.
 
 ## Change a value
-The palette and the values shared by every component (radius, minimum height, focus ring, transition, label style, dropdown
+The palette and the values shared by every component (fonts, radius, minimum height, focus ring, transition, label style, dropdown
 arrow) are the Sass variables of `scss/_tokens.scss` (the [tokens](#tokens)); each component has one `@use ... with (...)` block of overrides
 below. Change the value, run `npm run build`, and update [DESIGN.md](DESIGN.md) if the decision changes.
 

package/dist/index.css

@@ -1146,3 +1146,124 @@
 .c-search__clear:hover:not(:disabled) {
   color: #000;
 }
+
+.c-heading {
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
+  color: #171717;
+}
+
+.c-heading--display {
+  font-size: 3.5rem;
+  font-weight: 900;
+  line-height: 1.05;
+  letter-spacing: -0.04em;
+  text-transform: none;
+}
+
+.c-heading--1 {
+  font-size: 2.5rem;
+  font-weight: 900;
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+  text-transform: none;
+}
+
+.c-heading--2 {
+  font-size: 1.75rem;
+  font-weight: 900;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+  text-transform: none;
+}
+
+.c-heading--3 {
+  font-size: 1.25rem;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.c-heading--4 {
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.3;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.c-heading--5 {
+  font-size: 1rem;
+  font-weight: 700;
+  line-height: 1.4;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.c-heading--6 {
+  font-size: 0.875rem;
+  font-weight: 700;
+  line-height: 1.4;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.c-text {
+  margin: 0;
+  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
+  color: #171717;
+}
+
+.c-text--body {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.c-text--lead {
+  font-size: 1.25rem;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.c-text--small {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.c-text--caption {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.4;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.c-text--overline {
+  font-size: 0.6875rem;
+  font-weight: 700;
+  line-height: 1.4;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.c-text--mono {
+  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.c-text--muted {
+  color: #737373;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carissa-io/theme-default",
-  "version": "0.2.0",
+  "version": "0.2.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",
@@ -51,7 +51,8 @@
     "@carissa-io/components-upload": "^0.1.1",
     "@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-search": "^0.1.1",
+    "@carissa-io/components-typography": "^0.1.0"
   },
   "peerDependenciesMeta": {
     "@carissa-io/components-input": {
@@ -107,6 +108,9 @@
     },
     "@carissa-io/components-search": {
       "optional": true
+    },
+    "@carissa-io/components-typography": {
+      "optional": true
     }
   },
   "devDependencies": {
@@ -123,6 +127,7 @@
     "@carissa-io/components-select": "^0.1.1",
     "@carissa-io/components-slider": "^0.1.1",
     "@carissa-io/components-switch": "^0.1.1",
+    "@carissa-io/components-typography": "^0.1.0",
     "@carissa-io/components-upload": "^0.1.1",
     "sass-embedded": "^1.105.1",
     "vitest": "^4.1.11"

package/scss/_tokens.scss

@@ -20,6 +20,7 @@ $error: #dc3545;
 
 // Values shared by every component, so the whole theme moves together.
 $font-family: ('Helvetica Neue', Helvetica, Arial, 'Liberation Sans', sans-serif);
+$font-family-mono: (ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace); // system data, code
 $radius: 0;
 $min-height: 2.75rem; // 44px touch target
 $focus-color: $black;

package/scss/index.scss

@@ -479,3 +479,81 @@
     // Motion
     $c-search-transition: color $transition-duration ease
 );
+
+// 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.
+@use '@carissa-io/components-typography/scss' as typography with (
+    // Headings
+    $c-heading-font-family: $font-family,
+    $c-heading-color: $text,
+
+    $c-heading-display-font-size: 3.5rem,
+    $c-heading-display-font-weight: 900,
+    $c-heading-display-line-height: 1.05,
+    $c-heading-display-letter-spacing: -0.04em,
+
+    $c-heading-1-font-size: 2.5rem,
+    $c-heading-1-font-weight: 900,
+    $c-heading-1-line-height: 1.1,
+    $c-heading-1-letter-spacing: -0.03em,
+
+    $c-heading-2-font-size: 1.75rem,
+    $c-heading-2-font-weight: 900,
+    $c-heading-2-line-height: 1.2,
+    $c-heading-2-letter-spacing: -0.02em,
+
+    $c-heading-3-font-size: 1.25rem,
+    $c-heading-3-font-weight: 700,
+    $c-heading-3-line-height: 1.3,
+    $c-heading-3-letter-spacing: normal,
+
+    $c-heading-4-font-size: 1.125rem,
+    $c-heading-4-font-weight: 700,
+    $c-heading-4-line-height: 1.3,
+    $c-heading-4-letter-spacing: normal,
+
+    $c-heading-5-font-size: 1rem,
+    $c-heading-5-font-weight: 700,
+    $c-heading-5-line-height: 1.4,
+    $c-heading-5-letter-spacing: normal,
+
+    $c-heading-6-font-size: 0.875rem,
+    $c-heading-6-font-weight: 700,
+    $c-heading-6-line-height: 1.4,
+    $c-heading-6-letter-spacing: normal,
+
+    // Text
+    $c-text-font-family: $font-family,
+    $c-text-color: $text,
+    $c-text-muted-color: $muted,
+    $c-text-mono-font-family: $font-family-mono,
+
+    $c-text-body-font-size: 1rem,
+    $c-text-body-font-weight: 400,
+    $c-text-body-line-height: 1.5,
+
+    $c-text-lead-font-size: 1.25rem,
+    $c-text-lead-font-weight: 400,
+    $c-text-lead-line-height: 1.5,
+
+    $c-text-small-font-size: 0.875rem,
+    $c-text-small-font-weight: 400,
+    $c-text-small-line-height: 1.5,
+
+    $c-text-caption-font-size: 0.75rem,
+    $c-text-caption-font-weight: 400,
+    $c-text-caption-line-height: 1.4,
+
+    // Overline: the field-label style
+    $c-text-overline-font-size: $label-font-size,
+    $c-text-overline-font-weight: $label-font-weight,
+    $c-text-overline-line-height: 1.4,
+    $c-text-overline-letter-spacing: $label-letter-spacing,
+    $c-text-overline-text-transform: uppercase,
+
+    $c-text-mono-font-size: 0.875rem,
+    $c-text-mono-font-weight: 400,
+    $c-text-mono-line-height: 1.5
+);