every component theme driven by css vars

CianciarusoCataldo · Jan 12, 2024 · eed7e4d · eed7e4d
1 parent e6b930e
commit eed7e4d
Show file tree

Hide file tree

Showing 34 changed files with 895 additions and 220 deletions.
diff --git a/src/components/atoms/Toggle/styles.css b/src/components/atoms/Toggle/styles.css
@@ -4,7 +4,7 @@
 }
 
 [data-mobrix-ui-id="toggle"][data-mobrix-ui-styled="true"] {
-  background-image: var(--mobrix-ui-computed-toggle-background);
+  background: var(--mobrix-ui-computed-toggle-background);
   border-radius: 40px;
   border-width: 0;
 }

diff --git a/src/components/molecules/Card/styles.css b/src/components/molecules/Card/styles.css
@@ -5,7 +5,7 @@
 }
 
 [data-mobrix-ui-id="card"][data-mobrix-ui-styled="true"] {
-  background-image: var(--mobrix-ui-computed-card-background);
+  background: var(--mobrix-ui-computed-card-background);
   color: var(--mobrix-ui-computed-card-text-color);
 }
 

diff --git a/src/components/molecules/Carousel/styles.css b/src/components/molecules/Carousel/styles.css
@@ -7,7 +7,7 @@
 }
 
 [data-mobrix-ui-id="carousel"][data-mobrix-ui-styled="true"] {
-  background-image: var(--mobrix-ui-computed-carousel-background);
+  background: var(--mobrix-ui-computed-carousel-background);
   padding: 0.4rem;
 }
 

diff --git a/src/components/molecules/Container/styles.css b/src/components/molecules/Container/styles.css
@@ -1,4 +1,4 @@
 [data-mobrix-ui-id="container"][data-mobrix-ui-styled="true"] {
-  background-image: var(--mobrix-ui-computed-container-background);
+  background: var(--mobrix-ui-computed-container-background);
   color: var(--mobrix-ui-computed-container-text-color);
 }
diff --git a/src/components/molecules/DismissableCard/styles.css b/src/components/molecules/DismissableCard/styles.css
@@ -5,7 +5,7 @@
 }
 
 [data-mobrix-ui-id="dismissable-card"][data-mobrix-ui-styled="true"] {
-  background-image: var(--mobrix-ui-computed-dismissablecard-background);
+  background: var(--mobrix-ui-computed-dismissablecard-background);
   color: var(--mobrix-ui-computed-dismissablecard-text-color);
 }
 

