From 6a6dd08a807f70eb5c625c1b8630dfea3dc27ba2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A9lix=20Girault?= Date: Mon, 16 Sep 2024 16:42:02 +0200 Subject: [PATCH] Improved default styles * harmonized color names * fixed issues when closing modals by clicking the backdrop * fixed focus issue on toggle buttons (using `aria-disabled` instead of `disabled` prevents losing focus when the state changes) --- dist/example-assets/style.css | 5 +- src/styles/orejime.scss | 169 ++++++++++++++---------- src/ui/themes/dsfr/Modal.tsx | 119 ++++++++--------- src/ui/themes/orejime/Banner.tsx | 2 +- src/ui/themes/orejime/GlobalConsent.tsx | 6 +- src/ui/themes/orejime/Icons.tsx | 7 +- src/ui/themes/orejime/Purpose.tsx | 16 +-- 7 files changed, 176 insertions(+), 148 deletions(-) diff --git a/dist/example-assets/style.css b/dist/example-assets/style.css index a410c21b..11ee91ad 100644 --- a/dist/example-assets/style.css +++ b/dist/example-assets/style.css @@ -291,5 +291,8 @@ a.Tile:active { } .orejime-Env { - --orejime-background: #eff9fd !important; + --orejime-color-background: #eff9fd !important; + --orejime-color-text: var(--on-surface) !important; + --orejime-color-interactive: var(--interactive) !important; + --orejime-color-shadow: 2, 10, 15 !important; } diff --git a/src/styles/orejime.scss b/src/styles/orejime.scss index 79ccaafb..8108889a 100644 --- a/src/styles/orejime.scss +++ b/src/styles/orejime.scss @@ -1,5 +1,3 @@ -$orejime-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 5px 5px 10px 0 rgba(0, 0, 0, 0.19) !default; - $orejime-breakpoint-notice: 990px !default; // micro css reset for everything orejime related @@ -7,7 +5,7 @@ $orejime-breakpoint-notice: 990px !default; margin: 0; padding: 0; border: 0; - line-height: var(--orejime-space-1); + line-height: var(--orejime-space-m); font-family: var(--orejime-font-family); font-size: inherit; color: inherit; @@ -20,21 +18,25 @@ $orejime-breakpoint-notice: 990px !default; } .orejime-Env { - --orejime-space-1: 1.4em; - --orejime-space-2: calc(2 * var(--orejime-space-1)); - --orejime-space-05: calc(var(--orejime-space-1) / 2); - --orejime-space-025: calc(var(--orejime-space-1) / 4); + --orejime-space-m: 1.4em; + --orejime-space-l: calc(2 * var(--orejime-space-m)); + --orejime-space-s: calc(var(--orejime-space-m) / 2); + --orejime-space-xs: calc(var(--orejime-space-m) / 4); --orejime-font-size-small: 0.8rem; --orejime-font-family: sans-serif; - --orejime-gap: 1ch; - --orejime-radius: calc(var(--orejime-space-1) / 4); - --orejime-overlay-background: rgba(0,0,0,0.5); - --orejime-background: #fff; - --orejime-color: #222; - --orejime-color-subdued: #555; - --orejime-color-interactive: #d6084f; + --orejime-radius: calc(var(--orejime-space-m) / 4); + --orejime-color-background: #fff; + --orejime-color-text: #222; + --orejime-color-subdued: #666; + --orejime-color-interactive: royalblue; + --orejime-color-on-interactive: #fff; + --orejime-color-backdrop: rgba(0, 0, 0, 0.5); + --orejime-color-shadow: 0, 0, 0; + --orejime-shadow: + 0.1em 0.2em 0.4em rgba(var(--orejime-color-shadow), 0.25), + 0.2em 0.6em 1.5em rgba(var(--orejime-color-shadow), 0.2); --orejime-banner-max-width: 45ch; - --orejime-modal-max-width: 75ch; + --orejime-modal-max-width: 65ch; all: unset; @@ -50,39 +52,48 @@ $orejime-breakpoint-notice: 990px !default; } .orejime-Button { - box-shadow: inset 0 0 0 2px currentColor; margin: 0; border: 0; border-radius: var(--orejime-radius); - padding: var(--orejime-space-025) var(--orejime-space-05); - color: var(--orejime-color-interactive); - background: transparent; + padding: var(--orejime-space-xs) var(--orejime-space-s); + color: var(--orejime-color-on-interactive); + background: var(--orejime-color-interactive); font: inherit; cursor: pointer; +} - &[disabled] { - color: var(--orejime-color-subdued); - } +.orejime-Button:is([disabled], [aria-disabled="true"]) { + background: var(--orejime-color-subdued); +} + +.orejime-Button:not(:is([disabled], [aria-disabled="true"])):is(:hover, :focus) { + outline: 1px solid var(--orejime-color-interactive); + outline-offset: 1px; +} + +.orejime-Button:not(:is([disabled], [aria-disabled="true"])):active { + outline-width: 2px; } -.orejime-Button:not([disabled]):hover, -.orejime-Button:not([disabled]):focus { - box-shadow: inset 0 0 0 2px currentColor, 0 0 0 1px currentColor; +.orejime-ButtonList { + display: flex; + flex-wrap: wrap; + gap: 0.5ch; } .orejime-Banner { - background: var(--orejime-background); - color: var(--orejime-color); + background: var(--orejime-color-background); + color: var(--orejime-color-text); position: fixed; z-index: 1000; width: 100%; bottom: 0; @media (min-width: $orejime-breakpoint-notice) { - box-shadow: $orejime-box-shadow; + box-shadow: var(--orejime-shadow); border-radius: var(--orejime-radius); - bottom: var(--orejime-space-1); - right: var(--orejime-space-1); + bottom: var(--orejime-space-m); + right: var(--orejime-space-m); max-width: var(--orejime-banner-max-width); } @@ -102,7 +113,7 @@ $orejime-breakpoint-notice: 990px !default; } .orejime-Banner-body { - padding: var(--orejime-space-1); + padding: var(--orejime-space-m); } .orejime-Banner-logo { @@ -110,10 +121,10 @@ $orejime-breakpoint-notice: 990px !default; } .orejime-Banner-title { - margin-bottom: var(--orejime-space-05); + margin-bottom: var(--orejime-space-s); font-weight: bold; font-size: 1em; - line-height: var(--orejime-space-1); + line-height: var(--orejime-space-m); } .orejime-Banner-description { @@ -125,15 +136,12 @@ $orejime-breakpoint-notice: 990px !default; } .orejime-Banner-changes { - margin-top: var(--orejime-space-05); + margin-top: var(--orejime-space-s); font-weight: bold; } .orejime-Banner-actions { - display: flex; - flex-wrap: wrap; - gap: var(--orejime-gap); - margin-top: var(--orejime-space-1); + margin-top: var(--orejime-space-s); } .orejime-Banner-actionItem { @@ -158,7 +166,7 @@ $orejime-breakpoint-notice: 990px !default; .orejime-ModalOverlay, .orejime-BannerOverlay { z-index: 1000; - background: var(--orejime-overlay-background); + background: var(--orejime-color-backdrop); position: fixed; top: 0; left: 0; @@ -166,34 +174,38 @@ $orejime-breakpoint-notice: 990px !default; bottom: 0; } -.orejime-ModalWrapper { +.orejime-ModalOverlay { z-index: 1001; - position: fixed; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - margin: 0; - width: var(--orejime-modal-max-width); + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.orejime-ModalWrapper { + box-shadow: var(--orejime-shadow); + border-radius: var(--orejime-radius); max-width: 100%; max-height: 100%; overflow: auto; } .orejime-Modal { - padding: var(--orejime-space-2); - background: var(--orejime-background); - color: var(--orejime-color); - border-radius: var(--orejime-radius); - box-shadow: $orejime-box-shadow; + position: relative; + padding: var(--orejime-space-l); + max-width: var(--orejime-modal-max-width); + background: var(--orejime-color-background); + color: var(--orejime-color-text); } .orejime-Modal-header { - margin-bottom: calc(var(--orejime-space-1) + var(--orejime-space-05)); + margin-bottom: calc(var(--orejime-space-m) + var(--orejime-space-s)); } .orejime-Modal-title { display: block; - margin: 0 0 var(--orejime-space-05) 0; + margin: 0 0 var(--orejime-space-s) 0; font-size: 2em; font-weight: bold; } @@ -201,19 +213,28 @@ $orejime-breakpoint-notice: 990px !default; .orejime-Modal-closeButton { border: none; background: none; - color: inherit; + color: var(--orejime-color-subdued); position: absolute; - top: calc(-1 * var(--orejime-space-1)); - right: calc(-1 * var(--orejime-space-1)); + top: var(--orejime-space-s); + right: var(--orejime-space-s); + padding: var(--orejime-space-s); + cursor: pointer; } .orejime-CloseIcon { + display: block; stroke: currentColor; + stroke-width: 2px; width: 1em; + height: 1em; +} + +.orejime-Modal-closeButton:is(:hover, :focus) .orejime-CloseIcon { + color: var(--orejime-color-text); } .orejime-Modal-body { - margin-bottom: var(--orejime-space-2); + margin-bottom: var(--orejime-space-l); } .orejime-Modal-description { @@ -225,7 +246,7 @@ $orejime-breakpoint-notice: 990px !default; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; - gap: var(--orejime-gap); + gap: 1ch; } .orejime-Modal-poweredByLink { @@ -234,10 +255,7 @@ $orejime-breakpoint-notice: 990px !default; } .orejime-PurposeToggles { - display: flex; - flex-wrap: wrap; - gap: var(--orejime-gap); - margin-bottom: var(--orejime-space-1); + margin-bottom: var(--orejime-space-m); } .orejime-PurposeList { @@ -245,11 +263,18 @@ $orejime-breakpoint-notice: 990px !default; } .orejime-Purpose { - margin-top: var(--orejime-space-05); + display: grid; + grid-template: + 'input label' + 'empty description' + 'empty children' + / min-content auto; + gap: 0 1ch; + margin-top: var(--orejime-space-s); } -.orejime-Purpose .orejime-Purpose { - padding-left: var(--orejime-space-2); +.orejime-Purpose-label { + grid-area: label; } .orejime-Purpose-title { @@ -258,7 +283,7 @@ $orejime-breakpoint-notice: 990px !default; } .orejime-Purpose-description { - padding-left: var(--orejime-space-2); + grid-area: description; color: var(--orejime-color-subdued); white-space: pre-line; } @@ -283,10 +308,10 @@ $orejime-breakpoint-notice: 990px !default; } .orejime-Purpose-input { - float: left; - margin-right: var(--orejime-space-1); - width: var(--orejime-space-1); - height: var(--orejime-space-1); + grid-area: input; + align-self: center; + width: var(--orejime-space-m); + height: var(--orejime-space-m); appearance: revert; background: revert; accent-color: var(--orejime-color-interactive); @@ -295,3 +320,7 @@ $orejime-breakpoint-notice: 990px !default; .orejime-Purpose-input:disabled { accent-color: var(--orejime-color-subdued); } + +.orejime-Purpose-children { + grid-area: children; +} diff --git a/src/ui/themes/dsfr/Modal.tsx b/src/ui/themes/dsfr/Modal.tsx index 26bec562..da88f66e 100644 --- a/src/ui/themes/dsfr/Modal.tsx +++ b/src/ui/themes/dsfr/Modal.tsx @@ -20,75 +20,76 @@ const Modal: ModalComponent = ({ isAlert={isForced} onRequestClose={onClose} htmlClassName="fr-no-scroll" - portalClassName="fr-modal fr-modal--opened" - overlayClassName="fr-container fr-container--fluid fr-container-md" - className="fr-grid-row fr-grid-row--center" + overlayClassName="fr-modal fr-modal--opened" + className="fr-container fr-container--fluid fr-container-md" labelId='fr-consent-modal-title' > -
-
-
- {isForced ? null : ( - - )} -
+
+
+
+
+ {isForced ? null : ( + + )} +
-
-

- {t.modal.title} -

+
+

+ {t.modal.title} +

+ +
+ {isForced && needsUpdate ? ( +

+ {t.misc.updateNeeded} +

+ ) : null} -
- {isForced && needsUpdate ? (

- {t.misc.updateNeeded} + {template(t.modal.description, { + privacyPolicy: ( + + {t.modal.privacyPolicyLabel} + + ) + })}

- ) : null} +
-

- {template(t.modal.description, { - privacyPolicy: ( - - {t.modal.privacyPolicyLabel} - - ) - })} -

-
+
+ {children} -
- {children} +
    +
  • + +
    • +
+
-
    -
  • - -
    • -
+

+ +

- -

- -

diff --git a/src/ui/themes/orejime/Banner.tsx b/src/ui/themes/orejime/Banner.tsx index 3231c622..01b9f161 100644 --- a/src/ui/themes/orejime/Banner.tsx +++ b/src/ui/themes/orejime/Banner.tsx @@ -71,7 +71,7 @@ const Banner: BannerComponent = ({

{t.misc.updateNeeded}

)} -
    +