@vc-shell/framework 1.0.290 → 1.0.292

package/shared/pages/ResetPasswordPage/components/reset-password/ResetPassword.vue

@@ -1,14 +1,15 @@
 <template>
-  <div class="vc-app tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-m-0 vc-theme_light">
+  <div class="vc-reset-password-page">
     <VcLoading
       v-if="loading"
       active
     ></VcLoading>
 
     <VcLoginForm
-      logo="/assets/logo-white.svg"
-      background="/assets/background.jpg"
+      :logo="customization.logo"
+      :background="background"
       :title="t('PASSWORDRESET.TITLE')"
+      class="vc-reset-password-page__login-form"
     >
       <VcForm>
         <Field
@@ -22,7 +23,7 @@
             v-bind="field"
             ref="passwordField"
             v-model="form.password"
-            class="tw-mb-4 tw-mt-1"
+            class="vc-reset-password-page__input"
             :label="t('PASSWORDRESET.FIELDS.PASSWORD.LABEL')"
             :placeholder="t('PASSWORDRESET.FIELDS.PASSWORD.PLACEHOLDER')"
             type="password"
@@ -49,7 +50,7 @@
             v-bind="field"
             ref="confirmPasswordField"
             v-model="form.confirmPassword"
-            class="tw-mb-4"
+            class="vc-reset-password-page__input-small"
             :label="t('PASSWORDRESET.FIELDS.CONFIRM_PASSWORD.LABEL')"
             :placeholder="t('PASSWORDRESET.FIELDS.CONFIRM_PASSWORD.PLACEHOLDER')"
             :disabled="!form.tokenIsValid"
@@ -67,13 +68,14 @@
           >
           </VcInput>
         </Field>
-        <div class="tw-flex tw-justify-center tw-items-center tw-pt-2">
+        <div class="vc-reset-password-page__button-container">
           <span
             v-if="$isDesktop.value"
-            class="tw-grow tw-basis-0"
+            class="vc-reset-password-page__spacer"
           ></span>
           <vc-button
             :disabled="disableButton"
+            class="vc-reset-password-page__submit-button"
             @click="resetPassword"
           >
             {{ t("PASSWORDRESET.SAVE_PASSWORD") }}
@@ -83,10 +85,11 @@
         <VcHint
           v-for="error in form.errors"
           :key="error"
-          class="tw-mt-3 !tw-text-[#f14e4e]"
+          class="vc-reset-password-page__error-hint"
+          style="color: #f14e4e"
         >
           <!-- TODO: stylizing-->
-          {{ t(`PASSWORDRESET.ERRORS.${+error}`) }}
+          {{ t(`PASSWORDRESET.ERRORS.${error}`) }}
         </VcHint>
       </VcForm>
     </VcLoginForm>
@@ -97,19 +100,28 @@
 import { reactive, onMounted, computed } from "vue";
 import { useRouter } from "vue-router";
 import { Field, useForm } from "vee-validate";
-import { useUser } from "./../../../../../core/composables";
+import { useUser, useSettings } from "./../../../../../core/composables";
 import { useI18n } from "vue-i18n";
 
-const props = defineProps<{
-  userId: string;
-  userName: string;
-  token: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    userId: string;
+    userName: string;
+    token: string;
+    logo: string;
+    background: string;
+  }>(),
+  {
+    background: "/assets/background.jpg",
+    logo: "/assets/logo-white.svg",
+  },
+);
 
 const { validateToken, validatePassword, resetPasswordByToken, signIn, loading } = useUser();
 const router = useRouter();
 const { t } = useI18n({ useScope: "global" });
 const { validate: veeValidate } = useForm({ validateOnMount: false });
+const { uiSettings, loading: customizationLoading } = useSettings();
 
 const form = reactive<{
   isValid: boolean;
@@ -163,4 +175,44 @@ const resetPassword = async () => {
     }
   }
 };
+
+const customization = computed(() => {
+  return {
+    logo: !customizationLoading.value ? uiSettings.value?.logo || props.logo : "",
+  };
+});
 </script>
