@pearpages/pulp-tokens 0.0.0

package/tokens/component/picker.json

@@ -0,0 +1,113 @@
+{
+  "$description": "Picker component tokens: the trigger button and its popover. Options are styled by --listbox-*.",
+  "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}"
+      }
+    }
+  }
+}

package/tokens/component/popover.json

@@ -0,0 +1,59 @@
+{
+  "$description": "Popover component tokens.",
+  "popover": {
+    "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.4}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "width": {
+      "$type": "dimension",
+      "$value": "{size.popover-width}"
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": "{shadow.overlay}"
+    },
+    "layer": {
+      "$type": "number",
+      "$value": "{layer.popover}"
+    },
+    "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}"
+      }
+    }
+  }
+}

package/tokens/component/progress.json

@@ -0,0 +1,60 @@
+{
+  "$description": "Progress component tokens.",
+  "progress": {
+    "height": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{space.1}"
+      },
+      "md": {
+        "$value": "{space.2}"
+      }
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.full}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "track": {
+      "$type": "color",
+      "$value": "{color.surface.sunken}"
+    },
+    "label-font-size": {
+      "$type": "dimension",
+      "$value": "{font.size.sm}"
+    },
+    "label-fg": {
+      "$type": "color",
+      "$value": "{color.text.default}"
+    },
+    "value-fg": {
+      "$type": "color",
+      "$value": "{color.text.muted}"
+    },
+    "indicator": {
+      "primary": {
+        "$type": "color",
+        "$value": "{color.action.primary}"
+      },
+      "success": {
+        "$type": "color",
+        "$value": "{color.status.success}"
+      },
+      "warning": {
+        "$type": "color",
+        "$value": "{color.status.warning}"
+      },
+      "error": {
+        "$type": "color",
+        "$value": "{color.status.error}"
+      }
+    },
+    "duration": {
+      "$type": "duration",
+      "$value": "{motion.duration.base}"
+    }
+  }
+}

package/tokens/component/radio.json

@@ -0,0 +1,73 @@
+{
+  "$description": "Radio and RadioGroup component tokens. Semantic references only.",
+  "radio": {
+    "size": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{size.toggle.sm}"
+      },
+      "md": {
+        "$value": "{size.toggle.md}"
+      },
+      "lg": {
+        "$value": "{size.toggle.lg}"
+      }
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "group-gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.full}"
+    },
+    "bg": {
+      "$type": "color",
+      "$value": "{color.surface.raised}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{color.border.strong}"
+    },
+    "border-hover": {
+      "$type": "color",
+      "$value": "{color.action.primary}"
+    },
+    "border-checked": {
+      "$type": "color",
+      "$value": "{color.action.primary}"
+    },
+    "border-invalid": {
+      "$type": "color",
+      "$value": "{color.status.error}"
+    },
+    "dot": {
+      "$type": "color",
+      "$value": "{color.action.primary}"
+    },
+    "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/select.json

@@ -0,0 +1,106 @@
+{
+  "$description": "Select (native) component tokens.",
+  "select": {
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.control}"
+    },
+    "padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "chevron-inset": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "chevron-gap": {
+      "$type": "dimension",
+      "$value": "{space.6}"
+    },
+    "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}"
+    },
+    "chevron": {
+      "$type": "color",
+      "$value": "{color.text.muted}"
+    },
+    "chevron-width": {
+      "$type": "dimension",
+      "$value": "{focus.ring.width}"
+    },
+    "border": {
+      "$type": "color",
+      "default": {
+        "$value": "{color.border.default}"
+      },
+      "hover": {
+        "$value": "{color.border.strong}"
+      },
+      "focus": {
+        "$value": "{color.border.focus}"
+      },
+      "invalid": {
+        "$value": "{color.status.error}"
+      }
+    },
+    "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/skeleton.json

@@ -0,0 +1,41 @@
+{
+  "$description": "Skeleton component tokens.",
+  "skeleton": {
+    "base": {
+      "$type": "color",
+      "$value": "{color.surface.sunken}"
+    },
+    "highlight": {
+      "$type": "color",
+      "$value": "{color.surface.raised}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.control}"
+    },
+    "text-height": {
+      "$type": "dimension",
+      "$value": "{font.size.md}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "circle": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{size.control.sm}"
+      },
+      "md": {
+        "$value": "{size.control.md}"
+      },
+      "lg": {
+        "$value": "{size.control.lg}"
+      }
+    },
+    "duration": {
+      "$type": "duration",
+      "$value": "{motion.duration.base}"
+    }
+  }
+}

