feat: add glassmorphism theme

src/components/molecules/modal/SettingsContent/settings-content.tsx

@@ -42,6 +42,11 @@ export const ModalSettingsContent = ({
  text="Cardboard"
  handleThemeClick={() => handleClick('cardboard')}
  />
+ <ImageTile
+ isActive={currentTheme === 'glassmorphism'}
+ text="Glassmorphism"
+ handleThemeClick={() => handleClick('glassmorphism')}
+ />
  </SettingsContainer>
  );
 };

src/components/organisms/MainContent/main-content.styled.tsx

@@ -14,6 +14,7 @@ export const MainContentContainer = styled.div`
  background-color: var(--nav-and-content-bg-color);
  border: var(--standard-border);
  box-shadow: var(--container-box-shadow);
+ backdrop-filter: var(--backdrop-filter);
 
  @media (max-width: 768px) {
  width: calc(100% - 2em);

src/components/organisms/Modal/content/Settings/settings-modal.styled.tsx

@@ -12,6 +12,7 @@ export const SettingsModalStyle = styled.div`
  border-radius: var(--standard-border-radius);
  box-shadow: var(--modal-box-shadow);
  border: var(--standard-border);
+ backdrop-filter: var(--backdrop-filter);
 
  @media screen and (min-width: 768px) {
  height: 35em;

src/components/organisms/Navbar/navbar.styled.tsx

@@ -33,6 +33,7 @@ export const MobileNavbar = styled.nav<{ expanded: boolean }>`
  justify-content: space-between;
  border: var(--standard-border);
  box-shadow: var(--container-box-shadow);
+ backdrop-filter: var(--backdrop-filter);
 
  @media screen and (min-width: 768px) {
  display: none;
@@ -69,6 +70,7 @@ export const DesktopNavbar = styled.nav<{ expanded: boolean }>`
  transition: width 0.3s ease-in-out;
  border: var(--standard-border);
  box-shadow: var(--container-box-shadow);
+ backdrop-filter: var(--backdrop-filter);
 
  @media screen and (min-width: 768px) {
  display: flex;

src/styles/index.css

@@ -5,3 +5,4 @@
 @import url('./layouts/neobruthalism.css');
 @import url('./layouts/bruthalism.css');
 @import url('./layouts/cardboard.css');
+@import url('./layouts/glassmorphism.css');

src/styles/layouts/bruthalism.css

@@ -15,10 +15,10 @@
 
  /* --------- */
 
- --modal-box-shadow: 0;
  --container-box-shadow: 3px 3px 0 #000000;
-
  --standard-border-radius: 0;
+
  --standard-border: 1px solid black;
  --modal-box-shadow: 5px 5px 0 #000000;
+ --backdrop-filter: 0;
 }

src/styles/layouts/cardboard.css

@@ -14,9 +14,10 @@
 
  /* --------- */
 
- --modal-box-shadow: 0;
+ --modal-box-shadow: 0 0 20px #1a161a;
  --container-box-shadow: 0;
 
  --standard-border-radius: 0;
  --standard-border: 1px solid #1a161a;
+ --backdrop-filter: 0;
 }

src/styles/layouts/glassmorphism.css

@@ -0,0 +1,23 @@
+[data-theme='glassmorphism'] {
+ --background: url('/src/assets/backgrounds/glassmorphism.jpg');
+ --nav-and-content-bg-color: #ffffff30;
+ --modal-bg-color: #ffffff30;
+ --modal-cross-button-bg-color: #60c0bf;
+ --navbar-menu-button-bg-color: #ffffff30;
+ --navbar-settings-button-bg-color: #ffffff30;
+ --theme-tile-button-bg-color: #ffffff30;
+
+ --button-font-color: #1a161a;
+ --text-font-color: #1a161a;
+
+ --divider-color: #1a161a;
+
+ /* --------- */
+
+ --modal-box-shadow: 0 0 5px #ffffff40;
+ --container-box-shadow: 0 0 5px #ffffff40;
+
+ --standard-border-radius: 0.75em;
+ --standard-border: 1px solid #ffffff40;
+ --backdrop-filter: blur(5px);
+}

src/styles/layouts/modern-flat-dark.css

@@ -19,4 +19,5 @@
 
  --standard-border-radius: 0.75em;
  --standard-border: 0;
+ --backdrop-filter: 0;
 }

src/styles/layouts/modern-flat-light.css

@@ -21,4 +21,5 @@
 
  --standard-border-radius: 0.75em;
  --standard-border: 0;
+ --backdrop-filter: 0;
 }

src/styles/layouts/neobruthalism.css

@@ -19,4 +19,5 @@
 
  --standard-border-radius: 0.75em;
  --standard-border: 1px solid black;
+ --backdrop-filter: 0;
 }