@hubspot/cms-component-library 0.3.8 → 0.3.10

package/components/componentLibrary/Form/islands/legacyForm.module.css

@@ -0,0 +1,251 @@
+.legacyFormStyles {
+  /* Form container */
+  :global(.hs-form) {
+    padding: 32px;
+    border-color: #ff00ff;
+    border-radius: 8px;
+    border-style: solid;
+    border-width: 4px;
+    background: #ffe0f0;
+
+    /* Form field spacing */
+    :global(.hs-form-field) {
+      margin-block-end: 24px;
+    }
+
+    /* Textarea */
+    :global(textarea) {
+      position: relative;
+      height: 160px;
+      border-radius: 3px;
+
+      &::-webkit-resizer {
+        display: none;
+      }
+    }
+
+    /* Textarea drag icon */
+    :global(.hs_multi_line_field .input) {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        right: 8px;
+        bottom: 8px;
+        content: url("data:image/svg+xml,%3Csvg width='11' height='12' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='-1' x2='29.5206' y2='-1' transform='matrix(-0.666795 0.745241 -0.806754 -0.590888 19.6843 0)' stroke='%23303F59' stroke-width='2'/%3E%3Cpath d='M21.0005 9.99756L10.5005 21.9976' stroke='%23303F59' stroke-width='2'/%3E%3C/svg%3E%0A");
+        pointer-events: none;
+      }
+    }
+
+    /* Select dropdown - remove native appearance */
+    :global(select) {
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+    }
+
+    /* Select dropdown icon */
+    :global(.hs-fieldtype-select .input) {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        top: 50%;
+        right: 16px;
+        content: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9407 19.5595C11.5267 20.1454 12.4782 20.1454 13.0642 19.5595L22.0642 10.5595C22.6501 9.97354 22.6501 9.02197 22.0642 8.43604C21.4782 7.8501 20.5267 7.8501 19.9407 8.43604L12.0001 16.3767L4.05947 8.44072C3.47354 7.85478 2.52197 7.85478 1.93604 8.44072C1.3501 9.02666 1.3501 9.97822 1.93604 10.5642L10.936 19.5642L10.9407 19.5595Z' fill='%2309152B'/%3E%3C/svg%3E%0A");
+        pointer-events: none;
+        transform: translateY(-50%);
+      }
+    }
+
+    /* Datepicker icon */
+    :global(.hs-dateinput) {
+      position: relative;
+
+      &::before {
+        position: absolute;
+        top: 50%;
+        right: 16px;
+        content: url("data:image/svg+xml,%3Csvg width='24' height='29' viewBox='0 0 24 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3812_12272)'%3E%3Cpath d='M8.14286 2.07136C8.14286 1.35886 7.56964 0.785645 6.85714 0.785645C6.14464 0.785645 5.57143 1.35886 5.57143 2.07136V4.21422H3.42857C1.5375 4.21422 0 5.75172 0 7.64279V8.49993V11.0714V24.7856C0 26.6767 1.5375 28.2142 3.42857 28.2142H20.5714C22.4625 28.2142 24 26.6767 24 24.7856V11.0714V8.49993V7.64279C24 5.75172 22.4625 4.21422 20.5714 4.21422H18.4286V2.07136C18.4286 1.35886 17.8554 0.785645 17.1429 0.785645C16.4304 0.785645 15.8571 1.35886 15.8571 2.07136V4.21422H8.14286V2.07136ZM2.57143 11.0714H21.4286V24.7856C21.4286 25.2571 21.0429 25.6428 20.5714 25.6428H3.42857C2.95714 25.6428 2.57143 25.2571 2.57143 24.7856V11.0714Z' fill='%2309152B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3812_12272'%3E%3Crect width='24' height='27.4286' fill='white' transform='translate(0 0.785645)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
+        pointer-events: none;
+        transform: translateY(-50%);
+      }
+    }
+
+    /* Placeholder text color */
+    :global(::-moz-placeholder) {
+      color: #ff6600;
+    }
+
+    :global(::placeholder) {
+      color: #ff6600;
+    }
+
+    /* Checkbox and radio list reset */
+    :global(.inputs-list) {
+      padding: 0;
+      margin: 0;
+      list-style: none;
+
+      :global(li) {
+        display: block;
+        margin-block-end: 16px;
+
+        &:last-of-type {
+          margin-block-end: 0;
+        }
+      }
+
+      :global(:is(input, span)) {
+        vertical-align: middle;
+      }
+    }
+
+    /* Help text / legend */
+    :global(legend) {
+      color: #ff6600;
+      margin-block-end: 8px;
+    }
+
+    /* Rich text within form */
+    :global(.hs-richtext) {
+      color: #9900cc;
+
+      :global(img) {
+        height: auto;
+        max-width: 100% !important;
+      }
+    }
+
+    /* Error state - input border */
+    :global(.hs-input.error) {
+      border-color: #ff0000;
+    }
+
+    /* Error messages */
+    :global(.hs-error-msg),
+    :global(.hs-error-msgs) {
+      color: #ff0000;
+      margin-block-start: 4px;
+    }
+
+    /* File upload and fieldset max width */
+    :global(.hs-form-field.hs-fieldtype-file .hs-input),
+    :global(fieldset) {
+      max-width: 100% !important;
+    }
+  }
+
+  /* Labels - targets both form types */
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(label) {
+    display: block;
+    color: #cc0066;
+    font-family: sans-serif;
+    font-size: 0.875rem;
+    font-weight: 600;
+    margin-block-end: 8px;
+  }
+
+  /* Text inputs, selects, textareas - targets both form types */
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='text']),
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='email']),
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='password']),
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='tel']),
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='number']),
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='search']),
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(select),
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(textarea) {
+    width: 100% !important;
+    border-radius: 6px;
+    border-top: 3px solid #00ccff;
+    border-right: 3px solid #00ccff;
+    border-bottom: 3px solid #00ccff;
+    border-left: 3px solid #00ccff;
+    background-color: #e0ffff;
+    color: #003300;
+    padding-block: 12px;
+    padding-inline: 16px;
+  }
+
+  /* Checkbox and radio sizing + fill - targets both form types */
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='checkbox']),
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(input[type='radio']) {
+    height: 24px;
+    width: 24px !important;
+    accent-color: #00cc00;
+    cursor: pointer;
+    margin-inline-end: 12px;
+  }
+
+  /* Submit button - targets both form types */
+  :global(:is(.hs-form, .hs-elevate-system-form)) :global(:is(.hs-button, input[type='submit'])) {
+    display: inline-block;
+    width: 100%;
+    border-color: #ff6600;
+    border-radius: 6px;
+    border-style: solid;
+    border-width: 3px;
+    background-color: #ff6600;
+    color: #ffffff;
+    cursor: pointer;
+    font-family: sans-serif;
+    font-size: 1rem;
+    font-weight: 600;
+    padding-block: 12px;
+    padding-inline: 24px;
+    text-align: center;
+    text-decoration: none;
+    transition: all 0.15s linear;
+    white-space: normal !important;
+
+    &:hover,
+    &:focus {
+      border-color: #cc5200;
+      background-color: #cc5200;
+      color: #ffffff;
+      text-decoration: none;
+    }
+  }
+
+  /* International phone field layout */
+  :global(.hs-input.hs-fieldtype-intl-phone) {
+    display: flex;
+    width: 100% !important;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 8px;
+
+    > :global(input) {
+      flex: 1 0 calc(70% - 8px) !important;
+    }
+
+    > :global(select) {
+      flex: 1 0 30% !important;
+    }
+
+    @media (width <= 600px) {
+      display: flex;
+      width: 100%;
+      flex-direction: column;
+      gap: 8px;
+
+      > :global(select),
+      > :global(input) {
+        min-width: 100%;
+        flex: 1 1 100%;
+      }
+
+      > :global(select) {
+        padding-inline: 16px;
+      }
+    }
+  }
+
+
+  :global(.grecaptcha-badge) {
+    margin-block: 0 !important;
+    margin-inline: auto !important;
+  }
+}

