From 369c6572cc5d363bd64652a1f739e30ffc6ea3fb Mon Sep 17 00:00:00 2001 From: Paul <94894596+paulAcato@users.noreply.github.com> Date: Thu, 9 Jan 2025 09:52:52 +0100 Subject: [PATCH] Www denhaag nl/reduce unused css (#1659) **Closing issues** --------- Co-authored-by: Marco <60465198+marcoderover@users.noreply.github.com> --- CODE_OF_CONDUCT.md | 2 +- components/Accordion/src/index.scss | 127 +- .../Accordion/src/stories/bem.stories.mdx | 428 +++--- components/Alert/src/index.scss | 120 +- components/Alert/src/stories/bem.stories.mdx | 150 +- components/AnchorCollapse/src/index.scss | 96 +- .../src/stories/bem.stories.mdx | 102 +- components/AnchorNavigation/src/index.scss | 58 +- .../src/stories/bem.stories.mdx | 72 +- components/ArticleMeta/src/index.scss | 28 +- components/AuthenticationBlock/src/index.scss | 56 +- .../src/stories/bem.stories.mdx | 258 ++-- components/BadgeCounter/src/index.scss | 2 +- .../BadgeCounter/src/stories/bem.stories.mdx | 10 +- components/Blockquote/src/index.scss | 47 +- .../Blockquote/src/stories/bem.stories.mdx | 14 +- .../Breadcrumb/src/DenhaagBreadcrumbs.js | 11 +- components/Breadcrumb/src/index.scss | 151 +- .../Breadcrumb/src/stories/bem.stories.mdx | 708 +++++---- components/Button/src/index.scss | 126 +- components/Button/src/stories/bem.stories.mdx | 462 +++--- components/ButtonGroup/src/index.scss | 5 +- .../ButtonGroup/src/stories/bem.stories.mdx | 10 +- components/Card/src/Card/card.scss | 189 +-- .../Card/src/CardActions/card-actions.scss | 8 +- components/Card/src/stories/react.stories.tsx | 11 - components/CardAuthentication/src/_mixin.scss | 64 +- .../CardAuthentication/src/story-template.tsx | 34 +- components/CardCalendar/src/index.scss | 157 +- .../CardCalendar/src/stories/bem.stories.mdx | 924 ++++++------ components/CardCase/README.md | 106 -- components/CardGroup/src/_mixin.scss | 13 +- components/CardGroup/src/index.scss | 15 +- components/CardNews/src/index.scss | 93 +- .../CardNews/src/stories/bem.stories.mdx | 80 +- components/Checkbox/src/index.scss | 7 +- .../Checkbox/src/stories/bem.stories.mdx | 214 +-- components/Conditions/src/index.scss | 125 +- .../Conditions/src/stories/bem.stories.mdx | 44 +- components/CtaDownload/src/index.scss | 59 +- .../CtaDownload/src/stories/bem.stories.mdx | 116 +- components/CtaEvent/src/index.scss | 64 +- .../CtaEvent/src/stories/bem.stories.mdx | 84 +- components/CtaImageContent/src/index.scss | 73 +- .../src/stories/bem.stories.mdx | 344 +++-- components/CtaLink/src/index.scss | 41 +- .../CtaLink/src/stories/bem.stories.mdx | 92 +- components/Datepicker/src/index.scss | 261 ++-- components/DescriptionList/src/index.scss | 84 +- .../src/stories/bem.stories.mdx | 34 +- components/Divider/src/index.scss | 12 +- .../Divider/src/stories/bem.stories.mdx | 12 +- components/DotIndicator/src/index.scss | 8 +- .../src/stories/react.stories.mdx | 8 +- components/DynamicContent/src/index.scss | 87 +- .../src/stories/bem.stories.mdx | 1266 ++++++++-------- components/EventDate/src/index.scss | 7 +- .../EventDate/src/stories/bem.stories.mdx | 6 +- components/FloatingContact/src/index.scss | 176 ++- .../src/stories/bem.stories.mdx | 560 +++---- components/FloatingContact/src/storybook.scss | 10 +- components/FormControlLabel/src/index.scss | 4 +- components/FormField/src/index.scss | 31 +- components/FormGroup/src/index.scss | 22 +- components/FormProgress/src/index.scss | 20 +- .../FormProgress/src/stories/bem.stories.mdx | 39 +- components/FullwidthSlider/src/index.scss | 476 +++--- .../src/stories/bem.stories.mdx | 674 ++++----- components/Header/src/index.scss | 37 +- components/Header/src/stories/bem.stories.mdx | 14 +- components/Hero/src/heroThemeImage.js | 4 +- components/Hero/src/index.scss | 373 +++-- components/Hero/src/stories/bem.stories.mdx | 166 +-- components/Hero/src/storybook.js | 9 +- components/Hero/src/storybook.scss | 8 +- components/HighlightedLinks/src/index.scss | 30 +- .../src/stories/bem.stories.mdx | 58 +- components/IconButton/src/index.scss | 18 +- components/Icons/src/index.scss | 7 +- .../IllustratedListBlock/src/index.scss | 27 +- .../src/stories/bem.stories.mdx | 42 +- components/Image/src/index.scss | 68 +- components/Image/src/stories/bem.stories.mdx | 128 +- components/ImageBanner/src/index.scss | 123 +- .../ImageBanner/src/stories/bem.stories.mdx | 188 ++- components/InlineCarousel/src/index.scss | 297 ++-- .../src/stories/bem.stories.mdx | 228 +-- components/Link/src/index.scss | 143 +- components/Link/src/stories/bem.stories.mdx | 916 ++++++------ components/LinkGrid/src/index.scss | 114 +- .../LinkGrid/src/stories/bem.stories.mdx | 1328 ++++++++--------- components/LinkGroup/src/index.scss | 84 +- .../LinkGroup/src/stories/bem.stories.mdx | 733 +++++---- components/List/src/list-item-icon.scss | 4 +- .../List/src/list-item-secondary-action.scss | 12 +- components/List/src/list-item-text.scss | 22 +- components/List/src/list-item.scss | 30 +- components/List/src/list-subheader.scss | 18 +- components/List/src/list.scss | 18 +- components/List/src/stories/bem.stories.mdx | 70 +- components/Menu/src/menu-button.scss | 37 +- components/Menu/src/menu.scss | 2 +- components/Menu/src/react.stories.mdx | 104 +- components/Modal/src/index.scss | 75 +- components/Modal/src/stories/bem.stories.mdx | 123 +- components/Note/src/index.scss | 38 +- components/Note/src/stories/bem.stories.mdx | 161 +- .../OrderedList/src/stories/bem.stories.mdx | 38 +- components/Page/src/index.scss | 6 +- components/Page/src/stories/bem.stories.mdx | 10 +- components/PageButtons/src/index.scss | 35 +- .../PageButtons/src/stories/bem.stories.mdx | 26 +- components/Pagination/src/index.scss | 41 +- .../Pagination/src/stories/bem.stories.mdx | 244 ++- components/PosttypeLabel/src/index.scss | 14 +- .../PosttypeLabel/src/stories/bem.stories.mdx | 4 +- components/Procedure/src/Step.scss | 3 +- .../Procedure/src/StepHeaderToggle.scss | 12 +- components/Procedure/src/StepHeading.scss | 40 +- components/Procedure/src/StepList.scss | 6 +- components/Procedure/src/StepMeta.scss | 8 +- components/Procedure/src/SubStep.scss | 2 +- components/Procedure/src/SubStepHeading.scss | 3 +- components/Procedure/src/index.scss | 81 +- .../Procedure/src/stories/bem.stories.mdx | 102 +- components/ProcessSteps/src/Step.scss | 6 +- components/ProcessSteps/src/StepHeader.scss | 4 +- components/ProcessSteps/src/StepHeading.scss | 21 +- .../ProcessSteps/src/StepHeadingLabel.scss | 12 +- components/ProcessSteps/src/StepList.scss | 9 +- components/ProcessSteps/src/StepMarker.scss | 44 +- components/ProcessSteps/src/SubStep.scss | 7 +- .../ProcessSteps/src/SubStepMarker.scss | 22 +- components/Radio/src/index.scss | 81 +- components/Radio/src/stories/bem.stories.mdx | 206 ++- components/ResponsiveContent/src/index.scss | 19 +- .../src/stories/bem.stories.mdx | 4 +- components/Sidenav/src/index.scss | 25 +- components/Tab/src/styles/mui-override.scss | 6 +- components/Tab/src/styles/tab-panel.scss | 6 +- components/Tab/src/styles/tab.scss | 21 +- components/Tab/src/styles/tabs.scss | 7 +- components/Table/src/index.scss | 54 +- components/Table/src/stories/bem.stories.mdx | 312 ++-- components/TextArea/src/index.scss | 19 +- components/TextField/src/index.scss | 19 +- .../Timeline/src/styles/mui-override.scss | 12 +- .../Timeline/src/styles/step-content.scss | 4 +- components/Timeline/src/styles/step-icon.scss | 21 +- .../Timeline/src/styles/step-label.scss | 8 +- components/Timeline/src/styles/step.scss | 13 +- components/Timeline/src/styles/timeline.scss | 6 +- components/Typography/src/heading.scss | 40 +- components/Typography/src/paragraph.scss | 2 +- .../src/stories/heading1.bem.stories.mdx | 10 +- .../src/stories/heading2.bem.stories.mdx | 14 +- .../src/stories/heading3.bem.stories.mdx | 14 +- .../src/stories/heading4.bem.stories.mdx | 14 +- .../src/stories/heading5.bem.stories.mdx | 14 +- .../src/stories/paragraph.bem.stories.mdx | 20 +- components/UnorderedList/src/index.scss | 32 +- .../UnorderedList/src/stories/bem.stories.mdx | 52 +- .../src/denhaag/space/space-meta.tokens.json | 227 +-- .../src/denhaag/space/space.tokens.json | 37 +- .../Common/src/openforms/color.tokens.json | 16 - .../denhaag/_form-control-label.tokens.json | 5 + .../src/denhaag/_form-field.tokens.json | 5 + .../src/denhaag/_form-group.tokens.json | 5 + .../src/denhaag/_form-input.tokens.json | 5 + .../src/denhaag/_form-progress.tokens.json | 5 + .../src/denhaag/accordion.tokens.json | 160 +- .../Components/src/denhaag/alert.tokens.json | 216 --- .../src/denhaag/anchor-collapse.tokens.json | 105 +- .../src/denhaag/anchor-navigation.tokens.json | 82 +- .../src/denhaag/article-meta.tokens.json | 46 +- .../denhaag/authentication-block.tokens.json | 48 +- .../src/denhaag/blockquote.tokens.json | 39 +- .../src/denhaag/breadcrumb.tokens.json | 196 +-- .../src/denhaag/button-group.tokens.json | 9 +- .../Components/src/denhaag/button.tokens.json | 79 +- .../src/denhaag/calendar.tokens.json | 229 +-- .../denhaag/card-authentication.tokens.json | 35 +- .../src/denhaag/card-group.tokens.json | 17 +- .../src/denhaag/card-news.tokens.json | 48 +- .../Components/src/denhaag/card.tokens.json | 71 +- .../src/denhaag/checkbox.tokens.json | 2 +- .../src/denhaag/conditions.tokens.json | 145 +- .../src/denhaag/cta-download.tokens.json | 80 +- .../src/denhaag/cta-event.tokens.json | 99 +- .../src/denhaag/cta-image-content.tokens.json | 64 +- .../src/denhaag/cta-link.tokens.json | 72 +- .../src/denhaag/datepicker.tokens.json | 96 +- .../src/denhaag/description-list.tokens.json | 120 +- .../src/denhaag/divider.tokens.json | 9 +- .../src/denhaag/dot-indicator.tokens.json | 10 +- .../src/denhaag/dynamic-content.tokens.json | 152 +- .../src/denhaag/eventdate.tokens.json | 6 +- .../src/denhaag/floating-contact.tokens.json | 255 +--- .../denhaag/form-control-label.tokens.json | 18 - .../src/denhaag/form-field.tokens.json | 35 - .../src/denhaag/form-group.tokens.json | 25 - .../src/denhaag/form-input.tokens.json | 12 - .../src/denhaag/form-progress.tokens.json | 30 - .../src/denhaag/fullwidth-slider.tokens.json | 313 +--- .../Components/src/denhaag/header.tokens.json | 36 +- .../Components/src/denhaag/hero.tokens.json | 492 +----- .../src/denhaag/highlighted-links.tokens.json | 14 +- .../src/denhaag/icon-button.tokens.json | 17 +- .../illustrated-list-block.tokens.json | 36 +- .../src/denhaag/image-banner.tokens.json | 209 +-- .../Components/src/denhaag/image.tokens.json | 114 +- .../src/denhaag/inline-carousel.tokens.json | 167 +-- .../src/denhaag/link-grid.tokens.json | 72 +- .../src/denhaag/link-group.tokens.json | 42 +- .../Components/src/denhaag/link.tokens.json | 71 +- .../Components/src/denhaag/list.tokens.json | 58 +- .../src/denhaag/menu-button.tokens.json | 25 +- .../Components/src/denhaag/menu.tokens.json | 4 +- .../Components/src/denhaag/modal.tokens.json | 129 +- .../Components/src/denhaag/note.tokens.json | 32 +- .../src/denhaag/page-buttons.tokens.json | 33 +- .../Components/src/denhaag/page.tokens.json | 14 +- .../src/denhaag/pagination.tokens.json | 62 +- .../src/denhaag/posttypelabel.tokens.json | 12 +- .../src/denhaag/procedure.tokens.json | 152 +- .../src/denhaag/process-steps.tokens.json | 80 +- .../Components/src/denhaag/radio.tokens.json | 48 +- .../denhaag/responsive-content.tokens.json | 18 +- .../src/denhaag/sidenav.tokens.json | 33 +- .../src/denhaag/step-marker.tokens.json | 139 +- .../Components/src/denhaag/table.tokens.json | 86 +- .../Components/src/denhaag/tabs.tokens.json | 30 +- .../src/denhaag/timeline.tokens.json | 56 +- .../src/denhaag/unordered-list.tokens.json | 37 +- .../src/openforms/alert.tokens.json | 15 - .../src/openforms/button.tokens.json | 23 - .../src/openforms/checkbox.tokens.json | 7 - .../src/openforms/field.tokens.json | 7 - .../src/openforms/helptext.tokens.json | 7 - .../src/openforms/layout.tokens.json | 8 - .../Components/src/openforms/link.tokens.json | 7 - .../src/openforms/page-footer.tokens.json | 7 - .../src/openforms/page-header.tokens.json | 7 - .../Components/src/utrecht/button.tokens.json | 10 +- .../src/utrecht/checkbox.tokens.json | 2 +- .../src/utrecht/data-list.tokens.json | 8 +- .../src/utrecht/form-field.tokens.json | 6 +- .../src/utrecht/paragraph.tokens.json | 6 +- .../Components/src/utrecht/table.tokens.json | 14 +- proprietary/Proprietary/src/color.tokens.json | 165 +- 250 files changed, 8695 insertions(+), 14659 deletions(-) delete mode 100644 components/CardCase/README.md delete mode 100644 proprietary/Common/src/openforms/color.tokens.json create mode 100644 proprietary/Components/src/denhaag/_form-control-label.tokens.json create mode 100644 proprietary/Components/src/denhaag/_form-field.tokens.json create mode 100644 proprietary/Components/src/denhaag/_form-group.tokens.json create mode 100644 proprietary/Components/src/denhaag/_form-input.tokens.json create mode 100644 proprietary/Components/src/denhaag/_form-progress.tokens.json delete mode 100644 proprietary/Components/src/denhaag/form-control-label.tokens.json delete mode 100644 proprietary/Components/src/denhaag/form-field.tokens.json delete mode 100644 proprietary/Components/src/denhaag/form-group.tokens.json delete mode 100644 proprietary/Components/src/denhaag/form-input.tokens.json delete mode 100644 proprietary/Components/src/denhaag/form-progress.tokens.json delete mode 100644 proprietary/Components/src/openforms/alert.tokens.json delete mode 100644 proprietary/Components/src/openforms/button.tokens.json delete mode 100644 proprietary/Components/src/openforms/checkbox.tokens.json delete mode 100644 proprietary/Components/src/openforms/field.tokens.json delete mode 100644 proprietary/Components/src/openforms/helptext.tokens.json delete mode 100644 proprietary/Components/src/openforms/layout.tokens.json delete mode 100644 proprietary/Components/src/openforms/link.tokens.json delete mode 100644 proprietary/Components/src/openforms/page-footer.tokens.json delete mode 100644 proprietary/Components/src/openforms/page-header.tokens.json diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index 4202f65339..2de5a4619b 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -1,6 +1,6 @@ # Contributor Covenant Code of Conduct -## Our Pledge +## Our Pledge! We as members, contributors, and leaders pledge to make participation in our community a harassment-free experience for everyone, regardless of age, body diff --git a/components/Accordion/src/index.scss b/components/Accordion/src/index.scss index 826c49826f..57cd229c5e 100644 --- a/components/Accordion/src/index.scss +++ b/components/Accordion/src/index.scss @@ -1,33 +1,33 @@ .denhaag-accordion { - font-family: var(--denhaag-accordion-font-family); + font-family: var(--denhaag-accordion-font-family, var(--denhaag-typography-sans-serif-font-family)); @media (prefers-reduced-motion: reduce) { - --denhaag-accordion-transition-duration: 0; - --denhaag-accordion-open-transition-duration: 0; + --denhaag-accordion-transition-duration: 0ms; + --denhaag-accordion-open-transition-duration: 0ms; } } .denhaag-accordion--reduced-motion { - --denhaag-accordion-transition-duration: 0; - --denhaag-accordion-open-transition-duration: 0; + --denhaag-accordion-transition-duration: 0ms; + --denhaag-accordion-open-transition-duration: 0ms; } .denhaag-accordion__container { - border: var(--denhaag-accordion-container-border); - position: var(--denhaag-accordion-container-position); + border: 1px solid var(--denhaag-color-grey-3); + position: relative; } .denhaag-accordion__container:last-child { - border-bottom-left-radius: var(--denhaag-accordion-container-border-radius); - border-bottom-right-radius: var(--denhaag-accordion-container-border-radius); + border-bottom-left-radius: var(--denhaag-accordion-container-border-radius, var(--denhaag-border-radius)); + border-bottom-right-radius: var(--denhaag-accordion-container-border-radius, var(--denhaag-border-radius)); border-top: var(--denhaag-accordion-container-border-top); } .denhaag-accordion__container:first-child { - --denhaag-accordion-container-border-top: var(--denhaag-accordion-container-border); + --denhaag-accordion-container-border-top: 1px solid var(--denhaag-color-grey-3); - border-top-left-radius: var(--denhaag-accordion-container-border-radius); - border-top-right-radius: var(--denhaag-accordion-container-border-radius); + border-top-left-radius: var(--denhaag-accordion-container-border-radius, var(--denhaag-border-radius)); + border-top-right-radius: var(--denhaag-accordion-container-border-radius, var(--denhaag-border-radius)); } .denhaag-accordion__container + .denhaag-accordion__container { @@ -35,34 +35,25 @@ } .denhaag-accordion__panel { - position: inherit; - width: inherit; + align-items: center; + display: flex; font-family: inherit; - font-weight: var(--denhaag-accordion-panel-font-weight, 400); - outline: var(--denhaag-accordion-panel-outline); - align-items: var(--denhaag-accordion-panel-align-items); - border-radius: var(--denhaag-accordion-panel-border-radius); - text-decoration: var(--denhaag-accordion-panel-text-decoration); - background-color: var(--denhaag-accordion-panel-background-color); - display: var(--denhaag-accordion-panel-display); - padding-block-start: var(--denhaag-accordion-panel-padding-block); - padding-block-end: var(--denhaag-accordion-panel-padding-block); - padding-inline-end: var(--denhaag-accordion-panel-padding-inline); - min-height: var(--denhaag-accordion-panel-min-height); - margin-block-start: var(--denhaag-accordion-panel-margin-block); - margin-block-end: var(--denhaag-accordion-panel-margin-block); - font-size: var(--denhaag-accordion-panel-font-size); + font-size: var(--denhaag-typography-scale-base-font-size); + font-weight: var(--denhaag-typography-weight-regular); + margin-block: 0; + min-height: var(--denhaag-space-4xl); + outline: 0; } .denhaag-accordion__panel > .denhaag-icon { color: inherit; - position: var(--denhaag-accordion-icon-position); + font-size: var(--denhaag-space-xl); + position: absolute; pointer-events: none; - top: var(--denhaag-accordion-icon-top); - right: var(--denhaag-accordion-icon-right); - transform: var(--denhaag-accordion-icon-transform); - transition: transform var(--denhaag-accordion-transition-duration, 0ms) - var(--denhaag-accordion-transition-timing-function, ease); + top: var(--denhaag-space-sm); + right: var(--denhaag-space-md); + transform: var(--denhaag-accordion-icon-transform, rotate(0deg)); + transition: transform var(--denhaag-accordion-transition-duration, 400ms) ease-in-out; } .denhaag-accordion__title { @@ -70,19 +61,13 @@ font-weight: inherit; font-size: inherit; background: inherit; - border: inherit; + border: none; color: inherit; // Fix for iPhone. text-align: inherit; hyphens: auto; - margin-block-start: 0; - margin-block-end: 0; - flex-grow: var(--denhaag-accordion-title-flex-grow); - padding-block-start: var(--denhaag-accordion-title-padding-block); - padding-block-end: var(--denhaag-accordion-title-padding-block); - padding-inline-start: var(--denhaag-accordion-title-padding-inline); - padding-inline-end: calc( - (var(--denhaag-accordion-title-padding-inline) * 2) + var(--denhaag-accordion-icon-width, 0) - ); + flex-grow: 1; + padding-block: var(--denhaag-spacing-sm); + padding-inline: var(--denhaag-space-md) calc((var(--denhaag-space-md) * 2) + var(--denhaag-space-xl)); } .denhaag-accordion__title--focus, @@ -90,12 +75,11 @@ .denhaag-accordion__panel--hover .denhaag-accordion__title, .denhaag-accordion__panel--hover .denhaag-icon, .denhaag-accordion__title:focus-visible { - color: var(--denhaag-accordion-panel-color); - outline: var(--denhaag-accordion-panel-outline); + color: var(--denhaag-color-green-3); + outline: 0; } -.denhaag-accordion__container--open .denhaag-accordion__title, -.denhaag-accordion__container--open .denhaag-icon { +.denhaag-accordion__container--open .denhaag-accordion__title { color: inherit; } @@ -108,24 +92,21 @@ .denhaag-accordion__title:focus-visible, .denhaag-accordion__title:focus-visible + .denhaag-icon { - color: var(--denhaag-accordion-panel-color); - outline: var(--denhaag-accordion-panel-outline); + color: var(--denhaag-color-green-3); + outline: 0; } .denhaag-accordion__container--open .denhaag-accordion__panel--hover .denhaag-accordion__title, -.denhaag-accordion__container--open .denhaag-accordion__panel--hover .denhaag-icon { - color: var(--denhaag-accordion-container-open-color); -} - +.denhaag-accordion__container--open .denhaag-accordion__panel--hover .denhaag-icon, .denhaag-accordion__container--open .denhaag-accordion__panel:hover .denhaag-accordion__title, .denhaag-accordion__container--open .denhaag-accordion__panel:hover .denhaag-icon { - color: var(--denhaag-accordion-container-open-color); + color: var(--denhaag-color-green-4); } .denhaag-accordion__panel:hover .denhaag-accordion__title:not([disabled]), .denhaag-accordion__panel:hover .denhaag-accordion__title:not([disabled]) + .denhaag-icon { - color: var(--denhaag-accordion-panel-color); - outline: var(--denhaag-accordion-panel-outline); + color: var(--denhaag-color-green-3); + outline: 0; } .denhaag-accordion__title--disabled::before, @@ -136,49 +117,43 @@ position: absolute; top: 0; left: 0; - background-color: var(--denhaag-accordion-title-disabled-background-color); + background-color: var(--denhaag-color-grey-1); z-index: -1; } .denhaag-accordion__title--focus::after, .denhaag-accordion__title:focus-visible::after { - border-radius: var(--denhaag-accordion-title-focus-border-radius); + border-radius: var(--denhaag-border-radius); content: ""; height: 100%; left: 0; - outline: var(--denhaag-accordion-title-focus-outline); + outline: var(--denhaag-focus-border); position: absolute; top: 0; width: 100%; } .denhaag-accordion__container--open { - --denhaag-accordion-title-color: var(--denhaag-accordion-container-open-title-color); - --denhaag-accordion-icon-color: var(--denhaag-accordion-container-open-icon-color); - --denhaag-accordion-icon-transform: var(--denhaag-accordion-container-open-icon-transform); - --denhaag-accordion-transition-duration: var(--denhaag-accordion-open-transition-duration); - --denhaag-accordion-transition-timing-function: var(--denhaag-accordion-open-transition-timing-function); + --denhaag-accordion-icon-transform: rotate(-180deg); + --denhaag-accordion-transition-duration: var(--denhaag-accordion-open-transition-duration, 500ms); --denhaag-accordion-details-height: var(--denhaag-accordion-details-max-height, 100%); // Value set by JS. } .denhaag-accordion__container--open .denhaag-accordion__panel { - --denhaag-accordion-panel-font-weight: var(--denhaag-accordion-container-open-panel-font-weight); + --denhaag-accordion-panel-font-weight: var(--denhaag-typography-weight-bold); - color: var(--denhaag-accordion-container-open-panel-color); + color: var(--denhaag-accordion-container-open-panel-color, var(--denhaag-color-green-3)); } .denhaag-accordion__details { - max-height: var(--denhaag-accordion-details-height, 0); + display: none; + max-height: var(--denhaag-accordion-details-height); overflow: hidden; - padding-inline-end: var(--denhaag-accordion-details-margin-inline-end); - transition: max-height var(--denhaag-accordion-transition-duration, 0ms) - var(--denhaag-accordion-transition-timing-function, ease); - display: var(--denhaag-accordion-details-display); + padding-block-start: var(--denhaag-space-3xs); + transition: max-height var(--denhaag-accordion-transition-duration, 400ms) ease-in-out; } .denhaag-accordion__details-content { - padding-block-start: var(--denhaag-accordion-details-content-padding-block-start); - padding-block-end: var(--denhaag-accordion-details-content-padding-block-end); - padding-inline-start: var(--denhaag-accordion-details-content-padding-inline); - padding-inline-end: var(--denhaag-accordion-details-content-padding-inline); + padding-block: 0 var(--denhaag-space-md); + padding-inline: var(--denhaag-space-md); } diff --git a/components/Accordion/src/stories/bem.stories.mdx b/components/Accordion/src/stories/bem.stories.mdx index c0a3b3ca7e..cd452d46b6 100644 --- a/components/Accordion/src/stories/bem.stories.mdx +++ b/components/Accordion/src/stories/bem.stories.mdx @@ -32,21 +32,20 @@ import readme from "../../README.md"; ### Default - {/* eslint-disable react/no-unknown-property */} -
-
-

+
+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-

+

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec justo nisi, tincidunt vel nulla et, tristique ornare enim. Vestibulum accumsan ac nibh sit amet fringilla. Vestibulum efficitur mattis tempus. Duis pretium et erat sit amet fermentum. Vivamus blandit euismod elit et aliquam. Vestibulum a lectus nibh. Focus me Quisque pharetra tellus a lacinia ultricies. Maecenas sed aliquet ipsum. Curabitur ultricies viverra ante sit amet consectetur.

-

+

Etiam a egestas dolor. Morbi at lobortis orci. Phasellus vel magna dignissim, dictum neque vel, rutrum augue. Nunc egestas Focus me too a tortor non euismod. Integer ornare purus at ex porttitor tincidunt. Curabitur sit amet rutrum orci, molestie auctor elit. Vestibulum sit amet pulvinar @@ -136,18 +135,18 @@ import readme from "../../README.md";

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

@@ -179,27 +178,25 @@ import readme from "../../README.md";
- {/* eslint-enable react/no-unknown-property */} ### Disabled - {/* eslint-disable react/no-unknown-property */} -
-
-

+
+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

@@ -314,27 +311,25 @@ import readme from "../../README.md";
- {/* eslint-enable react/no-unknown-property */} ### Focus - {/* eslint-disable react/no-unknown-property */} -
-
-

+
+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

@@ -448,27 +443,25 @@ import readme from "../../README.md";
- {/* eslint-enable react/no-unknown-property */} ### Hover - {/* eslint-disable react/no-unknown-property */} -
-
-

+
+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

@@ -582,27 +575,25 @@ import readme from "../../README.md";
- {/* eslint-enable react/no-unknown-property */} ### Open - {/* eslint-disable react/no-unknown-property */} -
-
-

+
+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

@@ -716,27 +707,25 @@ import readme from "../../README.md";
- {/* eslint-enable react/no-unknown-property */} ### Open - hover - {/* eslint-disable react/no-unknown-property */} -
-
-

+
+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

@@ -850,27 +839,25 @@ import readme from "../../README.md";
- {/* eslint-enable react/no-unknown-property */} ### Open - focus - {/* eslint-disable react/no-unknown-property */} -
-
-

+
+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

@@ -984,27 +971,25 @@ import readme from "../../README.md";
- {/* eslint-enable react/no-unknown-property */} ### Reduced motion - {/* eslint-disable react/no-unknown-property */} -
-
-

+
+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

-

+

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec justo nisi, tincidunt vel nulla et, tristique ornare enim. Vestibulum accumsan ac nibh sit amet fringilla. Vestibulum efficitur mattis tempus. Duis pretium et erat sit amet fermentum. Vivamus blandit euismod elit et aliquam. Vestibulum a lectus nibh. Quisque pharetra tellus a lacinia ultricies. Maecenas sed aliquet ipsum. Curabitur ultricies viverra ante sit amet consectetur.

-

+

Etiam a egestas dolor. Morbi at lobortis orci. Phasellus vel magna dignissim, dictum neque vel, rutrum augue. Nunc egestas a tortor non euismod. Integer ornare purus at ex porttitor tincidunt. Curabitur sit amet rutrum orci, molestie auctor elit. Vestibulum sit amet pulvinar ligula. Suspendisse ultricies egestas @@ -1093,18 +1078,18 @@ import readme from "../../README.md";

-
-

+
+

-

+

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.

@@ -1136,5 +1121,4 @@ import readme from "../../README.md";
- {/* eslint-enable react/no-unknown-property */} diff --git a/components/Alert/src/index.scss b/components/Alert/src/index.scss index 61b495a62b..453e14fee5 100644 --- a/components/Alert/src/index.scss +++ b/components/Alert/src/index.scss @@ -1,31 +1,32 @@ .denhaag-alert { - border-width: 0; - border-radius: var(--denhaag-alert-border-radius); - padding-inline-start: var(--denhaag-alert-padding-inline-start); - padding-inline-end: var(--denhaag-alert-padding-inline-end); - padding-block-start: var(--denhaag-alert-padding-block-start); - padding-block-end: var(--denhaag-alert-padding-block-end); + --utrecht-paragraph-margin-block-end: 0; + --utrecht-heading-4-margin-block-start: 0; + + border-radius: var(--denhaag-alert-border-radius, 1px); + padding-inline: var(--denhaag-space-xl); + padding-block: var(--denhaag-space-xl); display: flex; flex-direction: row; justify-content: space-between; - - --utrecht-paragraph-margin-block-end: 0; - --utrecht-heading-4-margin-block-start: 0; } .denhaag-alert--error { - background-color: var(--denhaag-alert-error-background-color); + background-color: var(--denhaag-alert-error-background-color, var(--denhaag-color-red-1)); - --utrecht-paragraph-color: var(--denhaag-alert-error-paragraph-color); - --utrecht-heading-4-color: var(--denhaag-alert-error-title-color); - --denhaag-button-primary-action-background-color: var(--denhaag-alert-error-action-button-background-color); - --denhaag-button-primary-action-color: var(--denhaag-alert-error-action-button-color); + --utrecht-paragraph-color: var(--denhaag-alert-error-paragraph-color, var(--denhaag-color-red-5)); + --utrecht-heading-4-color: var(--denhaag-alert-error-title-color, var(--denhaag-color-red-5)); + --denhaag-button-primary-action-background-color: var( + --denhaag-alert-error-action-button-background-color, + var(--denhaag-color-red-3) + ); + --denhaag-button-primary-action-color: var(--denhaag-alert-error-action-button-color var(--denhaag-color-white)); --denhaag-button-primary-action-hover-background-color: var( - --denhaag-alert-error-action-button-hover-background-color + --denhaag-alert-error-action-button-hover-background-color, + var(--denhaag-color-red-4) ); - --denhaag-icon-button-color: var(--denhaag-alert-error-close-icon-color); - --denhaag-icon-button-hover-color: var(--denhaag-alert-error-close-icon-color); - --denhaag-icon-button-focus-color: var(--denhaag-alert-error-close-icon-color); + --denhaag-icon-button-color: var(--denhaag-alert-error-close-icon-color, var(--denhaag-color-red-5)); + --denhaag-icon-button-hover-color: var(--denhaag-alert-error-close-icon-color, var(--denhaag-color-red-5)); + --denhaag-icon-button-focus-color: var(--denhaag-alert-error-close-icon-color, var(--denhaag-color-red-5)); } .denhaag-alert__main-content { @@ -40,78 +41,89 @@ } .denhaag-alert__close { - padding-block-start: var(--denhaag-alert-close-padding-block-start); - padding-inline-start: var(--denhaag-alert-close-padding-inline-start); + padding-block-start: var(--denhaag-alert-close-padding-block-start, var(--denhaag-space-2xs)); + padding-inline-start: var(--denhaag-alert-close-padding-inline-start, var(--denhaag-space-xl)); } .denhaag-alert .denhaag-button { - margin-block-start: var(--denhaag-alert-action-padding-block-start); + margin-block-start: var(--denhaag-alert-action-padding-block-start, var(--denhaag-space-md)); } .denhaag-alert--error .denhaag-alert__icon { - color: var(--denhaag-alert-error-icon-color); + color: var(--denhaag-alert-error-icon-color var(--denhaag-color-red-3)); } .denhaag-alert--info { - background-color: var(--denhaag-alert-info-background-color); + background-color: var(--denhaag-alert-info-background-color, var(--denhaag-color-blue-1)); - --utrecht-paragraph-color: var(--denhaag-alert-info-paragraph-color); - --utrecht-heading-4-color: var(--denhaag-alert-info-title-color); - --denhaag-button-primary-action-background-color: var(--denhaag-alert-info-action-button-background-color); - --denhaag-button-primary-action-color: var(--denhaag-alert-info-action-button-color); + --utrecht-paragraph-color: var(--denhaag-alert-info-paragraph-color, var(--denhaag-color-blue-5)); + --utrecht-heading-4-color: var(--denhaag-alert-info-title-color, var(--denhaag-color-blue-5)); + --denhaag-button-primary-action-background-color: var( + --denhaag-alert-info-action-button-background-color, + var(--denhaag-color-blue-3) + ); + --denhaag-button-primary-action-color: var(--denhaag-alert-info-action-button-color, var(--denhaag-color-white)); --denhaag-button-primary-action-hover-background-color: var( - --denhaag-alert-info-action-button-hover-background-color + --denhaag-alert-info-action-button-hover-background-color, + var(--denhaag-color-blue-4) ); - --denhaag-icon-button-color: var(--denhaag-alert-info-close-icon-color); - --denhaag-icon-button-hover-color: var(--denhaag-alert-info-close-icon-color); - --denhaag-icon-button-focus-color: var(--denhaag-alert-info-close-icon-color); + --denhaag-icon-button-color: var(--denhaag-alert-info-close-icon-color, var(--denhaag-color-blue-5)); + --denhaag-icon-button-hover-color: var(--denhaag-alert-info-close-icon-color, var(--denhaag-color-blue-5)); + --denhaag-icon-button-focus-color: var(--denhaag-alert-info-close-icon-color, var(--denhaag-color-blue-5)); } .denhaag-alert--info .denhaag-alert__icon { - color: var(--denhaag-alert-info-icon-color); + color: var(--denhaag-alert-info-icon-color, var(--denhaag-color-blue-3)); } .denhaag-alert--success { - background-color: var(--denhaag-alert-success-background-color); + background-color: var(--denhaag-color-green-1); - --utrecht-paragraph-color: var(--denhaag-alert-success-paragraph-color); - --utrecht-heading-4-color: var(--denhaag-alert-success-title-color); - --denhaag-button-primary-action-background-color: var(--denhaag-alert-success-action-button-background-color); - --denhaag-button-primary-action-color: var(--denhaag-alert-success-action-button-color); + --utrecht-paragraph-color: var(--denhaag-alert-success-paragraph-color, var(--denhaag-color-green-5)); + --utrecht-heading-4-color: var(--denhaag-alert-success-title-color, var(--denhaag-color-green-5)); + --denhaag-button-primary-action-background-color: var( + --denhaag-alert-success-action-button-background-color, + var(--denhaag-color-green-3) + ); + --denhaag-button-primary-action-color: var(--denhaag-alert-success-action-button-color, var(--denhaag-color-white)); --denhaag-button-primary-action-hover-background-color: var( - --denhaag-alert-success-action-button-hover-background-color + --denhaag-alert-success-action-button-hover-background-color, + var(--denhaag-color-green-4) ); - --denhaag-icon-button-color: var(--denhaag-alert-success-close-icon-color); - --denhaag-icon-button-hover-color: var(--denhaag-alert-success-close-icon-color); - --denhaag-icon-button-focus-color: var(--denhaag-alert-success-close-icon-color); + --denhaag-icon-button-color: var(--denhaag-alert-success-close-icon-color, var(--denhaag-color-green-5)); + --denhaag-icon-button-hover-color: var(--denhaag-alert-success-close-icon-color, var(--denhaag-color-green-5)); + --denhaag-icon-button-focus-color: var(--denhaag-alert-success-close-icon-color, var(--denhaag-color-green-5)); } .denhaag-alert--success .denhaag-alert__icon { - color: var(--denhaag-alert-success-icon-color); + color: var(--denhaag-alert-success-icon-color, var(--denhaag-color-green-3)); } .denhaag-alert--warning { - background-color: var(--denhaag-alert-warning-background-color); + background-color: var(--denhaag-color-orange-1); - --utrecht-paragraph-color: var(--denhaag-alert-warning-paragraph-color); - --utrecht-heading-4-color: var(--denhaag-alert-warning-title-color); - --denhaag-button-primary-action-background-color: var(--denhaag-alert-warning-action-button-background-color); - --denhaag-button-primary-action-color: var(--denhaag-alert-warning-action-button-color); + --utrecht-paragraph-color: var(--denhaag-alert-warning-paragraph-color, var(--denhaag-color-orange-5)); + --utrecht-heading-4-color: var(--denhaag-alert-warning-title-color, var(--denhaag-color-orange-5)); + --denhaag-button-primary-action-background-color: var( + --denhaag-alert-warning-action-button-background-color, + var(--denhaag-color-orange-5) + ); + --denhaag-button-primary-action-color: var(--denhaag-alert-warning-action-button-color, var(--denhaag-color-white)); --denhaag-button-primary-action-hover-background-color: var( - --denhaag-alert-warning-action-button-hover-background-color + --denhaag-alert-warning-action-button-hover-background-color, + var(--denhaag-color-orange-5) ); - --denhaag-icon-button-color: var(--denhaag-alert-warning-close-icon-color); - --denhaag-icon-button-hover-color: var(--denhaag-alert-warning-close-icon-color); - --denhaag-icon-button-focus-color: var(--denhaag-alert-warning-close-icon-color); + --denhaag-icon-button-color: var(--denhaag-alert-warning-close-icon-color, var(--denhaag-color-orange-5)); + --denhaag-icon-button-hover-color: var(--denhaag-alert-warning-close-icon-color, var(--denhaag-color-orange-5)); + --denhaag-icon-button-focus-color: var(--denhaag-alert-warning-close-icon-color, var(--denhaag-color-orange-5)); } .denhaag-alert--warning .denhaag-alert__icon { - color: var(--denhaag-alert-warning-icon-color); + color: var(--denhaag-alert-warning-icon-color, var(--denhaag-color-orange-3)); } .denhaag-alert__content { - margin-inline-start: var(--denhaag-alert-content-margin-inline-start); - margin-inline-end: var(--denhaag-alert-content-margin-inline-end); + margin-inline: var(--denhaag-space-xl); } [class^="utrecht-heading-"] { diff --git a/components/Alert/src/stories/bem.stories.mdx b/components/Alert/src/stories/bem.stories.mdx index 3c805d5432..a2a1f540a8 100644 --- a/components/Alert/src/stories/bem.stories.mdx +++ b/components/Alert/src/stories/bem.stories.mdx @@ -37,12 +37,12 @@ import readme from "../../README.md"; height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" - class="denhaag-icon" + className="denhaag-icon" focusable="false" aria-hidden="true" - shape-rendering="auto" + shapeRendering="auto" > - + @@ -74,26 +74,26 @@ import readme from "../../README.md"; height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" - class="denhaag-icon" + className="denhaag-icon" focusable="false" aria-hidden="true" - shape-rendering="auto" + shapeRendering="auto" >

@@ -108,7 +108,7 @@ import readme from "../../README.md";

- +
+
+

+ )} + + {/* eslint-enable react/no-unknown-property */} + + ### Success @@ -192,26 +238,26 @@ import readme from "../../README.md"; height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" - class="denhaag-icon" + className="denhaag-icon" focusable="false" aria-hidden="true" - shape-rendering="auto" + shapeRendering="auto" >
@@ -242,12 +288,12 @@ import readme from "../../README.md"; height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" - class="denhaag-icon" + className="denhaag-icon" focusable="false" aria-hidden="true" - shape-rendering="auto" + shapeRendering="auto" > - + @@ -279,12 +325,12 @@ import readme from "../../README.md"; height="1em" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" - class="denhaag-icon" + className="denhaag-icon" focusable="false" aria-hidden="true" - shape-rendering="auto" + shapeRendering="auto" > - + @@ -320,10 +366,10 @@ import readme from "../../README.md"; viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" - class="denhaag-icon" + className="denhaag-icon" focusable="false" aria-hidden="true" - shape-rendering="auto" + shapeRendering="auto" >

