@pearpages/pulp-tokens 0.2.1 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pearpages/pulp-tokens",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "pulp design tokens. W3C Design Tokens (DTCG) JSON in, CSS custom properties and a resolved JSON manifest out. Two brands, light and dark via light-dark().",
   "license": "MIT",
   "author": "Pere Pages <hello@pearpages.com> (https://pearpages.com)",
@@ -18,6 +18,12 @@
   "exports": {
     "./tokens.css": "./dist/tokens.css",
     "./tokens.json": "./dist/tokens.json",
+    "./theme.css": "./dist/theme.css",
+    "./native": {
+      "types": "./dist/native.d.ts",
+      "import": "./dist/native.js",
+      "require": "./dist/native.cjs"
+    },
     "./package.json": "./package.json"
   },
   "devDependencies": {

package/tokens/component/avatar.json

@@ -0,0 +1,26 @@
+{
+  "$description": "Avatar component tokens. Reference the semantic layer only.",
+  "avatar": {
+    "size": {
+      "$type": "dimension",
+      "$description": "sm and md are the control heights, so an avatar lines up with a button in a row. lg and xl are multiples of them: they follow a brand's density.",
+      "sm": { "$value": "{size.control.sm}" },
+      "md": { "$value": "{size.control.md}" },
+      "lg": { "$value": "{size.control.md}", "$extensions": { "com.pearpages.pulp": { "multiply": 1.4 } } },
+      "xl": { "$value": "{size.control.lg}", "$extensions": { "com.pearpages.pulp": { "multiply": 2 } } }
+    },
+    "font-size": {
+      "$type": "dimension",
+      "sm": { "$value": "{font.size.xs}" },
+      "md": { "$value": "{font.size.sm}" },
+      "lg": { "$value": "{font.size.lg}" },
+      "xl": { "$value": "{font.size.2xl}" }
+    },
+    "bg": { "$type": "color", "$value": "{color.status.neutral-subtle}" },
+    "border": { "$type": "color", "$description": "Fallback only: the subtle fill barely separates from the base surface in light schemes.", "$value": "{color.border.default}" },
+    "border-width": { "$type": "dimension", "$value": "{size.hairline}" },
+    "fg": { "$type": "color", "$value": "{color.status.neutral-text}" },
+    "weight": { "$type": "fontWeight", "$value": "{font.weight.semibold}" },
+    "radius": { "$type": "dimension", "$value": "{radius.full}" }
+  }
+}

package/tokens/component/badge.json

@@ -1,5 +1,5 @@
 {
-  "$description": "Badge component tokens: tone \u00d7 variant onto the status layer.",
+  "$description": "Badge component tokens: tone × variant onto the status layer.",
   "badge": {
     "radius": {
       "$type": "dimension",
@@ -148,6 +148,11 @@
           "$value": "{color.status.error-text}"
         }
       }
+    },
+    "dot-size": {
+      "$type": "dimension",
+      "$description": "variant=\"dot\": a presence mark with no text.",
+      "$value": "{space.2}"
     }
   }
 }

package/tokens/component/button.json

@@ -94,6 +94,28 @@
         "$value": "{color.action.primary-quiet}"
       }
     },
