@sats-group/ui-lib 87.2.0 → 87.3.0

package/package.json

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

package/react/chip/chip.scss

@@ -20,13 +20,11 @@
   }
 
   &--selected {
-    background-color: var(--ge-chips-selected-default);
-    color: var(--on-ge-on-chips-selected-default);
+    border-color: var(--ge-chips-selected-default);
 
     @media (hover: hover) {
       &:not([disabled]):hover {
         background-color: var(--ge-chips-selected-hover);
-        color: var(--on-ge-on-chips-selected-default);
       }
     }
   }

package/react/segmented-controller/segmented-controller.js

@@ -1,2 +1,2 @@
-var f=Object.defineProperty,x=Object.defineProperties;var y=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var u=(o,e,t)=>e in o?f(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,i=(o,e)=>{for(var t in e||(e={}))T.call(e,t)&&u(o,t,e[t]);if(g)for(var t of g(e))$.call(e,t)&&u(o,t,e[t]);return o},_=(o,e)=>x(o,y(e));import l,{useState as z}from"react";import a from"classnames";import p from"../text";const P=({tabs:o,onSelectionChange:e})=>{const[t,b]=z(o!=null?o:[]),r=t?t.length:0,n=t.findIndex(s=>s.isSelected),v=s=>{b(d=>d.map((m,c)=>_(i({},m),{isSelected:c===s}))),e==null||e(s)};return l.createElement("div",{className:"segmented-controller"},l.createElement("div",{className:a("segmented-controller__tabs",{[`segmented-controller__tabs--col-${r}`]:r,[`segmented-controller__tabs--selected-${n}`]:n})},l.createElement("div",{className:a("segmented-controller__indicator",{[`segmented-controller__indicator--col-${r}`]:r,[`segmented-controller__indicator--pos-${n}`]:n})}),t?t.map(({label:s,isSelected:d,leadingIcon:m,button:c},N)=>l.createElement("button",_(i({},c),{key:s,onClick:()=>v(N),type:"button",className:a("segmented-controller__tab",{"segmented-controller__tab--selected":d})}),l.createElement(p,{className:"segmented-controller__tab-title",size:p.sizes.small,theme:p.themes.emphasis},m?l.createElement(l.Fragment,null,l.createElement("div",{className:"segmented-controller__tab-icon"},m),l.createElement("div",{className:"segmented-controller__tab-label"},s)):null))):null))};var F=P;export{F as default};
+var f=Object.defineProperty,x=Object.defineProperties;var y=Object.getOwnPropertyDescriptors;var g=Object.getOwnPropertySymbols;var T=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var u=(o,e,t)=>e in o?f(o,e,{enumerable:!0,configurable:!0,writable:!0,value:t}):o[e]=t,i=(o,e)=>{for(var t in e||(e={}))T.call(e,t)&&u(o,t,e[t]);if(g)for(var t of g(e))$.call(e,t)&&u(o,t,e[t]);return o},a=(o,e)=>x(o,y(e));import s,{useState as z}from"react";import _ from"classnames";import p from"../text";const P=({tabs:o,onSelectionChange:e})=>{const[t,b]=z(o!=null?o:[]),r=t?t.length:0,n=t.findIndex(l=>l.isSelected),v=l=>{b(d=>d.map((m,c)=>a(i({},m),{isSelected:c===l}))),e==null||e(l)};return s.createElement("div",{className:"segmented-controller"},s.createElement("div",{className:_("segmented-controller__tabs",{[`segmented-controller__tabs--col-${r}`]:r,[`segmented-controller__tabs--selected-${n}`]:n})},s.createElement("div",{className:_("segmented-controller__indicator",{[`segmented-controller__indicator--col-${r}`]:r,[`segmented-controller__indicator--pos-${n}`]:n})}),t?t.map(({label:l,isSelected:d,leadingIcon:m,button:c},N)=>s.createElement("button",a(i({},c),{key:l,onClick:()=>v(N),type:"button",className:_("segmented-controller__tab",{"segmented-controller__tab--selected":d})}),s.createElement(p,{className:"segmented-controller__tab-title",size:p.sizes.small,theme:p.themes.emphasis},m?s.createElement("div",{className:"segmented-controller__tab-icon"},m):null,s.createElement("div",{className:"segmented-controller__tab-label"},l)))):null))};var F=P;export{F as default};
 //# sourceMappingURL=segmented-controller.js.map

package/react/segmented-controller/segmented-controller.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../react/segmented-controller/segmented-controller.tsx"],
-  "sourcesContent": ["import React, { useState } from 'react';\nimport cn from 'classnames';\nimport Text from '../text';\n\nimport type { SegmentedController as Props } from './segmented-controller.types';\n\nconst SegmentedController: React.FunctionComponent<Props> = ({\n  tabs,\n  onSelectionChange,\n}) => {\n  const [localTabs, setLocalTabs] = useState(tabs ?? []);\n  const columnCount = localTabs ? localTabs.length : 0;\n  const selectedIndex = localTabs.findIndex(tab => tab.isSelected);\n  const changeView = (clickedIndex: number) => {\n    setLocalTabs(prevTabs =>\n      prevTabs.map((tab, index) => ({\n        ...tab,\n        isSelected: index === clickedIndex,\n      })),\n    );\n    onSelectionChange?.(clickedIndex);\n  };\n\n  return (\n    <div className=\"segmented-controller\">\n      <div\n        className={cn('segmented-controller__tabs', {\n          [`segmented-controller__tabs--col-${columnCount}`]: columnCount,\n          [`segmented-controller__tabs--selected-${selectedIndex}`]:\n            selectedIndex,\n        })}\n      >\n        <div\n          className={cn('segmented-controller__indicator', {\n            [`segmented-controller__indicator--col-${columnCount}`]:\n              columnCount,\n            [`segmented-controller__indicator--pos-${selectedIndex}`]:\n              selectedIndex,\n          })}\n        />\n        {localTabs\n          ? localTabs.map(\n              ({ label, isSelected, leadingIcon, button }, index) => (\n                <button\n                  {...button}\n                  key={label}\n                  onClick={() => changeView(index)}\n                  type=\"button\"\n                  className={cn('segmented-controller__tab', {\n                    'segmented-controller__tab--selected': isSelected,\n                  })}\n                >\n                  <Text\n                    className=\"segmented-controller__tab-title\"\n                    size={Text.sizes.small}\n                    theme={Text.themes.emphasis}\n                  >\n                    {leadingIcon ? (\n                      <>\n                        <div className=\"segmented-controller__tab-icon\">\n                          {leadingIcon}\n                        </div>\n                        <div className=\"segmented-controller__tab-label\">\n                          {label}\n                        </div>\n                      </>\n                    ) : null}\n                  </Text>\n                </button>\n              ),\n            )\n          : null}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedController;\n"],
-  "mappings": "6aAAA,OAAOA,GAAS,YAAAC,MAAgB,QAChC,OAAOC,MAAQ,aACf,OAAOC,MAAU,UAIjB,MAAMC,EAAsD,CAAC,CAC3D,KAAAC,EACA,kBAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIP,EAASI,GAAA,KAAAA,EAAQ,CAAC,CAAC,EAC/CI,EAAcF,EAAYA,EAAU,OAAS,EAC7CG,EAAgBH,EAAU,UAAUI,GAAOA,EAAI,UAAU,EACzDC,EAAcC,GAAyB,CAC3CL,EAAaM,GACXA,EAAS,IAAI,CAACH,EAAKI,IAAWC,EAAAC,EAAA,GACzBN,GADyB,CAE5B,WAAYI,IAAUF,CACxB,EAAE,CACJ,EACAP,GAAA,MAAAA,EAAoBO,EACtB,EAEA,OACEb,EAAA,cAAC,OAAI,UAAU,wBACbA,EAAA,cAAC,OACC,UAAWE,EAAG,6BAA8B,CAC1C,CAAC,mCAAmCO,CAAW,EAAE,EAAGA,EACpD,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,GAEDV,EAAA,cAAC,OACC,UAAWE,EAAG,kCAAmC,CAC/C,CAAC,wCAAwCO,CAAW,EAAE,EACpDA,EACF,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,EACH,EACCH,EACGA,EAAU,IACR,CAAC,CAAE,MAAAW,EAAO,WAAAC,EAAY,YAAAC,EAAa,OAAAC,CAAO,EAAGN,IAC3Cf,EAAA,cAAC,SAAAgB,EAAAC,EAAA,GACKI,GADL,CAEC,IAAKH,EACL,QAAS,IAAMN,EAAWG,CAAK,EAC/B,KAAK,SACL,UAAWb,EAAG,4BAA6B,CACzC,sCAAuCiB,CACzC,CAAC,IAEDnB,EAAA,cAACG,EAAA,CACC,UAAU,kCACV,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBiB,EACCpB,EAAA,cAAAA,EAAA,cACEA,EAAA,cAAC,OAAI,UAAU,kCACZoB,CACH,EACApB,EAAA,cAAC,OAAI,UAAU,mCACZkB,CACH,CACF,EACE,IACN,CACF,CAEJ,EACA,IACN,CACF,CAEJ,EAEA,IAAOI,EAAQlB",
+  "sourcesContent": ["import React, { useState } from 'react';\nimport cn from 'classnames';\nimport Text from '../text';\n\nimport type { SegmentedController as Props } from './segmented-controller.types';\n\nconst SegmentedController: React.FunctionComponent<Props> = ({\n  tabs,\n  onSelectionChange,\n}) => {\n  const [localTabs, setLocalTabs] = useState(tabs ?? []);\n  const columnCount = localTabs ? localTabs.length : 0;\n  const selectedIndex = localTabs.findIndex(tab => tab.isSelected);\n  const changeView = (clickedIndex: number) => {\n    setLocalTabs(prevTabs =>\n      prevTabs.map((tab, index) => ({\n        ...tab,\n        isSelected: index === clickedIndex,\n      })),\n    );\n    onSelectionChange?.(clickedIndex);\n  };\n\n  return (\n    <div className=\"segmented-controller\">\n      <div\n        className={cn('segmented-controller__tabs', {\n          [`segmented-controller__tabs--col-${columnCount}`]: columnCount,\n          [`segmented-controller__tabs--selected-${selectedIndex}`]:\n            selectedIndex,\n        })}\n      >\n        <div\n          className={cn('segmented-controller__indicator', {\n            [`segmented-controller__indicator--col-${columnCount}`]:\n              columnCount,\n            [`segmented-controller__indicator--pos-${selectedIndex}`]:\n              selectedIndex,\n          })}\n        />\n        {localTabs\n          ? localTabs.map(\n              ({ label, isSelected, leadingIcon, button }, index) => (\n                <button\n                  {...button}\n                  key={label}\n                  onClick={() => changeView(index)}\n                  type=\"button\"\n                  className={cn('segmented-controller__tab', {\n                    'segmented-controller__tab--selected': isSelected,\n                  })}\n                >\n                  <Text\n                    className=\"segmented-controller__tab-title\"\n                    size={Text.sizes.small}\n                    theme={Text.themes.emphasis}\n                  >\n                    {leadingIcon ? (\n                      <div className=\"segmented-controller__tab-icon\">\n                        {leadingIcon}\n                      </div>\n                    ) : null}\n                    <div className=\"segmented-controller__tab-label\">\n                      {label}\n                    </div>\n                  </Text>\n                </button>\n              ),\n            )\n          : null}\n      </div>\n    </div>\n  );\n};\n\nexport default SegmentedController;\n"],
+  "mappings": "6aAAA,OAAOA,GAAS,YAAAC,MAAgB,QAChC,OAAOC,MAAQ,aACf,OAAOC,MAAU,UAIjB,MAAMC,EAAsD,CAAC,CAC3D,KAAAC,EACA,kBAAAC,CACF,IAAM,CACJ,KAAM,CAACC,EAAWC,CAAY,EAAIP,EAASI,GAAA,KAAAA,EAAQ,CAAC,CAAC,EAC/CI,EAAcF,EAAYA,EAAU,OAAS,EAC7CG,EAAgBH,EAAU,UAAUI,GAAOA,EAAI,UAAU,EACzDC,EAAcC,GAAyB,CAC3CL,EAAaM,GACXA,EAAS,IAAI,CAACH,EAAKI,IAAWC,EAAAC,EAAA,GACzBN,GADyB,CAE5B,WAAYI,IAAUF,CACxB,EAAE,CACJ,EACAP,GAAA,MAAAA,EAAoBO,EACtB,EAEA,OACEb,EAAA,cAAC,OAAI,UAAU,wBACbA,EAAA,cAAC,OACC,UAAWE,EAAG,6BAA8B,CAC1C,CAAC,mCAAmCO,CAAW,EAAE,EAAGA,EACpD,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,GAEDV,EAAA,cAAC,OACC,UAAWE,EAAG,kCAAmC,CAC/C,CAAC,wCAAwCO,CAAW,EAAE,EACpDA,EACF,CAAC,wCAAwCC,CAAa,EAAE,EACtDA,CACJ,CAAC,EACH,EACCH,EACGA,EAAU,IACR,CAAC,CAAE,MAAAW,EAAO,WAAAC,EAAY,YAAAC,EAAa,OAAAC,CAAO,EAAGN,IAC3Cf,EAAA,cAAC,SAAAgB,EAAAC,EAAA,GACKI,GADL,CAEC,IAAKH,EACL,QAAS,IAAMN,EAAWG,CAAK,EAC/B,KAAK,SACL,UAAWb,EAAG,4BAA6B,CACzC,sCAAuCiB,CACzC,CAAC,IAEDnB,EAAA,cAACG,EAAA,CACC,UAAU,kCACV,KAAMA,EAAK,MAAM,MACjB,MAAOA,EAAK,OAAO,UAElBiB,EACCpB,EAAA,cAAC,OAAI,UAAU,kCACZoB,CACH,EACE,KACJpB,EAAA,cAAC,OAAI,UAAU,mCACZkB,CACH,CACF,CACF,CAEJ,EACA,IACN,CACF,CAEJ,EAEA,IAAOI,EAAQlB",
   "names": ["React", "useState", "cn", "Text", "SegmentedController", "tabs", "onSelectionChange", "localTabs", "setLocalTabs", "columnCount", "selectedIndex", "tab", "changeView", "clickedIndex", "prevTabs", "index", "__spreadProps", "__spreadValues", "label", "isSelected", "leadingIcon", "button", "segmented_controller_default"]
 }