-
-
@@ -473,7 +519,7 @@ import readme from "../../README.md";

-

-
-

+

+

Mauris non sagittis ipsum. Donec elementum libero at gravida ullamcorper. Suspendisse consequat gravida est, sed condimentum eros convallis vitae. Cras interdum ornare nisl id hendrerit. Curabitur ullamcorper vel nisi nec malesuada. Integer hendrerit urna ac tincidunt pellentesque. Curabitur laoreet, ipsum ac semper ornare, @@ -67,12 +66,12 @@ import "../stories.js";

-
-

+
+

-
-

+

+

Mauris non sagittis ipsum. Donec elementum libero at gravida ullamcorper. Suspendisse consequat gravida est, sed condimentum eros convallis vitae. Cras interdum ornare nisl id hendrerit. Curabitur ullamcorper vel nisi nec malesuada. Integer hendrerit urna ac tincidunt pellentesque. Curabitur laoreet, ipsum ac semper ornare, @@ -104,12 +103,12 @@ import "../stories.js";

-
-

+
+

-
-

+

+

Mauris non sagittis ipsum. Donec elementum libero at gravida ullamcorper. Suspendisse consequat gravida est, sed condimentum eros convallis vitae. Cras interdum ornare nisl id hendrerit. Curabitur ullamcorper vel nisi nec malesuada. Integer hendrerit urna ac tincidunt pellentesque. Curabitur laoreet, ipsum ac semper ornare, @@ -141,12 +140,12 @@ import "../stories.js";

