@iamproperty/components 3.4.5 → 3.4.7

package/assets/js/tests/table.spec.js

@@ -0,0 +1,147 @@
+// @ts-nocheck
+import '@testing-library/jest-dom';
+import * as tableModule from "../modules/table.js";
+import "expect-puppeteer";
+const basicTable = `<thead>
+  <tr>
+    <th>Heading 1</th>
+    <th>Heading 2</th>
+    <th>Heading 3</th>
+  </tr>
+</thead>
+<tbody
+  <tr>
+    <td>Cell 1</td>
+    <td>Low</td>
+    <td>Cell 3</td>
+  </tr>
+  <tr>
+    <td>Cell 1</td>
+    <td>Low</td>
+    <td><a href="/link">View information</a></td>
+  </tr>
+  <tr>
+    <td>Different Cell 1</td>
+    <td>Medium</td>
+    <td><a href="/link">View information</a></td>
+  </tr>
+  <tr>
+    <td>Different Cell 1</td>
+    <td>High</td>
+    <td><a href="/link">View information</a></td>
+  </tr>
+</tbody>`;
+describe('addDataAttributes', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    tableModule.addDataAttributes(table);
+    test('should add data-label attribute to the table cells', () => {
+        expect(table.querySelector('tbody td').getAttribute('data-label')).toEqual('Heading 1');
+        expect(table.querySelector('tbody td:nth-child(2)').getAttribute('data-label')).toEqual('Heading 2');
+    });
+    test('should add data-content attribute to the table cells if the content matches a pre-defined list', () => {
+        expect(table.querySelector('tbody tr:nth-child(2) td:nth-child(2)').getAttribute('data-content')).toEqual('Low');
+        expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').getAttribute('data-content')).toEqual('Medium');
+    });
+});
+/* TODO: This unit test doesn't work as puppeteer seems to have an issue with query selector all
+describe('getLargestLastColWidth', () => {
+
+  test('should return the width of the largest last column content', async() => {
+
+    const browser = await puppeteer.launch({});
+    try {
+        const page = await browser.newPage();
+        await page.exposeFunction("getLargestLastColWidth", tableModule.getLargestLastColWidth);
+        await page.setContent(`<table id="table">${basicTable}</table>`);
+        await page.waitForSelector('#table tr');
+
+        const largestWidth = await page.evaluate(`getLargestLastColWidth(document.querySelector("#table"))`);
+
+        //const links = await page.$$eval('#table', e=>getLargestLastColWidth(e))
+      console.log(await largestWidth)
+
+
+    } catch (e) {
+        console.error(e);
+    } finally {
+        await browser.close();
+    }
+
+    
+  });
+
+});
+*/
+describe('createMobileButton', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    tableModule.createMobileButton(table);
+    test('should add a button to the first cell in a column', () => {
+        expect(table.querySelector('tbody td:nth-child(1) button').textContent).toEqual('Cell 1');
+        expect(table.querySelector('tbody td:nth-child(1) span').textContent).toEqual('Cell 1');
+    });
+});
+describe('createSearchDataList', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    const form = document.createElement('form');
+    form.innerHTML += `<div><input name="search" id="search" type="text" class="form-control" data-search="Heading 1"></div>`;
+    tableModule.addDataAttributes(table);
+    tableModule.createSearchDataList(table, form);
+    test('should create a datalist populated by the defined columns in the data-search ', () => {
+        expect(form.querySelectorAll('datalist').length).toEqual(1);
+        expect(form.querySelectorAll('datalist option').length).toEqual(2);
+        expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
+        expect(form.querySelector('datalist option:nth-child(2)').value).toEqual('Different Cell 1');
+    });
+    test('should set the autocomplete attribute to off', () => {
+        expect(form.querySelectorAll('datalist').length).toEqual(1);
+        expect(form.querySelectorAll('datalist option').length).toEqual(2);
+        expect(form.querySelector('datalist option:nth-child(1)').value).toEqual('Cell 1');
+        expect(form.querySelector('input').getAttribute('autocomplete')).toEqual('off');
+    });
+});
+describe('sortTable', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    const form = document.createElement('form');
+    form.innerHTML += `<div><select type="select" name="sort" id="sort" class="form-select" data-sort=""><option value="-1">Sort by</option><option value="high" data-sort="Heading 2" data-order="High,Medium,Low" selected="selected">high to low</option></select></div>`;
+    const savedTableBody = table.querySelector('tbody');
+    tableModule.addDataAttributes(table);
+    tableModule.sortTable(table, form, savedTableBody);
+    test('should sort the table from high to low', () => {
+        expect(table.querySelector('tbody tr:nth-child(1) td:nth-child(2)').textContent).toEqual('High');
+        expect(table.querySelector('tbody tr:nth-child(2) td:nth-child(2)').textContent).toEqual('Medium');
+        expect(table.querySelector('tbody tr:nth-child(3) td:nth-child(2)').textContent).toEqual('Low');
+    });
+});
+describe('filterTable', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    const form = document.createElement('form');
+    form.innerHTML += `<div><input type="text" name="filter" id="filter" data-filter="Heading 2" value="High" /></div>`;
+    tableModule.addDataAttributes(table);
+    tableModule.filterTable(table, form, document.createElement('div'));
+    test('should filter the table to only show high values', () => {
+        expect(table.querySelectorAll('tbody tr.filtered--matched').length).toEqual(1);
+    });
+});
+describe('populateDataQueries', () => {
+    const table = document.createElement('table');
+    table.innerHTML = basicTable;
+    const form = document.createElement('form');
+    form.innerHTML += `<div><span data-query="total"></span><span data-query="Heading 2 == Low"></span></div>`;
+    tableModule.addDataAttributes(table);
+    tableModule.populateDataQueries(table, form);
+    test('should populate elements with the data-query attribute with the result of the corresponding query', () => {
+        expect(form.querySelector('[data-query="total"]').textContent).toEqual('4');
+        expect(form.querySelector('[data-query="Heading 2 == Low"]').textContent).toEqual('2');
+    });
+});
+describe('formatCell', () => {
+    test('should format the text correctly', () => {
+        expect(tableModule.formatCell('date', '2023-05-15 12:10:45.000000')).toEqual('15 May 23');
+        expect(tableModule.formatCell('capitalise', 'low')).toEqual('Low');
+    });
+});