+    "danger": {
+      "$type": "color",
+      "$description": "tone=\"danger\". Filled for the primary variant; the quiet variants keep their shape and take the error text colour.",
+      "bg": {
+        "$value": "{color.status.error}"
+      },
+      "bg-hover": {
+        "$value": "{color.status.error-hover}"
+      },
+      "bg-active": {
+        "$value": "{color.status.error-active}"
+      },
+      "fg": {
+        "$value": "{color.status.on-error}"
+      },
+      "text": {
+        "$value": "{color.status.error-text}"
+      },
+      "quiet-bg-hover": {
+        "$value": "{color.status.error-subtle}"
+      }
+    },
     "focus": {
       "ring": {
         "$type": "color",

package/tokens/component/chip.json

@@ -0,0 +1,49 @@
+{
+  "$description": "Chip component tokens. Reference the semantic layer only.",
+  "chip": {
+    "height": {
+      "$type": "dimension",
+      "$description": "sm is 24px at the default density: the WCAG 2.2 minimum target size, not below it.",
+      "sm": { "$value": "{space.5}" },
+      "md": { "$value": "{size.control.sm}" },
+      "lg": { "$value": "{size.control.md}" }
+    },
+    "padding-x": {
+      "$type": "dimension",
+      "sm": { "$value": "{space.2}" },
+      "md": { "$value": "{space.3}" },
+      "lg": { "$value": "{space.4}" }
+    },
+    "gap": { "$type": "dimension", "$value": "{space.1}" },
+    "font-size": {
+      "$type": "dimension",
+      "sm": { "$value": "{font.size.xs}" },
+      "md": { "$value": "{font.size.sm}" },
+      "lg": { "$value": "{font.size.md}" }
+    },
+    "weight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
+    "radius": { "$type": "dimension", "$value": "{radius.full}" },
+    "border-width": { "$type": "dimension", "$value": "{size.hairline}" },
+    "neutral": {
+      "$type": "color",
+      "bg": { "$value": "{color.action.secondary}" },
+      "bg-hover": { "$value": "{color.action.secondary-hover}" },
+      "fg": { "$value": "{color.text.default}" },
+      "border": { "$value": "{color.border.default}" },
+      "selected-bg": { "$value": "{color.surface.inverse}" },
+      "selected-fg": { "$value": "{color.text.on-inverse}" }
+    },
+    "action": {
+      "$type": "color",
+      "bg": { "$value": "{color.action.primary-quiet}" },
+      "bg-hover": { "$value": "{color.action.primary-quiet}" },
+      "fg": { "$value": "{color.action.text}" },
+      "border": { "$value": "{color.action.primary-quiet}" },
+      "selected-bg": { "$value": "{color.action.primary}" },
+      "selected-fg": { "$value": "{color.text.on-action}" }
+    },
+    "focus-ring": { "$type": "color", "$value": "{color.border.focus}" },
+    "focus-ring-width": { "$type": "dimension", "$value": "{focus.ring.width}" },
+    "focus-ring-offset": { "$type": "dimension", "$value": "{focus.ring.offset}" }
+  }
+}

package/tokens/component/combobox.json

@@ -87,6 +87,11 @@
       "duration": {
         "$type": "duration",
         "$value": "{motion.duration.fast}"
+      },
+      "bg": {
+        "$type": "color",
+        "$description": "The list floats: the overlay surface, not the inline Listbox's.",
+        "$value": "{color.surface.overlay}"
       }
     },
     "focus": {

package/tokens/component/date-picker.json

@@ -130,7 +130,7 @@
     "dialog": {
       "bg": {
         "$type": "color",
-        "$value": "{color.surface.raised}"
+        "$value": "{color.surface.overlay}"
       },
       "border": {
         "$type": "color",

package/tokens/component/dialog.json

@@ -1,36 +1,105 @@
 {
   "$description": "Dialog component tokens: the pulp side of the mapping onto @pearpages/modals. The vendor reads --modal-*; Dialog.module.css sets those from these --dialog-* tokens on the portal root.",
   "dialog": {
-    "surface": { "$type": "color", "$value": "{color.surface.raised}" },
-    "surface-subtle": { "$type": "color", "$value": "{color.surface.sunken}" },
-    "fg": { "$type": "color", "$value": "{color.text.default}" },
-    "fg-muted": { "$type": "color", "$value": "{color.text.muted}" },
-    "backdrop": { "$type": "color", "$value": "{color.overlay.backdrop}" },
-    "border": { "$type": "color", "$value": "{color.border.default}" },
-    "border-hover": { "$type": "color", "$value": "{color.border.strong}" },
-    "focus": { "$type": "color", "$value": "{color.border.focus}" },
-    "radius": { "$type": "dimension", "$value": "{radius.surface}" },
-    "shadow": { "$type": "shadow", "$value": "{shadow.overlay}" },
-    "padding": { "$type": "dimension", "$value": "{space.5}" },
-    "gap": { "$type": "dimension", "$value": "{space.3}" },
-    "font-family": { "$type": "fontFamily", "$value": "{font.family.body}" },
+    "surface": {
+      "$type": "color",
+      "$value": "{color.surface.overlay}"
+    },
+    "surface-subtle": {
+      "$type": "color",
+      "$value": "{color.surface.sunken}"
+    },
+    "fg": {
+      "$type": "color",
+      "$value": "{color.text.default}"
+    },
+    "fg-muted": {
+      "$type": "color",
+      "$value": "{color.text.muted}"
+    },
+    "backdrop": {
+      "$type": "color",
+      "$value": "{color.overlay.backdrop}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{color.border.default}"
+    },
+    "border-hover": {
+      "$type": "color",
+      "$value": "{color.border.strong}"
+    },
+    "focus": {
+      "$type": "color",
+      "$value": "{color.border.focus}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.surface}"
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": "{shadow.overlay}"
+    },
+    "padding": {
+      "$type": "dimension",
+      "$value": "{space.5}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "font-family": {
+      "$type": "fontFamily",
+      "$value": "{font.family.body}"
+    },
     "title": {
-      "font-size": { "$type": "dimension", "$value": "{font.size.lg}" },
-      "font-weight": { "$type": "fontWeight", "$value": "{font.weight.semibold}" },
-      "font-family": { "$type": "fontFamily", "$value": "{font.family.display}" }
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.lg}"
+      },
+      "font-weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.semibold}"
+      },
+      "font-family": {
+        "$type": "fontFamily",
+        "$value": "{font.family.display}"
+      }
     },
     "description": {
-      "font-size": { "$type": "dimension", "$value": "{font.size.sm}" }
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.sm}"
+      }
     },
     "close": {
-      "bg": { "$type": "color", "$value": "{color.action.secondary}" },
-      "bg-hover": { "$type": "color", "$value": "{color.action.secondary-hover}" },
-      "fg": { "$type": "color", "$value": "{color.text.muted}" },
-      "fg-hover": { "$type": "color", "$value": "{color.text.default}" }
+      "bg": {
+        "$type": "color",
+        "$value": "{color.action.secondary}"
+      },
+      "bg-hover": {
+        "$type": "color",
+        "$value": "{color.action.secondary-hover}"
+      },
+      "fg": {
+        "$type": "color",
+        "$value": "{color.text.muted}"
+      },
+      "fg-hover": {
+        "$type": "color",
+        "$value": "{color.text.default}"
+      }
     },
     "motion": {
-      "duration": { "$type": "duration", "$value": "{motion.duration.base}" },
-      "easing": { "$type": "cubicBezier", "$value": "{motion.easing.standard}" }
+      "duration": {
+        "$type": "duration",
+        "$value": "{motion.duration.base}"
+      },
+      "easing": {
+        "$type": "cubicBezier",
+        "$value": "{motion.easing.standard}"
+      }
     }
   }
 }

