@alfalab/core-components 37.3.0-beta-.1 → 37.3.0-beta.10

package/themes/dist/mixins/select/mobile.css

@@ -1,4 +1,6 @@
 @define-mixin select-mobile {
+    --select-options-list-border-radius: 10px;
+
     /* select mobile footer */
     --select-mobile-footer-border-top: 1px solid var(--color-light-border-primary);
 }

package/themes/dist/mobile.css

@@ -739,12 +739,12 @@
     /* theme */
     --button-active-transform: none;
     /* border-radius */
-    --button-xxs-size-border-radius: var(--border-radius-l);
+    --button-xxs-size-border-radius: var(--border-radius-m);
     --button-xs-size-border-radius: var(--border-radius-l);
     --button-s-size-border-radius: var(--border-radius-l);
-    --button-m-size-border-radius: var(--border-radius-l);
-    --button-l-size-border-radius: var(--border-radius-l);
-    --button-xl-size-border-radius: var(--border-radius-l);
+    --button-m-size-border-radius: var(--border-radius-xl);
+    --button-l-size-border-radius: var(--border-radius-xl);
+    --button-xl-size-border-radius: var(--border-radius-xl);
     /* primary */
     --button-primary-base-bg-color: var(--color-light-bg-secondary-inverted);
     --button-primary-hover-bg-color: var(--color-light-bg-secondary-inverted-tint-15);
@@ -836,9 +836,9 @@
     --radio-icon-color: var(--color-light-graphic-primary-inverted);
     /* theme */
     --form-control-border-radius: var(--border-radius-l);
-    --form-control-s-border-radius: var(--border-radius-l);
-    --form-control-m-border-radius: var(--border-radius-l);
-    --form-control-l-border-radius: var(--border-radius-l);
+    --form-control-s-border-radius: 10px;
+    --form-control-m-border-radius: 10px;
+    --form-control-l-border-radius: 10px;
     --form-control-xl-border-radius: var(--border-radius-l);
     --form-control-border-bottom: 0;
     --form-control-inverted-border-bottom: 0;
@@ -899,6 +899,7 @@
     --filter-tag-separator-background-color-hover: var(--color-dark-border-underline);
     --bottom-sheet-header-border-bottom: 1px solid var(--color-light-border-primary);
     --bottom-sheet-footer-border-top: 1px solid var(--color-light-border-primary);
+    --select-options-list-border-radius: 10px;
     /* select mobile footer */
     --select-mobile-footer-border-top: 1px solid var(--color-light-border-primary);
     --steps-dash-border: 2px solid var(--color-light-graphic-primary);
@@ -909,4 +910,5 @@
     --confirmation-text-font-size: 14px;
     --confirmation-text-line-height: 20px;
     --confirmation-text-color: var(--color-light-text-secondary);
+    --calendar-input-popover-border-radius: 10px;
 }

package/themes/dist/select/intranet.css

@@ -1,4 +1,6 @@
 :root {
+    --select-options-list-border-radius: 10px;
+
     /* select mobile footer */
     --select-mobile-footer-border-top: 1px solid var(--color-light-border-primary);
 }

package/themes/dist/select/mobile.css

@@ -1,4 +1,6 @@
 :root {
+    --select-options-list-border-radius: 10px;
+
     /* select mobile footer */
     --select-mobile-footer-border-top: 1px solid var(--color-light-border-primary);
 }

package/themes/form-control/intranet.css

