@hubspot/cms-component-library 0.3.11 → 0.3.13

package/components/componentLibrary/Accordion/AccordionContent/index.module.scss

@@ -1,9 +1,7 @@
 .accordionContent {
-  padding-block: var(--hscl-accordion-body-paddingBlock, 16px);
-  padding-inline: var(--hscl-accordion-body-paddingInline, 20px);
-  color: var(--hscl-accordion-body-color, inherit);
-  font-size: var(--hscl-accordion-body-fontSize, 16px);
-  line-height: var(--hscl-accordion-body-lineHeight, 1.5);
+  padding-block: 16px;
+  padding-inline: 20px;
+  color: inherit;
 
   :last-child {
     margin-block-end: 0;

package/components/componentLibrary/Accordion/AccordionItem/StyleFields.tsx

@@ -1,24 +1,16 @@
-import { ChoiceField } from '@hubspot/cms-components/fields';
+import { VariantSelectionField } from '@hubspot/cms-components/fields';
 import type { StyleFieldsProps } from './types.js';
 
 const StyleFields = ({
-  variantLabel = 'Variant',
-  variantName = 'variant',
-  variantDefault = 'variant1',
+  variantLabel = 'Accordion variant',
+  variantName = 'accordionVariant',
+  variantDefault = { variant_name: 'card1' },
 }: StyleFieldsProps) => {
   return (
-    <ChoiceField
+    <VariantSelectionField
       label={variantLabel}
       name={variantName}
-      helpText="The style variant for the accordion item"
-      display="select"
-      choices={[
-        ['variant1', 'Variant 1'],
-        ['variant2', 'Variant 2'],
-        ['variant3', 'Variant 3'],
-        ['variant4', 'Variant 4'],
-      ]}
-      required={false}
+      variantDefinitionName="card"
       default={variantDefault}
     />
   );

package/components/componentLibrary/Accordion/AccordionItem/index.module.scss

@@ -1,9 +1,11 @@
 .accordionItem {
-  border: var(--hscl-accordion-borderWidth, 1px) solid
-    var(--hscl-accordion-borderColor, #e0e0e0);
-  border-radius: var(--hscl-accordion-borderRadius, 4px);
-  background-color: var(--hscl-accordion-backgroundColor, transparent);
-  color: var(--hscl-accordion-color, inherit);
+  --hs-section-color: var(--hs-card-color);
+
+  border: var(--hs-card-borderWidth, 1px) solid
+    var(--hs-card-borderColor, #e0e0e0);
+  border-radius: var(--hs-card-borderRadius, 4px);
+  background-color: var(--hs-card-backgroundColor, transparent);
+  color: var(--hs-card-color, inherit);
   overflow: hidden;
 }
 

package/components/componentLibrary/Accordion/AccordionItem/index.tsx

@@ -1,31 +1,22 @@
 import styles from './index.module.scss';
 import StyleFields from './StyleFields.js';
 import cx from '../../utils/classname.js';
-import { mapVariantToCssVars } from '../../utils/cssVars.js';
-import { CSSVariables } from '../../utils/types.js';
 import { AccordionItemProps } from './types.js';
 
 const AccordionItemComponent = ({
-  variant = 'variant1',
+  variant = 'card1',
   className = '',
   style = {},
   children,
 }: AccordionItemProps) => {
   const combinedClasses = cx(styles.accordionItem, className);
 
-  const cssVariables: CSSVariables = variant
-    ? mapVariantToCssVars('--hscl-accordion', variant, [
-        'borderColor',
-        'borderRadius',
-        'borderWidth',
-        'backgroundColor',
-        'color',
-        'icon-fill',
-      ])
-    : {};
-
   return (
-    <details className={combinedClasses} style={{ ...cssVariables, ...style }}>
+    <details
+      className={combinedClasses}
+      style={style}
+      data-card-variant={variant}
+    >
       {children}
     </details>
   );

package/components/componentLibrary/Accordion/AccordionItem/types.ts

@@ -3,10 +3,10 @@ import type { AccordionTitleProps } from '../AccordionTitle/types.js';
 import type { AccordionContentProps } from '../AccordionContent/types.js';
 
 export type AccordionVariant =
-  | 'variant1'
-  | 'variant2'
-  | 'variant3'
-  | 'variant4';
+  | 'card1'
+  | 'card2'
+  | 'card3'
+  | 'card4';
 
 type AccordionItemChildren =
   | ReactElement<AccordionTitleProps>
@@ -22,5 +22,5 @@ export type AccordionItemProps = {
 export type StyleFieldsProps = {
   variantLabel?: string;
   variantName?: string;
-  variantDefault?: AccordionVariant;
+  variantDefault?: { variantName?: string; variant_name?: string };
 };

package/components/componentLibrary/Accordion/AccordionTitle/StyleFields.tsx

@@ -10,7 +10,7 @@ const StyleFields = ({
     <ChoiceField
       label={iconLabel}
       name={iconName}
-      display="buttons"
+      display="select"
       choices={[
         ['caret', 'Caret'],
         ['chevron', 'Chevron'],

package/components/componentLibrary/Accordion/AccordionTitle/index.module.scss

@@ -1,9 +1,9 @@
 .accordionTitle {
   display: flex;
   align-items: center;
-  padding-block: var(--hscl-accordion-title-paddingBlock, 16px);
-  padding-inline: var(--hscl-accordion-title-paddingInline, 20px);
-  background-color: var(--hscl-accordion-title-backgroundColor, transparent);
+  padding-block: 16px;
+  padding-inline: 20px;
+  background-color: transparent;
   cursor: pointer;
   list-style: none;
 
@@ -13,9 +13,9 @@
 }
 
 .accordionTitleText {
-  font-size: var(--hscl-accordion-title-fontSize, 24px);
-  font-weight: var(--hscl-accordion-title-fontWeight, 600);
-  margin-inline-end: var(--hscl-accordion-title-marginInlineEnd, 16px);
+  font-size: 24px;
+  font-weight: 600;
+  margin-inline-end: 16px;
   flex: 1;
 }
 

package/components/componentLibrary/Accordion/llm.txt

@@ -89,7 +89,7 @@ Accordion/
 **Props:**
 ```tsx
 {
-  variant?: 'variant1' | 'variant2' | 'variant3' | 'variant4';  // Visual style variant (default: 'variant1')
+  variant?: 'card1' | 'card2' | 'card3' | 'card4';  // Visual style variant (default: 'card1')
   className?: string;                                           // Additional CSS classes
   style?: React.CSSProperties;                                  // Inline styles
   children: React.ReactNode;                                    // Should contain AccordionTitle and AccordionContent
@@ -220,14 +220,14 @@ Configurable props for variant selection:
 
 ```tsx
 <AccordionItem.StyleFields
-  variantName="variant"
-  variantLabel="Variant"
-  variantDefault="variant1"
+  variantName="accordionVariant"
+  variantLabel="Accordion variant"
+  variantDefault={{ variant_name: 'card1' }}
 />
 ```
 
 **Fields:**
-- `variant`: ChoiceField for selecting visual style (variant1, variant2, variant3, variant4)
+- `accordionVariant`: VariantSelectionField for selecting visual style using the card variant definition (card1, card2, card3, card4)
 
 #### AccordionTitle.ContentFields
 
@@ -288,7 +288,7 @@ import { AccordionIconType } from '@hubspot/cms-component-library/Accordion/Acco
 
 type FAQModuleProps = {
   style?: {
-    variant?: AccordionVariant;
+    accordionVariant?: { variantName: AccordionVariant };
     icon?: AccordionIconType;
   };
   accordionItems?: Array<{
@@ -301,7 +301,7 @@ export const Component = ({
   style,
   accordionItems = [],
 }: FAQModuleProps) => {
-  const variant = style?.variant;
+  const variant = style?.accordionVariant?.variantName;
   const icon = style?.icon;
 
   return (
@@ -371,18 +371,18 @@ export const fields = (
 
 ### CSS Variables
 
-The Accordion component uses CSS variables for theming and customization. Variables are organized by variant for consistent styling across the component.
+The Accordion component uses CSS variables for theming and customization. Variant styles are applied via `data-accordion-variant` data attribute selectors (following the same pattern as Card), using the card variant definition from `VariantSelectionField`.
 
-**Per-Variant Variables (replace `{variant}` with variant1, variant2, variant3, or variant4):**
+**Base Variables (applied per variant via `[data-accordion-variant]` selectors):**
 
 | Variable | Description | Default |
 |----------|-------------|---------|
-| `--hscl-accordion-{variant}-borderColor` | Border color | `#e0e0e0` |
-| `--hscl-accordion-{variant}-borderRadius` | Border radius | `4px` |
-| `--hscl-accordion-{variant}-borderThickness` | Border width | `1px` |
-| `--hscl-accordion-{variant}-backgroundColor` | Background color | `transparent` |
-| `--hscl-accordion-{variant}-textColor` | Text color | `#33475b` |
-| `--hscl-accordion-{variant}-icon-fillColor` | Icon fill color | `#33475b` |
+| `--hscl-accordion-borderColor` | Border color | `#e0e0e0` |
+| `--hscl-accordion-borderRadius` | Border radius | `4px` |
+| `--hscl-accordion-borderWidth` | Border width | `1px` |
+| `--hscl-accordion-backgroundColor` | Background color | `transparent` |
+| `--hscl-accordion-color` | Text color | `#33475b` |
+| `--hscl-accordion-icon-fill` | Icon fill color | `#33475b` |
 
 **Title-Specific Variables:**
 

package/components/componentLibrary/Accordion/stories/Accordion.stories.tsx

@@ -153,7 +153,7 @@ export const Variants: Story = {
       <SBContainer addBackground>
         <h4>Variant 2</h4>
         <Accordion>
-          <AccordionItem variant="variant2">
+          <AccordionItem variant="card2">
             <AccordionTitle>Soft background styling</AccordionTitle>
             <AccordionContent>
               <p>
@@ -167,7 +167,7 @@ export const Variants: Story = {
       <SBContainer addBackground>
         <h4>Variant 3</h4>
         <Accordion>
-          <AccordionItem variant="variant3">
+          <AccordionItem variant="card3">
             <AccordionTitle>Bold accent styling</AccordionTitle>
             <AccordionContent>
               <p>Accent-colored border with sharp corners for emphasis.</p>
@@ -179,7 +179,7 @@ export const Variants: Story = {
       <SBContainer addBackground>
         <h4>Variant 4</h4>
         <Accordion>
-          <AccordionItem variant="variant4">
+          <AccordionItem variant="card4">
             <AccordionTitle>Rounded card styling</AccordionTitle>
             <AccordionContent>
               <p>

package/components/componentLibrary/Accordion/stories/AccordionDecorator.module.scss

@@ -0,0 +1,38 @@
+.accordionContainer {
+  /* Accordion Variant Styles */
+  :global([data-accordion-variant='card1']) {
+    --hscl-accordion-borderColor: #e0e0e0;
+    --hscl-accordion-borderRadius: 4px;
+    --hscl-accordion-borderWidth: 1px;
+    --hscl-accordion-backgroundColor: transparent;
+    --hscl-accordion-color: #33475b;
+    --hscl-accordion-icon-fill: #33475b;
+  }
+
+  :global([data-accordion-variant='card2']) {
+    --hscl-accordion-borderColor: #cbd6e2;
+    --hscl-accordion-borderRadius: 8px;
+    --hscl-accordion-borderWidth: 1px;
+    --hscl-accordion-backgroundColor: #f5f8fa;
+    --hscl-accordion-color: #33475b;
+    --hscl-accordion-icon-fill: #516f90;
+  }
+
+  :global([data-accordion-variant='card3']) {
+    --hscl-accordion-borderColor: #ff7a59;
+    --hscl-accordion-borderRadius: 0;
+    --hscl-accordion-borderWidth: 2px;
+    --hscl-accordion-backgroundColor: transparent;
+    --hscl-accordion-color: #33475b;
+    --hscl-accordion-icon-fill: #ff7a59;
+  }
+
+  :global([data-accordion-variant='card4']) {
+    --hscl-accordion-borderColor: #33475b;
+    --hscl-accordion-borderRadius: 12px;
+    --hscl-accordion-borderWidth: 1px;
+    --hscl-accordion-backgroundColor: #eaf0f6;
+    --hscl-accordion-color: #33475b;
+    --hscl-accordion-icon-fill: #33475b;
+  }
+}

package/components/componentLibrary/Accordion/stories/AccordionDecorator.tsx

@@ -1,41 +1,13 @@
 import type { Decorator } from '@storybook/react';
-import type { CSSVariables } from '../../utils/types.js';
-
-const defaultAccordionStyles: CSSVariables = {
-  '--hscl-listItem-color-primary': '#33475b',
-  '--hscl-listItem-color-secondary': '#516f90',
-
-  '--hscl-accordion-variant1-borderColor': '#e0e0e0',
-  '--hscl-accordion-variant1-borderRadius': '4px',
-  '--hscl-accordion-variant1-borderWidth': '1px',
-  '--hscl-accordion-variant1-backgroundColor': 'transparent',
-  '--hscl-accordion-variant1-color': '#33475b',
-  '--hscl-accordion-variant1-icon-fill': '#33475b',
-
-  '--hscl-accordion-variant2-borderColor': '#cbd6e2',
-  '--hscl-accordion-variant2-borderRadius': '8px',
-  '--hscl-accordion-variant2-borderWidth': '1px',
-  '--hscl-accordion-variant2-backgroundColor': '#f5f8fa',
-  '--hscl-accordion-variant2-color': '#33475b',
-  '--hscl-accordion-variant2-icon-fill': '#516f90',
-
-  '--hscl-accordion-variant3-borderColor': '#ff7a59',
-  '--hscl-accordion-variant3-borderRadius': '0',
-  '--hscl-accordion-variant3-borderWidth': '2px',
-  '--hscl-accordion-variant3-backgroundColor': 'transparent',
-  '--hscl-accordion-variant3-color': '#33475b',
-  '--hscl-accordion-variant3-icon-fill': '#ff7a59',
-
-  '--hscl-accordion-variant4-borderColor': '#33475b',
-  '--hscl-accordion-variant4-borderRadius': '12px',
-  '--hscl-accordion-variant4-borderWidth': '1px',
-  '--hscl-accordion-variant4-backgroundColor': '#eaf0f6',
-  '--hscl-accordion-variant4-color': '#33475b',
-  '--hscl-accordion-variant4-icon-fill': '#33475b',
-};
+import styles from './AccordionDecorator.module.scss';
 
 export const withAccordionStyles: Decorator = Story => (
-  <div style={defaultAccordionStyles}>
+  <div className={styles.accordionContainer}>
     <Story />
   </div>
 );
+
+/**
+ * Export styles so stories can apply variant classes to AccordionItems
+ */
+export { styles as accordionStyles };

package/components/componentLibrary/Button/index.module.scss

@@ -9,7 +9,9 @@
   color: var(--hs-button-color);
   padding: 12px 24px;
   border-radius: var(--hs-button-borderRadius);
-  border: var(--hs-button-border);
+  border-style: var(--hs-button-borderStyle);
+  border-width: var(--hs-button-borderWidth);
+  border-color: var(--hs-button-borderColor);
   font-size: var(--hs-button-fontSize);
   font-family: var(--hs-button-fontFamily);
   font-style: var(--hs-button-fontStyle);
@@ -25,13 +27,17 @@
   &:hover {
     background-color: var(--hs-button-backgroundColor-hover, var(--hs-button-backgroundColor));
     color: var(--hs-button-color-hover, var(--hs-button-color));
-    border: var(--hs-button-border-hover, var(--hs-button-border));
+    border-style: var(--hs-button-borderStyle-hover, var(--hs-button-borderStyle));
+    border-width: var(--hs-button-borderWidth-hover, var(--hs-button-borderWidth));
+    border-color: var(--hs-button-borderColor-hover, var(--hs-button-borderColor));
   }
 
   &:focus-visible {
     background-color: var(--hs-button-backgroundColor-hover, var(--hs-button-backgroundColor));
     color: var(--hs-button-color-hover, var(--hs-button-color));
-    border: var(--hs-button-border-hover, var(--hs-button-border));
+    border-style: var(--hs-button-borderStyle-hover, var(--hs-button-borderStyle));
+    border-width: var(--hs-button-borderWidth-hover, var(--hs-button-borderWidth));
+    border-color: var(--hs-button-borderColor-hover, var(--hs-button-borderColor));
     outline: 2px solid Highlight;
     outline-offset: 2px;
   }
@@ -39,7 +45,9 @@
   &:active {
     background-color: var(--hs-button-backgroundColor-active, var(--hs-button-backgroundColor));
     color: var(--hs-button-color-active, var(--hs-button-color));
-    border: var(--hs-button-border-active, var(--hs-button-border));
+    border-style: var(--hs-button-borderStyle-active, var(--hs-button-borderStyle));
+    border-width: var(--hs-button-borderWidth-active, var(--hs-button-borderWidth));
+    border-color: var(--hs-button-borderColor-active, var(--hs-button-borderColor));
   }
 
   &:disabled {

package/components/componentLibrary/Button/llm.txt

@@ -284,7 +284,9 @@ The Button component is themed via `--hs-button-*` CSS variables, which are prov
 - `--hs-button-backgroundColor`: Background color
 - `--hs-button-color`: Text color
 - `--hs-button-borderRadius`: Border radius
-- `--hs-button-border`: Border shorthand
+- `--hs-button-borderStyle`: Border style
+- `--hs-button-borderWidth`: Border width
+- `--hs-button-borderColor`: Border color
 - `--hs-button-fontSize`: Font size
 - `--hs-button-fontFamily`: Font family
 - `--hs-button-fontStyle`: Font style
@@ -294,17 +296,23 @@ The Button component is themed via `--hs-button-*` CSS variables, which are prov
 **Hover States (from theme):**
 - `--hs-button-backgroundColor-hover`: Hover background (falls back to base)
 - `--hs-button-color-hover`: Hover text color (falls back to base)
-- `--hs-button-border-hover`: Hover border (falls back to base)
+- `--hs-button-borderStyle-hover`: Hover border style (falls back to base)
+- `--hs-button-borderWidth-hover`: Hover border width (falls back to base)
+- `--hs-button-borderColor-hover`: Hover border color (falls back to base)
 
 **Focus States (from theme):**
 - `--hs-button-backgroundColor-focus`: Focus background (falls back to base)
 - `--hs-button-color-focus`: Focus text color (falls back to base)
-- `--hs-button-border-focus`: Focus border (falls back to base)
+- `--hs-button-borderStyle-focus`: Focus border style (falls back to base)
+- `--hs-button-borderWidth-focus`: Focus border width (falls back to base)
+- `--hs-button-borderColor-focus`: Focus border color (falls back to base)
 
 **Active States (from theme):**
 - `--hs-button-backgroundColor-active`: Active background (falls back to base)
 - `--hs-button-color-active`: Active text color (falls back to base)
-- `--hs-button-border-active`: Active border (falls back to base)
+- `--hs-button-borderStyle-active`: Active border style (falls back to base)
+- `--hs-button-borderWidth-active`: Active border width (falls back to base)
+- `--hs-button-borderColor-active`: Active border color (falls back to base)
 
 ### Hardcoded Layout Values
 

package/components/componentLibrary/Button/stories/ButtonDecorator.module.scss

@@ -3,7 +3,9 @@
   --hs-button-backgroundColor: #0066cc;
   --hs-button-color: #ffffff;
   --hs-button-borderRadius: 4px;
-  --hs-button-border: 1px solid transparent;
+  --hs-button-borderStyle: solid;
+  --hs-button-borderWidth: 1px;
+  --hs-button-borderColor: transparent;
   --hs-button-fontSize: 14px;
   --hs-button-fontFamily: inherit;
   --hs-button-fontStyle: normal;
@@ -11,11 +13,17 @@
   --hs-button-textDecoration: none;
   --hs-button-backgroundColor-hover: #0052a3;
   --hs-button-color-hover: #ffffff;
-  --hs-button-border-hover: 1px solid transparent;
+  --hs-button-borderStyle-hover: solid;
+  --hs-button-borderWidth-hover: 1px;
+  --hs-button-borderColor-hover: transparent;
   --hs-button-backgroundColor-focus: #0066cc;
   --hs-button-color-focus: #ffffff;
-  --hs-button-border-focus: 1px solid transparent;
+  --hs-button-borderStyle-focus: solid;
+  --hs-button-borderWidth-focus: 1px;
+  --hs-button-borderColor-focus: transparent;
   --hs-button-backgroundColor-active: #004080;
   --hs-button-color-active: #ffffff;
-  --hs-button-border-active: 1px solid transparent;
+  --hs-button-borderStyle-active: solid;
+  --hs-button-borderWidth-active: 1px;
+  --hs-button-borderColor-active: transparent;
 }

package/components/componentLibrary/Card/index.module.scss

@@ -1,4 +1,6 @@
 .card {
+  --hs-section-color: var(--hs-card-color); // overrides card-based typography settings
+
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
@@ -6,9 +8,7 @@
   border-radius: var(--hs-card-borderRadius, 8px);
   background-color: var(--hs-card-backgroundColor, #ffffff);
   color: var(--hs-card-color, inherit);
-  border: var(--hs-card-border, none);
-
-  h1,h2,h3,h4,h5,h6,p,span {
-    color: inherit;
-  }
+  border-style: var(--hs-card-borderStyle, none);
+  border-width: var(--hs-card-borderWidth, 0);
+  border-color: var(--hs-card-borderColor, transparent);
 }

package/components/componentLibrary/Card/llm.txt

@@ -137,7 +137,9 @@ FeatureCardModule.fields = (
 - `--hs-card-borderRadius`: Border radius
 - `--hs-card-backgroundColor`: Background color
 - `--hs-card-color`: Text color
-- `--hs-card-border`: Border style
+- `--hs-card-borderStyle`: Border style (e.g. `solid`, `none`)
+- `--hs-card-borderWidth`: Border width (e.g. `1px`)
+- `--hs-card-borderColor`: Border color
 
 
 ## Accessibility

package/components/componentLibrary/Card/stories/CardDecorator.module.scss

@@ -4,27 +4,35 @@
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(255, 255, 255);
     --hs-card-color: rgb(28, 28, 31);
-    --hs-card-border: 1px solid #e0e0e0;
+    --hs-card-borderStyle: solid;
+    --hs-card-borderWidth: 1px;
+    --hs-card-borderColor: #e0e0e0;
   }
 
   :global([data-card-variant='card2']) {
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(249, 249, 249);
     --hs-card-color: rgb(28, 28, 31);
-    --hs-card-border: 1px solid #e0e0e0;
+    --hs-card-borderStyle: solid;
+    --hs-card-borderWidth: 1px;
+    --hs-card-borderColor: #e0e0e0;
   }
 
   :global([data-card-variant='card3']) {
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(28, 28, 31);
     --hs-card-color: rgb(255,255,255);
-    --hs-card-border: 1px solid #e0e0e0;
+    --hs-card-borderStyle: solid;
+    --hs-card-borderWidth: 1px;
+    --hs-card-borderColor: #e0e0e0;
   }
 
   :global([data-card-variant='card4']) {
     --hs-card-borderRadius: 10px;
     --hs-card-backgroundColor: rgb(36, 36, 36);
     --hs-card-color: rgb(255,255,255);
-    --hs-card-border: 1px solid #e0e0e0;
+    --hs-card-borderStyle: solid;
+    --hs-card-borderWidth: 1px;
+    --hs-card-borderColor: #e0e0e0;
   }
 }

package/components/componentLibrary/Form/PlaceholderForm.module.css

@@ -0,0 +1,74 @@
+.placeholderForm {
+  padding: 32px;
+  border-radius: var(--hs-form-borderRadius, 8px);
+  background-color: var(--hs-form-backgroundColor, rgba(255, 255, 255, 1));
+  border-style: var(--hs-form-borderStyle, solid);
+  border-width: var(--hs-form-borderWidth, 1px);
+  border-color: var(--hs-form-borderColor, #E0E0E0);
+}
+
+.field {
+  margin-block-end: 24px;
+}
+
+.field:last-of-type {
+  margin-block-end: 0;
+}
+
+.label {
+  display: block;
+  margin-block-end: 8px;
+  color: var(--hs-form-label-color, #141414);
+  font-size: var(--hs-form-label-fontSize, 16px);
+  font-family: var(--hs-form-label-fontFamily, inherit);
+  font-style: var(--hs-form-label-fontStyle, normal);
+  font-weight: var(--hs-form-label-fontWeight, 600);
+  text-decoration: var(--hs-form-label-textDecoration, none);
+}
+
+.input {
+  width: 100%;
+  padding-block: 12px;
+  padding-inline: 16px;
+  border-radius: var(--hs-form-field-borderRadius, 8px);
+  background-color: var(--hs-form-field-backgroundColor, rgba(249, 249, 249, 1));
+  border-style: var(--hs-form-field-borderStyle, solid);
+  border-width: var(--hs-form-field-borderWidth, 1px);
+  border-color: var(--hs-form-field-borderColor, #E0E0E0);
+  color: var(--hs-form-input-color, #141414);
+  font-size: var(--hs-form-input-fontSize, 16px);
+  font-family: var(--hs-form-input-fontFamily, inherit);
+  font-style: var(--hs-form-input-fontStyle, normal);
+  font-weight: var(--hs-form-input-fontWeight, 400);
+  text-decoration: var(--hs-form-input-textDecoration, none);
+  box-sizing: border-box;
+}
+
+.input::placeholder {
+  color: var(--hs-form-placeholder-color, rgba(113, 113, 113, 1));
+}
+
+.input:focus {
+  background-color: var(--hs-form-field-backgroundColor-focus, var(--hs-form-field-backgroundColor, rgba(249, 249, 249, 1)));
+  border-style: var(--hs-form-field-borderStyle-focus, var(--hs-form-field-borderStyle, solid));
+  border-width: var(--hs-form-field-borderWidth-focus, var(--hs-form-field-borderWidth, 1px));
+  border-color: var(--hs-form-field-borderColor-focus, var(--hs-form-field-borderColor, #E0E0E0));
+  outline: none;
+}
+
+.submitButton {
+  display: inline-block;
+  width: 100%;
+  margin-block-start: 24px;
+  padding-block: 12px;
+  padding-inline: 24px;
+  border-radius: var(--hs-form-borderRadius, 8px);
+  border: none;
+  background-color: var(--hs-form-input-color, #141414);
+  color: var(--hs-form-backgroundColor, #ffffff);
+  font-size: var(--hs-form-label-fontSize, 16px);
+  font-family: var(--hs-form-label-fontFamily, inherit);
+  font-weight: 600;
+  cursor: default;
+  text-align: center;
+}

package/components/componentLibrary/Form/PlaceholderForm.tsx

@@ -0,0 +1,31 @@
+import styles from './PlaceholderForm.module.css';
+
+const PlaceholderForm = () => {
+  return (
+    <div className={styles.placeholderForm}>
+      <form>
+        <div className={styles.field}>
+          <label className={styles.label}>First name</label>
+          <div>
+            <input className={styles.input} type="text" disabled />
+          </div>
+        </div>
+        <div className={styles.field}>
+          <label className={styles.label}>Last name</label>
+          <div>
+            <input className={styles.input} type="text" disabled />
+          </div>
+        </div>
+        <div className={styles.field}>
+          <label className={styles.label}>Email</label>
+          <div>
+            <input className={styles.input} type="text" disabled />
+          </div>
+        </div>
+        <button type="button" disabled className={styles.submitButton}>Get free widget</button>
+      </form>
+    </div>
+  );
+};
+
+export default PlaceholderForm;

package/components/componentLibrary/Form/StyleFields.tsx

@@ -4,7 +4,7 @@ import { StyleFieldsProps } from './types.js';
 const StyleFields = ({
   formVariantLabel = 'Form variant',
   formVariantName = 'formVariant',
-  formVariantDefault = { variant_name: 'form1' },
+  formVariantDefault = { variantName: 'form1' },
 }: StyleFieldsProps) => {
   return (
     <VariantSelectionField
@@ -12,6 +12,7 @@ const StyleFields = ({
       name={formVariantName}
       variantDefinitionName="form"
       default={formVariantDefault}
+      required={true}
     />
   );
 };