@sats-group/ui-lib 74.2.0

package/react/visually-button/visually-button.types.ts

@@ -0,0 +1,71 @@
+import { ReactElement } from 'react';
+
+import { ButtonHtmlProps, ObjectValues, LinkHtmlProps } from '../types';
+
+export const sizes = {
+  small: 'small',
+  basic: 'basic',
+  large: 'large',
+} as const;
+
+export const variants = {
+  complete: 'complete',
+  cta: 'cta',
+  ctaSecondary: 'cta-secondary',
+  ctaSecondaryWhite: 'cta-secondary-white',
+  primary: 'primary',
+  primaryDestructive: 'primary-destructive',
+  primaryWhite: 'primary-white',
+  secondary: 'secondary',
+  secondaryWhite: 'secondary-white',
+  secondaryDestructive: 'secondary-destructive',
+  tertiary: 'tertiary',
+  tertiaryDestructive: 'tertiary-destructive',
+  fixedTertiary: 'fixed-tertiary',
+  waitlist: 'waitlist',
+  waitlistSecondary: 'waitlist-secondary',
+} as const;
+
+export const themes = {
+  spinner: 'spinner',
+  normal: 'normal',
+} as const;
+
+type TextProp = {
+  text: string;
+  ariaLabel?: never;
+};
+
+type AriaLabelProp = {
+  ariaLabel: string;
+  text?: never;
+};
+
+type BasicProps = {
+  className?: string;
+  elementName?: string;
+  leadingIcon?: ReactElement;
+  trailingIcon?: ReactElement;
+  hasStackedIcon?: boolean;
+  size?: ObjectValues<typeof sizes>;
+  testId?: string;
+  theme?: ObjectValues<typeof themes>;
+  variant?: ObjectValues<typeof variants>;
+  wide?: boolean;
+};
+
+type CommonProps = (BasicProps & TextProp) | (BasicProps & AriaLabelProp);
+
+export type VisuallyButtonButton = CommonProps & ButtonHtmlProps;
+
+export type VisuallyButtonLink = CommonProps & LinkHtmlProps;
+
+// NOTE: If the element isn't `a` or `button` we don't restrict the type of the rest props
+type VisuallyButtonOther = CommonProps & {
+  [key: string]: unknown;
+};
+
+export type VisuallyButton =
+  | ({ elementName: 'button' } & VisuallyButtonButton)
+  | ({ elementName: 'a' } & VisuallyButtonLink)
+  | ({ elementName: string } & VisuallyButtonOther);

package/react/visually-hidden/index.ts

@@ -0,0 +1,2 @@
+import VisuallyHidden from './visually-hidden';
+export default VisuallyHidden;

package/react/visually-hidden/visually-hidden.scss

@@ -0,0 +1,6 @@
+.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+}

package/react/visually-hidden/visually-hidden.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+const VisuallyHidden: React.FunctionComponent<React.PropsWithChildren> = ({
+  children,
+}) =>
+  React.Children.count(children) === 0 ? null : (
+    <span className="visually-hidden">{children}</span>
+  );
+
+export default VisuallyHidden;

package/tokens/corner-radius.scss

@@ -0,0 +1,5 @@
+$none: 0;
+$xs: 4px;
+$s: 8px;
+$m: 12px;
+$l: 24px;

package/tokens/dark.scss

