Add custom global theme options

.github/workflows/sync_template.yml

@@ -0,0 +1,31 @@
+name: Sync with Base PHA Template Repository
+
+on:
+  schedule:
+    # Runs at 00:00 UTC on the first day of every fourth month.
+    - cron: '0 0 1 */4 *'
+
+jobs:
+  sync_base_template:
+    runs-on: ubuntu-latest
+
+    steps:
+    - name: Checkout the current repository
+      uses: actions/checkout@v3
+
+    - name: Add remote base template repository
+      run: git remote add base https://github.com/input-output-hk/plutus-high-assurance-template.git
+
+    - name: Fetch latest changes from the base template repository
+      run: git fetch base
+
+    - name: Merge changes from the base template main branch
+      run: |
+        git checkout main
+        git merge --no-ff base/main -m "Sync FE template to base template changes"
+
+    - name: Push changes
+      uses: ad-m/github-push-action@master
+      with:
+        github_token: ${{ secrets.GITHUB_TOKEN }}
+        branch: main

starter_app/src/styles/colors.ts

@@ -0,0 +1,112 @@
+type ColorKey =
+  | "c100"
+  | "c98"
+  | "c95"
+  | "c90"
+  | "c80"
+  | "c70"
+  | "c60"
+  | "c50"
+  | "c40"
+  | "c30"
+  | "c20"
+  | "c10"
+  | "c0";
+
+type ColorType = Record<ColorKey, string>;
+
+export const primary: ColorType = {
+  c100: "#FFF",
+  c98: "#FBF8FF",
+  c95: "#F0EFFF",
+  c90: "#DEE0FF",
+  c80: "#BAC3FF",
+  c70: "#96A5FF",
+  c60: "#7187FF",
+  c50: "#546CE7",
+  c40: "#3952CD",
+  c30: "#1937B4",
+  c20: "#00208E",
+  c10: "#00115A",
+  c0: "#000",
+};
+
+export const secondary: ColorType = {
+  c100: "#FFF",
+  c98: "#FFF8F6",
+  c95: "#FFEDE9",
+  c90: "#FFDBD2",
+  c80: "#FFB4A2",
+  c70: "#FF8B6D",
+  c60: "#FF562A",
+  c50: "#DB3C0E",
+  c40: "#B32A00",
+  c30: "#891E00",
+  c20: "#611200",
+  c10: "#3C0800",
+  c0: "#000",
+};
+
+export const tertiary: ColorType = {
+  c100: "#FFF",
+  c98: "#FFF9EA",
+  c95: "#FFF2AC",
+  c90: "#F5E47F",
+  c80: "#D8C866",
+  c70: "#BBAC4E",
+  c60: "#A09236",
+  c50: "#85781E",
+  c40: "#6B5F00",
+  c30: "#504700",
+  c20: "#373100",
+  c10: "#201C00",
+  c0: "#000",
+};
+
+export const error: ColorType = {
+  c100: "#FFF",
+  c98: "#FFF8F7",
+  c95: "#FFEDEA",
+  c90: "#FFDAD5",
+  c80: "#FFB4AB",
+  c70: "#FF897D",
+  c60: "#FF5449",
+  c50: "#DE372F",
+  c40: "#BA1A1A",
+  c30: "#930009",
+  c20: "#690004",
+  c10: "#410002",
+  c0: "#000",
+};
+
+export const neutral: ColorType = {
+  c100: "#FFF",
+  c98: "#FDF8F8",
+  c95: "#F4F0EF",
+  c90: "#E5E2E1",
+  c80: "#C9C6C5",
+  c70: "#ADAAAA",
+  c60: "#939090",
+  c50: "#797676",
+  c40: "#605E5E",
+  c30: "#484646",
+  c20: "#313030",
+  c10: "#1C1B1B",
+  c0: "#000",
+};
+
+export const neutralVariant: ColorType = {
+  c100: "#FFF",
+  c98: "#FCF8F9",
+  c95: "#F3F0F1",
+  c90: "#E5E2E2",
+  c80: "#C9C6C6",
+  c70: "#ADAAAB",
+  c60: "#929091",
+  c50: "#787677",
+  c40: "#5F5E5F",
+  c30: "#474647",
+  c20: "#313031",
+  c10: "#1C1B1C",
+  c0: "#000",
+};

starter_app/src/styles/theme.tsx