package/tokens/dark.scss

@@ -79,10 +79,10 @@ $ge-border-fixed-alternate: primitives.$white-40;
 $ge-border-focused: primitives.$white-40;
 $ge-chips-selected-default: primitives.$white-100;
 $ge-chips-selected-disabled: primitives.$black-80;
-$ge-chips-selected-hover: primitives.$white-80;
+$ge-chips-selected-hover: primitives.$white-5;
 $ge-chips-unselected-default: primitives.$white-85;
 $ge-chips-unselected-disabled: primitives.$white-10;
-$ge-chips-unselected-hover: primitives.$white-10;
+$ge-chips-unselected-hover: primitives.$white-5;
 $ge-divider-alternate: primitives.$white-40;
 $ge-divider-default: primitives.$black-80;
 $ge-divider-fixed: primitives.$white-20;
@@ -222,6 +222,7 @@ $ge-workouts-availability: primitives.$black-40;
 $ge-workouts-bootcamp: primitives.$tropical-indigo-60;
 $ge-workouts-gx: primitives.$salmon-pink-60;
 $ge-workouts-gym-floor: primitives.$tangerine-60;
+$ge-workouts-hub: primitives.$coral-60;
 $ge-workouts-other: primitives.$celadon-60;
 $ge-workouts-pt: primitives.$uranian-blue-60;
 $ge-workouts-treatments: primitives.$caribbean-current-60;
