react-miui 0.30.2 → 0.32.0

package/esm/theme.d.ts

@@ -1,5 +1,5 @@
-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";
 declare const pxToRem: (px: number) => string;
 declare const dimensionsPxToRem: (px: number) => string;
 declare const borderPxToRem: (px: number) => string;
@@ -26,6 +26,8 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         headerBg: "#efeff0";
         headerText: "#484848";
         text: "#323232";
+        text2: "#181818";
+        text3: "#000000";
         sub: "#959595";
         popText: "#666";
         toolbarBorder: "#ababab";
@@ -119,6 +121,8 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         headerBg: "#efeff0";
         headerText: "#484848";
         text: "#323232";
+        text2: "#181818";
+        text3: "#000000";
         sub: "#959595";
         popText: "#666";
         toolbarBorder: "#ababab";
@@ -203,6 +207,8 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         headerBg: "#efeff0";
         headerText: "#484848";
         text: "#323232";
+        text2: "#181818";
+        text3: "#000000";
         sub: "#959595";
         popText: "#666";
         toolbarBorder: "#ababab";
@@ -302,6 +308,8 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
             headerBg: "#efeff0";
             headerText: "#484848";
             text: "#323232";
+            text2: "#181818";
+            text3: "#000000";
             sub: "#959595";
             popText: "#666";
             toolbarBorder: "#ababab";
@@ -385,6 +393,8 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         headerBg: "#efeff0";
         headerText: "#484848";
         text: "#323232";
+        text2: "#181818";
+        text3: "#000000";
         sub: "#959595";
         popText: "#666";
         toolbarBorder: "#ababab";
@@ -470,6 +480,8 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
             headerBg: "#efeff0";
             headerText: "#484848";
             text: "#323232";
+            text2: "#181818";
+            text3: "#000000";
             sub: "#959595";
             popText: "#666";
             toolbarBorder: "#ababab";
@@ -559,6 +571,8 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         headerBg: import("@stitches/react/types/theme").Token<"headerBg", string, "colors", "">;
         headerText: import("@stitches/react/types/theme").Token<"headerText", string, "colors", "">;
         text: import("@stitches/react/types/theme").Token<"text", string, "colors", "">;
+        text2: import("@stitches/react/types/theme").Token<"text2", string, "colors", "">;
+        text3: import("@stitches/react/types/theme").Token<"text3", string, "colors", "">;
         sub: import("@stitches/react/types/theme").Token<"sub", string, "colors", "">;
         popText: import("@stitches/react/types/theme").Token<"popText", string, "colors", "">;
         toolbarBorder: import("@stitches/react/types/theme").Token<"toolbarBorder", string, "colors", "">;
@@ -620,6 +634,8 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         headerBg?: string | number | boolean;
         headerText?: string | number | boolean;
         text?: string | number | boolean;
+        text2?: string | number | boolean;
+        text3?: string | number | boolean;
         sub?: string | number | boolean;
         popText?: string | number | boolean;
         toolbarBorder?: string | number | boolean;
@@ -686,6 +702,8 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         headerBg?: string | number | boolean;
         headerText?: string | number | boolean;
         text?: string | number | boolean;
+        text2?: string | number | boolean;
+        text3?: string | number | boolean;
         sub?: string | number | boolean;
         popText?: string | number | boolean;
         toolbarBorder?: string | number | boolean;
@@ -758,6 +776,8 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
             headerBg: "#efeff0";
             headerText: "#484848";
             text: "#323232";
+            text2: "#181818";
+            text3: "#000000";
             sub: "#959595";
             popText: "#666";
             toolbarBorder: "#ababab";
@@ -824,8 +844,75 @@ declare const styled: <Type extends keyof JSX.IntrinsicElements | React.Componen
         };
     };
 };
