@sproutsocial/seeds-react-theme 1.0.0

package/dist/themes/dark/theme.scss

@@ -0,0 +1,678 @@
+$theme: (
+  "default": (
+    "breakpoints": (900px, 1200px, 1500px, 1800px),
+    "colors": (
+      "app": (
+        "background": (
+          "base": #162020
+        )
+      ),
+      "container": (
+        "background": (
+          "base": #273333,
+          "success": #006b40,
+          "warning": #944c0c,
+          "error": #992222,
+          "info": #0c3f89,
+          "opportunity": #483a9c,
+          "danger": #992222,
+          "decorative": (
+            "green": #006b40,
+            "blue": #0c3f89,
+            "purple": #483a9c,
+            "yellow": #944c0c,
+            "orange": #962c0b,
+            "red": #992222,
+            "neutral": #162020,
+            "magenta": #6c2277,
+            "pink": #931847,
+            "aqua": #035e73,
+            "teal": #026661
+          ),
+          "selected": #FFFFFF,
+          "positive_sentiment": #3876e3,
+          "negative_sentiment": #f76054,
+          "neutral_sentiment": #c8cccc
+        ),
+        "border": (
+          "base": #040404,
+          "success": #59cb59,
+          "warning": #ffbc00,
+          "error": #ed4c42,
+          "danger": #ed4c42,
+          "info": #2b68d3,
+          "opportunity": #9180f4,
+          "decorative": (
+            "green": #59cb59,
+            "blue": #2b68d3,
+            "purple": #9180f4,
+            "yellow": #ffbc00,
+            "orange": #f57d33,
+            "red": #ed4c42,
+            "neutral": #6e797a,
+            "magenta": #c44eb9,
+            "pink": #e0447c,
+            "aqua": #17b8ce,
+            "teal": #08c4b2
+          ),
+          "selected": #FFFFFF
+        )
+      ),
+      "button": (
+        "primary": (
+          "background": (
+            "base": #679eff,
+            "hover": #a1c2f8,
+            "active": #c7dbf9
+          ),
+          "border": (
+            "base": transparent
+          ),
+          "text": (
+            "base": #273333,
+            "hover": #162020
+          )
+        ),
+        "secondary": (
+          "background": (
+            "base": transparent,
+            "hover": #f3f4f4,
+            "active": #FFFFFF
+          ),
+          "border": (
+            "base": #FFFFFF
+          ),
+          "text": (
+            "base": #FFFFFF,
+            "hover": #364141
+          )
+        ),
+        "pill": (
+          "background": (
+            "base": transparent,
+            "hover": #162020,
+            "active": #273333
+          ),
+          "border": (
+            "base": transparent,
+            "hover": #FFFFFF
+          ),
+          "text": (
+            "base": #f3f4f4,
+            "hover": #FFFFFF
+          )
+        ),
+        "destructive": (
+          "background": (
+            "base": #ff7f6e,
+            "hover": #ff9c8f,
+            "active": #ffb8b1
+          ),
+          "border": (
+            "base": transparent
+          ),
+          "text": (
+            "base": #273333,
+            "hover": #162020
+          )
+        ),
+        "placeholder": (
+          "background": (
+            "base": transparent,
+            "hover": #040404,
+            "active": #040404
+          ),
+          "border": (
+            "base": #929a9b
+          ),
+          "text": (
+            "base": #679eff,
+            "hover": #a1c2f8
+          )
+        ),
+        "unstyled": (
+          "background": (
+            "base": transparent
+          ),
+          "border": (
+            "base": transparent
+          ),
+          "text": (
+            "base": #c8cccc,
+            "hover": #dee1e1
+          )
+        )
+      ),
+      "link": (
+        "base": #679eff,
+        "hover": #a1c2f8
+      ),
+      "text": (
+        "headline": #FFFFFF,
+        "subtext": #dee1e1,
+        "body": #f3f4f4,
+        "inverse": #273333,
+        "error": #ffd5d2,
+        "background": (
+          "highlight": #944c0c,
+          "selection": #1150aa
+        ),
+        "decorative": (
+          "green": #d7f4d7,
+          "blue": #deebfe,
+          "purple": #eaeaf9,
+          "yellow": #fdefcd,
+          "orange": #fcdccc,
+          "red": #ffd5d2,
+          "neutral": #f3f4f4,
+          "magenta": #f9e3fc,
+          "pink": #fcdbeb,
+          "aqua": #c5f9f9,
+          "teal": #cdf7ef
+        )
+      ),
+      "icon": (
+        "base": #f3f4f4,
+        "inverse": #273333,
+        "success": #d7f4d7,
+        "warning": #fdefcd,
+        "error": #ffd5d2,
+        "danger": #ffd5d2,
+        "info": #deebfe,
+        "opportunity": #eaeaf9,
+        "applied": #679eff,
+        "positive_sentiment": #2b68d3,
+        "negative_sentiment": #ed4c42,
+        "neutral_sentiment": #929a9b
+      ),
+      "form": (
+        "background": (
+          "base": #273333,
+          "selected": #FFFFFF
+        ),
+        "border": (
+          "base": #929a9b,
+          "error": #ed4c42,
+          "warning": #ffbc00,
+          "selected": #FFFFFF
+        ),
+        "placeholder": (
+          "base": #929a9b
+        )
+      ),
+      "listItem": (
+        "background": (
+          "base": transparent,
+          "hover": #364141,
+          "selected": #FFFFFF
+        )
+      ),
+      "overlay": (
+        "background": (
+          "base": rgba(22,32,32,0.72)
+        ),
+        "text": (
+          "base": #FFFFFF
+        ),
+        "icon": (
+          "base": #FFFFFF
+        )
+      ),
+      "elevation": (
+        "base": #040404
+      ),
+      "illustration": (
+        "fill": #679eff,
+        "stroke": #f3f4f4
+      ),
+      "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,
+        "google_play_store": #01875F,
+        "apple_app_store": #17C8F5,
+        "salesforce": #1589EE,
+        "zendesk": #03363D,
+        "hubspot": #FF7A59,
+        "microsoft_dynamics": #002050,
+        "yelp": #FF1A1A,
+        "whatsapp": #25D366,
+        "tiktok": #000000,
+        "threads": #000000,
+        "trustpilot": #04DA8D
+      ),
+      "dataviz": (
+        "map": (
+          "1": #24e0c5,
+          "2": #a193f2,
+          "3": #ff76ae,
+          "4": #ffcd1c,
+          "5": #679eff,
+          "6": #f282f5,
+          "7": #75dd66,
+          "8": #ff9c5d,
+          "9": #db3e3e,
+          "10": #0b968f,
+          "11": #6f5ed3,
+          "12": #ce3665,
+          "13": #ba7506,
+          "14": #205bc3,
+          "15": #ac44a8,
+          "16": #0ca750,
+          "17": #ed7024,
+          "18": #ff7f6e,
+          "19": #c2f2bd,
+          "20": #ffe99a
+        ),
+        "list": (#24e0c5, #a193f2, #ff76ae, #ffcd1c, #679eff, #f282f5, #75dd66, #ff9c5d, #db3e3e, #0b968f, #6f5ed3, #ce3665, #ba7506, #205bc3, #ac44a8, #0ca750, #ed7024, #ff7f6e, #c2f2bd, #ffe99a)
+      ),
+      "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": #e9f4ff,
+        "100": #deebfe,
+        "200": #c7dbf9,
+        "300": #a1c2f8,
+        "400": #679eff,
+        "500": #3876e3,
+        "600": #2b68d3,
+        "700": #205bc3,
+        "800": #1150aa,
+        "900": #0c3f89,
+        "1000": #0a2960,
+        "1100": #001738
+      ),
+      "teal": (
+        "0": #e5f9f5,
+        "50": #CCF1EA,
+        "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,
+        "350": #EC9AF1,
+        "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": (#24e0c5, #a193f2, #ff76ae, #ffcd1c, #679eff, #f282f5, #75dd66, #ff9c5d, #db3e3e, #0b968f, #6f5ed3, #ce3665, #ba7506, #205bc3, #ac44a8, #0ca750, #ed7024, #ff7f6e, #c2f2bd, #ffe99a),
+      "DATAVIZ_COLORS_MAP": (
+        "1": #24e0c5,
+        "2": #a193f2,
+        "3": #ff76ae,
+        "4": #ffcd1c,
+        "5": #679eff,
+        "6": #f282f5,
+        "7": #75dd66,
+        "8": #ff9c5d,
+        "9": #db3e3e,
+        "10": #0b968f,
+        "11": #6f5ed3,
+        "12": #ce3665,
+        "13": #ba7506,
+        "14": #205bc3,
+        "15": #ac44a8,
+        "16": #0ca750,
+        "17": #ed7024,
+        "18": #ff7f6e,
+        "19": #c2f2bd,
+        "20": #ffe99a
+      )
+    ),
+    "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
+        )
+      )
+    ),
+    "fontSizes": (
+      "100": 11px,
+      "200": 13px,
+      "300": 16px,
+      "400": 18px,
+      "500": 21px,
+      "600": 24px,
+      "700": 32px,
+      "800": 43px,
+      "900": 57px,
+      "1000": 76px,
+      "1100": 101px,
+      "1200": 135px
+    ),
+    "lineHeights": (
+      "100": 18.666666666666668px,
+      "200": 21.333333333333332px,
+      "300": 24px,
+      "400": 26.666666666666668px,
+      "500": 29.333333333333332px,
+      "600": 32px,
+      "700": 40px,
+      "800": 50.666666666666664px,
+      "900": 64px,
+      "1000": 80px,
+      "1100": 101.33333333333333px,
+      "1200": 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
+    ),
+    "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
+      )
+    ),
+    "borders": (
+      "500": 1px solid
+    ),
+    "borderWidths": (
+      "500": 1px
+    ),
+    "shadows": (
+      "low": 0px 2px 4px #040404FF,
+      "medium": 0px 8px 16px #040404FF,
+      "high": 0px 16px 32px #040404FF
+    ),
+    "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
+    ),
+    "mode": dark
+  ),
+  "shadows": (
+    "low": 0px 2px 4px #040404FF,
+    "medium": 0px 8px 16px #040404FF,
+    "high": 0px 16px 32px #040404FF
+  )
+);