-
-

+
+

-
-

+

+

Mauris non sagittis ipsum. Donec elementum libero at gravida ullamcorper. Suspendisse consequat gravida est, sed condimentum eros convallis vitae. Cras interdum ornare nisl id hendrerit. Curabitur ullamcorper vel nisi nec malesuada. Integer hendrerit urna ac tincidunt pellentesque. Curabitur laoreet, ipsum ac semper ornare, @@ -178,12 +177,12 @@ import "../stories.js";

-
-

+
+

-
-

+

+

Mauris non sagittis ipsum. Donec elementum libero at gravida ullamcorper. Suspendisse consequat gravida est, sed condimentum eros convallis vitae. Cras interdum ornare nisl id hendrerit. Curabitur ullamcorper vel nisi nec malesuada. Integer hendrerit urna ac tincidunt pellentesque. Curabitur laoreet, ipsum ac semper ornare, @@ -214,12 +213,12 @@ import "../stories.js";

-
-

+
+

-
-

+

+

Mauris non sagittis ipsum. Donec elementum libero at gravida ullamcorper. Suspendisse consequat gravida est, sed condimentum eros convallis vitae. Cras interdum ornare nisl id hendrerit. Curabitur ullamcorper vel nisi nec malesuada. Integer hendrerit urna ac tincidunt pellentesque. Curabitur laoreet, ipsum ac semper ornare, @@ -252,20 +251,18 @@ import "../stories.js";

- {/* eslint-enable react/no-unknown-property */} ### Focus - {/* eslint-disable react/no-unknown-property */} -
-

+
+

-
-

+

+

Mauris non sagittis ipsum. Donec elementum libero at gravida ullamcorper. Suspendisse consequat gravida est, sed condimentum eros convallis vitae. Cras interdum ornare nisl id hendrerit. Curabitur ullamcorper vel nisi nec malesuada. Integer hendrerit urna ac tincidunt pellentesque. Curabitur laoreet, ipsum ac semper ornare, @@ -298,20 +295,18 @@ import "../stories.js";

- {/* eslint-enable react/no-unknown-property */} ### Hover - {/* eslint-disable react/no-unknown-property */} -
-

+
+

-
-

+

+

Mauris non sagittis ipsum. Donec elementum libero at gravida ullamcorper. Suspendisse consequat gravida est, sed condimentum eros convallis vitae. Cras interdum ornare nisl id hendrerit. Curabitur ullamcorper vel nisi nec malesuada. Integer hendrerit urna ac tincidunt pellentesque. Curabitur laoreet, ipsum ac semper ornare, @@ -344,5 +339,4 @@ import "../stories.js";

