@pantheon-systems/pds-toolkit-react 2.0.0-alpha.33 → 2.0.0-alpha.34

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 (29) hide show
  1. package/dist/components/Tag/Tag.d.ts +5 -2
  2. package/dist/components/badges/Badge/Badge.d.ts +1 -1
  3. package/dist/components/buttons/ButtonLink/ButtonLink.d.ts +1 -1
  4. package/dist/components/buttons/ClipboardButton/ClipboardButton.d.ts +5 -1
  5. package/dist/components/buttons/MenuButton/MenuButton.d.ts +1 -1
  6. package/dist/css/component-css/pds-badge.css +1 -1
  7. package/dist/css/component-css/pds-button.css +37 -13
  8. package/dist/css/component-css/pds-close-button.css +1 -1
  9. package/dist/css/component-css/pds-icon-button.css +3 -1
  10. package/dist/css/component-css/pds-index.css +47 -19
  11. package/dist/css/component-css/pds-menu-button.css +1 -1
  12. package/dist/css/component-css/pds-navbar.css +1 -1
  13. package/dist/css/component-css/pds-section-message.css +1 -1
  14. package/dist/css/component-css/pds-tag.css +1 -1
  15. package/dist/css/component-css/pds-toaster.css +1 -1
  16. package/dist/css/component-css/pds-utility-button.css +3 -1
  17. package/dist/css/design-tokens/variables.dark.css +164 -188
  18. package/dist/css/design-tokens/variables.global.css +0 -3
  19. package/dist/css/design-tokens/variables.light.css +149 -173
  20. package/dist/css/layout-css/pds-app-layout.css +1 -1
  21. package/dist/css/layout-css/pds-index.css +1 -1
  22. package/dist/css/pds-components.css +47 -19
  23. package/dist/css/pds-core.css +1 -1
  24. package/dist/css/pds-layouts.css +1 -1
  25. package/dist/index.css +1 -1
  26. package/dist/index.js +10428 -14167
  27. package/dist/index.js.map +1 -1
  28. package/dist/libs/types/custom-types.d.ts +2 -2
  29. package/package.json +4 -4
package/dist/components/Tag/Tag.d.ts CHANGED
@@ -1,7 +1,10 @@
1
1
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  import './tag.css';
3
- export declare const tagColors: readonly ["apollo", "iris", "hypnos", "gaia", "aether", "success", "warning", "critical", "info", "discovery", "amber", "orange", "lime", "teal", "sky", "indigo", "rose", "slate", "sand", "mint", "silver", "stone"];
4
- type TagColor = (typeof tagColors)[number];
3
+ export declare const tagColors: readonly ["orange", "stone", "gold", "lime", "mint", "teal", "sky", "slate", "indigo", "purple", "magenta", "rose", "red", "silver"];
4
+ type TagMutedColor = (typeof tagColors)[number];
5
+ export declare const tagSolidColors: readonly ["orange-solid", "teal-solid", "indigo-solid", "magenta-solid", "rose-solid", "success-solid", "warning-solid", "critical-solid", "info-solid", "discovery-solid"];
6
+ type TagSolidColor = (typeof tagSolidColors)[number];
7
+ export type TagColor = TagMutedColor | TagSolidColor;
5
8
  export type TagSize = 'xs' | 's' | 'm';
