refactor: Theme file

.fleet/settings.json

+{
+    "editor.formatOnSave": true
+}
\ No newline at end of file

package-lock.json

@@ -13,8 +13,7 @@
         "@zengenti/contensis-react-base": "^3.1.1-beta.11",
         "app-root-path": "^3.0.0",
         "react-router-hash-link": "^2.4.3",
-        "sitemap": "^7.1.1",
-        "styled-normalize": "^8.0.7"
+        "sitemap": "^7.1.1"
       },
       "devDependencies": {
         "@babel/cli": "^7.22.15",
@@ -26351,14 +26350,6 @@
         "react-is": ">= 16.8.0"
       }
     },
-    "node_modules/styled-normalize": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/styled-normalize/-/styled-normalize-8.1.0.tgz",
-      "integrity": "sha512-GzcJvU/mHI2FXjdnTysDpRZSG+5NPid/bNIR/QZ/vOwc8HuqvOlOMDVr457sTKN+M3Hd3s5fdv9tC1v0BhT1nA==",
-      "peerDependencies": {
-        "styled-components": "^4.0.0 || ^5.0.0 || ^6.0.0"
-      }
-    },
     "node_modules/stylelint": {
       "version": "13.13.1",
       "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.13.1.tgz",

package.json

@@ -119,7 +119,6 @@
     "@zengenti/contensis-react-base": "^3.1.1-beta.11",
     "app-root-path": "^3.0.0",
     "react-router-hash-link": "^2.4.3",
-    "sitemap": "^7.1.1",
-    "styled-normalize": "^8.0.7"
+    "sitemap": "^7.1.1"
   }
 }

src/app/theme/colors.ts

