@pearpages/pulp-tokens 0.0.0

package/tokens/component/table.json

@@ -0,0 +1,57 @@
+{
+  "$description": "Table component tokens. Row padding comes from the spacing scale, so a brand's space.unit sets the density; the compact density steps one token down.",
+  "table": {
+    "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}" },
+    "font": {
+      "family": { "$type": "fontFamily", "$value": "{font.family.body}" },
+      "size": { "$type": "dimension", "$value": "{font.size.sm}" }
+    },
+    "cell": {
+      "padding-inline": { "$type": "dimension", "$value": "{space.3}" },
+      "padding-block": {
+        "$type": "dimension",
+        "default": { "$value": "{space.3}" },
+        "compact": { "$value": "{space.2}" }
+      }
+    },
+    "header": {
+      "bg": { "$type": "color", "$value": "{color.surface.base}" },
+      "fg": { "$type": "color", "$value": "{color.text.muted}" },
+      "fg-active": { "$type": "color", "$value": "{color.text.default}" },
+      "font-size": { "$type": "dimension", "$value": "{font.size.xs}" },
+      "font-weight": { "$type": "fontWeight", "$value": "{font.weight.semibold}" },
+      "sort-indicator": { "$type": "color", "$value": "{color.action.text}" },
+      "sort-indicator-width": { "$type": "dimension", "$value": "{focus.ring.width}" },
+      "sort-indicator-size": { "$type": "dimension", "$value": "{space.2}" }
+    },
+    "row": {
+      "bg-hover": { "$type": "color", "$value": "{color.action.secondary}" },
+      "bg-selected": { "$type": "color", "$value": "{color.action.primary-quiet}" },
+      "fg-disabled": { "$type": "color", "$value": "{color.text.faint}" }
+    },
+    "select": {
+      "size": { "$type": "dimension", "$value": "{size.toggle.sm}" },
+      "radius": { "$type": "dimension", "$value": "{radius.control}" },
+      "bg": { "$type": "color", "$value": "{color.surface.raised}" },
+      "bg-checked": { "$type": "color", "$value": "{color.action.primary}" },
+      "border": { "$type": "color", "$value": "{color.border.strong}" },
+      "check": { "$type": "color", "$value": "{color.text.on-action}" },
+      "check-width": { "$type": "dimension", "$value": "{focus.ring.width}" }
+    },
+    "empty": {
+      "fg": { "$type": "color", "$value": "{color.text.muted}" },
+      "padding": { "$type": "dimension", "$value": "{space.6}" }
+    },
+    "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/tabs.json

@@ -0,0 +1,31 @@
+{
+  "$description": "Tabs component tokens. Brand-independent: every value references the semantic layer.",
+  "tabs": {
+    "list-border": { "$type": "color", "$value": "{color.border.default}" },
+    "tab": {
+      "fg": { "$type": "color", "$value": "{color.text.muted}" },
+      "fg-hover": { "$type": "color", "$value": "{color.text.default}" },
+      "fg-active": { "$type": "color", "$value": "{color.text.default}" },
+      "bg-hover": { "$type": "color", "$value": "{color.action.primary-quiet}" },
+      "indicator": { "$type": "color", "$value": "{color.action.primary}" },
+      "padding-block": { "$type": "dimension", "$value": "{space.2}" },
+      "padding-inline": { "$type": "dimension", "$value": "{space.3}" },
+      "font-size": { "$type": "dimension", "$value": "{font.size.sm}" },
+      "font-weight": { "$type": "fontWeight", "$value": "{font.weight.medium}" },
+      "radius": { "$type": "dimension", "$value": "{radius.control}" }
+    },
+    "gap": { "$type": "dimension", "$value": "{space.1}" },
+    "panel": {
+      "padding-block": { "$type": "dimension", "$value": "{space.4}" },
+      "fg": { "$type": "color", "$value": "{color.text.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}" }
+    },
+    "motion": {
+      "duration": { "$type": "duration", "$value": "{motion.duration.fast}" }
+    }
+  }
+}

package/tokens/component/text-field.json

@@ -0,0 +1,90 @@
+{
+  "$description": "TextField component tokens. Brand-independent: every value references the semantic layer.",
+  "text-field": {
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.control}"
+    },
+    "padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "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}"
+        }
+      }
+    },
+    "height": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{size.control.sm}"
+      },
+      "md": {
+        "$value": "{size.control.md}"
+      },
+      "lg": {
+        "$value": "{size.control.lg}"
+      }
+    },
+    "bg": {
+      "$type": "color",
+      "$value": "{color.surface.raised}"
+    },
+    "fg": {
+      "$type": "color",
+      "$value": "{color.text.default}"
+    },
+    "placeholder": {
+      "$type": "color",
+      "$value": "{color.text.faint}"
+    },
+    "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/text.json