- {/* eslint-enable react/no-unknown-property */} diff --git a/components/AnchorNavigation/src/index.scss b/components/AnchorNavigation/src/index.scss index 5f088560ff..5cd7c89045 100644 --- a/components/AnchorNavigation/src/index.scss +++ b/components/AnchorNavigation/src/index.scss @@ -11,47 +11,51 @@ } .denhaag-anchor-navigation__list { - list-style: var(--denhaag-anchor-navigation-list-list-style); + list-style: none; padding-inline-start: 0; - margin-block-start: 0; - margin-block-end: 0; + margin-block: 0; } .denhaag-anchor-navigation + .denhaag-button { - margin-block-start: var(--denhaag-anchor-navigation-button-margin-block-start, 1em); + margin-block-start: var(--denhaag-space-md); } .denhaag-anchor-navigation__link { - color: var(--denhaag-anchor-navigation-link-color); + color: var(--denhaag-anchor-navigation-link-color, var(--denhaag-color-grey-4)); display: block; - font-family: var(--denhaag-anchor-navigation-link-font-family); - font-size: var(--denhaag-anchor-navigation-link-font-size, inherit); - font-weight: var(--denhaag-anchor-navigation-link-font-weight); - line-height: var(--denhaag-anchor-navigation-link-line-height); - padding-block-end: var(--denhaag-anchor-navigation-link-padding-block); - padding-block-start: var(--denhaag-anchor-navigation-link-padding-block); - padding-inline-end: var(--denhaag-anchor-navigation-link-padding-inline-end); - padding-inline-start: var(--denhaag-anchor-navigation-link-padding-inline-start); - outline: none; + font-weight: var(--denhaag-typography-weight-regular); + line-height: var(--denhaag-anchor-navigation-link-line-height, 1.5); // Differs from the default line-height (1.3). + padding-block: var(--denhaag-space-xs); + padding-inline: calc(var(--denhaag-space-lg) - var(--denhaag-space-3xs)) 0; position: relative; - text-decoration: var(--denhaag-anchor-navigation-link-text-decoration); + text-decoration: none; } .denhaag-anchor-navigation__link:active, .denhaag-anchor-navigation__link--active { - --denhaag-anchor-navigation-link-color: var(--denhaag-anchor-navigation-link-active-color); - --denhaag-anchor-navigation-link-background-color: var(--denhaag-anchor-navigation-link-active-color); - --denhaag-anchor-navigation-link-font-weight: var(--denhaag-anchor-navigation-link-active-font-weight); + --denhaag-anchor-navigation-link-background-color: currentcolor; + --denhaag-anchor-navigation-link-color: var( + --denhaag-anchor-navigation-link-active-color, + var(--denhaag-color-green-3) + ); + --denhaag-anchor-navigation-link-font-weight: var(--denhaag-typography-weight-bold); } .denhaag-anchor-navigation__link:hover, .denhaag-anchor-navigation__link--hover { - --denhaag-anchor-navigation-link-color: var(--denhaag-anchor-navigation-link-hover-color); - --denhaag-anchor-navigation-link-background-color: var(--denhaag-anchor-navigation-link-hover-color); + --denhaag-anchor-navigation-link-background-color: currentcolor; + --denhaag-anchor-navigation-link-color: var( + --denhaag-anchor-navigation-link-hover-color, + var(--denhaag-color-green-3) + ); } .denhaag-anchor-navigation__link:target { - --denhaag-anchor-navigation-link-color: var(--denhaag-anchor-navigation-link-target-color); + --denhaag-anchor-navigation-link-background-color: currentcolor; + --denhaag-anchor-navigation-link-color: var( + --denhaag-anchor-navigation-link-target-color, + var(--denhaag-color-green-3) + ); } .denhaag-anchor-navigation__link:active, @@ -61,10 +65,12 @@ .denhaag-anchor-navigation__link:focus-visible, .denhaag-anchor-navigation__link--focus { - --denhaag-anchor-navigation-link-color: var(--denhaag-anchor-navigation-link-focus-color); - --denhaag-anchor-navigation-link-background-color: var(--denhaag-anchor-navigation-link-focus-color); + --denhaag-anchor-navigation-link-color: var( + --denhaag-anchor-navigation-link-focus-color, + var(--denhaag-color-green-3) + ); - outline: var(--denhaag-anchor-navigation-link-outline); + outline: var(--denhaag-focus-border); } .denhaag-anchor-navigation__link:focus:not(:focus-visible) { @@ -72,12 +78,12 @@ } .denhaag-anchor-navigation__link::before { - background-color: var(--denhaag-anchor-navigation-link-background-color); + background-color: var(--denhaag-anchor-navigation-link-background-color, var(--denhaag-color-grey-2)); content: ""; height: 100%; left: 0; position: absolute; top: 50%; transform: translateY(-50%); - width: var(--denhaag-anchor-navigation-link-width); + width: var(--denhaag-anchor-navigation-link-width, var(--denhaag-space-3xs)); } diff --git a/components/AnchorNavigation/src/stories/bem.stories.mdx b/components/AnchorNavigation/src/stories/bem.stories.mdx index d72f8017f5..23e6843e81 100644 --- a/components/AnchorNavigation/src/stories/bem.stories.mdx +++ b/components/AnchorNavigation/src/stories/bem.stories.mdx @@ -26,50 +26,49 @@ import "../index.scss"; ### Default - {/* eslint-disable react/no-unknown-property */} -

- {/* eslint-enable react/no-unknown-property */} diff --git a/components/EventDate/src/index.scss b/components/EventDate/src/index.scss index 61b6a43ebf..8ccdae3a28 100644 --- a/components/EventDate/src/index.scss +++ b/components/EventDate/src/index.scss @@ -1,12 +1,13 @@ .denhaag-event-date { display: inline-flex; + align-items: center; } .denhaag-event-date__icon { - color: var(--denhaag-event-date-icon-color, inherit); - margin-inline-end: var(--denhaag-event-date-icon-margin-inline-end); + color: var(--denhaag-event-date-icon-color, var(--denhaag-color-blue-3)); + margin-inline-end: var(--denhaag-event-date-icon-margin-inline-end, var(--denhaag-space-xs)); } .denhaag-event-date__text { - line-height: var(--denhaag-event-date-text-line-height); + line-height: var(--denhaag-event-date-text-line-height, 1.75); } diff --git a/components/EventDate/src/stories/bem.stories.mdx b/components/EventDate/src/stories/bem.stories.mdx index cd6f108f36..b0c65cb073 100644 --- a/components/EventDate/src/stories/bem.stories.mdx +++ b/components/EventDate/src/stories/bem.stories.mdx @@ -28,9 +28,9 @@ import readme from "../../README.md"; {/* eslint-disable react/no-unknown-property */} -

+

-

diff --git a/components/FloatingContact/src/index.scss b/components/FloatingContact/src/index.scss index 186ffad9b0..6d5c769266 100644 --- a/components/FloatingContact/src/index.scss +++ b/components/FloatingContact/src/index.scss @@ -32,16 +32,19 @@ display: flex; flex-flow: column; - gap: calc(var(--denhaag-floating-contact-gap) + (var(--denhaag-floating-contact-overlay-arrow-width) / 2)); - position: var(--denhaag-floating-contact-position); - bottom: var(--denhaag-floating-contact-offset); - right: var(--denhaag-floating-contact-offset); - z-index: var(--denhaag-floating-contact-index); + gap: calc( + var(--denhaag-floating-contact-gap, var(--denhaag-space-sm)) + + (var(--denhaag-floating-contact-overlay-arrow-width, var(--denhaag-space-2xl)) / 2) + ); + position: var(--denhaag-floating-contact-position, fixed); + bottom: var(--denhaag-floating-contact-offset, var(--denhaag-space-md)); + right: var(--denhaag-floating-contact-offset, var(--denhaag-space-md)); + z-index: var(--denhaag-floating-contact-index, 9); } @media (min-width: 1024px) AND (min-height: 550px) { .denhaag-theme { - --denhaag-floating-contact-offset: var(--denhaag-space-block-2xl); + --denhaag-floating-contact-offset: var(--denhaag-space-2xl); } } @@ -54,21 +57,21 @@ @include denhaag-floating-contact-zoomed(".denhaag-floating-contact--zoomed"); .denhaag-floating-contact-switch { - align-items: var(--denhaag-floating-contact-switch-align-items); - align-self: var(--denhaag-floating-contact-switch-align-self); - background-color: var(--denhaag-floating-contact-switch-background-color); + align-items: var(--denhaag-floating-contact-switch-align-items, center); + align-self: var(--denhaag-floating-contact-switch-align-self, flex-end); + background-color: var(--denhaag-floating-contact-switch-background-color, var(--denhaag-color-green-1)); border: 0; - border-radius: var(--denhaag-floating-contact-switch-border-radius); - box-shadow: inset 0 0 0 var(--denhaag-floating-contact-switch-border-width) - var(--denhaag-floating-contact-switch-border-color); - color: var(--denhaag-floating-contact-color); + border-radius: var(--denhaag-floating-contact-switch-border-radius, var(--denhaag-space-xl)); + box-shadow: inset 0 0 0 var(--denhaag-floating-contact-switch-border-width, 0.0625rem) + var(--denhaag-floating-contact-switch-border-color, var(--denhaag-color-green-2)); + color: var(--denhaag-floating-contact-color, var(--denhaag-color-green-5)); display: var(--denhaag-floating-contact-switch-display, flex); - flex-direction: var(--denhaag-floating-contact-switch-direction); - font-family: var(--denhaag-floating-contact-switch-font-family); - font-size: var(--denhaag-floating-contact-switch-font-size); - font-weight: var(--denhaag-floating-contact-switch-font-weight); - line-height: var(--denhaag-floating-contact-switch-line-height); - gap: var(--denhaag-floating-contact-switch-gap); + flex-direction: var(--denhaag-floating-contact-switch-direction, row-reverse); + font-family: var(--denhaag-floating-contact-switch-font-family, var(--denhaag-typography-sans-serif-font-family)); + font-size: var(--denhaag-floating-contact-switch-font-size, var(--denhaag-typography-scale-base-font-size)); + font-weight: var(--denhaag-floating-contact-switch-font-weight, var(--denhaag-typography-weight-bold)); + line-height: var(--denhaag-floating-contact-switch-line-height, 1); + gap: var(--denhaag-floating-contact-switch-gap, 0); padding-block: 0; padding-inline: 0; } @@ -76,21 +79,23 @@ .denhaag-floating-contact-switch:hover, .denhaag-floating-contact-switch--hover { --denhaag-floating-contact-switch-icons-background-color: var( - --denhaag-floating-contact-switch-hover-icons-background-color + --denhaag-floating-contact-switch-hover-icons-background-color, + var(--denhaag-color-green-4) ); } .denhaag-floating-contact-switch:focus-visible, .denhaag-floating-contact-switch--focus { --denhaag-floating-contact-switch-icons-background-color: var( - --denhaag-floating-contact-switch-focus-icons-background-color + --denhaag-floating-contact-switch-focus-icons-background-color, + var(--denhaag-color-green-4) ); - outline: var(--denhaag-floating-contact-switch-outline); + outline: var(--denhaag-focus-border); } .denhaag-floating-contact-switch[aria-expanded="true"] { - --denhaag-floating-contact-switch-direction: var(--denhaag-floating-contact-active-switch-direction); + --denhaag-floating-contact-switch-direction: var(--denhaag-floating-contact-active-switch-direction, row); } .denhaag-floating-contact-switch__icon { @@ -98,8 +103,8 @@ aspect-ratio: 1; display: flex; justify-content: center; - height: var(--denhaag-floating-contact-switch-icon-size); - width: var(--denhaag-floating-contact-switch-icon-size); + height: var(--denhaag-floating-contact-switch-icon-size, var(--denhaag-space-md)); + width: var(--denhaag-floating-contact-switch-icon-size, var(--denhaag-space-md)); } .denhaag-floating-contact-switch__icon > svg { @@ -107,19 +112,20 @@ } .denhaag-floating-contact-switch__icons { - background-color: var(--denhaag-floating-contact-switch-icons-background-color); - border-radius: var(--denhaag-floating-contact-switch-border-radius); - border: var(--denhaag-floating-contact-switch-border-width) var(--denhaag-floating-contact-switch-border-style) - var(--denhaag-floating-contact-switch-border-color); - color: var(--denhaag-floating-contact-switch-icons-color); - padding-block: var(--denhaag-floating-contact-switch-padding-block); - padding-inline: var(--denhaag-floating-contact-switch-padding-inline); + background-color: var(--denhaag-floating-contact-switch-icons-background-color, var(--denhaag-color-green-3)); + border-radius: var(--denhaag-floating-contact-switch-border-radius, var(--denhaag-space-xl)); + border: var(--denhaag-floating-contact-switch-border-width, 0.0625rem) + var(--denhaag-floating-contact-switch-border-style, solid) + var(--denhaag-floating-contact-switch-border-color, var(--denhaag-color-green-2)); + color: var(--denhaag-floating-contact-switch-icons-color, var(--denhaag-color-white)); + padding-block: var(--denhaag-floating-contact-switch-padding-block, var(--denhaag-space-md)); + padding-inline: var(--denhaag-floating-contact-switch-padding-inline, var(--denhaag-space-md)); } .denhaag-floating-contact-switch__icons-inner { - display: var(--denhaag-floating-contact-switch-icons-display); + display: var(--denhaag-floating-contact-switch-icons-display, none); flex-direction: row; - gap: var(--denhaag-floating-contact-switch-icons-gap); + gap: var(--denhaag-floating-contact-switch-icons-gap, var(--denhaag-space-sm)); pointer-events: none; } @@ -130,25 +136,26 @@ .denhaag-floating-contact-switch__label { padding-block: calc( - var(--denhaag-floating-contact-switch-padding-block) - var(--denhaag-floating-contact-switch-border-width) + var(--denhaag-floating-contact-switch-padding-block, var(--denhaag-space-md)) - + var(--denhaag-floating-contact-switch-border-width, 0.0625rem) ); - padding-inline: var(--denhaag-floating-contact-switch-padding-inline); + padding-inline: var(--denhaag-floating-contact-switch-padding-inline, var(--denhaag-space-md)); } .denhaag-floating-contact-overlay { - align-items: var(--denhaag-floating-contact-overlay-align-items); - background-color: var(--denhaag-floating-contact-overlay-background-color); - border-radius: var(--denhaag-floating-contact-overlay-border-radius); - color: var(--denhaag-floating-contact-overlay-color); - display: var(--denhaag-floating-contact-overlay-display); + align-items: var(--denhaag-floating-contact-overlay-align-items, flex-start); + background-color: var(--denhaag-floating-contact-overlay-background-color, var(--denhaag-color-green-3)); + border-radius: var(--denhaag-floating-contact-overlay-border-radius, var(--denhaag-space-2xs)); + color: var(--denhaag-floating-contact-overlay-color, var(--denhaag-color-green-1)); + display: var(--denhaag-floating-contact-overlay-display, none); flex-direction: column; - gap: var(--denhaag-floating-contact-overlay-gap); - padding-block: var(--denhaag-floating-contact-overlay-padding-block); - padding-inline: var(--denhaag-floating-contact-overlay-padding-inline); + gap: var(--denhaag-floating-contact-overlay-gap, var(--denhaag-space-xl)); + padding-block: var(--denhaag-floating-contact-overlay-padding-block, var(--denhaag-space-2xl)); + padding-inline: var(--denhaag-floating-contact-overlay-padding-inline, var(--denhaag-space-xl)); position: relative; max-width: 100%; order: -1; - width: var(--denhaag-floating-contact-overlay-width); + width: var(--denhaag-floating-contact-overlay-width, 17.25rem); } .denhaag-floating-contact-switch[aria-expanded="true"] ~ .denhaag-floating-contact-overlay { @@ -161,17 +168,20 @@ clip-path: path("M13.1716 13.1716L0 0H32L18.8284 13.1716C17.2663 14.7337 14.7337 14.7337 13.1716 13.1716Z"); content: var(--denhaag-floating-contact-overlay-arrow-content, ""); height: auto; - width: var(--denhaag-floating-contact-overlay-arrow-width); + width: var(--denhaag-floating-contact-overlay-arrow-width, var(--denhaag-space-2xl)); position: absolute; - right: var(--denhaag-floating-contact-overlay-padding-inline); - bottom: calc(-1 * (var(--denhaag-floating-contact-overlay-arrow-width) / 2)); + right: var(--denhaag-floating-contact-overlay-padding-inline, var(--denhaag-space-xl)); + bottom: calc(-1 * (var(--denhaag-floating-contact-overlay-arrow-width, var(--denhaag-space-2xl)) / 2)); } .denhaag-floating-contact__heading { - font-family: var(--denhaag-floating-contact-heading-font-family); - font-size: var(--denhaag-floating-contact-heading-font-size); - font-weight: var(--denhaag-floating-contact-heading-font-weight); - line-height: var(--denhaag-floating-contact-heading-line-height); + font-family: var( + --denhaag-floating-contact-heading-font-family, + var(--denhaag-typography-sans-serif-alternate-font-family) + ); + font-size: var(--denhaag-floating-contact-heading-font-size, var(--denhaag-typography-scale-2xl-font-size)); + font-weight: var(--denhaag-floating-contact-heading-font-weight, var(--denhaag-typography-weight-bold)); + line-height: var(--denhaag-floating-contact-heading-line-height, var(--denhaag-typography-scale-base-line-height)); margin-block: 0; } @@ -189,36 +199,48 @@ } .denhaag-floating-contact__item { - align-items: var(--denhaag-floating-contact-item-align-items); + align-items: var(--denhaag-floating-contact-item-align-items, center); position: relative; display: flex; flex-direction: row; - gap: var(--denhaag-floating-contact-item-gap); + gap: var(--denhaag-floating-contact-item-gap, var(--denhaag-space-lg)); width: 100%; } .denhaag-floating-contact__item--online { - --denhaag-floating-contact-status-background-color: var(--denhaag-floating-contact-status-online-background-color); - --denhaag-floating-contact-status-border-color: var(--denhaag-floating-contact-status-online-border-color); + --denhaag-floating-contact-status-background-color: var( + --denhaag-floating-contact-status-online-background-color, + var(--denhaag-color-green-3) + ); + --denhaag-floating-contact-status-border-color: var( + --denhaag-floating-contact-status-online-border-color, + var(--denhaag-color-green-1) + ); } .denhaag-floating-contact__item--offline { - --denhaag-floating-contact-status-background-color: var(--denhaag-floating-contact-status-offline-background-color); - --denhaag-floating-contact-status-border-color: var(--denhaag-floating-contact-status-offline-border-color); + --denhaag-floating-contact-status-background-color: var( + --denhaag-floating-contact-status-offline-background-color, + var(--denhaag-color-red-3) + ); + --denhaag-floating-contact-status-border-color: var( + --denhaag-floating-contact-status-offline-border-color, + var(--denhaag-color-red-1) + ); } .denhaag-floating-contact__item .denhaag-icon { height: auto; - max-width: var(--denhaag-floating-contact-item-icon-size); + max-width: var(--denhaag-floating-contact-item-icon-size, 1.75rem); } .denhaag-floating-contact__item-link { - color: var(--denhaag-floating-contact-link-color); - font-family: var(--denhaag-floating-contact-link-font-family); - font-size: var(--denhaag-floating-contact-link-font-size); - font-weight: var(--denhaag-floating-contact-link-font-weight); - line-height: var(--denhaag-floating-contact-link-line-height); - text-decoration: var(--denhaag-floating-contact-link-decoration); + color: var(--denhaag-floating-contact-link-color, var(--denhaag-color-white)); + font-family: var(--denhaag-floating-contact-link-font-family, var(--denhaag-typography-sans-serif-font-family)); + font-size: var(--denhaag-floating-contact-link-font-size, var(--denhaag-typography-scale-base-font-size)); + font-weight: var(--denhaag-floating-contact-link-font-weight, var(--denhaag-typography-weight-regular)); + line-height: var(--denhaag-floating-contact-link-line-height, var(--denhaag-typography-scale-base-line-height)); + text-decoration: var(--denhaag-floating-contact-link-decoration, underline); } .denhaag-floating-contact__item-link::after { @@ -233,7 +255,10 @@ .denhaag-floating-contact__item:hover, .denhaag-floating-contact__item--hover { - --denhaag-floating-contact-link-font-weight: var(--denhaag-floating-contact-link-hover-font-weight); + --denhaag-floating-contact-link-font-weight: var( + --denhaag-floating-contact-link-hover-font-weight, + var(--denhaag-typography-weight-bold) + ); } .denhaag-floating-contact__item-link:focus, @@ -244,30 +269,31 @@ .denhaag-floating-contact__item-link:focus-visible::after, .denhaag-floating-contact__item--focus .denhaag-floating-contact__item-link::after { - outline: var(--denhaag-floating-contact-link-outline-width) var(--denhaag-floating-contact-link-outline-style) - var(--denhaag-floating-contact-link-outline-color); - outline-offset: var(--denhaag-floating-contact-link-outline-width); + outline: var(--denhaag-focus-border-width) var(--denhaag-focus-border-style) + var(--denhaag-floating-contact-link-outline-color, currentColor); + outline-offset: var(--denhaag-floating-contact-link-outline-width, var(--denhaag-focus-border-width)); } .denhaag-floating-contact__item-title { margin-block: 0; position: relative; - color: var(--denhaag-floating-contact-item-title-color); + color: var(--denhaag-floating-contact-item-title-color, var(--denhaag-color-white)); } .denhaag-floating-contact__item--online .denhaag-floating-contact__item-title::after, .denhaag-floating-contact__item--offline .denhaag-floating-contact__item-title::after { aspect-ratio: 1/1; background: var(--denhaag-floating-contact-status-background-color); - border: var(--denhaag-floating-contact-status-border-width) solid var(--denhaag-floating-contact-status-border-color); - border-radius: var(--denhaag-floating-contact-status-size); + border: var(--denhaag-floating-contact-status-border-width, 0.0625rem) solid + var(--denhaag-floating-contact-status-border-color); + border-radius: var(--denhaag-floating-contact-status-size, var(--denhaag-space-xs)); content: ""; display: inline-block; position: absolute; pointer-events: none; - height: var(--denhaag-floating-contact-status-size); - width: var(--denhaag-floating-contact-status-size); - margin-inline-start: var(--denhaag-floating-contact-status-size); + height: var(--denhaag-floating-contact-status-size, var(--denhaag-space-xs)); + width: var(--denhaag-floating-contact-status-size, var(--denhaag-space-xs)); + margin-inline-start: var(--denhaag-floating-contact-status-size, var(--denhaag-space-xs)); top: 50%; transform: translateY(-50%); } diff --git a/components/FloatingContact/src/stories/bem.stories.mdx b/components/FloatingContact/src/stories/bem.stories.mdx index dd9efa6e70..10e5c1389a 100644 --- a/components/FloatingContact/src/stories/bem.stories.mdx +++ b/components/FloatingContact/src/stories/bem.stories.mdx @@ -26,7 +26,7 @@ import { useEffect, useMemo } from "@storybook/client-api"; applied = true; }); useMemo( () => { - document.body.insertAdjacentHTML("beforeend", ``); + document.body.insertAdjacentHTML("beforeend", ``); }, [applied]) } return ; @@ -45,24 +45,23 @@ import { useEffect, useMemo } from "@storybook/client-api"; ### Default - {/* eslint-disable react/no-unknown-property */} -
-
+
+
-
-

