@openwarelabs/ui 0.1.1 → 0.3.0

package/dist/styles.css

@@ -82,6 +82,7 @@
     --ow-key-ground: var(--ow-gray-50);
     --ow-track: var(--ow-gray-100);
     --ow-thumb: #ffffff;
+    --ow-knob: #ffffff;
     --ow-meter-track: var(--ow-gray-200);
     --ow-progress: var(--ow-brand-600);
     --ow-code-block: #15171c;
@@ -158,6 +159,7 @@
     --ow-key-ground: #22262e;
     --ow-track: #14161b;
     --ow-thumb: #2f3541;
+    --ow-knob: #e4e7ec;
     --ow-meter-track: #2c313a;
     --ow-progress: var(--ow-brand-400);
     --ow-code-block-border: #2c313a;
@@ -230,6 +232,7 @@
         --ow-key-ground: #22262e;
         --ow-track: #14161b;
         --ow-thumb: #2f3541;
+        --ow-knob: #e4e7ec;
         --ow-meter-track: #2c313a;
         --ow-progress: var(--ow-brand-400);
         --ow-code-block-border: #2c313a;
@@ -251,7 +254,7 @@
 }
 
 :root {
-    --ow-space-3xs: 3px;
+    --ow-space-3xs: 4px;
     --ow-space-2xs: 4px;
     --ow-space-xs: 6px;
     --ow-space-sm: 8px;
@@ -467,6 +470,7 @@
    back into it. useFloating sets data-side and --ow-floating-origin; usePresence sets data-state. */
 .ow-floating {
     --ow-floating-shift: -4px;
+    --ow-floating-shift-x: 0px;
     transform-origin: var(--ow-floating-origin, top center);
 }
 
@@ -474,6 +478,16 @@
     --ow-floating-shift: 4px;
 }
 
+.ow-floating[data-side="left"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: 4px;
+}
+
+.ow-floating[data-side="right"] {
+    --ow-floating-shift: 0px;
+    --ow-floating-shift-x: -4px;
+}
+
 .ow-floating[data-state="open"] {
     animation: ow-floating-in var(--ow-duration-base) var(--ow-ease-emphasized);
 }
@@ -486,14 +500,14 @@
 @keyframes ow-floating-in {
     from {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.96);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.96);
     }
 }
 
 @keyframes ow-floating-out {
     to {
         opacity: 0;
-        transform: translateY(var(--ow-floating-shift)) scale(0.97);
+        transform: translate(var(--ow-floating-shift-x), var(--ow-floating-shift)) scale(0.97);
     }
 }
 
@@ -522,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 {
@@ -922,6 +1034,8 @@
     border-radius: var(--ow-radius-container);
     background: var(--ow-track);
     padding: var(--ow-space-2xs);
+    /* A hairline edge, so the well shows on the canvas as well as on a surface. */
+    box-shadow: inset 0 0 0 1px var(--ow-border);
 }
 
 .ow-segmented--full {
@@ -1225,6 +1339,8 @@
 .ow-input-group {
     display: flex;
     width: 100%;
+    /* Shrink in a narrow grid or flex column instead of pushing past it. */
+    min-width: 0;
     height: 40px;
     align-items: center;
     gap: var(--ow-space-sm);
@@ -1271,6 +1387,8 @@
 }
 
 .ow-input-group__input {
+    /* A percentage width lets the field's minimum size come from its start and end content alone. */
+    width: 100%;
     min-width: 0;
     height: 100%;
     flex: 1;
@@ -1459,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;
 }
 
@@ -1492,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);
 }
 
