@hubspot/cms-component-library 0.3.8 → 0.3.10

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

@@ -0,0 +1,45 @@
+import Text from '../../Text/index.js';
+import styles from './index.module.scss';
+import cx from '../../utils/classname.js';
+import { ChevronIcon, PlusIcon, MinusIcon, CaretIcon } from './icons.js';
+import type { AccordionTitleProps } from './types.js';
+
+const AccordionTitleBase = ({
+  icon = 'chevron',
+  fieldPath,
+  className = '',
+  style = {},
+  children,
+}: AccordionTitleProps) => {
+  const combinedClasses = cx(styles.accordionTitle, className);
+
+  const renderIcon = () => {
+    if (icon === 'chevron') return <ChevronIcon />;
+
+    if (icon === 'plus') {
+      return (
+        <>
+          <PlusIcon />
+          <MinusIcon />
+        </>
+      );
+    }
+
+    if (icon === 'caret') return <CaretIcon />;
+
+    return null;
+  };
+
+  return (
+    <summary className={combinedClasses} style={style}>
+      {fieldPath ? (
+        <Text fieldPath={fieldPath} className={styles.accordionTitleText} />
+      ) : (
+        <span className={styles.accordionTitleText}>{children}</span>
+      )}
+      {renderIcon()}
+    </summary>
+  );
+};
+
+export default AccordionTitleBase;

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

@@ -1,10 +1,10 @@
-import Text from '../../Text/index.js';
-import styles from './index.module.scss';
+import { useEditorVariableChecks, Island } from '@hubspot/cms-components';
+// @ts-expect-error -- ?island not typed
+import AccordionTitleIslandModule from './islands/AccordionTitleIsland.js?island';
 import ContentFields from './ContentFields.js';
 import StyleFields from './StyleFields.js';
-import cx from '../../utils/classname.js';
 import { AccordionTitleProps } from './types.js';
-import { ChevronIcon, PlusIcon, MinusIcon, CaretIcon } from './icons.js';
+import AccordionTitleBase from './AccordionTitleBase.js';
 
 const AccordionTitleComponent = ({
   icon = 'chevron',
@@ -13,34 +13,21 @@ const AccordionTitleComponent = ({
   style = {},
   children,
 }: AccordionTitleProps) => {
-  const combinedClasses = cx(styles.accordionTitle, className);
-
-  const renderIcon = () => {
-    if (icon === 'chevron') return <ChevronIcon />;
-
-    if (icon === 'plus') {
-      return (
-        <>
-          <PlusIcon />
-          <MinusIcon />
-        </>
-      );
-    }
-
-    if (icon === 'caret') return <CaretIcon />;
-
-    return null;
-  };
+  const editorChecks = useEditorVariableChecks();
+  const isInEditor = editorChecks.is_in_editor && !!fieldPath;
 
   return (
-    <summary className={combinedClasses} style={style}>
-      {fieldPath ? (
-        <Text fieldPath={fieldPath} className={styles.accordionTitleText} />
-      ) : (
-        <span className={styles.accordionTitleText}>{children}</span>
-      )}
-      {renderIcon()}
-    </summary>
+    <>
+      <AccordionTitleBase
+        icon={icon}
+        fieldPath={fieldPath}
+        className={className}
+        style={style}
+      >
+        {children}
+      </AccordionTitleBase>
+      {isInEditor && <Island module={AccordionTitleIslandModule} />}
+    </>
   );
 };
 

package/components/componentLibrary/Accordion/AccordionTitle/islands/AccordionTitleIsland.tsx

@@ -0,0 +1,29 @@
+import { useEffect, useRef } from 'react';
+
+const AccordionTitleIsland = () => {
+  const markerRef = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    const marker = markerRef.current;
+    if (!marker) return;
+
+    const details = marker.closest('details');
+    const summary = details?.querySelector('summary');
+    if (!summary) return;
+
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      const isIconClick = target.closest('svg');
+      if (!isIconClick) {
+        e.preventDefault();
+      }
+    };
+
+    summary.addEventListener('click', handleClick);
+    return () => summary.removeEventListener('click', handleClick);
+  }, []);
+
+  return <span ref={markerRef} style={{ display: 'none' }} />;
+};
+
+export default AccordionTitleIsland;