Contact

-

Hoe kunnen we je helpen?

-
+
+

+ Contact +

+

Hoe kunnen we je helpen?

+
-
-

Chat

- +
-
+
-
-

Telefoon

- +
-
+
-
-

Contactformulier

- + @@ -202,30 +203,28 @@ import { useEffect, useMemo } from "@storybook/client-api";
- {/* eslint-enable react/no-unknown-property */} ### Hover - {/* eslint-disable react/no-unknown-property */} -
-
+
+
-
-

Contact

-

Hoe kunnen we je helpen?

-
+
+

+ Contact +

+

Hoe kunnen we je helpen?

+
-
-

Chat

- +
-
+
-
-

Telefoon

- +
-
+
-
-

Contactformulier

- + @@ -365,30 +366,28 @@ import { useEffect, useMemo } from "@storybook/client-api";
- {/* eslint-enable react/no-unknown-property */} ### Focus - {/* eslint-disable react/no-unknown-property */} -
-
+
+
-
-

Contact

-

Hoe kunnen we je helpen?

-
+
+

+ Contact +

+

Hoe kunnen we je helpen?

+
-
-

Chat

- +
-
+
-
-

Telefoon

- +
-
+
-
-

Contactformulier

- + @@ -528,30 +529,28 @@ import { useEffect, useMemo } from "@storybook/client-api";
- {/* eslint-enable react/no-unknown-property */} ### Chat offline - {/* eslint-disable react/no-unknown-property */} -
-
+
+
-
-

Contact

-

Hoe kunnen we je helpen?

-
+
+

+ Contact +

+

Hoe kunnen we je helpen?

+
-
-

Chat

+
+

Chat

Offline
-
+
-
-

Telefoon

- +
-
+
-
-

Contactformulier

- + @@ -689,30 +690,28 @@ import { useEffect, useMemo } from "@storybook/client-api";
- {/* eslint-enable react/no-unknown-property */} ### Item Hover - {/* eslint-disable react/no-unknown-property */} -
-
+
+
-
-

Contact

-

Hoe kunnen we je helpen?

-
+
+

+ Contact +

+

Hoe kunnen we je helpen?

+
-
-

Chat

- +
-
+
-
-

Telefoon

- +
-
+
-
-

Contactformulier

- + @@ -852,30 +853,28 @@ import { useEffect, useMemo } from "@storybook/client-api";
- {/* eslint-enable react/no-unknown-property */} ### Item Focus - {/* eslint-disable react/no-unknown-property */} -
-
+
+
-
-

Contact

-

Hoe kunnen we je helpen?

-
+
+

+ Contact +

+

Hoe kunnen we je helpen?

+
-
-

Chat

- +
-
+
-
-

Telefoon

- +
-
+
-
-

Contactformulier

- + @@ -1015,30 +1016,28 @@ import { useEffect, useMemo } from "@storybook/client-api";
- {/* eslint-enable react/no-unknown-property */} ### Live Chat - {/* eslint-disable react/no-unknown-property */} -
-
+
+
-
-

Contact

-

Hoe kunnen we je helpen?

-
+
+

+ Contact +

+

Hoe kunnen we je helpen?

+
-
-

Chat

- +
-
+
-
-

Telefoon

- +
-
+
-
-

Contactformulier

- + @@ -1178,30 +1179,28 @@ import { useEffect, useMemo } from "@storybook/client-api";
- {/* eslint-enable react/no-unknown-property */} ### Zoomed - {/* eslint-disable react/no-unknown-property */} -
-
+
+
-
-

Contact

-

Hoe kunnen we je helpen?

-
+
+

+ Contact +

+

Hoe kunnen we je helpen?

+
-
-

Chat

- +
-
+
-
-

Telefoon

- +
-
+
-
-

Contactformulier