package/tokens/component/divider.json

@@ -0,0 +1,13 @@
+{
+  "$description": "Divider component tokens. Reference the semantic layer only.",
+  "divider": {
+    "color": { "$type": "color", "$value": "{color.border.default}" },
+    "thickness": { "$type": "dimension", "$value": "{size.hairline}" },
+    "spacing": {
+      "$type": "dimension",
+      "sm": { "$value": "{space.2}" },
+      "md": { "$value": "{space.4}" },
+      "lg": { "$value": "{space.6}" }
+    }
+  }
+}

package/tokens/component/empty-state.json

@@ -0,0 +1,15 @@
+{
+  "$description": "EmptyState component tokens. Reference the semantic layer only. Type comes from Heading and Text.",
+  "empty-state": {
+    "padding": { "$type": "dimension", "$value": "{space.6}" },
+    "icon": {
+      "size": { "$type": "dimension", "$description": "The disc the glyph sits in.", "$value": "{size.control.lg}" },
+      "glyph-size": { "$type": "dimension", "$value": "{font.size.xl}" },
+      "radius": { "$type": "dimension", "$value": "{radius.full}" },
+      "neutral-bg": { "$type": "color", "$value": "{color.status.neutral-subtle}" },
+      "neutral-fg": { "$type": "color", "$value": "{color.status.neutral-text}" },
+      "error-bg": { "$type": "color", "$value": "{color.status.error-subtle}" },
+      "error-fg": { "$type": "color", "$value": "{color.status.error-text}" }
+    }
+  }
+}

package/tokens/component/link.json

@@ -0,0 +1,45 @@
+{
+  "$description": "Link component tokens. Reference the semantic layer only.",
+  "link": {
+    "tone": {
+      "$type": "color",
+      "action": {
+        "$value": "{color.action.text}"
+      },
+      "default": {
+        "$value": "{color.text.default}"
+      },
+      "muted": {
+        "$value": "{color.text.muted}"
+      }
+    },
+    "hover": {
+      "$type": "color",
+      "$value": "{color.text.default}"
+    },
+    "weight": {
+      "$type": "fontWeight",
+      "$value": "{font.weight.medium}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.control}"
+    },
+    "focus-ring-width": {
+      "$type": "dimension",
+      "$value": "{focus.ring.width}"
+    },
+    "focus-ring-offset": {
+      "$type": "dimension",
+      "$value": "{focus.ring.offset}"
+    },
+    "focus-ring-color": {
+      "$type": "color",
+      "$value": "{color.border.focus}"
+    },
+    "duration": {
+      "$type": "duration",
+      "$value": "{motion.duration.fast}"
+    }
+  }
+}

package/tokens/component/menu.json

