@vc-shell/create-vc-app 1.0.290 → 1.0.291

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## [1.0.291](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.290...v1.0.291) (2024-09-23)
+
+
+### Features
+
+* support of css theming ([dba4097](https://github.com/VirtoCommerce/vc-shell/commit/dba409744b57dd1a999e009700e3b356fe230969))
+
+
+
 ## [1.0.290](https://github.com/VirtoCommerce/vc-shell/compare/v1.0.289...v1.0.290) (2024-09-13)
 
 

package/dist/index.js

@@ -6,14 +6,14 @@ import i from "node:path";
 import u from "node:fs";
 import { fileURLToPath as $e } from "node:url";
 import { cwd as je, argv as Ae, exit as ke } from "node:process";
-const we = "@vc-shell/create-vc-app", Oe = "Application scaffolding", Ne = "1.0.290", Me = "module", Te = "./dist/index.js", Ue = [
+const we = "@vc-shell/create-vc-app", Oe = "Application scaffolding", Ne = "1.0.291", Me = "module", Te = "./dist/index.js", Ue = [
   "dist"
 ], Ee = {
   build: "vite build && yarn postbuild",
   postbuild: "shx cp -R src/templates dist/"
 }, Le = {
   "@types/prompts": "^2.4.4",
-  "@vc-shell/ts-config": "^1.0.290",
+  "@vc-shell/ts-config": "^1.0.291",
   copyfiles: "^2.4.1",
   "cross-env": "^7.0.3",
   shx: "^0.3.4",

package/dist/templates/base/_package.json

@@ -23,9 +23,9 @@
     "@types/node": "^20.10.5",
     "@typescript-eslint/eslint-plugin": "^6.16.0",
     "@typescript-eslint/parser": "^6.16.0",
-    "@vc-shell/api-client-generator": "^1.0.290",
-    "@vc-shell/release-config": "^1.0.290",
-    "@vc-shell/ts-config": "^1.0.290",
+    "@vc-shell/api-client-generator": "^1.0.291",
+    "@vc-shell/release-config": "^1.0.291",
+    "@vc-shell/ts-config": "^1.0.291",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
@@ -54,8 +54,8 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.3",
-    "@vc-shell/config-generator": "^1.0.290",
-    "@vc-shell/framework": "^1.0.290",
+    "@vc-shell/config-generator": "^1.0.291",
+    "@vc-shell/framework": "^1.0.291",
     "@vueuse/core": "^10.7.1",
     "@vueuse/integrations": "^10.7.1",
     "cross-spawn": "^7.0.3",

package/dist/templates/base/src/main.ts

@@ -6,7 +6,6 @@ import { RouterView } from "vue-router";
 import {{ModuleNamePascalCase}} from "./modules/{{ModuleName}}";
 
 // Load required CSS
-import "./styles/index.scss";
 import "@fortawesome/fontawesome-free/css/all.min.css";
 import "roboto-fontface/css/roboto/roboto-fontface.css";
 import "@vc-shell/framework/dist/index.css";

package/dist/templates/base/src/pages/App.vue

@@ -34,73 +34,5 @@ console.debug(`Initializing App`);
 </script>
 
 <style lang="scss">
-:root {
-  --background-color: #f5f6f9;
-  --top-bar-color: #161d25;
-  --basic-black-color: #333333;
-  --tooltips-color: #a5a5a5;
-
-  --primary-color: #43b0e6;
-  --primary-color-hover: #319ed4;
-  --primary-color-disabled: #a9ddf6;
-
-  --special-color: #f89406;
-  --special-color-hover: #eb8b03;
-  --special-color-disabled: #fed498;
-
-  /* Layout variables */
-  --app-bar-background-color: var(--top-bar-color);
-  --app-bar-toolbar-icon-background-hover: #2e3d4e;
-  --app-bar-toolbar-item-width: 50px;
-  --app-bar-toolbar-icon-color: #7e8e9d;
-  --app-bar-account-info-role-color: #838d9a;
-
-  --background-color: #f2f2f2;
-  --top-bar-color: #ffffff;
-  --app-background: linear-gradient(180deg, #e4f5fb 5.06%, #e8f3f2 100%), linear-gradient(0deg, #e8f2f3, #e8f2f3),
-    #eef2f8;
-  --app-bar-background-color: #ffffff;
-  --app-bar-divider-color: #ffffff;
-  --app-bar-toolbar-item-width: 50px;
-  --app-bar-toolbar-icon-color: #7e8e9d;
-  --app-bar-toolbar-icon-color-hover: #465769;
-  --app-bar-toolbar-icon-background-hover: #ffffff;
-  --app-bar-account-info-name-color: #161d25;
-  --app-bar-account-info-role-color: #7e8e9d;
-}
-
-html,
-body,
-#app {
-  @apply tw-font-roboto tw-h-full tw-w-full tw-m-0 tw-fixed tw-overflow-hidden tw-overscroll-y-none;
-}
-
-body {
-  @apply tw-text-base;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-button,
-input,
-select,
-textarea {
-  @apply tw-font-roboto;
-}
-::-webkit-input-placeholder {
-  @apply tw-font-roboto;
-}
-:-moz-placeholder {
-  @apply tw-font-roboto;
-}
-::-moz-placeholder {
-  @apply tw-font-roboto;
-}
-:-ms-input-placeholder {
-  @apply tw-font-roboto;
-}
+@import "./../styles/index.scss";
 </style>

package/dist/templates/base/src/router/routes.ts

@@ -1,6 +1,6 @@
 import { RouteRecordRaw } from "vue-router";
 import App from "../pages/App.vue";
-import { Invite, Login, ResetPassword, useBladeNavigation } from "@vc-shell/framework";
+import { Invite, Login, ResetPassword, useBladeNavigation, ChangePasswordPage } from "@vc-shell/framework";
 // eslint-disable-next-line import/no-unresolved
 import whiteLogoImage from "/assets/logo-white.svg";
 // eslint-disable-next-line import/no-unresolved
@@ -40,6 +40,8 @@ export const routes: RouteRecordRaw[] = [
       userId: route.query.userId,
       token: route.query.token,
       userName: route.query.userName,
+      logo: whiteLogoImage,
+      background: bgImage,
     }),
   },
   {
@@ -50,6 +52,19 @@ export const routes: RouteRecordRaw[] = [
       userId: route.query.userId,
       token: route.query.token,
       userName: route.query.userName,
+      logo: whiteLogoImage,
+      background: bgImage,
+    }),
+  },
+  {
+    name: "ChangePassword",
+    path: "/changepassword",
+    component: ChangePasswordPage,
+    meta: {
+      forced: true,
+    },
+    props: (route) => ({
+      background: bgImage,
     }),
   },
   {

package/dist/templates/base/src/styles/base.scss

@@ -0,0 +1,38 @@
+@tailwind base;
+
+@layer base {
+  html,
+  body,
+  #app {
+    @apply tw-font-roboto tw-h-full tw-w-full tw-m-0 tw-fixed tw-overflow-hidden tw-overscroll-y-none;
+  }
+
+  body {
+    @apply tw-text-sm tw-text-[color:var(--base-text-color)];
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+button,
+input,
+select,
+textarea {
+  @apply tw-font-roboto;
+}
+::-webkit-input-placeholder {
+  @apply tw-font-roboto;
+}
+:-moz-placeholder {
+  @apply tw-font-roboto;
+}
+::-moz-placeholder {
+  @apply tw-font-roboto;
+}
+:-ms-input-placeholder {
+  @apply tw-font-roboto;
+}

package/dist/templates/base/src/styles/colors.scss

@@ -0,0 +1,10 @@
+/* Do not edit this file. Use custom.scss to add custom colors  */
+
+:root {
+  --base-text-color: var(--neutrals-950);
+  --base-error-color: var(--danger-500);
+  --base-border-color: var(--neutrals-200);
+  --app-background: var(--secondary-200);
+  --empty-grid-icon-color: var(--secondary-500);
+  --mobile-card-count-color: var(--primary-500);
+}

package/dist/templates/base/src/styles/custom.scss

@@ -0,0 +1,2 @@
+/* Custom styles.
+*/

package/dist/templates/base/src/styles/index.scss

@@ -1,3 +1,9 @@
-@tailwind base;
 @tailwind components;
+
+@import 'base';
+
+@import 'colors';
+
+@import 'custom';
+
 @tailwind utilities;

package/dist/templates/base/tailwind.config.ts

@@ -1,7 +1,11 @@
 import defaultConfig from "@vc-shell/framework/tailwind.config";
+import path from "path";
 
 export default {
   prefix: "tw-",
-  content: ["../../node_modules/@vc-shell/**/*.{vue,js,ts,jsx,tsx}", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+  content: [
+    path.join(path.dirname(require.resolve("@vc-shell/framework")), "**/*.{vue,js,ts,jsx,tsx}"),
+    "./src/**/*.{vue,js,ts,jsx,tsx}",
+  ],
   theme: defaultConfig.theme,
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vc-shell/create-vc-app",
   "description": "Application scaffolding",
-  "version": "1.0.290",
+  "version": "1.0.291",
   "type": "module",
   "bin": "./dist/index.js",
   "files": [
@@ -13,7 +13,7 @@
   },
   "devDependencies": {
     "@types/prompts": "^2.4.4",
-    "@vc-shell/ts-config": "^1.0.290",
+    "@vc-shell/ts-config": "^1.0.291",
     "copyfiles": "^2.4.1",
     "cross-env": "^7.0.3",
     "shx": "^0.3.4",