@iota/apps-ui-kit 0.0.0-dev-20251015065834

package/src/lib/styles/variables/names-variables.css

@@ -0,0 +1,270 @@
+:root.names {
+    /* FONTS */
+    --font-family-heading: theme('fontFamily.roboto-flex');
+    --font-family-text: theme('fontFamily.inter');
+    --display-lg-font-weight: 700;
+    --display-lg-line-height: 100%;
+    --display-md-font-weight: 700;
+    --display-md-line-height: 100%;
+    --display-sm-font-weight: 700;
+    --display-sm-line-height: 100%;
+    --headline-lg-font-weight: 600;
+    --headline-md-font-weight: 600;
+    --headline-sm-font-weight: 600;
+
+    /* COLORS */
+    --warning-surface: theme('colors.names-warning.20');
+    --on-warning: theme('colors.names-warning.90');
+    --error-surface: theme('colors.names-error.20');
+    --on-error: theme('colors.names-error.90');
+    --success-surface: theme('colors.names-tertiary.20');
+    --on-success: theme('colors.names-tertiary.90');
+    --default-surface: theme('colors.names-primary.20');
+    --on-default: theme('colors.names-neutral.90');
+
+    /* STATE LAYER */
+    --state-layer-bg-color: theme('colors.names-primary.60');
+    --state-layer-secondary-bg-color: theme('colors.shader-primary-dark.100');
+    --state-layer-inverted-bg-color: theme('colors.names-primary.80');
+
+    /* ---------------- ATOMS ---------------- */
+
+    /* BADGE */
+    --badge-bg-color-neutral: theme('colors.names-neutral.12');
+    --badge-text-color-neutral: theme('colors.names-neutral.92');
+    --badge-border-color-neutral: theme('colors.names-neutral.12');
+    --badge-bg-color-primary: theme('colors.names-primary.30');
+    --badge-border-color-primary: theme('colors.names-primary.30');
+    --badge-text-color-primary: theme('colors.names-neutral.100');
+    --badge-bg-color-primary-soft: theme('colors.names-primary.20');
+    --badge-text-color-primary-soft: theme('colors.names-primary.90');
+    --badge-border-color-soft: theme('colors.names-primary.20');
+
+    /* INFOBOX */
+    --infobox-text-title: theme('colors.names-neutral.92');
+    --infobox-supporting-text: theme('colors.names-neutral.92');
+
+    /* BUTTON */
+    --button-bg-color-primary: theme('colors.names-primary.30');
+    --button-bg-color-disabled-primary: theme('colors.names-neutral.30');
+    --button-bg-color-secondary: theme('colors.names-neutral.20');
+    --button-bg-color-error: theme('colors.names-error.20');
+    --button-border-color-outline: theme('colors.names-neutral.60');
+    --button-text-color-primary: theme('colors.names-primary.100');
+    --button-text-color-neutral: theme('colors.names-neutral.92');
+    --button-text-color-error: theme('colors.names-error.90');
+
+    /* BUTTON PILL */
+    --button-pill-border-color: theme('colors.names-neutral.40');
+    --button-pill-text-color: theme('colors.names-neutral.60');
+
+    /* HEADER */
+    --header-bg-color: theme('colors.names-neutral.6');
+    --header-text-color: theme('colors.names-neutral.92');
+
+    /* LABEL */
+    --label-text-primary-neutral: theme('colors.names-neutral.92');
+    --label-text-secondary-neutral: theme('colors.names-neutral.50');
+
+    /* KEY VALUE */
+    --key-supporting-text-color: theme('colors.names-neutral.50');
+    --key-value-hover-text-color: theme('colors.iota-neutral.92');
+    --key-value-key-text-color: theme('colors.names-neutral.70');
+
+    /* CHECKBOX */
+    --checkbox-border-color-default: theme('colors.names-neutral.20');
+    --checkbox-border-color-checked: theme('colors.names-primary.30');
+    --checkbox-border-color-disabled: theme('colors.names-neutral.30');
+    --checkbox-border-color-disabled-checked: theme('colors.names-neutral.50');
+    --checkbox-bg-color-checked: theme('colors.names-primary.30');
+    --checkbox-bg-color-disabled-checked: theme('colors.names-neutral.50');
+    --checkbox-text-color: theme('colors.names-neutral.70');
+    --checkbox-text-color-checked: theme('colors.names-neutral.100');
+    --checkbox-label-text-color: theme('colors.names-neutral.70');
+
+    /* DIVIDER */
+    --divider-bg-color: theme('colors.shader-neutral-dark.8');
+
+    /* BUTTON SEGMENT */
+    --button-segment-text-color-default: theme('colors.names-neutral.50');
+    --button-segment-text-color-hover: theme('colors.names-neutral.70');
+    --button-segment-text-color-focused: theme('colors.names-neutral.70');
+    --button-segment-text-color-selected: theme('colors.names-neutral.92');
+    --button-segment-underline-default-color: theme('colors.shader-neutral-dark.8');
+    --button-segment-underline-hover-color: theme('colors.names-neutral.40');
+    --button-segment-underline-selected-color: theme('colors.names-primary.80');
+    --button-segment-bg-color-selected: theme('colors.names-neutral.6');
+
+    /* LOADING INDICATOR */
+    --loading-indicator-color: theme('colors.names-primary.80');
+
+    /* LIST ITEM */
+    --list-item-color: theme('colors.names-neutral.92');
+    --list-item-border-color: theme('colors.shader-neutral-dark.8');
+    --list-item-highlight-bg: theme('colors.shader-primary-dark.12');
+
+    /* PANEL */
+    --panel-bg: theme('colors.names-neutral.6');
+    --panel-border-color: theme('colors.shader-neutral-dark.8');
+
+    /* RADIO BUTTON */
+    --radio-icon-color: theme('colors.names-neutral.70');
+    --radio-icon-checked-color: theme('colors.names-primary.30');
+    --radio-icon-checked-disabled-color: theme('colors.names-neutral.70');
+    --radio-label-color: theme('colors.names-neutral.70');
+
+    /* SECONDARY TEXT */
+    --secondary-text-color: theme('colors.names-neutral.70');
+    --secondary-text-error-color: theme('colors.names-error.80');
+
+    /* SKELETON */
+    --skeleton-bg: theme('colors.names-neutral.12');
+    --skeleton-secondary-bg: theme('colors.names-neutral.10');
+
+    /* TOGGLE */
+    --toggle-bg-active: theme('colors.names-primary.30');
+    --toggle-border-active: theme('colors.names-primary.30');
+    --toggle-bg-inactive: theme('colors.names-neutral.6');
+    --toggle-border-inactive: theme('colors.names-neutral.50');
+    --toggle-bg-disabled-active: theme('colors.names-neutral.50');
+    --toggle-border-disabled-active: theme('colors.names-neutral.50');
+    --toggle-thumb-color: theme('colors.names-neutral.50');
+    --toggle-thumb-color-checked: theme('colors.names-neutral.6');
+    --toggle-label-color: theme('colors.names-neutral.70');
+
+    /* TOOLTIP */
+    --tooltip-bg: theme('colors.names-neutral.0');
+    --tooltip-text-color: theme('colors.names-neutral.100');
+
+    /* VISUAL ASSET CARD */
+    --visual-asset-placeholder-bg: theme('colors.names-neutral.10');
+    --visual-asset-placeholder-icon: theme('colors.names-neutral.60');
+    --visual-asset-title-color: theme('colors.names-neutral.100');
+    --visual-asset-icon-color: theme('colors.names-neutral.100');
+
+    /* ACCOUNT */
+    --account-title-color: theme('colors.names-neutral.92');
+    --account-icon-color: theme('colors.names-neutral.70');
+    --account-check-active-color: theme('colors.names-primary.80');
+    --account-check-inactive-color: theme('colors.names-neutral.60');
+
+    /* ADDRESS */
+    --address-text-color: theme('colors.names-neutral.70');
+
+    /* CARD */
+    --card-filled-bg: theme('colors.names-neutral.10');
+    --card-image-bg-solid: theme('colors.names-neutral.10');
+    --card-image-bg-white: theme('colors.names-neutral.6');
+    --card-action-link-color: theme('colors.names-neutral.92');
+    --card-action-title-color: theme('colors.names-neutral.92');
+    --card-action-subtitle-color: theme('colors.names-neutral.40');
+    --card-body-title-color: theme('colors.names-neutral.92');
+    --card-body-subtitle-color: theme('colors.names-neutral.70');
+
+    /* CHIP */
+    --chip-bg-selected-outline: theme('colors.shader-primary-dark.16');
+    --chip-bg-elevated: theme('colors.names-neutral.12');
+    --chip-bg-brand: theme('colors.names-primary.30');
+    --chip-border-default: theme('colors.names-neutral.20');
+    --chip-text-default: theme('colors.names-neutral.92');
+    --chip-text-secondary: theme('colors.names-neutral.92');
+    --chip-focus-ring: theme('colors.names-primary.80');
+    --chip-border-color-brand: theme('colors.names-primary.30');
+    --chip-text-brand: theme('colors.names-primary.100');
+    --chip-bg-selected-overlay: theme('colors.shader-primary-dark.16');
+    --chip-close-icon-opacity: 0.4;
+
+    --chip-outline-color: theme('colors.shader-primary-dark.16');
+    --chip-outline-color-hover: theme('colors.shader-primary-dark.8');
+    --chip-outline-color-active: theme('colors.shader-primary-dark.12');
+
+    --chip-bg-color-hover: theme('colors.shader-primary-dark.8');
+    --chip-bg-color-active: theme('colors.shader-primary-dark.12');
+    --chip-bg-color-focus: theme('colors.shader-primary-dark.12');
+
+    /* DISPLAY STATS */
+    --display-stats-bg-default: theme('colors.names-neutral.10');
+    --display-stats-bg-highlight: theme('colors.names-primary.80');
+    --display-stats-bg-secondary: theme('colors.names-secondary.10');
+    --display-stats-text-default: theme('colors.names-neutral.92');
+    --display-stats-text-highlight: theme('colors.names-primary.10');
+    --display-stats-text-secondary: theme('colors.names-neutral.92');
+    --display-stats-icon-color: theme('colors.names-neutral.92');
+    --display-stats-copy-icon-color: theme('colors.names-neutral.40');
+
+    /* DROPDOWN */
+    --dropdown-bg: theme('colors.names-neutral.6');
+    --dropdown-border-color: theme('colors.names-neutral.20');
+
+    /* INPUT */
+    --input-text-color: theme('colors.names-neutral.92');
+    --input-placeholder-color: rgba(136, 146, 161, 0.4); /* neutral.60 with 40% opacity */
+    --input-label-color: theme('colors.names-neutral.60');
+    --input-border-color: theme('colors.names-neutral.20');
+    --input-border-hover-color: theme('colors.names-neutral.60');
+    --input-border-error-color: theme('colors.names-error.80');
+    --input-border-focus-color: theme('colors.names-primary.80');
+    --input-caret-color: theme('colors.names-primary.80');
+    --input-icon-color: theme('colors.names-neutral.92');
+    --input-copy-icon-color: theme('colors.names-neutral.40');
+    --input-visibility-bar-color: rgba(24, 27, 49, 0.6); /* neutral.10 with 60% opacity */
+
+    /* NAVBAR ITEM */
+    --navbar-item-icon-color: theme('colors.names-neutral.70');
+    --navbar-item-icon-selected-color: theme('colors.names-neutral.92');
+    --navbar-item-label-color: theme('colors.names-neutral.50');
+    --navbar-item-label-selected-color: theme('colors.names-neutral.92');
+
+    /* SEARCH */
+    --search-text-color: theme('colors.names-neutral.92');
+    --search-placeholder-color: theme('colors.names-neutral.70');
+    --search-border-color: theme('colors.names-neutral.40');
+    --search-bg-color-filled: theme('colors.names-neutral.12');
+    --search-suggestion-bg-color: theme('colors.names-neutral.12');
+    --search-selected-index-bg-color: theme('colors.shader-inverted-dark.16');
+
+    /* SEGMENTED BUTTON */
+    --segmented-filled-bg-color: theme('colors.names-neutral.10');
+    --segmented-outlined-border-color: theme('colors.names-neutral.40');
+
+    /* SELECT */
+    --select-border-color: theme('colors.names-neutral.20');
+    --select-border-hover-color: theme('colors.names-neutral.60');
+    --select-border-focus-color: theme('colors.names-primary.80');
+    --select-border-error-color: theme('colors.names-error.80');
+    --select-icon-color: theme('colors.names-neutral.92');
+    --select-label-color: theme('colors.names-neutral.92');
+
+    /* TABLE CELL */
+    --table-cell-supporting-label-color: theme('colors.names-neutral.40');
+    --table-cell-border-color: theme('colors.shader-neutral-dark.8');
+
+    /* TABLE HEADER CELL */
+    --table-header-text-color: theme('colors.names-neutral.92');
+
+    /* TITLE */
+    --title-main-color: theme('colors.names-neutral.92');
+    --title-subtitle-color: theme('colors.names-neutral.50');
+    --title-icon-color: theme('colors.names-neutral.50');
+
+    /* ---------------- ORGANISMS ---------------- */
+
+    /* ACCORDION */
+    --accordion-bg: theme('colors.names-neutral.6');
+    --accordion-icon-color: theme('colors.names-neutral.92');
+    --accordion-border-color: theme('colors.shader-neutral-dark.8');
+
+    /* DIALOG */
+    --dialog-content-bg: theme('colors.names-neutral.6');
+    --dialog-title-color: theme('colors.names-neutral.92');
+    --dialog-body-color: theme('colors.names-neutral.70');
+    --dialog-outline: 1px solid theme('colors.names-neutral.20');
+    --dialog-overlay-bg: theme('colors.names-neutral.0/0.12');
+
+    /* NAVBAR */
+    --navbar-icon-color: theme('colors.names-neutral.92');
+    --navbar-slideout-bg: theme('colors.names-neutral.6');
+
+    /* TABLE */
+    --table-text-color: theme('colors.names-neutral.70');
+}

