@alfalab/core-components-switch 4.3.2 → 4.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (44) hide show
  1. package/Component.d.ts +11 -0
  2. package/Component.js +17 -5
  3. package/cssm/Component.d.ts +11 -0
  4. package/cssm/Component.js +14 -4
  5. package/cssm/default.module.css +73 -0
  6. package/cssm/index.module.css +5 -40
  7. package/cssm/inverted.module.css +73 -0
  8. package/cssm/types/colors.d.ts +2 -0
  9. package/cssm/types/colors.js +2 -0
  10. package/cssm/vars.css +14 -0
  11. package/default.css +74 -0
  12. package/esm/Component.d.ts +11 -0
  13. package/esm/Component.js +17 -5
  14. package/esm/default.css +74 -0
  15. package/esm/index.css +23 -58
  16. package/esm/inverted.css +74 -0
  17. package/esm/types/colors.d.ts +2 -0
  18. package/esm/types/colors.js +1 -0
  19. package/index.css +23 -58
  20. package/inverted.css +74 -0
  21. package/modern/Component.d.ts +11 -0
  22. package/modern/Component.js +17 -5
  23. package/modern/default.css +74 -0
  24. package/modern/index.css +23 -58
  25. package/modern/inverted.css +74 -0
  26. package/modern/types/colors.d.ts +2 -0
  27. package/modern/types/colors.js +1 -0
  28. package/moderncssm/Component.d.ts +11 -0
  29. package/moderncssm/Component.js +12 -4
  30. package/moderncssm/default.module.css +58 -0
  31. package/moderncssm/index.module.css +3 -70
  32. package/moderncssm/inverted.module.css +58 -0
  33. package/moderncssm/types/colors.d.ts +2 -0
  34. package/moderncssm/types/colors.js +1 -0
  35. package/moderncssm/vars.css +14 -0
  36. package/package.json +3 -3
  37. package/src/Component.tsx +31 -3
  38. package/src/default.module.css +46 -0
  39. package/src/index.module.css +1 -61
  40. package/src/inverted.module.css +46 -0
  41. package/src/types/colors.ts +1 -0
  42. package/src/vars.css +37 -0
  43. package/types/colors.d.ts +2 -0
  44. package/types/colors.js +2 -0
package/Component.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
3
  import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
4
+ import { Colors } from "./types/colors";
4
5
  type Align = 'start' | 'center';
5
6
  type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
6
7
  /**
@@ -56,6 +57,11 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
56
57
  * Идентификатор для систем автоматизированного тестирования
57
58
  */
58
59
  dataTestId?: string;
60
+ /**
61
+ * Набор цветов для компонента
62
+ * @default default
63
+ */
64
+ colors?: Colors;
59
65
  };
60
66
  declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
61
67
  /**
@@ -111,5 +117,10 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
111
117
  * Идентификатор для систем автоматизированного тестирования
112
118
  */
113
119
  dataTestId?: string | undefined;
120
+ /**
121
+ * Набор цветов для компонента
122
+ * @default default
123
+ */
124
+ colors?: Colors | undefined;
114
125
  } & React.RefAttributes<HTMLLabelElement>>;
115
126
  export { SwitchProps, Switch };
package/Component.js CHANGED
@@ -15,12 +15,22 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
15
15
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
16
16
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
17
17
 
18
- var styles = {"component":"switch__component_1drxk","start":"switch__start_1drxk","center":"switch__center_1drxk","addons":"switch__addons_1drxk","block":"switch__block_1drxk","switch":"switch__switch_1drxk","content":"switch__content_1drxk","label":"switch__label_1drxk","errorMessage":"switch__errorMessage_1drxk","hint":"switch__hint_1drxk","reversed":"switch__reversed_1drxk","checked":"switch__checked_1drxk","disabled":"switch__disabled_1drxk","focused":"switch__focused_1drxk"};
18
+ var defaultStyles = {"switch":"switch__switch_1polz","label":"switch__label_1polz","hint":"switch__hint_1polz","checked":"switch__checked_1polz","disabled":"switch__disabled_1polz"};
19
+ require('./default.css')
20
+
21
+ var styles = {"component":"switch__component_1muot","start":"switch__start_1muot","center":"switch__center_1muot","addons":"switch__addons_1muot","block":"switch__block_1muot","switch":"switch__switch_1muot","content":"switch__content_1muot","label":"switch__label_1muot","errorMessage":"switch__errorMessage_1muot","hint":"switch__hint_1muot","reversed":"switch__reversed_1muot","checked":"switch__checked_1muot","disabled":"switch__disabled_1muot","focused":"switch__focused_1muot"};
19
22
  require('./index.css')
