@sats-group/ui-lib 81.3.0 → 81.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "81.3.0",
+  "version": "81.5.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",

package/react/icons/24/download.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+declare const SvgDownload: () => React.ReactSVGElement;
+export default SvgDownload;

package/react/icons/24/download.js

@@ -0,0 +1,2 @@
+import*as e from"react";const l=()=>e.createElement("svg",{width:24,height:24,fill:"none"},e.createElement("path",{fill:"currentColor",fillRule:"evenodd",d:"M12 .25a.75.75 0 0 1 .75.75v14.19l4.72-4.72a.75.75 0 1 1 1.06 1.06L12 18.06l-6.53-6.53a.75.75 0 1 1 1.06-1.06l4.72 4.72V1A.75.75 0 0 1 12 .25M1.25 22a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75",clipRule:"evenodd"}));var a=l;export{a as default};
+//# sourceMappingURL=download.js.map

package/react/icons/24/download.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../react/icons/24/download.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nconst SvgDownload = () =>\n  /* @__PURE__ */ React.createElement(\n    'svg',\n    { width: 24, height: 24, fill: 'none' },\n    /* @__PURE__ */ React.createElement('path', {\n      fill: 'currentColor',\n      fillRule: 'evenodd',\n      d: 'M12 .25a.75.75 0 0 1 .75.75v14.19l4.72-4.72a.75.75 0 1 1 1.06 1.06L12 18.06l-6.53-6.53a.75.75 0 1 1 1.06-1.06l4.72 4.72V1A.75.75 0 0 1 12 .25M1.25 22a.75.75 0 0 1 .75-.75h20a.75.75 0 0 1 0 1.5H2a.75.75 0 0 1-.75-.75',\n      clipRule: 'evenodd',\n    }),\n  );\nexport default SvgDownload;\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QACvB,MAAMC,EAAc,IACFD,EAAM,cACpB,MACA,CAAE,MAAO,GAAI,OAAQ,GAAI,KAAM,MAAO,EACtBA,EAAM,cAAc,OAAQ,CAC1C,KAAM,eACN,SAAU,UACV,EAAG,0NACH,SAAU,SACZ,CAAC,CACH,EACF,IAAOE,EAAQD",
+  "names": ["React", "SvgDownload", "download_default"]
+}

package/react/link-card/link-card.js

@@ -1,2 +1,2 @@
-import*as i from"react";import o from"../icons/24/arrow-right";import s from"../text";const m=({href:a,text:r,title:l})=>i.createElement("a",{className:"link-card",href:a},i.createElement(s,{className:"link-card__title",size:s.sizes.basic},l),i.createElement("div",{className:"link-card__icon"},i.createElement(o,null)),r?i.createElement("div",{className:"link-card__text"},i.createElement(s,{size:s.sizes.small},r)):null);var c=m;export{c as default};
+import*as s from"react";import l from"../icons/24/arrow-right";import t from"../icons/24/download";import i from"../text";import{variants as a}from"./link-card.types";const d=({href:o,text:r,title:m,variant:e=a.link})=>s.createElement("a",{className:"link-card",href:o},s.createElement(i,{className:"link-card__title",theme:i.themes.emphasis,size:i.sizes.basic},m),e===a.download?s.createElement(t,null):s.createElement(l,null),r?s.createElement("div",{className:"link-card__text"},s.createElement(i,{size:i.sizes.small},r)):null);var c=d;export{c as default};
 //# sourceMappingURL=link-card.js.map