@@ -1504,7 +1625,7 @@
     display: grid;
     min-width: 0;
     flex: 1;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-option__label {
@@ -1680,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 {
@@ -1695,7 +1817,7 @@
 
 .ow-check-label__text {
     display: grid;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-check-label__description {
@@ -1877,7 +1999,7 @@
     width: 16px;
     height: 16px;
     border-radius: var(--ow-radius-pill);
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: var(--ow-shadow-control);
     transform: translateX(2px);
     transition:
@@ -1899,7 +2021,7 @@
 }
 
 /* components/Slider/Slider.css */
-/* Slider: native range inputs over a drawn track. The thumb is the switch's knob: white, round, with a soft shadow. */
+/* Slider: native range inputs over a drawn track. The thumb is the switch's knob (ow-knob): round, with a soft shadow. */
 .ow-slider {
     display: grid;
     gap: var(--ow-space-sm);
@@ -1990,7 +2112,7 @@
     appearance: none;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -2003,7 +2125,7 @@
     height: 18px;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
-    background: #ffffff;
+    background: var(--ow-knob);
     box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18);
     pointer-events: auto;
     cursor: grab;
@@ -2613,7 +2735,7 @@
 }
 
 /* components/Tooltip/Tooltip.css */
-/* Tooltip: a small dark label in the top layer, above the child (or below when there's no room). */
+/* Tooltip: a small dark label in the top layer, on the side of the child it prefers (or the other side when there's no room). */
 .ow-tooltip {
     display: inline-flex;
 }
@@ -2625,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;
@@ -3083,7 +3205,7 @@
     display: grid;
     min-width: 0;
     flex: 1;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
     padding-top: 5px;
 }
 
@@ -3608,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);
@@ -3867,7 +3989,7 @@
 .ow-disclosure__titles {
     display: grid;
     min-width: 0;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-disclosure__title {
@@ -4212,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 {
@@ -4361,7 +4483,7 @@
 
 .ow-choice__text {
     display: grid;
-    gap: var(--ow-space-3xs);
+    gap: var(--ow-space-2xs);
 }
 
 .ow-choice__title {
@@ -4417,6 +4539,19 @@
     font-size: 13px;
 }
 
+.ow-avatar--xl {
+    width: 48px;
+    height: 48px;
+    font-size: 17px;
+}
+
+/* Any size in pixels, through --ow-avatar-size: the initials stay in proportion. */
+.ow-avatar--custom {
+    width: var(--ow-avatar-size);
+    height: var(--ow-avatar-size);
+    font-size: calc(var(--ow-avatar-size) * 0.36);
+}
+
 .ow-avatar__image {
     width: 100%;
     height: 100%;
@@ -4453,6 +4588,18 @@
     gap: var(--ow-space-md);
 }
 
+.ow-user--xl {
+    gap: var(--ow-space-lg);
+}
+
+.ow-user--xl .ow-user__name {
+    font-size: 15px;
+}
+
+.ow-user--xl .ow-user__description {
+    font-size: 13px;
+}
+
 .ow-user__text {
     display: grid;
     min-width: 0;
@@ -5297,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/tailwind.css

@@ -83,6 +83,7 @@
     --color-key-ground: var(--ow-key-ground);
     --color-track: var(--ow-track);
     --color-thumb: var(--ow-thumb);
+    --color-knob: var(--ow-knob);
     --color-meter-track: var(--ow-meter-track);
     --color-progress: var(--ow-progress);
     --color-code-block: var(--ow-code-block);

package/dist/tokens.css

@@ -82,6 +82,7 @@
     --ow-key-ground: var(--ow-gray-50);
     --ow-track: var(--ow-gray-100);
     --ow-thumb: #ffffff;
+    --ow-knob: #ffffff;
     --ow-meter-track: var(--ow-gray-200);
     --ow-progress: var(--ow-brand-600);
     --ow-code-block: #15171c;
@@ -158,6 +159,7 @@
     --ow-key-ground: #22262e;
     --ow-track: #14161b;
     --ow-thumb: #2f3541;
+    --ow-knob: #e4e7ec;
     --ow-meter-track: #2c313a;
     --ow-progress: var(--ow-brand-400);
     --ow-code-block-border: #2c313a;
@@ -230,6 +232,7 @@
         --ow-key-ground: #22262e;
         --ow-track: #14161b;
         --ow-thumb: #2f3541;
+        --ow-knob: #e4e7ec;
         --ow-meter-track: #2c313a;
         --ow-progress: var(--ow-brand-400);
         --ow-code-block-border: #2c313a;
@@ -251,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

@@ -556,7 +556,7 @@
           "light": "{ow-gray-100}",
           "dark": "#14161b"
         },
-        "usage": "The well behind segmented controls and segmented tabs."
+        "usage": "The well behind segmented controls and segmented tabs, edged with ow-border so it shows on the canvas too."
       },
       {
         "name": "ow-thumb",
@@ -566,6 +566,14 @@
         },
         "usage": "The selected segment in a segmented control or segmented tabs; ow-text on it."
       },
+      {
+        "name": "ow-knob",
+        "value": {
+          "light": "#ffffff",
+          "dark": "#e4e7ec"
+        },
+        "usage": "Switch knobs and slider thumbs: white in light, a softer white in dark so it doesn't glare. Its shadow separates it from the ground."
+      },
       {
         "name": "ow-meter-track",
         "value": {
@@ -824,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.1.1",
+  "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",