ixbrl-viewer 1.4.38__py3-none-any.whl → 1.4.40__py3-none-any.whl

iXBRLViewerPlugin/viewer/src/js/report.test.js

@@ -2,6 +2,7 @@
 
 import { ReportSet } from "./reportset.js";
 import { ViewerOptions } from "./viewerOptions.js";
+import { TestInspector } from "./test-utils.js";
 import { NAMESPACE_ISO4217 } from "./util";
 
 var testReportData = {
@@ -17,7 +18,11 @@ var testReportData = {
         "role1": "https://www.example.com/role1",
         "role2": "https://www.example.com/role2",
         "role3": "https://www.example.com/role3",
-        "role4": "https://www.example.com/role4"
+        "role4": "https://www.example.com/role4MoreWords",
+        "std": "http://www.xbrl.org/2003/role/label",
+        "doc": "http://www.xbrl.org/2003/role/documentation",
+        "verbose": "http://www.xbrl.org/2003/role/verboseLabel",
+        "total": "http://www.xbrl.org/2003/role/totalLabel",
     },
     "roleDefs": {
         "role1": { "en": "Role 1 Label" },
@@ -67,6 +72,10 @@ var testReportData = {
     "softwareCredits": ["Example credit text A", "Example credit text B"],
 };
 
+var insp = new TestInspector();
+beforeAll(() => {
+    return insp.i18nInit();
+});
 
 describe("Language options", () => {
     const testReportSet = new ReportSet(testReportData);
@@ -103,23 +112,33 @@ describe("Concept labels", () => {
     test("Label fallback", () => {
         vo.language = 'fr';
         expect(testReport.getLabel('eg:Concept3', 'std')).toBe("Concept trois");
+        expect(testReport.getLabelAndLang('eg:Concept3', 'std').label).toBe("Concept trois");
+        expect(testReport.getLabelAndLang('eg:Concept3', 'std').lang).toBe("fr");
         expect(testReport.getLabelOrName('eg:Concept3', 'std')).toBe("Concept trois");
         vo.language = 'es';
         expect(testReport.getLabel('eg:Concept3', 'std')).toBe("Concept cuatro");
+        expect(testReport.getLabelAndLang('eg:Concept3', 'std').label).toBe("Concept cuatro");
+        expect(testReport.getLabelAndLang('eg:Concept3', 'std').lang).toBe("es");
         expect(testReport.getLabelOrName('eg:Concept3', 'std')).toBe("Concept cuatro");
         // No English label, so fall back on German (de is first alphabetically)
         vo.language = 'en';
         expect(testReport.getLabel('eg:Concept3', 'std')).toBe("Concept vier");
+        expect(testReport.getLabelAndLang('eg:Concept3', 'std').label).toBe("Concept vier");
+        expect(testReport.getLabelAndLang('eg:Concept3', 'std').lang).toBe("de");
         expect(testReport.getLabelOrName('eg:Concept3', 'std')).toBe("Concept vier");
 
         // Attempt to get an undefined label type 
         expect(testReport.getLabel('eg:Concept3', 'doc')).toBeUndefined();
+        expect(testReport.getLabelAndLang('eg:Concept3', 'doc').label).toBeUndefined();
+        expect(testReport.getLabelAndLang('eg:Concept3', 'doc').lang).toBeUndefined();
         expect(testReport.getLabelOrName('eg:Concept3', 'doc')).toBe('eg:Concept3');
     });
 
     test("With prefix", () => {
         vo.language = 'fr';
         expect(testReport.getLabel('eg:Concept3', 'std', true)).toBe("(eg) Concept trois");
+        expect(testReport.getLabelAndLang('eg:Concept3', 'std', true).label).toBe("(eg) Concept trois");
+        expect(testReport.getLabelAndLang('eg:Concept3', 'std', true).lang).toBe("fr");
         expect(testReport.getLabelOrName('eg:Concept3', 'std', true)).toBe("(eg) Concept trois");
 
         expect(testReport.getLabel('eg:Concept3', 'doc', true)).toBeUndefined();
@@ -133,16 +152,43 @@ describe("ELR labels", () => {
     testReportSet._initialize();
     const testReport = testReportSet.reports[0];
     test("Present", () => {
-        expect(testReport.getRoleLabel("role1")).toBe("Role 1 Label");
+        expect(testReport.getRoleLabelOrURI("role1")).toBe("Role 1 Label");
+    });
+    test("Null", () => {
+        expect(testReport.getRoleLabelOrURI("role2")).toBe("https://www.example.com/role2");
+    });
+    test("No label", () => {
+        expect(testReport.getRoleLabelOrURI("role3")).toBe("https://www.example.com/role3");
+    });
+    test("Not present in roleDef", () => {
+        expect(testReport.getRoleLabelOrURI("role4")).toBe("https://www.example.com/role4MoreWords");
+    });
+});
+
+describe("Label role labels", () => {
+    const testReportSet = new ReportSet(testReportData);
+    testReportSet._initialize();
+    const testReport = testReportSet.reports[0];
+    test("Built-in (via i18n)", () => {
+        expect(testReport.getLabelRoleLabel("std")).toBe("Standard Label");
+    });
+    test("Built-in (via i18n)", () => {
+        expect(testReport.getLabelRoleLabel("doc")).toBe("Documentation Label");
+    });
+    test("Built-in (via de-camelcase)", () => {
+        expect(testReport.getLabelRoleLabel("verbose")).toBe("Verbose Label");
+    });
+    test("Present", () => {
+        expect(testReport.getLabelRoleLabel("role1")).toBe("Role 1 Label");
     });
     test("Null", () => {
-        expect(testReport.getRoleLabel("role2")).toBe("https://www.example.com/role2");
+        expect(testReport.getLabelRoleLabel("role2")).toBe("Role2");
     });
     test("No label", () => {
-        expect(testReport.getRoleLabel("role3")).toBe("https://www.example.com/role3");
+        expect(testReport.getLabelRoleLabel("role3")).toBe("Role3");
     });
     test("Not present in roleDef", () => {
-        expect(testReport.getRoleLabel("role4")).toBe("https://www.example.com/role4");
+        expect(testReport.getLabelRoleLabel("role4")).toBe("Role4 More Words");
     });
 
 });

iXBRLViewerPlugin/viewer/src/js/reportset.js

@@ -7,6 +7,7 @@ import { Unit } from "./unit";
 import { titleCase, viewerUniqueId } from "./util.js";
 import { QName } from "./qname.js";
 import { ViewerOptions } from './viewerOptions.js';
+import { TaxonomyNamer } from './taxonomynamer.js';
 
 
 // Class represents the set of XBRL "target" reports shown in the viewer.
@@ -18,6 +19,7 @@ export class ReportSet {
         this._data = data;
         this._ixNodeMap = {};
         this.viewerOptions = new ViewerOptions()
+        this.taxonomyNamer = new TaxonomyNamer(new Map());
     }
 
     /*
@@ -98,6 +100,10 @@ export class ReportSet {
         return this._data.prefixes;
     }
 
+    preferredPrefix(prefix) {
+        return this.taxonomyNamer.getName(prefix, this._data.prefixes[prefix]).prefix;
+    }
+
     namespaceGroups() {
         const counts = {};
         for (const f of this.facts()) {
@@ -117,6 +123,20 @@ export class ReportSet {
         return this._usedPrefixes;
     }
 
+    getUsedConceptDataTypes() {
+        if (this._usedDataTypes === undefined) {
+            const map = new Map()
+            for (const dt of Object.values(this._items)
+                    .filter(f => f instanceof Fact)
+                    .map(f => ({ dataType: f.concept().dataType(), isNumeric: f.isNumeric() }))
+                    .filter(t => t.dataType !== undefined)) {
+                map.set(dt.dataType.name, dt);
+            }
+            this._usedDataTypes = map.values().toArray();
+        }
+        return this._usedDataTypes;
+    }
+
     /**
      * @return {Array[String]} Sorted list of unique software credit text values
      */

iXBRLViewerPlugin/viewer/src/js/reportset.test.js

@@ -240,8 +240,8 @@ describe("Multi report - ELR labels", () => {
 
     test("Present", () => {
         // Role 1 only has a label in report 1
-        expect(testReportSet.reports[0].getRoleLabel("role1")).toBe("Role 1 Label");
-        expect(testReportSet.reports[1].getRoleLabel("role1")).toBe("https://www.example.com/role1");
+        expect(testReportSet.reports[0].getRoleLabelOrURI("role1")).toBe("Role 1 Label");
+        expect(testReportSet.reports[1].getRoleLabelOrURI("role1")).toBe("https://www.example.com/role1");
     });
 });
 
@@ -333,7 +333,7 @@ describe("ELR labels", () => {
     testReportSet._initialize();
 
     test("Present", () => {
-        expect(testReportSet.reports[0].getRoleLabel("role1")).toBe("Role 1 Label");
+        expect(testReportSet.reports[0].getRoleLabelOrURI("role1")).toBe("Role 1 Label");
     });
 });
 

iXBRLViewerPlugin/viewer/src/js/search.js

@@ -86,7 +86,11 @@ export class ReportSearch {
     }
 
     visibilityFilter(s, item) {
-        return item.isHidden() ? s.showHiddenFacts : s.showVisibleFacts;
+        return (
+                s.visibilityFilter === '*' ||
+                s.visibilityFilter === 'visible' && !item.isHidden() ||
+                s.visibilityFilter === 'hidden' && item.isHidden()
+        )
     }
 
     periodFilter(s, item) {
@@ -138,6 +142,14 @@ export class ReportSearch {
         );
     }
 
+    dataTypesFilter(s, item) {
+        return (
+            s.dataTypesFilter == null ||
+            s.dataTypesFilter.length === 0 ||
+            s.dataTypesFilter.some(p => item.concept().dataType()?.name === p)
+        );
+    }
+
     unitsFilter(s, item) {
         return (
                 s.unitsFilter.length === 0 ||
@@ -159,6 +171,13 @@ export class ReportSearch {
         );
     }
 
+    mandatoryFactFilter(s, item) {
+        if(!s.showMandatoryFacts) {
+            return true;
+        }
+        return item.isMandatory();
+    }
+
     search(s) {
         if (!this.ready) {
             return;
@@ -175,9 +194,11 @@ export class ReportSearch {
             this.factValueFilter,
             this.calculationsFilter,
             this.namespacesFilter,
+            this.dataTypesFilter,
             this.unitsFilter,
             this.scalesFilter,
-            this.targetDocumentFilter
+            this.targetDocumentFilter,
+            this.mandatoryFactFilter
         ];
 
         rr.forEach((r,_) => {

iXBRLViewerPlugin/viewer/src/js/search.test.js

@@ -96,13 +96,13 @@ function testReportSet(reports) {
 function testSearchSpec(searchString='') {
     const spec = {};
     spec.searchString = searchString;
-    spec.showVisibleFacts = true;
-    spec.showHiddenFacts = true;
+    spec.visibilityFilter = '*';
     spec.namespacesFilter = [];
     spec.unitsFilter = [];
     spec.scalesFilter = [];
     spec.periodFilter = [];
     spec.conceptTypeFilter = '*';
+    spec.dataTypesFilter = [];
     spec.dimensionTypeFilter = [];
     spec.factValueFilter = '*';
     spec.calculationsFilter = [];

iXBRLViewerPlugin/viewer/src/js/summary.js

@@ -125,6 +125,20 @@ export class DocumentSummary {
         return this._totalFacts;
     }
 
+    hiddenFacts() {
+        if (this._hiddenFacts === undefined) {
+            this._hiddenFacts = this._reportSet.facts().filter(f => f.isHidden()).length;
+        }
+        return this._hiddenFacts;
+    }
+
+    mandatoryFacts() {
+        if (this._mandatoryFacts === undefined) {
+            this._mandatoryFacts = this._reportSet.facts().filter(f => f.isMandatory()).length;
+        }
+        return this._mandatoryFacts;
+    }
+
     tagCounts() {
         if (this._tagCounts === undefined) {
             this._buildTagCounts();

iXBRLViewerPlugin/viewer/src/js/tableExport.js

@@ -14,7 +14,8 @@ export class TableExport {
     static addHandles(iframe, reportSet) {
         $('table', iframe).each(function () {
             const table = $(this);
-            if (table.find(".ixbrl-element").length > 0) {
+            // Require at least two facts on different rows.
+            if (table.find("tr").filter((i, row) => $(row).find(".ixbrl-element").length > 0).length > 1) {
                 table.css("position", "relative");
                 const exporter = new TableExport(table, reportSet);
                 $('<div class="ixbrl-table-handle"><span>Export table</span></div>')

iXBRLViewerPlugin/viewer/src/js/taxonomynamer.js

@@ -0,0 +1,34 @@
+// See COPYRIGHT.md for copyright information
+
+export class TaxonomyNamer {
+    constructor(map) {
+        this.map = new Map(Array.from(map.entries()).map(([k,v]) => [new RegExp(k), new TaxonomyName(v[0], v[1])]));
+    }
+
+
+    getName(prefix, uri) {
+        for (const [re, name] of this.map.entries()) {
+            const m = uri.match(re);
+            if (m !== null)  {
+                return name;
+            }
+        }
+        return new TaxonomyName(prefix, prefix);
+    }
+
+    fromQName(qname) {
+        return this.getName(qname.prefix, qname.namespace);
+    }
+
+    convertQName(qname) {
+        const name = this.fromQName(qname)
+        return name.prefix + ':' + qname.localname;
+    }
+}
+
+export class TaxonomyName {
+    constructor(prefix, name) {
+        this.prefix = prefix;
+        this.name = name;
+    }
+}

iXBRLViewerPlugin/viewer/src/js/taxonomynamer.test.js

@@ -0,0 +1,32 @@
+// See COPYRIGHT.md for copyright information
+
+import { TaxonomyNamer } from './taxonomynamer.js';
+import { QName } from './qname.js';
+
+const prefixMap = {
+    "e": "http://example.com/",
+    "g": "http://eggsample.com/",
+};
+
+const preferredPrefixMap = new Map([
+    [ "http://ex.*\.com/", ["prefix1", "My Example"] ]
+]);
+
+function qname(s) {
+    return new QName(prefixMap, s);
+}
+
+describe("readableName", () => {
+    const namer = new TaxonomyNamer(preferredPrefixMap);
+    test("Taxonomy name match", () => {
+        expect(namer.fromQName(qname("e:1234")).prefix).toBe("prefix1");
+        expect(namer.fromQName(qname("e:1234")).name).toBe("My Example");
+        expect(namer.convertQName(qname("e:1234"))).toBe("prefix1:1234");
+    });
+    test("Unknown taxonomy", () => {
+        expect(namer.fromQName(qname("g:1234")).prefix).toBe("g");
+        expect(namer.fromQName(qname("g:1234")).name).toBe("g");
+        expect(namer.convertQName(qname("g:1234"))).toBe("g:1234");
+    });
+});
+

iXBRLViewerPlugin/viewer/src/js/theme.js

@@ -0,0 +1,36 @@
+// See COPYRIGHT.md for copyright information
+
+function getHtmlElement() {
+    return document.querySelector('html');
+}
+
+export function getVariable(name) {
+    const html = getHtmlElement();
+    return getComputedStyle(html).getPropertyValue(name);s
+}
+
+function setTheme(theme) {
+    const html = getHtmlElement();
+    html.dataset.theme = `theme-${theme}`;
+    console.log('Set theme:', theme);
+}
+
+export function getTheme() {
+    const html = getHtmlElement();
+    return html.dataset.theme.replace('theme-','');
+}
+
+export function initializeTheme() {
+    const initialTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light';
+    setTheme(initialTheme);
+}
+
+export function toggleTheme() {
+    if (getTheme() === 'light') {
+        setTheme('dark');
+    } else {
+        setTheme('light');
+    }
+}

iXBRLViewerPlugin/viewer/src/js/unit.js

@@ -1,9 +1,24 @@
 // See COPYRIGHT.md for copyright information
 
-import { measureLabel, NAMESPACE_ISO4217 } from "./util";
+import { NAMESPACE_ISO4217 } from "./util";
+import i18next from "i18next";
+
+/**
+ * Transforms measure qname into title case label (or currency symbol, if applicable).
+ * @return {String} Measure Label
+ */
+
+function measureLabel(reportSet, measure) {
+    const qname = reportSet.qname(measure);
+    if (qname.namespace === NAMESPACE_ISO4217) {
+        measure = i18next.t(`currencies:unitFormat${qname.localname}`, {defaultValue: qname.localname});
+    } else if (measure.includes(':')) {
+        measure = measure.split(':')[1];
+    }
+    return measure;
+}
 
 export class Unit {
-    
     constructor(reportSet, unitKey) {
         this._reportSet = reportSet;
         this._value = unitKey;

iXBRLViewerPlugin/viewer/src/js/util.js

@@ -2,19 +2,33 @@
 
 import moment from "moment";
 import Decimal from "decimal.js";
-import i18next from "i18next";
-
 
 export const SHOW_FACT = 'SHOW_FACT';
 
 export const NAMESPACE_ISO4217 = 'http://www.xbrl.org/2003/iso4217';
+export const NAMESPACE_XBRLI = 'http://www.xbrl.org/2003/instance';
 
 export const CALC_ARCROLE = "calc";
 export const CALC11_ARCROLE = "calc11";
 
+export const GLOSSARY_URL = "https://xbrl.org/glossary/";
+
 // The number of distinct highlight colors defined in inspector.less
 export const HIGHLIGHT_COLORS = 3;
 
+// Feature names
+export const FEATURE_GUIDE_LINK = 'guide_link';
+export const FEATURE_HOME_LINK_LABEL = 'home_link_label';
+export const FEATURE_HOME_LINK_URL = 'home_link_url';
+export const FEATURE_REVIEW = 'review';
+export const FEATURE_SUPPORT_LINK = 'support_link';
+export const FEATURE_SURVEY_LINK = 'survey_link';
+export const FEATURE_SEARCH_ON_STARTUP = 'search_on_startup';
+export const FEATURE_HIGHLIGHT_FACTS_ON_STARTUP = 'highlight_facts_on_startup';
+
+export const STORAGE_HIGHLIGHT_FACTS = "ixbrl-viewer-highlight-all-facts";
+export const STORAGE_HOME_LINK_QUERY = "ixbrl-viewer-home-link-query";
+
 /* 
  * Takes a moment.js oject and converts it to a human readable date, or date
  * and time if the time component is not midnight.  Adjust specifies that a
@@ -217,17 +231,3 @@ export function getIXHiddenLinkStyle(domNode) {
     return null;
 }
 
-/**
- * Transforms measure qname into title case label (or currency symbol, if applicable).
- * @return {String} Measure Label
- */
-
-export function measureLabel(report, measure) {
-    const qname = report.qname(measure);
-    if (qname.namespace === NAMESPACE_ISO4217) {
-        measure = i18next.t(`currencies:unitFormat${qname.localname}`, {defaultValue: qname.localname});
-    } else if (measure.includes(':')) {
-        measure = measure.split(':')[1];
-    }
-    return measure;
-}

iXBRLViewerPlugin/viewer/src/js/viewer.js

@@ -108,7 +108,7 @@ export class Viewer {
         if (this._reportSet.isMultiDocumentViewer()) {
             $('#ixv .ixds-tabs').show();
             for (const [i, doc] of this._reportSet.reportFiles().entries()) {
-                $('<div class="tab"></div>')
+                $('<button class="tab"></button>')
                     .text(doc.file)
                     .prop('title', doc.file)
                     .data('ix-doc-id', i)
@@ -123,12 +123,17 @@ export class Viewer {
     // display: block, a div is used, otherwise a span.  Returns the wrapper node
     // as a jQuery node
     _wrapNode(n) {
-        var wrapper = "<span>";
-        const nn = n.getElementsByTagName("*");
-        for (var i = 0; i < nn.length; i++) {
-            if (getComputedStyle(nn[i]).getPropertyValue('display') === "block") {
-                wrapper = '<div>';
-                break;
+        let wrapper = "<span>";
+        if (getComputedStyle(n).getPropertyValue("display") === "block") {
+            wrapper = '<div>';
+        }
+        else {
+            const nn = n.getElementsByTagName("*");
+            for (var i = 0; i < nn.length; i++) {
+                if (getComputedStyle(nn[i]).getPropertyValue('display') === "block") {
+                    wrapper = '<div>';
+                    break;
+                }
             }
         }
         $(n).wrap(wrapper);
@@ -268,7 +273,7 @@ export class Viewer {
                 nodes.push(tableNode)
             } 
         }
-        /* Otherwise, insert a <span> as wrapper */
+        /* Otherwise, insert a <span> or <div> as wrapper */
         if (nodes.length == 0) {
             nodes.push(this._wrapNode(domNode));
         }
@@ -440,7 +445,7 @@ export class Viewer {
                 // Handle SEC/ESEF links-to-hidden
                 const vuid = viewerUniqueId(reportIndex, getIXHiddenLinkStyle(n));
                 if (vuid !== null) {
-                    let nodes = $(n);
+                    let nodes = this._findOrCreateWrapperNode(n, inHidden);
                     nodes.addClass("ixbrl-element").data('ivids', [vuid]);
                     this._docOrderItemIndex.addItem(vuid, docIndex);
                     /* We may have already seen the corresponding ix element in the hidden
@@ -749,11 +754,14 @@ export class Viewer {
                     // highlight color for an element that is double tagged in a
                     // table cell.
                     const ixn = $(this).data('ivids').map(id => viewer._ixNodeMap[id]).filter(ixn => !ixn.footnote)[0];
-                    if (ixn != undefined) {
-                        const elements = viewer.elementsForItemIds(ixn.chainIXIds());
-                        const i = groups[reportSet.getItemById(ixn.id).conceptQName().prefix];
-                        if (i !== undefined) {
-                            elements.addClass("ixbrl-highlight-" + i);
+                    if (ixn !== undefined ) {
+                        const item = reportSet.getItemById(ixn.id);
+                        if (item !== undefined) {
+                            const elements = viewer.elementsForItemIds(ixn.chainIXIds());
+                            const i = groups[item.conceptQName().prefix];
+                            if (i !== undefined) {
+                                elements.addClass("ixbrl-highlight-" + i);
+                            }
                         }
                     }
             });
@@ -803,7 +811,10 @@ export class Viewer {
     }
 
     _setTitle(docIndex) {
-        $('#top-bar .document-title').text($('head title', this._iframes.eq(docIndex).contents()).text());
+        const title = $('head title', this._iframes.eq(docIndex).contents()).text();
+        $('#top-bar .document-title')
+            .text(title)
+            .attr("aria-label", "Inline Viewer: " + title);
     }
 
     showDocumentForItemId(vuid) {

iXBRLViewerPlugin/viewer/src/less/accordian.less

@@ -2,7 +2,7 @@
 
 .accordian .card {
   margin-top: 0.4rem;
-  background-color: @button-background;
+  background-color: var(--colour-button-bg);
 
   .card-body {
     display: none;
@@ -16,17 +16,21 @@
   }
 
   .title {
+    .text-md();
+
     padding: 1.2rem 1.6rem;
+    border: none;
+    width: 100%;
+    text-align: left;
     cursor: pointer;
-    line-height: 1.8rem;
 
     &:hover {
-      background-color: #f3f3f3;
+      background-color: var(--colour-bg-selected);
     }
   }
 
   &.active {
-    background-color: #f3f3f3;
+    background-color: var(--colour-bg-selected);
 
     .title {
       font-weight: bold;

iXBRLViewerPlugin/viewer/src/less/block-list.less

@@ -3,27 +3,33 @@
 .block-list-item {
   margin: 0.5rem 0;
   padding: 0.3rem 0.9rem;
-  background-color: @button-background;
+  background-color: var(--colour-button-bg);
   cursor: pointer;
   position: relative;
-  border-left: solid 0.4rem @button-background;
+  border-left: solid 0.4rem var(--colour-button-bg);
+  border-right: none;
+  border-top: none;
+  border-bottom: none;
+  border-radius: 0;
+  text-align: left;
+  width: 100%;
 
   & > * {
     margin: 0.8rem 0;
   }
 
   // Contents of .tags provide 0.2rem of non-collapsing margin
-  & > .tags {
+  & > .block-list-item-tags {
     margin: 0.6rem 0;
   }
 
   &:hover {
-    background-color: @background-selected;
+    background-color: var(--colour-bg-selected);
   }
 
   &.selected {
-    border-left: solid 0.4rem #0085e6;
-    background-color: @background-selected;
+    border-left: solid 0.4rem var(--colour-primary);
+    background-color: var(--colour-bg-selected);
   }
 
   &.linked-highlight {

iXBRLViewerPlugin/viewer/src/less/calculation-inspector.less

@@ -58,13 +58,13 @@
       &.consistent .icon::before {
         .icon-circle-tick();
 
-        color: @workiva-green;
+        color: var(--colour-primary);
       }
 
       &.inconsistent .icon::before {
         .icon-circle-cross();
 
-        color: @warning-orange;
+        color: var(--colour-warning);
       }
     }