@pearpages/pulp-tokens 0.0.0

package/tokens/component/combobox.json

@@ -0,0 +1,113 @@
+{
+  "$description": "Combobox component tokens: the input and its popover. Options are styled by --listbox-*.",
+  "combobox": {
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.control}"
+    },
+    "padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.2}",
+      "$description": "Between the control and its popover; carried as padding on the popover so no offset lives in code."
+    },
+    "height": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{size.control.sm}"
+      },
+      "md": {
+        "$value": "{size.control.md}"
+      },
+      "lg": {
+        "$value": "{size.control.lg}"
+      }
+    },
+    "font": {
+      "family": {
+        "$type": "fontFamily",
+        "$value": "{font.family.body}"
+      },
+      "size": {
+        "$type": "dimension",
+        "sm": {
+          "$value": "{font.size.sm}"
+        },
+        "md": {
+          "$value": "{font.size.md}"
+        },
+        "lg": {
+          "$value": "{font.size.lg}"
+        }
+      }
+    },
+    "bg": {
+      "$type": "color",
+      "$value": "{color.surface.raised}"
+    },
+    "fg": {
+      "$type": "color",
+      "$value": "{color.text.default}"
+    },
+    "placeholder": {
+      "$type": "color",
+      "$value": "{color.text.faint}"
+    },
+    "icon": {
+      "$type": "color",
+      "$value": "{color.text.muted}"
+    },
+    "icon-size": {
+      "$type": "dimension",
+      "$value": "{space.6}"
+    },
+    "border": {
+      "$type": "color",
+      "default": {
+        "$value": "{color.border.default}"
+      },
+      "hover": {
+        "$value": "{color.border.strong}"
+      },
+      "focus": {
+        "$value": "{color.border.focus}"
+      },
+      "invalid": {
+        "$value": "{color.status.error}"
+      }
+    },
+    "popover": {
+      "shadow": {
+        "$type": "shadow",
+        "$value": "{shadow.overlay}"
+      },
+      "duration": {
+        "$type": "duration",
+        "$value": "{motion.duration.fast}"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "{color.border.focus}"
+      },
+      "ring-width": {
+        "$type": "dimension",
+        "$value": "{focus.ring.width}"
+      },
+      "ring-offset": {
+        "$type": "dimension",
+        "$value": "{focus.ring.offset}"
+      }
+    },
+    "motion": {
+      "duration": {
+        "$type": "duration",
+        "$value": "{motion.duration.fast}"
+      }
+    }
+  }
+}

package/tokens/component/date-picker.json

@@ -0,0 +1,145 @@
+{
+  "$description": "DatePicker component tokens: the segmented date input, its calendar button and popover. The calendar itself is styled by --calendar-*.",
+  "date-picker": {
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.control}"
+    },
+    "padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.2}",
+      "$description": "Between the control and its popover; carried as padding on the popover so no offset lives in code."
+    },
+    "height": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{size.control.sm}"
+      },
+      "md": {
+        "$value": "{size.control.md}"
+      },
+      "lg": {
+        "$value": "{size.control.lg}"
+      }
+    },
+    "font": {
+      "family": {
+        "$type": "fontFamily",
+        "$value": "{font.family.body}"
+      },
+      "size": {
+        "$type": "dimension",
+        "sm": {
+          "$value": "{font.size.sm}"
+        },
+        "md": {
+          "$value": "{font.size.md}"
+        },
+        "lg": {
+          "$value": "{font.size.lg}"
+        }
+      }
+    },
+    "bg": {
+      "$type": "color",
+      "$value": "{color.surface.raised}"
+    },
+    "fg": {
+      "$type": "color",
+      "$value": "{color.text.default}"
+    },
+    "placeholder": {
+      "$type": "color",
+      "$value": "{color.text.faint}"
+    },
+    "icon": {
+      "$type": "color",
+      "$value": "{color.text.muted}"
+    },
+    "icon-size": {
+      "$type": "dimension",
+      "$value": "{space.6}"
+    },
+    "border": {
+      "$type": "color",
+      "default": {
+        "$value": "{color.border.default}"
+      },
+      "hover": {
+        "$value": "{color.border.strong}"
+      },
+      "focus": {
+        "$value": "{color.border.focus}"
+      },
+      "invalid": {
+        "$value": "{color.status.error}"
+      }
+    },
+    "popover": {
+      "shadow": {
+        "$type": "shadow",
+        "$value": "{shadow.overlay}"
+      },
+      "duration": {
+        "$type": "duration",
+        "$value": "{motion.duration.fast}"
+      }
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "{color.border.focus}"
+      },
+      "ring-width": {
+        "$type": "dimension",
+        "$value": "{focus.ring.width}"
+      },
+      "ring-offset": {
+        "$type": "dimension",
+        "$value": "{focus.ring.offset}"
+      }
+    },
+    "motion": {
+      "duration": {
+        "$type": "duration",
+        "$value": "{motion.duration.fast}"
+      }
+    },
+    "segment": {
+      "padding-inline": {
+        "$type": "dimension",
+        "$value": "{space.1}"
+      },
+      "radius": {
+        "$type": "dimension",
+        "$value": "{radius.control}"
+      },
+      "bg-focus": {
+        "$type": "color",
+        "$value": "{color.action.primary-quiet}"
+      },
+      "fg-placeholder": {
+        "$type": "color",
+        "$value": "{color.text.faint}"
+      }
+    },
+    "dialog": {
+      "bg": {
+        "$type": "color",
+        "$value": "{color.surface.raised}"
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border.default}"
+      },
+      "radius": {
+        "$type": "dimension",
+        "$value": "{radius.surface}"
+      }
+    }
+  }
+}