- + @@ -1341,5 +1342,4 @@ import { useEffect, useMemo } from "@storybook/client-api";
- {/* eslint-enable react/no-unknown-property */} diff --git a/components/FloatingContact/src/storybook.scss b/components/FloatingContact/src/storybook.scss index 28a8cb7f92..8ff8aad5fd 100644 --- a/components/FloatingContact/src/storybook.scss +++ b/components/FloatingContact/src/storybook.scss @@ -1,9 +1,7 @@ /* This file is meant only for storybook overwrites. NOT FOR EXPORT! */ .denhaag-storybook-floating-contact-wrapper { - height: calc(100dvh + 2rem); - width: calc(100dvw + 2rem); - margin-block-start: -1rem; - margin-block-end: -1rem; - margin-inline-start: -1rem; - margin-inline-end: -1rem; + height: calc(100svh + var(--denhaag-space-2xl)); + width: calc(100svw + var(--denhaag-space-2xl)); + margin-block: calc(0px - var(--denhaag-space-md)); + margin-inline: calc(0px - var(--denhaag-space-md)); } diff --git a/components/FormControlLabel/src/index.scss b/components/FormControlLabel/src/index.scss index 3b6253c9d7..d2e21950a5 100644 --- a/components/FormControlLabel/src/index.scss +++ b/components/FormControlLabel/src/index.scss @@ -3,7 +3,7 @@ .denhaag-form-control-label { display: flex; align-items: flex-start; - margin-block-end: var(--denhaag-form-control-label-margin-block-end); + margin-block-end: var(--denhaag-form-control-label-margin-block-end, var(--denhaag-space-xs)); cursor: pointer; } @@ -11,7 +11,7 @@ display: inline-flex; align-items: center; height: calc(var(--denhaag-typography-scale-base-line-height) * var(--utrecht-form-label-font-size)); - margin-inline-end: var(--denhaag-form-control-label-input-margin-inline-end); + margin-inline-end: var(--denhaag-form-control-label-input-margin-inline-end, var(--denhaag-space-xs)); } .denhaag-form-control-label__label { diff --git a/components/FormField/src/index.scss b/components/FormField/src/index.scss index f86dd49282..ea230ea4f4 100644 --- a/components/FormField/src/index.scss +++ b/components/FormField/src/index.scss @@ -1,36 +1,31 @@ @import "~@utrecht/components/form-label/css"; .denhaag-form-field { - --denhaag-form-input-margin-block-end: 8px; + --denhaag-form-input-margin-block-end: var(--denhaag-space-xs); - margin-block-start: 0; - margin-block-end: 0; - margin-inline-start: 0; - margin-inline-end: 0; - padding-block-start: 0; - padding-block-end: 0; - padding-inline-start: 0; - padding-inline-end: 0; + margin-block: 0; + margin-inline: 0; + padding-block: 0; + padding-inline: 0; border: 0; } .denhaag-form-field__label { @extend .utrecht-form-label; - margin-block-end: var(--denhaag-form-field-label-margin-block-end); - padding-inline-start: 0; - padding-inline-end: 0; + margin-block-end: var(--denhaag-form-field-label-margin-block-end, var(--denhaag-space-2xs)); + padding-inline: 0; line-height: var(--denhaag-typography-scale-base-line-height); } .denhaag-form-field__description { - font-family: var(--denhaag-form-field-description-font-family); - font-size: var(--denhaag-form-field-description-font-size); - font-weight: var(--denhaag-form-field-description-font-weight); - color: var(--denhaag-form-field-description-color); - line-height: var(--denhaag-form-field-description-line-height); + font-family: var(--denhaag-form-field-description-font-family, var(--denhaag-typography-sans-serif-font-family)); + font-size: var(--denhaag-form-field-description-font-size, var(--denhaag-typography-scale-s-font-size)); + font-weight: var(--denhaag-form-field-description-font-weight, var(--denhaag-typography-weight-regular)); + color: var(--denhaag-form-field-description-color, var(--denhaag-color-grey-4)); + line-height: var(--denhaag-form-field-description-line-height, var(--denhaag-typography-scale-s-line-height)); } .denhaag-form-field--error .denhaag-form-field__description { - color: var(--denhaag-form-field-description-error-color); + --denhaag-form-field-description-color: var(--denhaag-form-field-description-error-color, var(--denhaag-color-red-3)); } diff --git a/components/FormGroup/src/index.scss b/components/FormGroup/src/index.scss index f5356ed1a7..689fd2c301 100644 --- a/components/FormGroup/src/index.scss +++ b/components/FormGroup/src/index.scss @@ -1,11 +1,17 @@ .denhaag-form-group { /* Overwrite utrecht design tokens */ - --utrecht-heading-5-color: var(--denhaag-form-group-label-color); - --utrecht-paragraph-font-size: var(--denhaag-form-group-helper-text-size); - --utrecht-paragraph-color: var(--denhaag-form-group-helper-text-color); + --utrecht-heading-5-color: var(--denhaag-form-group-label-color, var(--denhaag-color-blue-5)); + --utrecht-paragraph-font-size: var( + --denhaag-form-group-helper-text-size, + var(--denhaag-typography-scale-s-font-size) + ); + --utrecht-paragraph-color: var(--denhaag-form-group-helper-text-color, var(--denhaag-color-grey-4)); /* To ensure gap between helpertext and checkboxes */ - --utrecht-paragraph-margin-block-start: var(--denhaag-form-group-helper-text-margin-block-start); + --utrecht-paragraph-margin-block-start: var( + --denhaag-form-group-helper-text-margin-block-start, + var(--denhaag-space-2xs) + ); /* To ensure gap between checkboxes */ --denhaag-form-control-label-margin-block-end: 0; @@ -13,12 +19,10 @@ display: flex; flex-direction: column; - margin-inline-start: var(--denhaag-form-group-margin-inline-start); - margin-inline-end: var(--denhaag-form-group-margin-inline-end); - margin-block-start: var(--denhaag-form-group-margin-block-start); - margin-block-end: var(--denhaag-form-group-margin-block-end); + margin-inline: var(--denhaag-form-group-margin-inmarginline, var(--denhaag-space-xs)); + margin-block: var(--denhaag-form-group-margin-block, var(--denhaag-space-xs)); } .denhaag-form-group--error { - --utrecht-paragraph-color: var(--denhaag-form-group-helper-text-error-color); + --utrecht-paragraph-color: var(--denhaag-form-group-helper-text-error-color, var(--denhaag-color-red-3)); } diff --git a/components/FormProgress/src/index.scss b/components/FormProgress/src/index.scss index ad374f3ec6..d9d84e390c 100644 --- a/components/FormProgress/src/index.scss +++ b/components/FormProgress/src/index.scss @@ -8,7 +8,7 @@ display: flex; justify-content: center; align-items: center; - margin-block-end: var(--denhaag-form-progress-header-margin-block-end); + margin-block-end: var(--denhaag-form-progress-header-margin-block-end, var(--denhaag-space-lg)); } /* Den Haag S */ @@ -24,26 +24,26 @@ } .denhaag-form-progress__label { - font-family: var(--denhaag-form-progress-label-font-family); - font-size: var(--denhaag-form-progress-label-font-size); - font-weight: var(--denhaag-form-progress-label-font-weight); - color: var(--denhaag-form-progress-label-color); - line-height: var(--denhaag-form-progress-label-line-height); + font-family: var(--denhaag-form-progress-label-font-family, var(--denhaag-typography-sans-serif-font-family)); + font-size: var(--denhaag-form-progress-label-font-size, var(--denhaag-typography-scale-base-font-size)); + font-weight: var(--denhaag-form-progress-label-font-weight, var(--denhaag-typography-weight-regular)); + color: var(--denhaag-form-progress-label-color, var(--denhaag-color-grey-4)); + line-height: var(--denhaag-form-progress-label-line-height, var(--denhaag-typography-scale-base-line-height)); } .denhaag-form-progress__progress { width: 100%; - height: var(--denhaag-form-progress-progress-height); + height: var(--denhaag-form-progress-progress-height, var(--denhaag-space-3xs)); appearance: none; border: none; - background-color: var(--denhaag-form-progress-progress-background-color); + background-color: var(--denhaag-form-progress-progress-background-color, var(--denhaag-color-grey-2)); &::-webkit-progress-bar { - background-color: var(--denhaag-form-progress-progress-background-color); + background-color: var(--denhaag-form-progress-progress-background-color, var(--denhaag-color-grey-2)); } &::-webkit-progress-value, &::-moz-progress-bar { - background-color: var(--denhaag-form-progress-progress-bar-background-color); + background-color: var(--denhaag-form-progress-progress-bar-background-color, var(--denhaag-color-green-3)); } } diff --git a/components/FormProgress/src/stories/bem.stories.mdx b/components/FormProgress/src/stories/bem.stories.mdx index cba725b00d..4c3b60426e 100644 --- a/components/FormProgress/src/stories/bem.stories.mdx +++ b/components/FormProgress/src/stories/bem.stories.mdx @@ -26,13 +26,18 @@ import pkg from "../../package.json"; {/* eslint-disable react/no-unknown-property */} {() => ( -
-
+
+
-

Stap 1 van 4

+

Stap 1 van 4

- +
)} @@ -45,13 +50,16 @@ import pkg from "../../package.json"; {/* eslint-disable react/no-unknown-property */} {() => ( -
-
-
- - + )} diff --git a/components/FullwidthSlider/src/index.scss b/components/FullwidthSlider/src/index.scss index e34334d873..f2d063306d 100644 --- a/components/FullwidthSlider/src/index.scss +++ b/components/FullwidthSlider/src/index.scss @@ -1,323 +1,339 @@ @keyframes denhaag-angled-image-next { 0% { - clip-path: var(--denhaag-fullwidth-slider-animation-start-clip-path); + clip-path: var(--denhaag-fullwidth-slider-animation-start-clip-path, polygon(5% 0, 100% 0, 100% 100%, 0% 100%)); } 55% { - clip-path: var(--denhaag-fullwidth-slider-animation-start-clip-path); + clip-path: var(--denhaag-fullwidth-slider-animation-start-clip-path, polygon(5% 0, 100% 0, 100% 100%, 0% 100%)); } 100% { - clip-path: var(--denhaag-fullwidth-slider-animation-end-clip-path); + clip-path: var(--denhaag-fullwidth-slider-animation-end-clip-path, polygon(0 0, 100% 0, 100% 100%, 0% 100%)); } } .denhaag-fullwidth-slider { - position: var(--denhaag-fullwidth-slider-position); - font-family: var(--denhaag-fullwidth-slider-font-family); - font-weight: var(--denhaag-fullwidth-slider-font-weight); - font-size: var(--denhaag-fullwidth-slider-font-size); - color: var(--denhaag-fullwidth-slider-color); - overflow: var(--denhaag-fullwidth-slider-overflow); - max-width: var(--denhaag-fullwidth-slider-max-width-xs); - touch-action: var(--denhaag-fullwidth-slider-touch-action); - padding-block-start: var(--denhaag-fullwidth-slider-padding-block-xs); - padding-block-end: var(--denhaag-fullwidth-slider-padding-block-xs); + position: relative; + font-family: var(--denhaag-fullwidth-slider-font-family, var(--denhaag-typography-sans-serif-font-family)); + font-weight: var(--denhaag-fullwidth-slider-font-weight, var(--denhaag-typography-weight-regular)); + font-size: var(--denhaag-fullwidth-slider-font-size, var(--denhaag-typography-scale-s-font-size)); + color: var(--denhaag-fullwidth-slider-color, var(--denhaag-color-grey-4)); + overflow: clip; + max-width: var(--denhaag-fullwidth-slider-max-width, 100%); + touch-action: pan-y; + padding-block: var(--denhaag-fullwidth-slider-padding-block, var(--denhaag-space-2xl)); width: 100%; @media (min-width: 1768px) { - max-width: var(--denhaag-fullwidth-slider-max-width-xl); - margin-inline-start: var(--denhaag-fullwidth-slider-margin-inline-xl); - margin-inline-end: var(--denhaag-fullwidth-slider-margin-inline-xl); - padding-block-start: var(--denhaag-fullwidth-slider-padding-block-sm); - padding-block-end: var(--denhaag-fullwidth-slider-padding-block-sm); + --denhaag-fullwidth-slider-max-width: 1280px; + --denhaag-fullwidth-slider-padding-block: 64px; + + margin-inline: var(--denhaag-fullwidth-slider-margin-inline, auto); } } .denhaag-fullwidth-slider__wrapper { - position: var(--denhaag-fullwidth-slider-wrapper-position); + position: relative; } .denhaag-fullwidth-slider__slide { - width: var(--denhaag-fullwidth-slider-slide-width); + width: var(--denhaag-fullwidth-slider-slide-width, 100%); } .denhaag-fullwidth-slider__card { - position: var(--denhaag-fullwidth-slider-card-position); - padding-inline-start: var(--denhaag-fullwidth-slider-card-padding); - padding-inline-end: var(--denhaag-fullwidth-slider-card-padding); - padding-block-start: var(--denhaag-fullwidth-slider-card-padding); - padding-block-end: var(--denhaag-fullwidth-slider-card-padding); - display: var(--denhaag-fullwidth-slider-card-display); - justify-content: var(--denhaag-fullwidth-slider-card-justify-content); - border-bottom: var(--denhaag-fullwidth-slider-card-border-bottom); - border-color: var(--denhaag-fullwidth-slider-card-border-color); - opacity: var(--denhaag-fullwidth-slider-card-opacity); - pointer-events: var(--denhaag-fullwidth-slider-card-pointer-events); - background-color: var(--denhaag-fullwidth-slider-card-background-color); - transition: var(--denhaag-fullwidth-slider-card-transition); - transform: var(--denhaag-fullwidth-slider-card-transform); - margin-block-start: var(--denhaag-fullwidth-slider-card-margin-block-start-xs); - margin-inline: var(--denhaag-fullwidth-slider-card-margin-inline-xs); - width: var(--denhaag-fullwidth-slider-card-width-xs); + position: relative; + padding-inline: var(--denhaag-fullwidth-slider-card-padding, var(--denhaag-space-md)); + padding-block: var(--denhaag-fullwidth-slider-card-padding, var(--denhaag-space-md)); + display: flex; + justify-content: space-between; + border-bottom: var(--denhaag-fullwidth-slider-card-border-bottom, 1px solid); + border-color: var(--denhaag-fullwidth-slider-card-border-color, var(--denhaag-color-grey-2)); + opacity: var(--denhaag-fullwidth-slider-card-opacity, 0); + pointer-events: var(--denhaag-fullwidth-slider-card-pointer-events, none); + background-color: var(--denhaag-fullwidth-slider-card-background-color, var(--denhaag-color-white)); + transition: var(--denhaag-fullwidth-slider-card-transition, all 500ms ease-in-out); + transform: var(--denhaag-fullwidth-slider-card-transform, translateX(12px)); + margin-block-start: var(--denhaag-fullwidth-slider-card-margin-block-start, -32px); + margin-inline: var(--denhaag-fullwidth-slider-card-margin-inline, 24px); + width: var(--denhaag-fullwidth-slider-card-width, auto); @media (prefers-reduced-motion) { - transition-delay: var(--denhaag-fullwidth-slider-slide-active-card-prefers-reduced-motion-transition-delay); - transition-duration: var(--denhaag-fullwidth-slider-slide-active-card-prefers-reduced-motion-transition-duration); + transition-delay: var(--denhaag-fullwidth-slider-slide-active-card-prefers-reduced-motion-transition-delay, 0ms); + transition-duration: var( + --denhaag-fullwidth-slider-slide-active-card-prefers-reduced-motion-transition-duration, + 0, + 0, + 200ms + ); } @media (min-width: 768px) { - margin-block-start: var(--denhaag-fullwidth-slider-card-margin-block-start-sm); - margin-inline: var(--denhaag-fullwidth-slider-card-margin-inline-sm); - width: var(--denhaag-fullwidth-slider-card-width-sm); + --denhaag-fullwidth-slider-card-margin-block-start: -64px; + --denhaag-fullwidth-slider-card-margin-inline: 60px; + --denhaag-fullwidth-slider-card-width: 523px; } @media (min-width: 1024px) { - margin-block-start: var(--denhaag-fullwidth-slider-card-margin-block-start-lg); - margin-inline: var(--denhaag-fullwidth-slider-card-margin-inline-lg); + --denhaag-fullwidth-slider-card-margin-block-start: -72px; } @media (min-width: 1280px) { - margin-inline: var(--denhaag-fullwidth-slider-card-margin-inline-xl); + --denhaag-fullwidth-slider-card-margin-inline: 100px; } &:hover, &--hover { - cursor: var(--denhaag-fullwidth-slider-card-hover-cursor); - box-shadow: var(--denhaag-fullwidth-slider-card-hover-box-shadow); + cursor: var(--denhaag-fullwidth-slider-card-hover-cursor, pointer); + box-shadow: var(--denhaag-fullwidth-slider-card-hover-box-shadow, 0px 4px 16px 0px rgba(0, 0, 0, 0.16)); .denhaag-fullwidth-slider__card-arrow { - transform: var(--denhaag-fullwidth-slider-card-arrow-hover-transform); + transform: var(--denhaag-fullwidth-slider-card-arrow-hover-transform, translateX(4px)); } } &--no-action { &:hover { - cursor: var(--denhaag-fullwidth-slider-card-no-action-cursor); - box-shadow: var(--denhaag-fullwidth-slider-card-no-action-box-shadow); + cursor: var(--denhaag-fullwidth-slider-card-no-action-cursor, inherit); + box-shadow: var(--denhaag-fullwidth-slider-card-no-action-box-shadow, none); } } } .denhaag-fullwidth-slider__card-content { - display: var(--denhaag-fullwidth-slider-card-content-display); - flex-direction: var(--denhaag-fullwidth-slider-card-content-flex-direction); - margin-block-start: var(--denhaag-fullwidth-slider-card-content-margin-block-start-xs); - margin-inline-start: var(--denhaag-fullwidth-slider-card-content-margin-inline-start-xs); - padding-inline-end: var(--denhaag-fullwidth-slider-card-content-padding-inline-end); + display: flex; + flex-direction: column; + margin-block-start: var(--denhaag-fullwidth-slider-card-content-margin-block-start, var(--denhaag-space-xs)); + margin-inline-start: var(--denhaag-fullwidth-slider-card-content-margin-inline-start, var(--denhaag-space-xs)); + padding-inline-end: var(--denhaag-fullwidth-slider-card-content-padding-inline-end, 48px); @media (min-width: 768px) { - margin-block-start: var(--denhaag-fullwidth-slider-card-content-margin-block-start-sm); - margin-inline-start: var(--denhaag-fullwidth-slider-card-content-margin-inline-start-sm); + --denhaag-fullwidth-slider-card-content-margin-block-start: 16px; + --denhaag-fullwidth-slider-card-content-margin-inline-start: 16px; } } .denhaag-fullwidth-slider__card-content__title { - font-family: var(--denhaag-fullwidth-slider-card-content-title-font-family); - font-size: var(--denhaag-fullwidth-slider-card-content-title-font-size); - font-weight: var(--denhaag-fullwidth-slider-card-content-title-font-weight); - margin-block-start: var(--denhaag-fullwidth-slider-card-content-title-margin-block); - margin-block-end: var(--denhaag-fullwidth-slider-card-content-title-margin-block); - padding-block-end: var(--denhaag-fullwidth-slider-card-content-title-padding-bottom); - color: var(--denhaag-fullwidth-slider-card-content-title-color); - - &--focus-visible { - a { - outline: var(--denhaag-focus-border); - } + font-family: var( + --denhaag-fullwidth-slider-card-content-title-font-family, + var(--denhaag-typography-sans-serif-alternate-font-family) + ); + font-size: var(--denhaag-fullwidth-slider-card-content-title-font-size, var(--denhaag-typography-scale-lg-font-size)); + font-weight: var(--denhaag-fullwidth-slider-card-content-title-font-weight, var(--denhaag-typography-weight-bold)); + margin-block: var(--denhaag-fullwidth-slider-card-content-title-margin-block, 0px); + padding-block-end: var(--denhaag-fullwidth-slider-card-content-title-padding-bottom, var(--denhaag-space-md)); + color: var(--denhaag-fullwidth-slider-card-content-title-color, var(--denhaag-color-grey-5)); + + &--focus-visible a { + outline: var(--denhaag-focus-border); } a { - text-decoration: var(--denhaag-fullwidth-slider-card-content-title-anchor-text-decoration); - color: var(--denhaag-fullwidth-slider-card-content-title-anchor-color); + text-decoration: var(--denhaag-fullwidth-slider-card-content-title-anchor-text-decoration, none); + color: var(--denhaag-fullwidth-slider-card-content-title-anchor-color, var(--denhaag-color-grey-5)); &:focus-visible { outline: var(--denhaag-focus-border); } &::after { - content: var(--denhaag-fullwidth-slider-card-content-title-after-content); - position: var(--denhaag-fullwidth-slider-card-content-title-after-position); - top: var(--denhaag-fullwidth-slider-card-content-title-after-top); - bottom: var(--denhaag-fullwidth-slider-card-content-title-after-bottom); - left: var(--denhaag-fullwidth-slider-card-content-title-after-left); - right: var(--denhaag-fullwidth-slider-card-content-title-after-right); - transition: var(--denhaag-fullwidth-slider-card-content-title-after-transition); + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + transition: var(--denhaag-fullwidth-slider-card-content-title-after-transition, box-shadow 350ms ease); } } } .denhaag-fullwidth-slider__card-content__author { - font-family: var(--denhaag-fullwidth-slider-card-content-author-font-family); - font-size: var(--denhaag-fullwidth-slider-card-content-author-font-size); - font-weight: var(--denhaag-fullwidth-slider-card-content-author-font-weight); - font-style: var(--denhaag-fullwidth-slider-card-content-author-font-style); - color: var(--denhaag-fullwidth-slider-card-content-author-color); - margin-block-end: var(--denhaag-fullwidth-slider-card-content-author-margin-block-end); + font-family: var( + --denhaag-fullwidth-slider-card-content-author-font-family, + var(--denhaag-typography-sans-serif-font-family) + ); + font-size: var( + --denhaag-fullwidth-slider-card-content-author-font-size, + var(--denhaag-typography-scale-base-font-size) + ); + font-weight: var( + --denhaag-fullwidth-slider-card-content-author-font-weight, + var(--denhaag-typography-weight-regular) + ); + font-style: var(--denhaag-fullwidth-slider-card-content-author-font-style, normal); + color: var(--denhaag-fullwidth-slider-card-content-author-color, var(--denhaag-color-green-4)); + margin-block-end: var(--denhaag-fullwidth-slider-card-content-author-margin-block-end, 24px); } .denhaag-fullwidth-slider__card-arrow { - color: var(--denhaag-fullwidth-slider-card-arrow-color); - position: var(--denhaag-fullwidth-slider-card-arrow-position); - bottom: var(--denhaag-fullwidth-slider-card-padding); - right: var(--denhaag-fullwidth-slider-card-padding); - pointer-events: var(--denhaag-fullwidth-slider-card-arrow-pointer-events); - transition: var(--denhaag-fullwidth-slider-card-arrow-transition); + color: var(--denhaag-fullwidth-slider-card-arrow-color, var(--denhaag-color-blue-3)); + position: absolute; + bottom: var(--denhaag-fullwidth-slider-card-padding, var(--denhaag-space-md)); + right: var(--denhaag-fullwidth-slider-card-padding, var(--denhaag-space-md)); + pointer-events: none; + transition: var(--denhaag-fullwidth-slider-card-arrow-transition, transform 350ms ease); } .denhaag-fullwidth-slider__slide-image { - width: var(--denhaag-fullwidth-slider-slide-image-width); - height: var(--denhaag-fullwidth-slider-slide-image-height-xs); + width: var(--denhaag-fullwidth-slider-slide-image-width, 100%); + height: var(--denhaag-fullwidth-slider-slide-image-height, 202px); @media (min-width: 768px) { - height: var(--denhaag-fullwidth-slider-slide-image-height-sm); + --denhaag-fullwidth-slider-slide-image-height: 432px; } @media (min-width: 1024px) { - height: var(--denhaag-fullwidth-slider-slide-image-height-lg); + --denhaag-fullwidth-slider-slide-image-height: 576px; } img { - width: var(--denhaag-fullwidth-slider-slide-image-img-width); - height: var(--denhaag-fullwidth-slider-slide-image-img-height); - object-fit: var(--denhaag-fullwidth-slider-slide-image-img-object-fit); + width: 100%; + height: 100%; + object-fit: var(--denhaag-fullwidth-slider-slide-image-img-object-fit, cover); } &.denhaag-fullwidth-slider__slide-image--portrait { - position: var(--denhaag-fullwidth-slider-slide-image-portrait-position); - overflow: var(--denhaag-fullwidth-slider-slide-image-portrait-overflow); + position: relative; + overflow: hidden; &::before { - content: var(--denhaag-fullwidth-slider-slide-image-portrait-before-content); - position: var(--denhaag-fullwidth-slider-slide-image-portrait-before-position); - left: var(--denhaag-fullwidth-slider-slide-image-portrait-before-left); - top: var(--denhaag-fullwidth-slider-slide-image-portrait-before-top); - width: var(--denhaag-fullwidth-slider-slide-image-portrait-before-width); - height: var(--denhaag-fullwidth-slider-slide-image-portrait-before-height); - z-index: var(--denhaag-fullwidth-slider-slide-image-portrait-before-z-index); - background-size: var(--denhaag-fullwidth-slider-slide-image-portrait-before-background-size); - background-position: var(--denhaag-fullwidth-slider-slide-image-portrait-before-background-position); - filter: var(--denhaag-fullwidth-slider-slide-image-portrait-before-filter); - transform: var(--denhaag-fullwidth-slider-slide-image-portrait-before-transform); + content: ""; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + z-index: -1; + background-size: var(--denhaag-fullwidth-slider-slide-image-portrait-before-background-size, cover); + background-position: var(--denhaag-fullwidth-slider-slide-image-portrait-before-background-position, center); + filter: var(--denhaag-fullwidth-slider-slide-image-portrait-before-filter, blur(10px)); + transform: var(--denhaag-fullwidth-slider-slide-image-portrait-before-transform, scale(1.2)); background-image: var(--denhaag-fullwidth-slider-background-image-url); } img { - object-fit: var(--denhaag-fullwidth-slider-slide-image-portrait-img-object-fit); + object-fit: var(--denhaag-fullwidth-slider-slide-image-portrait-img-object-fit, contain); } } } .denhaag-fullwidth-slider__reverse-slide-direction { - animation: var(--denhaag-fullwidth-slider-wrapper-reversed-animation); - animation-duration: var(--denhaag-fullwidth-slider-wrapper-reversed-animation-duration); + animation: var(--denhaag-fullwidth-slider-wrapper-reversed-animation, var(--denhaag-angled-image-next)); + animation-duration: var(--denhaag-fullwidth-slider-wrapper-reversed-animation-duration, 1000ms); } .denhaag-fullwidth-slider__slide--active { &:not(.denhaag-fullwidth-slider__remove-animation) { .denhaag-fullwidth-slider__slide-image { - position: var(--denhaag-fullwidth-slider-slide-active-image-position); - animation: var(--denhaag-fullwidth-slider-slide-active-image-animation); - animation-duration: var(--denhaag-fullwidth-slider-slide-active-image-animation-duration); + position: relative; + animation: var(--denhaag-fullwidth-slider-slide-active-image-animation, var(--denhaag-angled-image-next)); + animation-duration: var(--denhaag-fullwidth-slider-slide-active-image-animation-duration, 1000ms); } } .denhaag-fullwidth-slider__card { - transform: var(--denhaag-fullwidth-slider-slide-active-card-transform); - opacity: var(--denhaag-fullwidth-slider-slide-active-card-opacity); - transition-property: var(--denhaag-fullwidth-slider-slide-active-card-transition-property); - transition-duration: var(--denhaag-fullwidth-slider-slide-active-card-transition-duration); - transition-delay: var(--denhaag-fullwidth-slider-slide-active-card-transition-delay); + transform: var(--denhaag-fullwidth-slider-slide-active-card-transform, translateX(0)); + opacity: var(--denhaag-fullwidth-slider-slide-active-card-opacity, 100%); + transition-property: var( + --denhaag-fullwidth-slider-slide-active-card-transition-property, + transform, + opacity, + box-shadow + ); + transition-duration: var(--denhaag-fullwidth-slider-slide-active-card-transition-duration, 750ms, 350ms, 200ms); + transition-delay: var(--denhaag-fullwidth-slider-slide-active-card-transition-delay, 350ms, 350ms, 0ms); pointer-events: inherit; } } .denhaag-fullwidth-slider--prefers-reduced-motion { .denhaag-fullwidth-slider__card { - transition-delay: var(--denhaag-fullwidth-slider-slide-active-card-prefers-reduced-motion-transition-delay); - transition-duration: var(--denhaag-fullwidth-slider-slide-active-card-prefers-reduced-motion-transition-duration); + transition-delay: var(--denhaag-fullwidth-slider-slide-active-card-prefers-reduced-motion-transition-delay, 0ms); + transition-duration: var( + --denhaag-fullwidth-slider-slide-active-card-prefers-reduced-motion-transition-duration, + 0ms, + 0ms, + 200ms + ); } } .denhaag-fullwidth-slider__top { - display: var(--denhaag-fullwidth-slider-top-display); - grid-template-columns: var(--denhaag-fullwidth-slider-top-grid-template-columns-xs); - column-gap: var(--denhaag-fullwidth-slider-top-column-gap); - align-items: var(--denhaag-fullwidth-slider-top-align-items); - overflow-x: var(--denhaag-fullwidth-slider-top-overflow-x); - margin-block-end: var(--denhaag-fullwidth-slider-top-margin-block-end); - margin-inline-start: var(--denhaag-fullwidth-slider-top-margin-inline-xs); - margin-inline-end: var(--denhaag-fullwidth-slider-top-margin-inline-xs); + display: grid; + grid-template-columns: var(--denhaag-fullwidth-slider-top-grid-template-columns, repeat(2, 1fr)); + column-gap: var(--denhaag-fullwidth-slider-top-column-gap, 48px); + align-items: var(--denhaag-fullwidth-slider-top-align-items, center); + overflow-x: var(--denhaag-fullwidth-slider-top-overflow-x, hidden); + margin-block-end: var(--denhaag-fullwidth-slider-top-margin-block-end, 24px); + margin-inline: var(--denhaag-fullwidth-slider-top-margin-inline, 24px); @media (min-width: 768px) { - grid-template-columns: var(--denhaag-fullwidth-slider-top-grid-template-columns-sm); - margin-inline-start: var(--denhaag-fullwidth-slider-top-margin-inline-sm); - margin-inline-end: var(--denhaag-fullwidth-slider-top-margin-inline-sm); + --denhaag-fullwidth-slider-top-grid-template-columns: repeat(3, 1fr); + --denhaag-fullwidth-slider-top-margin-inline: 60px; } @media (min-width: 1280px) { - margin-inline-start: var(--denhaag-fullwidth-slider-top-margin-inline-xl); - margin-inline-end: var(--denhaag-fullwidth-slider-top-margin-inline-xl); + --denhaag-fullwidth-slider-top-margin-inline: 100px; } @media (min-width: 1768px) { - margin-inline-start: var(--denhaag-fullwidth-slider-top-margin-inline-xxl); - margin-inline-end: var(--denhaag-fullwidth-slider-top-margin-inline-xxl); + --denhaag-fullwidth-slider-top-margin-inline: 0px; } &--no-title { - display: var(--denhaag-fullwidth-slider-top-no-title-display); - justify-content: var(--denhaag-fullwidth-slider-top-no-title-justify-content); + display: flex; + justify-content: space-between; .denhaag-fullwidth-slider__pagination { - margin-inline-start: var(--denhaag-fullwidth-slider-top-no-title-pagination-margin-inline-start); + margin-inline-start: var(--denhaag-fullwidth-slider-top-no-title-pagination-margin-inline-start, 0px); } } } .denhaag-fullwidth-slider__top-title { - font-family: var(--denhaag-fullwidth-slider-top-title-font-family); - font-size: var(--denhaag-fullwidth-slider-top-title-font-size); - font-weight: var(--denhaag-fullwidth-slider-top-title-font-weight); - color: var(--denhaag-fullwidth-slider-top-title-color); - margin-block-start: var(--denhaag-fullwidth-slider-top-title-margin-block-start); - margin-block-end: var(--denhaag-fullwidth-slider-top-title-margin-block-end-sm); - grid-column: var(--denhaag-fullwidth-slider-top-title-grid-column-sm); + font-family: var( + --denhaag-fullwidth-slider-top-title-font-family, + var(--denhaag-typography-sans-serif-alternate-font-family) + ); + font-size: var(--denhaag-fullwidth-slider-top-title-font-size, var(--denhaag-typography-scale-2xl-font-size)); + font-weight: var(--denhaag-fullwidth-slider-top-title-font-weight, var(--denhaag-typography-weight-bold)); + color: var(--denhaag-fullwidth-slider-top-title-color, var(--denhaag-color-grey-5)); + margin-block-start: var(--denhaag-fullwidth-slider-top-title-margin-block-start, 0px); + margin-block-end: var(--denhaag-fullwidth-slider-top-title-margin-block-end, 0px); + grid-column: var(--denhaag-fullwidth-slider-top-title-grid-column, span 1); @media (max-width: 767px) { - grid-column: var(--denhaag-fullwidth-slider-top-title-grid-column-xs); - margin-block-end: var(--denhaag-fullwidth-slider-top-title-margin-block-end-xs); + --denhaag-fullwidth-slider-top-title-margin-block-end: 24px; + --denhaag-fullwidth-slider-top-title-grid-column: span 2; } } .denhaag-fullwidth-slider__controls { - display: var(--denhaag-fullwidth-slider-controls-display); - justify-content: var(--denhaag-fullwidth-slider-controls-justify-content); + display: flex; + justify-content: var(--denhaag-fullwidth-slider-controls-justify-content, flex-end); } .denhaag-fullwidth-slider__controls-playpause { - display: var(--denhaag-fullwidth-slider-controls-playpause-display); - justify-content: var(--denhaag-fullwidth-slider-controls-playpause-justify-content); - align-items: var(--denhaag-fullwidth-slider-controls-playpause-align-items); - background-color: var(--denhaag-fullwidth-slider-controls-playpause-background-color); - width: var(--denhaag-fullwidth-slider-controls-playpause-width); - height: var(--denhaag-fullwidth-slider-controls-playpause-height); - margin-inline-start: var(--denhaag-fullwidth-slider-controls-playpause-margin-inline); - margin-inline-end: var(--denhaag-fullwidth-slider-controls-playpause-margin-inline); - border: var(--denhaag-fullwidth-slider-controls-playpause-border); - border-color: var(--denhaag-fullwidth-slider-controls-playpause-border-color); - border-radius: var(--denhaag-fullwidth-slider-controls-playpause-border-radius); - color: var(--denhaag-fullwidth-slider-controls-playpause-color); + display: flex; + justify-content: center; + align-items: center; + width: var(--denhaag-fullwidth-slider-controls-playpause-width, 43px); + height: var(--denhaag-fullwidth-slider-controls-playpause-height, 43px); + margin-inline: var(--denhaag-fullwidth-slider-controls-playpause-margin-inline, var(--denhaag-space-xs)); + border: var(--denhaag-fullwidth-slider-controls-playpause-border, 1px solid); + border-color: var(--denhaag-fullwidth-slider-controls-playpause-border-color, var(--denhaag-color-green-3)); + border-radius: var(--denhaag-fullwidth-slider-controls-playpause-border-radius, var(--denhaag-border-radius)); + color: var(--denhaag-fullwidth-slider-controls-playpause-color, var(--denhaag-color-green-3)); &--hide { - display: var(--denhaag-fullwidth-slider-controls-playpause-hide-display); + display: none; } &:hover, &--hover { - cursor: var(--denhaag-fullwidth-slider-controls-playpause-hover-cursor); - color: var(--denhaag-fullwidth-slider-controls-playpause-hover-color); - border-color: var(--denhaag-fullwidth-slider-controls-playpause-hover-border-color); + cursor: pointer; + color: var(--denhaag-fullwidth-slider-controls-playpause-hover-color, var(--denhaag-color-green-4)); + border-color: var(--denhaag-fullwidth-slider-controls-playpause-hover-border-color, var(--denhaag-color-green-4)); } &:focus-visible, @@ -326,26 +342,28 @@ } @media (max-width: 359px) { - margin-inline-start: var(--denhaag-fullwidth-slider-controls-playpause-xxs-margin-inline); - margin-inline-end: var(--denhaag-fullwidth-slider-controls-playpause-xxs-margin-inline); + --denhaag-fullwidth-slider-controls-playpause-margin-inline: 0px; } } .denhaag-fullwidth-slider__controls-arrows { - display: var(--denhaag-fullwidth-slider-controls-arrows-display); - justify-content: var(--denhaag-fullwidth-slider-controls-arrows-justify-content); - align-items: var(--denhaag-fullwidth-slider-controls-arrows-align-items); - background-color: var(--denhaag-fullwidth-slider-controls-arrows-background-color); - width: var(--denhaag-fullwidth-slider-controls-arrows-width); - height: var(--denhaag-fullwidth-slider-controls-arrows-height); - border: var(--denhaag-fullwidth-slider-controls-arrows-border); - border-radius: var(--denhaag-fullwidth-slider-controls-arrows-border-radius); - color: var(--denhaag-fullwidth-slider-controls-arrows-color); + display: flex; + justify-content: center; + align-items: center; + background-color: var(--denhaag-fullwidth-slider-controls-arrows-background-color, var(--denhaag-color-green-3)); + width: var(--denhaag-fullwidth-slider-controls-arrows-width, 44px); + height: var(--denhaag-fullwidth-slider-controls-arrows-height, 44px); + border: var(--denhaag-fullwidth-slider-controls-arrows-border, none); + border-radius: var(--denhaag-fullwidth-slider-controls-arrows-border-radius, var(--denhaag-border-radius)); + color: var(--denhaag-fullwidth-slider-controls-arrows-color, var(--denhaag-color-white)); &:hover, &--hover { - cursor: var(--denhaag-fullwidth-slider-controls-arrows-hover-cursor); - background-color: var(--denhaag-fullwidth-slider-controls-arrows-hover-background-color); + cursor: pointer; + background-color: var( + --denhaag-fullwidth-slider-controls-arrows-hover-background-color, + var(--denhaag-color-green-4) + ); } &:focus-visible, @@ -354,85 +372,93 @@ } @media (max-width: 359px) { - display: var(--denhaag-fullwidth-slider-controls-arrows-xxs-display); + display: none; } } .denhaag-fullwidth-slider__pagination { - display: var(--denhaag-fullwidth-slider-pagination-display); - align-items: var(--denhaag-fullwidth-slider-pagination-align-items); - justify-content: var(--denhaag-fullwidth-slider-pagination-justify-content-xs); - transform: var(--denhaag-fullwidth-slider-pagination-transform) !important; - width: var(--denhaag-fullwidth-slider-pagination-width) !important; - min-height: var(--denhaag-fullwidth-slider-pagination-min-height); + display: flex; + align-items: center; + justify-content: var(--denhaag-fullwidth-slider-pagination-justify-content, flex-start); + transform: var(--denhaag-fullwidth-slider-pagination-transform, translateX(0)) !important; + width: var(--denhaag-fullwidth-slider-pagination-width, fit-content) !important; + min-height: var(--denhaag-fullwidth-slider-pagination-min-height, 48px); @media (min-width: 768px) { - justify-content: var(--denhaag-fullwidth-slider-pagination-justify-content-sm); - margin-inline-start: var(--denhaag-fullwidth-slider-pagination-margin-inline); - margin-inline-end: var(--denhaag-fullwidth-slider-pagination-margin-inline); + --denhaag-fullwidth-slider-pagination-justify-content: center; + + margin-inline: var(--denhaag-fullwidth-slider-pagination-margin-inline, auto); } &.denhaag-fullwidth-slider__pagination--dynamic { @media (max-width: 767px) { - margin-left: var(--denhaag-fullwidth-slider-pagination-dynamic-margin-left); + margin-left: var(--denhaag-fullwidth-slider-pagination-dynamic-margin-left, -40px); } } .denhaag-fullwidth-slider__pagination-bullet { - position: var(--denhaag-fullwidth-slider-pagination-bullet-position); - opacity: var(--denhaag-fullwidth-slider-pagination-bullet-opacity); - width: var(--denhaag-fullwidth-slider-pagination-bullet-width); - height: var(--denhaag-fullwidth-slider-pagination-bullet-height); - border-radius: var(--denhaag-fullwidth-slider-pagination-bullet-border-radius); - margin-inline-start: var(--denhaag-fullwidth-slider-pagination-bullet-margin-inline); - margin-inline-end: var(--denhaag-fullwidth-slider-pagination-bullet-margin-inline); - border: var(--denhaag-fullwidth-slider-pagination-bullet-border); - border-color: var(--denhaag-fullwidth-slider-pagination-bullet-border-color); + position: relative; + opacity: var(--denhaag-fullwidth-slider-pagination-bullet-opacity, 1); + width: var(--denhaag-fullwidth-slider-pagination-bullet-width, var(--denhaag-space-sm)); + height: var(--denhaag-fullwidth-slider-pagination-bullet-height, var(--denhaag-space-sm)); + border-radius: var(--denhaag-fullwidth-slider-pagination-bullet-border-radius, 50%); + margin-inline: var(--denhaag-fullwidth-slider-pagination-bullet-margin-inline, var(--denhaag-space-2xs)); + border: var(--denhaag-fullwidth-slider-pagination-bullet-border, 1px solid); + border-color: var(--denhaag-fullwidth-slider-pagination-bullet-border-color, var(--denhaag-color-green-3)); } .denhaag-fullwidth-slider__pagination-bullet--active { - opacity: var(--denhaag-fullwidth-slider-pagination-bullet-active-opacity); - transform: var(--denhaag-fullwidth-slider-pagination-bullet-active-transform); - background-color: var(--denhaag-fullwidth-slider-pagination-bullet-active-background-color); + opacity: var(--denhaag-fullwidth-slider-pagination-bullet-active-opacity, 1); + background-color: var( + --denhaag-fullwidth-slider-pagination-bullet-active-background-color, + var(--denhaag-color-green-3) + ); } &.swiper-pagination-bullets-dynamic { .denhaag-fullwidth-slider__pagination-bullet { - transition: var(--denhaag-fullwidth-slider-pagination-bullet-transition); - opacity: var(--denhaag-fullwidth-slider-pagination-bullet-dynamic-opacity); + transition: var(--denhaag-fullwidth-slider-pagination-bullet-transition, all 200ms); + opacity: var(--denhaag-fullwidth-slider-pagination-bullet-dynamic-opacity, 0); } .denhaag-fullwidth-slider__pagination-bullet--active-main { - opacity: var(--denhaag-fullwidth-slider-pagination-bullet-active-main-opacity); - transform: var(--denhaag-fullwidth-slider-pagination-bullet-active-main-transform); - background-color: var(--denhaag-fullwidth-slider-pagination-bullet-active-main-background-color); - border: var(--denhaag-fullwidth-slider-pagination-bullet-border); - border-color: var(--denhaag-fullwidth-slider-pagination-bullet-border-color); - width: var(--denhaag-fullwidth-slider-pagination-bullet-width); - height: var(--denhaag-fullwidth-slider-pagination-bullet-height); + opacity: var(--denhaag-fullwidth-slider-pagination-bullet-active-main-opacity, 1); + border: var(--denhaag-fullwidth-slider-pagination-bullet-border, 1px solid); + border-color: var(--denhaag-fullwidth-slider-pagination-bullet-border-color, var(--denhaag-color-green-3)); + width: var(--denhaag-fullwidth-slider-pagination-bullet-width, var(--denhaag-space-sm)); + height: var(--denhaag-fullwidth-slider-pagination-bullet-height, var(--denhaag-space-sm)); &.denhaag-fullwidth-slider__pagination-bullet--active { - opacity: var(--denhaag-fullwidth-slider-pagination-bullet-active-opacity); - background-color: var(--denhaag-fullwidth-slider-pagination-bullet-active-background-color); + opacity: var(--denhaag-fullwidth-slider-pagination-bullet-active-opacity, 1); + background-color: var( + --denhaag-fullwidth-slider-pagination-bullet-active-background-color, + var(--denhaag-color-green-3) + ); } } .denhaag-fullwidth-slider__pagination-bullet--active-prev, .denhaag-fullwidth-slider__pagination-bullet--active-next { - opacity: var(--denhaag-fullwidth-slider-pagination-bullet-active-opacity); - width: var(--denhaag-fullwidth-slider-pagination-bullet-active-next-prev-width); - height: var(--denhaag-fullwidth-slider-pagination-bullet-active-next-prev-height); - border: var(--denhaag-fullwidth-slider-pagination-bullet-border); - border-color: var(--denhaag-fullwidth-slider-pagination-bullet-border-color); + opacity: var(--denhaag-fullwidth-slider-pagination-bullet-active-opacity, 1); + width: var(--denhaag-fullwidth-slider-pagination-bullet-active-next-prev-width, var(--denhaag-space-xs)); + height: var(--denhaag-fullwidth-slider-pagination-bullet-active-next-prev-height, var(--denhaag-space-xs)); + border: var(--denhaag-fullwidth-slider-pagination-bullet-border, 1px solid); + border-color: var(--denhaag-fullwidth-slider-pagination-bullet-border-color, var(--denhaag-color-green-3)); } .denhaag-fullwidth-slider__pagination-bullet--active-prev-prev, .denhaag-fullwidth-slider__pagination-bullet--active-next-next { - opacity: var(--denhaag-fullwidth-slider-pagination-bullet-active-opacity); - width: var(--denhaag-fullwidth-slider-pagination-bullet-active-next-next-prev-prev-width); - height: var(--denhaag-fullwidth-slider-pagination-bullet-active-next-next-prev-prev-height); - border: var(--denhaag-fullwidth-slider-pagination-bullet-border); - border-color: var(--denhaag-fullwidth-slider-pagination-bullet-border-color); + opacity: var(--denhaag-fullwidth-slider-pagination-bullet-active-opacity, 1); + width: var( + --denhaag-fullwidth-slider-pagination-bullet-active-next-next-prev-prev-width, + var(--denhaag-space-2xs) + ); + height: var( + --denhaag-fullwidth-slider-pagination-bullet-active-next-next-prev-prev-height, + var(--denhaag-space-2xs) + ); + border: var(--denhaag-fullwidth-slider-pagination-bullet-border, 1px solid); + border-color: var(--denhaag-fullwidth-slider-pagination-bullet-border-color, var(--denhaag-color-green-3)); } } } diff --git a/components/FullwidthSlider/src/stories/bem.stories.mdx b/components/FullwidthSlider/src/stories/bem.stories.mdx index d65d55cdc1..8b83ef0907 100644 --- a/components/FullwidthSlider/src/stories/bem.stories.mdx +++ b/components/FullwidthSlider/src/stories/bem.stories.mdx @@ -10,94 +10,93 @@ import "../scripts/story.js"; ### Default - {/* eslint-disable react/no-unknown-property */} -
-
-