+declare const darkTheme: string & {
+    className: string;
+    selector: string;
+} & import("@stitches/react/types/stitches").ThemeTokens<{
+    colors: {
+        background: string;
+        mainColor: string;
+        mainColorAlt: string;
+        activeBg: string;
+        inactiveBg: string;
+        inactiveDarkBg: string;
+        toggleHandleBg: string;
+        toggleHandleBorder: string;
+        toggleBgDisabled: string;
+        toggleHandleBorderDisabled: string;
+        toggleHandleBgDisabled: string;
+        icon: string;
+        border: string;
+        buttonBorder: string;
+        headerBorder: string;
+        headerBg: string;
+        headerText: string;
+        text: string;
+        text2: string;
+        text3: string;
+        sub: string;
+        popText: string;
+        toolbarBorder: string;
+        toolbarBg: string;
+        modalBg: string;
+        modalButtonBg: string;
+        modalButtonBorder: string;
+        inputDisabledBg: string;
+        inputDisabledText: string;
+        choiceBg: string;
+        choiceText: string;
+        choiceActiveBg: string;
+        choiceActiveText: string;
+        choiceBorder: string;
+        selectorText: string;
+        selectorActive: string;
+        blue1: string;
+        blue2: string;
+        blue3: string;
+        blue4: string;
+        blue5: string;
+        orange1: string;
+        orange1Darker: string;
+        purple1: string;
+        green1: string;
+        green1Darker: string;
+        pink1: string;
+        red1: string;
+        yellow1: string;
+        yellow2: string;
+        yellow3: string;
+        pinky1: string;
+        pinky2: string;
+        pinky3: string;
+        grey1: string;
+        focusColor: string;
+        scrollbarsThumb: string;
+        scrollbarsBg: string;
+        tableStripedBg: string;
+        toolButtonText: string;
+    };
+}, "">;
 type ThemeCSS = StitchesCSS<typeof config>;
 type OverwriteProps<T extends StyledComponent<Type, OldProps, Media, TheCSS>, Props, Type = any, OldProps = any, Media = any, TheCSS = any> = StyledComponent<Type, Props, Media, TheCSS>;
 export type { ThemeCSS, OverwriteProps, };
-export { styled, css, globalCss, keyframes, getCssText, theme, createTheme, config, pxToRem, dimensionsPxToRem, borderPxToRem, fontPxToRem, };
+export { styled, css, globalCss, keyframes, getCssText, theme, darkTheme, createTheme, config, pxToRem, dimensionsPxToRem, borderPxToRem, fontPxToRem, };
 //# sourceMappingURL=theme.d.ts.map

package/esm/theme.d.ts.map

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

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",
@@ -79,5 +81,69 @@ const { styled, css, globalCss, keyframes, getCssText, theme, createTheme, confi
         size: (value) => ({ width: value, height: value }),
     },
 });
-export { styled, css, globalCss, keyframes, getCssText, theme, createTheme, config, pxToRem, dimensionsPxToRem, borderPxToRem, fontPxToRem, };
+const darkTheme = createTheme("theme-dark", {
+    colors: {
+        background: "#0f0f11",
+        mainColor: "#5bb8ff",
+        mainColorAlt: "#3a94d4",
+        activeBg: "#2a2a2d",
+        inactiveBg: "#1f1f23",
+        inactiveDarkBg: "#141414",
+        toggleHandleBg: "#2c2c2c",
+        toggleHandleBorder: "#3a3a3a",
+        toggleBgDisabled: "#1c1c1c",
+        toggleHandleBorderDisabled: "#6a513c",
+        toggleHandleBgDisabled: "#8a6447",
+        icon: "#c6c6c6",
+        border: "#2e2e2e",
+        buttonBorder: "#3a3a3a",
+        headerBorder: "#2c2c2d",
+        headerBg: "#1b1b1c",
+        headerText: "#e0e0e0",
+        text: "#dcdcdc",
+        text2: "#e0e0e0",
+        text3: "#fff",
+        sub: "#8b8b8b",
+        popText: "#b0b0b0",
+        toolbarBorder: "#2a2a2a",
+        toolbarBg: "#161618",
+        modalBg: "#1a1a1c",
+        modalButtonBg: "#1c1c1e",
+        modalButtonBorder: "#303030",
+        inputDisabledBg: "#202024",
+        inputDisabledText: "#777",
+        choiceBg: "#1a1a1a",
+        choiceText: "#999",
+        choiceActiveBg: "#252525",
+        choiceActiveText: "#efefef",
+        choiceBorder: "#3a3a3a",
+        selectorText: "#cdcdcd",
+        selectorActive: "#5bb8ff",
+        blue1: "#4fb4ff",
+        blue2: "#3a5167",
+        blue3: "#2b3242",
+        blue4: "#69c7ff",
+        blue5: "#4aaae4",
+        orange1: "#ff8a33",
+        orange1Darker: "#cc6b1f",
+        purple1: "#8b73ff",
+        green1: "#46d43a",
+        green1Darker: "#3ab12f",
+        pink1: "#ff5ca5",
+        red1: "#ff3d1a",
+        yellow1: "#caa562",
+        yellow2: "#a77d2c",
+        yellow3: "#4a3f28",
+        pinky1: "#7d5a54",
+        pinky2: "#8c4a39",
+        pinky3: "#6b504b",
+        grey1: "#9a9a9a",
+        focusColor: "#e2c34a",
+        scrollbarsThumb: "#575757",
+        scrollbarsBg: "transparent",
+        tableStripedBg: "#18181a",
+        toolButtonText: "#b4b9c8",
+    },
+});
+export { styled, css, globalCss, keyframes, getCssText, theme, darkTheme, createTheme, config, pxToRem, dimensionsPxToRem, borderPxToRem, fontPxToRem, };
 //# sourceMappingURL=theme.js.map

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.2",
+  "version": "0.32.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/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",
@@ -110,6 +112,84 @@ const {
     },
 });
 
