@designsystem-se/af 34.0.3 → 34.0.4-beta.0

package/dist/collection/components/_chart/bar-chart/bar-chart.js

@@ -7,7 +7,7 @@ import { BarChartVariation } from "./bar-chart-variation.enum";
 /**
  *
  * @enums Orientation - BarChartVariation.enum.ts
- *
+ * @noTokens - Komponentens färger sätts direkt som i graferna. Behöver skrivas om för att kunna hantera olika brands och teman.
  * @swedishName Stapeldiagram
  */
 export class barChart {
@@ -521,7 +521,9 @@ export class barChart {
                             adjustment = Math.ceil((newSize - mSize) / (size / d.length));
                         }
                         // Slicing the text up, saving atleast 3 characters
-                        return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
+                        return (d
+                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
+                            .trim() + '...');
                     }));
                 }
                 else {
@@ -542,13 +544,17 @@ export class barChart {
                         const mSize = this._margin.left;
                         if (size < mSize)
                             return d;
-                        const newSize = this.getTextSize(d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3)).trim() + '...');
+                        const newSize = this.getTextSize(d
+                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length), 3))
+                            .trim() + '...');
                         let adjustment = 0;
                         if (newSize > mSize) {
                             adjustment = Math.ceil((newSize - mSize) / (size / d.length));
                         }
                         // Slicing the text up, saving atleast 3 characters
-                        return (d.slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3)).trim() + '...');
+                        return (d
+                            .slice(0, Math.max(Math.floor((mSize / (size + this._ellipsisSize)) * d.length) - adjustment, 3))
+                            .trim() + '...');
                     }));
                 }
             }