package/react/link-card/link-card.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/link-card/link-card.tsx"],
-  "sourcesContent": ["import * as React from 'react';\n\nimport ArrowRight from '../icons/24/arrow-right';\nimport Text from '../text';\n\nimport { LinkCard as Props } from './link-card.types';\n\nconst LinkCard: React.FC<Props> = ({ href, text, title }) => (\n  <a className=\"link-card\" href={href}>\n    <Text className=\"link-card__title\" size={Text.sizes.basic}>\n      {title}\n    </Text>\n    <div className=\"link-card__icon\">\n      <ArrowRight />\n    </div>\n    {text ? (\n      <div className=\"link-card__text\">\n        <Text size={Text.sizes.small}>{text}</Text>\n      </div>\n    ) : null}\n  </a>\n);\n\nexport default LinkCard;\n"],
-  "mappings": "AAAA,UAAYA,MAAW,QAEvB,OAAOC,MAAgB,0BACvB,OAAOC,MAAU,UAIjB,MAAMC,EAA4B,CAAC,CAAE,KAAAC,EAAM,KAAAC,EAAM,MAAAC,CAAM,IACrDN,EAAA,cAAC,KAAE,UAAU,YAAY,KAAMI,GAC7BJ,EAAA,cAACE,EAAA,CAAK,UAAU,mBAAmB,KAAMA,EAAK,MAAM,OACjDI,CACH,EACAN,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAACC,EAAA,IAAW,CACd,EACCI,EACCL,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAACE,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQG,CAAK,CACtC,EACE,IACN,EAGF,IAAOE,EAAQJ",
-  "names": ["React", "ArrowRight", "Text", "LinkCard", "href", "text", "title", "link_card_default"]
+  "sourcesContent": ["import * as React from 'react';\n\nimport ArrowRight from '../icons/24/arrow-right';\nimport Download from '../icons/24/download';\nimport Text from '../text';\n\nimport { LinkCard as Props, variants } from './link-card.types';\n\nconst LinkCard: React.FC<Props> = ({\n  href,\n  text,\n  title,\n  variant = variants.link,\n}) => (\n  <a className=\"link-card\" href={href}>\n    <Text\n      className=\"link-card__title\"\n      theme={Text.themes.emphasis}\n      size={Text.sizes.basic}\n    >\n      {title}\n    </Text>\n    {variant === variants.download ? <Download /> : <ArrowRight />}\n    {text ? (\n      <div className=\"link-card__text\">\n        <Text size={Text.sizes.small}>{text}</Text>\n      </div>\n    ) : null}\n  </a>\n);\n\nexport default LinkCard;\n"],
+  "mappings": "AAAA,UAAYA,MAAW,QAEvB,OAAOC,MAAgB,0BACvB,OAAOC,MAAc,uBACrB,OAAOC,MAAU,UAEjB,OAA4B,YAAAC,MAAgB,oBAE5C,MAAMC,EAA4B,CAAC,CACjC,KAAAC,EACA,KAAAC,EACA,MAAAC,EACA,QAAAC,EAAUL,EAAS,IACrB,IACEJ,EAAA,cAAC,KAAE,UAAU,YAAY,KAAMM,GAC7BN,EAAA,cAACG,EAAA,CACC,UAAU,mBACV,MAAOA,EAAK,OAAO,SACnB,KAAMA,EAAK,MAAM,OAEhBK,CACH,EACCC,IAAYL,EAAS,SAAWJ,EAAA,cAACE,EAAA,IAAS,EAAKF,EAAA,cAACC,EAAA,IAAW,EAC3DM,EACCP,EAAA,cAAC,OAAI,UAAU,mBACbA,EAAA,cAACG,EAAA,CAAK,KAAMA,EAAK,MAAM,OAAQI,CAAK,CACtC,EACE,IACN,EAGF,IAAOG,EAAQL",
+  "names": ["React", "ArrowRight", "Download", "Text", "variants", "LinkCard", "href", "text", "title", "variant", "link_card_default"]
 }

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

@@ -1,20 +1,24 @@
 @use '../../tokens/corner-radius';