package/components/componentLibrary/Button/StyleFields.tsx

@@ -1,10 +1,14 @@
-import { ChoiceField, Visibility } from '@hubspot/cms-components/fields';
+import {
+  ChoiceField,
+  VariantSelectionField,
+  Visibility,
+} from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
 const StyleFields = ({
   buttonVariantLabel = 'Button variant',
   buttonVariantName = 'buttonVariant',
-  buttonVariantDefault = 'primary',
+  buttonVariantDefault = { variant_name: 'primaryButton' },
   buttonIconPositionLabel = 'Icon position',
   buttonIconPositionName = 'buttonIconPosition',
   buttonIconPositionDefault = 'right',
@@ -18,14 +22,10 @@ const StyleFields = ({
 
   return (
     <>
-      <ChoiceField
+      <VariantSelectionField
         label={buttonVariantLabel}
         name={buttonVariantName}
-        choices={[
-          ['primary', 'Primary'],
-          ['secondary', 'Secondary'],
-          ['tertiary', 'Tertiary'],
-        ]}
+        variantDefinitionName="button"
         default={buttonVariantDefault}
       />
       <ChoiceField

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

@@ -1,48 +1,45 @@
-// CSS variables that can be mapped to theme settings
+// CSS variables provided via theme settings variant system (scoped via data-buttons-variant)
 .button {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
-  text-decoration: none;
-  gap: var(--hscl-button-gap, 8px);
-  background-color: var(--hscl-button-backgroundColor);
-  color: var(--hscl-button-color);
-  padding: var(--hscl-button-paddingBlock) var(--hscl-button-paddingInline);
-  border-radius: var(--hscl-button-borderRadius);
-  border: var(--hscl-button-borderWidth) solid var(--hscl-button-borderColor);
-  font-size: var(--hscl-button-fontSize);
-  font-weight: var(--hscl-button-fontWeight);
+  gap: 8px;
+  background-color: var(--hs-button-backgroundColor);
+  color: var(--hs-button-color);
+  padding: 12px 24px;
+  border-radius: var(--hs-button-borderRadius);
+  border: var(--hs-button-border);
+  font-size: var(--hs-button-fontSize);
+  font-family: var(--hs-button-fontFamily);
+  font-style: var(--hs-button-fontStyle);
+  font-weight: var(--hs-button-fontWeight);
+  text-decoration: var(--hs-button-textDecoration);
   cursor: pointer;
   transition: all 0.2s ease;
-  text-decoration: none;
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
   }
 
   &:hover {
-    background-color: var(--hscl-button-backgroundColor-hover, var(--hscl-button-backgroundColor));
-    color: var(--hscl-button-color-hover, var(--hscl-button-color));
-    border-width: var(--hscl-button-borderWidth-hover, var(--hscl-button-borderWidth));
-    border-color: var(--hscl-button-borderColor-hover, var(--hscl-button-borderColor));
-    text-decoration: none;
+    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));
   }
 
   &:focus-visible {
-    background-color: var(--hscl-button-backgroundColor-focus, var(--hscl-button-backgroundColor));
-    color: var(--hscl-button-color-focus, var(--hscl-button-color));
-    border-width: var(--hscl-button-borderWidth-focus, var(--hscl-button-borderWidth));
-    border-color: var(--hscl-button-borderColor-focus, var(--hscl-button-borderColor));
-    outline: var(--hscl-button-outlineWidth-focus, 2px) solid var(--hscl-button-outlineColor-focus, currentColor);
-    outline-offset: var(--hscl-button-outlineOffset-focus, 2px);
+    background-color: var(--hs-button-backgroundColor-focus, var(--hs-button-backgroundColor));
+    color: var(--hs-button-color-focus, var(--hs-button-color));
+    border: var(--hs-button-border-focus, var(--hs-button-border));
+    outline: 2px solid;
+    outline-offset: 2px;
   }
 
   &:active {
-    background-color: var(--hscl-button-backgroundColor-active, var(--hscl-button-backgroundColor));
-    color: var(--hscl-button-color-active, var(--hscl-button-color));
-    border-width: var(--hscl-button-borderWidth-active, var(--hscl-button-borderWidth));
-    border-color: var(--hscl-button-borderColor-active, var(--hscl-button-borderColor));
+    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));
   }
 
   &:disabled {
@@ -54,6 +51,6 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    fill: var(--hscl-button-icon-fill);
+    fill: currentColor;
   }
 }

