@planningcenter/tapestry-tokens 0.0.1

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@planningcenter/tapestry-tokens",
+  "version": "0.0.1",
+  "private": false,
+  "type": "module",
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "node ./src/style-dictionary.build.js && rollup -c"
+  },
+  "exports": {
+    ".": "./dist/index.js",
+    "./index.css": "./src/css/tokens.css",
+    "./src/*.css": "./src/*.css",
+    "./*.json": "./src/js/*.json"
+  },
+  "types": "./dist/index.d.ts",
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^11.1.6",
+    "postcss": "^8.4.38",
+    "postcss-combine-duplicated-selectors": "^10.0.3",
+    "postcss-import": "^16.1.0",
+    "rimraf": "^6.0.1",
+    "rollup": "^4.22.4",
+    "style-dictionary": "^4.2.0",
+    "typescript": "^5.5.3"
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,12 @@
+import typescript from "@rollup/plugin-typescript"
+
+const plugins = [typescript({ tsconfig: "./tsconfig.build.json" })]
+
+const output = {
+  file: "dist/index.js",
+  format: "es",
+  sourcemap: true,
+}
+const config = [{ input: "./src/index.ts", output, plugins }]
+
+export default config

package/src/componentNames.js

@@ -0,0 +1,10 @@
+import fs from "fs"
+import path from "path"
+import { fileURLToPath } from "url"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const components = JSON.parse(
+  fs.readFileSync(path.resolve(__dirname, "./json/components.json"))
+)
+export default Object.keys(components)

package/src/css/components/banner.css

@@ -0,0 +1,24 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+.t-banner {
+  --t-banner-font-size: var(--t-font-size-md);
+  --t-banner-font-color: var(--t-text-color-default-primary);
+  --t-banner-background-color: var(--t-fill-color-status-neutral-ghost);
+  --t-banner-spacing: var(--t-spacing-2);
+  --t-banner-border-radius: var(--t-border-radius-md);
+  --t-banner-title-font-color: var(--t-text-color-default-headline);
+  --t-banner-title-font-size: var(--t-font-size-md);
+  --t-banner-title-font-weight: var(--t-font-weight-semi-bold);
+  --t-banner-icon-fill-color: hsla(0, 0%, 0%, 0);
+  --t-banner-background-color-info: var(--t-fill-color-status-info-ghost);
+  --t-banner-icon-fill-color-info: var(--t-icon-color-status-info-primary);
+  --t-banner-background-color-warning: var(--t-fill-color-status-warning-ghost);
+  --t-banner-icon-fill-color-warning: var(--t-icon-color-status-warning-primary);
+  --t-banner-background-color-error: var(--t-fill-color-status-error-ghost);
+  --t-banner-icon-fill-color-error: var(--t-icon-color-status-error-primary);
+  --t-banner-background-color-success: var(--t-fill-color-status-success-ghost);
+  --t-banner-icon-fill-color-success: var(--t-icon-color-status-success-primary);
+  --t-banner-link-font-color-hover: var(--t-text-color-default-headline);
+}

package/src/css/tokens-alias-deprecated.css

@@ -0,0 +1,42 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --t-text-color-tag-gray: hsl(0, 0%, 24%);
+  --t-text-color-tag-magenta: hsl(285, 71%, 20%);
+  --t-text-color-tag-blue: hsl(224, 47%, 31%);
+  --t-text-color-tag-aqua: hsl(209, 77%, 22%);
+  --t-text-color-tag-teal: hsl(180, 95%, 15%);
+  --t-text-color-tag-green: hsl(100, 93%, 17%);
+  --t-text-color-tag-yellow: hsl(29, 100%, 23%);
+  --t-text-color-tag-orange: hsl(18, 100%, 18%);
+  --t-text-color-tag-pink: hsl(327, 88%, 20%);
+  --t-text-color-tag-purple: hsl(268, 71%, 27%);
+  --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);
+  --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);
+  --t-fill-color-alert-info: hsl(204, 94%, 49%);
+  --t-fill-color-alert-success: hsl(122, 60%, 41%);
+  --t-fill-color-alert-warning: hsl(43, 96%, 58%);
+  --t-fill-color-alert-error: hsl(4, 77%, 59%);
+  --t-fill-color-button-default-info-solid-default: hsl(204, 100%, 40%);
+  --t-fill-color-button-default-info-solid-hover: hsl(204, 100%, 35%);
+  --t-fill-color-button-default-info-solid-active: hsl(204, 100%, 30%);
+  --t-fill-color-button-default-info-solid-disabled: hsl(0, 0%, 81%);
+  --t-fill-color-button-default-info-outline-dim-default: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-default-info-outline-dim-hover: hsl(204, 100%, 97%);
+  --t-fill-color-button-default-info-outline-dim-active: hsl(203, 94%, 94%);
+  --t-fill-color-button-default-info-outline-dim-disabled: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-default-info-ghost-default: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-default-info-ghost-hover: hsl(204, 100%, 97%);
+  --t-fill-color-button-default-info-ghost-active: hsl(203, 94%, 94%);
+  --t-fill-color-button-default-info-ghost-disabled: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);
+  --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);
+  --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);
+  --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 81%);
+  --t-fill-color-button-create-ghost-default: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-create-ghost-hover: hsl(96, 60%, 95%);
+  --t-fill-color-button-create-ghost-active: hsl(97, 57%, 90%);
+  --t-fill-color-button-create-ghost-disabled: hsla(0, 0%, 100%, 0);
+}

