@sats-group/ui-lib 85.4.1 → 85.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "85.4.1",
+  "version": "85.6.0",
   "description": "SATS web user interface library",
   "author": "developer@sats.no",
   "license": "UNLICENSED",

package/react/chip/chip.js

@@ -1,2 +1,2 @@
-var u=Object.defineProperty;var p=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var a=(e,t,s)=>t in e?u(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,h=(e,t)=>{for(var s in t||(t={}))l.call(t,s)&&a(e,s,t[s]);if(p)for(var s of p(t))c.call(t,s)&&a(e,s,t[s]);return e};var f=(e,t)=>{var s={};for(var m in e)l.call(e,m)&&t.indexOf(m)<0&&(s[m]=e[m]);if(e!=null&&p)for(var m of p(e))t.indexOf(m)<0&&c.call(e,m)&&(s[m]=e[m]);return s};import*as r from"react";import x from"classnames";import C from"../icons/16/close";import i from"../text";const _=F=>{var o=F,{elementName:e="button",className:t,icon:s=!0,isSelected:m=!1,text:n}=o,d=f(o,["elementName","className","icon","isSelected","text"]);return r.createElement(e,h({className:x("chip",t,{"chip--selected":m})},d),r.createElement(r.Fragment,null,r.createElement("div",{className:"chip__wrapper"},s?r.createElement(C,null):null,r.createElement(i,{className:"chip__text",size:i.sizes.small,theme:i.themes.emphasis},n))))};var b=_;export{b as default};
+var n=Object.defineProperty;var i=Object.getOwnPropertySymbols;var h=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable;var l=(e,r,p)=>r in e?n(e,r,{enumerable:!0,configurable:!0,writable:!0,value:p}):e[r]=p,f=(e,r)=>{for(var p in r||(r={}))h.call(r,p)&&l(e,p,r[p]);if(i)for(var p of i(r))o.call(r,p)&&l(e,p,r[p]);return e};var d=(e,r)=>{var p={};for(var s in e)h.call(e,s)&&r.indexOf(s)<0&&(p[s]=e[s]);if(e!=null&&i)for(var s of i(e))r.indexOf(s)<0&&o.call(e,s)&&(p[s]=e[s]);return p};import*as t from"react";import F from"classnames";import N from"../icons/16/close";import m from"../text";const c=g=>{var a=g,{className:e,customIcon:r,elementName:p="button",icon:s=!0,isSelected:x=!1,text:C}=a,_=d(a,["className","customIcon","elementName","icon","isSelected","text"]);return t.createElement(p,f({className:F("chip",e,{"chip--selected":x})},_),t.createElement(t.Fragment,null,t.createElement("div",{className:"chip__wrapper"},s?r!=null?r:t.createElement(N,null):null,t.createElement(m,{className:"chip__text",size:m.sizes.small,theme:m.themes.emphasis},C))))};var E=c;export{E as default};
 //# sourceMappingURL=chip.js.map

package/react/chip/chip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/chip/chip.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nimport cn from 'classnames';\n\nimport Close from '../icons/16/close';\nimport Text from '../text';\n\nimport { Chip as Props } from './chip.types';\n\nconst Chip: React.FC<Props> = ({\n  elementName = 'button',\n  className,\n  icon = true,\n  isSelected = false,\n  text,\n  ...rest\n}) =>\n  React.createElement(\n    elementName,\n    {\n      className: cn('chip', className, { 'chip--selected': isSelected }),\n      ...rest,\n    },\n    <React.Fragment>\n      <div className=\"chip__wrapper\">\n        {icon ? <Close /> : null}\n        <Text\n          className=\"chip__text\"\n          size={Text.sizes.small}\n          theme={Text.themes.emphasis}\n        >\n          {text}\n        </Text>\n      </div>\n    </React.Fragment>,\n  );\n\nexport default Chip;\n"],
-  "mappings": "2fAAA,UAAYA,MAAW,QACvB,OAAOC,MAAQ,aAEf,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAIjB,MAAMC,EAAyBC,GAO5B,CAP4B,IAAAC,EAAAD,EAC7B,aAAAE,EAAc,SACd,UAAAC,EACA,KAAAC,EAAO,GACP,WAAAC,EAAa,GACb,KAAAC,CAbF,EAQ+BL,EAM1BM,EAAAC,EAN0BP,EAM1B,CALH,cACA,YACA,OACA,aACA,SAGA,OAAAN,EAAM,cACJO,EACAO,EAAA,CACE,UAAWb,EAAG,OAAQO,EAAW,CAAE,iBAAkBE,CAAW,CAAC,GAC9DE,GAELZ,EAAA,cAACA,EAAM,SAAN,KACCA,EAAA,cAAC,OAAI,UAAU,iBACZS,EAAOT,EAAA,cAACE,EAAA,IAAM,EAAK,KACpBF,EAAA,cAACG,EAAA,CACC,UAAU,aACV,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBQ,CACH,CACF,CACF,CACF,GAEF,IAAOI,EAAQX",
-  "names": ["React", "cn", "Close", "Text", "Chip", "_a", "_b", "elementName", "className", "icon", "isSelected", "text", "rest", "__objRest", "__spreadValues", "chip_default"]
+  "sourcesContent": ["import * as React from 'react';\nimport cn from 'classnames';\n\nimport Close from '../icons/16/close';\nimport Text from '../text';\n\nimport { Chip as Props } from './chip.types';\n\nconst Chip: React.FC<Props> = ({\n  className,\n  customIcon,\n  elementName = 'button',\n  icon = true,\n  isSelected = false,\n  text,\n  ...rest\n}) =>\n  React.createElement(\n    elementName,\n    {\n      className: cn('chip', className, { 'chip--selected': isSelected }),\n      ...rest,\n    },\n    <React.Fragment>\n      <div className=\"chip__wrapper\">\n        {icon ? (customIcon ?? <Close />) : null}\n        <Text\n          className=\"chip__text\"\n          size={Text.sizes.small}\n          theme={Text.themes.emphasis}\n        >\n          {text}\n        </Text>\n      </div>\n    </React.Fragment>,\n  );\n\nexport default Chip;\n"],
+  "mappings": "2fAAA,UAAYA,MAAW,QACvB,OAAOC,MAAQ,aAEf,OAAOC,MAAW,oBAClB,OAAOC,MAAU,UAIjB,MAAMC,EAAyBC,GAQ5B,CAR4B,IAAAC,EAAAD,EAC7B,WAAAE,EACA,WAAAC,EACA,YAAAC,EAAc,SACd,KAAAC,EAAO,GACP,WAAAC,EAAa,GACb,KAAAC,CAdF,EAQ+BN,EAO1BO,EAAAC,EAP0BR,EAO1B,CANH,YACA,aACA,cACA,OACA,aACA,SAGA,OAAAN,EAAM,cACJS,EACAM,EAAA,CACE,UAAWd,EAAG,OAAQM,EAAW,CAAE,iBAAkBI,CAAW,CAAC,GAC9DE,GAELb,EAAA,cAACA,EAAM,SAAN,KACCA,EAAA,cAAC,OAAI,UAAU,iBACZU,EAAQF,GAAA,KAAAA,EAAcR,EAAA,cAACE,EAAA,IAAM,EAAM,KACpCF,EAAA,cAACG,EAAA,CACC,UAAU,aACV,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBS,CACH,CACF,CACF,CACF,GAEF,IAAOI,EAAQZ",
+  "names": ["React", "cn", "Close", "Text", "Chip", "_a", "_b", "className", "customIcon", "elementName", "icon", "isSelected", "text", "rest", "__objRest", "__spreadValues", "chip_default"]
 }

