@prosefly/astro-components 0.2.1 → 0.4.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 (30) hide show
  1. package/README.md +22 -22
  2. package/dist/client/accordions.js +7 -7
  3. package/dist/client/image-gallery.js +12 -12
  4. package/dist/client/tabs.js +17 -17
  5. package/dist/markdown/callout-directives.d.ts +3 -0
  6. package/dist/markdown/callout-directives.d.ts.map +1 -0
  7. package/dist/markdown/callout-directives.js +130 -0
  8. package/dist/markdown/callout-directives.js.map +1 -0
  9. package/dist/markdown/image-gallery-plugin.js +9 -9
  10. package/dist/markdown/image-gallery.css +31 -29
  11. package/dist/markdown/index.d.ts +2 -0
  12. package/dist/markdown/index.d.ts.map +1 -1
  13. package/dist/markdown/index.js +2 -0
  14. package/dist/markdown/index.js.map +1 -1
  15. package/dist/markdown/package-manager-tabs.js +1 -1
  16. package/dist/mdx/AccordionItem.astro +7 -7
  17. package/dist/mdx/Accordions.astro +30 -28
  18. package/dist/mdx/Badge.astro +70 -68
  19. package/dist/mdx/Callout.astro +49 -48
  20. package/dist/mdx/Card.astro +43 -42
  21. package/dist/mdx/CardGrid.astro +9 -5
  22. package/dist/mdx/FileTree.astro +70 -69
  23. package/dist/mdx/FileTreeItem.astro +25 -25
  24. package/dist/mdx/Icon.astro +2 -2
  25. package/dist/mdx/Steps.astro +36 -35
  26. package/dist/mdx/Tabs.astro +64 -63
  27. package/dist/mdx/rehype-steps.js +2 -2
  28. package/dist/mdx/rehype-tabs.js +1 -1
  29. package/dist/theme-tokens.css +96 -0
  30. package/package.json +5 -3
