@peassoft/mnr-web-ui-kit 2.4.0 → 3.0.0

package/README.md

@@ -1,7 +1,31 @@
 # Memorize'n'Revise Web UI Kit
 
-## Light/Dark Color Schemes
+UI kit and Design system for Memorize'n'Revise.
 
-The Kit supports the `prefers-color-scheme` media query.
+**CAUTION!** You definitely should not use this package unless you're working on Memorize'n'Revise project.
 
-To check appearance of a component in any scheme, while running the Storybook, use Chrome DevTools to emulate a color scheme (`Rendering` tab).
+## Installation
+
+```shell
+$ npm i @peassoft/mnr-web-ui-kit
+```
+
+## Light/Dark Color Schemes Support
+
+The Design system utilizes CSS `light-dark()` function to support light and dark OS modes.
+
+The `@peassoft/mnr-web-ui-kit/styles.css` file which you must import into your project already has necessary settings for `light-dark()` support:
+
+```css
+:root,:host {
+  color-scheme: light dark;
+}
+```
+
+## Usage Example
+
+```js
+// Root of your project
+
+import '@peassoft/mnr-web-ui-kit/styles.css';
+```

package/dist/button/index.js

@@ -28,7 +28,7 @@ export function Button(props) {
     children: [_jsx("span", {
       className: labelCn,
       children: label
-    }), !!isInProgress && _jsx("div", {
+    }), isInProgress && _jsx("div", {
       className: 'uikit_Button_spinner',
       "data-test-id": 'spinner'
     })]

package/dist/button/styles.css

@@ -1,32 +1,23 @@
 .uikit_Button_btn {
-  --uikit-color-main: #3f72af;
-  --uikit-color-secondary: #dbe2ef;
-
   display: block;
   appearance: none;
-  color: var(--uikit-color-secondary);
-  background-color: var(--uikit-color-main);
-  border: 1px solid var(--uikit-color-main);
-  border-radius: 5px;
+  color: var(--mnr-color-gray-1);
+  background-color: var(--mnr-color-accent);
+  border: 1px solid var(--mnr-color-accent);
+  border-radius: var(--mnr-radius-md);
   font-family: inherit;
-  font-size: 1em;
+  font-size: var(--mnr-font-size-md);
   margin: 0;
-  padding: 1em 2em;
+  padding: var(--mnr-spacing-md) var(--mnr-spacing-xl);
   cursor: pointer;
   position: relative;
-  outline-offset: 1px;
+  outline-offset: var(--mnr-spacing-xs);
 }
 
 .uikit_Button_btn--secondary {
-  color: var(--uikit-color-main);
-  background-color: var(--uikit-color-secondary);
-  border: 1px solid var(--uikit-color-main);
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_Button_btn--secondary {
-    border-color: var(--uikit-color-secondary);
-  }
+  color: var(--mnr-color-accent);
+  background-color: transparent;
+  border: 1px solid var(--mnr-color-accent);
 }
 
 .uikit_Button_btn--stretched {
@@ -34,7 +25,7 @@
 }
 
 .uikit_Button_btn--small {
-  padding: .8em 1.4em;
+  padding: var(--mnr-spacing-sm) var(--mnr-spacing-lg);
 }
 
 .uikit_Button_label--hidden {

package/dist/button-radio-group/styles.css

@@ -1,18 +1,9 @@
 .uikit_ButtonRadioGroup_label {
-  margin: 0 0 0.5em;
-  color: #666;
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_ButtonRadioGroup_label {
-    color: #979797;
-  }
+  margin: 0 0 var(--mnr-spacing-sm);
+  color: var(--mnr-color-text-on-page-background-secondary);
 }
 
 .uikit_ButtonRadioGroup_cont {
-  --uikit-color-main: #3f72af;
-  --uikit-color-secondary: #dbe2ef;
-
   display: flex;
   align-items: center;
 }
@@ -20,33 +11,27 @@
 .uikit_ButtonRadioGroup_btn {
   display: block;
   appearance: none;
-  border: 1px solid var(--uikit-color-main);
+  border: 1px solid var(--mnr-color-accent);
   border-right: 0;
-  color: var(--uikit-color-main);
-  background-color: var(--uikit-color-secondary);
-  border-radius: 5px 0 0 5px;
+  color: var(--mnr-color-accent);
+  background-color: transparent;
+  border-radius: var(--mnr-radius-md) 0 0 var(--mnr-radius-md);
   font-family: inherit;
-  font-size: 1em;
+  font-size: var(--mnr-font-size-md);
   margin: 0;
-  padding: 0.6em;
+  padding: var(--mnr-spacing-sm);
   cursor: pointer;
-  outline-offset: 1px;
+  outline-offset: var(--mnr-spacing-xs);
 }
 
 .uikit_ButtonRadioGroup_btn--checked {
-  color: var(--uikit-color-secondary);
-  background-color: var(--uikit-color-main);
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_ButtonRadioGroup_btn--checked {
-    border-color: var(--uikit-color-main);
-  }
+  color: var(--mnr-color-gray-1);
+  background-color: var(--mnr-color-accent);
 }
 
 .uikit_ButtonRadioGroup_btn--last {
-  border-radius: 0 5px 5px 0;
-  border-right: 1px solid var(--uikit-color-main);
+  border-radius: 0 var(--mnr-radius-md) var(--mnr-radius-md) 0;
+  border-right: 1px solid var(--mnr-color-accent);
 }
 
 .uikit_ButtonRadioGroup_btn--mid {

package/dist/error-message/index.d.ts

@@ -1,4 +1,4 @@
-import { type JSX } from 'react';
+import type { JSX } from 'react';
 import './styles.css';
 type Props = {
     /**

package/dist/error-message/index.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import 'react';
 import './styles.css';
 export function ErrorMessage(props) {
   const {

package/dist/error-message/styles.css

@@ -1,15 +1,9 @@
 .uikit_ErrorMessage {
-  font-size: 0.85em;
-  color: #a7241b;
-  margin: 0.5em 0 0;
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_ErrorMessage {
-    color: #fb827a;
-  }
+  font-size: var(--mnr-font-size-sm);
+  color: var(--mnr-color-error);
+  margin: var(--mnr-spacing-sm) 0 0;
 }
 
 .uikit_ErrorMessage--standalone {
-  margin: 1.8em 0 0;
+  margin: var(--mnr-spacing-xl) 0 0;
 }

package/dist/input-field/index.js

@@ -82,7 +82,7 @@ export function InputField(props) {
         onKeyDown: handleKeyDown,
         onBlur: onBlur || undefined
       })]
-    }), type === 'password' && !!isCapslockOn && _jsxs("div", {
+    }), type === 'password' && isCapslockOn && _jsxs("div", {
       className: 'uikit_InputField_capslockMsg',
       children: [_jsx("svg", {
         width: '24',

package/dist/input-field/styles.css

@@ -1,5 +1,5 @@
 .uikit_InputField_cont:not(:first-child) {
-  margin-top: 1.5em;
+  margin-block-start: var(--mnr-spacing-lg);
 }
 
 .uikit_InputField_innerCont {
@@ -10,104 +10,61 @@
 
 .uikit_InputField_label {
   display: block;
-  margin-bottom: 0.25em;
-  color: #737373;
+  margin-block-end: var(--mnr-spacing-xs);
+  color: var(--mnr-color-text-on-page-background-secondary);
   width: 100%;
 }
 
-@media (prefers-color-scheme: dark) {
-  .uikit_InputField_label {
-    color: #acacac;
-  }
-}
-
 .uikit_InputField_required {
-  color: #a7241b;
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_InputField_required {
-    color: #fb827a;
-  }
+  color: var(--mnr-color-error);
 }
 
 .uikit_InputField_input {
   display: block;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid #bcbcbc;
-  border-radius: 5px;
-  font-size: 1.2em;
-  padding: 0.5em 1em;
-  color: #242629;
-  background-color: #fff;
+  border: 1px solid var(--mnr-color-input-border);
+  border-radius: var(--mnr-radius-md);
+  font-size: var(--mnr-font-size-lg);
+  padding: var(--mnr-spacing-sm) var(--mnr-spacing-md);
+  color: var(--mnr-color-input-text);
+  background-color: var(--mnr-color-input-background);
   font-family: inherit;
 }
 
-@media (prefers-color-scheme: dark) {
-  .uikit_InputField_input {
-    background-color: #f9f9f9;
-    border-color: #f9f9f9;
-  }
-}
-
 .uikit_InputField_input:disabled {
-  color: #848484;
-  background-color: #efefef;
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_InputField_input:disabled {
-    background-color: #dadada;
-    border-color: #dadada;
-  }
+  color: light-dark(
+    var(--mnr-color-gray-6),
+    var(--mnr-color-dark-2)
+  );
+  background-color: light-dark(
+    var(--mnr-color-gray-1),
+    var(--mnr-color-dark-4)
+  );
 }
 
 .uikit_InputField_capslockMsg {
   display: flex;
-  gap: .5em;
+  gap: var(--mnr-spacing-sm);
   align-items: center;
-  margin-top: 0.2em;
-  font-size: 0.85rem;
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_InputField_capslockMsg {
-    color: #acacac;
-  }
+  margin-top: var(--mnr-spacing-xs);
+  font-size: var(--mnr-font-size-sm);
+  color: var(--mnr-color-text-on-page-background-secondary);
 }
 
 .uikit_InputField_capslockIcon {
-  color: #a7241b;
+  color: var(--mnr-color-error);
   fill: currentColor;
 }
 
-@media (prefers-color-scheme: dark) {
-  .uikit_InputField_capslockIcon {
-    color: #fb827a;
-  }
-}
-
 .uikit_InputField_errorMsg {
-  color: #a7241b;
-  font-size: 0.85rem;
-  margin-top: 0.2em;
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_InputField_errorMsg {
-    color: #fb827a;
-  }
+  color: var(--mnr-color-error);
+  font-size: var(--mnr-font-size-sm);
+  margin-top: var(--mnr-spacing-xs);
 }
 
 .uikit_InputField_description {
-  color: #737373;
-  font-size: 0.85rem;
-  margin-top: 0.2em;
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_InputField_description {
-    color: #acacac;
-  }
+  color: var(--mnr-color-text-on-page-background-secondary);
+  font-size: var(--mnr-font-size-sm);
+  margin-top: var(--mnr-spacing-xs);
 }

package/dist/link-button/styles.css

@@ -1,33 +1,24 @@
 .uikit_LinkButton {
-  --uikit-color-main: #3f72af;
-  --uikit-color-secondary: #dbe2ef;
-
   display: block;
   width: fit-content;
-  color: var(--uikit-color-secondary);
-  background-color: var(--uikit-color-main);
-  border: 1px solid var(--uikit-color-main);
-  border-radius: 5px;
+  color: var(--mnr-color-gray-1);
+  background-color: var(--mnr-color-accent);
+  border: 1px solid var(--mnr-color-accent);
+  border-radius: var(--mnr-radius-md);
   font-family: inherit;
-  font-size: 1em;
-  padding: 1em 2em;
+  font-size: var(--mnr-font-size-md);
+  padding: var(--mnr-spacing-md) var(--mnr-spacing-xl);
   cursor: pointer;
-  outline-offset: 1px;
+  outline-offset: var(--mnr-spacing-xs);
   text-decoration: none;
 }
 
 .uikit_LinkButton--secondary {
-  color: var(--uikit-color-main);
-  background-color: var(--uikit-color-secondary);
-  border: 1px solid var(--uikit-color-main);
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_LinkButton--secondary {
-    border-color: var(--uikit-color-secondary);
-  }
+  color: var(--mnr-color-accent);
+  background-color: transparent;
+  border: 1px solid var(--mnr-color-accent);
 }
 
 .uikit_LinkButton--small {
-  padding: .8em 1.4em;
+  padding: var(--mnr-spacing-sm) var(--mnr-spacing-lg);
 }

package/dist/plain-select/index.js

@@ -26,18 +26,14 @@ export function PlainSelect(props) {
           const idx = items.findIndex(item => item.id === firstId);
           if (idx >= 0) {
             return idx;
-          } else {
-            return 0;
           }
-        } else {
           return 0;
         }
-      } else {
         return 0;
       }
-    } else {
       return 0;
     }
+    return 0;
   });
   const itemRefs = useMemo(() => items.map(() => createRef()), [items]);
   const handleSingleSelectKeyDown = useCallback(event => {
@@ -156,12 +152,11 @@ export function PlainSelect(props) {
       children: label
     }), _jsx("ul", {
       className: 'uikit_PlainSelect_cont',
-      style: {
-        ...(maxHeight ? {
-          maxHeight,
-          overflow: 'auto'
-        } : {})
-      },
+      style: maxHeight ? {
+        maxHeight,
+        overflow: 'auto'
+      } : {},
+      /* oxlint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role */
       role: 'listbox',
       "aria-labelledby": labelDomId,
       "aria-multiselectable": multiple,
@@ -172,6 +167,8 @@ export function PlainSelect(props) {
         return _jsxs("li", {
           ref: itemRefs[idx],
           className: 'uikit_PlainSelect_itemCont',
+          /* oxlint-disable-next-line
+            jsx-a11y/no-noninteractive-element-to-interactive-role */
           role: 'option',
           "aria-selected": isSelected,
           tabIndex: multiple && currFocusedIdx === idx ? 0 : -1,

package/dist/plain-select/styles.css

@@ -1,35 +1,22 @@
 .uikit_PlainSelect_label {
   margin: 0;
-  color: #737373;
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_PlainSelect_label {
-    color: #acacac;
-  }
+  color: var(--mnr-color-text-on-page-background-secondary);
 }
 
 .uikit_PlainSelect_cont {
-  margin: 0.5em 0 0;
-  padding: 0.5em;
-  background-color: #fff;
-  border: 1px solid #bcbcbc;
+  margin: var(--mnr-spacing-sm) 0 0;
+  padding: var(--mnr-spacing-sm);
+  background-color: var(--mnr-color-input-background);
+  border: 1px solid var(--mnr-color-input-border);
   list-style-type: none;
-  border-radius: 0.25em;
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_PlainSelect_cont {
-    background-color: #f9f9f9;
-    border-color: #f9f9f9;
-  }
+  border-radius: var(--mnr-radius-sm);
 }
 
 .uikit_PlainSelect_itemCont {
   display: flex;
   align-items: flex-start;
-  gap: 0.5rem;
-  padding: 0.25em;
+  gap: var(--mnr-spacing-sm);
+  padding: var(--mnr-spacing-xs);
   cursor: pointer;
 }
 
@@ -38,23 +25,25 @@
 }
 
 .uikit_PlainSelect_uncheckedIcon {
-  color: #767676;
+  color: light-dark(
+    var(--mnr-color-gray-4),
+    var(--mnr-color-gray-3)
+  );
 }
 
 .uikit_PlainSelect_checkedIcon {
-  color: #337e33;
+  color: var(--mnr-color-success);
 }
 
 .uikit_PlainSelect_itemContent {
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--mnr-color-input-border);
   flex-basis: 100%;
   flex-shrink: 1;
-  padding-bottom: 0.25em;
-  color: #242629;
+  padding-bottom: var(--mnr-spacing-xs);
+  color: var(--mnr-color-input-text);
 }
 
 .uikit_PlainSelect_description {
-  margin-top: 0.5em;
-  color: #737373;
-  font-size: 87.5%;
+  margin-top: var(--mnr-spacing-sm);
+  font-size: var(--mnr-font-size-sm);
 }

package/dist/select/index.js

@@ -43,7 +43,9 @@ export function Select(props) {
           onChange: handleChange,
           onKeyDown: handleKeyDown,
           onBlur: onBlur || undefined,
-          children: [selectedItemId == null && _jsx("option", {}), items.map(item => _jsx("option", {
+          children: [selectedItemId == null && _jsx("option", {
+            children: ''
+          }), items.map(item => _jsx("option", {
             value: item.id,
             children: item.value
           }, item.id))]
@@ -54,7 +56,8 @@ export function Select(props) {
             height: '24',
             viewBox: '0 0 24 24',
             children: _jsx("path", {
-              d: 'M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'
+              d: 'M7.406 8.578l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z',
+              fill: 'currentColor'
             })
           })
         })]

package/dist/select/styles.css

@@ -1,5 +1,5 @@
 .uikit_Select_cont:not(:first-child) {
-  margin-top: 1.5em;
+  margin-block-start: var(--mnr-spacing-lg);
 }
 
 .uikit_Select_innerCont {
@@ -10,17 +10,11 @@
 
 .uikit_Select_label {
   display: block;
-  margin-bottom: 0.25em;
-  color: #757575;
+  margin-block-end: var(--mnr-spacing-xs);
+  color: var(--mnr-color-text-on-page-background-secondary);
   width: 100%;
 }
 
-@media (prefers-color-scheme: dark) {
-  .uikit_Select_label {
-    color: #979797;
-  }
-}
-
 .uikit_Select_selectCont {
   position: relative;
 }
@@ -29,40 +23,28 @@
   display: block;
   box-sizing: border-box;
   width: 100%;
-  border: 1px solid #bcbcbc;
-  border-radius: 5px;
-  font-size: 1.2em;
-  padding: 0.5em 2.5em 0.5em 1em;
-  color: #242629;
-  background-color: #fff;
+  border: 1px solid var(--mnr-color-input-border);
+  border-radius: var(--mnr-radius-md);
+  font-size: var(--mnr-font-size-lg);
+  padding: var(--mnr-spacing-sm) 2.5rem var(--mnr-spacing-sm) var(--mnr-radius-lg);
+  color: var(--mnr-color-input-text);
+  background-color:  var(--mnr-color-input-background);
   font-family: inherit;
   appearance: none;
 }
 
-@media (prefers-color-scheme: dark) {
-  .uikit_Select_input {
-    background-color: #f9f9f9;
-    border-color: #f9f9f9;
-  }
-}
-
 .uikit_Select_arrowCont {
   position: absolute;
   top: 0;
-  right: 0.5em;
+  right: 0.5rem;
   bottom: 0;
   display: flex;
   align-items: center;
+  color: currentColor;
 }
 
 .uikit_Select_errorMsg {
-  color: #a7241b;
-  font-size: 0.85rem;
-  margin-top: 0.2em;
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_Select_errorMsg {
-    color: #fb827a;
-  }
+  color: var(--mnr-color-error);
+  font-size: var(--mnr-font-size-sm);
+  margin-top: var(--mnr-spacing-xs);
 }

package/dist/styles.css

@@ -0,0 +1,215 @@
+:root,:host {
+  color-scheme: light dark;
+
+  /* Palette colors */
+
+  --mnr-color-gray-0: #f8f9fa;
+  --mnr-color-gray-1: #f1f3f5;
+  --mnr-color-gray-2: #e9ecef;
+  --mnr-color-gray-3: #dee2e6;
+  --mnr-color-gray-4: #ced4da;
+  --mnr-color-gray-5: #adb5bd;
+  --mnr-color-gray-6: #868e96;
+  --mnr-color-gray-7: #495057;
+  --mnr-color-gray-8: #343a40;
+  --mnr-color-gray-9: #212529;
+
+  --mnr-color-dark-0: #d8dae0;
+  --mnr-color-dark-1: #ccc;
+  --mnr-color-dark-2: #767980;
+  --mnr-color-dark-3: #6d727d;
+  --mnr-color-dark-4: #3b3e43;
+  --mnr-color-dark-5: #292c33;
+  --mnr-color-dark-6: #22252b;
+  --mnr-color-dark-7: #1d2025;
+
+  --mnr-color-red-0: #fff5f5;
+  --mnr-color-red-1: #ffe3e3;
+  --mnr-color-red-2: #ffc9c9;
+  --mnr-color-red-3: #ffa8a8;
+  --mnr-color-red-4: #ff8787;
+  --mnr-color-red-5: #ff6b6b;
+  --mnr-color-red-6: #fa5252;
+  --mnr-color-red-7: #f03e3e;
+  --mnr-color-red-8: #e03131;
+  --mnr-color-red-9: #c92a2a;
+
+  --mnr-color-blue-0: #e7f5ff;
+  --mnr-color-blue-1: #d0ebff;
+  --mnr-color-blue-2: #a5d8ff;
+  --mnr-color-blue-3: #74c0fc;
+  --mnr-color-blue-4: #4dabf7;
+  --mnr-color-blue-5: #339af0;
+  --mnr-color-blue-6: #228be6;
+  --mnr-color-blue-7: #1c7ed6;
+  --mnr-color-blue-8: #1971c2;
+  --mnr-color-blue-9: #1864ab;
+
+  --mnr-color-green-0: #ebfbee;
+  --mnr-color-green-1: #d3f9d8;
+  --mnr-color-green-2: #b2f2bb;
+  --mnr-color-green-3: #8ce99a;
+  --mnr-color-green-4: #69db7c;
+  --mnr-color-green-5: #51cf66;
+  --mnr-color-green-6: #40c057;
+  --mnr-color-green-7: #37b24d;
+  --mnr-color-green-8: #2f9e44;
+  --mnr-color-green-9: #2b8a3e;
+
+  --mnr-color-orange-0: #fff4e6;
+  --mnr-color-orange-1: #ffe8cc;
+  --mnr-color-orange-2: #ffd8a8;
+  --mnr-color-orange-3: #ffc078;
+  --mnr-color-orange-4: #ffa94d;
+  --mnr-color-orange-5: #ff922b;
+  --mnr-color-orange-6: #fd7e14;
+  --mnr-color-orange-7: #f76707;
+  --mnr-color-orange-8: #e8590c;
+  --mnr-color-orange-9: #d9480f;
+
+  --mnr-color-yellow-0: #fff9db;
+  --mnr-color-yellow-1: #fff3bf;
+  --mnr-color-yellow-2: #ffec99;
+  --mnr-color-yellow-3: #ffe066;
+  --mnr-color-yellow-4: #ffd43b;
+  --mnr-color-yellow-5: #fcc419;
+  --mnr-color-yellow-6: #fab005;
+  --mnr-color-yellow-7: #f59f00;
+  --mnr-color-yellow-8: #f08c00;
+  --mnr-color-yellow-9: #e67700;
+
+
+  /* Named colors */
+
+  --mnr-color-white: #fff;
+  --mnr-color-accent: #3f72af;
+
+  --mnr-color-page-background: light-dark(
+    var(--mnr-color-gray-0),
+    var(--mnr-color-dark-5)
+  );
+  --mnr-color-text-on-page-background: light-dark(
+    var(--mnr-color-gray-9),
+    var(--mnr-color-dark-0)
+  );
+  --mnr-color-text-on-page-background-secondary: light-dark(
+    var(--mnr-color-gray-7),
+    var(--mnr-color-dark-1)
+  );
+  --mnr-color-card-background: light-dark(
+    var(--mnr-color-white),
+    var(--mnr-color-dark-6)
+  );
+  --mnr-color-card-border: light-dark(
+    var(--mnr-color-gray-3),
+    var(--mnr-color-dark-2)
+  );
+  --mnr-color-card-text: light-dark(
+    var(--mnr-color-gray-8),
+    var(--mnr-color-dark-1)
+  );
+  --mnr-color-card-text-selection-background: light-dark(
+    var(--mnr-color-yellow-2),
+    var(--mnr-color-yellow-4)
+  );
+  --mnr-color-card-text-selection: light-dark(
+    var(--mnr-color-gray-8),
+    var(--mnr-color-dark-6)
+  );
+  --mnr-color-card-text-code-background: light-dark(
+    var(--mnr-color-gray-2),
+    var(--mnr-color-dark-1)
+  );
+  --mnr-color-card-text-code: light-dark(
+    var(--mnr-color-gray-8),
+    var(--mnr-color-dark-7)
+  );
+  --mnr-color-success: light-dark(
+    var(--mnr-color-green-9),
+    var(--mnr-color-green-7)
+  );
+  --mnr-color-error: light-dark(
+    var(--mnr-color-red-9),
+    var(--mnr-color-red-5)
+  );
+  --mnr-color-input-border: light-dark(
+    var(--mnr-color-gray-5),
+    var(--mnr-color-dark-2)
+  );
+  --mnr-color-input-text: light-dark(
+    var(--mnr-color-gray-8),
+    var(--mnr-color-dark-1)
+  );
+  --mnr-color-input-background: light-dark(
+    var(--mnr-color-white),
+    var(--mnr-color-dark-6)
+  );
+
+  /* Fonts */
+
+  --mnr-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;;
+  --mnr-font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
+
+  /* Font weights */
+  --mnr-font-weight-regular: 400;
+  --mnr-font-weight-medium: 600;
+  --mnr-font-weight-bold: 700;
+
+  /* Font sizes */
+  --mnr-font-size-xs: .75rem;
+  --mnr-font-size-sm: .875rem;
+  --mnr-font-size-md: 1rem;
+  --mnr-font-size-lg: 1.125rem;
+  --mnr-font-size-xl: 1.25rem;
+
+  /* Line heights */
+  --mnr-line-height-xs: 1.4;
+  --mnr-line-height-sm: 1.45;
+  --mnr-line-height-md: 1.55;
+  --mnr-line-height-lg: 1.6;
+  --mnr-line-height-xl: 1.65;
+
+  /* Typography */
+
+  --mnr-h1-font-size: 2.125rem;
+  --mnr-h1-line-height: 1.3;
+  --mnr-h1-font-weight: 700;
+
+  --mnr-h2-font-size: 1.625rem;
+  --mnr-h2-line-height: 1.35;
+  --mnr-h2-font-weight: 700;
+
+  --mnr-h3-font-size: 1.375rem;
+  --mnr-h3-line-height: 1.4;
+  --mnr-h3-font-weight: 700;
+
+  --mnr-h4-font-size: 1.125rem;
+  --mnr-h4-line-height: 1.45;
+  --mnr-h4-font-weight: 700;
+
+  --mnr-h5-font-size: 1rem;
+  --mnr-h5-line-height: 1.5;
+  --mnr-h5-font-weight: 700;
+
+  --mnr-h6-font-size: .875rem;
+  --mnr-h6-line-height: 1.5;
+  --mnr-h6-font-weight: 700;
+
+  /* Spacing */
+
+  --mnr-spacing-xs: .25rem;
+  --mnr-spacing-sm: .5rem;
+  --mnr-spacing-md: 1rem;
+  --mnr-spacing-lg: 1.5rem;
+  --mnr-spacing-xl: 2rem;
+
+  /* Radius */
+
+  --mnr-radius-xs: .125rem;
+  --mnr-radius-sm: .25rem;
+  --mnr-radius-md: .3125rem;
+  --mnr-radius-lg: 1rem;
+  --mnr-radius-xl: 2rem;
+
+
+}

package/dist/switch/styles.css

@@ -1,23 +1,11 @@
 .uikit_Switch_cont {
   --pin-size: 1.5rem;
 
-  --color-label: #757575;
-  --color-bkg: #d9d9d9;
-  --color-bkg-on: #3f72af;
-  --color-border: #aaa;
-
   box-sizing: border-box;
   display: flex;
   gap: 1rem;
   align-items: center;
-  color: var(--color-label);
-}
-
-@media (prefers-color-scheme: dark) {
-  .uikit_Switch_cont {
-    --color-label: #979797;
-    --color-border: var(--color-bkg);
-  }
+  color: var(--mnr-color-text-on-page-background-secondary);
 }
 
 .uikit_Switch_cont *,
@@ -33,22 +21,25 @@
   align-items: center;
   width: calc(var(--pin-size) * 2 + 0.375rem);
   height: var(--btn-height);
-  border: 1px solid var(--color-border);
+  border: 1px solid var(--mnr-color-input-border);
   border-radius: calc(var(--btn-height) / 2);
   padding: 0 0.125rem;
-  background-color: var(--color-bkg);
+  background-color: light-dark(
+    var(--mnr-color-gray-2),
+    var(--mnr-color-dark-2)
+  );
   outline-offset: 0.25rem;
 }
 
 .uikit_Switch_btn--on {
   justify-content: flex-end;
-  background-color: var(--color-bkg-on);
-  border-color: var(--color-bkg-on);
+  background-color: var(--mnr-color-accent);
+  border-color: var(--mnr-color-accent);
 }
 
 .uikit_Switch_pin {
   width: var(--pin-size);
   height: var(--pin-size);
   border-radius: 50%;
-  background-color: #fff;
+  background-color: var(--mnr-color-input-background);
 }

package/dist/tab-panel/index.d.ts

@@ -0,0 +1,22 @@
+import { type JSX } from 'react';
+export type TabPanelProps = {
+    /**
+     * HTML `id` attribute to be used for linking with the corresponding tab item.
+     *
+     * Should be generated with the use of React's `useId()` hook and be used both in the tab item
+     * and in the corresponding tab panel component.
+     */
+    htmlId: string;
+    /**
+     * HTML 'id` of the corresponding tab item.
+     */
+    htmlTabId: string;
+    /** Styles API. */
+    classNames?: {
+        /** Root element. */
+        root?: string;
+    };
+    /** Contents of the tab. */
+    children: React.ReactNode;
+};
+export declare const TabPanel: import("react").MemoExoticComponent<(props: TabPanelProps) => JSX.Element>;

package/dist/tab-panel/index.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useMemo } from 'react';
+export const TabPanel = memo(function TabPanel(props) {
+  const {
+    htmlId,
+    htmlTabId,
+    classNames,
+    children
+  } = props;
+  const rootElementCn = useMemo(() => {
+    return classNames?.root || undefined;
+  }, [classNames]);
+  return _jsx("div", {
+    id: htmlId,
+    role: 'tabpanel',
+    tabIndex: 0,
+    "aria-labelledby": htmlTabId,
+    className: rootElementCn,
+    children: children
+  });
+});

package/dist/tabs/index.d.ts

@@ -0,0 +1,55 @@
+import { type JSX } from 'react';
+import './styles.css';
+export type TabsProps = {
+    /** Tab descriptors. */
+    tabs: TabItem[];
+    /** ID of the currently selected tab. */
+    selectedTabId: string;
+    /**
+     * A11y label for the tabs container.
+     * It does not appear in the UI, but required by WCAG.
+     */
+    tablistLabel: string;
+    /**
+     * Variant of tabs alignment.
+     *
+     * - "spread" - tabs are evenly spread over the available width;
+     * - "startAlighed" - tabs are aligned to the start of the container.
+     *
+     * Optional. Defaults to "spread".
+     */
+    variant?: 'spread' | 'startAlighed';
+    /** Styles API. */
+    classNames?: {
+        /** Root element. */
+        root?: string;
+    };
+    /** Event handler for the event when user activates another tab. */
+    onChange: (id: string) => unknown;
+};
+/** Tab item descriptor. */
+export type TabItem = {
+    /**
+     * Unique key/ID which is used by application logic to decide what tab panel to render.
+     *
+     * This ID is not used as an HTML `id` attribute (see `htmlId` prop).
+     */
+    id: string;
+    /** Visible label. */
+    label: string;
+    /**
+     * HTML `id` attribute to be used for linking with the corresponding tab panel.
+     *
+     * Should be generated with the use of React's `useId()` hook and be used both in the tab item
+     * and in the corresponding tab panel component.
+     */
+    htmlId: string;
+    /**
+     * HTML `id` attribute of the tab panel associated with this tab.
+     *
+     * This id is used in the `aria-controls` attribute. Should be generated with
+     * the use of React's `useId()` hook.
+     */
+    tabPanelId: string;
+};
+export declare function Tabs(props: TabsProps): JSX.Element;

package/dist/tabs/index.js

@@ -0,0 +1,79 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useCallback, createRef } from 'react';
+import './styles.css';
+export function Tabs(props) {
+  const {
+    tabs,
+    selectedTabId,
+    tablistLabel,
+    variant = 'spread',
+    classNames,
+    onChange
+  } = props;
+  const btnRefs = useMemo(() => tabs.map(() => createRef()), [tabs]);
+  const rootContainerClassName = useMemo(() => {
+    let cn = 'uikit_Tabs_tabList';
+    if (classNames?.root) {
+      cn += ` ${classNames.root}`;
+    }
+    switch (variant) {
+      case 'spread':
+        break;
+      case 'startAlighed':
+        cn += ' uikit_Tabs_tabList--startAligned';
+        break;
+      default:
+        {
+          const _exhaustiveCheck = variant;
+          return _exhaustiveCheck;
+        }
+    }
+    return cn;
+  }, [classNames, variant]);
+  const handleKeyDownOnTab = useCallback(e => {
+    const btn = e.target;
+    const id = btn.attributes.getNamedItem('data-id')?.value;
+    if (!id) return;
+    const currIdx = tabs.findIndex(tab => tab.id === id);
+    let nextIdx = null;
+    switch (e.key) {
+      case 'ArrowRight':
+        nextIdx = currIdx + 1;
+        if (nextIdx > tabs.length - 1) nextIdx = 0;
+        break;
+      case 'ArrowLeft':
+        nextIdx = currIdx - 1;
+        if (nextIdx < 0) nextIdx = tabs.length - 1;
+    }
+    if (nextIdx == null) return;
+    const nextId = tabs[nextIdx]?.id;
+    if (!nextId) return;
+    btnRefs[nextIdx]?.current?.focus();
+    onChange(nextId);
+  }, [tabs, btnRefs, onChange]);
+  return _jsx("div", {
+    className: rootContainerClassName,
+    role: 'tablist',
+    "aria-label": tablistLabel,
+    children: tabs.map((tab, idx) => _jsx("button", {
+      ref: btnRefs[idx],
+      type: 'button',
+      id: tab.htmlId,
+      "data-id": tab.id,
+      className: 'uikit_Tabs_btn' + (selectedTabId === tab.id ? ' uikit_Tabs_btn--active' : ''),
+      role: 'tab',
+      "aria-controls": tab.tabPanelId,
+      "aria-selected": selectedTabId === tab.id,
+      tabIndex: selectedTabId === tab.id ? 0 : -1,
+      onClick: () => {
+        if (selectedTabId !== tab.id) {
+          onChange(tab.id);
+        }
+      },
+      onKeyDown: handleKeyDownOnTab,
+      children: _jsx("span", {
+        children: tab.label
+      })
+    }, tab.id))
+  });
+}

package/dist/tabs/styles.css

@@ -0,0 +1,40 @@
+.uikit_Tabs_tabList {
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-around;
+
+  & *,
+  & :before,
+  & :after {
+    box-sizing: inherit;
+  }
+}
+
+.uikit_Tabs_tabList--startAligned {
+  justify-content: flex-start;
+  gap: var(--mnr-spacing-md);
+}
+
+.uikit_Tabs_btn {
+  display: block;
+  appearance: none;
+  color: var(--mnr-color-text-on-page-background-secondary);
+  font-family: inherit;
+  font-size: var(--mnr-font-size-md);
+  font-weight: var(--mnr-font-weight-medium);
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+  padding-block-end: 0.1rem;
+  cursor: pointer;
+  border: 0;
+  border-block-end: 3px solid transparent;
+  transition: border-block-end-color 0.4s ease-in-out;
+  user-select: none;
+  outline-offset: 3px;
+}
+
+.uikit_Tabs_btn--active {
+  border-block-end-color: var(--mnr-color-accent);
+  color: var(--mnr-color-accent);
+}

package/dist/text-button/styles.css

@@ -2,10 +2,11 @@
   display: inline;
   appearance: none;
   border: none;
-  color: #3f72af;
+  color: var(--mnr-color-accent);
   background-color: transparent;
   font-family: inherit;
   font-size: 1em;
+  font-weight: var(--mnr-font-weight-medium);
   margin: 0;
   padding: 0;
   cursor: pointer;
@@ -13,14 +14,8 @@
   text-align: start;
 }
 
-@media (prefers-color-scheme: dark) {
-  .uikit_TextButton_btn {
-    color: #dbe2ef;
-  }
-}
-
 .uikit_TextButton_innerWrapper {
-  border-bottom: 1px solid currentColor;
+  border-bottom: 2px solid currentColor;
   border-top: 1px solid transparent;
   padding-bottom: 0.125em;
   line-height: 1.4;

package/package.json

@@ -1,17 +1,18 @@
 {
   "name": "@peassoft/mnr-web-ui-kit",
-  "version": "2.4.0",
+  "version": "3.0.0",
   "description": "Peassoft web UI kit for MNR web applications",
   "type": "module",
   "exports": {
-    "./*": "./dist/*"
+    "./*": "./dist/*",
+    "./styles.css": "./dist/styles.css"
   },
   "files": [
     "dist"
   ],
   "scripts": {
     "dev": "npm run storybook",
-    "test": "stylelint './src/**/*.css' && eslint ./ && npm run tsc && vitest run",
+    "test": "stylelint './**/*.css' && oxlint && npm run tsc && vitest run",
     "tsc": "tsc --noEmit",
     "build": "del-cli ./compiled && del-cli ./dist && tsc -p tsconfig-prod.json && babel ./compiled --out-dir ./dist && cpy './src/**/*.css' './dist' && cpy './compiled/**/*.d.ts' './dist'",
     "storybook": "storybook dev -p 9001 --no-open",
@@ -21,11 +22,11 @@
     "extends @memnrev/browserslist-config"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.22.15",
-    "@babel/core": "^7.22.17",
-    "@babel/preset-env": "^7.22.15",
+    "@babel/cli": "^8.0.4",
+    "@babel/core": "^8.0.1",
+    "@babel/preset-env": "^8.0.2",
     "@memnrev/browserslist-config": "^0.2.0",
-    "@memnrev/eslint-v9-config": "^0.4.0",
+    "@peassoft/linter": "^2.0.0",
     "@storybook/addon-a11y": "^10.1.4",
     "@storybook/addon-docs": "^10.1.4",
     "@storybook/addon-links": "^10.1.4",
@@ -39,8 +40,6 @@
     "@vitest/coverage-v8": "^4.0.7",
     "cpy-cli": "^7.0.0",
     "del-cli": "^7.0.0",
-    "eslint": "^9.8.0",
-    "eslint-plugin-storybook": "^10.1.4",
     "playwright": "^1.55.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
@@ -52,5 +51,9 @@
   "peerDependencies": {
     "react": ">= 19 < 20",
     "react-dom": ">= 19 < 20"
+  },
+  "allowScripts": {
+    "fsevents": true,
+    "esbuild": true
   }
 }