+
+<style lang="scss">
+:root {
+  --reset-password-error-color: var(--base-error-color, var(--danger-500));
+}
+
+.vc-reset-password-page {
+  @apply tw-w-full tw-h-full tw-box-border tw-flex tw-flex-col tw-m-0;
+}
+
+.vc-reset-password-page__input {
+  @apply tw-mb-4 tw-mt-1;
+}
+
+.vc-reset-password-page__input-small {
+  @apply tw-mb-4;
+}
+
+.vc-reset-password-page__button-container {
+  @apply tw-flex tw-justify-center tw-items-center tw-pt-2;
+}
+
+.vc-reset-password-page__spacer {
+  @apply tw-grow tw-basis-0;
+}
+
+.vc-reset-password-page__submit-button {
+  @apply tw-w-28;
+}
+
+.vc-reset-password-page__error-hint {
+  @apply tw-mt-3 tw-text-[color:var(--reset-password-error-color)] #{!important};
+}
+</style>

package/tailwind.config.ts

@@ -1,26 +1,292 @@
 /** @type { import('tailwindcss').Config } */
+
+const primaryColors = {
+  DEFAULT: "rgb(from var(--primary-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--primary-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--primary-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--primary-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--primary-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--primary-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--primary-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--primary-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--primary-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--primary-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--primary-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--primary-950) r g b / <alpha-value>)",
+};
+
+const secondaryColors = {
+  DEFAULT: "rgb(from var(--secondary-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--secondary-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--secondary-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--secondary-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--secondary-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--secondary-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--secondary-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--secondary-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--secondary-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--secondary-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--secondary-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--secondary-950) r g b / <alpha-value>)",
+};
+
+const infoColors = {
+  DEFAULT: "rgb(from var(--info-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--info-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--info-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--info-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--info-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--info-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--info-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--info-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--info-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--info-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--info-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--info-950) r g b / <alpha-value>)",
+};
+
+const successColors = {
+  DEFAULT: "rgb(from var(--success-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--success-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--success-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--success-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--success-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--success-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--success-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--success-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--success-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--success-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--success-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--success-950) r g b / <alpha-value>)",
+};
+
+const warningColors = {
+  DEFAULT: "rgb(from var(--warning-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--warning-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--warning-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--warning-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--warning-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--warning-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--warning-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--warning-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--warning-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--warning-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--warning-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--warning-950) r g b / <alpha-value>)",
+};
+
+const dangerColors = {
+  DEFAULT: "rgb(from var(--danger-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--danger-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--danger-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--danger-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--danger-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--danger-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--danger-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--danger-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--danger-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--danger-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--danger-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--danger-950) r g b / <alpha-value>)",
+};
+
+const neutralColors = {
+  DEFAULT: "rgb(from var(--neutral-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--neutral-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--neutral-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--neutral-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--neutral-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--neutral-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--neutral-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--neutral-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--neutral-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--neutral-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--neutral-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--neutral-950) r g b / <alpha-value>)",
+};
+
+const accentColors = {
+  DEFAULT: "rgb(from var(--accent-500) r g b / <alpha-value>)",
+  50: "rgb(from var(--accent-50) r g b / <alpha-value>)",
+  100: "rgb(from var(--accent-100) r g b / <alpha-value>)",
+  200: "rgb(from var(--accent-200) r g b / <alpha-value>)",
+  300: "rgb(from var(--accent-300) r g b / <alpha-value>)",
+  400: "rgb(from var(--accent-400) r g b / <alpha-value>)",
+  500: "rgb(from var(--accent-500) r g b / <alpha-value>)",
+  600: "rgb(from var(--accent-600) r g b / <alpha-value>)",
+  700: "rgb(from var(--accent-700) r g b / <alpha-value>)",
+  800: "rgb(from var(--accent-800) r g b / <alpha-value>)",
+  900: "rgb(from var(--accent-900) r g b / <alpha-value>)",
+  950: "rgb(from var(--accent-950) r g b / <alpha-value>)",
+};
+
+const additionalColors = {
+  50: "rgb(from var(--additional-50) r g b / <alpha-value>)",
+  950: "rgb(from var(--additional-950) r g b / <alpha-value>)",
+};
+
+const colors = {
+  transparent: "transparent",
+  current: "currentColor",
+  inherit: "inherit",
+
+  primary: primaryColors,
+  secondary: secondaryColors,
+  info: infoColors,
+  success: successColors,
+  warning: warningColors,
+  danger: dangerColors,
+  neutral: neutralColors,
+  accent: accentColors,
+  additional: additionalColors,
+};
+
 export default {
   prefix: "tw-",
   theme: {
     fontFamily: {
       roboto: ["Roboto", "sans-serif"],
     },
+    // fontSize: {
+    //   xs: ["11px", "14px"],
+    //   sm: ["12px", "16px"],
+    //   base: ["13px", "18px"],
+    //   lg: ["14px", "19px"],
+    //   xl: ["16px", "22px"],
+    //   "2xl": ["23px", "28px"],
+    // },
+    // lineHeight: {
+    //   xs: "14px",
+    //   sm: "16px",
+    //   base: "18px",
+    //   lg: "19px",
+    //   xl: "22px",
+    //   "2xl": "28px",
+    //   header: "28px",
+    // },
+    // colors,
+
+    // backgroundColor: {
+    //   ...colors,
+    // },
+
+    // textColor: {
+    //   ...colors,
+    // },
+
+    // textDecorationColor: {
+    //   ...colors,
+    // },
+
+    // borderColor: {
+    //   ...colors,
+    //   DEFAULT: neutralColors[200],
+    // },
+
+    // divideColor: {
+    //   ...colors,
+    //   DEFAULT: neutralColors[200],
+    // },
+
+    // outlineColor: {
+    //   ...colors,
+    //   DEFAULT: primaryColors[100],
+    // },
+
+    // ringColor: {
+    //   ...colors,
+    //   DEFAULT: primaryColors[100],
+    // },
+
+    // boxShadowColor: {
+    //   ...colors,
+    // },
+
     fontSize: {
-      xs: ["11px", "14px"],
-      sm: ["12px", "16px"],
-      base: ["13px", "18px"],
-      lg: ["14px", "19px"],
-      xl: ["16px", "22px"],
-      "2xl": ["23px", "28px"],
-    },
-    lineHeight: {
-      xs: "14px",
-      sm: "16px",
-      base: "18px",
-      lg: "19px",
-      xl: "22px",
-      "2xl": "28px",
-      header: "28px",
+      xxs: [
+        "0.625rem", //10px
+        {
+          lineHeight: "0.75rem", //12px
+        },
+      ],
+      xs: [
+        "0.75rem", //12px
+        {
+          lineHeight: "0.875rem", //14px
+        },
+      ],
+      sm: [
+        "0.875rem", //14px
+        {
+          lineHeight: "1rem", //18px
+        },
+      ],
+      s: [
+        "0.875rem", //14px
+        {
+          lineHeight: "1rem", //18px
+        },
+      ],
+      base: [
+        "1rem", //16px
+        {
+          lineHeight: "1.25rem", //20px
+        },
+      ],
+      lg: [
+        "1.125rem", //18px
+        {
+          lineHeight: "1.375rem", //22px
+        },
+      ],
+      xl: [
+        "1.25rem", //20px
+        {
+          lineHeight: "1.75rem", //28px
+        },
+      ],
+      "2xl": [
+        "1.5rem", //24px
+        {
+          lineHeight: "2rem", //32px
+        },
+      ],
+      "3xl": [
+        "1.875rem", //30px
+        {
+          lineHeight: "2.25rem", //36px
+        },
+      ],
+      "4xl": [
+        "2.25rem", //36px
+        {
+          lineHeight: "2.5rem", //40px
+        },
+      ],
+      "5xl": [
+        "3rem", //48px
+        {
+          lineHeight: "3rem", //48px
+        },
+      ],
+      "6xl": [
+        "3.75rem", //60px
+        {
+          lineHeight: "3.75rem", //60px
+        },
+      ],
+      "7xl": [
+        "4.5rem", //72px
+        {
+          lineHeight: "4.5rem", //72px
+        },
+      ],
+      "8xl": [
+        "6rem", //96px
+        {
+          lineHeight: "6rem", //96px
+        },
+      ],
     },
     extend: {
       keyframes: {
@@ -48,3 +314,5 @@ export default {
   },
   content: ["./ui/components/**/*.{vue,js,ts,jsx,tsx}", "./shared/**/*.{vue,js,ts,jsx,tsx}"],
 };
+
+export const content = ["../../node_modules/@vc-shell/**/*.{vue,js,ts,jsx,tsx}"];

package/ui/components/atoms/vc-badge/vc-badge.vue

@@ -7,19 +7,16 @@
       'vc-badge--medium': size === 'm',
     }"
   >
-    <div class="tw-flex tw-relative">
+    <div class="vc-badge__content">
       <slot name="default"></slot>
       <div
         v-if="typeof content !== 'undefined'"
         ref="badge"
-        class="vc-badge__badge tw-absolute tw-inline-flex tw-justify-center tw-items-center tw-text-center tw-indent-0 tw-rounded-[var(--badge-border-radius)] tw-text-[13px] tw-leading-[13px] tw-font-normal tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200"
+        class="vc-badge__badge"
         :class="{
-          'tw-bg-[color:var(--badge-background-color-active)] tw-text-[color:var(--badge-text-color-active)] tw-border-[color:var(--badge-border-color-active)]':
-            active,
-          'tw-cursor-pointer hover:tw-bg-[color:var(--badge-background-color-active)] hover:tw-text-[color:var(--badge-text-color-hover)] hover:tw-border-[color:var(--badge-border-color-hover)]':
-            clickable,
-          'cursor-not-allowed tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)]':
-            disabled,
+          'vc-badge__badge--active': active,
+          'vc-badge__badge--clickable': clickable,
+          'vc-badge__badge--disabled': disabled,
         }"
         @click="onClick"
       >
@@ -64,25 +61,24 @@ function onClick(): void {
 
 <style lang="scss">
 :root {
-  --badge-background-color: #ffffff;
-  --badge-background-color-hover: #fafafa;
-  --badge-background-color-active: #fafafa;
-  --badge-background-color-disabled: #f2f2f2;
+  --badge-background-color: var(--additional-50);
+  --badge-background-color-hover: var(--neutrals-200);
+  --badge-background-color-active: var(--neutrals-200);
+  --badge-background-color-disabled: var(--neutrals-300);
 
-  --badge-text-color: #455668;
-  --badge-text-color-hover: #3b4959;
-  --badge-text-color-active: #3b4959;
-  --badge-text-color-disabled: #8296ab;
+  --badge-text-color: var(--neutrals-700);
+  --badge-text-color-hover: var(--neutrals-800);
+  --badge-text-color-active: var(--neutrals-800);
+  --badge-text-color-disabled: var(--neutrals-500);
 
   --badge-border-radius: 9999px;
 
-  --badge-border-color: #a1bfd4;
-  --badge-border-color-hover: #8fb3cc;
-  --badge-border-color-active: #8fb3cc;
-  --badge-border-color-disabled: #b2cbdc;
+  --badge-border-color: var(--primary-400);
+  --badge-border-color-hover: var(--primary-300);
+  --badge-border-color-active: var(--primary-300);
+  --badge-border-color-disabled: var(--primary-200);
 
   --badge-width-small: 18px;
-
   --badge-width-medium: 18px;
 
   --badge-padding-small: 0px 4px;
@@ -105,10 +101,29 @@ $sizes: small, medium;
         padding: var(--badge-padding-#{$size});
         top: var(--badge-distance-top-#{$size});
         right: var(--badge-distance-right-#{$size});
-        font-size: 0.75rem;
-        line-height: 1.35;
+        @apply tw-text-xs tw-leading-snug;
       }
     }
   }
 }
+
+.vc-badge__content {
+  @apply tw-flex tw-relative;
+}
+
+.vc-badge__badge {
+  @apply tw-absolute tw-inline-flex tw-justify-center tw-items-center tw-text-center tw-indent-0 tw-rounded-full tw-font-normal tw-bg-[color:var(--badge-background-color)] tw-text-[color:var(--badge-text-color)] tw-border tw-border-solid tw-border-[color:var(--badge-border-color)] tw-transition tw-duration-200;
+}
+
+.vc-badge__badge--active {
+  @apply tw-bg-[color:var(--badge-background-color-active)] tw-text-[color:var(--badge-text-color-active)] tw-border-[color:var(--badge-border-color-active)];
+}
+
+.vc-badge__badge--clickable {
+  @apply tw-cursor-pointer hover:tw-bg-[color:var(--badge-background-color-hover)] hover:tw-text-[color:var(--badge-text-color-hover)] hover:tw-border-[color:var(--badge-border-color-hover)];
+}
+
+.vc-badge__badge--disabled {
+  @apply tw-cursor-not-allowed tw-bg-[color:var(--badge-background-color-disabled)] tw-text-[color:var(--badge-text-color-disabled)] tw-border-[color:var(--badge-border-color-disabled)] hover:tw-bg-[color:var(--badge-background-color-disabled)] hover:tw-text-[color:var(--badge-text-color-disabled)] hover:tw-border-[color:var(--badge-border-color-disabled)];
+}
 </style>