@@ -1,9 +1,9 @@
 :root {
     /* theme */
     --form-control-border-radius: var(--border-radius-l);
-    --form-control-s-border-radius: var(--border-radius-l);
-    --form-control-m-border-radius: var(--border-radius-l);
-    --form-control-l-border-radius: var(--border-radius-l);
+    --form-control-s-border-radius: 10px;
+    --form-control-m-border-radius: 10px;
+    --form-control-l-border-radius: 10px;
     --form-control-xl-border-radius: var(--border-radius-l);
     --form-control-border-bottom: 0;
     --form-control-inverted-border-bottom: 0;

package/themes/form-control/mobile.css

@@ -1,9 +1,9 @@
 :root {
     /* theme */
     --form-control-border-radius: var(--border-radius-l);
-    --form-control-s-border-radius: var(--border-radius-l);
-    --form-control-m-border-radius: var(--border-radius-l);
-    --form-control-l-border-radius: var(--border-radius-l);
+    --form-control-s-border-radius: 10px;
+    --form-control-m-border-radius: 10px;
+    --form-control-l-border-radius: 10px;
     --form-control-xl-border-radius: var(--border-radius-l);
     --form-control-border-bottom: 0;
     --form-control-inverted-border-bottom: 0;

package/themes/intranet.css

@@ -739,12 +739,12 @@
     /* theme */
     --button-active-transform: none;
     /* border-radius */
-    --button-xxs-size-border-radius: var(--border-radius-l);
+    --button-xxs-size-border-radius: var(--border-radius-m);
     --button-xs-size-border-radius: var(--border-radius-l);
     --button-s-size-border-radius: var(--border-radius-l);
-    --button-m-size-border-radius: var(--border-radius-l);
-    --button-l-size-border-radius: var(--border-radius-l);
-    --button-xl-size-border-radius: var(--border-radius-l);
+    --button-m-size-border-radius: var(--border-radius-xl);
+    --button-l-size-border-radius: var(--border-radius-xl);
+    --button-xl-size-border-radius: var(--border-radius-xl);
     /* primary */
     --button-primary-base-bg-color: var(--color-light-bg-secondary-inverted);
     --button-primary-hover-bg-color: var(--color-light-bg-secondary-inverted-tint-15);
@@ -835,9 +835,9 @@
     --radio-icon-color: var(--color-light-graphic-primary-inverted);
     /* theme */
     --form-control-border-radius: var(--border-radius-l);
-    --form-control-s-border-radius: var(--border-radius-l);
-    --form-control-m-border-radius: var(--border-radius-l);
-    --form-control-l-border-radius: var(--border-radius-l);
+    --form-control-s-border-radius: 10px;
+    --form-control-m-border-radius: 10px;
+    --form-control-l-border-radius: 10px;
     --form-control-xl-border-radius: var(--border-radius-l);
     --form-control-border-bottom: 0;
     --form-control-inverted-border-bottom: 0;
@@ -906,6 +906,7 @@
     --calendar-selected-hover-background: var(--color-light-graphic-accent-tint-15);
     --calendar-select-button-selected-background: var(--color-light-graphic-accent);
     --bottom-sheet-footer-border-top: 1px solid var(--color-light-border-primary);
+    --select-options-list-border-radius: 10px;
     /* select mobile footer */
     --select-mobile-footer-border-top: 1px solid var(--color-light-border-primary);
     /* theme */
@@ -914,4 +915,5 @@
     --confirmation-text-font-size: 14px;
     --confirmation-text-line-height: 20px;
     --confirmation-text-color: var(--color-light-text-secondary);
+    --calendar-input-popover-border-radius: 10px;
 }

package/themes/mixins/button/intranet.css

@@ -3,12 +3,12 @@
     --button-active-transform: none;
 
     /* border-radius */
-    --button-xxs-size-border-radius: var(--border-radius-l);
+    --button-xxs-size-border-radius: var(--border-radius-m);
     --button-xs-size-border-radius: var(--border-radius-l);
     --button-s-size-border-radius: var(--border-radius-l);
-    --button-m-size-border-radius: var(--border-radius-l);
-    --button-l-size-border-radius: var(--border-radius-l);
-    --button-xl-size-border-radius: var(--border-radius-l);
+    --button-m-size-border-radius: var(--border-radius-xl);
+    --button-l-size-border-radius: var(--border-radius-xl);
+    --button-xl-size-border-radius: var(--border-radius-xl);
 
     /* primary */
     --button-primary-base-bg-color: var(--color-light-bg-secondary-inverted);

package/themes/mixins/button/mobile.css

@@ -3,12 +3,12 @@
     --button-active-transform: none;
 
     /* border-radius */
-    --button-xxs-size-border-radius: var(--border-radius-l);
+    --button-xxs-size-border-radius: var(--border-radius-m);
     --button-xs-size-border-radius: var(--border-radius-l);
     --button-s-size-border-radius: var(--border-radius-l);
-    --button-m-size-border-radius: var(--border-radius-l);
-    --button-l-size-border-radius: var(--border-radius-l);
-    --button-xl-size-border-radius: var(--border-radius-l);
+    --button-m-size-border-radius: var(--border-radius-xl);
+    --button-l-size-border-radius: var(--border-radius-xl);
+    --button-xl-size-border-radius: var(--border-radius-xl);
 
     /* primary */
     --button-primary-base-bg-color: var(--color-light-bg-secondary-inverted);

package/themes/mixins/calendar-input/intranet.css

@@ -0,0 +1,3 @@
+@define-mixin calendar-input-intranet {
+    --calendar-input-popover-border-radius: 10px;
+}

package/themes/mixins/calendar-input/mobile.css

@@ -0,0 +1,3 @@
+@define-mixin calendar-input-mobile {
+    --calendar-input-popover-border-radius: 10px;
+}

package/themes/mixins/form-control/intranet.css

@@ -1,9 +1,9 @@
 @define-mixin form-control-intranet {
     /* theme */
     --form-control-border-radius: var(--border-radius-l);
-    --form-control-s-border-radius: var(--border-radius-l);
-    --form-control-m-border-radius: var(--border-radius-l);
-    --form-control-l-border-radius: var(--border-radius-l);
+    --form-control-s-border-radius: 10px;
+    --form-control-m-border-radius: 10px;
+    --form-control-l-border-radius: 10px;
     --form-control-xl-border-radius: var(--border-radius-l);
     --form-control-border-bottom: 0;
     --form-control-inverted-border-bottom: 0;

package/themes/mixins/form-control/mobile.css

@@ -1,9 +1,9 @@
 @define-mixin form-control-mobile {
     /* theme */
     --form-control-border-radius: var(--border-radius-l);
-    --form-control-s-border-radius: var(--border-radius-l);
-    --form-control-m-border-radius: var(--border-radius-l);
-    --form-control-l-border-radius: var(--border-radius-l);
+    --form-control-s-border-radius: 10px;
+    --form-control-m-border-radius: 10px;
+    --form-control-l-border-radius: 10px;
     --form-control-xl-border-radius: var(--border-radius-l);
     --form-control-border-bottom: 0;
     --form-control-inverted-border-bottom: 0;

package/themes/mixins/intranet.css

@@ -10,6 +10,7 @@
 @import './bottom-sheet/intranet.css';
 @import './select/intranet.css';
 @import './confirmation/intranet.css';
+@import './calendar-input/intranet.css';
 
 @define-mixin theme-intranet {
     @mixin button-intranet;
@@ -24,4 +25,5 @@
     @mixin bottom-sheet-intranet;
     @mixin select-intranet;
     @mixin confirmation-intranet;
+    @mixin calendar-input-intranet;
 }

package/themes/mixins/mobile.css

@@ -11,6 +11,7 @@
 @import './select/mobile.css';
 @import './steps/mobile.css';
 @import './confirmation/mobile.css';
+@import './calendar-input/mobile.css';
 
 @define-mixin theme-mobile {
     @mixin button-mobile;
@@ -26,4 +27,5 @@
     @mixin select-mobile;
     @mixin steps-mobile;
     @mixin confirmation-mobile;
+    @mixin calendar-input-mobile;
 }

package/themes/mixins/select/intranet.css

@@ -1,4 +1,6 @@
 @define-mixin select-intranet {
+    --select-options-list-border-radius: 10px;
+
     /* select mobile footer */
     --select-mobile-footer-border-top: 1px solid var(--color-light-border-primary);
 }

package/themes/mixins/select/mobile.css

@@ -1,4 +1,6 @@
 @define-mixin select-mobile {
+    --select-options-list-border-radius: 10px;
+
     /* select mobile footer */
     --select-mobile-footer-border-top: 1px solid var(--color-light-border-primary);
 }

package/themes/mobile.css

@@ -739,12 +739,12 @@
     /* theme */
     --button-active-transform: none;
     /* border-radius */
-    --button-xxs-size-border-radius: var(--border-radius-l);
+    --button-xxs-size-border-radius: var(--border-radius-m);
     --button-xs-size-border-radius: var(--border-radius-l);
     --button-s-size-border-radius: var(--border-radius-l);
-    --button-m-size-border-radius: var(--border-radius-l);
-    --button-l-size-border-radius: var(--border-radius-l);
-    --button-xl-size-border-radius: var(--border-radius-l);
+    --button-m-size-border-radius: var(--border-radius-xl);
+    --button-l-size-border-radius: var(--border-radius-xl);
+    --button-xl-size-border-radius: var(--border-radius-xl);
     /* primary */
     --button-primary-base-bg-color: var(--color-light-bg-secondary-inverted);
     --button-primary-hover-bg-color: var(--color-light-bg-secondary-inverted-tint-15);
@@ -836,9 +836,9 @@
     --radio-icon-color: var(--color-light-graphic-primary-inverted);
     /* theme */
     --form-control-border-radius: var(--border-radius-l);
-    --form-control-s-border-radius: var(--border-radius-l);
-    --form-control-m-border-radius: var(--border-radius-l);
-    --form-control-l-border-radius: var(--border-radius-l);
+    --form-control-s-border-radius: 10px;
+    --form-control-m-border-radius: 10px;
+    --form-control-l-border-radius: 10px;
     --form-control-xl-border-radius: var(--border-radius-l);
     --form-control-border-bottom: 0;
     --form-control-inverted-border-bottom: 0;
@@ -899,6 +899,7 @@
     --filter-tag-separator-background-color-hover: var(--color-dark-border-underline);
     --bottom-sheet-header-border-bottom: 1px solid var(--color-light-border-primary);
     --bottom-sheet-footer-border-top: 1px solid var(--color-light-border-primary);
+    --select-options-list-border-radius: 10px;
     /* select mobile footer */
     --select-mobile-footer-border-top: 1px solid var(--color-light-border-primary);
     --steps-dash-border: 2px solid var(--color-light-graphic-primary);
@@ -909,4 +910,5 @@
     --confirmation-text-font-size: 14px;
     --confirmation-text-line-height: 20px;
     --confirmation-text-color: var(--color-light-text-secondary);
+    --calendar-input-popover-border-radius: 10px;
 }

package/themes/select/intranet.css

@@ -1,4 +1,6 @@
 :root {
+    --select-options-list-border-radius: 10px;
+
     /* select mobile footer */
     --select-mobile-footer-border-top: 1px solid var(--color-light-border-primary);
 }

package/themes/select/mobile.css

@@ -1,4 +1,6 @@
 :root {
+    --select-options-list-border-radius: 10px;
+
     /* select mobile footer */
     --select-mobile-footer-border-top: 1px solid var(--color-light-border-primary);
 }

package/toast-plate/cssm/default.module.css

@@ -1,6 +1,6 @@
 :root {
-    --color-light-bg-primary-inverted: #121212;
-    --color-light-border-secondary-inverted: #262629;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-border-secondary-inverted: #3c4c5d;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/toast-plate/cssm/inverted.module.css

@@ -1,7 +1,7 @@
 :root {
     --color-light-bg-primary: #fff;
-    --color-light-border-secondary: #e9e9eb;
-    --color-light-text-primary: #000;
+    --color-light-border-secondary: #e7e9eb;
+    --color-light-text-primary: #0b1f35;
 }
 :root {
 

package/toast-plate/default.css

@@ -1,7 +1,7 @@
 /* hash: 8ijo2 */
 :root {
-    --color-light-bg-primary-inverted: #121212;
-    --color-light-border-secondary-inverted: #262629;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-border-secondary-inverted: #3c4c5d;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/toast-plate/esm/default.css

@@ -1,7 +1,7 @@
 /* hash: 8ijo2 */
 :root {
-    --color-light-bg-primary-inverted: #121212;
-    --color-light-border-secondary-inverted: #262629;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-border-secondary-inverted: #3c4c5d;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/toast-plate/esm/inverted.css

@@ -1,8 +1,8 @@
 /* hash: 1kanr */
 :root {
     --color-light-bg-primary: #fff;
-    --color-light-border-secondary: #e9e9eb;
-    --color-light-text-primary: #000;
+    --color-light-border-secondary: #e7e9eb;
+    --color-light-text-primary: #0b1f35;
 }
 :root {
 

package/toast-plate/inverted.css

@@ -1,8 +1,8 @@
 /* hash: 1kanr */
 :root {
     --color-light-bg-primary: #fff;
-    --color-light-border-secondary: #e9e9eb;
-    --color-light-text-primary: #000;
+    --color-light-border-secondary: #e7e9eb;
+    --color-light-text-primary: #0b1f35;
 }
 :root {
 

package/toast-plate/modern/default.css

@@ -1,7 +1,7 @@
 /* hash: 8ijo2 */
 :root {
-    --color-light-bg-primary-inverted: #121212;
-    --color-light-border-secondary-inverted: #262629;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-border-secondary-inverted: #3c4c5d;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/toast-plate/modern/inverted.css

@@ -1,8 +1,8 @@
 /* hash: 1kanr */
 :root {
     --color-light-bg-primary: #fff;
-    --color-light-border-secondary: #e9e9eb;
-    --color-light-text-primary: #000;
+    --color-light-border-secondary: #e7e9eb;
+    --color-light-text-primary: #0b1f35;
 }
 :root {
 

package/tooltip/Component.js

@@ -1,4 +1,4 @@
-var Component = require('./Component-bf88606c.js');
+var Component = require('./Component-e056e813.js');
 require('react');
 require('react-merge-refs');
 require('classnames');

package/tooltip/component.responsive.js

@@ -1,4 +1,4 @@
-var Component = require('./Component-bf88606c.js');
+var Component = require('./Component-e056e813.js');
 var React = require('react');
 var cn = require('classnames');
 var coreComponentsBottomSheet = require('../bottom-sheet');

package/tooltip/cssm/default.module.css

@@ -1,5 +1,5 @@
 :root {
-    --color-light-bg-primary-inverted: #121212;
+    --color-light-bg-primary-inverted: #0b1f35;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/tooltip/cssm/inverted.module.css

@@ -1,7 +1,7 @@
 :root {
     --color-light-bg-primary: #fff;
-    --color-light-bg-primary-inverted: #121212;
-    --color-light-text-primary: #000;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-text-primary: #0b1f35;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/tooltip/default.css

@@ -1,6 +1,6 @@
 /* hash: 1hmj3 */
 :root {
-    --color-light-bg-primary-inverted: #121212;
+    --color-light-bg-primary-inverted: #0b1f35;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/tooltip/desktop.d.ts

@@ -1 +1 @@
-export * from "./Component-bf88606c";
+export * from "./Component-e056e813";

package/tooltip/desktop.js

@@ -1,4 +1,4 @@
-var Component = require('./Component-bf88606c.js');
+var Component = require('./Component-e056e813.js');
 require('react');
 require('react-merge-refs');
 require('classnames');

package/tooltip/esm/Component.js

@@ -1,4 +1,4 @@
-export { T as TooltipDesktop } from './Component-50a5e072.js';
+export { T as TooltipDesktop } from './Component-088c25a0.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/tooltip/esm/component.responsive.js

@@ -1,4 +1,4 @@
-import { _ as __rest, a as __assign, T as TooltipDesktop } from './Component-50a5e072.js';
+import { _ as __rest, a as __assign, T as TooltipDesktop } from './Component-088c25a0.js';
 import React, { Fragment } from 'react';
 import cn from 'classnames';
 import { BottomSheet } from '../../bottom-sheet/esm';

package/tooltip/esm/default.css

@@ -1,6 +1,6 @@
 /* hash: 1hmj3 */
 :root {
-    --color-light-bg-primary-inverted: #121212;
+    --color-light-bg-primary-inverted: #0b1f35;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/tooltip/esm/desktop.d.ts

@@ -1 +1 @@
-export * from "./Component-50a5e072";
+export * from "./Component-088c25a0";

package/tooltip/esm/desktop.js

@@ -1,4 +1,4 @@
-export { T as TooltipDesktop } from './Component-50a5e072.js';
+export { T as TooltipDesktop } from './Component-088c25a0.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/tooltip/esm/index.js

@@ -1,4 +1,4 @@
-export { T as Tooltip } from './Component-50a5e072.js';
+export { T as Tooltip } from './Component-088c25a0.js';
 export { TooltipResponsive } from './component.responsive.js';
 import 'react';
 import 'react-merge-refs';

package/tooltip/esm/inverted.css

@@ -1,8 +1,8 @@
 /* hash: 199ek */
 :root {
     --color-light-bg-primary: #fff;
-    --color-light-bg-primary-inverted: #121212;
-    --color-light-text-primary: #000;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-text-primary: #0b1f35;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/tooltip/esm/responsive.js

@@ -1,5 +1,5 @@
 export { TooltipResponsive } from './component.responsive.js';
-import './Component-50a5e072.js';
+import './Component-088c25a0.js';
 import 'react';
 import 'react-merge-refs';
 import 'classnames';

package/tooltip/index.js

@@ -1,4 +1,4 @@
-var Component = require('./Component-bf88606c.js');
+var Component = require('./Component-e056e813.js');
 var component_responsive = require('./component.responsive.js');
 require('react');
 require('react-merge-refs');

package/tooltip/inverted.css

@@ -1,8 +1,8 @@
 /* hash: 199ek */
 :root {
     --color-light-bg-primary: #fff;
-    --color-light-bg-primary-inverted: #121212;
-    --color-light-text-primary: #000;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-text-primary: #0b1f35;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/tooltip/modern/default.css

@@ -1,6 +1,6 @@
 /* hash: 1hmj3 */
 :root {
-    --color-light-bg-primary-inverted: #121212;
+    --color-light-bg-primary-inverted: #0b1f35;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/tooltip/modern/inverted.css

@@ -1,8 +1,8 @@
 /* hash: 199ek */
 :root {
     --color-light-bg-primary: #fff;
-    --color-light-bg-primary-inverted: #121212;
-    --color-light-text-primary: #000;
+    --color-light-bg-primary-inverted: #0b1f35;
+    --color-light-text-primary: #0b1f35;
     --color-light-text-primary-inverted: #fff;
 }
 :root {

package/tooltip/responsive.js

@@ -1,5 +1,5 @@
 var component_responsive = require('./component.responsive.js');
-require('./Component-bf88606c.js');
+require('./Component-e056e813.js');
 require('react');
 require('react-merge-refs');
 require('classnames');

package/typography/colors.css

@@ -1,17 +1,17 @@
 /* hash: i62g2 */
 :root {
     --color-light-text-accent: #ef3124;
-    --color-light-text-attention: #cb830f;
-    --color-light-text-disabled: rgba(60, 60, 67, 0.18);
-    --color-light-text-link: #0072ef;
+    --color-light-text-attention: #de6a00;
+    --color-light-text-disabled: rgba(11, 31, 53, 0.15);
+    --color-light-text-link: #007aff;
     --color-light-text-negative: #d91d0b;
     --color-light-text-positive: #13a463;
-    --color-light-text-primary: #000;
+    --color-light-text-primary: #0b1f35;
     --color-light-text-primary-inverted: #fff;
-    --color-light-text-secondary: rgba(60, 60, 67, 0.6);
-    --color-light-text-secondary-inverted: rgba(235, 235, 245, 0.6);
-    --color-light-text-tertiary: rgba(60, 60, 67, 0.3);
-    --color-light-text-tertiary-inverted: rgba(235, 235, 245, 0.3);
+    --color-light-text-secondary: rgba(11, 31, 53, 0.7);
+    --color-light-text-secondary-inverted: rgba(255, 255, 255, 0.7);
+    --color-light-text-tertiary: rgba(11, 31, 53, 0.3);
+    --color-light-text-tertiary-inverted: rgba(255, 255, 255, 0.4);
 }
 :root {