fix: update colors components (#931)

.changeset/curly-sloths-mix.md

@@ -0,0 +1,7 @@
+---
+"@alfalab/core-components-select": major
+"@alfalab/core-components-slider-input": major
+---
+
+- В компонентах Select и SliderInput цветовые токены изменены на новые (синхронизация и обновление цветовых токенов в рамках перевода их значений на базовую палитру).
+- Удалена темизация для intranet и mobile

.changeset/gentle-geckos-help.md

@@ -0,0 +1,6 @@
+---
+"@alfalab/core-components-filter-tag": major
+---
+
+- В компоненте FilterTag цветовые токены изменены на новые (синхронизация и обновление цветовых токенов в рамках перевода их значений на базовую палитру).
+- Удалены некоторые css переменные для мобильного компонента и темизация для mobile

.changeset/gold-ligers-knock.md

@@ -0,0 +1,6 @@
+---
+"@alfalab/core-components-button": major
+---
+
+- В компоненте Button цветовые токены изменены на новые (синхронизация и обновление цветовых токенов в рамках перевода их значений на базовую палитру).
+- Удалена темизация для intranet, click, mobil

.changeset/long-bulldogs-impress.md

@@ -0,0 +1,7 @@
+---
+"@alfalab/core-components-form-control": major
+"@alfalab/core-components-input": major
+---
+
+- В компонентах FormControl и Input цветовые токены изменены на новые (синхронизация и обновление цветовых токенов в рамках перевода их значений на базовую палитру).
+- Удалены некоторые css переменные для мобильных компонентов и темизация для intranet и mobile

.changeset/quick-chefs-greet.md

@@ -0,0 +1,6 @@
+---
+"@alfalab/core-components-tag": major
+---
+
+- В компоненте Tag цветовые токены изменены на новые (синхронизация и обновление цветовых токенов в рамках перевода их значений на базовую палитру).
+- Удалены некоторые css переменные для мобильного компонента и темизация для intranet, click, mobile

.changeset/smart-plums-pump.md

@@ -0,0 +1,12 @@
+---
+"@alfalab/core-components-action-button": minor
+"@alfalab/core-components-badge": minor
+"@alfalab/core-components-icon-button": minor
+"@alfalab/core-components-international-phone-input": minor
+"@alfalab/core-components-picker-button": minor
+"@alfalab/core-components-spinner": minor
+"@alfalab/core-components-stepper-input": minor
+"@alfalab/core-components-universal-date-input": minor
+---
+
+В компонентах ActionButton, Badge, IconButton, InternationalPhoneInput, PickerButton, Spinner, StepperInput, UniversalDateInput цветовые токены изменены на новые (синхронизация и обновление цветовых токенов в рамках перевода их значений на базовую палитру)

.changeset/sweet-suns-dress.md

@@ -0,0 +1,6 @@
+---
+"@alfalab/core-components-calendar-input": major
+---
+
+- В компоненте CalendarInput цветовые токены изменены на новые (синхронизация и обновление цветовых токенов в рамках перевода их значений на базовую палитру).
+- Удалена темизация для intranet и mobile

packages/action-button/src/Component.tsx

@@ -122,6 +122,7 @@ export const ActionButton = forwardRef<HTMLAnchorElement | HTMLButtonElement, Ac
                 {
                     [styles.focused]: focused,
                     [styles.disabled]: disabled,
+                    [colorStyles[colors].disabled]: disabled,
                     [styles.loading]: showLoader,
                 },
                 className,

packages/action-button/src/default.module.css

@@ -3,21 +3,26 @@
 :root {
     /* primary */
     --action-button-primary-base-color: var(--color-light-text-primary);
-    --action-button-primary-base-icon-color: var(--color-light-graphic-primary-inverted);
-    --action-button-primary-base-bg-color: var(--color-light-bg-primary-inverted);
-    --action-button-primary-hover-color: var(--color-light-bg-primary-inverted-tint-15);
-    --action-button-primary-active-color: var(--color-light-bg-primary-inverted-tint-20);
+    --action-button-primary-base-icon-color: var(--color-light-neutral-1500-inverted);
+    --action-button-primary-base-bg-color: var(--color-light-accent-secondary);
+    --action-button-primary-hover-color: var(--color-light-accent-secondary-hover);
+    --action-button-primary-active-color: var(--color-light-accent-secondary-press);
 
     /* secondary */
     --action-button-secondary-base-color: var(--color-light-text-primary);
-    --action-button-secondary-base-icon-color: var(--color-light-graphic-primary);
-    --action-button-secondary-base-bg-color: var(--color-light-bg-secondary);
-    --action-button-secondary-hover-color: var(--color-light-bg-secondary-shade-7);
-    --action-button-secondary-active-color: var(--color-light-bg-secondary-shade-15);
+    --action-button-secondary-base-icon-color: var(--color-light-neutral-1500);
+    --action-button-secondary-base-bg-color: var(--color-light-neutral-100);
+    --action-button-secondary-hover-color: var(--color-light-neutral-100-hover);
+    --action-button-secondary-active-color: var(--color-light-neutral-100-press);
 
     /* spinner */
-    --action-button-spinner-primary-color: var(--color-light-graphic-primary-inverted);
-    --action-button-spinner-default-color: var(--color-light-graphic-primary);
+    --action-button-spinner-primary-color: var(--color-light-neutral-1500-inverted);
+    --action-button-spinner-default-color: var(--color-light-neutral-1500);
+
+    /* disabled */
+    --action-button-disabled-color: var(--color-light-text-tertiary);
+    --action-button-disabled-icon-color: var(--color-light-neutral-500);
+    --action-button-disabled-bg-color: var(--color-light-neutral-100);
 }
 
 .primary {
@@ -61,3 +66,12 @@
         color: var(--action-button-spinner-default-color);
     }
 }
