@snack-uikit/toggles 0.11.0 → 0.12.1-preview-d1a63029.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.12.0 (2024-10-28)
+
+
+### Features
+
+* **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
+
+
+
+
+
 # 0.11.0 (2024-10-28)
 
 

package/README.md

@@ -151,7 +151,8 @@ return (
 | className | `string` | - | CSS-класс |
 | size | enum Size: `"s"`, `"m"` | m | Размер |
 | inputRef | `RefObject<HTMLInputElement>` | - |  |
-| icon | enum FavoriteIcon: `"star"`, `"heart"` | heart | Иконка |
+| icon | enum FavoriteIcon: `"star"`, `"heart"`, `"pin"` | heart | Иконка |
+| onKeyDown | `KeyboardEventHandler<HTMLDivElement>` | - | Колбек нажатия клавиши клавиатуры |
 ## ToggleGroup
 ### Props
 | name | type | default value | description |

package/dist/cjs/components/Favorite/Favorite.d.ts

@@ -1,6 +1,9 @@
+import { KeyboardEventHandler } from 'react';
 import { FavoriteIcon, ToggleProps } from '../../types';
 export type FavoriteProps = ToggleProps & {
     /** Иконка */
     icon?: FavoriteIcon;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 };
-export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;
+export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, onKeyDown, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/components/Favorite/Favorite.js

@@ -26,25 +26,29 @@ const TogglePrivate_1 = require("../TogglePrivate");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const CHECKED_ICONS = {
   [constants_1.FAVORITE_ICON.Star]: icons_1.StarFilledSVG,
-  [constants_1.FAVORITE_ICON.Heart]: icons_1.HeartFilledSVG
+  [constants_1.FAVORITE_ICON.Heart]: icons_1.HeartFilledSVG,
+  [constants_1.FAVORITE_ICON.Pin]: icons_1.PinnedSVG
 };
 const UNCHECKED_ICONS = {
   [constants_1.FAVORITE_ICON.Star]: icons_1.StarSVG,
-  [constants_1.FAVORITE_ICON.Heart]: icons_1.HeartSVG
+  [constants_1.FAVORITE_ICON.Heart]: icons_1.HeartSVG,
+  [constants_1.FAVORITE_ICON.Pin]: icons_1.UnPinnedSVG
 };
 function Favorite(_a) {
   var {
       inputRef,
       'data-test-id': dataTestId,
       size = constants_1.SIZE.M,
-      icon = constants_1.FAVORITE_ICON.Heart
+      icon = constants_1.FAVORITE_ICON.Heart,
+      onKeyDown
     } = _a,
-    restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon"]);
+    restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon", "onKeyDown"]);
   const iconSize = (0, react_1.useMemo)(() => (0, utils_1.getIconSize)(size), [size]);
   return (0, jsx_runtime_1.jsx)(TogglePrivate_1.TogglePrivate, Object.assign({}, restProps, {
     "data-test-id": dataTestId,
     ref: inputRef,
     size: size,
+    onKeyDown: onKeyDown,
     render: function Favorite(visualState) {
       const Icon = visualState.checked ? CHECKED_ICONS[icon] : UNCHECKED_ICONS[icon];
       const data = (0, utils_1.getVisualStateAttributes)(Object.assign(Object.assign({}, visualState), {

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

@@ -45,6 +45,12 @@
 .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, #bd4844);
 }
+.icon:not([data-disabled=true])[data-icon=pin][data-checked=true]{
+  color:var(--sys-primary-accent-default, #794ed3);
+}
+.icon:not([data-disabled=true])[data-icon=pin][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=pin][data-checked=true][data-hover=true]{
+  color:var(--sys-primary-accent-hovered, #6851a6);
+}
 .icon[data-disabled=true]{
   color:var(--sys-neutral-text-disabled, #aaaebd);
 }

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

@@ -17,4 +17,5 @@ export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
     onClick?: import("react").MouseEventHandler<HTMLInputElement>;
     onBlur?: import("react").FocusEventHandler<HTMLInputElement>;
     onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/TogglePrivate/TogglePrivate.js

@@ -36,9 +36,10 @@ exports.TogglePrivate = (0, react_1.forwardRef)(function TogglePrivate(_a, ref)
       className,
       size = constants_1.SIZE.M,
       mode = constants_1.MODE.Checkbox,
+      onKeyDown,
       'data-test-id': testId
     } = _a,
-    otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", 'data-test-id']);
+    otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", "onKeyDown", 'data-test-id']);
   const [checked, setChecked] = (0, uncontrollable_1.useUncontrolledProp)(checkedProp, Boolean(defaultChecked), onChange);
   const [focusVisible, setFocusVisible] = (0, react_1.useState)(false);
   const [hover, setHover] = (0, react_1.useState)(false);
@@ -50,11 +51,13 @@ exports.TogglePrivate = (0, react_1.forwardRef)(function TogglePrivate(_a, ref)
     size
   };
   return (0, jsx_runtime_1.jsxs)("span", Object.assign({
+    role: mode,
     className: (0, classnames_1.default)(className, styles_module_scss_1.default.toggleLayout),
     "data-size": size,
     "data-test-id": testId,
     onMouseEnter: () => setHover(true),
-    onMouseLeave: () => setHover(false)
+    onMouseLeave: () => setHover(false),
+    onKeyDown: onKeyDown
   }, (0, utils_1.getVisualStateAttributes)(visualState), {
     children: [render(visualState), (0, jsx_runtime_1.jsx)("input", Object.assign({}, otherProps, {
       "data-test-id": `${testId}-native-input`,

package/dist/cjs/constants.d.ts

@@ -9,6 +9,7 @@ export declare const SIZE: {
 export declare const FAVORITE_ICON: {
     readonly Star: "star";
     readonly Heart: "heart";
+    readonly Pin: "pin";
 };
 export declare const SELECTION_MODE: {
     readonly Single: "single";

package/dist/cjs/constants.js

@@ -14,7 +14,8 @@ exports.SIZE = {
 };
 exports.FAVORITE_ICON = {
   Star: 'star',
-  Heart: 'heart'
+  Heart: 'heart',
+  Pin: 'pin'
 };
 exports.SELECTION_MODE = {
   Single: 'single',

package/dist/cjs/types.d.ts

@@ -1,4 +1,4 @@
-import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 import { FAVORITE_ICON, MODE, SELECTION_MODE, SIZE } from './constants';
 export type Size = ValueOf<typeof SIZE>;
@@ -45,6 +45,8 @@ export type TogglePrivateProps = WithSupportProps<{
     onBlur?: FocusEventHandler<HTMLInputElement>;
     /** Колбек приобретения фокуса */
     onFocus?: FocusEventHandler<HTMLInputElement>;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
 export type ToggleProps = WithSupportProps<Pick<TogglePrivateProps, 'id' | 'name' | 'value' | 'tabIndex' | 'autofocus' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'onClick' | 'onBlur' | 'onFocus' | 'className' | 'size'> & {
     inputRef?: RefObject<HTMLInputElement>;

package/dist/esm/components/Favorite/Favorite.d.ts

@@ -1,6 +1,9 @@
+import { KeyboardEventHandler } from 'react';
 import { FavoriteIcon, ToggleProps } from '../../types';
 export type FavoriteProps = ToggleProps & {
     /** Иконка */
     icon?: FavoriteIcon;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 };
-export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;
+export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, onKeyDown, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Favorite/Favorite.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
-import { HeartFilledSVG, HeartSVG, StarFilledSVG, StarSVG } from '@snack-uikit/icons';
+import { HeartFilledSVG, HeartSVG, PinnedSVG, StarFilledSVG, StarSVG, UnPinnedSVG } from '@snack-uikit/icons';
 import { FAVORITE_ICON, SIZE } from '../../constants';
 import { getIconSize, getVisualStateAttributes } from '../../utils';
 import { TogglePrivate } from '../TogglePrivate';
@@ -19,15 +19,17 @@ import styles from './styles.module.css';
 const CHECKED_ICONS = {
     [FAVORITE_ICON.Star]: StarFilledSVG,
     [FAVORITE_ICON.Heart]: HeartFilledSVG,
+    [FAVORITE_ICON.Pin]: PinnedSVG,
 };
 const UNCHECKED_ICONS = {
     [FAVORITE_ICON.Star]: StarSVG,
     [FAVORITE_ICON.Heart]: HeartSVG,
+    [FAVORITE_ICON.Pin]: UnPinnedSVG,
 };
 export function Favorite(_a) {
-    var { inputRef, 'data-test-id': dataTestId, size = SIZE.M, icon = FAVORITE_ICON.Heart } = _a, restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon"]);
+    var { inputRef, 'data-test-id': dataTestId, size = SIZE.M, icon = FAVORITE_ICON.Heart, onKeyDown } = _a, restProps = __rest(_a, ["inputRef", 'data-test-id', "size", "icon", "onKeyDown"]);
     const iconSize = useMemo(() => getIconSize(size), [size]);
-    return (_jsx(TogglePrivate, Object.assign({}, restProps, { "data-test-id": dataTestId, ref: inputRef, size: size, render: function Favorite(visualState) {
+    return (_jsx(TogglePrivate, Object.assign({}, restProps, { "data-test-id": dataTestId, ref: inputRef, size: size, onKeyDown: onKeyDown, render: function Favorite(visualState) {
             const Icon = visualState.checked ? CHECKED_ICONS[icon] : UNCHECKED_ICONS[icon];
             const data = getVisualStateAttributes(Object.assign(Object.assign({}, visualState), { icon }));
             return (_jsx("div", Object.assign({ className: styles.container }, data, { children: _jsx(Icon, Object.assign({ className: styles.icon }, data, { size: iconSize })) })));

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

@@ -45,6 +45,12 @@
 .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, #bd4844);
 }
+.icon:not([data-disabled=true])[data-icon=pin][data-checked=true]{
+  color:var(--sys-primary-accent-default, #794ed3);
+}
+.icon:not([data-disabled=true])[data-icon=pin][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=pin][data-checked=true][data-hover=true]{
+  color:var(--sys-primary-accent-hovered, #6851a6);
+}
 .icon[data-disabled=true]{
   color:var(--sys-neutral-text-disabled, #aaaebd);
 }

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

@@ -17,4 +17,5 @@ export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
     onClick?: import("react").MouseEventHandler<HTMLInputElement>;
     onBlur?: import("react").FocusEventHandler<HTMLInputElement>;
     onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
+    onKeyDown?: import("react").KeyboardEventHandler<HTMLDivElement>;
 } & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/TogglePrivate/TogglePrivate.js

@@ -17,7 +17,7 @@ import { MODE, SIZE } from '../../constants';
 import { getVisualStateAttributes } from '../../utils';
 import styles from './styles.module.css';
 export const TogglePrivate = forwardRef(function TogglePrivate(_a, ref) {
-    var { render, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, className, size = SIZE.M, mode = MODE.Checkbox, 'data-test-id': testId } = _a, otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", 'data-test-id']);
+    var { render, checked: checkedProp, defaultChecked, onChange, onBlur, onFocus, disabled, className, size = SIZE.M, mode = MODE.Checkbox, onKeyDown, 'data-test-id': testId } = _a, otherProps = __rest(_a, ["render", "checked", "defaultChecked", "onChange", "onBlur", "onFocus", "disabled", "className", "size", "mode", "onKeyDown", 'data-test-id']);
     const [checked, setChecked] = useUncontrolledProp(checkedProp, Boolean(defaultChecked), onChange);
     const [focusVisible, setFocusVisible] = useState(false);
     const [hover, setHover] = useState(false);
@@ -28,7 +28,7 @@ export const TogglePrivate = forwardRef(function TogglePrivate(_a, ref) {
         hover,
         size,
     };
-    return (_jsxs("span", Object.assign({ className: cn(className, styles.toggleLayout), "data-size": size, "data-test-id": testId, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false) }, getVisualStateAttributes(visualState), { children: [render(visualState), _jsx("input", Object.assign({}, otherProps, { "data-test-id": `${testId}-native-input`, ref: ref, type: mode, className: styles.togglePrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
+    return (_jsxs("span", Object.assign({ role: mode, className: cn(className, styles.toggleLayout), "data-size": size, "data-test-id": testId, onMouseEnter: () => setHover(true), onMouseLeave: () => setHover(false), onKeyDown: onKeyDown }, getVisualStateAttributes(visualState), { children: [render(visualState), _jsx("input", Object.assign({}, otherProps, { "data-test-id": `${testId}-native-input`, ref: ref, type: mode, className: styles.togglePrivate, checked: checked, disabled: disabled, onChange: e => setChecked(e.target.checked), onFocus: event => {
                     setFocusVisible(event.target.matches(':focus-visible'));
                     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
                 }, onBlur: event => {

package/dist/esm/constants.d.ts

@@ -9,6 +9,7 @@ export declare const SIZE: {
 export declare const FAVORITE_ICON: {
     readonly Star: "star";
     readonly Heart: "heart";
+    readonly Pin: "pin";
 };
 export declare const SELECTION_MODE: {
     readonly Single: "single";

package/dist/esm/constants.js

@@ -9,6 +9,7 @@ export const SIZE = {
 export const FAVORITE_ICON = {
     Star: 'star',
     Heart: 'heart',
+    Pin: 'pin',
 };
 export const SELECTION_MODE = {
     Single: 'single',

package/dist/esm/types.d.ts

@@ -1,4 +1,4 @@
-import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 import { FAVORITE_ICON, MODE, SELECTION_MODE, SIZE } from './constants';
 export type Size = ValueOf<typeof SIZE>;
@@ -45,6 +45,8 @@ export type TogglePrivateProps = WithSupportProps<{
     onBlur?: FocusEventHandler<HTMLInputElement>;
     /** Колбек приобретения фокуса */
     onFocus?: FocusEventHandler<HTMLInputElement>;
+    /** Колбек нажатия клавиши клавиатуры */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
 export type ToggleProps = WithSupportProps<Pick<TogglePrivateProps, 'id' | 'name' | 'value' | 'tabIndex' | 'autofocus' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'onClick' | 'onBlur' | 'onFocus' | 'className' | 'size'> & {
     inputRef?: RefObject<HTMLInputElement>;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Toggles",
-  "version": "0.11.0",
+  "version": "0.12.1-preview-d1a63029.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -36,11 +36,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.23.0",
+    "@snack-uikit/icons": "0.24.0",
     "@snack-uikit/utils": "3.5.0",
     "classnames": "2.3.2",
     "merge-refs": "1.2.1",
     "uncontrollable": "8.0.0"
   },
-  "gitHead": "62cc21d8606a61a78f80e3a7455b20d6f38474fa"
+  "gitHead": "167f0c505b9958dc320111f7ee9e8ed2ebc58796"
 }

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

@@ -1,61 +1,59 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '../styles.module';
-
-$sizes: 's', 'm';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '../styles.module';
 
 $icon-sizes: (
-  's': $icon-xs,
-  'm': $icon-s,
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s,
 );
 
 .container {
-  @include container('checkbox');
+  @include styles.container('checkbox');
 }
 
 .box {
   box-sizing: border-box;
-  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
-  border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');
+  background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
+  border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$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', 'accent-hovered');
+      background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
+      border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'accent-hovered');
     }
 
     &[data-disabled=true] {
-      background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
-      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
+      background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-disabled');
+      border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-default');
     }
   }
 
   &[data-indeterminate=true],
   &[data-checked=true] {
-    background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
-    border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+    background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-default');
+    border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$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');
+      background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
+      border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
     }
 
     &[data-disabled=true] {
-      background-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
-      border-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+      background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
+      border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
     }
   }
 
-  @each $size in $sizes {
+  @each $size in styles.$sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($toggles, $size, 'checkbox', 'box');
+      @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'checkbox', 'box');
 
       svg {
-        width: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
-        height: simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        width: styles-tokens-toggles.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
+        height: styles-tokens-toggles.simple-var($icon-sizes, $size) !important; /* stylelint-disable-line declaration-no-important */
       }
     }
   }
@@ -71,7 +69,7 @@ $icon-sizes: (
   width: 100%;
   height: 100%;
 
-  color: simple-var($theme-variables, 'sys', 'primary', 'on-accent');
+  color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'on-accent');
 
   &[data-indeterminate=true],
   &[data-checked=true] {
@@ -79,6 +77,6 @@ $icon-sizes: (
   }
 
   &[data-disabled=true] {
-    color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
+    color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-disabled');
   }
 }

package/src/components/Favorite/Favorite.tsx

@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
+import { KeyboardEventHandler, useMemo } from 'react';
 
-import { HeartFilledSVG, HeartSVG, StarFilledSVG, StarSVG } from '@snack-uikit/icons';
+import { HeartFilledSVG, HeartSVG, PinnedSVG, StarFilledSVG, StarSVG, UnPinnedSVG } from '@snack-uikit/icons';
 
 import { FAVORITE_ICON, SIZE } from '../../constants';
 import { FavoriteIcon, ToggleProps } from '../../types';
@@ -11,16 +11,20 @@ import styles from './styles.module.scss';
 const CHECKED_ICONS = {
   [FAVORITE_ICON.Star]: StarFilledSVG,
   [FAVORITE_ICON.Heart]: HeartFilledSVG,
+  [FAVORITE_ICON.Pin]: PinnedSVG,
 };
 
 const UNCHECKED_ICONS = {
   [FAVORITE_ICON.Star]: StarSVG,
   [FAVORITE_ICON.Heart]: HeartSVG,
+  [FAVORITE_ICON.Pin]: UnPinnedSVG,
 };
 
 export type FavoriteProps = ToggleProps & {
   /** Иконка */
   icon?: FavoriteIcon;
+  /** Колбек нажатия клавиши клавиатуры */
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 };
 
 export function Favorite({
@@ -28,6 +32,7 @@ export function Favorite({
   'data-test-id': dataTestId,
   size = SIZE.M,
   icon = FAVORITE_ICON.Heart,
+  onKeyDown,
   ...restProps
 }: FavoriteProps) {
   const iconSize = useMemo(() => getIconSize(size), [size]);
@@ -38,6 +43,7 @@ export function Favorite({
       data-test-id={dataTestId}
       ref={inputRef}
       size={size}
+      onKeyDown={onKeyDown}
       render={function Favorite(visualState) {
         const Icon = visualState.checked ? CHECKED_ICONS[icon] : UNCHECKED_ICONS[icon];
         const data = getVisualStateAttributes({ ...visualState, icon });

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

@@ -1,39 +1,38 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '../styles.module';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@use '../styles.module';
 
-$sizes: 's', 'm';
 $icons: (
   'star': 'yellow',
   'heart': 'red',
+  'pin': 'primary',
 );
 
 .container {
-  @include container('favourite');
+  @include styles.container('favourite');
 
-  outline-color: simple-var($theme-variables, 'sys', 'available', 'complementary');
+  outline-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'available', 'complementary');
 
   &[data-checked='true'] {
-    outline-color: simple-var($theme-variables, 'sys', 'available', 'complementary');
+    outline-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'available', 'complementary');
   }
 }
 
 .icon {
-  color: simple-var($theme-variables, 'sys', 'neutral', 'text-light');
+  color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-light');
 
   &:not([data-disabled='true']) {
     &[data-hover='true'] {
-      color: simple-var($theme-variables, 'sys', 'neutral', 'text-support');
+      color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-support');
     }
 
     @each $icon, $color in $icons {
       &[data-icon='#{$icon}'] {
         &[data-checked='true'] {
-          color: simple-var($theme-variables, 'sys', $color, 'accent-default');
+          color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', $color, 'accent-default');
 
           &[data-focusvisible='true'],
           &[data-hover='true'] {
-            color: simple-var($theme-variables, 'sys', $color, 'accent-hovered');
+            color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', $color, 'accent-hovered');
           }
         }
       }
@@ -41,6 +40,6 @@ $icons: (
   }
 
   &[data-disabled='true'] {
-    color: $sys-neutral-text-disabled;
+    color: styles-tokens-toggles.$sys-neutral-text-disabled;
   }
 }

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

@@ -1,11 +1,8 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '../styles.module';
-
-$sizes: 's', 'm';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@use '../styles.module';
 
 .container {
-  @include container('radio');
+  @include styles.container('radio');
 }
 
 .box {
@@ -13,37 +10,37 @@ $sizes: 's', 'm';
 
   box-sizing: border-box;
 
-  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
-  border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');
+  background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
+  border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-activated');
   border-style: solid; // это наверное должно быть в композитном токене box
 
-  @each $size in $sizes {
+  @each $size in styles.$sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($toggles, $size, 'radio', 'box');
+      @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'radio', 'box');
     }
   }
 
   &[data-focusvisible=true],
   &[data-hover=true] {
-    background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
-    border-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
+    background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
+    border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'accent-hovered');
   }
   
   &[data-disabled=true] {
-    background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-disabled');
-    border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
+    background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-disabled');
+    border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-default');
   }
 
   &[data-checked=true] {
-    border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+    border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-default');
 
     &[data-focusvisible=true],
     &[data-hover=true] {
-      border-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
+      border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
     }
 
     &[data-disabled=true] {
-      border-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
+      border-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-default');
     }
   }
 }
@@ -54,23 +51,23 @@ $sizes: 's', 'm';
   left: 50%;
   transform: translate(-50%, -50%);
 
-  background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+  background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-default');
 
   &[data-hover=true] {
-    background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
+    background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
   }
 
   &[data-disabled=true] {
-    background-color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+    background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
   }
 
   &[data-checked=false] {
     display: none;
   }
 
-  @each $size in $sizes {
+  @each $size in styles.$sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($toggles, $size, 'radio', 'flag');
+      @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'radio', 'flag');
     }
   }
 }

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

@@ -1,41 +1,39 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '../styles.module';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@use '../styles.module';
 
-$sizes: 's', 'm';
 $switchAnimationDuration: 0.1s;
 
 .container {
-  @include container('switch');
+  @include styles.container('switch');
 }
 
 .box {
   position: relative;
-  background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-activated');
+  background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-activated');
 
-  @each $size in $sizes {
+  @each $size in styles.$sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($toggles, $size, 'switch', 'box');
+      @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'switch', 'box');
     }
   }
 
   &[data-hover='true'] {
-    background-color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
+    background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'accent-hovered');
   }
 
   &[data-disabled='true'] {
-    background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
+    background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-default');
   }
 
   &[data-checked='true'] {
-    background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+    background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-default');
 
     &[data-hover='true'] {
-      background-color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
+      background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
     }
 
     &[data-disabled='true'] {
-      background-color: simple-var($theme-variables, 'sys', 'neutral', 'decor-default');
+      background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'decor-default');
     }
   }
 }
@@ -52,32 +50,32 @@ $switchAnimationDuration: 0.1s;
   transition-duration: $switchAnimationDuration;
   transition-property: left;
 
-  @each $size in $sizes {
+  @each $size in styles.$sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($toggles, $size, 'switch', 'container-flag');
+      @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'switch', 'container-flag');
       &[data-checked='true'] {
-        left: calc(100% - #{simple-var($toggles, $size, 'switch', 'container-flag', 'width')});
+        left: calc(100% - #{styles-tokens-toggles.simple-var(styles-tokens-toggles.$toggles, $size, 'switch', 'container-flag', 'width')});
       }
     }
   }
 }
 
 .flag {
-  background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
+  background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
 
-  @each $size in $sizes {
+  @each $size in styles.$sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($toggles, $size, 'switch', 'flag');
+      @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, 'switch', 'flag');
     }
   }
 
   &[data-focusvisible=true],
   &[data-hover=true] {
-    background-color: simple-var($theme-variables, 'sys', 'neutral', 'on-accent');
+    background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'on-accent');
   }
 
   &[data-disabled='true'] {
-    background-color: simple-var($theme-variables, 'sys', 'neutral', 'background2-level');
+    background-color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'background2-level');
   }
 }
 
@@ -89,29 +87,29 @@ $switchAnimationDuration: 0.1s;
 
   display: flex;
 
-  color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+  color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
 
   fill: transparent;
 
   transition: opacity $switchAnimationDuration linear;
 
   &[data-hover='true'] {
-    color: simple-var($theme-variables, 'sys', 'neutral', 'accent-hovered');
+    color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'accent-hovered');
   }
 
   &[data-checked='true'] {
-    color: simple-var($theme-variables, 'sys', 'primary', 'accent-default');
+    color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-default');
 
     &[data-hover='true'] {
-      color: simple-var($theme-variables, 'sys', 'primary', 'accent-hovered');
+      color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'primary', 'accent-hovered');
     }
   }
 
   &[data-disabled='true'] {
-    color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+    color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
 
     &[data-hover='true'] {
-      color: simple-var($theme-variables, 'sys', 'neutral', 'text-disabled');
+      color: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'sys', 'neutral', 'text-disabled');
     }
   }
 }

package/src/components/TogglePrivate/TogglePrivate.tsx

@@ -19,6 +19,7 @@ export const TogglePrivate = forwardRef<HTMLInputElement, TogglePrivateProps>(fu
     className,
     size = SIZE.M,
     mode = MODE.Checkbox,
+    onKeyDown,
     'data-test-id': testId,
     ...otherProps
   },
@@ -38,11 +39,13 @@ export const TogglePrivate = forwardRef<HTMLInputElement, TogglePrivateProps>(fu
 
   return (
     <span
+      role={mode}
       className={cn(className, styles.toggleLayout)}
       data-size={size}
       data-test-id={testId}
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
+      onKeyDown={onKeyDown}
       {...getVisualStateAttributes(visualState)}
     >
       {render(visualState)}

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

@@ -1,11 +1,9 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-
-$sizes: 's', 'm';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
 
 $icon-sizes: (
-  's': $icon-xs,
-  'm': $icon-s,
+  's': styles-tokens-element.$icon-xs,
+  'm': styles-tokens-element.$icon-s,
 );
 
 .toggleLayout {
@@ -21,7 +19,7 @@ $icon-sizes: (
 
   &[data-disabled=true] {
     cursor: not-allowed;
-    color: $sys-neutral-text-disabled;
+    color: styles-tokens-toggles.$sys-neutral-text-disabled;
   }
 }
 

package/src/components/styles.module.scss

@@ -1,5 +1,5 @@
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
-@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-toggles';
 
 $sizes: 's', 'm';
 
@@ -11,14 +11,14 @@ $sizes: 's', 'm';
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-      @include composite-var($toggles, $size, $component, 'container');
+      @include styles-tokens-toggles.composite-var(styles-tokens-toggles.$toggles, $size, $component, 'container');
     }
   }
 
   &[data-focusvisible=true] {
-    @include outline-var($container-focused-s);
+    @include styles-tokens-toggles.outline-var(styles-tokens-element.$container-focused-s);
     &[data-size='s'] {
-      outline-offset: simple-var($theme-variables, 'border-width', 'state-focus', 's');
+      outline-offset: styles-tokens-toggles.simple-var(styles-tokens-toggles.$theme-variables, 'border-width', 'state-focus', 's');
     }
   }
 }

package/src/constants.ts

@@ -11,6 +11,7 @@ export const SIZE = {
 export const FAVORITE_ICON = {
   Star: 'star',
   Heart: 'heart',
+  Pin: 'pin',
 } as const;
 
 export const SELECTION_MODE = {

package/src/helperComponents/Spinner/styles.module.scss

@@ -1,10 +1,9 @@
-@import '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
-
+@use '@snack-uikit/figma-tokens/build/scss/styles-theme-variables';
 
 .spinner {
   pointer-events: none;
-  width: $dimension-2m;
-  height: $dimension-2m;
+  width: styles-theme-variables.$dimension-2m;
+  height: styles-theme-variables.$dimension-2m;
   animation: spin 1s ease-in-out infinite;
 
   & > path {

package/src/types.ts

@@ -1,4 +1,4 @@
-import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { FocusEventHandler, KeyboardEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
 
 import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
 
@@ -51,6 +51,8 @@ export type TogglePrivateProps = WithSupportProps<{
   onBlur?: FocusEventHandler<HTMLInputElement>;
   /** Колбек приобретения фокуса */
   onFocus?: FocusEventHandler<HTMLInputElement>;
+  /** Колбек нажатия клавиши клавиатуры */
+  onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
 }>;
 
 export type ToggleProps = WithSupportProps<