package/components/componentLibrary/Form/islands/v4Form.module.css

@@ -0,0 +1,95 @@
+.v4FormStyles {
+  --hsf-global__font-size: 16px;
+  --hsf-global__color: #1a0033;
+  --hsf-global-error__color: #ff0000;
+
+  --hsf-background__background-color: #ffe0f0;
+  --hsf-background__padding: 32px;
+  --hsf-background__border-style: solid;
+  --hsf-background__border-color: #ff00ff;
+  --hsf-background__border-radius: 8px;
+  --hsf-background__border-width: 4px;
+
+  --hsf-heading__font-family: inherit;
+  --hsf-heading__color: #9900cc;
+  --hsf-heading__text-shadow: 1px 1px 2px #ff00ff;
+  --hsf-richtext__font-family: inherit;
+  --hsf-richtext__font-size: 14px;
+  --hsf-richtext__color: #9900cc;
+
+  --hsf-field-label__font-family: inherit;
+  --hsf-field-label__font-size: 0.875rem;
+  --hsf-field-label__color: #cc0066;
+  --hsf-field-label-requiredindicator__color: #ff0000;
+  --hsf-field-description__font-family: inherit;
+  --hsf-field-description__color: #6600cc;
+  --hsf-field-footer__font-family: inherit;
+  --hsf-field-footer__color: #6600cc;
+  --hsf-erroralert__font-family: inherit;
+  --hsf-erroralert__color: #ff0000;
+
+  --hsf-field-input__font-family: inherit;
+  --hsf-field-input__background-color: #e0ffff;
+  --hsf-field-input__placeholder-color: #ff6600;
+  --hsf-field-input__border-color: #00ccff;
+  --hsf-field-input__border-width: 3px;
+  --hsf-field-input__border-style: solid;
+  --hsf-field-input__border-radius: 6px;
+  --hsf-field-input__padding: 12px 16px;
+  --hsf-field-input__color: #003300;
+
+  --hsf-field-textarea__font-family: inherit;
+  --hsf-field-textarea__color: #003300;
+  --hsf-field-textarea__background-color: #e0ffff;
+  --hsf-field-textarea__border-color: #00ccff;
+  --hsf-field-textarea__border-style: solid;
+  --hsf-field-textarea__border-radius: 6px;
+  --hsf-field-textarea__padding: 12px 16px;
+
+  --hsf-field-checkbox__padding: 12px;
+  --hsf-field-checkbox__background-color: #ffffff;
+  --hsf-field-checkbox__color: #00cc00;
+  --hsf-field-checkbox__border-color: #00ccff;
+  --hsf-field-checkbox__border-width: 2px;
+  --hsf-field-checkbox__border-style: solid;
+
+  --hsf-field-radio__padding: 12px;
+  --hsf-field-radio__background-color: #ffffff;
+  --hsf-field-radio__color: #00cc00;
+  --hsf-field-radio__border-color: #00ccff;
+  --hsf-field-radio__border-width: 2px;
+  --hsf-field-radio__border-style: solid;
+
+  --hsf-row__vertical-spacing: 24px;
+  --hsf-row__horizontal-spacing: 16px;
+  --hsf-module__vertical-spacing: 16px;
+
+  --hsf-button__width: 100%;
+  --hsf-button__font-family: inherit;
+  --hsf-button__font-size: 1rem;
+  --hsf-button__font-weight: 700;
+  --hsf-button__color: #ffffff;
+  --hsf-button__background-color: #ff6600;
+  --hsf-button__background-image: none;
+  --hsf-button__border-radius: 6px;
+  --hsf-button__border-width: 3px;
+  --hsf-button__border-style: solid;
+  --hsf-button__border-color: #ff6600;
+  --hsf-button__padding: 12px 24px;
+  --hsf-button__box-shadow: 0 4px 8px rgba(255, 102, 0, 0.4);
+  --hsf-button--hover__color: #ffffff;
+  --hsf-button--hover__background-color: #cc5200;
+  --hsf-button--hover__border-color: #cc5200;
+  --hsf-button--focus__color: #ffffff;
+  --hsf-button--focus__background-color: #cc5200;
+  --hsf-button--focus__border-color: #ff00ff;
+
+  --hsf-progressbar__font-family: inherit;
+  --hsf-progressbar__font-size: 14px;
+  --hsf-progressbar__color: #ffffff;
+  --hsf-progressbar__background-color: #00cc00;
+  --hsf-progressbar__background: linear-gradient(90deg, #00cc00, #00ffcc);
+  --hsf-progressbar__border-color: #009900;
+  --hsf-progressbar__border-style: solid;
+  --hsf-progressbar__border-width: 2px;
+}

package/components/componentLibrary/Form/llm.txt

@@ -0,0 +1,184 @@
+# Form Component
+
+A form component that dynamically renders either a v4 form or a legacy form based on the form field's `embed_version` value. The component uses JavaScript islands to load and embed HubSpot forms client-side.
+
+## Import path
+```tsx
+import Form from '@hubspot/cms-component-library/Form';
+```
+
+## Purpose
+
+The Form component provides a unified interface for embedding HubSpot forms in CMS pages. It automatically determines whether to render a v4 form (using the new embed SDK) or a legacy form (using the classic `hbspt.forms.create` API) based on the `embed_version` returned by the form field. This allows module authors to simply pass the form field value through without needing to know which form version they're working with.
+
+## Component Structure
+
+```
+Form/
+├── index.tsx                          # Main component with version resolution logic
+├── types.ts                           # TypeScript type definitions (discriminated union)
+├── ContentFields.tsx                  # HubSpot field definitions for content
+├── StyleFields.tsx                    # HubSpot field definitions for styling
+├── islands/
+│   ├── FormIsland.tsx                 # V4 form island (embed SDK)
+│   ├── LegacyFormIsland.tsx           # Legacy form island (hbspt.forms.create)
+│   ├── index.module.scss              # Shared form styles
+│   ├── v4Form.module.css              # V4 form CSS variables
+│   └── legacyForm.module.css          # Legacy form styles
+└── llm.txt
+```
+
+## Props
+
+The Form component uses a discriminated union — you must use one of two prop patterns:
+
+### With form field (preferred)
+```tsx
+{
+  formField: typeof FormFieldDefaults;  // The form field value from module props
+}
+```
+
+### With explicit form ID and version
+```tsx
+{
+  formId: string;                        // The HubSpot form ID
+  formVersion: 'v4' | 'v3' | 'v2' | ''; // The form embed version
+}
+```
+
+## Dynamic Version Resolution
+
+When using the `formField` prop, the component reads `formField.embed_version` to decide which island to render:
+- If `embed_version === 'v4'` → renders `FormIsland` (v4 embed SDK)
+- Otherwise (missing or any other value) → renders `LegacyFormIsland` (classic embed)
+
+When using `formId` + `formVersion` props, the `formVersion` value is used directly.
+
+## Usage Examples
+
+### Using form field (recommended)
+
+This is the preferred approach. Pass the form field value directly and let the component resolve the version automatically.
+
+Module file:
+```tsx
+import Form from '@hubspot/cms-component-library/Form';
+import { FormFieldDefaults } from '@hubspot/cms-components/fields';
+
+type ComponentProps = {
+  form: typeof FormFieldDefaults;
+};
+
+export const Component = (props: ComponentProps) => {
+  return <Form formField={props.form} />;
+};
+```
+
+### Using explicit form ID and version
+
+Use this when you have a form ID from a source other than a form field.
+
+```tsx
+import Form from '@hubspot/cms-component-library/Form';
+
+<Form formId="53e5b258-4526-4012-9274-8bbe23ab2d09" formVersion="v4" />
+```
+
+## HubSpot CMS Integration
+
+### Field Definitions
+
+The Form component provides field definitions for easy integration with HubSpot CMS modules.
+
+#### ContentFields
+
+Configurable props for customizing field labels, names, and defaults:
+
+```tsx
+<Form.ContentFields
+  formIdLabel="Form"
+  formIdName="form"
+  formIdDefault={{}}
+/>
+```
+
+**Fields:**
+- `form`: FormField that allows the user to select a HubSpot form in the editor. Supports embed versions v4, v3, and v2.
+
+**ContentFields Props:**
+```tsx
+{
+  formIdLabel?: string;              // Label shown in the editor (default: "Form")
+  formIdName?: string;               // Field name (default: "form")
+  formIdDefault?: FormFieldDefaults; // Default field value (default: {})
+}
+```
+
+#### StyleFields
+
+Configurable props for variant selection:
+
+```tsx
+<Form.StyleFields
+  formVariantLabel="Form variant"
+  formVariantName="formVariant"
+  formVariantDefault={{ variant_name: 'primaryForm' }}
+/>
+```
+
+**Fields:**
+- `formVariant`: VariantSelectionField for selecting a form style variant from the `forms` variant definition.
+
+**StyleFields Props:**
+```tsx
+{
+  formVariantLabel?: string;                     // Label shown in the editor (default: "Form variant")
+  formVariantName?: string;                      // Field name (default: "formVariant")
+  formVariantDefault?: { variant_name: string }; // Default variant (default: { variant_name: 'primaryForm' })
+}
+```
+
+### Module Usage Example
+
+```tsx
+// Component file (index.tsx)
+import Form from '@hubspot/cms-component-library/Form';
+import { FormFieldDefaults } from '@hubspot/cms-components/fields';
+
+type ComponentProps = {
+  form: typeof FormFieldDefaults;
+};
+
+export const Component = (props: ComponentProps) => {
+  return <Form formField={props.form} />;
+};
+
+// Fields file (fields.tsx)
+import { ModuleFields, FieldGroup } from '@hubspot/cms-components/fields';
+import Form from '@hubspot/cms-component-library/Form';
+
+export const fields = (
+  <ModuleFields>
+    <Form.ContentFields />
+    <FieldGroup label="Design" name="groupDesign" tab="STYLE">
+      <Form.StyleFields />
+    </FieldGroup>
+  </ModuleFields>
+);
+```
+
+## Islands
+
+The Form component renders as a JavaScript island. Both form types require client-side JavaScript:
+
+- **FormIsland (v4)**: Loads the v4 embed SDK script (`js.hsforms.net/forms/embed/developer/{portalId}.js`) and renders a `div` with `data-form-id` and `data-portal-id` attributes.
+- **LegacyFormIsland**: Loads the legacy embed script (`js.hsforms.net/forms/embed/v2.js`) and calls `window.hbspt.forms.create()` to render the form into a target container.
+
+Both islands automatically resolve the portal ID and environment (QA vs prod) from the CMS context.
+
+## Best Practices
+
+- **Prefer `formField` over `formId` + `formVersion`**: Passing the form field value directly ensures the version is always correct and keeps the module code simple.
+- **Form version is determined by the form itself**: The `embed_version` property on the form field value is set by HubSpot based on the form's configuration. Module authors should not hardcode a version.
+- **Styling via variant definitions**: Use `Form.StyleFields` with variant definitions to allow theme-level form styling rather than hardcoding CSS values.

package/components/componentLibrary/Form/types.ts

@@ -19,3 +19,9 @@ export type ContentFieldsProps = {
   formIdName?: string;
   formIdDefault?: typeof FormFieldDefaults;
 };
+
+export type StyleFieldsProps = {
+  formVariantLabel?: string;
+  formVariantName?: string;
+  formVariantDefault?: { variant_name: string };
+};

package/components/componentLibrary/Link/ContentFields.tsx

@@ -1,7 +1,7 @@
 import { LinkField } from '@hubspot/cms-components/fields';
 import { ContentFieldsProps } from './types.js';
 
-const ContentFields = ({
+const ContentFields = <TLinkName extends string = 'link'>({
   linkLabel = 'Link',
   linkName = 'link',
   linkDefault = {
@@ -12,7 +12,7 @@ const ContentFields = ({
     },
   },
   fieldVisibility,
-}: ContentFieldsProps) => {
+}: ContentFieldsProps<TLinkName>) => {
   return (
     <LinkField
       label={linkLabel}

package/components/componentLibrary/Link/StyleFields.tsx

@@ -1,25 +1,18 @@
-import { ChoiceField } from '@hubspot/cms-components/fields';
+import { VariantSelectionField } from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
-// !todo: may not need later, but keeping for now in case we have variant system for links
 const StyleFields = ({
-  linkVariantLabel = 'Link variant',
-  linkVariantName = 'linkVariant',
-  linkVariantDefault = 'primary',
+  variantLabel = 'Link variant',
+  variantName = 'linkVariant',
+  variantDefault = { variant_name: 'primaryLink' },
 }: StyleFieldsProps) => {
   return (
-    <>
-      <ChoiceField
-        label={linkVariantLabel}
-        name={linkVariantName}
-        choices={[
-          ['primary', 'Primary'],
-          ['secondary', 'Secondary'],
-          ['tertiary', 'Tertiary'],
-        ]}
-        default={linkVariantDefault}
-      />
-    </>
+    <VariantSelectionField
+      label={variantLabel}
+      name={variantName}
+      variantDefinitionName="link"
+      default={variantDefault}
+    />
   );
 };
 

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

@@ -1,21 +1,21 @@
 .link {
-  display: var(--hscl-link-display, inline-block);
-  color: var(--hscl-link-color);
-  text-decoration: var(--hscl-link-textDecoration, underline);
+  display: inline-block;
+  color: var(--hs-link-color);
+  text-decoration: var(--hs-link-textDecoration);
   cursor: pointer;
 
   &:hover {
-    color: var(--hscl-link-color-hover);
-    text-decoration: var(--hscl-link-textDecoration-hover, underline);
+    color: var(--hs-link-color-hover);
+    text-decoration: var(--hs-link-textDecoration-hover);
   }
 
   &:focus-visible {
-    outline: var(--hscl-link-outlineWidth-focus, 2px) solid var(--hscl-link-outlineColor-focus, currentColor);
-    outline-offset: var(--hscl-link-outlineOffset-focus, 2px);
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
   }
 
   &:active {
-    color: var(--hscl-link-color-active, var(--hscl-link-color));
-    text-decoration: var(--hscl-link-textDecoration-active, var(--hscl-link-textDecoration, underline));
+    color: var(--hs-link-color-active, var(--hs-link-color));
+    text-decoration: var(--hs-link-textDecoration-active, var(--hs-link-textDecoration));
   }
 }

package/components/componentLibrary/Link/index.tsx

@@ -2,7 +2,6 @@ import styles from './index.module.scss';
 import ContentFields from './ContentFields.js';
 import StyleFields from './StyleFields.js';
 import cx from '../utils/classname.js';
-import type { CSSVariables } from '../utils/types.js';
 import { LinkProps, BaseLinkProps, LinkHTMLProps } from './types.js';
 import {
   getLinkRel,
@@ -32,7 +31,7 @@ const getLinkValues = (props: Omit<LinkProps, keyof BaseLinkProps>) => {
 };
 
 const LinkComponent = ({
-  variant = 'primary',
+  variant = 'primaryLink',
   className = '',
   style = {},
   children,
@@ -43,18 +42,14 @@ const LinkComponent = ({
   const defaultClasses = styles.link;
   const combinedClasses = cx(defaultClasses, className);
 
-  const cssVariables: CSSVariables = {
-    '--hscl-link-color': `var(--hscl-link-color-${variant})`,
-    '--hscl-link-color-hover': `var(--hscl-link-color-hover-${variant})`,
-  };
-
   return (
     <a
       className={combinedClasses}
-      style={{ ...cssVariables, ...style }}
+      style={style}
       href={href}
       target={target}
       rel={rel}
+      data-link-variant={variant}
       {...anchorProps}
     >
       {children}