new features and clean up

docs-gen/components/atoms/Password/props.json

@@ -23,7 +23,7 @@
   },
   "show": {
     "type": "boolean",
-    "description": "Show/hide the password (the same effect when the eye icon is clicked)",
+    "description": "Show/hide the password",
     "default": "false"
   }
 }

docs/components/atoms/Password/props.md

@@ -97,6 +97,6 @@ Callback triggered when Input component input value is changed by the user - ext
 
 <br>
 
-Show/hide the password (the same effect when the eye icon is clicked)
+Show/hide the password
 
 <br>

playground/public/docs/components/atoms/Password/props/index.html

@@ -9390,7 +9390,7 @@ <h3 id="show">show</h3>
 </tbody>
 </table>
 <p><br></p>
-<p>Show/hide the password (the same effect when the eye icon is clicked)</p>
+<p>Show/hide the password</p>
 <p><br></p>
 
 

playground/src/pages/FormField/index.tsx

@@ -5,7 +5,7 @@ import {
   StringProp,
 } from "@cianciarusocataldo/demo-ui";
 
-import { demoProps } from "constants/demo-props";
+import { demoProps, demoRows } from "constants/demo-props";
 
 import { FormField } from "mobrix-ui-preview";
 import { ComponentPage } from "components/ComponentPage";