package/assets/sass/_components.scss

@@ -1,13 +1,12 @@
+@use "components/card.scss";
 @use "components/nav.scss";
 @use "components/header.scss";
 @use "components/testimonial.scss";
-@use "components/cardDeck.scss";
 @use "components/accordion.scss";
 @use "components/alert";
 @use "components/carousel.scss";
 @use "components/property-searchbar.scss";
 @use "components/tabs.scss";
-@use "components/modal.scss";
 @use "components/charts.scss";
 @use "components/timeline.scss";
 @use "components/snapshot.scss";

package/assets/sass/_corefiles.scss

@@ -13,15 +13,16 @@
 @use "components/lists.scss";
 @use "components/tooltips.scss";
 @use "components/container.scss";
-@use "components/tables.scss";
-@use "components/links.scss";
+@use "components/table.scss";
+@use "foundations/links.scss";
 @use "components/buttons";
-@use "components/card.scss";
 @use "components/panel.scss";
+@use "components/dialog.scss";
+
+@use "components/pagination.scss";
 
 // Bootstrap elements
 @import "../../node_modules/bootstrap/scss/_transitions.scss";
-@import "../../node_modules/bootstrap/scss/_pagination.scss";
 @import "../../node_modules/bootstrap/scss/_badge.scss";
 
 // Helpers

package/assets/sass/_fonts.scss

@@ -1,7 +1,7 @@
 $fontPath: '../fonts/' !default;
 
 @font-face {
-  font-family: 'qanelasmedium';
+  font-family: 'Qanelas';
   src: url($fontPath+'qanelas-medium-webfont.woff2') format('woff2'),
        url($fontPath+'qanelas-medium-webfont.woff') format('woff');
   font-weight: normal;
@@ -9,9 +9,9 @@ $fontPath: '../fonts/' !default;
 }
 
 @font-face {
-  font-family: 'qanelas_softextrabold';
-  src: url($fontPath+'qanelassoft-extrabold-webfont.woff2') format('woff2'),
-       url($fontPath+'qanelassoft-extrabold-webfont.woff') format('woff');
+  font-family: 'Qanelas';
+  src: url($fontPath+'qanelas-bold-webfont.woff2') format('woff2'),
+       url($fontPath+'qanelas-bold-webfont.woff') format('woff');
   font-weight: bold;
   font-style: normal;
 }

package/assets/sass/_func.scss

@@ -3,6 +3,7 @@ $mobileOnly: 'false'!default;
 
 // Declare global vars variable
 $vars: ()!default;
+$varsSM: ()!default;
 $varsMD: ()!default;
 
 $prefix: '';