@@ -0,0 +1,111 @@
+import { createTheme } from "@mui/material/styles";
+import { primary, secondary, tertiary, error, neutral, neutralVariant} from "./colors";
+
+export type Theme = typeof theme;
+
+export const theme = createTheme({
+    palette: {
+        primary: {
+          main: primary.c40,
+          container: primary.c90,
+          onContainer: primary.c10,
+          fixed: primary.c90,
+          fixedDim: primary.c80,
+          onFixed: primary.c10,
+          onFixedVariant: primary.c30,
+        }, 
+      secondary: {
+        main: secondary.c40, 
+        container: secondary.c90,
+        onContainer: secondary.c10,
+        fixed: secondary.c90,
+        fixedDim: secondary.c10,
+        onFixed: secondary.c10,
+        onFixedVariant: secondary.c30,
+        },
+      tertiary: {
+        main: tertiary.c40,
+        container: tertiary.c90,
+        onContainer: tertiary.c10,
+        fixed: tertiary.c90,
+        fixedDim: tertiary.c80,
+        onFixed: tertiary.c10,
+        onFixedVariant: tertiary.c30,
+      },
+      error: { 
+        main: error.c40, 
+        container: error.c90,
+        onContainer: error.c10,
+        },
+      surfaceDim: { 
+        main: "#DAD9E3", 
+        },
+      surface: { 
+        main: neutral.c98, 
+        },
+      surfaceBright: { 
+        main: neutral.c98, 
+        },
+      containerLowest: { 
+        main: neutral.c100, 
+        },
+      containerLow: { 
+        main: "#F4F2FD", 
+        },
+      container: { 
+        main: "#EEEDF7", 
+        },
+      containerHigh: { 
+        main: "#E8E7F2", 
+        },
+      containerHighest: { 
+        main: neutral.c90, 
+        },
+      onSurface: { 
+        main: neutral.c10, 
+        },
+        onVariant: { 
+        main: neutralVariant.c30, 
+        },
+      outline: { 
+        main: neutralVariant.c50, 
+        },
+      outlineVariant: { 
+      main: neutralVariant.c80,
+      },
+    },
+    typography: {
+      fontFamily: "Poppins, sans-serif",
+      fontSize: 16,
+      h1: {
+        fontSize: "2.986rem",
+      },
+      h2: {
+        fontSize: "2.488rem",
+      },
+      h3: {
+        fontSize: "2.074rem",
+      },
+      h4: {
+        fontSize: "1.728rem",
+      },
+      h5: {
+        fontSize: "1.44rem",
+      },
+      h6: {
+        fontSize: "1.2rem",
+      },
+      paragraphLarge: {
+        fontSize: '18px',
+      },
+      paragraphMedium: {
+        fontSize: '16px',
+      },
+      paragraphSmall: {
+        fontSize: '14px',
+      },
+      paragraphXSmall: {
+        fontSize: '14px',
+      }
+    },
+  });

starter_app/src/types/mui_style.d.ts

@@ -0,0 +1,77 @@
+
+import "@mui/material"
+
+declare module "@mui/material/styles" {
+  interface Palette {
+    tertiary: Palette["primary"];
+    surfaceDim: Palette["primary"];
+    surface: Palette["primary"];
+    surfaceBright: Palette["primary"];
+    containerLowest: Palette["primary"];
+    containerLow: Palette["primary"];
+    container: Palette["primary"];
+    containerHigh: Palette["primary"];
+    containerHighest: Palette["primary"];
+    onSurface: Palette["primary"];
+    onVariant: Palette["primary"];
+    outline: Palette["primary"];
+    outlineVariant: Palette["primary"];
+  }
+
+  interface PaletteOptions {
+    tertiary: PaletteOptions["primary"];
+    surfaceDim: PaletteOptions["primary"];
+    surface: PaletteOptions["primary"];
+    surfaceBright: PaletteOptions["primary"];
+    containerLowest: PaletteOptions["primary"];
+    containerLow: PaletteOptions["primary"];
+    container: PaletteOptions["primary"];
+    containerHigh: PaletteOptions["primary"];
+    containerHighest: PaletteOptions["primary"];
+    onSurface: PaletteOptions["primary"];
+    onVariant: PaletteOptions["primary"];
+    outline: PaletteOptions["primary"];
+    outlineVariant: PaletteOptions["primary"];
+  }
+
+  interface PaletteColor {
+    container?: string;
+    onContainer?: string;
+    fixed?: string;
+    fixedDim?: string;
+    onFixed?: string;
+    onFixedVariant?: string;
+  }
+
+  interface SimplePaletteColorOptions {
+    container?: string;
+    onContainer?: string;
+    fixed?: string;
+    fixedDim?: string;
+    onFixed?: string;
+    onFixedVariant?: string;
+  }
+
+  interface TypographyVariants {
+    paragraphXSmall?: React.CSSProperties;
+    paragraphSmall?: React.CSSProperties;
+    paragraphMedium?: React.CSSProperties;
+    paragraphLarge?: React.CSSProperties;
+  }
+
+  interface TypographyVariantsOptions {
+    paragraphXSmall?: React.CSSProperties;
+    paragraphSmall?: React.CSSProperties;
+    paragraphMedium?: React.CSSProperties;
+    paragraphLarge?: React.CSSProperties;
+  }
+}
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    paragraphXSmall: true;
+    paragraphSmall: true;
+    paragraphMedium: true;
+    paragraphLarge: true;
+  }
+}