@ornikar/bumper 3.9.1 → 3.10.1

package/src/system/core/tokens/palettes/deepPurpleColorPalette.ts

@@ -15,7 +15,7 @@ interface ColorScaleKeysMap {
     | 'green-apple'
     | 'blue-electric'
     | 'blue-sky';
-  grey: 0 | 1 | 2 | 3 | 5 | 7 | 9;
+  grey: 0 | 1 | 2 | 3 | 4 | 5 | 7 | 9;
   blue: 1 | 2 | 4 | 6 | 7;
   green: 1 | 2 | 6 | 7;
   yellow: 1 | 2 | 6 | 7;
@@ -34,7 +34,7 @@ type ColorScales = {
 };
 
 type CreateTokens<K extends keyof ColorScaleKeysMap> = {
-  [Key in ColorScaleKeysMap[K] as `${K}.${Key}`]: string;
+  [Key in ColorScaleKeysMap[K] as `palette.${K}.${Key}`]: string;
 };
 
 type ColorScaleTokens = UnionToIntersection<
@@ -84,8 +84,9 @@ export const colorScales: ColorScales = {
   grey: createColorScale({
     0: '#ffffff',
     1: '#ECECEC',
-    2: '#CDCED0',
-    3: '#A8A8A8',
+    2: '#DCDCDC',
+    3: '#BABABA',
+    4: '#A8A8A8',
     5: '#838383',
     7: '#505050',
     9: '#101010',
@@ -147,7 +148,7 @@ const transformColorScalesToTokens = (): ColorScaleTokens => {
   return Object.fromEntries(
     Object.entries(colorScales).flatMap(([colorName, colorScale]) => {
       return Object.entries(colorScale).map(([scaleNumber, colorValue]) => {
-        return [`${colorName}.${scaleNumber}`, colorValue];
+        return [`palette.${colorName}.${scaleNumber}`, colorValue];
       });
     }),
   ) as ColorScaleTokens;
@@ -155,7 +156,7 @@ const transformColorScalesToTokens = (): ColorScaleTokens => {
 
 export const deepPurpleColorPalette = {
   ...transformColorScalesToTokens(),
-  white: '#FFFFFF',
-  black: '#000000',
-  transparent: 'transparent',
+  'palette.white': '#FFFFFF',
+  'palette.black': '#000000',
+  'palette.transparent': 'transparent',
 };

package/src/system/loading/loader/Loader.tsx

@@ -2,8 +2,9 @@ import { styled, useStyle } from '@tamagui/core';
 import type { ReactNode } from 'react';
 import { useEffect } from 'react';
 import { useSharedValue, withRepeat, withTiming } from 'react-native-reanimated';
+import type { ViewProps } from '../../core/primitives/View';
 import { View } from '../../core/primitives/View';
-import type { TamaguiMediaProps } from '../../types';
+import type { PropsToTamaguiVariants, TamaguiMediaProps } from '../../types';
 import { LoaderBackgroundCircle } from './LoaderBackgroundCircle';
 import { LoaderCircleWrapper } from './LoaderCircleWrapper';
 import { LoaderForegroundCircle } from './LoaderForegroundCircle';
@@ -12,19 +13,7 @@ import { LOADER_ANIMATION, LOADER_SIZE_CONFIG } from './loaderConfig';
 
 const { icon, page } = LOADER_SIZE_CONFIG;
 
-const LoaderContainer = styled(View, {
-  name: 'Loader',
-  position: 'relative',
-  rotate: '-90deg',
-  variants: {
-    size: {
-      icon: { width: icon.size, height: icon.size },
-      page: { width: page.size, height: page.size },
-    },
-  } as const,
-});
-
-interface InternalLoaderProps {
+interface InternalLoaderWithoutMediaProps {
   /** The size of the loader. `'icon'` renders a small 20px loader, `'page'` renders a larger 48px loader.
    * @default 'page'
    * */
@@ -37,7 +26,19 @@ interface InternalLoaderProps {
   testID?: string;
 }
 
-export type LoaderProps = TamaguiMediaProps<InternalLoaderProps>;
+const LoaderContainer = styled(View, {
+  name: 'Loader',
+  position: 'relative',
+  rotate: '-90deg',
+  variants: {
+    size: {
+      icon: { width: icon.size, height: icon.size },
+      page: { width: page.size, height: page.size },
+    },
+  } as const satisfies PropsToTamaguiVariants<InternalLoaderWithoutMediaProps, ViewProps>,
+});
+
+export type LoaderProps = TamaguiMediaProps<InternalLoaderWithoutMediaProps>;
 
 export function Loader({ size = 'page', isOnContrasted = false, testID }: LoaderProps): ReactNode {
   const backgroundStyle = useStyle({ color: '$border.base.mid' });

package/src/system/loading/loader/LoaderBackgroundCircle.tsx

@@ -1,9 +1,16 @@
 import { styled } from '@tamagui/core';
+import type { CircleProps } from 'react-native-svg';
 import { Circle } from 'react-native-svg';
+import type { PropsToTamaguiVariants } from '../../types';
+import type { LoaderSize } from './loaderConfig';
 import { LOADER_SIZE_CONFIG } from './loaderConfig';
 
 const { icon, page } = LOADER_SIZE_CONFIG;
 
+interface LoaderBackgroundCircleVariantProps {
+  size?: LoaderSize;
+}
+
 export const LoaderBackgroundCircle = styled(Circle, {
   fill: 'none',
   variants: {
@@ -11,5 +18,5 @@ export const LoaderBackgroundCircle = styled(Circle, {
       icon: { strokeWidth: icon.strokeWidth, cx: icon.center, cy: icon.center, r: icon.radius },
       page: { strokeWidth: page.strokeWidth, cx: page.center, cy: page.center, r: page.radius },
     },
-  } as const,
+  } as const satisfies PropsToTamaguiVariants<LoaderBackgroundCircleVariantProps, CircleProps>,
 });

package/src/system/loading/loader/LoaderCircleWrapper.tsx

@@ -1,9 +1,18 @@
 import { styled } from '@tamagui/core';
+import type { SvgProps } from 'react-native-svg';
 import Svg from 'react-native-svg';
+import type { ViewProps } from '../../core/primitives/View';
+import type { PropsToTamaguiVariants } from '../../types';
+import type { LoaderSize } from './loaderConfig';
 import { LOADER_SIZE_CONFIG } from './loaderConfig';
 
 const { icon, page } = LOADER_SIZE_CONFIG;
 
+interface LoaderCircleWrapperVariantProps {
+  size?: LoaderSize;
+  isForeground?: boolean;
+}
+
 export const LoaderCircleWrapper = styled(Svg, {
   variants: {
     size: {
@@ -14,6 +23,7 @@ export const LoaderCircleWrapper = styled(Svg, {
       true: {
         position: 'absolute',
       },
+      false: {},
     },
-  } as const,
+  } as const satisfies PropsToTamaguiVariants<LoaderCircleWrapperVariantProps, SvgProps & ViewProps>,
 });

package/src/system/types.ts

@@ -1,5 +1,9 @@
-// eslint-disable-next-line no-restricted-imports
-import type { PropsWithoutMediaStyles as InternalPropsWithoutMediaStyles, WithMediaProps } from '@tamagui/core';
+import type {
+  // eslint-disable-next-line no-restricted-imports
+  PropsWithoutMediaStyles as InternalPropsWithoutMediaStyles,
+  TokensParsed,
+  WithMediaProps,
+} from '@tamagui/core';
 
 /**
  * Rewrite of Tamagui PropsWithoutMediaStyles to make all responsive props optionnal.
@@ -17,3 +21,48 @@ export type PropsWithoutMediaStyles<A> = {
  * pass breakpoint-specific prop objects alongside regular props.
  */
 export type TamaguiMediaProps<A> = PropsWithoutMediaStyles<A> & WithMediaProps<InternalPropsWithoutMediaStyles<A>>;
+
+/**
+ * A list of keys to ignore as variants.
+ * If you do not want to ignore keys globally, you should instead use the third param of the {@link PropsToTamaguiVariants}.
+ */
+export type DefaultIgnoredKeys = 'children';
+
+/**
+ * Maps a component's variant-prop interface `T` to a Tamagui `variants` config whose entries produce
+ * style objects of type `V`.
+ *
+ * For each key `K` of `T`, the entry must be either:
+ * - a record keyed by the prop's literal values (with `boolean` props normalised to `'true' | 'false'`),
+ *   where each value is a style `V` or a function returning `V`, or
+ * - a function that receives the raw prop value and a {@link VariantGoodiesParams} context and returns
+ *   a style `V` (or `undefined`).
+ *
+ * Pass a union of keys as `IgnoredKeys` to skip props that should never be variants (e.g.
+ * event handlers). Ignored keys are stripped only from both the top-level map, not from `params.props`.
+ *
+ * Intended to be used with `satisfies` on the `variants` field of a `styled(...)` call so that the
+ * config is inferred `as const` while still being checked against the component's prop types, e.g.
+ * `{ ... } as const satisfies PropsToTamaguiVariants<MyVariantProps, ViewProps, 'size'>`.
+ */
+export type PropsToTamaguiVariants<T, V, IgnoredKeys extends keyof T = never> = {
+  [K in keyof T as K extends IgnoredKeys | Extract<keyof T, DefaultIgnoredKeys> ? never : K]: NonNullable<
+    T[K]
+  > extends boolean
+    ? Record<'true' | 'false', V | ((value: boolean | string | number, params: VariantGoodiesParams<T>) => V)>
+    : NonNullable<T[K]> extends PropertyKey
+    ? Record<NonNullable<T[K]>, V> | ((value: NonNullable<T[K]>, params: VariantGoodiesParams<T>) => V | undefined)
+    : never;
+};
+
+/**
+ * Second argument passed to function-form variants declared via {@link PropsToTamaguiVariants}.
+ *
+ * - `props`: the flattened props of the instance being styled, so a variant can branch on sibling
+ *   props (e.g. read `disabled` or `isOnContrasted` while resolving `type`).
+ * - `tokens`: Tamagui's parsed token map, for resolving design tokens from inside the variant.
+ */
+interface VariantGoodiesParams<T> {
+  props: T;
+  tokens: TokensParsed;
+}

package/src/tamagui.config.ts

@@ -16,6 +16,7 @@ import {
 } from './system/core/tokens/GTStandardNarrowFont';
 import { BreakpointNameEnum, breakpoints } from './system/core/tokens/breakpoints';
 import { bumperIconTokens } from './system/core/tokens/bumperIcon';
+import { deepPurpleColorPalette } from './system/core/tokens/palettes/deepPurpleColorPalette';
 import { radiusTokens } from './system/core/tokens/radius';
 import { sizeTokens } from './system/core/tokens/size';
 import { spaceTokens } from './system/core/tokens/space';
@@ -39,7 +40,7 @@ export const GTStandardNarrowFont = createFont({
 });
 
 const tokens = createTokens({
-  color: {},
+  color: deepPurpleColorPalette,
   space: spaceTokens,
   size: sizeTokens,
   radius: radiusTokens,