[providers] Add Slack

README.md

@@ -30,6 +30,7 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http
 - OpenID
 - Red Hat OpenShift
 - PayPal
+- Slack
 - Stack Overflow
 - Twitter
 

tailwind.config.js

@@ -27,6 +27,7 @@ module.exports = {
           oidc: '#F78C40',
           openshift: '#EE0000',
           paypal: '#00457C',
+          slack: '#4A154B',
           stackoverflow: '#F58025',
           twitter: '#1DA1F2',
         },

theme/keywind/login/assets/providers/providers.ftl

@@ -9,6 +9,7 @@
 <#import "./oidc.ftl" as oidcIcon>
 <#import "./openshift.ftl" as openshiftIcon>
 <#import "./paypal.ftl" as paypalIcon>
+<#import "./slack.ftl" as slackIcon>
 <#import "./stackoverflow.ftl" as stackoverflowIcon>
 <#import "./twitter.ftl" as twitterIcon>
 
@@ -60,6 +61,10 @@
   <@paypalIcon.kw />
 </#macro>
 
+<#macro slack>
+  <@slackIcon.kw />
+</#macro>
+
 <#macro stackoverflow>
   <@stackoverflowIcon.kw />
 </#macro>

theme/keywind/login/assets/providers/slack.ftl

@@ -0,0 +1,14 @@
+<#-- https://slack.com/media-kit -->
+<#macro kw name="Slack">
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>${name}</title>
+    <path d="M5.04235 15.1661C5.04235 16.5537 3.9088 17.6873 2.52117 17.6873C1.13355 17.6873 0 16.5537 0 15.1661C0 13.7785 1.13355 12.645 2.52117 12.645H5.04235V15.1661Z" fill="#E01E5A" />
+    <path d="M6.3127 15.1661C6.3127 13.7785 7.44626 12.645 8.83388 12.645C10.2215 12.645 11.355 13.7785 11.355 15.1661V21.4788C11.355 22.8664 10.2215 24 8.83388 24C7.44626 24 6.3127 22.8664 6.3127 21.4788V15.1661Z" fill="#E01E5A" />
+    <path d="M8.83388 5.04235C7.44626 5.04235 6.3127 3.9088 6.3127 2.52117C6.3127 1.13355 7.44626 0 8.83388 0C10.2215 0 11.355 1.13355 11.355 2.52117V5.04235H8.83388Z" fill="#36C5F0" />
+    <path d="M8.83388 6.3127C10.2215 6.3127 11.355 7.44626 11.355 8.83388C11.355 10.2215 10.2215 11.355 8.83388 11.355H2.52117C1.13355 11.355 0 10.2215 0 8.83388C0 7.44626 1.13355 6.3127 2.52117 6.3127H8.83388Z" fill="#36C5F0" />
+    <path d="M18.9577 8.83388C18.9577 7.44626 20.0912 6.3127 21.4788 6.3127C22.8664 6.3127 24 7.44626 24 8.83388C24 10.2215 22.8664 11.355 21.4788 11.355H18.9577V8.83388Z" fill="#2EB67D" />
+    <path d="M17.6873 8.83388C17.6873 10.2215 16.5537 11.355 15.1661 11.355C13.7785 11.355 12.645 10.2215 12.645 8.83388V2.52117C12.645 1.13355 13.7785 0 15.1661 0C16.5537 0 17.6873 1.13355 17.6873 2.52117V8.83388Z" fill="#2EB67D" />
+    <path d="M15.1661 18.9577C16.5537 18.9577 17.6873 20.0912 17.6873 21.4788C17.6873 22.8664 16.5537 24 15.1661 24C13.7785 24 12.645 22.8664 12.645 21.4788V18.9577H15.1661Z" fill="#ECB22E" />
+    <path d="M15.1661 17.6873C13.7785 17.6873 12.645 16.5537 12.645 15.1661C12.645 13.7785 13.7785 12.645 15.1661 12.645H21.4788C22.8664 12.645 24 13.7785 24 15.1661C24 16.5537 22.8664 17.6873 21.4788 17.6873H15.1661Z" fill="#ECB22E" />
+  </svg>
+</#macro>

theme/keywind/login/components/molecules/identity-provider.ftl

@@ -43,6 +43,9 @@
         <#case "paypal">
           <#assign colorClass="hover:bg-provider-paypal/10">
           <#break>
+        <#case "slack">
+          <#assign colorClass="hover:bg-provider-slack/10">
+          <#break>
         <#case "stackoverflow">
           <#assign colorClass="hover:bg-provider-stackoverflow/10">
           <#break>