@snack-uikit/toggles 0.10.1 → 0.10.3

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.10.3 (2024-08-13)
+
+
+### Bug Fixes
+
+* **FF-0000:** checkbox disabled bgColor ([3005618](https://github.com/cloud-ru-tech/snack-uikit/commit/3005618ede21c1af73b664170303068f9d97e9f0))
+
+
+
+
+
+## 0.10.2 (2024-07-29)
+
+
+### Bug Fixes
+
+* **FF-00:** change checkbox, radio & switch colors ([9164c5a](https://github.com/cloud-ru-tech/snack-uikit/commit/9164c5a4d03b3777dd9c11f42c9fd43f6624b036))
+
+
+
+
+
 ## 0.10.1 (2024-07-19)
 
 ### Only dependencies have been changed

package/dist/components/Checkbox/styles.module.css

@@ -27,17 +27,17 @@
 
 .box{
   box-sizing:border-box;
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-activated, #bec2cf);
   border-style:solid;
 }
 .box[data-checked=false][data-focusvisible=true], .box[data-checked=false][data-hover=true]{
   background-color:var(--sys-neutral-background2-level, #ffffff);
-  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+  border-color:var(--sys-neutral-accent-hovered, #6d707f);
 }
 .box[data-checked=false][data-disabled=true]{
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 .box[data-indeterminate=true], .box[data-checked=true]{
   background-color:var(--sys-primary-accent-default, #794ed3);
@@ -48,8 +48,8 @@
   border-color:var(--sys-primary-accent-hovered, #6851a6);
 }
 .box[data-indeterminate=true][data-disabled=true], .box[data-checked=true][data-disabled=true]{
-  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
-  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  background-color:var(--sys-neutral-text-disabled, #aaaebd);
+  border-color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 .box[data-size=s]{
   width:var(--size-toggles-s-container, 16px);
@@ -83,4 +83,7 @@
 }
 .icon[data-indeterminate=true], .icon[data-checked=true]{
   display:block;
+}
+.icon[data-disabled=true]{
+  color:var(--sys-neutral-decor-disabled, #e6e8ef);
 }

package/dist/components/Favorite/styles.module.css

@@ -34,16 +34,16 @@
   color:var(--sys-neutral-text-support, #6d707f);
 }
 .icon:not([data-disabled=true])[data-icon=star][data-checked=true]{
-  color:var(--sys-yellow-accent-default, #ffc443);
+  color:var(--sys-yellow-accent-default, #e2b134);
 }
 .icon:not([data-disabled=true])[data-icon=star][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=star][data-checked=true][data-hover=true]{
-  color:var(--sys-yellow-accent-hovered, #f1b637);
+  color:var(--sys-yellow-accent-hovered, #d5a133);
 }
 .icon:not([data-disabled=true])[data-icon=heart][data-checked=true]{
-  color:var(--sys-red-accent-default, #cd3c3c);
+  color:var(--sys-red-accent-default, #cb3f3e);
 }
 .icon:not([data-disabled=true])[data-icon=heart][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=heart][data-checked=true][data-hover=true]{
-  color:var(--sys-red-accent-hovered, #bb3c3a);
+  color:var(--sys-red-accent-hovered, #bd4844);
 }
 .icon[data-disabled=true]{
   color:var(--sys-neutral-text-disabled, #aaaebd);

package/dist/components/Radio/styles.module.css

@@ -28,8 +28,8 @@
 .box{
   position:relative;
   box-sizing:border-box;
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
+  background-color:var(--sys-neutral-background2-level, #ffffff);
+  border-color:var(--sys-neutral-decor-activated, #bec2cf);
   border-style:solid;
 }
 .box[data-size=s]{
@@ -46,11 +46,11 @@
 }
 .box[data-focusvisible=true], .box[data-hover=true]{
   background-color:var(--sys-neutral-background2-level, #ffffff);
-  border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
+  border-color:var(--sys-neutral-accent-hovered, #6d707f);
 }
 .box[data-disabled=true]{
-  background-color:var(--sys-neutral-background1-level, #fdfdfd);
-  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 .box[data-checked=true]{
   border-color:var(--sys-primary-accent-default, #794ed3);
@@ -59,7 +59,7 @@
   border-color:var(--sys-primary-accent-hovered, #6851a6);
 }
 .box[data-checked=true][data-disabled=true]{
-  border-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 
 .flag{

package/dist/components/Switch/styles.module.css

@@ -41,7 +41,7 @@
   background-color:var(--sys-neutral-accent-hovered, #6d707f);
 }
 .box[data-disabled=true]{
-  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  background-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 .box[data-checked=true]{
   background-color:var(--sys-primary-accent-default, #794ed3);
@@ -50,7 +50,7 @@
   background-color:var(--sys-primary-accent-hovered, #6851a6);
 }
 .box[data-checked=true][data-disabled=true]{
-  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
+  background-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 
 .containerFlag{
@@ -79,7 +79,7 @@
 }
 
 .flag{
-  background-color:var(--sys-neutral-on-accent, #ffffff);
+  background-color:var(--sys-neutral-background2-level, #ffffff);
 }
 .flag[data-size=s]{
   border-radius:var(--radius-toggles-s-box-switch, 16px);
@@ -91,8 +91,11 @@
   width:var(--size-toggles-m-flag-switch, 16px);
   height:var(--size-toggles-m-flag-switch, 16px);
 }
+.flag[data-focusvisible=true], .flag[data-hover=true]{
+  background-color:var(--sys-neutral-on-accent, #ffffff);
+}
 .flag[data-disabled=true]{
-  background-color:var(--sys-neutral-text-disabled, #aaaebd);
+  background-color:var(--sys-neutral-background2-level, #ffffff);
 }
 
 .flag_icon_off{
@@ -116,10 +119,10 @@
   color:var(--sys-primary-accent-hovered, #6851a6);
 }
 .flag_icon_off[data-disabled=true]{
-  color:var(--sys-neutral-on-accent, #ffffff);
+  color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 .flag_icon_off[data-disabled=true][data-hover=true]{
-  color:var(--sys-neutral-on-accent, #ffffff);
+  color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 .flag_icon_off[data-checked=true]{
   opacity:0;
@@ -146,10 +149,10 @@
   color:var(--sys-primary-accent-hovered, #6851a6);
 }
 .flag_icon_on[data-disabled=true]{
-  color:var(--sys-neutral-on-accent, #ffffff);
+  color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 .flag_icon_on[data-disabled=true][data-hover=true]{
-  color:var(--sys-neutral-on-accent, #ffffff);
+  color:var(--sys-neutral-text-disabled, #aaaebd);
 }
 .flag_icon_on[data-checked=true]{
   opacity:1;

package/dist/components/TogglePrivate/TogglePrivate.d.ts

@@ -1,21 +1,20 @@
-/// <reference types="react" />
 export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string | undefined;
+    'data-test-id'?: string;
 } & import("react").AriaAttributes & {
-    className?: string | undefined;
-    size?: import("../../types").Size | undefined;
+    className?: string;
+    size?: import("../../types").Size;
     render: (visualState: import("../../types").InputVisualState) => import("react").ReactNode;
-    mode?: import("../../types").Mode | undefined;
-    id?: string | undefined;
-    value?: string | undefined;
-    name?: string | undefined;
-    tabIndex?: number | undefined;
-    autofocus?: boolean | undefined;
-    checked?: boolean | undefined;
-    defaultChecked?: boolean | undefined;
-    disabled?: boolean | undefined;
-    onChange?: ((checked: boolean) => void) | undefined;
-    onClick?: import("react").MouseEventHandler<HTMLInputElement> | undefined;
-    onBlur?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
-    onFocus?: import("react").FocusEventHandler<HTMLInputElement> | undefined;
+    mode?: import("../../types").Mode;
+    id?: string;
+    value?: string;
+    name?: string;
+    tabIndex?: number;
+    autofocus?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    onClick?: import("react").MouseEventHandler<HTMLInputElement>;
+    onBlur?: import("react").FocusEventHandler<HTMLInputElement>;
+    onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { SelectionMode } from './types';
 type ToggleGroupContextType = {
     value: string | undefined | string[];

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toggles",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,5 +38,5 @@
     "merge-refs": "1.2.1",
     "uncontrollable": "8.0.0"
   },
-  "gitHead": "4c153b54a2902cf20883d85b4dc753344313c6cb"
+  "gitHead": "85e564a411e0e9c0d841c5d589e32b0c2b351028"
 }

package/src/components/Checkbox/styles.module.scss

@@ -15,19 +15,20 @@ $icon-sizes: (
 
 .box {
   box-sizing: border-box;
-  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
-  border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
+  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
+  border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');
   border-style: solid; // это наверное должно быть в композитном токене box
 
   &[data-checked=false] {
     &[data-focusvisible=true],
     &[data-hover=true] {
       background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
-      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-hovered');
+      border-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
     }
+
     &[data-disabled=true] {
-      background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
-      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+      background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
     }
   }
 
@@ -35,14 +36,16 @@ $icon-sizes: (
   &[data-checked=true] {
     background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
     border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+
     &[data-focusvisible=true],
     &[data-hover=true] {
       background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
       border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
     }
+
     &[data-disabled=true] {
-      background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
-      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+      background-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+      border-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
     }
   }
 
@@ -74,4 +77,8 @@ $icon-sizes: (
   &[data-checked=true] {
     display: block;
   }
+
+  &[data-disabled=true] {
+    color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+  }
 }

package/src/components/Radio/styles.module.scss

@@ -13,8 +13,8 @@ $sizes: 's', 'm';
 
   box-sizing: border-box;
 
-  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
-  border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
+  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
+  border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');
   border-style: solid; // это наверное должно быть в композитном токене box
 
   @each $size in $sizes {
@@ -26,22 +26,24 @@ $sizes: 's', 'm';
   &[data-focusvisible=true],
   &[data-hover=true] {
     background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
-    border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-hovered');
+    border-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
   }
   
   &[data-disabled=true] {
-    background-color: simple-var($theme-variables, 'sys', 'neutral', 'background1-level');
-    border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+    background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+    border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
   }
 
   &[data-checked=true] {
     border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+
     &[data-focusvisible=true],
     &[data-hover=true] {
       border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
     }
+
     &[data-disabled=true] {
-      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
     }
   }
 }

package/src/components/Switch/styles.module.scss

@@ -24,16 +24,18 @@ $switchAnimationDuration: 0.1s;
   }
 
   &[data-disabled='true'] {
-    background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+    background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
   }
 
   &[data-checked='true'] {
     background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+
     &[data-hover='true'] {
       background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
     }
+
     &[data-disabled='true'] {
-      background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+      background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
     }
   }
 }
@@ -61,7 +63,7 @@ $switchAnimationDuration: 0.1s;
 }
 
 .flag {
-  background-color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
+  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
@@ -69,8 +71,13 @@ $switchAnimationDuration: 0.1s;
     }
   }
 
+  &[data-focusvisible=true],
+  &[data-hover=true] {
+    background-color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
+  }
+
   &[data-disabled='true'] {
-    background-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+    background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
   }
 }
 
@@ -94,16 +101,17 @@ $switchAnimationDuration: 0.1s;
 
   &[data-checked='true'] {
     color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+
     &[data-hover='true'] {
       color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
     }
   }
 
   &[data-disabled='true'] {
-    color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
+    color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
 
     &[data-hover='true'] {
-      color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
+      color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
     }
   }
 }