@yourdash/uikit 1.0.35 → 1.0.37

package/dist/defaultTheme.module.scss

@@ -0,0 +1,361 @@
+/*!
+ * 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)
+ */
+
+@use "themeValues" as *;
+
+.theme {
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+
+  background: var(#{$theme+$background});
+  #{$theme}-author: "Ewsgit";
+  #{$theme}-name: "YourDash Classic Dark";
+  #{$theme}-version: "0.0.1";
+
+  ::-webkit-scrollbar {
+    width: var(#{$theme+$scrollbar+$width});
+    border-radius: 0;
+  }
+
+  ::-webkit-scrollbar-thumb {
+    border-radius: var(#{$theme+$scrollbar+$radius});
+  }
+}
+
+.level0 {
+  color: var(#{$theme+$color});
+
+  #{$theme+$color}: #ffffff;
+  #{$theme+$subcolor}: #bbbbbb;
+  #{$theme+$background}: #222222;
+  #{$theme+$accent}: #768ce7;
+  #{$theme+$border}: 1px solid #555555;
+  #{$theme+$radius}: 1rem;
+  #{$theme+$padding}: 1rem;
+  #{$theme+$gap}: 0.5rem;
+  #{$theme+$transition}: all 200ms ease-in-out;
+  #{$theme+$transition+$transition}: 200ms ease-in-out;
+  #{$theme+$separator+$size}: 1px;
+  #{$theme+$separator+$color}: #444444;
+  #{$theme+$scrollbar+$width}: 0.4rem;
+  #{$theme+$scrollbar+$radius}: 0.1rem;
+
+  // 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}: 1px 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}: 1px solid #666666;
+
+  // button
+  #{$theme}#{$button}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$background}: #444444;
+  #{$theme}#{$button}#{$border}: 1px solid #666666;
+  #{$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}: 1px 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}: 1px 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}: 1px solid #666666;
+  #{$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}: 1px;
+  #{$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}: 1px 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}: 1px solid #666666;
+
+  // button
+  #{$theme}#{$button}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$background}: #444444;
+  #{$theme}#{$button}#{$border}: 1px 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}: 1px 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}: 1px solid #666666;
+  #{$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}: 1px solid #666666;
+  #{$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}: 1px;
+  #{$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}: 1px 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}: 1px solid #666666;
+
+  // button
+  #{$theme}#{$button}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$background}: #555555;
+  #{$theme}#{$button}#{$border}: 1px 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;
+  #{$theme}#{$button}#{$transition}: all 0.2s ease-in-out;
+  // hover
+  #{$theme}#{$button}#{$hover}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$hover}#{$background}: #666666;
+  #{$theme}#{$button}#{$hover}#{$border}: 1px 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}: 1px 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}: 1px solid #666666;
+  #{$theme}#{$accent}: #768ce7;
+  #{$theme}#{$radius}: 1px;
+  #{$theme}#{$padding}: 0.5rem;
+  #{$theme}#{$gap}: 1rem;
+  #{$theme}#{$transition}: all 200ms ease-in-out;
+  #{$theme}#{$separator}#{$size}: 1px;
+  #{$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}: 1px 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}: 1px solid #666666;
+
+  // button
+  #{$theme}#{$button}#{$color}: #ffffff;
+  #{$theme}#{$button}#{$background}: #666666;
+  #{$theme}#{$button}#{$border}: 1px 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}: 1px 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}: 1px 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/dist/themeValues.scss

@@ -0,0 +1,49 @@
+/*!
+ * 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: "trans";
+$font: "font";
+$size: "size";
+$weight: "wgt";
+$family: "fam";
+$vertical: "vert";
+$horizontal: "horiz";
+$header: "hed";
+$separator: "sep";
+$height: "hei";
+$width: "wid";
+$heading: "hed";
+$input: "inp";
+$focus: "foc";
+$textbutton: "txb";
+$h1: "he1";
+$h2: "he2";
+$h3: "he3";
+$h4: "he4";
+$h5: "he5";
+$h6: "he6";
+$scrollbar: "scrlbr";
+
+
+$sizeMobile: 440px;
+$sizeLargeMobile: 560px;
+$sizeTablet: 768px;
+$sizeLargeTablet: 960px;
+$sizeSmallDesktop: 1200px;
+$sizeMediumDesktop: 1440px;
+$sizeLargeDesktop: 1920px;
+$sizeWideDesktop: 2560px;

package/package.json

@@ -1,39 +1,42 @@
-{
-  "name": "@yourdash/uikit",
-  "version": "1.0.35",
-  "license": "MIT",
-  "type": "module",
-  "private": false,
-  "packageManager": "yarn@1.22.22",
-  "engines": {
-    "node": ">=21.0.0"
-  },
-  "files": [
-    "dist/"
-  ],
-  "main": "./dist/main.js",
-  "types": "./dist/main.d.ts",
-  "scripts": {
-    "build": "vite build"
-  },
-  "author": "Ewsgit <ewsgit@duck.com>",
-  "peerDependencies": {
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "dependencies": {
-    "@vitejs/plugin-react": "^4.3.4",
-    "@yourdash/shared": "*",
-    "ajv": "8.17.1",
-    "glob": "^11.0.0",
-    "path": "^0.12.7",
-    "sass": "^1.78.0",
-    "typescript": "^5.6.2",
-    "vite": "^6.0.2",
-    "vite-plugin-dts": "^4.3.0",
-    "vite-plugin-dynamic-import": "^1.6.0",
-    "vite-plugin-lib-inject-css": "^2.1.1"
-  }
-}
+{
+  "name": "@yourdash/uikit",
+  "version": "1.0.37",
+  "license": "MIT",
+  "type": "module",
+  "private": false,
+  "packageManager": "yarn@1.22.22",
+  "engines": {
+    "node": ">=21.0.0"
+  },
+  "files": [
+    "dist/"
+  ],
+  "main": "./dist/main.js",
+  "types": "./dist/main.d.ts",
+  "exports": {
+    ".": "./dist/main.js"
+  },
+  "scripts": {
+    "build": "vite build"
+  },
+  "author": "Ewsgit <ewsgit@duck.com>",
+  "peerDependencies": {
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "@vitejs/plugin-react": "^4.3.4",
+    "@yourdash/shared": "*",
+    "ajv": "8.17.1",
+    "glob": "^11.0.0",
+    "path": "^0.12.7",
+    "sass": "^1.78.0",
+    "typescript": "^5.6.2",
+    "vite": "^6.0.2",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-dynamic-import": "^1.6.0",
+    "vite-plugin-lib-inject-css": "^2.1.1"
+  }
+}