@@ -0,0 +1,392 @@
+@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;
+$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-disabled: primitives.$black-80;
+$buttons-cta-hover: primitives.$coral-120;
+$buttons-clean-default: primitives.$white-100;
+$buttons-clean-disabled: primitives.$white-10;
+$buttons-clean-hover: primitives.$white-90;
+$buttons-clean-secondary-default: primitives.$white-15;
+$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-disabled: primitives.$black-80;
+$buttons-complete-hover: primitives.$coral-120;
+$buttons-destructive-default: primitives.$chili-red-80;
+$buttons-destructive-disabled: primitives.$black-80;
+$buttons-destructive-hover: primitives.$chili-red-60;
+$buttons-destructive-outlined-default: primitives.$chili-red-80;
+$buttons-destructive-outlined-disabled: primitives.$black-50;
+$buttons-destructive-outlined-hover: primitives.$chili-red-170;
+$buttons-fixed-action-default: primitives.$white-0;
+$buttons-fixed-action-disabled: primitives.$white-0;
+$buttons-fixed-action-pressed: primitives.$white-0;
+$buttons-fixed-link-default: primitives.$white-0;
+$buttons-fixed-link-disabled: primitives.$white-0;
+$buttons-fixed-link-hover: primitives.$bright-blue-160;
+$buttons-link-default: primitives.$white-0;
+$buttons-link-disabled: primitives.$white-0;
+$buttons-link-hover: primitives.$bright-blue-160;
+$buttons-primary-default: primitives.$white-100;
+$buttons-primary-disabled: primitives.$white-10;
+$buttons-primary-hover: primitives.$bright-blue-20;
+$buttons-secondary-default: primitives.$white-100;
+$buttons-secondary-disabled: primitives.$black-80;
+$buttons-secondary-hover: primitives.$bright-blue-160;
+$buttons-waiting-list-default: primitives.$egyptian-purple-80;
+$buttons-waiting-list-disabled: primitives.$black-80;
+$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-secondary-default: primitives.$blue-100;
+$fixed-background-secondary-hover: primitives.$blue-90;
+$fixed-background-secondary-selected: primitives.$blue-grey-80;
+$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;
+$ge-graphical-elements-1: primitives.$white-100;
+$ge-graphical-elements-2: primitives.$white-90;
+$ge-graphical-elements-3: primitives.$white-70;
+$ge-graphical-elements-4: primitives.$black-90;
+$ge-shadow: primitives.$black-100;
+$ge-tabs: primitives.$black-90;
+$ge-badge-primary: primitives.$coral-90;
+$ge-badge-secondary: primitives.$blue-10;
+$ge-badge-tertiary: primitives.$black-80;
+$ge-border-default: primitives.$black-70;
+$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-unselected-default: primitives.$white-85;
+$ge-chips-unselected-disabled: primitives.$white-10;
+$ge-chips-unselected-hover: primitives.$white-10;
+$ge-divider-alternate: primitives.$white-40;
+$ge-divider-default: primitives.$black-80;
+$ge-divider-fixed: primitives.$white-20;
+$ge-divider-fixed-alternate: primitives.$white-40;
+$ge-fixed-badge-primary: primitives.$coral-120;
+$ge-fixed-badge-secondary: primitives.$bright-blue-10;
+$ge-fixed-badge-tertiary: primitives.$blue-grey-80;
+$ge-fixed-chips-selected-default: primitives.$coral-120;
+$ge-fixed-chips-selected-disabled: primitives.$blue-70;
+$ge-fixed-chips-selected-hover: primitives.$coral-130;
+$ge-fixed-chips-unselected-default: primitives.$white-100;
+$ge-fixed-chips-unselected-disabled: primitives.$white-50;
+$ge-fixed-chips-unselected-hover: primitives.$black-o20;
+$ge-fixed-progress-bar-background: primitives.$white-40;
+$ge-fixed-progress-bar-indicator-alternate: primitives.$blue-10;
+$ge-fixed-progress-bar-indicator-default: primitives.$coral-90;
+$ge-fixed-progress-bar-indicator-disabled: primitives.$white-40;
+$ge-fixed-selector-selected-default: primitives.$coral-90;
+$ge-fixed-selector-selected-disabled: primitives.$coral-130;
+$ge-fixed-selector-selected-bg-default: primitives.$coral-170;
+$ge-fixed-selector-selected-bg-disabled: primitives.$coral-190;
+$ge-fixed-selector-unselected-default: primitives.$white-100;
+$ge-fixed-selector-unselected-disabled: primitives.$white-50;
+$ge-fixed-tabs-background-default: primitives.$white-0;
+$ge-fixed-tabs-background-disabled: primitives.$blue-grey-80;
+$ge-fixed-tabs-background-hover: primitives.$white-15;
+$ge-fixed-tabs-selected-default: primitives.$coral-100;
+$ge-fixed-tabs-selected-disabled: primitives.$blue-70;
+$ge-fixed-tabs-selected-hover: primitives.$coral-120;
+$ge-fixed-tabs-unselected-default: primitives.$white-20;
+$ge-fixed-tabs-unselected-disabled: primitives.$white-10;
+$ge-fixed-tabs-unselected-hover: primitives.$white-40;
+$ge-graphs-bar-primary: primitives.$coral-90;
+$ge-graphs-bar-secondary: primitives.$blue-40;
+$ge-graphs-bar-background-primary: primitives.$black-80;
+$ge-graphs-bar-background-secondary: primitives.$black-70;
+$ge-graphs-trend-downwards: primitives.$cardinal-100;
+$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-fixed: primitives.$white-100;
+$ge-icons-negative: primitives.$cardinal-100;
+$ge-icons-positive: primitives.$spring-green-80;
+$ge-icons-primary: primitives.$white-100;
+$ge-icons-secondary: primitives.$black-20;
+$ge-icons-waiting-list: primitives.$egyptian-purple-80;
+$ge-indicator-tags-attention-alternate: primitives.$gold-170;
+$ge-indicator-tags-attention-default: primitives.$gold-80;
+$ge-indicator-tags-featured-alternate: primitives.$coral-170;
+$ge-indicator-tags-featured-default: primitives.$coral-90;
+$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-default: primitives.$black-60;
+$ge-indicator-tags-positive-alternate: primitives.$spring-green-170;
+$ge-indicator-tags-positive-default: primitives.$spring-green-100;
+$ge-indicators-attention-alternate: primitives.$gold-170;
+$ge-indicators-attention-default: primitives.$gold-100;
+$ge-indicators-negative-alternate: primitives.$cardinal-170;
+$ge-indicators-negative-default: primitives.$cardinal-100;
+$ge-indicators-neutral-alternate: primitives.$black-80;
+$ge-indicators-neutral-default: primitives.$blue-40;
+$ge-indicators-positive-alternate: primitives.$spring-green-170;
+$ge-indicators-positive-default: primitives.$spring-green-80;
+$ge-nav-bar-not-selected: primitives.$white-100;
+$ge-nav-bar-selected: primitives.$white-100;
+$ge-progress-bar-background: primitives.$black-70;
+$ge-progress-bar-indicator-alternate: primitives.$blue-10;
+$ge-progress-bar-indicator-default: primitives.$coral-90;
+$ge-progress-bar-indicator-disabled: primitives.$white-20;
+$ge-rewards-blue: primitives.$bright-blue-100;
+$ge-rewards-gold: primitives.$gold-110;
+$ge-rewards-platinum: primitives.$blue-40;
+$ge-rewards-silver: primitives.$blue-20;
+$ge-selector-primary-selected-alternate: primitives.$coral-190;
+$ge-selector-primary-selected-default: primitives.$coral-90;
+$ge-selector-primary-selected-disabled: primitives.$coral-130;
+$ge-selector-primary-selected-hover: primitives.$coral-100;
+$ge-selector-primary-selected-bg-default: primitives.$coral-170;
+$ge-selector-primary-selected-bg-disabled: primitives.$coral-190;
+$ge-selector-primary-unselected-default: primitives.$white-100;
+$ge-selector-primary-unselected-disabled: primitives.$white-10;
+$ge-selector-primary-unselected-hover: primitives.$coral-190;
+$ge-selector-primary-unselected-bg-default: primitives.$white-0;
+$ge-selector-primary-unselected-bg-disabled: primitives.$white-0;
+$ge-selector-secondary-selected-default: primitives.$white-100;
+$ge-selector-secondary-selected-disabled: primitives.$white-20;
+$ge-selector-secondary-selected-bg-default: primitives.$bright-blue-160;
+$ge-selector-secondary-selected-bg-disabled: primitives.$bright-blue-170;
+$ge-selector-secondary-unselected-default: primitives.$white-100;
+$ge-selector-secondary-unselected-disabled: primitives.$white-10;
+$ge-selector-secondary-unselected-bg-default: primitives.$white-0;
+$ge-selector-secondary-unselected-bg-disabled: primitives.$white-0;
+$ge-signal-error: primitives.$cardinal-100;
+$ge-signal-neutral: primitives.$blue-40;
+$ge-signal-success: primitives.$spring-green-80;
+$ge-signal-waiting-list: primitives.$egyptian-purple-80;
+$ge-signal-warning: primitives.$gold-100;
+$ge-signal-border-error: primitives.$cardinal-30;
+$ge-signal-border-featured: primitives.$coral-40;
+$ge-signal-border-information: primitives.$bright-blue-20;
+$ge-signal-border-neutral: primitives.$black-20;
+$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-tabs-background-default: primitives.$white-0;
+$ge-tabs-background-disabled: primitives.$black-95;
+$ge-tabs-background-hover: primitives.$coral-190;
+$ge-tabs-selected-default: primitives.$coral-100;
+$ge-tabs-selected-disabled: primitives.$coral-170;
+$ge-tabs-selected-hover: primitives.$coral-120;
+$ge-tabs-unselected-default: primitives.$black-80;
+$ge-tabs-unselected-disabled: primitives.$black-90;
+$ge-tabs-unselected-hover: primitives.$black-70;
+$ge-tags-featured: primitives.$coral-90;
+$ge-tags-primary: primitives.$blue-10;
+$ge-tags-secondary: primitives.$black-80;
+$ge-toggle-interactive-element: primitives.$white-100;
+$ge-toggle-selected-default: primitives.$coral-90;
+$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-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-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-primary-alternate: primitives.$white-60;
+$on-fixed-background-primary-default: primitives.$white-100;
+$on-fixed-background-primary-disabled: primitives.$white-50;
+$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-information: primitives.$bright-blue-60;
+$on-fixed-surface-neutral: primitives.$white-60;
+$on-fixed-surface-success: primitives.$spring-green-60;
+$on-fixed-surface-waiting-list: primitives.$egyptian-purple-40;
+$on-fixed-surface-warning: primitives.$gold-60;
+$on-fixed-surface-primary-alternate: primitives.$white-65;
+$on-fixed-surface-primary-default: primitives.$white-100;
+$on-fixed-surface-primary-disabled: primitives.$white-50;
+$on-fixed-surface-secondary-alternate: primitives.$white-65;
+$on-fixed-surface-secondary-default: primitives.$white-100;
+$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-disabled: primitives.$white-60;
+$on-ge-on-chips-unselected-default: primitives.$white-100;
+$on-ge-on-chips-unselected-disabled: primitives.$white-20;
+$on-ge-on-fixed-badge-primary: primitives.$white-100;
+$on-ge-on-fixed-badge-secondary: primitives.$blue-100;
+$on-ge-on-fixed-badge-tertiary: primitives.$white-100;
+$on-ge-on-fixed-chips-selected-default: primitives.$white-100;
+$on-ge-on-fixed-chips-selected-disabled: primitives.$blue-40;
+$on-ge-on-fixed-chips-unselected-default: primitives.$white-100;
+$on-ge-on-fixed-chips-unselected-disabled: primitives.$white-50;
+$on-ge-on-fixed-selector-selected-default: primitives.$blue-100;
+$on-ge-on-fixed-selector-selected-disabled: primitives.$coral-170;
+$on-ge-on-fixed-selector-unselected-default: primitives.$white-100;
+$on-ge-on-fixed-selector-unselected-disabled: primitives.$white-50;
+$on-ge-on-fixed-tabs-default: primitives.$white-100;
+$on-ge-on-fixed-tabs-disabled: primitives.$white-50;
+$on-ge-on-indicator-tags-attention-alternate: primitives.$gold-30;
+$on-ge-on-indicator-tags-attention-default: primitives.$gold-170;
+$on-ge-on-indicator-tags-featured-alternate: primitives.$coral-40;
+$on-ge-on-indicator-tags-featured-default: primitives.$coral-170;
+$on-ge-on-indicator-tags-information-alternate: primitives.$bright-blue-20;
+$on-ge-on-indicator-tags-information-default: primitives.$white-100;
+$on-ge-on-indicator-tags-negative-alternate: primitives.$cardinal-30;
+$on-ge-on-indicator-tags-negative-default: primitives.$white-100;
+$on-ge-on-indicator-tags-neutral-alternate: primitives.$black-20;
+$on-ge-on-indicator-tags-neutral-default: primitives.$white-100;
+$on-ge-on-indicator-tags-positive-alternate: primitives.$spring-green-30;
+$on-ge-on-indicator-tags-positive-default: primitives.$white-100;
+$on-ge-on-rewards-default: primitives.$blue-100;
+$on-ge-on-selector-primary-selected-alternate: primitives.$white-100;
+$on-ge-on-selector-primary-selected-default: primitives.$blue-100;
+$on-ge-on-selector-primary-selected-disabled: primitives.$white-60;
+$on-ge-on-selector-primary-unselected-default: primitives.$white-100;
+$on-ge-on-selector-primary-unselected-disabled: primitives.$white-20;
+$on-ge-on-selector-secondary-selected-default: primitives.$blue-100;
+$on-ge-on-selector-secondary-selected-disabled: primitives.$white-60;
+$on-ge-on-selector-secondary-unselected-default: primitives.$white-100;
+$on-ge-on-selector-secondary-unselected-disabled: primitives.$white-20;
+$on-ge-on-tabs-default: primitives.$white-100;
+$on-ge-on-tabs-disabled: primitives.$black-40;
+$on-ge-on-tags-featured-default: primitives.$coral-170;
+$on-ge-on-tags-primary-default: primitives.$blue-100;
+$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-other: primitives.$celadon-160;
+$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-default: primitives.$white-100;
+$on-signal-surface-information-alternate: primitives.$bright-blue-60;
+$on-signal-surface-information-default: primitives.$white-100;
+$on-signal-surface-neutral-alternate: primitives.$black-40;
+$on-signal-surface-neutral-default: primitives.$white-100;
+$on-signal-surface-success-alternate: primitives.$spring-green-80;
+$on-signal-surface-success-default: primitives.$white-100;
+$on-signal-surface-waiting-list-alternate: primitives.$egyptian-purple-60;
+$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-information: primitives.$bright-blue-60;
+$on-surface-neutral: primitives.$black-40;
+$on-surface-success: primitives.$spring-green-80;
+$on-surface-waiting-list: primitives.$egyptian-purple-60;
+$on-surface-warning: primitives.$gold-80;
+$on-surface-primary-alternate: primitives.$black-20;
+$on-surface-primary-default: primitives.$white-100;
+$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-bootcamp-alternate: primitives.$tropical-indigo-100;
+$on-workout-surface-bootcamp-default: primitives.$white-100;
+$on-workout-surface-gx-alternate: primitives.$salmon-pink-100;
+$on-workout-surface-gx-default: primitives.$white-100;
+$on-workout-surface-gymfloor-alternate: primitives.$tangerine-100;
+$on-workout-surface-gymfloor-default: primitives.$white-100;
+$on-workout-surface-other-alternate: primitives.$celadon-100;
+$on-workout-surface-other-default: primitives.$white-100;
+$on-workout-surface-pt-alternate: primitives.$uranian-blue-100;
+$on-workout-surface-pt-default: primitives.$white-100;
+$on-workout-surface-treatments-alternate: primitives.$caribbean-current-60;
+$on-workout-surface-treatments-default: primitives.$white-100;
+$on-buttons-on-action-default: primitives.$coral-100;
+$on-buttons-on-action-disabled: primitives.$black-50;
+$on-buttons-on-action-pressed: primitives.$coral-90;
+$on-buttons-on-cta-default: primitives.$white-100;
+$on-buttons-on-cta-disabled: primitives.$white-70;
+$on-buttons-on-clean-default: primitives.$blue-100;
+$on-buttons-on-clean-disabled: primitives.$white-50;
+$on-buttons-on-clean-secondary-default: primitives.$white-100;
+$on-buttons-on-clean-secondary-disabled: primitives.$white-70;
+$on-buttons-on-complete-default: primitives.$white-100;
+$on-buttons-on-complete-disabled: primitives.$white-70;
+$on-buttons-on-destructive-default: primitives.$white-100;
+$on-buttons-on-destructive-disabled: primitives.$black-50;
+$on-buttons-on-destructive-outlined-default: primitives.$chili-red-80;
+$on-buttons-on-destructive-outlined-disabled: primitives.$black-50;
+$on-buttons-on-destructive-outlined-hover: primitives.$chili-red-60;
+$on-buttons-on-fixed-action-default: primitives.$coral-100;
+$on-buttons-on-fixed-action-disabled: primitives.$white-50;
+$on-buttons-on-fixed-action-pressed: primitives.$coral-90;
+$on-buttons-on-fixed-link-default: primitives.$bright-blue-80;
+$on-buttons-on-fixed-link-disabled: primitives.$white-50;
+$on-buttons-on-fixed-link-hover: primitives.$bright-blue-100;
+$on-buttons-on-link-default: primitives.$bright-blue-80;
+$on-buttons-on-link-disabled: primitives.$black-50;
+$on-buttons-on-link-hover: primitives.$bright-blue-100;
+$on-buttons-on-primary-default: primitives.$blue-100;
+$on-buttons-on-primary-disabled: primitives.$black-50;
+$on-buttons-on-secondary-default: primitives.$white-100;
+$on-buttons-on-secondary-disabled: primitives.$black-50;
+$on-buttons-on-waiting-list-default: primitives.$white-100;
+$on-buttons-on-waiting-list-disabled: primitives.$black-50;
+$on-buttons-on-waiting-list-outlined-default: primitives.$egyptian-purple-80;
+$on-buttons-on-waiting-list-outlined-disabled: primitives.$black-50;
+$on-buttons-on-waiting-list-outlined-hover: primitives.$egyptian-purple-100;
+$signal-surface-error: primitives.$cardinal-170;
+$signal-surface-featured: primitives.$coral-190;
+$signal-surface-information: primitives.$bright-blue-160;
+$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-85;
+$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-90;
+$surface-secondary-disabled: primitives.$black-100;
+$surface-secondary-hover: primitives.$black-85;
+$surface-secondary-selected: primitives.$black-90;
+$workout-surface-bootcamp: primitives.$tropical-indigo-180;
+$workout-surface-bootcamp-hover: primitives.$tropical-indigo-160;
+$workout-surface-gx: primitives.$salmon-pink-180;
+$workout-surface-gx-hover: primitives.$salmon-pink-160;
+$workout-surface-gymfloor: primitives.$tangerine-180;
+$workout-surface-gymfloor-hover: primitives.$tangerine-160;
+$workout-surface-other: primitives.$celadon-180;
+$workout-surface-other-hover: primitives.$celadon-160;
+$workout-surface-pt: primitives.$uranian-blue-180;
+$workout-surface-pt-hover: primitives.$uranian-blue-160;
+$workout-surface-treatments: primitives.$caribbean-current-180;
+$workout-surface-treatments-hover: primitives.$caribbean-current-160;

