[providers] Apple

README.md

@@ -30,6 +30,7 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http
 
 ### Identity Provider Icons
 
+- Apple
 - Bitbucket
 - Discord
 - Facebook

tailwind.config.js

@@ -16,6 +16,7 @@ module.exports = {
         secondary: colors.gray,
 
         provider: {
+          apple: '#000000',
           bitbucket: '#0052CC',
           discord: '#5865F2',
           facebook: '#1877F2',

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

@@ -0,0 +1,7 @@
+<#-- https://apple.com -->
+<#macro kw name="Apple">
+  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <title>${name}</title>
+    <path d="M12.7549 5.53846C13.8059 5.53846 15.1234 4.8061 15.9079 3.82962C16.6184 2.94469 17.1365 1.70884 17.1365 0.472981C17.1365 0.305149 17.1217 0.137317 17.0921 0C15.9227 0.0457724 14.5164 0.808645 13.6727 1.8309C13.0066 2.60903 12.3997 3.82963 12.3997 5.08074C12.3997 5.26383 12.4293 5.44692 12.4441 5.50795C12.5181 5.5232 12.6365 5.53846 12.7549 5.53846ZM9.05428 24C10.4901 24 11.1266 23.0083 12.9178 23.0083C14.7385 23.0083 15.1382 23.9695 16.7368 23.9695C18.3059 23.9695 19.3569 22.4743 20.3487 21.0095C21.4589 19.3312 21.9178 17.6834 21.9474 17.6071C21.8438 17.5766 18.8388 16.3102 18.8388 12.7552C18.8388 9.67324 21.2072 8.28481 21.3405 8.178C19.7714 5.85887 17.3882 5.79784 16.7368 5.79784C14.9753 5.79784 13.5395 6.89638 12.6365 6.89638C11.6595 6.89638 10.3717 5.85887 8.84704 5.85887C5.94572 5.85887 3 8.33058 3 12.9994C3 15.8983 4.09539 18.965 5.44243 20.9485C6.59704 22.6268 7.60362 24 9.05428 24Z" fill="#000000" />
+  </svg>
+</#macro>

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

@@ -1,3 +1,4 @@
+<#import "./apple.ftl" as appleIcon>
 <#import "./bitbucket.ftl" as bitbucketIcon>
 <#import "./discord.ftl" as discordIcon>
 <#import "./facebook.ftl" as facebookIcon>
@@ -14,6 +15,10 @@
 <#import "./stackoverflow.ftl" as stackoverflowIcon>
 <#import "./twitter.ftl" as twitterIcon>
 
+<#macro apple>
+  <@appleIcon.kw />
+</#macro>
+
 <#macro bitbucket>
   <@bitbucketIcon.kw />
 </#macro>

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

@@ -7,6 +7,9 @@
   <div class="gap-4 grid grid-cols-3">
     <#list providers as provider>
       <#switch provider.alias>
+        <#case "apple">
+          <#assign colorClass="hover:bg-provider-apple/10">
+          <#break>
         <#case "bitbucket">
           <#assign colorClass="hover:bg-provider-bitbucket/10">
           <#break>