@@ -3,7 +3,7 @@
   "menu": {
     "bg": {
       "$type": "color",
-      "$value": "{color.surface.raised}"
+      "$value": "{color.surface.overlay}"
     },
     "fg": {
       "$type": "color",

package/tokens/component/picker.json

@@ -87,6 +87,11 @@
       "duration": {
         "$type": "duration",
         "$value": "{motion.duration.fast}"
+      },
+      "bg": {
+        "$type": "color",
+        "$description": "The list floats: the overlay surface, not the inline Listbox's.",
+        "$value": "{color.surface.overlay}"
       }
     },
     "focus": {

package/tokens/component/popover.json

@@ -3,7 +3,7 @@
   "popover": {
     "bg": {
       "$type": "color",
-      "$value": "{color.surface.raised}"
+      "$value": "{color.surface.overlay}"
     },
     "fg": {
       "$type": "color",

package/tokens/component/segmented-control.json

@@ -0,0 +1,49 @@
+{
+  "$description": "SegmentedControl component tokens. Reference the semantic layer only.",
+  "segmented-control": {
+    "height": {
+      "$type": "dimension",
+      "sm": { "$value": "{size.control.sm}" },
+      "md": { "$value": "{size.control.md}" }
+    },
+    "padding-x": {
+      "$type": "dimension",
+      "sm": { "$value": "{space.3}" },
+      "md": { "$value": "{space.4}" }
+    },
+    "font-size": {
+      "$type": "dimension",
+      "sm": { "$value": "{font.size.sm}" },
+      "md": { "$value": "{font.size.md}" }
+    },
+    "gap": { "$type": "dimension", "$value": "{space.2}" },
+    "inset": { "$type": "dimension", "$description": "The track's padding around the segments.", "$value": "{space.1}" },
+    "weight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
+    "fg": { "$type": "color", "$value": "{color.text.muted}" },
+    "fg-hover": { "$type": "color", "$value": "{color.text.default}" },
+    "border-width": { "$type": "dimension", "$value": "{size.hairline}" },
+    "track": {
+      "bg": { "$type": "color", "$value": "{color.surface.sunken}" },
+      "border": { "$type": "color", "$value": "{color.border.default}" },
+      "radius": { "$type": "dimension", "$value": "{radius.control}" }
+    },
+    "segment": {
+      "radius": { "$type": "dimension", "$value": "{radius.control}" },
+      "selected-bg": { "$type": "color", "$value": "{color.surface.raised}" },
+      "selected-fg": { "$type": "color", "$value": "{color.text.default}" },
+      "selected-border": { "$type": "color", "$description": "Raised on sunken is a faint step in dark schemes; the edge is what marks the thumb.", "$value": "{color.border.strong}" },
+      "selected-shadow": { "$type": "shadow", "$value": "{shadow.raised}" }
+    },
+    "chip": {
+      "radius": { "$type": "dimension", "$value": "{radius.full}" },
+      "bg": { "$type": "color", "$value": "{color.surface.raised}" },
+      "border": { "$type": "color", "$value": "{color.border.default}" },
+      "selected-bg": { "$type": "color", "$value": "{color.action.primary-quiet}" },
+      "selected-fg": { "$type": "color", "$value": "{color.action.text}" },
+      "selected-border": { "$type": "color", "$value": "{color.action.text}" }
+    },
+    "focus-ring": { "$type": "color", "$value": "{color.border.focus}" },
+    "focus-ring-width": { "$type": "dimension", "$value": "{focus.ring.width}" },
+    "focus-ring-offset": { "$type": "dimension", "$value": "{focus.ring.offset}" }
+  }
+}

package/tokens/component/sheet.json

@@ -1,8 +1,45 @@
 {
   "$description": "Sheet component tokens: the size side of the mapping onto @pearpages/modals. The vendor docks the dialog and reads --modal-width-sheet, --modal-height-sheet and --modal-animation-translate-sheet; Sheet.module.css sets those from these --sheet-* tokens on the dialog element. Colour, type and motion timing are Dialog's.",
   "sheet": {
-    "width": { "$type": "dimension", "$value": "{size.sheet-width}" },
-    "height": { "$type": "dimension", "$value": "{size.sheet-height}" },
-    "motion-translate": { "$type": "dimension", "$value": "{space.5}" }
+    "width": {
+      "$type": "dimension",
+      "$value": "{size.sheet-width}"
+    },
+    "height": {
+      "$type": "dimension",
+      "$value": "{size.sheet-height}"
+    },
+    "motion-translate": {
+      "$type": "dimension",
+      "$value": "{space.5}"
+    },
+    "handle": {
+      "$description": "The grab handle of a bottom sheet that can be dragged to dismiss.",
+      "width": {
+        "$type": "dimension",
+        "$value": "{space.7}"
+      },
+      "height": {
+        "$type": "dimension",
+        "$value": "{space.1}"
+      },
+      "hit-height": {
+        "$type": "dimension",
+        "$description": "The strip that starts the drag: 24px at the default density, the minimum target.",
+        "$value": "{space.5}"
+      },
+      "bg": {
+        "$type": "color",
+        "$value": "{color.border.strong}"
+      },
+      "radius": {
+        "$type": "dimension",
+        "$value": "{radius.full}"
+      },
+      "snap-duration": {
+        "$type": "duration",
+        "$value": "{motion.duration.base}"
+      }
+    }
   }
 }

package/tokens/component/text-field.json

@@ -85,6 +85,22 @@
         "$type": "duration",
         "$value": "{motion.duration.fast}"
       }
+    },
+    "icon": {
+      "fg": {
+        "$type": "color",
+        "$description": "The leading glyph and the clear button at rest.",
+        "$value": "{color.text.muted}"
+      },
+      "fg-hover": {
+        "$type": "color",
+        "$value": "{color.text.default}"
+      },
+      "gap": {
+        "$type": "dimension",
+        "$description": "Between the glyph and the text.",
+        "$value": "{space.2}"
+      }
     }
   }
 }

