@sats-group/ui-lib 75.3.1 → 75.4.0

package/README.md

@@ -11,7 +11,7 @@ This repo is the home of reusable SATS themed components and tokens, implemented
 Installing the library as a dependency would in this case be done using
 
 ```bash
-npm install --save sats-ui-lib
+npm install --save @sats-group/ui-lib
 ```
 
 ## 📖 More Documentation

package/package.json

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

package/react/text/text.scss

@@ -82,6 +82,8 @@
   }
 
   &--theme-headline {
+    font-family: font-names.$headline, sans-serif;
+
     &#{$block}--size-headline1 {
       @include font-sizes.headline(headline1);
       letter-spacing: 0;

package/tokens/dark.scss

@@ -206,18 +206,33 @@ $ge-toggle-selected-disabled: primitives.$coral-130;
 $ge-toggle-unselected-default: primitives.$black-70;
 $ge-toggle-unselected-disabled: primitives.$black-80;
 $ge-toggle-unselected-interactive-element: primitives.$black-100;
+$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-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-information: primitives.$bright-blue-60;
+$on-background-neutral: primitives.$black-40;
+$on-background-success: primitives.$spring-green-80;
+$on-background-waiting-list: primitives.$egyptian-purple-60;
+$on-background-warning: primitives.$gold-80;
 $on-background-primary-alternate: primitives.$black-20;
 $on-background-primary-default: primitives.$white-100;
 $on-background-primary-disabled: primitives.$black-50;
 $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-information: primitives.$bright-blue-60;
+$on-fixed-background-neutral: primitives.$white-60;
+$on-fixed-background-success: primitives.$spring-green-60;
+$on-fixed-background-waiting-list: primitives.$egyptian-purple-40;
+$on-fixed-background-warning: primitives.$gold-60;
 $on-fixed-background-primary-alternate: primitives.$white-60;
 $on-fixed-background-primary-default: primitives.$white-100;
 $on-fixed-background-primary-disabled: primitives.$white-50;
@@ -320,6 +335,8 @@ $on-surface-primary-disabled: primitives.$black-50;
 $on-surface-secondary-alternate: primitives.$black-20;
 $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-default: primitives.$white-100;
 $on-workout-surface-gx-alternate: primitives.$salmon-pink-100;
@@ -381,6 +398,8 @@ $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;
+$workout-surface-availability-hover: primitives.$black-80;
 $workout-surface-bootcamp: primitives.$tropical-indigo-180;
 $workout-surface-bootcamp-hover: primitives.$tropical-indigo-160;
 $workout-surface-gx: primitives.$salmon-pink-180;

package/tokens/light.scss

@@ -206,18 +206,33 @@ $ge-toggle-selected-disabled: primitives.$coral-40;
 $ge-toggle-unselected-default: primitives.$blue-40;
 $ge-toggle-unselected-disabled: primitives.$light-grey-15;
 $ge-toggle-unselected-interactive-element: primitives.$white-100;
+$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-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-information: primitives.$bright-blue-110;
+$on-background-neutral: primitives.$black-60;
+$on-background-success: primitives.$spring-green-120;
+$on-background-waiting-list: primitives.$egyptian-purple-100;
+$on-background-warning: primitives.$gold-140;
 $on-background-primary-alternate: primitives.$blue-70;
 $on-background-primary-default: primitives.$blue-100;
 $on-background-primary-disabled: primitives.$black-55;
 $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-information: primitives.$bright-blue-60;
+$on-fixed-background-neutral: primitives.$white-60;
+$on-fixed-background-success: primitives.$spring-green-60;
+$on-fixed-background-waiting-list: primitives.$egyptian-purple-40;
+$on-fixed-background-warning: primitives.$gold-60;
 $on-fixed-background-primary-alternate: primitives.$white-60;
 $on-fixed-background-primary-default: primitives.$white-100;
 $on-fixed-background-primary-disabled: primitives.$white-50;
@@ -320,17 +335,19 @@ $on-surface-primary-disabled: primitives.$black-55;
 $on-surface-secondary-alternate: primitives.$blue-70;
 $on-surface-secondary-default: primitives.$blue-100;
 $on-surface-secondary-disabled: primitives.$black-60;
-$on-workout-surface-bootcamp-alternate: primitives.$tropical-indigo-140;
+$on-workout-surface-availability-default: primitives.$blue-100;
+$on-workout-surface-availability-hover: primitives.$blue-grey-80;
+$on-workout-surface-bootcamp-alternate: primitives.$tropical-indigo-160;
 $on-workout-surface-bootcamp-default: primitives.$blue-100;
-$on-workout-surface-gx-alternate: primitives.$salmon-pink-140;
+$on-workout-surface-gx-alternate: primitives.$salmon-pink-180;
 $on-workout-surface-gx-default: primitives.$blue-100;
-$on-workout-surface-gymfloor-alternate: primitives.$tangerine-140;
+$on-workout-surface-gymfloor-alternate: primitives.$tangerine-160;
 $on-workout-surface-gymfloor-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-140;
+$on-workout-surface-pt-alternate: primitives.$uranian-blue-160;
 $on-workout-surface-pt-default: primitives.$blue-100;
-$on-workout-surface-treatments-alternate: primitives.$caribbean-current-100;
+$on-workout-surface-treatments-alternate: primitives.$caribbean-current-180;
 $on-workout-surface-treatments-default: primitives.$blue-100;
 $on-buttons-on-action-default: primitives.$coral-120;
 $on-buttons-on-action-disabled: primitives.$black-50;
@@ -381,15 +398,17 @@ $surface-secondary-default: primitives.$black-3;
 $surface-secondary-disabled: primitives.$black-10;
 $surface-secondary-hover: primitives.$white-100;
 $surface-secondary-selected: primitives.$black-5;
-$workout-surface-bootcamp: primitives.$tropical-indigo-10;
-$workout-surface-bootcamp-hover: primitives.$tropical-indigo-20;
-$workout-surface-gx: primitives.$salmon-pink-10;
-$workout-surface-gx-hover: primitives.$salmon-pink-20;
-$workout-surface-gymfloor: primitives.$tangerine-10;
-$workout-surface-gymfloor-hover: primitives.$tangerine-20;
-$workout-surface-other: primitives.$celadon-10;
-$workout-surface-other-hover: primitives.$celadon-20;
-$workout-surface-pt: primitives.$uranian-blue-10;
-$workout-surface-pt-hover: primitives.$uranian-blue-20;
-$workout-surface-treatments: primitives.$caribbean-current-10;
-$workout-surface-treatments-hover: primitives.$caribbean-current-20;
+$workout-surface-availability: primitives.$light-grey-15;
+$workout-surface-availability-hover: primitives.$blue-20;
+$workout-surface-bootcamp: primitives.$tropical-indigo-30;
+$workout-surface-bootcamp-hover: primitives.$tropical-indigo-40;
+$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-other: primitives.$celadon-40;
+$workout-surface-other-hover: primitives.$celadon-60;
+$workout-surface-pt: primitives.$uranian-blue-40;
+$workout-surface-pt-hover: primitives.$uranian-blue-60;
+$workout-surface-treatments: primitives.$caribbean-current-40;
+$workout-surface-treatments-hover: primitives.$caribbean-current-60;

package/tokens/primitives.scss

@@ -46,6 +46,7 @@ $caribbean-current-140: #054a4f;
 $caribbean-current-160: #04383b;
 $caribbean-current-180: #011314;
 $caribbean-current-20: #cddfe0;
+$caribbean-current-40: #9bbec1;
 $caribbean-current-60: #6a9ea1;
 $celadon-10: #f0fdf4;
 $celadon-100: #65e694;
@@ -53,6 +54,7 @@ $celadon-140: #3f965e;
 $celadon-160: #184629;
 $celadon-180: #051e0e;
 $celadon-20: #e0faea;
+$celadon-40: #c1f5d4;
 $celadon-60: #a3f0bf;
 $chili-red-10: #fbeae9;
 $chili-red-100: #d93226;
@@ -92,6 +94,7 @@ $salmon-pink-140: #b54352;
 $salmon-pink-160: #912d3a;
 $salmon-pink-180: #470009;
 $salmon-pink-20: #ffe2e6;
+$salmon-pink-40: #ffc6cd;
 $salmon-pink-60: #ffa9b5;
 $spring-green-10: #e6f2ee;
 $spring-green-100: #097f58;
@@ -106,6 +109,7 @@ $tangerine-140: #976000;
 $tangerine-160: #644000;
 $tangerine-180: #322000;
 $tangerine-20: #feeccc;
+$tangerine-40: #fdd999;
 $tangerine-60: #fdc666;
 $tropical-indigo-10: #f6f1ff;
 $tropical-indigo-100: #a670ff;
@@ -113,6 +117,8 @@ $tropical-indigo-140: #644399;
 $tropical-indigo-160: #422d66;
 $tropical-indigo-180: #211633;
 $tropical-indigo-20: #ede2ff;
+$tropical-indigo-30: #e4d4ff;
+$tropical-indigo-40: #dbc6ff;
 $tropical-indigo-60: #caa9ff;
 $uranian-blue-10: #f1f9ff;
 $uranian-blue-100: #70c4ff;
@@ -120,6 +126,7 @@ $uranian-blue-140: #2d6891;
 $uranian-blue-160: #16496c;
 $uranian-blue-180: #0b3959;
 $uranian-blue-20: #e2f3ff;
+$uranian-blue-40: #c6e7ff;
 $uranian-blue-60: #a9dcff;
 $white-0: #ffffff00;
 $white-10: #ffffff1a;