@yourdash/uikit 0.0.1 → 1.0.0

package/components/toast/toast.tsx

@@ -0,0 +1,65 @@
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.js";
+import { FC, useState } from "react";
+import Card from "../card/card.js";
+import { UKIcon } from "../icon/iconDictionary.js";
+import IconButton from "../iconButton/iconButton.js";
+import Text from "../text/text.js";
+import ToastContext from "./toastContext.js";
+import React from "react";
+import styles from "./toast.module.scss";
+
+const Toast: FC<{ children: React.ReactNode | React.ReactNode[] }> = ({ children }) => {
+  const [toasts, setToasts] = useState<
+    { type: "success" | "error" | "warning" | "info"; content: string; persist?: boolean; timestamp: number }[]
+  >([]);
+
+  return (
+    <>
+      <ToastContext.Provider
+        value={{
+          showToast: (data: { type: "success" | "error" | "warning" | "info"; content: string; persist?: boolean }) => {
+            const timestamp = Date.now();
+
+            setToasts([...toasts, { ...data, timestamp: timestamp }]);
+
+            if (!data.persist) {
+              setTimeout(() => {
+                setToasts(toasts.filter((t) => t.timestamp !== timestamp));
+              }, 5000);
+            }
+          },
+        }}
+      >
+        <div className={styles.container}>
+          {toasts.map((t) => {
+            return (
+              <Card
+                key={t.timestamp}
+                actions={
+                  t.persist ? (
+                    <IconButton
+                      accessibleLabel={"Close toast"}
+                      icon={UKIcon.X}
+                      onClick={() => setToasts(toasts.filter((x) => x.timestamp !== t.timestamp))}
+                    />
+                  ) : null
+                }
+                containerClassName={clippy(styles.component, t.type && styles[t.type])}
+              >
+                <Text text={t.content} />
+              </Card>
+            );
+          })}
+        </div>
+        {children}
+      </ToastContext.Provider>
+    </>
+  );
+};
+
+export default Toast;

package/components/toast/toastContext.ts

@@ -0,0 +1,14 @@
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import React from "react";
+
+const ToastContext = React.createContext({
+  showToast: (data: { type: "success" | "error" | "warning" | "info"; content: string; persist?: boolean }) => {
+    /* empty */
+  },
+});
+
+export default ToastContext;

package/core/decrementLevel.tsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import LevelContext, { useLevel } from "./level";
+import { FC } from "react";
+
+const DecrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
+  return <LevelContext.Provider value={useLevel() - 1}>{props.children}</LevelContext.Provider>;
+};
+
+export default DecrementLevel;

package/core/incrementLevel.tsx

@@ -0,0 +1,13 @@
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import LevelContext, { useLevel } from "./level";
+import { FC } from "react";
+
+const IncrementLevel: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
+  return <LevelContext.Provider value={useLevel() + 1}>{props.children}</LevelContext.Provider>;
+};
+
+export default IncrementLevel;

package/core/level.tsx

@@ -0,0 +1,27 @@
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import { createContext, useContext } from "react";
+import styles from "./../theme/defaultTheme.module.scss";
+
+const LevelContext = createContext(0);
+export default LevelContext;
+
+export const useLevel = () => useContext(LevelContext);
+
+export const useLevelClass = (level: number): string => {
+  switch (level) {
+    case 0:
+      return styles.level0;
+    case 1:
+      return styles.level1;
+    case 2:
+      return styles.level2;
+    case 3:
+      return styles.level3;
+    default:
+      return styles.level0;
+  }
+};

package/core/root.tsx

@@ -0,0 +1,32 @@
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import clippy from "@yourdash/shared/web/helpers/clippy.js";
+import isMobileDevice from "@yourdash/shared/web/helpers/isPhone.js";
+import ContextMenuRoot from "../components/contextMenu/contextMenuRoot.js";
+import Toast from "../components/toast/toast.js";
+import LevelContext from "./level.js";
+import styles from "./../theme/defaultTheme.module.scss";
+import React, { FC, useEffect, useState } from "react";
+
+const UIKitRoot: FC<{ children: React.ReactNode | React.ReactNode[] }> = (props) => {
+  const [isMobile, setIsMobile] = useState<boolean>(false);
+
+  useEffect(() => {
+    setIsMobile(isMobileDevice());
+  }, []);
+
+  return (
+    <div className={clippy(styles.theme, styles.level0, isMobile && styles.mobile)}>
+      <ContextMenuRoot>
+        <Toast>
+          <LevelContext.Provider value={0}>{props.children}</LevelContext.Provider>
+        </Toast>
+      </ContextMenuRoot>
+    </div>
+  );
+};
+
+export default UIKitRoot;