+
+.disabled {
+    color: var(--action-button-disabled-color);
+
+    & .iconWrapper {
+        color: var(--action-button-disabled-icon-color);
+        background-color: var(--action-button-disabled-bg-color);
+    }
+}

packages/action-button/src/index.module.css

@@ -30,7 +30,6 @@
 }
 
 .disabled {
-    opacity: 0.3;
     cursor: not-allowed;
     pointer-events: none;
 }

packages/action-button/src/inverted.module.css

@@ -3,25 +3,30 @@
 :root {
     /* primary */
     --action-button-inverted-primary-base-color: var(--color-light-text-primary-inverted);
-    --action-button-inverted-primary-base-icon-color: var(--color-light-graphic-primary);
-    --action-button-inverted-primary-base-bg-color: var(--color-light-bg-primary);
-    --action-button-inverted-primary-hover-color: var(--color-light-bg-primary-shade-7);
-    --action-button-inverted-primary-active-color: var(--color-light-bg-primary-shade-15);
+    --action-button-inverted-primary-base-icon-color: var(--color-light-neutral-1500);
+    --action-button-inverted-primary-base-bg-color: var(--color-light-accent-secondary-inverted);
+    --action-button-inverted-primary-hover-color: var(
+        --color-light-accent-secondary-inverted-hover
+    );
+    --action-button-inverted-primary-active-color: var(
+        --color-light-accent-secondary-inverted-press
+    );
 
     /* secondary */
     --action-button-inverted-secondary-base-color: var(--color-light-text-primary-inverted);
-    --action-button-inverted-secondary-base-icon-color: var(--color-light-graphic-primary-inverted);
-    --action-button-inverted-secondary-base-bg-color: var(--color-light-bg-secondary-inverted);
-    --action-button-inverted-secondary-hover-color: var(
-        --color-light-bg-secondary-inverted-tint-15
-    );
-    --action-button-inverted-secondary-active-color: var(
-        --color-light-bg-secondary-inverted-tint-20
-    );
+    --action-button-inverted-secondary-base-icon-color: var(--color-light-neutral-1500-inverted);
+    --action-button-inverted-secondary-base-bg-color: var(--color-light-neutral-100-inverted);
+    --action-button-inverted-secondary-hover-color: var(--color-light-neutral-100-inverted-hover);
+    --action-button-inverted-secondary-active-color: var(--color-light-neutral-100-inverted-press);
 
     /* spinner */
-    --action-button-spinner-inverted-default-color: var(--color-light-graphic-primary-inverted);
-    --action-button-spinner-inverted-primary-color: var(--color-light-graphic-primary);
+    --action-button-spinner-inverted-default-color: var(--color-light-neutral-1500);
+    --action-button-spinner-inverted-primary-color: var(--color-light-neutral-1500-inverted);
+
+    /* disabled */
+    --action-button-inverted-disabled-color: var(--color-light-text-tertiary-inverted);
+    --action-button-inverted-disabled-icon-color: var(--color-light-neutral-500-inverted);
+    --action-button-inverted-disabled-bg-color: var(--color-light-neutral-100-inverted);
 }
 
 .primary {
@@ -65,3 +70,12 @@
         color: var(--action-button-spinner-inverted-default-color);
     }
 }