Slider title here

-
-
+
+
+

Slider title here

+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
@@ -105,100 +104,98 @@ import "../scripts/story.js";

- {/* eslint-enable react/no-unknown-property */} ### Portrait Image - {/* eslint-disable react/no-unknown-property */} -
-
-

Slider title here

-
-
+
+
+

Slider title here

+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
@@ -206,232 +203,230 @@ import "../scripts/story.js";

- {/* eslint-enable react/no-unknown-property */} ### Slider > 5 slides - {/* eslint-disable react/no-unknown-property */} -
-
-

Slider title here

-
-
+
+
+

Slider title here

+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
-

+ -
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+ -
-
+
+
Afbeelding 1
-
-
-

+ -
-
+
+
Afbeelding 1
-
-
-

+ -
-
+
+
Afbeelding 1
-
-
-

+ -
-
+
+
Afbeelding 1
-
-
-

+ -
-
+
+
Afbeelding 1
-
-
-

+

- {/* eslint-enable react/no-unknown-property */} ### Only 1 Slide - {/* eslint-disable react/no-unknown-property */} -
-
-

Slider title here

-
-
+
+
+

Slider title here

+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
@@ -496,56 +489,54 @@ import "../scripts/story.js";

- {/* eslint-enable react/no-unknown-property */} ### Card hover - {/* eslint-disable react/no-unknown-property */} -
-
-