@@ -267,7 +268,7 @@ $on-fixed-surface-secondary-disabled: primitives.$white-50;
 $on-ge-on-badge-primary: primitives.$blue-100;
 $on-ge-on-badge-secondary: primitives.$blue-100;
 $on-ge-on-badge-tertiary: primitives.$white-100;
-$on-ge-on-chips-selected-default: primitives.$blue-100;
+$on-ge-on-chips-selected-default: primitives.$white-100;
 $on-ge-on-chips-selected-disabled: primitives.$white-60;
 $on-ge-on-chips-unselected-default: primitives.$white-100;
 $on-ge-on-chips-unselected-disabled: primitives.$white-20;
@@ -323,6 +324,7 @@ $on-ge-on-tags-secondary-default: primitives.$white-100;
 $on-ge-on-workouts-bootcamp: primitives.$tropical-indigo-160;
 $on-ge-on-workouts-gx: primitives.$salmon-pink-180;
 $on-ge-on-workouts-gymfloor: primitives.$tangerine-160;
+$on-ge-on-workouts-hub: primitives.$coral-150;
 $on-ge-on-workouts-other: primitives.$celadon-160;
 $on-ge-on-workouts-pt: primitives.$uranian-blue-160;
 $on-ge-on-workouts-treatments: primitives.$caribbean-current-180;
