feat: introduce neo- and bruthalism style

README.md

@@ -10,7 +10,9 @@ To collect together all design styles in one place.
 
 All design styles are written from scratch. This application does not use any UI component library. Currently, the app implements the following design styles:
 
-- Modern Flat
+- Modern Flat Dark
+- Modern Flat Light
+- Brutalism
 - Neubrutalism
 
 ## Used technologies

src/components/atoms/ImageTile/image-tile.styled.tsx

@@ -12,10 +12,13 @@ export const ImageTileContainer = styled.div`
  color: var(--font-color);
  font-weight: 800;
  cursor: pointer;
+ border: var(--standard-border);
+ border-radius: var(--standard-border-radius);
+ box-shadow: var(--modal-box-shadow);
 
  transition: filter 0.3s ease-in-out;
 
  &:hover {
- filter: brightness(0.6);
+ filter: brightness(0.75);
  }
 `;

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

@@ -12,24 +12,16 @@ export const ModalSettingsContent = ({
  handleThemeClick={() => handleThemeClick('modern-flat-dark')}
  />
  <ImageTile
- text="Modern flat dark"
+ text="Modern flat light"
  handleThemeClick={() => handleThemeClick('modern-flat-light')}
  />
- <ImageTile
- text="Glassmorphism"
- handleThemeClick={() => handleThemeClick('glassmorphism')}
- />
  <ImageTile
  text="Bruthalism"
  handleThemeClick={() => handleThemeClick('bruthalism')}
  />
  <ImageTile
- text="Claymorphism"
- handleThemeClick={() => handleThemeClick('claymorphism')}
- />
- <ImageTile
- text="Cyber punk"
- handleThemeClick={() => handleThemeClick('cyber-punk')}
+ text="Neobruthalism"
+ handleThemeClick={() => handleThemeClick('neobruthalism')}
  />
  </SettingsContainer>
  );

src/components/molecules/modal/TitleBar/title-bar.styled.tsx

@@ -11,8 +11,8 @@ export const ModalTitleBarContainer = styled.div`
 
 export const ModalTitleBarText = styled(Text)`
  font-size: 1.5em;
- color: white;
- font-weight: 700;
+ color: var(--font-color);
+ font-weight: 900;
 
  cursor: default;
 `;
@@ -24,6 +24,9 @@ export const ModalTitleBarIcon = styled(IconButton)`
  background-color: var(--primary-color);
  color: var(--font-color);
  transition: filter 0.3s ease-in-out;
+ border: var(--standard-border);
+ border-radius: var(--standard-border-radius);
+ box-shadow: var(--modal-box-shadow);
 
  &:hover {
  filter: brightness(0.7);

src/components/molecules/navbar/DesktopButton/desktop-button.styled.tsx

@@ -12,8 +12,10 @@ export const DesktopNavbarButtonContainer = styled.div`
  width: calc(100% - 1.5rem);
  justify-content: flex-start;
  transition: filter 0.3s ease-in-out;
-
+ border: var(--standard-border);
+ border-radius: var(--standard-border-radius);
  cursor: pointer;
+ box-shadow: var(--modal-box-shadow);
 
  &:hover {
  filter: brightness(0.9);

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

@@ -12,6 +12,8 @@ export const MainContentContainer = styled.div`
  margin: 0.75em auto;
  border-radius: var(--standard-border-radius);
  background-color: var(--primary-color);
+ border: var(--standard-border);
+ box-shadow: var(--modal-box-shadow);
 
  @media (max-width: 768px) {
  width: calc(100% - 2em);

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

@@ -9,8 +9,9 @@ export const SettingsModalStyle = styled.div`
  align-content: flex-start;
 
  background-color: var(--background-color);
- border-radius: 5px;
- box-shadow: 0 0 100px 0 #202020;
+ border-radius: var(--standard-border-radius);
+ box-shadow: var(--modal-box-shadow);
+ border: var(--standard-border);
 
  @media screen and (min-width: 768px) {
  height: 35em;

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

@@ -10,6 +10,9 @@ export const NavbarMenuButton = styled(IconButton)`
  background-color: var(--primary-button-color);
  color: var(--font-color);
  transition: filter 0.3s ease-in-out;
+ border: var(--standard-border);
+ border-radius: var(--standard-border-radius);
+ box-shadow: var(--modal-box-shadow);
 
  &:hover {
  filter: brightness(0.9);
@@ -28,6 +31,8 @@ export const MobileNavbar = styled.nav<{ expanded: boolean }>`
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
+ border: var(--standard-border);
+ box-shadow: var(--modal-box-shadow);
 
  @media screen and (min-width: 768px) {
  display: none;
@@ -41,7 +46,7 @@ export const MobileNavbarEmptySpace = styled.div`
 `;
 
 export const MobileNavbarTitle = styled.p`
- color: var(--primary-text-color);
+ color: var(--font-color);
  font-size: 1.5em;
  font-weight: 600;
 `;
@@ -62,6 +67,8 @@ export const DesktopNavbar = styled.nav<{ expanded: boolean }>`
  background-color: var(--primary-color);
  border-radius: var(--standard-border-radius);
  transition: width 0.3s ease-in-out;
+ border: var(--standard-border);
+ box-shadow: var(--modal-box-shadow);
 
  @media screen and (min-width: 768px) {
  display: flex;
@@ -80,7 +87,7 @@ export const DesktopNavbarTitleAndButton = styled.div`
 
 export const DesktopNavbarTitle = styled.p<{ expanded: boolean }>`
  display: ${(props) => (props.expanded ? 'block' : 'none')};
- color: var(--primary-text-color);
+ color: var(--font-color);
  text-overflow: clip; // This is needed to make the text wrap
  white-space: pre-line; // This is needed to make the text wrap
  font-size: 1em;
@@ -100,7 +107,7 @@ export const NavbarDivider = styled.div`
  height: 0.05em;
  width: calc(100% - 1.5em);
 
- background-color: var(--primary-button-color);
+ background-color: var(--divider-color);
 `;
 
 export const DesktopNavbarList = styled.div`

src/providers/Theme/theme.interface.ts

@@ -9,4 +9,4 @@ export type ThemeType =
  | 'glassmorphism'
  | 'bruthalism'
  | 'claymorphism'
- | 'cyber-punk';
+ | 'neobruthalism';

src/styles/index.css

@@ -2,3 +2,5 @@
 
 @import url('./layouts/modern-flat-dark.css');
 @import url('./layouts/modern-flat-light.css');
+@import url('./layouts/neobruthalism.css');
+@import url('./layouts/bruthalism.css');

src/styles/layouts/bruthalism.css

@@ -0,0 +1,13 @@
+[data-theme='bruthalism'] {
+ --background-color: #e06b6b;
+ --primary-color: #60c0bf;
+ --primary-text-color: #fcfbfc;
+ --primary-button-color: #517eed;
+
+ --divider-color: #1a161a;
+ --font-color: #1a161a;
+
+ --standard-border-radius: 0em;
+ --standard-border: 1px solid black;
+ --modal-box-shadow: 5px 5px 0 #000000;
+}

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

@@ -5,7 +5,9 @@
  --primary-text-color: #fcfbfc;
  --primary-button-color: #27292e;
 
+ --divider-color: #27292e;
  --font-color: #fcfbfc;
 
  --standard-border-radius: 0.75em;
+ --modal-box-shadow: 0 0 50px 0 #323232;
 }

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

@@ -1,10 +1,12 @@
 [data-theme='modern-flat-light'] {
- --background-color: #777cad;
- --primary-color: #bdc6d0;
- --primary-text-color: #fcfbfc;
- --primary-button-color: #777cad;
+ --background-color: #f3f2ed;
+ --primary-color: #ecdde6;
+ --primary-text-color: #1c181c;
+ --primary-button-color: #f3f2ed;
 
- --font-color: #fcfbfc;
+ --divider-color: #f3f2ed;
+ --font-color: #1c181c;
 
  --standard-border-radius: 0.75em;
+ --modal-box-shadow: 0 0 50px 0 #323232;
 }

src/styles/layouts/neobruthalism.css

@@ -0,0 +1,13 @@
+[data-theme='neobruthalism'] {
+ --background-color: #e06b6b;
+ --primary-color: #60c0bf;
+ --primary-text-color: #fcfbfc;
+ --primary-button-color: #517eed;
+
+ --divider-color: #1a161a;
+ --font-color: #1a161a;
+
+ --standard-border-radius: 0.75em;
+ --standard-border: 1px solid black;
+ --modal-box-shadow: 0;
+}