@planningcenter/tapestry 3.0.0-rc.2 → 3.0.0-rc.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) hide show
  1. package/dist/components/button/BaseButton.d.ts.map +1 -1
  2. package/dist/components/button/BaseButton.js +3 -2
  3. package/dist/components/button/BaseButton.js.map +1 -1
  4. package/dist/components/button/IconButton.js +1 -1
  5. package/dist/components/button/IconButton.js.map +1 -1
  6. package/dist/components/button/PageHeaderActionsDropdownButton.js +1 -1
  7. package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
  8. package/dist/components/link/BaseLink.js +2 -2
  9. package/dist/components/link/BaseLink.js.map +1 -1
  10. package/dist/components/page-header/index.js +1 -1
  11. package/dist/components/sidenav/index.js +1 -1
  12. package/dist/index.css +116 -88
  13. package/dist/index.css.map +1 -1
  14. package/dist/print-no-media-queries.css +2 -0
  15. package/dist/print.css +2 -0
  16. package/dist/reactRender.css +212 -184
  17. package/dist/reactRender.css.map +1 -1
  18. package/dist/reactRenderLegacy.css +212 -184
  19. package/dist/reactRenderLegacy.css.map +1 -1
  20. package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js → p-C5iSF06Y.js} +3 -3
  21. package/dist/tapestry-wc/dist/components/p-C5iSF06Y.js.map +1 -0
  22. package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js → p-COVN81zG.js} +3 -3
  23. package/dist/tapestry-wc/dist/components/p-COVN81zG.js.map +1 -0
  24. package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js → p-CT_FL8wQ.js} +3 -3
  25. package/dist/tapestry-wc/dist/components/p-CT_FL8wQ.js.map +1 -0
  26. package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js → p-CsShT-kz.js} +2 -2
  27. package/dist/tapestry-wc/dist/components/p-CsShT-kz.js.map +1 -0
  28. package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js → p-f6le2JgV.js} +2 -2
  29. package/dist/tapestry-wc/dist/components/p-f6le2JgV.js.map +1 -0
  30. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  31. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  32. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  33. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  34. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  35. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  36. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  37. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  38. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  39. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  40. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  41. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  42. package/dist/tokens/tokens-deprecated.json +20 -39
  43. package/dist/tokens/ts/react-native-tokens.d.ts +1 -0
  44. package/dist/tokens/ts/react-native-tokens.d.ts.map +1 -1
  45. package/dist/tokens/ts/react-native-tokens.js +1 -0
  46. package/dist/tokens/ts/react-native-tokens.js.map +1 -1
  47. package/dist/tokens/ts/tokens.d.ts +1 -0
  48. package/dist/tokens/ts/tokens.d.ts.map +1 -1
  49. package/dist/tokens/ts/tokens.js +1 -0
  50. package/dist/tokens/ts/tokens.js.map +1 -1
  51. package/dist/tokens-deprecated.css +27 -0
  52. package/dist/tokens-deprecated.css.map +1 -1
  53. package/dist/tokens-deprecated.d.ts +3 -0
  54. package/dist/tokens-deprecated.d.ts.map +1 -1
  55. package/dist/tokens.css +1 -0
  56. package/dist/tokens.css.map +1 -1
  57. package/dist/unstable.css +128 -100
  58. package/dist/unstable.css.map +1 -1
  59. package/package.json +5 -5
  60. package/dist/tapestry-wc/dist/components/p-5-Cvrlgk.js.map +0 -1
  61. package/dist/tapestry-wc/dist/components/p-74Cc2nEh.js.map +0 -1
  62. package/dist/tapestry-wc/dist/components/p-D0G2xpOq.js.map +0 -1
  63. package/dist/tapestry-wc/dist/components/p-D1rzJeWl.js.map +0 -1
  64. package/dist/tapestry-wc/dist/components/p-DmP02I4b.js.map +0 -1
package/dist/components/button/BaseButton.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAGd,MAAM,kCAAkC,CAAA;AAGzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACvE,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,eAAe,GAAG,UAAU,CACnC,GACC,eAAe,CAAA;AAyBjB,eAAO,MAAM,UAAU,qLA8CtB,CAAA"}
1
+ {"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../src/components/button/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,WAAW,CAAA;AAGlB,OAAO,KAAK,EAAE,EAAE,oBAAoB,EAAc,MAAM,OAAO,CAAA;AAE/D,OAAO,EACL,kBAAkB,EAGlB,aAAa,EAGd,MAAM,kCAAkC,CAAA;AAGzC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC;IACvE,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,gBAAgB,CAAC,EAAE,MAAM,CAAA;CAC1B;AAED,MAAM,MAAM,sBAAsB,GAAG,IAAI,CACvC,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,MAAM,eAAe,GAAG,UAAU,CACnC,GACC,eAAe,CAAA;AAyBjB,eAAO,MAAM,UAAU,qLAiDtB,CAAA"}
package/dist/components/button/BaseButton.js CHANGED
@@ -6,7 +6,7 @@ import LoadingSpinner from '../internal/LoadingSpinner.js';
6
6
  const buildComponentClassName = ({ className, fullWidth, kind, loading, size, }) => {
7
7
  return classNames(kind && "tds-btn", size && size !== "md" && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], fullWidth && "tds-btn--full-width", loading && "tds-btn--loading", className);
8
8
  };