package/tokens/darkmode.scss

@@ -0,0 +1,131 @@
+@use 'sass:color';
+
+$primary: #2676b0;
+$primary-hover: #308acc;
+$primary-disabled: #272729;
+
+$primary-silver: #87878a;
+$primary-silver-hover: #939396;
+$primary-silver-disabled: #272729;
+
+$primary-gold: #d4a852;
+$primary-gold-hover: #d8b163;
+$primary-gold-disabled: #272729;
+
+$primary-platinum: #87878a;
+$primary-platinum-hover: #939396;
+$primary-platinum-disabled: #272729;
+
+$secondary: #3c3c41;
+$secondary-hover: #47474d;
+$secondary-disabled: #272729;
+
+$clean: #fff;
+$clean-hover: color.adjust(#fff, $alpha: -0.1);
+$clean-disabled: color.adjust(#fff, $alpha: -0.9);
+
+$clean-secondary: color.adjust(#fff, $alpha: -0.85);
+$clean-secondary-hover: color.adjust(#fff, $alpha: -0.9);
+$clean-secondary-disabled: color.adjust(#fff, $alpha: -0.95);
+
+$cta: #e16259;
+$cta-hover: #cd6354;
+$cta-disabled: #353535;
+$cta-non-text: #fd7459;
+
+$selection-blue: #9ec3ff;
+$selection-silver: #cad1d8;
+$selection-gold: #d4a852;
+$selection-platinum: #929aa1;
+
+$action: #549bde;
+$action-hover: #75b5f2;
+$action-disabled: #272729;
+
+$navigation-blue: #549bde;
+$navigation-silver: #f0f4f9;
+$navigation-gold: #d4a852;
+$navigation-platinum: #f2f9ff;
+
+$waitlist: #686db9;
+$waitlist-hover: #484ba2;
+$waitlist-text: #a0a5f1;
+$waitlist-disabled: #686db9;
+$waitlist-background: #2e2f46;
+
+$signal-success: #8bbf9b;
+$signal-success-text: #8bbf9b;
+$signal-success-background: #424846;
+$signal-warning: #fcd36c;
+$signal-warning-text: #fcd36c;
+$signal-warning-background: #484641;
+$signal-error: #e9698b;
+$signal-error-text: #e9698b;
+$signal-error-background: #4a4444;
+$signal-delete: #e5766e;
+$signal-delete-text: #e5766e;
+$signal-delete-background: #4b4343;
+
+$workout-pt: #6fc2ff;
+$workout-gx: #ee90f0;
+$workout-gymfloor: #e9698b;
+$workout-other: #56c09d;
+
+$ui-pressed: fuchsia; // NOTE: This is missing from Figma
+$ui-tabs: #191c1e;
+$ui-shimmer: #333438;
+$ui-border: color.adjust(#fff, $alpha: -0.91);
+$ui-shadow: #000000;
+$ui-graphical-elements-1: #ffffff;
+$ui-graphical-elements-2: color.adjust(#fff, $alpha: -0.1);
+$ui-graphical-elements-3: color.adjust(#fff, $alpha: -0.3);
+$ui-graphical-elements-4: #191c1e;
+$ui-graphical-elements-5: #fd7459;
+$ui-graphical-elements-6: #8bbf9b;
+$ui-graphical-elements-7: #686db9;
+
+$background-primary: #000;
+$background-secondary: #000;
+$background-surface-primary: #282e34;
+$background-surface-secondary: #282e34;
+
+$on-primary: #fff;
+$on-primary-disabled: color.adjust(#fff, $alpha: -0.32);
+
+$on-secondary: #fff;
+$on-secondary-disabled: color.adjust(#fff, $alpha: -0.32);
+
+$on-clean: #0e2133;
+$on-clean-disabled: #9fa6ad;
+
+$on-clean-secondary: #fff;
+$on-clean-secondary-disabled: color.adjust(#fff, $alpha: -0.32);
+
+$on-cta: #fff;
+$on-cta-disabled: color.adjust(#fff, $alpha: -0.32);
+$on-cta-non-text: #fff;
+
+$on-signal: #fff;
+
+$on-waitlist: #fff;
+$on-waitlist-disabled: color.adjust(#fff, $alpha: -0.32);
+
+$on-background-primary: #fff;
+$on-background-secondary: color.adjust(#fff, $alpha: -0.32);
+$on-background-disabled: color.adjust(#fff, $alpha: -0.6);
+$on-background-enabled-on: #fd7459;
+$on-background-enabled-off: #fff;
+$on-background-disabled-on: color.adjust(#fd7459, $alpha: -0.3);
+$on-background-disabled-off: color.adjust(#fff, $alpha: -0.6);
+$on-background-element-on: fuchsia; // NOTE: This is missing from Figma
+$on-background-element-off: fuchsia; // NOTE: This is missing from Figma
+
+$on-surface-primary: #fff;
+$on-surface-secondary: color.adjust(#fff, $alpha: -0.32);
+$on-surface-disabled: color.adjust(#fff, $alpha: -0.6);
+$on-surface-enabled-on: #fd7459;
+$on-surface-enabled-off: #fff;
+$on-surface-disabled-on: color.adjust(#fd7459, $alpha: -0.3);
+$on-surface-disabled-off: color.adjust(#fff, $alpha: -0.6);
+$on-surface-element-on: fuchsia; // NOTE: This is missing from Figma
+$on-surface-element-off: fuchsia; // NOTE: This is missing from Figma

package/tokens/elevation.scss

@@ -0,0 +1,57 @@
+@use "sass:map";
+
+$levels: (
+  1: (
+    0px 0px 4px rgba(black, 0.08),
+    0px 1px 2px rgba(black, 0.06),
+    0px 1px 4px rgba(black, 0.14)
+  ),
+  2: (
+    0px 1px 1px rgba(black, 0.08),
+    0px 1px 5px rgba(black, 0.12),
+    0px 2px 9px rgba(black, 0.1)
+  ),
+  3: (
+    0px 3px 3px rgba(black, 0.08),
+    0px 3px 4px rgba(black, 0.1),
+    0px 1px 10px rgba(black, 0.08)
+  ),
+  4: (
+    0px 1px 10px rgba(black, 0.08),
+    0px 4px 5px rgba(black, 0.1),
+    0px 2px 4px rgba(black, 0.1)
+  ),
+  6: (
+    0px 1px 18px rgba(black, 0.08),
+    0px 6px 10px rgba(black, 0.1),
+    0px 3px 5px rgba(black, 0.1)
+  ),
+  8: (
+    0px 3px 14px rgba(black, 0.08),
+    0px 8px 10px rgba(black, 0.1),
+    0px 5px 5px rgba(black, 0.1)
+  ),
+  12: (
+    0px 5px 22px rgba(black, 0.08),
+    0px 12px 17px rgba(black, 0.1),
+    0px 7px 8px rgba(black, 0.1)
+  ),
+  16: (
+    0px 7px 30px rgba(black, 0.08),
+    0px 16px 24px rgba(black, 0.1),
+    0px 8px 10px rgba(black, 0.1)
+  ),
+  24: (
+    0px 9px 46px rgba(black, 0.08),
+    0px 24px 38px rgba(black, 0.1),
+    0px 11px 15px rgba(black, 0.1)
+  )
+);
+
+@mixin level($level) {
+  @if map.has-key($levels, $level) {
+    box-shadow: map.get($levels, $level);
+  } @else {
+    @error "Level #{$level} does not exist.";
+  }
+}