@planningcenter/tapestry 3.0.0-rc.24 → 3.0.0-rc.26

package/dist/components/link/BaseLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BaseLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/BaseLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAGd,MAAM,kCAAkC,CAAA;AAEzC,MAAM,WAAW,oBACf,SAAQ,kBAAkB,EACxB,IAAI,CACF,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,GAAG,UAAU,CACtC;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAeD,eAAO,MAAM,QAAQ,gGAsCpB,CAAA"}
+{"version":3,"file":"BaseLink.d.ts","sourceRoot":"","sources":["../../../src/components/link/BaseLink.tsx"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,CAAA;AAG1B,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAGd,MAAM,kCAAkC,CAAA;AAEzC,MAAM,WAAW,oBACf,SAAQ,kBAAkB,EACxB,IAAI,CACF,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,kBAAkB,GAAG,UAAU,CACtC;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACxB;AAiBD,eAAO,MAAM,QAAQ,gGA4CpB,CAAA"}

package/dist/components/link/BaseLink.js

@@ -2,11 +2,11 @@ import classNames from 'classnames';
 import React, { forwardRef } from 'react';
 import { enhanceElementWithClassName, COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_CLASS_MAP } from '../../utilities/buttonLinkShared.js';
 
-const buildComponentClassName = (size, kind, className) => {
-    return classNames("tds-btn", size && size !== "md" && kind && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], className);
+const buildComponentClassName = (size, kind, fullWidth, className) => {
+    return classNames("tds-btn", size && size !== "md" && kind && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", className);
 };
-const BaseLink = forwardRef(({ children, className, external = false, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
-    const combinedClassName = buildComponentClassName(size, kind, className);
+const BaseLink = forwardRef(({ children, className, external = false, fullWidth, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
+    const combinedClassName = buildComponentClassName(size, kind, fullWidth, className);
     const prefixElement = enhanceElementWithClassName(prefix, "prefix");
     const suffixElement = enhanceElementWithClassName(suffix, "suffix");
     const externalProps = external

package/dist/components/link/BaseLink.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\nimport {\n  BaseComponentProps,\n  COMPONENT_KIND_CLASS_MAP,\n  COMPONENT_SIZE_CLASS_MAP,\n  ComponentKind,\n  ComponentSize,\n  enhanceElementWithClassName,\n} from \"../../utilities/buttonLinkShared\"\n\nexport interface BaseLinkElementProps\n  extends BaseComponentProps,\n    Omit<\n      AnchorHTMLAttributes<HTMLAnchorElement>,\n      keyof BaseComponentProps | \"children\"\n    > {\n  children?: React.ReactNode\n  external?: boolean\n  href: string\n  kind?: ComponentKind\n  label?: React.ReactNode\n}\n\nconst buildComponentClassName = (\n  size?: ComponentSize,\n  kind?: ComponentKind,\n  className?: string\n): string => {\n  return classNames(\n    \"tds-btn\",\n    size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n    kind && COMPONENT_KIND_CLASS_MAP[kind],\n    className\n  )\n}\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n  (\n    {\n      children,\n      className,\n      external = false,\n      href,\n      kind,\n      label,\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseLinkElementProps,\n    ref\n  ) => {\n    const combinedClassName = buildComponentClassName(size, kind, className)\n\n    const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n    const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n    const externalProps = external\n      ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n      : {}\n\n    return (\n      <a\n        href={href}\n        className={combinedClassName}\n        ref={ref}\n        {...restProps}\n        {...externalProps}\n      >\n        {prefixElement}\n        {label || children}\n        {suffixElement}\n      </a>\n    )\n  }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":[],"mappings":";;;;AA2BA,MAAM,uBAAuB,GAAG,CAC9B,IAAoB,EACpB,IAAoB,EACpB,SAAkB,KACR;IACV,OAAO,UAAU,CACf,SAAS,EACT,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,CACV;AACH,CAAC;AAEM,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACS,EACvB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,CAAC;IAExE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ;UAC9C,EAAE;AAEN,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,KACT,aAAa,EAAA;QAEhB,aAAa;AACb,QAAA,KAAK,IAAI,QAAQ;QACjB,aAAa,CACZ;AAER,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"BaseLink.js","sources":["../../../src/components/link/BaseLink.tsx"],"sourcesContent":["import \"../button/btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { AnchorHTMLAttributes, forwardRef } from \"react\"\n\nimport {\n  BaseComponentProps,\n  COMPONENT_KIND_CLASS_MAP,\n  COMPONENT_SIZE_CLASS_MAP,\n  ComponentKind,\n  ComponentSize,\n  enhanceElementWithClassName,\n} from \"../../utilities/buttonLinkShared\"\n\nexport interface BaseLinkElementProps\n  extends BaseComponentProps,\n    Omit<\n      AnchorHTMLAttributes<HTMLAnchorElement>,\n      keyof BaseComponentProps | \"children\"\n    > {\n  children?: React.ReactNode\n  external?: boolean\n  href: string\n  kind?: ComponentKind\n  label?: React.ReactNode\n}\n\nconst buildComponentClassName = (\n  size?: ComponentSize,\n  kind?: ComponentKind,\n  fullWidth?: boolean,\n  className?: string\n): string => {\n  return classNames(\n    \"tds-btn\",\n    size && size !== \"md\" && kind && COMPONENT_SIZE_CLASS_MAP[size],\n    kind && COMPONENT_KIND_CLASS_MAP[kind],\n    fullWidth && \"tds-btn--full-width\",\n    className\n  )\n}\n\nexport const BaseLink = forwardRef<HTMLAnchorElement, BaseLinkElementProps>(\n  (\n    {\n      children,\n      className,\n      external = false,\n      fullWidth,\n      href,\n      kind,\n      label,\n      prefix,\n      size,\n      suffix,\n      ...restProps\n    }: BaseLinkElementProps,\n    ref\n  ) => {\n    const combinedClassName = buildComponentClassName(\n      size,\n      kind,\n      fullWidth,\n      className\n    )\n\n    const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n    const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n    const externalProps = external\n      ? { rel: \"noopener noreferrer\", target: \"_blank\" }\n      : {}\n\n    return (\n      <a\n        href={href}\n        className={combinedClassName}\n        ref={ref}\n        {...restProps}\n        {...externalProps}\n      >\n        {prefixElement}\n        {label || children}\n        {suffixElement}\n      </a>\n    )\n  }\n)\n\nBaseLink.displayName = \"BaseLink\"\n"],"names":[],"mappings":";;;;AA2BA,MAAM,uBAAuB,GAAG,CAC9B,IAAoB,EACpB,IAAoB,EACpB,SAAmB,EACnB,SAAkB,KACR;AACV,IAAA,OAAO,UAAU,CACf,SAAS,EACT,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EAC/D,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,SAAS,CACV;AACH,CAAC;AAEM,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,QAAQ,EACR,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,EACJ,IAAI,EACJ,KAAK,EACL,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACS,EACvB,GAAG,KACD;AACF,IAAA,MAAM,iBAAiB,GAAG,uBAAuB,CAC/C,IAAI,EACJ,IAAI,EACJ,SAAS,EACT,SAAS,CACV;IAED,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG;UAClB,EAAE,GAAG,EAAE,qBAAqB,EAAE,MAAM,EAAE,QAAQ;UAC9C,EAAE;AAEN,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,KACT,aAAa,EAAA;QAEhB,aAAa;AACb,QAAA,KAAK,IAAI,QAAQ;QACjB,aAAa,CACZ;AAER,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/page-header/index.js

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-Dm53_R0v.js';
+import '../../tapestry-wc/dist/components/p-BgG83B1-.js';
 import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-page-header.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-page-header-nav.js';
 

package/dist/components/sidenav/index.js

@@ -1,4 +1,4 @@
-import '../../tapestry-wc/dist/components/p-Dm53_R0v.js';
+import '../../tapestry-wc/dist/components/p-BgG83B1-.js';
 import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-sidenav.js';
 import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-sidenav-item.js';
 import { defineCustomElement as defineCustomElement$3 } from '../../tapestry-wc/dist/components/tds-sidenav-responsive-header.js';

package/dist/index.css

@@ -414,6 +414,84 @@
   --t-form-font-color-readonly:var(--t-text-color);
   --t-form-picker-icon-color:var(--t-icon-color);
   --t-form-placeholder-color:var(--t-text-color-placeholder);
+  --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);
 }
 
 :root[data-color-mode="dark"]{
@@ -637,6 +715,14 @@
   --t-border-color-control-info:hsl(204, 100%, 35%);
   --t-border-color-control-disabled:hsl(0, 0%, 21%);
   --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
+  --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
+  --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
+  --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
+  --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
+  --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
+  --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
+  --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
 }
 
 @media (prefers-color-scheme: dark){
@@ -861,94 +947,6 @@
   --t-border-color-control-info:hsl(204, 100%, 35%);
   --t-border-color-control-disabled:hsl(0, 0%, 21%);
   --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
-}
-}
-
-: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);
-}
-
-:root{
-  --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);
-}
-
-:root[data-color-mode="dark"]{
   --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
   --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
   --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
@@ -958,18 +956,9 @@
   --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
   --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
 }
+}
 
 @media (prefers-color-scheme: dark){
-:root[data-color-mode="system"]{
-  --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
-  --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
-  --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
-  --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
-  --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
-  --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
-  --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
-  --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
-}
 }
 
 @layer t-critical{