@sats-group/ui-lib 87.2.1 → 87.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "87.2.1",
+  "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/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;