@@ -42,16 +42,13 @@ const FormPage = () => (
             required: BooleanProp(true),
             header: StringProp("header"),
             errorLabel: StringProp(""),
-            dark: BooleanProp(false),
-            animated: BooleanProp(true),
-            shadow: BooleanProp(true),
-            className: StringProp(""),
+            ...demoProps,
           }}
           header="FormField"
           rows={[
             ["value"],
             ["type", "required", "header", "errorLabel"],
-            ["dark", "animated", "shadow", "className"],
+            ...demoRows,
           ]}
           children={(props: any, setProps: any) => (
             <FormField

src/components/atoms/Button/index.ts

@@ -58,8 +58,8 @@ const Button: ButtonComponent = ({
       wrapper: "button",
       features: {
         opHov: true,
+        wAll: true,
       },
-      cssBg: ["btn-bg", "btn-b-h"],
       styles: {
         ...(animated && {
           "--mbx-btn-scale": "scaleX(1.15) scaleY(1.1)",

src/components/atoms/Button/styles.css

@@ -9,54 +9,29 @@
   font-size: 0.875rem;
   line-height: 1.25rem;
   --mbx-btn-scale: none;
-  --mbx-btn-bg: var(
-    --mbx-button-background-light,
-    var(--mbx-button-background)
-  );
-  --mbx-btn-txt: var(
-    --mbx-button-text-color-light,
-    var(--mbx-button-text-color)
-  );
-  background: var(--mbx-btn-bg, var(--mbx-c-bg));
-  color: var(--mbx-btn-txt, var(--mbx-c-txt));
-}
-
-[data-mbx-id="btn"][data-mbx-dk] {
-  --mbx-btn-bg: var(--mbx-button-background-dark, var(--mbx-button-background));
-  --mbx-btn-txt: var(
-    --mbx-button-text-color-dark,
-    var(--mbx-button-text-color)
-  );
-}
-
-[data-mbx-id="btn"][data-mbx-hv] {
-  --mbx-btn-b-h: var(
+  --mbx-bg-l: var(--mbx-button-background-light, var(--mbx-button-background));
+  --mbx-txt-l: var(--mbx-button-text-color-light, var(--mbx-button-text-color));
+  --mbx-bg-d: var(--mbx-button-background-dark, var(--mbx-button-background));
+  --mbx-txt-d: var(--mbx-button-text-color-dark, var(--mbx-button-text-color));
+  --mbx-bg-h-l: var(
     --mbx-button-background-hover-light,
     var(--mbx-button-background-hover)
   );
-  --mbx-btn-t-h: var(
+  --mbx-txt-h-l: var(
     --mbx-button-text-color-hover-light,
     var(--mbx-button-text-color-hover)
   );
-}
-
-[data-mbx-id="btn"][data-mbx-dk][data-mbx-hv] {
-  --mbx-btn-b-h: var(
+  --mbx-bg-h-d: var(
     --mbx-button-background-hover-dark,
     var(--mbx-button-background-hover)
   );
-  --mbx-btn-t-h: var(
+  --mbx-txt-h-d: var(
     --mbx-button-text-color-hover-dark,
     var(--mbx-button-text-color-hover)
   );
 }
 
 @media (hover) {
-  [data-mbx-id="btn"]:hover {
-    background: var(--mbx-btn-b-h, var(--mbx-btn-bg, var(--mbx-c-bg)));
-    color: var(--mbx-btn-txt-h, var(--mbx-btn-txt, var(--mbx-c-txt)));
-  }
-
   [data-mbx-id="btn"][data-mbx-hv]:hover {
     transform: var(--mbx-btn-scale);
   }

src/components/atoms/CheckBox/index.ts

@@ -56,8 +56,8 @@ const Checkbox: CheckBoxComponent = ({
     Component: ({ value }) => (value ? icon || CheckIcon({ disabled }) : ""),
     features: {
       opHov: true,
+      wAll: true,
     },
-    cssBg: ["chk-bg", "chk-bg-h"],
     props: (actualValue, setValue) => {
       const func = () => {
         onChange(!actualValue);

src/components/atoms/CheckBox/styles.css

@@ -6,28 +6,19 @@
   display: flex;
   flex-direction: column;
   --mbx-trdur: 0.1s;
-  --mbx-chk-bg: var(
+  --mbx-bg-l: var(
     --mbx-checkbox-background-light,
     var(--mbx-checkbox-background)
   );
-  background: var(--mbx-chk-bg, var(--mbx-c-bg));
-}
-
-[data-mbx-id="check"][data-mbx-dk] {
-  --mbx-chk-bg: var(
+  --mbx-bg-d: var(
     --mbx-checkbox-background-dark,
     var(--mbx-checkbox-background)
   );
-}
-
-[data-mbx-id="check"][data-mbx-hv] {
-  --mbx-chk-bg-h: var(
+  --mbx-bg-h-l: var(
     --mbx-checkbox-background-hover-light,
     var(--mbx-checkbox-background-hover, var(--mbx-c-bg-h))
   );
-}
-[data-mbx-id="check"][data-mbx-dk][data-mbx-hv] {
-  --mbx-chk-bg-h: var(
+  --mbx-bg-h-d: var(
     --mbx-checkbox-background-hover-dark,
     var(--mbx-checkbox-background-hover, var(--mbx-c-bg-h))
   );
@@ -43,9 +34,3 @@
     var(--mbx-checkbox-tick-color, white)
   );
 }
-
-@media (hover) {
-  [data-mbx-id="check"]:hover {
-    background: var(--mbx-chk-bg-h, var(--mbx-chk-bg, var(--mbx-c-bg)));
-  }
-}

src/components/atoms/CodeBox/index.ts

@@ -47,7 +47,7 @@ const CodeBox: CodeBoxComponent = ({ active, ...props }) =>
   buildMbxStandard(props, (mbxProps) => ({
     name: "code",
     mbxProps,
-    cssBg: ["cdb-bg"],
+    features: { wBgCl: true },
     Component: component({
       ...props,
       ...mbxProps,

src/components/atoms/CodeBox/styles.css

@@ -1,29 +1,22 @@
 [data-mbx-id="code"] {
   padding: 0.1rem;
   justify-content: center;
-  --mbx-cdb-bg: var(
-    --mbx-codebox-background-light,
-    var(--mbx-codebox-background, var(--mbx-c-bg))
-  );
-  --mbx-cdb-txt: var(
-    --mbx-codebox-text-color-light,
-    var(--mbx-codebox-text-color, var(--mbx-c-txt))
-  );
-  background: var(--mbx-cdb-bg);
-  color: var(--mbx-cdb-txt);
+
   display: flex;
   flex-direction: column;
   overflow: hidden;
-}
-
-[data-mbx-id="code"][data-mbx-dk] {
-  --mbx-cdb-bg: var(
-    --mbx-codebox-background-dark,
-    var(--mbx-codebox-background, var(--mbx-c-bg))
+  --mbx-bg-l: var(
+    --mbx-codebox-background-light,
+    var(--mbx-codebox-background)
+  );
+  --mbx-txt-l: var(
+    --mbx-codebox-text-color-light,
+    var(--mbx-codebox-text-color)
   );
-  --mbx-cdb-txt: var(
+  --mbx-bg-d: var(--mbx-codebox-background-dark, var(--mbx-codebox-background));
+  --mbx-txt-d: var(
     --mbx-codebox-text-color-dark,
-    var(--mbx-codebox-text-color, var(--mbx-c-txt))
+    var(--mbx-codebox-text-color)
   );
 }
 

src/components/atoms/Counter/index.ts

@@ -60,8 +60,8 @@ const Counter: CounterComponent = ({
     name: "count",
     features: {
       opHov: true,
+      wAllc: true,
     },
-    cssBg: ["cnt-bg", "cnt-bg-h"],
     inputValue,
     defaultValue: 0,
     props: (value, setValue) => ({

src/components/atoms/Counter/styles.css

@@ -1,52 +1,34 @@
 [data-mbx-id="count"] {
-  --mbx-cnt-bg: var(
+  --mbx-bg-l: var(
     --mbx-counterbox-background-light,
     var(--mbx-counterbox-background)
   );
-  --mbx-cnt-txt: var(
+  --mbx-txt-l: var(
     --mbx-counterbox-text-color-light,
     var(--mbx-counterbox-text-color)
   );
-  background-color: var(--mbx-cnt-bg, var(--mbx-c-bgc));
-  color: var(--mbx-cnt-txt, var(--mbx-c-txt));
-}
-
-[data-mbx-id="count"][data-mbx-dk] {
-  --mbx-cnt-bg: var(
+  --mbx-bg-d: var(
     --mbx-counterbox-background-dark,
     var(--mbx-counterbox-background)
   );
-  --mbx-cnt-txt: var(
+  --mbx-txt-d: var(
     --mbx-counterbox-text-color-dark,
     var(--mbx-counterbox-text-color)
   );
-}
-
-[data-mbx-id="count"][data-mbx-hv] {
-  --mbx-cnt-bg-h: var(
+  --mbx-bg-h-l: var(
     --mbx-counterbox-background-hover-light,
     var(--mbx-counterbox-background-hover, var(--mbx-c-bgc-h))
   );
-  --mbx-cnt-txt-h: var(
+  --mbx-txt-h-l: var(
     --mbx-counterbox-text-color-hover-light,
     var(--mbx-counterbox-text-color-hover, var(--mbx-c-txt-h))
   );
-}
-
-[data-mbx-id="count"][data-mbx-dk][data-mbx-hv] {
-  --mbx-cnt-bg-h: var(
+  --mbx-bg-h-d: var(
     --mbx-counterbox-background-hover-dark,
     var(--mbx-counterbox-background-hover, var(--mbx-c-bgc-h))
   );
-  --mbx-cnt-txt-h: var(
+  --mbx-txt-h-d: var(
     --mbx-counterbox-text-color-hover-dark,
     var(--mbx-counterbox-text-color-hover, var(--mbx-c-txt-h))
   );
 }
-
-@media (hover) {
-  [data-mbx-id="count"]:hover {
-    background-color: var(--mbx-cnt-bg-h, var(--mbx-cnt-bg, var(--mbx-c-bgc)));
-    color: var(--mbx-cnt-txt-h, var(--mbx-cnt-txt, var(--mbx-c-txt)));
-  }
-}

src/components/atoms/Divider/index.ts

@@ -48,7 +48,6 @@ const Divider: DividerComponent = ({ unstyled, size = "2px", ...props }) =>
       styles: {
         height: size,
       },
-      cssBg: ["dvd-bg"],
       mbxProps,
     }),
   );

src/components/atoms/Input/index.ts

@@ -57,8 +57,8 @@ const Input: InputComponent = ({
     wrapper: "input",
     features: {
       opHov: true,
+      wAllc: true,
     },
-    cssBg: ["inp-bg", "inp-bg-h"],
     styles: {
       ...(autoresizable && { width: "fit-content" }),
     },

src/components/atoms/Input/styles.css

@@ -1,52 +1,34 @@
 [data-mbx-id="inp"] {
-  --mbx-inp-bg: var(
+  --mbx-bg-l: var(
     --mbx-inputbox-background-light,
     var(--mbx-inputbox-background)
   );
-  --mbx-inp-txt: var(
+  --mbx-txt-l: var(
     --mbx-inputbox-text-color-light,
     var(--mbx-inputbox-text-color)
   );
-  background-color: var(--mbx-inp-bg, var(--mbx-c-bgc));
-  color: var(--mbx-inp-txt, var(--mbx-c-txt));
-}
-
-[data-mbx-id="inp"][data-mbx-dk] {
-  --mbx-inp-bg: var(
+  --mbx-bg-d: var(
     --mbx-inputbox-background-dark,
     var(--mbx-inputbox-background)
   );
-  --mbx-inp-txt: var(
+  --mbx-txt-d: var(
     --mbx-inputbox-text-color-dark,
     var(--mbx-inputbox-text-color)
   );
-}
-
-[data-mbx-id="inp"][data-mbx-hv] {
-  --mbx-inp-bg-h: var(
+  --mbx-bg-h-l: var(
     --mbx-inputbox-background-hover-light,
     var(--mbx-inputbox-background-hover, var(--mbx-c-bgc-h))
   );
-  --mbx-inp-txt-h: var(
+  --mbx-txt-h-l: var(
     --mbx-inputbox-text-color-hover-light,
     var(--mbx-inputbox-text-color-hover, var(--mbx-c-txt-h))
   );
-}
-
-[data-mbx-id="inp"][data-mbx-dk][data-mbx-hv] {
-  --mbx-inp-bg-h: var(
+  --mbx-bg-h-d: var(
     --mbx-inputbox-background-hover-dark,
     var(--mbx-inputbox-background-hover, var(--mbx-c-bgc-h))
   );
-  --mbx-inp-txt-h: var(
+  --mbx-txt-h-d: var(
     --mbx-inputbox-text-color-hover-dark,
     var(--mbx-inputbox-text-color-hover, var(--mbx-c-txt-h))
   );
 }
-
-@media (hover) {
-  [data-mbx-id="inp"]:hover {
-    background-color: var(--mbx-inp-bg-h, var(--mbx-inp-bg, var(--mbx-c-bgc)));
-    color: var(--mbx-inp-txt-h, var(--mbx-inp-txt, var(--mbx-c-txt)));
-  }
-}

src/components/atoms/Label/index.ts

@@ -48,6 +48,7 @@ const Label: LabelComponent = ({ children, shadow = false, ...props }) =>
     features: {
       colFc: true,
       noShFc: true,
+      wCl: true,
     },
     mbxProps,
   }));