@designsystem-se/af 38.0.0 → 38.0.1-beta.1

package/dist/collection/components/_code/code/code.css

@@ -14,7 +14,6 @@ digi-code .digi-code--light {
   * @author ericwbailey
   */
   background: #fefefe;
-  /* Inline code */
 }
 digi-code .digi-code--light code[class*=language-] {
   color: #545454;
@@ -35,6 +34,9 @@ digi-code .digi-code--light code[class*=language-] {
   -ms-hyphens: none;
   hyphens: none;
 }
+digi-code .digi-code--light {
+  /* Inline code */
+}
 digi-code .digi-code--light code[class*=language-] {
   white-space: normal;
   display: block;
@@ -140,7 +142,6 @@ digi-code .digi-code--dark {
   * @author ericwbailey
   */
   background: #272727;
-  /* Inline code */
 }
 digi-code .digi-code--dark code[class*=language-] {
   color: #f8f8f2;
@@ -161,6 +162,9 @@ digi-code .digi-code--dark code[class*=language-] {
   -ms-hyphens: none;
   hyphens: none;
 }
+digi-code .digi-code--dark {
+  /* Inline code */
+}
 digi-code .digi-code--dark code[class*=language-] {
   white-space: normal;
   display: block;

package/dist/collection/components/_code/code-block/code-block.css

@@ -19,8 +19,6 @@ digi-code-block .digi-code-block--light {
   * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
   * @author ericwbailey
   */
-  /* Code blocks */
-  /* Inline code */
 }
 digi-code-block .digi-code-block--light code[class*=language-],
 digi-code-block .digi-code-block--light pre[class*=language-] {
@@ -41,6 +39,9 @@ digi-code-block .digi-code-block--light pre[class*=language-] {
   -ms-hyphens: none;
   hyphens: none;
 }
+digi-code-block .digi-code-block--light {
+  /* Code blocks */
+}
 digi-code-block .digi-code-block--light pre[class*=language-] {
   padding: 1em;
   overflow: auto;
@@ -49,6 +50,9 @@ digi-code-block .digi-code-block--light :not(pre) > code[class*=language-],
 digi-code-block .digi-code-block--light pre[class*=language-] {
   background: #fefefe;
 }
+digi-code-block .digi-code-block--light {
+  /* Inline code */
+}
 digi-code-block .digi-code-block--light :not(pre) > code[class*=language-] {
   padding: 0.1em;
   white-space: normal;
@@ -155,8 +159,6 @@ digi-code-block .digi-code-block--dark {
   * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
   * @author ericwbailey
   */
-  /* Code blocks */
-  /* Inline code */
 }
 digi-code-block .digi-code-block--dark .digi-code-block__button {
   --digi--button--color--text--function--default: var(--digi--color--text--secondary);
@@ -185,6 +187,9 @@ digi-code-block .digi-code-block--dark pre[class*=language-] {
   -ms-hyphens: none;
   hyphens: none;
 }
+digi-code-block .digi-code-block--dark {
+  /* Code blocks */
+}
 digi-code-block .digi-code-block--dark pre[class*=language-] {
   padding: 1em;
   overflow: auto;
@@ -193,6 +198,9 @@ digi-code-block .digi-code-block--dark :not(pre) > code[class*=language-],
 digi-code-block .digi-code-block--dark pre[class*=language-] {
   background: #272727;
 }
+digi-code-block .digi-code-block--dark {
+  /* Inline code */
+}
 digi-code-block .digi-code-block--dark :not(pre) > code[class*=language-] {
   padding: 0.1em;
   white-space: normal;

package/dist/collection/components/_code/code-example/code-example.css

@@ -27,6 +27,12 @@ License: none (public domain)
   background-color: #ffffff;
   background-image: linear-gradient(45deg, #efefef 25%, transparent 25%), linear-gradient(-45deg, #efefef 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #efefef 75%), linear-gradient(-45deg, transparent 75%, #efefef 75%);
 }
+@media (prefers-color-scheme: dark) {
+  .digi-code-example--light {
+    background-color: #787777;
+    background-image: linear-gradient(45deg, #666666 25%, transparent 25%), linear-gradient(-45deg, #666666 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #666666 75%), linear-gradient(-45deg, transparent 75%, #666666 75%);
+  }
+}
 .digi-code-example--dark {
   background-color: #787777;
   background-image: linear-gradient(45deg, #666666 25%, transparent 25%), linear-gradient(-45deg, #666666 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #666666 75%), linear-gradient(-45deg, transparent 75%, #666666 75%);

package/dist/collection/components/_dialog/dialog/dialog.css

@@ -28,27 +28,10 @@ License: none (public domain)
   --digi--dialog--content--width--medium: 42.1875rem;
   --digi--dialog--content--width--large: 56.25rem;
   --digi--dialog--content--color--primary: var(--digi--color--text--primary);
-  --digi--dialog--content--color--background--primary: var(--digi--color--background--primary);
+  --digi--dialog--content--color--background--primary: var(--digi--color--background--primary-elevated);
   --digi--dialog--icon--color--primary: var(--digi--color--icon--primary);
   --digi--dialog--icon--color--primary--hover: var(--digi--color--icon--primary);
 }
-:host .digi-dialog {
-  background: rgba(0, 0, 0, 0.7);
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: var(--digi--dialog--backdrop--position);
-  opacity: var(--digi--dialog--backdrop--opacity);
-  z-index: var(--digi--dialog--backdrop--z--index);
-  left: var(--digi--dialog--backdrop--left);
-  top: var(--digi--dialog--backdrop--top);
-  width: var(--digi--dialog--backdrop--width);
-  height: var(--digi--dialog--backdrop--height);
-  display: var(--digi--dialog--backdrop--display);
-  justify-content: var(--digi--dialog--backdrop--justify--content);
-  align-items: var(--digi--dialog--backdrop--align--items);
-  padding: var(--digi--padding--medium);
-  box-sizing: border-box;
-}
 :host .digi-dialog--primary {
   --DIGI--DIALOG--COLOR--BACKGROUND: var(
     --digi--dialog--content--color--background--primary
@@ -79,6 +62,23 @@ License: none (public domain)
 :host .digi-dialog--large {
   --DIGI--DIALOG--CONTENT--WIDTH: var(--digi--dialog--content--width--large);
 }
+:host .digi-dialog {
+  background: rgba(0, 0, 0, 0.7);
+  overflow-x: hidden;
+  overflow-y: auto;
+  position: var(--digi--dialog--backdrop--position);
+  opacity: var(--digi--dialog--backdrop--opacity);
+  z-index: var(--digi--dialog--backdrop--z--index);
+  left: var(--digi--dialog--backdrop--left);
+  top: var(--digi--dialog--backdrop--top);
+  width: var(--digi--dialog--backdrop--width);
+  height: var(--digi--dialog--backdrop--height);
+  display: var(--digi--dialog--backdrop--display);
+  justify-content: var(--digi--dialog--backdrop--justify--content);
+  align-items: var(--digi--dialog--backdrop--align--items);
+  padding: var(--digi--padding--medium);
+  box-sizing: border-box;
+}
 :host .digi-dialog__keydown-handler {
   width: 100%;
   max-height: 100%;

package/dist/collection/components/_expandable/expandable-faq-item/expandable-faq-item.css

@@ -4,8 +4,8 @@ License: none (public domain)
 */
 :host {
   --digi--expandable-faq-item--header--background-color--primary: var(--digi--color--background--pop-out);
-  --digi--expandable-faq-item--header--background-color--secondary: var(--digi--color--background--secondary);
-  --digi--expandable-faq-item--header--background-color--tertiary: var(--digi--color--background--primary);
+  --digi--expandable-faq-item--header--background-color--secondary: var(--digi--color--background--secondary-elevated);
+  --digi--expandable-faq-item--header--background-color--tertiary: var(--digi--color--background--primary-elevated);
   --digi--expandable-faq-item--header--toggle-icon--transition: ease-in-out var(--digi--animation--duration--base) all;
   --digi--expandable-faq-item--content--transition: ease-in-out var(--digi--animation--duration--base) height;
   --digi--expandable-faq-item--icon--size: 0.875rem;
@@ -17,10 +17,6 @@ License: none (public domain)
   --digi--expandable-faq-item--content--padding: var(--digi--gutter--largest-2);
   display: block;
 }
-:host .digi-expandable-faq-item {
-  margin-bottom: var(--digi--global--spacing--smallest-4);
-  font-family: var(--digi--global--typography--font-family--default);
-}
 :host .digi-expandable-faq-item--primary {
   --BACKGROUND: var(--digi--expandable-faq-item--header--background-color--primary);
 }
@@ -30,6 +26,10 @@ License: none (public domain)
 :host .digi-expandable-faq-item--tertiary {
   --BACKGROUND: var(--digi--expandable-faq-item--header--background-color--tertiary);
 }
+:host .digi-expandable-faq-item {
+  margin-bottom: var(--digi--global--spacing--smallest-4);
+  font-family: var(--digi--global--typography--font-family--default);
+}
 :host .digi-expandable-faq-item--expanded {
   border-bottom-color: var(--BACKGROUND);
 }