@pitchfork-ui/react 0.10.0 → 0.11.0

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 (14) hide show
  1. package/dist/components/Badge/Badge.css +4 -0
  2. package/dist/components/Button/Button.css +7 -0
  3. package/dist/components/InlineCTA/InlineCTA.css +4 -0
  4. package/dist/components/Modal/Modal.css +6 -1
  5. package/dist/components/Tag/Tag.css +4 -0
  6. package/dist/components/UtilityButton/UtilityButton.css +6 -6
  7. package/dist/src/components/Badge/Badge.d.ts +1 -1
  8. package/dist/src/components/Button/Button.d.ts +1 -1
  9. package/dist/src/components/InlineCTA/InlineCTA.d.ts +1 -1
  10. package/dist/src/components/Tag/Tag.d.ts +1 -1
  11. package/dist/src/components/UtilityButton/UtilityButton.d.ts +1 -1
  12. package/dist/styles/theme.css +12 -4
  13. package/dist/styles.css +43 -11
  14. package/package.json +1 -1
package/dist/components/Badge/Badge.css CHANGED
@@ -24,3 +24,7 @@
24
24
  background: var(--pf-badge-warning-background, var(--color-semantic-status-warning-background));
25
25
  color: var(--pf-badge-warning-foreground, var(--color-semantic-status-warning-foreground));
26
26
  }
27
+ .pf-badge--danger {
28
+ background: var(--pf-badge-danger-background, var(--color-semantic-status-danger-background));
29
+ color: var(--pf-badge-danger-foreground, var(--color-semantic-status-danger-foreground));
30
+ }
package/dist/components/Button/Button.css CHANGED
@@ -70,6 +70,13 @@
70
70
  .pf-button--ghost:hover:not(:disabled) {
71
71
  background: var(--pf-button-ghost-bg-hover);
72
72
  }
73
+ .pf-button--destructive {
74
+ background: var(--pf-button-destructive-bg);
75
+ color: var(--pf-button-destructive-text);
76
+ }
77
+ .pf-button--destructive:hover:not(:disabled) {
78
+ background: var(--pf-button-destructive-bg-hover);
79
+ }
73
80
 
74
81
  .pf-button--loading:disabled {
75
82
  cursor: wait;
package/dist/components/InlineCTA/InlineCTA.css CHANGED
@@ -142,3 +142,7 @@
142
142
  background: color-mix(in srgb, var(--pf-inline-cta-warning-bg) 60%, var(--color-base-white));
143
143
  border-color: var(--pf-inline-cta-warning-border);
144
144
  }
145
+ .pf-inline-cta--danger {
146
+ background: color-mix(in srgb, var(--pf-inline-cta-danger-bg) 55%, var(--color-base-white));
147
+ border-color: var(--pf-inline-cta-danger-border);
148
+ }
package/dist/components/Modal/Modal.css CHANGED
@@ -15,7 +15,9 @@
15
15
  display: flex;
16
16
  inset: 0;
17
17
  justify-content: center;
18
- overflow-y: auto;
18
+ /* visible so the modal's drop shadow isn't clipped; the modal self-caps its
19
+ height and scrolls internally, so the viewport never needs to scroll. */
20
+ overflow: visible;
19
21
  padding: var(--space-2);
20
22
  position: relative;
21
23
  }
@@ -35,7 +37,9 @@
35
37
  color: var(--pf-modal-text);
36
38
  display: flex;
37
39
  flex-direction: column;
40
+ /* dvh keeps the modal within the visible viewport on mobile (browser chrome). */
38
41
  max-height: 92vh;
42
+ max-height: 92dvh;
39
43
  overflow: hidden;
40
44
  width: 100%;
41
45
  }
@@ -43,6 +47,7 @@
43
47
  @media (min-width: 768px) {
44
48
  .pf-modal {
45
49
  max-height: min(90vh, 720px);
50
+ max-height: min(90dvh, 720px);
46
51
  }
47
52
  }
48
53
 
package/dist/components/Tag/Tag.css CHANGED
@@ -32,6 +32,10 @@
32
32
  background: var(--pf-tag-warning-bg);
33
33
  color: var(--pf-tag-warning-text);
34
34
  }
35
+ .pf-tag--danger {
36
+ background: var(--pf-tag-danger-bg);
37
+ color: var(--pf-tag-danger-text);
38
+ }
35
39
 
36
40
  .pf-tag__dismiss {
37
41
  align-items: center;
package/dist/components/UtilityButton/UtilityButton.css CHANGED
@@ -59,14 +59,14 @@
59
59
  background: var(--pf-utility-btn-brand-bg-hover);
60
60
  }
61
61
 