@@ -0,0 +1,31 @@
+{
+  "$description": "Text component tokens: the type scale and tones as a component. Semantic references only.",
+  "text": {
+    "font-family": {
+      "$type": "fontFamily",
+      "body": { "$value": "{font.family.body}" },
+      "mono": { "$value": "{font.family.mono}" }
+    },
+    "size": {
+      "$type": "dimension",
+      "xs": { "$value": "{font.size.xs}" },
+      "sm": { "$value": "{font.size.sm}" },
+      "md": { "$value": "{font.size.md}" },
+      "lg": { "$value": "{font.size.lg}" },
+      "xl": { "$value": "{font.size.xl}" }
+    },
+    "weight": {
+      "$type": "fontWeight",
+      "regular": { "$value": "{font.weight.regular}" },
+      "medium": { "$value": "{font.weight.medium}" },
+      "semibold": { "$value": "{font.weight.semibold}" }
+    },
+    "line-height": { "$type": "number", "$value": "{font.line-height.normal}" },
+    "tone": {
+      "$type": "color",
+      "default": { "$value": "{color.text.default}" },
+      "muted": { "$value": "{color.text.muted}" },
+      "faint": { "$value": "{color.text.faint}" }
+    }
+  }
+}

package/tokens/component/textarea.json

@@ -0,0 +1,90 @@
+{
+  "$description": "Textarea component tokens: the same surface as TextField, its own file so it can diverge.",
+  "textarea": {
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.control}"
+    },
+    "padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "padding-block": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "min-height": {
+      "$type": "dimension",
+      "$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}"
+        }
+      }
+    },
+    "line-height": {
+      "$type": "number",
+      "$value": "{font.line-height.normal}"
+    },
+    "bg": {
+      "$type": "color",
+      "$value": "{color.surface.raised}"
+    },
+    "fg": {
+      "$type": "color",
+      "$value": "{color.text.default}"
+    },
+    "placeholder": {
+      "$type": "color",
+      "$value": "{color.text.faint}"
+    },
+    "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/toast.json

@@ -0,0 +1,35 @@
+{
+  "$description": "Toast component tokens: the region and its stack; each toast is an Alert.",
+  "toast": {
+    "width": {
+      "$type": "dimension",
+      "$value": "{size.toast-width}"
+    },
+    "offset": {
+      "$type": "dimension",
+      "$value": "{space.5}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "layer": {
+      "$type": "number",
+      "$value": "{layer.toast}"
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": "{shadow.overlay}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.surface}"
+    },
+    "motion": {
+      "duration": {
+        "$type": "duration",
+        "$value": "{motion.duration.base}"
+      }
+    }
+  }
+}

package/tokens/component/tooltip.json

@@ -0,0 +1,49 @@
+{
+  "$description": "Tooltip component tokens.",
+  "tooltip": {
+    "bg": {
+      "$type": "color",
+      "$value": "{color.surface.inverse}"
+    },
+    "fg": {
+      "$type": "color",
+      "$value": "{color.text.on-inverse}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.control}"
+    },
+    "padding-block": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "padding-inline": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "font-size": {
+      "$type": "dimension",
+      "$value": "{font.size.xs}"
+    },
+    "max-width": {
+      "$type": "dimension",
+      "$value": "{size.menu-width}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": "{shadow.raised}"
+    },
+    "layer": {
+      "$type": "number",
+      "$value": "{layer.tooltip}"
+    },
+    "duration": {
+      "$type": "duration",
+      "$value": "{motion.duration.fast}"
+    }
+  }
+}

package/tokens/component/visually-hidden.json

@@ -0,0 +1,9 @@
+{
+  "$description": "VisuallyHidden component tokens.",
+  "visually-hidden": {
+    "size": {
+      "$type": "dimension",
+      "$value": "{size.hairline}"
+    }
+  }
+}

package/tokens/primitives/bitepals.json