package/dist/mdx/AccordionItem.astro CHANGED
@@ -23,8 +23,8 @@ if (!title) {
23
23
  ---
24
24
 
25
25
  <details
26
- class="pl-accordion"
27
- data-pl-accordion
26
+ class="pf-accordion"
27
+ data-pf-accordion
28
28
  data-value={value}
29
29
  data-disabled={disabled ? 'true' : undefined}
30
30
  id={id}
@@ -32,11 +32,11 @@ if (!title) {
32
32
  >
33
33
  <summary
34
34
  aria-disabled={disabled ? 'true' : undefined}
35
- class="pl-accordion__trigger"
36
- data-pl-accordion-trigger
35
+ class="pf-accordion__trigger"
36
+ data-pf-accordion-trigger
37
37
  >
38
- <span class="pl-accordion__title">{title}</span>
39
- <span aria-hidden="true" class="pl-accordion__chevron">
38
+ <span class="pf-accordion__title">{title}</span>
39
+ <span aria-hidden="true" class="pf-accordion__chevron">
40
40
  <svg fill="none" height="16" viewBox="0 0 24 24" width="16">
41
41
  <path
42
42
  d="m6 9 6 6 6-6"
@@ -48,7 +48,7 @@ if (!title) {
48
48
  </svg>
49
49
  </span>
50
50
  </summary>
51
- <div class="pl-accordion__content">
51
+ <div class="pf-accordion__content">
52
52
  <slot />
53
53
  </div>
54
54
  </details>
package/dist/mdx/Accordions.astro CHANGED
@@ -1,4 +1,6 @@
1
1
  ---
2
+ import '../theme-tokens.css';
3
+
2
4
  interface Props {
3
5
  multiple?: boolean;
4
6
  defaultValue?: string | string[];
@@ -14,10 +16,10 @@ const defaultValues =
14
16
  ---
15
17
 
16
18
  <div
17
- class="pl-accordions"
19
+ class="pf-accordions"
18
20
  data-default-values={JSON.stringify(defaultValues)}
19
21
  data-multiple={multiple ? 'true' : undefined}
20
- data-pl-accordions
22
+ data-pf-accordions
21
23
  >
22
24
  <slot />
23
25
  </div>
@@ -27,26 +29,26 @@ const defaultValues =
27
29
  </script>
28
30
 
29
31
  <style is:global>
30
- .pl-accordions {
32
+ .pf-accordions {
31
33
  border-bottom: 1px solid
32
- color-mix(in oklab, var(--pl-text-muted, #667085) 18%, transparent);
34
+ color-mix(in oklab, var(--pf-text-muted, #667085) 18%, transparent);
33
35
  border-top: 1px solid
34
- color-mix(in oklab, var(--pl-text-muted, #667085) 18%, transparent);
36
+ color-mix(in oklab, var(--pf-text-muted, #667085) 18%, transparent);
35
37
  margin-block: 1.5rem;
36
38
  }
37
39
 
38
- .pl-accordion {
40
+ .pf-accordion {
39
41
  border-bottom: 1px solid
40
- color-mix(in oklab, var(--pl-text-muted, #667085) 18%, transparent);
42
+ color-mix(in oklab, var(--pf-text-muted, #667085) 18%, transparent);
41
43
  }
42
44
 
43
- .pl-accordion:last-child {
45
+ .pf-accordion:last-child {
44
46
  border-bottom: 0;
45
47
  }
46
48
 
47
- .pl-accordion__trigger {
49
+ .pf-accordion__trigger {
48
50
  align-items: center;
49
- color: var(--pl-text-strong, var(--pl-text, #182230));
51
+ color: var(--pf-text-strong, var(--pf-text, #182230));
50
52
  cursor: pointer;
51
53
  display: flex;
52
54
  gap: 1rem;
@@ -57,30 +59,30 @@ const defaultValues =
57
59
  transition: color 160ms ease;
58
60
  }
59
61
 
60
- .pl-accordion__trigger::-webkit-details-marker {
62
+ .pf-accordion__trigger::-webkit-details-marker {
61
63
  display: none;
62
64
  }
63
65
 
64
- .pl-accordion__trigger:hover {
65
- color: var(--pl-accent, #4f46e5);
66
+ .pf-accordion__trigger:hover {
67
+ color: var(--pf-accent, #3e7e55);
66
68
  text-decoration: underline;
67
69
  text-underline-offset: 0.25rem;
68
70
  }
69
71
 
70
- .pl-accordion__trigger:focus-visible {
71
- border-radius: var(--pl-radius-md, 0.5rem);
72
- outline: 2px solid var(--pl-accent, #4f46e5);
72
+ .pf-accordion__trigger:focus-visible {
73
+ border-radius: var(--pf-radius-md, 0.5rem);
74
+ outline: 2px solid var(--pf-accent, #3e7e55);
73
75
  outline-offset: 2px;
74
76
  }
75
77
 
76
- .pl-accordion__title {
78
+ .pf-accordion__title {
77
79
  font-size: 0.9375rem;
78
80
  font-weight: 500;
79
81
  line-height: 1.5rem;
80
82
  }
81
83
 
82
- .pl-accordion__chevron {
83
- color: var(--pl-text-muted, #667085);
84
+ .pf-accordion__chevron {
85
+ color: var(--pf-text-muted, #667085);
84
86
  display: inline-flex;
85
87
  flex: 0 0 auto;
86
88
  transition:
@@ -88,38 +90,38 @@ const defaultValues =
88
90
  transform 160ms ease;
89
91
  }
90
92
 
91
- .pl-accordion[open] > .pl-accordion__trigger .pl-accordion__chevron {
93
+ .pf-accordion[open] > .pf-accordion__trigger .pf-accordion__chevron {
92
94
  transform: rotate(180deg);
93
95
  }
94
96
 
95
- .pl-accordion__trigger:hover .pl-accordion__chevron {
97
+ .pf-accordion__trigger:hover .pf-accordion__chevron {
96
98
  color: currentColor;
97
99
  }
98
100
 
99
- .pl-accordion__content {
100
- color: var(--pl-text, #344054);
101
+ .pf-accordion__content {
102
+ color: var(--pf-text, #344054);
101
103
  font-size: 0.9375rem;
102
104
  line-height: 1.75;
103
105
  padding-block: 0 1rem;
104
106
  }
105
107
 
106
- .pl-accordion__content > :first-child {
108
+ .pf-accordion__content > :first-child {
107
109
  margin-block-start: 0;
108
110
  }
109
111
 
110
- .pl-accordion__content > :last-child {
112
+ .pf-accordion__content > :last-child {
111
113
  margin-block-end: 0;
112
114
  }
113
115
 
114
- .pl-accordion__content > * + * {
116
+ .pf-accordion__content > * + * {
115
117
  margin-block-start: 0.75rem;
116
118
  }
117
119
 
118
- .pl-accordion[data-disabled='true'] {
120
+ .pf-accordion[data-disabled='true'] {
119
121
  opacity: 0.55;
120
122
  }
121
123
 
122
- .pl-accordion[data-disabled='true'] > .pl-accordion__trigger {
124
+ .pf-accordion[data-disabled='true'] > .pf-accordion__trigger {
123
125
  cursor: not-allowed;
124
126
  text-decoration: none;
125
127
  }
package/dist/mdx/Badge.astro CHANGED
@@ -1,4 +1,6 @@
1
1
  ---
2
+ import '../theme-tokens.css';
3
+
2
4
  type BadgeVariant = 'solid' | 'soft' | 'subtle' | 'outline';
3
5
  type BadgeColor = 'neutral' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
4
6
 
@@ -18,7 +20,7 @@ const {
18
20
  ---
19
21
 
20
22
  <span
21
- class:list={['pl-badge', className]}
23
+ class:list={['pf-badge', className]}
22
24
  data-color={color}
23
25
  data-variant={variant}
24
26
  {...attrs}
@@ -27,20 +29,20 @@ const {
27
29
  </span>
28
30
 
29
31
  <style>
30
- .pl-badge {
31
- --pl-badge-color: var(--pl-text-strong, var(--pl-text, #182230));
32
- --pl-badge-solid: var(--pl-text-strong, var(--pl-text, #182230));
33
- --pl-badge-soft: var(--pl-surface, #f4f6f8);
34
- --pl-badge-contrast: var(--pl-background, #ffffff);
35
- --pl-badge-border: color-mix(
32
+ .pf-badge {
33
+ --pf-badge-color: var(--pf-text-strong, var(--pf-text, #182230));
34
+ --pf-badge-solid: var(--pf-text-strong, var(--pf-text, #182230));
35
+ --pf-badge-soft: var(--pf-surface, #f4f6f8);
36
+ --pf-badge-contrast: var(--pf-background, #ffffff);
37
+ --pf-badge-border: color-mix(
36
38
  in oklab,
37
- var(--pl-text-muted, #667085) 24%,
39
+ var(--pf-text-muted, #667085) 24%,
38
40
  transparent
39
41
  );
40
42
 
41
43
  align-items: center;
42
44
  border: 1px solid transparent;
43
- border-radius: var(--pl-radius-full, var(--pl-radius-md, 999px));
45
+ border-radius: var(--pf-radius-full, var(--pf-radius-md, 999px));
44
46
  display: inline-flex;
45
47
  font-size: 0.75rem;
46
48
  font-weight: 600;
@@ -51,102 +53,102 @@ const {
51
53
  white-space: nowrap;
52
54
  }
53
55
 
54
- .pl-badge[data-color='accent'] {
55
- --pl-badge-color: var(--pl-accent, #4f46e5);
56
- --pl-badge-solid: var(--pl-accent, #4f46e5);
57
- --pl-badge-soft: var(
58
- --pl-accent-soft,
59
- color-mix(in oklab, var(--pl-accent, #4f46e5) 12%, var(--pl-background, #ffffff))
56
+ .pf-badge[data-color='accent'] {
57
+ --pf-badge-color: var(--pf-accent, #3e7e55);
58
+ --pf-badge-solid: var(--pf-accent, #3e7e55);
59
+ --pf-badge-soft: var(
60
+ --pf-accent-soft,
61
+ color-mix(in oklab, var(--pf-accent, #3e7e55) 12%, var(--pf-background, #ffffff))
60
62
  );
61
- --pl-badge-contrast: var(--pl-accent-contrast, #ffffff);
62
- --pl-badge-border: color-mix(
63
+ --pf-badge-contrast: var(--pf-accent-contrast, #ffffff);
64
+ --pf-badge-border: color-mix(
63
65
  in oklab,
64
- var(--pl-accent, #4f46e5) 28%,
66
+ var(--pf-accent, #3e7e55) 28%,
65
67
  transparent
66
68
  );
67
69
  }
68
70
 
69
- .pl-badge[data-color='info'] {
70
- --pl-badge-color: var(--pl-info-ink, oklch(0.46 0.14 255));
71
- --pl-badge-solid: var(--pl-info, oklch(0.62 0.16 255));
72
- --pl-badge-soft: var(
73
- --pl-info-soft,
74
- color-mix(in oklab, var(--pl-info, oklch(0.62 0.16 255)) 12%, var(--pl-background, #ffffff))
71
+ .pf-badge[data-color='info'] {
72
+ --pf-badge-color: var(--pf-info-ink, oklch(0.46 0.14 255));
73
+ --pf-badge-solid: var(--pf-info, oklch(0.62 0.16 255));
74
+ --pf-badge-soft: var(
75
+ --pf-info-soft,
76
+ color-mix(in oklab, var(--pf-info, oklch(0.62 0.16 255)) 12%, var(--pf-background, #ffffff))
75
77
  );
76
- --pl-badge-contrast: var(--pl-info-contrast, #ffffff);
77
- --pl-badge-border: color-mix(
78
+ --pf-badge-contrast: var(--pf-info-contrast, #ffffff);
79
+ --pf-badge-border: color-mix(
78
80
  in oklab,
79
- var(--pl-info, oklch(0.62 0.16 255)) 30%,
81
+ var(--pf-info, oklch(0.62 0.16 255)) 30%,
80
82
  transparent
81
83
  );
82
84
  }
83
85
 
84
- .pl-badge[data-color='success'] {
85
- --pl-badge-color: var(--pl-success-ink, oklch(0.45 0.13 155));
86
- --pl-badge-solid: var(--pl-success, oklch(0.64 0.16 155));
87
- --pl-badge-soft: var(
88
- --pl-success-soft,
89
- color-mix(in oklab, var(--pl-success, oklch(0.64 0.16 155)) 12%, var(--pl-background, #ffffff))
86
+ .pf-badge[data-color='success'] {
87
+ --pf-badge-color: var(--pf-success-ink, oklch(0.45 0.13 155));
88
+ --pf-badge-solid: var(--pf-success, oklch(0.64 0.16 155));
89
+ --pf-badge-soft: var(
90
+ --pf-success-soft,
91
+ color-mix(in oklab, var(--pf-success, oklch(0.64 0.16 155)) 12%, var(--pf-background, #ffffff))
90
92
  );
91
- --pl-badge-contrast: var(--pl-success-contrast, #ffffff);
92
- --pl-badge-border: color-mix(
93
+ --pf-badge-contrast: var(--pf-success-contrast, #ffffff);
94
+ --pf-badge-border: color-mix(
93
95
  in oklab,
94
- var(--pl-success, oklch(0.64 0.16 155)) 30%,
96
+ var(--pf-success, oklch(0.64 0.16 155)) 30%,
95
97
  transparent
96
98
  );
97
99
  }
98
100
 
99
- .pl-badge[data-color='warning'] {
100
- --pl-badge-color: var(--pl-warning-ink, oklch(0.5 0.12 80));
101
- --pl-badge-solid: var(--pl-warning, oklch(0.74 0.16 80));
102
- --pl-badge-soft: var(
103
- --pl-warning-soft,
104
- color-mix(in oklab, var(--pl-warning, oklch(0.74 0.16 80)) 14%, var(--pl-background, #ffffff))
101
+ .pf-badge[data-color='warning'] {
102
+ --pf-badge-color: var(--pf-warning-ink, oklch(0.5 0.12 80));
103
+ --pf-badge-solid: var(--pf-warning, oklch(0.74 0.16 80));
104
+ --pf-badge-soft: var(
105
+ --pf-warning-soft,
106
+ color-mix(in oklab, var(--pf-warning, oklch(0.74 0.16 80)) 14%, var(--pf-background, #ffffff))
105
107
  );
106
- --pl-badge-contrast: var(--pl-warning-contrast, oklch(0.18 0.04 80));
107
- --pl-badge-border: color-mix(
108
+ --pf-badge-contrast: var(--pf-warning-contrast, oklch(0.18 0.04 80));
109
+ --pf-badge-border: color-mix(
108
110
  in oklab,
109
- var(--pl-warning, oklch(0.74 0.16 80)) 34%,
111
+ var(--pf-warning, oklch(0.74 0.16 80)) 34%,
110
112
  transparent
111
113
  );
112
114
  }
113
115
 
114
- .pl-badge[data-color='danger'] {
115
- --pl-badge-color: var(--pl-danger-ink, oklch(0.52 0.16 25));
116
- --pl-badge-solid: var(--pl-danger, oklch(0.62 0.2 25));
117
- --pl-badge-soft: var(
118
- --pl-danger-soft,
119
- color-mix(in oklab, var(--pl-danger, oklch(0.62 0.2 25)) 12%, var(--pl-background, #ffffff))
116
+ .pf-badge[data-color='danger'] {
117
+ --pf-badge-color: var(--pf-danger-ink, oklch(0.52 0.16 25));
118
+ --pf-badge-solid: var(--pf-danger, oklch(0.62 0.2 25));
119
+ --pf-badge-soft: var(
120
+ --pf-danger-soft,
121
+ color-mix(in oklab, var(--pf-danger, oklch(0.62 0.2 25)) 12%, var(--pf-background, #ffffff))
120
122
  );
121
- --pl-badge-contrast: var(--pl-danger-contrast, #ffffff);
122
- --pl-badge-border: color-mix(
123
+ --pf-badge-contrast: var(--pf-danger-contrast, #ffffff);
124
+ --pf-badge-border: color-mix(
123
125
  in oklab,
124
- var(--pl-danger, oklch(0.62 0.2 25)) 30%,
126
+ var(--pf-danger, oklch(0.62 0.2 25)) 30%,
125
127
  transparent
126
128
  );
127
129
  }
128
130
 
129
- .pl-badge[data-variant='solid'] {
130
- background: var(--pl-badge-solid);
131
- border-color: var(--pl-badge-solid);
132
- color: var(--pl-badge-contrast);
131
+ .pf-badge[data-variant='solid'] {
132
+ background: var(--pf-badge-solid);
133
+ border-color: var(--pf-badge-solid);
134
+ color: var(--pf-badge-contrast);
133
135
  }
134
136
 
135
- .pl-badge[data-variant='soft'] {
136
- background: var(--pl-badge-soft);
137
- color: var(--pl-badge-color);
137
+ .pf-badge[data-variant='soft'] {
138
+ background: var(--pf-badge-soft);
139
+ color: var(--pf-badge-color);
138
140
  }
139
141
 
140
- .pl-badge[data-variant='subtle'] {
141
- background: var(--pl-badge-soft);
142
- border-color: var(--pl-badge-border);
143
- color: var(--pl-badge-color);
142
+ .pf-badge[data-variant='subtle'] {
143
+ background: var(--pf-badge-soft);
144
+ border-color: var(--pf-badge-border);
145
+ color: var(--pf-badge-color);
144
146
  }
145
147
 
146
- .pl-badge[data-variant='outline'] {
148
+ .pf-badge[data-variant='outline'] {
147
149
  background: transparent;
148
- border-color: var(--pl-badge-border);
149
- color: var(--pl-badge-color);
150
+ border-color: var(--pf-badge-border);
151
+ color: var(--pf-badge-color);
150
152
  }
151
153
 
152
154
  </style>
package/dist/mdx/Callout.astro CHANGED
@@ -1,4 +1,5 @@
1
1
  ---
2
+ import '../theme-tokens.css';
2
3
  import Icon from './Icon.astro';
3
4
 
4
5
  interface Props {
@@ -16,72 +17,72 @@ const { title, type = 'note' } = Astro.props;
16
17
  const hasTitle = Boolean(title);
17
18
  ---
18
19
 
19
- <aside class="pl-callout" data-has-title={hasTitle ? 'true' : 'false'} data-type={type}>
20
- <span class="pl-callout__icon" aria-hidden="true">
20
+ <div class="pf-callout" data-has-title={hasTitle ? 'true' : 'false'} data-type={type} role="note">
21
+ <span class="pf-callout__icon" aria-hidden="true">
21
22
  <Icon name={iconNames[type]} />
22
23
  </span>
23
- <div class="pl-callout__content">
24
- {hasTitle && <p class="pl-callout__title">{title}</p>}
25
- <div class="pl-callout__slot">
24
+ <div class="pf-callout__content">
25
+ {hasTitle && <p class="pf-callout__title">{title}</p>}
26
+ <div class="pf-callout__slot">
26
27
  <slot />
27
28
  </div>
28
29
  </div>
29
- </aside>
30
+ </div>
30
31
 
31
32
  <style>
32
- .pl-callout {
33
- --pl-callout-color: var(--pl-callout-note-color, var(--pl-info, oklch(0.62 0.16 255)));
34
- --pl-callout-ink: var(--pl-callout-note-ink, var(--pl-info-ink, oklch(0.46 0.14 255)));
35
- --pl-callout-bg: var(
36
- --pl-callout-note-bg,
37
- var(--pl-info-soft, color-mix(in oklab, var(--pl-callout-color) 10%, var(--pl-background, #ffffff)))
33
+ .pf-callout {
34
+ --pf-callout-color: var(--pf-callout-note-color, var(--pf-info, oklch(0.62 0.16 255)));
35
+ --pf-callout-ink: var(--pf-callout-note-ink, var(--pf-info-ink, oklch(0.46 0.14 255)));
36
+ --pf-callout-bg: var(
37
+ --pf-callout-note-bg,
38
+ var(--pf-info-soft, color-mix(in oklab, var(--pf-callout-color) 10%, var(--pf-background, #ffffff)))
38
39
  );
39
40
 
40
41
  display: grid;
41
42
  grid-template-columns: auto minmax(0, 1fr);
42
43
  gap: 0.875rem;
43
44
  margin-block: 1.5rem;
44
- border: 1px solid color-mix(in oklab, var(--pl-callout-color) 24%, var(--pl-surface, #f4f6f8));
45
- border-radius: min(var(--pl-radius-lg, 0.75rem), 1rem);
46
- background: var(--pl-callout-bg);
47
- color: var(--pl-text, #182230);
45
+ border: 1px solid color-mix(in oklab, var(--pf-callout-color) 24%, var(--pf-surface, #f4f6f8));
46
+ border-radius: min(var(--pf-radius-lg, 0.75rem), 1rem);
47
+ background: var(--pf-callout-bg);
48
+ color: var(--pf-text, #182230);
48
49
  padding: 1rem 1.25rem;
49
50
  }
50
51
 
51
- .pl-callout[data-type='tip'] {
52
- --pl-callout-color: var(--pl-callout-tip-color, var(--pl-success, oklch(0.64 0.16 155)));
53
- --pl-callout-ink: var(--pl-callout-tip-ink, var(--pl-success-ink, oklch(0.45 0.13 155)));
54
- --pl-callout-bg: var(
55
- --pl-callout-tip-bg,
56
- var(--pl-success-soft, color-mix(in oklab, var(--pl-callout-color) 10%, var(--pl-background, #ffffff)))
52
+ .pf-callout[data-type='tip'] {
53
+ --pf-callout-color: var(--pf-callout-tip-color, var(--pf-success, oklch(0.64 0.16 155)));
54
+ --pf-callout-ink: var(--pf-callout-tip-ink, var(--pf-success-ink, oklch(0.45 0.13 155)));
55
+ --pf-callout-bg: var(
56
+ --pf-callout-tip-bg,
57
+ var(--pf-success-soft, color-mix(in oklab, var(--pf-callout-color) 10%, var(--pf-background, #ffffff)))
57
58
  );
58
59
  }
59
60
 
60
- .pl-callout[data-type='warning'] {
61
- --pl-callout-color: var(--pl-callout-warning-color, var(--pl-warning, oklch(0.74 0.16 80)));
62
- --pl-callout-ink: var(--pl-callout-warning-ink, var(--pl-warning-ink, oklch(0.5 0.12 80)));
63
- --pl-callout-bg: var(
64
- --pl-callout-warning-bg,
65
- var(--pl-warning-soft, color-mix(in oklab, var(--pl-callout-color) 12%, var(--pl-background, #ffffff)))
61
+ .pf-callout[data-type='warning'] {
62
+ --pf-callout-color: var(--pf-callout-warning-color, var(--pf-warning, oklch(0.74 0.16 80)));
63
+ --pf-callout-ink: var(--pf-callout-warning-ink, var(--pf-warning-ink, oklch(0.5 0.12 80)));
64
+ --pf-callout-bg: var(
65
+ --pf-callout-warning-bg,
66
+ var(--pf-warning-soft, color-mix(in oklab, var(--pf-callout-color) 12%, var(--pf-background, #ffffff)))
66
67
  );
67
68
  }
68
69
 
69
- .pl-callout[data-type='danger'] {
70
- --pl-callout-color: var(--pl-callout-danger-color, var(--pl-danger, oklch(0.62 0.2 25)));
71
- --pl-callout-ink: var(--pl-callout-danger-ink, var(--pl-danger-ink, oklch(0.52 0.16 25)));
72
- --pl-callout-bg: var(
73
- --pl-callout-danger-bg,
74
- var(--pl-danger-soft, color-mix(in oklab, var(--pl-callout-color) 10%, var(--pl-background, #ffffff)))
70
+ .pf-callout[data-type='danger'] {
71
+ --pf-callout-color: var(--pf-callout-danger-color, var(--pf-danger, oklch(0.62 0.2 25)));
72
+ --pf-callout-ink: var(--pf-callout-danger-ink, var(--pf-danger-ink, oklch(0.52 0.16 25)));
73
+ --pf-callout-bg: var(
74
+ --pf-callout-danger-bg,
75
+ var(--pf-danger-soft, color-mix(in oklab, var(--pf-callout-color) 10%, var(--pf-background, #ffffff)))
75
76
  );
76
77
  }
77
78
 
78
- .pl-callout[data-has-title='false'] {
79
+ .pf-callout[data-has-title='false'] {
79
80
  align-items: center;
80
81
  }
81
82
 
82
- .pl-callout__icon {
83
+ .pf-callout__icon {
83
84
  align-items: center;
84
- color: var(--pl-callout-ink);
85
+ color: var(--pf-callout-ink);
85
86
  display: inline-flex;
86
87
  height: 1.25rem;
87
88
  justify-content: center;
@@ -90,44 +91,44 @@ const hasTitle = Boolean(title);
90
91
  width: 1.25rem;
91
92
  }
92
93
 
93
- .pl-callout[data-has-title='false'] .pl-callout__icon {
94
+ .pf-callout[data-has-title='false'] .pf-callout__icon {
94
95
  margin-block-start: 0;
95
96
  }
96
97
 
97
- .pl-callout__icon :global(.pl-icon) {
98
+ .pf-callout__icon :global(.pf-icon) {
98
99
  display: block;
99
100
  height: 1.25rem;
100
101
  width: 1.25rem;
101
102
  }
102
103
 
103
- .pl-callout__title {
104
- color: var(--pl-callout-ink);
104
+ .pf-callout__title {
105
+ color: var(--pf-callout-ink);
105
106
  font-size: 1rem;
106
107
  font-weight: 700;
107
108
  line-height: 1.5;
108
109
  margin: 0 0 0.5rem;
109
110
  }
110
111
 
111
- .pl-callout__slot {
112
- color: var(--pl-text, #182230);
112
+ .pf-callout__slot {
113
+ color: var(--pf-text, #182230);
113
114
  font-size: 0.9375rem;
114
115
  line-height: 1.75;
115
116
  }
116
117
 
117
- .pl-callout[data-has-title='false'] .pl-callout__slot {
118
- color: var(--pl-callout-ink);
118
+ .pf-callout[data-has-title='false'] .pf-callout__slot {
119
+ color: var(--pf-callout-ink);
119
120
  font-size: 1rem;
120
121
  }
121
122
 
122
- .pl-callout__slot :global(> * + *) {
123
+ .pf-callout__slot :global(> * + *) {
123
124
  margin-top: 0.75rem;
124
125
  }
125
126
 
126
- .pl-callout__slot :global(> :first-child) {
127
+ .pf-callout__slot :global(> :first-child) {
127
128
  margin-top: 0;
128
129
  }
129
130
 
130
- .pl-callout__slot :global(> :last-child) {
131
+ .pf-callout__slot :global(> :last-child) {
131
132
  margin-bottom: 0;
132
133
  }
133
134
  </style>