Slider title here

-
-
+
+
+

Slider title here

+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
@@ -553,56 +544,54 @@ import "../scripts/story.js";

- {/* eslint-enable react/no-unknown-property */} ### Card Focus - {/* eslint-disable react/no-unknown-property */} -
-
-

Slider title here

-
-
+
+
+

Slider title here

+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
@@ -610,100 +599,98 @@ import "../scripts/story.js";

- {/* eslint-enable react/no-unknown-property */} ### Long slider title - {/* eslint-disable react/no-unknown-property */} -
-
-

This is a very long slider title, maybe a bit too long

-
-
+
+
+

This is a very long slider title, maybe a bit too long

+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
@@ -711,99 +698,97 @@ import "../scripts/story.js";

- {/* eslint-enable react/no-unknown-property */} ### No Slider Title - {/* eslint-disable react/no-unknown-property */} -
-
-
-
+
+
+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
@@ -811,57 +796,55 @@ import "../scripts/story.js";

- {/* eslint-enable react/no-unknown-property */} ### Long Card Title - {/* eslint-disable react/no-unknown-property */} -
-
-

This is slider title

-
-
+
+
+

This is slider title

+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
-

+

- {/* eslint-enable react/no-unknown-property */} ### Slider without captions - {/* eslint-disable react/no-unknown-property */} -
-
-

Slider title here

-
-
+
+
+

Slider title here

+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
+
+
Afbeelding 1
-
-
+
+
Afbeelding 1
- {/* eslint-enable react/no-unknown-property */} ### Slider with actions - {/* eslint-disable react/no-unknown-property */} -
-
-

Slider title here

-
-
+
+
+

Slider title here

+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
-

+
+
+

This slide has an arrow (so an action), the next one does not

-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

You can hover me all you like, but I will not do anything at all.

-
-
+
+
Afbeelding 1
-
-
-

Same here, I will not budge..!

+
+
+

Same here, I will not budge..!

- {/* eslint-enable react/no-unknown-property */} ### Prefers Reduced Motion - {/* eslint-disable react/no-unknown-property */} -
-
-

Slider title here

-
-
+
+
+

Slider title here

+
+
-
-
-
-
+
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title 2

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title 3

- Author + Author
-
+
-
-
+
+
Afbeelding 1
-
-
-

+
+
+

Carousel title

- Author + Author
-
+
@@ -1116,5 +1093,4 @@ import "../scripts/story.js";

- {/* eslint-enable react/no-unknown-property */} diff --git a/components/Header/src/index.scss b/components/Header/src/index.scss index 8ed696ff2e..27ec0840e4 100644 --- a/components/Header/src/index.scss +++ b/components/Header/src/index.scss @@ -1,13 +1,12 @@ @import "storybook"; .denhaag-header { - background-color: var(--denhaag-header-background-color); - border-bottom: 1px solid var(--denhaag-header-border-color); + background-color: var(--denhaag-header-background-color, var(--denhaag-color-white)); + border-bottom: 1px solid var(--denhaag-header-border-color, var(--denhaag-color-grey-1)); height: auto; - padding-block-end: var(--denhaag-header-padding-block); - padding-block-start: var(--denhaag-header-padding-block); - position: var(--denhaag-header-position); - top: var(--denhaag-header-top); + padding-block: var(--denhaag-header-padding-block, 0.875rem); + position: var(--denhaag-header-position, absolute); + top: var(--denhaag-header-top, 0); width: 100%; z-index: 6; @@ -23,10 +22,9 @@ .denhaag-header__container { margin-inline-end: auto; margin-inline-start: auto; - padding-inline-end: var(--denhaag-header-grid-gutter); - padding-inline-start: var(--denhaag-header-grid-gutter); - width: min(var(--denhaag-header-max-width), 100%); - max-width: var(--denhaag-header-max-width); + padding-inline: var(--denhaag-header-grid-gutter, var(--denhaag-space-xs)); + width: min(var(--denhaag-header-max-width, 100%), 100%); + max-width: var(--denhaag-header-max-width, 100%); display: flex; flex-direction: row; align-items: center; @@ -34,42 +32,41 @@ @media (min-width: 360px) { --denhaag-header-max-width: calc( - 100vw - (2 * (var(--denhaag-space-inline-xl) - var(--denhaag-header-grid-gutter))) + 100vw - (2 * (var(--denhaag-space-xl) - var(--denhaag-header-grid-gutter, var(--denhaag-space-xs)))) ); } @media (min-width: 768px) { - --denhaag-header-grid-gutter: var(--denhaag-space-inline-md); + --denhaag-header-grid-gutter: var(--denhaag-space-md); --denhaag-header-max-width: 40.5rem; } @media (min-width: 1024px) { - --denhaag-header-grid-gutter: var(--denhaag-space-inline-xl); + --denhaag-header-grid-gutter: var(--denhaag-space-xl); --denhaag-header-max-width: 56.5rem; - --denhaag-header-hypens: none; padding-inline-end: 0; padding-inline-start: 0; } @media (min-width: 1280px) { - --denhaag-header-grid-gutter: var(--denhaag-space-inline-2xl); + --denhaag-header-grid-gutter: var(--denhaag-space-2xl); --denhaag-header-max-width: 67.5rem; } @media (min-width: 1768px) { - --denhaag-header-grid-gutter: var(--denhaag-space-inline-3xl); + --denhaag-header-grid-gutter: var(--denhaag-space-3xl); --denhaag-header-max-width: 98rem; } @media (min-width: 2160px) { - --denhaag-header-grid-gutter: var(--denhaag-space-inline-4xl); + --denhaag-header-grid-gutter: var(--denhaag-space-4xl); } } .denhaag-header-logo { - height: var(--denhaag-header-logo-height); - width: var(--denhaag-header-logo-width); + height: var(--denhaag-header-logo-height, var(--denhaag-space-4xl)); + width: var(--denhaag-header-logo-width, 9.5rem); object-fit: contain; } @@ -77,5 +74,5 @@ align-items: center; display: flex; flex-direction: row; - gap: var(--denhaag-header-secondary-gap); + gap: var(--denhaag-header-secondary-gap, 0); } diff --git a/components/Header/src/stories/bem.stories.mdx b/components/Header/src/stories/bem.stories.mdx index a6c0e93383..b0e95bbd06 100644 --- a/components/Header/src/stories/bem.stories.mdx +++ b/components/Header/src/stories/bem.stories.mdx @@ -8,14 +8,14 @@ import "../index.scss"; {/* eslint-disable react/no-unknown-property */} -