package/src/lib/tailwind/base.presets.ts

@@ -0,0 +1,58 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Config } from 'tailwindcss';
+import {
+    IOTA_PRIMITIVES_COLOR_PALETTE,
+    IOTA_NAMES_COLOR_PALETTE,
+    SHADER_COLOR_PALETTE,
+} from '../constants/colors.constants';
+import {
+    BORDER_RADIUS,
+    CUSTOM_FONT_SIZES,
+    CUSTOM_SPACING,
+    FONT_FAMILIES,
+    OPACITY,
+    generateVariableSpacing,
+} from './constants';
+import { THEMED_CUSTOM_COLORS } from './constants/customColors.constants';
+import { firefoxPlugin, namesVariant } from './plugins';
+import { NAMES_GRADIENTS } from './constants/gradients.constants';
+
+export const BASE_CONFIG: Config = {
+    content: ['./src/**/*.{html,js,jsx,ts,tsx}'],
+    darkMode: 'selector',
+    plugins: [firefoxPlugin, namesVariant],
+    theme: {
+        extend: {
+            fontSize: {
+                ...CUSTOM_FONT_SIZES,
+            },
+            borderRadius: {
+                ...BORDER_RADIUS,
+            },
+            spacing: (utils) => {
+                const screens = utils.theme('screens');
+                const variableSpacing = generateVariableSpacing(screens);
+                return {
+                    ...CUSTOM_SPACING,
+                    ...variableSpacing,
+                };
+            },
+            opacity: {
+                ...OPACITY,
+                30: '0.3',
+            },
+            colors: {
+                ...IOTA_PRIMITIVES_COLOR_PALETTE,
+                ...IOTA_NAMES_COLOR_PALETTE,
+                ...SHADER_COLOR_PALETTE,
+                ...THEMED_CUSTOM_COLORS,
+            },
+            fontFamily: FONT_FAMILIES,
+            backgroundImage: {
+                ...NAMES_GRADIENTS,
+            },
+        },
+    },
+};

