@sproutsocial/racine 12.2.0 → 12.4.1

package/dist/themes/extendedThemes/sproutTheme/light/theme.scss

@@ -1,822 +1,854 @@
 $theme: (
-  __esModule: true,
-  analytics: (
-    trend: (
-      positive: #067c7c,
-      neutral: #364141,
-      negative: #364141
+  "__esModule": true,
+  "analytics": (
+    "trend": (
+      "positive": #067c7c,
+      "neutral": #364141,
+      "negative": #364141
+    ),
+    "overlay": (
+      "background": (
+        "base": rgba(255,255,255,0.8)
+      )
     )
   ),
-  datePicker: (
-    comparison: (
-      background: (
-        base: #b0b6b7
+  "datePicker": (
+    "comparison": (
+      "background": (
+        "base": #b0b6b7
       ),
-      text: (
-        base: #364141
+      "text": (
+        "base": #364141
       )
     )
   ),
-  default: (
-    breakpoints: (900px, 1200px, 1500px, 1800px),
-    colors: (
-      app: (
-        background: (
-          base: #f3f4f4
+  "default": (
+    "breakpoints": (900px, 1200px, 1500px, 1800px),
+    "colors": (
+      "app": (
+        "background": (
+          "base": #f3f4f4
         )
       ),
-      container: (
-        background: (
-          base: #FFFFFF,
-          success: #d7f4d7,
-          warning: #fdefcd,
-          error: #ffd5d2,
-          info: #dcf2ff,
-          opportunity: #eaeaf9,
-          danger: #ffd5d2,
-          decorative: (
-            green: #d7f4d7,
-            blue: #dcf2ff,
-            purple: #eaeaf9,
-            yellow: #fdefcd,
-            orange: #fcdccc,
-            red: #ffd5d2,
-            neutral: #f3f4f4
+      "container": (
+        "background": (
+          "base": #FFFFFF,
+          "success": #d7f4d7,
+          "warning": #fdefcd,
+          "error": #ffd5d2,
+          "info": #dcf2ff,
+          "opportunity": #eaeaf9,
+          "danger": #ffd5d2,
+          "decorative": (
+            "green": #d7f4d7,
+            "blue": #dcf2ff,
+            "purple": #eaeaf9,
+            "yellow": #fdefcd,
+            "orange": #fcdccc,
+            "red": #ffd5d2,
+            "neutral": #f3f4f4
           ),
-          selected: #364141,
-          positive_sentiment: #3896e3,
-          negative_sentiment: #f76054,
-          neutral_sentiment: #c8cccc
-        ),
-        border: (
-          base: #dee1e1,
-          success: #59cb59,
-          warning: #ffbc00,
-          error: #ed4c42,
-          danger: #ed4c42,
-          info: #2b87d3,
-          opportunity: #9180f4,
-          decorative: (
-            green: #59cb59,
-            blue: #2b87d3,
-            purple: #9180f4,
-            yellow: #ffbc00,
-            orange: #f57d33,
-            red: #ed4c42,
-            neutral: #929a9b
+          "selected": #364141,
+          "positive_sentiment": #3896e3,
+          "negative_sentiment": #f76054,
+          "neutral_sentiment": #c8cccc
+        ),
+        "border": (
+          "base": #dee1e1,
+          "success": #59cb59,
+          "warning": #ffbc00,
+          "error": #ed4c42,
+          "danger": #ed4c42,
+          "info": #2b87d3,
+          "opportunity": #9180f4,
+          "decorative": (
+            "green": #59cb59,
+            "blue": #2b87d3,
+            "purple": #9180f4,
+            "yellow": #ffbc00,
+            "orange": #f57d33,
+            "red": #ed4c42,
+            "neutral": #929a9b
           ),
-          selected: #364141
+          "selected": #364141
         )
       ),
-      button: (
-        primary: (
-          background: (
-            base: #2079c3,
-            hover: #116daa,
-            active: #0c5689
+      "button": (
+        "primary": (
+          "background": (
+            "base": #2079c3,
+            "hover": #116daa,
+            "active": #0c5689
           ),
-          border: (
-            base: transparent
+          "border": (
+            "base": transparent
           ),
-          text: (
-            base: #FFFFFF,
-            hover: #FFFFFF
+          "text": (
+            "base": #FFFFFF,
+            "hover": #FFFFFF
           )
         ),
-        secondary: (
-          background: (
-            base: transparent,
-            hover: #364141,
-            active: #273333
+        "secondary": (
+          "background": (
+            "base": transparent,
+            "hover": #364141,
+            "active": #273333
           ),
-          border: (
-            base: #364141
+          "border": (
+            "base": #364141
           ),
-          text: (
-            base: #364141,
-            hover: #FFFFFF
+          "text": (
+            "base": #364141,
+            "hover": #FFFFFF
           )
         ),
-        pill: (
-          background: (
-            base: transparent,
-            hover: #f3f4f4,
-            active: #dee1e1
+        "pill": (
+          "background": (
+            "base": transparent,
+            "hover": #f3f4f4,
+            "active": #dee1e1
           ),
-          border: (
-            base: transparent
+          "border": (
+            "base": transparent
           ),
-          text: (
-            base: #364141,
-            hover: #273333
+          "text": (
+            "base": #364141,
+            "hover": #273333
           )
         ),
-        destructive: (
-          background: (
-            base: #c63434,
-            hover: #992222,
-            active: #6d1313
+        "destructive": (
+          "background": (
+            "base": #c63434,
+            "hover": #992222,
+            "active": #6d1313
           ),
-          border: (
-            base: transparent
+          "border": (
+            "base": transparent
           ),
-          text: (
-            base: #FFFFFF,
-            hover: #FFFFFF
+          "text": (
+            "base": #FFFFFF,
+            "hover": #FFFFFF
           )
         ),
-        placeholder: (
-          background: (
-            base: transparent,
-            hover: #FFFFFF,
-            active: #FFFFFF
+        "placeholder": (
+          "background": (
+            "base": transparent,
+            "hover": #FFFFFF,
+            "active": #FFFFFF
           ),
-          border: (
-            base: #929a9b
+          "border": (
+            "base": #929a9b
           ),
-          text: (
-            base: #2079c3,
-            hover: #116daa
+          "text": (
+            "base": #2079c3,
+            "hover": #116daa
           )
         ),
-        unstyled: (
-          background: (
-            base: transparent
+        "unstyled": (
+          "background": (
+            "base": transparent
           ),
-          border: (
-            base: transparent
+          "border": (
+            "base": transparent
           ),
-          text: (
-            base: #515e5f,
-            hover: #273333
+          "text": (
+            "base": #515e5f,
+            "hover": #273333
           )
         )
       ),
-      link: (
-        base: #116daa,
-        hover: #0c5689
-      ),
-      text: (
-        headline: #273333,
-        subtext: #515e5f,
-        body: #364141,
-        inverse: #FFFFFF,
-        error: #c63434,
-        background: (
-          highlight: #ffe99a
+      "link": (
+        "base": #116daa,
+        "hover": #0c5689
+      ),
+      "text": (
+        "headline": #273333,
+        "subtext": #515e5f,
+        "body": #364141,
+        "inverse": #FFFFFF,
+        "error": #c63434,
+        "background": (
+          "highlight": #ffe99a
         )
       ),
-      icon: (
-        base: #364141,
-        inverse: #FFFFFF,
-        success: #006b40,
-        warning: #944c0c,
-        error: #992222,
-        danger: #992222,
-        info: #0c5689,
-        opportunity: #5e4eba,
-        applied: #2079c3,
-        positive_sentiment: #2079c3,
-        negative_sentiment: #ed4c42,
-        neutral_sentiment: #6e797a
-      ),
-      form: (
-        background: (
-          base: #FFFFFF,
-          selected: #364141
-        ),
-        border: (
-          base: #b0b6b7,
-          error: #ed4c42,
-          warning: #ffbc00,
-          selected: #364141
-        ),
-        placeholder: (
-          base: #6e797a
+      "icon": (
+        "base": #364141,
+        "inverse": #FFFFFF,
+        "success": #006b40,
+        "warning": #944c0c,
+        "error": #992222,
+        "danger": #992222,
+        "info": #0c5689,
+        "opportunity": #5e4eba,
+        "applied": #2079c3,
+        "positive_sentiment": #2079c3,
+        "negative_sentiment": #ed4c42,
+        "neutral_sentiment": #6e797a
+      ),
+      "form": (
+        "background": (
+          "base": #FFFFFF,
+          "selected": #364141
+        ),
+        "border": (
+          "base": #b0b6b7,
+          "error": #ed4c42,
+          "warning": #ffbc00,
+          "selected": #364141
+        ),
+        "placeholder": (
+          "base": #6e797a
         )
       ),
-      listItem: (
-        background: (
-          base: transparent,
-          hover: #f3f4f4,
-          selected: #364141
+      "listItem": (
+        "background": (
+          "base": transparent,
+          "hover": #f3f4f4,
+          "selected": #364141
         )
       ),
-      overlay: (
-        background: (
-          base: rgba(22,32,32,0.56)
+      "overlay": (
+        "background": (
+          "base": rgba(22,32,32,0.56)
         ),
-        text: (
-          base: #FFFFFF
+        "text": (
+          "base": #FFFFFF
         ),
-        icon: (
-          base: #FFFFFF
+        "icon": (
+          "base": #FFFFFF
         )
       ),
-      elevation: (
-        base: #2733333D
-      ),
-      network: (
-        twitter: #1da1f2,
-        twitter_like: #e0245e,
-        facebook: #217bee,
-        facebook_audience_network: #58409B,
-        linkedin: #0A66C2,
-        instagram: #e4405f,
-        feedly: #2bb24c,
-        analytics: #ef6c00,
-        youtube: #ff0000,
-        messenger: #0084ff,
-        snapchat: #fffc00,
-        pinterest: #E60023,
-        tumblr: #35465c,
-        reddit: #ff4500,
-        tripadvisor: #00B087,
-        glassdoor: #0CAA41,
-        google_my_business: #4285F4,
-        google_business_messages: #1A73EA,
-        salesforce: #1589EE,
-        zendesk: #03363D,
-        hubspot: #FF7A59,
-        microsoft_dynamics: #002050,
-        yelp: #FF1A1A,
-        whatsapp: #25D366,
-        tiktok: #000000
-      ),
-      dataviz: (
-        map: (
-          1: #08c4b2,
-          2: #6f5ed3,
-          3: #ce3665,
-          4: #ffcd1c,
-          5: #3896e3,
-          6: #db61db,
-          7: #59cb59,
-          8: #fc8943,
-          9: #db3e3e,
-          10: #026661,
-          11: #a193f2,
-          12: #931847,
-          13: #944c0c,
-          14: #0c5689,
-          15: #6c2277,
-          16: #006b40,
-          17: #962c0b,
-          18: #ff7f6e,
-          19: #0ca750,
-          20: #ba7506
-        ),
-        list: (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3896e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c5689, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506)
-      ),
-      neutral: (
-        0: #FFFFFF,
-        100: #f3f4f4,
-        200: #dee1e1,
-        300: #c8cccc,
-        400: #b0b6b7,
-        500: #929a9b,
-        600: #6e797a,
-        700: #515e5f,
-        800: #364141,
-        900: #273333,
-        1000: #162020,
-        1100: #040404
-      ),
-      green: (
-        0: #ebf9eb,
-        100: #d7f4d7,
-        200: #c2f2bd,
-        300: #98e58e,
-        400: #75dd66,
-        500: #59cb59,
-        600: #2bb656,
-        700: #0ca750,
-        800: #008b46,
-        900: #006b40,
-        1000: #08422f,
-        1100: #002b20
-      ),
-      red: (
-        0: #ffeae9,
-        100: #ffd5d2,
-        200: #ffb8b1,
-        300: #ff9c8f,
-        400: #ff7f6e,
-        500: #f76054,
-        600: #ed4c42,
-        700: #db3e3e,
-        800: #c63434,
-        900: #992222,
-        1000: #6d1313,
-        1100: #2b1111
-      ),
-      blue: (
-        0: #e9f8ff,
-        100: #dcf2ff,
-        200: #c7e4f9,
-        300: #a1d2f8,
-        400: #56adf5,
-        500: #3896e3,
-        600: #2b87d3,
-        700: #2079c3,
-        800: #116daa,
-        900: #0c5689,
-        1000: #0a3960,
-        1100: #002138
-      ),
-      teal: (
-        0: #e5f9f5,
-        100: #cdf7ef,
-        200: #b3f2e6,
-        300: #7dead5,
-        400: #24e0c5,
-        500: #08c4b2,
-        600: #00a99c,
-        700: #0b968f,
-        800: #067c7c,
-        900: #026661,
-        1000: #083f3f,
-        1100: #002528
-      ),
-      aqua: (
-        0: #d9fcfb,
-        100: #c5f9f9,
-        200: #a5f2f2,
-        300: #76e5e2,
-        400: #33d6e2,
-        500: #17b8ce,
-        600: #0797ae,
-        700: #0b8599,
-        800: #0f6e84,
-        900: #035e73,
-        1000: #083d4f,
-        1100: #002838
-      ),
-      purple: (
-        0: #f2f2f9,
-        100: #eaeaf9,
-        200: #d8d7f9,
-        300: #c1c1f7,
-        400: #a193f2,
-        500: #9180f4,
-        600: #816fea,
-        700: #6f5ed3,
-        800: #5e4eba,
-        900: #483a9c,
-        1000: #2d246b,
-        1100: #1d1d38
-      ),
-      magenta: (
-        0: #fef0ff,
-        100: #f9e3fc,
-        200: #f4c4f7,
-        300: #edadf2,
-        400: #f282f5,
-        500: #db61db,
-        600: #c44eb9,
-        700: #ac44a8,
-        800: #8f3896,
-        900: #6c2277,
-        1000: #451551,
-        1100: #29192d
-      ),
-      yellow: (
-        0: #fff8e2,
-        100: #fdefcd,
-        200: #ffe99a,
-        300: #ffe16e,
-        400: #ffd943,
-        500: #ffcd1c,
-        600: #ffbc00,
-        700: #dd9903,
-        800: #ba7506,
-        900: #944c0c,
-        1000: #542a00,
-        1100: #2d1a05
-      ),
-      pink: (
-        0: #ffe9f3,
-        100: #fcdbeb,
-        200: #ffb5d5,
-        300: #ff95c1,
-        400: #ff76ae,
-        500: #ef588b,
-        600: #e0447c,
-        700: #ce3665,
-        800: #b22f5b,
-        900: #931847,
-        1000: #561231,
-        1100: #2b1721
-      ),
-      orange: (
-        0: #ffede3,
-        100: #fcdccc,
-        200: #ffc6a4,
-        300: #ffb180,
-        400: #ff9c5d,
-        500: #fc8943,
-        600: #f57d33,
-        700: #ed7024,
-        800: #ce5511,
-        900: #962c0b,
-        1000: #601700,
-        1100: #2d130e
-      ),
-      DATAVIZ_COLORS_LIST: (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3896e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c5689, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506),
-      DATAVIZ_COLORS_MAP: (
-        1: #08c4b2,
-        2: #6f5ed3,
-        3: #ce3665,
-        4: #ffcd1c,
-        5: #3896e3,
-        6: #db61db,
-        7: #59cb59,
-        8: #fc8943,
-        9: #db3e3e,
-        10: #026661,
-        11: #a193f2,
-        12: #931847,
-        13: #944c0c,
-        14: #0c5689,
-        15: #6c2277,
-        16: #006b40,
-        17: #962c0b,
-        18: #ff7f6e,
-        19: #0ca750,
-        20: #ba7506
-      ),
-      navigation: (
-        main: (
-          background: (
-            base: #273333,
-            overflowGradient: #162020
+      "elevation": (
+        "base": #2733333D
+      ),
+      "illustration": (
+        "fill": #56adf5,
+        "stroke": #273333
+      ),
+      "network": (
+        "twitter": #1da1f2,
+        "twitter_like": #e0245e,
+        "facebook": #217bee,
+        "facebook_audience_network": #58409B,
+        "linkedin": #0A66C2,
+        "instagram": #e4405f,
+        "feedly": #2bb24c,
+        "analytics": #ef6c00,
+        "youtube": #ff0000,
+        "messenger": #0084ff,
+        "snapchat": #fffc00,
+        "pinterest": #E60023,
+        "tumblr": #35465c,
+        "reddit": #ff4500,
+        "tripadvisor": #00B087,
+        "glassdoor": #0CAA41,
+        "google_my_business": #4285F4,
+        "google_business_messages": #1A73EA,
+        "salesforce": #1589EE,
+        "zendesk": #03363D,
+        "hubspot": #FF7A59,
+        "microsoft_dynamics": #002050,
+        "yelp": #FF1A1A,
+        "whatsapp": #25D366,
+        "tiktok": #000000
+      ),
+      "dataviz": (
+        "map": (
+          "1": #08c4b2,
+          "2": #6f5ed3,
+          "3": #ce3665,
+          "4": #ffcd1c,
+          "5": #3896e3,
+          "6": #db61db,
+          "7": #59cb59,
+          "8": #fc8943,
+          "9": #db3e3e,
+          "10": #026661,
+          "11": #a193f2,
+          "12": #931847,
+          "13": #944c0c,
+          "14": #0c5689,
+          "15": #6c2277,
+          "16": #006b40,
+          "17": #962c0b,
+          "18": #ff7f6e,
+          "19": #0ca750,
+          "20": #ba7506
+        ),
+        "list": (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3896e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c5689, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506)
+      ),
+      "neutral": (
+        "0": #FFFFFF,
+        "100": #f3f4f4,
+        "200": #dee1e1,
+        "300": #c8cccc,
+        "400": #b0b6b7,
+        "500": #929a9b,
+        "600": #6e797a,
+        "700": #515e5f,
+        "800": #364141,
+        "900": #273333,
+        "1000": #162020,
+        "1100": #040404
+      ),
+      "green": (
+        "0": #ebf9eb,
+        "100": #d7f4d7,
+        "200": #c2f2bd,
+        "300": #98e58e,
+        "400": #75dd66,
+        "500": #59cb59,
+        "600": #2bb656,
+        "700": #0ca750,
+        "800": #008b46,
+        "900": #006b40,
+        "1000": #08422f,
+        "1100": #002b20
+      ),
+      "red": (
+        "0": #ffeae9,
+        "100": #ffd5d2,
+        "200": #ffb8b1,
+        "300": #ff9c8f,
+        "400": #ff7f6e,
+        "500": #f76054,
+        "600": #ed4c42,
+        "700": #db3e3e,
+        "800": #c63434,
+        "900": #992222,
+        "1000": #6d1313,
+        "1100": #2b1111
+      ),
+      "blue": (
+        "0": #e9f8ff,
+        "100": #dcf2ff,
+        "200": #c7e4f9,
+        "300": #a1d2f8,
+        "400": #56adf5,
+        "500": #3896e3,
+        "600": #2b87d3,
+        "700": #2079c3,
+        "800": #116daa,
+        "900": #0c5689,
+        "1000": #0a3960,
+        "1100": #002138
+      ),
+      "teal": (
+        "0": #e5f9f5,
+        "100": #cdf7ef,
+        "200": #b3f2e6,
+        "300": #7dead5,
+        "400": #24e0c5,
+        "500": #08c4b2,
+        "600": #00a99c,
+        "700": #0b968f,
+        "800": #067c7c,
+        "900": #026661,
+        "1000": #083f3f,
+        "1100": #002528
+      ),
+      "aqua": (
+        "0": #d9fcfb,
+        "100": #c5f9f9,
+        "200": #a5f2f2,
+        "300": #76e5e2,
+        "400": #33d6e2,
+        "500": #17b8ce,
+        "600": #0797ae,
+        "700": #0b8599,
+        "800": #0f6e84,
+        "900": #035e73,
+        "1000": #083d4f,
+        "1100": #002838
+      ),
+      "purple": (
+        "0": #f2f2f9,
+        "100": #eaeaf9,
+        "200": #d8d7f9,
+        "300": #c1c1f7,
+        "400": #a193f2,
+        "500": #9180f4,
+        "600": #816fea,
+        "700": #6f5ed3,
+        "800": #5e4eba,
+        "900": #483a9c,
+        "1000": #2d246b,
+        "1100": #1d1d38
+      ),
+      "magenta": (
+        "0": #fef0ff,
+        "100": #f9e3fc,
+        "200": #f4c4f7,
+        "300": #edadf2,
+        "400": #f282f5,
+        "500": #db61db,
+        "600": #c44eb9,
+        "700": #ac44a8,
+        "800": #8f3896,
+        "900": #6c2277,
+        "1000": #451551,
+        "1100": #29192d
+      ),
+      "yellow": (
+        "0": #fff8e2,
+        "100": #fdefcd,
+        "200": #ffe99a,
+        "300": #ffe16e,
+        "400": #ffd943,
+        "500": #ffcd1c,
+        "600": #ffbc00,
+        "700": #dd9903,
+        "800": #ba7506,
+        "900": #944c0c,
+        "1000": #542a00,
+        "1100": #2d1a05
+      ),
+      "pink": (
+        "0": #ffe9f3,
+        "100": #fcdbeb,
+        "200": #ffb5d5,
+        "300": #ff95c1,
+        "400": #ff76ae,
+        "500": #ef588b,
+        "600": #e0447c,
+        "700": #ce3665,
+        "800": #b22f5b,
+        "900": #931847,
+        "1000": #561231,
+        "1100": #2b1721
+      ),
+      "orange": (
+        "0": #ffede3,
+        "100": #fcdccc,
+        "200": #ffc6a4,
+        "300": #ffb180,
+        "400": #ff9c5d,
+        "500": #fc8943,
+        "600": #f57d33,
+        "700": #ed7024,
+        "800": #ce5511,
+        "900": #962c0b,
+        "1000": #601700,
+        "1100": #2d130e
+      ),
+      "DATAVIZ_COLORS_LIST": (#08c4b2, #6f5ed3, #ce3665, #ffcd1c, #3896e3, #db61db, #59cb59, #fc8943, #db3e3e, #026661, #a193f2, #931847, #944c0c, #0c5689, #6c2277, #006b40, #962c0b, #ff7f6e, #0ca750, #ba7506),
+      "DATAVIZ_COLORS_MAP": (
+        "1": #08c4b2,
+        "2": #6f5ed3,
+        "3": #ce3665,
+        "4": #ffcd1c,
+        "5": #3896e3,
+        "6": #db61db,
+        "7": #59cb59,
+        "8": #fc8943,
+        "9": #db3e3e,
+        "10": #026661,
+        "11": #a193f2,
+        "12": #931847,
+        "13": #944c0c,
+        "14": #0c5689,
+        "15": #6c2277,
+        "16": #006b40,
+        "17": #962c0b,
+        "18": #ff7f6e,
+        "19": #0ca750,
+        "20": #ba7506
+      ),
+      "navigation": (
+        "main": (
+          "background": (
+            "base": #273333,
+            "overflowGradient": #162020
           )
         ),
-        secondary: (
-          background: (
-            base: #364141
+        "secondary": (
+          "background": (
+            "base": #364141
+          )
+        ),
+        "settings": (
+          "listItem": (
+            "backgound": (
+              "base": transparent,
+              "hover": #dee1e1,
+              "selected": #FFFFFF
+            )
           )
         ),
-        text: (
-          base: #FFFFFF,
-          hover: #FFFFFF
+        "text": (
+          "base": #FFFFFF,
+          "hover": #FFFFFF
         ),
-        icon: (
-          base: #FFFFFF,
-          hover: #FFFFFF
+        "icon": (
+          "base": #FFFFFF,
+          "hover": #FFFFFF
         ),
-        listItem: (
-          background: (
-            base: #364141,
-            hover: #162020,
-            selected: #515e5f
+        "listItem": (
+          "background": (
+            "base": #364141,
+            "hover": #162020,
+            "selected": #515e5f
           )
         )
       ),
-      datePicker: (
-        comparison: (
-          background: (
-            base: #b0b6b7
+      "datePicker": (
+        "comparison": (
+          "background": (
+            "base": #b0b6b7
           ),
-          text: (
-            base: #364141
+          "text": (
+            "base": #364141
           )
         )
       ),
-      analytics: (
-        trend: (
-          positive: #067c7c,
-          neutral: #364141,
-          negative: #364141
+      "analytics": (
+        "trend": (
+          "positive": #067c7c,
+          "neutral": #364141,
+          "negative": #364141
+        ),
+        "overlay": (
+          "background": (
+            "base": rgba(255,255,255,0.8)
+          )
         )
       ),
-      growth: (
-        education: (
-          decorative: (
-            aqua: #0797ae,
-            teal: #0b968f
+      "growth": (
+        "education": (
+          "decorative": (
+            "aqua": #0797ae,
+            "teal": #0b968f
           )
         ),
-        opportunity: (
-          background: (
-            base: #6f5ed3
+        "opportunity": (
+          "background": (
+            "base": #6f5ed3
           ),
-          button: (
-            primary: (
-              base: #6f5ed3,
-              hover: #5e4eba
+          "button": (
+            "primary": (
+              "base": #6f5ed3,
+              "hover": #5e4eba
             )
           ),
-          badge: (
-            background: (
-              base: #d8d7f9,
-              active: #5e4eba
+          "badge": (
+            "background": (
+              "base": #d8d7f9,
+              "active": #5e4eba
             ),
-            icon: (
-              base: #6f5ed3,
-              active: #eaeaf9
+            "icon": (
+              "base": #6f5ed3,
+              "active": #eaeaf9
             ),
-            text: (
-              base: #6f5ed3
+            "text": (
+              "base": #6f5ed3
             )
           ),
-          decorative: (
-            green: #0ca750,
-            lightAqua: #0797ae,
-            darkAqua: #002838,
-            purple: #6f5ed3
+          "decorative": (
+            "green": #0ca750,
+            "lightAqua": #0797ae,
+            "darkAqua": #002838,
+            "purple": #6f5ed3
           )
         ),
-        darkModal: (
-          background: (
-            base: #002838
+        "darkModal": (
+          "background": (
+            "base": #002838
           ),
-          text: (
-            base: #FFFFFF
+          "text": (
+            "base": #FFFFFF
           ),
-          cards: (
-            background: (
-              base: #FFFFFF,
-              hover: #eaeaf9
+          "cards": (
+            "background": (
+              "base": #FFFFFF,
+              "hover": #eaeaf9
             ),
-            text: (
-              base: #364141,
-              hover: #273333
+            "text": (
+              "base": #364141,
+              "hover": #273333
             ),
-            border: (
-              base: #FFFFFF,
-              hover: #6f5ed3
+            "border": (
+              "base": #FFFFFF,
+              "hover": #6f5ed3
             )
           )
         )
       )
     ),
-    typography: (
-      100: (
-        fontSize: 11px,
-        lineHeight: 18.666666666666668px
-      ),
-      200: (
-        fontSize: 13px,
-        lineHeight: 21.333333333333332px
-      ),
-      300: (
-        fontSize: 16px,
-        lineHeight: 24px
-      ),
-      400: (
-        fontSize: 18px,
-        lineHeight: 26.666666666666668px
-      ),
-      500: (
-        fontSize: 21px,
-        lineHeight: 29.333333333333332px
-      ),
-      600: (
-        fontSize: 24px,
-        lineHeight: 32px
-      ),
-      700: (
-        fontSize: 32px,
-        lineHeight: 40px
-      ),
-      800: (
-        fontSize: 43px,
-        lineHeight: 50.666666666666664px
-      ),
-      900: (
-        fontSize: 57px,
-        lineHeight: 64px
-      ),
-      1000: (
-        fontSize: 76px,
-        lineHeight: 80px
-      ),
-      1100: (
-        fontSize: 101px,
-        lineHeight: 101.33333333333333px
-      ),
-      1200: (
-        fontSize: 135px,
-        lineHeight: 125.33333333333333px
-      ),
-      typography: (
-        100: (
-          fontSize: 11px,
-          lineHeight: 18.666666666666668px
-        ),
-        200: (
-          fontSize: 13px,
-          lineHeight: 21.333333333333332px
-        ),
-        300: (
-          fontSize: 16px,
-          lineHeight: 24px
-        ),
-        400: (
-          fontSize: 18px,
-          lineHeight: 26.666666666666668px
-        ),
-        500: (
-          fontSize: 21px,
-          lineHeight: 29.333333333333332px
-        ),
-        600: (
-          fontSize: 24px,
-          lineHeight: 32px
-        ),
-        700: (
-          fontSize: 32px,
-          lineHeight: 40px
-        ),
-        800: (
-          fontSize: 43px,
-          lineHeight: 50.666666666666664px
-        ),
-        900: (
-          fontSize: 57px,
-          lineHeight: 64px
-        ),
-        1000: (
-          fontSize: 76px,
-          lineHeight: 80px
-        ),
-        1100: (
-          fontSize: 101px,
-          lineHeight: 101.33333333333333px
-        ),
-        1200: (
-          fontSize: 135px,
-          lineHeight: 125.33333333333333px
+    "typography": (
+      "100": (
+        "fontSize": 11px,
+        "lineHeight": 18.666666666666668px
+      ),
+      "200": (
+        "fontSize": 13px,
+        "lineHeight": 21.333333333333332px
+      ),
+      "300": (
+        "fontSize": 16px,
+        "lineHeight": 24px
+      ),
+      "400": (
+        "fontSize": 18px,
+        "lineHeight": 26.666666666666668px
+      ),
+      "500": (
+        "fontSize": 21px,
+        "lineHeight": 29.333333333333332px
+      ),
+      "600": (
+        "fontSize": 24px,
+        "lineHeight": 32px
+      ),
+      "700": (
+        "fontSize": 32px,
+        "lineHeight": 40px
+      ),
+      "800": (
+        "fontSize": 43px,
+        "lineHeight": 50.666666666666664px
+      ),
+      "900": (
+        "fontSize": 57px,
+        "lineHeight": 64px
+      ),
+      "1000": (
+        "fontSize": 76px,
+        "lineHeight": 80px
+      ),
+      "1100": (
+        "fontSize": 101px,
+        "lineHeight": 101.33333333333333px
+      ),
+      "1200": (
+        "fontSize": 135px,
+        "lineHeight": 125.33333333333333px
+      ),
+      "typography": (
+        "100": (
+          "fontSize": 11px,
+          "lineHeight": 18.666666666666668px
+        ),
+        "200": (
+          "fontSize": 13px,
+          "lineHeight": 21.333333333333332px
+        ),
+        "300": (
+          "fontSize": 16px,
+          "lineHeight": 24px
+        ),
+        "400": (
+          "fontSize": 18px,
+          "lineHeight": 26.666666666666668px
+        ),
+        "500": (
+          "fontSize": 21px,
+          "lineHeight": 29.333333333333332px
+        ),
+        "600": (
+          "fontSize": 24px,
+          "lineHeight": 32px
+        ),
+        "700": (
+          "fontSize": 32px,
+          "lineHeight": 40px
+        ),
+        "800": (
+          "fontSize": 43px,
+          "lineHeight": 50.666666666666664px
+        ),
+        "900": (
+          "fontSize": 57px,
+          "lineHeight": 64px
+        ),
+        "1000": (
+          "fontSize": 76px,
+          "lineHeight": 80px
+        ),
+        "1100": (
+          "fontSize": 101px,
+          "lineHeight": 101.33333333333333px
+        ),
+        "1200": (
+          "fontSize": 135px,
+          "lineHeight": 125.33333333333333px
         )
       )
     ),
-    fontFamily: "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
-    fontWeights: (
-      normal: 400,
-      semibold: 600,
-      bold: 700,
-      extrabold: 800
+    "fontFamily": "system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif",
+    "fontWeights": (
+      "normal": 400,
+      "semibold": 600,
+      "bold": 700,
+      "extrabold": 800
     ),
-    space: (
-      0: 0px,
-      100: 2px,
-      200: 4px,
-      300: 8px,
-      350: 12px,
-      400: 16px,
-      450: 24px,
-      500: 32px,
-      600: 40px,
-      space: (
-        0: 0px,
-        100: 2px,
-        200: 4px,
-        300: 8px,
-        350: 12px,
-        400: 16px,
-        450: 24px,
-        500: 32px,
-        600: 40px
-      ),
-      -space: (
-        0: -0px,
-        100: -2px,
-        200: -4px,
-        300: -8px,
-        350: -12px,
-        400: -16px,
-        450: -24px,
-        500: -32px,
-        600: -40px
+    "space": (
+      "0": 0px,
+      "100": 2px,
+      "200": 4px,
+      "300": 8px,
+      "350": 12px,
+      "400": 16px,
+      "450": 24px,
+      "500": 32px,
+      "600": 40px,
+      "space": (
+        "0": 0px,
+        "100": 2px,
+        "200": 4px,
+        "300": 8px,
+        "350": 12px,
+        "400": 16px,
+        "450": 24px,
+        "500": 32px,
+        "600": 40px
+      ),
+      "-space": (
+        "0": -0px,
+        "100": -2px,
+        "200": -4px,
+        "300": -8px,
+        "350": -12px,
+        "400": -16px,
+        "450": -24px,
+        "500": -32px,
+        "600": -40px
       )
     ),
-    radii: (
-      400: 4px,
-      500: 6px,
-      600: 8px,
-      1000: 999999px,
-      inner: 6px,
-      outer: 8px,
-      pill: 999999px,
-      radii: (
-        400: 4px,
-        500: 6px,
-        600: 8px,
-        1000: 999999px,
-        inner: 6px,
-        outer: 8px,
-        pill: 999999px
+    "radii": (
+      "400": 4px,
+      "500": 6px,
+      "600": 8px,
+      "1000": 999999px,
+      "inner": 6px,
+      "outer": 8px,
+      "pill": 999999px,
+      "radii": (
+        "400": 4px,
+        "500": 6px,
+        "600": 8px,
+        "1000": 999999px,
+        "inner": 6px,
+        "outer": 8px,
+        "pill": 999999px
       )
     ),
-    borders: (
-      500: 1px solid
+    "borders": (
+      "500": 1px solid
     ),
-    borderWidths: (
-      500: 1px
+    "borderWidths": (
+      "500": 1px
     ),
-    shadows: (
-      low: 0px 2px 4px #2733333D,
-      medium: 0px 8px 16px #2733333D,
-      high: 0px 16px 32px #2733333D
+    "shadows": (
+      "low": 0px 2px 4px #2733333D,
+      "medium": 0px 8px 16px #2733333D,
+      "high": 0px 16px 32px #2733333D
     ),
-    easing: (
-      ease_in: cubic-bezier(.4, 0, .7, .2),
-      ease_out: cubic-bezier(0, 0, .2, 1),
-      ease_inout: cubic-bezier(.4, 0, .2, 1)
+    "easing": (
+      "ease_in": cubic-bezier(.4, 0, .7, .2),
+      "ease_out": cubic-bezier(0, 0, .2, 1),
+      "ease_inout": cubic-bezier(.4, 0, .2, 1)
     ),
-    duration: (
-      fast: .15s,
-      medium: .3s,
-      slow: .6s
+    "duration": (
+      "fast": .15s,
+      "medium": .3s,
+      "slow": .6s
     ),
-    mode: light
+    "mode": light
   ),
-  growth: (
-    education: (
-      decorative: (
-        aqua: #0797ae,
-        teal: #0b968f
+  "growth": (
+    "education": (
+      "decorative": (
+        "aqua": #0797ae,
+        "teal": #0b968f
       )
     ),
-    opportunity: (
-      background: (
-        base: #6f5ed3
-      ),
-      button: (
-        primary: (
-          base: #6f5ed3,
-          hover: #5e4eba
+    "opportunity": (
+      "background": (
+        "base": #6f5ed3
+      ),
+      "button": (
+        "primary": (
+          "base": #6f5ed3,
+          "hover": #5e4eba
         )
       ),
-      badge: (
-        background: (
-          base: #d8d7f9,
-          active: #5e4eba
+      "badge": (
+        "background": (
+          "base": #d8d7f9,
+          "active": #5e4eba
         ),
-        icon: (
-          base: #6f5ed3,
-          active: #eaeaf9
+        "icon": (
+          "base": #6f5ed3,
+          "active": #eaeaf9
         ),
-        text: (
-          base: #6f5ed3
+        "text": (
+          "base": #6f5ed3
         )
       ),
-      decorative: (
-        green: #0ca750,
-        lightAqua: #0797ae,
-        darkAqua: #002838,
-        purple: #6f5ed3
+      "decorative": (
+        "green": #0ca750,
+        "lightAqua": #0797ae,
+        "darkAqua": #002838,
+        "purple": #6f5ed3
       )
     ),
-    darkModal: (
-      background: (
-        base: #002838
+    "darkModal": (
+      "background": (
+        "base": #002838
       ),
-      text: (
-        base: #FFFFFF
+      "text": (
+        "base": #FFFFFF
       ),
-      cards: (
-        background: (
-          base: #FFFFFF,
-          hover: #eaeaf9
+      "cards": (
+        "background": (
+          "base": #FFFFFF,
+          "hover": #eaeaf9
         ),
-        text: (
-          base: #364141,
-          hover: #273333
+        "text": (
+          "base": #364141,
+          "hover": #273333
         ),
-        border: (
-          base: #FFFFFF,
-          hover: #6f5ed3
+        "border": (
+          "base": #FFFFFF,
+          "hover": #6f5ed3
         )
       )
     )
   ),
-  navigation: (
-    main: (
-      background: (
-        base: #273333,
-        overflowGradient: #162020
+  "navigation": (
+    "main": (
+      "background": (
+        "base": #273333,
+        "overflowGradient": #162020
       )
     ),
-    secondary: (
-      background: (
-        base: #364141
+    "secondary": (
+      "background": (
+        "base": #364141
+      )
+    ),
+    "settings": (
+      "listItem": (
+        "backgound": (
+          "base": transparent,
+          "hover": #dee1e1,
+          "selected": #FFFFFF
+        )
       )
     ),
-    text: (
-      base: #FFFFFF,
-      hover: #FFFFFF
+    "text": (
+      "base": #FFFFFF,
+      "hover": #FFFFFF
     ),
-    icon: (
-      base: #FFFFFF,
-      hover: #FFFFFF
+    "icon": (
+      "base": #FFFFFF,
+      "hover": #FFFFFF
     ),
-    listItem: (
-      background: (
-        base: #364141,
-        hover: #162020,
-        selected: #515e5f
+    "listItem": (
+      "background": (
+        "base": #364141,
+        "hover": #162020,
+        "selected": #515e5f
       )
     )
   )