@akad/design-system 1.1.1 → 1.1.3

package/react/src/components/atoms/Chip/Chip.config.d.ts

@@ -0,0 +1,43 @@
+export declare enum ChipColor {
+    Primary = "primary",
+    Secondary = "secondary",
+    Info = "info",
+    Success = "success",
+    Danger = "danger",
+    Warning = "warning",
+    Neutral = "neutral"
+}
+export declare enum ChipVariant {
+    Solid = "solid",
+    Light = "light"
+}
+export declare enum ChipIconPosition {
+    Left = "left",
+    Right = "right"
+}
+export interface ChipColorProps {
+    type: StringConstructor;
+    default: ChipColor;
+    options: ChipColor[];
+}
+export interface ChipVariantProps {
+    type: StringConstructor;
+    default: ChipVariant;
+    options: ChipVariant[];
+}
+export interface ChipIconPositionProps {
+    type: StringConstructor;
+    default: ChipIconPosition;
+    options: ChipIconPosition[];
+}
+export interface ChipConfig {
+    name: string;
+    class: string;
+    props: {
+        color: ChipColorProps;
+        variant: ChipVariantProps;
+        iconPosition: ChipIconPositionProps;
+    };
+}
+declare const chipConfig: ChipConfig;
+export default chipConfig;

package/react/src/components/atoms/Chip/Chip.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { ChipColor, ChipIconPosition, ChipVariant } from './Chip.config';
+
+export interface DsChipProps {
+    label: React.ReactNode;
+    color?: ChipColor;
+    variant?: ChipVariant;
+    icon?: React.ReactNode;
+    iconPosition?: ChipIconPosition;
+    className?: string;
+    title?: string;
+    testId?: string;
+}
+declare const DsChip: React.FC<DsChipProps>;
+export default DsChip;

package/react/src/components/atoms/Chip/Chip.stories.d.ts

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/react';
+import { DsChipProps } from './Chip';
+import { ChipColor, ChipIconPosition, ChipVariant } from './Chip.config';
+
+declare const componentProps: Meta;
+export default componentProps;
+export declare const Default: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsChipProps>;
+    args: {
+        label: string;
+        color: ChipColor;
+        variant: ChipVariant;
+    };
+};
+export declare const WithIconLeft: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsChipProps>;
+    args: {
+        label: string;
+        color: ChipColor;
+        icon: import("react/jsx-runtime").JSX.Element;
+        variant: ChipVariant;
+    };
+};
+export declare const WithIconRight: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsChipProps>;
+    args: {
+        label: string;
+        color: ChipColor;
+        variant: ChipVariant;
+        icon: import("react/jsx-runtime").JSX.Element;
+        iconPosition: ChipIconPosition;
+    };
+};

package/react/src/components/atoms/Chip/Chip.test.d.ts

@@ -0,0 +1 @@
+export {};

package/react/src/components/atoms/Chip/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Chip';
+export * from './Chip.config';
+export { default as chipConfig } from './Chip.config';
+export { default as DsChip } from './Chip';

package/react/src/components/atoms/Radio/Radio.config.d.ts

@@ -0,0 +1,21 @@
+export declare enum RadioVariant {
+    Default = "default",
+    Card = "card"
+}
+export interface RadioConfig {
+    name: string;
+    class: string;
+    props: {
+        variant: {
+            type: StringConstructor;
+            default: RadioVariant;
+            options: RadioVariant[];
+        };
+        fullWidth: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+    };
+}
+declare const radioConfig: RadioConfig;
+export default radioConfig;

package/react/src/components/atoms/Radio/Radio.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+import { RadioVariant } from './Radio.config';
+
+export interface DsRadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'children' | 'className' | 'size'> {
+    variant?: RadioVariant;
+    fullWidth?: boolean;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    className?: string;
+    testId?: string;
+}
+declare const DsRadio: React.ForwardRefExoticComponent<DsRadioProps & React.RefAttributes<HTMLInputElement>>;
+export default DsRadio;

