refactor(styles): remove deprecated breakpoints

Author: seibei-iguchi

packages/components/src/config/variables.ts

@@ -1,5 +1,5 @@
 import { icons } from '@suite-common/icons/src/icons';
-import { breakpoints } from '@trezor/theme';
+import { above, below, breakpoints } from '@trezor/theme';
 
 /**
  * @deprecated This key is deprecated. Please use `useLayoutSize` hook or breakpoints from `@trezor/theme`.
@@ -12,25 +12,18 @@ export const SCREEN_SIZE = {
     XL: `${breakpoints.desktop}px`,
 } as const;
 
-const HELPER_SCREEN_SIZE = {
-    SM: `${breakpoints.mobile - 1}px`,
-    MD: `${breakpoints.tablet - 1}px`,
-    LG: `${breakpoints.laptop - 1}px`,
-    XL: `${breakpoints.desktop - 1}px`,
-};
-
 /**
  * @deprecated This key is deprecated. Please use `useLayoutSize` hook or breakpoints from `@trezor/theme`.
  */
 export const SCREEN_QUERY = {
-    MOBILE: `@media (max-width: ${HELPER_SCREEN_SIZE.SM})`,
-    ABOVE_MOBILE: `@media (min-width: ${SCREEN_SIZE.SM})`,
-    BELOW_TABLET: `@media (max-width: ${HELPER_SCREEN_SIZE.MD})`,
-    ABOVE_TABLET: `@media (min-width: ${SCREEN_SIZE.MD})`,
-    BELOW_LAPTOP: `@media (max-width: ${HELPER_SCREEN_SIZE.LG})`,
-    ABOVE_LAPTOP: `@media (min-width: ${SCREEN_SIZE.LG})`,
-    BELOW_DESKTOP: `@media (max-width: ${HELPER_SCREEN_SIZE.XL})`,
-    ABOVE_DESKTOP: `@media (min-width: ${SCREEN_SIZE.XL})`,
+    MOBILE: `@media ${below(breakpoints.mobile)}`,
+    ABOVE_MOBILE: `@media ${above(breakpoints.mobile)}`,
+    BELOW_TABLET: `@media ${below(breakpoints.tablet)}`,
+    ABOVE_TABLET: `@media ${above(breakpoints.tablet)}`,
+    BELOW_LAPTOP: `@media ${below(breakpoints.laptop)}`,
+    ABOVE_LAPTOP: `@media ${above(breakpoints.laptop)}`,
+    BELOW_DESKTOP: `@media ${below(breakpoints.desktop)}`,
+    ABOVE_DESKTOP: `@media ${above(breakpoints.desktop)}`,
 } as const;
 
 export const LAYOUT_SIZE = {

packages/styles/src/breakpoints.ts

@@ -6,7 +6,6 @@ import felaPluginPlaceholderPrefixer from 'fela-plugin-placeholder-prefixer';
 import felaPluginUnit from 'fela-plugin-unit';
 import felaSortMediaQueryMobileFirst from 'fela-sort-media-query-mobile-first';
 
-import { makeResponsiveValuePlugin } from './plugins/responsiveValues';
 import { makeTypedSelectorsPlugin } from './plugins/typedSelectors';
 
 const isDevEnv = process.env.NODE_ENV === 'development';
@@ -25,7 +24,6 @@ export const createRenderer = () =>
             felaPluginEmbedded(),
             felaPluginMultipleSelectors(),
             felaPluginPlaceholderPrefixer(),
-            makeResponsiveValuePlugin() as TPlugin,
         ],
         // NOTE: Using a selector prefix is necessary because Fela generates class names like
         // `x y z aa ab ac`, meaning possible conflicts with classes such as `btn`.

packages/styles/src/createRenderer.ts

@@ -6,6 +6,5 @@ export * from './createRenderer';
 export * from './useDirection';
 export * from './mergeStyleObjects';
 export * from './mergeStyles';
-export * from './breakpoints';
 export * from './mediaQueries';
 export * from './utils';

packages/styles/src/index.ts

@@ -10,17 +10,8 @@ import type { CSSColor, NativeTheme, Theme } from '@trezor/theme';
 import type { mediaQueries } from './mediaQueries';
 import type { getValueAndUnit, isDarkColor, multiply, negative, sum } from './utils';
 
-export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-
 export type Direction = 'ltr' | 'rtl';
 
-type MediaQuery = string;
-
-type NonZeroBreakpoint = Exclude<Breakpoint, 'xs'>;
-type BelowBreakpoints = `below_${NonZeroBreakpoint}`;
-
-export type BreakpointMediaQueries = Record<NonZeroBreakpoint | BelowBreakpoints, MediaQuery>;
-
 export interface DirectionUtils {
     direction: Direction;
     isLtr: boolean;
@@ -41,7 +32,6 @@ export interface UniversalStyleUtils extends DirectionUtils {
 }
 
 export interface StyleUtils extends Theme, UniversalStyleUtils {
-    breakpoints: BreakpointMediaQueries;
     media: typeof mediaQueries;
 }
 
@@ -58,7 +48,7 @@ type PlainResponsiveStyleObject = {
     [KPropertyName in Exclude<keyof PlainStyleObject, DisallowedPropertyName>]?:
         | PlainStyleObject[KPropertyName]
         | {
-              [KBreakpoint in Breakpoint]?: PlainStyleObject[KPropertyName];
+              [KBreakpoint in string]?: PlainStyleObject[KPropertyName];
           };
 } & {
     [KPropertyName in DisallowedPropertyName]?: never;

packages/styles/src/plugins/responsiveValues.test.ts

@@ -5,7 +5,6 @@ import { darken, lighten, transparentize } from 'polished';
 
 import { NativeTheme, Theme } from '@trezor/theme';
 
-import { breakpointMediaQueries } from './breakpoints';
 import { mediaQueries } from './mediaQueries';
 import { processNativeStyles, processStyles } from './processStyles';
 import {
@@ -47,7 +46,6 @@ export const useStyles = () => {
             ...theme,
             ...directionUtils,
             ...sharedUtils,
-            breakpoints: breakpointMediaQueries,
             media: mediaQueries,
         }),
         [directionUtils, theme],

packages/styles/src/plugins/responsiveValues.ts

@@ -4,7 +4,7 @@ import styled from 'styled-components';
 
 import { selectDeviceLabel, selectDeviceName } from '@suite-common/wallet-core';
 import { Button, Input, Tooltip } from '@trezor/components';
-import { breakpointMediaQueries } from '@trezor/styles';
+import { SCREEN_QUERY } from '@trezor/components/src/config/variables';
 import { spacingsPx } from '@trezor/theme';
 
 import { Translation } from 'src/components/suite';
@@ -17,7 +17,7 @@ const Container = styled.form<{ $isVertical?: boolean }>`
     gap: ${spacingsPx.sm};
     min-width: ${({ $isVertical }) => $isVertical && '200px'};
 
-    ${breakpointMediaQueries.below_sm} {
+    ${SCREEN_QUERY.MOBILE} {
         min-width: ${({ $isVertical }) => $isVertical && '100%'};
     }
 `;