@alfalab/core-components 26.12.0 → 27.0.0-beta.0

package/modal/esm/components/header/Component.desktop.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-926adafc.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-3852fc63.js';
 import React from 'react';
 import cn from 'classnames';
 import '../../../../base-modal/esm';

package/modal/esm/components/header/Component.mobile.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from '../../tslib.es6-926adafc.js';
+import { _ as __rest, a as __assign } from '../../tslib.es6-3852fc63.js';
 import React from 'react';
 import cn from 'classnames';
 import '../../../../base-modal/esm';

package/modal/esm/desktop.js

@@ -1,4 +1,4 @@
-import './tslib.es6-926adafc.js';
+import './tslib.es6-3852fc63.js';
 import 'react';
 import 'classnames';
 import '../../base-modal/esm';
@@ -13,5 +13,5 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-045f0acc.js';
+import './transitions.module-68527aae.js';
 export { ModalDesktop } from './Component.desktop.js';

package/modal/esm/index.js

@@ -1,4 +1,4 @@
-import './tslib.es6-926adafc.js';
+import './tslib.es6-3852fc63.js';
 import 'react';
 import 'classnames';
 import '../../base-modal/esm';
@@ -13,7 +13,7 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-045f0acc.js';
+import './transitions.module-68527aae.js';
 import './Component.desktop.js';
 import '@alfalab/icons-glyph/CrossMIcon';
 import './components/header/Component.mobile.js';

package/modal/esm/mobile.js

@@ -1,4 +1,4 @@
-import './tslib.es6-926adafc.js';
+import './tslib.es6-3852fc63.js';
 import 'react';
 import 'classnames';
 import '../../base-modal/esm';
@@ -9,7 +9,7 @@ import '@alfalab/icons-glyph/CrossHeavyMIcon';
 import './components/closer/Component.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import './transitions.module-045f0acc.js';
+import './transitions.module-68527aae.js';
 import '@alfalab/icons-glyph/CrossMIcon';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';

package/modal/esm/responsive.js

@@ -1,4 +1,4 @@
-import './tslib.es6-926adafc.js';
+import './tslib.es6-3852fc63.js';
 import 'react';
 import 'classnames';
 import '../../base-modal/esm';
@@ -13,7 +13,7 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-045f0acc.js';
+import './transitions.module-68527aae.js';
 import './Component.desktop.js';
 import '@alfalab/icons-glyph/CrossMIcon';
 import './components/header/Component.mobile.js';

package/modal/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-33906f7c.js');
+require('./tslib.es6-b75c94d3.js');
 require('react');
 require('classnames');
 require('../base-modal');
@@ -16,7 +16,7 @@ require('./components/content/Component.desktop.js');
 require('./components/footer/Component.js');
 require('./components/footer/Component.desktop.js');
 require('./Component.desktop.js');
-require('./transitions.module-78f5235e.js');
+require('./transitions.module-6ad80b82.js');
 require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/Component.mobile.js');
 require('./components/content/Component.mobile.js');

package/modal/mobile.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-33906f7c.js');
+require('./tslib.es6-b75c94d3.js');
 require('react');
 require('classnames');
 require('../base-modal');
@@ -11,7 +11,7 @@ require('@alfalab/icons-glyph/CrossHeavyMIcon');
 require('./components/closer/Component.js');
 require('./components/content/Component.js');
 require('./components/footer/Component.js');
-require('./transitions.module-78f5235e.js');
+require('./transitions.module-6ad80b82.js');
 require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/Component.mobile.js');
 require('./components/content/Component.mobile.js');

package/modal/modern/Component.desktop.js

@@ -12,7 +12,7 @@ import './components/content/Component.js';
 import { ContentDesktop } from './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import { FooterDesktop } from './components/footer/Component.desktop.js';
-import { t as transitions } from './transitions.module-045f0acc.js';
+import { t as transitions } from './transitions.module-68527aae.js';
 
 var styles = {"wrapper":"modal__wrapper_1st93","component":"modal__component_1st93","fullscreen":"modal__fullscreen_1st93","s":"modal__s_1st93","m":"modal__m_1st93","l":"modal__l_1st93","xl":"modal__xl_1st93"};
 require('./desktop.css');

package/modal/modern/Component.mobile.js

@@ -9,7 +9,7 @@ import '../../icon-button/modern';
 import { Closer } from './components/closer/Component.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import { t as transitions } from './transitions.module-045f0acc.js';