package/assets/sass/_functions/functions.scss

@@ -1,7 +1,12 @@
 @use "sass:math";
+@use "sass:map";
 
 @import "../../../node_modules/bootstrap/scss/_functions.scss";
 
+@function spacing($int){
+  @return map.get($spacers, $int);
+}
+
 @function pow($x, $n) {
   $ret: 1;
     
@@ -139,3 +144,4 @@
 
   @return $split-arr;
 }
+

package/assets/sass/_functions/mixins.scss

@@ -156,16 +156,16 @@
 
 @mixin invert-colours($compatible:$compatible) {
   
-  --colour-body: white;
-  --colour-heading: white;
-  --colour-link: white;
-  --colour-hover: white;
-  --colour-border: white;
-  --colour-brand: white;
-
-  --btn-bg: white;
+  --colour-body: #{$colour-inverted};
+  --colour-heading: #{$colour-inverted};
+  --colour-link: #{$colour-inverted};
+  --colour-hover: #{$colour-inverted};
+  --colour-border: #{$colour-inverted};
+  --colour-brand: #{$colour-inverted};
+
+  --btn-bg: #{$colour-inverted};
   --btn-text: var(--colour-primary);
   --btn-hover-text: var(--colour-heading);
-  --btn-tertiary-bg: white;
+  --btn-tertiary-bg: #{$colour-inverted};
   --btn-tertiary-hover-text: var(--colour-primary);
 }

package/assets/sass/_functions/utilities.scss

@@ -120,6 +120,22 @@ $utilities: map-merge(
         "primary": linear-gradient(var(--gradient-direction), var(--colour-primary) 0, transparent 100%),
         "info": linear-gradient(var(--gradient-direction), var(--colour-info) 0, transparent 100%)
       )
+    ),
+    "colour": (
+      property: --colour,
+      class: colour,
+      values:
+      (
+        "primary": var(--colour-primary),
+        "secondary": var(--colour-secondary),
+        "info": var(--colour-info),
+        "success": var(--colour-success),
+        "warning": var(--colour-warning),
+        "danger": var(--colour-danger),
+        "light": var(--colour-light),
+        "dark": var(--colour-dark),
+        "admin": var(--colour-admin)
+      )
     )
   )
 );

package/assets/sass/_functions/variables.scss

@@ -1,3 +1,4 @@
+@use "sass:map";
 @import "../../../node_modules/bootstrap/scss/_variables.scss";
 @import "../../../node_modules/bootstrap/scss/_maps.scss";
 