package/src/lib/tailwind/constants/customColors.constants.ts

@@ -0,0 +1,13 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const THEMED_CUSTOM_COLORS = {
+    'default-surface': 'var(--default-surface)',
+    'on-default': 'var(--on-default)',
+    'warning-surface': 'var(--warning-surface)',
+    'on-warning': 'var(--on-warning)',
+    'error-surface': 'var(--error-surface)',
+    'on-error': 'var(--on-error)',
+    'success-surface': 'var(--success-surface)',
+    'on-success': 'var(--on-success)',
+} as const;

package/src/lib/tailwind/constants/fontFamily.constants.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const FONT_FAMILIES: Record<string, string[]> = {
+    inter: ['Inter', 'sans-serif'],
+    'alliance-no2': ['AllianceNo2', 'sans-serif'],
+    'roboto-flex': ['Roboto Flex Variable', 'sans-serif'],
+} as const;

package/src/lib/tailwind/constants/fontSizes.constants.ts

@@ -0,0 +1,201 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ThemeConfig } from 'tailwindcss/types/config';
+
+type TailwindFontSize = ThemeConfig['fontSize'];
+
+export type TailwindFontSizeConfig = Partial<{
+    lineHeight: string;
+    letterSpacing: string;
+    fontWeight: string | number;
+}>;
+
+export type TailwindCustomFonts = Record<
+    string,
+    [
+        string,
+        Partial<{
+            lineHeight: string;
+            letterSpacing: string;
+            fontWeight: string | number;
+        }>,
+    ]
+>;
+
+export const TEXT_LABEL_CLASSES: TailwindCustomFonts = {
+    'text-label-sm': [
+        '11px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '0.2px',
+            fontWeight: 500,
+        },
+    ],
+    'text-label-md': [
+        '12px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '-0.1px',
+            fontWeight: 500,
+        },
+    ],
+    'text-label-lg': [
+        '14px',
+        {
+            lineHeight: '20px',
+            letterSpacing: '-0.1px',
+            fontWeight: 500,
+        },
+    ],
+} satisfies TailwindFontSize;
+
+export const TEXT_BODY_CLASSES: TailwindCustomFonts = {
+    'text-body-sm': [
+        '12px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-md': [
+        '14px',
+        {
+            lineHeight: '20px',
+            letterSpacing: '-0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-lg': [
+        '16px',
+        {
+            lineHeight: '24px',
+            letterSpacing: '0.1px',
+            fontWeight: 400,
+        },
+    ],
+};
+
+export const TEXT_BODY_DISAMBIGUOUS_CLASSES: TailwindCustomFonts = {
+    'text-body-ds-sm': [
+        '12px',
+        {
+            lineHeight: '16px',
+            letterSpacing: '0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-ds-md': [
+        '14px',
+        {
+            lineHeight: '20px',
+            letterSpacing: '-0.1px',
+            fontWeight: 400,
+        },
+    ],
+    'text-body-ds-lg': [
+        '16px',
+        {
+            lineHeight: '24px',
+            letterSpacing: '0.2px',
+            fontWeight: 400,
+        },
+    ],
+};
+
+export const TEXT_TITLE_CLASSES: TailwindCustomFonts = {
+    'text-title-sm': [
+        '14px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.1px',
+            fontWeight: 500,
+        },
+    ],
+    'text-title-md': [
+        '16px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.15px',
+            fontWeight: 500,
+        },
+    ],
+    'text-title-lg': [
+        '20px',
+        {
+            lineHeight: '120%',
+            letterSpacing: '-0.4px',
+            fontWeight: 500,
+        },
+    ],
+};
+
+export const TEXT_HEADLINE_CLASSES: TailwindCustomFonts = {
+    'text-headline-sm': [
+        '24px',
+        {
+            lineHeight: '120%',
+            fontWeight: 'var(--headline-sm-font-weight)',
+            letterSpacing: '-0.2px',
+        },
+    ],
+    'text-headline-md': [
+        '28px',
+        {
+            lineHeight: '120%',
+            fontWeight: 'var(--headline-md-font-weight)',
+            letterSpacing: '-0.4px',
+        },
+    ],
+    'text-headline-lg': [
+        '32px',
+        {
+            lineHeight: '120%',
+            fontWeight: 'var(--headline-lg-font-weight)',
+            letterSpacing: '-0.4px',
+        },
+    ],
+};
+
+export const TEXT_DISPLAY_CLASSES: TailwindCustomFonts = {
+    'text-display-sm': [
+        '36px',
+        {
+            lineHeight: 'var(--display-sm-line-height)',
+            fontWeight: 'var(--display-sm-font-weight)',
+        },
+    ],
+    'text-display-md': [
+        '48px',
+        {
+            lineHeight: 'var(--display-md-line-height)',
+            fontWeight: 'var(--display-md-font-weight)',
+        },
+    ],
+    'text-display-lg': [
+        '60px',
+        {
+            lineHeight: 'var(--display-lg-line-height)',
+            fontWeight: 'var(--display-lg-font-weight)',
+        },
+    ],
+};
+
+const CUSTOM_TEXT_CLASSES: TailwindCustomFonts = {
+    ...TEXT_LABEL_CLASSES,
+    ...TEXT_BODY_CLASSES,
+    ...TEXT_BODY_DISAMBIGUOUS_CLASSES,
+    ...TEXT_TITLE_CLASSES,
+    ...TEXT_HEADLINE_CLASSES,
+    ...TEXT_DISPLAY_CLASSES,
+};
+
+// Remove the 'text-' prefix from the keys to match the TailwindCSS font size keys
+export const CUSTOM_FONT_SIZES: TailwindCustomFonts = Object.entries(CUSTOM_TEXT_CLASSES).reduce(
+    (acc, [className, properties]) => {
+        const key = className.startsWith('text-') ? className.replace('text-', '') : className;
+        return { ...acc, [key]: properties };
+    },
+    {},
+);

package/src/lib/tailwind/constants/gradients.constants.ts

@@ -0,0 +1,6 @@
+// Copyright (c) 2025 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export const NAMES_GRADIENTS = {
+    'names-gradient-primary': `var(--names-gradient-primary)`,
+};

package/src/lib/tailwind/constants/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './scaling.constants';
+export * from './fontSizes.constants';
+export * from './variableSpacing.constants';
+export * from './fontFamily.constants';

package/src/lib/tailwind/constants/scaling.constants.ts

@@ -0,0 +1,41 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { pxToRem } from '../helpers';
+
+type TailwindScale = Record<string, string> & { DEFAULT?: string };
+
+export const BORDER_RADIUS: TailwindScale = {
+    none: pxToRem(0),
+    sm: pxToRem(2),
+    DEFAULT: pxToRem(4),
+    md: pxToRem(6),
+    lg: pxToRem(8),
+    xl: pxToRem(12),
+    '2xl': pxToRem(16),
+    '3xl': pxToRem(24),
+    full: pxToRem(120),
+};
+
+export const CUSTOM_SPACING: TailwindScale = {
+    none: pxToRem(0),
+    xxxs: pxToRem(2),
+    xxs: pxToRem(4),
+    xs: pxToRem(8),
+    sm: pxToRem(12),
+    md: pxToRem(16),
+    lg: pxToRem(24),
+    xl: pxToRem(32),
+    '2xl': pxToRem(48),
+};
+
+export const OPACITY: TailwindScale = {
+    0: '0',
+    8: '0.08',
+    12: '0.12',
+    16: '0.16',
+    40: '0.4',
+    60: '0.6',
+    80: '0.8',
+    100: '1',
+};

package/src/lib/tailwind/constants/variableSpacing.constants.ts

@@ -0,0 +1,66 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ScreenSize } from '../../enums/screenSize.enums';
+
+enum VariableSpacingClassPrefix {
+    Xs = 'xs--rs',
+    Sm = 'sm--rs',
+    Md = 'md--rs',
+}
+
+type DefaultValue = string;
+type ScreenMdValue = string;
+type ScreenLgValue = string;
+type ScreenXlValue = string;
+
+const VARIABLE_SPACING: Record<
+    VariableSpacingClassPrefix,
+    [DefaultValue, ScreenMdValue, ScreenLgValue?, ScreenXlValue?]
+> = {
+    [VariableSpacingClassPrefix.Xs]: ['4px', '8px'],
+    [VariableSpacingClassPrefix.Sm]: ['8px', '12px'],
+    [VariableSpacingClassPrefix.Md]: ['16px', '24px'],
+};
+
+function getClampedSpacingValues(
+    key: VariableSpacingClassPrefix,
+    screens: Record<string, string>,
+): string {
+    const CUSTOM_SCREEN_SIZES: ScreenSize[] = [
+        ScreenSize.Sm,
+        ScreenSize.Md,
+        ScreenSize.Lg,
+        ScreenSize.Xl,
+    ];
+
+    const values = VARIABLE_SPACING[key];
+    // Use the first value as the default value, since it doesn't need to be clamped.
+    let clampValue = `${values[0]}`;
+    for (let i = 1; i < values.length; i++) {
+        if (values[i]) {
+            // Iterate the tailwind screens and check if desired the breakpoint exists.
+            const breakpoint = screens[CUSTOM_SCREEN_SIZES[i]];
+            if (breakpoint) {
+                // Clamp the spacing value using the screen breakpoint as reference.
+                clampValue = `clamp(${clampValue}, (100vw - ${breakpoint}) * 99, ${values[i]})`;
+            }
+        }
+    }
+
+    return clampValue;
+}
+
+export function generateVariableSpacing(tailwindScreens: Record<string, string>) {
+    const variableSpacing = Object.keys(VARIABLE_SPACING).reduce((acc, variableSpacingPrefix) => {
+        const clampedSpacing = getClampedSpacingValues(
+            variableSpacingPrefix as VariableSpacingClassPrefix,
+            tailwindScreens,
+        );
+        return {
+            ...acc,
+            [variableSpacingPrefix]: clampedSpacing,
+        };
+    }, {});
+    return variableSpacing;
+}