@sats-group/ui-lib 81.1.0 → 81.3.0

package/react/dropdown-list/dropdown-list.scss

@@ -1,6 +1,6 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/spacing';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 
 .dropdown-list {
   $breakpoint: 900px;
@@ -9,8 +9,8 @@
 
   &__wrapper {
     border-radius: corner-radius.$s;
-    border: 1px solid light.$ge-divider-default;
-    background-color: light.$surface-primary-default;
+    border: 1px solid var(--ge-divider-default);
+    background-color: var(--surface-primary-default);
     margin-top: spacing.$xxs;
     min-width: 180px;
 
@@ -20,66 +20,66 @@
 
     &--theme-light {
       &-clicked {
-        background-color: light.$surface-primary-hover;
+        background-color: var(--surface-primary-hover);
       }
 
       &-disabled {
-        border-color: light.$surface-primary-default;
+        border-color: var(--surface-primary-default);
       }
 
       @media (hover: hover) {
         &:hover {
-          background-color: light.$surface-primary-hover;
+          background-color: var(--surface-primary-hover);
         }
 
         &-disabled {
           &:hover {
-            background-color: light.$surface-primary-default;
-            border-color: light.$surface-primary-default;
+            background-color: var(--surface-primary-default);
+            border-color: var(--surface-primary-default);
           }
         }
       }
 
       @media (hover: none) {
         &:hover {
-          background-color: light.$surface-primary-default;
-          border-color: light.$surface-primary-default;
+          background-color: var(--surface-primary-default);
+          border-color: var(--surface-primary-default);
         }
       }
     }
 
     &--theme-dark {
-      background-color: light.$fixed-surface-secondary-default;
-      border-color: light.$fixed-surface-secondary-default;
+      background-color: var(--fixed-surface-secondary-default);
+      border-color: var(--fixed-surface-secondary-default);
 
       &-clicked {
-        background-color: light.$fixed-surface-secondary-hover;
-        border-color: light.$fixed-surface-secondary-hover;
+        background-color: var(--fixed-surface-secondary-hover);
+        border-color: var(--fixed-surface-secondary-hover);
       }
 
       &-disabled {
-        background-color: light.$fixed-surface-secondary-default;
-        border-color: light.$fixed-surface-secondary-default;
+        background-color: var(--fixed-surface-secondary-default);
+        border-color: var(--fixed-surface-secondary-default);
       }
 
       @media (hover: hover) {
         &:hover {
-          background-color: light.$fixed-surface-secondary-hover;
-          border-color: light.$fixed-surface-secondary-hover;
+          background-color: var(--fixed-surface-secondary-hover);
+          border-color: var(--fixed-surface-secondary-hover);
         }
 
         &-disabled {
           &:hover {
-            background-color: light.$fixed-surface-secondary-default;
-            border-color: light.$fixed-surface-secondary-default;
+            background-color: var(--fixed-surface-secondary-default);
+            border-color: var(--fixed-surface-secondary-default);
           }
         }
       }
 
       @media (hover: none) {
         &:hover {
-          background-color: light.$fixed-surface-secondary-default;
-          border-color: light.$fixed-surface-secondary-default;
+          background-color: var(--fixed-surface-secondary-default);
+          border-color: var(--fixed-surface-secondary-default);
         }
       }
     }
@@ -106,20 +106,20 @@
     &--theme-light {
       &-disabled {
         cursor: not-allowed;
-        color: light.$on-surface-primary-disabled;
+        color: var(--on-surface-primary-disabled);
       }
     }
 
     &--theme-dark {
-      color: light.$on-fixed-surface-secondary-default;
+      color: var(--on-fixed-surface-secondary-default);
 
       &-disabled {
-        color: light.$on-fixed-surface-secondary-disabled;
+        color: var(--on-fixed-surface-secondary-disabled);
         cursor: not-allowed;
       }
 
       &-clicked {
-        color: light.$on-fixed-surface-secondary-default;
+        color: var(--on-fixed-surface-secondary-default);
       }
     }
   }
@@ -138,18 +138,18 @@
 
   &__information {
     &--theme-light {
-      color: light.$on-surface-primary-alternate;
+      color: var(--on-surface-primary-alternate);
 
       &-disabled {
-        color: light.$on-surface-primary-disabled;
+        color: var(--on-surface-primary-disabled);
       }
     }
 
     &--theme-dark {
-      color: light.$on-fixed-surface-secondary-alternate;
+      color: var(--on-fixed-surface-secondary-alternate);
 
       &-disabled {
-        color: light.$on-fixed-surface-secondary-disabled;
+        color: var(--on-fixed-surface-secondary-disabled);
       }
     }
   }
@@ -157,13 +157,13 @@
   &__label {
     &--theme-light {
       &-disabled {
-        color: light.$on-surface-primary-disabled;
+        color: var(--on-surface-primary-disabled);
       }
     }
     &--theme-dark {
-      color: light.$on-fixed-surface-primary-default;
+      color: var(--on-fixed-surface-primary-default);
       &-disabled {
-        color: light.$on-fixed-background-primary-disabled;
+        color: var(--on-fixed-background-primary-disabled);
       }
     }
   }

package/react/expander/expander.js

@@ -1,2 +1,2 @@
-"use client";var w=Object.defineProperty,z=Object.defineProperties;var C=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var E=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var N=(i,n,r)=>n in i?w(i,n,{enumerable:!0,configurable:!0,writable:!0,value:r}):i[n]=r,o=(i,n)=>{for(var r in n||(n={}))E.call(n,r)&&N(i,r,n[r]);if(h)for(var r of h(n))I.call(n,r)&&N(i,r,n[r]);return i},u=(i,n)=>z(i,C(n));import _ from"classnames";import e,{useState as k}from"react";import b from"../icons/24/arrow-down";import L from"../link-button";import s from"../text";import g from"../badge";import{Types as A}from"../badge/badge.types";import c from"../link";import O from"../collapse";const S=({actions:i,contentType:n="article",defaultOpen:r=!1,faq:d,icon:p,id:m,links:a,children:f,metadata:x,title:P,value:v})=>{const[t,y]=k(r),T=()=>y(!t);return e.createElement("div",{className:"expander__list-item",key:m,itemScope:d||void 0,itemProp:d?"mainEntity":void 0,itemType:d?"https://schema.org/Question":void 0},e.createElement("button",{"aria-controls":m,"aria-expanded":t,className:_("expander__trigger",{"expander__trigger--triggered":t,"expander__trigger--w-value":v}),onClick:T},p?e.createElement("div",{className:"expander__icon"},p):null,e.createElement("div",{className:"expander__trigger-title"},e.createElement(s,{elementName:"h3",itemProp:d?"name":void 0,tight:!0},P)),v?e.createElement(g,{content:{content:v,type:A.Numerical},variant:g.variants.secondary}):null,e.createElement("div",{className:_("expander__icon",{"expander__icon--flipped":t})},e.createElement(b,null))),e.createElement("div",{className:_("expander__drawer",{"expander__drawer--open":t}),id:m},e.createElement(O,{isOpen:t},e.createElement("div",{className:_("expander__content",{[`expander__content--${n}`]:n}),itemScope:d||void 0,itemProp:d?"acceptedAnswer":void 0,itemType:d?"https://schema.org/Answer":void 0},e.createElement("div",{className:"expander__children",itemProp:d?"text":void 0},f),i.length?e.createElement("div",{className:"expander__actions"},i.map(l=>e.createElement("div",{className:"expander__action",key:l.href},e.createElement(L,o({},l))))):null,x||a&&a.length?e.createElement("div",{className:"expander__metadata"},e.createElement("hr",{className:"expander__divider"}),e.createElement("div",{className:"expander__meta-content"},x?e.createElement("div",{className:"expander__meta-text"},e.createElement(s,{elementName:"span",size:s.sizes.small},x)):null,a&&a.length?e.createElement("div",{className:"expander__links"},a.map(l=>e.createElement("div",{className:"expander__link",key:l.href},e.createElement(c,u(o({},l),{size:c.sizes.small}))))):null)):null))))},B=({description:i,faq:n,itemRenderer:r,items:d,title:p})=>e.createElement("div",{className:"expander"},p||i?e.createElement("div",{className:"expander__header"},p?e.createElement(s,{elementName:"h2",size:s.sizes.headline2,theme:s.themes.emphasis,tight:!0},p):null,i?e.createElement(s,{size:s.sizes.basic},i):null):null,e.createElement("div",null,d.map(m=>e.createElement(S,u(o({key:m.listItemProps.id},m.listItemProps),{faq:n}),e.createElement(r,m.props)))));var U=B;export{U as default};
+"use client";var C=Object.defineProperty,E=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var k=Object.prototype.hasOwnProperty,b=Object.prototype.propertyIsEnumerable;var c=(n,i,r)=>i in n?C(n,i,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[i]=r,o=(n,i)=>{for(var r in i||(i={}))k.call(i,r)&&c(n,r,i[r]);if(g)for(var r of g(i))b.call(i,r)&&c(n,r,i[r]);return n},u=(n,i)=>E(n,I(i));import _ from"classnames";import e,{useState as L}from"react";import A from"../icons/24/arrow-down";import O from"../link-button";import d from"../text";import f from"../badge";import{Types as S}from"../badge/badge.types";import P from"../link";import B from"../collapse";import h from"../tag";const F=({actions:n,contentType:i="article",defaultOpen:r=!1,faq:s,icon:p,id:m,links:a,children:T,metadata:v,tag:N,title:y,value:x})=>{const[t,z]=L(r),w=()=>z(!t);return e.createElement("div",{className:"expander__list-item",key:m,itemScope:s||void 0,itemProp:s?"mainEntity":void 0,itemType:s?"https://schema.org/Question":void 0},e.createElement("button",{"aria-controls":m,"aria-expanded":t,className:_("expander__trigger",{"expander__trigger--triggered":t,"expander__trigger--w-value":x}),onClick:w},p?e.createElement("div",{className:"expander__icon"},p):null,e.createElement("div",{className:"expander__trigger-title"},e.createElement(d,{elementName:"h3",itemProp:s?"name":void 0,tight:!0},y),N?e.createElement(h,o({size:h.sizes.s,variant:h.variants.positive},N)):null),x?e.createElement(f,{content:{content:x,type:S.Numerical},variant:f.variants.secondary}):null,e.createElement("div",{className:_("expander__icon",{"expander__icon--flipped":t})},e.createElement(A,null))),e.createElement("div",{className:_("expander__drawer",{"expander__drawer--open":t}),id:m},e.createElement(B,{isOpen:t},e.createElement("div",{className:_("expander__content",{[`expander__content--${i}`]:i}),itemScope:s||void 0,itemProp:s?"acceptedAnswer":void 0,itemType:s?"https://schema.org/Answer":void 0},e.createElement("div",{className:"expander__children",itemProp:s?"text":void 0},T),n.length?e.createElement("div",{className:"expander__actions"},n.map(l=>e.createElement("div",{className:"expander__action",key:l.href},e.createElement(O,o({},l))))):null,v||a&&a.length?e.createElement("div",{className:"expander__metadata"},e.createElement("hr",{className:"expander__divider"}),e.createElement("div",{className:"expander__meta-content"},v?e.createElement("div",{className:"expander__meta-text"},e.createElement(d,{elementName:"span",size:d.sizes.small},v)):null,a&&a.length?e.createElement("div",{className:"expander__links"},a.map(l=>e.createElement("div",{className:"expander__link",key:l.href},e.createElement(P,u(o({},l),{size:P.sizes.small}))))):null)):null))))},D=({description:n,faq:i,itemRenderer:r,items:s,title:p})=>e.createElement("div",{className:"expander"},p||n?e.createElement("div",{className:"expander__header"},p?e.createElement(d,{elementName:"h2",size:d.sizes.headline2,theme:d.themes.emphasis,tight:!0},p):null,n?e.createElement(d,{size:d.sizes.basic},n):null):null,e.createElement("div",null,s.map(m=>e.createElement(F,u(o({key:m.listItemProps.id},m.listItemProps),{faq:i}),e.createElement(r,m.props)))));var Y=D;export{Y as default};
 //# sourceMappingURL=expander.js.map

package/react/expander/expander.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/expander/expander.tsx"],
-  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport React, { useState } from 'react';\n\nimport ArrowDown from '../icons/24/arrow-down';\nimport LinkButton from '../link-button';\nimport Text from '../text';\n\nimport { type Expander as Props } from './expander.types';\nimport Badge from '../badge';\nimport { Types } from '../badge/badge.types';\nimport Link from '../link';\nimport Collapse from '../collapse';\n\nconst ExpanderListItem: React.FC<\n  React.PropsWithChildren<Props<unknown>['items'][number]['listItemProps']>\n> = ({\n  actions,\n  contentType = 'article',\n  defaultOpen = false,\n  faq,\n  icon,\n  id,\n  links,\n  children,\n  metadata,\n  title,\n  value,\n}) => {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n\n  const toggle = () => setIsOpen(!isOpen);\n\n  return (\n    <div\n      className=\"expander__list-item\"\n      key={id}\n      itemScope={faq ? faq : undefined}\n      itemProp={faq ? 'mainEntity' : undefined}\n      itemType={faq ? 'https://schema.org/Question' : undefined}\n    >\n      <button\n        aria-controls={id}\n        aria-expanded={isOpen}\n        className={cn('expander__trigger', {\n          'expander__trigger--triggered': isOpen,\n          'expander__trigger--w-value': value,\n        })}\n        onClick={toggle}\n      >\n        {icon ? <div className=\"expander__icon\">{icon}</div> : null}\n        <div className=\"expander__trigger-title\">\n          <Text elementName=\"h3\" itemProp={faq ? 'name' : undefined} tight>\n            {title}\n          </Text>\n        </div>\n        {value ? (\n          <Badge\n            content={{ content: value, type: Types.Numerical }}\n            variant={Badge.variants.secondary}\n          />\n        ) : null}\n        <div\n          className={cn('expander__icon', {\n            'expander__icon--flipped': isOpen,\n          })}\n        >\n          <ArrowDown />\n        </div>\n      </button>\n      <div\n        className={cn('expander__drawer', {\n          'expander__drawer--open': isOpen,\n        })}\n        id={id}\n      >\n        <Collapse isOpen={isOpen}>\n          <div\n            className={cn('expander__content', {\n              [`expander__content--${contentType}`]: contentType,\n            })}\n            itemScope={faq ? faq : undefined}\n            itemProp={faq ? 'acceptedAnswer' : undefined}\n            itemType={faq ? 'https://schema.org/Answer' : undefined}\n          >\n            <div\n              className=\"expander__children\"\n              itemProp={faq ? 'text' : undefined}\n            >\n              {children}\n            </div>\n            {actions.length ? (\n              <div className=\"expander__actions\">\n                {actions.map(action => (\n                  <div className=\"expander__action\" key={action.href}>\n                    <LinkButton {...action} />\n                  </div>\n                ))}\n              </div>\n            ) : null}\n            {metadata || (links && links.length) ? (\n              <div className=\"expander__metadata\">\n                <hr className=\"expander__divider\" />\n                <div className=\"expander__meta-content\">\n                  {metadata ? (\n                    <div className=\"expander__meta-text\">\n                      <Text elementName=\"span\" size={Text.sizes.small}>\n                        {metadata}\n                      </Text>\n                    </div>\n                  ) : null}\n                  {links && links.length ? (\n                    <div className=\"expander__links\">\n                      {links.map(link => (\n                        <div className=\"expander__link\" key={link.href}>\n                          <Link {...link} size={Link.sizes.small} />\n                        </div>\n                      ))}\n                    </div>\n                  ) : null}\n                </div>\n              </div>\n            ) : null}\n          </div>\n        </Collapse>\n      </div>\n    </div>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nconst Expander = <T extends {}>({\n  description,\n  faq,\n  itemRenderer,\n  items,\n  title,\n}: Props<T> & { itemRenderer: React.FC<T> }) => (\n  <div className=\"expander\">\n    {title || description ? (\n      <div className=\"expander__header\">\n        {title ? (\n          <Text\n            elementName=\"h2\"\n            size={Text.sizes.headline2}\n            theme={Text.themes.emphasis}\n            tight\n          >\n            {title}\n          </Text>\n        ) : null}\n        {description ? (\n          <Text size={Text.sizes.basic}>{description}</Text>\n        ) : null}\n      </div>\n    ) : null}\n    <div>\n      {items.map(item => (\n        <ExpanderListItem\n          key={item.listItemProps.id}\n          {...item.listItemProps}\n          faq={faq}\n        >\n          {React.createElement(itemRenderer, item.props)}\n        </ExpanderListItem>\n      ))}\n    </div>\n  </div>\n);\n\nexport default Expander;\n"],
-  "mappings": "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",
-  "names": ["cn", "React", "useState", "ArrowDown", "LinkButton", "Text", "Badge", "Types", "Link", "Collapse", "ExpanderListItem", "actions", "contentType", "defaultOpen", "faq", "icon", "id", "links", "children", "metadata", "title", "value", "isOpen", "setIsOpen", "toggle", "action", "__spreadValues", "link", "__spreadProps", "Expander", "description", "itemRenderer", "items", "item", "expander_default"]
+  "sourcesContent": ["'use client';\n\nimport cn from 'classnames';\nimport React, { useState } from 'react';\n\nimport ArrowDown from '../icons/24/arrow-down';\nimport LinkButton from '../link-button';\nimport Text from '../text';\n\nimport { type Expander as Props } from './expander.types';\nimport Badge from '../badge';\nimport { Types } from '../badge/badge.types';\nimport Link from '../link';\nimport Collapse from '../collapse';\nimport Tag from '../tag';\n\nconst ExpanderListItem: React.FC<\n  React.PropsWithChildren<Props<unknown>['items'][number]['listItemProps']>\n> = ({\n  actions,\n  contentType = 'article',\n  defaultOpen = false,\n  faq,\n  icon,\n  id,\n  links,\n  children,\n  metadata,\n  tag,\n  title,\n  value,\n}) => {\n  const [isOpen, setIsOpen] = useState(defaultOpen);\n\n  const toggle = () => setIsOpen(!isOpen);\n\n  return (\n    <div\n      className=\"expander__list-item\"\n      key={id}\n      itemScope={faq ? faq : undefined}\n      itemProp={faq ? 'mainEntity' : undefined}\n      itemType={faq ? 'https://schema.org/Question' : undefined}\n    >\n      <button\n        aria-controls={id}\n        aria-expanded={isOpen}\n        className={cn('expander__trigger', {\n          'expander__trigger--triggered': isOpen,\n          'expander__trigger--w-value': value,\n        })}\n        onClick={toggle}\n      >\n        {icon ? <div className=\"expander__icon\">{icon}</div> : null}\n        <div className=\"expander__trigger-title\">\n          <Text elementName=\"h3\" itemProp={faq ? 'name' : undefined} tight>\n            {title}\n          </Text>\n          {tag ? (\n            <Tag size={Tag.sizes.s} variant={Tag.variants.positive} {...tag} />\n          ) : null}\n        </div>\n        {value ? (\n          <Badge\n            content={{ content: value, type: Types.Numerical }}\n            variant={Badge.variants.secondary}\n          />\n        ) : null}\n        <div\n          className={cn('expander__icon', {\n            'expander__icon--flipped': isOpen,\n          })}\n        >\n          <ArrowDown />\n        </div>\n      </button>\n      <div\n        className={cn('expander__drawer', {\n          'expander__drawer--open': isOpen,\n        })}\n        id={id}\n      >\n        <Collapse isOpen={isOpen}>\n          <div\n            className={cn('expander__content', {\n              [`expander__content--${contentType}`]: contentType,\n            })}\n            itemScope={faq ? faq : undefined}\n            itemProp={faq ? 'acceptedAnswer' : undefined}\n            itemType={faq ? 'https://schema.org/Answer' : undefined}\n          >\n            <div\n              className=\"expander__children\"\n              itemProp={faq ? 'text' : undefined}\n            >\n              {children}\n            </div>\n            {actions.length ? (\n              <div className=\"expander__actions\">\n                {actions.map(action => (\n                  <div className=\"expander__action\" key={action.href}>\n                    <LinkButton {...action} />\n                  </div>\n                ))}\n              </div>\n            ) : null}\n            {metadata || (links && links.length) ? (\n              <div className=\"expander__metadata\">\n                <hr className=\"expander__divider\" />\n                <div className=\"expander__meta-content\">\n                  {metadata ? (\n                    <div className=\"expander__meta-text\">\n                      <Text elementName=\"span\" size={Text.sizes.small}>\n                        {metadata}\n                      </Text>\n                    </div>\n                  ) : null}\n                  {links && links.length ? (\n                    <div className=\"expander__links\">\n                      {links.map(link => (\n                        <div className=\"expander__link\" key={link.href}>\n                          <Link {...link} size={Link.sizes.small} />\n                        </div>\n                      ))}\n                    </div>\n                  ) : null}\n                </div>\n              </div>\n            ) : null}\n          </div>\n        </Collapse>\n      </div>\n    </div>\n  );\n};\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\nconst Expander = <T extends {}>({\n  description,\n  faq,\n  itemRenderer,\n  items,\n  title,\n}: Props<T> & { itemRenderer: React.FC<T> }) => (\n  <div className=\"expander\">\n    {title || description ? (\n      <div className=\"expander__header\">\n        {title ? (\n          <Text\n            elementName=\"h2\"\n            size={Text.sizes.headline2}\n            theme={Text.themes.emphasis}\n            tight\n          >\n            {title}\n          </Text>\n        ) : null}\n        {description ? (\n          <Text size={Text.sizes.basic}>{description}</Text>\n        ) : null}\n      </div>\n    ) : null}\n    <div>\n      {items.map(item => (\n        <ExpanderListItem\n          key={item.listItemProps.id}\n          {...item.listItemProps}\n          faq={faq}\n        >\n          {React.createElement(itemRenderer, item.props)}\n        </ExpanderListItem>\n      ))}\n    </div>\n  </div>\n);\n\nexport default Expander;\n"],
+  "mappings": "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",
+  "names": ["cn", "React", "useState", "ArrowDown", "LinkButton", "Text", "Badge", "Types", "Link", "Collapse", "Tag", "ExpanderListItem", "actions", "contentType", "defaultOpen", "faq", "icon", "id", "links", "children", "metadata", "tag", "title", "value", "isOpen", "setIsOpen", "toggle", "__spreadValues", "action", "link", "__spreadProps", "Expander", "description", "itemRenderer", "items", "item", "expander_default"]
 }

package/react/expander/expander.scss

@@ -1,4 +1,4 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .expander {
@@ -22,7 +22,7 @@
     align-items: center;
     background: transparent;
     border: 0;
-    border-bottom: 1px solid light.$ge-divider-default;
+    border-bottom: 1px solid var(--ge-divider-default);
     cursor: pointer;
     display: flex;
     gap: spacing.$xs;
@@ -32,7 +32,7 @@
     width: 100%;
 
     &--triggered {
-      background: light.$background-primary-default;
+      background: var(--background-primary-default);
     }
 
     @include break {
@@ -42,12 +42,15 @@
 
     @media (hover: hover) {
       &:hover {
-        background: light.$surface-primary-hover;
+        background: var(--surface-primary-hover);
       }
     }
   }
 
   &__trigger-title {
+    display: flex;
+    align-items: center;
+    column-gap: spacing.$s;
     margin-right: auto;
     text-align: left;
   }
@@ -63,12 +66,12 @@
   }
 
   &__drawer {
-    background: light.$surface-primary-default;
+    background: var(--surface-primary-default);
   }
 
   &__content {
-    border-bottom: 1px solid light.$ge-divider-default;
-    border-top: 1px solid light.$ge-divider-default;
+    border-bottom: 1px solid var(--ge-divider-default);
+    border-top: 1px solid var(--ge-divider-default);
     display: grid;
     gap: spacing.$m;
     padding: 20px;
@@ -100,11 +103,11 @@
   }
 
   &__meta-text {
-    color: light.$on-surface-primary-alternate;
+    color: var(--on-surface-primary-alternate);
   }
 
   &__divider {
-    background: light.$ge-divider-default;
+    background: var(--ge-divider-default);
     border: 0;
     height: 1px;
     margin: 0;

package/react/expander/expander.types.d.ts

@@ -2,6 +2,7 @@ import type { ReactNode } from 'react';
 import type { Link } from '../link/link.types';
 import type { LinkButton } from '../link-button/link-button.types';
 import { ObjectValues } from '../types';
+import { Tag } from '../tag/tag.types';
 export declare const contentTypes: {
     readonly article: "article";
     readonly list: "list";
@@ -15,6 +16,7 @@ type ExpanderListItem = {
     id: string;
     links?: Pick<Link, 'href' | 'testId' | 'text'>[];
     metadata?: string;
+    tag?: Tag;
     title: string;
     value?: number;
 };

package/react/expander/expander.types.js

@@ -1,2 +1,2 @@
-const n={article:"article",list:"list"};export{n as contentTypes};
+const o={article:"article",list:"list"};export{o as contentTypes};
 //# sourceMappingURL=expander.types.js.map

package/react/expander/expander.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/expander/expander.types.ts"],
-  "sourcesContent": ["import type { ReactNode } from 'react';\n\nimport type { Link } from '../link/link.types';\nimport type { LinkButton } from '../link-button/link-button.types';\nimport { ObjectValues } from '../types';\n\nexport const contentTypes = {\n  article: 'article',\n  list: 'list',\n} as const;\n\ntype ExpanderListItem = {\n  actions: LinkButton[];\n  contentType?: ObjectValues<typeof contentTypes>;\n  defaultOpen?: boolean;\n  faq?: boolean;\n  icon?: ReactNode;\n  id: string;\n  links?: Pick<Link, 'href' | 'testId' | 'text'>[];\n  metadata?: string;\n  title: string;\n  value?: number;\n};\n\nexport type Expander<T> = {\n  description?: string;\n  faq?: boolean;\n  items: {\n    listItemProps: ExpanderListItem;\n    props: T;\n  }[];\n  title?: string;\n};\n"],
-  "mappings": "AAMO,MAAMA,EAAe,CAC1B,QAAS,UACT,KAAM,MACR",
+  "sourcesContent": ["import type { ReactNode } from 'react';\n\nimport type { Link } from '../link/link.types';\nimport type { LinkButton } from '../link-button/link-button.types';\nimport { ObjectValues } from '../types';\nimport { Tag } from '../tag/tag.types';\n\nexport const contentTypes = {\n  article: 'article',\n  list: 'list',\n} as const;\n\ntype ExpanderListItem = {\n  actions: LinkButton[];\n  contentType?: ObjectValues<typeof contentTypes>;\n  defaultOpen?: boolean;\n  faq?: boolean;\n  icon?: ReactNode;\n  id: string;\n  links?: Pick<Link, 'href' | 'testId' | 'text'>[];\n  metadata?: string;\n  tag?: Tag;\n  title: string;\n  value?: number;\n};\n\nexport type Expander<T> = {\n  description?: string;\n  faq?: boolean;\n  items: {\n    listItemProps: ExpanderListItem;\n    props: T;\n  }[];\n  title?: string;\n};\n"],
+  "mappings": "AAOO,MAAMA,EAAe,CAC1B,QAAS,UACT,KAAM,MACR",
   "names": ["contentTypes"]
 }

package/react/filter/filter.scss

@@ -1,5 +1,5 @@
 @use '../../tokens/corner-radius';
-@use '../../tokens/light.scss';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .filter {
@@ -7,8 +7,8 @@
   $breakpointSmall: 500px;
 
   border-radius: corner-radius.$s;
-  background-color: light.$surface-primary-default;
-  border: 1px solid light.$ge-divider-default;
+  background-color: var(--surface-primary-default);
+  border: 1px solid var(--ge-divider-default);
   min-width: 180px;
   display: flex;
   flex-direction: column;
@@ -22,20 +22,20 @@
     width: 100%;
 
     &:last-of-type {
-      border-bottom: 1px solid light.$ge-divider-default;
+      border-bottom: 1px solid var(--ge-divider-default);
     }
   }
 
   @media (hover: hover) {
     &:hover {
-      background-color: light.$surface-primary-hover;
-      border-color: light.$ge-divider-alternate;
+      background-color: var(--surface-primary-hover);
+      border-color: var(--ge-divider-alternate);
     }
   }
 
   &--clicked {
-    background-color: light.$surface-primary-hover;
-    border-color: light.$ge-divider-alternate;
+    background-color: var(--surface-primary-hover);
+    border-color: var(--ge-divider-alternate);
   }
 
   @media (min-width: $breakpoint) {
@@ -66,7 +66,7 @@
   }
 
   &__loading-icon {
-    color: light.$on-surface-primary-disabled;
+    color: var(--on-surface-primary-disabled);
   }
 
   &__button-text {
@@ -83,8 +83,8 @@
   &__selected-options {
     box-sizing: border-box;
     border-radius: corner-radius.$l;
-    color: light.$on-ge-on-badge-secondary;
-    background: light.$ge-badge-secondary;
+    color: var(--on-ge-on-badge-secondary);
+    background: var(--ge-badge-secondary);
     display: flex;
     justify-content: center;
     align-items: center;

package/react/flag/flag.scss

@@ -1,10 +1,10 @@
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .flag {
   border-top-left-radius: 8px;
   clip-path: polygon(0 0, 100% 0, calc(100% - #{spacing.$s}) 100%, 0 100%);
-  color: light.$on-ge-on-tags-featured-default;
+  color: var(--on-ge-on-tags-featured-default);
   padding: spacing.$xxs (spacing.$s * 2) spacing.$xxs spacing.$s;
   text-transform: uppercase;
 
@@ -17,10 +17,10 @@
   }
 
   &--variant-featured {
-    background: light.$ge-tags-featured;
+    background: var(--ge-tags-featured);
   }
 
   &--variant-primary {
-    background: light.$ge-tags-primary;
+    background: var(--ge-tags-primary);
   }
 }

package/react/form-content/form-content.scss

@@ -1,6 +1,6 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/elevation';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .form-content {
@@ -14,7 +14,7 @@
       height: 100%;
       top: 0;
       left: 0;
-      background: light.$fixed-background-primary-default;
+      background: var(--fixed-background-primary-default);
       opacity: 0.2;
       z-index: 400;
     }
@@ -34,7 +34,7 @@
       bottom: 0;
       right: 0;
 
-      background-color: light.$surface-primary-default;
+      background-color: var(--surface-primary-default);
       z-index: 500;
 
       border-radius: corner-radius.$s;
@@ -76,7 +76,7 @@
     display: grid;
     grid-template-columns: 1fr auto;
     align-items: center;
-    border-bottom: 1px solid light.$ge-divider-default;
+    border-bottom: 1px solid var(--ge-divider-default);
     padding: spacing.$s;
 
     @media (min-width: $breakpoint) {
@@ -103,7 +103,7 @@
   }
 
   &__modal-action-wrapper {
-    border-top: 1px solid light.$ge-divider-default;
+    border-top: 1px solid var(--ge-divider-default);
     padding: spacing.$s;
   }
 
@@ -152,7 +152,7 @@
     display: flex;
     align-items: center;
     margin: 0 spacing.$l;
-    border-bottom: 1px solid light.$ge-divider-default;
+    border-bottom: 1px solid var(--ge-divider-default);
     line-height: 0;
 
     &--hidden {
@@ -167,7 +167,7 @@
     background: none;
     width: 100%;
     margin-left: spacing.$xs;
-    color: light.$on-surface-primary-default;
+    color: var(--on-surface-primary-default);
     border: none;
     padding: spacing.$s 0;
     padding-top: calc(spacing.$s + 2px);
@@ -180,7 +180,7 @@
     text-align: left;
 
     &--disabled {
-      color: light.$on-surface-primary-default;
+      color: var(--on-surface-primary-default);
     }
   }
 
@@ -195,8 +195,8 @@
 
   &__checkbox-category-number {
     border-radius: 100%;
-    color: light.$on-ge-on-tags-primary-default;
-    background: light.$ge-tags-primary;
+    color: var(--on-ge-on-tags-primary-default);
+    background: var(--ge-tags-primary);
     width: 24px;
     display: flex;
     justify-content: center;
@@ -224,7 +224,7 @@
 
   &__range-line {
     width: 21px;
-    border-bottom: 1px solid light.$ge-divider-alternate;
+    border-bottom: 1px solid var(--ge-divider-alternate);
     margin: 0 spacing.$m;
   }
 

package/react/link/link.scss

@@ -1,5 +1,5 @@
 @use '../../tokens/spacing';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 
 .link {
   display: inline-flex;
@@ -7,36 +7,36 @@
   gap: spacing.$xs;
 
   &--background-default {
-    color: light.$on-buttons-on-link-default;
+    color: var(--on-buttons-on-link-default);
     @media (hover: hover) {
       &:hover {
-        color: light.$on-buttons-on-link-hover;
+        color: var(--on-buttons-on-link-hover);
       }
     }
 
     &-orange {
-      color: light.$on-buttons-on-action-default;
+      color: var(--on-buttons-on-action-default);
       @media (hover: hover) {
         &:hover {
-          color: light.$on-buttons-on-action-pressed;
+          color: var(--on-buttons-on-action-pressed);
         }
       }
     }
   }
 
   &--background-fixed {
-    color: light.$on-buttons-on-fixed-link-default;
+    color: var(--on-buttons-on-fixed-link-default);
     @media (hover: hover) {
       &:hover {
-        color: light.$on-buttons-on-fixed-link-hover;
+        color: var(--on-buttons-on-fixed-link-hover);
       }
     }
 
     &-orange {
-      color: light.$on-buttons-on-fixed-action-default;
+      color: var(--on-buttons-on-fixed-action-default);
       @media (hover: hover) {
         &:hover {
-          color: light.$on-buttons-on-fixed-action-pressed;
+          color: var(--on-buttons-on-fixed-action-pressed);
         }
       }
     }

package/react/link-card/link-card.scss

@@ -1,14 +1,14 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/elevation';
-@use '../../tokens/light';
+@use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .link-card {
   @include elevation.level(2);
 
-  background: light.$surface-primary-default;
+  background: var(--surface-primary-default);
   border-radius: corner-radius.$s;
-  color:  light.$on-surface-primary-default;
+  color:  var(--on-surface-primary-default);
   display: grid;
   gap: spacing.$s;
   grid-template-columns: [first] [second];
@@ -17,12 +17,12 @@
 
   @media (hover: hover) {
     &:hover {
-      background: light.$surface-primary-hover;
+      background: var(--surface-primary-hover);
     }
   }
 
   &__title {
-    color: light.$on-surface-primary-default;
+    color: var(--on-surface-primary-default);
     grid-column: 1;
   }