package/tokens/component/dialog.json

@@ -0,0 +1,36 @@
+{
+  "$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}" },
+    "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}" }
+    },
+    "description": {
+      "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}" }
+    },
+    "motion": {
+      "duration": { "$type": "duration", "$value": "{motion.duration.base}" },
+      "easing": { "$type": "cubicBezier", "$value": "{motion.easing.standard}" }
+    }
+  }
+}

package/tokens/component/field.json

@@ -0,0 +1,23 @@
+{
+  "$description": "Field component tokens: label, description and error wiring shared by every form control.",
+  "field": {
+    "gap": { "$type": "dimension", "$value": "{space.1}" },
+    "label": {
+      "fg": { "$type": "color", "$value": "{color.text.default}" },
+      "font-size": { "$type": "dimension", "$value": "{font.size.sm}" },
+      "font-weight": { "$type": "fontWeight", "$value": "{font.weight.medium}" }
+    },
+    "required": {
+      "fg": { "$type": "color", "$value": "{color.status.error-text}" },
+      "gap": { "$type": "dimension", "$value": "{space.1}" }
+    },
+    "description": {
+      "fg": { "$type": "color", "$value": "{color.text.muted}" },
+      "font-size": { "$type": "dimension", "$value": "{font.size.xs}" }
+    },
+    "error": {
+      "fg": { "$type": "color", "$value": "{color.status.error-text}" },
+      "font-size": { "$type": "dimension", "$value": "{font.size.xs}" }
+    }
+  }
+}

package/tokens/component/heading.json

@@ -0,0 +1,44 @@
+{
+  "$description": "Heading component tokens. Display family, tight leading, sizes from the type scale.",
+  "heading": {
+    "font-family": {
+      "$type": "fontFamily",
+      "$value": "{font.family.display}"
+    },
+    "font-weight": {
+      "$type": "fontWeight",
+      "$value": "{font.weight.semibold}"
+    },
+    "line-height": {
+      "$type": "number",
+      "$value": "{font.line-height.tight}"
+    },
+    "size": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{font.size.md}"
+      },
+      "md": {
+        "$value": "{font.size.lg}"
+      },
+      "lg": {
+        "$value": "{font.size.xl}"
+      },
+      "xl": {
+        "$value": "{font.size.2xl}"
+      },
+      "2xl": {
+        "$value": "{font.size.3xl}"
+      }
+    },
+    "tone": {
+      "$type": "color",
+      "default": {
+        "$value": "{color.text.default}"
+      },
+      "muted": {
+        "$value": "{color.text.muted}"
+      }
+    }
+  }
+}

package/tokens/component/icon-button.json

@@ -0,0 +1,17 @@
+{
+  "$description": "IconButton component tokens: a square Button.",
+  "icon-button": {
+    "size": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{size.control.sm}"
+      },
+      "md": {
+        "$value": "{size.control.md}"
+      },
+      "lg": {
+        "$value": "{size.control.lg}"
+      }
+    }
+  }
+}

package/tokens/component/icon.json

@@ -0,0 +1,18 @@
+{
+  "$description": "Icon component tokens: three sizes bound to the type scale so icons sit on text.",
+  "icon": {
+    "size": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{font.size.sm}"
+      },
+      "md": {
+        "$value": "{font.size.lg}"
+      },
+      "lg": {
+        "$value": "{font.size.xl}"
+      },
+      "$description": "One step above the text size an icon sits beside (md \u2192 font.size.lg next to md text): stroke glyphs read smaller than letters in the same box. Inside text-sized controls use Icon size=\"inherit\"."
+    }
+  }
+}

package/tokens/component/inline.json

@@ -0,0 +1,32 @@
+{
+  "$description": "Inline layout tokens: the spacing scale as gap steps.",
+  "inline": {
+    "gap": {
+      "$type": "dimension",
+      "1": {
+        "$value": "{space.1}"
+      },
+      "2": {
+        "$value": "{space.2}"
+      },
+      "3": {
+        "$value": "{space.3}"
+      },
+      "4": {
+        "$value": "{space.4}"
+      },
+      "5": {
+        "$value": "{space.5}"
+      },
+      "6": {
+        "$value": "{space.6}"
+      },
+      "7": {
+        "$value": "{space.7}"
+      },
+      "8": {
+        "$value": "{space.8}"
+      }
+    }
+  }
+}

package/tokens/component/listbox.json

