feat(vanilla-extract): remove sprinkles usages from TS files

src/__private_stories__/image-srcset-story.tsx

@@ -3,7 +3,6 @@ import {DisplayMediaCard, Image, PosterCard, Stack, Text3} from '..';
 import usingVrImg from '../__stories__/images/using-vr.jpg';
 import beachImg from '../__stories__/images/beach.jpg';
 import laptopImg from '../__stories__/images/laptop.jpg';
-import {sprinkles} from '../sprinkles.css';
 
 export default {
  title: 'Private/Image/Image with srcSet attribute is responsive',
@@ -20,27 +19,25 @@ export const Default: StoryComponent = () => {
  the backgroundImage in DisplayMediaCard and PosterCard components
  </Text3>
 
- <Stack
- space={16}
- className={sprinkles({display: 'inline-block'})}
- dataAttributes={{testid: 'content'}}
- >
- <Image aspectRatio="16:9" width={300} src={src} srcSet={srcSet} />
+ <div style={{width: 300}}>
+ <Stack space={16} dataAttributes={{testid: 'content'}}>
+ <Image aspectRatio="16:9" width={300} src={src} srcSet={srcSet} />
 
- <PosterCard
- aspectRatio="16:9"
- width={300}
- title="Poster Card"
- backgroundImage={{src, srcSet}}
- />
+  <PosterCard
+  aspectRatio="16:9"
+  width={300}
+  title="Poster Card"
+  backgroundImage={{src, srcSet}}
+  />
 
- <DisplayMediaCard
- aspectRatio="16:9"
- width={300}
- title="Display Media Card"
- backgroundImage={{src, srcSet}}
- />
- </Stack>
+ <DisplayMediaCard
+ aspectRatio="16:9"
+ width={300}
+ title="Display Media Card"
+ backgroundImage={{src, srcSet}}
+ />
+ </Stack>
+ </div>
  </Stack>
  );
 };

src/accordion.css.ts

