@hubspot/cms-component-library 0.3.10 → 0.3.11

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 (12) hide show
  1. package/components/componentLibrary/Button/index.module.scss +4 -4
  2. package/components/componentLibrary/Card/StyleFields.tsx +1 -1
  3. package/components/componentLibrary/Card/index.tsx +1 -1
  4. package/components/componentLibrary/Card/llm.txt +3 -3
  5. package/components/componentLibrary/Card/stories/Card.stories.tsx +5 -5
  6. package/components/componentLibrary/Card/stories/CardDecorator.module.scss +4 -4
  7. package/components/componentLibrary/Card/types.ts +4 -4
  8. package/components/componentLibrary/Form/StyleFields.tsx +1 -1
  9. package/components/componentLibrary/Form/llm.txt +2 -2
  10. package/components/componentLibrary/Link/index.module.scss +3 -1
  11. package/components/componentLibrary/_patterns/css-patterns.md +34 -17
  12. package/package.json +1 -1
package/components/componentLibrary/Button/index.module.scss CHANGED
@@ -29,10 +29,10 @@
29
29
  }
30
30
 
31
31
  &:focus-visible {
32
- background-color: var(--hs-button-backgroundColor-focus, var(--hs-button-backgroundColor));
33
- color: var(--hs-button-color-focus, var(--hs-button-color));
34
- border: var(--hs-button-border-focus, var(--hs-button-border));
35
- outline: 2px solid;
32
+ background-color: var(--hs-button-backgroundColor-hover, var(--hs-button-backgroundColor));
33
+ color: var(--hs-button-color-hover, var(--hs-button-color));
34
+ border: var(--hs-button-border-hover, var(--hs-button-border));
35
+ outline: 2px solid Highlight;
36
36
  outline-offset: 2px;
37
37
  }
38
38
 
