diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 1558624..419781b 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -11,7 +11,7 @@ jobs: runs-on: ubuntu-latest strategy: matrix: - java: [17, 21] + java: [21] name: Java ${{ matrix.java }} steps: diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b42b517..4283377 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,7 +1,7 @@ lockfileVersion: '9.0' settings: - autoInstallPeers: true + autoInstallPeers: false excludeLinksFromLockfile: false importers: @@ -15,17 +15,38 @@ importers: specifier: 1.0.2 version: 1.0.2 '@utrecht/component-library-css': - specifier: ^6.1.0 + specifier: 6.1.0 version: 6.1.0 chokidar-cli: - specifier: ^3.0.0 + specifier: 3.0.0 version: 3.0.0 npm-run-all: - specifier: ^4.1.5 + specifier: 4.1.5 version: 4.1.5 + prettier: + specifier: 3.3.3 + version: 3.3.3 + prettier-plugin-java: + specifier: 2.6.5 + version: 2.6.5 packages: + '@chevrotain/cst-dts-gen@11.0.3': + resolution: {integrity: sha512-BvIKpRLeS/8UbfxXxgC33xOumsacaeCKAjAeLyOn7Pcp95HiRbrpl14S+9vaZLolnbssPIUuiUd8IvgkRyt6NQ==} + + '@chevrotain/gast@11.0.3': + resolution: {integrity: sha512-+qNfcoNk70PyS/uxmj3li5NiECO+2YKZZQMbmjTqRI3Qchu8Hig/Q9vgkHpI3alNjr7M+a2St5pw5w5F6NL5/Q==} + + '@chevrotain/regexp-to-ast@11.0.3': + resolution: {integrity: sha512-1fMHaBZxLFvWI067AVbGJav1eRY7N8DDvYCTwGBiE/ytKBgP8azTdgyrKyWZ9Mfh09eHWb5PgTSO8wi7U824RA==} + + '@chevrotain/types@11.0.3': + resolution: {integrity: sha512-gsiM3G8b58kZC2HaWR50gu6Y1440cHiJ+i3JUvcp/35JchYejb2+5MVeJK0iKThYpAa/P2PYFV4hoi44HD+aHQ==} + + '@chevrotain/utils@11.0.3': + resolution: {integrity: sha512-YslZMgtJUyuMbZ+aKvfF3x1f5liK4mWNxghFRv7jqRR9C3R3fAOGTTKvxXDa2Y1s9zSbcpuO0cAxDYsc9SrXoQ==} + '@gemeente-rotterdam/design-tokens@1.0.0-alpha.35': resolution: {integrity: sha512-PCeByC6lefxcvxd5aModHD8psz5x9zzNGtzVkKFClG22FrrP73vY5y7lcR0S/zWlqbMkoK9jT0Zuir5aAwquYw==} @@ -85,6 +106,14 @@ packages: resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==} engines: {node: '>=4'} + chevrotain-allstar@0.3.1: + resolution: {integrity: sha512-b7g+y9A0v4mxCW1qUhf3BSVPg+/NvGErk/dOkrDaHA0nQIQGAtrOjlX//9OQtRlSCy+x9rfB5N8yC71lH1nvMw==} + peerDependencies: + chevrotain: ^11.0.0 + + chevrotain@11.0.3: + resolution: {integrity: sha512-ci2iJH6LeIkvP9eJW6gpueU8cnZhv85ELY8w8WiFtNjMHA5ad6pQLaJo9mEly/9qUyCpvqX8/POVUTf18/HFdw==} + chokidar-cli@3.0.0: resolution: {integrity: sha512-xVW+Qeh7z15uZRxHOkP93Ux8A0xbPzwK4GaqD8dQOYc34TlkqUhVSS59fK36DOp5WdJlrRzlYSy02Ht99FjZqQ==} engines: {node: '>= 8.10.0'} @@ -340,6 +369,9 @@ packages: isexe@2.0.0: resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} + java-parser@2.3.2: + resolution: {integrity: sha512-/O42UbEHy3VVJw8W0ruHkQjW75oWvQx4QisoUDRIGir6q3/IZ4JslDMPMYEqp7LU56PYJkH5uXdQiBaCXt/Opw==} + json-parse-better-errors@1.0.2: resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==} @@ -351,12 +383,18 @@ packages: resolution: {integrity: sha512-7AO748wWnIhNqAuaty2ZWHkQHRSNfPVIsPIfwEOWO22AmaoVrWavlOcMR5nzTLNYvp36X220/maaRsrec1G65A==} engines: {node: '>=6'} + lodash-es@4.17.21: + resolution: {integrity: sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==} + lodash.debounce@4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} lodash.throttle@4.1.1: resolution: {integrity: sha512-wIkUCfVKpVsWo3JSZlc+8MB5it+2AN5W8J7YVMST30UrvcQNZ1Okbj+rbVniijTWE6FGYy4XJq/rHkas8qJMLQ==} + lodash@4.17.21: + resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==} + memorystream@0.3.1: resolution: {integrity: sha512-S3UwM3yj5mtUSEfP41UZmt/0SCoVYUcU1rkXv+BQ5Ig8ndL4sPoJNBUJERafdPb5jjHJGuMgytgKvKIf58XNBw==} engines: {node: '>= 0.10.0'} @@ -439,6 +477,19 @@ packages: resolution: {integrity: sha512-d7Uw+eZoloe0EHDIYoe+bQ5WXnGMOpmiZFTuMWCwpjzzkL2nTjcKiAk4hh8TjnGye2TwWOk3UXucZ+3rbmBa8Q==} engines: {node: '>= 0.4'} + prettier-plugin-java@2.6.5: + resolution: {integrity: sha512-2RkPNXyYpP5dRhr04pz45n+e5LXwYWTh1JXrztiCkZTGGokIGYrfwUuGa8csnDoGbP6CDPgVm8zZSIm/9I0SRQ==} + + prettier@3.2.5: + resolution: {integrity: sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==} + engines: {node: '>=14'} + hasBin: true + + prettier@3.3.3: + resolution: {integrity: sha512-i2tDNA0O5IrMO757lfrdQZCc2jPNDVntV0m/+4whiDfWaTKfMNgR7Qz0NAeGz/nRqF4m5/6CLzbP4/liHt12Ew==} + engines: {node: '>=14'} + hasBin: true + read-pkg@3.0.0: resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==} engines: {node: '>=4'} @@ -602,6 +653,23 @@ packages: snapshots: + '@chevrotain/cst-dts-gen@11.0.3': + dependencies: + '@chevrotain/gast': 11.0.3 + '@chevrotain/types': 11.0.3 + lodash-es: 4.17.21 + + '@chevrotain/gast@11.0.3': + dependencies: + '@chevrotain/types': 11.0.3 + lodash-es: 4.17.21 + + '@chevrotain/regexp-to-ast@11.0.3': {} + + '@chevrotain/types@11.0.3': {} + + '@chevrotain/utils@11.0.3': {} + '@gemeente-rotterdam/design-tokens@1.0.0-alpha.35': {} '@nl-design-system-candidate/paragraph-css@1.0.2': {} @@ -668,6 +736,20 @@ snapshots: escape-string-regexp: 1.0.5 supports-color: 5.5.0 + chevrotain-allstar@0.3.1(chevrotain@11.0.3): + dependencies: + chevrotain: 11.0.3 + lodash-es: 4.17.21 + + chevrotain@11.0.3: + dependencies: + '@chevrotain/cst-dts-gen': 11.0.3 + '@chevrotain/gast': 11.0.3 + '@chevrotain/regexp-to-ast': 11.0.3 + '@chevrotain/types': 11.0.3 + '@chevrotain/utils': 11.0.3 + lodash-es: 4.17.21 + chokidar-cli@3.0.0: dependencies: chokidar: 3.6.0 @@ -984,6 +1066,12 @@ snapshots: isexe@2.0.0: {} + java-parser@2.3.2: + dependencies: + chevrotain: 11.0.3 + chevrotain-allstar: 0.3.1(chevrotain@11.0.3) + lodash: 4.17.21 + json-parse-better-errors@1.0.2: {} load-json-file@4.0.0: @@ -998,10 +1086,14 @@ snapshots: p-locate: 3.0.0 path-exists: 3.0.0 + lodash-es@4.17.21: {} + lodash.debounce@4.0.8: {} lodash.throttle@4.1.1: {} + lodash@4.17.21: {} + memorystream@0.3.1: {} minimatch@3.1.2: @@ -1075,6 +1167,16 @@ snapshots: possible-typed-array-names@1.0.0: {} + prettier-plugin-java@2.6.5: + dependencies: + java-parser: 2.3.2 + lodash: 4.17.21 + prettier: 3.2.5 + + prettier@3.2.5: {} + + prettier@3.3.3: {} + read-pkg@3.0.0: dependencies: load-json-file: 4.0.0 diff --git a/src/main/java/nl/nldesignsystem/candidate/CandidateParagraph.html b/src/main/java/nl/nldesignsystem/candidate/CandidateParagraph.html index 13305e2..3a125d2 100644 --- a/src/main/java/nl/nldesignsystem/candidate/CandidateParagraph.html +++ b/src/main/java/nl/nldesignsystem/candidate/CandidateParagraph.html @@ -1,5 +1,5 @@

- - + +

diff --git a/src/main/java/nl/nldesignsystem/candidate/CandidateParagraph.java b/src/main/java/nl/nldesignsystem/candidate/CandidateParagraph.java index c0201c8..cac8e25 100644 --- a/src/main/java/nl/nldesignsystem/candidate/CandidateParagraph.java +++ b/src/main/java/nl/nldesignsystem/candidate/CandidateParagraph.java @@ -1,5 +1,3 @@ package nl.nldesignsystem.candidate; -public class CandidateParagraph { - -} +public class CandidateParagraph {} diff --git a/src/main/java/nl/rotterdam/wicket/HTMLUtil.java b/src/main/java/nl/rotterdam/wicket/HTMLUtil.java new file mode 100644 index 0000000..cbfb59c --- /dev/null +++ b/src/main/java/nl/rotterdam/wicket/HTMLUtil.java @@ -0,0 +1,22 @@ +package nl.rotterdam.wicket; + +import java.util.Arrays; +import java.util.stream.Collectors; + +public class HTMLUtil { + + public static String className(String... classes) { + return joinTokens(classes); + } + + public static String idRefs(String... classes) { + return joinTokens(classes); + } + + public static String joinTokens(String... classes) { + return Arrays.asList(classes) + .stream() + .filter(className -> className != null && !className.trim().isEmpty()) + .collect(Collectors.joining(" ")); + } +} diff --git a/src/main/java/nl/rotterdam/wicket/docs/Changelog.java b/src/main/java/nl/rotterdam/wicket/docs/Changelog.java index 935452d..0a9ffe1 100644 --- a/src/main/java/nl/rotterdam/wicket/docs/Changelog.java +++ b/src/main/java/nl/rotterdam/wicket/docs/Changelog.java @@ -1,16 +1,14 @@ package nl.rotterdam.wicket.docs; import nl.utrecht.components.UtrechtCodeBlock; - import org.apache.wicket.markup.html.basic.Label; import org.apache.wicket.model.Model; -public class Changelog extends EmptyPage -{ - public Changelog() - { - add( new Label( TITLE_ID, "Changelog · Apache Wicket · Rotterdam Design System")); +public class Changelog extends EmptyPage { + + public Changelog() { + add(new Label(TITLE_ID, "Changelog · Apache Wicket · Rotterdam Design System")); - add( new UtrechtCodeBlock( "changelog", Model.of("Reload Page"))); - } + add(new UtrechtCodeBlock("changelog", Model.of("Reload Page"))); + } } diff --git a/src/main/java/nl/rotterdam/wicket/docs/Components.html b/src/main/java/nl/rotterdam/wicket/docs/Components.html index abcf6cb..4836ee6 100644 --- a/src/main/java/nl/rotterdam/wicket/docs/Components.html +++ b/src/main/java/nl/rotterdam/wicket/docs/Components.html @@ -1,50 +1,50 @@ -

Components 2

-

Code

-
-

Code Block

-
-

Heading

-

Heading 1

-
-

Heading 2

-
-

Heading 3

-
-

Heading 4

-
-

Heading 5

-
-

Heading 6

-
-

Heading level 1

-
- -

Action Group

-
-

Form Field with Checkbox

-
-

Form Field with Checkbox (checked)

-
-

Form Field with Checkbox (required)

-
-

Form Field with Checkbox (invalid)

-
-

Form Field with Checkbox (description)

-
+
+

Components 2

+

Code

+
+

Code Block

+
+

Heading

+

Heading 1

+
+

Heading 2

+
+

Heading 3

+
+

Heading 4

+
+

Heading 5

+
+

Heading 6

+
+

Heading level 1

+
+

Heading level 2

+
+

Heading level 3

+
+

Heading level 4

+
+

Heading level 5

+
+

Heading level 6

+
+

Action Group

+
+

Form Field with Checkbox

+
+

Form Field with Checkbox (checked)

+
+

Form Field with Checkbox (required)

+
+

Form Field with Checkbox (invalid)

+
+

Form Field with Checkbox (description)

+
+
diff --git a/src/main/java/nl/rotterdam/wicket/docs/Components.java b/src/main/java/nl/rotterdam/wicket/docs/Components.java index b61d764..5f4cd4e 100644 --- a/src/main/java/nl/rotterdam/wicket/docs/Components.java +++ b/src/main/java/nl/rotterdam/wicket/docs/Components.java @@ -1,9 +1,5 @@ package nl.rotterdam.wicket.docs; -import org.apache.wicket.markup.html.basic.Label; -// import org.apache.wicket.markup.html.link.BookmarkablePageLink; -import org.apache.wicket.model.Model; - import nl.utrecht.components.UtrechtActionGroup; import nl.utrecht.components.UtrechtCheckbox; import nl.utrecht.components.UtrechtCode; @@ -15,43 +11,92 @@ import nl.utrecht.components.UtrechtHeading4; import nl.utrecht.components.UtrechtHeading5; import nl.utrecht.components.UtrechtHeading6; +import org.apache.wicket.markup.html.basic.Label; +// import org.apache.wicket.markup.html.link.BookmarkablePageLink; +import org.apache.wicket.model.Model; // import nl.utrecht.components.UtrechtUnorderedList; -public class Components extends EmptyPage -{ - public Components() - { - add( new Label( TITLE_ID, "Components · Apache Wicket · Rotterdam Design System")); - - // add(new BookmarkablePageLink("body", Changelog.class)); - add( new UtrechtCode( "code-example", Model.of("Reload Page"))); - - add( new UtrechtCodeBlock( "code-block-example", Model.of("Reload Page"))); - - add( new UtrechtHeading( "heading-level-1-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), UtrechtHeading.HeadingLevel.LEVEL_1)); - // add( new UtrechtHeading( "heading-level-2-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), UtrechtHeading.HeadingLevel.LEVEL_2)); - // add( new UtrechtHeading( "heading-level-3-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), UtrechtHeading.HeadingLevel.LEVEL_3)); - // add( new UtrechtHeading( "heading-level-4-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), UtrechtHeading.HeadingLevel.LEVEL_4)); - // add( new UtrechtHeading( "heading-level-5-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), UtrechtHeading.HeadingLevel.LEVEL_5)); - // add( new UtrechtHeading( "heading-level-6-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), UtrechtHeading.HeadingLevel.LEVEL_6)); - - add( new UtrechtHeading1( "heading-1-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); - add( new UtrechtHeading2( "heading-2-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); - add( new UtrechtHeading3( "heading-3-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); - add( new UtrechtHeading4( "heading-4-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); - add( new UtrechtHeading5( "heading-5-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); - add( new UtrechtHeading6( "heading-6-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); - - add( new UtrechtActionGroup( "action-group-example")); - - add( new UtrechtCheckbox( "form-field-checkbox-example", Model.of(false), "I agree")); - add( new UtrechtCheckbox( "form-field-checkbox-checked-example", Model.of(true), "I agree")); - add( new UtrechtCheckbox( "form-field-checkbox-invalid-example", Model.of(false), "I agree")); - UtrechtCheckbox requiredCheckbox = new UtrechtCheckbox( "form-field-checkbox-required-example", Model.of(false), "I agree"); - requiredCheckbox.setRequired(true); - add( requiredCheckbox ); - add( new UtrechtCheckbox( "form-field-checkbox-description-example", Model.of(false), Model.of("I agree"), Model.of("Description"), Model.of("error"))); - - } +public class Components extends EmptyPage { + + public Components() { + add(new Label(TITLE_ID, "Components · Apache Wicket · Rotterdam Design System")); + + // add(new BookmarkablePageLink("body", Changelog.class)); + add(new UtrechtCode("code-example", Model.of("Reload Page"))); + + add(new UtrechtCodeBlock("code-block-example", Model.of("Reload Page"))); + + add( + new UtrechtHeading( + "heading-level-1-example", + Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), + UtrechtHeading.HeadingLevel.LEVEL_1 + ) + ); + add( + new UtrechtHeading( + "heading-level-2-example", + Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), + UtrechtHeading.HeadingLevel.LEVEL_2 + ) + ); + add( + new UtrechtHeading( + "heading-level-3-example", + Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), + UtrechtHeading.HeadingLevel.LEVEL_3 + ) + ); + add( + new UtrechtHeading( + "heading-level-4-example", + Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), + UtrechtHeading.HeadingLevel.LEVEL_4 + ) + ); + add( + new UtrechtHeading( + "heading-level-5-example", + Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), + UtrechtHeading.HeadingLevel.LEVEL_5 + ) + ); + add( + new UtrechtHeading( + "heading-level-6-example", + Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"), + UtrechtHeading.HeadingLevel.LEVEL_6 + ) + ); + + add(new UtrechtHeading1("heading-1-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); + add(new UtrechtHeading2("heading-2-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); + add(new UtrechtHeading3("heading-3-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); + add(new UtrechtHeading4("heading-4-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); + add(new UtrechtHeading5("heading-5-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); + add(new UtrechtHeading6("heading-6-example", Model.of("Op brute wijze ving de schooljuf de quasi-kalme lynx"))); + + add(new UtrechtActionGroup("action-group-example")); + + add(new UtrechtCheckbox("form-field-checkbox-example", Model.of(false), "I agree")); + add(new UtrechtCheckbox("form-field-checkbox-checked-example", Model.of(true), "I agree")); + add(new UtrechtCheckbox("form-field-checkbox-invalid-example", Model.of(false), "I agree")); + UtrechtCheckbox requiredCheckbox = new UtrechtCheckbox( + "form-field-checkbox-required-example", + Model.of(false), + "I agree" + ); + requiredCheckbox.setRequired(true); + add(requiredCheckbox); + add( + new UtrechtCheckbox( + "form-field-checkbox-description-example", + Model.of(false), + Model.of("I agree"), + Model.of("Description"), + Model.of("error") + ) + ); + } } diff --git a/src/main/java/nl/rotterdam/wicket/docs/DocsApplication.java b/src/main/java/nl/rotterdam/wicket/docs/DocsApplication.java index 3599fbd..c3a612a 100755 --- a/src/main/java/nl/rotterdam/wicket/docs/DocsApplication.java +++ b/src/main/java/nl/rotterdam/wicket/docs/DocsApplication.java @@ -6,49 +6,49 @@ import org.apache.wicket.protocol.http.WebApplication; import org.apache.wicket.settings.ExceptionSettings; -public class DocsApplication extends WebApplication -{ - @Override - public void init() - { - super.init(); +public class DocsApplication extends WebApplication { - // Avoid in the output HTML - getMarkupSettings().setStripWicketTags(true); + @Override + public void init() { + super.init(); - // Configure our own fance error page - getApplicationSettings().setInternalErrorPage( ErrorPage.class ); - getExceptionSettings().setUnexpectedExceptionDisplay(ExceptionSettings.SHOW_INTERNAL_ERROR_PAGE); + // Avoid in the output HTML + getMarkupSettings().setStripWicketTags(true); - /* - * `CSPDirective` does not appear to support every option we want. - * - * TODO: Implement the following CSP directives: - * - * - `.add("block-all-mixed-content")` - * - `.add("worker-src", "blob")` - * - `.add("form-action", CSPDirectiveSrcValue.SELF)` - */ - getCspSettings().blocking().clear() - .add(CSPDirective.DEFAULT_SRC, CSPDirectiveSrcValue.SELF) - .add(CSPDirective.OBJECT_SRC, CSPDirectiveSrcValue.NONE) - .add(CSPDirective.BASE_URI, CSPDirectiveSrcValue.SELF) - .add(CSPDirective.FRAME_ANCESTORS, CSPDirectiveSrcValue.NONE) - .add(CSPDirective.CONNECT_SRC, CSPDirectiveSrcValue.SELF) - .add(CSPDirective.CONNECT_SRC, "'blob'") - .add(CSPDirective.CONNECT_SRC, "data:") - .add(CSPDirective.IMG_SRC, CSPDirectiveSrcValue.SELF) - .add(CSPDirective.IMG_SRC, "'blob'") - .add(CSPDirective.IMG_SRC, "data:") - .add(CSPDirective.FONT_SRC, CSPDirectiveSrcValue.SELF) - .add(CSPDirective.STYLE_SRC, CSPDirectiveSrcValue.UNSAFE_INLINE) - .add(CSPDirective.SCRIPT_SRC, CSPDirectiveSrcValue.SELF) - .add(CSPDirective.STYLE_SRC, CSPDirectiveSrcValue.SELF); - } + // Configure our own fance error page + getApplicationSettings().setInternalErrorPage(ErrorPage.class); + getExceptionSettings().setUnexpectedExceptionDisplay(ExceptionSettings.SHOW_INTERNAL_ERROR_PAGE); - @Override - public Class getHomePage() - { - return Components.class; - } + /* + * `CSPDirective` does not appear to support every option we want. + * + * TODO: Implement the following CSP directives: + * + * - `.add("block-all-mixed-content")` + * - `.add("worker-src", "blob")` + * - `.add("form-action", CSPDirectiveSrcValue.SELF)` + */ + getCspSettings() + .blocking() + .clear() + .add(CSPDirective.DEFAULT_SRC, CSPDirectiveSrcValue.SELF) + .add(CSPDirective.OBJECT_SRC, CSPDirectiveSrcValue.NONE) + .add(CSPDirective.BASE_URI, CSPDirectiveSrcValue.SELF) + .add(CSPDirective.FRAME_ANCESTORS, CSPDirectiveSrcValue.NONE) + .add(CSPDirective.CONNECT_SRC, CSPDirectiveSrcValue.SELF) + .add(CSPDirective.CONNECT_SRC, "'blob'") + .add(CSPDirective.CONNECT_SRC, "data:") + .add(CSPDirective.IMG_SRC, CSPDirectiveSrcValue.SELF) + .add(CSPDirective.IMG_SRC, "'blob'") + .add(CSPDirective.IMG_SRC, "data:") + .add(CSPDirective.FONT_SRC, CSPDirectiveSrcValue.SELF) + .add(CSPDirective.STYLE_SRC, CSPDirectiveSrcValue.UNSAFE_INLINE) + .add(CSPDirective.SCRIPT_SRC, CSPDirectiveSrcValue.SELF) + .add(CSPDirective.STYLE_SRC, CSPDirectiveSrcValue.SELF); + } + + @Override + public Class getHomePage() { + return Components.class; + } } diff --git a/src/main/java/nl/rotterdam/wicket/docs/EmptyPage.java b/src/main/java/nl/rotterdam/wicket/docs/EmptyPage.java index 7fe9d53..4c4e77b 100644 --- a/src/main/java/nl/rotterdam/wicket/docs/EmptyPage.java +++ b/src/main/java/nl/rotterdam/wicket/docs/EmptyPage.java @@ -2,12 +2,9 @@ import org.apache.wicket.markup.html.WebPage; -public abstract class EmptyPage extends WebPage -{ - public static final String TITLE_ID = "title"; - - public EmptyPage() - { - - } +public abstract class EmptyPage extends WebPage { + + public static final String TITLE_ID = "title"; + + public EmptyPage() {} } diff --git a/src/main/java/nl/rotterdam/wicket/docs/ErrorPage.java b/src/main/java/nl/rotterdam/wicket/docs/ErrorPage.java index 63f0045..d8edc72 100644 --- a/src/main/java/nl/rotterdam/wicket/docs/ErrorPage.java +++ b/src/main/java/nl/rotterdam/wicket/docs/ErrorPage.java @@ -1,18 +1,16 @@ package nl.rotterdam.wicket.docs; +import nl.utrecht.components.UtrechtButton; import org.apache.wicket.markup.html.basic.Label; import org.apache.wicket.model.Model; -import nl.utrecht.components.UtrechtButton; -public class ErrorPage extends EmptyPage -{ - - public static final String ERROR_MESSAGE_ID = "error-message"; - public static final String ERROR_ACTION_ID = "error-action"; +public class ErrorPage extends EmptyPage { + + public static final String ERROR_MESSAGE_ID = "error-message"; + public static final String ERROR_ACTION_ID = "error-action"; - public ErrorPage() - { - add( new Label( ERROR_MESSAGE_ID, "An error occured.")); - add( new UtrechtButton( ERROR_ACTION_ID, Model.of("Reload Page"), UtrechtButton.ButtonStyle.PRIMARY_ACTION) ); - } + public ErrorPage() { + add(new Label(ERROR_MESSAGE_ID, "An error occured.")); + add(new UtrechtButton(ERROR_ACTION_ID, Model.of("Reload Page"), UtrechtButton.ButtonStyle.PRIMARY_ACTION)); + } } diff --git a/src/main/java/nl/utrecht/components/UtrechtActionGroup.html b/src/main/java/nl/utrecht/components/UtrechtActionGroup.html index 4c75caf..c69bf51 100644 --- a/src/main/java/nl/utrecht/components/UtrechtActionGroup.html +++ b/src/main/java/nl/utrecht/components/UtrechtActionGroup.html @@ -1,5 +1,3 @@ - +
diff --git a/src/main/java/nl/utrecht/components/UtrechtActionGroup.java b/src/main/java/nl/utrecht/components/UtrechtActionGroup.java index 5e52394..e9eead0 100644 --- a/src/main/java/nl/utrecht/components/UtrechtActionGroup.java +++ b/src/main/java/nl/utrecht/components/UtrechtActionGroup.java @@ -1,17 +1,12 @@ package nl.utrecht.components; -import org.apache.wicket.markup.html.basic.Label; import org.apache.wicket.markup.html.panel.Panel; -import org.apache.wicket.model.IModel; public class UtrechtActionGroup extends Panel { - public static final String SLOT_ID = "slot"; - private final Label label; + public static final String SLOT_ID = "slot"; - public UtrechtActionGroup(String id,IModel textContent) { - super(id); - label = new Label(SLOT_ID, textContent); - add(label); - } -} \ No newline at end of file + public UtrechtActionGroup(String id) { + super(id); + } +} diff --git a/src/main/java/nl/utrecht/components/UtrechtButton.java b/src/main/java/nl/utrecht/components/UtrechtButton.java index 9665645..5c6c000 100644 --- a/src/main/java/nl/utrecht/components/UtrechtButton.java +++ b/src/main/java/nl/utrecht/components/UtrechtButton.java @@ -10,71 +10,75 @@ import org.apache.wicket.model.Model; public class UtrechtButton extends Panel { - private static final long serialVersionUID = 1L; - - public enum ButtonStyle { - PRIMARY_ACTION("utrecht-button--primary-action"), - SECONDARY_ACTION("utrecht-button--secondary-action"), - SUBTLE("utrecht-button--subtle"), - SUCCESS("utrecht-button--ready"), - DANGER("utrech-button--danger"), - WARNING("utrech-button--warning"); - - private final String cssClass; - - ButtonStyle(String cssClass) { - this.cssClass = cssClass; - } - - public String getCssClass() { - return cssClass; - } - } - private final AjaxLink button; - private final Label label; - private boolean isDisabled = false; - - public UtrechtButton(String id, IModel labelModel) { - this(id, labelModel, ButtonStyle.PRIMARY_ACTION); - } - - public UtrechtButton(String id, IModel labelModel, ButtonStyle style) { - super(id); - - button = new AjaxLink("button") { - @Override - public void onClick(AjaxRequestTarget target) { - if (!isDisabled) { - UtrechtButton.this.onClick(target); - } - } - - @Override - protected void onComponentTag(ComponentTag tag) { - super.onComponentTag(tag); - tag.put("class", "utrecht-button " + style.getCssClass() + " " + (isDisabled ? "utrecht-button--disabled": "")); - if (isDisabled) { - tag.put("disabled", "disabled"); - } - } - }; - - label = new Label("label", labelModel); - button.add(label); - add(button); - } - - protected void onClick(AjaxRequestTarget target) { - // Override this method to handle click events - } - - public UtrechtButton setDisabled(boolean disabled) { - this.isDisabled = disabled; - return this; + + private static final long serialVersionUID = 1L; + + public enum ButtonStyle { + PRIMARY_ACTION("utrecht-button--primary-action"), + SECONDARY_ACTION("utrecht-button--secondary-action"), + SUBTLE("utrecht-button--subtle"), + SUCCESS("utrecht-button--ready"), + DANGER("utrech-button--danger"), + WARNING("utrech-button--warning"); + + private final String cssClass; + + ButtonStyle(String cssClass) { + this.cssClass = cssClass; } - - public UtrechtButton addCssClass(String cssClass) { - button.add(new AttributeAppender("class", Model.of(cssClass), " ")); - return this; + + public String getCssClass() { + return cssClass; } -} \ No newline at end of file + } + + private final AjaxLink button; + private final Label label; + private boolean isDisabled = false; + + public UtrechtButton(String id, IModel labelModel) { + this(id, labelModel, ButtonStyle.PRIMARY_ACTION); + } + + public UtrechtButton(String id, IModel labelModel, ButtonStyle style) { + super(id); + button = new AjaxLink("button") { + @Override + public void onClick(AjaxRequestTarget target) { + if (!isDisabled) { + UtrechtButton.this.onClick(target); + } + } + + @Override + protected void onComponentTag(ComponentTag tag) { + super.onComponentTag(tag); + tag.put( + "class", + "utrecht-button " + style.getCssClass() + " " + (isDisabled ? "utrecht-button--disabled" : "") + ); + if (isDisabled) { + tag.put("disabled", "disabled"); + } + } + }; + + label = new Label("label", labelModel); + button.add(label); + add(button); + } + + protected void onClick(AjaxRequestTarget target) { + // Override this method to handle click events + } + + public UtrechtButton setDisabled(boolean disabled) { + this.isDisabled = disabled; + return this; + } + + public UtrechtButton addCssClass(String cssClass) { + button.add(new AttributeAppender("class", Model.of(cssClass), " ")); + return this; + } +} diff --git a/src/main/java/nl/utrecht/components/UtrechtCheckbox.html b/src/main/java/nl/utrecht/components/UtrechtCheckbox.html index 10c28f8..f0a49a9 100644 --- a/src/main/java/nl/utrecht/components/UtrechtCheckbox.html +++ b/src/main/java/nl/utrecht/components/UtrechtCheckbox.html @@ -1,9 +1,9 @@
- + - +
diff --git a/src/main/java/nl/utrecht/components/UtrechtCheckbox.java b/src/main/java/nl/utrecht/components/UtrechtCheckbox.java index d16d9e1..b8e48d2 100644 --- a/src/main/java/nl/utrecht/components/UtrechtCheckbox.java +++ b/src/main/java/nl/utrecht/components/UtrechtCheckbox.java @@ -1,9 +1,7 @@ package nl.utrecht.components; -import java.util.Arrays; import java.util.UUID; -import java.util.stream.Collectors; - +import nl.rotterdam.wicket.HTMLUtil; import org.apache.wicket.markup.ComponentTag; import org.apache.wicket.markup.html.basic.Label; import org.apache.wicket.markup.html.form.CheckBox; @@ -12,145 +10,179 @@ import org.apache.wicket.model.Model; public class UtrechtCheckbox extends Panel { - private static final long serialVersionUID = 1L; - - private final CheckBox checkbox; - private final Label description; - private final IModel errorMessageModel; - private final Label errorMessage; - private final String checkboxId; - private final String fieldId; - private final String descriptionId; - private final String errorMessageId; - - public static final String FORM_FIELD_CLASSNAME = "utrecht-form-field"; - public static final String FORM_FIELD_CHECKBOX_CLASSNAME = "utrecht-form-field--checkbox"; - public static final String FORM_FIELD_INVALID_CLASSNAME = "utrecht-form-field--invalid"; - public static final String FORM_LABEL_CLASSNAME = "utrecht-form-label utrecht-form-label--checkbox"; - public static final String CHECKBOX_CLASSNAME = "utrecht-checkbox utrecht-checkbox--html-input utrecht-checkbox--custom"; - public static final String INVALID_CLASSNAME = "utrecht-checkbox--invalid"; - public static final String FORM_FIELD_INPUT_CLASSNAME = "utrecht-form-field__input"; - - public UtrechtCheckbox(String id, IModel model, String labelText) { - this(id, model, Model.of(labelText), null, null); - } - - public static String joinTokens(String... classes) { - return Arrays.asList(classes).stream() - .filter(className -> className != null && !className.trim().isEmpty()) - .collect(Collectors.joining(" ")); - } - - public UtrechtCheckbox(String id, IModel model, IModel labelModel, - IModel descriptionModel, IModel errorModel) { - super(id); - - errorMessageModel = errorModel; - - // Generate unique IDs `for` and `aria-describedby` ID references - fieldId = UUID.randomUUID().toString(); - checkboxId = UUID.randomUUID().toString(); - descriptionId = UUID.randomUUID().toString(); - errorMessageId = UUID.randomUUID().toString(); - - // Create the checkbox input - checkbox = new CheckBox("checkbox", model) { - @Override - protected void onComponentTag(ComponentTag tag) { - super.onComponentTag(tag); - tag.put("id", checkboxId); - tag.put("class", joinTokens( - UtrechtCheckbox.CHECKBOX_CLASSNAME, - UtrechtCheckbox.FORM_FIELD_INPUT_CLASSNAME, - isInvalid() ? UtrechtCheckbox.INVALID_CLASSNAME : null - )); - - String ariaDescribedBy = joinTokens( - descriptionModel != null && descriptionModel.getObject() != null ? descriptionId : null, - isInvalid() ? errorMessageId : null - ); - - if (!ariaDescribedBy.isEmpty()) { - tag.put("aria-describedby", ariaDescribedBy); - } - - if (isRequired()) { - tag.put("aria-required", "true"); - } - if (isInvalid()) { - tag.put("aria-invalid", "true"); - } - } - }; - - // Create the label - Label label = new Label("label", labelModel) { - @Override - protected void onComponentTag(ComponentTag tag) { - super.onComponentTag(tag); - tag.put("for", checkboxId); - tag.put("class", UtrechtCheckbox.FORM_LABEL_CLASSNAME); - } - }; - - // Create description and error message - description = new Label("description", descriptionModel) { - @Override - protected void onComponentTag(ComponentTag tag) { - super.onComponentTag(tag); - tag.put("id", descriptionId); - } - - @Override - public boolean isVisible() { - return getDefaultModelObject() != null; - } - }; - - errorMessage = new Label("error", errorModel) { - @Override - protected void onComponentTag(ComponentTag tag) { - super.onComponentTag(tag); - tag.put("id", errorMessageId); - } - - @Override - public boolean isVisible() { - return getDefaultModelObject() != null; - } - }; - - // Add all components - add(checkbox); - add(label); - add(description); - add(errorMessage); - } - - protected boolean isInvalid() { - return errorMessageModel != null && errorMessageModel.getObject() != null; - } - protected boolean isRequired() { - return checkbox.isRequired(); - } - - @Override - protected void onComponentTag(ComponentTag tag) { + + private static final long serialVersionUID = 1L; + + private final CheckBox checkbox; + private final Label description; + private final IModel errorMessageModel; + private final Label errorMessage; + private final String checkboxId; + private final String fieldId; + private final String descriptionId; + private final String errorMessageId; + + public static final String FORM_FIELD_CLASSNAME = "utrecht-form-field"; + public static final String FORM_FIELD_CHECKBOX_CLASSNAME = "utrecht-form-field--checkbox"; + public static final String FORM_FIELD_INVALID_CLASSNAME = "utrecht-form-field--invalid"; + public static final String FORM_LABEL_CLASSNAME = "utrecht-form-label utrecht-form-label--checkbox"; + public static final String FORM_LABEL_DISABLED_CLASSNAME = "utrecht-form-label--disabled"; + public static final String CHECKBOX_CLASSNAME = + "utrecht-checkbox utrecht-checkbox--html-input utrecht-checkbox--custom"; + public static final String CHECKBOX_DISABLED_CLASSNAME = "utrecht-checkbox--disabled"; + public static final String INVALID_CLASSNAME = "utrecht-checkbox--invalid"; + public static final String FORM_FIELD_INPUT_CLASSNAME = "utrecht-form-field__input"; + + public UtrechtCheckbox(String id, IModel model, String labelText) { + this(id, model, Model.of(labelText), null, null); + } + + public UtrechtCheckbox( + String id, + IModel model, + IModel labelModel, + IModel descriptionModel, + IModel errorModel + ) { + super(id); + errorMessageModel = errorModel; + + // Generate unique IDs `for` and `aria-describedby` ID references + fieldId = UUID.randomUUID().toString(); + checkboxId = UUID.randomUUID().toString(); + descriptionId = UUID.randomUUID().toString(); + errorMessageId = UUID.randomUUID().toString(); + Boolean disabled = true; + + // TODO: Implement indeterminate state, when someone needs it. + + // Create the checkbox input + checkbox = new CheckBox("checkbox", model) { + @Override + protected void onComponentTag(ComponentTag tag) { + super.onComponentTag(tag); + checkbox.setMarkupId(checkboxId); + + tag.put( + "class", + HTMLUtil.className( + UtrechtCheckbox.CHECKBOX_CLASSNAME, + UtrechtCheckbox.FORM_FIELD_INPUT_CLASSNAME, + disabled ? UtrechtCheckbox.CHECKBOX_DISABLED_CLASSNAME : null, + isInvalid() ? UtrechtCheckbox.INVALID_CLASSNAME : null + ) + ); + + String ariaDescribedBy = HTMLUtil.idRefs( + descriptionModel != null && descriptionModel.getObject() != null ? descriptionId : null, + isInvalid() ? errorMessageId : null + ); + + // Do not render an empty `aria-describedby` attribute. + if (!ariaDescribedBy.isEmpty()) { + tag.put("aria-describedby", ariaDescribedBy); + } + + if (isRequired()) { + tag.put("aria-required", "true"); + } + if (isInvalid()) { + tag.put("aria-invalid", "true"); + } + } + + protected void onDisabled(final ComponentTag tag) { + tag.put("disabled", "disabled"); + // TODO: Add `CHECKBOX_DISABLED_CLASSNAME` class name + } + }; + + // Create the label + Label label = new Label("label", labelModel) { + @Override + protected void onComponentTag(ComponentTag tag) { + super.onComponentTag(tag); + tag.put("for", checkboxId); + tag.put( + "class", + HTMLUtil.className( + UtrechtCheckbox.FORM_LABEL_CLASSNAME, + disabled ? UtrechtCheckbox.FORM_LABEL_DISABLED_CLASSNAME : null + ) + ); + } + }; + + Label labelText = new Label("labelText", labelModel) { + @Override + protected void onComponentTag(ComponentTag tag) { + super.onComponentTag(tag); + } + }; + + // Create description and error message + description = new Label("description", descriptionModel) { + @Override + protected void onComponentTag(ComponentTag tag) { + super.onComponentTag(tag); + tag.put("id", descriptionId); + } + + @Override + public boolean isVisible() { + return getDefaultModelObject() != null; + } + }; + + errorMessage = new Label("error", errorModel) { + @Override + protected void onComponentTag(ComponentTag tag) { super.onComponentTag(tag); - tag.put("id", fieldId); - tag.put("class", joinTokens( - UtrechtCheckbox.FORM_FIELD_CLASSNAME, - UtrechtCheckbox.FORM_FIELD_CHECKBOX_CLASSNAME, - isInvalid() ? UtrechtCheckbox.FORM_FIELD_INVALID_CLASSNAME : null - )); - } - - public UtrechtCheckbox setRequired(boolean required) { - checkbox.setRequired(required); - return this; - } - - public CheckBox getCheckbox() { - return checkbox; - } -} \ No newline at end of file + tag.put("id", errorMessageId); + } + + @Override + public boolean isVisible() { + return getDefaultModelObject() != null; + } + }; + + // Add all components + add(checkbox); + add(label); + add(labelText); + add(description); + add(errorMessage); + } + + protected boolean isInvalid() { + return errorMessageModel != null && errorMessageModel.getObject() != null; + } + + protected boolean isRequired() { + return checkbox.isRequired(); + } + + @Override + protected void onComponentTag(ComponentTag tag) { + super.onComponentTag(tag); + tag.put("id", fieldId); + tag.put( + "class", + HTMLUtil.className( + UtrechtCheckbox.FORM_FIELD_CLASSNAME, + UtrechtCheckbox.FORM_FIELD_CHECKBOX_CLASSNAME, + isInvalid() ? UtrechtCheckbox.FORM_FIELD_INVALID_CLASSNAME : null + ) + ); + } + + public UtrechtCheckbox setRequired(boolean required) { + checkbox.setRequired(required); + return this; + } + + public CheckBox getCheckbox() { + return checkbox; + } +} diff --git a/src/main/java/nl/utrecht/components/UtrechtCode.java b/src/main/java/nl/utrecht/components/UtrechtCode.java index bc46e1c..2cf8df1 100644 --- a/src/main/java/nl/utrecht/components/UtrechtCode.java +++ b/src/main/java/nl/utrecht/components/UtrechtCode.java @@ -6,12 +6,12 @@ public class UtrechtCode extends Panel { - public static final String SLOT_ID = "slot"; - private final Label label; + public static final String SLOT_ID = "slot"; + private final Label label; - public UtrechtCode(String id,IModel textContent) { - super(id); - label = new Label(SLOT_ID, textContent); - add(label); - } -} \ No newline at end of file + public UtrechtCode(String id, IModel textContent) { + super(id); + label = new Label(SLOT_ID, textContent); + add(label); + } +} diff --git a/src/main/java/nl/utrecht/components/UtrechtCodeBlock.java b/src/main/java/nl/utrecht/components/UtrechtCodeBlock.java index a7a0271..ccfacc6 100644 --- a/src/main/java/nl/utrecht/components/UtrechtCodeBlock.java +++ b/src/main/java/nl/utrecht/components/UtrechtCodeBlock.java @@ -6,12 +6,12 @@ public class UtrechtCodeBlock extends Panel { - public static final String SLOT_ID = "slot"; - private final Label label; + public static final String SLOT_ID = "slot"; + private final Label label; - public UtrechtCodeBlock(String id,IModel textContent) { - super(id); - label = new Label(SLOT_ID, textContent); - add(label); - } -} \ No newline at end of file + public UtrechtCodeBlock(String id, IModel textContent) { + super(id); + label = new Label(SLOT_ID, textContent); + add(label); + } +} diff --git a/src/main/java/nl/utrecht/components/UtrechtHeading.html b/src/main/java/nl/utrecht/components/UtrechtHeading.html index f9730a2..7776d1a 100644 --- a/src/main/java/nl/utrecht/components/UtrechtHeading.html +++ b/src/main/java/nl/utrecht/components/UtrechtHeading.html @@ -1,3 +1,3 @@ -
+

diff --git a/src/main/java/nl/utrecht/components/UtrechtHeading.java b/src/main/java/nl/utrecht/components/UtrechtHeading.java index 3a5664b..a0552b0 100644 --- a/src/main/java/nl/utrecht/components/UtrechtHeading.java +++ b/src/main/java/nl/utrecht/components/UtrechtHeading.java @@ -1,5 +1,11 @@ package nl.utrecht.components; +import nl.utrecht.components.UtrechtHeading1; +import nl.utrecht.components.UtrechtHeading2; +import nl.utrecht.components.UtrechtHeading3; +import nl.utrecht.components.UtrechtHeading4; +import nl.utrecht.components.UtrechtHeading5; +import nl.utrecht.components.UtrechtHeading6; import org.apache.wicket.AttributeModifier; import org.apache.wicket.behavior.AttributeAppender; import org.apache.wicket.markup.ComponentTag; @@ -7,74 +13,62 @@ import org.apache.wicket.markup.html.panel.Panel; import org.apache.wicket.model.IModel; import org.apache.wicket.model.Model; -import nl.utrecht.components.UtrechtHeading1; -import nl.utrecht.components.UtrechtHeading2; -import nl.utrecht.components.UtrechtHeading3; -import nl.utrecht.components.UtrechtHeading4; -import nl.utrecht.components.UtrechtHeading5; -import nl.utrecht.components.UtrechtHeading6; -public class UtrechtHeading extends Panel { - public enum HeadingLevel { - LEVEL_1("utrecht-heading-1"), - LEVEL_2("utrecht-heading-2"), - LEVEL_3("utrecht-heading-3"), - LEVEL_4("utrecht-heading-4"), - LEVEL_5("utrecht-heading-5"), - LEVEL_6("utrecht-heading-6"); - - private final String cssClass; - - HeadingLevel(String cssClass) { - this.cssClass = cssClass; - } - - public String getCssClass() { - return cssClass; - } +public class UtrechtHeading extends Panel { + + public enum HeadingLevel { + LEVEL_1("utrecht-heading-1"), + LEVEL_2("utrecht-heading-2"), + LEVEL_3("utrecht-heading-3"), + LEVEL_4("utrecht-heading-4"), + LEVEL_5("utrecht-heading-5"), + LEVEL_6("utrecht-heading-6"); + + private final String cssClass; + + HeadingLevel(String cssClass) { + this.cssClass = cssClass; } - private final Label label; - - public UtrechtHeading(String id, IModel labelModel, HeadingLevel level) { - super(id); - label = new Label("slot", labelModel); - add(label); - /* - // label.add(new AttributeModifier("aria-level", "2")); - - if (level == HeadingLevel.LEVEL_1) { - add(new UtrechtHeading1(id, labelModel)); - } - else if (level == HeadingLevel.LEVEL_2) { - add(new UtrechtHeading2(id, labelModel)); - } - else if (level == HeadingLevel.LEVEL_3) { - add(new UtrechtHeading3(id, labelModel)); - } - else if (level == HeadingLevel.LEVEL_4) { - add(new UtrechtHeading4(id, labelModel)); - } - else if (level == HeadingLevel.LEVEL_5) { - add(new UtrechtHeading5(id, labelModel)); - } - else if (level == HeadingLevel.LEVEL_6) { - add(new UtrechtHeading6(id, labelModel)); - } - else { - add(label); - } */ + public String getCssClass() { + return cssClass; } + } - @Override - protected void onComponentTag(final ComponentTag tag){ + private final Label label; + + public UtrechtHeading(String id, IModel labelModel, HeadingLevel level) { + super(id); + label = new Label("slot", labelModel) { + @Override + protected void onComponentTag(ComponentTag tag) { super.onComponentTag(tag); - tag.put("aria-level", "42"); - } - - - public UtrechtHeading addCssClass(String cssClass) { - // slot.add(new AttributeAppender("class", Model.of(cssClass), " ")); - return this; - } -} \ No newline at end of file + + if (level == HeadingLevel.LEVEL_1) { + tag.setName("h1"); + tag.put("class", "utrecht-heading-1"); + } else if (level == HeadingLevel.LEVEL_2) { + tag.setName("h2"); + tag.put("class", "utrecht-heading-2"); + } else if (level == HeadingLevel.LEVEL_3) { + tag.setName("h3"); + tag.put("class", "utrecht-heading-3"); + } else if (level == HeadingLevel.LEVEL_4) { + tag.setName("h4"); + tag.put("class", "utrecht-heading-4"); + } else if (level == HeadingLevel.LEVEL_5) { + tag.setName("h5"); + tag.put("class", "utrecht-heading-5"); + } else if (level == HeadingLevel.LEVEL_6) { + tag.setName("h6"); + tag.put("class", "utrecht-heading-6"); + } else { + tag.setName("p"); + tag.put("class", "utrecht-heading-6"); + } + } + }; + + add(label); + } +} diff --git a/src/main/java/nl/utrecht/components/UtrechtHeading1.java b/src/main/java/nl/utrecht/components/UtrechtHeading1.java index f43eef2..eb032a4 100644 --- a/src/main/java/nl/utrecht/components/UtrechtHeading1.java +++ b/src/main/java/nl/utrecht/components/UtrechtHeading1.java @@ -4,13 +4,13 @@ import org.apache.wicket.markup.html.panel.Panel; import org.apache.wicket.model.IModel; -public class UtrechtHeading1 extends Panel { - private final Label label; - - public UtrechtHeading1(String id, IModel labelModel) { - super(id); - - label = new Label("slot", labelModel); - add(label); - } -} \ No newline at end of file +public class UtrechtHeading1 extends Panel { + + private final Label label; + + public UtrechtHeading1(String id, IModel labelModel) { + super(id); + label = new Label("slot", labelModel); + add(label); + } +} diff --git a/src/main/java/nl/utrecht/components/UtrechtHeading2.java b/src/main/java/nl/utrecht/components/UtrechtHeading2.java index 90d2218..eaf6ef7 100644 --- a/src/main/java/nl/utrecht/components/UtrechtHeading2.java +++ b/src/main/java/nl/utrecht/components/UtrechtHeading2.java @@ -4,13 +4,13 @@ import org.apache.wicket.markup.html.panel.Panel; import org.apache.wicket.model.IModel; -public class UtrechtHeading2 extends Panel { - private final Label label; - - public UtrechtHeading2(String id, IModel labelModel) { - super(id); - - label = new Label("slot", labelModel); - add(label); - } -} \ No newline at end of file +public class UtrechtHeading2 extends Panel { + + private final Label label; + + public UtrechtHeading2(String id, IModel labelModel) { + super(id); + label = new Label("slot", labelModel); + add(label); + } +} diff --git a/src/main/java/nl/utrecht/components/UtrechtHeading3.java b/src/main/java/nl/utrecht/components/UtrechtHeading3.java index 5c9abfd..f136c04 100644 --- a/src/main/java/nl/utrecht/components/UtrechtHeading3.java +++ b/src/main/java/nl/utrecht/components/UtrechtHeading3.java @@ -4,13 +4,13 @@ import org.apache.wicket.markup.html.panel.Panel; import org.apache.wicket.model.IModel; -public class UtrechtHeading3 extends Panel { - private final Label label; - - public UtrechtHeading3(String id, IModel labelModel) { - super(id); - - label = new Label("slot", labelModel); - add(label); - } -} \ No newline at end of file +public class UtrechtHeading3 extends Panel { + + private final Label label; + + public UtrechtHeading3(String id, IModel labelModel) { + super(id); + label = new Label("slot", labelModel); + add(label); + } +} diff --git a/src/main/java/nl/utrecht/components/UtrechtHeading4.java b/src/main/java/nl/utrecht/components/UtrechtHeading4.java index e7d5d79..29ed679 100644 --- a/src/main/java/nl/utrecht/components/UtrechtHeading4.java +++ b/src/main/java/nl/utrecht/components/UtrechtHeading4.java @@ -4,13 +4,13 @@ import org.apache.wicket.markup.html.panel.Panel; import org.apache.wicket.model.IModel; -public class UtrechtHeading4 extends Panel { - private final Label label; - - public UtrechtHeading4(String id, IModel labelModel) { - super(id); - - label = new Label("slot", labelModel); - add(label); - } -} \ No newline at end of file +public class UtrechtHeading4 extends Panel { + + private final Label label; + + public UtrechtHeading4(String id, IModel labelModel) { + super(id); + label = new Label("slot", labelModel); + add(label); + } +} diff --git a/src/main/java/nl/utrecht/components/UtrechtHeading5.java b/src/main/java/nl/utrecht/components/UtrechtHeading5.java index bc0eb14..813c80f 100644 --- a/src/main/java/nl/utrecht/components/UtrechtHeading5.java +++ b/src/main/java/nl/utrecht/components/UtrechtHeading5.java @@ -4,13 +4,13 @@ import org.apache.wicket.markup.html.panel.Panel; import org.apache.wicket.model.IModel; -public class UtrechtHeading5 extends Panel { - private final Label label; - - public UtrechtHeading5(String id, IModel labelModel) { - super(id); - - label = new Label("slot", labelModel); - add(label); - } -} \ No newline at end of file +public class UtrechtHeading5 extends Panel { + + private final Label label; + + public UtrechtHeading5(String id, IModel labelModel) { + super(id); + label = new Label("slot", labelModel); + add(label); + } +} diff --git a/src/main/java/nl/utrecht/components/UtrechtHeading6.java b/src/main/java/nl/utrecht/components/UtrechtHeading6.java index 9755cd0..2aad9fe 100644 --- a/src/main/java/nl/utrecht/components/UtrechtHeading6.java +++ b/src/main/java/nl/utrecht/components/UtrechtHeading6.java @@ -4,13 +4,13 @@ import org.apache.wicket.markup.html.panel.Panel; import org.apache.wicket.model.IModel; -public class UtrechtHeading6 extends Panel { - private final Label label; - - public UtrechtHeading6(String id, IModel labelModel) { - super(id); - - label = new Label("slot", labelModel); - add(label); - } -} \ No newline at end of file +public class UtrechtHeading6 extends Panel { + + private final Label label; + + public UtrechtHeading6(String id, IModel labelModel) { + super(id); + label = new Label("slot", labelModel); + add(label); + } +} diff --git a/src/main/java/nl/utrecht/components/checkbox.html b/src/main/java/nl/utrecht/components/checkbox.html new file mode 100644 index 0000000..8597d18 --- /dev/null +++ b/src/main/java/nl/utrecht/components/checkbox.html @@ -0,0 +1,25 @@ +
+
+ +
+
+ U kunt ons echt vertrouwen! +
+
+ U moet akkoord gaan met de algemene voorwaarden, anders kunt u niet verder. +
+
diff --git a/src/main/webapp/style/index.css b/src/main/webapp/style/index.css index 81b08ba..879a124 100644 --- a/src/main/webapp/style/index.css +++ b/src/main/webapp/style/index.css @@ -130,11 +130,17 @@ inset-inline-end: 0; position: absolute; } -.utrecht-accordion__button--utrecht[aria-expanded=false]::after { - background-image: var(--utrecht-accordion-icon-utrecht-arrow-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E")); +.utrecht-accordion__button--utrecht[aria-expanded="false"]::after { + background-image: var( + --utrecht-accordion-icon-utrecht-arrow-down, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M15.866 4.135l-5.32 5.322-5.322-5.322'/%3E%3C/svg%3E") + ); } -.utrecht-accordion__button--utrecht[aria-expanded=true]::after { - background-image: var(--utrecht-accordion-icon-utrecht-arrow-up, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E")); +.utrecht-accordion__button--utrecht[aria-expanded="true"]::after { + background-image: var( + --utrecht-accordion-icon-utrecht-arrow-up, + url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21.39' height='14.39'%3E%3Cpath fill='none' stroke='%231D1D1D' stroke-width='3' stroke-miterlimit='10' d='M5.223 9.457l5.32-5.322 5.322 5.322'/%3E%3C/svg%3E") + ); background-position: center; background-repeat: no-repeat; content: ""; @@ -143,7 +149,7 @@ .utrecht-accordion__button-icon { display: flex; } -.utrecht-accordion__button[aria-expanded=true] .utrecht-accordion__button-icon { +.utrecht-accordion__button[aria-expanded="true"] .utrecht-accordion__button-icon { transform: rotate(180deg); } @@ -193,7 +199,10 @@ .utrecht-alert-dialog::backdrop { --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity); --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0); - animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0)); + animation-duration: min( + var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), + var(--_utrecht-backdrop-fade-in-animation-duration, 0) + ); animation-name: utrecht-backdrop-fade-in; animation-timing-function: ease-in-out; background-color: var(--utrecht-backdrop-background-color); @@ -318,7 +327,10 @@ .utrecht-backdrop { --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity); --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0); - animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0)); + animation-duration: min( + var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), + var(--_utrecht-backdrop-fade-in-animation-duration, 0) + ); animation-name: utrecht-backdrop-fade-in; animation-timing-function: ease-in-out; background-color: var(--utrecht-backdrop-background-color); @@ -357,18 +369,27 @@ position: fixed; } .utrecht-badge-counter { - background-color: var(--utrecht-badge-counter-background-color, var(--utrecht-badge-background-color, hsl(0, 0%, 0%))); + background-color: var( + --utrecht-badge-counter-background-color, + var(--utrecht-badge-background-color, hsl(0, 0%, 0%)) + ); border-radius: var(--utrecht-badge-counter-border-radius, var(--utrecht-badge-border-radius, 0.5ch)); color: var(--utrecht-badge-counter-color, var(--utrecht-badge-color, hsl(0, 0%, 100%))); display: inline-block; - font-family: var(--utrecht-badge-counter-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif))); + font-family: var( + --utrecht-badge-counter-font-family, + var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)) + ); font-size: var(--utrecht-badge-counter-font-size, var(--utrecht-badge-font-size)); font-style: var(--utrecht-badge-counter-font-style, normal); font-weight: var(--utrecht-badge-counter-font-weight, var(--utrecht-badge-font-weight, bold)); line-height: 1; max-block-size: max-content; max-inline-size: max-content; - min-block-size: var(--utrecht-badge-counter-min-block-size, var(--utrecht-badge-counter-min-inline-size, var(--utrecht-badge-counter-min-size, 1em))); + min-block-size: var( + --utrecht-badge-counter-min-block-size, + var(--utrecht-badge-counter-min-inline-size, var(--utrecht-badge-counter-min-size, 1em)) + ); min-inline-size: var(--utrecht-badge-counter-min-inline-size, var(--utrecht-badge-counter-min-size, 1em)); padding-block-end: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex)); padding-block-start: var(--utrecht-badge-counter-padding-block, var(--utrecht-badge-padding-block, 0.5ex)); @@ -471,32 +492,50 @@ } .utrecht-badge-status--valid { - background-color: var(--utrecht-feedback-valid-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%))); + background-color: var( + --utrecht-feedback-valid-fill-background-color, + var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)) + ); color: var(--utrecht-feedback-valid-fill-color, var(--utrecht-feedback-safe-fill-color, white)); } .utrecht-badge-status--invalid { - background-color: var(--utrecht-feedback-invalid-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(39, 100%, 50%))); + background-color: var( + --utrecht-feedback-invalid-fill-background-color, + var(--utrecht-feedback-danger-fill-background-color, hsl(39, 100%, 50%)) + ); color: var(--utrecht-feedback-invalid-fill-color, var(--utrecht-feedback-danger-fill-color, white)); } .utrecht-badge-status--error { - background-color: var(--utrecht-feedback-error-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 30%))); + background-color: var( + --utrecht-feedback-error-fill-background-color, + var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 30%)) + ); color: var(--utrecht-feedback-error-fill-color, var(--utrecht-feedback-danger-fill-color, white)); } .utrecht-badge-status--success { - background-color: var(--utrecht-feedback-success-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%))); + background-color: var( + --utrecht-feedback-success-fill-background-color, + var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)) + ); color: var(--utrecht-feedback-success-fill-color, var(--utrecht-feedback-safe-fill-color, white)); } .utrecht-badge-status--active { - background-color: var(--utrecht-feedback-active-fill-background-color, var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%))); + background-color: var( + --utrecht-feedback-active-fill-background-color, + var(--utrecht-feedback-safe-fill-background-color, hsl(90, 30%, 50%)) + ); color: var(--utrecht-feedback-active-fill-color, var(--utrecht-feedback-safe-fill-color, white)); } .utrecht-badge-status--inactive { - background-color: var(--utrecht-feedback-inactive-fill-background-color, var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%))); + background-color: var( + --utrecht-feedback-inactive-fill-background-color, + var(--utrecht-feedback-danger-fill-background-color, hsl(0, 100%, 40%)) + ); color: var(--utrecht-feedback-inactive-fill-color, var(--utrecht-feedback-danger-fill-color, white)); } .utrecht-blockquote { @@ -505,7 +544,10 @@ border-radius: var(--utrecht-blockquote-border-radius, 0); border-style: solid; border-width: var(--utrecht-blockquote-border-width, 0); - border-inline-start-width: var(--utrecht-blockquote-border-inline-start-width, var(--utrecht-blockquote-border-width, 0)); + border-inline-start-width: var( + --utrecht-blockquote-border-inline-start-width, + var(--utrecht-blockquote-border-width, 0) + ); color: var(--utrecht-blockquote-color); display: flex; flex-direction: column; @@ -636,7 +678,10 @@ var(--utrecht-breadcrumb-nav-link-color) ); --_utrecht-breadcrumb-nav-link-disabled-cursor: var(--utrecht-action-disabled-cursor, not-allowed); - background-color: var(--utrecht-breadcrumb-nav-link-disabled-background-color, var(--utrecht-breadcrumb-nav-link-background-color)); + background-color: var( + --utrecht-breadcrumb-nav-link-disabled-background-color, + var(--utrecht-breadcrumb-nav-link-background-color) + ); cursor: var(--_utrecht-breadcrumb-nav-link-current-cursor, var(--_utrecht-breadcrumb-nav-link-disabled-cursor)); } .utrecht-breadcrumb-nav__separator { @@ -710,8 +755,13 @@ border-inline-start-color: var(--utrecht-breadcrumb-nav-arrows-link-focus-background-color); } .utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__link ~ .utrecht-breadcrumb-nav__link, -.utrecht-breadcrumb-nav--arrows .utrecht-breadcrumb-nav__item ~ .utrecht-breadcrumb-nav__item .utrecht-breadcrumb-nav__link { - padding-inline-start: calc(var(--utrecht-breadcrumb-nav-item-padding-inline-start) + var(--utrecht-breadcrumb-nav-arrow-size)); +.utrecht-breadcrumb-nav--arrows + .utrecht-breadcrumb-nav__item + ~ .utrecht-breadcrumb-nav__item + .utrecht-breadcrumb-nav__link { + padding-inline-start: calc( + var(--utrecht-breadcrumb-nav-item-padding-inline-start) + var(--utrecht-breadcrumb-nav-arrow-size) + ); } .utrecht-breadcrumb-nav__item ~ .utrecht-breadcrumb-nav__item { @@ -1060,7 +1110,9 @@ --_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size); --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight); --_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height); - --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color); + --_utrecht-button-appearance-disabled-background-color: var( + --utrecht-button-primary-action-disabled-background-color + ); --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color); --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color); --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color); @@ -1085,7 +1137,9 @@ --_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size); --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight); --_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height); - --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color); + --_utrecht-button-appearance-disabled-background-color: var( + --utrecht-button-secondary-action-disabled-background-color + ); --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color); --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color); --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color); @@ -1094,7 +1148,9 @@ --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color); --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color); --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color); - --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color); + --_utrecht-button-appearance-pressed-background-color: var( + --utrecht-button-secondary-action-pressed-background-color + ); --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color); --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color); } @@ -1417,7 +1473,7 @@ outline-width: var(--utrecht-focus-outline-width, revert); } -.utrecht-button:focus:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) { +.utrecht-button:focus:not(:disabled, [aria-disabled="true"], .utrecht-button--disabled) { background-color: var(--_utrecht-button-focus-background-color); border-color: var(--_utrecht-button-focus-border-color); color: var(--_utrecht-button-focus-color); @@ -1425,14 +1481,14 @@ } .utrecht-button--hover:not(:disabled, .utrecht-button--disabled), -.utrecht-button:hover:not(:disabled, [aria-disabled=true], .utrecht-button--disabled) { +.utrecht-button:hover:not(:disabled, [aria-disabled="true"], .utrecht-button--disabled) { background-color: var(--_utrecht-button-hover-background-color); border-color: var(--_utrecht-button-hover-border-color); color: var(--_utrecht-button-hover-color); scale: var(--utrecht-button-hover-scale, 1); } -.utrecht-button:active:not(:disabled, [aria-disabled=true], .utrecht-button--disabled), +.utrecht-button:active:not(:disabled, [aria-disabled="true"], .utrecht-button--disabled), .utrecht-button--active { background-color: var(--_utrecht-button-active-background-color); border-color: var(--_utrecht-button-active-border-color); @@ -1450,7 +1506,9 @@ --_utrecht-button-appearance-font-size: var(--utrecht-button-primary-action-font-size); --_utrecht-button-appearance-font-weight: var(--utrecht-button-primary-action-font-weight); --_utrecht-button-appearance-line-height: var(--utrecht-button-primary-action-line-height); - --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-primary-action-disabled-background-color); + --_utrecht-button-appearance-disabled-background-color: var( + --utrecht-button-primary-action-disabled-background-color + ); --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-primary-action-disabled-border-color); --_utrecht-button-appearance-disabled-color: var(--utrecht-button-primary-action-disabled-color); --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-primary-action-focus-background-color); @@ -1475,7 +1533,9 @@ --_utrecht-button-appearance-font-size: var(--utrecht-button-secondary-action-font-size); --_utrecht-button-appearance-font-weight: var(--utrecht-button-secondary-action-font-weight); --_utrecht-button-appearance-line-height: var(--utrecht-button-secondary-action-line-height); - --_utrecht-button-appearance-disabled-background-color: var(--utrecht-button-secondary-action-disabled-background-color); + --_utrecht-button-appearance-disabled-background-color: var( + --utrecht-button-secondary-action-disabled-background-color + ); --_utrecht-button-appearance-disabled-border-color: var(--utrecht-button-secondary-action-disabled-border-color); --_utrecht-button-appearance-disabled-color: var(--utrecht-button-secondary-action-disabled-color); --_utrecht-button-appearance-focus-background-color: var(--utrecht-button-secondary-action-focus-background-color); @@ -1484,7 +1544,9 @@ --_utrecht-button-appearance-hover-background-color: var(--utrecht-button-secondary-action-hover-background-color); --_utrecht-button-appearance-hover-border-color: var(--utrecht-button-secondary-action-hover-border-color); --_utrecht-button-appearance-hover-color: var(--utrecht-button-secondary-action-hover-color); - --_utrecht-button-appearance-pressed-background-color: var(--utrecht-button-secondary-action-pressed-background-color); + --_utrecht-button-appearance-pressed-background-color: var( + --utrecht-button-secondary-action-pressed-background-color + ); --_utrecht-button-appearance-pressed-border-color: var(--utrecht-button-secondary-action-pressed-border-color); --_utrecht-button-appearance-pressed-color: var(--utrecht-button-secondary-action-pressed-color); } @@ -1532,9 +1594,7 @@ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-danger-hover-background-color); --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-danger-hover-border-color); --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-danger-hover-color); - --_utrecht-button-hint-pressed-background-color: var( - --utrecht-button-primary-action-danger-pressed-background-color - ); + --_utrecht-button-hint-pressed-background-color: var(--utrecht-button-primary-action-danger-pressed-background-color); --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-danger-pressed-border-color); --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-danger-pressed-color); } @@ -1557,9 +1617,7 @@ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-primary-action-ready-hover-background-color); --_utrecht-button-hint-hover-border-color: var(--utrecht-button-primary-action-ready-hover-border-color); --_utrecht-button-hint-hover-color: var(--utrecht-button-primary-action-ready-hover-color); - --_utrecht-button-hint-pressed-background-color: var( - --utrecht-button-primary-action-ready-pressed-background-color - ); + --_utrecht-button-hint-pressed-background-color: var(--utrecht-button-primary-action-ready-pressed-background-color); --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-primary-action-ready-pressed-border-color); --_utrecht-button-hint-pressed-color: var(--utrecht-button-primary-action-ready-pressed-color); } @@ -1640,7 +1698,9 @@ } .utrecht-button--secondary-action.utrecht-button--warning { - --_utrecht-button-hint-active-background-color: var(--utrecht-button-secondary-action-warning-active-background-color); + --_utrecht-button-hint-active-background-color: var( + --utrecht-button-secondary-action-warning-active-background-color + ); --_utrecht-button-hint-active-border-color: var(--utrecht-button-secondary-action-warning-active-border-color); --_utrecht-button-hint-active-color: var(--utrecht-button-secondary-action-warning-active-color); --_utrecht-button-hint-background-color: var(--utrecht-button-secondary-action-warning-background-color); @@ -1671,9 +1731,7 @@ --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-danger-background-color); --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-danger-border-color); --_utrecht-button-hint-color: var(--utrecht-button-subtle-danger-color); - --_utrecht-button-hint-disabled-background-color: var( - --utrecht-button-subtle-danger-disabled-background-color - ); + --_utrecht-button-hint-disabled-background-color: var(--utrecht-button-subtle-danger-disabled-background-color); --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-danger-disabled-border-color); --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-danger-disabled-color); --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-danger-focus-background-color); @@ -1682,9 +1740,7 @@ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-danger-hover-background-color); --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-danger-hover-border-color); --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-danger-hover-color); - --_utrecht-button-hint-pressed-background-color: var( - --utrecht-button-subtle-danger-pressed-background-color - ); + --_utrecht-button-hint-pressed-background-color: var(--utrecht-button-subtle-danger-pressed-background-color); --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-danger-pressed-border-color); --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-danger-pressed-color); } @@ -1696,9 +1752,7 @@ --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-ready-background-color); --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-ready-border-color); --_utrecht-button-hint-color: var(--utrecht-button-subtle-ready-color); - --_utrecht-button-hint-disabled-background-color: var( - --utrecht-button-subtle-ready-disabled-background-color - ); + --_utrecht-button-hint-disabled-background-color: var(--utrecht-button-subtle-ready-disabled-background-color); --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-ready-disabled-border-color); --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-ready-disabled-color); --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-ready-focus-background-color); @@ -1707,9 +1761,7 @@ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-ready-hover-background-color); --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-ready-hover-border-color); --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-ready-hover-color); - --_utrecht-button-hint-pressed-background-color: var( - --utrecht-button-subtle-ready-pressed-background-color - ); + --_utrecht-button-hint-pressed-background-color: var(--utrecht-button-subtle-ready-pressed-background-color); --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-ready-pressed-border-color); --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-ready-pressed-color); } @@ -1721,9 +1773,7 @@ --_utrecht-button-hint-background-color: var(--utrecht-button-subtle-warning-background-color); --_utrecht-button-hint-border-color: var(--utrecht-button-subtle-warning-border-color); --_utrecht-button-hint-color: var(--utrecht-button-subtle-warning-color); - --_utrecht-button-hint-disabled-background-color: var( - --utrecht-button-subtle-warning-disabled-background-color - ); + --_utrecht-button-hint-disabled-background-color: var(--utrecht-button-subtle-warning-disabled-background-color); --_utrecht-button-hint-disabled-border-color: var(--utrecht-button-subtle-warning-disabled-border-color); --_utrecht-button-hint-disabled-color: var(--utrecht-button-subtle-warning-disabled-color); --_utrecht-button-hint-focus-background-color: var(--utrecht-button-subtle-warning-focus-background-color); @@ -1732,9 +1782,7 @@ --_utrecht-button-hint-hover-background-color: var(--utrecht-button-subtle-warning-hover-background-color); --_utrecht-button-hint-hover-border-color: var(--utrecht-button-subtle-warning-hover-border-color); --_utrecht-button-hint-hover-color: var(--utrecht-button-subtle-warning-hover-color); - --_utrecht-button-hint-pressed-background-color: var( - --utrecht-button-subtle-warning-pressed-background-color - ); + --_utrecht-button-hint-pressed-background-color: var(--utrecht-button-subtle-warning-pressed-background-color); --_utrecht-button-hint-pressed-border-color: var(--utrecht-button-subtle-warning-pressed-border-color); --_utrecht-button-hint-pressed-color: var(--utrecht-button-subtle-warning-pressed-color); } @@ -2157,9 +2205,10 @@ outline-style: var(--utrecht-focus-outline-style, revert); outline-width: var(--utrecht-focus-outline-width, revert); } -.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, .utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid=true], +.utrecht-checkbox--custom.utrecht-checkbox--html-input:invalid, +.utrecht-checkbox--custom.utrecht-checkbox--html-input[aria-invalid="true"], .utrecht-custom-checkbox--html-input:invalid, -.utrecht-custom-checkbox--html-input[aria-invalid=true] { +.utrecht-custom-checkbox--html-input[aria-invalid="true"] { border-color: var(--utrecht-checkbox-invalid-border-color, var(--utrecht-checkbox-border-color)); border-width: var(--utrecht-checkbox-invalid-border-width, var(--utrecht-checkbox-border-width)); } @@ -2178,7 +2227,8 @@ border-color: var(--utrecht-checkbox-checked-border-color, var(--utrecht-checkbox-border-color)); border-width: var(--utrecht-checkbox-checked-border-width, var(--utrecht-checkbox-border-width)); } -.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate, .utrecht-checkbox--custom.utrecht-checkbox--html-input:checked:indeterminate, +.utrecht-checkbox--custom.utrecht-checkbox--html-input:indeterminate, +.utrecht-checkbox--custom.utrecht-checkbox--html-input:checked:indeterminate, .utrecht-custom-checkbox--html-input:indeterminate, .utrecht-custom-checkbox--html-input:checked:indeterminate { background-color: var(--utrecht-checkbox-indeterminate-background-color, var(--utrecht-checkbox-background-color)); @@ -2269,7 +2319,10 @@ } @media screen and (prefers-contrast: more) { .utrecht-data-placeholder { - background-color: var(--utrecht-data-placeholder-high-contrast-background-color, var(--utrecht-data-placeholder-background-color, currentColor)); + background-color: var( + --utrecht-data-placeholder-high-contrast-background-color, + var(--utrecht-data-placeholder-background-color, currentColor) + ); } } @media screen and (forced-colors: active) { @@ -2339,7 +2392,10 @@ .utrecht-drawer::backdrop { --_utrecht-backdrop-opacity: var(--utrecht-backdrop-opacity); --_utrecht-backdrop-fade-in-animation-duration: var(--utrecht-backdrop-fade-in-animation-duration, 0); - animation-duration: min(var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), var(--_utrecht-backdrop-fade-in-animation-duration, 0)); + animation-duration: min( + var(--utrecht-motion-max-animation-duration, var(--_utrecht-backdrop-fade-in-animation-duration)), + var(--_utrecht-backdrop-fade-in-animation-duration, 0) + ); animation-name: utrecht-backdrop-fade-in; animation-timing-function: ease-in-out; background-color: var(--utrecht-backdrop-background-color); @@ -2372,7 +2428,10 @@ inset-block-end: 0; inset-block-start: 0; max-block-size: 100%; - max-inline-size: min(var(--utrecht-drawer-max-inline-size, 100%), 100% - var(--_utrecht-drawer-backdrop-min-size, 44px)); + max-inline-size: min( + var(--utrecht-drawer-max-inline-size, 100%), + 100% - var(--_utrecht-drawer-backdrop-min-size, 44px) + ); min-inline-size: var(--utrecht-drawer-min-inline-size, calc(320px - var(--_utrecht-drawer-backdrop-min-size))); border-end-end-radius: var(--utrecht-drawer-border-radius); border-inline-start-width: 0; @@ -2386,7 +2445,10 @@ inset-block-end: 0; inset-block-start: 0; max-block-size: 100%; - max-inline-size: min(var(--utrecht-drawer-max-inline-size, 100%), 100% - var(--_utrecht-drawer-backdrop-min-size, 44px)); + max-inline-size: min( + var(--utrecht-drawer-max-inline-size, 100%), + 100% - var(--_utrecht-drawer-backdrop-min-size, 44px) + ); min-inline-size: var(--utrecht-drawer-min-inline-size, calc(320px - var(--_utrecht-drawer-backdrop-min-size))); border-end-start-radius: var(--utrecht-drawer-border-radius); border-inline-end-width: 0; @@ -2448,8 +2510,14 @@ font-size: var(--utrecht-form-field-description-font-size, inherit); font-style: var(--utrecht-form-field-description-font-style); line-height: var(--utrecht-form-field-description-line-height); - margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0))); - margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0))); + margin-block-end: calc( + var(--utrecht-space-around, 0) * + var(--utrecht-form-field-description-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)) + ); + margin-block-start: calc( + var(--utrecht-space-around, 0) * + var(--utrecht-form-field-description-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)) + ); } .utrecht-form-field-description > * { --utrecht-space-around: 1; @@ -2460,11 +2528,17 @@ } .utrecht-form-field-description--invalid { - color: var(--utrecht-form-field-description-invalid-color, var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color))); + color: var( + --utrecht-form-field-description-invalid-color, + var(--utrecht-feedback-invalid-color, var(--utrecht-feedback-danger-color)) + ); } .utrecht-form-field-description--valid { - color: var(--utrecht-form-field-description-valid-color, var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color))); + color: var( + --utrecht-form-field-description-valid-color, + var(--utrecht-feedback-valid-color, var(--utrecht-feedback-safe-color)) + ); } .utrecht-form-field-description--warning { @@ -2479,8 +2553,14 @@ font-size: var(--utrecht-form-field-error-message-font-size, inherit); font-style: var(--utrecht-form-field-error-message-font-style); line-height: var(--utrecht-form-field-error-message-line-height); - margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0))); - margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-form-field-error-message-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0))); + margin-block-end: calc( + var(--utrecht-space-around, 0) * + var(--utrecht-form-field-error-message-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)) + ); + margin-block-start: calc( + var(--utrecht-space-around, 0) * + var(--utrecht-form-field-error-message-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)) + ); padding-block-end: var(--utrecht-form-field-error-message-padding-block-end); padding-block-start: var(--utrecht-form-field-error-message-padding-block-start); padding-inline-end: var(--utrecht-form-field-error-message-padding-inline-end); @@ -2528,7 +2608,9 @@ grid-template-columns: var(--utrecht-radio-button-size) 100fr; } .utrecht-form-field--radio .utrecht-form-field__label:has(.utrecht-form-field__input) { - margin-inline-start: calc(-1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px))); + margin-inline-start: calc( + -1 * (var(--utrecht-radio-button-size) + var(--utrecht-radio-button-margin-inline-end, 12px)) + ); } .utrecht-form-field--radio .utrecht-form-field__label .utrecht-form-field__input { margin-inline-end: var(--utrecht-radio-button-margin-inline-end, 12px); @@ -2622,7 +2704,10 @@ } .utrecht-form-fieldset__legend--disabled { - color: var(--utrecht-form-fieldset-legend-disabled-color, var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit))); + color: var( + --utrecht-form-fieldset-legend-disabled-color, + var(--utrecht-form-fieldset-legend-color, var(--utrecht-document-color, inherit)) + ); } .utrecht-form-fieldset__legend--distanced { @@ -2631,10 +2716,19 @@ } .utrecht-form-fieldset--invalid { - border-inline-start-color: var(--utrecht-form-fieldset-invalid-border-inline-start-color, var(--utrecht-form-field-invalid-border-inline-start-color)); + border-inline-start-color: var( + --utrecht-form-fieldset-invalid-border-inline-start-color, + var(--utrecht-form-field-invalid-border-inline-start-color) + ); border-inline-start-style: solid; - border-inline-start-width: var(--utrecht-form-fieldset-invalid-border-inline-start-width, var(--utrecht-form-field-invalid-border-inline-start-width)); - padding-inline-start: var(--utrecht-form-fieldset-invalid-padding-inline-start, var(--utrecht-form-field-invalid-padding-inline-start)); + border-inline-start-width: var( + --utrecht-form-fieldset-invalid-border-inline-start-width, + var(--utrecht-form-field-invalid-border-inline-start-width) + ); + padding-inline-start: var( + --utrecht-form-fieldset-invalid-padding-inline-start, + var(--utrecht-form-field-invalid-padding-inline-start) + ); } .utrecht-form-label { color: var(--utrecht-form-label-color); @@ -2694,7 +2788,8 @@ } } -.utrecht-form-toggle--focus-visible, .utrecht-form-toggle--html-div:focus-visible { +.utrecht-form-toggle--focus-visible, +.utrecht-form-toggle--html-div:focus-visible { --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent); box-shadow: var(--_utrecht-focus-ring-box-shadow); @@ -2709,7 +2804,8 @@ color: var(--utrecht-form-toggle-hover-color, var(--utrecht-form-toggle-color)); } -.utrecht-form-toggle--disabled, .utrecht-form-toggle--html-div:disabled { +.utrecht-form-toggle--disabled, +.utrecht-form-toggle--html-div:disabled { border-color: var(--utrecht-form-toggle-disabled-border-color, var(--utrecht-form-toggle-border-color, currentColor)); border-style: var(--utrecht-form-toggle-disabled-border-style, var(--utrecht-form-toggle-border-style, solid)); border-width: var(--utrecht-form-toggle-disabled-border-width, var(--utrecht-form-toggle-border-width, 1px)); @@ -2727,15 +2823,27 @@ z-index: 20; } -.utrecht-form-toggle__thumb--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb { +.utrecht-form-toggle__thumb--checked, +.utrecht-form-toggle--html-checkbox + .utrecht-form-toggle__checkbox:checked + ~ .utrecht-form-toggle__track + .utrecht-form-toggle__thumb { margin-inline-start: auto; } -.utrecht-form-toggle__thumb--not-checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:not(:checked) ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb { +.utrecht-form-toggle__thumb--not-checked, +.utrecht-form-toggle--html-checkbox + .utrecht-form-toggle__checkbox:not(:checked) + ~ .utrecht-form-toggle__track + .utrecht-form-toggle__thumb { margin-inline-end: auto; } -.utrecht-form-toggle__thumb--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track .utrecht-form-toggle__thumb { +.utrecht-form-toggle__thumb--disabled, +.utrecht-form-toggle--html-checkbox + .utrecht-form-toggle__checkbox:disabled + ~ .utrecht-form-toggle__track + .utrecht-form-toggle__thumb { background-color: var(--utrecht-form-toggle-thumb-disabled-background-color, #aaa); box-shadow: var(--utrecht-form-toggle-thumb-disabled-box-shadow, 0); } @@ -2753,11 +2861,13 @@ cursor: inherit; } -.utrecht-form-toggle__track--checked, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track { +.utrecht-form-toggle__track--checked, +.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:checked ~ .utrecht-form-toggle__track { background-color: var(--utrecht-form-toggle-checked-accent-color, var(--utrecht-form-toggle-accent-color)); } -.utrecht-form-toggle__track--disabled, .utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track { +.utrecht-form-toggle__track--disabled, +.utrecht-form-toggle--html-checkbox .utrecht-form-toggle__checkbox:disabled ~ .utrecht-form-toggle__track { background-color: var(--utrecht-form-toggle-disabled-background-color, #ddd); color: var(--utrecht-form-toggle-disabled-color, black); } @@ -2802,7 +2912,10 @@ break-inside: avoid-column; page-break-inside: avoid; color: var(--utrecht-heading-1-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit))); - font-family: var(--utrecht-heading-1-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family))); + font-family: var( + --utrecht-heading-1-font-family, + var(--utrecht-heading-font-family, var(--utrecht-document-font-family)) + ); font-size: var(--utrecht-heading-1-font-size, revert); font-weight: var(--utrecht-heading-1-font-weight, var(--utrecht-heading-font-weight, bold)); line-height: var(--utrecht-heading-1-line-height); @@ -2818,7 +2931,10 @@ break-inside: avoid-column; page-break-inside: avoid; color: var(--utrecht-heading-2-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit))); - font-family: var(--utrecht-heading-2-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family))); + font-family: var( + --utrecht-heading-2-font-family, + var(--utrecht-heading-font-family, var(--utrecht-document-font-family)) + ); font-size: var(--utrecht-heading-2-font-size, revert); font-weight: var(--utrecht-heading-2-font-weight, var(--utrecht-heading-font-weight, bold)); line-height: var(--utrecht-heading-2-line-height); @@ -2834,7 +2950,10 @@ break-inside: avoid-column; page-break-inside: avoid; color: var(--utrecht-heading-3-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit))); - font-family: var(--utrecht-heading-3-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family))); + font-family: var( + --utrecht-heading-3-font-family, + var(--utrecht-heading-font-family, var(--utrecht-document-font-family)) + ); font-size: var(--utrecht-heading-3-font-size, revert); font-weight: var(--utrecht-heading-3-font-weight, var(--utrecht-heading-font-weight, bold)); line-height: var(--utrecht-heading-3-line-height); @@ -2850,7 +2969,10 @@ break-inside: avoid-column; page-break-inside: avoid; color: var(--utrecht-heading-4-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit))); - font-family: var(--utrecht-heading-4-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family))); + font-family: var( + --utrecht-heading-4-font-family, + var(--utrecht-heading-font-family, var(--utrecht-document-font-family)) + ); font-size: var(--utrecht-heading-4-font-size, revert); font-weight: var(--utrecht-heading-4-font-weight, var(--utrecht-heading-font-weight, bold)); line-height: var(--utrecht-heading-4-line-height); @@ -2866,7 +2988,10 @@ break-inside: avoid-column; page-break-inside: avoid; color: var(--utrecht-heading-5-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit))); - font-family: var(--utrecht-heading-5-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family))); + font-family: var( + --utrecht-heading-5-font-family, + var(--utrecht-heading-font-family, var(--utrecht-document-font-family)) + ); font-size: var(--utrecht-heading-5-font-size, revert); font-weight: var(--utrecht-heading-5-font-weight, var(--utrecht-heading-font-weight, bold)); line-height: var(--utrecht-heading-5-line-height); @@ -2882,7 +3007,10 @@ break-inside: avoid-column; page-break-inside: avoid; color: var(--utrecht-heading-6-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit))); - font-family: var(--utrecht-heading-6-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family))); + font-family: var( + --utrecht-heading-6-font-family, + var(--utrecht-heading-font-family, var(--utrecht-document-font-family)) + ); font-size: var(--utrecht-heading-6-font-size, revert); font-weight: var(--utrecht-heading-6-font-weight, var(--utrecht-heading-font-weight, bold)); line-height: var(--utrecht-heading-6-line-height); @@ -2959,10 +3087,16 @@ --utrecht-icon-size: var(--utrecht-link-icon-size, 1em); color: var(--_utrecht-link-state-color, var(--utrecht-link-color, var(--_utrecht-link-forced-colors-color))); --_utrecht-link-forced-colors-color: linktext; - text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor)); + text-decoration-color: var( + --_utrecht-link-state-text-decoration-color, + var(--utrecht-link-text-decoration-color, currentColor) + ); text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline)); text-decoration-skip-ink: all; - text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px); + text-decoration-thickness: max( + var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), + 1px + ); text-underline-offset: var(--utrecht-link-text-underline-offset); --utrecht-icon-size: var(--utrecht-button-icon-size, 1em); align-items: center; @@ -2986,7 +3120,8 @@ user-select: none; } -.utrecht-link-button--hover, .utrecht-link-button--html-button:not(:disabled):hover { +.utrecht-link-button--hover, +.utrecht-link-button--html-button:not(:disabled):hover { --_utrecht-link-forced-colors-color: linktext; --_utrecht-link-state-color: var(--utrecht-link-hover-color); --_utrecht-link-state-text-decoration: var(--utrecht-link-hover-text-decoration); @@ -3003,14 +3138,16 @@ text-decoration-line: none; } -.utrecht-link-button--focus, .utrecht-link-button--html-button:not(:disabled):focus { +.utrecht-link-button--focus, +.utrecht-link-button--html-button:not(:disabled):focus { --_utrecht-link-state-color: var(--utrecht-link-focus-color); background-color: var(--utrecht-link-focus-background-color, transparent); text-decoration-skip: none; text-decoration-skip-ink: none; } -.utrecht-link-button--focus-visible, .utrecht-link-button--html-button:focus-visible { +.utrecht-link-button--focus-visible, +.utrecht-link-button--html-button:focus-visible { --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent); box-shadow: var(--_utrecht-focus-ring-box-shadow); @@ -3029,7 +3166,8 @@ z-index: var(--utrecht-stack-focus-z-index, 1); } -.utrecht-link-button--active, .utrecht-link-button--html-button:not(:disabled):active { +.utrecht-link-button--active, +.utrecht-link-button--html-button:not(:disabled):active { --_utrecht-link-forced-colors-color: activetext; --_utrecht-link-state-color: var(--utrecht-link-active-color); } @@ -3130,10 +3268,16 @@ .utrecht-link:any-link { --_utrecht-link-forced-colors-color: linktext; - text-decoration-color: var(--_utrecht-link-state-text-decoration-color, var(--utrecht-link-text-decoration-color, currentColor)); + text-decoration-color: var( + --_utrecht-link-state-text-decoration-color, + var(--utrecht-link-text-decoration-color, currentColor) + ); text-decoration-line: var(--_utrecht-link-state-text-decoration, var(--utrecht-link-text-decoration, underline)); text-decoration-skip-ink: all; - text-decoration-thickness: max(var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), 1px); + text-decoration-thickness: max( + var(--_utrecht-link-state-text-decoration-thickness, var(--utrecht-link-text-decoration-thickness)), + 1px + ); text-underline-offset: var(--utrecht-link-text-underline-offset); } @@ -3521,7 +3665,8 @@ color: var(--utrecht-mapcontrolbutton-disabled-color); } -.utrecht-mapcontrolbutton--focus-visible, .utrecht-mapcontrolbutton:focus-visible { +.utrecht-mapcontrolbutton--focus-visible, +.utrecht-mapcontrolbutton:focus-visible { --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent); box-shadow: var(--_utrecht-focus-ring-box-shadow); @@ -3531,7 +3676,8 @@ outline-width: var(--utrecht-focus-outline-width, revert); } -.utrecht-mapcontrolbutton--focus, .utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled=true], .utrecht-mapcontrolbutton--disabled) { +.utrecht-mapcontrolbutton--focus, +.utrecht-mapcontrolbutton:focus:not(:disabled, [aria-disabled="true"], .utrecht-mapcontrolbutton--disabled) { --utrecht-icon-color: var(--utrecht-mapcontrolbutton-focus-color, var(--utrecht-mapcontrolbutton-color)); } .utrecht-mapcontrolbutton--hover:not(:disabled), @@ -3601,7 +3747,8 @@ color: var(--utrecht-menulijst-item-hover-color, var(--utrecht-link-hover-color, red)); } -.utrecht-menulijst__link--focus-visible, .utrecht-menulijst__link:focus-visible { +.utrecht-menulijst__link--focus-visible, +.utrecht-menulijst__link:focus-visible { --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent); box-shadow: var(--_utrecht-focus-ring-box-shadow); @@ -3746,7 +3893,8 @@ text-decoration: underline; } -.utrecht-sidenav__link--focus-visible, .utrecht-sidenav__link:focus-visible { +.utrecht-sidenav__link--focus-visible, +.utrecht-sidenav__link:focus-visible { --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent); box-shadow: var(--_utrecht-focus-ring-box-shadow); @@ -3758,11 +3906,18 @@ .utrecht-sidenav__link--parent { padding-block-end: 0; } -.utrecht-sidenav__connection, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:not(.utrecht-sidenav__link--sibling, -.utrecht-sidenav__link--parent, -.utrecht-sidenav__link--child)::after { +.utrecht-sidenav__connection, +.utrecht-sidenav--pseudo-elements + .utrecht-sidenav__link:not( + .utrecht-sidenav__link--sibling, + .utrecht-sidenav__link--parent, + .utrecht-sidenav__link--child + )::after { background: var(--utrecht-sidenav-connection-color); - block-size: calc(var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * var(--utrecht-sidenav-marker-outline-width)); + block-size: calc( + var(--utrecht-sidenav-connection-block-size) - var(--utrecht-sidenav-marker-height) - 2 * + var(--utrecht-sidenav-marker-outline-width) + ); content: ""; display: block; inline-size: var(--utrecht-sidenav-connection-inline-size); @@ -3779,7 +3934,8 @@ .utrecht-sidenav__connection--sibling { display: none; } -.utrecht-sidenav__marker, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before { +.utrecht-sidenav__marker, +.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before { background-color: var(--utrecht-sidenav-item-marker-color); block-size: var(--utrecht-sidenav-marker-height); border-radius: 100%; @@ -3792,7 +3948,8 @@ transform: translateY(-50%) translateX(calc(-1 * var(--utrecht-sidenav-marker-offset))); z-index: 10; } -.utrecht-sidenav__marker--child, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before { +.utrecht-sidenav__marker--child, +.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child::before { background-color: transparent; block-size: 4px; border: 2px solid var(--utrecht-sidenav-link-color); @@ -3801,7 +3958,8 @@ inset-inline-start: 1.2rem; transform: translateY(-50%) translateX(-19.5px); } -.utrecht-sidenav__marker--current, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before, +.utrecht-sidenav__marker--current, +.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--current-child::before { background-color: var(--utrecht-sidenav-marker-current-color); } @@ -3822,10 +3980,36 @@ .utrecht-sidenav__link--current-child { font-weight: var(--utrecht-typography-weight-scale-bold-font-weight); } -.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before { +.utrecht-sidenav__marker--hover, +.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover::before, +.utrecht-sidenav__link:hover .utrecht-sidenav__marker, +.utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link::before, +.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link::before { background-color: var(--utrecht-sidenav-link-hover-color); } -.utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before, .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav__link:hover .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link.utrecht-sidenav__link--child::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, .utrecht-sidenav--pseudo-elements .utrecht-sidenav__link:hover .utrecht-sidenav__link.utrecht-sidenav__link--child::before { +.utrecht-sidenav__marker--child.utrecht-sidenav__marker--hover, +.utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--child.utrecht-sidenav__link:hover::before, +.utrecht-sidenav--pseudo-elements .utrecht-sidenav__marker--hover.utrecht-sidenav__link--child::before, +.utrecht-sidenav--pseudo-elements .utrecht-sidenav__link--child.utrecht-sidenav__link:hover::before, +.utrecht-sidenav__link:hover .utrecht-sidenav__marker--child.utrecht-sidenav__marker, +.utrecht-sidenav__link:hover + .utrecht-sidenav--pseudo-elements + .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, +.utrecht-sidenav--pseudo-elements + .utrecht-sidenav__link:hover + .utrecht-sidenav__marker.utrecht-sidenav__link--child::before, +.utrecht-sidenav__link:hover + .utrecht-sidenav--pseudo-elements + .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, +.utrecht-sidenav__link:hover + .utrecht-sidenav--pseudo-elements + .utrecht-sidenav__link.utrecht-sidenav__link--child::before, +.utrecht-sidenav--pseudo-elements + .utrecht-sidenav__link:hover + .utrecht-sidenav__marker--child.utrecht-sidenav__link::before, +.utrecht-sidenav--pseudo-elements + .utrecht-sidenav__link:hover + .utrecht-sidenav__link.utrecht-sidenav__link--child::before { background-color: var(--utrecht-sidenav-link-hover-color); border: 2px solid var(--utrecht-sidenav-link-hover-color); } @@ -3886,12 +4070,14 @@ text-decoration: underline; } -.utrecht-topnav__link--focus, .utrecht-topnav__link:focus { +.utrecht-topnav__link--focus, +.utrecht-topnav__link:focus { background-color: var(--utrecht-topnav-link-focus-background-color, var(--utrecht-topnav-link-background-color)); color: var(--utrecht-topnav-link-focus-color, var(--utrecht-topnav-link-color)); } -.utrecht-topnav__link--focus-visible, .utrecht-topnav__link:focus-visible { +.utrecht-topnav__link--focus-visible, +.utrecht-topnav__link:focus-visible { --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent); box-shadow: var(--_utrecht-focus-ring-box-shadow); @@ -3905,17 +4091,26 @@ border-color: var(--utrecht-number-badge-border-color, var(--utrecht-badge-border-color)); border-radius: var(--utrecht-number-badge-border-radius, var(--utrecht-badge-border-radius, 0.5ch)); border-style: solid; - border-width: max(var(--utrecht-number-badge-border-width, var(--utrecht-badge-border-width, 0)), var(--_utrecht-number-badge-min-border-width, 0)); + border-width: max( + var(--utrecht-number-badge-border-width, var(--utrecht-badge-border-width, 0)), + var(--_utrecht-number-badge-min-border-width, 0) + ); color: var(--utrecht-number-badge-color, var(--utrecht-badge-color, hsl(0, 0%, 100%))); display: inline-block; - font-family: var(--utrecht-number-badge-font-family, var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif))); + font-family: var( + --utrecht-number-badge-font-family, + var(--utrecht-badge-font-family, var(--utrecht-document-font-family, sans-serif)) + ); font-size: var(--utrecht-number-badge-font-size, var(--utrecht-badge-font-size)); font-style: var(--utrecht-number-badge-font-style, normal); font-weight: var(--utrecht-number-badge-font-weight, var(--utrecht-badge-font-weight, bold)); line-height: 1; max-block-size: max-content; max-inline-size: max-content; - min-block-size: var(--utrecht-number-badge-min-block-size, var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em))); + min-block-size: var( + --utrecht-number-badge-min-block-size, + var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em)) + ); min-inline-size: var(--utrecht-number-badge-min-inline-size, var(--utrecht-number-badge-min-size, 1em)); padding-block-end: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex)); padding-block-start: var(--utrecht-number-badge-padding-block, var(--utrecht-badge-padding-block, 0.5ex)); @@ -3946,11 +4141,26 @@ .utrecht-ordered-list--html-content ol { box-sizing: border-box; font-family: var(--utrecht-document-font-family, inherit); - font-size: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit))); - line-height: var(--utrecht-ordered-list-font-size, var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit))); - margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0))); - margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0))); - padding-inline-start: var(--utrecht-ordered-list-padding-inline-start, var(--utrecht-unordered-list-padding-inline-start, 2ch)); + font-size: var( + --utrecht-ordered-list-font-size, + var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)) + ); + line-height: var( + --utrecht-ordered-list-font-size, + var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)) + ); + margin-block-end: calc( + var(--utrecht-space-around, 0) * + var(--utrecht-ordered-list-margin-block-end, var(--utrecht-unordered-list-margin-block-end, 0)) + ); + margin-block-start: calc( + var(--utrecht-space-around, 0) * + var(--utrecht-ordered-list-margin-block-start, var(--utrecht-unordered-list-margin-block-start, 0)) + ); + padding-inline-start: var( + --utrecht-ordered-list-padding-inline-start, + var(--utrecht-unordered-list-padding-inline-start, 2ch) + ); text-align: start; } @@ -3972,9 +4182,18 @@ .utrecht-ordered-list--html-content > li, .utrecht-ordered-list--html-content ol > li, .utrecht-ordered-list__item { - margin-block-end: var(--utrecht-ordered-list-item-margin-block-end, var(--utrecht-unordered-list-item-margin-block-end)); - margin-block-start: var(--utrecht-ordered-list-item-margin-block-start, var(--utrecht-unordered-list-item-margin-block-start)); - padding-inline-start: var(--utrecht-ordered-list-item-padding-inline-start, var(--utrecht-unordered-list-item-padding-inline-start, 1ch)); + margin-block-end: var( + --utrecht-ordered-list-item-margin-block-end, + var(--utrecht-unordered-list-item-margin-block-end) + ); + margin-block-start: var( + --utrecht-ordered-list-item-margin-block-start, + var(--utrecht-unordered-list-item-margin-block-start) + ); + padding-inline-start: var( + --utrecht-ordered-list-item-padding-inline-start, + var(--utrecht-unordered-list-item-padding-inline-start, 1ch) + ); } .utrecht-page-content { padding-block-end: var(--utrecht-page-content-padding-block-end); @@ -4030,7 +4249,10 @@ .utrecht-page { margin-inline-end: auto; margin-inline-start: auto; - max-inline-size: calc(var(--utrecht-page-max-inline-size) - var(--utrecht-page-margin-inline-start, 0px) - var(--utrecht-page-margin-inline-end, 0px)); + max-inline-size: calc( + var(--utrecht-page-max-inline-size) - var(--utrecht-page-margin-inline-start, 0px) - + var(--utrecht-page-margin-inline-end, 0px) + ); padding-inline-end: var(--utrecht-page-margin-inline-end); padding-inline-start: var(--utrecht-page-margin-inline-start); } @@ -4078,14 +4300,23 @@ } .utrecht-pagination__relative-link--disabled { - background-color: var(--utrecht-pagination-relative-link-disabled-background-color, var(--utrecht-pagination-relative-link-background-color)); + background-color: var( + --utrecht-pagination-relative-link-disabled-background-color, + var(--utrecht-pagination-relative-link-background-color) + ); color: var(--utrecht-pagination-relative-link-disabled-color, var(--utrecht-pagination-relative-link-color)); } .utrecht-pagination__relative-link--hover, .utrecht-pagination__relative-link:hover { - background-color: var(--utrecht-pagination-relative-link-hover-background-color, var(--utrecht-pagination-relative-link-background-color)); - border-color: var(--utrecht-pagination-relative-link-hover-border-color, var(--utrecht-pagination-relative-link-border-color)); + background-color: var( + --utrecht-pagination-relative-link-hover-background-color, + var(--utrecht-pagination-relative-link-background-color) + ); + border-color: var( + --utrecht-pagination-relative-link-hover-border-color, + var(--utrecht-pagination-relative-link-border-color) + ); color: var(--utrecht-pagination-relative-link-hover-color, var(--utrecht-pagination-relative-link-color)); } @@ -4117,8 +4348,14 @@ .utrecht-pagination__page-link--hover, .utrecht-pagination__page-link:hover { - background-color: var(--utrecht-pagination-page-link-hover-background-color, var(--utrecht-pagination-page-link-background-color)); - border-color: var(--utrecht-pagination-page-link-hover-border-color, var(--utrecht-pagination-page-link-border-color)); + background-color: var( + --utrecht-pagination-page-link-hover-background-color, + var(--utrecht-pagination-page-link-background-color) + ); + border-color: var( + --utrecht-pagination-page-link-hover-border-color, + var(--utrecht-pagination-page-link-border-color) + ); color: var(--utrecht-pagination-page-link-hover-color, var(--utrecht-pagination-page-link-color)); } @@ -4169,7 +4406,10 @@ } .utrecht-pre-heading { color: var(--utrecht-pre-heading-color, var(--utrecht-heading-color, var(--utrecht-document-color, inherit))); - font-family: var(--utrecht-pre-heading-font-family, var(--utrecht-heading-font-family, var(--utrecht-document-font-family))); + font-family: var( + --utrecht-pre-heading-font-family, + var(--utrecht-heading-font-family, var(--utrecht-document-font-family)) + ); font-size: var(--utrecht-pre-heading-font-size); font-weight: var(--utrecht-pre-heading-font-weight, var(--utrecht-heading-font-weight, bold)); line-height: var(--utrecht-pre-heading-line-height); @@ -4211,7 +4451,11 @@ ); --_utrecht-radio-button-icon-size: 0; background-color: var(--_utrecht-radio-button-background-color); - background-image: radial-gradient(circle, var(--_utrecht-radio-button-color, transparent) calc(var(--_utrecht-radio-button-icon-size, 50%) - 5%), var(--_utrecht-radio-button-background-color, currentColor) var(--_utrecht-radio-button-icon-size, 50%)); + background-image: radial-gradient( + circle, + var(--_utrecht-radio-button-color, transparent) calc(var(--_utrecht-radio-button-icon-size, 50%) - 5%), + var(--_utrecht-radio-button-background-color, currentColor) var(--_utrecht-radio-button-icon-size, 50%) + ); background-position: center; background-repeat: no-repeat; background-size: contain; @@ -4403,12 +4647,13 @@ --_utrecht-radio-button-hover-color: var(--_utrecht-radio-button-color); cursor: var(--utrecht-action-disabled-cursor, not-allowed); } -.utrecht-radio-button--html-input:invalid, .utrecht-radio-button--html-input[aria-invalid=true] { +.utrecht-radio-button--html-input:invalid, +.utrecht-radio-button--html-input[aria-invalid="true"] { border-color: var(--utrecht-radio-button-invalid-border-color, var(--utrecht-radio-button-border-color)); border-width: var(--utrecht-radio-button-invalid-border-width, var(--utrecht-radio-button-border-width)); color: var(--utrecht-radio-button-invalid-color, var(--utrecht-radio-button-color)); } -.utrecht-radio-button--html-input:focus:not([aria-disabled=true], :disabled) { +.utrecht-radio-button--html-input:focus:not([aria-disabled="true"], :disabled) { --_utrecht-radio-button-interactive-background-color: var( --utrecht-radio-button-focus-background-color, var(--utrecht-radio-button-focus-background-color) @@ -4435,7 +4680,7 @@ outline-style: var(--utrecht-focus-outline-style, revert); outline-width: var(--utrecht-focus-outline-width, revert); } -.utrecht-radio-button--html-input:hover:not([aria-disabled=true], :disabled) { +.utrecht-radio-button--html-input:hover:not([aria-disabled="true"], :disabled) { --_utrecht-radio-button-interactive-background-color: var( --_utrecht-radio-button-state-hover-background-color, var(--utrecht-radio-button-hover-background-color) @@ -4453,7 +4698,7 @@ var(--utrecht-radio-button-hover-color) ); } -.utrecht-radio-button--html-input:active:not([aria-disabled=true], :disabled) { +.utrecht-radio-button--html-input:active:not([aria-disabled="true"], :disabled) { --_utrecht-radio-button-interactive-background-color: var( --_utrecht-radio-button-state-active-background-color, var(--utrecht-radio-button-active-background-color) @@ -6294,7 +6539,10 @@ } .utrecht-select { background-color: var(--utrecht-select-background-color, var(--utrecht-form-control-background-color)); - border-block-end-width: var(--utrecht-select-border-block-end-width, var(--utrecht-select-border-width, var(--utrecht-form-control-border-width))); + border-block-end-width: var( + --utrecht-select-border-block-end-width, + var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)) + ); border-block-start-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)); border-color: var(--utrecht-select-border-color, var(--utrecht-form-control-border-color)); border-inline-end-width: var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)); @@ -6317,16 +6565,46 @@ } .utrecht-select--disabled { - background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-select-disabled-background-color, + var( + --utrecht-form-control-disabled-background-color, + var(--utrecht-select-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-select-disabled-border-color, + var( + --utrecht-form-control-disabled-border-color, + var(--utrecht-select-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-select-disabled-color, + var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))) + ); cursor: var(--utrecht-action-disabled-cursor, not-allowed); } .utrecht-select--focus { - background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-select-focus-background-color, + var( + --utrecht-form-control-focus-background-color, + var(--utrecht-select-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-select-focus-border-color, + var( + --utrecht-form-control-focus-border-color, + var(--utrecht-select-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-select-focus-color, + var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))) + ); } .utrecht-select--focus-visible { @@ -6351,17 +6629,53 @@ var(--utrecht-select-border-width, var(--utrecht-form-control-border-width)) ) ); - background-color: var(--utrecht-select-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color)))); + background-color: var( + --utrecht-select-invalid-background-color, + var( + --utrecht-form-control-invalid-background-color, + var(--utrecht-select-background-color, var(--utrecht-form-control-background-color)) + ) + ); border-width: var(--_utrecht-select-border-width); - border-block-end-width: var(--utrecht-select-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-select-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width))))); - border-color: var(--utrecht-select-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color)))); + border-block-end-width: var( + --utrecht-select-invalid-border-block-end-width, + var( + --utrecht-form-control-invalid-border-block-end-width, + var( + --utrecht-select-border-block-end-width, + var(--utrecht-form-control-border-block-end-width, var(--_utrecht-select-border-width)) + ) + ) + ); + border-color: var( + --utrecht-select-invalid-border-color, + var( + --utrecht-form-control-invalid-border-color, + var(--utrecht-select-border-color, var(--utrecht-form-control-border-color)) + ) + ); } .utrecht-select--html-select { } .utrecht-select--html-select:focus { - background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-select-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-select-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-select-focus-background-color, + var( + --utrecht-form-control-focus-background-color, + var(--utrecht-select-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-select-focus-border-color, + var( + --utrecht-form-control-focus-border-color, + var(--utrecht-select-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-select-focus-color, + var(--utrecht-form-control-focus-color, var(--utrecht-select-color, var(--utrecht-form-control-color))) + ); } .utrecht-select--html-select:focus-visible { --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) @@ -6373,9 +6687,24 @@ outline-width: var(--utrecht-focus-outline-width, revert); } .utrecht-select--html-select:disabled { - background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-select-disabled-background-color, + var( + --utrecht-form-control-disabled-background-color, + var(--utrecht-select-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-select-disabled-border-color, + var( + --utrecht-form-control-disabled-border-color, + var(--utrecht-select-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-select-disabled-color, + var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))) + ); cursor: var(--utrecht-action-disabled-cursor, not-allowed); } @@ -6448,7 +6777,10 @@ outline-offset: var(--utrecht-focus-outline-offset, revert); outline-style: var(--utrecht-focus-outline-style, revert); outline-width: var(--utrecht-focus-outline-width, revert); - text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration)); + text-decoration: var( + --utrecht-skip-link-focus-visible-text-decoration, + var(--utrecht-skip-link-focus-text-decoration) + ); } .utrecht-skip-link--focus-visible, @@ -6460,10 +6792,16 @@ outline-offset: var(--utrecht-focus-outline-offset, revert); outline-style: var(--utrecht-focus-outline-style, revert); outline-width: var(--utrecht-focus-outline-width, revert); - text-decoration: var(--utrecht-skip-link-focus-visible-text-decoration, var(--utrecht-skip-link-focus-text-decoration)); + text-decoration: var( + --utrecht-skip-link-focus-visible-text-decoration, + var(--utrecht-skip-link-focus-text-decoration) + ); } .utrecht-spotlight-section { - background-color: var(--_utrecht-spotlight-section-background-color, var(--utrecht-spotlight-section-background-color)); + background-color: var( + --_utrecht-spotlight-section-background-color, + var(--utrecht-spotlight-section-background-color) + ); border-color: var(--_utrecht-spotlight-section-border-color, var(--utrecht-spotlight-section-border-color)); border-style: solid; border-width: var(--_utrecht-spotlight-section-border-width, var(--utrecht-spotlight-section-border-width, 0)); @@ -6520,10 +6858,20 @@ } .utrecht-table-container--overflow-inline { background-attachment: local, local, scroll, scroll; - background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)); - background-position: left center, right center, left center, right center; + background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), + linear-gradient(to right, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)), + linear-gradient(to left, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0)); + background-position: + left center, + right center, + left center, + right center; background-repeat: no-repeat; - background-size: 20px 100%, 20px 100%, 10px 100%, 10px 100%; + background-size: + 20px 100%, + 20px 100%, + 10px 100%, + 10px 100%; overflow: auto; } @@ -6590,9 +6938,15 @@ position: sticky; } .utrecht-table__header--sticky tr:last-child > th { - border-block-end-color: var(--utrecht-table-header-sticky-border-block-end-color, var(--utrecht-table-header-border-block-end-color, transparent)); + border-block-end-color: var( + --utrecht-table-header-sticky-border-block-end-color, + var(--utrecht-table-header-border-block-end-color, transparent) + ); border-block-end-style: solid; - border-block-end-width: var(--utrecht-table-header-sticky-border-block-end-width, var(--utrecht-table-header-border-block-end-width, 0)); + border-block-end-width: var( + --utrecht-table-header-sticky-border-block-end-width, + var(--utrecht-table-header-border-block-end-width, 0) + ); } .utrecht-table__footer { @@ -6601,16 +6955,25 @@ } .utrecht-table__footer--sticky { - background-color: var(--utrecht-table-footer-sticky-background-color, var(--utrecht-table-footer-background-color, transparent)); + background-color: var( + --utrecht-table-footer-sticky-background-color, + var(--utrecht-table-footer-background-color, transparent) + ); color: var(--utrecht-table-footer-sticky-color, var(--utrecht-table-footer-color)); inset-block-end: 0; position: sticky; } .utrecht-table__footer--sticky tr:first-child > th, .utrecht-table__footer--sticky tr:first-child > td { - border-block-start-color: var(--utrecht-table-header-sticky-border-block-start-color, var(--utrecht-table-header-border-block-start-color, transparent)); + border-block-start-color: var( + --utrecht-table-header-sticky-border-block-start-color, + var(--utrecht-table-header-border-block-start-color, transparent) + ); border-block-start-style: solid; - border-block-start-width: var(--utrecht-table-header-sticky-border-block-start-width, var(--utrecht-table-header-border-block-start-width, 0)); + border-block-start-width: var( + --utrecht-table-header-sticky-border-block-start-width, + var(--utrecht-table-header-border-block-start-width, 0) + ); } .utrecht-table--html-table > tbody, @@ -6710,7 +7073,10 @@ .utrecht-table--html-table > tbody > tr > td:first-child, .utrecht-table--html-table > tfoot > tr > td:first-child, .utrecht-table__cell--first { - padding-inline-start: var(--utrecht-table-row-padding-inline-start, var(--utrecht-table-cell-padding-inline-start, 0)); + padding-inline-start: var( + --utrecht-table-row-padding-inline-start, + var(--utrecht-table-cell-padding-inline-start, 0) + ); } .utrecht-table--html-table > tr > td:last-child, @@ -6846,7 +7212,10 @@ background-color: var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)); block-size: initial; border-width: var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)); - border-block-end-width: var(--utrecht-textarea-border-block-end-width, var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width))); + border-block-end-width: var( + --utrecht-textarea-border-block-end-width, + var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)) + ); border-color: var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)); border-radius: var(--utrecht-textarea-border-radius, var(--utrecht-form-control-border-radius, 0)); border-style: solid; @@ -6862,8 +7231,14 @@ min-inline-size: var(--utrecht-pointer-target-min-size, 44px); padding-block-end: var(--utrecht-textarea-padding-block-end, var(--utrecht-form-control-padding-block-end, 0)); padding-block-start: var(--utrecht-textarea-padding-block-start, var(--utrecht-form-control-padding-block-start, 0)); - padding-inline-end: var(--utrecht-textarea-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial)); - padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial)); + padding-inline-end: var( + --utrecht-textarea-padding-inline-end, + var(--utrecht-form-control-padding-inline-end, initial) + ); + padding-inline-start: var( + --utrecht-textarea-padding-inline-start, + var(--utrecht-form-control-padding-inline-start, initial) + ); resize: vertical; resize: block; } @@ -6876,24 +7251,78 @@ var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)) ) ); - background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)))); + background-color: var( + --utrecht-textarea-invalid-background-color, + var( + --utrecht-form-control-invalid-background-color, + var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)) + ) + ); border-width: var(--_utrecht-textarea-border-width); - border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width))))); - border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))); + border-block-end-width: var( + --utrecht-textarea-invalid-border-block-end-width, + var( + --utrecht-form-control-invalid-border-block-end-width, + var( + --utrecht-textarea-border-block-end-width, + var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)) + ) + ) + ); + border-color: var( + --utrecht-textarea-invalid-border-color, + var( + --utrecht-form-control-invalid-border-color, + var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textarea-invalid-color, + var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))) + ); } .utrecht-textarea--disabled { - background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textarea-disabled-background-color, + var( + --utrecht-form-control-disabled-background-color, + var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textarea-disabled-border-color, + var( + --utrecht-form-control-disabled-border-color, + var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textarea-disabled-color, + var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))) + ); cursor: var(--utrecht-action-disabled-cursor, not-allowed); } .utrecht-textarea--focus { - background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textarea-focus-background-color, + var( + --utrecht-form-control-focus-background-color, + var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textarea-focus-border-color, + var( + --utrecht-form-control-focus-border-color, + var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textarea-focus-color, + var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))) + ); } .utrecht-textarea--focus-visible { @@ -6907,13 +7336,31 @@ } .utrecht-textarea--read-only { - background-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textarea-read-only-border, + var( + --utrecht-form-control-read-only-background-color, + var(--utrecht-textarea-border, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textarea-read-only-border, + var( + --utrecht-form-control-read-only-border-color, + var(--utrecht-textarea-border, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textarea-read-only-color, + var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))) + ); } .utrecht-textarea__placeholder { - color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))); + color: var( + --utrecht-textarea-placeholder-color, + var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))) + ); font-style: var(--utrecht-form-control-placeholder-font-style); opacity: 100%; } @@ -6921,9 +7368,24 @@ .utrecht-textarea--html-textarea { } .utrecht-textarea--html-textarea:focus { - background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textarea-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textarea-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textarea-focus-background-color, + var( + --utrecht-form-control-focus-background-color, + var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textarea-focus-border-color, + var( + --utrecht-form-control-focus-border-color, + var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textarea-focus-color, + var(--utrecht-form-control-focus-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))) + ); } .utrecht-textarea--html-textarea:focus-visible { --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) @@ -6934,7 +7396,8 @@ outline-style: var(--utrecht-focus-outline-style, revert); outline-width: var(--utrecht-focus-outline-width, revert); } -.utrecht-textarea--html-textarea:invalid, .utrecht-textarea--html-textarea[aria-invalid=true] { +.utrecht-textarea--html-textarea:invalid, +.utrecht-textarea--html-textarea[aria-invalid="true"] { --_utrecht-textarea-border-width: var( --utrecht-textarea-invalid-border-width, var( @@ -6942,25 +7405,82 @@ var(--utrecht-textarea-border-width, var(--utrecht-form-control-border-width)) ) ); - background-color: var(--utrecht-textarea-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)))); + background-color: var( + --utrecht-textarea-invalid-background-color, + var( + --utrecht-form-control-invalid-background-color, + var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)) + ) + ); border-width: var(--_utrecht-textarea-border-width); - border-block-end-width: var(--utrecht-textarea-invalid-border-block-end-width, var(--utrecht-form-control-invalid-border-block-end-width, var(--utrecht-textarea-border-block-end-width, var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width))))); - border-color: var(--utrecht-textarea-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textarea-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))); + border-block-end-width: var( + --utrecht-textarea-invalid-border-block-end-width, + var( + --utrecht-form-control-invalid-border-block-end-width, + var( + --utrecht-textarea-border-block-end-width, + var(--utrecht-form-control-border-block-end-width, var(--_utrecht-textarea-border-width)) + ) + ) + ); + border-color: var( + --utrecht-textarea-invalid-border-color, + var( + --utrecht-form-control-invalid-border-color, + var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textarea-invalid-color, + var(--utrecht-form-control-invalid-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))) + ); } .utrecht-textarea--html-textarea:read-only { - background-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textarea-border, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textarea-read-only-border, + var( + --utrecht-form-control-read-only-background-color, + var(--utrecht-textarea-border, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textarea-read-only-border, + var( + --utrecht-form-control-read-only-border-color, + var(--utrecht-textarea-border, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textarea-read-only-color, + var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))) + ); } .utrecht-textarea--html-textarea:disabled { - background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textarea-disabled-background-color, + var( + --utrecht-form-control-disabled-background-color, + var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textarea-disabled-border-color, + var( + --utrecht-form-control-disabled-border-color, + var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textarea-disabled-color, + var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))) + ); cursor: var(--utrecht-action-disabled-cursor, not-allowed); } .utrecht-textarea--html-textarea::placeholder { - color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color)))); + color: var( + --utrecht-textarea-placeholder-color, + var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))) + ); font-style: var(--utrecht-form-control-placeholder-font-style); opacity: 100%; } @@ -6976,7 +7496,10 @@ background-color: var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)); block-size: initial; border-width: var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)); - border-block-end-width: var(--utrecht-textbox-border-bottom-width, var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width))); + border-block-end-width: var( + --utrecht-textbox-border-bottom-width, + var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)) + ); border-color: var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)); border-radius: var(--utrecht-textbox-border-radius, var(--utrecht-form-control-border-radius, 0)); border-style: solid; @@ -6989,11 +7512,20 @@ line-height: var(--utrecht-textbox-line-height, var(--utrecht-form-control-line-height, initial)); min-block-size: var(--utrecht-pointer-target-min-size, 44px); min-inline-size: var(--utrecht-pointer-target-min-size, 44px); - max-inline-size: min(var(--_utrecht-textbox-max-inline-size, 100%), var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size))); + max-inline-size: min( + var(--_utrecht-textbox-max-inline-size, 100%), + var(--utrecht-textbox-max-inline-size, var(--utrecht-form-control-max-inline-size)) + ); padding-block-end: var(--utrecht-textbox-padding-block-end, var(--utrecht-form-control-padding-block-end, 0)); padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0)); - padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial)); - padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial)); + padding-inline-end: var( + --utrecht-textbox-padding-inline-end, + var(--utrecht-form-control-padding-inline-end, initial) + ); + padding-inline-start: var( + --utrecht-textbox-padding-inline-start, + var(--utrecht-form-control-padding-inline-start, initial) + ); } .utrecht-textbox--invalid { @@ -7004,24 +7536,78 @@ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)) ) ); - background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)))); + background-color: var( + --utrecht-textbox-invalid-background-color, + var( + --utrecht-form-control-invalid-background-color, + var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)) + ) + ); border-width: var(--_utrecht-textbox-border-width); - border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width))))); - border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))); + border-block-end-width: var( + --utrecht-textbox-invalid-border-bottom-width, + var( + --utrecht-form-control-invalid-border-bottom-width, + var( + --utrecht-textbox-border-bottom-width, + var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)) + ) + ) + ); + border-color: var( + --utrecht-textbox-invalid-border-color, + var( + --utrecht-form-control-invalid-border-color, + var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textbox-invalid-color, + var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))) + ); } .utrecht-textbox--disabled { - background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textbox-disabled-background-color, + var( + --utrecht-form-control-disabled-background-color, + var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textbox-disabled-border-color, + var( + --utrecht-form-control-disabled-border-color, + var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textbox-disabled-color, + var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))) + ); cursor: var(--utrecht-action-disabled-cursor, not-allowed); } .utrecht-textbox--focus { - background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textbox-focus-background-color, + var( + --utrecht-form-control-focus-background-color, + var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textbox-focus-border-color, + var( + --utrecht-form-control-focus-border-color, + var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textbox-focus-color, + var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))) + ); } .utrecht-textbox--focus-visible { @@ -7035,13 +7621,31 @@ } .utrecht-textbox--read-only { - background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textbox-read-only-background-color, + var( + --utrecht-form-control-read-only-background-color, + var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textbox-read-only-border-color, + var( + --utrecht-form-control-read-only-border-color, + var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textbox-read-only-color, + var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))) + ); } .utrecht-textbox__placeholder { - color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))); + color: var( + --utrecht-textbox-placeholder-color, + var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))) + ); font-style: var(--utrecht-form-control-placeholder-font-style); opacity: 100%; } @@ -7091,10 +7695,12 @@ .utrecht-textbox--iban-nl-size { --utrecht-textbox-value-max-length: 22; } -.utrecht-textbox--placeholder-ltr::placeholder, .utrecht-textbox--placeholder-ltr:placeholder-shown { +.utrecht-textbox--placeholder-ltr::placeholder, +.utrecht-textbox--placeholder-ltr:placeholder-shown { direction: ltr; } -.utrecht-textbox--placeholder-rtl::placeholder, .utrecht-textbox--placeholder-rtl:placeholder-shown { +.utrecht-textbox--placeholder-rtl::placeholder, +.utrecht-textbox--placeholder-rtl:placeholder-shown { direction: rtl; } @@ -7105,9 +7711,24 @@ .utrecht-textbox--html-input { } .utrecht-textbox--html-input:focus { - background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textbox-focus-border-color, var(--utrecht-form-control-focus-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textbox-focus-color, var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textbox-focus-background-color, + var( + --utrecht-form-control-focus-background-color, + var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textbox-focus-border-color, + var( + --utrecht-form-control-focus-border-color, + var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textbox-focus-color, + var(--utrecht-form-control-focus-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))) + ); } .utrecht-textbox--html-input:focus-visible { --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) @@ -7118,7 +7739,8 @@ outline-style: var(--utrecht-focus-outline-style, revert); outline-width: var(--utrecht-focus-outline-width, revert); } -.utrecht-textbox--html-input:invalid, .utrecht-textbox--html-input[aria-invalid=true] { +.utrecht-textbox--html-input:invalid, +.utrecht-textbox--html-input[aria-invalid="true"] { --_utrecht-textbox-border-width: var( --utrecht-textbox-invalid-border-width, var( @@ -7126,36 +7748,102 @@ var(--utrecht-textbox-border-width, var(--utrecht-form-control-border-width)) ) ); - background-color: var(--utrecht-textbox-invalid-background-color, var(--utrecht-form-control-invalid-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)))); + background-color: var( + --utrecht-textbox-invalid-background-color, + var( + --utrecht-form-control-invalid-background-color, + var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)) + ) + ); border-width: var(--_utrecht-textbox-border-width); - border-block-end-width: var(--utrecht-textbox-invalid-border-bottom-width, var(--utrecht-form-control-invalid-border-bottom-width, var(--utrecht-textbox-border-bottom-width, var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width))))); - border-color: var(--utrecht-textbox-invalid-border-color, var(--utrecht-form-control-invalid-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textbox-invalid-color, var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))); + border-block-end-width: var( + --utrecht-textbox-invalid-border-bottom-width, + var( + --utrecht-form-control-invalid-border-bottom-width, + var( + --utrecht-textbox-border-bottom-width, + var(--utrecht-form-control-border-bottom-width, var(--_utrecht-textbox-border-width)) + ) + ) + ); + border-color: var( + --utrecht-textbox-invalid-border-color, + var( + --utrecht-form-control-invalid-border-color, + var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textbox-invalid-color, + var(--utrecht-form-control-invalid-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))) + ); } .utrecht-textbox--html-input:read-only { - background-color: var(--utrecht-textbox-read-only-background-color, var(--utrecht-form-control-read-only-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textbox-read-only-background-color, + var( + --utrecht-form-control-read-only-background-color, + var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textbox-read-only-border-color, + var( + --utrecht-form-control-read-only-border-color, + var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textbox-read-only-color, + var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))) + ); } .utrecht-textbox--html-input:disabled { - background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)))); - border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)))); - color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))); + background-color: var( + --utrecht-textbox-disabled-background-color, + var( + --utrecht-form-control-disabled-background-color, + var(--utrecht-textbox-background-color, var(--utrecht-form-control-background-color)) + ) + ); + border-color: var( + --utrecht-textbox-disabled-border-color, + var( + --utrecht-form-control-disabled-border-color, + var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color)) + ) + ); + color: var( + --utrecht-textbox-disabled-color, + var(--utrecht-form-control-disabled-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))) + ); cursor: var(--utrecht-action-disabled-cursor, not-allowed); } .utrecht-textbox--html-input::placeholder { - color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color)))); + color: var( + --utrecht-textbox-placeholder-color, + var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))) + ); font-style: var(--utrecht-form-control-placeholder-font-style); opacity: 100%; } -.utrecht-textbox--html-input[type=password i] { +.utrecht-textbox--html-input[type="password" i] { font-variant-ligatures: none; font-variant-numeric: slashed-zero; } -.utrecht-textbox--html-input[type=url i], .utrecht-textbox--html-input[type=email i], .utrecht-textbox--html-input[inputMode=email i], .utrecht-textbox--html-input[inputMode=url i] { +.utrecht-textbox--html-input[type="url" i], +.utrecht-textbox--html-input[type="email" i], +.utrecht-textbox--html-input[inputMode="email" i], +.utrecht-textbox--html-input[inputMode="url" i] { font-variant-ligatures: none; } -.utrecht-textbox--html-input[pattern="\\d*"], .utrecht-textbox--html-input[pattern="[0-9]*"], .utrecht-textbox--html-input[type=number i], .utrecht-textbox--html-input[type=tel i], .utrecht-textbox--html-input[inputMode=numeric i], .utrecht-textbox--html-input[inputMode=decimal i], .utrecht-textbox--html-input[inputMode=tel i] { +.utrecht-textbox--html-input[pattern="\\d*"], +.utrecht-textbox--html-input[pattern="[0-9]*"], +.utrecht-textbox--html-input[type="number" i], +.utrecht-textbox--html-input[type="tel" i], +.utrecht-textbox--html-input[inputMode="numeric" i], +.utrecht-textbox--html-input[inputMode="decimal" i], +.utrecht-textbox--html-input[inputMode="tel" i] { -moz-appearance: textfield; font-variant-numeric: lining-nums tabular-nums; } @@ -7185,7 +7873,8 @@ transform: var(--utrecht-toptask-link-hover-transform-scale, 1); } -.utrecht-toptask-link--focus-visible, .utrecht-toptask-link:focus-visible { +.utrecht-toptask-link--focus-visible, +.utrecht-toptask-link:focus-visible { --_utrecht-focus-ring-box-shadow: 0 0 0 var(--utrecht-focus-outline-width, 0) var(--utrecht-focus-inverse-outline-color, transparent); box-shadow: var(--_utrecht-focus-ring-box-shadow); @@ -7195,7 +7884,8 @@ outline-width: var(--utrecht-focus-outline-width, revert); } -.utrecht-toptask-link--focus, .utrecht-toptask-link:focus { +.utrecht-toptask-link--focus, +.utrecht-toptask-link:focus { background-color: var(--utrecht-toptask-link-focus-background-color, var(--utrecht-toptask-link-background-color)); color: var(--utrecht-toptask-link-focus-color, var(--utrecht-toptask-link-color)); } @@ -7226,8 +7916,14 @@ font-family: var(--utrecht-document-font-family, inherit); font-size: var(--utrecht-unordered-list-font-size, var(--utrecht-document-font-size, inherit)); line-height: var(--utrecht-unordered-list-line-height, var(--utrecht-document-line-height, inherit)); - margin-block-end: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0))); - margin-block-start: calc(var(--utrecht-space-around, 0) * var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0))); + margin-block-end: calc( + var(--utrecht-space-around, 0) * + var(--utrecht-unordered-list-margin-block-end, var(--utrecht-paragraph-margin-block-end, 0)) + ); + margin-block-start: calc( + var(--utrecht-space-around, 0) * + var(--utrecht-unordered-list-margin-block-start, var(--utrecht-paragraph-margin-block-start, 0)) + ); padding-inline-start: var(--utrecht-unordered-list-padding-inline-start, 2ch); text-align: start; } @@ -7270,4 +7966,4 @@ hyphens: none; overflow-wrap: anywhere; page-break-inside: avoid; -} \ No newline at end of file +} diff --git a/src/main/webapp/style/theme.css b/src/main/webapp/style/theme.css index 19c3dc5..19da067 100644 --- a/src/main/webapp/style/theme.css +++ b/src/main/webapp/style/theme.css @@ -3,7 +3,8 @@ * Generated on Wed, 21 Aug 2024 06:58:18 GMT */ -.rods-theme, .rods-theme ::backdrop { +.rods-theme, +.rods-theme ::backdrop { --utrecht-textbox-invalid-border-bottom-width: 2px; --utrecht-textbox-padding-inline-start: 16px; --utrecht-textbox-padding-inline-end: 16px; @@ -37,7 +38,7 @@ --utrecht-form-select-border-width: 1px; --utrecht-form-fieldset-margin-block-start: 40px; --utrecht-form-field-invalid-border-inline-start-width: 2px; - --utrecht-form-field-description-invalid-color: #B53322; + --utrecht-form-field-description-invalid-color: #b53322; --utrecht-form-control-max-inline-size: 320px; --utrecht-form-control-padding-inline-start: 16px; --utrecht-form-control-padding-inline-end: 16px; @@ -178,122 +179,122 @@ --rods-typography-scale-6xl-line-height: 72px; --rods-typography-scale-6xl-font-size: 64px; --rods-typography-sans-serif-font-family: Bolder, ArialforRotterdam, Arial, sans-serif; - --rods-color-red-tint-03: #9A0F0F; /* Secondary/Red/Tint 03 */ - --rods-color-red-tint-02: #D70D0D; /* Secondary/Red/Tint 02 */ - --rods-color-red-tint-01: #FE1818; /* Secondary/Red/Tint 01 */ - --rods-color-brown-tint-03: #8B644C; /* Secondary/Brown/Tint 03 */ + --rods-color-red-tint-03: #9a0f0f; /* Secondary/Red/Tint 03 */ + --rods-color-red-tint-02: #d70d0d; /* Secondary/Red/Tint 02 */ + --rods-color-red-tint-01: #fe1818; /* Secondary/Red/Tint 01 */ + --rods-color-brown-tint-03: #8b644c; /* Secondary/Brown/Tint 03 */ --rods-color-brown-tint-02: #997056; /* Secondary/Brown/Tint 02 */ - --rods-color-brown-tint-01: #AB8061; /* Secondary/Brown/Tint 01 */ - --rods-color-dark-brown-tint-03: #552D25; /* Secondary/Dark brown/Tint 03 */ - --rods-color-dark-brown-tint-02: #5E362C; /* Secondary/Dark brown/Tint 02 */ - --rods-color-dark-brown-tint-01: #6B4236; /* Secondary/Dark brown/Tint 01 */ - --rods-color-purple-tint-03: #420C2F; /* Secondary/Purple/Tint 03 */ - --rods-color-purple-tint-02: #510E33; /* Secondary/Purple/Tint 02 */ + --rods-color-brown-tint-01: #ab8061; /* Secondary/Brown/Tint 01 */ + --rods-color-dark-brown-tint-03: #552d25; /* Secondary/Dark brown/Tint 03 */ + --rods-color-dark-brown-tint-02: #5e362c; /* Secondary/Dark brown/Tint 02 */ + --rods-color-dark-brown-tint-01: #6b4236; /* Secondary/Dark brown/Tint 01 */ + --rods-color-purple-tint-03: #420c2f; /* Secondary/Purple/Tint 03 */ + --rods-color-purple-tint-02: #510e33; /* Secondary/Purple/Tint 02 */ --rods-color-purple-tint-01: #701747; /* Secondary/Purple/Tint 01 */ --rods-color-magenta-tint-03: #792046; /* Secondary/Magenta/Tint 03 */ - --rods-color-magenta-tint-02: #A12B5E; /* Secondary/Magenta/Tint 02 */ - --rods-color-magenta-tint-01: #C93675; /* Secondary/Magenta/Tint 01 */ - --rods-color-pink-tint-03: #B21271; /* Secondary/Pink/Tint 03 */ - --rods-color-pink-tint-02: #CE0075; /* Secondary/Pink/Tint 02 */ - --rods-color-pink-tint-01: #E6007E; /* Secondary/Pink/Tint 01 */ - --rods-color-orange-tint-03: #CE4C3B; /* Secondary/Orange/Tint 03 */ - --rods-color-orange-tint-02: #D85644; /* Secondary/Orange/Tint 02 */ - --rods-color-orange-tint-01: #E3614D; /* Secondary/Orange/Tint 01 */ - --rods-color-bright-orange-tint-03: #DB5F06; /* Secondary/Bright orange/Tint 03 */ - --rods-color-bright-orange-tint-02: #E56E02; /* Secondary/Bright orange/Tint 02 */ - --rods-color-bright-orange-tint-01: #EF7D00; /* Secondary/Bright orange/Tint 01 */ - --rods-color-dark-yellow-tint-03: #D99600; /* Secondary/Dark yellow/Tint 03 */ - --rods-color-dark-yellow-tint-02: #E0A200; /* Secondary/Dark yellow/Tint 02 */ - --rods-color-dark-yellow-tint-01: #EDB500; /* Secondary/Dark yellow/Tint 01 */ - --rods-color-yellow-tint-03: #E1D600; /* Secondary/Yellow/Tint 03 */ - --rods-color-yellow-tint-02: #EDDE26; /* Secondary/Yellow/Tint 02 */ - --rods-color-yellow-tint-01: #FDEC3D; /* Secondary/Yellow/Tint 01 */ - --rods-color-lime-green-tint-03: #62A72B; /* Secondary/Lime green/Tint 03 */ - --rods-color-lime-green-tint-02: #73B129; /* Secondary/Lime green/Tint 02 */ - --rods-color-lime-green-tint-01: #7DC90F; /* Secondary/Lime green/Tint 01 */ - --rods-color-soft-green-tint-03: #99CCA0; /* Secondary/Soft green/Tint 03 */ - --rods-color-soft-green-tint-02: #D1E6CE; /* Secondary/Soft green/Tint 02 */ - --rods-color-soft-green-tint-01: #E1EFE2; /* Secondary/Soft green/Tint 01 */ - --rods-color-green-light-tint-03: #11A03E; /* Secondary/Green light/Tint 03 */ - --rods-color-green-light-tint-02: #11A03E; /* Secondary/Green light/Tint 02 */ - --rods-color-green-light-tint-01: #57B051; /* Secondary/Green light/Tint 01 */ - --rods-color-green-tint-03: #00602E; /* Secondary/Green/Tint 03 */ - --rods-color-green-tint-02: #006E32; /* Secondary/Green/Tint 02 */ - --rods-color-green-tint-01: #00811F; /* Secondary/Green/Tint 01 */ + --rods-color-magenta-tint-02: #a12b5e; /* Secondary/Magenta/Tint 02 */ + --rods-color-magenta-tint-01: #c93675; /* Secondary/Magenta/Tint 01 */ + --rods-color-pink-tint-03: #b21271; /* Secondary/Pink/Tint 03 */ + --rods-color-pink-tint-02: #ce0075; /* Secondary/Pink/Tint 02 */ + --rods-color-pink-tint-01: #e6007e; /* Secondary/Pink/Tint 01 */ + --rods-color-orange-tint-03: #ce4c3b; /* Secondary/Orange/Tint 03 */ + --rods-color-orange-tint-02: #d85644; /* Secondary/Orange/Tint 02 */ + --rods-color-orange-tint-01: #e3614d; /* Secondary/Orange/Tint 01 */ + --rods-color-bright-orange-tint-03: #db5f06; /* Secondary/Bright orange/Tint 03 */ + --rods-color-bright-orange-tint-02: #e56e02; /* Secondary/Bright orange/Tint 02 */ + --rods-color-bright-orange-tint-01: #ef7d00; /* Secondary/Bright orange/Tint 01 */ + --rods-color-dark-yellow-tint-03: #d99600; /* Secondary/Dark yellow/Tint 03 */ + --rods-color-dark-yellow-tint-02: #e0a200; /* Secondary/Dark yellow/Tint 02 */ + --rods-color-dark-yellow-tint-01: #edb500; /* Secondary/Dark yellow/Tint 01 */ + --rods-color-yellow-tint-03: #e1d600; /* Secondary/Yellow/Tint 03 */ + --rods-color-yellow-tint-02: #edde26; /* Secondary/Yellow/Tint 02 */ + --rods-color-yellow-tint-01: #fdec3d; /* Secondary/Yellow/Tint 01 */ + --rods-color-lime-green-tint-03: #62a72b; /* Secondary/Lime green/Tint 03 */ + --rods-color-lime-green-tint-02: #73b129; /* Secondary/Lime green/Tint 02 */ + --rods-color-lime-green-tint-01: #7dc90f; /* Secondary/Lime green/Tint 01 */ + --rods-color-soft-green-tint-03: #99cca0; /* Secondary/Soft green/Tint 03 */ + --rods-color-soft-green-tint-02: #d1e6ce; /* Secondary/Soft green/Tint 02 */ + --rods-color-soft-green-tint-01: #e1efe2; /* Secondary/Soft green/Tint 01 */ + --rods-color-green-light-tint-03: #11a03e; /* Secondary/Green light/Tint 03 */ + --rods-color-green-light-tint-02: #11a03e; /* Secondary/Green light/Tint 02 */ + --rods-color-green-light-tint-01: #57b051; /* Secondary/Green light/Tint 01 */ + --rods-color-green-tint-03: #00602e; /* Secondary/Green/Tint 03 */ + --rods-color-green-tint-02: #006e32; /* Secondary/Green/Tint 02 */ + --rods-color-green-tint-01: #00811f; /* Secondary/Green/Tint 01 */ --rods-color-dark-green-tint-03: #001905; /* Secondary/Dark green/Tint 03 */ - --rods-color-dark-green-tint-02: #07341B; /* Secondary/Dark green/Tint 02 */ - --rods-color-dark-green-tint-01: #004C31; /* Secondary/Dark green/Tint 01 */ - --rods-color-green-blue-tint-03: #00755F; /* Secondary/Green blue/Tint 03 */ - --rods-color-green-blue-tint-02: #00846D; /* Secondary/Green blue/Tint 02 */ - --rods-color-green-blue-tint-01: #09957B; /* Secondary/Green blue/Tint 01 */ + --rods-color-dark-green-tint-02: #07341b; /* Secondary/Dark green/Tint 02 */ + --rods-color-dark-green-tint-01: #004c31; /* Secondary/Dark green/Tint 01 */ + --rods-color-green-blue-tint-03: #00755f; /* Secondary/Green blue/Tint 03 */ + --rods-color-green-blue-tint-02: #00846d; /* Secondary/Green blue/Tint 02 */ + --rods-color-green-blue-tint-01: #09957b; /* Secondary/Green blue/Tint 01 */ --rods-color-dark-blue-tint-03: #083968; /* Secondary/Blue/Tint 03 */ --rods-color-dark-blue-tint-02: #084279; /* Secondary/Blue/Tint 02 */ - --rods-color-dark-blue-tint-01: #00548F; /* Secondary/Blue/Tint 01 */ - --rods-color-blue-tint-03: #0079B8; /* Secondary/Blue/Tint 03 */ - --rods-color-blue-tint-02: #0084C4; /* Secondary/Blue/Tint 02 */ - --rods-color-blue-tint-01: #1791D4; /* Secondary/Blue/Tint 01 */ - --rods-color-light-blue-tint-03: #76C1D3; /* Secondary/Blue/Tint 03 */ - --rods-color-light-blue-tint-02: #92CFE1; /* Secondary/Blue/Tint 02 */ - --rods-color-light-blue-tint-01: #A8E8F5; /* Secondary/Blue/Tint 01 */ - --rods-color-gray-tint-11: #404B4F; /* Gray/Tint 11 */ + --rods-color-dark-blue-tint-01: #00548f; /* Secondary/Blue/Tint 01 */ + --rods-color-blue-tint-03: #0079b8; /* Secondary/Blue/Tint 03 */ + --rods-color-blue-tint-02: #0084c4; /* Secondary/Blue/Tint 02 */ + --rods-color-blue-tint-01: #1791d4; /* Secondary/Blue/Tint 01 */ + --rods-color-light-blue-tint-03: #76c1d3; /* Secondary/Blue/Tint 03 */ + --rods-color-light-blue-tint-02: #92cfe1; /* Secondary/Blue/Tint 02 */ + --rods-color-light-blue-tint-01: #a8e8f5; /* Secondary/Blue/Tint 01 */ + --rods-color-gray-tint-11: #404b4f; /* Gray/Tint 11 */ --rods-color-gray-tint-10: #536165; /* Gray/Tint 10 */ - --rods-color-gray-tint-09: #65757B; /* Gray/Tint 09 */ - --rods-color-gray-tint-08: #7C8B90; /* Gray/Tint 08 */ - --rods-color-gray-tint-07: #8D9DA4; /* Gray/Tint 07 */ - --rods-color-gray-tint-06: #9DAFB6; /* Gray/Tint 06 */ - --rods-color-gray-tint-05: #B6C4C8; /* Gray/Tint 05 */ - --rods-color-gray-tint-04: #CAD6DA; /* Gray/Tint 04 */ - --rods-color-gray-tint-03: #DBE7EA; /* Gray/Tint 03 */ - --rods-color-gray-tint-02: #E4EEF1; /* Gray/Tint 02 */ - --rods-color-gray-tint-01: #EFF4F6; /* Gray/Tint 01 */ + --rods-color-gray-tint-09: #65757b; /* Gray/Tint 09 */ + --rods-color-gray-tint-08: #7c8b90; /* Gray/Tint 08 */ + --rods-color-gray-tint-07: #8d9da4; /* Gray/Tint 07 */ + --rods-color-gray-tint-06: #9dafb6; /* Gray/Tint 06 */ + --rods-color-gray-tint-05: #b6c4c8; /* Gray/Tint 05 */ + --rods-color-gray-tint-04: #cad6da; /* Gray/Tint 04 */ + --rods-color-gray-tint-03: #dbe7ea; /* Gray/Tint 03 */ + --rods-color-gray-tint-02: #e4eef1; /* Gray/Tint 02 */ + --rods-color-gray-tint-01: #eff4f6; /* Gray/Tint 01 */ --rods-color-skin-tone-12-tint-03: #000000; - --rods-color-skin-tone-12-tint-02: #2C1F12; - --rods-color-skin-tone-12-tint-01: #402F22; - --rods-color-skin-tone-11-tint-03: #664D3A; - --rods-color-skin-tone-11-tint-02: #7B5E48; - --rods-color-skin-tone-11-tint-01: #926E55; - --rods-color-skin-tone-10-tint-03: #BC8D6E; - --rods-color-skin-tone-10-tint-02: #D29C78; - --rods-color-skin-tone-10-tint-01: #DAB28D; - --rods-color-skin-tone-09-tint-03: #ECCAAD; - --rods-color-skin-tone-09-tint-02: #F8E1CE; - --rods-color-skin-tone-09-tint-01: #FEEBD8; - --rods-color-skin-tone-08-tint-03: #904D3D; - --rods-color-skin-tone-08-tint-02: #9F5D4B; - --rods-color-skin-tone-08-tint-01: #A96B5F; - --rods-color-skin-tone-07-tint-03: #A96B5F; - --rods-color-skin-tone-07-tint-02: #C98171; - --rods-color-skin-tone-07-tint-01: #D58E7A; - --rods-color-skin-tone-06-tint-03: #D58E7A; - --rods-color-skin-tone-06-tint-02: #E1A493; - --rods-color-skin-tone-06-tint-01: #EABAA5; - --rods-color-skin-tone-05-tint-03: #EABAA5; - --rods-color-skin-tone-05-tint-02: #ECC9B7; - --rods-color-skin-tone-05-tint-01: #FCDFD6; - --rods-color-skin-tone-04-tint-03: #8F642B; - --rods-color-skin-tone-04-tint-02: #A36C38; - --rods-color-skin-tone-04-tint-01: #B27A43; - --rods-color-skin-tone-03-tint-03: #B98152; - --rods-color-skin-tone-03-tint-02: #D39259; - --rods-color-skin-tone-03-tint-01: #DBA866; - --rods-color-skin-tone-02-tint-03: #DDB66A; - --rods-color-skin-tone-02-tint-02: #EDC77E; - --rods-color-skin-tone-02-tint-01: #F3D39A; - --rods-color-skin-tone-01-tint-03: #F3D39A; - --rods-color-skin-tone-01-tint-02: #FFE0A7; - --rods-color-skin-tone-01-tint-01: #FFE9C0; - --rods-color-notification-accomplishment-outline-color: #ACD6B7; - --rods-color-notification-accomplishment-icon-color: #00811F; - --rods-color-notification-accomplishment-background-color: #E6F3E9; - --rods-color-notification-warning-outline-color: #F9E7AC; - --rods-color-notification-warning-icon-color: #A65600; - --rods-color-notification-warning-background-color: #FEF8E6; - --rods-color-notification-alert-outline-color: #F7CCC5; - --rods-color-notification-alert-icon-color: #D70D0D; - --rods-color-notification-alert-background-color: #FDF0EE; - --rods-color-notification-neutral-outline-color: #B4DBF1; - --rods-color-notification-neutral-icon-color: #00689E; - --rods-color-notification-neutral-background-color: #E8F4FB; + --rods-color-skin-tone-12-tint-02: #2c1f12; + --rods-color-skin-tone-12-tint-01: #402f22; + --rods-color-skin-tone-11-tint-03: #664d3a; + --rods-color-skin-tone-11-tint-02: #7b5e48; + --rods-color-skin-tone-11-tint-01: #926e55; + --rods-color-skin-tone-10-tint-03: #bc8d6e; + --rods-color-skin-tone-10-tint-02: #d29c78; + --rods-color-skin-tone-10-tint-01: #dab28d; + --rods-color-skin-tone-09-tint-03: #eccaad; + --rods-color-skin-tone-09-tint-02: #f8e1ce; + --rods-color-skin-tone-09-tint-01: #feebd8; + --rods-color-skin-tone-08-tint-03: #904d3d; + --rods-color-skin-tone-08-tint-02: #9f5d4b; + --rods-color-skin-tone-08-tint-01: #a96b5f; + --rods-color-skin-tone-07-tint-03: #a96b5f; + --rods-color-skin-tone-07-tint-02: #c98171; + --rods-color-skin-tone-07-tint-01: #d58e7a; + --rods-color-skin-tone-06-tint-03: #d58e7a; + --rods-color-skin-tone-06-tint-02: #e1a493; + --rods-color-skin-tone-06-tint-01: #eabaa5; + --rods-color-skin-tone-05-tint-03: #eabaa5; + --rods-color-skin-tone-05-tint-02: #ecc9b7; + --rods-color-skin-tone-05-tint-01: #fcdfd6; + --rods-color-skin-tone-04-tint-03: #8f642b; + --rods-color-skin-tone-04-tint-02: #a36c38; + --rods-color-skin-tone-04-tint-01: #b27a43; + --rods-color-skin-tone-03-tint-03: #b98152; + --rods-color-skin-tone-03-tint-02: #d39259; + --rods-color-skin-tone-03-tint-01: #dba866; + --rods-color-skin-tone-02-tint-03: #ddb66a; + --rods-color-skin-tone-02-tint-02: #edc77e; + --rods-color-skin-tone-02-tint-01: #f3d39a; + --rods-color-skin-tone-01-tint-03: #f3d39a; + --rods-color-skin-tone-01-tint-02: #ffe0a7; + --rods-color-skin-tone-01-tint-01: #ffe9c0; + --rods-color-notification-accomplishment-outline-color: #acd6b7; + --rods-color-notification-accomplishment-icon-color: #00811f; + --rods-color-notification-accomplishment-background-color: #e6f3e9; + --rods-color-notification-warning-outline-color: #f9e7ac; + --rods-color-notification-warning-icon-color: #a65600; + --rods-color-notification-warning-background-color: #fef8e6; + --rods-color-notification-alert-outline-color: #f7ccc5; + --rods-color-notification-alert-icon-color: #d70d0d; + --rods-color-notification-alert-background-color: #fdf0ee; + --rods-color-notification-neutral-outline-color: #b4dbf1; + --rods-color-notification-neutral-icon-color: #00689e; + --rods-color-notification-neutral-background-color: #e8f4fb; --rods-color-base-black: #000000; /* Base/Black */ --rods-color-base-white: #ffffff; /* Base/White */ --example-button-color: var(--rods-color-base-white);