package/components/componentLibrary/Button/index.tsx

@@ -13,16 +13,16 @@ import {
 
 const ButtonComponent = ({
   buttonType = 'link',
-  variant = 'primary',
+  variant = 'primaryButton',
   className = '',
   style = {},
   ...rest
 }: ButtonProps) => {
-  const variantClass = styles[`hscl-button-${variant}`]; // !todo: not used atm but keeping for when we need to add variant system.
-  const defaultClasses = cx(styles.button, variantClass);
+  const defaultClasses = cx(styles.button, className);
   const sharedProps = {
-    className: cx(defaultClasses, className),
+    className: defaultClasses,
     style: style,
+    'data-button-variant': variant,
   };
 
   const RenderWithIcon = ({

package/components/componentLibrary/Button/llm.txt

@@ -37,7 +37,7 @@ Button/
 **Base Props (shared by both types):**
 ```tsx
 {
-  variant?: 'primary' | 'secondary' | 'tertiary';  // Visual style variant
+  variant?: 'primaryButton' | 'secondaryButton' | 'tertiaryButton' | 'accentButton';  // Visual style variant (connected to theme settings)
   className?: string;                               // Additional CSS classes
   style?: React.CSSProperties;                      // Inline styles
   children?: React.ReactNode;                       // Button text/content
@@ -108,7 +108,7 @@ import { Island } from '@hubspot/cms-components'
 ```tsx
 <Button
   buttonType="link"
-  variant="primary"
+  variant="primaryButton"
   href="https://www.hubspot.com"
   target="_self"
 >
@@ -121,7 +121,7 @@ import { Island } from '@hubspot/cms-components'
 ```tsx
 <Button
   buttonType="link"
-  variant="primary"
+  variant="primaryButton"
   href="https://www.hubspot.com"
   target="_blank"
   rel="noopener noreferrer"
@@ -135,7 +135,7 @@ import { Island } from '@hubspot/cms-components'
 ```tsx
 <Button
   buttonType="button"
-  variant="primary"
+  variant="primaryButton"
   onClick={handleClick}
   showIcon={true}
   iconFieldPath="icon"
@@ -152,7 +152,7 @@ import { Island } from '@hubspot/cms-components'
 ```tsx
 <Button
   buttonType="link"
-  variant="secondary"
+  variant="secondaryButton"
   href="/back"
   showIcon={true}
   iconFieldPath="icon"
@@ -170,7 +170,7 @@ import { Island } from '@hubspot/cms-components'
 ```tsx
 <Button
   buttonType="button"
-  variant="primary"
+  variant="primaryButton"
   disabled={true}
   onClick={handleClick}
 >
@@ -183,7 +183,7 @@ import { Island } from '@hubspot/cms-components'
 ```tsx
 <Button
   buttonType="link"
-  variant="primary"
+  variant="primaryButton"
   href="/custom"
   className="custom-button-class"
   style={{ maxWidth: '300px' }}
@@ -240,7 +240,7 @@ Configurable props for variant and icon position:
 <Button.StyleFields
   buttonVariantLabel="Button variant"
   buttonVariantName="buttonVariant"
-  buttonVariantDefault="primary"
+  buttonVariantDefault={{ variant_name: 'primaryButton' }}
   buttonIconPositionLabel="Icon position"
   buttonIconPositionName="buttonIconPosition"
   buttonIconPositionDefault="right"
@@ -248,7 +248,7 @@ Configurable props for variant and icon position:
 ```
 
 **Fields:**
-- `buttonVariant`: ChoiceField for selecting visual style (primary, secondary, tertiary)
+- `buttonVariant`: VariantSelectionField connected to theme settings (primaryButton, secondaryButton, tertiaryButton, accentButton)
 - `buttonIconPosition`: ChoiceField for selecting icon placement (left, right). This field has a hardcoded visibility rule — it is only shown when the icon toggle is enabled (`iconComponentShowIcon === true`), which corresponds to the `BooleanField` id hardcoded in `Icon.ContentFields`.
 
 ### Module Usage Example
@@ -276,57 +276,44 @@ export default function CTAModule({ fieldValues }) {
 
 ## Styling
 
-### CSS Variables
-
-The Button component uses CSS variables for theming and customization:
-
-**Base Styles:**
-- `--hscl-button-gap`: Space between text and icon (default: 8px)
-- `--hscl-button-backgroundColor`: Background color
-- `--hscl-button-color`: Text color
-- `--hscl-button-paddingBlock`: Vertical padding
-- `--hscl-button-paddingInline`: Horizontal padding
-- `--hscl-button-borderRadius`: Border radius
-- `--hscl-button-borderWidth`: Border width
-- `--hscl-button-borderColor`: Border color
-- `--hscl-button-fontSize`: Font size
-- `--hscl-button-fontWeight`: Font weight
-
-**Hover States:**
-- `--hscl-button-backgroundColor-hover`: Hover background color
-- `--hscl-button-color-hover`: Hover text color
-- `--hscl-button-borderWidth-hover`: Hover border width
-- `--hscl-button-borderColor-hover`: Hover border color
-
-**Focus States:**
-- `--hscl-button-backgroundColor-focus`: Focus background color
-- `--hscl-button-color-focus`: Focus text color
-- `--hscl-button-borderWidth-focus`: Focus border width
-- `--hscl-button-borderColor-focus`: Focus border color
-- `--hscl-button-outlineWidth-focus`: Focus outline width
-- `--hscl-button-outlineColor-focus`: Focus outline color
-- `--hscl-button-outlineOffset-focus`: Focus outline offset
-
-**Icon:**
-- `--hscl-button-icon-fill`: Icon fill color
-
-### Custom Styling Example
+### Theme CSS Variables
 
-```tsx
-<Button
-  buttonType="button"
-  variant="primary"
-  style={{
-    '--hscl-button-backgroundColor': '#FF7A59',
-    '--hscl-button-color': '#FFFFFF',
-    '--hscl-button-paddingBlock': '12px',
-    '--hscl-button-paddingInline': '24px',
-    '--hscl-button-borderRadius': '8px',
-  }}
->
-  Custom Colors
-</Button>
-```
+The Button component is themed via `--hs-button-*` CSS variables, which are provided by the theme settings variant system (scoped via the variant prop and `data-buttons-variant` attribute).
+
+**Base Styles (from theme):**
+- `--hs-button-backgroundColor`: Background color
+- `--hs-button-color`: Text color
+- `--hs-button-borderRadius`: Border radius
+- `--hs-button-border`: Border shorthand
+- `--hs-button-fontSize`: Font size
+- `--hs-button-fontFamily`: Font family
+- `--hs-button-fontStyle`: Font style
+- `--hs-button-fontWeight`: Font weight
+- `--hs-button-textDecoration`: Text decoration
+
+**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)
+
+**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)
+
+**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)
+
+### Hardcoded Layout Values
+
+The following properties use fixed values and are not configurable via CSS variables:
+
+- **Gap:** 8px (space between text and icon)
+- **Padding:** 12px vertical, 24px horizontal
+- **Focus outline:** 2px solid currentColor, offset 2px
+- **Icon fill:** currentColor
 
 ## Accessibility
 
@@ -359,7 +346,7 @@ The Button component follows accessibility best practices:
 - **Icon purpose**: Use `SEMANTIC` when the icon adds meaning, `DECORATIVE` when it's purely visual
 - **Disabled state**: Only use with `buttonType="button"`, not applicable to links
 - **CSS Variables**: Override design tokens using CSS variables rather than hardcoding values
-- **Variant system**: Currently variants are passed as props but full theming implementation is pending
+- **Variant system**: Variants are connected to theme settings via `VariantSelectionField` and `data-variant-name` attribute. CSS variables are scoped automatically by the ContentUILib variant system.
 
 ## Common Patterns
 
@@ -368,7 +355,7 @@ The Button component follows accessibility best practices:
 ```tsx
 <Button
   buttonType="link"
-  variant="primary"
+  variant="primaryButton"
   href="/signup"
   showIcon={true}
   iconFieldPath="icon"
@@ -383,7 +370,7 @@ The Button component follows accessibility best practices:
 ```tsx
 <Button
   buttonType="button"
-  variant="primary"
+  variant="primaryButton"
   onClick={handleSubmit}
   disabled={isSubmitting}
 >
@@ -396,7 +383,7 @@ The Button component follows accessibility best practices:
 ```tsx
 <Button
   buttonType="link"
-  variant="secondary"
+  variant="secondaryButton"
   href="/dashboard"
   showIcon={true}
   iconFieldPath="icon"
@@ -411,7 +398,7 @@ The Button component follows accessibility best practices:
 ```tsx
 <Button
   buttonType="link"
-  variant="tertiary"
+  variant="tertiaryButton"
   href="https://docs.hubspot.com"
   target="_blank"
   rel="noopener noreferrer"

package/components/componentLibrary/Button/stories/Button.AsButton.stories.tsx

@@ -26,7 +26,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    variant: 'primary',
+    variant: 'primaryButton',
     children: 'Click me',
     onClick: () => alert('Button clicked!'),
   },
@@ -34,7 +34,7 @@ export const Default: Story = {
 
 export const WithIcon: Story = {
   args: {
-    variant: 'primary',
+    variant: 'primaryButton',
     children: 'Click me',
     onClick: () => alert('Button clicked!'),
     showIcon: true,

package/components/componentLibrary/Button/stories/Button.AsLink.stories.tsx

@@ -26,7 +26,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   args: {
-    variant: 'primary',
+    variant: 'primaryButton',
     children: 'Click me',
     href: 'https://www.hubspot.com',
   },
@@ -34,7 +34,7 @@ export const Default: Story = {
 
 export const WithIcon: Story = {
   args: {
-    variant: 'primary',
+    variant: 'primaryButton',
     children: 'Click me',
     href: 'https://www.hubspot.com',
     showIcon: true,

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

@@ -1,25 +1,21 @@
 .buttonContainer {
-  padding: '20px';
-  --hscl-button-gap: 8px;
-  --hscl-button-backgroundColor: #0066cc;
-  --hscl-button-color: #ffffff;
-  --hscl-button-paddingBlock: 10px;
-  --hscl-button-paddingInline: 20px;
-  --hscl-button-borderRadius: 4px;
-  --hscl-button-borderWidth: 1px;
-  --hscl-button-borderColor: transparent;
-  --hscl-button-fontSize: 14px;
-  --hscl-button-fontWeight: 500;
-  --hscl-button-backgroundColor-hover: #0052a3;
-  --hscl-button-color-hover: #ffffff;
-  --hscl-button-borderWidth-hover: 1px;
-  --hscl-button-borderColor-hover: transparent;
-  --hscl-button-backgroundColor-focus: #0066cc;
-  --hscl-button-color-focus: #ffffff;
-  --hscl-button-borderWidth-focus: 1px;
-  --hscl-button-borderColor-focus: transparent;
-  --hscl-button-outlineWidth-focus: 2px;
-  --hscl-button-outlineColor-focus: #0066cc;
-  --hscl-button-outlineOffset-focus: 2px;
-  --hscl-button-icon-fill: currentColor;
+  padding: 20px;
+  --hs-button-backgroundColor: #0066cc;
+  --hs-button-color: #ffffff;
+  --hs-button-borderRadius: 4px;
+  --hs-button-border: 1px solid transparent;
+  --hs-button-fontSize: 14px;
+  --hs-button-fontFamily: inherit;
+  --hs-button-fontStyle: normal;
+  --hs-button-fontWeight: 500;
+  --hs-button-textDecoration: none;
+  --hs-button-backgroundColor-hover: #0052a3;
+  --hs-button-color-hover: #ffffff;
+  --hs-button-border-hover: 1px solid transparent;
+  --hs-button-backgroundColor-focus: #0066cc;
+  --hs-button-color-focus: #ffffff;
+  --hs-button-border-focus: 1px solid transparent;
+  --hs-button-backgroundColor-active: #004080;
+  --hs-button-color-active: #ffffff;
+  --hs-button-border-active: 1px solid transparent;
 }

package/components/componentLibrary/Button/types.ts

@@ -8,7 +8,7 @@ export type IconPositionHorizontal = 'left' | 'right';
 
 // Base props shared by all variants
 export type BaseButtonProps = {
-  variant?: 'primary' | 'secondary' | 'tertiary'; // !todo: not used atm but keeping for when we need to add variant system.
+  variant?: 'primaryButton' | 'secondaryButton' | 'tertiaryButton' | 'accentButton';
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
@@ -57,7 +57,7 @@ export type ContentFieldsProps = Omit<
 export type StyleFieldsProps = {
   buttonVariantLabel?: string;
   buttonVariantName?: string;
-  buttonVariantDefault?: string;
+  buttonVariantDefault?: { variant_name: string };
   buttonIconPositionLabel?: string;
   buttonIconPositionName?: string;
   buttonIconPositionDefault?: IconPositionHorizontal;

package/components/componentLibrary/Card/StyleFields.tsx

@@ -1,22 +1,17 @@
-import { ChoiceField } from '@hubspot/cms-components/fields';
+import { VariantSelectionField } from '@hubspot/cms-components/fields';
 import { StyleFieldsProps } from './types.js';
 
 const StyleFields = ({
-  variantLabel = 'Card Variant',
-  variantName = 'variant',
-  variantDefault = 'elevated',
+  cardVariantLabel = 'Card variant',
+  cardVariantName = 'cardVariant',
+  cardVariantDefault = { variantName: 'cardStyle1' },
 }: StyleFieldsProps) => {
   return (
-    <ChoiceField
-      label={variantLabel}
-      name={variantName}
-      required={true}
-      choices={[
-        ['elevated', 'Elevated (with shadow)'],
-        ['outlined', 'Outlined (with border)'],
-        ['filled', 'Filled (solid background)'],
-      ]}
-      default={variantDefault}
+    <VariantSelectionField
+      label={cardVariantLabel}
+      name={cardVariantName}
+      variantDefinitionName="card"
+      default={cardVariantDefault}
     />
   );
 };

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

@@ -2,13 +2,13 @@
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  padding: var(--hscl-card-padding, 24px);
-  border-radius: var(--hscl-card-borderRadius, 8px);
-  background-color: var(--hscl-card-backgroundColor, #ffffff);
-  box-shadow: var(--hscl-card-boxShadow, none);
-  border: var(--hscl-card-border, none);
+  padding: 24px;
+  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);
 
-  &:hover {
-    box-shadow: var(--hscl-card-boxShadow-hover, var(--hscl-card-boxShadow, none));
+  h1,h2,h3,h4,h5,h6,p,span {
+    color: inherit;
   }
 }