@limetech/lime-elements 34.2.0-next.6 → 35.0.0-next.12

package/dist/collection/components/table/table.css

@@ -952,13 +952,13 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   cursor: pointer;
 }
 [aria-sort=none] .tabulator-arrow {
-  border-bottom-color: rgb(var(--contrast-800)) !important;
+  border-bottom-color: rgb(var(--table-arrow-color)) !important;
 }
 [aria-sort=desc] .tabulator-arrow {
-  border-top-color: rgb(var(--color-teal-light)) !important;
+  border-top-color: rgb(var(--table-arrow-color--active)) !important;
 }
 [aria-sort=asc] .tabulator-arrow {
-  border-bottom-color: rgb(var(--color-teal-light)) !important;
+  border-bottom-color: rgb(var(--table-arrow-color--active)) !important;
 }
 .tabulator-arrow:before, .tabulator-arrow:after {
   display: block;
@@ -967,7 +967,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   bottom: 0;
 }
 .tabulator-arrow:before {
-  background-color: rgb(var(--contrast-500));
+  background-color: rgb(var(--table-header-background-color));
   width: 0.5rem;
   height: 0.5rem;
   transform: rotate(45deg);
@@ -976,7 +976,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 }
 .tabulator-arrow:after {
   width: 0.125rem;
-  background-color: rgb(var(--contrast-800));
+  background-color: rgb(var(--table-arrow-color));
   height: 0.5625rem;
   top: 0.125rem;
   left: -0.0625rem;
@@ -991,7 +991,7 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
   top: -0.6875rem;
 }
 [aria-sort=desc] .tabulator-arrow:after, [aria-sort=asc] .tabulator-arrow:after {
-  background-color: rgb(var(--color-teal-light));
+  background-color: rgb(var(--table-arrow-color--active));
 }
 
 @keyframes indicate-sortable-column {
@@ -1156,21 +1156,21 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
  * Nothing in this file may output any CSS
  * without being explicitly called by outside code.
  */
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable {
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable {
   transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:hover {
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:hover {
   box-shadow: var(--button-shadow-hovered);
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:active {
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:active {
   box-shadow: var(--button-shadow-pressed);
   transform: translate3d(0, 0.08rem, 0);
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:hover {
-  z-index: 1;
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:hover {
+  z-index: 2;
 }
-:host(.has-interactive-rows) .tabulator-row.tabulator-selectable:not(.active):hover {
-  background-color: rgb(var(--contrast-100));
+:host(.has-interactive-rows) .tabulator-row:not(.tabulator-calcs).tabulator-selectable:not(.active):hover {
+  background-color: rgb(var(--table-row-background-color--hover));
 }
 
 :host(.has-low-density) #tabulator-table {
@@ -1263,26 +1263,109 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 .tabulator.has-movable-columns .tabulator-header {
   overflow-y: visible;
 }
-.tabulator.has-movable-columns .tabulator-header .tabulator-col {
+.tabulator.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen) {
   cursor: move !important;
 }
-.tabulator.has-movable-columns .tabulator-header .tabulator-col.tabulator-sortable.tabulator-moving {
+.tabulator.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen).tabulator-sortable.tabulator-moving {
   animation: detach-a-column-header 0.2s ease forwards;
   opacity: 0.9;
   border: none;
   border-radius: 0.25rem;
-  background-color: rgb(var(--contrast-100));
+  background-color: rgb(var(---table-header-background-color-when-being-dragged));
   box-shadow: var(--shadow-depth-16);
 }
-.tabulator.has-movable-columns .tabulator-header .tabulator-col.tabulator-sortable.tabulator-moving:hover {
-  background-color: rgb(var(--contrast-100));
+.tabulator.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen).tabulator-sortable.tabulator-moving:hover {
+  background-color: rgb(var(---table-header-background-color-when-being-dragged));
+}
+.tabulator.has-movable-columns .tabulator-header .tabulator-col:not(.tabulator-frozen).tabulator-sortable.tabulator-moving .tabulator-arrow:before {
+  background-color: rgb(var(---table-header-background-color-when-being-dragged));
+}
+
+/*
+ * This file is imported into every component!
+ *
+ * Nothing in this file may output any CSS
+ * without being explicitly called by outside code.
+ */
+.select-all,
+.limel-table--row-selector {
+  --mdc-checkbox-ripple-size: 1rem;
+}
+
+.select-all {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  top: 0.4375rem;
+  width: 2.5625rem;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
 }
-.tabulator.has-movable-columns .tabulator-header .tabulator-col.tabulator-sortable.tabulator-moving .tabulator-arrow:before {
-  background-color: rgb(var(--contrast-100));
+.select-all limel-checkbox {
+  transform: translate(-0.25rem, 0);
+}
+
+.limel-table--row-selector {
+  position: sticky !important;
+  left: 0;
+  border-width: 0;
+  justify-content: center;
+  z-index: 1;
+}
+.tabulator-row-odd .limel-table--row-selector {
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--odd)) 70%, rgb(var(--table-row-background-color--odd), 0));
+}
+.tabulator-row-even .limel-table--row-selector {
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--even)) 70%, rgb(var(--table-row-background-color--even), 0));
+}
+.tabulator-row:not(.tabulator-calcs):hover .limel-table--row-selector {
+  will-change: background-image;
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--hover)) 70%, rgb(var(--table-row-background-color--hover), 0));
+}
+.tabulator-row.active .limel-table--row-selector, .tabulator-row.active:hover .limel-table--row-selector {
+  background-image: linear-gradient(to right, rgb(var(--table-row-background-color--active)) 70%, rgb(var(--table-row-background-color--active), 0));
+}
+.limel-table--row-selector limel-checkbox {
+  transition: opacity 0.2s ease;
+  align-self: center;
+  opacity: 0.3;
+  transform: translate(-0.25rem, 0);
+}
+.tabulator-row:hover .limel-table--row-selector limel-checkbox {
+  opacity: 1;
+}
+.has-selection .limel-table--row-selector limel-checkbox {
+  opacity: 1;
+}
+.limel-table--row-selector .tabulator-col-resize-handle {
+  display: none;
+}
+.limel-table--row-selector + .tabulator-col .tabulator-col-resize-handle.prev, .limel-table--row-selector + .tabulator-cell .tabulator-col-resize-handle.prev {
+  display: none;
+}
+
+.tabulator.has-movable-columns .tabulator-header .tabulator-col.limel-table--row-selector {
+  border: none;
+  cursor: default;
+  pointer-events: none;
+  background-color: transparent;
+  background-image: linear-gradient(to right, rgb(var(--table-header-background-color--hover)) 70%, rgb(var(--table-header-background-color--hover), 0));
+  position: sticky;
+  left: 0;
 }
 
 :host {
   display: block;
+  --table-header-background-color: var(--contrast-500);
+  --table-header-background-color--hover: var(--contrast-400);
+  --table-header-background-color-when-being-dragged: var(--contrast-100);
+  --table-row-background-color--odd: var(--contrast-200);
+  --table-row-background-color--even: var(--contrast-100);
+  --table-row-background-color--hover: var(--contrast-100);
+  --table-row-background-color--active: var(--color-teal-lighter);
+  --table-arrow-color: var(--contrast-800);
+  --table-arrow-color--active: var(--color-teal-default);
 }
 
 #tabulator-container {
@@ -1304,46 +1387,46 @@ body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {
 
 .tabulator .tabulator-header {
   border-bottom: 0;
-  background-color: rgb(var(--contrast-500));
+  background-color: rgb(var(--table-header-background-color--hover));
 }
 .tabulator .tabulator-header .tabulator-col {
   transition: background-color 0.2s ease;
-  background-color: rgb(var(--contrast-500));
+  background-color: rgb(var(--table-header-background-color--hover));
   border-right-color: rgb(var(--contrast-200));
 }
-.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
-}
 .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
-  background-color: rgb(var(--contrast-400));
+  background-color: var(--table-header-background-color--hover);
 }
 .tabulator .tabulator-header .tabulator-col-title {
   font-weight: 500;
   padding-left: 0.125rem;
 }
 .tabulator .tabulator-footer {
-  background-color: rgb(var(--contrast-500));
+  background-color: rgb(var(--table-header-background-color--hover));
   border: none;
+  user-select: auto;
 }
 .tabulator .tabulator-footer .tabulator-calcs-holder {
   border-color: rgb(var(--contrast-600));
 }
 