package/components/componentLibrary/Card/StyleFields.tsx CHANGED
@@ -4,7 +4,7 @@ import { StyleFieldsProps } from './types.js';
4
4
  const StyleFields = ({
5
5
  cardVariantLabel = 'Card variant',
6
6
  cardVariantName = 'cardVariant',
7
- cardVariantDefault = { variantName: 'cardStyle1' },
7
+ cardVariantDefault = { variant_name: 'card1' },
8
8
  }: StyleFieldsProps) => {
9
9
  return (
10
10
  <VariantSelectionField
package/components/componentLibrary/Card/index.tsx CHANGED
@@ -4,7 +4,7 @@ import { CardProps } from './types.js';
4
4
  import StyleFields from './StyleFields.js';
5
5
 
6
6
  const CardComponent = ({
7
- variant = 'cardStyle1',
7
+ variant = 'card1',
8
8
  as: Component = 'div',
9
9
  className = '',
10
10
  style = {},
package/components/componentLibrary/Card/llm.txt CHANGED
@@ -34,7 +34,7 @@ Card/
34
34
  **Props:**
35
35
  ```tsx
36
36
  {
37
- variant?: 'cardStyle1' | 'cardStyle2' | 'cardStyle3' | 'cardStyle4'; // Theme variant (default: 'cardStyle1')
37
+ variant?: 'card1' | 'card2' | 'card3' | 'card4'; // Theme variant (default: 'card1')
38
38
  as?: 'div' | 'article' | 'section'; // HTML element to render (default: 'div')
39
39
  children?: React.ReactNode; // Card content
40
40
  className?: string; // Additional CSS classes
@@ -58,7 +58,7 @@ import Card from '@hubspot/cms-component-library/Card';
58
58
  ### Semantic Article Card
59
59
 
60
60
  ```tsx
61
- <Card as="article" variant="cardStyle3">
61
+ <Card as="article" variant="card3">
62
62
  <h3>Blog Post Title</h3>
63
63
  <p>Article content goes here...</p>
64
64
  </Card>
@@ -97,7 +97,7 @@ Configurable props for customizing field labels, names, and defaults:
97
97
  <Card.StyleFields
98
98
  cardVariantLabel="Card variant"
99
99
  cardVariantName="cardVariant"
100
- cardVariantDefault={{ variant_name: 'cardStyle1' }}
100
+ cardVariantDefault={{ variant_name: 'card1' }}
101
101
  />
102
102
  ```
103
103
 
package/components/componentLibrary/Card/stories/Card.stories.tsx CHANGED
@@ -43,7 +43,7 @@ type Story = StoryObj<typeof meta>;
43
43
 
44
44
  export const Default: Story = {
45
45
  args: {
46
- variant: 'cardStyle1',
46
+ variant: 'card1',
47
47
  },
48
48
  render: args => (
49
49
  <Card {...args}>
@@ -60,7 +60,7 @@ export const Variants: Story = {
60
60
  <SBContainer flex direction="column" gap="large">
61
61
  <SBContainer addBackground>
62
62
  <h4>Card Style 1 (Light)</h4>
63
- <Card variant="cardStyle1">
63
+ <Card variant="card1">
64
64
  <CardHeading>Card Style 1</CardHeading>
65
65
  <CardDivider />
66
66
  <CardContent>Light background with dark text.</CardContent>
@@ -69,7 +69,7 @@ export const Variants: Story = {
69
69
 
70
70
  <SBContainer addBackground>
71
71
  <h4>Card Style 2 (Subtle)</h4>
72
- <Card variant="cardStyle2">
72
+ <Card variant="card2">
73
73
  <CardHeading>Card Style 2</CardHeading>
74
74
  <CardDivider />
75
75
  <CardContent>Subtle background with dark text.</CardContent>
@@ -78,7 +78,7 @@ export const Variants: Story = {
78
78
 
79
79
  <SBContainer addBackground>
80
80
  <h4>Card Style 3 (Dark)</h4>
81
- <Card variant="cardStyle3">
81
+ <Card variant="card3">
82
82
  <CardHeading>Card Style 3</CardHeading>
83
83
  <CardDivider />
84
84
  <CardContent>Dark background with light text.</CardContent>
@@ -87,7 +87,7 @@ export const Variants: Story = {
87
87
 
88
88
  <SBContainer addBackground>
89
89
  <h4>Card Style 4 (Darker)</h4>
90
- <Card variant="cardStyle4">
90
+ <Card variant="card4">
91
91
  <CardHeading>Card Style 4</CardHeading>
92
92
  <CardDivider />
93
93
  <CardContent>Darker background with light text.</CardContent>
package/components/componentLibrary/Card/stories/CardDecorator.module.scss CHANGED
@@ -1,27 +1,27 @@
1
1
  .cardContainer {
2
2
  /* card Variant Styles */
3
- :global([data-card-variant='cardStyle1']) {
3
+ :global([data-card-variant='card1']) {
4
4
  --hs-card-borderRadius: 10px;
5
5
  --hs-card-backgroundColor: rgb(255, 255, 255);
6
6
  --hs-card-color: rgb(28, 28, 31);
7
7
  --hs-card-border: 1px solid #e0e0e0;
8
8
  }
9
9
 
10
- :global([data-card-variant='cardStyle2']) {
10
+ :global([data-card-variant='card2']) {
11
11
  --hs-card-borderRadius: 10px;
12
12
  --hs-card-backgroundColor: rgb(249, 249, 249);
13
13
  --hs-card-color: rgb(28, 28, 31);
14
14
  --hs-card-border: 1px solid #e0e0e0;
15
15
  }
16
16
 
17
- :global([data-card-variant='cardStyle3']) {
17
+ :global([data-card-variant='card3']) {
18
18
  --hs-card-borderRadius: 10px;
19
19
  --hs-card-backgroundColor: rgb(28, 28, 31);
20
20
  --hs-card-color: rgb(255,255,255);
21
21
  --hs-card-border: 1px solid #e0e0e0;
22
22
  }
23
23
 
24
- :global([data-card-variant='cardStyle4']) {
24
+ :global([data-card-variant='card4']) {
25
25
  --hs-card-borderRadius: 10px;
26
26
  --hs-card-backgroundColor: rgb(36, 36, 36);
27
27
  --hs-card-color: rgb(255,255,255);
package/components/componentLibrary/Card/types.ts CHANGED
@@ -1,8 +1,8 @@
1
1
  export type CardVariant =
2
- | 'cardStyle1'
3
- | 'cardStyle2'
4
- | 'cardStyle3'
5
- | 'cardStyle4';
2
+ | 'card1'
3
+ | 'card2'
4
+ | 'card3'
5
+ | 'card4';
6
6
 
7
7
  export type CardAs = 'div' | 'article' | 'section';
8
8
 
package/components/componentLibrary/Form/StyleFields.tsx CHANGED
@@ -4,7 +4,7 @@ import { StyleFieldsProps } from './types.js';
4
4
  const StyleFields = ({
5
5
  formVariantLabel = 'Form variant',
6
6
  formVariantName = 'formVariant',
7
- formVariantDefault = { variant_name: 'primaryForm' },
7
+ formVariantDefault = { variant_name: 'form1' },
8
8
  }: StyleFieldsProps) => {
9
9
  return (
10
10
  <VariantSelectionField
package/components/componentLibrary/Form/llm.txt CHANGED
@@ -123,7 +123,7 @@ Configurable props for variant selection:
123
123
  <Form.StyleFields
124
124
  formVariantLabel="Form variant"
125
125
  formVariantName="formVariant"
126
- formVariantDefault={{ variant_name: 'primaryForm' }}
126
+ formVariantDefault={{ variant_name: 'form1' }}
127
127
  />
128
128
  ```
129
129
 
@@ -135,7 +135,7 @@ Configurable props for variant selection:
135
135
  {
136
136
  formVariantLabel?: string; // Label shown in the editor (default: "Form variant")
137
137
  formVariantName?: string; // Field name (default: "formVariant")
138
- formVariantDefault?: { variant_name: string }; // Default variant (default: { variant_name: 'primaryForm' })
138
+ formVariantDefault?: { variant_name: string }; // Default variant (default: { variant_name: 'form1' })
139
139
  }
140
140
  ```
141
141
 
package/components/componentLibrary/Link/index.module.scss CHANGED
@@ -10,7 +10,9 @@
10
10
  }
11
11
 
12
12
  &:focus-visible {
13
- outline: 2px solid currentColor;
13
+ color: var(--hs-link-color-hover);
14
+ text-decoration: var(--hs-link-textDecoration-hover);
15
+ outline: 2px solid Highlight;
14
16
  outline-offset: 2px;
15
17
  }
16
18
 
package/components/componentLibrary/_patterns/css-patterns.md CHANGED
@@ -136,8 +136,11 @@ render: () => {
136
136
  property: var(--hscl-componentName-property-hover);
137
137
  }
138
138
 
139
- &:focus {
140
- property: var(--hscl-componentName-property-focus);
139
+ // Focus-visible reuses hover styles + browser default outline
140
+ &:focus-visible {
141
+ property: var(--hscl-componentName-property-hover);
142
+ outline: 2px solid Highlight;
143
+ outline-offset: 2px;
141
144
  }
142
145
 
143
146
  &:disabled {
@@ -186,9 +189,11 @@ Use `&` for pseudo-classes and nested selectors:
186
189
  background-color: var(--hscl-button-backgroundColor-hover);
187
190
  }
188
191
 
189
- &:focus {
190
- outline: var(--hscl-button-outlineWidth-focus) solid
191
- var(--hscl-button-outlineColor-focus);
192
+ &:focus-visible {
193
+ background-color: var(--hscl-button-backgroundColor-hover);
194
+ color: var(--hscl-button-color-hover);
195
+ outline: 2px solid Highlight;
196
+ outline-offset: 2px;
192
197
  }
193
198
 
194
199
  &:disabled {
@@ -244,9 +249,11 @@ Use `&` for pseudo-classes and nested selectors:
244
249
  background-color: var(--hscl-button-backgroundColor-hover);
245
250
  }
246
251
 
247
- &:focus {
248
- outline: var(--hscl-button-outlineWidth-focus) solid
249
- var(--hscl-button-outlineColor-focus);
252
+ &:focus-visible {
253
+ background-color: var(--hscl-button-backgroundColor-hover);
254
+ color: var(--hscl-button-color-hover);
255
+ outline: 2px solid Highlight;
256
+ outline-offset: 2px;
250
257
  }
251
258
 
252
259
  &:disabled {
@@ -286,10 +293,12 @@ All interactive components should style **hover, focus, active** states:
286
293
  color: var(--hscl-button-color-hover, var(--hscl-button-color));
287
294
  }
288
295
 
289
- // Focus-visible - keyboard navigation only (not mouse clicks)
296
+ // Focus-visible - reuses hover styles + browser default outline
290
297
  &:focus-visible {
291
- outline: var(--hscl-button-outlineWidth-focus, 2px) solid var(--hscl-button-outlineColor-focus, currentColor);
292
- outline-offset: var(--hscl-button-outlineOffset-focus, 2px);
298
+ background-color: var(--hscl-button-backgroundColor-hover, var(--hscl-button-backgroundColor));
299
+ color: var(--hscl-button-color-hover, var(--hscl-button-color));
300
+ outline: 2px solid Highlight;
301
+ outline-offset: 2px;
293
302
  }
294
303
 
295
304
  // Active - pressed/clicked state
@@ -322,11 +331,17 @@ All interactive components should style **hover, focus, active** states:
322
331
  background-color: var(--hscl-button-backgroundColor-hover);
323
332
  ```
324
333
 
325
- 3. **Use `currentColor` for focus outlines**
326
- - Adapts to component's text color automatically
327
- - Ensures sufficient contrast in most cases
334
+ 3. **Reuse hover styles for focus, rely on browser default outline**
335
+ - Focus-visible should apply the same visual treatment as hover (background, color, border)
336
+ - Use `outline: 2px solid initial` for the browser's default focus ring color
337
+ - No need for separate focus-specific CSS variables
328
338
  ```scss
329
- outline: var(--hscl-button-outlineColor-focus, currentColor);
339
+ &:focus-visible {
340
+ background-color: var(--hscl-button-backgroundColor-hover, var(--hscl-button-backgroundColor));
341
+ color: var(--hscl-button-color-hover, var(--hscl-button-color));
342
+ outline: 2px solid Highlight;
343
+ outline-offset: 2px;
344
+ }
330
345
  ```
331
346
 
332
347
  4. **Respect reduced motion preferences**
@@ -360,8 +375,10 @@ See these components for implementation examples:
360
375
  property: var(--hscl-componentName-property-hover);
361
376
  }
362
377
 
363
- &:focus {
364
- property: var(--hscl-componentName-property-focus);
378
+ &:focus-visible {
379
+ property: var(--hscl-componentName-property-hover);
380
+ outline: 2px solid Highlight;
381
+ outline-offset: 2px;
365
382
  }
366
383
  }
367
384
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hubspot/cms-component-library",
3
- "version": "0.3.10",
3
+ "version": "0.3.11",
4
4
  "description": "HubSpot CMS React component library for building CMS modules",
5
5
  "license": "Apache-2.0",
6
6
  "exports": {