@@ -361,6 +363,8 @@ $on-workout-surface-gx-alternate: primitives.$salmon-pink-20;
 $on-workout-surface-gx-default: primitives.$white-100;
 $on-workout-surface-gymfloor-alternate: primitives.$tangerine-20;
 $on-workout-surface-gymfloor-default: primitives.$white-100;
+$on-workout-surface-hub-alternate: primitives.$coral-60;
+$on-workout-surface-hub-default: primitives.$white-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-40;
@@ -424,6 +428,8 @@ $workout-surface-gx: primitives.$salmon-pink-140;
 $workout-surface-gx-hover: primitives.$salmon-pink-160;
 $workout-surface-gymfloor: primitives.$tangerine-140;
 $workout-surface-gymfloor-hover: primitives.$tangerine-160;
+$workout-surface-hub: primitives.$coral-150;
+$workout-surface-hub-hover: primitives.$coral-170;
 $workout-surface-other: primitives.$celadon-140;
 $workout-surface-other-hover: primitives.$celadon-160;
 $workout-surface-pt: primitives.$uranian-blue-140;

package/tokens/darkmode.css

@@ -78,10 +78,10 @@
 --ge-border-focused: #ffffff66;
 --ge-chips-selected-default: #ffffff;
 --ge-chips-selected-disabled: #333333;
