@pearpages/pulp-tokens 0.0.0

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@pearpages/pulp-tokens",
+  "version": "0.0.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)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pearpages/pulp.git",
+    "directory": "packages/tokens"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "tokens"
+  ],
+  "exports": {
+    "./tokens.css": "./dist/tokens.css",
+    "./tokens.json": "./dist/tokens.json",
+    "./package.json": "./package.json"
+  },
+  "devDependencies": {
+    "publint": "^0.3.24",
+    "style-dictionary": "^5.5.3"
+  },
+  "scripts": {
+    "build": "node scripts/build.mjs",
+    "check": "node scripts/build.mjs --check",
+    "test:run": "node --test \"scripts/*.test.mjs\"",
+    "check:package": "publint"
+  }
+}

package/tokens/component/accordion.json

@@ -0,0 +1,83 @@
+{
+  "$description": "Accordion component tokens.",
+  "accordion": {
+    "border": {
+      "$type": "color",
+      "$value": "{color.border.default}"
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.surface}"
+    },
+    "trigger": {
+      "padding-block": {
+        "$type": "dimension",
+        "$value": "{space.3}"
+      },
+      "padding-inline": {
+        "$type": "dimension",
+        "$value": "{space.3}"
+      },
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.md}"
+      },
+      "font-weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.medium}"
+      },
+      "fg": {
+        "$type": "color",
+        "$value": "{color.text.default}"
+      },
+      "bg-hover": {
+        "$type": "color",
+        "$value": "{color.action.primary-quiet}"
+      },
+      "chevron": {
+        "$type": "color",
+        "$value": "{color.text.muted}"
+      },
+      "gap": {
+        "$type": "dimension",
+        "$value": "{space.3}"
+      }
+    },
+    "panel": {
+      "padding-block": {
+        "$type": "dimension",
+        "$value": "{space.3}"
+      },
+      "padding-inline": {
+        "$type": "dimension",
+        "$value": "{space.3}"
+      },
+      "fg": {
+        "$type": "color",
+        "$value": "{color.text.default}"
+      },
+      "font-size": {
+        "$type": "dimension",
+        "$value": "{font.size.sm}"
+      }
+    },
+    "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/alert.json

@@ -0,0 +1,93 @@
+{
+  "$description": "Alert component tokens.",
+  "alert": {
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.surface}"
+    },
+    "padding": {
+      "$type": "dimension",
+      "$value": "{space.4}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.3}"
+    },
+    "border-width": {
+      "$type": "dimension",
+      "$value": "{size.hairline}"
+    },
+    "accent-width": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "fg": {
+      "$type": "color",
+      "$value": "{color.text.default}"
+    },
+    "font-size": {
+      "$type": "dimension",
+      "$value": "{font.size.sm}"
+    },
+    "title-font-weight": {
+      "$type": "fontWeight",
+      "$value": "{font.weight.semibold}"
+    },
+    "info": {
+      "bg": {
+        "$type": "color",
+        "$value": "{color.status.info-subtle}"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "{color.status.info}"
+      },
+      "title": {
+        "$type": "color",
+        "$value": "{color.status.info-text}"
+      }
+    },
+    "success": {
+      "bg": {
+        "$type": "color",
+        "$value": "{color.status.success-subtle}"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "{color.status.success}"
+      },
+      "title": {
+        "$type": "color",
+        "$value": "{color.status.success-text}"
+      }
+    },
+    "warning": {
+      "bg": {
+        "$type": "color",
+        "$value": "{color.status.warning-subtle}"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "{color.status.warning}"
+      },
+      "title": {
+        "$type": "color",
+        "$value": "{color.status.warning-text}"
+      }
+    },
+    "error": {
+      "bg": {
+        "$type": "color",
+        "$value": "{color.status.error-subtle}"
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "{color.status.error}"
+      },
+      "title": {
+        "$type": "color",
+        "$value": "{color.status.error-text}"
+      }
+    }
+  }
+}

package/tokens/component/badge.json

