@planningcenter/tapestry 2.6.1-rc.2 → 2.7.1-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry",
-  "version": "2.6.1-rc.2",
+  "version": "2.7.1-rc.0",
   "type": "module",
   "repository": {
     "type": "git",
@@ -8,11 +8,10 @@
     "directory": "packages/tapestry"
   },
   "scripts": {
-    "prepare": "yarn build:tokens && yarn build",
+    "prepare": "[ -d dist ] || yarn build",
     "prebuild": "rimraf dist",
-    "build": "yarn build:tokens && rollup -c",
+    "build": "rollup -c",
     "build:storybook": "storybook build",
-    "build:tokens": "node ./src/tokens/style-dictionary.build.js",
     "storybook": "storybook dev -p 6006",
     "test": "vitest run",
     "test:visual": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\"  \"yarn storybook --quiet\"  \"npx wait-on tcp:127.0.0.1:6006 && yarn test-storybook\"",
@@ -40,24 +39,25 @@
     "./tokens.css": "./dist/tokens.css",
     "./tokens-dark.css": "./dist/tokens-dark.css",
     "./deprecated.css": "./dist/deprecated.css",
+    "./tokens-deprecated.json": "./dist/tokens/tokens-deprecated.json",
     "./product-tokens/*": "./dist/product-tokens/*",
     "./print.css": "./dist/print.css",
     "./print-no-media-queries.css": "./dist/print-no-media-queries.css"
   },
   "types": "./dist/index.d.ts",
   "devDependencies": {
-    "@planningcenter/tapestry-render": "^2.6.0",
+    "@planningcenter/tapestry-render": "^2.7.0",
     "@rollup/plugin-commonjs": "^26.0.1",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@rollup/plugin-typescript": "^11.1.6",
-    "@storybook/addon-a11y": "^9.1.10",
-    "@storybook/addon-docs": "^9.1.10",
-    "@storybook/addon-links": "^9.1.10",
-    "@storybook/addon-onboarding": "^9.1.10",
-    "@storybook/cli": "^9.1.10",
-    "@storybook/react-vite": "^9.1.10",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-a11y": "9.1.17",
+    "@storybook/addon-docs": "9.1.17",
+    "@storybook/addon-links": "9.1.17",
+    "@storybook/addon-onboarding": "9.1.17",
+    "@storybook/cli": "9.1.17",
+    "@storybook/react-vite": "9.1.17",
     "@storybook/test-runner": "^0.23.0",
-    "@storybook/web-components-vite": "^9.1.10",
+    "@storybook/web-components-vite": "9.1.17",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
@@ -90,17 +90,18 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-rename-node-modules": "^1.3.1",
     "shadow-dom-testing-library": "^1.11.3",
-    "storybook": "^9.1.10",
+    "storybook": "9.1.17",
     "style-dictionary": "^4.2.0",
-    "tapestry-wc": "^2.4.0",
+    "tapestry-wc": "^2.7.1-rc.0",
     "typescript": "^5.5.3",
     "vite": "^6.4.1",
     "vitest": "^3.0.0"
   },
   "dependencies": {
     "@planningcenter/icons": "^15.24.1",
+    "@planningcenter/tapestry-tokens": "^2.7.0",
     "classnames": "^2.5.1",
     "lodash": "^4.17.21"
   },
-  "gitHead": "bbc683728d0d8bebadf70035be301775b1f75cd1"
+  "gitHead": "7e0306117615a50b7f3fb3cc1c0f48e0f235f245"
 }

package/react-types/index.d.ts

