atoms redesigned

CianciarusoCataldo · Jul 19, 2024 · 864c116 · 864c116
1 parent 6539cd3
commit 864c116
Show file tree

Hide file tree

Showing 59 changed files with 336 additions and 341 deletions.
diff --git a/src/components/atoms/Button/index.ts b/src/components/atoms/Button/index.ts
@@ -57,7 +57,17 @@ const Button: ButtonComponent = ({
       opAct: true,
     },
     cssBg: ["c-btn-bg"],
-    scl: "wfit;act",
+    styles: {
+      ...(sProps.hover && {
+        "--mbx-btn-bg-h": "var(--mbx-c-btn-bg-h)",
+        "--mbx-btn-txt-h": "var(--mbx-c-btn-txt-h)",
+        ...(sProps.animated && {
+          "--mbx-btn-scale": "scaleX(1.15) scaleY(1.1)",
+          transitionDuration: "0.1s",
+          transitionProperty: "transform",
+        }),
+      }),
+    },
     Component: children,
     commonProps: {
       ...sProps,

diff --git a/src/components/atoms/Button/styles.css b/src/components/atoms/Button/styles.css
@@ -1,27 +1,17 @@
 [data-mbx-id="btn"] {
+  width: fit-content;
+  align-items: center;
+  text-align: center;
   border: 0;
-  background: var(--mbx-c-btn-bg);
-  color: var(--mbx-c-btn-txt);
   font-weight: 800;
   padding: 0.5rem 1rem;
   border-radius: 0.25rem;
   display: inline-flex;
   font-size: 0.875rem;
   line-height: 1.25rem;
-}
-
-[data-mbx-id="btn"][data-mbx-atts*="anm"] {
-  transition-duration: 0.1s;
-  transition-property: transform;
-}
-
-[data-mbx-id*="button"][data-mbx-atts*="dsb"] {
-  cursor: unset;
-}
-
-@media (hover) {
-  [data-mbx-id="btn"][data-mbx-atts*="hv;anm"]:hover {
-    position: relative;
-    transform: scaleX(1.15) scaleY(1.1);
-  }
+  --mbx-btn-scale: none;
+  --mbx-btn-bg: var(--mbx-c-btn-bg);
+  --mbx-btn-txt: var(--mbx-c-btn-txt);
+  background: var(--mbx-btn-bg);
+  color: var(--mbx-btn-txt);
 }
diff --git a/src/components/atoms/CheckBox/index.ts b/src/components/atoms/CheckBox/index.ts
@@ -57,8 +57,10 @@ const Checkbox: CheckBoxComponent = ({
     features: {
       opHov: true,
     },
-    scl: "flxc;act",
     cssBg: ["c-chk-bg"],
+    styles: {
+      ...(sProps.hover && { "--mbx-chk-bg-h": "var(--mbx-c-chk-bg-h)" }),
+    },
     props: (actualValue, setValue) => {
       const callback = () => {
         onChange(!actualValue);

diff --git a/src/components/atoms/CheckBox/styles.css b/src/components/atoms/CheckBox/styles.css
@@ -1,6 +1,11 @@
 [data-mbx-id="check"] {
   height: 30px;
   width: 30px;
-  background: var(--mbx-c-chk-bg);
   padding: 0.2rem;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  --mbx-chk-bg: var(--mbx-c-chk-bg);
+  background: var(--mbx-chk-bg);
 }
diff --git a/src/components/atoms/CodeBox/index.ts b/src/components/atoms/CodeBox/index.ts
@@ -47,7 +47,6 @@ const CodeBox: CodeBoxComponent = (props) =>
   buildMbxStandard(props, (sProps) => ({
     name: "code",
     commonProps: sProps,
-    scl: "flxc;ovhid",
     cssBg: ["c-cdb-bg"],
     Component: component({
       ...props,

diff --git a/src/components/atoms/CodeBox/styles.css b/src/components/atoms/CodeBox/styles.css
@@ -3,6 +3,9 @@
   justify-content: center;
   background: var(--mbx-c-cdb-bg);
   color: var(--mbx-c-cdb-txt);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
 }
 
 [data-mbx-id="code"] > [data-mbx-id="icb"] {

diff --git a/src/components/atoms/Counter/index.ts b/src/components/atoms/Counter/index.ts
@@ -57,10 +57,16 @@ const Counter: CounterComponent = ({
   buildMbxReactive<number | undefined>(commonProps, (sProps) => ({
     wrapper: "input",
     name: "count",
-    scl: "bdtran",
     features: {
       opHov: true,
     },
+    styles: {
+      ...(sProps.hover &&
+        !readOnly && {
+          "--mbx-cnt-bg-h": "var(--mbx-c-cnt-bg-h)",
+          "--mbx-cnt-txt-h": "var(--mbx-c-cnt-txt-h)",
+        }),
+    },
     cssBg: ["c-cnt-bg"],
     inputValue,
     defaultValue: 0,

diff --git a/src/components/atoms/Counter/styles.css b/src/components/atoms/Counter/styles.css
@@ -1,4 +1,7 @@
 [data-mbx-id="count"] {
-  background-color: var(--mbx-c-cnt-bg);
-  color: var(--mbx-c-cnt-txt);
+  --mbx-cnt-bg: var(--mbx-c-cnt-bg);
+  --mbx-cnt-txt: var(--mbx-c-cnt-txt);
+  background-color: var(--mbx-cnt-bg);
+  color: var(--mbx-cnt-txt);
+  border-color: transparent;
 }
diff --git a/src/components/atoms/Divider/index.ts b/src/components/atoms/Divider/index.ts
@@ -42,15 +42,13 @@ import { buildMbxStandard } from "../../../tools";
 const Divider: DividerComponent = ({ size = "2px", ...props }) =>
   buildMbxStandard(props, (sProps) => ({
     name: "dvd",
+    styles: {
+      height: size,
+    },
     commonProps: {
       ...sProps,
       a11y: false,
-      style: {
-        ...sProps.style,
-        height: size,
-      },
     },
-    scl: "wfu",
   }));
 
 export default Divider;
diff --git a/src/components/atoms/Divider/styles.css b/src/components/atoms/Divider/styles.css
@@ -1,3 +1,4 @@
 [data-mbx-id="dvd"] {
   background-color: var(--mbx-c-dv-bgc);
+  width: 100%;
 }
diff --git a/src/components/atoms/EmbeddedVideo/index.ts b/src/components/atoms/EmbeddedVideo/index.ts
@@ -48,7 +48,6 @@ const EmbeddedVideo: EmbeddedVideoComponent = ({ url, ...shared }) =>
     features: {
       opHov: true,
     },
-    scl: !sProps.className && "wfit",
     Component: component({
       url,
       ...sProps,

diff --git a/src/components/atoms/EmbeddedVideo/styles.css b/src/components/atoms/EmbeddedVideo/styles.css
@@ -1,5 +1,6 @@
-[data-mbx-id="em-vd"]:not([class]) {
+[data-mbx-id="em-vd"] {
   height: fit-content;
+  width: fit-content;
 }
 
 [data-mbx-id="em-vd"] iframe {

diff --git a/src/components/atoms/IconButton/index.ts b/src/components/atoms/IconButton/index.ts
@@ -54,12 +54,12 @@ const IconButton: IconButtonComponent = ({
     wrapper: "button",
     ...(!sharedProps.unstyled && {
       features: {
-        opHov: true,
+        opHov: hover,
         opAct: onClick !== undefined,
+        noShFc: true,
       },
     }),
     Component: children,
-    scl: "wfit;nout",
     commonProps: {
       ...sharedProps,
       props: {

diff --git a/src/components/atoms/IconButton/styles.css b/src/components/atoms/IconButton/styles.css
@@ -3,4 +3,5 @@
   border: 0;
   background: transparent;
   -webkit-tap-highlight-color: transparent;
+  width: fit-content;
 }
diff --git a/src/components/atoms/Input/index.ts b/src/components/atoms/Input/index.ts
@@ -58,7 +58,14 @@ const Input: InputComponent = ({
       opHov: true,
     },
     cssBg: ["c-in-bgc"],
-    scl: `bdtran;${autoresizable && "wfit"}`,
+    styles: {
+      ...(autoresizable && { width: "fit-content" }),
+      ...(sharedProps.hover &&
+        !readOnly && {
+          "--mbx-inp-bg-h": "var(--mbx-c-in-bg-h)",
+          "--mbx-inp-txt-h": "var(--mbx-c-in-txt-h)",
+        }),
+    },
     props: (value, setValue) => ({
       commonProps: {
         ...sharedProps,

diff --git a/src/components/atoms/Input/styles.css b/src/components/atoms/Input/styles.css
@@ -1,4 +1,7 @@
 [data-mbx-id="inp"] {
-  background-color: var(--mbx-c-in-bgc);
-  color: var(--mbx-c-in-txt);
+  --mbx-inp-bg: var(--mbx-c-in-bgc);
+  --mbx-inp-txt: var(--mbx-c-in-txt);
+  background-color: var(--mbx-inp-bg);
+  color: var(--mbx-inp-txt);
+  border-color: transparent;
 }
diff --git a/src/components/atoms/Label/index.ts b/src/components/atoms/Label/index.ts
@@ -40,19 +40,15 @@ import { buildMbxStandard } from "../../../tools";
  * @copyright 2024 Cataldo Cianciaruso
  */
 const Label: LabelComponent = ({ children, shadow = false, ...commonProps }) =>
-  buildMbxStandard(commonProps, (sharedProps) => ({
+  buildMbxStandard({ shadow, ...commonProps }, (sharedProps) => ({
     name: "label",
     Component: children,
     wrapper: "p",
     features: {
       colFc: true,
       noShFc: true,
     },
-    scl: "wfit",
-    commonProps: {
-      ...sharedProps,
-      shadow,
-    },
+    commonProps: sharedProps,
   }));
 
 export default Label;
diff --git a/src/components/atoms/Label/styles.css b/src/components/atoms/Label/styles.css
@@ -1,4 +1,5 @@
 [data-mbx-id*="label"] {
   color: var(--mbx-c-lab-txt);
   background: transparent;
+  width: fit-content;
 }
diff --git a/src/components/atoms/Link/index.ts b/src/components/atoms/Link/index.ts
@@ -57,9 +57,14 @@ const Link: LinkComponent = ({
       noShFc: true,
     },
     Component: children,
+    styles: {
+      ...(underline && { textDecoration: "underline" }),
+      ...(sharedProps.hover && {
+        "--mbx-lnk-txt-h": "var(--mbx-c-link-txt-h)",
+      }),
+    },
     commonProps: {
       ...sharedProps,
-      style: { ...sharedProps.style, textDecoration: "underline" },
       props: {
         ...sharedProps.props,
         ...(!sharedProps.disabled && {

diff --git a/src/components/atoms/Link/styles.css b/src/components/atoms/Link/styles.css
@@ -1,9 +1,6 @@
 [data-mbx-id="link"] {
   font-size: 1rem;
   line-height: 1.5rem;
-  color: var(--mbx-c-link-txt);
-}
-
-a[data-mbx-id="link"]:active {
-  font-weight: 700;
+  --mbx-lnk-txt: var(--mbx-c-link-txt);
+  color: var(--mbx-lnk-txt);
 }
diff --git a/src/components/atoms/RadioButton/index.ts b/src/components/atoms/RadioButton/index.ts
@@ -60,7 +60,11 @@ const RadioButton: RadioButtonComponent = ({
       opAct: true,
     },
     cssBg: ["c-rad-bg"],
-    scl: "flxc;act;bdtran",
+    styles: {
+      ...(sharedProps.hover && {
+        "--mbx-rd-bg-h": "var(--mbx-c-rad-bg-h)",
+      }),
+    },
     props: (value, setValue) => {
       const callBack = () => {
         if (!value || deselectable) {

diff --git a/src/components/atoms/RadioButton/styles.css b/src/components/atoms/RadioButton/styles.css
@@ -1,4 +1,9 @@
 [data-mbx-id="radio"] {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  border-color: transparent;
   width: 30px;
   height: 30px;
   min-width: 30px;
@@ -8,7 +13,8 @@
   border-radius: 50%;
   padding: 0.1rem;
   border-style: hidden;
-  background: var(--mbx-c-rad-bg);
+  --mbx-rd-bg: var(--mbx-c-rad-bg);
+  background: var(--mbx-rd-bg);
 }
 
 [data-mbx-id="radio"] > div {

diff --git a/src/components/atoms/Rater/index.ts b/src/components/atoms/Rater/index.ts
@@ -64,15 +64,11 @@ const Rater: RaterComponent = ({
         ...props,
         ...sharedProps,
       }),
-    scl: `wfit;mxauto;act`,
     cssBg: ["c-rat-bg"],
-    commonProps: {
-      ...sharedProps,
-      style: {
-        ...sharedProps.style,
-        flexDirection: vertical ? "column" : "row",
-      },
+    styles: {
+      flexDirection: vertical ? "column" : "row",
     },
+    commonProps: sharedProps,
   }));
 
 export default Rater;
diff --git a/src/components/atoms/Rater/styles.css b/src/components/atoms/Rater/styles.css
@@ -3,6 +3,11 @@
   border-radius: 8px;
   padding: 0.4rem;
   display: flex;
+  margin-right: auto;
+  margin-left: auto;
+  width: fit-content;
+  align-items: center;
+  text-align: center;
 }
 
 [data-mbx-id="rat"] svg {

diff --git a/src/components/atoms/Selector/index.ts b/src/components/atoms/Selector/index.ts
@@ -71,6 +71,12 @@ const Selector: SelectorComponent = ({
         },
       },
     }),
+    styles: {
+      ...(sharedProps.hover && {
+        "--mbx-sel-bg-h": "var(--mbx-c-sel-bg-h)",
+        "--mbx-sel-txt-h": "var(--mbx-c-sel-txt-h)",
+      }),
+    },
     Component: ({ value, setValue }) =>
       selectorComponent({ elements, value, setValue, optionClassName }),
     features: {

diff --git a/src/components/atoms/Selector/styles.css b/src/components/atoms/Selector/styles.css
@@ -1,7 +1,9 @@
 [data-mbx-id="selt"] {
   padding: 0.2rem;
-  background: var(--mbx-c-sel-bg);
-  color: var(--mbx-c-sel-txt);
+  --mbx-sel-bg: var(--mbx-c-sel-bg);
+  --mbx-sel-txt: var(--mbx-c-sel-txt);
+  background: var(--mbx-sel-bg);
+  color: var(--mbx-sel-txt);
   border: 0;
   border-radius: 6px;
 }

diff --git a/src/components/atoms/Slider/index.ts b/src/components/atoms/Slider/index.ts
@@ -57,8 +57,18 @@ const Slider: SliderComponent = ({
     inputValue,
     defaultValue: 0,
     wrapper: "input",
-    scl: "wfit",
     cssBg: ["c-sld-bg"],
+    styles: {
+      ...(sharedProps.hover &&
+        !readOnly && {
+          "--mbx-sld-op-hov": "0.6",
+          "--mbx-sld-bg-h": "var(--mbx-c-sld-tb-h)",
+        }),
+      ...(!sharedProps.disabled &&
+        !readOnly && {
+          "--mbx-sld-op-act": "0.4",
+        }),
+    },
     props: (value, setValue) => {
       const callback =
         !sharedProps.disabled && !readOnly
@@ -73,18 +83,6 @@ const Slider: SliderComponent = ({
       return {
         commonProps: {
           ...sharedProps,
-          style: {
-            ...sharedProps.style,
-            ...(sharedProps.hover &&
-              !readOnly && {
-                "--mbx-sld-op-hov": "0.6",
-                "--mbx-sld-bg-h": "var(--mbx-c-sld-tb-h)",
-              }),
-            ...(!sharedProps.disabled &&
-              !readOnly && {
-                "--mbx-sld-op-act": "0.4",
-              }),
-          },
           hover: sharedProps.hover && !readOnly,
           props: {
             ...sharedProps.props,