Merge pull request #1 from stromee/applying-colors

Applying colors
stromee · Aug 12, 2024 · dab216a · dab216a
2 parents dee28ad + 382c57a
commit dab216a
Show file tree

Hide file tree

Showing 42 changed files with 170 additions and 56 deletions.
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/fonts/OTF/Gilroy-Black.otf b/public/fonts/OTF/Gilroy-Black.otf
diff --git a/public/fonts/OTF/Gilroy-BlackItalic.otf b/public/fonts/OTF/Gilroy-BlackItalic.otf
diff --git a/public/fonts/OTF/Gilroy-Bold.otf b/public/fonts/OTF/Gilroy-Bold.otf
diff --git a/public/fonts/OTF/Gilroy-BoldItalic.otf b/public/fonts/OTF/Gilroy-BoldItalic.otf
diff --git a/public/fonts/OTF/Gilroy-Extrabold.otf b/public/fonts/OTF/Gilroy-Extrabold.otf
diff --git a/public/fonts/OTF/Gilroy-ExtraboldItalic.otf b/public/fonts/OTF/Gilroy-ExtraboldItalic.otf
diff --git a/public/fonts/OTF/Gilroy-Heavy.otf b/public/fonts/OTF/Gilroy-Heavy.otf
diff --git a/public/fonts/OTF/Gilroy-HeavyItalic.otf b/public/fonts/OTF/Gilroy-HeavyItalic.otf
diff --git a/public/fonts/OTF/Gilroy-Light.otf b/public/fonts/OTF/Gilroy-Light.otf
diff --git a/public/fonts/OTF/Gilroy-LightItalic.otf b/public/fonts/OTF/Gilroy-LightItalic.otf
diff --git a/public/fonts/OTF/Gilroy-Medium.otf b/public/fonts/OTF/Gilroy-Medium.otf
diff --git a/public/fonts/OTF/Gilroy-MediumItalic.otf b/public/fonts/OTF/Gilroy-MediumItalic.otf
diff --git a/public/fonts/OTF/Gilroy-Regular.otf b/public/fonts/OTF/Gilroy-Regular.otf
diff --git a/public/fonts/OTF/Gilroy-RegularItalic.otf b/public/fonts/OTF/Gilroy-RegularItalic.otf
diff --git a/public/fonts/OTF/Gilroy-Semibold.otf b/public/fonts/OTF/Gilroy-Semibold.otf
diff --git a/public/fonts/OTF/Gilroy-SemiboldItalic.otf b/public/fonts/OTF/Gilroy-SemiboldItalic.otf
diff --git a/public/fonts/OTF/Gilroy-Thin.otf b/public/fonts/OTF/Gilroy-Thin.otf
diff --git a/public/fonts/OTF/Gilroy-ThinItalic.otf b/public/fonts/OTF/Gilroy-ThinItalic.otf
diff --git a/public/fonts/OTF/Gilroy-UltraLight.otf b/public/fonts/OTF/Gilroy-UltraLight.otf
diff --git a/public/fonts/OTF/Gilroy-UltraLightItalic.otf b/public/fonts/OTF/Gilroy-UltraLightItalic.otf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-Black.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-Black.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-BlackItalic.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-BlackItalic.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-Bold.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-Bold.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-BoldItalic.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-BoldItalic.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-ExtraboldItalic.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-ExtraboldItalic.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-Heavy.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-Heavy.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-HeavyItalic (1).ttf b/public/fonts/TTF/AnyConv.com__Gilroy-HeavyItalic (1).ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-HeavyItalic.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-HeavyItalic.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-Light.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-Light.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-LightItalic.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-LightItalic.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-Medium.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-Medium.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-MediumItalic.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-MediumItalic.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-Regular.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-Regular.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-RegularItalic.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-RegularItalic.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-Semibold.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-Semibold.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-SemiboldItalic.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-SemiboldItalic.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-UltraLight.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-UltraLight.ttf
diff --git a/public/fonts/TTF/AnyConv.com__Gilroy-UltraLightItalic.ttf b/public/fonts/TTF/AnyConv.com__Gilroy-UltraLightItalic.ttf
diff --git a/src/login/KcPage.tsx b/src/login/KcPage.tsx
@@ -6,36 +6,38 @@ import { useI18n } from "./i18n";
 import DefaultPage from "keycloakify/login/DefaultPage";
 import Template from "keycloakify/login/Template";
 const UserProfileFormFields = lazy(
-    () => import("keycloakify/login/UserProfileFormFields")
+  () => import("keycloakify/login/UserProfileFormFields")
 );
 
 const doMakeUserConfirmPassword = true;
 
 export default function KcPage(props: { kcContext: KcContext }) {
-    const { kcContext } = props;
+  const { kcContext } = props;
 
-    const { i18n } = useI18n({ kcContext });
+  const { i18n } = useI18n({ kcContext });
 
-    return (
-        <Suspense>
-            {(() => {
-                switch (kcContext.pageId) {
-                    default:
-                        return (
-                            <DefaultPage
-                                kcContext={kcContext}
-                                i18n={i18n}
-                                classes={classes}
-                                Template={Template}
-                                doUseDefaultCss={true}
-                                UserProfileFormFields={UserProfileFormFields}
-                                doMakeUserConfirmPassword={doMakeUserConfirmPassword}
-                            />
-                        );
-                }
-            })()}
-        </Suspense>
-    );
+  return (
+    <Suspense>
+      {(() => {
+        switch (kcContext.pageId) {
+          default:
+            return (
+              <DefaultPage
+                kcContext={kcContext}
+                i18n={i18n}
+                classes={classes}
+                Template={Template}
+                doUseDefaultCss={true}
+                UserProfileFormFields={UserProfileFormFields}
+                doMakeUserConfirmPassword={doMakeUserConfirmPassword}
+              />
+            );
+        }
+      })()}
+    </Suspense>
+  );
 }
 
