@cloud-ru/ds-toggles 1.1.13 → 1.1.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-toggles",
-  "version": "1.1.13",
+  "version": "1.1.14",
   "description": "Пакет компонентов выбора и переключения — Checkbox, Radio, Switch, Favourite и контейнер ToggleGroup с общими токенами размеров и состояний.",
   "repository": {
     "type": "git",
@@ -35,10 +35,10 @@
   "dependencies": {
     "classnames": "^2.5.1",
     "merge-refs": "^2.0.0",
-    "@cloud-ru/ds-utils": "^1.3.0",
-    "@cloud-ru/ds-materials": "^2.0.2",
     "@cloud-ru/ds-icons": "^1.7.1",
-    "@cloud-ru/ds-loader": "^1.0.4"
+    "@cloud-ru/ds-loader": "^1.0.4",
+    "@cloud-ru/ds-utils": "^1.3.0",
+    "@cloud-ru/ds-materials": "^2.0.2"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Checkbox/Checkbox.tsx

@@ -95,10 +95,11 @@ export function Checkbox({
       data-size={size}
       {...stateDataAttributes}
       data-indeterminate={indeterminate || undefined}
+      data-focusvisible={focusVisible || undefined}
       data-test-id={dataTestId || undefined}
     >
       <div className={styles.container}>
-        <div className={styles.framing} {...stateDataAttributes} data-focusvisible={focusVisible || undefined}>
+        <div className={styles.framing} {...stateDataAttributes}>
           <div
             className={styles.backgroundStateLayer}
             data-state={indeterminate || checked ? 'emptyDarkOnAccent' : 'emptyNeutralOnBackground'}

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

@@ -43,6 +43,7 @@ $sizes: 'xs', 's';
 
     &[data-disabled="true"] {
       opacity: base.$sn-theme-effect-opacity-disabled;
+      background-color: base.$sn-theme-color-neutral-decor;
 
       // Акцентная заливка отмеченного состояния лежит на внешнем слое framing,
       // а не на внутреннем flag/surface.
@@ -60,13 +61,6 @@ $sizes: 'xs', 's';
         border-color: base.$sn-theme-color-primary-accent;
         background-color: base.$sn-theme-color-primary-accent;
       }
-
-      &[data-focusvisible="true"] {
-        $outlineWidth: base.$sn-primitive-strokeWeight-strokeSemiBold;
-
-        outline: $outlineWidth solid base.$sn-theme-color-available-complementary;
-        outline-offset: var(--focus-offset);
-      }
     }
   }
 }
@@ -89,6 +83,11 @@ $sizes: 'xs', 's';
   color: base.$sn-theme-color-primary-onAccent;
 }
 
+// Галочка disabled лежит на `neutral/accent`, поэтому берёт парный `neutral/onAccent`.
+.root[data-disabled="true"] .icon {
+  color: base.$sn-theme-color-neutral-onAccent;
+}
+
 .container {
   position: relative;
   display: flex;
@@ -114,14 +113,13 @@ $sizes: 'xs', 's';
         @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'container');
       }
 
-      .framing {
-
-        // Кольцо фокуса по границе контейнера (Figma `focusedFrame/regular/outside`).
-        $containerWidth: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'container', 'min-width');
-        $framingWidth: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-width');
-
-        --focus-offset: calc((#{$containerWidth} - #{$framingWidth}) / 2);
+      // Кольцо фокуса снаружи контейнера с радиусом рамки (Figma `focusedFrame/regular/outside`).
+      &[data-focusvisible="true"] .container {
+        border-radius: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'border-radius');
+        outline: base.$sn-brand-anatomy-focusLine-control-strokeWeight solid base.$sn-theme-color-available-complementary;
+      }
 
+      .framing {
         width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-width');
         height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-height');
 

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

@@ -95,14 +95,13 @@ $sizes: 'xs', 's';
         @include base.composite-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'container');
       }
 
-      .framing {
-
-        // Кольцо фокуса по границе контейнера (Figma `focusedFrame/regular/outside`).
-        $containerWidth: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'container', 'min-width');
-        $framingWidth: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-width');
-
-        --focus-offset: calc((#{$containerWidth} - #{$framingWidth}) / 2);
+      // Кольцо фокуса снаружи контейнера с радиусом рамки (Figma `focusedFrame/regular/outside`).
+      &[data-focusvisible='true'] .container {
+        border-radius: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'border-radius');
+        outline: base.$sn-brand-anatomy-focusLine-control-strokeWeight solid base.$sn-theme-color-available-complementary;
+      }
 
+      .framing {
         width: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-width');
         height: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'checkbox', 'framing', 'min-height');
 
@@ -142,11 +141,4 @@ $sizes: 'xs', 's';
       opacity: base.$sn-theme-effect-opacity-disabled;
     }
   }
-
-  &[data-focusvisible='true'] {
-    .framing {
-      outline: base.$sn-primitive-strokeWeight-strokeSemiBold solid base.$sn-theme-color-available-complementary;
-      outline-offset: var(--focus-offset);
-    }
-  }
 }

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

@@ -42,6 +42,7 @@ $sizes: 'xs', 's';
 
     &[data-disabled="true"] {
       opacity: base.$sn-theme-effect-opacity-disabled;
+      background-color: base.$sn-theme-color-neutral-decor;
     }
 
     &[data-disabled="false"] {
@@ -54,7 +55,7 @@ $sizes: 'xs', 's';
       }
 
       &[data-focusvisible="true"] {
-        $outlineWidth: base.$sn-primitive-strokeWeight-strokeSemiBold;
+        $outlineWidth: base.$sn-brand-anatomy-focusLine-control-strokeWeight;
 
         outline: $outlineWidth solid base.$sn-theme-color-available-complementary;
         outline-offset: var(--focus-offset);

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

@@ -214,7 +214,7 @@ $iconRevealEasing: cubic-bezier(0.33, 1, 0.68, 1);
       &[data-focusvisible="true"] {
         .container {
           // Кольцо фокуса по границе контейнера (Figma `focusedFrame/regular/outside`).
-          $offsetWidth: base.$sn-primitive-strokeWeight-strokeSemiBold;
+          $offsetWidth: base.$sn-brand-anatomy-focusLine-control-strokeWeight;
 
           border-radius: base.simple-var(toggles.$toggles, 'anatomy', 'size', $size, 'switch', 'framing', 'border-radius');
           outline: $offsetWidth solid base.$sn-theme-color-available-complementary;