@@ -0,0 +1,153 @@
+{
+  "$description": "Badge component tokens: tone \u00d7 variant onto the status layer.",
+  "badge": {
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.full}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "padding-block": {
+      "$type": "dimension",
+      "$value": "{space.1}"
+    },
+    "padding-inline": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{space.2}"
+      },
+      "md": {
+        "$value": "{space.3}"
+      }
+    },
+    "font-size": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{font.size.xs}"
+      },
+      "md": {
+        "$value": "{font.size.sm}"
+      }
+    },
+    "font-weight": {
+      "$type": "fontWeight",
+      "$value": "{font.weight.medium}"
+    },
+    "line-height": {
+      "$type": "number",
+      "$value": "{font.line-height.tight}"
+    },
+    "neutral": {
+      "solid": {
+        "bg": {
+          "$type": "color",
+          "$value": "{color.status.neutral}"
+        },
+        "fg": {
+          "$type": "color",
+          "$value": "{color.status.on-neutral}"
+        }
+      },
+      "subtle": {
+        "bg": {
+          "$type": "color",
+          "$value": "{color.status.neutral-subtle}"
+        },
+        "fg": {
+          "$type": "color",
+          "$value": "{color.status.neutral-text}"
+        }
+      }
+    },
+    "info": {
+      "solid": {
+        "bg": {
+          "$type": "color",
+          "$value": "{color.status.info}"
+        },
+        "fg": {
+          "$type": "color",
+          "$value": "{color.status.on-info}"
+        }
+      },
+      "subtle": {
+        "bg": {
+          "$type": "color",
+          "$value": "{color.status.info-subtle}"
+        },
+        "fg": {
+          "$type": "color",
+          "$value": "{color.status.info-text}"
+        }
+      }
+    },
+    "success": {
+      "solid": {
+        "bg": {
+          "$type": "color",
+          "$value": "{color.status.success}"
+        },
+        "fg": {
+          "$type": "color",
+          "$value": "{color.status.on-success}"
+        }
+      },
+      "subtle": {
+        "bg": {
+          "$type": "color",
+          "$value": "{color.status.success-subtle}"
+        },
+        "fg": {
+          "$type": "color",
+          "$value": "{color.status.success-text}"
+        }
+      }
+    },
+    "warning": {
+      "solid": {
+        "bg": {
+          "$type": "color",
+          "$value": "{color.status.warning}"
+        },
+        "fg": {
+          "$type": "color",
+          "$value": "{color.status.on-warning}"
+        }
+      },
+      "subtle": {
+        "bg": {
+          "$type": "color",
+          "$value": "{color.status.warning-subtle}"
+        },
+        "fg": {
+          "$type": "color",
+          "$value": "{color.status.warning-text}"
+        }
+      }
+    },
+    "error": {
+      "solid": {
+        "bg": {
+          "$type": "color",
+          "$value": "{color.status.error}"
+        },
+        "fg": {
+          "$type": "color",
+          "$value": "{color.status.on-error}"
+        }
+      },
+      "subtle": {
+        "bg": {
+          "$type": "color",
+          "$value": "{color.status.error-subtle}"
+        },
+        "fg": {
+          "$type": "color",
+          "$value": "{color.status.error-text}"
+        }
+      }
+    }
+  }
+}

package/tokens/component/button.json

@@ -0,0 +1,118 @@
+{
+  "$description": "Button component tokens. Brand-independent: every value is a reference into the semantic layer, so a brand never needs to know a Button exists.",
+  "button": {
+    "radius": {
+      "$type": "dimension",
+      "$value": "{radius.control}"
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": "{space.2}"
+    },
+    "font": {
+      "family": {
+        "$type": "fontFamily",
+        "$value": "{font.family.body}"
+      },
+      "weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight.medium}"
+      },
+      "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}"
+      }
+    },
+    "padding-inline": {
+      "$type": "dimension",
+      "sm": {
+        "$value": "{space.3}"
+      },
+      "md": {
+        "$value": "{space.4}"
+      },
+      "lg": {
+        "$value": "{space.5}"
+      }
+    },
+    "primary": {
+      "$type": "color",
+      "bg": {
+        "$value": "{color.action.primary}"
+      },
+      "bg-hover": {
+        "$value": "{color.action.primary-hover}"
+      },
+      "bg-active": {
+        "$value": "{color.action.primary-active}"
+      },
+      "fg": {
+        "$value": "{color.text.on-action}"
+      }
+    },
+    "secondary": {
+      "$type": "color",
+      "bg": {
+        "$value": "{color.action.secondary}"
+      },
+      "bg-hover": {
+        "$value": "{color.action.secondary-hover}"
+      },
+      "fg": {
+        "$value": "{color.text.default}"
+      },
+      "border": {
+        "$value": "{color.border.default}"
+      }
+    },
+    "ghost": {
+      "$type": "color",
+      "fg": {
+        "$value": "{color.action.text}"
+      },
+      "bg-hover": {
+        "$value": "{color.action.primary-quiet}"
+      }
+    },
+    "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/calendar.json

