@alfalab/core-components-switch 4.3.2 → 4.5.0

package/moderncssm/index.module.css

@@ -1,31 +1,21 @@
 /* */
-
 :root {
-    --switch-label-color: var(--color-light-text-primary);
-    --switch-hint-color: var(--color-light-text-secondary);
-    --switch-bg-color: var(--color-light-neutral-translucent-700);
     --switch-border-color: transparent;
     --switch-error-color: var(--color-light-text-negative);
 
+    /* inverted */
+
     /* hover */
-    --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
 
     /* checked */
-    --switch-checked-bg-color: var(--color-light-status-positive);
-    --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
 
     /* disabled */
-    --switch-disabled-color: var(--color-light-text-secondary);
-    --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
 
     /* disabled checked */
-    --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
 
     /* icon */
     --switch-icon-color: var(--color-static-neutral-0);
-    --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
 }
-
 .component {
     display: inline-flex;
     align-items: flex-start;
@@ -35,30 +25,24 @@
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-
 .component input {
     opacity: 0;
     position: absolute;
 }
-
 .start {
     align-items: flex-start;
 }
-
 .center {
     align-items: center;
 }
-
 .addons {
     margin-left: auto;
     padding-left: var(--gap-16);
     line-height: 24px;
 }
-
 .block {
     width: 100%;
 }
-
 .switch {
     position: relative;
     border-radius: var(--border-radius-16);
@@ -66,16 +50,10 @@
     height: 20px;
     margin: var(--gap-2);
     flex-shrink: 0;
-    background-color: var(--switch-bg-color);
     border: 2px solid var(--switch-border-color);
     transition: background-color 0.2s ease, border-color 0.2s ease;
-    box-sizing: border-box
+    box-sizing: border-box;
 }
-
-.switch:hover {
-        background-color: var(--switch-hover-bg-color);
-    }
-
 .switch:before {
     content: '';
     position: absolute;
@@ -89,100 +67,55 @@
     box-sizing: border-box;
     transition: transform 0.2s ease;
 }
-
 .content {
     margin-left: var(--gap-12);
     flex-grow: 1;
 }
-
 .label {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     display: block;
-    color: var(--switch-label-color);
 }
-
 .label:not(:only-child) {
     margin-bottom: var(--gap-4);
 }
-
 .errorMessage {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     color: var(--switch-error-color);
 }
-
 .hint {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
     display: block;
-    color: var(--switch-hint-color);
 }
-
 /* Reversed state */
-
 .component.reversed {
     flex-direction: row-reverse;
 }
-
 .reversed .content {
     margin-right: var(--gap-16);
     margin-left: var(--gap-0);
 }
-
 .reversed .addons {
     margin-left: var(--gap-0);
     padding-left: var(--gap-0);
     margin-right: auto;
     padding-right: var(--gap-16);
 }
-
 /* Checked state */
-
-.checked .switch {
-    background-color: var(--switch-checked-bg-color)
-}
-
-.checked .switch:hover {
-        background-color: var(--switch-checked-hover-bg-color);
-    }
-
 .checked .switch:before {
     /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
     transform: translateX(16px);
 }
-
 /* Disabled state */
-
 .disabled {
     cursor: var(--disabled-cursor);
 }
-
-.disabled .switch {
-    background-color: var(--switch-disabled-bg-color)
-}
-
-.disabled .switch:before {
-        background-color: var(--switch-icon-disabled-color);
-    }
-
-.disabled.checked .switch {
-    background-color: var(--switch-disabled-checked-bg-color);
-}
-
-.disabled .label {
-    color: var(--switch-disabled-color);
-}
-
-.disabled .hint {
-    color: var(--switch-disabled-color);
-}
-
 /* Focused state */
-
 .focused .switch {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;

package/moderncssm/inverted.module.css

@@ -0,0 +1,58 @@
+/* */
+:root {
+
+    /* inverted */
+    --switch-label-inverted-color: var(--color-light-text-primary-inverted);
+    --switch-hint-inverted-color: var(--color-light-text-secondary-inverted);
+    --switch-checked-bg-inverted-color: var(--color-light-status-positive-inverted);
+    --switch-checked-hover-bg-inverted-color: var(--color-light-status-positive-inverted-hover);
+    --switch-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted);
+
+    /* hover */
+    --switch-hover-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted-hover);
+
+    /* checked */
+
+    /* disabled */
+    --switch-disabled-inverted-color: var(--color-light-text-secondary-inverted);
+    --switch-disabled-bg-inverted-color: var(--color-light-neutral-translucent-200-inverted);
+
+    /* disabled checked */
+    --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
+
+    /* icon */
+    --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
+}
+.switch {
+    background-color: var(--switch-bg-inverted-color)
+}
+.switch:hover {
+        background-color: var(--switch-hover-bg-inverted-color);
+    }
+.label {
+    color: var(--switch-label-inverted-color);
+}
+.hint {
+    color: var(--switch-hint-inverted-color);
+}
+.checked .switch {
+    background-color: var(--switch-checked-bg-inverted-color)
+}
+.checked .switch:hover {
+        background-color: var(--switch-checked-hover-bg-inverted-color);
+    }
+.disabled .label {
+    color: var(--switch-disabled-inverted-color);
+}
+.disabled .hint {
+    color: var(--switch-disabled-inverted-color);
+}
+.disabled .switch {
+    background-color: var(--switch-disabled-bg-inverted-color)
+}
+.disabled .switch:before {
+        background-color: var(--switch-icon-disabled-inverted-color);
+    }
+.disabled.checked .switch {
+    background-color: var(--switch-disabled-checked-bg-inverted-color);
+}

