diff --git a/web/app/themes/adeliom/assets/scripts/global.ts b/web/app/themes/adeliom/assets/scripts/global.ts index fc8ef03..0203b4b 100644 --- a/web/app/themes/adeliom/assets/scripts/global.ts +++ b/web/app/themes/adeliom/assets/scripts/global.ts @@ -1,4 +1,5 @@ import "@scripts/navigations/menu"; +import "@scripts/navigations/keyboard"; import Alpine from "alpinejs"; diff --git a/web/app/themes/adeliom/assets/scripts/navigations/keyboard.ts b/web/app/themes/adeliom/assets/scripts/navigations/keyboard.ts new file mode 100644 index 0000000..1d795a8 --- /dev/null +++ b/web/app/themes/adeliom/assets/scripts/navigations/keyboard.ts @@ -0,0 +1,17 @@ +const classes = { + tabActive: "tab-active", +}; + +/* +Ajout d'une classe sur le body lorsque l'utilisateur navigue avec la touche tab +*/ +document.addEventListener("keyup", (e) => { + e.keyCode == 9 && + !document.body.classList.contains(classes.tabActive) && + document.body.classList.add(classes.tabActive); +}); + +document.addEventListener("click", () => { + document.body.classList.contains(classes.tabActive) && + document.body.classList.remove(classes.tabActive); +}); diff --git a/web/app/themes/adeliom/assets/styles/tailwind/components/action/button.pcss b/web/app/themes/adeliom/assets/styles/tailwind/components/action/button.pcss new file mode 100644 index 0000000..bb548c2 --- /dev/null +++ b/web/app/themes/adeliom/assets/styles/tailwind/components/action/button.pcss @@ -0,0 +1,15 @@ +@layer components { + .btn { + @apply relative flex items-center justify-center gap-2 transition-colors; + + /* Primary button */ + &--primary { + @apply text-red-600; + } + } + + .skip-link { + @apply pointer-events-none absolute top-1 left-1 overflow-hidden opacity-0; + @apply keyboard:focus:pointer-events-auto keyboard:focus:opacity-100; + } +} diff --git a/web/app/themes/adeliom/assets/styles/tailwind/components/action/link.pcss b/web/app/themes/adeliom/assets/styles/tailwind/components/action/link.pcss new file mode 100644 index 0000000..0f94459 --- /dev/null +++ b/web/app/themes/adeliom/assets/styles/tailwind/components/action/link.pcss @@ -0,0 +1,5 @@ +@layer components { + a { + @apply keyboard:focus:outline-0 keyboard:focus:ring keyboard:focus:ring-black; + } +} diff --git a/web/app/themes/adeliom/assets/styles/tailwind/components/components.pcss b/web/app/themes/adeliom/assets/styles/tailwind/components/components.pcss index 1ab3bf8..91cdeef 100644 --- a/web/app/themes/adeliom/assets/styles/tailwind/components/components.pcss +++ b/web/app/themes/adeliom/assets/styles/tailwind/components/components.pcss @@ -1,5 +1,10 @@ -@layer components { - .my-component { - display: block; - } -} +@import "action/button.pcss"; +@import "action/link.pcss"; + +@import "overlay/modal.pcss"; + +@import "structure/list.pcss"; + +@import "typography/heading.pcss"; +@import "typography/text.pcss"; +@import "typography/wysiwyg.pcss"; diff --git a/web/app/themes/adeliom/assets/styles/tailwind/components/modals.pcss b/web/app/themes/adeliom/assets/styles/tailwind/components/overlay/modal.pcss similarity index 100% rename from web/app/themes/adeliom/assets/styles/tailwind/components/modals.pcss rename to web/app/themes/adeliom/assets/styles/tailwind/components/overlay/modal.pcss diff --git a/web/app/themes/adeliom/assets/styles/tailwind/components/structure/list.pcss b/web/app/themes/adeliom/assets/styles/tailwind/components/structure/list.pcss new file mode 100644 index 0000000..dd2e20e --- /dev/null +++ b/web/app/themes/adeliom/assets/styles/tailwind/components/structure/list.pcss @@ -0,0 +1,21 @@ +@layer components { + .list { + @apply list-inside space-y-1; + + &--none { + @apply list-none; + } + + &--disc { + @apply list-disc; + + li { + @apply marker:mr-2 marker:text-black; + } + } + + &--decimal { + @apply list-decimal; + } + } +} diff --git a/web/app/themes/adeliom/assets/styles/tailwind/components/typography/heading.pcss b/web/app/themes/adeliom/assets/styles/tailwind/components/typography/heading.pcss new file mode 100644 index 0000000..4b1eb61 --- /dev/null +++ b/web/app/themes/adeliom/assets/styles/tailwind/components/typography/heading.pcss @@ -0,0 +1,37 @@ +@layer components { + .heading { + @apply dark:text-white; + } + + .heading-1 { + @apply text-5xl md:text-6xl lg:text-7xl; + } + + .heading-2 { + @apply text-4xl md:text-5xl lg:text-6xl; + } + + .heading-3 { + @apply text-3xl md:text-4xl lg:text-5xl; + } + + .heading-4 { + @apply text-2xl md:text-3xl lg:text-4xl; + } + + .heading-5 { + @apply text-xl md:text-2xl lg:text-3xl; + } + + .heading-6 { + @apply text-lg md:text-xl lg:text-2xl; + } + + .heading-7 { + @apply text-base md:text-lg lg:text-xl; + } + + .headline { + @apply uppercase tracking-wider; + } +} diff --git a/web/app/themes/adeliom/assets/styles/tailwind/components/typography/text.pcss b/web/app/themes/adeliom/assets/styles/tailwind/components/typography/text.pcss new file mode 100644 index 0000000..dc02220 --- /dev/null +++ b/web/app/themes/adeliom/assets/styles/tailwind/components/typography/text.pcss @@ -0,0 +1,10 @@ +@layer components { + div, + p { + @apply dark:text-white; + } + + .tag { + @apply py-1 px-2 text-sm font-bold text-white; + } +} diff --git a/web/app/themes/adeliom/assets/styles/tailwind/components/typography/wysiwyg.pcss b/web/app/themes/adeliom/assets/styles/tailwind/components/typography/wysiwyg.pcss new file mode 100644 index 0000000..5147bbf --- /dev/null +++ b/web/app/themes/adeliom/assets/styles/tailwind/components/typography/wysiwyg.pcss @@ -0,0 +1,34 @@ +.wysiwyg { + .h2 { + @apply heading heading-2; + } + + .h3 { + @apply heading heading-3; + } + + .h4 { + @apply heading heading-4; + } + + .h5 { + @apply heading heading-5; + } + + a:not(.btn) { + @apply font-bold underline transition lg:hover:opacity-80; + } + + ul, + ol { + @apply flex flex-col gap-2; + } + + ul { + @apply list list--disc; + } + + ol { + @apply list list--decimal; + } +} diff --git a/web/app/themes/adeliom/assets/styles/tailwind/tailwind.pcss b/web/app/themes/adeliom/assets/styles/tailwind/tailwind.pcss index 000578d..6892dc3 100644 --- a/web/app/themes/adeliom/assets/styles/tailwind/tailwind.pcss +++ b/web/app/themes/adeliom/assets/styles/tailwind/tailwind.pcss @@ -3,7 +3,6 @@ @import "tailwindcss/components"; @import "components/components.pcss"; -@import "components/modals.pcss"; @import "tailwindcss/utilities"; @import "utilities/utilities.pcss"; diff --git a/web/app/themes/adeliom/tailwind.config.js b/web/app/themes/adeliom/tailwind.config.js index 0811adc..32b941a 100755 --- a/web/app/themes/adeliom/tailwind.config.js +++ b/web/app/themes/adeliom/tailwind.config.js @@ -24,14 +24,10 @@ module.exports = { clear: false, }, plugins: [ - require("tailwind-css-extensions")({ - base: ["assets/styles/tailwind/base/**/*.{css,pcss}"], // Glob paths to your bases - utilities: ["assets/styles/tailwind/utilities/**/*.{css,pcss}"], // Glob paths to your utilities - components: ["assets/styles/tailwind/components/**/*.{css,pcss}"], // Glob paths to your components - }), // Ajout de variants custom plugin(function ({ addVariant }) { addVariant('is-active', ['&.is-active', '.is-active &']); + addVariant('keyboard', '.tab-active &'); }), ], }; diff --git a/web/app/themes/adeliom/views/blocks/content/three-cards.html.twig b/web/app/themes/adeliom/views/blocks/content/three-cards.html.twig index f05660e..2063d84 100644 --- a/web/app/themes/adeliom/views/blocks/content/three-cards.html.twig +++ b/web/app/themes/adeliom/views/blocks/content/three-cards.html.twig @@ -1,6 +1,6 @@ {% embed "blocks/block.html.twig" %} {% block content %} - {% import "components/action/buttons/btn.html.twig" as button %} + {% import "components/action/button/btn.html.twig" as button %} {% import "components/typography/typography.html.twig" as typography %} {{ typography.heading({ fields, diff --git a/web/app/themes/adeliom/views/blocks/content/title-text.html.twig b/web/app/themes/adeliom/views/blocks/content/title-text.html.twig index 24e6973..b7ccaed 100755 --- a/web/app/themes/adeliom/views/blocks/content/title-text.html.twig +++ b/web/app/themes/adeliom/views/blocks/content/title-text.html.twig @@ -1,7 +1,7 @@ {% embed "blocks/block.html.twig" %} {% block content %} {% import "components/typography/typography.html.twig" as typography %} - {% import "components/action/buttons/btn.html.twig" as button %} + {% import "components/action/button/btn.html.twig" as button %}