9
- const BaseButton = forwardRef(({ size, prefix, suffix, kind = "secondary", label, className, fullWidth, loading = false, loadingAriaLabel = "Loading...", "aria-label": ariaLabel, ...restProps }, ref) => {
9
+ const BaseButton = forwardRef(({ "aria-label": ariaLabel, className, disabled = false, fullWidth, kind = "secondary", label, loading = false, loadingAriaLabel = "Loading...", prefix, size, suffix, ...restProps }, ref) => {
10
10
  const combinedClassName = buildComponentClassName({
11
11
  className,
12
12
  fullWidth,
@@ -16,7 +16,8 @@ const BaseButton = forwardRef(({ size, prefix, suffix, kind = "secondary", label
16
16
  });
17
17
  const prefixElement = enhanceElementWithClassName(prefix, "prefix");
18
18
  const suffixElement = enhanceElementWithClassName(suffix, "suffix");
19
- return (React.createElement("button", { type: "button", className: combinedClassName, ref: ref, "aria-disabled": loading, disabled: loading, "aria-label": loading ? loadingAriaLabel : ariaLabel, "aria-busy": loading, ...restProps },
19
+ const isDisabled = disabled || loading;
20
+ return (React.createElement("button", { type: "button", className: combinedClassName, ref: ref, ...restProps, "aria-busy": loading || undefined, "aria-disabled": isDisabled || undefined, disabled: isDisabled, "aria-label": loading ? loadingAriaLabel : ariaLabel },
20
21
  loading && React.createElement(LoadingSpinner, null),
21
22
  prefixElement,
22
23
  loading ? React.createElement("span", null, label) : label,
package/dist/components/button/BaseButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { ButtonHTMLAttributes, 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\"\nimport { LoadingSpinner } from \"../internal\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n kind?: ComponentKind\n label: React.ReactNode\n loading?: boolean\n loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n keyof BaseButtonProps | \"children\"\n> &\n BaseButtonProps\n\nconst buildComponentClassName = ({\n className,\n fullWidth,\n kind,\n loading,\n size,\n}: {\n className?: string\n fullWidth?: boolean\n kind?: ComponentKind\n loading?: boolean\n size?: ComponentSize\n}): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n fullWidth && \"tds-btn--full-width\",\n loading && \"tds-btn--loading\",\n className\n )\n}\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n (\n {\n size,\n prefix,\n suffix,\n kind = \"secondary\",\n label,\n className,\n fullWidth,\n loading = false,\n loadingAriaLabel = \"Loading...\",\n \"aria-label\": ariaLabel,\n ...restProps\n }: BaseButtonElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName({\n className,\n fullWidth,\n kind,\n loading,\n size,\n })\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n\n return (\n <button\n type=\"button\"\n className={combinedClassName}\n ref={ref}\n aria-disabled={loading}\n disabled={loading}\n aria-label={loading ? loadingAriaLabel : ariaLabel}\n aria-busy={loading}\n {...restProps}\n >\n {loading && <LoadingSpinner />}\n {prefixElement}\n {loading ? <span>{label}</span> : label}\n {suffixElement}\n </button>\n )\n }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":[],"mappings":";;;;;AA4BA,MAAM,uBAAuB,GAAG,CAAC,EAC/B,SAAS,EACT,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,GAOL,KAAY;AACX,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,CACV;AACH,CAAC;AAEM,MAAM,UAAU,GAAG,UAAU,CAClC,CACE,EACE,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,SAAS,EACT,SAAS,EACT,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,YAAY,EAAE,SAAS,EACvB,GAAG,SAAS,EACW,EACzB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;QAChD,SAAS;QACT,SAAS;QACT,IAAI;QACJ,OAAO;QACP,IAAI;AACL,KAAA,CAAC;IAEF,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;AAEnE,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,mBACO,OAAO,EACtB,QAAQ,EAAE,OAAO,EAAA,YAAA,EACL,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA,WAAA,EACvC,OAAO,KACd,SAAS,EAAA;QAEZ,OAAO,IAAI,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG;QAC7B,aAAa;QACb,OAAO,GAAG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;QACtC,aAAa,CACP;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1
+ {"version":3,"file":"BaseButton.js","sources":["../../../src/components/button/BaseButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { ButtonHTMLAttributes, 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\"\nimport { LoadingSpinner } from \"../internal\"\n\nexport interface BaseButtonProps extends Omit<BaseComponentProps, \"kind\"> {\n kind?: ComponentKind\n label: React.ReactNode\n loading?: boolean\n loadingAriaLabel?: string\n}\n\nexport type BaseButtonElementProps = Omit<\n ButtonHTMLAttributes<HTMLButtonElement>,\n keyof BaseButtonProps | \"children\"\n> &\n BaseButtonProps\n\nconst buildComponentClassName = ({\n className,\n fullWidth,\n kind,\n loading,\n size,\n}: {\n className?: string\n fullWidth?: boolean\n kind?: ComponentKind\n loading?: boolean\n size?: ComponentSize\n}): string => {\n return classNames(\n kind && \"tds-btn\",\n size && size !== \"md\" && COMPONENT_SIZE_CLASS_MAP[size],\n kind && COMPONENT_KIND_CLASS_MAP[kind],\n fullWidth && \"tds-btn--full-width\",\n loading && \"tds-btn--loading\",\n className\n )\n}\n\nexport const BaseButton = forwardRef<HTMLButtonElement, BaseButtonElementProps>(\n (\n {\n \"aria-label\": ariaLabel,\n className,\n disabled = false,\n fullWidth,\n kind = \"secondary\",\n label,\n loading = false,\n loadingAriaLabel = \"Loading...\",\n prefix,\n size,\n suffix,\n ...restProps\n }: BaseButtonElementProps,\n ref\n ) => {\n const combinedClassName = buildComponentClassName({\n className,\n fullWidth,\n kind,\n loading,\n size,\n })\n\n const prefixElement = enhanceElementWithClassName(prefix, \"prefix\")\n const suffixElement = enhanceElementWithClassName(suffix, \"suffix\")\n\n const isDisabled = disabled || loading\n\n return (\n <button\n type=\"button\"\n className={combinedClassName}\n ref={ref}\n {...restProps}\n aria-busy={loading || undefined}\n aria-disabled={isDisabled || undefined}\n disabled={isDisabled}\n aria-label={loading ? loadingAriaLabel : ariaLabel}\n >\n {loading && <LoadingSpinner />}\n {prefixElement}\n {loading ? <span>{label}</span> : label}\n {suffixElement}\n </button>\n )\n }\n)\n\nBaseButton.displayName = \"BaseButton\"\n"],"names":[],"mappings":";;;;;AA4BA,MAAM,uBAAuB,GAAG,CAAC,EAC/B,SAAS,EACT,SAAS,EACT,IAAI,EACJ,OAAO,EACP,IAAI,GAOL,KAAY;AACX,IAAA,OAAO,UAAU,CACf,IAAI,IAAI,SAAS,EACjB,IAAI,IAAI,IAAI,KAAK,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACvD,IAAI,IAAI,wBAAwB,CAAC,IAAI,CAAC,EACtC,SAAS,IAAI,qBAAqB,EAClC,OAAO,IAAI,kBAAkB,EAC7B,SAAS,CACV;AACH,CAAC;MAEY,UAAU,GAAG,UAAU,CAClC,CACE,EACE,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,IAAI,GAAG,WAAW,EAClB,KAAK,EACL,OAAO,GAAG,KAAK,EACf,gBAAgB,GAAG,YAAY,EAC/B,MAAM,EACN,IAAI,EACJ,MAAM,EACN,GAAG,SAAS,EACW,EACzB,GAAG,KACD;IACF,MAAM,iBAAiB,GAAG,uBAAuB,CAAC;QAChD,SAAS;QACT,SAAS;QACT,IAAI;QACJ,OAAO;QACP,IAAI;AACL,KAAA,CAAC;IAEF,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;IACnE,MAAM,aAAa,GAAG,2BAA2B,CAAC,MAAM,EAAE,QAAQ,CAAC;AAEnE,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO;AAEtC,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA,EACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,GACJ,SAAS,eACF,OAAO,IAAI,SAAS,EAAA,eAAA,EAChB,UAAU,IAAI,SAAS,EACtC,QAAQ,EAAE,UAAU,EAAA,YAAA,EACR,OAAO,GAAG,gBAAgB,GAAG,SAAS,EAAA;QAEjD,OAAO,IAAI,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,IAAA,CAAG;QAC7B,aAAa;QACb,OAAO,GAAG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAO,KAAK,CAAQ,GAAG,KAAK;QACtC,aAAa,CACP;AAEb,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
package/dist/components/button/IconButton.js CHANGED
@@ -8,7 +8,7 @@ import { BaseButton } from './BaseButton.js';
8
8
  *
9
9
  * @component
10
10
  */
11
- const IconButton = forwardRef(({ icon, className, ...restProps }, ref) => {
11
+ const IconButton = forwardRef(({ className, icon, ...restProps }, ref) => {
12
12
  const iconOnlyClassName = classNames("tds-btn--icononly", className);
13
13
  return (React.createElement(BaseButton, { ...restProps, label: icon, className: iconOnlyClassName, ref: ref }));
14
14
  });
package/dist/components/button/IconButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ icon, className, ...restProps }: IconButtonProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseButton\n {...restProps}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n />\n )\n }\n)\n\nIconButton.displayName = \"IconButton\"\n"],"names":[],"mappings":";;;;AAYA;;;;;AAKG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,SAAS,EAAmB,EAAE,GAAG,KAAI;IAC1D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;AAEpE,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,UAAU,OACL,SAAS,EACb,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
1
+ {"version":3,"file":"IconButton.js","sources":["../../../src/components/button/IconButton.tsx"],"sourcesContent":["import \"./btn.css\"\n\nimport classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButton, BaseButtonElementProps } from \"./BaseButton\"\n\nexport type IconButtonProps = Omit<BaseButtonElementProps, \"label\"> & {\n \"aria-label\": string\n icon: React.ReactNode\n}\n\n/**\n * An icon-only button component that renders as a button element.\n * Requires an icon and aria-label for accessibility.\n *\n * @component\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n ({ className, icon, ...restProps }: IconButtonProps, ref) => {\n const iconOnlyClassName = classNames(\"tds-btn--icononly\", className)\n\n return (\n <BaseButton\n {...restProps}\n label={icon}\n className={iconOnlyClassName}\n ref={ref}\n />\n )\n }\n)\n\nIconButton.displayName = \"IconButton\"\n"],"names":[],"mappings":";;;;AAYA;;;;;AAKG;AACI,MAAM,UAAU,GAAG,UAAU,CAClC,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,SAAS,EAAmB,EAAE,GAAG,KAAI;IAC1D,MAAM,iBAAiB,GAAG,UAAU,CAAC,mBAAmB,EAAE,SAAS,CAAC;AAEpE,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,UAAU,OACL,SAAS,EACb,KAAK,EAAE,IAAI,EACX,SAAS,EAAE,iBAAiB,EAC5B,GAAG,EAAE,GAAG,EAAA,CACR;AAEN,CAAC;AAGH,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}
package/dist/components/button/PageHeaderActionsDropdownButton.js CHANGED
@@ -12,7 +12,7 @@ function needsAttentionProps({ className, needsAttention, }) {
12
12
  className,
13
13
  };
14
14
  }
15
- const PageHeaderActionsDropdownButton = forwardRef(({ needsAttention, className, ...props }, ref) => {
15
+ const PageHeaderActionsDropdownButton = forwardRef(({ className, needsAttention, ...props }, ref) => {
16
16
  return (React.createElement(DropdownButton, { ref: ref, ...props, kind: "secondary-page-header", ...needsAttentionProps({ className, needsAttention }) }));
17
17
  });
18
18
  PageHeaderActionsDropdownButton.displayName = "PageHeaderActionsDropdownButton";
package/dist/components/button/PageHeaderActionsDropdownButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n BaseButtonElementProps,\n \"kind\"\n> &\n DropdownButtonProps & {\n needsAttention?: boolean\n }\n\nexport function needsAttentionProps({\n className,\n needsAttention,\n}: {\n className?: string\n needsAttention?: boolean\n}) {\n return needsAttention\n ? {\n className: classNames(className, \"tds-btn--attention\"),\n prefix: (\n <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n ),\n }\n : {\n className,\n }\n}\n\nexport const PageHeaderActionsDropdownButton = forwardRef<\n HTMLButtonElement,\n PageHeaderActionsDropdownButtonProps\n>(\n (\n {\n needsAttention,\n className,\n ...props\n }: PageHeaderActionsDropdownButtonProps,\n ref\n ) => {\n return (\n <DropdownButton\n ref={ref}\n {...props}\n kind=\"secondary-page-header\"\n {...needsAttentionProps({ className, needsAttention })}\n />\n )\n }\n)\n\nPageHeaderActionsDropdownButton.displayName = \"PageHeaderActionsDropdownButton\"\n"],"names":[],"mappings":";;;;SAcgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GAIf,EAAA;AACC,IAAA,OAAO;AACL,UAAE;AACE,YAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACtD,MAAM,GACJ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,YAAA,EAAY,kBAAkB,EAAA,CAAG,CAClE;AACF;AACH,UAAE;YACE,SAAS;SACV;AACP;AAEO,MAAM,+BAA+B,GAAG,UAAU,CAIvD,CACE,EACE,cAAc,EACd,SAAS,EACT,GAAG,KAAK,EAC6B,EACvC,GAAG,KACD;IACF,QACE,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,IAAI,EAAC,uBAAuB,EAAA,GACxB,mBAAmB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,EAAA,CACtD;AAEN,CAAC;AAGH,+BAA+B,CAAC,WAAW,GAAG,iCAAiC;;;;"}
1
+ {"version":3,"file":"PageHeaderActionsDropdownButton.js","sources":["../../../src/components/button/PageHeaderActionsDropdownButton.tsx"],"sourcesContent":["import classNames from \"classnames\"\nimport React, { forwardRef } from \"react\"\n\nimport { BaseButtonElementProps } from \"./BaseButton\"\nimport { DropdownButton, DropdownButtonProps } from \"./DropdownButton\"\n\nexport type PageHeaderActionsDropdownButtonProps = Omit<\n BaseButtonElementProps,\n \"kind\"\n> &\n DropdownButtonProps & {\n needsAttention?: boolean\n }\n\nexport function needsAttentionProps({\n className,\n needsAttention,\n}: {\n className?: string\n needsAttention?: boolean\n}) {\n return needsAttention\n ? {\n className: classNames(className, \"tds-btn--attention\"),\n prefix: (\n <span className=\"attention-icon\" aria-label=\"Needs attention!\" />\n ),\n }\n : {\n className,\n }\n}\n\nexport const PageHeaderActionsDropdownButton = forwardRef<\n HTMLButtonElement,\n PageHeaderActionsDropdownButtonProps\n>(\n (\n {\n className,\n needsAttention,\n ...props\n }: PageHeaderActionsDropdownButtonProps,\n ref\n ) => {\n return (\n <DropdownButton\n ref={ref}\n {...props}\n kind=\"secondary-page-header\"\n {...needsAttentionProps({ className, needsAttention })}\n />\n )\n }\n)\n\nPageHeaderActionsDropdownButton.displayName = \"PageHeaderActionsDropdownButton\"\n"],"names":[],"mappings":";;;;SAcgB,mBAAmB,CAAC,EAClC,SAAS,EACT,cAAc,GAIf,EAAA;AACC,IAAA,OAAO;AACL,UAAE;AACE,YAAA,SAAS,EAAE,UAAU,CAAC,SAAS,EAAE,oBAAoB,CAAC;YACtD,MAAM,GACJ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,gBAAgB,EAAA,YAAA,EAAY,kBAAkB,EAAA,CAAG,CAClE;AACF;AACH,UAAE;YACE,SAAS;SACV;AACP;AAEO,MAAM,+BAA+B,GAAG,UAAU,CAIvD,CACE,EACE,SAAS,EACT,cAAc,EACd,GAAG,KAAK,EAC6B,EACvC,GAAG,KACD;IACF,QACE,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,GAAG,EAAE,GAAG,EAAA,GACJ,KAAK,EACT,IAAI,EAAC,uBAAuB,EAAA,GACxB,mBAAmB,CAAC,EAAE,SAAS,EAAE,cAAc,EAAE,CAAC,EAAA,CACtD;AAEN,CAAC;AAGH,+BAA+B,CAAC,WAAW,GAAG,iCAAiC;;;;"}
package/dist/components/link/BaseLink.js CHANGED
@@ -5,14 +5,14 @@ import { enhanceElementWithClassName, COMPONENT_SIZE_CLASS_MAP, COMPONENT_KIND_C
5
5
  const buildComponentClassName = (size, kind, className) => {
6
6
  return classNames("tds-btn", size && size !== "md" && kind && COMPONENT_SIZE_CLASS_MAP[size], kind && COMPONENT_KIND_CLASS_MAP[kind], className);
7
7
  };
8
- const BaseLink = forwardRef(({ size, prefix, suffix, kind, label, children, className, href, external = false, ...restProps }, ref) => {
8
+ const BaseLink = forwardRef(({ children, className, external = false, href, kind, label, prefix, size, suffix, ...restProps }, ref) => {
9
9
  const combinedClassName = buildComponentClassName(size, kind, className);
10
10
  const prefixElement = enhanceElementWithClassName(prefix, "prefix");
11
11
  const suffixElement = enhanceElementWithClassName(suffix, "suffix");
12
12
  const externalProps = external
13
13
  ? { rel: "noopener noreferrer", target: "_blank" }
14
14
  : {};
15
- return (React.createElement("a", { href: href, className: combinedClassName, ref: ref, ...externalProps, ...restProps },
15
+ return (React.createElement("a", { href: href, className: combinedClassName, ref: ref, ...restProps, ...externalProps },
16
16
  prefixElement,
17
17
  label || children,
18
18
  suffixElement));
package/dist/components/link/BaseLink.js.map CHANGED
@@ -1 +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 size,\n prefix,\n suffix,\n kind,\n label,\n children,\n className,\n href,\n external = false,\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 {...externalProps}\n {...restProps}\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,IAAI,EACJ,MAAM,EACN,MAAM,EACN,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,QAAQ,GAAG,KAAK,EAChB,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,aAAa,KACb,SAAS,EAAA;QAEZ,aAAa;AACb,QAAA,KAAK,IAAI,QAAQ;QACjB,aAAa,CACZ;AAER,CAAC;AAGH,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
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;;;;"}
package/dist/components/page-header/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import '../../tapestry-wc/dist/components/p-74Cc2nEh.js';
1
+ import '../../tapestry-wc/dist/components/p-CsShT-kz.js';
2
2
  import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-page-header.js';
3
3
  import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-page-header-nav.js';
4
4
 
package/dist/components/sidenav/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import '../../tapestry-wc/dist/components/p-74Cc2nEh.js';
1
+ import '../../tapestry-wc/dist/components/p-CsShT-kz.js';
2
2
  import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-sidenav.js';
3
3
  import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-sidenav-item.js';
4
4
  import { defineCustomElement as defineCustomElement$3 } from '../../tapestry-wc/dist/components/tds-sidenav-responsive-header.js';
package/dist/index.css CHANGED
@@ -18,6 +18,7 @@
18
18
  --t-spacing-7:56px;
19
19
  --t-spacing-fourth:2px;
20
20
  --t-spacing-half:4px;
21
+ --t-spacing-1-half:12px;
21
22
  --t-element-size-3xl:48px;
22
23
  --t-element-size-2xl:32px;
23
24
  --t-element-size-xl:24px;
@@ -898,6 +899,9 @@
898
899
  --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
899
900
  --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
900
901
  --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
902
+ }
903
+
904
+ :root{
901
905
  --t-border-color-default-base:var(--t-border-color);
902
906
  --t-border-color-default-dark:var(--t-border-color-dark);
903
907
  --t-border-color-default-darker:var(--t-border-color-darker);
@@ -942,6 +946,30 @@
942
946
  --t-text-color-interaction-primary:var(--t-text-color-interaction);
943
947
  }
944
948
 
949
+ :root[data-color-mode="dark"]{
950
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
951
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
952
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
953
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
954
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
955
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
956
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
957
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
958
+ }
959
+
960
+ @media (prefers-color-scheme: dark){
961
+ :root[data-color-mode="system"]{
962
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
963
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
964
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
965
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
966
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
967
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
968
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
969
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
970
+ }
971
+ }
972
+
945
973
  @layer t-critical{
946
974
  tds-page-header:not(.hydrated){
947
975
  display:none;
@@ -952,8 +980,8 @@
952
980
  .tds-page-header{
953
981
  --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
954
982
  --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
955
- --tds-page-header-color:var(--t-text-color-default-primary);
956
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
983
+ --tds-page-header-color:var(--t-text-color);
984
+ --tds-page-header-headline-color:var(--t-text-color-headline);
957
985
  --tds-page-header-headline-font-size:var(--t-font-size-2xl);
958
986
  --tds-page-header-padding-x:var(--t-spacing-2);
959
987
  --tds-page-header-padding-y:var(--t-spacing-2);
@@ -962,29 +990,29 @@
962
990
  --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
963
991
  --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
964
992
  --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
965
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
993
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
966
994
  --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
967
995
  --tds-page-header-nav-item-border-width:1px;
968
996
 
969
997
  --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
970
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
998
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
971
999
 
972
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1000
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
973
1001
  --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
974
1002
  --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
975
1003
 
976
1004
  --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
977
1005
  --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
978
1006
 
979
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1007
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
980
1008
  --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
981
1009
  --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
982
1010
 
983
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1011
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
984
1012
  --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
985
1013
  --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
986
1014
  --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
987
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1015
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
988
1016
  }
989
1017
 
990
1018
  .tds-page-header--profile{
@@ -993,16 +1021,16 @@
993
1021
  @media (min-width: 600px){
994
1022
  .tds-page-header{
995
1023
  --tds-page-header-background-color:var(--t-surface-color-canvas);
996
- --tds-page-header-color:var(--t-text-color-default-secondary);
1024
+ --tds-page-header-color:var(--t-text-color-secondary);
997
1025
  --tds-page-header-padding-x:var(--t-spacing-3);
998
1026
  --tds-page-header-headline-font-size:var(--t-font-size-3xl);
999
1027
  --tds-page-header-nav-gap:var(--t-spacing-half);
1000
1028
  --tds-page-header-nav-background:transparent;
1001
1029
  --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1002
1030
  --tds-page-header-nav-item-border-width:1px;
1003
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1031
+ --tds-page-header-nav-item-color:var(--t-text-color);
1004
1032
  --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1005
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1033
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1006
1034
  }
1007
1035
  }
1008
1036
  }
@@ -1013,7 +1041,7 @@
1013
1041
  padding-top:var(--tds-page-header-padding-y);
1014
1042
  color:var(--tds-page-header-color);
1015
1043
  background:var(--tds-page-header-background-color);
1016
- border-bottom:1px solid var(--t-border-color-default-base);
1044
+ border-bottom:1px solid var(--t-border-color);
1017
1045
  }
1018
1046
 
1019
1047
  .tds-page-header:not(.has-nav){
@@ -1241,8 +1269,8 @@
1241
1269
  --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1242
1270
  --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1243
1271
 
1244
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
1245
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1272
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1273
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1246
1274
  }
1247
1275
 
1248
1276
  .tds-sidenav--theme-gray{
@@ -1283,7 +1311,7 @@
1283
1311
  font-size:var(--t-font-size-sm);
1284
1312
  font-weight:var(--t-font-weight-semibold);
1285
1313
  line-height:1.35;
1286
- color:var(--t-text-color-default-secondary);
1314
+ color:var(--t-text-color-secondary);
1287
1315
  text-transform:uppercase;
1288
1316
  }
1289
1317
 
@@ -1322,7 +1350,7 @@
1322
1350
  overflow:hidden;
1323
1351
  font-size:var(--t-font-size-sm);
1324
1352
  line-height:18px;
1325
- color:var(--t-text-color-default-headline);
1353
+ color:var(--t-text-color-headline);
1326
1354
  white-space:nowrap;
1327
1355
  text-decoration:none;
1328
1356
  -webkit-appearance:none;
@@ -1331,7 +1359,7 @@
1331
1359
  cursor:pointer;
1332
1360
  background-color:var(--tds-sidenav-item-background, transparent);
1333
1361
  border:0;
1334
- border-radius:var(--t-border-radius-default);
1362
+ border-radius:var(--t-border-radius);
1335
1363
  transition:var(--tds-sidenav-item-transition);
1336
1364
  }
1337
1365
 
@@ -1346,7 +1374,7 @@
1346
1374
 
1347
1375
  :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1348
1376
  --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1349
- color:var(--t-text-color-default-headline);
1377
+ color:var(--t-text-color-headline);
1350
1378
  text-decoration:none;
1351
1379
  }
1352
1380
 
@@ -1432,7 +1460,7 @@
1432
1460
  height:100%;
1433
1461
  content:"";
1434
1462
  background-color:var(--tds-sidenav-item-nested-background);
1435
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1463
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1436
1464
  transition:var(--tds-sidenav-item-transition);
1437
1465
  }
1438
1466
 
@@ -1473,7 +1501,7 @@
1473
1501
  margin:0;
1474
1502
  font-size:var(--t-font-size-lg);
1475
1503
  font-weight:var(--t-font-weight-medium);
1476
- color:var(--t-text-color-default-headline);
1504
+ color:var(--t-text-color-headline);
1477
1505
  }
1478
1506
 
1479
1507
  @media (max-width: 719px){
@@ -1552,9 +1580,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1552
1580
  --tds-btn-font-size:16px;
1553
1581
  --tds-btn-font-weight:400;
1554
1582
  --tds-btn-line-height:1.5;
1555
- --tds-btn-color:var(--t-text-color-default-headline);
1583
+ --tds-btn-color:var(--t-text-color-headline);
1556
1584
  --tds-btn-bg:transparent;
1557
- --tds-btn-border-width:var(--t-border-width-default);
1585
+ --tds-btn-border-width:var(--t-border-width);
1558
1586
  --tds-btn-border-color:transparent;
1559
1587
  --tds-btn-border-radius:var(--t-border-radius-md);
1560
1588
  --tds-btn-border-color-hover:transparent;
@@ -1682,15 +1710,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1682
1710
 
1683
1711
  .tds-btn--neutral{
1684
1712
  --tds-btn-color:var(--t-text-color-status-neutral);
1685
- --tds-btn-bg:var(--t-fill-color-button-neutral-solid-default);
1686
- --tds-btn-border-color:var(--t-fill-color-button-neutral-solid-default);
1713
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
1714
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
1687
1715
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1688
1716
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
1689
1717
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
1690
1718
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1691
1719
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
1692
1720
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
1693
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1721
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1694
1722
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1695
1723
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1696
1724
  }
@@ -1720,32 +1748,32 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1720
1748
  }
1721
1749
 
1722
1750
  .tds-btn--interaction{
1723
- --tds-btn-color:var(--t-text-color-default-inverted);
1724
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1725
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1726
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1751
+ --tds-btn-color:var(--t-text-color-inverted);
1752
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1753
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1754
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1727
1755
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1728
1756
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1729
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1757
+ --tds-btn-color-active:var(--t-text-color-inverted);
1730
1758
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1731
1759
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1732
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1760
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1733
1761
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1734
1762
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1735
1763
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1736
1764
  }
1737
1765
 
1738
1766
  .tds-btn--delete{
1739
- --tds-btn-color:var(--t-text-color-default-inverted);
1740
- --tds-btn-bg:var(--t-fill-color-button-delete-solid-default);
1741
- --tds-btn-border-color:var(--t-fill-color-button-delete-solid-default);
1742
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1767
+ --tds-btn-color:var(--t-text-color-inverted);
1768
+ --tds-btn-bg:var(--t-fill-color-button-delete-solid);
1769
+ --tds-btn-border-color:var(--t-fill-color-button-delete-solid);
1770
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1743
1771
  --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
1744
1772
  --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
1745
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1773
+ --tds-btn-color-active:var(--t-text-color-inverted);
1746
1774
  --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
1747
1775
  --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
1748
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1776
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1749
1777
  --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
1750
1778
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1751
1779
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1755,27 +1783,27 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1755
1783
  --tds-btn-color:var(--t-text-color-status-neutral);
1756
1784
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1757
1785
  --tds-btn-color-hover:var(--tds-btn-color);
1758
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1786
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1759
1787
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1760
1788
  --tds-btn-color-active:var(--tds-btn-color);
1761
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1789
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1762
1790
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1763
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1764
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1791
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1792
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1765
1793
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1766
1794
  }
1767
1795
 
1768
1796
  .tds-btn--outline-interaction{
1769
- --tds-btn-color:var(--t-text-color-interaction-primary);
1797
+ --tds-btn-color:var(--t-text-color-interaction);
1770
1798
  --tds-btn-border-color:var(--t-border-color-button-info);
1771
1799
  --tds-btn-color-hover:var(--tds-btn-color);
1772
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1800
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1773
1801
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1774
1802
  --tds-btn-color-active:var(--tds-btn-color);
1775
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1803
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1776
1804
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1777
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1778
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-dim-disabled);
1805
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1806
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1779
1807
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1780
1808
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1781
1809
  }
@@ -1784,13 +1812,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1784
1812
  --tds-btn-color:var(--t-text-color-status-error);
1785
1813
  --tds-btn-border-color:var(--t-border-color-button-delete);
1786
1814
  --tds-btn-color-hover:var(--tds-btn-color);
1787
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1815
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1788
1816
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1789
1817
  --tds-btn-color-active:var(--tds-btn-color);
1790
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1818
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1791
1819
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1792
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1793
- --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-dim-disabled);
1820
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1821
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-disabled);
1794
1822
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1795
1823
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1796
1824
  }
@@ -1799,26 +1827,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1799
1827
  --tds-btn-color:var(--t-text-color-status-neutral);
1800
1828
  --tds-btn-border-color:transparent;
1801
1829
  --tds-btn-color-hover:var(--tds-btn-color);
1802
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1830
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1803
1831
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1804
1832
  --tds-btn-color-active:var(--tds-btn-color);
1805
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1833
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1806
1834
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1807
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1835
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1808
1836
  --tds-btn-bg-disabled:transparent;
1809
1837
  --tds-btn-border-color-disabled:transparent;
1810
1838
  }
1811
1839
 
1812
1840
  .tds-btn--ghost-interaction{
1813
- --tds-btn-color:var(--t-text-color-interaction-primary);
1841
+ --tds-btn-color:var(--t-text-color-interaction);
1814
1842
  --tds-btn-border-color:transparent;
1815
1843
  --tds-btn-color-hover:var(--tds-btn-color);
1816
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1844
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1817
1845
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1818
1846
  --tds-btn-color-active:var(--tds-btn-color);
1819
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1847
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1820
1848
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1821
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1849
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1822
1850
  --tds-btn-bg-disabled:transparent;
1823
1851
  --tds-btn-border-color-disabled:transparent;
1824
1852
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
@@ -1828,12 +1856,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1828
1856
  --tds-btn-color:var(--t-text-color-status-error);
1829
1857
  --tds-btn-border-color:transparent;
1830
1858
  --tds-btn-color-hover:var(--tds-btn-color);
1831
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1859
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1832
1860
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1833
1861
  --tds-btn-color-active:var(--tds-btn-color);
1834
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1862
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1835
1863
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1836
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1864
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1837
1865
  --tds-btn-bg-disabled:transparent;
1838
1866
  --tds-btn-border-color-disabled:transparent;
1839
1867
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
@@ -1841,7 +1869,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1841
1869
 
1842
1870
  .tds-btn--inline-text,
1843
1871
  a[class="tds-btn"]{
1844
- --tds-btn-color:var(--t-text-color-interaction-primary);
1872
+ --tds-btn-color:var(--t-text-color-interaction);
1845
1873
  --tds-btn-color-hover:var(--t-text-color-interaction-hover);
1846
1874
  --tds-btn-color-active:var(--t-text-color-interaction-active);
1847
1875
  --tds-btn-bg:transparent;
@@ -1866,16 +1894,16 @@ a[class="tds-btn"]{
1866
1894
  }
1867
1895
 
1868
1896
  .tds-btn--primary-page-header{
1869
- --tds-btn-color:var(--t-text-color-default-inverted);
1870
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1871
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1872
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1897
+ --tds-btn-color:var(--t-text-color-inverted);
1898
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1899
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1900
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1873
1901
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1874
1902
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1875
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1903
+ --tds-btn-color-active:var(--t-text-color-inverted);
1876
1904
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1877
1905
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1878
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1906
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1879
1907
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1880
1908
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1881
1909
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1883,15 +1911,15 @@ a[class="tds-btn"]{
1883
1911
 
1884
1912
  .tds-btn--secondary-page-header{
1885
1913
  --tds-btn-color:var(--t-text-color-status-neutral);
1886
- --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header-default);
1887
- --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header-default);
1914
+ --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header);
1915
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header);
1888
1916
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1889
1917
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1890
1918
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1891
1919
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1892
1920
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
1893
1921
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
1894
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1922
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1895
1923
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
1896
1924
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
1897
1925
  }
@@ -1903,28 +1931,28 @@ a[class="tds-btn"]{
1903
1931
  --tds-btn-bg:transparent;
1904
1932
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1905
1933
  --tds-btn-color-hover:var(--tds-btn-color);
1906
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1934
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1907
1935
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1908
1936
  --tds-btn-color-active:var(--tds-btn-color);
1909
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1937
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1910
1938
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1911
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1912
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1939
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1940
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1913
1941
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1914
1942
  }
1915
1943
  }
1916
1944
 
1917
1945
  .tds-btn--staff-only{
1918
- --tds-btn-color:var(--t-text-color-default-inverted);
1919
- --tds-btn-bg:var(--t-fill-color-product-staff-base);
1920
- --tds-btn-border-color:var(--t-border-color-default-white);
1921
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1946
+ --tds-btn-color:var(--t-text-color-inverted);
1947
+ --tds-btn-bg:var(--t-fill-color-product-staff);
1948
+ --tds-btn-border-color:var(--t-border-color-white);
1949
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1922
1950
  --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
1923
- --tds-btn-border-color-hover:var(--t-border-color-default-white);
1924
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1951
+ --tds-btn-border-color-hover:var(--t-border-color-white);
1952
+ --tds-btn-color-active:var(--t-text-color-inverted);
1925
1953
  --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
1926
- --tds-btn-border-color-active:var(--t-border-color-default-white);
1927
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1954
+ --tds-btn-border-color-active:var(--t-border-color-white);
1955
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1928
1956
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1929
1957
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1930
1958
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1935,8 +1963,8 @@ a[class="tds-btn"]{
1935
1963
  --tds-btn-padding-y:4px;
1936
1964
  --tds-btn-padding-x:13px;
1937
1965
 
1938
- --tds-btn-color:var(--t-text-color-default-primary);
1939
- --tds-btn-bg:var(--t-fill-color-button-pill-default);
1966
+ --tds-btn-color:var(--t-text-color);
1967
+ --tds-btn-bg:var(--t-fill-color-button-pill);
1940
1968
  --tds-btn-border-color:var(--tds-btn-bg);
1941
1969
  --tds-btn-color-hover:var(--tds-btn-color);
1942
1970
  --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
@@ -1945,10 +1973,10 @@ a[class="tds-btn"]{
1945
1973
  --tds-btn-color-active:var(--tds-btn-color);
1946
1974
  --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
1947
1975
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1948
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1976
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1949
1977
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1950
1978
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1951
- --tds-btn-icon-color:var(--t-icon-color-default-secondary);
1979
+ --tds-btn-icon-color:var(--t-icon-color-secondary);
1952
1980
  --tds-btn-min-height:32px;
1953
1981
  }
1954
1982
 
@@ -1995,8 +2023,8 @@ a[class="tds-btn"]{
1995
2023
  display:inline-block;
1996
2024
  width:var(--tds-btn-attention-icon-size);
1997
2025
  height:var(--tds-btn-attention-icon-size);
1998
- background-color:var(--t-icon-color-status-warning-primary);
1999
- border:.125em solid var(--t-border-color-default-white);
2026
+ background-color:var(--t-icon-color-status-warning);
2027
+ border:.125em solid var(--t-border-color-white);
2000
2028
  border-radius:var(--t-border-radius-round);
2001
2029
  }
2002
2030