package/tokens/component/slider.json

@@ -0,0 +1,39 @@
+{
+  "$description": "Slider component tokens: track, fill and thumb. Label, description and error read --field-*.",
+  "slider": {
+    "gap": { "$type": "dimension", "$value": "{space.2}" },
+    "font": {
+      "family": { "$type": "fontFamily", "$value": "{font.family.body}" }
+    },
+    "output": {
+      "fg": { "$type": "color", "$value": "{color.text.muted}" },
+      "font-size": { "$type": "dimension", "$value": "{font.size.sm}" },
+      "font-family": { "$type": "fontFamily", "$value": "{font.family.mono}" }
+    },
+    "track": {
+      "size": { "$type": "dimension", "$value": "{space.1}" },
+      "length": { "$type": "dimension", "$value": "{size.listbox-height}", "$description": "The run of a vertical slider; horizontal ones fill their container." },
+      "bg": { "$type": "color", "$value": "{color.surface.sunken}" },
+      "radius": { "$type": "dimension", "$value": "{radius.full}" },
+      "hit-size": { "$type": "dimension", "$value": "{size.toggle.lg}", "$description": "The pointer target around the thin track." }
+    },
+    "fill": { "$type": "color", "$value": "{color.action.primary}" },
+    "thumb": {
+      "size": { "$type": "dimension", "$value": "{size.toggle.md}" },
+      "bg": { "$type": "color", "$value": "{color.surface.raised}" },
+      "border": { "$type": "color", "$value": "{color.action.primary}" },
+      "border-hover": { "$type": "color", "$value": "{color.action.primary-hover}" },
+      "border-width": { "$type": "dimension", "$value": "{focus.ring.width}" },
+      "radius": { "$type": "dimension", "$value": "{radius.full}" },
+      "shadow": { "$type": "shadow", "$value": "{shadow.raised}" }
+    },
+    "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/spinner.json

@@ -0,0 +1,33 @@
+{
+  "$description": "Spinner component tokens.",
+  "spinner": {
+    "size": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{size.toggle.sm}"
+      },
+      "md": {
+        "$value": "{size.toggle.md}"
+      },
+      "lg": {
+        "$value": "{size.toggle.lg}"
+      }
+    },
+    "width": {
+      "$type": "dimension",
+      "$value": "{focus.ring.width}"
+    },
+    "track": {
+      "$type": "color",
+      "$value": "{color.border.default}"
+    },
+    "indicator": {
+      "$type": "color",
+      "$value": "{color.action.primary}"
+    },
+    "duration": {
+      "$type": "duration",
+      "$value": "{motion.duration.base}"
+    }
+  }
+}

package/tokens/component/stack.json

@@ -0,0 +1,32 @@
+{
+  "$description": "Stack layout tokens: the spacing scale as gap steps.",
+  "stack": {
+    "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/switch.json

@@ -0,0 +1,77 @@
+{
+  "$description": "Switch component tokens. The track is twice the toggle size; the thumb is inset by a hairline pair.",
+  "switch": {
+    "size": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{size.toggle.sm}"
+      },
+      "md": {
+        "$value": "{size.toggle.md}"
+      },
+      "lg": {
+        "$value": "{size.toggle.lg}"
+      }
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.full}"
+    },
+    "thumb-inset": {
+      "$type": "dimension",
+      "$value": "{size.hairline}"
+    },
+    "track-bg": {
+      "$type": "color",
+      "$value": "{color.border.strong}"
+    },
+    "track-bg-hover": {
+      "$type": "color",
+      "$value": "{color.text.faint}"
+    },
+    "track-bg-checked": {
+      "$type": "color",
+      "$value": "{color.action.primary}"
+    },
+    "track-bg-checked-hover": {
+      "$type": "color",
+      "$value": "{color.action.primary-hover}"
+    },
+    "track-invalid": {
+      "$type": "color",
+      "$value": "{color.status.error}"
+    },
+    "thumb": {
+      "$type": "color",
+      "$value": "{color.surface.raised}"
+    },
+    "thumb-checked": {
+      "$type": "color",
+      "$value": "{color.text.on-action}"
+    },
+    "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}"
+      }
+    }
+  }
+}