@openwarelabs/ui 0.2.0 → 0.3.0

package/dist/styles.css

@@ -254,7 +254,7 @@
 }
 
 :root {
-    --ow-space-3xs: 3px;
+    --ow-space-3xs: 4px;
     --ow-space-2xs: 4px;
     --ow-space-xs: 6px;
     --ow-space-sm: 8px;
@@ -536,6 +536,104 @@
     }
 }
 
+/* components/Text/Text.css */
+/* Text: the type styles from tokens.css as a component, with colours and the sizes the display styles take on phones. */
+.ow-text {
+    margin: 0;
+}
+
+/* Titles balance their lines; running text avoids a lone last word. */
+.ow-text--hero,
+.ow-text--page-title,
+.ow-text--section-title,
+.ow-text--heading {
+    text-wrap: balance;
+}
+
+.ow-text--lead,
+.ow-text--prose,
+.ow-text--copy {
+    text-wrap: pretty;
+}
+
+.ow-text--lead {
+    max-width: 560px;
+}
+
+.ow-text--overline {
+    text-transform: uppercase;
+}
+
+.ow-text--code,
+.ow-text--kbd {
+    font-variant-ligatures: none;
+}
+
+.ow-text--default {
+    color: var(--ow-text);
+}
+
+.ow-text--soft {
+    color: var(--ow-text-soft);
+}
+
+.ow-text--muted {
+    color: var(--ow-text-muted);
+}
+
+.ow-text--primary {
+    color: var(--ow-primary-text);
+}
+
+.ow-text--danger {
+    color: var(--ow-danger-text);
+}
+
+.ow-text--success {
+    color: var(--ow-success-text);
+}
+
+.ow-text--warning {
+    color: var(--ow-warning-text);
+}
+
+.ow-text--center {
+    text-align: center;
+}
+
+.ow-text--center.ow-text--lead {
+    margin-inline: auto;
+}
+
+.ow-text--end {
+    text-align: end;
+}
+
+.ow-text--truncate {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+/* The display styles on phones, as the Typography page gives them. */
+@media (max-width: 760px) {
+    .ow-text--hero {
+        font-size: 42px;
+        line-height: 1.02;
+    }
+    .ow-text--page-title {
+        font-size: 40px;
+        line-height: 1.06;
+    }
+    .ow-text--section-title {
+        font-size: 32px;
+        line-height: 1.12;
+    }
+    .ow-text--heading {
+        font-size: 21px;
+    }
+}
+
 /* components/Spinner/Spinner.css */
 /* Spinner: a ring with one coloured quarter, turning. */
 .ow-spinner {
@@ -1479,19 +1577,22 @@
 
 .ow-option {
     display: flex;
-    min-height: 32px;
+    min-height: 36px;
     align-items: flex-start;
     gap: var(--ow-space-sm);
     border-radius: var(--ow-radius-lg);
-    padding: var(--ow-space-xs) var(--ow-space-sm);
+    /* 10 + a 16px line + 10: one line sits centred in the 36px row; a description just makes the row taller. */
+    padding: var(--ow-space-md);
     color: var(--ow-text);
     font-size: 14px;
-    line-height: 1.1;
+    line-height: 16px;
     text-align: left;
     cursor: pointer;
 }
 
 .ow-listbox--sm .ow-option {
+    min-height: 32px;
+    padding-block: var(--ow-space-sm);
     font-size: 12px;
 }
 
@@ -1512,11 +1613,11 @@
 .ow-option__check {
     display: flex;
     width: 16px;
+    /* As tall as the label's first line, so the tick sits level with it. */
     height: 16px;
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    padding-top: 2px;
     color: var(--ow-primary-text);
 }
 
@@ -1524,7 +1625,7 @@
     display: grid;
     min-width: 0;
     flex: 1;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-option__label {
@@ -1700,12 +1801,13 @@
     cursor: pointer;
 }
 
+/* Centred on the label's first line, whatever its line height. */
 .ow-check-label .ow-checkbox--md {
-    margin-top: 2px;
+    margin-top: calc((1lh - 16px) / 2);
 }
 
 .ow-check-label .ow-checkbox--sm {
-    margin-top: 3px;
+    margin-top: calc((1lh - 14px) / 2);
 }
 
 .ow-check-label--disabled {
@@ -1715,7 +1817,7 @@
 
 .ow-check-label__text {
     display: grid;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-check-label__description {
@@ -2645,7 +2747,7 @@
     border: 0;
     border-radius: var(--ow-radius-md);
     background: var(--ow-tooltip);
-    padding: var(--ow-space-3xs) var(--ow-space-sm);
+    padding: var(--ow-space-2xs) var(--ow-space-sm);
     color: var(--ow-on-tooltip);
     font-family: var(--ow-font-sans);
     font-size: 12px;
@@ -3103,7 +3205,7 @@
     display: grid;
     min-width: 0;
     flex: 1;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
     padding-top: 5px;
 }
 
@@ -3628,7 +3730,7 @@
 }
 
 .ow-palette__group {
-    padding: var(--ow-space-sm) var(--ow-space-sm) var(--ow-space-3xs);
+    padding: var(--ow-space-sm) var(--ow-space-sm) var(--ow-space-2xs);
     color: var(--ow-text-muted);
     font-size: 11px;
     font-weight: var(--ow-weight-control);
@@ -3887,7 +3989,7 @@
 .ow-disclosure__titles {
     display: grid;
     min-width: 0;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-disclosure__title {
@@ -4232,7 +4334,7 @@
     display: grid;
     min-width: 0;
     flex: 1 1 160px;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-steps__title {
@@ -4381,7 +4483,7 @@
 
 .ow-choice__text {
     display: grid;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-choice__title {
@@ -5342,7 +5444,7 @@
     display: grid;
     min-width: 0;
     flex: 1 1 192px;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-settings-row__label {

package/dist/tokens.css

@@ -254,7 +254,7 @@
 }
 
 :root {
-    --ow-space-3xs: 3px;
+    --ow-space-3xs: 4px;
     --ow-space-2xs: 4px;
     --ow-space-xs: 6px;
     --ow-space-sm: 8px;

package/dist/tokens.json

@@ -832,13 +832,13 @@
     "tokens": [
       {
         "name": "ow-space-3xs",
-        "value": "3px",
-        "usage": "Gap between a title and its description."
+        "value": "4px",
+        "usage": "The same as ow-space-2xs, which the library uses; kept so code written for 0.2 keeps working."
       },
       {
         "name": "ow-space-2xs",
         "value": "4px",
-        "usage": "Gap between menu items and options; a menu's offset from its trigger."
+        "usage": "Gap between a title and its description, and between menu items; a menu's offset from its trigger."
       },
       {
         "name": "ow-space-xs",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openwarelabs/ui",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Openware UI: React components and design tokens — midnight and brass, tactile buttons and Inter, in light and dark.",
   "license": "MIT",
   "author": "Alexander Silver",