package/react/chip/chip.types.d.ts

@@ -1,7 +1,9 @@
+import { ReactElement } from 'react';
 import { ButtonHtmlProps, LinkHtmlProps } from '../types';
 type BasicChipProps = {
-    elementName: string;
     className?: string;
+    customIcon?: ReactElement;
+    elementName: string;
     icon?: boolean;
     isSelected?: boolean;
     text: string;

package/react/visually-button/visually-button.scss

@@ -88,7 +88,32 @@
     }
   }
 
-  &--variant-complete,
+  &--variant-complete {
+    border-color: var(--buttons-complete-default);
+    background: var(--buttons-complete-default);
+    color: var(--on-buttons-on-complete-default);
+
+    @media (hover: hover) {
+      &:hover:not(&:disabled) {
+        background: var(--buttons-complete-hover);
+        border-color: var(--buttons-complete-hover);
+      }
+    }
+
+    &[disabled] {
+      &.visually-button--spinning {
+        background: var(--buttons-complete-default);
+        color: transparent;
+
+        .visually-button__spinner {
+          display: flex;
+          border-color: var(--buttons-complete-default);
+          color: var(--on-buttons-on-complete-default);
+        }
+      }
+    }
+  }
+
   &--variant-cta {
     border-color: var(--buttons-cta-default);
     background: var(--buttons-cta-default);
@@ -132,7 +157,9 @@
       &.visually-button--spinning {
         background: transparent;
         color: transparent;
-        border-color: var(--buttons-secondary-default) !important; //NOTE: This overrites the default "disabled" color for spinner style.
+        border-color: var(
+          --buttons-secondary-default
+        ) !important; //NOTE: This overrites the default "disabled" color for spinner style.
 
         .visually-button__spinner {
           display: flex;
@@ -397,7 +424,9 @@
       &.visually-button--spinning {
         background: transparent;
         color: transparent;
-        border-color: var(--buttons-waiting-list-outlined-default) !important; //NOTE: This overrides the default "disabled" color for spinner style.
+        border-color: var(
+          --buttons-waiting-list-outlined-default
+        ) !important; //NOTE: This overrides the default "disabled" color for spinner style.
 
         .visually-button__spinner {
           display: flex;

package/tokens/dark.scss

@@ -1,17 +1,17 @@
 @use './primitives';
 /* Figma: https://www.figma.com/file/WzKCwRY09zn4rzRVfY0YvdRt/sats-ds-styles?type=design&node-id=8481%3A40161&mode=design&t=DfsR6he5XyYQLucx-1 */
-$background-primary-default: primitives.$black-100;
-$background-primary-hover: primitives.$bright-blue-170;
-$background-primary-selected: primitives.$black-100;
-$background-secondary-default: primitives.$black-90;
-$background-secondary-hover: primitives.$black-85;
-$background-secondary-selected: primitives.$black-90;
+$background-primary-default: primitives.$blue-130;
+$background-primary-hover: primitives.$blue-120;
+$background-primary-selected: primitives.$blue-110;
+$background-secondary-default: primitives.$blue-120;
+$background-secondary-hover: primitives.$blue-110;
+$background-secondary-selected: primitives.$blue-105;
 $buttons-action-default: primitives.$white-0;
 $buttons-action-disabled: primitives.$white-0;
 $buttons-action-pressed: primitives.$white-0;
-$buttons-cta-default: primitives.$coral-100;
+$buttons-cta-default: primitives.$coral-120;
 $buttons-cta-disabled: primitives.$black-80;
-$buttons-cta-hover: primitives.$coral-120;
+$buttons-cta-hover: primitives.$coral-130;
 $buttons-clean-default: primitives.$white-100;
 $buttons-clean-disabled: primitives.$white-10;
 $buttons-clean-hover: primitives.$white-90;
@@ -20,9 +20,9 @@ $buttons-clean-secondary-disabled: primitives.$white-5;
 $buttons-clean-secondary-hover: primitives.$white-10;
 $buttons-clean-secondary-outline: primitives.$white-100;
 $buttons-clean-secondary-outline-disabled: primitives.$white-40;
-$buttons-complete-default: primitives.$coral-100;
+$buttons-complete-default: primitives.$coral-120;
 $buttons-complete-disabled: primitives.$black-80;
-$buttons-complete-hover: primitives.$coral-120;
+$buttons-complete-hover: primitives.$coral-130;
 $buttons-destructive-default: primitives.$chili-red-80;
 $buttons-destructive-disabled: primitives.$black-80;
 $buttons-destructive-hover: primitives.$chili-red-60;
@@ -50,18 +50,20 @@ $buttons-waiting-list-hover: primitives.$egyptian-purple-100;
 $buttons-waiting-list-outlined-default: primitives.$egyptian-purple-80;
 $buttons-waiting-list-outlined-disabled: primitives.$black-50;
 $buttons-waiting-list-outlined-hover: primitives.$egyptian-purple-160;
-$fixed-background-primary-default: primitives.$blue-105;
-$fixed-background-primary-hover: primitives.$blue-100;
-$fixed-background-primary-selected: primitives.$blue-90;
+$fixed-background-primary-default: primitives.$blue-110;
+$fixed-background-primary-hover: primitives.$blue-105;
+$fixed-background-primary-selected: primitives.$blue-100;
 $fixed-background-secondary-default: primitives.$blue-100;
-$fixed-background-secondary-hover: primitives.$blue-90;
-$fixed-background-secondary-selected: primitives.$blue-grey-80;
+$fixed-background-secondary-hover: primitives.$blue-95;
+$fixed-background-secondary-selected: primitives.$blue-90;
 $fixed-surface-primary-default: primitives.$blue-100;
-$fixed-surface-primary-hover: primitives.$blue-90;
-$fixed-surface-primary-selected: primitives.$blue-grey-80;
-$fixed-surface-secondary-default: primitives.$blue-grey-80;
-$fixed-surface-secondary-hover: primitives.$blue-90;
-$fixed-surface-secondary-selected: primitives.$blue-grey-80;
+$fixed-surface-primary-disabled: primitives.$blue-110;
+$fixed-surface-primary-hover: primitives.$blue-95;
+$fixed-surface-primary-selected: primitives.$blue-90;
+$fixed-surface-secondary-default: primitives.$white-10;
+$fixed-surface-secondary-disabled: primitives.$white-5;
+$fixed-surface-secondary-hover: primitives.$white-15;
+$fixed-surface-secondary-selected: primitives.$white-15;
 $ge-graphical-elements-1: primitives.$white-100;
 $ge-graphical-elements-2: primitives.$white-90;
 $ge-graphical-elements-3: primitives.$white-70;
@@ -216,7 +218,7 @@ $ge-workouts-other: primitives.$celadon-60;
 $ge-workouts-pt: primitives.$uranian-blue-60;
 $ge-workouts-treatments: primitives.$caribbean-current-60;
 $on-background-error: primitives.$cardinal-60;
-$on-background-featured: primitives.$coral-90;
+$on-background-featured: primitives.$coral-100;
 $on-background-information: primitives.$bright-blue-60;
 $on-background-neutral: primitives.$black-40;
 $on-background-success: primitives.$spring-green-80;
@@ -229,7 +231,7 @@ $on-background-secondary-alternate: primitives.$black-20;
 $on-background-secondary-default: primitives.$white-100;
 $on-background-secondary-disabled: primitives.$black-50;
 $on-fixed-background-error: primitives.$cardinal-60;
-$on-fixed-background-featured: primitives.$coral-90;
+$on-fixed-background-featured: primitives.$coral-100;
 $on-fixed-background-information: primitives.$bright-blue-60;
 $on-fixed-background-neutral: primitives.$white-60;
 $on-fixed-background-success: primitives.$spring-green-60;
@@ -242,7 +244,7 @@ $on-fixed-background-secondary-alternate: primitives.$white-60;
 $on-fixed-background-secondary-default: primitives.$white-100;
 $on-fixed-background-secondary-disabled: primitives.$white-50;
 $on-fixed-surface-error: primitives.$cardinal-60;
-$on-fixed-surface-featured: primitives.$coral-90;
+$on-fixed-surface-featured: primitives.$coral-100;
 $on-fixed-surface-information: primitives.$bright-blue-60;
 $on-fixed-surface-neutral: primitives.$white-60;
 $on-fixed-surface-success: primitives.$spring-green-60;
@@ -312,7 +314,7 @@ $on-ge-on-workouts-pt: primitives.$uranian-blue-160;
 $on-ge-on-workouts-treatments: primitives.$caribbean-current-180;
 $on-signal-surface-error-alternate: primitives.$cardinal-60;
 $on-signal-surface-error-default: primitives.$white-100;
-$on-signal-surface-featured-alternate: primitives.$coral-90;
+$on-signal-surface-featured-alternate: primitives.$coral-100;
 $on-signal-surface-featured-default: primitives.$white-100;
 $on-signal-surface-information-alternate: primitives.$bright-blue-60;
 $on-signal-surface-information-default: primitives.$white-100;
@@ -325,7 +327,7 @@ $on-signal-surface-waiting-list-default: primitives.$white-100;
 $on-signal-surface-warning-alternate: primitives.$gold-80;
 $on-signal-surface-warning-default: primitives.$white-100;
 $on-surface-error: primitives.$cardinal-60;
-$on-surface-featured: primitives.$coral-90;
+$on-surface-featured: primitives.$coral-100;
 $on-surface-information: primitives.$bright-blue-60;
 $on-surface-neutral: primitives.$black-40;
 $on-surface-success: primitives.$spring-green-80;
@@ -339,17 +341,17 @@ $on-surface-secondary-default: primitives.$white-100;
 $on-surface-secondary-disabled: primitives.$black-50;
 $on-workout-surface-availability-default: primitives.$white-100;
 $on-workout-surface-availability-hover: primitives.$white-80;
-$on-workout-surface-bootcamp-alternate: primitives.$tropical-indigo-100;
+$on-workout-surface-bootcamp-alternate: primitives.$tropical-indigo-40;
 $on-workout-surface-bootcamp-default: primitives.$white-100;
-$on-workout-surface-gx-alternate: primitives.$salmon-pink-100;
+$on-workout-surface-gx-alternate: primitives.$salmon-pink-20;
 $on-workout-surface-gx-default: primitives.$white-100;
-$on-workout-surface-gymfloor-alternate: primitives.$tangerine-100;
+$on-workout-surface-gymfloor-alternate: primitives.$tangerine-20;
 $on-workout-surface-gymfloor-default: primitives.$white-100;
-$on-workout-surface-other-alternate: primitives.$celadon-100;
+$on-workout-surface-other-alternate: primitives.$celadon-40;
 $on-workout-surface-other-default: primitives.$white-100;
-$on-workout-surface-pt-alternate: primitives.$uranian-blue-100;
+$on-workout-surface-pt-alternate: primitives.$uranian-blue-40;
 $on-workout-surface-pt-default: primitives.$white-100;
-$on-workout-surface-treatments-alternate: primitives.$caribbean-current-60;
+$on-workout-surface-treatments-alternate: primitives.$caribbean-current-40;
 $on-workout-surface-treatments-default: primitives.$white-100;
 $on-buttons-on-action-default: primitives.$coral-100;
 $on-buttons-on-action-disabled: primitives.$black-50;
@@ -392,25 +394,25 @@ $signal-surface-neutral: primitives.$black-90;
 $signal-surface-success: primitives.$spring-green-170;
 $signal-surface-waiting-list: primitives.$egyptian-purple-160;
 $signal-surface-warning: primitives.$gold-170;
-$surface-primary-default: primitives.$black-90;
-$surface-primary-disabled: primitives.$black-95;
-$surface-primary-hover: primitives.$bright-blue-170;
-$surface-primary-selected: primitives.$bright-blue-160;
-$surface-secondary-default: primitives.$black-85;
-$surface-secondary-disabled: primitives.$black-100;
-$surface-secondary-hover: primitives.$black-80;
-$surface-secondary-selected: primitives.$black-85;
-$workout-surface-availability: primitives.$black-85;
+$surface-primary-default: primitives.$blue-110;
+$surface-primary-disabled: primitives.$blue-110;
+$surface-primary-hover: primitives.$blue-105;
+$surface-primary-selected: primitives.$blue-100;
+$surface-secondary-default: primitives.$blue-100;
+$surface-secondary-disabled: primitives.$blue-100;
+$surface-secondary-hover: primitives.$blue-95;
+$surface-secondary-selected: primitives.$blue-90;
+$workout-surface-availability: primitives.$black-60;
 $workout-surface-availability-hover: primitives.$black-80;
-$workout-surface-bootcamp: primitives.$tropical-indigo-180;
+$workout-surface-bootcamp: primitives.$tropical-indigo-140;
 $workout-surface-bootcamp-hover: primitives.$tropical-indigo-160;
-$workout-surface-gx: primitives.$salmon-pink-180;
+$workout-surface-gx: primitives.$salmon-pink-140;
 $workout-surface-gx-hover: primitives.$salmon-pink-160;
-$workout-surface-gymfloor: primitives.$tangerine-180;
+$workout-surface-gymfloor: primitives.$tangerine-140;
 $workout-surface-gymfloor-hover: primitives.$tangerine-160;
-$workout-surface-other: primitives.$celadon-180;
+$workout-surface-other: primitives.$celadon-140;
 $workout-surface-other-hover: primitives.$celadon-160;
-$workout-surface-pt: primitives.$uranian-blue-180;
+$workout-surface-pt: primitives.$uranian-blue-140;
 $workout-surface-pt-hover: primitives.$uranian-blue-160;
-$workout-surface-treatments: primitives.$caribbean-current-180;
-$workout-surface-treatments-hover: primitives.$caribbean-current-160;
+$workout-surface-treatments: primitives.$caribbean-current-100;
+$workout-surface-treatments-hover: primitives.$caribbean-current-140;

package/tokens/darkmode.css

@@ -1,16 +1,16 @@
 [data-theme="dark"] {
---background-primary-default: #000000;
---background-primary-hover: #0b2335;
---background-primary-selected: #000000;
---background-secondary-default: #1a1a1a;
---background-secondary-hover: #262626;
---background-secondary-selected: #1a1a1a;
+--background-primary-default: #02080d;
+--background-primary-hover: #06101a;
+--background-primary-selected: #081928;
+--background-secondary-default: #06101a;
+--background-secondary-hover: #081928;
+--background-secondary-selected: #142533;
 --buttons-action-default: #ffffff00;
 --buttons-action-disabled: #ffffff00;
 --buttons-action-pressed: #ffffff00;
---buttons-cta-default: #fa5333;
+--buttons-cta-default: #c84229;
 --buttons-cta-disabled: #333333;
---buttons-cta-hover: #c84229;
+--buttons-cta-hover: #af3a24;
 --buttons-clean-default: #ffffff;
 --buttons-clean-disabled: #ffffff1a;
 --buttons-clean-hover: #ffffffe5;
@@ -19,9 +19,9 @@
 --buttons-clean-secondary-hover: #ffffff1a;
 --buttons-clean-secondary-outline: #ffffff;
 --buttons-clean-secondary-outline-disabled: #ffffff66;
---buttons-complete-default: #fa5333;
+--buttons-complete-default: #c84229;
 --buttons-complete-disabled: #333333;
---buttons-complete-hover: #c84229;
+--buttons-complete-hover: #af3a24;
 --buttons-destructive-default: #e15b51;
 --buttons-destructive-disabled: #333333;
 --buttons-destructive-hover: #e8847d;
@@ -49,18 +49,20 @@
 --buttons-waiting-list-outlined-default: #5f5fa2;
 --buttons-waiting-list-outlined-disabled: #808080;
 --buttons-waiting-list-outlined-hover: #161638;
---fixed-background-primary-default: #0a1826;
---fixed-background-primary-hover: #0d2134;
---fixed-background-primary-selected: #253748;
+--fixed-background-primary-default: #081928;
+--fixed-background-primary-hover: #142533;
+--fixed-background-primary-selected: #0d2134;
 --fixed-background-secondary-default: #0d2134;
---fixed-background-secondary-hover: #253748;
---fixed-background-secondary-selected: #404d5b;
+--fixed-background-secondary-hover: #192c3e;
+--fixed-background-secondary-selected: #253748;
 --fixed-surface-primary-default: #0d2134;
---fixed-surface-primary-hover: #253748;
---fixed-surface-primary-selected: #404d5b;
---fixed-surface-secondary-default: #404d5b;
---fixed-surface-secondary-hover: #253748;
---fixed-surface-secondary-selected: #404d5b;
+--fixed-surface-primary-disabled: #081928;
+--fixed-surface-primary-hover: #192c3e;
+--fixed-surface-primary-selected: #253748;
+--fixed-surface-secondary-default: #ffffff1a;
+--fixed-surface-secondary-disabled: #ffffff0d;
+--fixed-surface-secondary-hover: #ffffff26;
+--fixed-surface-secondary-selected: #ffffff26;
 --ge-graphical-elements-1: #ffffff;
 --ge-graphical-elements-2: #ffffffe5;
 --ge-graphical-elements-3: #ffffffb2;
@@ -215,7 +217,7 @@
 --ge-workouts-pt: #a9dcff;
 --ge-workouts-treatments: #6a9ea1;
 --on-background-error: #d58891;
---on-background-featured: #fb6447;
+--on-background-featured: #fa5333;
 --on-background-information: #7dadd0;
 --on-background-neutral: #999999;
 --on-background-success: #3a9979;
@@ -228,7 +230,7 @@
 --on-background-secondary-default: #ffffff;
 --on-background-secondary-disabled: #808080;
 --on-fixed-background-error: #d58891;
---on-fixed-background-featured: #fb6447;
+--on-fixed-background-featured: #fa5333;
 --on-fixed-background-information: #7dadd0;
 --on-fixed-background-neutral: #ffffff99;
 --on-fixed-background-success: #6bb29b;
@@ -241,7 +243,7 @@
 --on-fixed-background-secondary-default: #ffffff;
 --on-fixed-background-secondary-disabled: #ffffff80;
 --on-fixed-surface-error: #d58891;
---on-fixed-surface-featured: #fb6447;
+--on-fixed-surface-featured: #fa5333;
 --on-fixed-surface-information: #7dadd0;
 --on-fixed-surface-neutral: #ffffff99;
 --on-fixed-surface-success: #6bb29b;
@@ -311,7 +313,7 @@
 --on-ge-on-workouts-treatments: #011314;
 --on-signal-surface-error-alternate: #d58891;
 --on-signal-surface-error-default: #ffffff;
---on-signal-surface-featured-alternate: #fb6447;
+--on-signal-surface-featured-alternate: #fa5333;
 --on-signal-surface-featured-default: #ffffff;
 --on-signal-surface-information-alternate: #7dadd0;
 --on-signal-surface-information-default: #ffffff;
@@ -324,7 +326,7 @@
 --on-signal-surface-warning-alternate: #e7c46d;
 --on-signal-surface-warning-default: #ffffff;
 --on-surface-error: #d58891;
---on-surface-featured: #fb6447;
+--on-surface-featured: #fa5333;
 --on-surface-information: #7dadd0;
 --on-surface-neutral: #999999;
 --on-surface-success: #3a9979;
@@ -338,17 +340,17 @@
 --on-surface-secondary-disabled: #808080;
 --on-workout-surface-availability-default: #ffffff;
 --on-workout-surface-availability-hover: #ffffffcc;
---on-workout-surface-bootcamp-alternate: #a670ff;
+--on-workout-surface-bootcamp-alternate: #dbc6ff;
 --on-workout-surface-bootcamp-default: #ffffff;
---on-workout-surface-gx-alternate: #ff7083;
+--on-workout-surface-gx-alternate: #ffe2e6;
 --on-workout-surface-gx-default: #ffffff;
---on-workout-surface-gymfloor-alternate: #fba000;
+--on-workout-surface-gymfloor-alternate: #feeccc;
 --on-workout-surface-gymfloor-default: #ffffff;
---on-workout-surface-other-alternate: #65e694;
+--on-workout-surface-other-alternate: #c1f5d4;
 --on-workout-surface-other-default: #ffffff;
---on-workout-surface-pt-alternate: #70c4ff;
+--on-workout-surface-pt-alternate: #c6e7ff;
 --on-workout-surface-pt-default: #ffffff;
---on-workout-surface-treatments-alternate: #6a9ea1;
+--on-workout-surface-treatments-alternate: #9bbec1;
 --on-workout-surface-treatments-default: #ffffff;
 --on-buttons-on-action-default: #fa5333;
 --on-buttons-on-action-disabled: #808080;
@@ -391,26 +393,26 @@
 --signal-surface-success: #03261a;
 --signal-surface-waiting-list: #161638;
 --signal-surface-warning: #443716;
---surface-primary-default: #1a1a1a;
---surface-primary-disabled: #0d0d0d;
---surface-primary-hover: #0b2335;
---surface-primary-selected: #0f2f46;
---surface-secondary-default: #262626;
---surface-secondary-disabled: #000000;
---surface-secondary-hover: #333333;
---surface-secondary-selected: #262626;
---workout-surface-availability: #262626;
+--surface-primary-default: #081928;
+--surface-primary-disabled: #081928;
+--surface-primary-hover: #142533;
+--surface-primary-selected: #0d2134;
+--surface-secondary-default: #0d2134;
+--surface-secondary-disabled: #0d2134;
+--surface-secondary-hover: #192c3e;
+--surface-secondary-selected: #253748;
+--workout-surface-availability: #666666;
 --workout-surface-availability-hover: #333333;
---workout-surface-bootcamp: #211633;
+--workout-surface-bootcamp: #644399;
 --workout-surface-bootcamp-hover: #422d66;
---workout-surface-gx: #470009;
+--workout-surface-gx: #ac4855;
 --workout-surface-gx-hover: #912d3a;
---workout-surface-gymfloor: #322000;
+--workout-surface-gymfloor: #976000;
 --workout-surface-gymfloor-hover: #644000;
---workout-surface-other: #051e0e;
+--workout-surface-other: #33764c;
 --workout-surface-other-hover: #184629;
---workout-surface-pt: #002a47;
+--workout-surface-pt: #2d6891;
 --workout-surface-pt-hover: #16496c;
---workout-surface-treatments: #011314;
---workout-surface-treatments-hover: #04383b;
+--workout-surface-treatments: #065d63;
+--workout-surface-treatments-hover: #054a4f;
 }

package/tokens/default-colours.css

@@ -49,18 +49,20 @@ html:not([data-theme]) {
 --buttons-waiting-list-outlined-default: #5f5fa2;
 --buttons-waiting-list-outlined-disabled: #666666;
 --buttons-waiting-list-outlined-hover: #ebebf3;
---fixed-background-primary-default: #0a1826;
---fixed-background-primary-hover: #0d2134;
---fixed-background-primary-selected: #253748;
+--fixed-background-primary-default: #081928;
+--fixed-background-primary-hover: #142533;
+--fixed-background-primary-selected: #0d2134;
 --fixed-background-secondary-default: #0d2134;
---fixed-background-secondary-hover: #253748;
---fixed-background-secondary-selected: #404d5b;
+--fixed-background-secondary-hover: #192c3e;
+--fixed-background-secondary-selected: #253748;
 --fixed-surface-primary-default: #0d2134;
---fixed-surface-primary-hover: #253748;
---fixed-surface-primary-selected: #404d5b;
---fixed-surface-secondary-default: #404d5b;
---fixed-surface-secondary-hover: #253748;
---fixed-surface-secondary-selected: #404d5b;
+--fixed-surface-primary-disabled: #06101a;
+--fixed-surface-primary-hover: #192c3e;
+--fixed-surface-primary-selected: #253748;
+--fixed-surface-secondary-default: #ffffff1a;
+--fixed-surface-secondary-disabled: #ffffff0d;
+--fixed-surface-secondary-hover: #ffffff26;
+--fixed-surface-secondary-selected: #ffffff26;
 --ge-graphical-elements-1: #0d2134;
 --ge-graphical-elements-2: #9ea6ae;
 --ge-graphical-elements-3: #cfd3d6;
@@ -157,9 +159,9 @@ html:not([data-theme]) {
 --ge-rewards-platinum: #404d5b;
 --ge-rewards-silver: #808080;
 --ge-selector-primary-selected-alternate: #ffeeeb;
---ge-selector-primary-selected-default: #c84229;
+--ge-selector-primary-selected-default: #fa5333;
 --ge-selector-primary-selected-disabled: #fdbaad;
---ge-selector-primary-selected-hover: #af3a24;
+--ge-selector-primary-selected-hover: #c84229;
 --ge-selector-primary-selected-bg-default: #ffeeeb;
 --ge-selector-primary-selected-bg-disabled: #fff6f5;
 --ge-selector-primary-unselected-default: #666666;
@@ -228,7 +230,7 @@ html:not([data-theme]) {
 --on-background-secondary-default: #0d2134;
 --on-background-secondary-disabled: #707070;
 --on-fixed-background-error: #d58891;
---on-fixed-background-featured: #fb6447;
+--on-fixed-background-featured: #fa5333;
 --on-fixed-background-information: #7dadd0;
 --on-fixed-background-neutral: #ffffff99;
 --on-fixed-background-success: #6bb29b;
@@ -241,7 +243,7 @@ html:not([data-theme]) {
 --on-fixed-background-secondary-default: #ffffff;
 --on-fixed-background-secondary-disabled: #ffffff80;
 --on-fixed-surface-error: #d58891;
---on-fixed-surface-featured: #fb6447;
+--on-fixed-surface-featured: #fa5333;
 --on-fixed-surface-information: #7dadd0;
 --on-fixed-surface-neutral: #ffffff99;
 --on-fixed-surface-success: #6bb29b;
@@ -316,7 +318,7 @@ html:not([data-theme]) {
 --on-signal-surface-information-alternate: #226a9e;
 --on-signal-surface-information-default: #0d2134;
 --on-signal-surface-neutral-alternate: #666666;
---on-signal-surface-neutral-default: #253748;
+--on-signal-surface-neutral-default: #192c3e;
 --on-signal-surface-success-alternate: #076646;
 --on-signal-surface-success-default: #0d2134;
 --on-signal-surface-waiting-list-alternate: #37378b;
@@ -332,7 +334,7 @@ html:not([data-theme]) {
 --on-surface-warning: #866c2a;
 --on-surface-primary-alternate: #566471;
 --on-surface-primary-default: #0d2134;
---on-surface-primary-disabled: #707070;
+--on-surface-primary-disabled: #666666;
 --on-surface-secondary-alternate: #566471;
 --on-surface-secondary-default: #0d2134;
 --on-surface-secondary-disabled: #666666;
@@ -393,14 +395,14 @@ html:not([data-theme]) {
 --signal-surface-warning: #f8f3e8;
 --surface-primary-default: #ffffff;
 --surface-primary-disabled: #e7e9eb;
---surface-primary-hover: #e9f1f7;
---surface-primary-selected: #d4e4ef;
+--surface-primary-hover: #f4f8fb;
+--surface-primary-selected: #e9f1f7;
 --surface-secondary-default: #f7f7f7;
 --surface-secondary-disabled: #e5e5e5;
 --surface-secondary-hover: #f2f2f2;
 --surface-secondary-selected: #f2f2f2;
---workout-surface-availability: #dcdee0;
---workout-surface-availability-hover: #cfd3d6;
+--workout-surface-availability: #e7e9eb;
+--workout-surface-availability-hover: #dcdee0;
 --workout-surface-bootcamp: #e4d4ff;
 --workout-surface-bootcamp-hover: #dbc6ff;
 --workout-surface-gx: #ffc6cd;

package/tokens/light.scss

@@ -50,18 +50,20 @@ $buttons-waiting-list-hover: primitives.$egyptian-purple-100;
 $buttons-waiting-list-outlined-default: primitives.$egyptian-purple-80;
 $buttons-waiting-list-outlined-disabled: primitives.$black-60;
 $buttons-waiting-list-outlined-hover: primitives.$egyptian-purple-10;
-$fixed-background-primary-default: primitives.$blue-105;
-$fixed-background-primary-hover: primitives.$blue-100;
-$fixed-background-primary-selected: primitives.$blue-90;
+$fixed-background-primary-default: primitives.$blue-110;
+$fixed-background-primary-hover: primitives.$blue-105;
+$fixed-background-primary-selected: primitives.$blue-100;
 $fixed-background-secondary-default: primitives.$blue-100;
-$fixed-background-secondary-hover: primitives.$blue-90;
-$fixed-background-secondary-selected: primitives.$blue-grey-80;
+$fixed-background-secondary-hover: primitives.$blue-95;
+$fixed-background-secondary-selected: primitives.$blue-90;
 $fixed-surface-primary-default: primitives.$blue-100;
-$fixed-surface-primary-hover: primitives.$blue-90;
-$fixed-surface-primary-selected: primitives.$blue-grey-80;
-$fixed-surface-secondary-default: primitives.$blue-grey-80;
-$fixed-surface-secondary-hover: primitives.$blue-90;
-$fixed-surface-secondary-selected: primitives.$blue-grey-80;
+$fixed-surface-primary-disabled: primitives.$blue-120;
+$fixed-surface-primary-hover: primitives.$blue-95;
+$fixed-surface-primary-selected: primitives.$blue-90;
+$fixed-surface-secondary-default: primitives.$white-10;
+$fixed-surface-secondary-disabled: primitives.$white-5;
+$fixed-surface-secondary-hover: primitives.$white-15;
+$fixed-surface-secondary-selected: primitives.$white-15;
 $ge-graphical-elements-1: primitives.$blue-100;
 $ge-graphical-elements-2: primitives.$blue-40;
 $ge-graphical-elements-3: primitives.$blue-20;
@@ -158,9 +160,9 @@ $ge-rewards-gold: primitives.$gold-130;
 $ge-rewards-platinum: primitives.$blue-grey-80;
 $ge-rewards-silver: primitives.$black-50;
 $ge-selector-primary-selected-alternate: primitives.$coral-10;
-$ge-selector-primary-selected-default: primitives.$coral-120;
+$ge-selector-primary-selected-default: primitives.$coral-100;
 $ge-selector-primary-selected-disabled: primitives.$coral-40;
-$ge-selector-primary-selected-hover: primitives.$coral-130;
+$ge-selector-primary-selected-hover: primitives.$coral-120;
 $ge-selector-primary-selected-bg-default: primitives.$coral-10;
 $ge-selector-primary-selected-bg-disabled: primitives.$coral-5;
 $ge-selector-primary-unselected-default: primitives.$black-60;
@@ -229,7 +231,7 @@ $on-background-secondary-alternate: primitives.$blue-70;
 $on-background-secondary-default: primitives.$blue-100;
 $on-background-secondary-disabled: primitives.$black-55;
 $on-fixed-background-error: primitives.$cardinal-60;
-$on-fixed-background-featured: primitives.$coral-90;
+$on-fixed-background-featured: primitives.$coral-100;
 $on-fixed-background-information: primitives.$bright-blue-60;
 $on-fixed-background-neutral: primitives.$white-60;
 $on-fixed-background-success: primitives.$spring-green-60;
@@ -242,7 +244,7 @@ $on-fixed-background-secondary-alternate: primitives.$white-60;
 $on-fixed-background-secondary-default: primitives.$white-100;
 $on-fixed-background-secondary-disabled: primitives.$white-50;
 $on-fixed-surface-error: primitives.$cardinal-60;
-$on-fixed-surface-featured: primitives.$coral-90;
+$on-fixed-surface-featured: primitives.$coral-100;
 $on-fixed-surface-information: primitives.$bright-blue-60;
 $on-fixed-surface-neutral: primitives.$white-60;
 $on-fixed-surface-success: primitives.$spring-green-60;
@@ -317,7 +319,7 @@ $on-signal-surface-featured-default: primitives.$blue-100;
 $on-signal-surface-information-alternate: primitives.$bright-blue-110;
 $on-signal-surface-information-default: primitives.$blue-100;
 $on-signal-surface-neutral-alternate: primitives.$black-60;
-$on-signal-surface-neutral-default: primitives.$blue-90;
+$on-signal-surface-neutral-default: primitives.$blue-95;
 $on-signal-surface-success-alternate: primitives.$spring-green-120;
 $on-signal-surface-success-default: primitives.$blue-100;
 $on-signal-surface-waiting-list-alternate: primitives.$egyptian-purple-100;
@@ -333,7 +335,7 @@ $on-surface-waiting-list: primitives.$egyptian-purple-100;
 $on-surface-warning: primitives.$gold-140;
 $on-surface-primary-alternate: primitives.$blue-70;
 $on-surface-primary-default: primitives.$blue-100;
-$on-surface-primary-disabled: primitives.$black-55;
+$on-surface-primary-disabled: primitives.$black-60;
 $on-surface-secondary-alternate: primitives.$blue-70;
 $on-surface-secondary-default: primitives.$blue-100;
 $on-surface-secondary-disabled: primitives.$black-60;
@@ -394,14 +396,14 @@ $signal-surface-waiting-list: primitives.$egyptian-purple-10;
 $signal-surface-warning: primitives.$gold-10;
 $surface-primary-default: primitives.$white-100;
 $surface-primary-disabled: primitives.$blue-10;
-$surface-primary-hover: primitives.$bright-blue-10;
-$surface-primary-selected: primitives.$bright-blue-20;
+$surface-primary-hover: primitives.$bright-blue-5;
+$surface-primary-selected: primitives.$bright-blue-10;
 $surface-secondary-default: primitives.$black-3;
 $surface-secondary-disabled: primitives.$black-10;
 $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;
+$workout-surface-availability: primitives.$blue-10;
+$workout-surface-availability-hover: primitives.$light-grey-15;
 $workout-surface-bootcamp: primitives.$tropical-indigo-30;
 $workout-surface-bootcamp-hover: primitives.$tropical-indigo-40;
 $workout-surface-gx: primitives.$salmon-pink-40;

package/tokens/lightmode.css

@@ -49,18 +49,20 @@
 --buttons-waiting-list-outlined-default: #5f5fa2;
 --buttons-waiting-list-outlined-disabled: #666666;
 --buttons-waiting-list-outlined-hover: #ebebf3;
---fixed-background-primary-default: #0a1826;
---fixed-background-primary-hover: #0d2134;
---fixed-background-primary-selected: #253748;
+--fixed-background-primary-default: #081928;
+--fixed-background-primary-hover: #142533;
+--fixed-background-primary-selected: #0d2134;
 --fixed-background-secondary-default: #0d2134;
---fixed-background-secondary-hover: #253748;
---fixed-background-secondary-selected: #404d5b;
+--fixed-background-secondary-hover: #192c3e;
+--fixed-background-secondary-selected: #253748;
 --fixed-surface-primary-default: #0d2134;
---fixed-surface-primary-hover: #253748;
---fixed-surface-primary-selected: #404d5b;
---fixed-surface-secondary-default: #404d5b;
---fixed-surface-secondary-hover: #253748;
---fixed-surface-secondary-selected: #404d5b;
+--fixed-surface-primary-disabled: #06101a;
+--fixed-surface-primary-hover: #192c3e;
+--fixed-surface-primary-selected: #253748;
+--fixed-surface-secondary-default: #ffffff1a;
+--fixed-surface-secondary-disabled: #ffffff0d;
+--fixed-surface-secondary-hover: #ffffff26;
+--fixed-surface-secondary-selected: #ffffff26;
 --ge-graphical-elements-1: #0d2134;
 --ge-graphical-elements-2: #9ea6ae;
 --ge-graphical-elements-3: #cfd3d6;
@@ -157,9 +159,9 @@
 --ge-rewards-platinum: #404d5b;
 --ge-rewards-silver: #808080;
 --ge-selector-primary-selected-alternate: #ffeeeb;
---ge-selector-primary-selected-default: #c84229;
+--ge-selector-primary-selected-default: #fa5333;
 --ge-selector-primary-selected-disabled: #fdbaad;
---ge-selector-primary-selected-hover: #af3a24;
+--ge-selector-primary-selected-hover: #c84229;
 --ge-selector-primary-selected-bg-default: #ffeeeb;
 --ge-selector-primary-selected-bg-disabled: #fff6f5;
 --ge-selector-primary-unselected-default: #666666;
@@ -228,7 +230,7 @@
 --on-background-secondary-default: #0d2134;
 --on-background-secondary-disabled: #707070;
 --on-fixed-background-error: #d58891;
---on-fixed-background-featured: #fb6447;
+--on-fixed-background-featured: #fa5333;
 --on-fixed-background-information: #7dadd0;
 --on-fixed-background-neutral: #ffffff99;
 --on-fixed-background-success: #6bb29b;
@@ -241,7 +243,7 @@
 --on-fixed-background-secondary-default: #ffffff;
 --on-fixed-background-secondary-disabled: #ffffff80;
 --on-fixed-surface-error: #d58891;
---on-fixed-surface-featured: #fb6447;
+--on-fixed-surface-featured: #fa5333;
 --on-fixed-surface-information: #7dadd0;
 --on-fixed-surface-neutral: #ffffff99;
 --on-fixed-surface-success: #6bb29b;
@@ -316,7 +318,7 @@
 --on-signal-surface-information-alternate: #226a9e;
 --on-signal-surface-information-default: #0d2134;
 --on-signal-surface-neutral-alternate: #666666;
---on-signal-surface-neutral-default: #253748;
+--on-signal-surface-neutral-default: #192c3e;
 --on-signal-surface-success-alternate: #076646;
 --on-signal-surface-success-default: #0d2134;
 --on-signal-surface-waiting-list-alternate: #37378b;
@@ -332,7 +334,7 @@
 --on-surface-warning: #866c2a;
 --on-surface-primary-alternate: #566471;
 --on-surface-primary-default: #0d2134;
---on-surface-primary-disabled: #707070;
+--on-surface-primary-disabled: #666666;
 --on-surface-secondary-alternate: #566471;
 --on-surface-secondary-default: #0d2134;
 --on-surface-secondary-disabled: #666666;
@@ -393,14 +395,14 @@
 --signal-surface-warning: #f8f3e8;
 --surface-primary-default: #ffffff;
 --surface-primary-disabled: #e7e9eb;
---surface-primary-hover: #e9f1f7;
---surface-primary-selected: #d4e4ef;
+--surface-primary-hover: #f4f8fb;
+--surface-primary-selected: #e9f1f7;
 --surface-secondary-default: #f7f7f7;
 --surface-secondary-disabled: #e5e5e5;
 --surface-secondary-hover: #f2f2f2;
 --surface-secondary-selected: #f2f2f2;
---workout-surface-availability: #dcdee0;
---workout-surface-availability-hover: #cfd3d6;
+--workout-surface-availability: #e7e9eb;
+--workout-surface-availability-hover: #dcdee0;
 --workout-surface-bootcamp: #e4d4ff;
 --workout-surface-bootcamp-hover: #dbc6ff;
 --workout-surface-gx: #ffc6cd;

package/tokens/primitives.scss

@@ -17,13 +17,16 @@ $black-95: #0d0d0d;
 $black-o20: #00000033;
 $blue-10: #e7e9eb;
 $blue-100: #0d2134;
-$blue-105: #0a1826;
-$blue-110: #06101a;
+$blue-105: #142533;
+$blue-110: #081928;
+$blue-120: #06101a;
+$blue-130: #02080d;
 $blue-20: #cfd3d6;
 $blue-40: #9ea6ae;
 $blue-5: #f3f4f5;
 $blue-70: #566471;
 $blue-90: #253748;
+$blue-95: #192c3e;
 $blue-grey-80: #404d5b;
 $bright-blue-10: #e9f1f7;
 $bright-blue-100: #2676b0;
@@ -32,6 +35,7 @@ $bright-blue-130: #1b537b;
 $bright-blue-160: #0f2f46;
 $bright-blue-170: #0b2335;
 $bright-blue-20: #d4e4ef;
+$bright-blue-5: #f4f8fb;
 $bright-blue-60: #7dadd0;
 $bright-blue-80: #5191c0;
 $cardinal-10: #f8ebed;
@@ -50,7 +54,7 @@ $caribbean-current-40: #9bbec1;
 $caribbean-current-60: #6a9ea1;
 $celadon-10: #f0fdf4;
 $celadon-100: #65e694;
-$celadon-140: #3f965e;
+$celadon-140: #33764c;
 $celadon-160: #184629;
 $celadon-180: #051e0e;
 $celadon-20: #e0faea;
@@ -90,7 +94,7 @@ $gold-80: #e7c46d;
 $light-grey-15: #dcdee0;
 $salmon-pink-10: #fff1f3;
 $salmon-pink-100: #ff7083;
-$salmon-pink-140: #b54352;
+$salmon-pink-140: #ac4855;
 $salmon-pink-160: #912d3a;
 $salmon-pink-180: #470009;
 $salmon-pink-20: #ffe2e6;
@@ -133,6 +137,7 @@ $white-10: #ffffff1a;
 $white-100: #ffffff;
 $white-15: #ffffff26;
 $white-20: #ffffff33;
+$white-3: #ffffff08;
 $white-40: #ffffff66;
 $white-5: #ffffff0d;
 $white-50: #ffffff80;