package/tokens/primitives/bitepals.json

@@ -161,9 +161,15 @@
       "100": {
         "$value": "#fde7e7"
       },
+      "200": {
+        "$value": "#ff9797"
+      },
       "300": {
         "$value": "#ff6b6b"
       },
+      "400": {
+        "$value": "#ee6060"
+      },
       "500": {
         "$value": "#d64545"
       },
@@ -173,6 +179,9 @@
       "700": {
         "$value": "#a83333"
       },
+      "800": {
+        "$value": "#8a2a2a"
+      },
       "900": {
         "$value": "#3f1414"
       }

package/tokens/primitives/pulp.json

@@ -29,6 +29,7 @@
       }
     },
     "neutral": {
+      "$description": "Sixteen steps rather than the usual eleven: 450, 850, 975 and 1000 exist because the dark scheme needs three surfaces below 900 (raised, base, sunken). Derived from perepages.com. 450 is the faint text step that still meets AA on the dark raised surface.",
       "0": {
         "$value": "#ffffff"
       },
@@ -65,6 +66,9 @@
       "850": {
         "$value": "#262a35"
       },
+      "875": {
+        "$value": "#1a1e29"
+      },
       "900": {
         "$value": "#11141d"
       },
@@ -76,8 +80,7 @@
       },
       "1000": {
         "$value": "#05070b"
-      },
-      "$description": "Sixteen steps rather than the usual eleven: 450, 850, 975 and 1000 exist because the dark scheme needs three surfaces below 900 (raised, base, sunken). Derived from perepages.com. 450 is the faint text step that still meets AA on the dark raised surface."
+      }
     },
     "saffron": {
       "100": {
@@ -114,15 +117,24 @@
       "100": {
         "$value": "#fbe5e6"
       },
+      "200": {
+        "$value": "#ff9699"
+      },
       "300": {
         "$value": "#ff6b70"
       },
+      "400": {
+        "$value": "#ea5459"
+      },
       "500": {
         "$value": "#d0393e"
       },
       "700": {
         "$value": "#a52c30"
       },
+      "800": {
+        "$value": "#86242a"
+      },
       "900": {
         "$value": "#3d1113"
       }

package/tokens/semantic/bitepals.json

@@ -19,6 +19,15 @@
           }
         }
       },
+      "overlay": {
+        "$value": "{color.cream.100}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.ink.600}"
+          }
+        },
+        "$description": "What floats above the page: dialogs, sheets, popovers, menus. One step lighter than raised in dark schemes, where a shadow alone does not separate a menu from a card; in light it may equal raised."
+      },
       "sunken": {
         "$value": "{color.cream.400}",
         "$extensions": {
@@ -193,6 +202,24 @@
         },
         "$description": "One step darker than the brand red so white text on it meets AA."
       },
+      "error-hover": {
+        "$value": "{color.red.700}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.red.200}"
+          }
+        },
+        "$description": "A filled error surface under the pointer (a danger Button). Darkens in light, lightens in dark: away from its on-error text."
+      },
+      "error-active": {
+        "$value": "{color.red.800}",
+        "$extensions": {
+          "com.pearpages.pulp": {
+            "dark": "{color.red.400}"
+          }
+        },
+        "$description": "A filled error surface while pressed."
+      },
       "info": {
         "$value": "{color.blue.600}",
         "$extensions": {