---ge-chips-selected-hover: #ffffffcc;
+--ge-chips-selected-hover: #ffffff0d;
 --ge-chips-unselected-default: #ffffffd9;
 --ge-chips-unselected-disabled: #ffffff1a;
---ge-chips-unselected-hover: #ffffff1a;
+--ge-chips-unselected-hover: #ffffff0d;
 --ge-divider-alternate: #ffffff66;
 --ge-divider-default: #333333;
 --ge-divider-fixed: #ffffff33;
@@ -221,6 +221,7 @@
 --ge-workouts-bootcamp: #caa9ff;
 --ge-workouts-gx: #ffa9b5;
 --ge-workouts-gym-floor: #fdc666;
+--ge-workouts-hub: #fc9885;
 --ge-workouts-other: #a3f0bf;
 --ge-workouts-pt: #a9dcff;
 --ge-workouts-treatments: #6a9ea1;
@@ -266,7 +267,7 @@
 --on-ge-on-badge-primary: #0d2134;
 --on-ge-on-badge-secondary: #0d2134;
 --on-ge-on-badge-tertiary: #ffffff;
---on-ge-on-chips-selected-default: #0d2134;
+--on-ge-on-chips-selected-default: #ffffff;
 --on-ge-on-chips-selected-disabled: #ffffff99;
 --on-ge-on-chips-unselected-default: #ffffff;
 --on-ge-on-chips-unselected-disabled: #ffffff33;
@@ -322,6 +323,7 @@
 --on-ge-on-workouts-bootcamp: #422d66;
 --on-ge-on-workouts-gx: #470009;
 --on-ge-on-workouts-gymfloor: #644000;