@@ -92,3 +92,7 @@ export const panelTransitionClasses = {
 export const panel = style({
  overflow: 'hidden',
 });
+
+export const accordionItem = sprinkles({
+ width: '100%',
+});

src/accordion.tsx

@@ -14,7 +14,6 @@ import {Boxed} from './boxed';
 import {useIsInverseOrMediaVariant} from './theme-variant-context';
 import {CSSTransition} from 'react-transition-group';
 import {isRunningAcceptanceTest} from './utils/platform';
-import {sprinkles} from './sprinkles.css';
 
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {DataAttributes, TrackingEvent} from './utils/types';
@@ -196,7 +195,7 @@ const AccordionItemContent = React.forwardRef<TouchableElement, AccordionItemCon
 
 export const AccordionItem = React.forwardRef<TouchableElement, AccordionItemContentProps>(
  ({dataAttributes, role, ...props}, ref) => (
- <div role={role} className={sprinkles({width: '100%'})}>
+ <div role={role} className={styles.accordionItem}>
  <AccordionItemContent
  {...props}
  ref={ref}

src/box.css.ts

@@ -0,0 +1,51 @@
+import {createVar, style} from '@vanilla-extract/css';
+import * as mq from './media-queries.css';
+
+const paddingTop = {
+ desktop: createVar(),
+ tablet: createVar(),
+ mobile: createVar(),
+};
+
+const paddingBottom = {
+ desktop: createVar(),
+ tablet: createVar(),
+ mobile: createVar(),
+};
+
+const paddingLeft = {
+ desktop: createVar(),
+ tablet: createVar(),
+ mobile: createVar(),
+};
+
+const paddingRight = {
+ desktop: createVar(),
+ tablet: createVar(),
+ mobile: createVar(),
+};
+
+export const vars = {paddingTop, paddingBottom, paddingLeft, paddingRight};
+
+export const box = style({
+ paddingTop: paddingTop.mobile,
+ paddingBottom: paddingBottom.mobile,
+ paddingLeft: paddingLeft.mobile,
+ paddingRight: paddingRight.mobile,
+
+ '@media': {
+ [mq.tablet]: {
+ paddingTop: paddingTop.tablet,
+ paddingBottom: paddingBottom.tablet,
+ paddingLeft: paddingLeft.tablet,
+ paddingRight: paddingRight.tablet,
+ },
+
+ [mq.desktopOrBigger]: {
+ paddingTop: paddingTop.desktop,
+ paddingBottom: paddingBottom.desktop,
+ paddingLeft: paddingLeft.desktop,
+ paddingRight: paddingRight.desktop,
+ },
+ },
+});

src/box.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import classnames from 'classnames';
-import {sprinkles} from './sprinkles.css';
+import * as styles from './box.css';
+import {applyCssVars} from './utils/css';
 import {getPrefixedDataAttributes} from './utils/dom';
 
 import type {ByBreakpoint, DataAttributes} from './utils/types';
@@ -49,21 +50,36 @@ const Box = React.forwardRef<HTMLDivElement, Props>(
  },
  ref
  ) => {
- const paddingSprinkles = {paddingTop, paddingBottom, paddingLeft, paddingRight};
- let paddingStyles: React.CSSProperties = {};
- let paddingClasses = '';
- try {
- paddingClasses = sprinkles(paddingSprinkles);
- } catch (e) {
- // if this fails, it's because the consumer passed in a value that is not a valid padding size
- // fallback to inline styles in that case.
- paddingStyles = {
- paddingTop: typeof paddingTop === 'object' ? paddingTop.mobile : paddingTop,
- paddingBottom: typeof paddingBottom === 'object' ? paddingBottom.mobile : paddingBottom,
- paddingLeft: typeof paddingLeft === 'object' ? paddingLeft.mobile : paddingLeft,
- paddingRight: typeof paddingRight === 'object' ? paddingRight.mobile : paddingRight,
- };
- }
+ const paddingTopValues =
+ typeof paddingTop === 'object'
+ ? paddingTop
+ : {mobile: paddingTop, tablet: paddingTop, desktop: paddingTop};
+
+ const paddingBottomValues =
+ typeof paddingBottom === 'object'
+ ? paddingBottom
+ : {mobile: paddingBottom, tablet: paddingBottom, desktop: paddingBottom};
+
+ const paddingLeftValues =
+ typeof paddingLeft === 'object'
+ ? paddingLeft
+ : {mobile: paddingLeft, tablet: paddingLeft, desktop: paddingLeft};
+
+ const paddingRightValues =
+ typeof paddingRight === 'object'
+ ? paddingRight
+ : {mobile: paddingRight, tablet: paddingRight, desktop: paddingRight};
+
+ const applyPaddingVars = (
+ vars: (typeof styles.vars)[keyof typeof styles.vars],
+ values: {mobile: PadSize; tablet?: PadSize; desktop: PadSize}
+ ) => {
+ return applyCssVars({
+ [vars.mobile]: `${values.mobile}px`,
+ [vars.tablet]: `${values.tablet ?? values.mobile}px`,
+ [vars.desktop]: `${values.desktop}px`,
+ });
+ };
 
  return (
  <Component
@@ -72,10 +88,13 @@ const Box = React.forwardRef<HTMLDivElement, Props>(
  aria-label={ariaLabel}
  aria-hidden={ariaHidden}
  ref={ref}
- className={classnames(className, paddingClasses)}
+ className={classnames(className, styles.box)}
  style={{
+ ...applyPaddingVars(styles.vars.paddingTop, paddingTopValues),
+ ...applyPaddingVars(styles.vars.paddingBottom, paddingBottomValues),
+ ...applyPaddingVars(styles.vars.paddingLeft, paddingLeftValues),
+ ...applyPaddingVars(styles.vars.paddingRight, paddingRightValues),
  ...(width !== undefined ? {width, boxSizing: 'border-box'} : {}),
- ...(!paddingClasses ? paddingStyles : {}),
  }}
  id={id}
  >

src/boxed.css.ts

@@ -109,3 +109,7 @@ export const desktopOnly = style({
  },
  },
 });
+
+export const noBorder = sprinkles({
+ border: 'none',
+});

src/boxed.tsx

@@ -5,7 +5,6 @@ import {ThemeVariant, useIsInverseOrMediaVariant} from './theme-variant-context'
 import {getPrefixedDataAttributes} from './utils/dom';
 import {vars} from './skins/skin-contract.css';
 import * as styles from './boxed.css';
-import {sprinkles} from './sprinkles.css';
 import {applyCssVars} from './utils/css';
 
 import type {Variant} from './theme-variant-context';
@@ -37,7 +36,7 @@ type InternalProps = {
 
 const getBorderStyle = (isInverseOutside: boolean, isInverseInside: boolean) => {
  if (isInverseOutside || isInverseInside) {
- return sprinkles({border: 'none'});
+ return styles.noBorder;
  }
  return styles.boxBorder;
 };
@@ -103,22 +102,19 @@ export const InternalBoxed = React.forwardRef<HTMLDivElement, Props & InternalPr
  ...calcCssVars('height', height),
  ...calcCssVars('minHeight', minHeight),
  }),
- background,
+ borderRadius,
+ overflow: 'hidden',
+ background:
+ background ?? isInverseInside
+ ? isInverseOutside
+ ? vars.colors.backgroundContainerBrandOverInverse
+ : vars.colors.backgroundContainerBrand
+ : vars.colors.backgroundContainer,
  }}
  className={classnames(
  className,
  styles.boxed,
  getBorderStyle(isInverseOutside, isInverseInside),
- sprinkles({
- borderRadius,
- overflow: 'hidden',
- background:
- background ?? isInverseInside
- ? isInverseOutside
- ? vars.colors.backgroundContainerBrandOverInverse
- : vars.colors.backgroundContainerBrand
- : vars.colors.backgroundContainer,
- }),
  {[styles.desktopOnly]: desktopOnly}
  )}
  role={role}

