Move from rings to outlines and use a default

lang/nl/strings.php

@@ -18,22 +18,26 @@
     'form_subject_sent' => 'Contactformulier verzonden',
     'form_success' => 'Bedankt voor je bericht.',
 
-    // Cookie banner
+    // Consent banner
     'consent_accept_all' => 'Accepteer alles',
     'consent_accept_selected' => 'Accepteer selectie',
     'consent_ads' => 'Advertenties & tracking',
-    'consent_ads_explanation' => 'Third party cookies benodigd voor het retargeten en plaatsen van advertenties.',
+    'consent_ads_explanation' => 'Opslag (zoals third party cookies) benodigd for adverteren.',
+    'consent_ad_user_data' => 'Gebruikersdata',
+    'consent_ad_user_data_explanation' => 'Stuur gebruikersdata m.b.t. advertenties naar Google.',
+    'consent_ad_personalization' => 'Gepersonaliseerde advertenties',
+    'consent_ad_personalization_explanation' => 'Ontvang gepersonaliseerde advertenties.',
     'consent_analytics' => 'Analytics',
-    'consent_analytics_explanation' => 'Third party cookies die nodig zijn voor het meten van geanomiseerde bezoekersstatistieken.',
-    'consent_explanation' => 'Deze site gebruikt cookies waar we je toestemming voor nodig hebben.',
-    'consent_embeds' => 'Video embeds',
-    'consent_embeds_explanation' => 'Third party cookies die nodig zijn om embedded video\'s te tonen. Deze kunnen je gedrag mogelijk tracken.',
-    'consent_embeds_disabled' => 'Accepteer video-embed-cookies om deze video te zien.',
+    'consent_analytics_explanation' => 'Opslag (zoals third party cookies) benodigd voor adverteren.',
+    'consent_explanation' => 'Deze site gebruikt third party diensten die je toestemming nodig hebben.',
+    'consent_embeds' => 'Video-embeds',
+    'consent_embeds_explanation' => 'Third party cookies benodigd voor embeds (zoals video\'s) die je mogelijk kunnen tracken.',
+    'consent_embeds_disabled' => 'Geef toestemming voor third party embeds om dit te bekijken.',
     'consent_functional' => 'Functioneel',
-    'consent_functional_explanation' => 'First party cookies die essentieel zijn voor het functioneren van deze website. Deze kunnen niet uitgeschakeld worden.',
-    'consent_title' => 'Cookies 🍪',
+    'consent_functional_explanation' => 'First party cookies die nodig zijn om deze website te laten functioneren. Kan niet uitgeschakeld worden.',
+    'consent_title' => 'Toestemming',
     'consent_learn_more' => 'Meer informatie',
-    'consent_change_preferences' => 'Wijzig cookie-voorkeuren',
+    'consent_change_preferences' => 'Wijzig toestemmingsvoorkeuren',
 
     // Footer
     'on' => 'op',

public/build/manifest.json

