@openwarelabs/ui 0.10.1 → 0.11.1

package/dist/styles.css

@@ -268,7 +268,10 @@
     --ow-space-6xl: 26px;
     --ow-space-7xl: 28px;
     --ow-page-max: 1200px;
+    --ow-page-narrow: 720px;
+    --ow-page-wide: 1440px;
     --ow-page-gutter: 20px;
+    --ow-page-gutter-wide: 32px;
     --ow-header-height: 56px;
     --ow-section-y: 96px;
     --ow-radius-sm: 4px;
@@ -2430,7 +2433,8 @@
 
 .ow-slider__control {
     position: relative;
-    height: 20px;
+    /* 24px tall so each handle's input is a big enough target to tap (WCAG 2.2 target size). */
+    height: 24px;
 }
 
 /* The track runs between the thumb's centre at each end (9px in), so the fill meets the thumb exactly. */
@@ -2476,12 +2480,12 @@
 }
 
 .ow-slider__input::-webkit-slider-runnable-track {
-    height: 20px;
+    height: 24px;
     background: transparent;
 }
 
 .ow-slider__input::-moz-range-track {
-    height: 20px;
+    height: 24px;
     background: transparent;
 }
 
@@ -2489,7 +2493,7 @@
     box-sizing: border-box;
     width: 18px;
     height: 18px;
-    margin-top: 1px;
+    margin-top: 3px;
     appearance: none;
     border: 1px solid var(--ow-border-strong);
     border-radius: 50%;
@@ -6639,6 +6643,73 @@
     outline-offset: 2px;
 }
 
+/* components/Container/Container.css */
+/* The page's width and side margins, the same as every block's: the content is at most the size's width, inside a
+   32px gutter (the phone gutter under 760px). */
+
+.ow-container {
+    box-sizing: border-box;
+    width: 100%;
+    margin-inline: auto;
+    padding-inline: var(--ow-page-gutter-wide);
+}
+
+.ow-container--page {
+    max-width: calc(var(--ow-page-max) + 2 * var(--ow-page-gutter-wide));
+}
+
+.ow-container--narrow {
+    max-width: calc(var(--ow-page-narrow) + 2 * var(--ow-page-gutter-wide));
+}
+
+.ow-container--wide {
+    max-width: calc(var(--ow-page-wide) + 2 * var(--ow-page-gutter-wide));
+}
+
+@media (max-width: 760px) {
+    .ow-container {
+        padding-inline: var(--ow-page-gutter);
+    }
+}
+
+/* components/Section/Section.css */
+/* A band of the page: a block's vertical space and ground, full width. Its Container sets the width inside. */
+
+.ow-section {
+    box-sizing: border-box;
+    width: 100%;
+    color: var(--ow-text);
+}
+
+.ow-section--paper {
+    background: var(--ow-paper);
+}
+
+.ow-section--canvas {
+    background: var(--ow-canvas);
+}
+
+.ow-section--surface {
+    background: var(--ow-surface);
+}
+
+.ow-section--space-md {
+    padding-block: var(--ow-section-y);
+}
+
+.ow-section--space-sm {
+    padding-block: calc(var(--ow-section-y) / 2);
+}
+
+@media (max-width: 760px) {
+    .ow-section--space-md {
+        padding-block: 72px;
+    }
+    .ow-section--space-sm {
+        padding-block: 36px;
+    }
+}
+
 /* components/Marketing/Marketing.css */
 /* Marketing patterns from the site: Chip, SectionHeading, SiteHeader and the dot grid. */
 .ow-chip {

package/dist/tokens.css

@@ -268,7 +268,10 @@
     --ow-space-6xl: 26px;
     --ow-space-7xl: 28px;
     --ow-page-max: 1200px;
+    --ow-page-narrow: 720px;
+    --ow-page-wide: 1440px;
     --ow-page-gutter: 20px;
+    --ow-page-gutter-wide: 32px;
     --ow-header-height: 56px;
     --ow-section-y: 96px;
     --ow-radius-sm: 4px;

package/dist/tokens.json

@@ -900,11 +900,26 @@
         "value": "1200px",
         "usage": "Marketing pages' content width cap."
       },
+      {
+        "name": "ow-page-narrow",
+        "value": "720px",
+        "usage": "Reading width: an article, a form, a settings page (Container size narrow)."
+      },
+      {
+        "name": "ow-page-wide",
+        "value": "1440px",
+        "usage": "Wide pages that need room: dashboards and big tables (Container size wide)."
+      },
       {
         "name": "ow-page-gutter",
         "value": "20px",
         "usage": "Page side gutter on phones; 32px from 768px up."
       },
+      {
+        "name": "ow-page-gutter-wide",
+        "value": "32px",
+        "usage": "Page side gutter from 760px up, as every block and Container uses."
+      },
       {
         "name": "ow-header-height",
         "value": "56px",

package/package.json

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