@@ -0,0 +1,48 @@
+{
+  "$description": "Calendar component tokens: the month grid, its heading and navigation. DatePicker renders it inside its popover.",
+  "calendar": {
+    "bg": { "$type": "color", "$value": "{color.surface.raised}" },
+    "fg": { "$type": "color", "$value": "{color.text.default}" },
+    "padding": { "$type": "dimension", "$value": "{space.3}" },
+    "gap": { "$type": "dimension", "$value": "{space.2}" },
+    "font": {
+      "family": { "$type": "fontFamily", "$value": "{font.family.body}" },
+      "size": { "$type": "dimension", "$value": "{font.size.sm}" }
+    },
+    "heading": {
+      "font-size": { "$type": "dimension", "$value": "{font.size.md}" },
+      "font-weight": { "$type": "fontWeight", "$value": "{font.weight.medium}" }
+    },
+    "nav": {
+      "size": { "$type": "dimension", "$value": "{size.control.sm}" },
+      "radius": { "$type": "dimension", "$value": "{radius.control}" },
+      "fg": { "$type": "color", "$value": "{color.text.muted}" },
+      "fg-hover": { "$type": "color", "$value": "{color.text.default}" },
+      "bg-hover": { "$type": "color", "$value": "{color.action.secondary}" }
+    },
+    "weekday": {
+      "fg": { "$type": "color", "$value": "{color.text.muted}" },
+      "font-size": { "$type": "dimension", "$value": "{font.size.xs}" },
+      "font-weight": { "$type": "fontWeight", "$value": "{font.weight.medium}" }
+    },
+    "cell": {
+      "size": { "$type": "dimension", "$value": "{size.control.sm}" },
+      "radius": { "$type": "dimension", "$value": "{radius.control}" },
+      "fg": { "$type": "color", "$value": "{color.text.default}" },
+      "fg-unavailable": { "$type": "color", "$value": "{color.text.faint}" },
+      "fg-today": { "$type": "color", "$value": "{color.action.text}" },
+      "bg-hover": { "$type": "color", "$value": "{color.action.secondary}" },
+      "bg-selected": { "$type": "color", "$value": "{color.action.primary}" },
+      "fg-selected": { "$type": "color", "$value": "{color.text.on-action}" },
+      "bg-selected-hover": { "$type": "color", "$value": "{color.action.primary-hover}" }
+    },
+    "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/card.json

@@ -0,0 +1,28 @@
+{
+  "$description": "Card component tokens. Brand-independent: every value references the semantic layer.",
+  "card": {
+    "bg": { "$type": "color", "$value": "{color.surface.raised}" },
+    "bg-sunken": { "$type": "color", "$value": "{color.surface.sunken}" },
+    "fg": { "$type": "color", "$value": "{color.text.default}" },
+    "border": { "$type": "color", "$value": "{color.border.default}" },
+    "border-hover": { "$type": "color", "$value": "{color.border.strong}" },
+    "radius": { "$type": "dimension", "$value": "{radius.surface}" },
+    "shadow": { "$type": "shadow", "$value": "{shadow.raised}" },
+    "gap": { "$type": "dimension", "$value": "{space.3}" },
+    "padding": {
+      "$type": "dimension",
+      "sm": { "$value": "{space.3}" },
+      "md": { "$value": "{space.4}" },
+      "lg": { "$value": "{space.5}" }
+    },
+    "divider": { "$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}" }
+    },
+    "motion": {
+      "duration": { "$type": "duration", "$value": "{motion.duration.fast}" }
+    }
+  }
+}

package/tokens/component/checkbox.json

@@ -0,0 +1,77 @@
+{
+  "$description": "Checkbox component tokens. Semantic references only.",
+  "checkbox": {
+    "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.control}"
+    },
+    "bg": {
+      "$type": "color",
+      "$value": "{color.surface.raised}"
+    },
+    "bg-checked": {
+      "$type": "color",
+      "$value": "{color.action.primary}"
+    },
+    "bg-checked-hover": {
+      "$type": "color",
+      "$value": "{color.action.primary-hover}"
+    },
+    "border": {
+      "$type": "color",
+      "$value": "{color.border.strong}"
+    },
+    "border-hover": {
+      "$type": "color",
+      "$value": "{color.action.primary}"
+    },
+    "border-invalid": {
+      "$type": "color",
+      "$value": "{color.status.error}"
+    },
+    "check": {
+      "$type": "color",
+      "$value": "{color.text.on-action}"
+    },
+    "check-width": {
+      "$type": "dimension",
+      "$value": "{focus.ring.width}"
+    },
+    "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}"
+      }
+    }
+  }
+}