remove sprinkles from all ts files

Telefonica · Oct 1, 2024 · 5306fe1 · 5306fe1
1 parent 4cf7db9
commit 5306fe1
Show file tree

Hide file tree

Showing 39 changed files with 318 additions and 190 deletions.
diff --git a/src/__private_stories__/image-srcset-story.tsx b/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>
     );
 };

diff --git a/...-srcset-screenshot-test-tsx-image-with-src-set-is-responsive-desktop-1-snap.png b/...-srcset-screenshot-test-tsx-image-with-src-set-is-responsive-desktop-1-snap.png
diff --git a/...t-screenshot-test-tsx-image-with-src-set-is-responsive-large-desktop-1-snap.png b/...t-screenshot-test-tsx-image-with-src-set-is-responsive-large-desktop-1-snap.png
diff --git a/...cset-screenshot-test-tsx-image-with-src-set-is-responsive-mobile-ios-1-snap.png b/...cset-screenshot-test-tsx-image-with-src-set-is-responsive-mobile-ios-1-snap.png
diff --git a/src/accordion.css.ts b/src/accordion.css.ts
@@ -92,3 +92,7 @@ export const panelTransitionClasses = {
 export const panel = style({
     overflow: 'hidden',
 });
+
+export const accordionItem = sprinkles({
+    width: '100%',
+});
diff --git a/src/accordion.tsx b/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}

diff --git a/src/box.css.ts b/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,
+        },
+    },
+});
diff --git a/src/box.tsx b/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}
             >

diff --git a/src/boxed.css.ts b/src/boxed.css.ts
@@ -109,3 +109,7 @@ export const desktopOnly = style({
         },
     },
 });
+
+export const noBorder = sprinkles({
+    border: 'none',
+});
diff --git a/src/boxed.tsx b/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}

diff --git a/src/callout.css.ts b/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})],
+});
diff --git a/src/callout.tsx b/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,
             })}

diff --git a/src/card.css.ts b/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({

diff --git a/src/card.tsx b/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 && (

diff --git a/src/community/advanced-data-card.css.ts b/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',