Introduce non-padded logos, colors, theming, tailwind-support, styled…

…-component support, css, json & more

README.md

@@ -6,6 +6,15 @@ Welcome to the ENS Media Kit. Here you can find logos, icons, and other media as
 
 You can download the latest version of the media kit [from the releases tab](https://github.com/ensdomains/media-kit/releases/latest). These files are automatically generated and are the best way to ensure you are using the latest version of the media kit.
 
+## 📂 File Structure
+
+Here are some quick hyperlinks for the impatient:
+
+-   [Logos](./media/logos) ([Protocol](./media/logos/primary), [Light](./media/logos/light), [Dark](./media/logos/dark), [Ecosystem](./media/logos/ecosystem/), [DAO](./media/logos/dao), [Token](./media/logos/dao))
+-   [Colors](./media/colors) ([TailwindCSS](./media/colors/tailwind.config.js), [Styled-Components](./media/colors/README.md), [Plain CSS](./media/colors/colors.css), [Json](./media/colors/colors.json))
+-   [Brand Guidelines](./media/brand_guidelines) ([PDF](./media/Brand%20Guidelines.pdf), [SVG](./media/brand_guidelines/))
+-   [Logos with Padding](./media/_legacy)
+
 ## 📖 Brand Guidelines
 
 Before using any please read the [ENS Brand Guidelines](./media/Brand%20Guidelines.pdf) to ensure you are using them correctly. If you have any questions, please [Open an issue](https://github.com/ensdomains/media-kit/issues/new) and let us know, or send an email to [[email protected]](mailto:[email protected]).

media/README.md

@@ -1,6 +1,6 @@
 # 🖼️ ENS Media Kit
 
-Welcome to the ENS Media Kit. Here you can find logos, icons, and other media assets for ENS.
+Welcome to the ENS Media Kit. Here you can find logos, colors, icons, and other media assets for ENS.
 
 Before using any please read the [ENS Brand Guidelines](./Brand%20Guidelines.pdf) to ensure you are using them correctly.
 

media/colors/README.md

@@ -0,0 +1,34 @@
+# Colors
+
+## The Colors
+
+## Plain CSS
+
+When using plain CSS, css variables have been made available in [colors.css](./colors.css), you can use these by simply importing the file and using the variables like so
+
+```css
+.mydiv {
+    background-color: var(--ens-grey1);
+    color: var(--ens-blue);
+}
+```
+
+## Styled-Components
+
+For styled-components it is recommended to use the [ensdomains/thorin] global-styles.
+You can import these like so
+
+```tsx
+import { ThorinGlobalStyles } from '@ensdomains/thorin';
+import { baseTheme, lightTheme, darkTheme } from '@ensdomains/thorin';
+```
+
+## TailwindCSS
+
+For tailwindcss it is recommended to use the provided [tailwind.config.js](./tailwind.config.js) file.
+Simply drop it in your project and you should be good to go!
+
+```
+.bg-ens-blue
+.bg-ens-gradient-blue
+```

media/colors/colors.css

@@ -0,0 +1,19 @@
+:root {
+  --ens-blue: #5298FF;
+  --ens-blue2: rgba(82, 152, 255, 0.6);
+  --ens-blue3: rgba(82, 152, 255, 0.25);
+  --ens-green: #49B393;
+  --ens-indigo: #5854D6;
+  --ens-orange: #FF9500;
+  --ens-pink: #FF2D55;
+  --ens-purple: #AF52DE;
+  --ens-red: #D55555;
+  --ens-teal: #5AC8FA;
+  --ens-yellow: #E8B811;
+  --ens-grey1: #F6F6F6;
+  --ens-grey2: #9B9BA7;
+  --ens-grey3: #454545;
+  --ens-gradient-blue: linear-gradient(330.4deg, #44BCF0 4.54%, #7298F8 59.2%, #A099FF 148.85%);
+  --ens-gradient-purple: linear-gradient(323.31deg, #DE82FF -15.56%, #7F6AFF 108.43%);
+  --ens-gradient-green: linear-gradient(323.31deg, #73A6F2 -15.56%, #42C2AB 108.43%);
+}

media/colors/colors.json

@@ -0,0 +1,19 @@
+{
+    "blue": "#5298FF",
+    "blue2": "rgba(82, 152, 255, 0.6)",
+    "blue3": "rgba(82, 152, 255, 0.25)",
+    "green": "#49B393",
+    "indigo": "#5854D6",
+    "orange": "#FF9500",
+    "pink": "#FF2D55",
+    "purple": "#AF52DE",
+    "red": "#D55555",
+    "teal": "#5AC8FA",
+    "yellow": "#E8B811",
+    "grey1": "#F6F6F6",
+    "grey2": "#9B9BA7",
+    "grey3": "#454545",
+    "gradient-blue": "linear-gradient(330.4deg, #44BCF0 4.54%, #7298F8 59.2%, #A099FF 148.85%)",
+    "gradient-purple": "linear-gradient(323.31deg, #DE82FF -15.56%, #7F6AFF 108.43%)",
+    "gradient-green": "linear-gradient(323.31deg, #73A6F2 -15.56%, #42C2AB 108.43%)"
+}

media/colors/tailwind.config.js

@@ -0,0 +1,32 @@
+module.exports = {
+    theme: {
+        extend: {
+            colors: {
+                ens: {
+                    blue: "#5298FF",
+                    blue2: "rgba(82, 152, 255, 0.6)",
+                    blue3: "rgba(82, 152, 255, 0.25)",
+                    green: "#49B393",
+                    indigo: "#5854D6",
+                    orange: "#FF9500",
+                    pink: "#FF2D55",
+                    purple: "#AF52DE",
+                    red: "#D55555",
+                    teal: "#5AC8FA",
+                    yellow: "#E8B811",
+                    grey1: "#F6F6F6",
+                    grey2: "#9B9BA7",
+                    grey3: "#454545",
+                    "gradient-blue":
+                        "linear-gradient(330.4deg, #44BCF0 4.54%, #7298F8 59.2%, #A099FF 148.85%)",
+                    "gradient-purple":
+                        "linear-gradient(323.31deg, #DE82FF -15.56%, #7F6AFF 108.43%)",
+                    "gradient-green": "linear-gradient(323.31deg, #73A6F2 -15.56%, #42C2AB 108.43%)"
+                },
+            },
+            borderRadius: {
+                ens: "16px",
+            },
+        },
+    },
+};