@@ -28,24 +28,24 @@ declare global {
         * @cssprop --tds-page-header-nav-background - Background color of the navigation, gradient on mobile. Overrides are not recommended.
         * @cssprop --tds-page-header-nav-item-padding-x: {var(--t-spacing-1)} - Horizontal padding for the tab.
         * @cssprop --tds-page-header-nav-item-padding-y: {var(--t-spacing-1)} - Vertical padding for the tab.
-        * @cssprop --tds-page-header-nav-item-color: {var(--t-text-color-default-primary)} - Text color for the tab.
+        * @cssprop --tds-page-header-nav-item-color: {var(--t-text-color)} - Text color for the tab.
         * @cssprop --tds-page-header-nav-item-background-color: {var(--t-fill-color-transparency-light-060)} - Background color for the tab.
         * @cssprop --tds-page-header-nav-item-border-width: {0} - Border width for the tab.
         * @cssprop --tds-page-header-nav-item-border-color: {var(--tds-page-header-nav-item-background-color)} - Border color for the tab.
-        * @cssprop --tds-page-header-nav-item-border-bottom-color: {var(--t-border-color-default-base)} - Border bottom color for the tab.
+        * @cssprop --tds-page-header-nav-item-border-bottom-color: {var(--t-border-color)} - Border bottom color for the tab.
         * @cssprop --tds-page-header-nav-item-color-hover: {var(--tds-page-header-nav-item-color)} - Text color for the tab on hover.
         * @cssprop --tds-page-header-nav-item-background-color-hover: {var(--t-fill-color-neutral-080)} - Background color for the tab on hover.
         * @cssprop --tds-page-header-nav-item-border-color-hover: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on hover.
         * @cssprop --tds-page-header-nav-item-background-color-active: {var(--t-fill-color-neutral-060)} - Background color for the tab on active.
         * @cssprop --tds-page-header-nav-item-border-color-active: {var(--tds-page-header-nav-item-background-color-hover)} - Border color for the tab on active.
-        * @cssprop --tds-page-header-nav-item-color-disabled: {var(--t-text-color-default-disabled)} - Text color for the tab on disabled.
+        * @cssprop --tds-page-header-nav-item-color-disabled: {var(--t-text-color-disabled)} - Text color for the tab on disabled.
         * @cssprop --tds-page-header-nav-item-background-color-disabled: {var(--t-fill-color-neutral-080)} - Background color for the tab on disabled.
         * @cssprop --tds-page-header-nav-item-border-color-disabled: {var(--tds-page-header-nav-item-background-color-disabled)} - Border color for the tab on disabled.
-        * @cssprop --tds-page-header-nav-item-color-selected: {var(--t-text-color-default-primary)} - Text color for the tab on selected.
-        * @cssprop --tds-page-header-nav-item-border-color-selected: {var(--t-border-color-default-base)} - Border color for the tab on selected.
+        * @cssprop --tds-page-header-nav-item-color-selected: {var(--t-text-color)} - Text color for the tab on selected.
+        * @cssprop --tds-page-header-nav-item-border-color-selected: {var(--t-border-color)} - Border color for the tab on selected.
         * @cssprop --tds-page-header-nav-item-background-color-selected: {var(--t-fill-color-neutral-100)} - Background color for the tab on selected.
         * @cssprop --tds-page-header-nav-item-border-bottom-color-selected: {var(--tds-page-header-nav-item-background-color-selected)} - Border bottom color for the tab on selected.
-        * @cssprop --tds-page-header-nav-item-indicator-color: {var(--t-icon-color-status-warning-primary)} - Color for the indicator.
+        * @cssprop --tds-page-header-nav-item-indicator-color: {var(--t-icon-color-status-warning)} - Color for the indicator.
         */
       "tds-page-header": {
         /**
@@ -101,8 +101,8 @@ Please refer to each component's documentation for more information on how to us
         * @cssprop --tds-sidenav-item-nested-border-color - Border color for nested items (default: var(--t-fill-color-neutral-050))
         * @cssprop --tds-sidenav-item-nested-border-color-hover - Border color for nested items in hover state (default: var(--t-fill-color-neutral-010))
         * @cssprop --tds-sidenav-item-nested-border-color-selected - Border color for nested items in selected state (default: var(--t-fill-color-neutral-010))
-        * @cssprop --tds-sidenav-item-icon-color - Color for item icons (default: var(--t-icon-color-default-secondary))
-        * @cssprop --tds-sidenav-item-icon-color-selected - Color for selected item icons (default: var(--t-icon-color-default-primary))
+        * @cssprop --tds-sidenav-item-icon-color - Color for item icons (default: var(--t-icon-color-secondary))
+        * @cssprop --tds-sidenav-item-icon-color-selected - Color for selected item icons (default: var(--t-icon-color))
         * @cssprop --tds-sidenav-indent - Internal: The indentation spacing for nested items (default: 12px)
         * @cssprop --tds-sidenav-item-depth - Internal: The current nesting depth of items (default: 0)
         * @cssprop --tds-sidenav-item-transition - Internal: The transition timing for item state changes (default: background-color .2s cubic-bezier(.19, .91, .38, 1))

package/dist/deprecated.css

@@ -1,84 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- */
-
-:root {
-  --t-border-size-default: var(--t-border-width);
-  --t-border-size-thick: var(--t-border-width-thick);
-  --t-font-weight-semi-bold: var(--t-font-weight-semibold);
-  --t-icon-color-status-neutral-dark: var(--t-icon-color-status-neutral-bold);
-  --t-icon-color-status-info-secondary: var(--t-icon-color-status-info);
-  --t-fill-color-status-neutral-solid: var(--t-fill-color-status-neutral);
-  --t-fill-color-status-info-solid: var(--t-fill-color-status-info);
-  --t-fill-color-status-success-solid: var(--t-fill-color-status-success);
-  --t-fill-color-status-warning-solid: var(--t-fill-color-status-warning);
-  --t-fill-color-status-error-solid: var(--t-fill-color-status-error);
-  --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-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
-  --t-fill-color-button-neutral-outline-dim-default: var(--t-fill-color-button-neutral-outline);
-  --t-fill-color-button-neutral-outline-dim-hover: var(--t-fill-color-button-neutral-outline-hover);
-  --t-fill-color-button-neutral-outline-dim-active: var(--t-fill-color-button-neutral-outline-active);
-  --t-fill-color-button-neutral-outline-dim-disabled: var(--t-fill-color-button-neutral-outline-disabled);
-  --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
-  --t-fill-color-button-interaction-outline-dim-default: var(--t-fill-color-button-interaction-outline);
-  --t-fill-color-button-interaction-outline-dim-hover: var(--t-fill-color-button-interaction-outline-hover);
-  --t-fill-color-button-interaction-outline-dim-active: var(--t-fill-color-button-interaction-outline-active);
-  --t-fill-color-button-interaction-outline-dim-disabled: var(--t-fill-color-button-interaction-outline-disabled);
-  --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);
-  --t-fill-color-button-delete-outline-dim-default: var(--t-fill-color-button-delete-outline);
-  --t-fill-color-button-delete-outline-dim-hover: var(--t-fill-color-button-delete-outline-hover);
-  --t-fill-color-button-delete-outline-dim-active: var(--t-fill-color-button-delete-outline-active);
-  --t-fill-color-button-delete-outline-dim-disabled: var(--t-fill-color-button-delete-outline-disabled);
-  --t-border-color-default-base: var(--t-border-color);
-  --t-border-color-default-dark: var(--t-border-color-dark);
-  --t-border-color-default-darker: var(--t-border-color-darker);
-  --t-border-color-default-darkest: var(--t-border-color-darkest);
-  --t-border-color-default-dim: var(--t-border-color-dim);
-  --t-border-color-default-disabled: var(--t-border-color-disabled);
-  --t-border-color-default-white: var(--t-border-color-white);
-  --t-border-radius-default: var(--t-border-radius);
-  --t-border-width-default: var(--t-border-width);
-  --t-fill-color-button-delete-ghost-default: var(--t-fill-color-button-delete-ghost);
-  --t-fill-color-button-delete-outline-default: var(--t-fill-color-button-delete-outline);
-  --t-fill-color-button-delete-solid-default: var(--t-fill-color-button-delete-solid);
-  --t-fill-color-button-interaction-ghost-default: var(--t-fill-color-button-interaction-ghost);
-  --t-fill-color-button-interaction-outline-default: var(--t-fill-color-button-interaction-outline);
-  --t-fill-color-button-interaction-solid-default: var(--t-fill-color-button-interaction-solid);
-  --t-fill-color-button-neutral-ghost-default: var(--t-fill-color-button-neutral-ghost);
-  --t-fill-color-button-neutral-outline-default: var(--t-fill-color-button-neutral-outline);
-  --t-fill-color-button-neutral-responsive-header-default: var(--t-fill-color-button-neutral-responsive-header);
-  --t-fill-color-button-neutral-solid-default: var(--t-fill-color-button-neutral-solid);
-  --t-fill-color-button-pill-default: var(--t-fill-color-button-pill);
-  --t-fill-color-control-primary: var(--t-fill-color-control);
-  --t-fill-color-interaction-default: var(--t-fill-color-interaction);
-  --t-fill-color-product-staff-base: var(--t-fill-color-product-staff);
-  --t-fill-color-status-error-primary: var(--t-fill-color-status-error);
-  --t-fill-color-tooltip-primary: var(--t-fill-color-tooltip);
-  --t-icon-color-default-dim: var(--t-icon-color-dim);
-  --t-icon-color-default-disabled: var(--t-icon-color-disabled);
-  --t-icon-color-default-inverted: var(--t-icon-color-inverted);
-  --t-icon-color-default-primary: var(--t-icon-color);
-  --t-icon-color-default-secondary: var(--t-icon-color-secondary);
-  --t-icon-color-status-error-primary: var(--t-icon-color-status-error);
-  --t-icon-color-status-info-primary: var(--t-icon-color-status-info);
-  --t-icon-color-status-neutral-primary: var(--t-icon-color-status-neutral);
-  --t-icon-color-status-success-primary: var(--t-icon-color-status-success);
-  --t-icon-color-status-warning-primary: var(--t-icon-color-status-warning);
-  --t-text-color-default-disabled: var(--t-text-color-disabled);
-  --t-text-color-default-headline: var(--t-text-color-headline);
-  --t-text-color-default-inverted: var(--t-text-color-inverted);
-  --t-text-color-default-placeholder: var(--t-text-color-placeholder);
-  --t-text-color-default-primary: var(--t-text-color);
-  --t-text-color-default-secondary: var(--t-text-color-secondary);
-  --t-text-color-interaction-primary: var(--t-text-color-interaction);
-}