-const classes = {} satisfies { [key in ClassKey]?: string };
+const classes = {
+  kcFormPasswordVisibilityButtonClass: "",
+} satisfies { [key in ClassKey]?: string };
diff --git a/src/login/main.css b/src/login/main.css
@@ -1,64 +1,129 @@
+/* medium */
+@font-face {
+  font-family: "Gilroy-Medium";
+  src: url("/fonts/TTF/AnyConv.com__Gilroy-Medium.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+/* semibold */
+@font-face {
+  font-family: "Gilroy-SemiBold";
+  src: url("/fonts/TTF/AnyConv.com__Gilroy-SemiBold.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
 :root {
+  /* set default colors */
+  --stromee-green-100: #6ddc91;
+  --stromee-green-200: #84e1a2;
+  --stromee-green-300: #98e6b2;
+  --stromee-green-400: #adebc1;
+
+  --stromee-navy-100: #1d2445;
+  --stromee-navy-200: #1d2849;
+  --stromee-navy-300: #24325b;
+  --stromee-navy-400: #2c3c6d;
+
+  --background-color-primary: #f8f8f8;
+  --background-color-primary-dark: var(--stromee-navy-100);
+  --background-color-secondray: #ffffff;
+  --background-container-color: #1b4650;
+
+  --success-color: #6ddc91;
+  --info-color: #0ff;
+  --warning-color: #f0e7da;
+  --error-color: #b33349;
+
   /* change colors */
   /* background */
-  --pf-global--BackgroundColor--100: rgb(248, 248, 248);
+  --pf-global--BackgroundColor--100: var(--background-color-primary);
   --pf-global--BackgroundColor--150: #0ff;
   --pf-global--BackgroundColor--200: #0ff;
-  --pf-global--BackgroundColor--light-100: rgb(255, 255, 255);
+  /* input Field */
+  --pf-global--BackgroundColor--light-100: var(--background-color-secondray);
   --pf-global--BackgroundColor--light-200: #0ff;
   --pf-global--BackgroundColor--light-300: #0ff;
-  --pf-global--BackgroundColor--dark-100: rgb(29, 36, 69);
-  --pf-global--BackgroundColor--dark-200: #0ff;
-  --pf-global--BackgroundColor--dark-300: #0ff;
-  --pf-global--BackgroundColor--dark-400: #0ff;
+  /* dropdown:hover */
+  --pf-global--BackgroundColor--light-300: var(--background-color-secondray);
+  --pf-global--BackgroundColor--dark-100: var(--stromee-navy-100);
+  --pf-global--BackgroundColor--dark-200: var(--stromee-navy-200);
+  --pf-global--BackgroundColor--dark-300: var(--stromee-navy-300);
+  --pf-global--BackgroundColor--dark-400: var(--stromee-navy-400);
   --pf-global--BackgroundColor--dark-transparent-100: rgba(3, 3, 3, 0.62);
   --pf-global--BackgroundColor--dark-transparent-200: rgba(3, 3, 3, 0.32);
+  /* ------------------------------------------------------------------------------------------------------------------------------- */
   /* Text color */
-  --pf-global--Color--100: rgb(29, 36, 69);
-  --pf-global--Color--200: rgb(163, 166, 166);
-  --pf-global--Color--300: #0ff;
-  --pf-global--Color--400: #0ff;
+  /* Header */
+  --pf-global--Color--100: var(--stromee-navy-100);
+  /* language */
+  --pf-global--Color--200: var(--stromee-navy-200);
+  --pf-global--Color--300: var(--stromee-navy-300);
+  --pf-global--Color--400: var(--stromee-navy-400);
   /* on-primary */
-  --pf-global--Color--light-100: rgb(29, 36, 69);
-  --pf-global--Color--light-200: #0ff;
-  --pf-global--Color--light-300: #0ff;
+  --pf-global--Color--light-100: var(--stromee-navy-100);
+  --pf-global--Color--light-200: var(--stromee-navy-200);
+  --pf-global--Color--light-300: var(--stromee-navy-300);
+  --pf-global--Color--dark-100: var(--stromee-navy-100);
   /* icon */
-  --pf-global--Color--dark-100: #151515;
-  --pf-global--Color--dark-200: #6a6e73;
+  --pf-global--Color--dark-200: var(--stromee-navy-200);
+  /* ------------------------------------------------------------------------------------------------------------------------------- */
   /* active */
-  --pf-global--active-color--100: rgb(109, 220, 145);
-  --pf-global--active-color--200: #0ff;
-  --pf-global--active-color--300: #0ff;
-  --pf-global--active-color--400: rgb(109, 220, 145);
+  --pf-global--active-color--100: var(--stromee-green-100);
+  --pf-global--active-color--200: var(--stromee-green-200);
+  --pf-global--active-color--300: var(--stromee-green-300);
+  --pf-global--active-color--400: var(--stromee-green-400);
+  /* ------------------------------------------------------------------------------------------------------------------------------- */
   /* disabled */
   --pf-global--disabled-color--100: rgb(163, 166, 166);
-  --pf-global--disabled-color--200: rgb(248, 248, 248);
   --pf-global--disabled-color--300: #0ff;
+  /* ------------------------------------------------------------------------------------------------------------------------------- */
   /* primary */
-  --pf-global--primary-color--100: rgb(109, 220, 145);
-  --pf-global--primary-color--200: rgb(132, 225, 162);
-  --pf-global--primary-color--light-100: rgb(109, 220, 145);
-  --pf-global--primary-color--dark-100: rgb(49, 55, 81);
+  --pf-global--primary-color--100: var(--stromee-green-100);
+  --pf-global--primary-color--light-100: var(--stromee-green-100);
+  --pf-global--primary-color--dark-100: var(--stromee-navy-100);
+  /* ------------------------------------------------------------------------------------------------------------------------------- */
   /* secondary */
   --pf-global--secondary-color--100: #0ff;
+  /* ------------------------------------------------------------------------------------------------------------------------------- */
   /* default */
   --pf-global--default-color--100: #0ff;
-  --pf-global--default-color--200: #0ff;
   --pf-global--default-color--300: #0ff;
+  /* ------------------------------------------------------------------------------------------------------------------------------- */
   /* success */
-  --pf-global--success-color--100: rgb(109, 220, 145);
-  --pf-global--success-color--200: #0ff;
+  --pf-global--success-color--100: var(--stromee-green-100);
+  /* ------------------------------------------------------------------------------------------------------------------------------- */
   /* info */
   --pf-global--info-color--100: #0ff;
-  --pf-global--info-color--200: #0ff;
+  /* ------------------------------------------------------------------------------------------------------------------------------- */
   /* warning */
   --pf-global--warning-color--100: rgb(240, 231, 218);
-  --pf-global--warning-color--200: #0ff;
+  /* ------------------------------------------------------------------------------------------------------------------------------- */
   /* danger */
-  --pf-global--danger-color--100: rgb(179, 51, 73);
-  --pf-global--danger-color--200: rgb(179, 51, 73);
-  --pf-global--danger-color--300: rgb(179, 51, 73);
+  --pf-global--danger-color--100: var(--error-color);
+  --pf-global--danger-color--200: #0ff;
+  --pf-global--danger-color--300: #0ff;
+
+  /* change fontSizes */
+  --pf-global--FontSize--4xl: 2.25rem;
+  --pf-global--FontSize--3xl: 1.75rem;
+  --pf-global--FontSize--2xl: 1.5rem;
+  --pf-global--FontSize--xl: 1.25rem;
+  --pf-global--FontSize--lg: 1.125rem;
+  --pf-global--FontSize--md: 1rem;
+  --pf-global--FontSize--sm: 0.875rem;
+  --pf-global--FontSize--xs: 0.75rem;
+  --pf-global--FontWeight--light: 300;
+  --pf-global--FontWeight--normal: 400;
+  --pf-global--FontWeight--semi-bold: 700;
+  --pf-global--FontWeight--overpass--semi-bold: 500;
+  --pf-global--FontWeight--bold: 700;
+  --pf-global--FontWeight--overpass--bold: 600;
 }
+
+body {
+  font-family: "Gilroy-Medium", sans-serif;
+}
+
 .kcHtmlClass body {
   background: url(https://a.storyblok.com/f/116218/3840x960/5693b14f00/numbersfigures-desktop.png/m/)
     no-repeat left bottom fixed;
@@ -69,3 +134,48 @@
 .kcHeaderWrapperClass {
   color: var(--pf-global--Color--100);
 }
+
+.kcFormCardClass {
+  background-color: var(--pf-global--BackgroundColor--100);
+  border: none;
+  border-radius: 4px;
+  color: red;
+  color: var(--stromee-navy-100);
+}
+
+.kcInputClass {
+  border-radius: 1000px;
+  border: none;
+}
+
+.kcInputGroup {
+  background: none;
+  position: relative;
+}
+
+.kcFormPasswordVisibilityButtonClass {
+  background-color: var(--background-color-secondray);
+  border: none;
+  position: absolute;
+  right: 0;
+  top: 0;
+
+  border-radius: 1000px;
+  height: 100%;
+  aspect-ratio: 1;
+}
+
+.kcFormPasswordVisibilityButtonClass:hover {
+  box-shadow: 0px 2px 6px 0px rgba(29, 36, 69, 0.25);
+}
+
+.kcButtonClass {
+  border-radius: 1000px;
+  box-shadow: 0px 0px 5px 0px rgba(29, 36, 69, 0.1);
+}
+
+.kcButtonClass:hover {
+  /* 0px 2px 6px 0px #1d244540; */
+  box-shadow: 0px 2px 6px 0px rgba(29, 36, 69, 0.25);
+  background-color: var(--pf-global--primary-color--100);
+}
diff --git a/src/login/styles.css b/src/login/styles.css
@@ -0,0 +1,2 @@
+:root {
+}