-export type ColorKeys = 'contensis' | 'zengenti';
-
-export type ColorsTheme = { [Key in ColorKeys]: string };
-
-export const colors: ColorsTheme = {
+export const colors = {
   contensis: '#37bfa7',
   zengenti: '#002033',
 };

src/app/theme/layout.ts

-export type SpacingKeys =
-  | 'xxxs'
-  | 'xxs'
-  | 'xs'
-  | 's'
-  | 'm'
-  | 'l'
-  | 'xl'
-  | 'xxl'
-  | 'xxxl';
-
-export type SpacingTheme = { [Key in SpacingKeys]: string };
-
 // To use spacers follow this pattern
 // Replace # with a value
 // ${theme.spacing.#}
-export const spacing: SpacingTheme = {
-  xxxs: '0.8rem',
-  xxs: '1.6rem',
-  xs: '2.4rem',
-  s: '3.2rem',
-  m: '4rem',
-  l: '6.4rem',
-  xl: '8rem',
-  xxl: '12rem',
-  xxxl: '14.4rem',
-};
-
-export type BreakpointKeys =
-  | 'mobile'
-  | 'largeMobile'
-  | 'tablet'
-  | 'laptop'
-  | 'desktop'
-  | 'largeDesktop';
-
-export type BreakpointValueContext = 'px';
-
-export type BreakpointWidthContext = 'min' | 'max';
-
-export type BreakpointsTheme = {
-  [Value in BreakpointValueContext]: { [Key in BreakpointKeys]: number };
-};
-
-export type MediaQueryTheme = {
-  [Width in BreakpointWidthContext]: { [Key in BreakpointKeys]: string };
+export const spacing = {
+  xxxs: '0.25rem',
+  xxs: '0.5rem',
+  xs: '1rem',
+  s: '1.5rem',
+  m: '2rem',
+  l: '2.5rem',
+  xl: '4rem',
+  xxl: '5rem',
+  xxxl: '7.5rem',
+  superxl: '15rem',
 };
 
 // bp are used as a reference for media queries
-// They can be utilised for between-breakpointss
-// @media (min-width: ${theme.breakpoints.px.mobile}) and (max-width: ${theme.breakpoints.px.tablet}) {
+// They can be utilised for between-breakpoints
+// @media (min-width: ${theme.breakpoints.mobile}) and (max-width: ${theme.breakpoints.tablet}) {
 //    Styles Here
 // }
-export const breakpoints: BreakpointsTheme = {
-  px: {
-    mobile: 480,
-    largeMobile: 640,
-    tablet: 768,
-    laptop: 992,
-    desktop: 1024,
-    largeDesktop: 1440,
-  },
+export const breakpoints = {
+  mobile: 30,
+  tablet: 48,
+  laptop: 62,
+  desktop: 68.75, // 1100px
+  largeDesktop: 90, // 1440px
 };
 
 // To use media queries follow this pattern
 // @media ${theme.mq.min/max[#] {
 //    Styles Here
 // }
-export const mq: MediaQueryTheme = {
+export const mq = {
   min: {
-    mobile: `only screen and (min-width: ${breakpoints.px.mobile}px)`,
-    largeMobile: `only screen and (min-width: ${breakpoints.px.largeMobile}px)`,
-    tablet: `only screen and (min-width: ${breakpoints.px.tablet}px)`,
-    laptop: `only screen and (min-width: ${breakpoints.px.laptop}px)`,
-    desktop: `only screen and (min-width: ${breakpoints.px.desktop}px)`,
-    largeDesktop: `only screen and (min-width: ${breakpoints.px.largeDesktop}px)`,
+    mobile: `only screen and (min-width: ${breakpoints.mobile}rem)`,
+    tablet: `only screen and (min-width: ${breakpoints.tablet}rem)`,
+    laptop: `only screen and (min-width: ${breakpoints.laptop}rem)`,
+    desktop: `only screen and (min-width: ${breakpoints.desktop}rem)`,
+    largeDesktop: `only screen and (min-width: ${breakpoints.largeDesktop}rem)`,
   },
   max: {
-    mobile: `only screen and (max-width: ${breakpoints.px.mobile}px)`,
-    largeMobile: `only screen and (max-width: ${breakpoints.px.largeMobile}px)`,
-    tablet: `only screen and (max-width: ${breakpoints.px.tablet}px)`,
-    laptop: `only screen and (max-width: ${breakpoints.px.laptop}px)`,
-    desktop: `only screen and (max-width: ${breakpoints.px.desktop}px)`,
-    largeDesktop: `only screen and (max-width: ${breakpoints.px.largeDesktop}px)`,
+    mobile: `only screen and (max-width: ${breakpoints.mobile}rem)`,
+    tablet: `only screen and (max-width: ${breakpoints.tablet}rem)`,
+    laptop: `only screen and (max-width: ${breakpoints.laptop}rem)`,
+    desktop: `only screen and (max-width: ${breakpoints.desktop}rem)`,
+    largeDesktop: `only screen and (max-width: ${breakpoints.largeDesktop}rem)`,
   },
 };
 
-export type GridKeys = 'default';
-
-export type GridContext = {
-  maxWidth: string;
-  gutter: string;
-};
-
-export type GridTheme = { [Key in GridKeys]: GridContext };
-
 // To help create global wrappers/containers
 // Define grid gutters and edge margins
-export const grid: GridTheme = {
+export const grid = {
   default: {
-    maxWidth: '140rem',
+    maxWidth: '90rem', // 1440px based on 16px base
     gutter: spacing.xs,
+    margin: spacing.xs,
   },
 };

src/app/theme/styled.d.ts

 import 'styled-components';
-import {
-  BreakpointsTheme,
-  GridTheme,
-  MediaQueryTheme,
-  SpacingTheme,
-} from './layout';
-import { ColorsTheme } from './colors';
+
+import { colors } from './colors';
+import { breakpoints, grid, mq, spacing } from '~/theme/layout';
 
 declare module 'styled-components' {
   export interface DefaultTheme {
-    colors: ColorsTheme;
-    breakpoints: BreakpointsTheme;
-    mq: MediaQueryTheme;
-    spacing: SpacingTheme;
-    grid: GridTheme;
+    colors: typeof colors;
+    breakpoints: typeof breakpoints;
+    mq: typeof mq;
+    spacing: typeof spacing;
+    grid: typeof grid;
   }
 }