package/src/css/tokens-alias.css

@@ -0,0 +1,334 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --t-border-radius-sm: 2px;
+  --t-border-radius-md: 4px;
+  --t-border-radius-lg: 8px;
+  --t-border-radius-xl: 16px;
+  --t-border-radius-round: 56px;
+  --t-border-radius-default: 4px;
+  --t-border-size-default: 1px;
+  --t-border-size-thick: 2px;
+  --t-spacing-1: 8px;
+  --t-spacing-2: 16px;
+  --t-spacing-3: 24px;
+  --t-spacing-4: 32px;
+  --t-spacing-5: 40px;
+  --t-spacing-6: 48px;
+  --t-spacing-7: 56px;
+  --t-spacing-fourth: 2px;
+  --t-spacing-half: 4px;
+  --t-element-size-3xl: 48px;
+  --t-element-size-2xl: 32px;
+  --t-element-size-xl: 24px;
+  --t-element-size-lg: 18px;
+  --t-element-size-md: 16px;
+  --t-element-size-sm: 14px;
+  --t-element-size-xs: 12px;
+  --t-font-size-4xl: 32px;
+  --t-font-size-3xl: 28px;
+  --t-font-size-2xl: 24px;
+  --t-font-size-xl: 20px;
+  --t-font-size-lg: 18px;
+  --t-font-size-md: 16px;
+  --t-font-size-sm: 14px;
+  --t-font-size-xs: 12px;
+  --t-font-size-2xs: 10px;
+  --t-font-weight-normal: 400;
+  --t-font-weight-medium: 500;
+  --t-font-weight-semi-bold: 600;
+  --t-font-weight-bold: 700;
+  --t-container-size-xl: 48px;
+  --t-container-size-lg: 40px;
+  --t-container-size-md: 32px;
+  --t-container-size-sm: 24px;
+  --t-container-size-xs: 20px;
+  --t-avatar-size-20: 20px;
+  --t-avatar-size-24: 24px;
+  --t-avatar-size-36: 36px;
+  --t-avatar-size-48: 48px;
+  --t-avatar-size-72: 72px;
+  --t-avatar-size-112: 112px;
+  --t-text-color-default-headline: hsl(0, 0%, 12%);
+  --t-text-color-default-primary: hsl(0, 0%, 24%);
+  --t-text-color-default-secondary: hsl(0, 0%, 45%);
+  --t-text-color-default-disabled: hsl(0, 0%, 81%);
+  --t-text-color-default-placeholder: hsl(0, 0%, 62%);
+  --t-text-color-default-inverted: hsl(0, 0%, 100%);
+  --t-text-color-interaction-primary: hsl(204, 100%, 40%);
+  --t-text-color-interaction-hover: hsl(204, 100%, 35%);
+  --t-text-color-interaction-active: hsl(204, 100%, 30%);
+  --t-text-color-interaction-visited: hsl(204, 100%, 30%);
+  --t-text-color-status-neutral: hsl(0, 0%, 24%);
+  --t-text-color-status-info: hsl(204, 100%, 35%);
+  --t-text-color-status-success: hsl(97, 57%, 28%);
+  --t-text-color-status-warning: hsl(42, 100%, 29%);
+  --t-text-color-status-error: hsl(8, 60%, 45%);
+  --t-text-color-tag-subtle-gray: hsl(0, 0%, 24%);
+  --t-text-color-tag-subtle-blue: hsl(224, 47%, 31%);
+  --t-text-color-tag-subtle-aqua: hsl(209, 77%, 22%);
+  --t-text-color-tag-subtle-teal: hsl(180, 95%, 15%);
+  --t-text-color-tag-subtle-green: hsl(100, 93%, 17%);
+  --t-text-color-tag-subtle-yellow: hsl(29, 100%, 23%);
+  --t-text-color-tag-subtle-orange: hsl(18, 100%, 18%);
+  --t-text-color-tag-subtle-pink: hsl(327, 88%, 20%);
+  --t-text-color-tag-subtle-purple: hsl(268, 71%, 27%);
+  --t-text-color-tag-subtle-magenta: hsl(285, 71%, 20%);
+  --t-text-color-tag-bold-gray: hsl(0, 0%, 24%);
+  --t-text-color-tag-bold-blue: hsl(224, 47%, 31%);
+  --t-text-color-tag-bold-aqua: hsl(209, 77%, 22%);
+  --t-text-color-tag-bold-teal: hsl(180, 95%, 15%);
+  --t-text-color-tag-bold-green: hsl(100, 93%, 17%);
+  --t-text-color-tag-bold-yellow: hsl(29, 100%, 23%);
+  --t-text-color-tag-bold-orange: hsl(18, 100%, 18%);
+  --t-text-color-tag-bold-pink: hsl(327, 88%, 20%);
+  --t-text-color-tag-bold-purple: hsl(268, 71%, 27%);
+  --t-text-color-tag-bold-magenta: hsl(285, 71%, 20%);
+  --t-icon-color-default-primary: hsl(0, 0%, 24%);
+  --t-icon-color-default-secondary: hsl(0, 0%, 45%);
+  --t-icon-color-default-dim: hsl(0, 0%, 62%);
+  --t-icon-color-default-disabled: hsl(0, 0%, 81%);
+  --t-icon-color-default-inverted: hsl(0, 0%, 100%);
+  --t-icon-color-status-neutral-primary: hsl(0, 0%, 45%);
+  --t-icon-color-status-neutral-secondary: hsl(0, 0%, 62%);
+  --t-icon-color-status-neutral-bold: hsl(0, 0%, 24%);
+  --t-icon-color-status-info-primary: hsl(204, 100%, 40%);
+  --t-icon-color-status-success-primary: hsl(96, 57%, 33%);
+  --t-icon-color-status-success-secondary: hsl(97, 57%, 40%);
+  --t-icon-color-status-warning-primary: hsl(42, 84%, 49%);
+  --t-icon-color-status-error-primary: hsl(8, 60%, 47%);
+  --t-fill-color-neutral-000: hsl(0, 0%, 12%);
+  --t-fill-color-neutral-010: hsl(0, 0%, 24%);
+  --t-fill-color-neutral-020: hsl(0, 0%, 45%);
+  --t-fill-color-neutral-030: hsl(0, 0%, 62%);
+  --t-fill-color-neutral-040: hsl(0, 0%, 81%);
+  --t-fill-color-neutral-050: hsl(0, 0%, 88%);
+  --t-fill-color-neutral-060: hsl(0, 0%, 93%);
+  --t-fill-color-neutral-070: hsl(0, 0%, 95%);
+  --t-fill-color-neutral-080: hsl(0, 0%, 97%);
+  --t-fill-color-neutral-090: hsl(0, 0%, 98%);
+  --t-fill-color-neutral-100: hsl(0, 0%, 100%);
+  --t-fill-color-interaction-default: hsl(204, 100%, 40%);
+  --t-fill-color-interaction-hover: hsl(204, 100%, 35%);
+  --t-fill-color-interaction-active: hsl(204, 100%, 30%);
+  --t-fill-color-interaction-disabled: hsl(0, 0%, 81%);
+  --t-fill-color-control-neutral-off: hsl(0, 0%, 62%);
+  --t-fill-color-control-neutral-on: hsl(0, 0%, 24%);
+  --t-fill-color-control-primary: hsl(204, 100%, 40%);
+  --t-fill-color-control-secondary: hsl(97, 57%, 40%);
+  --t-fill-color-control-error: hsl(8, 60%, 47%);
+  --t-fill-color-control-disabled: hsl(0, 0%, 81%);
+  --t-fill-color-status-neutral-solid: hsl(0, 0%, 45%);
+  --t-fill-color-status-neutral-ghost: hsl(0, 0%, 93%);
+  --t-fill-color-status-neutral-dim: hsl(0, 0%, 97%);
+  --t-fill-color-status-info-solid: hsl(204, 100%, 40%);
+  --t-fill-color-status-info-ghost: hsl(203, 94%, 94%);
+  --t-fill-color-status-info-dim: hsl(204, 100%, 97%);
+  --t-fill-color-status-success-solid: hsl(96, 57%, 33%);
+  --t-fill-color-status-success-ghost: hsl(97, 57%, 90%);
+  --t-fill-color-status-success-dim: hsl(96, 60%, 95%);
+  --t-fill-color-status-warning-solid: hsl(42, 84%, 63%);
+  --t-fill-color-status-warning-ghost: hsl(42, 87%, 94%);
+  --t-fill-color-status-warning-dim: hsl(42, 87%, 97%);
+  --t-fill-color-status-error-solid: hsl(8, 60%, 47%);
+  --t-fill-color-status-error-ghost: hsl(9, 59%, 93%);
+  --t-fill-color-status-error-dim: hsl(7, 60%, 97%);
+  --t-fill-color-tooltip-primary: hsla(0, 0%, 12%, 0.77);
+  --t-fill-color-tag-subtle-gray: hsl(0, 0%, 93%);
+  --t-fill-color-tag-subtle-blue: hsl(220, 100%, 95%);
+  --t-fill-color-tag-subtle-label-gray: hsl(0, 0%, 88%);
+  --t-fill-color-tag-subtle-label-blue: hsl(221, 100%, 81%);
+  --t-fill-color-tag-subtle-label-aqua: hsl(200, 82%, 82%);
+  --t-fill-color-tag-subtle-label-teal: hsl(164, 52%, 76%);
+  --t-fill-color-tag-subtle-label-green: hsl(99, 59%, 78%);
+  --t-fill-color-tag-subtle-label-yellow: hsl(44, 78%, 77%);
+  --t-fill-color-tag-subtle-label-orange: hsl(21, 89%, 82%);
+  --t-fill-color-tag-subtle-label-pink: hsl(310, 64%, 85%);
+  --t-fill-color-tag-subtle-label-purple: hsl(259, 74%, 85%);
+  --t-fill-color-tag-subtle-label-magenta: hsl(291, 40%, 83%);
+  --t-fill-color-tag-subtle-aqua: hsl(200, 82%, 89%);
+  --t-fill-color-tag-subtle-teal: hsl(163, 53%, 83%);
+  --t-fill-color-tag-subtle-green: hsl(98, 59%, 85%);
+  --t-fill-color-tag-subtle-yellow: hsl(45, 77%, 85%);
+  --t-fill-color-tag-subtle-orange: hsl(22, 89%, 89%);
+  --t-fill-color-tag-subtle-pink: hsl(311, 66%, 92%);
+  --t-fill-color-tag-subtle-purple: hsl(259, 74%, 93%);
+  --t-fill-color-tag-subtle-magenta: hsl(294, 37%, 90%);
+  --t-fill-color-tag-bold-gray: hsl(0, 0%, 88%);
+  --t-fill-color-tag-bold-blue: hsl(220, 98%, 81%);
+  --t-fill-color-tag-bold-aqua: hsl(201, 76%, 71%);
+  --t-fill-color-tag-bold-teal: hsl(169, 62%, 64%);
+  --t-fill-color-tag-bold-green: hsl(112, 57%, 65%);
+  --t-fill-color-tag-bold-yellow: hsl(44, 92%, 69%);
+  --t-fill-color-tag-bold-orange: hsl(21, 86%, 72%);
+  --t-fill-color-tag-bold-pink: hsl(324, 78%, 77%);
+  --t-fill-color-tag-bold-purple: hsl(273, 62%, 76%);
+  --t-fill-color-tag-bold-magenta: hsl(291, 48%, 70%);
+  --t-fill-color-tag-bold-label-gray: hsl(0, 0%, 81%);
+  --t-fill-color-tag-bold-label-blue: hsl(220, 98%, 74%);
+  --t-fill-color-tag-bold-label-aqua: hsl(200, 75%, 64%);
+  --t-fill-color-tag-bold-label-teal: hsl(169, 62%, 56%);
+  --t-fill-color-tag-bold-label-green: hsl(112, 57%, 57%);
+  --t-fill-color-tag-bold-label-yellow: hsl(44, 93%, 61%);
+  --t-fill-color-tag-bold-label-orange: hsl(21, 86%, 64%);
+  --t-fill-color-tag-bold-label-pink: hsl(324, 76%, 70%);
+  --t-fill-color-tag-bold-label-purple: hsl(273, 62%, 70%);
+  --t-fill-color-tag-bold-label-magenta: hsl(292, 48%, 63%);
+  --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 45%);
+  --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 24%);
+  --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 12%);
+  --t-fill-color-button-neutral-solid-disabled: hsl(0, 0%, 95%);
+  --t-fill-color-button-neutral-outline-dim-default: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-neutral-outline-dim-hover: hsl(0, 0%, 95%);
+  --t-fill-color-button-neutral-outline-dim-active: hsl(0, 0%, 93%);
+  --t-fill-color-button-neutral-outline-dim-disabled: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
+  --t-fill-color-button-neutral-ghost-default: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-neutral-ghost-hover: hsl(0, 0%, 95%);
+  --t-fill-color-button-neutral-ghost-active: hsl(0, 0%, 93%);
+  --t-fill-color-button-neutral-ghost-disabled: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
+  --t-fill-color-button-interaction-solid-default: hsl(204, 100%, 40%);
+  --t-fill-color-button-interaction-solid-hover: hsl(204, 100%, 35%);
+  --t-fill-color-button-interaction-solid-active: hsl(204, 100%, 30%);
+  --t-fill-color-button-interaction-solid-disabled: hsl(0, 0%, 81%);
+  --t-fill-color-button-interaction-outline-dim-default: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-interaction-outline-dim-hover: hsl(204, 100%, 97%);
+  --t-fill-color-button-interaction-outline-dim-active: hsl(203, 94%, 94%);
+  --t-fill-color-button-interaction-outline-dim-disabled: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-interaction-ghost-default: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-interaction-ghost-hover: hsl(204, 100%, 97%);
+  --t-fill-color-button-interaction-ghost-active: hsl(203, 94%, 94%);
+  --t-fill-color-button-interaction-ghost-disabled: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-delete-solid-default: hsl(8, 60%, 47%);
+  --t-fill-color-button-delete-solid-hover: hsl(8, 60%, 45%);
+  --t-fill-color-button-delete-solid-active: hsl(8, 60%, 40%);
+  --t-fill-color-button-delete-solid-disabled: hsl(0, 0%, 81%);
+  --t-fill-color-button-delete-outline-dim-default: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-delete-outline-dim-hover: hsl(7, 60%, 97%);
+  --t-fill-color-button-delete-outline-dim-active: hsl(9, 59%, 93%);
+  --t-fill-color-button-delete-outline-dim-disabled: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-delete-ghost-default: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-delete-ghost-hover: hsl(7, 60%, 97%);
+  --t-fill-color-button-delete-ghost-active: hsl(9, 59%, 93%);
+  --t-fill-color-button-delete-ghost-disabled: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-pill-default: hsl(0, 0%, 93%);
+  --t-fill-color-button-pill-hover: hsl(0, 0%, 88%);
+  --t-fill-color-button-pill-active: hsl(0, 0%, 88%);
+  --t-fill-color-button-pill-disabled: hsl(0, 0%, 93%);
+  --t-fill-color-product-accounts-base: hsl(210, 55%, 50%);
+  --t-fill-color-product-accounts-light: hsl(210, 54%, 60%);
+  --t-fill-color-product-accounts-lighter: hsl(209, 53%, 90%);
+  --t-fill-color-product-accounts-lightest: hsl(212, 54%, 93%);
+  --t-fill-color-product-accounts-dark: hsl(210, 65%, 40%);
+  --t-fill-color-product-accounts-darker: hsl(211, 70%, 32%);
+  --t-fill-color-product-accounts-darkest: hsl(210, 75%, 25%);
+  --t-fill-color-product-calendar-base: hsl(9, 61%, 50%);
+  --t-fill-color-product-calendar-light: hsl(8, 65%, 55%);
+  --t-fill-color-product-calendar-lighter: hsl(8, 72%, 59%);
+  --t-fill-color-product-calendar-lightest: hsl(8, 61%, 70%);
+  --t-fill-color-product-calendar-dark: hsl(8, 65%, 42%);
+  --t-fill-color-product-calendar-darker: hsl(7, 65%, 34%);
+  --t-fill-color-product-calendar-darkest: hsl(9, 61%, 27%);
+  --t-fill-color-product-checkins-base: hsl(283, 22%, 48%);
+  --t-fill-color-product-checkins-light: hsl(283, 22%, 55%);
+  --t-fill-color-product-checkins-lighter: hsl(284, 22%, 64%);
+  --t-fill-color-product-checkins-lightest: hsl(283, 22%, 75%);
+  --t-fill-color-product-checkins-dark: hsl(283, 27%, 42%);
+  --t-fill-color-product-checkins-darker: hsl(284, 33%, 34%);
+  --t-fill-color-product-checkins-darkest: hsl(283, 33%, 27%);
+  --t-fill-color-product-giving-base: hsl(43, 88%, 64%);
+  --t-fill-color-product-giving-light: hsl(43, 88%, 70%);
+  --t-fill-color-product-giving-lighter: hsl(43, 95%, 75%);
+  --t-fill-color-product-giving-lightest: hsl(42, 95%, 83%);
+  --t-fill-color-product-giving-dark: hsl(42, 84%, 55%);
+  --t-fill-color-product-giving-darker: hsl(42, 84%, 48%);
+  --t-fill-color-product-giving-darkest: hsl(42, 100%, 40%);
+  --t-fill-color-product-groups-base: hsl(17, 88%, 55%);
+  --t-fill-color-product-groups-light: hsl(17, 96%, 63%);
+  --t-fill-color-product-groups-lighter: hsl(17, 96%, 70%);
+  --t-fill-color-product-groups-lightest: hsl(17, 96%, 80%);
+  --t-fill-color-product-groups-dark: hsl(12, 70%, 48%);
+  --t-fill-color-product-groups-darker: hsl(12, 70%, 40%);
+  --t-fill-color-product-groups-darkest: hsl(14, 70%, 34%);
+  --t-fill-color-product-home-base: hsl(221, 91%, 55%);
+  --t-fill-color-product-home-light: hsl(221, 91%, 62%);
+  --t-fill-color-product-home-lighter: hsl(221, 91%, 87%);
+  --t-fill-color-product-home-lightest: hsl(221, 91%, 91%);
+  --t-fill-color-product-home-dark: hsl(221, 90%, 50%);
+  --t-fill-color-product-home-darker: hsl(221, 90%, 45%);
+  --t-fill-color-product-home-darkest: hsl(218, 84%, 25%);
+  --t-fill-color-product-people-base: hsl(220, 74%, 57%);
+  --t-fill-color-product-people-light: hsl(221, 73%, 65%);
+  --t-fill-color-product-people-lighter: hsl(221, 73%, 71%);
+  --t-fill-color-product-people-lightest: hsl(220, 69%, 81%);
+  --t-fill-color-product-people-dark: hsl(220, 68%, 51%);
+  --t-fill-color-product-people-darker: hsl(220, 68%, 41%);
+  --t-fill-color-product-people-darkest: hsl(221, 68%, 31%);
+  --t-fill-color-product-publishing-base: hsl(220, 12%, 31%);
+  --t-fill-color-product-publishing-light: hsl(222, 12%, 39%);
+  --t-fill-color-product-publishing-lighter: hsl(221, 11%, 50%);
+  --t-fill-color-product-publishing-lightest: hsl(222, 10%, 60%);
+  --t-fill-color-product-publishing-dark: hsl(220, 11%, 26%);
+  --t-fill-color-product-publishing-darker: hsl(217, 12%, 22%);
+  --t-fill-color-product-publishing-darkest: hsl(214, 11%, 12%);
+  --t-fill-color-product-registrations-base: hsl(175, 36%, 43%);
+  --t-fill-color-product-registrations-light: hsl(176, 37%, 60%);
+  --t-fill-color-product-registrations-lighter: hsl(176, 37%, 68%);
+  --t-fill-color-product-registrations-lightest: hsl(176, 38%, 78%);
+  --t-fill-color-product-registrations-dark: hsl(175, 51%, 34%);
+  --t-fill-color-product-registrations-darker: hsl(174, 51%, 28%);
+  --t-fill-color-product-registrations-darkest: hsl(175, 52%, 22%);
+  --t-fill-color-product-services-base: hsl(88, 45%, 41%);
+  --t-fill-color-product-services-light: hsl(88, 40%, 54%);
+  --t-fill-color-product-services-lighter: hsl(88, 39%, 66%);
+  --t-fill-color-product-services-lightest: hsl(88, 39%, 75%);
+  --t-fill-color-product-services-dark: hsl(89, 62%, 32%);
+  --t-fill-color-product-services-darker: hsl(89, 62%, 26%);
+  --t-fill-color-product-services-darkest: hsl(89, 63%, 21%);
+  --t-fill-color-product-staff-base: hsl(328, 100%, 45%);
+  --t-fill-color-transparency-light-010: hsla(0, 0%, 100%, 0.1);
+  --t-fill-color-transparency-light-020: hsla(0, 0%, 100%, 0.2);
+  --t-fill-color-transparency-light-030: hsla(0, 0%, 100%, 0.3);
+  --t-fill-color-transparency-light-040: hsla(0, 0%, 100%, 0.4);
+  --t-fill-color-transparency-light-050: hsla(0, 0%, 100%, 0.5);
+  --t-fill-color-transparency-light-060: hsla(0, 0%, 100%, 0.6);
+  --t-fill-color-transparency-light-070: hsla(0, 0%, 100%, 0.7);
+  --t-fill-color-transparency-light-080: hsla(0, 0%, 100%, 0.8);
+  --t-fill-color-transparency-light-090: hsla(0, 0%, 100%, 0.9);
+  --t-fill-color-transparency-dark-010: hsla(0, 0%, 0%, 0.1);
+  --t-fill-color-transparency-dark-020: hsla(0, 0%, 0%, 0.2);
+  --t-fill-color-transparency-dark-030: hsla(0, 0%, 0%, 0.3);
+  --t-fill-color-transparency-dark-040: hsla(0, 0%, 0%, 0.4);
+  --t-fill-color-transparency-dark-050: hsla(0, 0%, 0%, 0.5);
+  --t-fill-color-transparency-dark-060: hsla(0, 0%, 0%, 0.6);
+  --t-fill-color-transparency-dark-070: hsla(0, 0%, 0%, 0.7);
+  --t-fill-color-transparency-dark-080: hsla(0, 0%, 0%, 0.8);
+  --t-fill-color-transparency-dark-090: hsla(0, 0%, 0%, 0.9);
+  --t-surface-color-canvas: hsl(0, 0%, 98%);
+  --t-surface-color-card: hsl(0, 0%, 100%);
+  --t-border-color-default-base: hsl(0, 0%, 88%);
+  --t-border-color-default-dark: hsl(0, 0%, 81%);
+  --t-border-color-default-darker: hsl(0, 0%, 68%);
+  --t-border-color-default-darkest: hsl(0, 0%, 62%);
+  --t-border-color-default-disabled: hsl(0, 0%, 88%);
+  --t-border-color-default-dim: hsl(0, 0%, 95%);
+  --t-border-color-default-white: hsl(0, 0%, 100%);
+  --t-border-color-status-neutral: hsl(0, 0%, 62%);
+  --t-border-color-status-info: hsl(204, 100%, 40%);
+  --t-border-color-status-success: hsl(97, 57%, 40%);
+  --t-border-color-status-warning: hsl(42, 84%, 63%);
+  --t-border-color-status-error: hsl(8, 60%, 47%);
+  --t-border-color-button-neutral: hsl(0, 0%, 88%);
+  --t-border-color-button-info: hsl(204, 100%, 40%);
+  --t-border-color-button-create: hsl(96, 57%, 33%);
+  --t-border-color-button-delete: hsl(8, 60%, 47%);
+  --t-border-color-control-neutral: hsl(0, 0%, 68%);
+  --t-border-color-control-info: hsl(204, 100%, 40%);
+  --t-border-color-control-success: hsl(97, 57%, 40%);
+  --t-border-color-control-warning: hsl(42, 84%, 63%);
+  --t-border-color-control-error: hsl(8, 60%, 47%);
+  --t-border-color-control-disabled: hsl(0, 0%, 88%);
+}

package/src/css/tokens.css

@@ -0,0 +1,2 @@
+@import "tokens-alias.css";
+@import "tokens-alias-deprecated.css";

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from "./ts/tokens"
+
+import { tokens } from "./ts/tokens"
+
+export function token<T extends keyof typeof tokens>(varName: T) {
+  return `var(${varName})` as const
+}
+
+export function computedToken<T extends keyof typeof tokens>(varName: T) {
+  return tokens[varName] as (typeof tokens)[T]
+}