@eos-ui/tokens 0.2.0 → 0.2.1

package/dist/generated/defaults.d.ts

@@ -54,7 +54,7 @@ export declare const defaults: {
     readonly measure: "62ch";
     readonly "stroke-hair": "1px";
     readonly "stroke-card": "1px";
-    readonly "stroke-edge": "1.5px";
+    readonly "stroke-edge": "1px";
     readonly "stroke-focus": "2px";
     readonly "focus-gap": "2px";
     readonly "focus-gap-field": "calc(-1 * var(--e-stroke-edge))";

package/dist/generated/defaults.js

@@ -55,7 +55,7 @@ export const defaults = {
     "measure": "62ch",
     "stroke-hair": "1px",
     "stroke-card": "1px",
-    "stroke-edge": "1.5px",
+    "stroke-edge": "1px",
     "stroke-focus": "2px",
     "focus-gap": "2px",
     "focus-gap-field": "calc(-1 * var(--e-stroke-edge))",
@@ -225,7 +225,7 @@ export const usage = {
     "measure": "Longest comfortable line of copy.",
     "stroke-hair": "Dividers and the rule between rows.",
     "stroke-card": "The outline of a card, panel, table or other container that is not clickable, and of a chip or stamp. Follows the hairline; a bold elevation draws it at 2px unless `strokes.card` sets it.",
-    "stroke-edge": "The outline of a control, chip or stamp. 1.5 times the hairline unless `strokes.edge` sets it.",
+    "stroke-edge": "The outline of a control, chip or stamp. The same as the hairline unless `strokes.edge` sets it (a whole number of pixels, rounded down from 1.5 times a custom hairline), so the border and the outline laid over it line up in every browser.",
     "stroke-focus": "The focus outline.",
     "focus-gap": "Space between a button or link and its focus outline.",
     "focus-gap-field": "Space between a text input and its focus outline: minus the control border, so the outline lies exactly over the border with no seam, whatever its width.",

package/dist/theme.d.ts

@@ -35,7 +35,7 @@ export interface ThemeInput {
     textScale?: number;
     /** Multiplier for the spacing scale, `space-1` to `space-8`. 1 is the default scale; non-finite or non-positive values are ignored. */
     spaceScale?: number;
-    /** Line weights in px. `hair` sets `stroke-hair`, `stroke-card` and `stroke-edge` (1.5 times it); `focus` sets `stroke-focus` and `focus-gap` (the same). `edge` and `card` set `stroke-edge` (controls) and `stroke-card` (containers, chips) outright and win over what `hair` and a bold `elevation` give. `focus-gap-field` always follows `stroke-edge` in CSS (minus the border width), so a field's focus outline sits exactly over its border. */
+    /** Line weights in px. `hair` sets `stroke-hair`, `stroke-card` and `stroke-edge` (1.5 times it, rounded down to whole pixels); `focus` sets `stroke-focus` and `focus-gap` (the same). `edge` and `card` set `stroke-edge` (controls) and `stroke-card` (containers, chips) outright and win over what `hair` and a bold `elevation` give. `focus-gap-field` always follows `stroke-edge` in CSS (minus the border width), so a field's focus outline sits exactly over its border. */
     strokes?: {
         hair?: number;
         focus?: number;

package/dist/theme.js

@@ -59,7 +59,7 @@ function deriveStrokes(input, out) {
     if (hair !== undefined) {
         out["stroke-hair"] = px(hair);
         out["stroke-card"] = px(hair);
-        out["stroke-edge"] = px(hair * 1.5);
+        out["stroke-edge"] = px(Math.max(1, Math.floor(hair * 1.5)));
     }
     if (focus !== undefined) {
         out["stroke-focus"] = px(focus);

package/dist/tokens.css

@@ -57,7 +57,7 @@
   --e-measure: 62ch;
   --e-stroke-hair: 1px;
   --e-stroke-card: 1px;
-  --e-stroke-edge: 1.5px;
+  --e-stroke-edge: 1px;
   --e-stroke-focus: 2px;
   --e-focus-gap: 2px;
   --e-focus-gap-field: calc(-1 * var(--e-stroke-edge));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eos-ui/tokens",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Eos design tokens: CSS custom properties, typed values and a theme generator with contrast checks.",
   "type": "module",
   "license": "MIT",

package/src/tokens.json

@@ -484,8 +484,8 @@
       },
       {
         "name": "stroke-edge",
-        "value": "1.5px",
-        "usage": "The outline of a control, chip or stamp. 1.5 times the hairline unless `strokes.edge` sets it.",
+        "value": "1px",
+        "usage": "The outline of a control, chip or stamp. The same as the hairline unless `strokes.edge` sets it (a whole number of pixels, rounded down from 1.5 times a custom hairline), so the border and the outline laid over it line up in every browser.",
         "from": "strokes"
       },
       {