6
9
  interface TagProps extends ComponentPropsWithoutRef<'div'> {
7
10
  /**
package/dist/components/badges/Badge/Badge.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
2
  import './badge.css';
3
- export type BadgeColor = 'aether' | 'aether-secondary' | 'amber' | 'amber-secondary' | 'apollo' | 'apollo-secondary' | 'critical' | 'critical-secondary' | 'discovery' | 'discovery-secondary' | 'gaia' | 'gaia-secondary' | 'hypnos' | 'hypnos-secondary' | 'indigo' | 'indigo-secondary' | 'info' | 'info-secondary' | 'iris' | 'iris-secondary' | 'lime' | 'lime-secondary' | 'mint' | 'mint-secondary' | 'orange' | 'orange-secondary' | 'rose' | 'rose-secondary' | 'sand' | 'sand-secondary' | 'silver' | 'silver-secondary' | 'sky' | 'sky-secondary' | 'slate' | 'slate-secondary' | 'stone' | 'stone-secondary' | 'success' | 'success-secondary' | 'teal' | 'teal-secondary' | 'warning' | 'warning-secondary' | 'feature';
3
+ export type BadgeColor = 'brand' | 'brand-muted' | 'critical' | 'critical-muted' | 'discovery' | 'discovery-muted' | 'gold' | 'gold-muted' | 'indigo' | 'indigo-muted' | 'info' | 'info-muted' | 'ink' | 'ink-muted' | 'lime' | 'lime-muted' | 'orange' | 'orange-muted' | 'rose' | 'rose-muted' | 'silver' | 'silver-muted' | 'sky' | 'sky-muted' | 'slate' | 'slate-muted' | 'stone' | 'stone-muted' | 'success' | 'success-muted' | 'warning' | 'warning-muted';
4
4
  /**
5
5
  * Badge component props
6
6
  */
package/dist/components/buttons/ButtonLink/ButtonLink.d.ts CHANGED
@@ -3,7 +3,7 @@ import { ButtonDisplayType, ButtonSize, ButtonVariant } from '../../../libs/type
3
3
  import { PDSIcon } from '../../icons/Icon/Icon';
4
4
  import '../Button/button.css';
5
5
  import './button-link.css';
6
- type ButtonLinkVariant = Exclude<ButtonVariant, 'navbar' | 'inline'>;
6
+ type ButtonLinkVariant = Exclude<ButtonVariant, 'inline'>;
7
7
  /**
8
8
  * Prop types for ButtonLink
9
9
  */
package/dist/components/buttons/ClipboardButton/ClipboardButton.d.ts CHANGED
@@ -19,6 +19,10 @@ export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'>
19
19
  * Is the button disabled?
20
20
  */
21
21
  disabled?: boolean;
22
+ /**
23
+ * Show a visible border around the button.
24
+ */
25
+ hasBorder?: boolean;
22
26
  /**
23
27
  * Which variant of button to render.
24
28
  */
@@ -27,4 +31,4 @@ export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'>
27
31
  /**
28
32
  * ClipboardButton UI component
29
33
  */
30
- export declare const ClipboardButton: ({ ariaLabel, className, clipboardText, disabled, variant, ...props }: ClipboardButtonProps) => import("react/jsx-runtime").JSX.Element;
34
+ export declare const ClipboardButton: ({ ariaLabel, className, clipboardText, disabled, hasBorder, variant, ...props }: ClipboardButtonProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/buttons/MenuButton/MenuButton.d.ts CHANGED
@@ -63,7 +63,7 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
63
63
  /**
64
64
  * Which variant of button to render — only valid for icon-end (default) display type.
65
65
  */
66
- variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'navbar'>;
66
+ variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle'>;
67
67
  }
68
68
  /**
69
69
  * MenuButton UI component
package/dist/css/component-css/pds-badge.css CHANGED
@@ -1 +1 @@
1
- .pds-badge{--badge-bg:var(--pds-color-badge-gaia-background);--badge-fg:var(--pds-color-badge-gaia-foreground);align-items:center;background-color:var(--badge-bg);border-radius:var(--pds-border-radius-input);color:var(--badge-fg);display:inline-flex;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-medium);height:var(--pds-spacing-button-height-s);line-height:1;padding-inline:var(--pds-spacing-s);white-space:nowrap}.pds-badge--s{font-size:var(--pds-typography-size-xs);height:var(--pds-spacing-button-height-xs);padding-inline:var(--pds-spacing-xs)}.pds-badge--xs{font-size:.6875rem;height:var(--pds-spacing-l);padding-inline:var(--pds-spacing-3xs)}.pds-badge--aether{--badge-bg:var(--pds-color-badge-aether-background);--badge-fg:var(--pds-color-badge-aether-foreground)}.pds-badge--amber{--badge-bg:var(--pds-color-badge-amber-background);--badge-fg:var(--pds-color-badge-amber-foreground)}.pds-badge--apollo{--badge-bg:var(--pds-color-badge-apollo-background);--badge-fg:var(--pds-color-badge-apollo-foreground)}.pds-badge--critical{--badge-bg:var(--pds-color-badge-critical-background);--badge-fg:var(--pds-color-badge-critical-foreground)}.pds-badge--discovery{--badge-bg:var(--pds-color-badge-discovery-background);--badge-fg:var(--pds-color-badge-discovery-foreground)}.pds-badge--gaia{--badge-bg:var(--pds-color-badge-gaia-background);--badge-fg:var(--pds-color-badge-gaia-foreground)}.pds-badge--hypnos{--badge-bg:var(--pds-color-badge-hypnos-background);--badge-fg:var(--pds-color-badge-hypnos-foreground)}.pds-badge--indigo{--badge-bg:var(--pds-color-badge-indigo-background);--badge-fg:var(--pds-color-badge-indigo-foreground)}.pds-badge--info{--badge-bg:var(--pds-color-badge-info-background);--badge-fg:var(--pds-color-badge-info-foreground)}.pds-badge--iris{--badge-bg:var(--pds-color-badge-iris-background);--badge-fg:var(--pds-color-badge-iris-foreground)}.pds-badge--lime{--badge-bg:var(--pds-color-badge-lime-background);--badge-fg:var(--pds-color-badge-lime-foreground)}.pds-badge--mint{--badge-bg:var(--pds-color-badge-mint-background);--badge-fg:var(--pds-color-badge-mint-foreground)}.pds-badge--orange{--badge-bg:var(--pds-color-badge-orange-background);--badge-fg:var(--pds-color-badge-orange-foreground)}.pds-badge--rose{--badge-bg:var(--pds-color-badge-rose-background);--badge-fg:var(--pds-color-badge-rose-foreground)}.pds-badge--sand{--badge-bg:var(--pds-color-badge-sand-background);--badge-fg:var(--pds-color-badge-sand-foreground)}.pds-badge--silver{--badge-bg:var(--pds-color-badge-silver-background);--badge-fg:var(--pds-color-badge-silver-foreground)}.pds-badge--sky{--badge-bg:var(--pds-color-badge-sky-background);--badge-fg:var(--pds-color-badge-sky-foreground)}.pds-badge--slate{--badge-bg:var(--pds-color-badge-slate-background);--badge-fg:var(--pds-color-badge-slate-foreground)}.pds-badge--stone{--badge-bg:var(--pds-color-badge-stone-background);--badge-fg:var(--pds-color-badge-stone-foreground)}.pds-badge--success{--badge-bg:var(--pds-color-badge-success-background);--badge-fg:var(--pds-color-badge-success-foreground)}.pds-badge--teal{--badge-bg:var(--pds-color-badge-teal-background);--badge-fg:var(--pds-color-badge-teal-foreground)}.pds-badge--warning{--badge-bg:var(--pds-color-badge-warning-background);--badge-fg:var(--pds-color-badge-warning-foreground)}.pds-badge--aether-secondary{--badge-bg:var(--pds-color-badge-aether-secondary-background);--badge-fg:var(--pds-color-badge-aether-secondary-foreground)}.pds-badge--amber-secondary{--badge-bg:var(--pds-color-badge-amber-secondary-background);--badge-fg:var(--pds-color-badge-amber-secondary-foreground)}.pds-badge--apollo-secondary{--badge-bg:var(--pds-color-badge-apollo-secondary-background);--badge-fg:var(--pds-color-badge-apollo-secondary-foreground)}.pds-badge--critical-secondary{--badge-bg:var(--pds-color-badge-critical-secondary-background);--badge-fg:var(--pds-color-badge-critical-secondary-foreground)}.pds-badge--discovery-secondary{--badge-bg:var(--pds-color-badge-discovery-secondary-background);--badge-fg:var(--pds-color-badge-discovery-secondary-foreground)}.pds-badge--gaia-secondary{--badge-bg:var(--pds-color-badge-gaia-secondary-background);--badge-fg:var(--pds-color-badge-gaia-secondary-foreground)}.pds-badge--hypnos-secondary{--badge-bg:var(--pds-color-badge-hypnos-secondary-background);--badge-fg:var(--pds-color-badge-hypnos-secondary-foreground)}.pds-badge--indigo-secondary{--badge-bg:var(--pds-color-badge-indigo-secondary-background);--badge-fg:var(--pds-color-badge-indigo-secondary-foreground)}.pds-badge--info-secondary{--badge-bg:var(--pds-color-badge-info-secondary-background);--badge-fg:var(--pds-color-badge-info-secondary-foreground)}.pds-badge--iris-secondary{--badge-bg:var(--pds-color-badge-iris-secondary-background);--badge-fg:var(--pds-color-badge-iris-secondary-foreground)}.pds-badge--lime-secondary{--badge-bg:var(--pds-color-badge-lime-secondary-background);--badge-fg:var(--pds-color-badge-lime-secondary-foreground)}.pds-badge--mint-secondary{--badge-bg:var(--pds-color-badge-mint-secondary-background);--badge-fg:var(--pds-color-badge-mint-secondary-foreground)}.pds-badge--orange-secondary{--badge-bg:var(--pds-color-badge-orange-secondary-background);--badge-fg:var(--pds-color-badge-orange-secondary-foreground)}.pds-badge--rose-secondary{--badge-bg:var(--pds-color-badge-rose-secondary-background);--badge-fg:var(--pds-color-badge-rose-secondary-foreground)}.pds-badge--sand-secondary{--badge-bg:var(--pds-color-badge-sand-secondary-background);--badge-fg:var(--pds-color-badge-sand-secondary-foreground)}.pds-badge--silver-secondary{--badge-bg:var(--pds-color-badge-silver-secondary-background);--badge-fg:var(--pds-color-badge-silver-secondary-foreground)}.pds-badge--sky-secondary{--badge-bg:var(--pds-color-badge-sky-secondary-background);--badge-fg:var(--pds-color-badge-sky-secondary-foreground)}.pds-badge--slate-secondary{--badge-bg:var(--pds-color-badge-slate-secondary-background);--badge-fg:var(--pds-color-badge-slate-secondary-foreground)}.pds-badge--stone-secondary{--badge-bg:var(--pds-color-badge-stone-secondary-background);--badge-fg:var(--pds-color-badge-stone-secondary-foreground)}.pds-badge--success-secondary{--badge-bg:var(--pds-color-badge-success-secondary-background);--badge-fg:var(--pds-color-badge-success-secondary-foreground)}.pds-badge--teal-secondary{--badge-bg:var(--pds-color-badge-teal-secondary-background);--badge-fg:var(--pds-color-badge-teal-secondary-foreground)}.pds-badge--warning-secondary{--badge-bg:var(--pds-color-badge-warning-secondary-background);--badge-fg:var(--pds-color-badge-warning-secondary-foreground)}.pds-badge--feature{background:var(--pds-gradient-badge-feature);color:var(--pds-color-badge-feature-foreground)}
1
+ .pds-badge{--badge-bg:var(--pds-color-badge-brand-muted-background);--badge-fg:var(--pds-color-badge-brand-muted-foreground);align-items:center;background-color:var(--badge-bg);border-radius:var(--pds-border-radius-input);color:var(--badge-fg);display:inline-flex;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-medium);height:var(--pds-spacing-button-height-s);line-height:1;padding-inline:var(--pds-spacing-s);white-space:nowrap}.pds-badge--s{font-size:var(--pds-typography-size-xs);height:var(--pds-spacing-button-height-xs);padding-inline:var(--pds-spacing-xs)}.pds-badge--xs{font-size:.6875rem;height:var(--pds-spacing-l);padding-inline:var(--pds-spacing-3xs)}.pds-badge--brand{--badge-bg:var(--pds-color-badge-brand-background);--badge-fg:var(--pds-color-badge-brand-foreground)}.pds-badge--critical{--badge-bg:var(--pds-color-badge-critical-background);--badge-fg:var(--pds-color-badge-critical-foreground)}.pds-badge--discovery{--badge-bg:var(--pds-color-badge-discovery-background);--badge-fg:var(--pds-color-badge-discovery-foreground)}.pds-badge--gold{--badge-bg:var(--pds-color-badge-gold-background);--badge-fg:var(--pds-color-badge-gold-foreground)}.pds-badge--indigo{--badge-bg:var(--pds-color-badge-indigo-background);--badge-fg:var(--pds-color-badge-indigo-foreground)}.pds-badge--info{--badge-bg:var(--pds-color-badge-info-background);--badge-fg:var(--pds-color-badge-info-foreground)}.pds-badge--ink{--badge-bg:var(--pds-color-badge-ink-background);--badge-fg:var(--pds-color-badge-ink-foreground)}.pds-badge--lime{--badge-bg:var(--pds-color-badge-lime-background);--badge-fg:var(--pds-color-badge-lime-foreground)}.pds-badge--orange{--badge-bg:var(--pds-color-badge-orange-background);--badge-fg:var(--pds-color-badge-orange-foreground)}.pds-badge--rose{--badge-bg:var(--pds-color-badge-rose-background);--badge-fg:var(--pds-color-badge-rose-foreground)}.pds-badge--silver{--badge-bg:var(--pds-color-badge-silver-background);--badge-fg:var(--pds-color-badge-silver-foreground)}.pds-badge--sky{--badge-bg:var(--pds-color-badge-sky-background);--badge-fg:var(--pds-color-badge-sky-foreground)}.pds-badge--slate{--badge-bg:var(--pds-color-badge-slate-background);--badge-fg:var(--pds-color-badge-slate-foreground)}.pds-badge--stone{--badge-bg:var(--pds-color-badge-stone-background);--badge-fg:var(--pds-color-badge-stone-foreground)}.pds-badge--success{--badge-bg:var(--pds-color-badge-success-background);--badge-fg:var(--pds-color-badge-success-foreground)}.pds-badge--warning{--badge-bg:var(--pds-color-badge-warning-background);--badge-fg:var(--pds-color-badge-warning-foreground)}.pds-badge--brand-muted{--badge-bg:var(--pds-color-badge-brand-muted-background);--badge-fg:var(--pds-color-badge-brand-muted-foreground)}.pds-badge--critical-muted{--badge-bg:var(--pds-color-badge-critical-muted-background);--badge-fg:var(--pds-color-badge-critical-muted-foreground)}.pds-badge--discovery-muted{--badge-bg:var(--pds-color-badge-discovery-muted-background);--badge-fg:var(--pds-color-badge-discovery-muted-foreground)}.pds-badge--gold-muted{--badge-bg:var(--pds-color-badge-gold-muted-background);--badge-fg:var(--pds-color-badge-gold-muted-foreground)}.pds-badge--indigo-muted{--badge-bg:var(--pds-color-badge-indigo-muted-background);--badge-fg:var(--pds-color-badge-indigo-muted-foreground)}.pds-badge--info-muted{--badge-bg:var(--pds-color-badge-info-muted-background);--badge-fg:var(--pds-color-badge-info-muted-foreground)}.pds-badge--ink-muted{--badge-bg:var(--pds-color-badge-ink-muted-background);--badge-fg:var(--pds-color-badge-ink-muted-foreground)}.pds-badge--lime-muted{--badge-bg:var(--pds-color-badge-lime-muted-background);--badge-fg:var(--pds-color-badge-lime-muted-foreground)}.pds-badge--orange-muted{--badge-bg:var(--pds-color-badge-orange-muted-background);--badge-fg:var(--pds-color-badge-orange-muted-foreground)}.pds-badge--rose-muted{--badge-bg:var(--pds-color-badge-rose-muted-background);--badge-fg:var(--pds-color-badge-rose-muted-foreground)}.pds-badge--silver-muted{--badge-bg:var(--pds-color-badge-silver-muted-background);--badge-fg:var(--pds-color-badge-silver-muted-foreground)}.pds-badge--sky-muted{--badge-bg:var(--pds-color-badge-sky-muted-background);--badge-fg:var(--pds-color-badge-sky-muted-foreground)}.pds-badge--slate-muted{--badge-bg:var(--pds-color-badge-slate-muted-background);--badge-fg:var(--pds-color-badge-slate-muted-foreground)}.pds-badge--stone-muted{--badge-bg:var(--pds-color-badge-stone-muted-background);--badge-fg:var(--pds-color-badge-stone-muted-foreground)}.pds-badge--success-muted{--badge-bg:var(--pds-color-badge-success-muted-background);--badge-fg:var(--pds-color-badge-success-muted-foreground)}.pds-badge--warning-muted{--badge-bg:var(--pds-color-badge-warning-muted-background);--badge-fg:var(--pds-color-badge-warning-muted-foreground)}
package/dist/css/component-css/pds-button.css CHANGED
@@ -1,47 +1,71 @@
1
1
  .pds-button{--button-font-size:var(--pds-typography-size-s);--button-height:var(--pds-spacing-button-height-s);--button-padding-inline:var(--pds-spacing-button-padding-inline-s);--button-gap-inline:var(--pds-spacing-button-gap-inline-s);--button-background-color:var(--pds-color-button-primary-background-default);--button-background-color-hover:var(
2
2
  --pds-color-button-primary-background-hover
3
- );--button-foreground-color:var(--pds-color-button-primary-foreground);--button-foreground-color-hover:var(--button-foreground-color);--button-border-color:var(--pds-color-button-primary-background-default);--button-border-color-hover:var(--pds-color-button-primary-background-hover);align-items:center;background-color:var(--button-background-color);border-color:var(--button-border-color);border-radius:var(--pds-border-radius-button);border-style:solid;border-width:var(--pds-border-width-default);color:var(--button-foreground-color);cursor:pointer;display:inline-flex;font-family:var(--pds-typography-ff-default);font-size:var(--button-font-size);font-weight:var(--pds-typography-fw-medium);gap:var(--button-gap-inline);height:var(--button-height);justify-content:center;line-height:1;max-height:var(--button-height);padding-block:0;padding-inline:var(--button-padding-inline);text-decoration:none;transition:var(--pds-animation-transition-button);white-space:nowrap}.pds-button:disabled{cursor:not-allowed;opacity:40%}.pds-button:active:enabled,.pds-button:hover:enabled,a.pds-button:active,a.pds-button:hover{--button-background-color:var(--button-background-color-hover);--button-border-color:var(--button-border-color-hover);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px;transition:var(--pds-animation-transition-focus)}.pds-button__icon{flex-shrink:0}.pds-button--full-width{width:100%}.pds-button--xs{--button-font-size:var(--pds-typography-size-xs);--button-height:var(--pds-spacing-button-height-xs);--button-padding-inline:var(--pds-spacing-button-padding-inline-xs);--button-gap-inline:var(--pds-spacing-button-gap-inline-xs)}.pds-button--s{--button-font-size:var(--pds-typography-size-s);--button-height:var(--pds-spacing-button-height-s);--button-padding-inline:var(--pds-spacing-button-padding-inline-s);-button-gap-inline:var(--pds-spacing-button-gap-inline-s)}.pds-button--m{--button-font-size:var(--pds-typography-size-m);--button-height:var(--pds-spacing-button-height-m);--button-padding-inline:var(--pds-spacing-button-padding-inline-m);--button-gap-inline:var(--pds-spacing-button-gap-inline-m)}.pds-button--l{--button-font-size:var(--pds-typography-size-l);--button-height:var(--pds-spacing-button-height-l);--button-padding-inline:var(--pds-spacing-button-padding-inline-l);--button-gap-inline:var(--pds-spacing-button-gap-inline-l)}.pds-button--xl{--button-font-size:var(--pds-typography-size-xl);--button-height:var(--pds-spacing-button-height-xl);--button-padding-inline:var(--pds-spacing-button-padding-inline-xl);--button-gap-inline:var(--pds-spacing-button-gap-inline-xl)}.pds-button--secondary{--button-background-color:var(
3
+ );--button-background-color-active:var(
4
+ --pds-color-button-primary-background-active
5
+ );--button-foreground-color:var(--pds-color-button-primary-foreground);--button-foreground-color-hover:var(--button-foreground-color);--button-border-color:var(--pds-color-button-primary-background-default);--button-border-color-hover:var(--pds-color-button-primary-background-hover);--button-border-color-active:var(--button-background-color-active);--button-box-shadow-active:var(--pds-elevation-button-primary-active);align-items:center;background-color:var(--button-background-color);border-color:var(--button-border-color);border-radius:var(--pds-border-radius-button);border-style:solid;border-width:var(--pds-border-width-default);color:var(--button-foreground-color);cursor:pointer;display:inline-flex;font-family:var(--pds-typography-ff-default);font-size:var(--button-font-size);font-weight:var(--pds-typography-fw-medium);gap:var(--button-gap-inline);height:var(--button-height);justify-content:center;line-height:1;max-height:var(--button-height);padding-block:0;padding-inline:var(--button-padding-inline);text-decoration:none;transition:var(--pds-animation-transition-button);white-space:nowrap}.pds-button:disabled{cursor:not-allowed;opacity:40%}.pds-button:hover:enabled,a.pds-button:hover{--button-background-color:var(--button-background-color-hover);--button-border-color:var(--button-border-color-hover);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:active:enabled,a.pds-button:active{--button-background-color:var(--button-background-color-active);--button-border-color:var(--button-border-color-active);box-shadow:var(--button-box-shadow-active);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px;transition:var(--pds-animation-transition-focus)}.pds-button__icon{flex-shrink:0}.pds-button--full-width{width:100%}.pds-button--xs{--button-font-size:var(--pds-typography-size-xs);--button-height:var(--pds-spacing-button-height-xs);--button-padding-inline:var(--pds-spacing-button-padding-inline-xs);--button-gap-inline:var(--pds-spacing-button-gap-inline-xs)}.pds-button--s{--button-font-size:var(--pds-typography-size-s);--button-height:var(--pds-spacing-button-height-s);--button-padding-inline:var(--pds-spacing-button-padding-inline-s);-button-gap-inline:var(--pds-spacing-button-gap-inline-s)}.pds-button--m{--button-font-size:var(--pds-typography-size-m);--button-height:var(--pds-spacing-button-height-m);--button-padding-inline:var(--pds-spacing-button-padding-inline-m);--button-gap-inline:var(--pds-spacing-button-gap-inline-m)}.pds-button--l{--button-font-size:var(--pds-typography-size-l);--button-height:var(--pds-spacing-button-height-l);--button-padding-inline:var(--pds-spacing-button-padding-inline-l);--button-gap-inline:var(--pds-spacing-button-gap-inline-l)}.pds-button--secondary{--button-background-color:var(
4
6
  --pds-color-button-secondary-background-default
5
7
  );--button-background-color-hover:var(
6
8
  --pds-color-button-secondary-background-hover
7
- );--button-foreground-color:var(
9
+ );--button-background-color-active:var(
10
+ --pds-color-button-secondary-background-active
11
+ );--button-box-shadow-active:var(--pds-elevation-button-secondary-active);--button-foreground-color:var(
8
12
  --pds-color-button-secondary-foreground-default
9
13
  );--button-foreground-color-hover:var(
10
14
  --pds-color-button-secondary-foreground-hover
11
- );--button-border-color:var(--pds-color-button-secondary-border);--button-border-color-hover:var(--pds-color-button-secondary-border)}.pds-button--subtle{--button-background-color:var(--pds-color-button-subtle-background-default);--button-background-color-hover:var(
15
+ );--button-border-color:var(--pds-color-button-secondary-border);--button-border-color-hover:var(--pds-color-button-secondary-border);--button-border-color-active:var(--pds-color-button-secondary-border)}.pds-button--subtle{--button-background-color:var(--pds-color-button-subtle-background-default);--button-background-color-hover:var(
12
16
  --pds-color-button-subtle-background-hover
13
- );--button-foreground-color:var(--pds-color-button-subtle-foreground);--button-border-color:var(--pds-color-button-subtle-background-default);--button-border-color-hover:var(--pds-color-button-subtle-background-hover)}.pds-button--critical{--button-background-color:var(
17
+ );--button-background-color-active:var(
18
+ --pds-color-button-subtle-background-active
19
+ );--button-box-shadow-active:var(--pds-elevation-button-subtle-active);--button-foreground-color:var(--pds-color-button-subtle-foreground);--button-border-color:var(--pds-color-button-subtle-background-default);--button-border-color-hover:var(--pds-color-button-subtle-background-hover);--button-border-color-active:var(--button-background-color-active)}.pds-button--critical{--button-background-color:var(
14
20
  --pds-color-button-critical-background-default
15
21
  );--button-background-color-hover:var(
16
22
  --pds-color-button-critical-background-hover
17
- );--button-foreground-color:var(--pds-color-button-critical-foreground);--button-border-color:var(--pds-color-button-critical-background-default);--button-border-color-hover:var(
23
+ );--button-background-color-active:var(
24
+ --pds-color-button-critical-background-active
25
+ );--button-box-shadow-active:var(--pds-elevation-button-critical-active);--button-foreground-color:var(--pds-color-button-critical-foreground);--button-border-color:var(--pds-color-button-critical-background-default);--button-border-color-hover:var(
18
26
  --pds-color-button-critical-background-hover
19
- )}.pds-button--critical .pds-button__working-indicator{--spinner-color-1:var(--button-foreground-color);--spinner-color-2:color-mix(in oklch,var(--button-foreground-color) 50%,transparent);--spinner-color-3:transparent}.pds-button--critical-secondary{--button-background-color:var(
27
+ );--button-border-color-active:var(--button-background-color-active)}.pds-button--critical .pds-button__working-indicator{--spinner-color-1:var(--button-foreground-color);--spinner-color-2:color-mix(in oklch,var(--button-foreground-color) 50%,transparent);--spinner-color-3:transparent}.pds-button--critical-secondary{--button-background-color:var(
20
28
  --pds-color-button-critical-secondary-background-default
21
29
  );--button-background-color-hover:var(
22
30
  --pds-color-button-critical-secondary-background-hover
31
+ );--button-background-color-active:var(
32
+ --pds-color-button-critical-secondary-background-active
33
+ );--button-box-shadow-active:var(
34
+ --pds-elevation-button-critical-secondary-active
23
35
  );--button-foreground-color:var(
24
36
  --pds-color-button-critical-secondary-foreground
25
37
  );--button-border-color:var(
26
38
  --pds-color-button-critical-secondary-border-default
27
39
  );--button-border-color-hover:var(
28
40
  --pds-color-button-critical-secondary-border-default
41
+ );--button-border-color-active:var(
42
+ --pds-color-button-critical-secondary-border-default
29
43
  )}.pds-button--critical-secondary .pds-button__working-indicator{--spinner-color-1:var(--pds-color-spinner-critical-secondary-1);--spinner-color-2:var(--pds-color-spinner-critical-secondary-2);--spinner-color-3:var(--pds-color-spinner-critical-secondary-3)}.pds-button--brand{--button-background-color:var(--pds-color-button-brand-background-default);--button-background-color-hover:var(
30
44
  --pds-color-button-brand-background-hover
31
- );--button-foreground-color:var(--pds-color-button-brand-foreground);--button-border-color:var(--pds-color-button-brand-background-default);--button-border-color-hover:var(--pds-color-button-brand-background-hover)}.pds-button--highlight{--button-background-color:var(
45
+ );--button-background-color-active:var(
46
+ --pds-color-button-brand-background-active
47
+ );--button-box-shadow-active:var(--pds-elevation-button-brand-active);--button-foreground-color:var(--pds-color-button-brand-foreground);--button-border-color:var(--pds-color-button-brand-background-default);--button-border-color-hover:var(--pds-color-button-brand-background-hover);--button-border-color-active:var(--button-background-color-active)}.pds-button--highlight{--button-background-color:var(
32
48
  --pds-color-button-highlight-background-default
33
49
  );--button-background-color-hover:var(
34
50
  --pds-color-button-highlight-background-hover
35
- );--button-foreground-color:var(--pds-color-button-highlight-foreground);--button-border-color:var(--pds-color-button-highlight-background-default);--button-border-color-hover:var(
51
+ );--button-background-color-active:var(
52
+ --pds-color-button-highlight-background-active
53
+ );--button-box-shadow-active:var(--pds-elevation-button-highlight-active);--button-foreground-color:var(--pds-color-button-highlight-foreground);--button-border-color:var(--pds-color-button-highlight-background-default);--button-border-color-hover:var(
36
54
  --pds-color-button-highlight-background-hover
37
- )}.pds-button--highlight .pds-button__working-indicator{--spinner-color-1:var(--button-foreground-color);--spinner-color-2:color-mix(in oklch,var(--button-foreground-color) 50%,transparent);--spinner-color-3:transparent}.pds-button--reverse{--button-background-color:var(--pds-color-button-reverse-background-default);--button-background-color-hover:var(
55
+ );--button-border-color-active:var(--button-background-color-active)}.pds-button--highlight .pds-button__working-indicator{--spinner-color-1:var(--button-foreground-color);--spinner-color-2:color-mix(in oklch,var(--button-foreground-color) 50%,transparent);--spinner-color-3:transparent}.pds-button--reverse{--button-background-color:var(--pds-color-button-reverse-background-default);--button-background-color-hover:var(
38
56
  --pds-color-button-reverse-background-hover
39
- );--button-foreground-color:var(--pds-color-button-reverse-foreground);--button-border-color:var(--pds-color-button-reverse-background-default);--button-border-color-hover:var(--pds-color-button-reverse-background-hover)}.pds-button--reverse-secondary{--button-background-color:var(
57
+ );--button-background-color-active:var(
58
+ --pds-color-button-reverse-background-active
59
+ );--button-box-shadow-active:var(--pds-elevation-button-reverse-active);--button-foreground-color:var(--pds-color-button-reverse-foreground);--button-border-color:var(--pds-color-button-reverse-background-default);--button-border-color-hover:var(--pds-color-button-reverse-background-hover);--button-border-color-active:var(--button-background-color-active)}.pds-button--reverse-secondary{--button-background-color:var(
40
60
  --pds-color-button-reverse-secondary-background-default
41
61
  );--button-background-color-hover:var(
42
62
  --pds-color-button-reverse-secondary-background-hover
63
+ );--button-background-color-active:var(
64
+ --pds-color-button-reverse-secondary-background-active
65
+ );--button-box-shadow-active:var(
66
+ --pds-elevation-button-reverse-secondary-active
43
67
  );--button-foreground-color:var(
44
68
  --pds-color-button-reverse-secondary-foreground
45
- );--button-border-color:var(--pds-color-button-reverse-secondary-border);--button-border-color-hover:var(--pds-color-button-reverse-secondary-border)}.pds-button--navbar{--button-background-color:var(--pds-color-button-subtle-background-default);--button-background-color-hover:var(
46
- --pds-color-button-subtle-background-hover
47
- );--button-foreground-color:var(--pds-color-button-subtle-foreground);--button-foreground-color-hover:var(--pds-color-button-subtle-foreground);--button-border-color:var(--pds-color-button-subtle-background-default);--button-border-color-hover:var(--pds-color-button-subtle-background-hover)}.pds-button--inline{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);height:unset;justify-content:unset;letter-spacing:0;max-height:unset;padding-inline:0;padding:0;transition:var(--pds-animation-transition-button)}.pds-button--inline:hover:enabled,a.pds-button--inline:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-button--loading{cursor:not-allowed}.pds-button--loading:active,.pds-button--loading:hover:enabled{--button-background-color:var(--pulse-regular-base-color);--button-border-color:var(--pulse-regular-base-color)}.pds-button--loading.pds-pulse{background-color:var(--pulse-regular-base-color);border-color:var(--pulse-regular-base-color);color:transparent}.pds-button--loading .pds-button__icon,.pds-button--loading .pds-button__working-indicator{opacity:0}.pds-button-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m);width:100%}@media (min-width:768px){.pds-button-group{column-gap:var(--pds-spacing-m);flex-direction:row;width:unset}.pds-button-group--lg{column-gap:var(--pds-spacing-l)}}
69
+ );--button-border-color:var(--pds-color-button-reverse-secondary-border);--button-border-color-hover:var(--pds-color-button-reverse-secondary-border);--button-border-color-active:var(
70
+ --pds-color-button-reverse-secondary-border
71
+ )}.pds-button--inline{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);height:unset;justify-content:unset;letter-spacing:0;max-height:unset;padding-inline:0;padding:0;transition:var(--pds-animation-transition-button)}.pds-button--inline:hover:enabled,a.pds-button--inline:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-button--inline:active:enabled,a.pds-button--inline:active{box-shadow:none;color:var(--pds-color-interactive-link-active)}.pds-button--loading{cursor:not-allowed}.pds-button--loading:active,.pds-button--loading:hover:enabled{--button-background-color:var(--pulse-regular-base-color);--button-border-color:var(--pulse-regular-base-color)}.pds-button--loading.pds-pulse{background-color:var(--pulse-regular-base-color);border-color:var(--pulse-regular-base-color);color:transparent}.pds-button--loading .pds-button__icon,.pds-button--loading .pds-button__working-indicator{opacity:0}.pds-button-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m);width:100%}@media (min-width:768px){.pds-button-group{column-gap:var(--pds-spacing-m);flex-direction:row;width:unset}.pds-button-group--lg{column-gap:var(--pds-spacing-l)}}
package/dist/css/component-css/pds-close-button.css CHANGED
@@ -1 +1 @@
1
- .pds-close-button{--button-size:var(--pds-spacing-l);align-items:center;background-color:var(--pds-color-close-button-background-default);border:none;border-radius:.25rem;color:var(--pds-color-close-button-foreground);cursor:pointer;display:flex;height:var(--button-size);justify-content:center;padding:0;width:var(--button-size)}.pds-close-button .pds-icon{height:var(--pds-typography-size-s)}.pds-close-button:hover{background-color:var(--pds-color-close-button-background-hover)}.pds-close-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);transition:var(--pds-animation-transition-focus)}.pds-close-button__icon{flex-shrink:0}.pds-close-button--m{--button-size:var(--pds-spacing-l)}.pds-close-button--l{--button-size:var(--pds-spacing-xl)}.pds-close-button--xl{--button-size:var(--pds-spacing-2xl)}
1
+ .pds-close-button{--button-size:var(--pds-spacing-l);align-items:center;background-color:var(--pds-color-close-button-background-default);border:none;border-radius:.25rem;color:var(--pds-color-close-button-foreground);cursor:pointer;display:flex;height:var(--button-size);justify-content:center;padding:0;width:var(--button-size)}.pds-close-button:hover{background-color:var(--pds-color-close-button-background-hover)}.pds-close-button:active:enabled{background-color:var(--pds-color-button-secondary-background-active);box-shadow:var(--pds-elevation-button-secondary-active)}.pds-close-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);transition:var(--pds-animation-transition-focus)}.pds-close-button__icon{flex-shrink:0}.pds-close-button--m{--button-size:var(--pds-spacing-l)}.pds-close-button--m .pds-icon{height:var(--pds-spacing-s)}.pds-close-button--l{--button-size:var(--pds-spacing-xl)}.pds-close-button--l .pds-icon{height:var(--pds-spacing-m)}.pds-close-button--xl{--button-size:var(--pds-spacing-2xl)}.pds-close-button--xl .pds-icon{height:var(--pds-spacing-l)}
package/dist/css/component-css/pds-icon-button.css CHANGED
@@ -14,4 +14,6 @@
14
14
  --pds-color-icon-button-critical-background-hover
15
15
  );--icon-button-border:var(--pds-color-icon-button-critical-border-default);--icon-button-border-hover:var(
16
16
  --pds-color-icon-button-critical-border-hover
17
- );--icon-button-foreground:var(--pds-color-icon-button-critical-foreground)}.pds-icon-button--pressed,.pds-icon-button--pressed:hover:enabled{background-color:var(--icon-button-border);border-color:var(--icon-button-border);box-shadow:var(--pds-elevation-icon-button-pressed)}.pds-icon-button--m{--icon-button-size:var(--pds-spacing-button-height-m);--icon-button-padding:var(--pds-spacing-button-padding-inline-m)}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}.pds-icon--copy.pds-icon--copy.pds-icon-button__icon{transform:translateX(8%) translateY(-2%)}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}
17
+ );--icon-button-foreground:var(--pds-color-icon-button-critical-foreground)}.pds-icon-button--pressed:not(.pds-icon-button--critical),.pds-icon-button--pressed:not(.pds-icon-button--critical):hover:enabled{background-color:var(--icon-button-border);border-color:var(--icon-button-border);box-shadow:var(--pds-elevation-icon-button-pressed)}.pds-icon-button:active:enabled,a.pds-icon-button:active{background-color:var(--pds-color-button-secondary-background-active);box-shadow:var(--pds-elevation-button-secondary-active)}.pds-icon-button--critical:active:enabled,a.pds-icon-button--critical:active{background-color:var(
18
+ --pds-color-button-critical-secondary-background-active
19
+ );box-shadow:var(--pds-elevation-button-critical-secondary-active)}.pds-icon-button--m{--icon-button-size:var(--pds-spacing-button-height-m);--icon-button-padding:var(--pds-spacing-button-padding-inline-m)}.pds-icon-button__icon-wrapper{align-items:center;display:flex;justify-content:center;position:absolute}.pds-icon-button--fadeOut{-webkit-animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;animation:scale-down-center .4s cubic-bezier(.25,.46,.45,.94) both;opacity:0;transition:.2s ease-in}.pds-icon-button--hide{display:none}.pds-icon-button--scaleIn{-webkit-animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both;animation:scale-in-center .2s cubic-bezier(.175,.885,.32,1.275) both}.pds-icon--copy.pds-icon--copy.pds-icon-button__icon{transform:translateX(8%) translateY(-2%)}@keyframes scale-in-center{0%{opacity:1;-webkit-transform:scale(0);transform:scale(0)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}