added sepolia test network colors (#243)

* added sepolia test network colors

* fixed linting issue

* fixed default typo

Author: NidhiKJha

src/css/design-tokens.css

@@ -62,6 +62,7 @@
   --brand-colors-red-red800: #64141c;
   --brand-colors-red-red900: #3a0c10;
   --brand-colors-purple-purple500: #8b45b6;
+  --brand-colors-violet-violet300: #CFB5F0;
   --brand-colors-yellow-yellow000: #fffdf8;
   --brand-colors-yellow-yellow100: #fefcde;
   --brand-colors-yellow-yellow200: #fff2c5;
@@ -295,6 +296,8 @@
   --color-network-goerli-inverse: var(--brand-colors-white-white010);
   --color-network-localhost-default: var(--brand-colors-grey-grey200);
   --color-network-localhost-inverse: var(--brand-colors-white-white010);
+  --color-network-sepolia-default: var(--brand-colors-violet-violet300);
+  --color-network-sepolia-inverse: var(--brand-colors-white-white010);
   --color-flask-default: var(--brand-colors-purple-purple500);
   --color-flask-inverse: var(--brand-colors-white-white010);
 

src/figma/tokens.json

@@ -297,6 +297,13 @@
           "type": "color"
         }
       },
+      "violet": {
+        "violet300": {
+          "value": "#CFB5F0",
+          "description": "(HEX: #CFB5F0)",
+          "type": "color"
+        }
+      },
       "yellow": {
         "yellow000": {
           "value": "#FFFDF8",
@@ -1017,6 +1024,18 @@
             "description": "(white010: #FCFCFC) For elements used on top of networks/localhost/default. Used for text, icon or border",
             "type": "color"
           }
+        },
+        "sepolia": {
+          "default": {
+            "value": "#CFB5F0",
+            "description": "(violet300: #CFB5F0) For sepolia test network",
+            "type": "color"
+          },
+          "inverse": {
+            "value": "#FCFCFC",
+            "description": "(white010: #FCFCFC) For elements used on top of networks/sepolia/default. Used for text, icon or border",
+            "type": "color"
+          }
         }
       },
       "flask": {
@@ -1390,6 +1409,18 @@
             "description": "(white010: #FCFCFC) For elements used on top of networks/localhost/default. Used for text, icon or border",
             "type": "color"
           }
+        },
+        "sepolia": {
+          "default": {
+            "value": "#CFB5F0",
+            "description": "(violet300: #CFB5F0) For sepolia test network",
+            "type": "color"
+          },
+          "inverse": {
+            "value": "#FCFCFC",
+            "description": "(white010: #FCFCFC) For elements used on top of networks/sepolia/default. Used for text, icon or border",
+            "type": "color"
+          }
         }
       },
       "flask": {

src/js/themes/darkTheme/colors.test.ts

@@ -304,6 +304,18 @@ describe('Dark Theme Colors', () => {
     );
   });
 
+  it('js tokens for networks.sepolia.default matches figma tokens networks.sepolia.default', () => {
+    expect(importableColors.networks.sepolia.default).toStrictEqual(
+      designTokens.dark.colors.networks.sepolia.default.value,
+    );
+  });
+
+  it('js tokens for networks.sepolia.inverse matches figma tokens networks.sepolia.inverse', () => {
+    expect(importableColors.networks.sepolia.inverse).toStrictEqual(
+      designTokens.dark.colors.networks.sepolia.inverse.value,
+    );
+  });
+
   it('js tokens for flask.default matches figma tokens flask.default', () => {
     expect(importableColors.flask.default).toStrictEqual(
       designTokens.dark.colors.flask.default.value,

src/js/themes/darkTheme/colors.ts

@@ -88,6 +88,10 @@ export const colors: ThemeColors = {
       default: '#BBC0C5',
       inverse: '#FCFCFC',
     },
+    sepolia: {
+      default: '#CFB5F0',
+      inverse: '#FCFCFC',
+    },
   },
   flask: {
     default: '#8B45B6',

src/js/themes/lightTheme/colors.test.ts

@@ -304,6 +304,18 @@ describe('Light Theme Colors', () => {
     );
   });
 
+  it('js tokens for networks.sepolia.default matches figma tokens networks.sepolia.default', () => {
+    expect(importableColors.networks.sepolia.default).toStrictEqual(
+      designTokens.light.colors.networks.sepolia.default.value,
+    );
+  });
+
+  it('js tokens for networks.sepolia.inverse matches figma tokens networks.sepolia.inverse', () => {
+    expect(importableColors.networks.sepolia.inverse).toStrictEqual(
+      designTokens.light.colors.networks.sepolia.inverse.value,
+    );
+  });
+
   it('js tokens for flask.default matches figma tokens flask.default', () => {
     expect(importableColors.flask.default).toStrictEqual(
       designTokens.light.colors.flask.default.value,

src/js/themes/lightTheme/colors.ts

@@ -88,6 +88,10 @@ export const colors: ThemeColors = {
       default: '#BBC0C5',
       inverse: '#FCFCFC',
     },
+    sepolia: {
+      default: '#CFB5F0',
+      inverse: '#FCFCFC',
+    },
   },
   flask: {
     default: '#8B45B6',

src/js/themes/types.ts

@@ -249,7 +249,7 @@ export interface ThemeColors {
   networks: {
     goerli: {
       /**
-       * {string} networks.;goerliDefault - For goerli test network colored elements
+       * {string} networks.goerli.default - For goerli test network colored elements
        */
       default: string;
       /**
@@ -267,6 +267,16 @@ export interface ThemeColors {
        */
       inverse: string;
     };
+    sepolia: {
+      /**
+       * {string} networks.sepolia.default - For sepolia test network colored elements
+       */
+      default: string;
+      /**
+       * {string} networks.sepolia.inverse - For elements used on top of networks/sepolia/default
+       */
+      inverse: string;
+    };
   };
   flask: {
     /**