diff --git a/src/components/molecules/Form/styles.css b/src/components/molecules/Form/styles.css
diff --git a/src/components/molecules/FormField/component.tsx b/src/components/molecules/FormField/component.tsx
@@ -64,7 +64,6 @@ const FormFieldInternalComponent: MobrixUiReactiveComponent<
     components.push(
       <FieldComponent
         animated={animated}
-        autoresizable
         additionalProps={{
           "data-mobrix-ui-class": "form-field-component",
           "data-mobrix-ui-form-field-error": error,

diff --git a/src/components/molecules/FormField/styles.css b/src/components/molecules/FormField/styles.css
@@ -2,6 +2,61 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
+
+  --mobrix-ui-counterbox-background: var(
+    --mobrix-ui-computed-formfield-background
+  );
+  --mobrix-ui-counterbox-text-color: var(
+    --mobrix-ui-computed-formfield-text-color
+  );
+  --mobrix-ui-counterbox-background-hover: var(
+    --mobrix-ui-computed-formfield-background-hover
+  );
+  --mobrix-ui-counterbox-text-color-hover: var(
+    --mobrix-ui-computed-formfield-text-color-hover
+  );
+
+  --mobrix-ui-checkbox-background: var(
+    --mobrix-ui-computed-formfield-background
+  );
+  --mobrix-ui-checkbox-text-color: var(
+    --mobrix-ui-computed-formfield-text-color
+  );
+  --mobrix-ui-checkbox-background-hover: var(
+    --mobrix-ui-computed-formfield-background-hover
+  );
+  --mobrix-ui-checkbox-text-color-hover: var(
+    --mobrix-ui-computed-formfield-text-color-hover
+  );
+
+  --mobrix-ui-inputbox-background: var(
+    --mobrix-ui-computed-formfield-background
+  );
+  --mobrix-ui-inputbox-text-color: var(
+    --mobrix-ui-computed-formfield-text-color
+  );
+  --mobrix-ui-inputbox-background-hover: var(
+    --mobrix-ui-computed-formfield-background-hover
+  );
+  --mobrix-ui-inputbox-text-color-hover: var(
+    --mobrix-ui-computed-formfield-text-color-hover
+  );
+
+  --mobrix-ui-radio-background: var(
+    --mobrix-ui-computed-formfield-background-light
+  );
+  --mobrix-ui-radio-background-hover: var(
+    --mobrix-ui-computed-formfield-background-hover
+  );
+
+  --mobrix-ui-rater-background: var(--mobrix-ui-computed-formfield-background);
+  --mobrix-ui-rater-background-hover: var(
+    --mobrix-ui-computed-formfield-background-hover
+  );
+
+  --mobrix-ui-slider-background: var(--mobrix-ui-computed-formfield-background);
+
+  --mobrix-ui-toggle-background: var(--mobrix-ui-computed-formfield-background);
 }
 
 [data-mobrix-ui-id="form-field"] [data-mobrix-ui-class="form-field-box"] {
@@ -16,13 +71,13 @@
 
 [data-mobrix-ui-id="form-field"][data-mobrix-ui-styled="true"]
   [data-mobrix-ui-form-field-error-box="true"] {
-  color: red;
+  color: var(--mobrix-ui-computed-formfield-error-text);
   transition: all 0.3s ease-out;
   padding-top: 0.2rem;
 }
 
 [data-mobrix-ui-id="form-field"] [data-mobrix-ui-form-field-error="true"] {
-  border-color: red;
+  border-color: var(--mobrix-ui-computed-formfield-error-border);
   border-width: 2px;
   border-style: ridge;
 }
diff --git a/src/components/molecules/Modal/styles.css b/src/components/molecules/Modal/styles.css
@@ -9,6 +9,12 @@
   flex-direction: column;
   background-color: var(--mobrix-ui-computed-modal-background);
   padding: 0.1rem;
+  --mobrix-ui-dismissablecard-x-color: var(
+    --mobrix-ui-computed-modal-x-color
+  );
+  --mobrix-ui-dismissablecard-x-color-hover: var(
+    --mobrix-ui-computed-modal-x-color-hover
+  );
 }
 
 [data-mobrix-ui-id="modal"][data-mobrix-ui-animated="true"] {
@@ -36,12 +42,6 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  --mobrix-ui-computed-dismissablecard-x-color: var(
-    --mobrix-ui-computed-modal-x-color
-  );
-  --mobrix-ui-computed-dismissablecard-x-color-hover: var(
-    --mobrix-ui-computed-modal-x-color-hover
-  );
 }
 
 [data-mobrix-ui-id="modal"]

diff --git a/src/components/molecules/RadioButtonGroup/styles.css b/src/components/molecules/RadioButtonGroup/styles.css
@@ -19,18 +19,19 @@
   flex-direction: column;
   text-align: center;
   align-items: center;
+  justify-content: center;
 }
 
 [data-mobrix-ui-id="radio-button-group"][data-mobrix-ui-orientation="true"]
   [data-mobrix-ui-text-position] {
-  margin-right: 2rem;
+  margin: 0.3rem 1rem 0.3rem 1rem;
 }
 
 [data-mobrix-ui-id="radio-button-group"]:not(
     [data-mobrix-ui-orientation="true"]
   )
   [data-mobrix-ui-text-position] {
-  margin-bottom: 2rem;
+  margin: 1rem 0.3rem 1rem 0.3rem;
 }
 
 [data-mobrix-ui-id="radio-button-group"]
@@ -67,10 +68,23 @@
   [data-mobrix-ui-text-position="top"]
   [data-mobrix-ui-class="radio-text"] {
   margin-bottom: 0.7rem;
+  margin-top: 0;
 }
 
 [data-mobrix-ui-id="radio-button-group"]
   [data-mobrix-ui-text-position="bottom"]
   [data-mobrix-ui-class="radio-text"] {
   margin-top: 0.7rem;
+  margin-bottom: 0;
+}
+
+@media (max-width: 600px) {
+  [data-mobrix-ui-id="radio-button-group"][data-mobrix-ui-orientation="true"] {
+    flex-direction: column;
+  }
+
+  [data-mobrix-ui-id="radio-button-group"][data-mobrix-ui-orientation="true"]
+    [data-mobrix-ui-text-position] {
+    margin: 1rem 0.3rem 1rem 0.3rem;
+  }
 }
diff --git a/src/components/molecules/Table/component.tsx b/src/components/molecules/Table/component.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { MoBrixUiComponent, TableProps } from "../../../types";
 
-const parseClassName = (className: string) => className ? { className } : {}
+const parseClassName = (className: string) => (className ? { className } : {});
 
 const tableComponent: MoBrixUiComponent<TableProps, JSX.Element> = ({
   headers,
@@ -13,54 +13,61 @@ const tableComponent: MoBrixUiComponent<TableProps, JSX.Element> = ({
   rowProps = {},
   headerClassName,
   headersProps = {},
-  onClick = () => { },
-  propsCallback = () => ({})
+  onClick = () => {},
+  propsCallback = () => ({}),
 }) => {
-
   const props = {
     row: { ...parseClassName(rowClassName), ...rowProps },
-    cell: { ...parseClassName(cellClassName), ...cellProps }
-  }
+    cell: { ...parseClassName(cellClassName), ...cellProps },
+  };
 
   let wrappers: {
     wrapper: "td" | "th";
     cellProps: Record<string, any>;
-    rowProps: Record<string, any>
-  }[] = rows.map(row =>
-    ({ wrapper: "td", cellProps: props.cell, rowProps: props.row }));
+    rowProps: Record<string, any>;
+  }[] = rows.map((row) => ({
+    wrapper: "td",
+    cellProps: props.cell,
+    rowProps: props.row,
+  }));
 
   if (headers && rows.length > 0) {
-    wrappers[0].wrapper = "th"
-    wrappers[0].cellProps = { ...parseClassName(headerClassName), ...headersProps }
+    wrappers[0].wrapper = "th";
+    wrappers[0].cellProps = {
+      ...parseClassName(headerClassName),
+      ...headersProps,
+      ...wrappers[0].cellProps,
+    };
   }
 
-  return <tbody key="table_body">
-    {rows.map((row, rowIndex) => (
-      <tr
-        data-mobrix-ui-table-row="true"
-        key={`row_${rowIndex}`}
-        {...rowProps}
-      >
-        {row.map((element, index) => {
-
-          const Wrapper = wrappers[rowIndex].wrapper
+  return (
+    <tbody key="table_body">
+      {rows.map((row, rowIndex) => (
+        <tr
+          data-mobrix-ui-table-row="true"
+          key={`row_${rowIndex}`}
+          {...rowProps}
+        >
+          {row.map((element, index) => {
+            const Wrapper = wrappers[rowIndex].wrapper;
 
-          return (
-            <Wrapper
-              data-mobrix-ui-table-cell="true"
-              key={`element_${rowIndex}_${index}`}
-              align="center"
-              onClick={() => onClick(rowIndex, index)}
-              {...cellProps}
-              {...propsCallback(rowIndex, index)}
-            >
-              {element}
-            </Wrapper>
-          )
-        })}
-      </tr>
-    ))}
-  </tbody>;
+            return (
+              <Wrapper
+                data-mobrix-ui-table-cell="true"
+                key={`element_${rowIndex}_${index}`}
+                align="center"
+                onClick={() => onClick(rowIndex, index)}
+                {...wrappers[rowIndex].cellProps}
+                {...propsCallback(rowIndex, index)}
+              >
+                {element}
+              </Wrapper>
+            );
+          })}
+        </tr>
+      ))}
+    </tbody>
+  );
 };
 
 export default tableComponent;
diff --git a/src/components/molecules/Table/styles.css b/src/components/molecules/Table/styles.css
@@ -47,6 +47,6 @@
   tr[data-mobrix-ui-table-row="true"]
   th[data-mobrix-ui-table-cell="true"] {
   font-size: large;
-  background-image: var(--mobrix-ui-computed-table-header-background);
+  background: var(--mobrix-ui-computed-table-header-background);
   color: var(--mobrix-ui-computed-table-header-text-color);
 }
diff --git a/src/components/molecules/index.ts b/src/components/molecules/index.ts
@@ -10,9 +10,7 @@ export { default as Dropdown } from "./Dropdown";
 
 export { default as ExpandableContainer } from "./ExpandableContainer";
 
-export { default as Form } from "./Form";
-
-export { default as FormField } from "./FormField";
+export { default as FormField } from "../molecules/FormField";
 
 export { default as List } from "./List";