-@use '../../tokens/elevation';
 @use '../../tokens/colours';
 @use '../../tokens/spacing';
 
 .link-card {
-  @include elevation.level(2);
-
+  align-items: center;
   background: var(--surface-primary-default);
   border-radius: corner-radius.$s;
-  color:  var(--on-surface-primary-default);
+  border: 1px solid var(--ge-border-default);
+  color: var(--on-surface-primary-default);
   display: grid;
   gap: spacing.$s;
   grid-template-columns: [first] [second];
   padding: spacing.$m;
   text-decoration: none;
 
+  > svg {
+    grid-column: 2;
+    justify-self: end;
+  }
+
   @media (hover: hover) {
     &:hover {
       background: var(--surface-primary-hover);
@@ -26,11 +30,6 @@
     grid-column: 1;
   }
 
-  &__icon {
-    grid-column: 2;
-    justify-self: end;
-  }
-
   &__text {
     grid-column: span 2;
   }

package/react/link-card/link-card.types.d.ts

@@ -1,5 +1,11 @@
+import type { ObjectValues } from '../types';
+export declare const variants: {
+    readonly download: "download";
+    readonly link: "link";
+};
 export type LinkCard = {
     href: string;
     text?: string;
     title: string;
+    variant?: ObjectValues<typeof variants>;
 };

package/react/link-card/link-card.types.js

@@ -1 +1,2 @@
+const t={download:"download",link:"link"};export{t as variants};
 //# sourceMappingURL=link-card.types.js.map

package/react/link-card/link-card.types.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": [],
-  "sourcesContent": [],
-  "mappings": "",
-  "names": []
+  "sources": ["../../../react/link-card/link-card.types.ts"],
+  "sourcesContent": ["import type { ObjectValues } from '../types';\n\nexport const variants = {\n  download: 'download',\n  link: 'link',\n} as const;\n\nexport type LinkCard = {\n  href: string;\n  text?: string;\n  title: string;\n  variant?: ObjectValues<typeof variants>;\n};\n"],
+  "mappings": "AAEO,MAAMA,EAAW,CACtB,SAAU,WACV,KAAM,MACR",
+  "names": ["variants"]
 }

package/tokens/dark.scss

@@ -120,6 +120,7 @@ $ge-graphs-trend-neutral: primitives.$coral-130;
 $ge-graphs-trend-upwards: primitives.$spring-green-80;
 $ge-icons-attention: primitives.$gold-100;
 $ge-icons-delete: primitives.$chili-red-80;
+$ge-icons-featured: primitives.$coral-100;
 $ge-icons-fixed: primitives.$white-100;
 $ge-icons-negative: primitives.$cardinal-100;
 $ge-icons-positive: primitives.$spring-green-80;
@@ -134,7 +135,7 @@ $ge-indicator-tags-information-alternate: primitives.$bright-blue-160;
 $ge-indicator-tags-information-default: primitives.$bright-blue-100;
 $ge-indicator-tags-negative-alternate: primitives.$cardinal-170;
 $ge-indicator-tags-negative-default: primitives.$cardinal-100;
-$ge-indicator-tags-neutral-alternate: primitives.$black-90;
+$ge-indicator-tags-neutral-alternate: primitives.$white-10;
 $ge-indicator-tags-neutral-default: primitives.$black-60;
 $ge-indicator-tags-positive-alternate: primitives.$spring-green-170;
 $ge-indicator-tags-positive-default: primitives.$spring-green-100;
@@ -188,6 +189,7 @@ $ge-signal-border-success: primitives.$spring-green-30;
 $ge-signal-border-waiting-list: primitives.$egyptian-purple-60;
 $ge-signal-border-warning: primitives.$gold-30;
 $ge-skeleton-default: primitives.$black-80;
+$ge-skeleton-fixed: primitives.$white-40;
 $ge-tabs-background-default: primitives.$white-0;
 $ge-tabs-background-disabled: primitives.$black-95;
 $ge-tabs-background-hover: primitives.$coral-190;

package/tokens/darkmode.css

@@ -119,6 +119,7 @@
 --ge-graphs-trend-upwards: #3a9979;
 --ge-icons-attention: #e2b74a;
 --ge-icons-delete: #e15b51;
+--ge-icons-featured: #fa5333;
 --ge-icons-fixed: #ffffff;
 --ge-icons-negative: #b93947;
 --ge-icons-positive: #3a9979;
@@ -131,15 +132,15 @@
 --ge-indicator-tags-featured-default: #fb6447;
 --ge-indicator-tags-information-alternate: #0f2f46;
 --ge-indicator-tags-information-default: #2676b0;
---ge-indicator-tags-negative-alternate: #381115;
+--ge-indicator-tags-negative-alternate: #4a171c;
 --ge-indicator-tags-negative-default: #b93947;
---ge-indicator-tags-neutral-alternate: #1a1a1a;
+--ge-indicator-tags-neutral-alternate: #ffffff1a;
 --ge-indicator-tags-neutral-default: #666666;
 --ge-indicator-tags-positive-alternate: #03261a;
 --ge-indicator-tags-positive-default: #097f58;
 --ge-indicators-attention-alternate: #443716;
 --ge-indicators-attention-default: #e2b74a;
---ge-indicators-negative-alternate: #381115;
+--ge-indicators-negative-alternate: #4a171c;
 --ge-indicators-negative-default: #b93947;
 --ge-indicators-neutral-alternate: #333333;
 --ge-indicators-neutral-default: #9ea6ae;
@@ -187,6 +188,7 @@
 --ge-signal-border-waiting-list: #8787b9;
 --ge-signal-border-warning: #f3e6c5;
 --ge-skeleton-default: #333333;
+--ge-skeleton-fixed: #ffffff66;
 --ge-tabs-background-default: #ffffff00;
 --ge-tabs-background-disabled: #0d0d0d;
 --ge-tabs-background-hover: #32110a;
@@ -382,7 +384,7 @@
 --on-buttons-on-waiting-list-outlined-default: #5f5fa2;
 --on-buttons-on-waiting-list-outlined-disabled: #808080;
 --on-buttons-on-waiting-list-outlined-hover: #37378b;
---signal-surface-error: #381115;
+--signal-surface-error: #4a171c;
 --signal-surface-featured: #32110a;
 --signal-surface-information: #0f2f46;
 --signal-surface-neutral: #1a1a1a;
@@ -407,7 +409,7 @@
 --workout-surface-gymfloor-hover: #644000;
 --workout-surface-other: #051e0e;
 --workout-surface-other-hover: #184629;
---workout-surface-pt: #0b3959;
+--workout-surface-pt: #002a47;
 --workout-surface-pt-hover: #16496c;
 --workout-surface-treatments: #011314;
 --workout-surface-treatments-hover: #04383b;

package/tokens/default-colours.css

@@ -1,9 +1,9 @@
 html:not([data-theme]) {
 --background-primary-default: #f3f4f5;
---background-primary-hover: #e9f1f7;
+--background-primary-hover: #e7e9eb;
 --background-primary-selected: #f3f4f5;
 --background-secondary-default: #ffffff;
---background-secondary-hover: #f3f4f5;
+--background-secondary-hover: #f7f7f7;
 --background-secondary-selected: #ffffff;
 --buttons-action-default: #ffffff00;
 --buttons-action-disabled: #ffffff00;
@@ -119,6 +119,7 @@ html:not([data-theme]) {
 --ge-graphs-trend-upwards: #3a9979;
 --ge-icons-attention: #e2b74a;
 --ge-icons-delete: #d93226;
+--ge-icons-featured: #fa5333;
 --ge-icons-fixed: #ffffff;
 --ge-icons-negative: #b93947;
 --ge-icons-positive: #097f58;
@@ -187,6 +188,7 @@ html:not([data-theme]) {
 --ge-signal-border-waiting-list: #5f5fa2;
 --ge-signal-border-warning: #866c2a;
 --ge-skeleton-default: #dcdee0;
+--ge-skeleton-fixed: #ffffff66;
 --ge-tabs-background-default: #ffffff00;
 --ge-tabs-background-disabled: #e7e9eb;
 --ge-tabs-background-hover: #fff6f5;
@@ -213,7 +215,7 @@ html:not([data-theme]) {
 --ge-workouts-pt: #70c4ff;
 --ge-workouts-treatments: #065d63;
 --on-background-error: #942e39;
---on-background-featured: #c84229;
+--on-background-featured: #af3a24;
 --on-background-information: #226a9e;
 --on-background-neutral: #666666;
 --on-background-success: #076646;
@@ -395,7 +397,7 @@ html:not([data-theme]) {
 --surface-primary-selected: #d4e4ef;
 --surface-secondary-default: #f7f7f7;
 --surface-secondary-disabled: #e5e5e5;
---surface-secondary-hover: #ffffff;
+--surface-secondary-hover: #f2f2f2;
 --surface-secondary-selected: #f2f2f2;
 --workout-surface-availability: #dcdee0;
 --workout-surface-availability-hover: #cfd3d6;

package/tokens/light.scss

@@ -1,10 +1,10 @@
 @use './primitives';
 /* Figma: https://www.figma.com/file/WzKCwRY09zn4rzRVfY0YvdRt/%F0%9F%8E%A8-sats-ds-styles?type=design&node-id=8481%3A40160&mode=design&t=4Gq1pqiSLpmo4bBj-1 */
 $background-primary-default: primitives.$blue-5;
-$background-primary-hover: primitives.$bright-blue-10;
+$background-primary-hover: primitives.$blue-10;
 $background-primary-selected: primitives.$blue-5;
 $background-secondary-default: primitives.$white-100;
-$background-secondary-hover: primitives.$blue-5;
+$background-secondary-hover: primitives.$black-3;
 $background-secondary-selected: primitives.$white-100;
 $buttons-action-default: primitives.$white-0;
 $buttons-action-disabled: primitives.$white-0;
@@ -120,6 +120,7 @@ $ge-graphs-trend-neutral: primitives.$coral-40;
 $ge-graphs-trend-upwards: primitives.$spring-green-80;
 $ge-icons-attention: primitives.$gold-100;
 $ge-icons-delete: primitives.$chili-red-100;
+$ge-icons-featured: primitives.$coral-100;
 $ge-icons-fixed: primitives.$white-100;
 $ge-icons-negative: primitives.$cardinal-100;
 $ge-icons-positive: primitives.$spring-green-100;
@@ -188,6 +189,7 @@ $ge-signal-border-success: primitives.$spring-green-120;
 $ge-signal-border-waiting-list: primitives.$egyptian-purple-80;
 $ge-signal-border-warning: primitives.$gold-140;
 $ge-skeleton-default: primitives.$light-grey-15;
+$ge-skeleton-fixed: primitives.$white-40;
 $ge-tabs-background-default: primitives.$white-0;
 $ge-tabs-background-disabled: primitives.$blue-10;
 $ge-tabs-background-hover: primitives.$coral-5;
@@ -214,7 +216,7 @@ $ge-workouts-other: primitives.$celadon-100;
 $ge-workouts-pt: primitives.$uranian-blue-100;
 $ge-workouts-treatments: primitives.$caribbean-current-100;
 $on-background-error: primitives.$cardinal-120;
-$on-background-featured: primitives.$coral-120;
+$on-background-featured: primitives.$coral-130;
 $on-background-information: primitives.$bright-blue-110;
 $on-background-neutral: primitives.$black-60;
 $on-background-success: primitives.$spring-green-120;
@@ -396,7 +398,7 @@ $surface-primary-hover: primitives.$bright-blue-10;
 $surface-primary-selected: primitives.$bright-blue-20;
 $surface-secondary-default: primitives.$black-3;
 $surface-secondary-disabled: primitives.$black-10;
-$surface-secondary-hover: primitives.$white-100;
+$surface-secondary-hover: primitives.$black-5;
 $surface-secondary-selected: primitives.$black-5;
 $workout-surface-availability: primitives.$light-grey-15;
 $workout-surface-availability-hover: primitives.$blue-20;

package/tokens/lightmode.css

@@ -1,9 +1,9 @@
 [data-theme="light"] {
 --background-primary-default: #f3f4f5;
---background-primary-hover: #e9f1f7;
+--background-primary-hover: #e7e9eb;
 --background-primary-selected: #f3f4f5;
 --background-secondary-default: #ffffff;
---background-secondary-hover: #f3f4f5;
+--background-secondary-hover: #f7f7f7;
 --background-secondary-selected: #ffffff;
 --buttons-action-default: #ffffff00;
 --buttons-action-disabled: #ffffff00;
@@ -119,6 +119,7 @@
 --ge-graphs-trend-upwards: #3a9979;
 --ge-icons-attention: #e2b74a;
 --ge-icons-delete: #d93226;
+--ge-icons-featured: #fa5333;
 --ge-icons-fixed: #ffffff;
 --ge-icons-negative: #b93947;
 --ge-icons-positive: #097f58;
@@ -187,6 +188,7 @@
 --ge-signal-border-waiting-list: #5f5fa2;
 --ge-signal-border-warning: #866c2a;
 --ge-skeleton-default: #dcdee0;
+--ge-skeleton-fixed: #ffffff66;
 --ge-tabs-background-default: #ffffff00;
 --ge-tabs-background-disabled: #e7e9eb;
 --ge-tabs-background-hover: #fff6f5;
@@ -213,7 +215,7 @@
 --ge-workouts-pt: #70c4ff;
 --ge-workouts-treatments: #065d63;
 --on-background-error: #942e39;
---on-background-featured: #c84229;
+--on-background-featured: #af3a24;
 --on-background-information: #226a9e;
 --on-background-neutral: #666666;
 --on-background-success: #076646;
@@ -395,7 +397,7 @@
 --surface-primary-selected: #d4e4ef;
 --surface-secondary-default: #f7f7f7;
 --surface-secondary-disabled: #e5e5e5;
---surface-secondary-hover: #ffffff;
+--surface-secondary-hover: #f2f2f2;
 --surface-secondary-selected: #f2f2f2;
 --workout-surface-availability: #dcdee0;
 --workout-surface-availability-hover: #cfd3d6;

package/tokens/primitives.scss

@@ -37,7 +37,7 @@ $bright-blue-80: #5191c0;
 $cardinal-10: #f8ebed;
 $cardinal-100: #b93947;
 $cardinal-120: #942e39;
-$cardinal-170: #381115;
+$cardinal-170: #4a171c;
 $cardinal-30: #eac4c8;
 $cardinal-60: #d58891;
 $caribbean-current-10: #e6efef;
@@ -124,7 +124,7 @@ $uranian-blue-10: #f1f9ff;
 $uranian-blue-100: #70c4ff;
 $uranian-blue-140: #2d6891;
 $uranian-blue-160: #16496c;
-$uranian-blue-180: #0b3959;
+$uranian-blue-180: #002a47;
 $uranian-blue-20: #e2f3ff;
 $uranian-blue-40: #c6e7ff;
 $uranian-blue-60: #a9dcff;