package/core/toast.ts

@@ -0,0 +1,17 @@
+/*
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+import React from "react";
+import ToastContext from "../components/toast/toastContext.js";
+
+export default function useToast() {
+  const toastCtx = React.useContext(ToastContext);
+
+  return {
+    create(data: { type: "success" | "error" | "warning" | "info"; content: string; persist?: boolean }) {
+      toastCtx.showToast(data);
+    },
+  };
+}

package/package.json

@@ -1,9 +1,49 @@
 {
   "name": "@yourdash/uikit",
-  "version": "0.0.1",
-  "description": "The YourDash UI Framework",
-  "main": "index.js",
-  "repository": "https://github.com/yourdash-app/yourdash",
-  "author": "Ewsgit",
-  "license": "MIT"
+  "version": "1.0.0",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=21.0.0"
+  },
+  "dependencies": {
+    "@loadable/component": "^5.15.3",
+    "@remix-run/router": "^1.15.3",
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@types/express": "^4.17.21",
+    "@types/loadable__component": "^5.13.7",
+    "@types/minimist": "^1.2.2",
+    "@types/node": "^20.1.4",
+    "@types/path-browserify": "^1.0.0",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
+    "@vitejs/plugin-react-swc": "^3.3.2",
+    "animate.css": "^4.1.1",
+    "autoprefixer": "^10.4.15",
+    "clsx": "^2.0.0",
+    "concurrently": "^8.2.2",
+    "cross-env": "^7.0.3",
+    "es-abstract": "^1.22.1",
+    "eslint": "^8.47.0",
+    "minimist": "^1.2.8",
+    "path": "^0.12.7",
+    "path-browserify": "^1.0.1",
+    "path-to-regexp": "^6.2.1",
+    "postcss": "^8.4.27",
+    "react": "^18.3.1",
+    "react-dom": "^18.2.0",
+    "react-router": "^6.15.0",
+    "react-router-dom": "^6.15.0",
+    "sass": "^1.65.1",
+    "socket.io-client": "^4.6.1",
+    "type-fest": "^4.14.0",
+    "typescript": "^5.0.4",
+    "vite": "^4.4.9",
+    "vite-plugin-dynamic-import": "^1.5.0",
+    "web-tree-sitter": "^0.20.8",
+    "xml2js": "^0.6.2",
+    "yarn": "^1.22.19"
+  }
 }

package/theme/defaultTheme.module.scss

@@ -0,0 +1,349 @@
+/*!
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+@import "./themeValues";
+
+.theme {
+  #{$theme}-author: "Ewsgit";
+  #{$theme}-name: "YourDash Classic Dark";
+  #{$theme}-version: "0.0.1";
+
+  background: var(#{$theme+$background});
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.level0 {
+  color: var(#{$theme+$color});
+
+  #{$theme+$color}: #ffffff;
+  #{$theme+$subcolor}: #bbbbbb;
+  #{$theme+$background}: #222222;
+  #{$theme+$accent}: #768ce7;
+  #{$theme+$border}: 0.125rem solid #444444;
+  #{$theme+$radius}: 1rem;
+  #{$theme+$padding}: 1rem;
+  #{$theme+$gap}: 0.5rem;
+  #{$theme+$transition}: all 200ms ease-in-out;
+  #{$theme+$separator+$size}: 0.125rem;
+  #{$theme+$separator+$color}: #444444;
+
+  // heading
+  #{$theme+$heading+$h1+$weight}: 900;
+  #{$theme+$heading+$h1+$size}: 3rem;
+  #{$theme+$heading+$h2+$weight}: 700;
+  #{$theme+$heading+$h2+$size}: 2rem;
+  #{$theme+$heading+$h3+$weight}: 600;
+  #{$theme+$heading+$h3+$size}: 1.5rem;
+  #{$theme+$heading+$h4+$weight}: 500;
+  #{$theme+$heading+$h4+$size}: 1.25rem;
+  #{$theme+$heading+$h5+$weight}: 500;
+  #{$theme+$heading+$h5+$size}: 1rem;
+  #{$theme+$heading+$h6+$weight}: 500;
+  #{$theme+$heading+$h6+$size}: 0.875rem;
+
+  // input
+  #{$theme+$input+$color}: #ffffff;
+  #{$theme+$input+$background}: #222222;
+  #{$theme+$input+$border}: 0.125rem solid #444444;
+  #{$theme+$input+$radius}: 0.5rem;
+  #{$theme+$input+$height}: 2rem;
+  #{$theme+$input+$padding+$horizontal}: 0.5rem;
+  #{$theme+$input+$transition}: all 0.2s ease-in-out;
+  // focus
+  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
+  #{$theme}#{$input}#{$focus}#{$background}: #333333;
+  #{$theme}#{$input}#{$focus}#{$border}: 0.125rem solid #555555;
+
+  // button
+  #{$theme}#{$button}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$background}: #444444;
+  #{$theme}#{$button}#{$border}: 0.125rem solid #555555;
+  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
+  #{$theme}#{$button}#{$font}#{$weight}: 400;
+  #{$theme}#{$button}#{$radius}: 0.5rem;
+  #{$theme}#{$button}#{$padding}#{$horizontal}: 0.5rem;
+  #{$theme}#{$button}#{$transition}: all 0.2s ease-in-out;
+  // hover
+  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$hover}#{$background}: #555555;
+  #{$theme}#{$button}#{$hover}#{$border}: 0.125rem solid #666666;
+  #{$theme}#{$button}#{$hover}#{$radius}: 0.5rem;
+  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
+  // active
+  #{$theme}#{$button}#{$active}#{$color}: #000000;
+  #{$theme}#{$button}#{$active}#{$background}: #666666;
+  #{$theme}#{$button}#{$active}#{$border}: 0.125rem solid #777777;
+  #{$theme}#{$button}#{$active}#{$radius}: 0.5rem;
+  #{$theme}#{$button}#{$active}#{$transition}: all 50ms ease-in-out;
+
+  // text button
+  #{$theme+$textbutton+$font+$weight}: 700;
+
+  // font
+  #{$theme}#{$font}#{$family}: Inter;
+  #{$theme}#{$font}#{$size}: 0.9rem;
+  #{$theme}#{$font}#{$weight}: 400;
+
+  // header
+  #{$theme}#{$header}#{$color}: #ffffff;
+  #{$theme}#{$header}#{$font}#{$family}: Inter;
+  #{$theme}#{$header}#{$font}#{$size}: 1.2rem;
+  #{$theme}#{$header}#{$font}#{$weight}: 700;
+  #{$theme}#{$header}#{$padding}#{$vertical}: 1rem;
+  #{$theme}#{$header}#{$padding}#{$horizontal}: 0.5rem;
+}
+
+.level1 {
+  color: var(#{$theme+$color});
+
+  #{$theme}#{$color}: #ffffff;
+  #{$theme}#{$background}: #333333;
+  #{$theme}#{$border}: 0.125rem solid #555555;
+  #{$theme}#{$accent}: #768ce7;
+  #{$theme}#{$radius}: 0.5rem;
+  #{$theme}#{$font}#{$family}: Inter;
+  #{$theme}#{$font}#{$radius}: 0.9rem;
+  #{$theme}#{$font}#{$weight}: 400;
+  #{$theme}#{$padding}: 0.75rem;
+  #{$theme}#{$gap}: 0.5rem;
+  #{$theme}#{$transition}: all 200ms ease-in-out;
+  #{$theme}#{$separator}#{$size}: 0.125rem;
+  #{$theme}#{$separator}#{$color}: #555555;
+
+  // heading
+  #{$theme}#{$heading}#{$h1}#{$weight}: 800;
+  #{$theme}#{$heading}#{$h1}#{$size}: 3rem;
+  #{$theme}#{$heading}#{$h2}#{$weight}: 700;
+  #{$theme}#{$heading}#{$h2}#{$size}: 2.5rem;
+  #{$theme}#{$heading}#{$h3}#{$weight}: 600;
+  #{$theme}#{$heading}#{$h3}#{$size}: 2rem;
+  #{$theme}#{$heading}#{$h4}#{$weight}: 500;
+  #{$theme}#{$heading}#{$h4}#{$size}: 1.5rem;
+  #{$theme}#{$heading}#{$h5}#{$weight}: 500;
+  #{$theme}#{$heading}#{$h5}#{$size}: 1rem;
+  #{$theme}#{$heading}#{$h6}#{$weight}: 500;
+  #{$theme}#{$heading}#{$h6}#{$size}: 0.875rem;
+
+  // input
+  #{$theme}#{$input}#{$color}: #ffffff;
+  #{$theme}#{$input}#{$background}: #222222;
+  #{$theme}#{$input}#{$border}: 0.125rem solid #444444;
+  #{$theme}#{$input}#{$radius}: 0.5rem;
+  #{$theme}#{$input}#{$height}: 2rem;
+  #{$theme}#{$input}#{$padding}#{$horizontal}: 0.5rem;
+  #{$theme}#{$input}#{$transition}: all 0.2s ease-in-out;
+  // focus
+  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
+  #{$theme}#{$input}#{$focus}#{$background}: #333333;
+  #{$theme}#{$input}#{$focus}#{$border}: 0.125rem solid #555555;
+
+  // button
+  #{$theme}#{$button}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$background}: #444444;
+  #{$theme}#{$button}#{$border}: 0.125rem solid #444444;
+  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
+  #{$theme}#{$button}#{$font}#{$weight}: 400;
+  #{$theme}#{$button}#{$radius}: 0.5rem;
+  #{$theme}#{$button}#{$padding}#{$horizontal}: 0.5rem;
+  #{$theme}#{$button}#{$transition}: all 0.2s ease-in-out;
+  // hover
+  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$hover}#{$background}: #555555;
+  #{$theme}#{$button}#{$hover}#{$border}: 0.125rem solid #555555;
+  #{$theme}#{$button}#{$hover}#{$radius}: 0.5rem;
+  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
+  // active
+  #{$theme}#{$button}#{$active}#{$color}: #000000;
+  #{$theme}#{$button}#{$active}#{$background}: #666666;
+  #{$theme}#{$button}#{$active}#{$border}: 0.125rem solid #555555;
+  #{$theme}#{$button}#{$active}#{$radius}: 0.5rem;
+
+  // header
+  #{$theme}#{$header}#{$color}: #ffffff;
+  #{$theme}#{$header}#{$font}#{$family}: Inter;
+  #{$theme}#{$header}#{$font}#{$size}: 1.2rem;
+  #{$theme}#{$header}#{$font}#{$weight}: 700;
+  #{$theme}#{$header}#{$padding}#{$vertical}: 0.5rem;
+  #{$theme}#{$header}#{$padding}#{$horizontal}: 0.25rem;
+}
+
+.level2 {
+  color: var(#{$theme+$color});
+
+  #{$theme}#{$color}: #ffffff;
+  #{$theme}#{$background}: #444444;
+  #{$theme}#{$border}: 0.125rem solid #555555;
+  #{$theme}#{$accent}: #768ce7;
+  #{$theme}#{$radius}: 0.25rem;
+  #{$theme}#{$padding}: 0.5rem;
+  #{$theme}#{$gap}: 0.75rem;
+  #{$theme}#{$transition}: all 200ms ease-in-out;
+  #{$theme}#{$separator}#{$size}: 0.125rem;
+  #{$theme}#{$separator}#{$color}: #555555;
+
+  // heading
+  #{$theme}#{$heading}#{$h1}#{$weight}: 900;
+  #{$theme}#{$heading}#{$h1}#{$size}: 3rem;
+  #{$theme}#{$heading}#{$h2}#{$weight}: 700;
+  #{$theme}#{$heading}#{$h2}#{$size}: 2rem;
+  #{$theme}#{$heading}#{$h3}#{$weight}: 600;
+  #{$theme}#{$heading}#{$h3}#{$size}: 1.5rem;
+  #{$theme}#{$heading}#{$h4}#{$weight}: 500;
+  #{$theme}#{$heading}#{$h4}#{$size}: 1.25rem;
+  #{$theme}#{$heading}#{$h5}#{$weight}: 500;
+  #{$theme}#{$heading}#{$h5}#{$size}: 1rem;
+  #{$theme}#{$heading}#{$h6}#{$weight}: 500;
+  #{$theme}#{$heading}#{$h6}#{$size}: 0.875rem;
+
+  // text button
+  #{$theme+$textbutton+$font+$weight}: 700;
+
+  // font
+  #{$theme}#{$font}#{$family}: Inter;
+  #{$theme}#{$font}#{$size}: 0.9rem;
+  #{$theme}#{$font}#{$weight}: 400;
+
+  // input
+  #{$theme}#{$input}#{$color}: #ffffff;
+  #{$theme}#{$input}#{$background}: #222222;
+  #{$theme}#{$input}#{$border}: 0.125rem solid #444444;
+  #{$theme}#{$input}#{$radius}: 0.5rem;
+  #{$theme}#{$input}#{$height}: 2rem;
+  #{$theme}#{$input}#{$padding}#{$horizontal}: 0.5rem;
+  #{$theme}#{$input}#{$transition}: all 0.2s ease-in-out;
+  // focus
+  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
+  #{$theme}#{$input}#{$focus}#{$background}: #333333;
+  #{$theme}#{$input}#{$focus}#{$border}: 0.125rem solid #555555;
+
+  // button
+  #{$theme}#{$button}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$background}: #555555;
+  #{$theme}#{$button}#{$border}: 0.125rem solid #555555;
+  #{$theme}#{$button}#{$font}#{$family}: Inter;
+  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
+  #{$theme}#{$button}#{$font}#{$weight}: 400;
+  #{$theme}#{$button}#{$radius}: 0.25rem;
+  #{$theme}#{$button}#{$padding}#{$horizontal}: 0.5rem;
+  #{$theme}#{$button}#{$transition}: all 0.2s ease-in-out;
+  // hover
+  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$hover}#{$background}: #666666;
+  #{$theme}#{$button}#{$hover}#{$border}: 0.125rem solid #666666;
+  #{$theme}#{$button}#{$hover}#{$radius}: 0.25rem;
+  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
+  // active
+  #{$theme}#{$button}#{$active}#{$color}: #000000;
+  #{$theme}#{$button}#{$active}#{$background}bg: #666666;
+  #{$theme}#{$button}#{$active}#{$border}: 0.125rem solid #666666;
+  #{$theme}#{$button}#{$active}#{$radius}: 0.25rem;
+
+  // header
+  #{$theme}#{$header}#{$color}: #ffffff;
+  #{$theme}#{$header}#{$font}#{$family}: Inter;
+  #{$theme}#{$header}#{$font}#{$size}: 1.2rem;
+  #{$theme}#{$header}#{$font}#{$weight}: 700;
+  #{$theme}#{$header}#{$padding}#{$vertical}: 0.5rem;
+  #{$theme}#{$header}#{$padding}#{$horizontal}: 0.25rem;
+}
+
+.level3 {
+  color: var(#{$theme+$color});
+
+  #{$theme}#{$color}: #ffffff;
+  #{$theme}#{$background}: #555555;
+  #{$theme}#{$border}: 0.125rem solid #666666;
+  #{$theme}#{$accent}: #768ce7;
+  #{$theme}#{$radius}: 0.125rem;
+  #{$theme}#{$padding}: 0.5rem;
+  #{$theme}#{$gap}: 1rem;
+  #{$theme}#{$transition}: all 200ms ease-in-out;
+  #{$theme}#{$separator}#{$size}: 0.125rem;
+  #{$theme}#{$separator}#{$color}: #555555;
+
+  // heading
+  #{$theme}#{$heading}#{$h1}#{$weight}: 900;
+  #{$theme}#{$heading}#{$h1}#{$size}: 3rem;
+  #{$theme}#{$heading}#{$h2}#{$weight}: 700;
+  #{$theme}#{$heading}#{$h2}#{$size}: 2rem;
+  #{$theme}#{$heading}#{$h3}#{$weight}: 600;
+  #{$theme}#{$heading}#{$h3}#{$size}: 1.5rem;
+  #{$theme}#{$heading}#{$h4}#{$weight}: 500;
+  #{$theme}#{$heading}#{$h4}#{$size}: 1.25rem;
+  #{$theme}#{$heading}#{$h5}#{$weight}: 500;
+  #{$theme}#{$heading}#{$h5}#{$size}: 1rem;
+  #{$theme}#{$heading}#{$h6}#{$weight}: 500;
+  #{$theme}#{$heading}#{$h6}#{$size}: 0.875rem;
+
+  // text button
+  #{$theme+$textbutton+$font+$weight}: 700;
+
+  // font
+  #{$theme}#{$family}: Inter;
+  #{$theme}#{$size}: 0.9rem;
+  #{$theme}#{$weight}: 400;
+
+  // input
+  #{$theme}#{$input}#{$color}: #ffffff;
+  #{$theme}#{$input}#{$background}: #222222;
+  #{$theme}#{$input}#{$border}: 0.125rem solid #444444;
+  #{$theme}#{$input}#{$radius}: 0.5rem;
+  #{$theme}#{$input}#{$height}: 2rem;
+  #{$theme}#{$input}#{$padding}#{$horizontal}: 0.5rem;
+  #{$theme}#{$input}#{$transition}: all 0.2s ease-in-out;
+  // focus
+  #{$theme}#{$input}#{$focus}#{$color}: #ffffff;
+  #{$theme}#{$input}#{$focus}#{$background}: #333333;
+  #{$theme}#{$input}#{$focus}#{$border}: 0.125rem solid #555555;
+
+  // button
+  #{$theme}#{$button}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$background}: #666666;
+  #{$theme}#{$button}#{$border}: 0.125rem solid #666666;
+  #{$theme}#{$button}#{$font}#{$family}: Inter;
+  #{$theme}#{$button}#{$font}#{$size}: 0.9rem;
+  #{$theme}#{$button}#{$font}#{$weight}: 400;
+  #{$theme}#{$button}#{$radius}: 0.25rem;
+  #{$theme}#{$button}#{$padding}#{$horizontal}: 0.5rem;
+  // hover
+  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$hover}#{$background}: #777777;
+  #{$theme}#{$button}#{$hover}#{$border}: 0.125rem solid #777777;
+  #{$theme}#{$button}#{$hover}#{$radius}: 0.25rem;
+  #{$theme}#{$button}#{$hover}#{$transition}: all 50ms ease-in-out;
+  // active
+  #{$theme}#{$button}#{$active}#{$color}: #000000;
+  #{$theme}#{$button}#{$active}#{$background}: #777777;
+  #{$theme}#{$button}#{$active}#{$border}: 0.125rem solid #777777;
+  #{$theme}#{$button}#{$active}#{$radius}: 0.25rem;
+
+  // header
+  #{$theme}#{$header}#{$color}: #ffffff;
+  #{$theme}#{$header}#{$font}#{$family}: Inter;
+  #{$theme}#{$header}#{$font}#{$size}: 1.2rem;
+  #{$theme}#{$header}#{$font}#{$weight}: 700;
+  #{$theme}#{$header}#{$padding}#{$vertical}: 0.5rem;
+  #{$theme}#{$header}#{$padding}#{$horizontal}: 0.25rem;
+}
+
+.mobile {
+  .level0 {
+    #{$theme+$input+$height}: 2.5rem;
+  }
+
+  .level1 {
+    #{$theme+$input+$height}: 2.5rem;
+  }
+
+  .level2 {
+    #{$theme+$input+$height}: 2.5rem;
+  }
+
+  .level3 {
+    #{$theme+$input+$height}: 2.5rem;
+  }
+}

package/theme/themeValues.scss

@@ -0,0 +1,46 @@
+/*!
+ * Copyright ©2024 Ewsgit<https://github.com/ewsgit> and YourDash<https://github.com/yourdash> contributors.
+ * YourDash is licensed under the MIT License. (https://ewsgit.mit-license.org)
+ */
+
+$theme: "--ut";
+$button: "btn";
+$hover: "hvr";
+$active: "atv";
+$padding: "pdn";
+$border: "brd";
+$radius: "rad";
+$accent: "acn";
+$subcolor: "scl";
+$color: "col";
+$background: "bgn";
+$gap: "gap";
+$transition: "trn";
+$font: "fnt";
+$size: "siz";
+$weight: "wgt";
+$family: "fam";
+$vertical: "vrt";
+$horizontal: "hrt";
+$header: "hed";
+$separator: "sep";
+$height: "hei";
+$heading: "hed";
+$input: "inp";
+$focus: "foc";
+$textbutton: "txb";
+$h1: "he1";
+$h2: "he2";
+$h3: "he3";
+$h4: "he4";
+$h5: "he5";
+$h6: "he6";
+
+$sizeMobile: 440px;
+$sizeLargeMobile: 560px;
+$sizeTablet: 768px;
+$sizeLargeTablet: 960px;
+$sizeSmallDesktop: 1200px;
+$sizeMediumDesktop: 1440px;
+$sizeLargeDesktop: 1920px;
+$sizeWideDesktop: 2560px;

package/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "strict": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "jsxImportSource": "react",
+    "types": ["vite/client"],
+    "noEmit": true,
+    "isolatedModules": true,
+  },
+  "include": [
+    "./**/*",
+    "../applications/**/frontend/**/*",
+    "../shared/**/*"
+  ]
+}