@@ -0,0 +1,285 @@
+{
+  "$description": "bitepals primitives. Translated from the bitepals product palette so the second brand is a real one, not a recolour.",
+  "color": {
+    "$type": "color",
+    "orange": {
+      "100": {
+        "$value": "#ffe4d6"
+      },
+      "200": {
+        "$value": "#ffb08a"
+      },
+      "300": {
+        "$value": "#ff8b66"
+      },
+      "400": {
+        "$value": "#ff7a52"
+      },
+      "500": {
+        "$value": "#ff6b3d"
+      },
+      "600": {
+        "$value": "#f45a2a"
+      },
+      "700": {
+        "$value": "#e24e21"
+      },
+      "800": {
+        "$value": "#9f3a14"
+      },
+      "900": {
+        "$value": "#4a1d0e"
+      }
+    },
+    "cream": {
+      "50": {
+        "$value": "#fff6ed"
+      },
+      "100": {
+        "$value": "#fcf3df"
+      },
+      "200": {
+        "$value": "#f8eed9"
+      },
+      "300": {
+        "$value": "#f0e4cf"
+      },
+      "400": {
+        "$value": "#eddcbf"
+      },
+      "500": {
+        "$value": "#e0cba6"
+      }
+    },
+    "sand": {
+      "300": {
+        "$value": "#e2d2b6"
+      },
+      "400": {
+        "$value": "#cab38e"
+      },
+      "500": {
+        "$value": "#a89178"
+      }
+    },
+    "neutral": {
+      "0": {
+        "$value": "#ffffff"
+      },
+      "50": {
+        "$value": "#f7f4ee"
+      },
+      "100": {
+        "$value": "#f0eae2"
+      },
+      "200": {
+        "$value": "#e5dcd1"
+      },
+      "300": {
+        "$value": "#d1c5b6"
+      },
+      "400": {
+        "$value": "#9d968c"
+      },
+      "500": {
+        "$value": "#7c756c"
+      },
+      "600": {
+        "$value": "#5b6475"
+      },
+      "700": {
+        "$value": "#3a4152"
+      },
+      "800": {
+        "$value": "#273040"
+      },
+      "900": {
+        "$value": "#1f2430"
+      }
+    },
+    "ink": {
+      "200": {
+        "$value": "#475467"
+      },
+      "300": {
+        "$value": "#344054"
+      },
+      "400": {
+        "$value": "#2a3240"
+      },
+      "500": {
+        "$value": "#273040"
+      },
+      "600": {
+        "$value": "#202938"
+      },
+      "700": {
+        "$value": "#1d2430"
+      },
+      "800": {
+        "$value": "#171c24"
+      },
+      "900": {
+        "$value": "#11151c"
+      }
+    },
+    "green": {
+      "100": {
+        "$value": "#dff5ea"
+      },
+      "300": {
+        "$value": "#32c48d"
+      },
+      "500": {
+        "$value": "#22a06b"
+      },
+      "700": {
+        "$value": "#14633f"
+      },
+      "900": {
+        "$value": "#0f3324"
+      }
+    },
+    "gold": {
+      "100": {
+        "$value": "#fff0d2"
+      },
+      "300": {
+        "$value": "#f5b83d"
+      },
+      "500": {
+        "$value": "#d98e04"
+      },
+      "700": {
+        "$value": "#7a4e00"
+      },
+      "900": {
+        "$value": "#3d2800"
+      }
+    },
+    "red": {
+      "100": {
+        "$value": "#fde7e7"
+      },
+      "300": {
+        "$value": "#ff6b6b"
+      },
+      "500": {
+        "$value": "#d64545"
+      },
+      "600": {
+        "$value": "#c43a3a"
+      },
+      "700": {
+        "$value": "#a83333"
+      },
+      "900": {
+        "$value": "#3f1414"
+      }
+    },
+    "blue": {
+      "100": {
+        "$value": "#e3efff"
+      },
+      "300": {
+        "$value": "#5aa9ff"
+      },
+      "500": {
+        "$value": "#2f80ed"
+      },
+      "600": {
+        "$value": "#2368c9"
+      },
+      "700": {
+        "$value": "#1b5fb8"
+      },
+      "900": {
+        "$value": "#10284d"
+      }
+    }
+  },
+  "radius": {
+    "$type": "dimension",
+    "sm": {
+      "$value": {
+        "value": 10,
+        "unit": "px"
+      }
+    },
+    "lg": {
+      "$value": {
+        "value": 18,
+        "unit": "px"
+      }
+    },
+    "pill": {
+      "$value": {
+        "value": 9999,
+        "unit": "px"
+      }
+    }
+  },
+  "space": {
+    "$type": "dimension",
+    "unit": {
+      "$value": {
+        "value": 0.28,
+        "unit": "rem"
+      },
+      "$description": "Roomier than pulp: the whole spacing scale grows 12% from this one value."
+    }
+  },
+  "duration": {
+    "$type": "duration",
+    "fast": {
+      "$value": {
+        "value": 120,
+        "unit": "ms"
+      }
+    },
+    "base": {
+      "$value": {
+        "value": 220,
+        "unit": "ms"
+      }
+    }
+  },
+  "easing": {
+    "$type": "cubicBezier",
+    "standard": {
+      "$value": [
+        0.25,
+        0.1,
+        0.25,
+        1
+      ]
+    }
+  },
+  "typeface": {
+    "display": {
+      "$value": [
+        "Nunito Variable",
+        "Nunito",
+        "system-ui",
+        "sans-serif"
+      ]
+    },
+    "body": {
+      "$value": [
+        "Inter Variable",
+        "Inter",
+        "system-ui",
+        "sans-serif"
+      ]
+    },
+    "mono": {
+      "$value": [
+        "ui-monospace",
+        "SF Mono",
+        "Menlo",
+        "monospace"
+      ]
+    },
+    "$type": "fontFamily"
+  }
+}