62
- .pf-utility-button--danger {
63
- background: var(--pf-utility-btn-danger-bg);
64
- border-color: var(--pf-utility-btn-danger-border);
65
- color: var(--pf-utility-btn-danger-text);
62
+ .pf-utility-button--destructive {
63
+ background: var(--pf-utility-btn-destructive-bg);
64
+ border-color: var(--pf-utility-btn-destructive-border);
65
+ color: var(--pf-utility-btn-destructive-text);
66
66
  }
67
67
 
68
- .pf-utility-button--danger:hover:not(:disabled) {
69
- background: var(--pf-utility-btn-danger-bg-hover);
68
+ .pf-utility-button--destructive:hover:not(:disabled) {
69
+ background: var(--pf-utility-btn-destructive-bg-hover);
70
70
  }
71
71
 
72
72
  .pf-utility-button__icon {
package/dist/src/components/Badge/Badge.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type BadgeVariant = 'neutral' | 'brand' | 'success' | 'warning';
1
+ export type BadgeVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
2
2
  export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
3
3
  variant?: BadgeVariant;
4
4
  }
package/dist/src/components/Button/Button.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type ButtonVariant = 'primary' | 'secondary' | 'ghost';
1
+ export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'destructive';
2
2
  export type ButtonSize = 'sm' | 'md' | 'lg';
3
3
  export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4
4
  variant?: ButtonVariant;
package/dist/src/components/InlineCTA/InlineCTA.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { IconName } from '../Icon';
2
- export type InlineCTATone = 'default' | 'info' | 'success' | 'warning';
2
+ export type InlineCTATone = 'default' | 'info' | 'success' | 'warning' | 'danger';
3
3
  export interface InlineCTAProps extends React.HTMLAttributes<HTMLDivElement> {
4
4
  heading?: React.ReactNode;
5
5
  description?: React.ReactNode;
package/dist/src/components/Tag/Tag.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type TagVariant = 'neutral' | 'brand' | 'success' | 'warning';
1
+ export type TagVariant = 'neutral' | 'brand' | 'success' | 'warning' | 'danger';
2
2
  export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
3
3
  variant?: TagVariant;
4
4
  dismissible?: boolean;
package/dist/src/components/UtilityButton/UtilityButton.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export type UtilityButtonVariant = 'neutral' | 'brand' | 'danger';
1
+ export type UtilityButtonVariant = 'neutral' | 'brand' | 'destructive';
2
2
  export type UtilityButtonSize = 'sm' | 'md';
3
3
  export interface UtilityButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
4
4
  variant?: UtilityButtonVariant;
package/dist/styles/theme.css CHANGED
@@ -198,6 +198,10 @@
198
198
  --pf-button-secondary-text: var(--color-semantic-text-default);
199
199
  --pf-button-ghost-text: var(--color-semantic-text-default);
200
200
  --pf-button-ghost-bg-hover: var(--color-semantic-background-subtle);
201
+ /* Solid reds work on both themes; white text = 4.83:1 (bg) / 6.57:1 (hover) */
202
+ --pf-button-destructive-bg: var(--color-danger-600);
203
+ --pf-button-destructive-bg-hover: var(--color-danger-700);
204
+ --pf-button-destructive-text: var(--color-base-white);
201
205
 
202
206
  /* Field/input aliases */
203
207
  --pf-field-label: var(--color-semantic-text-default);
@@ -440,10 +444,10 @@
440
444
  --pf-utility-btn-brand-border: var(--color-brand-300);
441
445
  --pf-utility-btn-brand-text: var(--color-brand-700);
442
446
  --pf-utility-btn-brand-bg-hover: var(--color-brand-200);
443
- --pf-utility-btn-danger-bg: var(--color-semantic-status-danger-background);
444
- --pf-utility-btn-danger-border: var(--color-semantic-status-danger-border);
445
- --pf-utility-btn-danger-text: var(--color-semantic-status-danger-foreground);
446
- --pf-utility-btn-danger-bg-hover: var(--color-danger-100);
447
+ --pf-utility-btn-destructive-bg: var(--color-semantic-status-danger-background);
448
+ --pf-utility-btn-destructive-border: var(--color-semantic-status-danger-border);
449
+ --pf-utility-btn-destructive-text: var(--color-semantic-status-danger-foreground);
450
+ --pf-utility-btn-destructive-bg-hover: var(--color-danger-100);
447
451
 
448
452
  /* Kbd aliases */
449
453
  --pf-kbd-bg: var(--color-semantic-background-subtle);
@@ -733,6 +737,8 @@
733
737
  --pf-inline-cta-success-border: var(--color-semantic-status-success-border);
734
738
  --pf-inline-cta-warning-bg: var(--color-semantic-status-warning-background);
735
739
  --pf-inline-cta-warning-border: var(--color-semantic-status-warning-border);
740
+ --pf-inline-cta-danger-bg: var(--color-semantic-status-danger-background);
741
+ --pf-inline-cta-danger-border: var(--color-semantic-status-danger-border);
736
742
 
737
743
  /* Select additions */
738
744
  --pf-select-focus-border: var(--color-semantic-action-primary);
@@ -793,6 +799,8 @@
793
799
  --pf-tag-success-text: var(--color-semantic-status-success-foreground);
794
800
  --pf-tag-warning-bg: var(--color-semantic-status-warning-background);
795
801
  --pf-tag-warning-text: var(--color-semantic-status-warning-foreground);
802
+ --pf-tag-danger-bg: var(--color-semantic-status-danger-background);
803
+ --pf-tag-danger-text: var(--color-semantic-status-danger-foreground);
796
804
 
797
805
  /* HeaderNavigation aliases */
798
806
  --pf-header-nav-bg: var(--color-semantic-background-default);
package/dist/styles.css CHANGED
@@ -198,6 +198,10 @@
198
198
  --pf-button-secondary-text: var(--color-semantic-text-default);
199
199
  --pf-button-ghost-text: var(--color-semantic-text-default);
200
200
  --pf-button-ghost-bg-hover: var(--color-semantic-background-subtle);
201
+ /* Solid reds work on both themes; white text = 4.83:1 (bg) / 6.57:1 (hover) */
202
+ --pf-button-destructive-bg: var(--color-danger-600);
203
+ --pf-button-destructive-bg-hover: var(--color-danger-700);
204
+ --pf-button-destructive-text: var(--color-base-white);
201
205
 
202
206
  /* Field/input aliases */
203
207
  --pf-field-label: var(--color-semantic-text-default);
@@ -440,10 +444,10 @@
440
444
  --pf-utility-btn-brand-border: var(--color-brand-300);
441
445
  --pf-utility-btn-brand-text: var(--color-brand-700);
442
446
  --pf-utility-btn-brand-bg-hover: var(--color-brand-200);
443
- --pf-utility-btn-danger-bg: var(--color-semantic-status-danger-background);
444
- --pf-utility-btn-danger-border: var(--color-semantic-status-danger-border);
445
- --pf-utility-btn-danger-text: var(--color-semantic-status-danger-foreground);
446
- --pf-utility-btn-danger-bg-hover: var(--color-danger-100);
447
+ --pf-utility-btn-destructive-bg: var(--color-semantic-status-danger-background);
448
+ --pf-utility-btn-destructive-border: var(--color-semantic-status-danger-border);
449
+ --pf-utility-btn-destructive-text: var(--color-semantic-status-danger-foreground);
450
+ --pf-utility-btn-destructive-bg-hover: var(--color-danger-100);
447
451
 
448
452
  /* Kbd aliases */
449
453
  --pf-kbd-bg: var(--color-semantic-background-subtle);
@@ -733,6 +737,8 @@
733
737
  --pf-inline-cta-success-border: var(--color-semantic-status-success-border);
734
738
  --pf-inline-cta-warning-bg: var(--color-semantic-status-warning-background);
735
739
  --pf-inline-cta-warning-border: var(--color-semantic-status-warning-border);
740
+ --pf-inline-cta-danger-bg: var(--color-semantic-status-danger-background);
741
+ --pf-inline-cta-danger-border: var(--color-semantic-status-danger-border);
736
742
 
737
743
  /* Select additions */
738
744
  --pf-select-focus-border: var(--color-semantic-action-primary);
@@ -793,6 +799,8 @@
793
799
  --pf-tag-success-text: var(--color-semantic-status-success-foreground);
794
800
  --pf-tag-warning-bg: var(--color-semantic-status-warning-background);
795
801
  --pf-tag-warning-text: var(--color-semantic-status-warning-foreground);
802
+ --pf-tag-danger-bg: var(--color-semantic-status-danger-background);
803
+ --pf-tag-danger-text: var(--color-semantic-status-danger-foreground);
796
804
 
797
805
  /* HeaderNavigation aliases */
798
806
  --pf-header-nav-bg: var(--color-semantic-background-default);
@@ -1353,6 +1361,13 @@ body {
1353
1361
  .pf-button--ghost:hover:not(:disabled) {
1354
1362
  background: var(--pf-button-ghost-bg-hover);
1355
1363
  }
1364
+ .pf-button--destructive {
1365
+ background: var(--pf-button-destructive-bg);
1366
+ color: var(--pf-button-destructive-text);
1367
+ }
1368
+ .pf-button--destructive:hover:not(:disabled) {
1369
+ background: var(--pf-button-destructive-bg-hover);
1370
+ }
1356
1371
 
1357
1372
  .pf-button--loading:disabled {
1358
1373
  cursor: wait;
@@ -2089,6 +2104,10 @@ body {
2089
2104
  background: var(--pf-badge-warning-background, var(--color-semantic-status-warning-background));
2090
2105
  color: var(--pf-badge-warning-foreground, var(--color-semantic-status-warning-foreground));
2091
2106
  }
2107
+ .pf-badge--danger {
2108
+ background: var(--pf-badge-danger-background, var(--color-semantic-status-danger-background));
2109
+ color: var(--pf-badge-danger-foreground, var(--color-semantic-status-danger-foreground));
2110
+ }
2092
2111
  .pf-card {
2093
2112
  background: var(--pf-card-background);
2094
2113
  border: 1px solid var(--pf-card-border);
@@ -3950,6 +3969,10 @@ body {
3950
3969
  background: color-mix(in srgb, var(--pf-inline-cta-warning-bg) 60%, var(--color-base-white));
3951
3970
  border-color: var(--pf-inline-cta-warning-border);
3952
3971
  }
3972
+ .pf-inline-cta--danger {
3973
+ background: color-mix(in srgb, var(--pf-inline-cta-danger-bg) 55%, var(--color-base-white));
3974
+ border-color: var(--pf-inline-cta-danger-border);
3975
+ }
3953
3976
  .pf-kbd {
3954
3977
  align-items: center;
3955
3978
  background: var(--pf-kbd-bg);
@@ -4494,7 +4517,9 @@ body {
4494
4517
  display: flex;
4495
4518
  inset: 0;
4496
4519
  justify-content: center;
4497
- overflow-y: auto;
4520
+ /* visible so the modal's drop shadow isn't clipped; the modal self-caps its
4521
+ height and scrolls internally, so the viewport never needs to scroll. */
4522
+ overflow: visible;
4498
4523
  padding: var(--space-2);
4499
4524
  position: relative;
4500
4525
  }
@@ -4514,7 +4539,9 @@ body {
4514
4539
  color: var(--pf-modal-text);
4515
4540
  display: flex;
4516
4541
  flex-direction: column;
4542
+ /* dvh keeps the modal within the visible viewport on mobile (browser chrome). */
4517
4543
  max-height: 92vh;
4544
+ max-height: 92dvh;
4518
4545
  overflow: hidden;
4519
4546
  width: 100%;
4520
4547
  }
@@ -4522,6 +4549,7 @@ body {
4522
4549
  @media (min-width: 768px) {
4523
4550
  .pf-modal {
4524
4551
  max-height: min(90vh, 720px);
4552
+ max-height: min(90dvh, 720px);
4525
4553
  }
4526
4554
  }
4527
4555
 
@@ -7168,6 +7196,10 @@ body {
7168
7196
  background: var(--pf-tag-warning-bg);
7169
7197
  color: var(--pf-tag-warning-text);
7170
7198
  }
7199
+ .pf-tag--danger {
7200
+ background: var(--pf-tag-danger-bg);
7201
+ color: var(--pf-tag-danger-text);
7202
+ }
7171
7203
 
7172
7204
  .pf-tag__dismiss {
7173
7205
  align-items: center;
@@ -8161,14 +8193,14 @@ body {
8161
8193
  background: var(--pf-utility-btn-brand-bg-hover);
8162
8194
  }
8163
8195
 
8164
- .pf-utility-button--danger {
8165
- background: var(--pf-utility-btn-danger-bg);
8166
- border-color: var(--pf-utility-btn-danger-border);
8167
- color: var(--pf-utility-btn-danger-text);
8196
+ .pf-utility-button--destructive {
8197
+ background: var(--pf-utility-btn-destructive-bg);
8198
+ border-color: var(--pf-utility-btn-destructive-border);
8199
+ color: var(--pf-utility-btn-destructive-text);
8168
8200
  }
8169
8201
 
8170
- .pf-utility-button--danger:hover:not(:disabled) {
8171
- background: var(--pf-utility-btn-danger-bg-hover);
8202
+ .pf-utility-button--destructive:hover:not(:disabled) {
8203
+ background: var(--pf-utility-btn-destructive-bg-hover);
8172
8204
  }
8173
8205
 
8174
8206
  .pf-utility-button__icon {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@pitchfork-ui/react",
3
- "version": "0.10.0",
3
+ "version": "0.11.0",
4
4
  "description": "Accessible, themeable React component library for lelandrangel.com — 65+ components backed by a Style Dictionary token system, with dark mode and bundled CSS.",
5
5
  "license": "MIT",
6
6
  "author": "Leland Rangel",