package/react/src/components/atoms/Radio/Radio.stories.d.ts

@@ -0,0 +1,49 @@
+import { Meta } from '@storybook/react';
+import { DsRadioProps } from './Radio';
+import { RadioVariant } from './Radio.config';
+
+declare const meta: Meta<DsRadioProps>;
+export default meta;
+export declare const Default: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsRadioProps>;
+    args: {
+        label: string;
+        name: string;
+        value: string;
+    };
+};
+export declare const WithDescription: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsRadioProps>;
+    args: {
+        label: string;
+        description: string;
+        name: string;
+        value: string;
+    };
+};
+export declare const Disabled: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsRadioProps>;
+    args: {
+        label: string;
+        description: string;
+        disabled: boolean;
+        name: string;
+        value: string;
+    };
+};
+export declare const Card: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsRadioProps>;
+    args: {
+        variant: RadioVariant;
+        label: string;
+        description: string;
+        name: string;
+        value: string;
+    };
+};
+export declare const CardGroupVertical: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};
+export declare const CardGroupHorizontal: {
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

package/react/src/components/atoms/Radio/Radio.test.d.ts

@@ -0,0 +1 @@
+export {};

package/react/src/components/atoms/Radio/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Radio';
+export * from './Radio.config';
+export { default as radioConfig } from './Radio.config';
+export { default as DsRadio } from './Radio';

package/react/src/components/index.d.ts

@@ -2,6 +2,7 @@ export * from './atoms/Button';
 export * from './atoms/Caption';
 export * from './atoms/Card';
 export * from './atoms/Checkbox';
+export * from './atoms/Chip';
 export * from './atoms/Heading';
 export * from './atoms/HorizontalRule';
 export * from './atoms/Icon';
@@ -10,6 +11,7 @@ export * from './atoms/Loading';
 export * from './atoms/Option';
 export * from './atoms/Paragraph';
 export * from './atoms/Progress';
+export * from './atoms/Radio';
 export * from './atoms/Select';
 export * from './atoms/Subtitle';
 export * from './atoms/TextArea';

package/react/src/components/molecules/EditableSelect/EditableSelect.config.d.ts

@@ -77,6 +77,10 @@ export interface EditableSelectOnSelectHandlerProps {
     type: FunctionConstructor;
     default: () => void;
 }
+export interface EditableSelectOnClearHandlerProps {
+    type: FunctionConstructor;
+    default: () => void;
+}
 export interface EditableSelectConfig {
     name: string;
     class: string;
@@ -97,6 +101,7 @@ export interface EditableSelectConfig {
         onBlurHandler: EditableSelectOnBlurHandlerProps;
         onFocusHandler: EditableSelectOnFocusHandlerProps;
         onSelectHandler: EditableSelectOnSelectHandlerProps;
+        onClearHandler: EditableSelectOnClearHandlerProps;
         placeholder: EditableSelectPlaceholderProps;
     };
 }

package/react/src/components/molecules/EditableSelect/EditableSelect.d.ts

@@ -1,7 +1,9 @@
 import { EditableSelectOption } from './EditableSelect.config';
 
 /**
- * DsEditableSelect - A select component with two usage modes:
+ * DsEditableSelect - A combobox-style select component with two usage modes.
+ *
+ * ## Modes
  *
  * **Mode 1: Autocomplete (default)**
  * The user types in the input and the parent component is responsible for
@@ -31,8 +33,66 @@ import { EditableSelectOption } from './EditableSelect.config';
  *   showOptionsOnFocus
  *   onChangeHandler={handleChange}
  *   onSelectHandler={handleSelect}
+ *   onClearHandler={handleClear}
+ * />
+ * ```
+ *
+ * ## Selection lifecycle
+ *
+ * - `onChangeHandler(event)` — fires on every keystroke (both modes). Update
+ *   the displayed text state from `event.target.value`.
+ * - `onSelectHandler(option)` — fires when a selection is committed:
+ *   1. user clicks an option in the dropdown (both modes), OR
+ *   2. (Searchable Dropdown only) user blurs the input with text that matches
+ *      an option's label exactly (case-insensitive, trimmed — auto-select on
+ *      blur).
+ *   Update both the displayed text (to `option.label`) and the form-validated
+ *   value (to `option.value`).
+ * - `onClearHandler()` — **Searchable Dropdown only**. Fires when the
+ *   selection becomes invalid:
+ *   1. user blurs with text that does not match any option, OR
+ *   2. while typing, the value transitions from matching an option to not
+ *      matching (e.g., user appends a character to a previously matched label).
+ *   Clear the form-validated value so subsequent validation sees no selection.
+ *
+ * In Searchable Dropdown mode, on blur with no match the component **also**
+ * dispatches a native `input` event with empty value to force the input
+ * display to clear via your existing `onChangeHandler`. This guarantees the
+ * display does not retain a stale unmatched value, even if `onClearHandler`
+ * is not wired to clear the display.
+ *
+ * Autocomplete mode keeps the legacy contract: blur only fires
+ * `onBlurHandler`; typing only fires `onChangeHandler`. No auto-select, no
+ * clear, no native dispatch.
+ *
+ * ## Highlighted option
+ *
+ * The option whose label equals `value` (case-sensitive, exact) is rendered
+ * with the `--selected` modifier class for visual feedback when the dropdown
+ * reopens after a selection.
+ *
+ * ## Recommended consumer state shape
+ *
+ * Keep two separate state fields — one for what shows in the input, one for
+ * what the form validates:
+ *
+ * ```tsx
+ * const [displayValue, setDisplayValue] = useState('');
+ * const [selectedValue, setSelectedValue] = useState<string | null>(null);
+ *
+ * <DsEditableSelect
+ *   value={displayValue}
+ *   onChangeHandler={(e) => setDisplayValue(e.target.value)}
+ *   onSelectHandler={(opt) => {
+ *     setDisplayValue(opt.label);
+ *     setSelectedValue(opt.value);
+ *   }}
+ *   onClearHandler={() => setSelectedValue(null)}
  * />
  * ```
+ *
+ * Validate `selectedValue`, not `displayValue`. This guarantees that typed-but-
+ * not-selected text is treated as no selection.
  */
 export interface DsEditableSelectProps {
     label?: string;
@@ -43,6 +103,7 @@ export interface DsEditableSelectProps {
     options?: EditableSelectOption[];
     onChangeHandler?: (event: React.ChangeEvent<HTMLInputElement> | React.FormEvent<HTMLInputElement>) => void;
     onSelectHandler?: (selectedOption: object) => void;
+    onClearHandler?: () => void;
     icon?: string;
     noOptionsMessage?: string;
     disabled?: boolean;
@@ -66,7 +127,7 @@ export interface DsEditableSelectProps {
     inputOnKeyDownHandler?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
 }
 declare const DsEditableSelect: {
-    ({ label, name, testId, value, options, size, onChangeHandler, onSelectHandler, icon, noOptionsMessage, disabled, status, onBlurHandler, onFocusHandler, animated, placeholder, loading, showOptionsOnFocus, inputType, inputMin, inputMax, inputTooltip, inputTooltipPosition, inputTooltipPlacement, inputFeedback, inputHasFeedback, inputNoMargin, inputMask, inputOnKeyDownHandler, }: DsEditableSelectProps): import("react/jsx-runtime").JSX.Element;
+    ({ label, name, testId, value, options, size, onChangeHandler, onSelectHandler, onClearHandler, icon, noOptionsMessage, disabled, status, onBlurHandler, onFocusHandler, animated, placeholder, loading, showOptionsOnFocus, inputType, inputMin, inputMax, inputTooltip, inputTooltipPosition, inputTooltipPlacement, inputFeedback, inputHasFeedback, inputNoMargin, inputMask, inputOnKeyDownHandler, }: DsEditableSelectProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export default DsEditableSelect;

package/react/src/components/molecules/Tabs/Tab.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { DsTabProps } from './Tabs';
+import { DsTabRenderProps } from './types';
 
-declare const DsTab: React.FC<DsTabProps>;
+declare const DsTab: React.FC<DsTabRenderProps>;
 export default DsTab;

package/react/src/components/molecules/Tabs/Tabs.config.d.ts

@@ -8,6 +8,10 @@ export declare enum TabsColor {
     Danger = "danger",
     Info = "info"
 }
+export declare enum TabsVariant {
+    Segmented = "segmented",
+    Navigation = "navigation"
+}
 export interface TabsTabsProps {
     type: ArrayConstructor;
     required: boolean;
@@ -29,6 +33,11 @@ export interface TabsOnChangeProps {
     type: FunctionConstructor;
     default: () => void;
 }
+export interface TabsVariantProps {
+    type: StringConstructor;
+    default: TabsVariant;
+    options: TabsVariant[];
+}
 export interface TabsConfig {
     name: string;
     class: string;
@@ -36,6 +45,7 @@ export interface TabsConfig {
         tabs: TabsTabsProps;
         selectedTab: TabsSelectedTabProps;
         color: TabsColorProps;
+        variant: TabsVariantProps;
         className: TabsClassNameProps;
         onChange: TabsOnChangeProps;
     };

package/react/src/components/molecules/Tabs/Tabs.d.ts

@@ -1,22 +1,18 @@
 import { default as React } from 'react';
+import { TabsVariant } from './Tabs.config';
+import { DsTabProps } from './types';
 
-export interface DsTabProps {
-    active?: boolean;
-    className?: string;
-    color?: string;
-    content: React.ReactNode | string;
-    disabled?: boolean;
-    name?: string;
-    index: number;
-    title: React.ReactNode | string;
-    onClick?: (index: number) => void;
-}
+export type { DsTabProps } from './types';
 export interface DsTabsProps {
     tabs: DsTabProps[];
     selectedTab?: number;
     color?: string;
     className?: string;
+    variant?: TabsVariant;
     onChange?: (index: number) => void;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    rootDataTestId?: string;
 }
 declare const DsTabs: React.FC<DsTabsProps>;
 export default DsTabs;

package/react/src/components/molecules/Tabs/Tabs.stories.d.ts

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/react';
 import { DsTabsProps } from './Tabs';
+import { TabsVariant } from './Tabs.config';
 
 declare const componentProps: Meta;
 export default componentProps;
@@ -8,6 +9,7 @@ export declare const Default: {
     args: {
         color: import('../../../main').TabsColor;
         selectedTab: number;
+        variant: TabsVariant;
         tabs: ({
             name: string;
             title: import("react/jsx-runtime").JSX.Element;
@@ -22,3 +24,17 @@ export declare const Default: {
         onChange: import('@storybook/addon-actions').HandlerFunction;
     };
 };
+export declare const Navigation: {
+    render: import('storybook/internal/types').AnnotatedStoryFn<import('@storybook/react').ReactRenderer, DsTabsProps>;
+    args: {
+        tabs: {
+            name: string;
+            title: string;
+            content: import("react/jsx-runtime").JSX.Element;
+        }[];
+        variant: TabsVariant;
+        color: import('../../../main').TabsColor;
+        selectedTab: number;
+        onChange: import('@storybook/addon-actions').HandlerFunction;
+    };
+};

package/react/src/components/molecules/Tabs/index.d.ts

@@ -1,3 +1,4 @@
+export * from './types';
 export * from './Tabs';
 export * from './Tabs.config';
 export { default as DsTabs } from './Tabs';

package/react/src/components/molecules/Tabs/types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+import { TabsVariant } from './Tabs.config';
+
+export interface DsTabProps {
+    active?: boolean;
+    className?: string;
+    color?: string;
+    content?: ReactNode | string;
+    disabled?: boolean;
+    hidden?: boolean;
+    name?: string;
+    index: number;
+    title: ReactNode | string;
+    onClick?: (index: number) => void;
+    tabDataTestId?: string;
+    panelDataTestId?: string;
+}
+export type DsTabRenderProps = DsTabProps & {
+    variant: TabsVariant;
+    tabDomId: string;
+    panelDomId?: string;
+    hasPanel: boolean;
+};

package/scss/core/components/atoms/chip.scss

@@ -0,0 +1,101 @@
+$chip__font--family: var(--font__family--base) !default;
+$chip__font--weight: $font__weight--semibold !default;
+$chip__font--size: $font__size--xs !default;
+$chip__font--style: normal !default;
+$chip__line-height: 1.25 !default;
+$chip__letter-spacing: 0 !default;
+$chip__padding--y: $spacing__inset--quark !default; // 4px
+$chip__padding--x: $spacing__inset--quark + $spacing__inset--nano !default; // 4px + 8px = 12px
+$chip__min-height: $spacing__inset--sm !default; // 24px
+$chip__border-radius: $border__radius--sm !default;
+$chip__border-width: $border__width--hairline !default;
+$chip__icon--gap: 6px !default;
+$chip__colors: primary, secondary, success, danger, warning, info, neutral;
+$chip__solid: (
+  'bg__primary': var(--color__primary),
+  'text__primary': var(--color__neutral--00),
+  'bg__secondary': var(--color__secondary),
+  'text__secondary': var(--color__neutral--00),
+  'bg__success': var(--color__success),
+  'text__success': var(--color__neutral--00),
+  'bg__danger': var(--color__danger),
+  'text__danger': var(--color__neutral--00),
+  'bg__warning': var(--color__warning),
+  'text__warning': var(--color__neutral--90),
+  'bg__info': var(--color__info),
+  'text__info': var(--color__neutral--00),
+  'bg__neutral': var(--color__neutral--80),
+  'text__neutral': var(--color__neutral--00),
+) !default;
+$chip__light: (
+  'bg__primary': var(--color__primary--lighter),
+  'text__primary': var(--color__primary--dark),
+  'bg__secondary': var(--color__secondary--lighter),
+  'text__secondary': var(--color__secondary--dark),
+  'bg__success': var(--color__success--lighter),
+  'text__success': var(--color__success--dark),
+  'bg__danger': var(--color__danger--lighter),
+  'text__danger': var(--color__danger--dark),
+  'bg__warning': var(--color__warning--lighter),
+  'text__warning': var(--color__warning--dark),
+  'bg__info': var(--color__info--lighter),
+  'text__info': var(--color__info--dark),
+  'bg__neutral': var(--color__neutral--20),
+  'text__neutral': var(--color__neutral--80),
+) !default;
+
+.ds-chip {
+  --chip__border-radius: #{$chip__border-radius};
+  --chip__border-width: #{$chip__border-width};
+  --chip__min-height: #{$chip__min-height};
+  --chip__padding: #{$chip__padding--y} #{$chip__padding--x};
+  --chip__icon-gap: #{$chip__icon--gap};
+
+  align-items: center;
+  border: none;
+  border-radius: var(--chip__border-radius);
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: $chip__font--family;
+  font-size: $chip__font--size;
+  font-style: $chip__font--style;
+  font-weight: $chip__font--weight;
+  gap: var(--chip__icon-gap);
+  justify-content: center;
+  letter-spacing: $chip__letter-spacing;
+  line-height: $chip__line-height;
+  margin: 0;
+  max-width: 100%;
+  min-height: var(--chip__min-height);
+  padding: var(--chip__padding);
+  text-align: center;
+  vertical-align: middle;
+  white-space: nowrap;
+
+  &__label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__icon {
+    align-items: center;
+    display: inline-flex;
+    flex-shrink: 0;
+    justify-content: center;
+    line-height: 1;
+  }
+
+  @each $color in $chip__colors {
+    &__#{$color} {
+      &--solid {
+        background-color: get-token($chip__solid, 'bg__' + $color);
+        color: get-token($chip__solid, 'text__' + $color);
+      }
+
+      &--light {
+        background-color: get-token($chip__light, 'bg__' + $color);
+        color: get-token($chip__light, 'text__' + $color);
+      }
+    }
+  }
+}

package/scss/core/components/atoms/radio-card.scss

@@ -0,0 +1,117 @@
+$radio-card__padding: $spacing__inset--quark + $spacing__inset--nano !default;
+$radio-card__gap: $spacing__inset--quark + $spacing__inset--nano !default;
+$radio-card__min-height: $spacing--lg !default;
+$radio-card__text-gap: $spacing--quark !default;
+$radio-card__border-radius: $border__radius--sm !default;
+$radio-card__border-width: $border__width--hairline !default;
+$radio-card__outline-width: $border__width--thin !default;
+
+// Tipografia
+$radio-card__font--family: var(--font__family--base) !default;
+$radio-card__font--size: $font__size--xs !default;
+$radio-card__font--weight: $font__weight--semibold !default;
+$radio-card__line-height: 1.5 !default;
+
+// Cores (light)
+$radio-card__bg: var(--color__neutral--00) !default;
+$radio-card__border: var(--color__neutral--30) !default;
+$radio-card__bg--checked: var(--color__neutral--05) !default;
+$radio-card__border--checked: var(--color__neutral--80) !default;
+$radio-card__text: var(--color__neutral--80) !default;
+
+// Cores (dark)
+$radio-card__bg--dark: var(--color__neutral--90) !default;
+$radio-card__border--dark: var(--color__neutral--60) !default;
+$radio-card__text--dark: var(--color__neutral--10) !default;
+$radio-card__bg--checked-dark: var(--color__neutral--80) !default;
+$radio-card__border--checked-dark: var(--color__neutral--30) !default;
+$radio-card__disabled-opacity: 0.55 !default;
+
+@mixin radio-card-wrapper {
+  align-items: center;
+  background-color: #{$radio-card__bg};
+  border: $radio-card__border-width solid #{$radio-card__border};
+  border-radius: $radio-card__border-radius;
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: $radio-card__font--family;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  gap: $radio-card__gap;
+  min-height: $radio-card__min-height;
+  padding: $radio-card__padding;
+  position: relative;
+  width: fit-content;
+}
+
+@mixin radio-card-wrapper-checked {
+  background-color: #{$radio-card__bg--checked};
+  border-color: #{$radio-card__border--checked};
+}
+
+@mixin radio-card-wrapper-focus-visible {
+  outline: $radio-card__outline-width solid #{$radio-card__border--checked};
+  outline-offset: $radio-card__outline-width;
+}
+
+@mixin radio-card-wrapper-disabled {
+  cursor: not-allowed;
+  opacity: $radio-card__disabled-opacity;
+  pointer-events: none;
+}
+
+@mixin radio-card-input-hidden {
+  cursor: pointer;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  z-index: 1;
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}
+
+@mixin radio-card-text-block {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: $radio-card__text-gap;
+  justify-content: center;
+  min-width: 0;
+  pointer-events: none;
+  z-index: 0;
+}
+
+@mixin radio-card-text-style {
+  color: #{$radio-card__text};
+  font-family: inherit;
+  font-size: $radio-card__font--size;
+  font-style: normal;
+  font-weight: $radio-card__font--weight;
+  letter-spacing: 0;
+  line-height: $radio-card__line-height;
+  vertical-align: middle;
+}
+
+@mixin radio-card-dark-mode {
+  background-color: #{$radio-card__bg--dark};
+  border-color: #{$radio-card__border--dark};
+  color: #{$radio-card__text--dark};
+
+  .ds-radio__label,
+  .ds-radio__description {
+    color: #{$radio-card__text--dark};
+  }
+}
+
+@mixin radio-card-dark-mode-checked {
+  background-color: #{$radio-card__bg--checked-dark};
+  border-color: #{$radio-card__border--checked-dark};
+}
+
+@mixin radio-card-dark-mode-focus-visible {
+  outline-color: #{$radio-card__border--checked-dark};
+}