+--on-ge-on-workouts-hub: #7d2919;
 --on-ge-on-workouts-other: #184629;
 --on-ge-on-workouts-pt: #16496c;
 --on-ge-on-workouts-treatments: #011314;
@@ -360,6 +362,8 @@
 --on-workout-surface-gx-default: #ffffff;
 --on-workout-surface-gymfloor-alternate: #feeccc;
 --on-workout-surface-gymfloor-default: #ffffff;
+--on-workout-surface-hub-alternate: #fc9885;
+--on-workout-surface-hub-default: #ffffff;
 --on-workout-surface-other-alternate: #c1f5d4;
 --on-workout-surface-other-default: #ffffff;
 --on-workout-surface-pt-alternate: #c6e7ff;
@@ -423,6 +427,8 @@
 --workout-surface-gx-hover: #912d3a;
 --workout-surface-gymfloor: #976000;
 --workout-surface-gymfloor-hover: #644000;
+--workout-surface-hub: #7d2919;
+--workout-surface-hub-hover: #4b190f;
 --workout-surface-other: #33764c;
 --workout-surface-other-hover: #184629;
 --workout-surface-pt: #2d6891;

package/tokens/default-colours.css

@@ -78,10 +78,10 @@ html:not([data-theme]) {
 --ge-border-focused: #9ea6ae;
 --ge-chips-selected-default: #0d2134;
 --ge-chips-selected-disabled: #dcdee0;
---ge-chips-selected-hover: #404d5b;
+--ge-chips-selected-hover: #f4f8fb;
 --ge-chips-unselected-default: #dcdee0;
 --ge-chips-unselected-disabled: #e7e9eb;
---ge-chips-unselected-hover: #e9f1f7;
+--ge-chips-unselected-hover: #f4f8fb;
 --ge-divider-alternate: #00000033;
 --ge-divider-default: #dcdee0;
 --ge-divider-fixed: #ffffff33;
@@ -221,6 +221,7 @@ html:not([data-theme]) {
 --ge-workouts-bootcamp: #a670ff;
 --ge-workouts-gx: #ff7083;
 --ge-workouts-gym-floor: #fba000;
+--ge-workouts-hub: #fb6447;
 --ge-workouts-other: #65e694;
 --ge-workouts-pt: #70c4ff;
 --ge-workouts-treatments: #065d63;
@@ -266,7 +267,7 @@ html:not([data-theme]) {
 --on-ge-on-badge-primary: #ffffff;
 --on-ge-on-badge-secondary: #ffffff;
 --on-ge-on-badge-tertiary: #0d2134;
---on-ge-on-chips-selected-default: #ffffff;
+--on-ge-on-chips-selected-default: #0d2134;
 --on-ge-on-chips-selected-disabled: #566471;
 --on-ge-on-chips-unselected-default: #0d2134;
 --on-ge-on-chips-unselected-disabled: #999999;
@@ -322,6 +323,7 @@ html:not([data-theme]) {
 --on-ge-on-workouts-bootcamp: #211633;
 --on-ge-on-workouts-gx: #470009;
 --on-ge-on-workouts-gymfloor: #322000;
+--on-ge-on-workouts-hub: #4b190f;
 --on-ge-on-workouts-other: #184629;
 --on-ge-on-workouts-pt: #16496c;
 --on-ge-on-workouts-treatments: #e6efef;
@@ -360,6 +362,8 @@ html:not([data-theme]) {
 --on-workout-surface-gx-default: #0d2134;
 --on-workout-surface-gymfloor-alternate: #644000;
 --on-workout-surface-gymfloor-default: #0d2134;
+--on-workout-surface-hub-alternate: #4b190f;
+--on-workout-surface-hub-default: #0d2134;
 --on-workout-surface-other-alternate: #184629;
 --on-workout-surface-other-default: #0d2134;
 --on-workout-surface-pt-alternate: #16496c;
@@ -423,6 +427,8 @@ html:not([data-theme]) {
 --workout-surface-gx-hover: #ffa9b5;
 --workout-surface-gymfloor: #fdd999;
 --workout-surface-gymfloor-hover: #fdc666;
+--workout-surface-hub: #fecbc2;
+--workout-surface-hub-hover: #fdbaad;
 --workout-surface-other: #c1f5d4;
 --workout-surface-other-hover: #a3f0bf;
 --workout-surface-pt: #c6e7ff;

package/tokens/light.scss

@@ -79,10 +79,10 @@ $ge-border-fixed-alternate: primitives.$white-40;
 $ge-border-focused: primitives.$blue-40;
 $ge-chips-selected-default: primitives.$blue-100;
 $ge-chips-selected-disabled: primitives.$light-grey-15;
-$ge-chips-selected-hover: primitives.$blue-grey-80;
+$ge-chips-selected-hover: primitives.$bright-blue-5;
 $ge-chips-unselected-default: primitives.$light-grey-15;
 $ge-chips-unselected-disabled: primitives.$blue-10;
-$ge-chips-unselected-hover: primitives.$bright-blue-10;
+$ge-chips-unselected-hover: primitives.$bright-blue-5;
 $ge-divider-alternate: primitives.$black-o20;
 $ge-divider-default: primitives.$light-grey-15;
 $ge-divider-fixed: primitives.$white-20;
@@ -222,6 +222,7 @@ $ge-workouts-availability: primitives.$black-60;
 $ge-workouts-bootcamp: primitives.$tropical-indigo-100;
 $ge-workouts-gx: primitives.$salmon-pink-100;
 $ge-workouts-gym-floor: primitives.$tangerine-100;
+$ge-workouts-hub: primitives.$coral-90;
 $ge-workouts-other: primitives.$celadon-100;
 $ge-workouts-pt: primitives.$uranian-blue-100;
 $ge-workouts-treatments: primitives.$caribbean-current-100;
@@ -267,7 +268,7 @@ $on-fixed-surface-secondary-disabled: primitives.$white-50;
 $on-ge-on-badge-primary: primitives.$white-100;
 $on-ge-on-badge-secondary: primitives.$white-100;
 $on-ge-on-badge-tertiary: primitives.$blue-100;
-$on-ge-on-chips-selected-default: primitives.$white-100;
+$on-ge-on-chips-selected-default: primitives.$blue-100;
 $on-ge-on-chips-selected-disabled: primitives.$blue-70;
 $on-ge-on-chips-unselected-default: primitives.$blue-100;
 $on-ge-on-chips-unselected-disabled: primitives.$black-40;
@@ -323,6 +324,7 @@ $on-ge-on-tags-secondary-default: primitives.$blue-100;
 $on-ge-on-workouts-bootcamp: primitives.$tropical-indigo-180;
 $on-ge-on-workouts-gx: primitives.$salmon-pink-180;
 $on-ge-on-workouts-gymfloor: primitives.$tangerine-180;
+$on-ge-on-workouts-hub: primitives.$coral-170;
 $on-ge-on-workouts-other: primitives.$celadon-160;
 $on-ge-on-workouts-pt: primitives.$uranian-blue-160;
 $on-ge-on-workouts-treatments: primitives.$caribbean-current-10;
@@ -361,6 +363,8 @@ $on-workout-surface-gx-alternate: primitives.$salmon-pink-180;
 $on-workout-surface-gx-default: primitives.$blue-100;
 $on-workout-surface-gymfloor-alternate: primitives.$tangerine-160;
 $on-workout-surface-gymfloor-default: primitives.$blue-100;
+$on-workout-surface-hub-alternate: primitives.$coral-170;
+$on-workout-surface-hub-default: primitives.$blue-100;
 $on-workout-surface-other-alternate: primitives.$celadon-160;
 $on-workout-surface-other-default: primitives.$blue-100;
 $on-workout-surface-pt-alternate: primitives.$uranian-blue-160;
@@ -424,6 +428,8 @@ $workout-surface-gx: primitives.$salmon-pink-40;
 $workout-surface-gx-hover: primitives.$salmon-pink-60;
 $workout-surface-gymfloor: primitives.$tangerine-40;
 $workout-surface-gymfloor-hover: primitives.$tangerine-60;
+$workout-surface-hub: primitives.$coral-30;
+$workout-surface-hub-hover: primitives.$coral-40;
 $workout-surface-other: primitives.$celadon-40;
 $workout-surface-other-hover: primitives.$celadon-60;
 $workout-surface-pt: primitives.$uranian-blue-40;

package/tokens/lightmode.css

@@ -78,10 +78,10 @@
 --ge-border-focused: #9ea6ae;
 --ge-chips-selected-default: #0d2134;
 --ge-chips-selected-disabled: #dcdee0;
---ge-chips-selected-hover: #404d5b;
+--ge-chips-selected-hover: #f4f8fb;
 --ge-chips-unselected-default: #dcdee0;
 --ge-chips-unselected-disabled: #e7e9eb;
---ge-chips-unselected-hover: #e9f1f7;
+--ge-chips-unselected-hover: #f4f8fb;
 --ge-divider-alternate: #00000033;
 --ge-divider-default: #dcdee0;
 --ge-divider-fixed: #ffffff33;
@@ -221,6 +221,7 @@
 --ge-workouts-bootcamp: #a670ff;
 --ge-workouts-gx: #ff7083;
 --ge-workouts-gym-floor: #fba000;
+--ge-workouts-hub: #fb6447;
 --ge-workouts-other: #65e694;
 --ge-workouts-pt: #70c4ff;
 --ge-workouts-treatments: #065d63;
@@ -266,7 +267,7 @@
 --on-ge-on-badge-primary: #ffffff;
 --on-ge-on-badge-secondary: #ffffff;
 --on-ge-on-badge-tertiary: #0d2134;
---on-ge-on-chips-selected-default: #ffffff;
+--on-ge-on-chips-selected-default: #0d2134;
 --on-ge-on-chips-selected-disabled: #566471;
 --on-ge-on-chips-unselected-default: #0d2134;
 --on-ge-on-chips-unselected-disabled: #999999;
@@ -322,6 +323,7 @@
 --on-ge-on-workouts-bootcamp: #211633;
 --on-ge-on-workouts-gx: #470009;
 --on-ge-on-workouts-gymfloor: #322000;
+--on-ge-on-workouts-hub: #4b190f;
 --on-ge-on-workouts-other: #184629;
 --on-ge-on-workouts-pt: #16496c;
 --on-ge-on-workouts-treatments: #e6efef;
@@ -360,6 +362,8 @@
 --on-workout-surface-gx-default: #0d2134;
 --on-workout-surface-gymfloor-alternate: #644000;
 --on-workout-surface-gymfloor-default: #0d2134;
+--on-workout-surface-hub-alternate: #4b190f;
+--on-workout-surface-hub-default: #0d2134;
 --on-workout-surface-other-alternate: #184629;
 --on-workout-surface-other-default: #0d2134;
 --on-workout-surface-pt-alternate: #16496c;
@@ -423,6 +427,8 @@
 --workout-surface-gx-hover: #ffa9b5;
 --workout-surface-gymfloor: #fdd999;
 --workout-surface-gymfloor-hover: #fdc666;
+--workout-surface-hub: #fecbc2;
+--workout-surface-hub-hover: #fdbaad;
 --workout-surface-other: #c1f5d4;
 --workout-surface-other-hover: #a3f0bf;
 --workout-surface-pt: #c6e7ff;

package/tokens/primitives.scss

@@ -1,5 +1,5 @@
-// Figma: https://www.figma.com/file/WzKCwRY09zn4rzRVfY0YvdRt/%F0%9F%8E%A8-sats-ds-styles?type=design&node-id=8481%3A40159&mode=design&t=4Gq1pqiSLpmo4bBj-1
-
+/* Mode 1 */
+/* color */
 $black-10: #e5e5e5;
 $black-100: #000000;
 $black-20: #cccccc;
@@ -70,8 +70,10 @@ $coral-10: #ffeeeb;
 $coral-100: #fa5333;
 $coral-120: #c84229;
 $coral-130: #af3a24;
+$coral-150: #7d2919;
 $coral-170: #4b190f;
 $coral-190: #32110a;
+$coral-30: #fecbc2;
 $coral-40: #fdbaad;
 $coral-5: #fff6f5;
 $coral-60: #fc9885;