@@ -17,7 +18,7 @@ $grid-breakpoints: (
 
 $device-xs-width: 375;
 $device-sm-width: 768;
-$device-md-width: 1440;
+$device-md-width: 1280;
 
 $container-max-widths: (
   sm: 0,
@@ -27,9 +28,11 @@ $container-max-widths: (
 $grid-columns: 12;
 $grid-gutter-width: 1rem; // 15px
 
-$container-padding-x: 20;
-$container-padding-x-md: 60;
+$container-padding-x: 24;
+$container-padding-x-sm: 40;
+$container-padding-x-md: 84;
 $container-padding: var(--container-padding-top) rem($container-padding-x) var(--container-padding-bottom) rem($container-padding-x);
+$container-padding-sm: var(--container-padding-top) rem($container-padding-x-sm) var(--container-padding-bottom) rem($container-padding-x-sm);
 $container-padding-md: var(--container-padding-top) rem($container-padding-x-md) var(--container-padding-bottom) rem($container-padding-x-md);
 
 $vars: map-merge((
@@ -38,13 +41,37 @@ $vars: map-merge((
   "--container-padding-x": #{rem($container-padding-x)},
   "--container-padding-x-md": #{rem($container-padding-x-md)},
   "--container-padding": $container-padding,
+  "--container-padding-sm": $container-padding-sm,
   "--container-padding-md": $container-padding-md
 ), $vars);
 
+$varsSM: map-merge((
+  "--container-padding": var(--container-padding-sm),
+  "--container-padding-x": var(--container-padding-x-sm)
+), $varsSM);
+
 $varsMD: map-merge((
   "--container-padding": var(--container-padding-md),
   "--container-padding-x": var(--container-padding-x-md)
 ), $varsMD);
+
+$spacer: 1rem;
+$spacers: (
+  0: 0,
+  1: $spacer * .5,
+  2: $spacer,
+  3: $spacer * 1.5,
+  4: $spacer * 2,
+  5: $spacer * 3,
+);
+
+@each $key, $value in $spacers {
+
+  $vars: map-merge((
+    --spacing-#{$key}: #{$value}
+  ), $vars);
+}
+
 // #endregion
 
 // #region Colours
@@ -60,14 +87,16 @@ $dark:          #46003c;
 
 
 // Functional/state variables 
-$colour-body: #6f6f6f;
+$colour-body: #595959;
 $colour-muted: #9d9d9d;
-$colour-border: #6f6f6f;
+$colour-border: #D8D8D8;
 $colour-link: $primary;
 $colour-focus: #000000;
 $colour-hover: #000000;
 $colour-active: $success;
 $colour-selected: $info;
+$body-color: $colour-body;
+$colour-inverted: #FCFCFC;
 
 $colors: ();
 $grays: ();
@@ -142,7 +171,9 @@ $non-theme-colors: map-merge((
   "focus":            $colour-focus,
   "hover":            $colour-hover,
   "active":           $colour-active,
-  "selected":         $colour-selected
+  "selected":         $colour-selected,
+  "body": $colour-body,
+  "inverted": $colour-inverted
 ), $non-theme-colors);
 
 @each $color, $value in $non-theme-colors {
@@ -154,7 +185,6 @@ $non-theme-colors: map-merge((
 }
 
 $vars: map-merge((
-  "--colour-body-theme":  rgba(to-rgb($colour-body),var(--alpha,1)),
   "--colour-white-theme": rgba(to-rgb(#ffffff),var(--alpha,1)),
   "--colour-black-theme": rgba(to-rgb(#000000),var(--alpha,1)),
   "--colour-body":  rgba(to-rgb($colour-body),var(--alpha,1)),
@@ -176,10 +206,10 @@ $aspect-ratios: (
 );
 // #endregion
 
-// #region fonts
+// #region Type
 
-$font-body: 'qanelasmedium', arial, sans-serif;
-$font-heading: 'qanelas_softextrabold', arial, sans-serif;
+$font-body: 'Qanelas', arial, sans-serif;
+$font-heading: 'Qanelas', arial, sans-serif;
 
 $fonts: ();
 $fonts: map-merge((
@@ -187,7 +217,6 @@ $fonts: map-merge((
   "body":   $font-body
 ), $fonts);
 
-
 @each $font, $value in $fonts {
 
   $vars: map-merge((
@@ -195,83 +224,82 @@ $fonts: map-merge((
   ), $vars);
 }
 
-// #endregion
 
-// #region Type
-
-$type-scale-1: #{rem(100)};
-$type-scale-2: #{rem(60)};
-$type-scale-3: #{rem(40)};
-$type-scale-4: #{rem(32)};
-$type-scale-5: #{rem(28)};
-$type-scale-6: #{rem(16)};
-$type-scale-7: #{rem(14)};
-
-$font-sizes: (
-  'display': $type-scale-3,
-  1: $type-scale-3,
-  2: $type-scale-4,
-  3: $type-scale-5,
-  4: $type-scale-6,
-  5: $type-scale-6,
-  6: $type-scale-6,
-  'badge': $badge-font-size,
-  'small': $type-scale-7,
-  'strapline': $type-scale-6
+/* Headings variables are setup this way so that we can export them into the vue documentation */
+$heading-sizes: (
+  /* H1 */
+  "h1_fs": 48,
+  "h1_lh": 56,
+  "h1_pb": 48,
+  "h1_fs_sm": 64,
+  "h1_lh_sm": 72,
+  "h1_pb_sm": 64,
+  /* H2 */
+  "h2_fs": 36,
+  "h2_lh": 44,
+  "h2_pb": 40,
+  "h2_fs_sm": 48,
+  "h2_lh_sm": 56,
+  "h2_pb_sm": 48,
+  /* H3 */
+  "h3_fs": 28,
+  "h3_lh": 36,
+  "h3_pb": 40,
+  "h3_fs_sm": 32,
+  "h3_lh_sm": 40,
+  "h3_pb_sm": 40,
+  /* H4 */
+  "h4_fs": 24,
+  "h4_lh": 32,
+  "h4_pb": 32,
+  "h4_fs_sm": 24,
+  "h4_lh_sm": 32,
+  "h4_pb_sm": 32,
+  "lead_fs": 18,
+  "lead_lh": 28,
+  "lead_pb": 48,
+  "body_fs": 16,
+  "body_lh": 24,
+  "body_pb": 48 - 24,
+  "body_end_pb": 48,
+  "small_fs": 14,
+  "small_lh": 24,
+  "small_pb": 48,
 );
 
-@each $size, $value in $font-sizes {
-
-  $vars: map-merge((
-    --fs-#{$size}: #{$value}
-  ), $vars);
-}
-
+/* H2 */
+$h1-font-size: rem(map-get($heading-sizes,"h1_fs"));
+$h2-font-size: rem(map-get($heading-sizes,"h2_fs"));
+$h3-font-size: rem(map-get($heading-sizes,"h3_fs"));
+$h4-font-size: rem(map-get($heading-sizes,"h4_fs"));
+$h5-font-size: rem(map-get($heading-sizes,"h4_fs"));
+$h6-font-size: rem(map-get($heading-sizes,"h4_fs"));
 
-$h1-font-size: var(--fs-1);
-$h2-font-size: var(--fs-2);
-$h3-font-size: var(--fs-3);
-$h4-font-size: var(--fs-4);
-$h5-font-size: var(--fs-5);
-$h6-font-size: var(--fs-6);
-
-$headings-margin-bottom: clamp(1rem,0.5em,0.5em);
-$headings-font-style: normal;
-$headings-line-height: clamp(1em,2.5rem,clamp(1.5em,1rem,1.2em));
-$display-line-height: $headings-line-height;
+$heading-weight: 700;
 
 @if $compatible == 'true' {
   $headings-font-family: $font-heading;
-  $headings-font-weight: 700;
+  $headings-font-weight: $heading-weight;
   $headings-color: $primary;
 }
 @else {
   $headings-font-family: var(--font-heading);
   $headings-font-weight: var(--heading-weight);
-  $headings-color: var(--colour-primary);
+  $headings-color: var(--colour-heading);
 }
 
-$font-md-sizes: (
-  'display': $type-scale-1,
-  1: $type-scale-2,
-  2: $type-scale-3,
-  3: $type-scale-4,
-  4: $type-scale-5,
-  'strapline': $type-scale-5
-);
-
-@each $size, $value in $font-md-sizes {
+$headings-margin-bottom: 0;
+$headings-font-style: normal;
+$headings-line-height: 2rem;
+$display-line-height: $headings-line-height;
 
-  $varsMD: map-merge((
-    --fs-#{$size}: #{$value}
-  ), $varsMD);
-}
 
 $vars: map-merge((
-  --heading-weight: 700
+  --heading-weight: $heading-weight
 ), $vars);
 
-$content-max-width: rem(820);
+$content-max-width-px: 800;
+$content-max-width: rem($content-max-width-px);
 $paragraph-margin-bottom: 2rem;
 
 // #endregion 
@@ -303,7 +331,8 @@ $input-line-height: 1.5;
 $input-padding-y: 0.75em;
 $input-padding-x: 1em;
 $input-border-radius: rem(10);
-$input-border-color: var(--colour-border);
+$input-border-color: var(--colour-primary);
+$input-border-width: 2px;
 
 // sm
 $input-height-sm: null;
@@ -329,8 +358,9 @@ $input-group-addon-border-color: var(--colour-border);
 $form-select-padding-y: $input-padding-y;
 //$form-select-indicator-padding
 $form-select-padding-x: #{$input-padding-x};
-$form-select-border-color: var(--colour-border);
+$form-select-border-color: var(--colour-primary);
 $form-select-border-radius: $input-border-radius;
+$form-select-border-width: 2px;
 
 // Checkbox
 $form-check-input-width: 1.5rem;
@@ -341,13 +371,13 @@ $form-check-margin-bottom: #{rem(16)};
 $form-check-input-border: 1px solid var(--colour-border);
 
 $form-check-input-checked-color:          $primary;
-$form-check-input-checked-bg-color:       var(--colour-success);
+$form-check-input-checked-bg-color:       var(--colour-info);
 $form-check-input-checked-border-color:   var(--colour-border);
 $form-check-input-checked-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-checked-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10l3 3l6-6'/></svg>");
 
 $form-check-input-indeterminate-color:          $primary;
-$form-check-input-indeterminate-bg-color:       var(--colour-success);
-$form-check-input-indeterminate-border-color:   var(--colour-success);
+$form-check-input-indeterminate-bg-color:       var(--colour-info);
+$form-check-input-indeterminate-border-color:   var(--colour-info);
 $form-check-input-indeterminate-bg-image:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$form-check-input-indeterminate-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M6 10h8'/></svg>");
 
 $form-switch-bg-image:    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$colour-border}'/></svg>");
@@ -375,7 +405,7 @@ $card-cap-bg: transparent;
 // #endregion card-variables
 
 // #region Icons
-$icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='2px'></path></svg>");
+$icon-blank: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><path d='M17 13v6c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-11c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-11c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293h6c0.552 0 1-0.448 1-1s-0.448-1-1-1h-6c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v11c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h11c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-6c0-0.552-0.448-1-1-1s-1 0.448-1 1zM10.707 14.707l9.293-9.293v3.586c0 0.552 0.448 1 1 1s1-0.448 1-1v-6c0-0.136-0.027-0.265-0.076-0.383s-0.121-0.228-0.216-0.323c-0.001-0.001-0.001-0.001-0.002-0.002-0.092-0.092-0.202-0.166-0.323-0.216-0.118-0.049-0.247-0.076-0.383-0.076h-6c-0.552 0-1 0.448-1 1s0.448 1 1 1h3.586l-9.293 9.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z' stroke-width='4px'></path></svg>");
 $icon-sort: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='101' height='101' preserveAspectRatio='none'%3E%3Cpath opacity='.3' d='M51 1l25 23 24 22H1l25-22zm0 100l25-23 24-22H1l25 22z'/%3E%3C/svg%3E");
 $icon-arrow: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'><path d='M6.5,2l9,9-9,9' style='fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px'/></svg>");
 $icon-close: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
@@ -397,26 +427,25 @@ $vars: map-merge((
 // #region pagination
 // Default
 $pagination-color: var(--colour-heading);
-$pagination-disabled-color: var(--colour-muted);
+$pagination-disabled-color: var(--colour-border);
 $pagination-bg: transparent;
 $pagination-border-width: 1px;
-$pagination-border-color: var(--colour-border);
+$pagination-border-color: var(--colour-primary);
 
 // Hover and focus
 $pagination-hover-color: var(--colour-heading);
-$pagination-hover-bg: var(--colour-muted);
-$pagination-hover-border-color: var(--colour-border);
-$pagination-focus-color: var(--colour-hover);
-$pagination-focus-bg: var(--colour-muted);
+$pagination-hover-bg: var(--colour-info);
+$pagination-hover-border-color: var(--colour-info);
+$pagination-focus-color: var(--colour-heading);
+$pagination-focus-bg: var(--colour-info);
 
 // Active
-$pagination-active-color: var(--body-bg);
-$pagination-active-bg: var(--colour-heading);
-$pagination-active-border-color: var(--colour-heading);
-
+$pagination-active-color: var(--colour-primary);
+$pagination-active-bg: var(--colour-info);
+$pagination-active-border-color: var(--colour-info);
 // Disabled
 $pagination-disabled-bg: $pagination-bg;
-$pagination-disabled-border-color: $pagination-border-color;
+$pagination-disabled-border-color: var(--colour-border);
 // #endregion
 
 // #region Accordion
@@ -465,4 +494,17 @@ $zindex-modal-backdrop:             var(--index-overlay);
 $zindex-modal:                      var(--index-overlay);
 $zindex-popover:                    var(--index-above);
 $zindex-tooltip:                    var(--index-above);
+// #endregion
+
+// #region Table
+$td-mw-px: 120;
+$td-mw: #{rem($td-mw-px)};
+$table-padding-px: 32;
+$table-padding: #{rem($table-padding-px)};
+$table-mh-sm-px: 200;
+$table-mh-sm: #{rem($table-mh-sm-px)};
+$table-mh-md-px: 400;
+$table-mh-md: #{rem($table-mh-md-px)};
+$table-mh-lg-px: 600;
+$table-mh-lg: #{rem($table-mh-lg-px)};
 // #endregion

package/assets/sass/_tests/colours.spec.scss

@@ -13,7 +13,7 @@ $test_colors: map-merge((
   "dark": rgba(70, 0, 60, var(--alpha, 1)),
   "muted-theme": #9d9d9d,
   "muted": var(--colour-muted-theme),
-  "border-theme": #6f6f6f,
+  "border-theme": #D8D8D8,
   "border": var(--colour-border-theme),
   "link-theme": #00313c,
   "link": var(--colour-link-theme),

package/assets/sass/_tests/mixins.spec.scss

@@ -181,7 +181,7 @@
         @include font-size($h1-font-size, 'true');
       }
       @include expect {
-        font-size: var(--fs-1);
+        font-size: 3rem;
         font-size: $h1-font-size;
       }
     }