@prosefly/astro-components 0.3.0 → 0.4.1

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 (22) 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/image-gallery-plugin.js +9 -9
  6. package/dist/markdown/image-gallery.css +31 -29
  7. package/dist/markdown/package-manager-tabs.js +1 -1
  8. package/dist/mdx/AccordionItem.astro +7 -7
  9. package/dist/mdx/Accordions.astro +30 -28
  10. package/dist/mdx/Badge.astro +70 -68
  11. package/dist/mdx/Callout.astro +48 -47
  12. package/dist/mdx/Card.astro +43 -42
  13. package/dist/mdx/CardGrid.astro +9 -5
  14. package/dist/mdx/FileTree.astro +70 -69
  15. package/dist/mdx/FileTreeItem.astro +25 -25
  16. package/dist/mdx/Icon.astro +2 -2
  17. package/dist/mdx/Steps.astro +36 -35
  18. package/dist/mdx/Tabs.astro +64 -63
  19. package/dist/mdx/rehype-steps.js +2 -2
  20. package/dist/mdx/rehype-tabs.js +1 -1
  21. package/dist/theme-tokens.css +96 -0
  22. package/package.json +1 -1
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-badge-radius, var(--pf-radius-full, 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
- <div class="pl-callout" data-has-title={hasTitle ? 'true' : 'false'} data-type={type} role="note">
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
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>
package/dist/mdx/Card.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 {
@@ -27,22 +28,22 @@ const linkAttrs = href
27
28
  ---
28
29
 
29
30
  <Tag
30
- class:list={['pl-card', href && 'pl-card--link']}
31
+ class:list={['pf-card', href && 'pf-card--link']}
31
32
  data-external={href && external ? 'true' : undefined}
32
33
  {...linkAttrs}
33
34
  {...attrs}
34
35
  >
35
- <div class="pl-card__layout">
36
+ <div class="pf-card__layout">
36
37
  {
37
38
  icon && (
38
- <span aria-hidden="true" class="pl-card__icon">
39
+ <span aria-hidden="true" class="pf-card__icon">
39
40
  <Icon name={icon} />
40
41
  </span>
41
42
  )
42
43
  }
43
- <div class="pl-card__body">
44
- {title && <p class="pl-card__title">{title}</p>}
45
- <div class="pl-card__content">
44
+ <div class="pf-card__body">
45
+ {title && <p class="pf-card__title">{title}</p>}
46
+ <div class="pf-card__content">
46
47
  <slot />
47
48
  </div>
48
49
  </div>
@@ -50,89 +51,89 @@ const linkAttrs = href
50
51
  </Tag>
51
52
 
52
53
  <style>
53
- .pl-card {
54
+ .pf-card {
54
55
  background: transparent;
55
56
  border: 1px solid
56
- color-mix(in oklab, var(--pl-text-muted, #667085) 18%, transparent);
57
- border-radius: min(var(--pl-radius-lg, 0.75rem), 1rem);
57
+ color-mix(in oklab, var(--pf-text-muted, #667085) 18%, transparent);
58
+ border-radius: min(var(--pf-radius-lg, 0.75rem), 1rem);
58
59
  color: inherit;
59
60
  display: block;
60
- padding: var(--pl-card-padding, 1rem);
61
+ padding: var(--pf-card-padding, 1rem);
61
62
  text-decoration: none;
62
63
  transition:
63
64
  background-color 160ms ease,
64
65
  border-color 160ms ease;
65
66
  }
66
67
 
67
- .pl-card--link:hover {
68
+ .pf-card--link:hover {
68
69
  background: transparent;
69
- border-color: var(--pl-accent, #4f46e5);
70
+ border-color: var(--pf-accent, #3e7e55);
70
71
  }
71
72
 
72
- .pl-card--link:focus-visible {
73
- outline: 2px solid var(--pl-accent, #4f46e5);
73
+ .pf-card--link:focus-visible {
74
+ outline: 2px solid var(--pf-accent, #3e7e55);
74
75
  outline-offset: 2px;
75
76
  }
76
77
 
77
- .pl-card__layout {
78
+ .pf-card__layout {
78
79
  display: grid;
79
- gap: var(--pl-card-layout-gap, 0.75rem);
80
+ gap: var(--pf-card-layout-gap, 0.75rem);
80
81
  }
81
82
 
82
- .pl-card__body {
83
+ .pf-card__body {
83
84
  display: grid;
84
- gap: var(--pl-card-body-gap, 0.375rem);
85
+ gap: var(--pf-card-body-gap, 0.375rem);
85
86
  min-width: 0;
86
87
  }
87
88
 
88
- .pl-card__icon {
89
+ .pf-card__icon {
89
90
  align-items: center;
90
91
  background: var(
91
- --pl-accent-soft,
92
- color-mix(in oklab, var(--pl-accent, #4f46e5) 12%, white)
92
+ --pf-accent-soft,
93
+ color-mix(in oklab, var(--pf-accent, #3e7e55) 12%, white)
93
94
  );
94
- border-radius: var(--pl-radius-md, 0.5rem);
95
- color: var(--pl-accent, #4f46e5);
95
+ border-radius: var(--pf-radius-md, 0.5rem);
96
+ color: var(--pf-accent, #3e7e55);
96
97
  display: inline-flex;
97
- height: var(--pl-card-icon-size, 2.25rem);
98
+ height: var(--pf-card-icon-size, 2.25rem);
98
99
  justify-content: center;
99
100
  line-height: 0;
100
- width: var(--pl-card-icon-size, 2.25rem);
101
+ width: var(--pf-card-icon-size, 2.25rem);
101
102
  }
102
103
 
103
- .pl-card--link:hover .pl-card__icon {
104
- color: var(--pl-accent, #4f46e5);
104
+ .pf-card--link:hover .pf-card__icon {
105
+ color: var(--pf-accent, #3e7e55);
105
106
  }
106
107
 
107
- .pl-card__icon :global(.pl-icon) {
108
+ .pf-card__icon :global(.pf-icon) {
108
109
  display: block;
109
- height: var(--pl-card-icon-glyph-size, 1.125rem);
110
- width: var(--pl-card-icon-glyph-size, 1.125rem);
110
+ height: var(--pf-card-icon-glyph-size, 1.125rem);
111
+ width: var(--pf-card-icon-glyph-size, 1.125rem);
111
112
  }
112
113
 
113
- .pl-card__title {
114
- color: var(--pl-text-strong, var(--pl-text, #182230));
115
- font-size: var(--pl-card-title-size, 0.9375rem);
114
+ .pf-card__title {
115
+ color: var(--pf-text-strong, var(--pf-text, #182230));
116
+ font-size: var(--pf-card-title-size, 0.9375rem);
116
117
  font-weight: 600;
117
- line-height: var(--pl-card-title-line-height, 1.375rem);
118
+ line-height: var(--pf-card-title-line-height, 1.375rem);
118
119
  margin: 0;
119
120
  }
120
121
 
121
- .pl-card__content {
122
- color: var(--pl-text-muted, #667085);
123
- font-size: var(--pl-card-content-size, 0.875rem);
124
- line-height: var(--pl-card-content-line-height, 1.625);
122
+ .pf-card__content {
123
+ color: var(--pf-text-muted, #667085);
124
+ font-size: var(--pf-card-content-size, 0.875rem);
125
+ line-height: var(--pf-card-content-line-height, 1.625);
125
126
  }
126
127
 
127
- .pl-card__content :global(> :first-child) {
128
+ .pf-card__content :global(> :first-child) {
128
129
  margin-top: 0;
129
130
  }
130
131
 
131
- .pl-card__content :global(> :last-child) {
132
+ .pf-card__content :global(> :last-child) {
132
133
  margin-bottom: 0;
133
134
  }
134
135
 
135
- .pl-card__content :global(> * + *) {
136
- margin-top: var(--pl-card-content-gap, 0.5rem);
136
+ .pf-card__content :global(> * + *) {
137
+ margin-top: var(--pf-card-content-gap, 0.5rem);
137
138
  }
138
139
  </style>
package/dist/mdx/CardGrid.astro CHANGED
@@ -1,17 +1,21 @@
1
- <div class="pl-card-grid">
1
+ ---
2
+ import '../theme-tokens.css';
3
+ ---
4
+
5
+ <div class="pf-card-grid">
2
6
  <slot />
3
7
  </div>
4
8
 
5
9
  <style>
6
- .pl-card-grid {
10
+ .pf-card-grid {
7
11
  display: grid;
8
12
  grid-template-columns: 1fr;
9
- gap: var(--pl-card-grid-gap, 1rem);
10
- margin-block: var(--pl-card-grid-margin, 2rem);
13
+ gap: var(--pf-card-grid-gap, 1rem);
14
+ margin-block: var(--pf-card-grid-margin, 2rem);
11
15
  }
12
16
 
13
17
  @media (min-width: 48rem) {
14
- .pl-card-grid {
18
+ .pf-card-grid {
15
19
  grid-template-columns: repeat(2, minmax(0, 1fr));
16
20
  }
17
21
  }