+const darkTheme = createTheme("theme-dark", {
+    colors: {
+        background: "#0f0f11",
+
+        mainColor: "#5bb8ff",
+        mainColorAlt: "#3a94d4",
+
+        activeBg: "#2a2a2d",
+        inactiveBg: "#1f1f23",
+        inactiveDarkBg: "#141414",
+
+        toggleHandleBg: "#2c2c2c",
+        toggleHandleBorder: "#3a3a3a",
+        toggleBgDisabled: "#1c1c1c",
+        toggleHandleBorderDisabled: "#6a513c",
+        toggleHandleBgDisabled: "#8a6447",
+
+        icon: "#c6c6c6",
+        border: "#2e2e2e",
+        buttonBorder: "#3a3a3a",
+
+        headerBorder: "#2c2c2d",
+        headerBg: "#1b1b1c",
+        headerText: "#e0e0e0",
+        text: "#dcdcdc",
+        text2: "#e0e0e0",
+        text3: "#fff",
+        sub: "#8b8b8b",
+
+        popText: "#b0b0b0",
+
+        toolbarBorder: "#2a2a2a",
+        toolbarBg: "#161618",
+        modalBg: "#1a1a1c",
+        modalButtonBg: "#1c1c1e",
+        modalButtonBorder: "#303030",
+
+        inputDisabledBg: "#202024",
+        inputDisabledText: "#777",
+
+        choiceBg: "#1a1a1a",
+        choiceText: "#999",
+        choiceActiveBg: "#252525",
+        choiceActiveText: "#efefef",
+        choiceBorder: "#3a3a3a",
+
+        selectorText: "#cdcdcd",
+        selectorActive: "#5bb8ff",
+
+        blue1: "#4fb4ff",
+        blue2: "#3a5167",
+        blue3: "#2b3242",
+        blue4: "#69c7ff",
+        blue5: "#4aaae4",
+        orange1: "#ff8a33",
+        orange1Darker: "#cc6b1f",
+        purple1: "#8b73ff",
+        green1: "#46d43a",
+        green1Darker: "#3ab12f",
+        pink1: "#ff5ca5",
+        red1: "#ff3d1a",
+        yellow1: "#caa562",
+        yellow2: "#a77d2c",
+        yellow3: "#4a3f28",
+        pinky1: "#7d5a54",
+        pinky2: "#8c4a39",
+        pinky3: "#6b504b",
+
+        grey1: "#9a9a9a",
+        focusColor: "#e2c34a",
+        scrollbarsThumb: "#575757",
+        scrollbarsBg: "transparent",
+        tableStripedBg: "#18181a",
+
+        toolButtonText: "#b4b9c8",
+    },
+});
+
 type ThemeCSS = StitchesCSS<typeof config>;
 
 type OverwriteProps<
@@ -125,8 +205,7 @@ export type {
 };
 
 export {
-    styled, css, globalCss, keyframes, getCssText, theme, createTheme, config,
-
+    styled, css, globalCss, keyframes, getCssText, theme, darkTheme, createTheme, config,
     pxToRem,
     dimensionsPxToRem,
     borderPxToRem,