+
+.disabled {
+    color: var(--action-button-inverted-disabled-color);
+
+    & .iconWrapper {
+        color: var(--action-button-inverted-disabled-icon-color);
+        background-color: var(--action-button-inverted-disabled-bg-color);
+    }
+}

packages/action-button/src/static.module.css

@@ -2,18 +2,23 @@
 
 :root {
     /* primary */
-    --action-button-static-primary-base-color: var(--color-static-text-primary-dark);
-    --action-button-static-primary-base-icon-color: var(--color-static-graphic-light);
-    --action-button-static-primary-base-bg-color: var(--color-static-bg-primary-dark);
+    --action-button-static-primary-base-color: var(--color-static-text-primary);
+    --action-button-static-primary-base-icon-color: var(--color-static-neutral-1500-inverted);
+    --action-button-static-primary-base-bg-color: var(--color-static-accent-secondary);
 
     /* secondary */
-    --action-button-static-secondary-base-color: var(--color-static-text-primary-dark);
-    --action-button-static-secondary-base-icon-color: var(--color-static-graphic-dark);
-    --action-button-static-secondary-base-bg-color: var(--color-static-bg-secondary-light);
+    --action-button-static-secondary-base-color: var(--color-static-text-primary);
+    --action-button-static-secondary-base-icon-color: var(--color-static-neutral-1500);
+    --action-button-static-secondary-base-bg-color: var(--color-static-neutral-100);
 
     /* spinner */
-    --action-button-spinner-static-primary-color: var(--color-static-graphic-light);
-    --action-button-spinner-static-secondary-color: var(--color-static-graphic-dark);
+    --action-button-spinner-static-primary-color: var(--color-static-neutral-1500-inverted);
+    --action-button-spinner-static-secondary-color: var(--color-static-neutral-1500);
+
+    /* disabled */
+    --action-button-static-disabled-color: var(--color-static-text-tertiary);
+    --action-button-static-disabled-icon-color: var(--color-static-neutral-500);
+    --action-button-static-disabled-bg-color: var(--color-static-neutral-100);
 }
 
 .primary {
@@ -41,3 +46,12 @@
         color: var(--action-button-spinner-static-secondary-color);
     }
 }
+
+.disabled {
+    color: var(--action-button-static-disabled-color);
+
+    & .iconWrapper {
+        color: var(--action-button-static-disabled-icon-color);
+        background-color: var(--action-button-static-disabled-bg-color);
+    }
+}

packages/amount-input/src/__snapshots__/Component.test.tsx.snap

@@ -21,7 +21,7 @@ Object {
                 class="input"
               >
                 <input
-                  class="input input input input"
+                  class="input input input"
                   inputmode="decimal"
                   pattern="[0-9\\\\s\\\\.,]*"
                   placeholder="0 ₽"
@@ -70,7 +70,7 @@ Object {
               class="input"
             >
               <input
-                class="input input input input"
+                class="input input input"
                 inputmode="decimal"
                 pattern="[0-9\\\\s\\\\.,]*"
                 placeholder="0 ₽"
@@ -176,7 +176,7 @@ Object {
                 class="input"
               >
                 <input
-                  class="input input input input"
+                  class="input input input"
                   inputmode="decimal"
                   pattern="[0-9\\\\s\\\\.,]*"
                   placeholder="0 ₽"
@@ -224,7 +224,7 @@ Object {
                 class="input"
               >
                 <input
-                  class="input input input input"
+                  class="input input input"
                   inputmode="decimal"
                   pattern="[0-9\\\\s\\\\.,]*"
                   placeholder="0 $"
@@ -277,7 +277,7 @@ Object {
               class="input"
             >
               <input
-                class="input input input input"
+                class="input input input"
                 inputmode="decimal"
                 pattern="[0-9\\\\s\\\\.,]*"
                 placeholder="0 $"