@@ -0,0 +1,37 @@
+{
+  "$description": "Listbox component tokens. Also the option list inside Combobox and Picker, which render Listbox's options.",
+  "listbox": {
+    "bg": { "$type": "color", "$value": "{color.surface.raised}" },
+    "fg": { "$type": "color", "$value": "{color.text.default}" },
+    "border": { "$type": "color", "$value": "{color.border.default}" },
+    "radius": { "$type": "dimension", "$value": "{radius.surface}" },
+    "padding": { "$type": "dimension", "$value": "{space.1}" },
+    "max-height": { "$type": "dimension", "$value": "{size.listbox-height}" },
+    "font": {
+      "family": { "$type": "fontFamily", "$value": "{font.family.body}" },
+      "size": { "$type": "dimension", "$value": "{font.size.sm}" }
+    },
+    "empty": {
+      "fg": { "$type": "color", "$value": "{color.text.muted}" },
+      "padding": { "$type": "dimension", "$value": "{space.3}" }
+    },
+    "item": {
+      "padding-block": { "$type": "dimension", "$value": "{space.2}" },
+      "padding-inline": { "$type": "dimension", "$value": "{space.3}" },
+      "gap": { "$type": "dimension", "$value": "{space.2}" },
+      "radius": { "$type": "dimension", "$value": "{radius.control}" },
+      "fg": { "$type": "color", "$value": "{color.text.default}" },
+      "fg-muted": { "$type": "color", "$value": "{color.text.muted}" },
+      "fg-disabled": { "$type": "color", "$value": "{color.text.faint}" },
+      "bg-focus": { "$type": "color", "$value": "{color.action.primary-quiet}" },
+      "bg-selected": { "$type": "color", "$value": "{color.action.primary-quiet}" },
+      "check": { "$type": "color", "$value": "{color.action.text}" },
+      "description-font-size": { "$type": "dimension", "$value": "{font.size.xs}" }
+    },
+    "focus": {
+      "ring": { "$type": "color", "$value": "{color.border.focus}" },
+      "ring-width": { "$type": "dimension", "$value": "{focus.ring.width}" },
+      "ring-offset": { "$type": "dimension", "$value": "{focus.ring.offset}" }
+    }
+  }
+}

package/tokens/component/menu.json

@@ -0,0 +1,101 @@
+{
+  "$description": "Menu component tokens.",
+  "menu": {
+    "bg": {
+      "$type": "color",
+      "$value": "{color.surface.raised}"
+    },
+    "fg": {
+      "$type": "color",
+      "$value": "{color.text.default}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{color.border.default}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.surface}"
+    },
+    "padding": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "min-width": {
+      "$type": "dimension",
+      "$value": "{size.menu-width}"
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": "{shadow.overlay}"
+    },
+    "layer": {
+      "$type": "number",
+      "$value": "{layer.popover}"
+    },
+    "duration": {
+      "$type": "duration",
+      "$value": "{motion.duration.fast}"
+    },
+    "item": {
+      "padding-block": {
+        "$type": "dimension",
+        "$value": "{space.2}"
+      },
+      "padding-inline": {
+        "$type": "dimension",
+        "$value": "{space.3}"
+      },
+      "radius": {
+        "$type": "dimension",
+        "$value": "{radius.control}"
+      },
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.sm}"
+      },
+      "fg": {
+        "$type": "color",
+        "$value": "{color.text.default}"
+      },
+      "fg-muted": {
+        "$type": "color",
+        "$value": "{color.text.muted}"
+      },
+      "bg-active": {
+        "$type": "color",
+        "$value": "{color.action.primary-quiet}"
+      },
+      "fg-active": {
+        "$type": "color",
+        "$value": "{color.text.default}"
+      },
+      "fg-danger": {
+        "$type": "color",
+        "$value": "{color.status.error-text}"
+      }
+    },
+    "separator": {
+      "$type": "color",
+      "$value": "{color.border.default}"
+    },
+    "focus": {
+      "ring": {
+        "$type": "color",
+        "$value": "{color.border.focus}"
+      },
+      "ring-width": {
+        "$type": "dimension",
+        "$value": "{focus.ring.width}"
+      },
+      "ring-offset": {
+        "$type": "dimension",
+        "$value": "{focus.ring.offset}"
+      }
+    }
+  }
+}

package/tokens/component/pagination.json

@@ -0,0 +1,22 @@
+{
+  "$description": "Pagination component tokens. The page controls are Buttons; these cover the layout and the ellipsis.",
+  "pagination": {
+    "gap": { "$type": "dimension", "$value": "{space.1}" },
+    "font": {
+      "family": { "$type": "fontFamily", "$value": "{font.family.body}" },
+      "size": {
+        "$type": "dimension",
+        "sm": { "$value": "{font.size.sm}" },
+        "md": { "$value": "{font.size.md}" }
+      }
+    },
+    "ellipsis": {
+      "fg": { "$type": "color", "$value": "{color.text.muted}" },
+      "size": {
+        "$type": "dimension",
+        "sm": { "$value": "{size.control.sm}" },
+        "md": { "$value": "{size.control.md}" }
+      }
+    }
+  }
+}