diff --git a/src/docs/components/docs-main/docs-main.css b/src/docs/components/docs-main/docs-main.css
index 48cbc2d851..3c9cc33369 100644
--- a/src/docs/components/docs-main/docs-main.css
+++ b/src/docs/components/docs-main/docs-main.css
@@ -49,6 +49,7 @@
color: var(--ld-col-rblck-default);
background-color: var(--ld-col-vy2);
border-left: solid var(--ld-sp-6) var(--ld-col-vy3);
+ font: var(--ld-typo-body-m);
code {
background-color: var(--ld-col-vy3);
diff --git a/src/docs/components/docs-switch-dark-light/assets/theme.svg b/src/docs/components/docs-switch-dark-light/assets/theme.svg
deleted file mode 100644
index b2d32d91e9..0000000000
--- a/src/docs/components/docs-switch-dark-light/assets/theme.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-
diff --git a/src/docs/components/docs-web-css-switch/docs-web-css-switch.css b/src/docs/components/docs-switch-web-css/docs-switch-web-css.css
similarity index 54%
rename from src/docs/components/docs-web-css-switch/docs-web-css-switch.css
rename to src/docs/components/docs-switch-web-css/docs-switch-web-css.css
index d67de65459..eb9b8c9770 100644
--- a/src/docs/components/docs-web-css-switch/docs-web-css-switch.css
+++ b/src/docs/components/docs-switch-web-css/docs-switch-web-css.css
@@ -1,84 +1,84 @@
-@define-mixin docs-web-css-switch-ui-light {
- .docs-web-css-switch button {
+@define-mixin docs-switch-web-css-ui-light {
+ .docs-switch-web-css button {
background-color: var(--ld-col-bg-g);
&:focus:focus-visible {
- .docs-web-css-switch__option:not(.docs-web-css-switch__option--active) {
+ .docs-switch-web-css__option:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb5);
}
}
&:active,
&:active:focus-visible {
- .docs-web-css-switch__option:not(.docs-web-css-switch__option--active) {
+ .docs-switch-web-css__option:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb55);
background-color: transparent;
}
}
}
- .docs-web-css-switch__option {
+ .docs-switch-web-css__option {
color: var(--ld-col-rblck4);
- &:hover:not(.docs-web-css-switch__option--active) {
+ &:hover:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb5);
}
}
- .docs-web-css-switch__option--active {
+ .docs-switch-web-css__option--active {
background-color: var(--ld-col-wht);
color: var(--ld-col-rblck-default);
}
}
-@define-mixin docs-web-css-switch-ui-dark {
- .docs-web-css-switch button {
+@define-mixin docs-switch-web-css-ui-dark {
+ .docs-switch-web-css button {
background-color: var(--ld-col-rblck5);
&:focus:focus-visible {
- .docs-web-css-switch__option:not(.docs-web-css-switch__option--active) {
+ .docs-switch-web-css__option:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb3);
background-color: var(--ld-col-rblck-default);
}
}
&:active,
&:active:focus-visible {
- .docs-web-css-switch__option:not(.docs-web-css-switch__option--active) {
+ .docs-switch-web-css__option:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb2);
background-color: var(--ld-col-rblck-default);
}
}
}
- .docs-web-css-switch__option {
+ .docs-switch-web-css__option {
color: var(--ld-col-rblck2);
- &:hover:not(.docs-web-css-switch__option--active) {
+ &:hover:not(.docs-switch-web-css__option--active) {
color: var(--ld-col-rb3);
}
}
- .docs-web-css-switch__option--active {
- background-color: var(--ld-col-rblck2);
+ .docs-switch-web-css__option--active {
+ background-color: var(--ld-col-rblck3);
color: var(--ld-col-rblck-default);
}
}
-@mixin docs-web-css-switch-ui-light;
+@mixin docs-switch-web-css-ui-light;
@media (prefers-color-scheme: dark) {
- @mixin docs-web-css-switch-ui-dark;
+ @mixin docs-switch-web-css-ui-dark;
}
.docs-ui-dark {
- @mixin docs-web-css-switch-ui-dark;
+ @mixin docs-switch-web-css-ui-dark;
}
.docs-ui-light {
- @mixin docs-web-css-switch-ui-light;
+ @mixin docs-switch-web-css-ui-light;
}
-.docs-web-css-switch button {
+.docs-switch-web-css button {
--switch-transition-duration: 0s;
font: var(--ld-typo-body-s);
font-weight: 900;
border-radius: var(--ld-sp-4);
display: flex;
- align-items: center;
+ align-items: stretch;
position: relative;
border: 0;
cursor: pointer;
@@ -86,8 +86,14 @@
overflow: hidden;
}
-.docs-web-css-switch__option {
+.docs-switch-web-css__option {
position: relative;
- padding: var(--ld-sp-4) var(--ld-sp-16) var(--ld-sp-2);
+ padding: var(--ld-sp-8) var(--ld-sp-16);
z-index: 0;
+ line-height: 0;
+}
+
+.docs-switch-web-css__icon {
+ width: 1.5rem;
+ height: 1rem;
}
diff --git a/src/docs/components/docs-switch-web-css/docs-switch-web-css.tsx b/src/docs/components/docs-switch-web-css/docs-switch-web-css.tsx
new file mode 100644
index 0000000000..9e44c77a42
--- /dev/null
+++ b/src/docs/components/docs-switch-web-css/docs-switch-web-css.tsx
@@ -0,0 +1,77 @@
+import '../../../components' // type definitions for type checks and intelliSense
+import {
+ Component,
+ Event,
+ EventEmitter,
+ h,
+ Host,
+ Listen,
+ Prop,
+} from '@stencil/core'
+
+/** @internal **/
+@Component({
+ tag: 'docs-switch-web-css',
+ styleUrl: 'docs-switch-web-css.css',
+ shadow: false,
+})
+export class DocsSwitchWebCss {
+ /** On stands for web component; off stands for CSS component */
+ @Prop({ mutable: true }) isOn = true
+
+ /** Theme select change event. */
+ @Event() switchComponent: EventEmitter
+
+ @Listen('click', { capture: true })
+ handleClick(ev) {
+ ev.preventDefault()
+ this.isOn = !this.isOn
+ this.switchComponent.emit(this.isOn)
+ }
+
+ render() {
+ return (
+
+
+
+ )
+ }
+}
diff --git a/src/docs/components/docs-web-css-switch/docs-web-css-switch.tsx b/src/docs/components/docs-web-css-switch/docs-web-css-switch.tsx
deleted file mode 100644
index e352021db3..0000000000
--- a/src/docs/components/docs-web-css-switch/docs-web-css-switch.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import '../../../components' // type definitions for type checks and intelliSense
-import {
- Component,
- Event,
- EventEmitter,
- h,
- Host,
- Listen,
- Prop,
-} from '@stencil/core'
-
-/** @internal **/
-@Component({
- tag: 'docs-web-css-switch',
- styleUrl: 'docs-web-css-switch.css',
- shadow: false,
-})
-export class DocsWebCssSwitch {
- /** On stands for web component; off stands for CSS component */
- @Prop({ mutable: true }) isOn = true
-
- /** Theme select change event. */
- @Event() switchComponent: EventEmitter
-
- @Listen('click', { capture: true })
- handleClick(ev) {
- ev.preventDefault()
- this.isOn = !this.isOn
- this.switchComponent.emit(this.isOn)
- }
-
- render() {
- return (
-
-
-
- )
- }
-}
diff --git a/src/liquid/components/ld-heading/ld-heading.css b/src/liquid/components/ld-heading/ld-heading.css
index 0a67eefe19..ba68f9797d 100644
--- a/src/liquid/components/ld-heading/ld-heading.css
+++ b/src/liquid/components/ld-heading/ld-heading.css
@@ -86,5 +86,45 @@
.ld-heading--xh4,
.ld-heading--xh5,
.ld-heading--xh6 {
- font-weight: 900;
+ font-weight: 700;
+}
+
+:where(ld-heading[visual-level='b1']),
+:where(ld-heading[visual-level='b2']),
+:where(ld-heading[visual-level='b3']),
+:where(ld-heading[visual-level='b4']),
+:where(ld-heading[visual-level='b5']),
+:where(ld-heading[visual-level='b6']),
+:where(ld-heading[visual-level='xb1']),
+:where(ld-heading[visual-level='xb2']),
+:where(ld-heading[visual-level='xb3']),
+:where(:not(ld-heading) > .ld-heading--b1),
+:where(:not(ld-heading) > .ld-heading--b2),
+:where(:not(ld-heading) > .ld-heading--b3),
+:where(:not(ld-heading) > .ld-heading--b4),
+:where(:not(ld-heading) > .ld-heading--b5),
+:where(:not(ld-heading) > .ld-heading--b6),
+:where(:not(ld-heading) > .ld-heading--xb1),
+:where(:not(ld-heading) > .ld-heading--xb2),
+:where(:not(ld-heading) > .ld-heading--xb3) {
+ color: var(--ld-col-rb-default);
+
+ :where(.ld-theme-ocean) &,
+ :where([class*='ld-theme'] .ld-theme-ocean) & {
+ color: var(--ld-col-rb-default);
+ }
+
+ :where(.ld-theme-solvent) &,
+ :where([class*='ld-theme'] .ld-theme-solvent) &,
+ :where(.ld-theme-bubblegum) &,
+ :where([class*='ld-theme'] .ld-theme-bubblegum) &,
+ :where(.ld-theme-shake) &,
+ :where([class*='ld-theme'] .ld-theme-shake) & {
+ color: var(--ld-col-rp-default);
+ }
+
+ :where(.ld-theme-tea) &,
+ :where([class*='ld-theme'] .ld-theme-tea) & {
+ color: var(--ld-col-rg-default);
+ }
}
diff --git a/src/liquid/components/ld-heading/readme.md b/src/liquid/components/ld-heading/readme.md
index 7d0ab792ce..d2e121e030 100644
--- a/src/liquid/components/ld-heading/readme.md
+++ b/src/liquid/components/ld-heading/readme.md
@@ -9,7 +9,11 @@ permalink: liquid/components/ld-heading/
# Heading
-Headings are used as an introduction into a topic and for visual differentiation between content blocks. Headlines require hierarchies and a placement conform with these.
+Headings are used as an introduction into a topic or a content section and for visual and semantic differentiation between content blocks.
+
+> **Note**: A common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page. Because of this, it is important to not skip one or more heading levels. Doing so may create confusion, as the person navigating this way may be left wondering where the missing heading is.
+>
+> If you really must place headings in a way that they are visually not following a semantic hirarchicy, use the `visual-level` property for visually styling the heading according to the design given, while still applying correct semantical heading levels using the `level` prop.
---
@@ -183,6 +187,52 @@ Almost before we knew it, we had left the ground.
{% endexample %}
+## Heading colors
+
+You may have noticed that all `b*` and `xb*` headings use a color given by the current theme, while all `h*` and `xh*` headings inherit their color. While this is the default behaviour, you can still apply a different color on both types of headings. This may be usefull, if, for instance, you need to display a `b1` heading in "vibrant yellow" on top of a background using a "rich color".
+
+> **Note**: With great power comes great responsibility. Make sure you follow the brand guidelines. Especially make sure that the text remains readable at all times. Check the text for accessibility issues, such as [insufficiant contrast](https://www.w3.org/TR/WCAG21/#contrast-minimum).
+
+Here are some examples on how you can apply different colors on headings:
+
+{% example "html", true %}
+
+
+
+ Almost before we knew it, we had left the ground.
+
+
+
+ Almost before we knew it, we had left the ground.
+
+
+
+ Almost before we knew it, we had left the ground.
+
+
+
+
+
+
+
+ Almost before we knew it, we had left the ground.
+
+
+
+ Almost before we knew it, we had left the ground.
+
+
+
+ Almost before we knew it, we had left the ground.
+
+
+{% endexample %}
@@ -200,7 +250,7 @@ Almost before we knew it, we had left the ground.
### Used by
-- docs-nav
+ - docs-nav
### Graph
```mermaid
diff --git a/src/liquid/components/ld-input-message/ld-input-message.css b/src/liquid/components/ld-input-message/ld-input-message.css
index 68134b10bb..b4b24b6ea7 100644
--- a/src/liquid/components/ld-input-message/ld-input-message.css
+++ b/src/liquid/components/ld-input-message/ld-input-message.css
@@ -1,6 +1,6 @@
.ld-input-message {
- display: inline-flex;
- align-items: flex-start;
+ display: inline-grid;
+ grid-auto-flow: column;
}
.ld-input-message--error {
@@ -8,7 +8,7 @@
}
.ld-input-message__icon {
- transform: translateY(0.2rem);
+ transform: translateY(0.075rem);
+ margin-top: var(--ld-sp-2);
margin-right: var(--ld-sp-6);
- flex-shrink: 0;
}
diff --git a/src/liquid/components/ld-input-message/readme.md b/src/liquid/components/ld-input-message/readme.md
index 3b8b94126f..8eafd90cb6 100644
--- a/src/liquid/components/ld-input-message/readme.md
+++ b/src/liquid/components/ld-input-message/readme.md
@@ -11,29 +11,17 @@ permalink: liquid/components/ld-input-message/
This component is meant to be used in conjunction with the [`ld-input`](/liquid/components/ld-input/) and the [`ld-label`](/liquid/components/ld-label/) component. Please reffer to the [`ld-input`](/liquid/components/ld-input/) docs for further usage examples.
-## Web component
+> **Note**: If you choose to use the CSS component and plan to conditionally show the message, such as when an input field becomes invalid after user interaction, you will need to make sure that screen readers or other assistive technology become aware of a message as soon as it becomes visible. You might want to use [ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) for this matter.
+
+## Examples
### As error message
{% example %}
This field is required.
-{% endexample %}
-
-### As info message
-
-{% example %}
-This field will destroy itself on form submission.
-{% endexample %}
-
-## CSS component
-If you prefer to use a CSS component, import the necessary CSS and implement your markup as follows.
+
-> **Note**: If you choose to use the CSS component and plan to conditionally show the message, such as when an input field becomes invalid after user interaction, you will need to make sure that screen readers or other assistive technology become aware of a message as soon as it becomes visible. You might want to use [ARIA live regions](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) for this matter.
-
-### As error message
-
-{% example %}