package/moderncssm/types/colors.d.ts

@@ -0,0 +1,2 @@
+type Colors = 'default' | 'inverted';
+export { Colors };

package/moderncssm/types/colors.js

@@ -0,0 +1 @@
+

package/moderncssm/vars.css

@@ -0,0 +1,14 @@
+:root {
+
+    /* inverted */
+
+    /* hover */
+
+    /* checked */
+
+    /* disabled */
+
+    /* disabled checked */
+
+    /* icon */
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-switch",
-    "version": "4.3.2",
+    "version": "4.5.0",
     "description": "",
     "gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
     "keywords": [],
@@ -21,6 +21,6 @@
         "react-merge-refs": "^1.1.0",
         "tslib": "^2.4.0"
     },
-    "themesVersion": "13.4.0",
-    "varsVersion": "9.13.1"
+    "themesVersion": "13.5.0",
+    "varsVersion": "9.15.0"
 }

package/src/Component.tsx

@@ -5,7 +5,16 @@ import cn from 'classnames';
 import { dom } from '@alfalab/core-components-shared';
 import { useFocus } from '@alfalab/hooks';
 
+import { Colors } from './types/colors';
+
+import defaultStyles from './default.module.css';
 import styles from './index.module.css';
+import invertedStyles from './inverted.module.css';
+
+const colorStyles = {
+    default: defaultStyles,
+    inverted: invertedStyles,
+};
 
 type Align = 'start' | 'center';
 
@@ -80,6 +89,12 @@ export type SwitchProps = Omit<
      * Идентификатор для систем автоматизированного тестирования
      */
     dataTestId?: string;
+
+    /**
+     * Набор цветов для компонента
+     * @default default
+     */
+    colors?: Colors;
 };
 
 export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
@@ -100,6 +115,7 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
             className,
             onChange,
             dataTestId,
+            colors = 'default',
             ...restProps
         },
         ref,