20
23
 
24
+ var invertedStyles = {"switch":"switch__switch_1fbgj","label":"switch__label_1fbgj","hint":"switch__hint_1fbgj","checked":"switch__checked_1fbgj","disabled":"switch__disabled_1fbgj"};
25
+ require('./inverted.css')
26
+
27
+ var colorStyles = {
28
+ default: defaultStyles,
29
+ inverted: invertedStyles,
30
+ };
21
31
  var Switch = React.forwardRef(function (_a, ref) {
22
32
  var _b;
23
- var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
33
+ var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors"]);
24
34
  var labelRef = React.useRef(null);
25
35
  var focused = hooks.useFocus(labelRef, 'keyboard')[0];
26
36
  var handleChange = function (e) {
@@ -31,16 +41,18 @@ var Switch = React.forwardRef(function (_a, ref) {
31
41
  var errorMessage = typeof error === 'boolean' ? '' : error;
32
42
  return (React__default.default.createElement("label", { className: cn__default.default(styles.component, styles[align], className, (_b = {},
33
43
  _b[styles.disabled] = disabled || inactive,
44
+ _b[colorStyles[colors].disabled] = disabled || inactive,
34
45
  _b[styles.checked] = checked,
46
+ _b[colorStyles[colors].checked] = checked,
35
47
  _b[styles.reversed] = reversed,
36
48
  _b[styles.focused] = focused,
37
49
  _b[styles.block] = block,
38
50
  _b)), ref: mergeRefs__default.default([labelRef, ref]) },
39
51
  React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
40
- React__default.default.createElement("span", { className: styles.switch }),
52
+ React__default.default.createElement("span", { className: cn__default.default(styles.switch, colorStyles[colors].switch) }),
41
53
  (label || hint || errorMessage) && (React__default.default.createElement("span", { className: styles.content },
42
- label && React__default.default.createElement("span", { className: styles.label }, label),
43
- hint && !errorMessage && React__default.default.createElement("span", { className: styles.hint }, hint),
54
+ label && (React__default.default.createElement("span", { className: cn__default.default(styles.label, colorStyles[colors].label) }, label)),
55
+ hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles.hint, colorStyles[colors].hint) }, hint)),
44
56
  errorMessage && (React__default.default.createElement("span", { className: styles.errorMessage, role: 'alert' }, errorMessage)))),
45
57
  addons && (
46
58
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
package/cssm/Component.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import React from 'react';
3
3
  import { ChangeEvent, InputHTMLAttributes, ReactNode } from "react";
4
+ import { Colors } from "./types/colors";
4
5
  type Align = 'start' | 'center';
5
6
  type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' | 'onChange' | 'disabled' | 'enterKeyHint'> & {
6
7
  /**
@@ -56,6 +57,11 @@ type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'hint' |
56
57
  * Идентификатор для систем автоматизированного тестирования
57
58
  */
58
59
  dataTestId?: string;
60
+ /**
61
+ * Набор цветов для компонента
62
+ * @default default
63
+ */
64
+ colors?: Colors;
59
65
  };
60
66
  declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "hint" | "onChange" | "disabled" | "enterKeyHint"> & {
61
67
  /**
@@ -111,5 +117,10 @@ declare const Switch: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttrib
111
117
  * Идентификатор для систем автоматизированного тестирования
112
118
  */
113
119
  dataTestId?: string | undefined;
120
+ /**
121
+ * Набор цветов для компонента
122
+ * @default default
123
+ */
124
+ colors?: Colors | undefined;
114
125
  } & React.RefAttributes<HTMLLabelElement>>;
115
126
  export { SwitchProps, Switch };
package/cssm/Component.js CHANGED
@@ -8,18 +8,26 @@ var mergeRefs = require('react-merge-refs');
8
8
  var cn = require('classnames');
9
9
  var coreComponentsShared = require('@alfalab/core-components-shared/cssm');
10
10
  var hooks = require('@alfalab/hooks');
11
+ var defaultStyles = require('./default.module.css');
11
12
  var styles = require('./index.module.css');
13
+ var invertedStyles = require('./inverted.module.css');
12
14
 
13
15
  function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
14
16
 
15
17
  var React__default = /*#__PURE__*/_interopDefaultCompat(React);
16
18
  var mergeRefs__default = /*#__PURE__*/_interopDefaultCompat(mergeRefs);
17
19
  var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
20
+ var defaultStyles__default = /*#__PURE__*/_interopDefaultCompat(defaultStyles);
18
21
  var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
22
+ var invertedStyles__default = /*#__PURE__*/_interopDefaultCompat(invertedStyles);
19
23
 
24
+ var colorStyles = {
25
+ default: defaultStyles__default.default,
26
+ inverted: invertedStyles__default.default,
27
+ };
20
28
  var Switch = React.forwardRef(function (_a, ref) {
21
29
  var _b;
22
- var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId"]);
30
+ var _c = _a.reversed, reversed = _c === void 0 ? false : _c, _d = _a.checked, checked = _d === void 0 ? false : _d, _e = _a.align, align = _e === void 0 ? 'start' : _e, addons = _a.addons, block = _a.block, disabled = _a.disabled, inactive = _a.inactive, error = _a.error, label = _a.label, hint = _a.hint, name = _a.name, value = _a.value, className = _a.className, onChange = _a.onChange, dataTestId = _a.dataTestId, _f = _a.colors, colors = _f === void 0 ? 'default' : _f, restProps = tslib.__rest(_a, ["reversed", "checked", "align", "addons", "block", "disabled", "inactive", "error", "label", "hint", "name", "value", "className", "onChange", "dataTestId", "colors"]);
23
31
  var labelRef = React.useRef(null);
24
32
  var focused = hooks.useFocus(labelRef, 'keyboard')[0];
25
33
  var handleChange = function (e) {
@@ -30,16 +38,18 @@ var Switch = React.forwardRef(function (_a, ref) {
30
38
  var errorMessage = typeof error === 'boolean' ? '' : error;
31
39
  return (React__default.default.createElement("label", { className: cn__default.default(styles__default.default.component, styles__default.default[align], className, (_b = {},
32
40
  _b[styles__default.default.disabled] = disabled || inactive,
41
+ _b[colorStyles[colors].disabled] = disabled || inactive,
33
42
  _b[styles__default.default.checked] = checked,
43
+ _b[colorStyles[colors].checked] = checked,
34
44
  _b[styles__default.default.reversed] = reversed,
35
45
  _b[styles__default.default.focused] = focused,
36
46
  _b[styles__default.default.block] = block,
37
47
  _b)), ref: mergeRefs__default.default([labelRef, ref]) },
38
48
  React__default.default.createElement("input", tslib.__assign({ type: 'checkbox', onChange: handleChange, disabled: disabled || inactive, checked: checked, name: name, value: value, "data-test-id": dataTestId }, restProps)),
39
- React__default.default.createElement("span", { className: styles__default.default.switch }),
49
+ React__default.default.createElement("span", { className: cn__default.default(styles__default.default.switch, colorStyles[colors].switch) }),
40
50
  (label || hint || errorMessage) && (React__default.default.createElement("span", { className: styles__default.default.content },
41
- label && React__default.default.createElement("span", { className: styles__default.default.label }, label),
42
- hint && !errorMessage && React__default.default.createElement("span", { className: styles__default.default.hint }, hint),
51
+ label && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.label, colorStyles[colors].label) }, label)),
52
+ hint && !errorMessage && (React__default.default.createElement("span", { className: cn__default.default(styles__default.default.hint, colorStyles[colors].hint) }, hint)),
43
53
  errorMessage && (React__default.default.createElement("span", { className: styles__default.default.errorMessage, role: 'alert' }, errorMessage)))),
44
54
  addons && (
45
55
  // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
package/cssm/default.module.css ADDED
@@ -0,0 +1,73 @@
1
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
2
+ } /* deprecated */ :root {
3
+ --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
4
+ --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
5
+ --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
6
+ --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
7
+ --color-light-status-positive: #0cc44d;
8
+ --color-light-status-positive-hover: #04b545;
9
+ --color-light-text-primary: rgba(3, 3, 6, 0.88);
10
+ --color-light-text-secondary: rgba(4, 4, 19, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
11
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
13
+ } :root {
14
+
15
+ /* Hard */
16
+
17
+ /* Up */
18
+
19
+ /* Hard up */
20
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
+
22
+ /* новые значения, используйте их */
23
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
24
+
25
+ /* новые значения, используйте их */
26
+ } :root {
27
+ } :root {
28
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
29
+ --switch-label-color: var(--color-light-text-primary);
30
+ --switch-hint-color: var(--color-light-text-secondary);
31
+ --switch-bg-color: var(--color-light-neutral-translucent-700);
32
+
33
+ /* inverted */
34
+
35
+ /* hover */
36
+ --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
37
+
38
+ /* checked */
39
+ --switch-checked-bg-color: var(--color-light-status-positive);
40
+ --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
41
+
42
+ /* disabled */
43
+ --switch-disabled-color: var(--color-light-text-secondary);
44
+ --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
45
+
46
+ /* disabled checked */
47
+ --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
48
+
49
+ /* icon */
50
+ --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
51
+ } .switch {
52
+ background-color: var(--switch-bg-color)
53
+ } .switch:hover {
54
+ background-color: var(--switch-hover-bg-color);
55
+ } .label {
56
+ color: var(--switch-label-color);
57
+ } .hint {
58
+ color: var(--switch-hint-color);
59
+ } .checked .switch {
60
+ background-color: var(--switch-checked-bg-color)
61
+ } .checked .switch:hover {
62
+ background-color: var(--switch-checked-hover-bg-color);
63
+ } .disabled .label {
64
+ color: var(--switch-disabled-color);
65
+ } .disabled .hint {
66
+ color: var(--switch-disabled-color);
67
+ } .disabled .switch {
68
+ background-color: var(--switch-disabled-bg-color)
69
+ } .disabled .switch:before {
70
+ background-color: var(--switch-icon-disabled-color);
71
+ } .disabled.checked .switch {
72
+ background-color: var(--switch-disabled-checked-bg-color);
73
+ }
package/cssm/index.module.css CHANGED
@@ -1,15 +1,7 @@
1
1
  :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
2
2
  } /* deprecated */ :root {
3
- --color-light-neutral-translucent-200: rgba(30, 43, 68, 0.08);
4
- --color-light-neutral-translucent-500: rgba(9, 12, 37, 0.28);
5
- --color-light-neutral-translucent-700: rgba(4, 4, 21, 0.47);
6
- --color-light-neutral-translucent-700-hover: rgba(4, 4, 19, 0.55);
7
3
  --color-light-status-info: #2288fa;
8
- --color-light-status-positive: #0cc44d;
9
- --color-light-status-positive-hover: #04b545;
10
4
  --color-light-text-negative: #ec2d20;
11
- --color-light-text-primary: rgba(3, 3, 6, 0.88);
12
- --color-light-text-secondary: rgba(4, 4, 19, 0.55);
13
5
  --color-static-neutral-0: #fff; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
14
6
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
15
7
  } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -43,29 +35,21 @@
43
35
  --focus-color: var(--color-light-status-info);
44
36
  --disabled-cursor: not-allowed;
45
37
  } /* сбрасывает синюю подсветку при нажатии */ :root {
46
- --switch-label-color: var(--color-light-text-primary);
47
- --switch-hint-color: var(--color-light-text-secondary);
48
- --switch-bg-color: var(--color-light-neutral-translucent-700);
49
38
  --switch-border-color: transparent;
50
39
  --switch-error-color: var(--color-light-text-negative);
51
40
 
41
+ /* inverted */
42
+
52
43
  /* hover */
53
- --switch-hover-bg-color: var(--color-light-neutral-translucent-700-hover);
54
44
 
55
45
  /* checked */
56
- --switch-checked-bg-color: var(--color-light-status-positive);
57
- --switch-checked-hover-bg-color: var(--color-light-status-positive-hover);
58
46
 
59
47
  /* disabled */
60
- --switch-disabled-color: var(--color-light-text-secondary);
61
- --switch-disabled-bg-color: var(--color-light-neutral-translucent-200);
62
48
 
63
49
  /* disabled checked */
64
- --switch-disabled-checked-bg-color: var(--switch-disabled-bg-color);
65
50
 
66
51
  /* icon */
67
52
  --switch-icon-color: var(--color-static-neutral-0);
68
- --switch-icon-disabled-color: var(--color-light-neutral-translucent-500);
69
53
  } .component {
70
54
  display: inline-flex;
71
55
  align-items: flex-start;
@@ -94,13 +78,10 @@
94
78
  height: 20px;
95
79
  margin: var(--gap-2);
96
80
  flex-shrink: 0;
97
- background-color: var(--switch-bg-color);
98
81
  border: 2px solid var(--switch-border-color);
99
82
  transition: background-color 0.2s ease, border-color 0.2s ease;
100
- box-sizing: border-box
101
- } .switch:hover {
102
- background-color: var(--switch-hover-bg-color);
103
- } .switch:before {
83
+ box-sizing: border-box;
84
+ } .switch:before {
104
85
  content: '';
105
86
  position: absolute;
106
87
  top: var(--gap-0);
@@ -120,7 +101,6 @@
120
101
  line-height: 24px;
121
102
  font-weight: 400;
122
103
  display: block;
123
- color: var(--switch-label-color);
124
104
  } .label:not(:only-child) {
125
105
  margin-bottom: var(--gap-4);
126
106
  } .errorMessage {
@@ -133,7 +113,6 @@
133
113
  line-height: 18px;
134
114
  font-weight: 400;
135
115
  display: block;
136
- color: var(--switch-hint-color);
137
116
  } /* Reversed state */ .component.reversed {
138
117
  flex-direction: row-reverse;
139
118
  } .reversed .content {
@@ -144,25 +123,11 @@
144
123
  padding-left: var(--gap-0);
145
124
  margin-right: auto;
146
125
  padding-right: var(--gap-16);
147
- } /* Checked state */ .checked .switch {
148
- background-color: var(--switch-checked-bg-color)
149
- } .checked .switch:hover {
150
- background-color: var(--switch-checked-hover-bg-color);
151
- } .checked .switch:before {
126
+ } /* Checked state */ .checked .switch:before {
152
127
  /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
153
128
  transform: translateX(16px);
154
129
  } /* Disabled state */ .disabled {
155
130
  cursor: var(--disabled-cursor);
156
- } .disabled .switch {
157
- background-color: var(--switch-disabled-bg-color)
158
- } .disabled .switch:before {
159
- background-color: var(--switch-icon-disabled-color);
160
- } .disabled.checked .switch {
161
- background-color: var(--switch-disabled-checked-bg-color);
162
- } .disabled .label {
163
- color: var(--switch-disabled-color);
164
- } .disabled .hint {
165
- color: var(--switch-disabled-color);
166
131
  } /* Focused state */ .focused .switch {
167
132
  outline: 2px solid var(--focus-color);
168
133
  outline-offset: 2px;
package/cssm/inverted.module.css ADDED
@@ -0,0 +1,73 @@
1
+ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
2
+ } /* deprecated */ :root {
3
+ --color-light-neutral-translucent-200-inverted: rgba(225, 225, 248, 0.09);
4
+ --color-light-neutral-translucent-500-inverted: rgba(228, 228, 251, 0.28);
5
+ --color-light-neutral-translucent-700-inverted: rgba(238, 238, 251, 0.55);
6
+ --color-light-neutral-translucent-700-inverted-hover: rgba(239, 240, 252, 0.65);
7
+ --color-light-status-positive-inverted: #17d055;
8
+ --color-light-status-positive-inverted-hover: #22e068;
9
+ --color-light-text-primary-inverted: rgba(255, 255, 255, 0.94);
10
+ --color-light-text-secondary-inverted: rgba(238, 238, 251, 0.55); /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
11
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
12
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
13
+ } :root {
14
+
15
+ /* Hard */
16
+
17
+ /* Up */
18
+
19
+ /* Hard up */
20
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
21
+
22
+ /* новые значения, используйте их */
23
+ } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
24
+
25
+ /* новые значения, используйте их */
26
+ } :root {
27
+ } :root {
28
+ } /* сбрасывает синюю подсветку при нажатии */ :root {
29
+
30
+ /* inverted */
31
+ --switch-label-inverted-color: var(--color-light-text-primary-inverted);
32
+ --switch-hint-inverted-color: var(--color-light-text-secondary-inverted);
33
+ --switch-checked-bg-inverted-color: var(--color-light-status-positive-inverted);
34
+ --switch-checked-hover-bg-inverted-color: var(--color-light-status-positive-inverted-hover);
35
+ --switch-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted);
36
+
37
+ /* hover */
38
+ --switch-hover-bg-inverted-color: var(--color-light-neutral-translucent-700-inverted-hover);
39
+
40
+ /* checked */
41
+
42
+ /* disabled */
43
+ --switch-disabled-inverted-color: var(--color-light-text-secondary-inverted);
44
+ --switch-disabled-bg-inverted-color: var(--color-light-neutral-translucent-200-inverted);
45
+
46
+ /* disabled checked */
47
+ --switch-disabled-checked-bg-inverted-color: var(--switch-disabled-bg-inverted-color);
48
+
49
+ /* icon */
50
+ --switch-icon-disabled-inverted-color: var(--color-light-neutral-translucent-500-inverted);
51
+ } .switch {
52
+ background-color: var(--switch-bg-inverted-color)
53
+ } .switch:hover {
54
+ background-color: var(--switch-hover-bg-inverted-color);
55
+ } .label {
56
+ color: var(--switch-label-inverted-color);
57
+ } .hint {
58
+ color: var(--switch-hint-inverted-color);
59
+ } .checked .switch {
60
+ background-color: var(--switch-checked-bg-inverted-color)
61
+ } .checked .switch:hover {
62
+ background-color: var(--switch-checked-hover-bg-inverted-color);
63
+ } .disabled .label {
64
+ color: var(--switch-disabled-inverted-color);
65
+ } .disabled .hint {
66
+ color: var(--switch-disabled-inverted-color);
67
+ } .disabled .switch {
68
+ background-color: var(--switch-disabled-bg-inverted-color)
69
+ } .disabled .switch:before {
70
+ background-color: var(--switch-icon-disabled-inverted-color);
71
+ } .disabled.checked .switch {
72
+ background-color: var(--switch-disabled-checked-bg-inverted-color);
73
+ }
package/cssm/types/colors.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ type Colors = 'default' | 'inverted';
2
+ export { Colors };
package/cssm/types/colors.js ADDED
@@ -0,0 +1,2 @@
1
+ 'use strict';
2
+
package/cssm/vars.css ADDED
@@ -0,0 +1,14 @@
1
+ :root {
2
+
3
+ /* inverted */
4
+
5
+ /* hover */
6
+
7
+ /* checked */
8
+
9
+ /* disabled */
10
+
11
+ /* disabled checked */
12
+
13
+ /* icon */
14
+ }