@ornikar/bumper 3.9.1 → 3.10.1

package/src/system/content/typography/Typography.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
-import type { BodyProps, TypographyTextProps } from './Typography';
+import type { TypographyBodyProps, TypographyTextProps } from './Typography';
 import { Typography } from '.';
 
-const meta: Meta<Extract<TypographyTextProps, BodyProps>> = {
+const meta: Meta<Extract<TypographyTextProps, TypographyBodyProps>> = {
   title: 'Bumper/Content/Typography',
   component: Typography.Text,
   argTypes: {

package/src/system/content/typography/Typography.tsx

@@ -1,4 +1,4 @@
-import type { ColorTokens, GetProps } from '@tamagui/core';
+import type { ColorTokens, TextProps } from '@tamagui/core';
 import { Text, styled } from '@tamagui/core';
 import type { ReactNode } from 'react';
 import { type Except } from 'type-fest';
@@ -13,13 +13,11 @@ import {
 } from '../../core/tokens/GTStandardFont';
 import { CONTENT_CAPS_VARIANTS, type ContentCapsVariants } from '../../core/tokens/GTStandardNarrowFont';
 import type { FontVariants } from '../../core/tokens/fonts';
-import type { TamaguiMediaProps } from '../../types';
+import type { PropsToTamaguiVariants, TamaguiMediaProps } from '../../types';
 import { typographyStyleContext } from './utils/typographyContext';
 
-interface TypographyWithoutMediaProps extends TypographyPropsWithoutFontStyleProps {}
-
 // Remove font-related style props from InternalTypography Props
-type TypographyExcludedFontStyleProps =
+type InternalTypographyExcludedFontStyleProps =
   | 'fontFamily'
   | 'fontSize'
   | 'lineHeight'
@@ -28,27 +26,30 @@ type TypographyExcludedFontStyleProps =
   | 'fontWeight'
   | 'color';
 
-type TypographyPropsWithoutFontStyleProps = Except<InternalTypographyProps, TypographyExcludedFontStyleProps> & {
+type InternalTypographyPropsWithoutFontStyleProps = Except<TextProps, InternalTypographyExcludedFontStyleProps> & {
   color?: ColorTokens;
 };
 
-export interface BodyProps extends TypographyWithoutMediaProps {
+interface InternalTypographyWithoutMediaProps extends InternalTypographyPropsWithoutFontStyleProps {}
+
+interface TypographyBodyWithoutMediaProps extends InternalTypographyWithoutMediaProps {
   variant?: BodyFontVariants;
   weight?: 'regular' | 'bold';
 }
-export interface HeadingLabelProps extends TypographyWithoutMediaProps {
+interface TypographyHeadingLabelWithoutMediaProps extends InternalTypographyWithoutMediaProps {
   variant: HeadingFontVariants | LabelFontVariants;
   weight?: 'semibold';
 }
-export interface ContentCapsProps extends TypographyWithoutMediaProps {
+interface TypographyContentCapsWithoutMediaProps extends InternalTypographyWithoutMediaProps {
   variant: ContentCapsVariants;
   weight?: 'bold';
 }
 
-export type TypographyTextProps =
-  | TamaguiMediaProps<BodyProps>
-  | TamaguiMediaProps<HeadingLabelProps>
-  | TamaguiMediaProps<ContentCapsProps>;
+export interface TypographyBodyProps extends TamaguiMediaProps<TypographyBodyWithoutMediaProps> {}
+export interface TypographyHeadingLabelProps extends TamaguiMediaProps<TypographyHeadingLabelWithoutMediaProps> {}
+export interface TypographyContentCapsProps extends TamaguiMediaProps<TypographyContentCapsWithoutMediaProps> {}
+
+export type TypographyTextProps = TypographyBodyProps | TypographyHeadingLabelProps | TypographyContentCapsProps;
 
 export const InternalTypography = styled(Text, {
   context: typographyStyleContext,
@@ -63,9 +64,9 @@ export const InternalTypography = styled(Text, {
     WebkitFontSmoothing: 'antialiased',
   },
   variants: {
-    variant: (variant: FontVariants) => {
+    variant: (variant: FontVariants): TextProps => {
       const commonVariantStyles = {
-        fontSize: `$${variant}`,
+        fontSize: `$${variant}` as const,
         lineHeight: `$${variant}`,
         letterSpacing: `$${variant}`,
       };
@@ -100,7 +101,7 @@ export const InternalTypography = styled(Text, {
         };
       }
 
-      return undefined;
+      return {};
     },
     weight: {
       regular: {
@@ -113,14 +114,15 @@ export const InternalTypography = styled(Text, {
         fontWeight: '$bold',
       },
     },
-  } as const,
+  } as const satisfies PropsToTamaguiVariants<
+    TypographyBodyWithoutMediaProps | TypographyHeadingLabelWithoutMediaProps | TypographyContentCapsWithoutMediaProps,
+    TextProps
+  >,
   defaultVariants: {
     weight: 'regular',
   },
 });
 
-export type InternalTypographyProps = GetProps<typeof InternalTypography>;
-
 export function TypographyBase(props: TypographyTextProps): ReactNode {
   const flattenProps = useProps(props);
   return <InternalTypography {...flattenProps} />;

package/src/system/content/typography/TypographyLink.features.stories.tsx

@@ -1,12 +1,12 @@
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { VStack } from '../../core/primitives/Stack';
-import type { BodyProps } from './Typography';
+import type { TypographyBodyProps } from './Typography';
 import type { TypographyLinkProps } from './TypographyLink';
 import { InternalTypographyLink, TypographyLink } from './TypographyLink';
 import { Typography } from '.';
 
-const meta: Meta<Extract<TypographyLinkProps, BodyProps>> = {
+const meta: Meta<Extract<TypographyLinkProps, TypographyBodyProps>> = {
   title: 'Bumper/Content/TypographyLink/Features',
   component: TypographyLink,
 };

package/src/system/content/typography/TypographyLink.stories.tsx

@@ -1,11 +1,11 @@
 import { action } from '@storybook/addon-actions';
 import type { Meta, StoryObj } from '@storybook/react';
 import { contentColorArgType } from '../../../shared/storybook/helpers/argsHelpers';
-import type { BodyProps } from './Typography';
+import type { TypographyBodyProps } from './Typography';
 import type { TypographyLinkProps } from './TypographyLink';
 import { TypographyLink } from './TypographyLink';
 
-const meta: Meta<Extract<TypographyLinkProps, BodyProps>> = {
+const meta: Meta<Extract<TypographyLinkProps, TypographyBodyProps>> = {
   title: 'Bumper/Content/TypographyLink',
   component: TypographyLink,
   argTypes: {

package/src/system/content/typography/TypographyLink.tsx

@@ -1,6 +1,7 @@
+import type { TextProps } from '@tamagui/core';
 import { styled } from '@tamagui/core';
 import type { ReactNode } from 'react';
-import type { TamaguiMediaProps } from '../../types';
+import type { PropsToTamaguiVariants, TamaguiMediaProps } from '../../types';
 import type { TypographyTextProps } from './Typography';
 import { InternalTypography } from './Typography';
 import { typographyStyleContext } from './utils/typographyContext';
@@ -9,6 +10,7 @@ export interface TypographyLinkWithoutMediaProps {
   disabled?: boolean;
   noUnderline?: boolean;
   onPress?: () => void;
+  href?: string;
 }
 
 export type TypographyLinkProps = TypographyTextProps & TamaguiMediaProps<TypographyLinkWithoutMediaProps>;
@@ -41,7 +43,7 @@ export const InternalTypographyLink = styled(InternalTypography, {
         textDecorationLine: 'underline',
       },
     },
-  } as const,
+  } as const satisfies PropsToTamaguiVariants<TypographyLinkWithoutMediaProps, TextProps>,
   defaultVariants: {
     disabled: false,
     noUnderline: false,

package/src/system/core/themes/light/__snapshots__/light.stories.tsx.snap

@@ -1207,7 +1207,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           style={
             {
               "alignItems": "center",
-              "backgroundColor": "#ECECEC",
+              "backgroundColor": "#ffffff",
               "borderBottomColor": "#F1ECE4",
               "borderBottomLeftRadius": 4,
               "borderBottomRightRadius": 4,
@@ -1230,7 +1230,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           <View
             style={
               {
-                "backgroundColor": "#ffffff",
+                "backgroundColor": "#563B56",
                 "borderBottomLeftRadius": 2,
                 "borderBottomRightRadius": 2,
                 "borderTopLeftRadius": 2,
@@ -1278,7 +1278,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           }
           suppressHighlighting={true}
         >
-          #ECECEC
+          #ffffff
         </Text>
       </View>
       <View
@@ -3119,7 +3119,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           style={
             {
               "alignItems": "center",
-              "backgroundColor": "#A8A8A8",
+              "backgroundColor": "#BABABA",
               "borderBottomColor": "#F1ECE4",
               "borderBottomLeftRadius": 4,
               "borderBottomRightRadius": 4,
@@ -3176,7 +3176,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           }
           suppressHighlighting={true}
         >
-          #A8A8A8
+          #BABABA
         </Text>
       </View>
       <View
@@ -4023,7 +4023,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           style={
             {
               "alignItems": "center",
-              "backgroundColor": "#CDCED0",
+              "backgroundColor": "#DCDCDC",
               "borderBottomColor": "#F1ECE4",
               "borderBottomLeftRadius": 4,
               "borderBottomRightRadius": 4,
@@ -4080,7 +4080,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
           }
           suppressHighlighting={true}
         >
-          #CDCED0
+          #DCDCDC
         </Text>
       </View>
       <View

package/src/system/core/themes/light/__snapshots_web__/light.stories.tsx.snap

@@ -363,10 +363,10 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
               >
                 <div
-                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-ECECEC35 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
+                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-ffffff35 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
                 >
                   <div
-                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385442 _height-t-size-size1385442 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-bg--base--l872590407"
+                    class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385442 _height-t-size-size1385442 _btlr-t-radius-ra1673638416 _btrr-t-radius-ra1673638416 _bbrr-t-radius-ra1673638416 _bblr-t-radius-ra1673638416 _backgroundColor-bg--accent-1633109644"
                   />
                 </div>
                 <div
@@ -381,7 +381,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 <span
                   class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _textAlign-left _col-content--ba1918259606"
                 >
-                  #ECECEC
+                  #ffffff
                 </span>
               </div>
               <div
@@ -913,7 +913,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
               >
                 <div
-                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-A8A8A835 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
+                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-BABABA35 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
                 />
                 <div
                   class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-280px"
@@ -927,7 +927,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 <span
                   class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _textAlign-left _col-content--ba1918259606"
                 >
-                  #A8A8A8
+                  #BABABA
                 </span>
               </div>
               <div
@@ -1173,7 +1173,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 class="is_HStack _dsp-flex _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _fd-row _gap-t-space-spa1366020313 _alignItems-center"
               >
                 <div
-                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-CDCED035 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
+                  class="_dsp-flex _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-t-size-size1385508 _height-t-size-size1385508 _btlr-t-radius-ra1673638410 _btrr-t-radius-ra1673638410 _bbrr-t-radius-ra1673638410 _bblr-t-radius-ra1673638410 _backgroundColor-DCDCDC35 _btw-1px _brw-1px _borderBottomWidth-1px _borderLeftWidth-1px _btc-border--bas1360416657 _brc-border--bas1360416657 _borderBottomColor-border--bas1360416657 _borderLeftColor-border--bas1360416657 _alignItems-center _justifyContent-center _borderBottomStyle-solid _borderTopStyle-solid _borderLeftStyle-solid _borderRightStyle-solid"
                 />
                 <div
                   class="_dsp-flex _alignItems-stretch _fd-column _fb-auto _bxs-border-box _pos-relative _minHeight-0px _minWidth-0px _flexShrink-0 _width-280px"
@@ -1187,7 +1187,7 @@ exports[`Bumper/Core/Themes Light 1`] = `
                 <span
                   class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _dsp-inline _bxs-border-box _ww-break-word _ws-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _ff-f-family _fs-f-size-body1510 _lh-f-lineHeigh201793153 _ls-f-letterSpa1099960310 _fw-f-weight-re98715119 _textAlign-left _col-content--ba1918259606"
                 >
-                  #CDCED0
+                  #DCDCDC
                 </span>
               </div>
               <div

package/src/system/core/themes/light/light.ts

@@ -7,83 +7,83 @@ import type { Theme } from '../types';
 // https://github.com/ornikar/kitt/blob/79e367e962c957c016c4df67dbcf515c8f45ff0e/@ornikar/kitt-universal/src/themes/late-ocean/colors.ts#L28
 export const light: Theme = {
   // content
-  'content.base.low': deepPurpleColorPalette['grey.5'],
-  'content.base.mid': deepPurpleColorPalette['grey.7'],
-  'content.base.hi': deepPurpleColorPalette['grey.9'],
-  'content.base.onContrasted.low': deepPurpleColorPalette['white-alpha.60'],
-  'content.base.onContrasted.mid': deepPurpleColorPalette['white-alpha.80'],
-  'content.base.onContrasted.hi': deepPurpleColorPalette['grey.0'],
-  'content.accent': deepPurpleColorPalette['deepPurple.8'],
-  'content.promo': deepPurpleColorPalette['lightning.9'],
-  'content.promo.onContrasted': deepPurpleColorPalette['lightning.5'],
-  'content.info': deepPurpleColorPalette['blue.7'],
-  'content.success': deepPurpleColorPalette['green.7'],
-  'content.warning': deepPurpleColorPalette['yellow.7'],
-  'content.danger': deepPurpleColorPalette['red.7'],
-  'content.muted': deepPurpleColorPalette['beige.6'],
-  'content.disabled': deepPurpleColorPalette['grey.3'],
-  'content.disabled.onContrasted': deepPurpleColorPalette['grey.1'],
+  'content.base.low': deepPurpleColorPalette['palette.grey.5'],
+  'content.base.mid': deepPurpleColorPalette['palette.grey.7'],
+  'content.base.hi': deepPurpleColorPalette['palette.grey.9'],
+  'content.base.onContrasted.low': deepPurpleColorPalette['palette.white-alpha.60'],
+  'content.base.onContrasted.mid': deepPurpleColorPalette['palette.white-alpha.80'],
+  'content.base.onContrasted.hi': deepPurpleColorPalette['palette.grey.0'],
+  'content.accent': deepPurpleColorPalette['palette.deepPurple.8'],
+  'content.promo': deepPurpleColorPalette['palette.lightning.9'],
+  'content.promo.onContrasted': deepPurpleColorPalette['palette.lightning.5'],
+  'content.info': deepPurpleColorPalette['palette.blue.7'],
+  'content.success': deepPurpleColorPalette['palette.green.7'],
+  'content.warning': deepPurpleColorPalette['palette.yellow.7'],
+  'content.danger': deepPurpleColorPalette['palette.red.7'],
+  'content.muted': deepPurpleColorPalette['palette.beige.6'],
+  'content.disabled': deepPurpleColorPalette['palette.grey.4'],
+  'content.disabled.onContrasted': deepPurpleColorPalette['palette.grey.0'],
 
   // backgrounds
-  'bg.base.low.default': deepPurpleColorPalette['grey.0'],
-  'bg.base.low.pressed': deepPurpleColorPalette['beige.1'],
-  'bg.base.mid.default': deepPurpleColorPalette['beige.1'],
-  'bg.base.mid.pressed': deepPurpleColorPalette['beige.2'],
-  'bg.base.hi.default': deepPurpleColorPalette['beige.2'],
-  'bg.base.hi.pressed': deepPurpleColorPalette['beige.3'],
-  'bg.accent.default': deepPurpleColorPalette['deepPurple.8'],
-  'bg.accent.pressed': deepPurpleColorPalette['deepPurple.7'],
-  'bg.promo.mid.default': deepPurpleColorPalette['lightning.5'],
-  'bg.promo.mid.pressed': deepPurpleColorPalette['lightning.4'],
-  'bg.promo.hi.default': deepPurpleColorPalette['lightning.9'],
-  'bg.promo.hi.pressed': deepPurpleColorPalette['lightning.8'],
-  'bg.highlight.mid.default': deepPurpleColorPalette['mauve.1'],
-  'bg.highlight.mid.pressed': deepPurpleColorPalette['mauve.2'],
-  'bg.highlight.hi.default': deepPurpleColorPalette['mauve.3'],
-  'bg.highlight.hi.pressed': deepPurpleColorPalette['mauve.4'],
-  'bg.info.mid': deepPurpleColorPalette['blue.1'],
-  'bg.info.hi': deepPurpleColorPalette['blue.6'],
-  'bg.success.mid': deepPurpleColorPalette['green.1'],
-  'bg.success.hi': deepPurpleColorPalette['green.6'],
-  'bg.warning.mid': deepPurpleColorPalette['yellow.1'],
-  'bg.warning.hi': deepPurpleColorPalette['yellow.6'],
-  'bg.danger.mid': deepPurpleColorPalette['red.1'],
-  'bg.danger.hi': deepPurpleColorPalette['red.6'],
-  'bg.disabled.mid': deepPurpleColorPalette['grey.1'],
-  'bg.disabled.hi': deepPurpleColorPalette['grey.3'],
-  'bg.overlay': deepPurpleColorPalette['grey-alpha.50'],
+  'bg.base.low.default': deepPurpleColorPalette['palette.grey.0'],
+  'bg.base.low.pressed': deepPurpleColorPalette['palette.beige.1'],
+  'bg.base.mid.default': deepPurpleColorPalette['palette.beige.1'],
+  'bg.base.mid.pressed': deepPurpleColorPalette['palette.beige.2'],
+  'bg.base.hi.default': deepPurpleColorPalette['palette.beige.2'],
+  'bg.base.hi.pressed': deepPurpleColorPalette['palette.beige.3'],
+  'bg.accent.default': deepPurpleColorPalette['palette.deepPurple.8'],
+  'bg.accent.pressed': deepPurpleColorPalette['palette.deepPurple.7'],
+  'bg.promo.mid.default': deepPurpleColorPalette['palette.lightning.5'],
+  'bg.promo.mid.pressed': deepPurpleColorPalette['palette.lightning.4'],
+  'bg.promo.hi.default': deepPurpleColorPalette['palette.lightning.9'],
+  'bg.promo.hi.pressed': deepPurpleColorPalette['palette.lightning.8'],
+  'bg.highlight.mid.default': deepPurpleColorPalette['palette.mauve.1'],
+  'bg.highlight.mid.pressed': deepPurpleColorPalette['palette.mauve.2'],
+  'bg.highlight.hi.default': deepPurpleColorPalette['palette.mauve.3'],
+  'bg.highlight.hi.pressed': deepPurpleColorPalette['palette.mauve.4'],
+  'bg.info.mid': deepPurpleColorPalette['palette.blue.1'],
+  'bg.info.hi': deepPurpleColorPalette['palette.blue.6'],
+  'bg.success.mid': deepPurpleColorPalette['palette.green.1'],
+  'bg.success.hi': deepPurpleColorPalette['palette.green.6'],
+  'bg.warning.mid': deepPurpleColorPalette['palette.yellow.1'],
+  'bg.warning.hi': deepPurpleColorPalette['palette.yellow.6'],
+  'bg.danger.mid': deepPurpleColorPalette['palette.red.1'],
+  'bg.danger.hi': deepPurpleColorPalette['palette.red.6'],
+  'bg.disabled.mid': deepPurpleColorPalette['palette.grey.1'],
+  'bg.disabled.hi': deepPurpleColorPalette['palette.grey.3'],
+  'bg.overlay': deepPurpleColorPalette['palette.grey-alpha.50'],
 
   // borders
-  'border.base.low': deepPurpleColorPalette['beige.2'],
-  'border.base.mid': deepPurpleColorPalette['beige.3'],
-  'border.base.hi': deepPurpleColorPalette['grey.9'],
-  'border.base.onContrasted.mid': deepPurpleColorPalette['white-alpha.20'],
-  'border.base.onContrasted.hi': deepPurpleColorPalette['grey.0'],
-  'border.base.accent': deepPurpleColorPalette['deepPurple.8'],
-  'border.info': deepPurpleColorPalette['blue.6'],
-  'border.success': deepPurpleColorPalette['green.6'],
-  'border.warning': deepPurpleColorPalette['yellow.6'],
-  'border.danger': deepPurpleColorPalette['red.6'],
-  'border.disabled': deepPurpleColorPalette['grey.2'],
-  'border.highlight': deepPurpleColorPalette['mauve.3'],
-  'border.focus': deepPurpleColorPalette['blue.4'],
-  'border.transparent': deepPurpleColorPalette.transparent,
+  'border.base.low': deepPurpleColorPalette['palette.beige.2'],
+  'border.base.mid': deepPurpleColorPalette['palette.beige.3'],
+  'border.base.hi': deepPurpleColorPalette['palette.grey.9'],
+  'border.base.onContrasted.mid': deepPurpleColorPalette['palette.white-alpha.20'],
+  'border.base.onContrasted.hi': deepPurpleColorPalette['palette.grey.0'],
+  'border.base.accent': deepPurpleColorPalette['palette.deepPurple.8'],
+  'border.info': deepPurpleColorPalette['palette.blue.6'],
+  'border.success': deepPurpleColorPalette['palette.green.6'],
+  'border.warning': deepPurpleColorPalette['palette.yellow.6'],
+  'border.danger': deepPurpleColorPalette['palette.red.6'],
+  'border.disabled': deepPurpleColorPalette['palette.grey.2'],
+  'border.highlight': deepPurpleColorPalette['palette.mauve.3'],
+  'border.focus': deepPurpleColorPalette['palette.blue.4'],
+  'border.transparent': deepPurpleColorPalette['palette.transparent'],
 
   // Buttons
-  'button.bg.primary.default': deepPurpleColorPalette['deepPurple.8'],
-  'button.bg.primary.pressed': deepPurpleColorPalette['deepPurple.7'],
-  'button.bg.primary.onContrasted.default': deepPurpleColorPalette['grey.0'],
-  'button.bg.primary.onContrasted.pressed': deepPurpleColorPalette['white-alpha.80'],
-  'button.bg.secondary.default': deepPurpleColorPalette.transparent,
-  'button.bg.secondary.pressed': deepPurpleColorPalette['deepPurple-alpha.10'],
-  'button.bg.secondary.onContrasted.default': deepPurpleColorPalette.transparent,
-  'button.bg.secondary.onContrasted.pressed': deepPurpleColorPalette['white-alpha.10'],
-  'button.bg.tertiary.default': deepPurpleColorPalette.transparent,
-  'button.bg.tertiary.pressed': deepPurpleColorPalette['deepPurple-alpha.10'],
-  'button.bg.tertiary.onContrasted.default': deepPurpleColorPalette.transparent,
-  'button.bg.tertiary.onContrasted.pressed': deepPurpleColorPalette['white-alpha.10'],
-  'button.bg.danger.default': deepPurpleColorPalette.transparent,
-  'button.bg.danger.pressed': deepPurpleColorPalette['red.1'],
-  'button.bg.danger.onContrasted.default': deepPurpleColorPalette.white,
-  'button.bg.danger.onContrasted.pressed': deepPurpleColorPalette['red.1'],
+  'button.bg.primary.default': deepPurpleColorPalette['palette.deepPurple.8'],
+  'button.bg.primary.pressed': deepPurpleColorPalette['palette.deepPurple.7'],
+  'button.bg.primary.onContrasted.default': deepPurpleColorPalette['palette.grey.0'],
+  'button.bg.primary.onContrasted.pressed': deepPurpleColorPalette['palette.white-alpha.80'],
+  'button.bg.secondary.default': deepPurpleColorPalette['palette.transparent'],
+  'button.bg.secondary.pressed': deepPurpleColorPalette['palette.deepPurple-alpha.10'],
+  'button.bg.secondary.onContrasted.default': deepPurpleColorPalette['palette.transparent'],
+  'button.bg.secondary.onContrasted.pressed': deepPurpleColorPalette['palette.white-alpha.10'],
+  'button.bg.tertiary.default': deepPurpleColorPalette['palette.transparent'],
+  'button.bg.tertiary.pressed': deepPurpleColorPalette['palette.deepPurple-alpha.10'],
+  'button.bg.tertiary.onContrasted.default': deepPurpleColorPalette['palette.transparent'],
+  'button.bg.tertiary.onContrasted.pressed': deepPurpleColorPalette['palette.white-alpha.10'],
+  'button.bg.danger.default': deepPurpleColorPalette['palette.transparent'],
+  'button.bg.danger.pressed': deepPurpleColorPalette['palette.red.1'],
+  'button.bg.danger.onContrasted.default': deepPurpleColorPalette['palette.white'],
+  'button.bg.danger.onContrasted.pressed': deepPurpleColorPalette['palette.red.1'],
 };