@@ -120,7 +136,11 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
             <label
                 className={cn(styles.component, styles[align], className, {
                     [styles.disabled]: disabled || inactive,
+                    [colorStyles[colors].disabled]: disabled || inactive,
+
                     [styles.checked]: checked,
+                    [colorStyles[colors].checked]: checked,
+
                     [styles.reversed]: reversed,
                     [styles.focused]: focused,
                     [styles.block]: block,
@@ -138,12 +158,20 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
                     {...restProps}
                 />
 
-                <span className={styles.switch} />
+                <span className={cn(styles.switch, colorStyles[colors].switch)} />
 
                 {(label || hint || errorMessage) && (
                     <span className={styles.content}>
-                        {label && <span className={styles.label}>{label}</span>}
-                        {hint && !errorMessage && <span className={styles.hint}>{hint}</span>}
+                        {label && (
+                            <span className={cn(styles.label, colorStyles[colors].label)}>
+                                {label}
+                            </span>
+                        )}
+                        {hint && !errorMessage && (
+                            <span className={cn(styles.hint, colorStyles[colors].hint)}>
+                                {hint}
+                            </span>
+                        )}
 
                         {errorMessage && (
                             <span className={styles.errorMessage} role='alert'>

package/src/default.module.css

@@ -0,0 +1,46 @@
+@import '@alfalab/core-components-vars/src/index.css';
+@import './vars.css';
+
+.switch {
+    background-color: var(--switch-bg-color);
+
+    &:hover {
+        background-color: var(--switch-hover-bg-color);
+    }
+}
+
+.label {
+    color: var(--switch-label-color);
+}
+
+.hint {
+    color: var(--switch-hint-color);
+}
+
+.checked .switch {
+    background-color: var(--switch-checked-bg-color);
+
+    &:hover {
+        background-color: var(--switch-checked-hover-bg-color);
+    }
+}
+
+.disabled .label {
+    color: var(--switch-disabled-color);
+}
+
+.disabled .hint {
+    color: var(--switch-disabled-color);
+}
+
+.disabled .switch {
+    background-color: var(--switch-disabled-bg-color);
+
+    &:before {
+        background-color: var(--switch-icon-disabled-color);
+    }
+}
+
+.disabled.checked .switch {
+    background-color: var(--switch-disabled-checked-bg-color);
+}

package/src/index.module.css

@@ -1,30 +1,5 @@
 @import '@alfalab/core-components-vars/src/index.css';
-
-:root {
-    --switch-label-color: var(--color-light-text-primary);
-    --switch-hint-color: var(--color-light-text-secondary);
-    --switch-bg-color: var(--color-light-neutral-translucent-700);
-    --switch-border-color: transparent;
-    --switch-error-color: var(--color-light-text-negative);
-
-    /* hover */
-    --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
-
-    /* checked */
-    --switch-checked-bg-color: var(--color-light-status-positive);
-    --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
-
-    /* disabled */
-    --switch-disabled-color: var(--color-light-text-secondary);
-    --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
-
-    /* disabled checked */
-    --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
-
-    /* icon */
-    --switch-icon-color: var(--color-static-neutral-0);
-    --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
-}
+@import './vars.css';
 
 .component {
     display: inline-flex;
@@ -66,14 +41,9 @@
     height: 20px;
     margin: var(--gap-2);
     flex-shrink: 0;
-    background-color: var(--switch-bg-color);
     border: 2px solid var(--switch-border-color);
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
-
-    &:hover {
-        background-color: var(--switch-hover-bg-color);
-    }
 }
 
 .switch:before {
@@ -98,7 +68,6 @@
 .label {
     @mixin paragraph_primary_medium;
     display: block;
-    color: var(--switch-label-color);
 }
 
 .label:not(:only-child) {
@@ -113,7 +82,6 @@
 .hint {
     @mixin paragraph_component_secondary;
     display: block;
-    color: var(--switch-hint-color);
 }
 
 /* Reversed state */
@@ -136,14 +104,6 @@
 
 /* Checked state */
 
-.checked .switch {
-    background-color: var(--switch-checked-bg-color);
-
-    &:hover {
-        background-color: var(--switch-checked-hover-bg-color);
-    }
-}
-
 .checked .switch:before {
     /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
     transform: translateX(16px);
@@ -155,26 +115,6 @@
     cursor: var(--disabled-cursor);
 }
 
-.disabled .switch {
-    background-color: var(--switch-disabled-bg-color);
-
-    &:before {
-        background-color: var(--switch-icon-disabled-color);
-    }
-}
-
-.disabled.checked .switch {
-    background-color: var(--switch-disabled-checked-bg-color);
-}
-
-.disabled .label {
-    color: var(--switch-disabled-color);
-}
-
-.disabled .hint {
-    color: var(--switch-disabled-color);
-}
-
 /* Focused state */
 
 .focused .switch {

package/src/inverted.module.css

@@ -0,0 +1,46 @@
+@import '@alfalab/core-components-vars/src/index.css';
+@import './vars.css';
+
+.switch {
+    background-color: var(--switch-bg-inverted-color);
+
+    &:hover {
+        background-color: var(--switch-hover-bg-inverted-color);
+    }
+}
+
+.label {
+    color: var(--switch-label-inverted-color);
+}
+
+.hint {
+    color: var(--switch-hint-inverted-color);
+}
+
+.checked .switch {
+    background-color: var(--switch-checked-bg-inverted-color);
+
+    &:hover {
+        background-color: var(--switch-checked-hover-bg-inverted-color);
+    }
+}
+
+.disabled .label {
+    color: var(--switch-disabled-inverted-color);
+}
+
+.disabled .hint {
+    color: var(--switch-disabled-inverted-color);
+}
+
+.disabled .switch {
+    background-color: var(--switch-disabled-bg-inverted-color);
+
+    &:before {
+        background-color: var(--switch-icon-disabled-inverted-color);
+    }
+}
+
+.disabled.checked .switch {
+    background-color: var(--switch-disabled-checked-bg-inverted-color);
+}

package/src/types/colors.ts

@@ -0,0 +1 @@
+export type Colors = 'default' | 'inverted';

package/src/vars.css

@@ -0,0 +1,37 @@
+:root {
+    --switch-label-color: var(--color-light-text-primary);
+    --switch-hint-color: var(--color-light-text-secondary);
+    --switch-bg-color: var(--color-light-neutral-translucent-700);
+    --switch-border-color: transparent;
+    --switch-error-color: var(--color-light-text-negative);
+
+    /* inverted */
+    --switch-label-inverted-color: var(--color-light-text-primary-inverted);
+    --switch-hint-inverted-color: var(--color-light-text-secondary-inverted);
+    --switch-checked-bg-inverted-color: var(--color-light-status-positive-inverted);
+    --switch-checked-hover-bg-inverted-color: var(--color-light-status-positive-inverted-hover);
+    --switch-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted);
+
+    /* hover */
+    --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
+    --switch-hover-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted-hover);
+
+    /* checked */
+    --switch-checked-bg-color: var(--color-light-status-positive);
+    --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
+
+    /* disabled */
+    --switch-disabled-color: var(--color-light-text-secondary);
+    --switch-disabled-inverted-color: var(--color-light-text-secondary-inverted);
+    --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
+    --switch-disabled-bg-inverted-color: var(--color-light-neutral-translucent-200-inverted);
+
+    /* disabled checked */
+    --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
+    --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
+
+    /* icon */
+    --switch-icon-color: var(--color-static-neutral-0);
+    --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
+    --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
+}

package/types/colors.d.ts

@@ -0,0 +1,2 @@
+type Colors = 'default' | 'inverted';
+export { Colors };

package/types/colors.js

@@ -0,0 +1,2 @@
+'use strict';
+