@@ -1,6 +1,6 @@
 {
   "resources/css/site.css": {
-    "file": "assets/site-54y9HhaR.css",
+    "file": "assets/site-jd60iClm.css",
     "isEntry": true,
     "src": "resources/css/site.css"
   },

resources/views/components/_button.antlers.html

@@ -13,18 +13,18 @@
     <{{ as or 'a' }}
         {{ slot:attributes }}
         class="
-            font-bold focus:outline-none focus-visible:ring focus-visible:ring-offset-2
+            font-bold rounded
             {{ if button_type === 'inline' }}
                 underline decoration-2 motion-safe:transition
                 {{ inverted
-                    ? 'text-white decoration-white focus-visible:ring-white'
-                    : 'text-neutral decoration-primary focus-visible:ring-primary'
+                    ? 'text-white decoration-white focus-visible:outline-white'
+                    : 'text-neutral decoration-primary'
                 }}
             {{ else }}
                 inline-flex items-center py-3 px-4 rounded leading-none no-underline select-none whitespace-nowrap motion-safe:transition
                 {{ inverted
-                    ? 'bg-white text-primary focus-visible:ring-white'
-                    : 'bg-primary text-white focus-visible:ring-primary'
+                    ? 'bg-white text-primary focus-visible:outline-white'
+                    : 'bg-primary text-white'
                 }}
             {{ /if }}
             {{ class }}

resources/views/components/_logo.antlers.html

@@ -5,7 +5,6 @@
 
 <!-- /components/_logo.antlers.html -->
 <a
-    class="p-2 -m-2 hover:scale-125 hover:rotate-2 motion-safe:transition-transform focus:outline-none focus-visible:ring-2 ring-primary"
     aria-label="Logo {{ config:app:name }}"
     href="{{ site:url }}"
 >

resources/views/components/_video.antlers.html

@@ -30,7 +30,7 @@
                 x-show="!$store.consentBanner.getConsent() || !$store.consentBanner.getConsentValue('embeds')"
                 class="absolute z-10 inset-0 p-6 flex justify-center items-center bg-neutral/10 text-neutral/80"
             >
-                <a @click.prevent="$store.consentBanner.revokeConsent()" href="#" class="p-1 -m-1 underline focus:outline-none focus-visible:ring-2 ring-primary">
+                <a @click.prevent="$store.consentBanner.revokeConsent()" href="#" class="underline">
                     {{ trans:strings.consent_embeds_disabled }}
                 </a>
             </div>

resources/views/layout/_footer.antlers.html

@@ -21,7 +21,7 @@
         {{ if social_media:social_media }}
             <div class="flex space-x-2">
                 {{ social_media:social_media }}
-                    <a class="p-1 -m-1 text-neutral hover:text-primary focus:outline-none focus-visible:ring-2 ring-primary" href="{{ prefix }}{{ handle }}" rel="noopener{{ type == 'mastodon' ?= ' me' }}" aria-label="{{ config:app:name }} {{ trans:strings.on }} {{ type | title }}" target="_blank">{{ svg :src="type" class="w-3 h-3 overflow-visible fill-current" alt="" aria-hidden="true" sanitize="true" }}</a>
+                    <a class="text-neutral" href="{{ prefix }}{{ handle }}" rel="noopener{{ type == 'mastodon' ?= ' me' }}" aria-label="{{ config:app:name }} {{ trans:strings.on }} {{ type | title }}" target="_blank">{{ svg :src="type" class="w-3 h-3 overflow-visible fill-current" alt="" aria-hidden="true" sanitize="true" }}</a>
                 {{ /social_media:social_media }}
             </div>
         {{ /if }}

resources/views/navigation/_main_desktop.antlers.html

@@ -17,7 +17,7 @@
             >
                 <a
                     class="
-                        p-1 -m-1 flex items-center font-bold text-sm hover:text-primary focus:outline-none focus-visible:ring-2 ring-primary
+                        flex items-center font-bold text-sm hover:text-primary
                         {{ is_current || is_parent
                             ? 'text-primary'
                             : 'text-neutral' }}
@@ -53,7 +53,7 @@
                             <li class="">
                                 <a
                                     class="
-                                        whitespace-nowrap py-2 px-1 -mx-1 block text-xs font-bold hover:text-primary focus:outline-none focus-visible:ring-2 ring-primary
+                                        whitespace-nowrap py-2 block text-xs font-bold hover:text-primary
                                         {{ is_current || is_parent
                                             ? 'text-primary'
                                             : 'text-neutral' }}

resources/views/navigation/_main_mobile.antlers.html

@@ -14,7 +14,7 @@
 >
     <button
         @click.prevent.stop="mobileNavOpen = !mobileNavOpen"
-        class="fixed bottom-0 right-0 z-30 flex items-center justify-center w-16 h-16 mr-8 text-xs font-bold text-white mb-safe rounded bg-primary focus:outline-none focus-visible:ring-2 ring-primary ring-offset-2"
+        class="fixed bottom-0 right-0 z-30 flex items-center justify-center w-16 h-16 mr-8 text-xs font-bold text-white mb-safe rounded bg-primary"
         :aria-label="
         mobileNavOpen
             ? '{{ trans:strings.nav_close }}'
@@ -38,7 +38,7 @@
                     class="leading-none"
                 >
                     <a
-                        class="w-full py-2 flex items-center space-x-1 text-lg font-bold hover:text-primary {{ is_current || is_parent ? 'text-primary' : 'text-neutral' }} focus:outline-none focus-visible:ring-2 ring-primary"
+                        class="w-full py-2 flex items-center space-x-1 text-lg font-bold hover:text-primary {{ is_current || is_parent ? 'text-primary' : 'text-neutral' }}"
                         {{ if children }}
                             href="#"
                             @click.prevent="subnavOpen = !subnavOpen"
@@ -68,7 +68,7 @@
                             {{ children }}
                                 <li class="{{ first ?= 'mt-2' }}">
                                     <a
-                                        class="block py-2 whitespace-nowrap font-bold hover:text-primary {{ is_current || is_parent ? 'text-primary' : 'text-neutral' }} focus:outline-none focus-visible:ring-2 ring-primary"
+                                        class="block py-2 whitespace-nowrap font-bold hover:text-primary {{ is_current || is_parent ? 'text-primary' : 'text-neutral' }}"
                                         href="{{ url }}">
                                         {{ title }}
                                     </a>

resources/views/page_builder/_cards.antlers.html

@@ -12,7 +12,7 @@
         {{ block:cards }}
             <article
                 class="
-                    flex flex-col justify-between items-start p-6 border border-neutral/10 shadow-lg rounded no-underline focus:outline-none focus-visible:ring-2 ring-offset-2 ring-primary
+                    flex flex-col justify-between items-start p-6 border border-neutral/10 shadow-lg rounded
                     {{ switch(
                         (total_results === 1) => 'md:col-span-8 md:col-start-3',
                         (total_results === 2) => 'md:col-span-6',

resources/views/page_builder/_form.antlers.html

@@ -22,7 +22,7 @@ <h3 class="mb-2 leading-5 font-bold text-red-700">{{ trans:strings.form_error }}
                             <ul class="list-disc list-inside marker:text-red-700">
                                 <template x-for="(error, index) in form.errors">
                                     <li>
-                                        <a :href="`#${index}`" @click.prevent="$focus.focus(document.querySelector(`#${index}`))" x-text="error" class="p-1 -m-1 rounded focus:outline-none focus-visible:ring-2 ring-red-700 text-red-700 underline"></a>
+                                        <a :href="`#${index}`" @click.prevent="$focus.focus(document.querySelector(`#${index}`))" x-text="error" class="underline text-red-700 focus-visible:outline-red-700"></a>
                                     </li>
                                 </template>
                             </ul>

resources/views/typography/_prose.antlers.html

@@ -13,10 +13,6 @@
         prose-a:decoration-primary
         prose-a:decoration-2
         hover:prose-a:text-primary
-        focus:prose-a:outline-none
-        focus-visible:prose-a:ring
-        focus-visible:prose-a:ring-primary
-        focus-visible:prose-a:rounded-sm
         prose-figure:my-0
         prose-pre:whitespace-pre-wrap
         max-w-none

resources/views/vendor/statamic/forms/fields/assets.antlers.html

@@ -2,7 +2,7 @@
 <input
     @change="form.{{ handle }} = Object.values($event.target.files)"
     :aria-invalid="form.invalid('{{ handle }}')"
-    class="w-full file:py-2 file:mr-4 file:px-4 file:border-2 file:border-solid file:border-primary file:bg-white file:text-primary file:text-xs file:uppercase file:tracking-widest file:font-bold file:rounded border-neutral focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary motion-safe:transition"
+    class="w-full file:py-2 file:mr-4 file:px-4 file:border-2 file:border-solid file:border-primary file:bg-white file:text-primary file:text-xs file:uppercase file:tracking-widest file:font-bold file:rounded border-neutral motion-safe:transition"
     type="file"
     {{ if max_files === 1 }}
         name="{{ handle }}"

resources/views/vendor/statamic/forms/fields/checkboxes.antlers.html

@@ -10,7 +10,7 @@
             <input
                 x-model="form.{{ handle }}"
                 @change="form.validate('{{ handle }}')"
-                class="mr-2 rounded border-neutral text-primary focus-visible:ring-2 focus-visible:ring-primary motion-safe:transition"
+                class="mr-2 rounded border-neutral text-primary focus-visible:ring-primary"
                 type="checkbox"
                 name="{{ handle }}[]"
                 value="{{ value }}"

resources/views/vendor/statamic/forms/fields/default.antlers.html

@@ -3,8 +3,8 @@
     x-model="form.{{ handle }}"
     @change="form.validate('{{ handle }}')"
     :aria-invalid="form.invalid('{{ handle }}')"
-    :class="{ 'border-red-600 focus-visible:border-red-600': form.invalid('{{ handle }}') }"
-    class="w-full rounded border-neutral focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary motion-safe:transition caret-primary"
+    :class="{ 'border-red-600': form.invalid('{{ handle }}') }"
+    class="w-full rounded border-neutral caret-primary focus-visible:ring-primary"
     id="{{ handle }}"
     name="{{ handle }}"
     type="{{ input_type ?? 'text' }}"

resources/views/vendor/statamic/forms/fields/radio.antlers.html

@@ -10,7 +10,7 @@
             <input
                 x-model="form.{{ handle }}"
                 @change="form.validate('{{ handle }}')"
-                class="mr-2 border-neutral text-primary focus-visible:border-primary focus-visible:ring-inset focus-visible:ring-primary motion-safe:transition"
+                class="mr-2 border-neutral text-primary focus-visible:ring-primary"
                 type="radio"
                 name="{{ handle }}"
                 value="{{ value }}"

resources/views/vendor/statamic/forms/fields/select.antlers.html

@@ -3,8 +3,8 @@
     x-model="form.{{ handle }}"
     @change="form.validate('{{ handle }}')"
     :aria-invalid="form.invalid('{{ handle }}')"
-    :class="{ 'border-red-600 focus-visible:border-red-600': form.invalid('{{ handle }}')}"
-    class="w-full rounded border-neutral focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary motion-safe:transition"
+    :class="{ 'border-red-600': form.invalid('{{ handle }}')}"
+    class="w-full rounded border-neutral focus-visible:ring-primary"
     id="{{ handle }}"
     name="{{ handle }}{{ multiple ?= "[]" }}"
     {{ instructions_position == 'below' ?= 'aria-describedBy="{handle}-instructions"' }}

resources/views/vendor/statamic/forms/fields/textarea.antlers.html

@@ -3,8 +3,8 @@
     x-model="form.{{ handle }}"
     @change="form.validate('{{ handle }}')"
     :aria-invalid="form.invalid('{{ handle }}')"
-    :class="{ 'border-red-600 focus-visible:border-red-600': form.invalid('{{ handle }}') }"
-    class="w-full h-32 rounded border-neutral focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary motion-safe:transition caret-primary"
+    :class="{ 'border-red-600': form.invalid('{{ handle }}') }"
+    class="w-full h-32 rounded border-neutral caret-primary focus-visible:ring-primary"
     id="{{ handle }}"
     name="{{ handle }}"
     rows="5"

resources/views/vendor/statamic/forms/fields/toggle.antlers.html

@@ -8,7 +8,7 @@
 >
     <input type="hidden" name="{{ handle }}" value="0">
     <input
-        class="mr-2 inline-flex rounded border-neutral text-primary focus-visible:ring-2 focus-visible:ring-primary motion-safe:transition"
+        class="mr-2 inline-flex rounded border-neutral text-primary focus-visible:ring-primary"
         type="checkbox"
         name="{{ handle }}"
         value="1"
@@ -20,9 +20,9 @@
             {{ trans :key="inline_label" }}
             {{ if handle === 'consent' }}
                 {{ if configuration:privacy_statement_type == 'entry' }}
-                    <a class="px-1 -m-1 underline rounded hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-primary" href="{{ configuration:privacy_statement_entry:url }}">{{ trans:strings.consent_learn_more }}</a>
+                    <a class="underline hover:text-primary" href="{{ configuration:privacy_statement_entry:url }}">{{ trans:strings.consent_learn_more }}</a>
                 {{ elseif configuration:privacy_statement_type == 'pdf' }}
-                    <a class="px-1 -m-1 underline rounded hover:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-primary" href="{{ configuration:privacy_statement_asset }}" target="_blank">{{ trans:strings.consent_learn_more }}</a>
+                    <a class="underline hover:text-primary" href="{{ configuration:privacy_statement_asset }}" target="_blank">{{ trans:strings.consent_learn_more }}</a>
                 {{ /if }}
             {{ /if }}
         </span>

tailwind.config.site.js

@@ -88,8 +88,19 @@ module.exports = {
             fontFamily: theme('fontFamily.sans'),
             // fontFamily: theme('fontFamily.serif'),
         },
+        'a, button': {
+            '&:focus': {
+              outline: '2px solid transparent',
+              outlineOffset: '2px'
+            },
+            '&:focus-visible': {
+              outlineWidth: 2,
+              outlineColor: "theme(colors.primary.DEFAULT / 1)",
+              outlineOffset: '2px'
+            }
+        },
         'mark': {
-          backgroundColor: theme('colors.primary.DEFAULT'),
+          backgroundColor: "theme('colors.primary.DEFAULT / 1')",
           color: theme('colors.white')
         },
       }),