+.tabulator-row.tabulator-calcs {
+  cursor: default !important;
+}
 .tabulator-row.tabulator-selectable {
   transition: background-color 0.2s ease;
 }
 .tabulator-row.tabulator-selectable:not(.active):hover {
-  background-color: rgb(var(--contrast-500));
+  background-color: rgb(var(--table-header-background-color));
 }
 .tabulator-row.tabulator-row-odd {
-  background-color: rgb(var(--contrast-200));
+  background-color: rgb(var(--table-row-background-color--odd));
 }
 .tabulator-row.tabulator-row-even {
-  background-color: rgb(var(--contrast-100));
+  background-color: rgb(var(--table-row-background-color--even));
 }
 .tabulator-row.active, .tabulator-row.active:hover {
-  background-color: rgba(var(--color-teal-light), 0.16);
+  background-color: rgb(var(--table-row-background-color--active));
 }
 .tabulator-row .tabulator-cell {
   border-right: transparent;

package/dist/collection/components/table/table.js

@@ -3,6 +3,7 @@ import TabulatorTable from 'tabulator-tables';
 import { ColumnDefinitionFactory, createColumnSorter } from './columns';
 import { isEqual, has } from 'lodash-es';
 import { ElementPool } from './element-pool';
+import { TableSelection } from './table-selection';
 const FIRST_PAGE = 1;
 /**
  * @exampleComponent limel-example-table
@@ -12,6 +13,7 @@ const FIRST_PAGE = 1;
  * @exampleComponent limel-example-table-local
  * @exampleComponent limel-example-table-remote
  * @exampleComponent limel-example-table-activate-row
+ * @exampleComponent limel-example-table-selectable-rows
  * @exampleComponent limel-example-table-default-sorted
  * @exampleComponent limel-example-table-low-density
  */
@@ -44,6 +46,27 @@ export class Table {
      * The page to show
      */
     this.page = FIRST_PAGE;
+    this.getActiveRows = () => {
+      if (!this.tabulator) {
+        return [];
+      }
+      return this.tabulator.getRows('active');
+    };
+    this.getActiveRowsData = () => {
+      // Note: Tabulator.getData() creates copies of each data object
+      // and will break this.selection.has checks, hence why this function
+      // intentionally retrieves the data using the row components
+      return this.getActiveRows().map((row) => row.getData());
+    };
+    this.selectAllOnChange = (ev) => {
+      const selectAll = ev.detail;
+      ev.stopPropagation();
+      ev.preventDefault();
+      const newSelection = selectAll ? this.getActiveRowsData() : [];
+      this.select.emit(newSelection);
+      this.tableSelection.setSelection(newSelection);
+      this.selectAll.emit(selectAll);
+    };
     this.getColumnOptions = () => {
       if (!this.movableColumns) {
         return {};
@@ -54,7 +77,7 @@ export class Table {
       };
     };
     this.handleMoveColumn = (_, components) => {
-      const columns = components.map(this.findColumn);
+      const columns = components.map(this.findColumn).filter((c) => c);
       this.changeColumns.emit(columns);
     };
     this.findColumn = (component) => {
@@ -69,13 +92,20 @@ export class Table {
     this.requestData = this.requestData.bind(this);
     this.onClickRow = this.onClickRow.bind(this);
     this.formatRow = this.formatRow.bind(this);
+    this.formatRows = this.formatRows.bind(this);
     this.updateMaxPage = this.updateMaxPage.bind(this);
     this.initTabulatorComponent = this.initTabulatorComponent.bind(this);
+    this.setSelection = this.setSelection.bind(this);
+    this.addColumnAggregator = this.addColumnAggregator.bind(this);
     this.pool = new ElementPool(document);
     this.columnFactory = new ColumnDefinitionFactory(this.pool);
   }
   componentWillLoad() {
     this.firstRequest = this.mode === 'remote';
+    if (this.selectable) {
+      this.tableSelection = new TableSelection(() => this.tabulator, this.pool, this.select);
+      this.tableSelection.setSelection(this.selection);
+    }
   }
   componentDidLoad() {
     this.init();
@@ -102,7 +132,7 @@ export class Table {
     if (!this.tabulator) {
       return;
     }
-    this.tabulator.getRows().forEach(this.formatRow);
+    this.formatRows();
   }
   updateData(newData = [], oldData = []) {
     if (isEqual(newData, oldData)) {
@@ -114,6 +144,7 @@ export class Table {
         return;
       }
       this.tabulator.replaceData(this.data);
+      this.setSelection();
     });
   }
   updateColumns(newColumns, oldColumns) {
@@ -123,20 +154,46 @@ export class Table {
     if (this.areSameColumns(newColumns, oldColumns)) {
       return;
     }
-    const existingColumns = this.tabulator
+    const columnsInTable = this.tabulator
       .getColumns()
-      .map(this.findColumn);
-    if (this.areSameColumns(newColumns, existingColumns)) {
+      .filter((c) => c.getField());
+    const oldColumnsInTable = columnsInTable.map((c) => oldColumns.find((old) => old.field === c.getField()));
+    if (this.areSameColumns(newColumns, oldColumnsInTable)) {
       return;
     }
     // Updating columns requires a reinitialization otherwise sorting will not work
     // afterwards
     this.init();
   }
+  updateAggregates(newAggregates, oldAggregates) {
+    if (!this.tabulator) {
+      return;
+    }
+    if (isEqual(newAggregates, oldAggregates)) {
+      return;
+    }
+    if (!this.haveSameAggregateFields(newAggregates, oldAggregates)) {
+      this.init();
+      return;
+    }
+    this.tabulator.recalc();
+    this.tabulator.rowManager.redraw();
+  }
+  updateSelection(newSelection) {
+    if (!this.tableSelection) {
+      return;
+    }
+    this.tableSelection.setSelection(newSelection);
+  }
   areSameColumns(newColumns, oldColumns) {
     return (newColumns.length === oldColumns.length &&
       newColumns.every((column) => oldColumns.includes(column)));
   }
+  haveSameAggregateFields(newAggregates, oldAggregates) {
+    const oldAggregateFields = (oldAggregates === null || oldAggregates === void 0 ? void 0 : oldAggregates.map((a) => a.field)) || [];
+    return ((newAggregates === null || newAggregates === void 0 ? void 0 : newAggregates.length) === (oldAggregates === null || oldAggregates === void 0 ? void 0 : oldAggregates.length) &&
+      !!(newAggregates === null || newAggregates === void 0 ? void 0 : newAggregates.every((a) => oldAggregateFields.includes(a.field))));
+  }
   init() {
     if (this.tabulator) {
       this.pool.releaseAll();
@@ -163,14 +220,22 @@ export class Table {
     // matter if its rendered or not.
     if (!('ResizeObserver' in window)) {
       this.tabulator = new TabulatorTable(table, options);
+      this.setSelection();
       return;
     }
     const observer = new ResizeObserver(() => {
       this.tabulator = new TabulatorTable(table, options);
+      this.setSelection();
       observer.unobserve(table);
     });
     observer.observe(table);
   }
+  setSelection() {
+    if (!(this.tabulator && this.tableSelection)) {
+      return;
+    }
+    this.tableSelection.setSelection(this.selection);
+  }
   updateMaxPage() {
     var _a;
     (_a = this.tabulator) === null || _a === void 0 ? void 0 : _a.setMaxPage(this.calculatePageCount());
@@ -192,7 +257,38 @@ export class Table {
     });
   }
   getColumnDefinitions() {
-    return this.columns.map(this.columnFactory.create);
+    const columnDefinitions = this.columns
+      .map(this.addColumnAggregator)
+      .map(this.columnFactory.create);
+    if (this.tableSelection) {
+      return this.tableSelection.getColumnDefinitions(columnDefinitions);
+    }
+    return columnDefinitions;
+  }
+  addColumnAggregator(column) {
+    var _a;
+    if (!((_a = this.aggregates) === null || _a === void 0 ? void 0 : _a.length) || column.aggregator) {
+      return column;
+    }
+    const aggregate = this.aggregates.find((a) => a.field === column.field);
+    if (aggregate) {
+      column.aggregator = (col, 
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      _values, 
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      _data) => {
+        var _a;
+        if (!col) {
+          return undefined;
+        }
+        const value = (_a = this.aggregates.find((a) => a.field === col.field)) === null || _a === void 0 ? void 0 : _a.value;
+        if (col.formatter) {
+          return col.formatter(value);
+        }
+        return value;
+      };
+    }
+    return column;
   }
   getAjaxOptions() {
     if (!this.isRemoteMode()) {
@@ -291,7 +387,11 @@ export class Table {
     }
     this.changePage.emit(page);
   }
-  onClickRow(_, row) {
+  onClickRow(_ev, row) {
+    if (typeof row.getPosition === 'undefined') {
+      // Not a data row, probably a CalcComponent
+      return;
+    }
     if (this.activeRow === row.getData()) {
       this.activeRow = null;
     }
@@ -300,6 +400,9 @@ export class Table {
     }
     this.activate.emit(this.activeRow);
   }
+  formatRows() {
+    this.tabulator.getRows().forEach(this.formatRow);
+  }
   formatRow(row) {
     if (this.activeRow === row.getData()) {
       row.getElement().classList.add('active');
@@ -319,16 +422,30 @@ export class Table {
     return columns.some((column) => has(column, 'aggregator'));
   }
   render() {
+    var _a;
     return (h("div", { id: "tabulator-container" },
       h("div", { id: "tabulator-loader", style: { display: this.loading ? 'flex' : 'none' } },
         h("limel-spinner", { size: "large" })),
       this.renderEmptyMessage(),
+      this.renderSelectAll(),
       h("div", { id: "tabulator-table", class: {
           'has-pagination': this.totalRows > this.pageSize,
           'has-aggregation': this.hasAggregation(this.columns),
           'has-movable-columns': this.movableColumns,
+          'has-rowselector': this.selectable,
+          'has-selection': (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection,
         } })));
   }
+  renderSelectAll() {
+    var _a, _b, _c;
+    if (!this.selectable) {
+      return;
+    }
+    const showSelectAll = !this.loading && this.tableSelection;
+    return (h("div", { class: "select-all", style: { display: showSelectAll ? 'inline-block' : 'none' } },
+      h("limel-checkbox", { onChange: this.selectAllOnChange, checked: (_a = this.tableSelection) === null || _a === void 0 ? void 0 : _a.hasSelection, indeterminate: ((_b = this.tableSelection) === null || _b === void 0 ? void 0 : _b.hasSelection) &&
+          ((_c = this.selection) === null || _c === void 0 ? void 0 : _c.length) < this.data.length })));
+  }
   renderEmptyMessage() {
     const showEmptyMessage = !this.loading && !this.data.length && this.emptyMessage;
     return (h("div", { id: "tabulator-empty-text", style: { display: showEmptyMessage ? 'flex' : 'none' } },
@@ -537,6 +654,58 @@ export class Table {
       },
       "attribute": "empty-message",
       "reflect": false
+    },
+    "aggregates": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ColumnAggregate[]",
+        "resolved": "ColumnAggregate[]",
+        "references": {
+          "ColumnAggregate": {
+            "location": "import",
+            "path": "./table.types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Column aggregates to be displayed in the table"
+      }
+    },
+    "selectable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Enables row selection"
+      },
+      "attribute": "selectable",
+      "reflect": false
+    },
+    "selection": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "object[]",
+        "resolved": "object[]",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Selected data. Requires `selectable` to be true."
+      }
     }
   }; }
   static get events() { return [{
@@ -629,6 +798,36 @@ export class Table {
           }
         }
       }
+    }, {
+      "method": "select",
+      "name": "select",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the row selection has been changed"
+      },
+      "complexType": {
+        "original": "object[]",
+        "resolved": "object[]",
+        "references": {}
+      }
+    }, {
+      "method": "selectAll",
+      "name": "selectAll",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emitted when the select all rows state is toggled"
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "host"; }
   static get watchers() { return [{
@@ -649,5 +848,11 @@ export class Table {
     }, {
       "propName": "columns",
       "methodName": "updateColumns"
+    }, {
+      "propName": "aggregates",
+      "methodName": "updateAggregates"
+    }, {
+      "propName": "selection",
+      "methodName": "updateSelection"
     }]; }
 }

package/dist/collection/style/internal/lime-theme.scss

@@ -10,37 +10,36 @@
 @use '../brand-colors';
 @use '../_theme-color-variables';
 
-@use '@material/theme' with
-    (
-        $primary: brand-colors.$lime-turquoise,
-        $secondary: brand-colors.$lime-dark-grey,
-        $background: #fff,
-        $surface: #fff,
-        $error: #b00020,
-        $on-primary: #fff,
-        $on-secondary: #fff,
-        $on-surface: #000,
-        $on-error: #fff,
-        // $text-disabled-on-background: rgba(0, 0, 0, 0.38),
-        // $text-hint-on-light: rgba(0, 0, 0, 0.38),
-        // $text-primary-on-background: rgba(0, 0, 0, 0.87),
-        // $text-secondary-on-background: rgba(0, 0, 0, 0.54),
-        //
-        // The following variables are also available to be set if needed
-        // (note by Ads: they probably aren't available in MDC v11)
-        //
-        // $text-hint-on-background: rgba(0, 0, 0, 0.38),
-        // $text-icon-on-background: rgba(0, 0, 0, 0.38),
-        // $text-primary-on-light: rgba(0, 0, 0, 0.87),
-        // $text-secondary-on-light: rgba(0, 0, 0, 0.54),
-        // $text-disabled-on-light: rgba(0, 0, 0, 0.38),
-        // $text-icon-on-light: rgba(0, 0, 0, 0.38),
-        // $text-primary-on-dark: white,
-        // $text-secondary-on-dark: rgba(255, 255, 255, 0.7),
-        // $text-hint-on-dark: rgba(255, 255, 255, 0.5),
-        // $text-disabled-on-dark: rgba(255, 255, 255, 0.5),
-        // $text-icon-on-dark: rgba(255, 255, 255, 0.5),
-    );
+@use '@material/theme' with (
+    $primary: brand-colors.$lime-turquoise,
+    $secondary: brand-colors.$lime-dark-grey,
+    $background: #fff,
+    $surface: #fff,
+    $error: #b00020,
+    $on-primary: #fff,
+    $on-secondary: #fff,
+    $on-surface: #000,
+    $on-error: #fff,
+    // $text-disabled-on-background: rgba(0, 0, 0, 0.38),
+    // $text-hint-on-light: rgba(0, 0, 0, 0.38),
+    // $text-primary-on-background: rgba(0, 0, 0, 0.87),
+    // $text-secondary-on-background: rgba(0, 0, 0, 0.54),
+    //
+    // The following variables are also available to be set if needed
+    // (note by Ads: they probably aren't available in MDC v11)
+    //
+    // $text-hint-on-background: rgba(0, 0, 0, 0.38),
+    // $text-icon-on-background: rgba(0, 0, 0, 0.38),
+    // $text-primary-on-light: rgba(0, 0, 0, 0.87),
+    // $text-secondary-on-light: rgba(0, 0, 0, 0.54),
+    // $text-disabled-on-light: rgba(0, 0, 0, 0.38),
+    // $text-icon-on-light: rgba(0, 0, 0, 0.38),
+    // $text-primary-on-dark: white,
+    // $text-secondary-on-dark: rgba(255, 255, 255, 0.7),
+    // $text-hint-on-dark: rgba(255, 255, 255, 0.5),
+    // $text-disabled-on-dark: rgba(255, 255, 255, 0.5),
+    // $text-icon-on-dark: rgba(255, 255, 255, 0.5),
+);
 @forward '@material/theme';
 
 @use './lime-typography';