@@ -1399,7 +1405,7 @@ export class barChart {
                 heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}
 				<span style="display:block;margin-top:0.25rem;font-size:0.875rem;color:var(--digi--global--color--neutral--grayscale--darkest-3)">${this._chartData.infoText}</span></p>`;
         }
-        return (h(Host, { key: '1e65613b383c823e2612b4e3b66c2aab2b6a63ee', ref: (el) => (this._host = el) }, h("div", { key: '0722c740fe78699676bb98247d5aa9b8a2ac6ec4', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '7e318220350058798accc80bcac29764e460c854', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '37799980afd2cf93d1c924220b34a018c03d943b', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '0018a24d271ff038b42623f01b42d781538eeca1', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'b52b57a35abd23e47f97ad8aadaf74847d77092c', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'd644be20ea9cb15fbd8cf3308e452b9e993da833', slot: "icon" }), "Visa diagram"), h("div", { key: '8e396c518fdcf565d8295f67f9ee22b88c1aad94', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '6b95d5b67649fe88aee0fccd276d726a63490c41', class: "chartTooltip", id: this.afId }, h("div", { key: 'c1ee45d3d3e2949da0edb7f5ae7f5d824fec7149', class: "tooltipBody" }), h("digi-icon-x", { key: '34cb0be40388ae734b974201975e7ca347c34866', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: 'af236d72c75cf21e1549151c2ad8244d3ec64f8e', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '09ffd8c2a0278de23ec262ca110c629b9e6e3d01', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '510d6eb3e641d7ba0f763426a5d1bd055f1ae68f', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h(Host, { key: '5879e87081aa80539870541074d08ac119bcc77f', ref: (el) => (this._host = el) }, h("div", { key: '74b14d34ede4e626eb7a7953d18c3d9f225f913c', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '92c2e081227060d1bd681446c47143108390c6a7', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'a7133289b9dea09e72b47c84645a4dc56904e26b', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '1d049ce1bcc9db8d78563e07dd983855b13f17cf', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'ba9c8d4035edd6865282953ebde3528eb5d10164', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'ee8cded71fb58dd438d0119218e22596257cb405', slot: "icon" }), "Visa diagram"), h("div", { key: '746f612b9a214ade146c01ac97a0c51daad73728', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '9c50a2a36edce63cdb72583dd57513f49128c11b', class: "chartTooltip", id: this.afId }, h("div", { key: '859cbda42e8a911aa4351efb1e474c9dc2b959fd', class: "tooltipBody" }), h("digi-icon-x", { key: '7e94519bd3aafb4cba8bca706a5d1271754a29f9', class: "close" }), this.afVariation === BarChartVariation.Horizontal ? (h("digi-icon-caret-up", null)) : (h("digi-icon-caret-down", null))), h("div", { key: 'd1cf8d31e660d66c0fea1b95d61bb5df6d608700', ref: (el) => (this._chartDiv = el) }, " "), h("div", { key: '40fbb5c923151cff345b7e4f0ce5da53692f0ac5', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'b2c8b62df6076fae0f51a7e8695b14a6009349be', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-bar-chart"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_chart/chart-line/chart-line.js

@@ -6,7 +6,7 @@ import { randomIdGenerator } from "../../../global/utils/randomIdGenerator";
 /**
  *
  * @enums myEnum - chart-line-myEnum.enum.ts
- *
+ * @noTokens - Komponentens färger sätts direkt som i graferna. Behöver skrivas om för att kunna hantera olika brands och teman.
  * @swedishName Linjediagram
  */
 export class ChartLine {
@@ -1480,7 +1480,7 @@ export class ChartLine {
             .attr('font-family', 'sans-serif')
             .text((d) => d)
             .each((...[, i, nodelist]) => {
-            const thisWidth = nodelist[i].getComputedTextLength() + 5; // A little extra padding, text sizes seems to be a little small compared to real life 
+            const thisWidth = nodelist[i].getComputedTextLength() + 5; // A little extra padding, text sizes seems to be a little small compared to real life
             textWidth.push(thisWidth);
             nodelist[i].remove();
         });
@@ -1618,7 +1618,7 @@ export class ChartLine {
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
         else
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (h("host", { key: '23524b77e8aa2bb1cae912a08c4f35791074a769', ref: (el) => (this._host = el) }, h("div", { key: '75c7c1a8be55953b5547c5a3dd956027af73fbd1', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '76e755f765d16611ecf82c2980f660f28cb0239a', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '6665f4a0c7f9ea09b938bd690f1ad2f2838f0c9c', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '05aee665d9cd4d743c37cda816a3f5a3fe3128f5', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '9f42b7ac02cb3f45d5d2503a9e12836bd76ce862', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '43e9db95020bf3d24c68a24b269a179d70d8d056', slot: "icon" }), "Visa diagram"), h("div", { key: 'fc14ac6bf87466a5655dc5416bac08d0627a41ef', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'd65b4ea0b2a3a0abdc7a94e1cfb82e425ba50d2e', class: "chartTooltip", id: this.afId }, h("div", { key: '0ecff411dd746d6f21b53ae0d39729a55bedd957', class: "tooltipBody" }), h("digi-icon-x", { key: '9dd0ba013b81972e3e74b2e068b808f443ba7bf4', class: "close" }), ' '), h("div", { key: '371ba97658cd0e4f3a251bff860c45a43e9da9f1', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'b4f5e4c1bc605f857910ec423f9de0285ac27e88', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '6bcc5645b85e62d321a2c37cd365b2d36b577b9a', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h("host", { key: 'bb95aa70c93f5d1e2e524e6414879c02eec43947', ref: (el) => (this._host = el) }, h("div", { key: '3286710197aa1dd967332a5961af7ba69a750cae', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: 'dbc8f2c40deeb963746c65478b214cce08078627', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: '4db6a9f9bbdeedb34f63ec9e98a9212bf77c1bec', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '310137b419dae6874974884db9cc1cee5cbbbad5', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'f27fdcacbf9693c7aa228ba832b881d05e175fa6', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: 'd231a261465eb96b1cddc8b3f97505080d8112f4', slot: "icon" }), "Visa diagram"), h("div", { key: '860b943067b2e6c4341bfdf25746f198263644eb', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '89ae625078d9274a4d13b45ea0a0fb8b71ef26cc', class: "chartTooltip", id: this.afId }, h("div", { key: 'a96ce8d513946ed577ab47afc3b336115f452258', class: "tooltipBody" }), h("digi-icon-x", { key: '1b8f64ec5ca813c6fe1b209141bdd924f60afeac', class: "close" }), ' '), h("div", { key: '02654b450a17e5ba38672792fc1b2f75365d0829', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: '8df441510e274b96896bfdfa56e2c3c19d79530d', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: '916f7854cd0da5b0a766392244fffa736f46f435', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-chart-line"; }
     static get encapsulation() { return "scoped"; }

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

@@ -1,12 +1,9 @@
-/** Do not touch! Autogenerated 
-* @prop --digi--code--background: var(--digi--color--background--primary);
-*/
 digi-code {
   --digi--code--background: var(--digi--color--background--primary);
 }
 digi-code .digi-code {
   border-radius: 0.3em;
-  border: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-2);
+  border: var(--digi--border-width--primary) solid var(--digi--color--divider--primary);
   padding: 0 0.5em;
   display: inline-block;
 }
@@ -140,8 +137,7 @@ digi-code .digi-code--dark {
   * Based on the okaidia theme: https://github.com/PrismJS/prism/blob/gh-pages/themes/prism-okaidia.css
   * @author ericwbailey
   */
-  --digi--color--background--inverted-3: #272727;
-  background: var(--digi--color--background--inverted-3);
+  background: #272727;
   /* Inline code */
 }
 digi-code .digi-code--dark code[class*=language-] {

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

@@ -36,7 +36,7 @@ export class Code {
         };
     }
     render() {
-        return (h("span", { key: 'adc9ee7207dd03a4e7952c1f2b63261fae7f5ad3', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: 'f65be5008fa9005ccf58779fce6786ecbb31b688', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
+        return (h("span", { key: '2e9027f187b124931f1c814306efcca343981891', class: Object.assign({ 'digi-code': true }, this.cssModifiers) }, h("code", { key: '34a121ba9adbb192f769cc362dcf6498f94c97f3', class: `digi-code__code language-${this.afLanguage}`, lang: this.afLang, innerHTML: this.highlightedCode })));
     }
     static get is() { return "digi-code"; }
     static get originalStyleUrls() {

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

@@ -1,12 +1,7 @@
-/** Do not touch! Autogenerated 
-* @prop --digi--code-block--background: var(--digi--color--background--primary);
-* @prop --digi--code-block--border-radius: 0.3rem;
-* @prop --digi--code-block--border: 1px solid var(--digi--color--border--neutral-3);
-*/
 digi-code-block {
   --digi--code-block--background: var(--digi--color--background--primary);
   --digi--code-block--border-radius: 0.3rem;
-  --digi--code-block--border: 1px solid var(--digi--color--border--neutral-3);
+  --digi--code-block--border: 1px solid var(--digi--grayscale--900);
   display: block;
 }
 digi-code-block .digi-code-block {
@@ -164,24 +159,12 @@ digi-code-block .digi-code-block--dark {
   /* Inline code */
 }
 digi-code-block .digi-code-block--dark .digi-code-block__button {
-  --digi--button--color--text--function--default: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--text--function--hover: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--icon--function--default: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--icon--function--hover: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--text--function--focus: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--icon--function--focus: var(
-    --digi--color--text--inverted
-  );
+  --digi--button--color--text--function--default: var(--digi--color--text--secondary);
+  --digi--button--color--text--function--hover: var(--digi--color--text--secondary);
+  --digi--button--color--icon--function--default: var(--digi--color--text--secondary);
+  --digi--button--color--icon--function--hover: var(--digi--color--text--secondary);
+  --digi--button--color--text--function--focus: var(--digi--color--text--secondary);
+  --digi--button--color--icon--function--focus: var(--digi--color--text--secondary);
 }
 digi-code-block .digi-code-block--dark code[class*=language-],
 digi-code-block .digi-code-block--dark pre[class*=language-] {
@@ -208,8 +191,7 @@ digi-code-block .digi-code-block--dark pre[class*=language-] {
 }
 digi-code-block .digi-code-block--dark :not(pre) > code[class*=language-],
 digi-code-block .digi-code-block--dark pre[class*=language-] {
-  --digi--color--background--inverted-3: #272727;
-  background: var(--digi--color--background--inverted-3);
+  background: #272727;
 }
 digi-code-block .digi-code-block--dark :not(pre) > code[class*=language-] {
   padding: 0.1em;

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

@@ -46,7 +46,7 @@ export class CodeBlock {
         };
     }
     render() {
-        return (h("div", { key: '385c9c75770f6b60ff9c5c27779ed9e11ad62d51', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, h("pre", { key: 'a8c0219048cc68bf85369c4c33b31dd335d1e8a4', class: `digi-code-block__pre language-${this.afLanguage}` }, h("code", { key: '18777a1701ee21ad028641bcf91e1109599eb584', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (h("div", { key: 'dc7fa59933a94e8fb3b54d286a031fc493398450', class: "digi-code-block__toolbar" }, h("digi-button", { key: 'b2ea60085745ca58f249108ae12d7d4d80ba460c', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: ButtonVariation.FUNCTION, afSize: ButtonSize.SMALL }, h("digi-icon-copy", { key: 'd38cd2ff9c688fe582d903c33f2bf9f183047658', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
+        return (h("div", { key: '3cd32aabd7999c0f3ee40034cd74152f2bcfde3a', class: Object.assign({ 'digi-code-block': true }, this.cssModifiers) }, h("pre", { key: 'aff3b261386fd0d68c07d6a7bbbe05e3f7823d76', class: `digi-code-block__pre language-${this.afLanguage}` }, h("code", { key: 'c7d5be543f6be054ce63574a583de877767ac34d', class: "digi-code-block__code", lang: this.afLang, innerHTML: this.highlightedCode })), !this.afHideToolbar && (h("div", { key: 'f811cd7878a9ee935e8146026339df740ec23ce6', class: "digi-code-block__toolbar" }, h("digi-button", { key: '61e37d7ad9cc568def749b10d382e8f2939d5858', class: "digi-code-block__button", onAfOnClick: () => this.copyButtonClickHandler(), afVariation: ButtonVariation.FUNCTION, afSize: ButtonSize.SMALL }, h("digi-icon-copy", { key: '0804d86709d6de68de046b43e5ea1ecea011832a', class: "digi-code-block__icon", "aria-hidden": "true", slot: "icon" }), _t.code.copy)))));
     }
     static get is() { return "digi-code-block"; }
     static get originalStyleUrls() {

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

@@ -2,268 +2,6 @@
 v2.0 | 20110126
 License: none (public domain)
 */
-.digi--util--fs--xs {
-  font-size: var(--digi--global--typography--font-size--small) !important;
-}
-
-.digi--util--fs--s {
-  font-size: calc(var(--digi--global--typography--font-size--small) + 1px) !important;
-}
-
-.digi--util--fs--m {
-  font-size: var(--digi--global--typography--font-size--base) !important;
-}
-
-.digi--util--fs--l {
-  font-size: var(--digi--global--typography--font-size--large) !important;
-}
-
-.digi--util--fw--sb {
-  font-weight: var(--digi--global--typography--font-weight--semibold) !important;
-}
-
-.digi--util--pt--1 {
-  padding-top: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--pt--10 {
-  padding-top: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--pt--20 {
-  padding-top: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--pt--30 {
-  padding-top: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--pt--40 {
-  padding-top: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--pt--50 {
-  padding-top: 2.5rem !important;
-}
-
-.digi--util--pt--60 {
-  padding-top: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--pt--70 {
-  padding-top: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--pt--80 {
-  padding-top: 4.5rem !important;
-}
-
-.digi--util--pt--90 {
-  padding-top: 5rem !important;
-}
-
-.digi--util--pb--1 {
-  padding-bottom: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--pb--10 {
-  padding-bottom: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--pb--20 {
-  padding-bottom: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--pb--30 {
-  padding-bottom: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--pb--40 {
-  padding-bottom: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--pb--50 {
-  padding-bottom: 2.5rem !important;
-}
-
-.digi--util--pb--60 {
-  padding-bottom: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--pb--70 {
-  padding-bottom: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--pb--80 {
-  padding-bottom: 4.5rem !important;
-}
-
-.digi--util--pb--90 {
-  padding-bottom: 5rem !important;
-}
-
-.digi--util--p--1 {
-  padding: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--p--10 {
-  padding: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--p--20 {
-  padding: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--p--30 {
-  padding: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--p--40 {
-  padding: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--p--50 {
-  padding: 2.5rem !important;
-}
-
-.digi--util--p--60 {
-  padding: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--p--70 {
-  padding: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--p--80 {
-  padding: 4.5rem !important;
-}
-
-.digi--util--p--90 {
-  padding: 5rem !important;
-}
-
-.digi--util--ptb--1 {
-  padding-top: var(--digi--global--spacing--smallest-2) !important;
-  padding-bottom: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--ptb--10 {
-  padding-top: var(--digi--global--spacing--smallest) !important;
-  padding-bottom: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--ptb--20 {
-  padding-top: var(--digi--global--spacing--base) !important;
-  padding-bottom: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--ptb--30 {
-  padding-top: var(--digi--global--spacing--largest-2) !important;
-  padding-bottom: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--ptb--40 {
-  padding-top: var(--digi--global--spacing--largest-4) !important;
-  padding-bottom: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--ptb--50 {
-  padding-top: 2.5rem !important;
-  padding-bottom: 2.5rem !important;
-}
-
-.digi--util--ptb--60 {
-  padding-top: var(--digi--global--spacing--largest-5) !important;
-  padding-bottom: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--ptb--70 {
-  padding-top: var(--digi--global--spacing--largest-6) !important;
-  padding-bottom: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--ptb--80 {
-  padding-top: 4.5rem !important;
-  padding-bottom: 4.5rem !important;
-}
-
-.digi--util--ptb--90 {
-  padding-top: 5rem !important;
-  padding-bottom: 5rem !important;
-}
-
-.digi--util--plr--1 {
-  padding-left: var(--digi--global--spacing--smallest-2) !important;
-  padding-right: var(--digi--global--spacing--smallest-2) !important;
-}
-
-.digi--util--plr--10 {
-  padding-left: var(--digi--global--spacing--smallest) !important;
-  padding-right: var(--digi--global--spacing--smallest) !important;
-}
-
-.digi--util--plr--20 {
-  padding-left: var(--digi--global--spacing--base) !important;
-  padding-right: var(--digi--global--spacing--base) !important;
-}
-
-.digi--util--plr--30 {
-  padding-left: var(--digi--global--spacing--largest-2) !important;
-  padding-right: var(--digi--global--spacing--largest-2) !important;
-}
-
-.digi--util--plr--40 {
-  padding-left: var(--digi--global--spacing--largest-4) !important;
-  padding-right: var(--digi--global--spacing--largest-4) !important;
-}
-
-.digi--util--plr--50 {
-  padding-left: 2.5rem !important;
-  padding-right: 2.5rem !important;
-}
-
-.digi--util--plr--60 {
-  padding-left: var(--digi--global--spacing--largest-5) !important;
-  padding-right: var(--digi--global--spacing--largest-5) !important;
-}
-
-.digi--util--plr--70 {
-  padding-left: var(--digi--global--spacing--largest-6) !important;
-  padding-right: var(--digi--global--spacing--largest-6) !important;
-}
-
-.digi--util--plr--80 {
-  padding-left: 4.5rem !important;
-  padding-right: 4.5rem !important;
-}
-
-.digi--util--plr--90 {
-  padding-left: 5rem !important;
-  padding-right: 5rem !important;
-}
-
-.digi--util--sr-only {
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  -webkit-clip-path: inset(50%);
-  clip-path: inset(50%);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-  white-space: nowrap;
-}
-
-.digi--util--hidden {
-  display: none;
-}
-
-/** Do not touch! Autogenerated 
-* @prop --digi--code-example--background: var(--digi--color--background--primary);
-* @prop --digi--code-example--controls--width: 16.25rem;
-*/
 :host {
   --digi--code-example--background: var(--digi--color--background--primary);
   --digi--code-example--controls--width: 16.25rem;
@@ -273,7 +11,7 @@ License: none (public domain)
 .digi-code-example {
   background-size: 20px 20px;
   background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
-  border: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-2);
+  border: var(--digi--border-width--primary) solid var(--digi--color--divider--primary--light);
   height: 100%;
   display: flex;
   flex-direction: row;
@@ -313,18 +51,10 @@ License: none (public domain)
   right: 0;
 }
 .digi-code-example--no-controls .digi-code-example__copy-button--dark {
-  --digi--button--color--text--function--default: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--text--function--hover: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--icon--function--default: var(
-    --digi--color--text--inverted
-  );
-  --digi--button--color--icon--function--hover: var(
-    --digi--color--text--inverted
-  );
+  --digi--button--color--text--function--default: var(--digi--color--text--secondary);
+  --digi--button--color--text--function--hover: var(--digi--color--text--secondary);
+  --digi--button--color--icon--function--default: var(--digi--color--text--secondary);
+  --digi--button--color--icon--function--hover: var(--digi--color--text--secondary);
 }
 .digi-code-example__example {
   padding: var(--digi--padding--largest-2);
@@ -351,7 +81,7 @@ License: none (public domain)
 }
 .digi-code-example__controls {
   padding: var(--digi--padding--medium);
-  background: var(--digi--color--background--neutral-6);
+  background: var(--digi--color--background--secondary);
   display: flex;
   flex: 0 var(--digi--code-example--controls--width);
   flex-direction: column;
@@ -387,14 +117,14 @@ License: none (public domain)
   width: 100%;
   padding: 0.875rem 0;
   background: #272727;
-  color: var(--digi--color--text--inverted);
+  color: var(--digi--color--text--secondary);
   font-size: var(--digi--typography--body--font-size--desktop);
   font-family: var(--digi--global--typography--font-family--default);
   cursor: pointer;
   border: none;
 }
 .digi-code-example__code-expand:hover {
-  background: var(--digi--color--background--inverted-3);
+  background: var(--digi--grayscale--900);
   text-decoration: underline;
 }
 .digi-code-example__code-expand:focus-visible {
@@ -414,7 +144,7 @@ License: none (public domain)
 }
 
 .digi-code-example__code-expand-icon {
-  --digi--icon--color: var(--digi--color--text--inverted);
+  --digi--icon--color: var(--digi--color--text--secondary);
   transition: ease-in-out var(--digi--animation--duration--base) all;
 }
 .digi-code-example__code-expand-icon--open {
@@ -432,7 +162,7 @@ License: none (public domain)
 }
 .digi-code-example__fade--dark {
   --digi--color--background--inverted-3: #272727;
-  background-image: linear-gradient(0deg, var(--digi--color--background--inverted-3), transparent);
+  background-image: linear-gradient(0deg, var(--digi--grayscale--900), transparent);
 }
 
 .slot__controls {
@@ -454,7 +184,7 @@ License: none (public domain)
 ::slotted(* .slot__controls digi-form-fieldset + digi-form-checkbox),
 ::slotted(* .slot__controls .divider) {
   display: block;
-  border-bottom: 1px solid var(--digi--color--border--neutral-2);
+  border-bottom: 1px solid var(--digi--color--divider--primary--light);
   padding-bottom: var(--digi--padding--smaller);
   margin-bottom: var(--digi--padding--medium);
 }

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

@@ -137,17 +137,17 @@ export class CodeExample {
             .replace(/\w/, (firstLetter) => firstLetter.toUpperCase());
     }
     render() {
-        return (h("div", { key: '1fc09f95af1e8f599b593ddad279743574ded843', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: '696edf1c732923293a2406393207eecd921b17de', class: {
+        return (h("div", { key: 'c5b4581ebea18e91b89b27aa039836936f4d45fd', class: Object.assign({ 'digi-code-example': true }, this.cssModifiers), ref: (el) => (this.containerElement = el) }, h("div", { key: '5b139f3c15eeb218a29620318ab419c1967b76c2', class: {
                 'digi-code-example__container': true
-            } }, h("div", { key: '9cc7fa9e045bbeda26fa4b8d9f96efebc24da263', class: "digi-code-example__example" }, h("slot", { key: '01a468003e94818b1459b62b90a83a8304acaaa8' })), !this.afHideCode && (h("div", { key: '565f2d91029c63a867e3f80c12c736e5b03deec9', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: '3cea8c377900e8244bc164318875b3e2b8c0b1a3', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: '1b2260b6ba50e105d1cf7cfbd77b6506904ad138', class: {
+            } }, h("div", { key: '5302625085fd4208bb3a3324a1bf61bd4800e9bd', class: "digi-code-example__example" }, h("slot", { key: 'e53bc8ffdb4172dbb66a166a8a339eac2abc910d' })), !this.afHideCode && (h("div", { key: 'f44bace61d4cd7eb793a5283d96b8a9e6eb01899', class: "digi-code-example__code" }, this.showMoreButton && (h("button", { key: '09cb145fda762f16c86bbd1266ad667c6533fb66', class: "digi-code-example__code-expand", "aria-label": this.isActive ? _t.code.show_less : _t.code.show_more, "aria-expanded": this.isActive ? `true` : `false`, onClick: () => this.toggleButtonClickHandler() }, this.isActive ? _t.code.show_less : _t.code.show_more, ' ', h("digi-icon-chevron-down", { key: '7d2030bc24696e4cc29f40466c7438d778ec828d', class: {
                 'digi-code-example__code-expand-icon': true,
                 'digi-code-example__code-expand-icon--open': this.isActive
-            }, "aria-hidden": "true" }))), h("div", { key: '5d3fc7f0415d1c7bf698d7275d3d04ca0f5fd4c5', class: {
+            }, "aria-hidden": "true" }))), h("div", { key: 'eace137c7674c62f198244e54405cd07b1500057', class: {
                 'digi-code-example__codeblock': true,
                 'digi-code-example__codeblock--light': this.afCodeBlockVariation === 'light',
                 'digi-code-example__codeblock--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__codeblock--fade': !this.isActive && this.showMoreButton
-            } }, h("digi-code-block", { key: 'c1caedb22bf5d4ebe05cb060e1500b9c25bb0865', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
+            } }, h("digi-code-block", { key: '9b99c7a76331ad8a0923c408e647a250d7160298', afCode: this.codeExample || '', afLanguage: this.afLanguage.toLowerCase(), afVariation: this.afCodeBlockVariation, "af-hide-toolbar": true }), !this.isActive ? (h("div", { class: {
                 'digi-code-example__fade': true,
                 'digi-code-example__fade--dark': this.afCodeBlockVariation === 'dark',
                 'digi-code-example__fade--light': this.afCodeBlockVariation === 'light'