src/callout.css.ts

@@ -1,4 +1,4 @@
-import {style} from '@vanilla-extract/css';
+import {style, styleVariants} from '@vanilla-extract/css';
 import {sprinkles} from './sprinkles.css';
 import * as skin from './skins/skin-contract.css';
 import {iconContainerSize, iconSize} from './icon-button.css';
@@ -34,3 +34,10 @@ export const closeButtonContainerSize = style({
  // IconButton's height + extra space required to align the X with the text content
  height: `calc(${iconSize.small} + 0.125rem)`,
 });
+
+export const background = styleVariants({
+ inverse: [sprinkles({background: skin.vars.colors.backgroundContainer})],
+ alternative: [sprinkles({background: skin.vars.colors.backgroundContainer})],
+ default: [sprinkles({background: skin.vars.colors.backgroundContainerAlternative})],
+ media: [sprinkles({background: skin.vars.colors.backgroundContainer})],
+});

src/callout.tsx

@@ -12,7 +12,6 @@ import classNames from 'classnames';
 import ButtonGroup from './button-group';
 import * as styles from './callout.css';
 import * as mediaStyles from './image.css';
-import {sprinkles} from './sprinkles.css';
 import {vars} from './skins/skin-contract.css';
 import {getPrefixedDataAttributes} from './utils/dom';
 import {applyCssVars} from './utils/css';
@@ -55,17 +54,7 @@ const Callout = ({
  const {texts, t} = useTheme();
  return (
  <section
- className={classNames(
- styles.container,
- sprinkles({
- background: {
- inverse: vars.colors.backgroundContainer,
- alternative: vars.colors.backgroundContainer,
- default: vars.colors.backgroundContainerAlternative,
- media: vars.colors.backgroundContainer,
- }[variant],
- })
- )}
+ className={classNames(styles.container, styles.background[variant])}
  style={applyCssVars({
  [mediaStyles.vars.mediaBorderRadius]: vars.borderRadii.mediaSmall,
  })}

src/card.css.ts

@@ -16,6 +16,13 @@ export const boxed = style([
  },
 ]);
 
+export const cardContentContainer = sprinkles({
+ display: 'flex',
+ flex: 1,
+ justifyContent: 'space-between',
+ flexDirection: 'column',
+});
+
 export const touchableContainer = style({});
 
 export const touchable = style({

src/card.tsx

@@ -12,7 +12,6 @@ import {vars} from './skins/skin-contract.css';
 import * as styles from './card.css';
 import * as mediaStyles from './image.css';
 import {useTheme} from './hooks';
-import {sprinkles} from './sprinkles.css';
 import {IconButton, ToggleIconButton} from './icon-button';
 import IconCloseRegular from './generated/mistica-icons/icon-close-regular';
 import IconPauseFilled from './generated/mistica-icons/icon-pause-filled';
@@ -402,14 +401,7 @@ const CardContent = ({
 }: CardContentProps) => {
  const {textPresets} = useTheme();
  return (
- <div
- className={sprinkles({
- display: 'flex',
- flex: 1,
- justifyContent: 'space-between',
- flexDirection: 'column',
- })}
- >
+ <div className={styles.cardContentContainer}>
  {/** using flex instead of nested Stacks, this way we can rearrange texts so the DOM structure makes more sense for screen reader users */}
  <div className={styles.flexColumn}>
  {title && (

src/community/advanced-data-card.css.ts

@@ -7,6 +7,11 @@ import {iconContainerSize} from '../icon-button.css';
 
 const horizontalPadding = 24;
 
+export const container = sprinkles({
+ position: 'relative',
+ height: '100%',
+});
+
 export const paddingX = style([
  sprinkles({
  paddingX: 16,
@@ -202,6 +207,10 @@ export const marginRightAuto = style({
  },
 });
 
+export const withPaddingTop = sprinkles({
+ paddingTop: 16,
+});
+
 export const button = style({
  display: 'flex',
  marginTop: 8,
@@ -218,6 +227,8 @@ export const buttonMobile = style([
  },
 ]);
 
+export const footerImage = sprinkles({alignItems: 'center', display: 'flex'});
+
 export const footerDirection = style([
  sprinkles({
  display: 'flex',