+import { t as transitions } from './transitions.module-68527aae.js';
 import { HeaderMobile } from './components/header/Component.mobile.js';
 import { ContentMobile } from './components/content/Component.mobile.js';
 import { FooterMobile } from './components/footer/Component.mobile.js';

package/modal/modern/Component.responsive.d.ts

@@ -11,7 +11,7 @@ declare const ModalResponsive: React.ForwardRefExoticComponent<import("packages/
     fixedPosition?: boolean | undefined;
     hasCloser?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>> & {
-    Header: React.FC<import("./components/header/Component.desktop").HeaderDesktopProps> | React.FC<import("./components/header/Component.mobile").HeaderMobileProps>;
+    Header: React.FC<import("./components/header/Component.mobile").HeaderMobileProps> | React.FC<import("./components/header/Component.desktop").HeaderDesktopProps>;
     Content: React.FC<import("./components/content/Component").ContentProps> | React.FC<import("./components/content/Component.desktop").ContentDesktopProps>;
     Footer: React.FC<import("./components/footer/Component").FooterProps> | React.FC<import("./components/footer/Component.desktop").FooterDesktopProps>;
     Closer: React.FC<import("./components/closer/Component").CloserProps>;

package/modal/modern/Component.responsive.js

@@ -14,7 +14,7 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-045f0acc.js';
+import './transitions.module-68527aae.js';
 import { ModalDesktop } from './Component.desktop.js';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';

package/modal/modern/desktop.js

@@ -12,5 +12,5 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-045f0acc.js';
+import './transitions.module-68527aae.js';
 export { ModalDesktop } from './Component.desktop.js';

package/modal/modern/index.js

@@ -14,7 +14,7 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-045f0acc.js';
+import './transitions.module-68527aae.js';
 import './Component.desktop.js';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';

package/modal/modern/mobile.js

@@ -9,7 +9,7 @@ import '../../icon-button/modern';
 import './components/closer/Component.js';
 import './components/content/Component.js';
 import './components/footer/Component.js';
-import './transitions.module-045f0acc.js';
+import './transitions.module-68527aae.js';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';
 import './components/footer/Component.mobile.js';

package/modal/modern/responsive.js

@@ -14,7 +14,7 @@ import './components/content/Component.js';
 import './components/content/Component.desktop.js';
 import './components/footer/Component.js';
 import './components/footer/Component.desktop.js';
-import './transitions.module-045f0acc.js';
+import './transitions.module-68527aae.js';
 import './Component.desktop.js';
 import './components/header/Component.mobile.js';
 import './components/content/Component.mobile.js';

package/modal/responsive.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-33906f7c.js');
+require('./tslib.es6-b75c94d3.js');
 require('react');
 require('classnames');
 require('../base-modal');
@@ -16,7 +16,7 @@ require('./components/content/Component.desktop.js');
 require('./components/footer/Component.js');
 require('./components/footer/Component.desktop.js');
 require('./Component.desktop.js');
-require('./transitions.module-78f5235e.js');
+require('./transitions.module-6ad80b82.js');
 require('@alfalab/icons-glyph/CrossMIcon');
 require('./components/header/Component.mobile.js');
 require('./components/content/Component.mobile.js');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alfalab/core-components",
-  "version": "26.12.0",
+  "version": "27.0.0-beta.0",
   "license": "MIT",
   "repository": {
     "type": "git",

package/pagination/components/tag/index.css

@@ -1,6 +1,6 @@
 /* hash: sbvzq */
 :root {
-    --color-light-bg-neutral: #dbdee1;
+    --color-light-bg-quaternary: #dbdee1;
     --color-light-bg-secondary-inverted: #233549;
     --color-light-bg-tertiary: #e7e9eb;
     --color-light-text-primary: #0b1f35;
@@ -37,7 +37,7 @@
         color: var(--color-light-text-primary);
     }
 .pagination__tag_1f27o.pagination__tag_1f27o:active:not(:disabled) {
-        background-color: var(--color-light-bg-neutral);
+        background-color: var(--color-light-bg-quaternary);
     }
 .pagination__tag_1f27o.pagination__tag_1f27o.pagination__checked_1f27o {
         cursor: default;

package/pagination/cssm/components/tag/index.module.css

@@ -1,5 +1,5 @@
 :root {
-    --color-light-bg-neutral: #dbdee1;
+    --color-light-bg-quaternary: #dbdee1;
     --color-light-bg-secondary-inverted: #233549;
     --color-light-bg-tertiary: #e7e9eb;
     --color-light-text-primary: #0b1f35;
@@ -36,7 +36,7 @@
         color: var(--color-light-text-primary);
     }
 .tag.tag:active:not(:disabled) {
-        background-color: var(--color-light-bg-neutral);
+        background-color: var(--color-light-bg-quaternary);
     }
 .tag.tag.checked {
         cursor: default;

package/pagination/esm/components/tag/index.css

@@ -1,6 +1,6 @@
 /* hash: sbvzq */
 :root {
-    --color-light-bg-neutral: #dbdee1;
+    --color-light-bg-quaternary: #dbdee1;
     --color-light-bg-secondary-inverted: #233549;
     --color-light-bg-tertiary: #e7e9eb;
     --color-light-text-primary: #0b1f35;
@@ -37,7 +37,7 @@
         color: var(--color-light-text-primary);
     }
 .pagination__tag_1f27o.pagination__tag_1f27o:active:not(:disabled) {
-        background-color: var(--color-light-bg-neutral);
+        background-color: var(--color-light-bg-quaternary);
     }
 .pagination__tag_1f27o.pagination__tag_1f27o.pagination__checked_1f27o {
         cursor: default;

package/pagination/modern/components/tag/index.css

@@ -1,6 +1,6 @@
 /* hash: sbvzq */
 :root {
-    --color-light-bg-neutral: #dbdee1;
+    --color-light-bg-quaternary: #dbdee1;
     --color-light-bg-secondary-inverted: #233549;
     --color-light-bg-tertiary: #e7e9eb;
     --color-light-text-primary: #0b1f35;
@@ -37,7 +37,7 @@
         color: var(--color-light-text-primary);
     }
 .pagination__tag_1f27o.pagination__tag_1f27o:active:not(:disabled) {
-        background-color: var(--color-light-bg-neutral);
+        background-color: var(--color-light-bg-quaternary);
     }
 .pagination__tag_1f27o.pagination__tag_1f27o.pagination__checked_1f27o {
         cursor: default;

package/phone-input/esm/utils/index.js

@@ -2,11 +2,13 @@
  * Удаляет форматирование номера телефона
  * @param phone Номер телефона
  */
-var deleteFormatting = function (phone) { return phone
-    .replace('+', '')
-    .replace(/^7/, '')
-    .replace(/\s/g, '')
-    .replace(/-/g, ''); };
+var deleteFormatting = function (phone) {
+    return phone
+        .replace('+', '')
+        .replace(/^7/, '')
+        .replace(/\s/g, '')
+        .replace(/-/g, '');
+};
 function setCaretPosition(_a) {
     var position = _a.position, inputRef = _a.inputRef;
     window.requestAnimationFrame(function () {

package/phone-input/utils/index.js

@@ -4,13 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
  * Удаляет форматирование номера телефона
  * @param phone Номер телефона
  */
-var deleteFormatting = function (phone) {
-    return phone
-        .replace('+', '')
-        .replace(/^7/, '')
-        .replace(/\s/g, '')
-        .replace(/-/g, '');
-};
+var deleteFormatting = function (phone) { return phone
+    .replace('+', '')
+    .replace(/^7/, '')
+    .replace(/\s/g, '')
+    .replace(/-/g, ''); };
 function setCaretPosition(_a) {
     var position = _a.position, inputRef = _a.inputRef;
     window.requestAnimationFrame(function () {

package/picker-button/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('./tslib.es6-c60862eb.js');
+var tslib_es6 = require('./tslib.es6-057c91a6.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsSelect = require('../select');

package/picker-button/esm/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from './tslib.es6-fe077bfd.js';
+import { _ as __rest, a as __assign } from './tslib.es6-88641d51.js';
 import React, { forwardRef } from 'react';
 import cn from 'classnames';
 import { BaseSelect, OptionsList, Optgroup } from '../../select/esm';

package/picker-button/esm/field/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from '../tslib.es6-fe077bfd.js';
+import { _ as __rest, a as __assign } from '../tslib.es6-88641d51.js';
 import React from 'react';
 import cn from 'classnames';
 import { Button } from '../../../button/esm';

package/picker-button/esm/field/index.js

@@ -1,4 +1,4 @@
-import '../tslib.es6-fe077bfd.js';
+import '../tslib.es6-88641d51.js';
 import 'react';
 import 'classnames';
 import '../../../button/esm';

package/picker-button/esm/index.js

@@ -1,4 +1,4 @@
-import './tslib.es6-fe077bfd.js';
+import './tslib.es6-88641d51.js';
 import 'react';
 import 'classnames';
 import '../../select/esm';

package/picker-button/esm/option/Component.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign } from '../tslib.es6-fe077bfd.js';
+import { _ as __rest, a as __assign } from '../tslib.es6-88641d51.js';
 import React from 'react';
 import { Option as Option$1 } from '../../../select/esm';
 

package/picker-button/esm/option/index.js

@@ -1,4 +1,4 @@
-import '../tslib.es6-fe077bfd.js';
+import '../tslib.es6-88641d51.js';
 import 'react';
 import '../../../select/esm';
 export { Option } from './Component.js';

package/picker-button/field/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-c60862eb.js');
+var tslib_es6 = require('../tslib.es6-057c91a6.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsButton = require('../../button');

package/picker-button/field/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../tslib.es6-c60862eb.js');
+require('../tslib.es6-057c91a6.js');
 require('react');
 require('classnames');
 require('../../button');

package/picker-button/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('./tslib.es6-c60862eb.js');
+require('./tslib.es6-057c91a6.js');
 require('react');
 require('classnames');
 require('../select');

package/picker-button/option/Component.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../tslib.es6-c60862eb.js');
+var tslib_es6 = require('../tslib.es6-057c91a6.js');
 var React = require('react');
 var coreComponentsSelect = require('../../select');
 

package/picker-button/option/index.js

@@ -1,6 +1,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../tslib.es6-c60862eb.js');
+require('../tslib.es6-057c91a6.js');
 require('react');
 require('../../select');
 var option_Component = require('./Component.js');

package/radio/cssm/index.module.css

@@ -1,13 +1,13 @@
 :root {
-    --color-light-bg-neutral: #dbdee1;
     --color-light-bg-primary: #fff;
+    --color-light-bg-quaternary: #dbdee1;
     --color-light-border-key: #0b1f35;
     --color-light-border-link: #007aff;
-    --color-light-border-secondary-inverted: #b6bcc3;
-    --color-light-border-tertiary-inverted: #6d7986;
+    --color-light-border-underline: #b6bcc3;
+    --color-light-border-underline-inverted: #6d7986;
     --color-light-graphic-accent: #ef3124;
-    --color-light-graphic-neutral: #dbdee1;
     --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-quaternary: #dbdee1;
     --color-light-graphic-tertiary: #b6bcc3;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
@@ -42,9 +42,9 @@
 
     /* unchecked */
     --radio-bg-color: var(--color-light-graphic-primary-inverted);
-    --radio-border-color: var(--color-light-border-tertiary-inverted);
+    --radio-border-color: var(--color-light-border-underline-inverted);
     --radio-hover-bg-color: var(--color-light-graphic-tertiary);
-    --radio-hover-border-color: var(--color-light-border-tertiary-inverted);
+    --radio-hover-border-color: var(--color-light-border-underline-inverted);
     --radio-active-bg-color: var(--color-light-graphic-tertiary);
     --radio-active-border-color: var(--color-light-border-key);
 
@@ -59,14 +59,14 @@
     /* disabled */
     --radio-disabled-color: var(--color-light-text-secondary);
     --radio-disabled-bg-color: var(--color-light-graphic-primary-inverted);
-    --radio-disabled-border-color: var(--color-light-graphic-neutral);
+    --radio-disabled-border-color: var(--color-light-graphic-quaternary);
 
     /* inactive */
-    --radio-inactive-border-color: var(--color-light-border-secondary-inverted);
+    --radio-inactive-border-color: var(--color-light-border-underline);
     --radio-checked-inactive-color: var(--color-light-graphic-tertiary);
 
     /* disabled and checked */
-    --radio-checked-disabled-bg-color: var(--color-light-bg-neutral);
+    --radio-checked-disabled-bg-color: var(--color-light-bg-quaternary);
     --radio-checked-disabled-border-color: transparent;
 
     /* icon */

package/radio/esm/index.css

@@ -1,14 +1,14 @@
 /* hash: 1vrwb */
 :root {
-    --color-light-bg-neutral: #dbdee1;
     --color-light-bg-primary: #fff;
+    --color-light-bg-quaternary: #dbdee1;
     --color-light-border-key: #0b1f35;
     --color-light-border-link: #007aff;
-    --color-light-border-secondary-inverted: #b6bcc3;
-    --color-light-border-tertiary-inverted: #6d7986;
+    --color-light-border-underline: #b6bcc3;
+    --color-light-border-underline-inverted: #6d7986;
     --color-light-graphic-accent: #ef3124;
-    --color-light-graphic-neutral: #dbdee1;
     --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-quaternary: #dbdee1;
     --color-light-graphic-tertiary: #b6bcc3;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
@@ -43,9 +43,9 @@
 
     /* unchecked */
     --radio-bg-color: var(--color-light-graphic-primary-inverted);
-    --radio-border-color: var(--color-light-border-tertiary-inverted);
+    --radio-border-color: var(--color-light-border-underline-inverted);
     --radio-hover-bg-color: var(--color-light-graphic-tertiary);
-    --radio-hover-border-color: var(--color-light-border-tertiary-inverted);
+    --radio-hover-border-color: var(--color-light-border-underline-inverted);
     --radio-active-bg-color: var(--color-light-graphic-tertiary);
     --radio-active-border-color: var(--color-light-border-key);
 
@@ -60,14 +60,14 @@
     /* disabled */
     --radio-disabled-color: var(--color-light-text-secondary);
     --radio-disabled-bg-color: var(--color-light-graphic-primary-inverted);
-    --radio-disabled-border-color: var(--color-light-graphic-neutral);
+    --radio-disabled-border-color: var(--color-light-graphic-quaternary);
 
     /* inactive */
-    --radio-inactive-border-color: var(--color-light-border-secondary-inverted);
+    --radio-inactive-border-color: var(--color-light-border-underline);
     --radio-checked-inactive-color: var(--color-light-graphic-tertiary);
 
     /* disabled and checked */
-    --radio-checked-disabled-bg-color: var(--color-light-bg-neutral);
+    --radio-checked-disabled-bg-color: var(--color-light-bg-quaternary);
     --radio-checked-disabled-border-color: transparent;
 
     /* icon */

package/radio/index.css

@@ -1,14 +1,14 @@
 /* hash: 1vrwb */
 :root {
-    --color-light-bg-neutral: #dbdee1;
     --color-light-bg-primary: #fff;
+    --color-light-bg-quaternary: #dbdee1;
     --color-light-border-key: #0b1f35;
     --color-light-border-link: #007aff;
-    --color-light-border-secondary-inverted: #b6bcc3;
-    --color-light-border-tertiary-inverted: #6d7986;
+    --color-light-border-underline: #b6bcc3;
+    --color-light-border-underline-inverted: #6d7986;
     --color-light-graphic-accent: #ef3124;
-    --color-light-graphic-neutral: #dbdee1;
     --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-quaternary: #dbdee1;
     --color-light-graphic-tertiary: #b6bcc3;
     --color-light-text-primary: #0b1f35;
     --color-light-text-secondary: #546272;
@@ -43,9 +43,9 @@
 
     /* unchecked */
     --radio-bg-color: var(--color-light-graphic-primary-inverted);
-    --radio-border-color: var(--color-light-border-tertiary-inverted);
+    --radio-border-color: var(--color-light-border-underline-inverted);
     --radio-hover-bg-color: var(--color-light-graphic-tertiary);
-    --radio-hover-border-color: var(--color-light-border-tertiary-inverted);
+    --radio-hover-border-color: var(--color-light-border-underline-inverted);
     --radio-active-bg-color: var(--color-light-graphic-tertiary);
     --radio-active-border-color: var(--color-light-border-key);
 
@@ -60,14 +60,14 @@
     /* disabled */
     --radio-disabled-color: var(--color-light-text-secondary);
     --radio-disabled-bg-color: var(--color-light-graphic-primary-inverted);
-    --radio-disabled-border-color: var(--color-light-graphic-neutral);
+    --radio-disabled-border-color: var(--color-light-graphic-quaternary);
 
     /* inactive */
-    --radio-inactive-border-color: var(--color-light-border-secondary-inverted);
+    --radio-inactive-border-color: var(--color-light-border-underline);
     --radio-checked-inactive-color: var(--color-light-graphic-tertiary);
 
     /* disabled and checked */
-    --radio-checked-disabled-bg-color: var(--color-light-bg-neutral);
+    --radio-checked-disabled-bg-color: var(--color-light-bg-quaternary);
     --radio-checked-disabled-border-color: transparent;
 
     /* icon */