@iota/apps-ui-kit 0.6.0 → 0.7.1

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

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

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

@@ -2,20 +2,27 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Config } from 'tailwindcss';
-import { IOTA_PRIMITIVES_COLOR_PALETTE, SHADER_COLOR_PALETTE } from '../constants/colors.constants';
 import {
-    CUSTOM_FONT_SIZES,
+    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 { firefoxPlugin } from './plugins';
+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: 'class',
-    plugins: [firefoxPlugin],
+    darkMode: 'selector',
+    plugins: [firefoxPlugin, namesVariant],
     theme: {
         extend: {
             fontSize: {
@@ -38,11 +45,13 @@ export const BASE_CONFIG: Config = {
             },
             colors: {
                 ...IOTA_PRIMITIVES_COLOR_PALETTE,
+                ...IOTA_NAMES_COLOR_PALETTE,
                 ...SHADER_COLOR_PALETTE,
+                ...THEMED_CUSTOM_COLORS,
             },
-            fontFamily: {
-                'alliance-no2': ['AllianceNo2', 'sans-serif'],
-                inter: ['Inter', 'sans-serif'],
+            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

@@ -136,24 +136,24 @@ export const TEXT_HEADLINE_CLASSES: TailwindCustomFonts = {
         '24px',
         {
             lineHeight: '120%',
+            fontWeight: 'var(--headline-sm-font-weight)',
             letterSpacing: '-0.2px',
-            fontWeight: 500,
         },
     ],
     'text-headline-md': [
         '28px',
         {
             lineHeight: '120%',
+            fontWeight: 'var(--headline-md-font-weight)',
             letterSpacing: '-0.4px',
-            fontWeight: 500,
         },
     ],
     'text-headline-lg': [
         '32px',
         {
             lineHeight: '120%',
+            fontWeight: 'var(--headline-lg-font-weight)',
             letterSpacing: '-0.4px',
-            fontWeight: 500,
         },
     ],
 };
@@ -162,22 +162,22 @@ export const TEXT_DISPLAY_CLASSES: TailwindCustomFonts = {
     'text-display-sm': [
         '36px',
         {
-            lineHeight: '120%',
-            fontWeight: 500,
+            lineHeight: 'var(--display-sm-line-height)',
+            fontWeight: 'var(--display-sm-font-weight)',
         },
     ],
     'text-display-md': [
         '48px',
         {
-            lineHeight: '120%',
-            fontWeight: 500,
+            lineHeight: 'var(--display-md-line-height)',
+            fontWeight: 'var(--display-md-font-weight)',
         },
     ],
     'text-display-lg': [
         '60px',
         {
-            lineHeight: '120%',
-            fontWeight: 500,
+            lineHeight: 'var(--display-lg-line-height)',
+            fontWeight: 'var(--display-lg-font-weight)',
         },
     ],
 };