react-miui 0.30.1 → 0.31.0

package/esm/theme.js

@@ -29,6 +29,8 @@ const { styled, css, globalCss, keyframes, getCssText, theme, createTheme, confi
             headerBg: "#efeff0",
             headerText: "#484848",
             text: "#323232",
+            text2: "#181818",
+            text3: "#000000",
             sub: "#959595",
             popText: "#666",
             toolbarBorder: "#ababab",

package/esm/theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"theme.js","sourceRoot":"","sources":["../src/theme.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-miui",
-  "version": "0.30.1",
+  "version": "0.31.0",
   "author": "Jacek Nowacki",
   "license": "MIT",
   "exports": {

package/src/components/form/Checkbox.styled.ts

@@ -18,7 +18,7 @@ const CheckmarkWrapper = styled("div", {
         display: "none",
         width: "9px",
         height: "9px",
-        color: "white",
+        color: "white", // must be actually white
     },
 
     [`+ ${TextLabel.toString()}`]: {

package/src/components/form/ColorPicker.styled.ts

@@ -23,7 +23,7 @@ const ColorDisplay = styled("div", {
                 alignItems: "center",
                 justifyContent: "center",
                 fontSize: "14px",
-                color: "white",
+                color: "white", // TODO verify if that should be $background
                 fontWeight: "500",
             },
         },

package/src/components/form/Select.styled.ts

@@ -1,5 +1,4 @@
 import { borderPxToRem, dimensionsPxToRem, pxToRem, styled } from "../../theme";
-
 import { errorCSS, focusCSS } from "./input/Input.css";
 
 const Select = styled("select", {
@@ -9,7 +8,7 @@ const Select = styled("select", {
     "display": "flex",
     "alignItems": "center",
     "width": "100%",
-    "background": "white",
+    "background": "$background",
     "fontFamily": "inherit",
     "borderRadius": pxToRem(2),
     "padding": `0 ${dimensionsPxToRem(36)}`,

package/src/components/form/input/Input.css.ts

@@ -1,6 +1,6 @@
 import type { ThemeCSS } from "../../../theme";
 
-import { dimensionsPxToRem, fontPxToRem, borderPxToRem } from "../../../theme";
+import { borderPxToRem, dimensionsPxToRem, fontPxToRem } from "../../../theme";
 
 const input = {
     "height": dimensionsPxToRem(103),
@@ -33,7 +33,7 @@ const errorCSS = {
 };
 
 const wrapper = {
-    background: "white",
+    background: "$background",
     display: "inline-flex",
     width: "100%",
     borderRadius: "2px",

package/src/components/ui/action/Action.styled.ts

@@ -1,13 +1,13 @@
 import type { ThemeCSS } from "../../../theme";
 
-import { fontPxToRem, borderPxToRem, dimensionsPxToRem, styled } from "../../../theme";
+import { borderPxToRem, dimensionsPxToRem, fontPxToRem, styled } from "../../../theme";
 
 const StyledAction = styled("div", {
     height: dimensionsPxToRem(102),
     width: dimensionsPxToRem(102),
     borderRadius: dimensionsPxToRem(102),
     border: `${borderPxToRem(1)} solid $buttonBorder`,
-    background: "white",
+    background: "$background",
     padding: 0,
     display: "flex",
     alignItems: "center",
@@ -18,7 +18,7 @@ const StyledAction = styled("div", {
 const Badge = styled("div", {
     position: "absolute",
     background: "$red1",
-    color: "white",
+    color: "$background",
     fontWeight: "bold",
     top: "-25%",
     right: "-25%",
@@ -28,9 +28,9 @@ const Badge = styled("div", {
     padding: dimensionsPxToRem(17),
     width: dimensionsPxToRem(60),
     height: dimensionsPxToRem(60),
-    alignItems: "center", // Vertically center content
-    justifyContent: "center", // Horizontally center content
-    borderRadius: "50%", // Make it circular
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: "50%",
 });
 
 const sharedCss: ThemeCSS = {

package/src/components/ui/button/Button.styled.ts

@@ -7,7 +7,7 @@ const Button = styled("button", {
     "height": dimensionsPxToRem(118),
     "background": "$green1",
     "border": `${borderPxToRem(1)} solid $green1Darker`,
-    "color": "white",
+    "color": "$background",
     "borderRadius": "1000px",
     "display": "flex",
     "alignItems": "center",
@@ -30,7 +30,7 @@ const Button = styled("button", {
         },
         outline: {
             true: {
-                background: "white",
+                background: "$background",
                 borderColor: "$buttonBorder",
                 color: "$grey1",
             },

package/src/components/ui/directionPad/Button.styled.ts

@@ -15,7 +15,7 @@ const StyledDot = styled("span", {
     width: "4px",
     height: "4px",
     borderRadius: "666px",
-    background: "black",
+    background: "$text3",
     margin: "auto",
 });
 

package/src/components/ui/directionPad/Pad.styled.ts

@@ -9,7 +9,7 @@ const StyledPad = styled("div", {
     borderRadius: "666px",
     width: "150px",
     border: "1px solid #aaa",
-    background: "white",
+    background: "$background",
 });
 
 const StyledLine = styled("div", {

package/src/components/ui/drawer/Drawer.styled.ts

@@ -6,7 +6,7 @@ const StyledDrawer = styled("div", {
     left: 0,
     right: 0,
     bottom: 0,
-    background: "white",
+    background: "$background",
     zIndex: 1,
     transition: "transform 300ms",
     overflow: "auto",

package/src/components/ui/keyValue/KeyValue.styled.ts

@@ -13,7 +13,7 @@ const item = css({
 const Container = styled("div", {
     "--kv-border-color": "$colors$headerBorder",
     "--kv-border": `${borderPxToRem(1)} solid var(--kv-border-color)`,
-    "--kv-background-color": "white",
+    "--kv-background-color": "$colors$background",
     "--kv-hover-background-color": "$colors$activeBg",
     "border": "1px solid var(--kv-border-color)",
     "backgroundColor": "var(--kv-background-color)",

package/src/components/ui/loader/CoveringLoader.tsx

@@ -87,7 +87,7 @@ const CoveringLoader = forwardRef<HTMLElement, Props>(({ // eslint-disable-line
             : "";
         const spinnerCss = `z-index: 1;
 content: "";
-position: fixed;
+position: absolute;
 inset: 0;
 background: url('${spinnerBg}') no-repeat center center;
 ${backgroundCss}

package/src/components/ui/loader/PopLoader.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 
 import { styled } from "../../../theme";
-
 import { Loader } from "./Loader";
 
 type Props = React.ComponentProps<typeof Loader>;
@@ -10,7 +9,7 @@ const Container = styled("div", {
     position: "absolute",
     right: 20,
     top: 20,
-    background: "white",
+    background: "$background",
     border: "1px solid $toolbarBorder",
     borderRadius: 666,
     padding: 10,

package/src/components/ui/modal/Modal.styled.ts

@@ -5,10 +5,10 @@ const NEGATIVE_PADDING = pxToRem(-20);
 
 const overlay = keyframes({
     from: {
-        background: "#00000000",
+        background: "rgba($background, 0)",
     },
     to: {
-        background: "#0000004c",
+        background: "rgba($background, 0.3)",
     },
 });
 
@@ -86,7 +86,7 @@ const ContainerStyled = styled("div", {
 const TitleStyled = styled("div", { // TODO header by default? expose this as `titleAs`?
     fontSize: fontPxToRem(40),
     textAlign: "center",
-    color: "black",
+    color: "$text3",
     margin: `${dimensionsPxToRem(90)} 0`,
 });
 

package/src/components/ui/pop/Pop.styled.ts

@@ -10,7 +10,7 @@ const Overlay = styled("div", {
 const List = styled("ul", {
     zIndex: 5,
     position: "absolute",
-    background: "white",
+    background: "$background",
     margin: 0,
     padding: 0,
     listStyleType: "none",
@@ -28,7 +28,7 @@ const ListItem = styled("li", {
 
 const Button = styled("button", {
     "border": "none",
-    "background": "white",
+    "background": "$background",
     "height": dimensionsPxToRem(116),
     "padding": `0 ${dimensionsPxToRem(42)}`,
     "boxSizing": "border-box",

package/src/components/ui/toolButton/ToolButton.stories.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react-vite";
 
 import { Div } from "../../native";
-
 import { ToolButton } from "./ToolButton";
 
 const meta: Meta = {

package/src/theme.ts

@@ -1,7 +1,7 @@
 import { createStitches } from "@stitches/react";
 
-import type { StyledComponent } from "@stitches/react/types/styled-component";
 import type { CSS as StitchesCSS } from "@stitches/react";
+import type { StyledComponent } from "@stitches/react/types/styled-component";
 
 const RATIOS = {
     dimensions: 3,
@@ -50,6 +50,8 @@ const {
             headerBg: "#efeff0",
             headerText: "#484848",
             text: "#323232",
+            text2: "#181818",
+            text3: "#000000",
             sub: "#959595",
 
             popText: "#666",