@marioschmidt/design-system-tokens 1.0.64 → 1.0.66

package/dist/js/brands/sportbild/semantic/breakpoints/breakpoint-xs-320px.js

@@ -1,448 +0,0 @@
-/**
- * Do not edit directly, this file was auto-generated.
- * 
- * BILD Design System Tokens v1.0.64
- * Generated by Style Dictionary v4.0.0
- * 
- * Copyright (c) 2024 Axel Springer Deutschland GmbH
- * Proprietary and confidential. All rights reserved.
- * 
- * Documentation: https://github.com/UXWizard25/vv-token-test-v3#readme
- */
-
-// ============================================
-// SEMANTIC
-// ============================================
-
-// Semantic - Layout - Grid - Responsive
-/** 24-24-32-32 – use for side paddings and gutters in responsive layouts */
-export const gridSpaceRespLg = "24px";
-/** 48-48-64-64 – use for side paddings and gutters in responsive layouts */
-export const gridSpaceRespXl = "48px";
-/** 12-12-12-16 – use for side paddings and gutters in responsive layouts */
-export const gridSpaceRespBase = "12px";
-/** 6-6-6-8 – use for side paddings and gutters in responsive layouts */
-export const gridSpaceRespSm = "6px";
-/** 0-0-0-16 – This token is used on the main homepages content container, ensuring full-width layout (no horizontal padding) on mobile and tablet breakpoints. */
-export const pageInlineSpace = "0px";
-
-// Semantic - Layout - Grid - Constant
-/** 16-16-16-16 – use for fixed side paddings and gutters */
-export const gridSpaceConstLg = "16px";
-/** 12-12-12-12 – use for fixed side paddings and gutters */
-export const gridSpaceConstSm = "12px";
-
-// Semantic - Layout - Grid - LayoutGuide
-/** Used to set the column count in Figma Layout guide Grids */
-export const layoutGuideGridColums = "4";
-
-// Semantic - Layout - Section
-/** 36-36-48-48 – Use for vertical spacing between sections in a layout. */
-export const sectionSpaceBase = "36px";
-/** 72-72-96-96 – Use for vertical spacing between sections in a layout */
-export const sectionSpaceLg = "72px";
-/** 16-16-32-32 – Use for spacing after paragraphs in text content */
-export const paragraphEndSpace = "16px";
-/** 24-24-36-36 – Use for vertical spacing between subsections in a layout */
-export const sectionSpaceSm = "24px";
-
-// Semantic - Layout - Breakpoints
-/** 320 - 390 - 600 - 1024 – Defines the minimum width of the main frame for different breakpoints. Apply this token to the main frame of page layouts to simulate realistic minimum widths across responsive viewports. */
-export const breakpointMinWidthSize = "320px";
-/** 389 - 599 - 1023 - 1024 – Defines the minimum width of the main frame for different breakpoints. Apply this token to the main frame of page layouts to simulate realistic maximum widths across responsive viewports. */
-export const breakpointMaxWidthSize = "389px";
-
-// Semantic - Layout
-/** Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. */
-export const canvasHeightSizeWeb = "568px";
-/** Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. */
-export const canvasWidthSizeWeb = "320px";
-/** Common viewport width size based on the selected breakpoint. Apply this token to the main frame of page layouts. */
-export const canvasWidthSizeApp = "320px";
-/** Common viewport height size based on the selected mode. Apply this token to the main frame of page layouts to simulate realistic vertical space. */
-export const canvasHeightSizeApp = "568px";
-
-// Semantic - Layout - ContentWidth
-/** Use for content containers that should not fill the full page width on larger viewports. This is commonly used on article body text content and other elements in an article page. */
-export const contentMaxWidthMedium = "700px";
-/** Use for content containers that should fill the full width of the page */
-export const contentMaxWidthFull = "1024px";
-
-// Semantic - Typography - FontSize - Title
-/** 22 - 22 - 22 - 28 -- html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-export const title1FontSize = "24px";
-/** 16 - 16 - 18 - 20 - html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-export const title2FontSize = "16px";
-
-// Semantic - Typography - FontSize - Display
-/** This variable is used on the font size parameter for the display1 text style. 40 - 40 - 72 - 120 */
-export const display1FontSize = "38px";
-/** This variable is used for the font size parameter of the Display2 text style. 36 - 36 - 42 - 64 */
-export const display2FontSize = "34px";
-/** This variable is used on the display3 font size parameter of the display3 text style. 28 - 28 - 32 - 40 */
-export const display3FontSize = "27px";
-
-// Semantic - Typography - FontSize - Headline
-/** This token is used for the headline1 text style's font size parameter. 48 - 48 - 72 - 100 */
-export const headline1FontSize = "42px";
-/** This token is used on the headline2 text style's font size parameter. 40 - 40 - 48 - 64 */
-export const headline2FontSize = "42px";
-/** This token is used on the headline3 text style's font size parameter. 28 - 28 - 36 - 40 */
-export const headline3FontSize = "30px";
-/** This token controls the headline4 text style's font size parameter: 22 - 22 - 26 - 32 */
-export const headline4FontSize = "21px";
-
-// Semantic - Typography - FontSize - Body
-/** This variable is used on the body text style's font size parameter. It remains constant at 21. */
-export const bodyFontSize = "17px";
-
-// Semantic - Typography - FontSize - Label
-/** This token is used in the label3 text style's font size parameter. Its value remains constant at 12 across device sizes. */
-export const label3FontSize = "12px";
-/** This variable controls the label2 text style's font size parameter. Its value remains constant at 15. */
-export const label2FontSize = "15px";
-/** This token is used in the label1 text style font size parameter. Its value remains constant at 17 across device sizes. */
-export const label1FontSize = "17px";
-/** 10 - 10 - 15 - 17 Use this label font size when you want your label's font size to change across device sizes. */
-export const label1FontSizeResponsive = "10px";
-/** This token is used in the font size parameter of the label4 text style. The value remains constant at 8. */
-export const label4FontSize = "8px";
-
-// Semantic - Typography - FontSize - Callout
-/** This token is used for the font size parameter of the callout text style. 18 - 18 - 22 - 22 */
-export const callout1FontSize = "18px";
-
-// Semantic - Typography - FontSize - Footnote
-/** This token is used on the footnote text style font size parameter. 16 - 16 - 16 - 18 */
-export const footnote1FontSize = "13px";
-/** This token is used in the font size parameter of the footnote2 text style. 12 - 12 - 12 - 16 */
-export const footnote2FontSize = "10px";
-
-// Semantic - Typography - FontSize - Kicker
-/** Values come from NMT Figma File 01_Foundation; in online CSS this is kicker0. 18 - 18 - 22 - 30 - This variable does not exist yet in online css. Online css is called kicker0 for smallest font size. */
-export const kicker1FontSize = "20px";
-/** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. This DS uses 1 to 4 following html convention of h1, h2, h3, etc. 18 - 18 - 22 - 24 */
-export const kicker2FontSize = "16px";
-/** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 16 - 16 - 18 - 20 */
-export const kicker3FontSize = "16px";
-/** Values come from comparing NMT Figma File 01_Foundation to online CSS. Online kickers are numbered from 0 to 3. 14 - 14 - 16 - 16 */
-export const kicker4FontSize = "14px";
-
-// Semantic - Typography - FontSize - Subheadline
-/** This token controls the subheadline1 font size parameter. 24 - 24 - 32 - 36 */
-export const subheadline1FontSize = "18px";
-
-// Semantic - Typography - FontSize - Quote
-/** 16 - 16 - 18 - 20 -- This variable is used for controlling the font size of the quote text style. */
-export const quoteFontSize = "16px";
-
-// Semantic - Typography - FontFamily
-/** This variable references the bodyFontFamily variable from the branding collection. */
-export const bodyFontFamily = "Inter";
-export const calloutFontFamily = "AntennaCond";
-export const headlineFontFamily = "AntennaExtraCond";
-export const footnoteFontFamily = "Inter";
-export const labelFontFamily = "AntennaExtraCond";
-export const kickerFontFamily = "AntennaExtraCond";
-export const subheadlineFontFamily = "AntennaCond";
-export const titleFontFamily = "AntennaCond";
-export const quoteFontFamily = "AntennaCond";
-export const displayFontFamily = "AntennaCond";
-
-// Semantic - Typography - FontWeight - Callout
-export const calloutFontWeight = "800";
-
-// Semantic - Typography - FontWeight - Label
-export const labelFontWeightBold = "700";
-export const labelFontWeightBook = "400";
-
-// Semantic - Typography - FontWeight - Body
-export const bodyFontWeightBook = "400";
-export const bodyFontWeightBold = "700";
-
-// Semantic - Typography - FontWeight - Kicker
-export const kickerFontWeight = "700";
-export const kickerFontWeightSt = "Black Italic";
-
-// Semantic - Typography - FontWeight - Subheadline
-export const subheadlineFontWeight = "700";
-
-// Semantic - Typography - FontWeight - Headline
-export const headline1FontWeight = "700";
-export const headline2FontWeight = "700";
-export const headline3FontWeight = "700";
-export const headline4FontWeight = "700";
-/** This variable is a string type variable for controlling not only headline font weight but also the italic style for Sport Bild headlines. */
-export const headline1FontWeightSt = "Bold Italic";
-
-// Semantic - Typography - FontWeight - Title
-export const titleFontWeight = "800";
-
-// Semantic - Typography - FontWeight - Display
-export const displayFontWeight = "800";
-
-// Semantic - Typography - FontWeight - Quote
-export const quoteFontWeight = "800";
-
-// Semantic - Typography - FontWeight - Footnote
-export const footnoteFontWeightBook = "400";
-export const footnoteFontWeightBold = "700";
-
-// Semantic - Typography - LineHeight - Body
-/** Figma's font line height currently does not allow for multipliers as is used on current website css var(--body-line-height) */
-export const bodyLineHeight = "28.05";
-
-// Semantic - Typography - LineHeight - Kicker
-export const kicker4LineHeight = "15.4";
-export const kicker3LineHeight = "17.6";
-export const kicker2LineHeight = "17.6";
-export const kicker1LineHeight = "22";
-
-// Semantic - Typography - LineHeight - Label
-export const label3LineHeight = "14.4";
-/** This variable is used in the label1 text style's line height parameter. It references branding variables for brand specific line heights. */
-export const label1LineHeight = "20.4";
-export const label1ResponsiveLineHeight = "12";
-export const label2LineHeight = "19.2";
-export const label4LineHeight = "10";
-
-// Semantic - Typography - LineHeight - Display
-export const display1LineHeight = "40";
-export const display2LineHeight = "36";
-export const display3LineHeight = "28";
-
-// Semantic - Typography - LineHeight - Title
-export const title1LineHeight = "26.4";
-/** html class stage-block-title__text css var --ressort-header-font-size(sm-md-lg) */
-export const title2LineHeight = "16.8";
-
-// Semantic - Typography - LineHeight - Quote
-/** This variable is used in the quote text style line height parameter. */
-export const quoteLineHeight = "20.8";
-
-// Semantic - Typography - LineHeight - Footnote
-export const footnote1LineHeight = "17.03";
-export const footnote2LineHeight = "13";
-
-// Semantic - Typography - LineHeight - Headline
-export const headline1LineHeight = "42";
-export const headline2LineHeight = "42";
-export const headline3LineHeight = "33";
-export const headline4LineHeight = "23.1";
-
-// Semantic - Typography - LineHeight - Callout
-export const calloutLineHeight = "23.4";
-
-// Semantic - Typography - LineHeight - Subheadline
-export const subheadline1LineHeight = "23.4";
-
-// Semantic - Typography - LetterSpacing
-/** 0.5 | 0.5 | 0.5 | 0.5 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. */
-export const letterSpacingPositiveSm = "0.5";
-/** 2 | 2 | 2 | 3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. */
-export const letterSpacingPositiveLg = "2";
-/** 1 | 1 | 1 | 1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. */
-export const letterSpacingPositiveMd = "1";
-/** 0 | 0 | 0 | 0 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. */
-export const letterSpacingNone = "0";
-/** -0.5 | -0.5 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. */
-export const letterSpacingNegativeSm = "-0.5";
-/** -1 | -1 | -1 | -1 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. */
-export const letterSpacingNegativeMd = "-1";
-/** -2 | -2 | -2 | -3 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. */
-export const letterSpacingNegativeLg = "-2";
-/** -0.25 | -0.25 | -0.25 | -0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. This letter spacing was only found in large titles on iOS mobile app large title component. */
-export const letterSpacingNegativeXs = "-0.25";
-/** 0.25 | 0.25 | 0.25 | 0.25 | This variable takes primitive letter spacing variables and creates this semantic variable for use on designs that change across device sizes. */
-export const letterSpacingPositiveXs = "0.25";
-
-// Semantic - Typography - LetterSpacing - display
-/** -0.5 | -0.5 | -1 | -2 | This variable is used for the letter spacing parameter of the display1 text style. On smaller devices the value is smaller than on larger devices. On desktop devices the letter spacing is further reduced for making the text style more compact. */
-export const display1LetterSpacing = "-0.5";
-/** -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display2 text style. On smaller devices the value is smaller than on larger devices. */
-export const display2LetterSpacing = "-0.5";
-/** -0.5 | -0.5 | -1 | -1 | This variable is used for the letter spacing parameter of the display3 text style. On smaller devices the value is smaller than on larger devices. */
-export const display3LetterSpacing = "-0.5";
-
-// Semantic - Border - BorderRadius
-/** 2-2-2-2 use for corner rounding on very small UI elements such as tooltips and badges. */
-export const borderRadiusXs = "2px";
-/** 8-8-8-8 – Standard radius for buttons, chips, input fields, and medium-sized interactive elements. */
-export const borderRadiusMd = "8px";
-/** 4-4-4-4 – use for corner rounding on compact components like checkboxes or small input controls. */
-export const borderRadiusSm = "4px";
-/** 24-24-24-24 – use for corner rounding on larger cards, overlays, dialogs, and other container components. */
-export const borderRadiusXl = "24px";
-/** 16-16-16-16 – use for corner rounding on small cards, overlays, and modal surfaces. */
-export const borderRadiusLg = "16px";
-/** 0-0-0-0 – no corner rounding. Used as default for flat layouts, content modules, images, and teaser elements. */
-export const borderRadiusNone = "0px";
-/** creates fully rounded shapes, typically used for circular elements like avatars. */
-export const borderRadiusFull = "9999px";
-
-// Semantic - Border - BorderWidth
-/** 1-1-1-1 – use for subtle outlines and dividers */
-export const borderWidthThin = "1px";
-/** 2-2-2-2 – use for stronger outlines on form elements (inputs), buttons (outline variants), and interaction states (focus, hover, active) */
-export const borderWidthThick = "2px";
-/** 0.33 -0.33 -0.33 -0.33 – primarily used in mobile app interfaces. Optimized for high-density displays to create subtle dividers and outlines without visual overload. */
-export const borderWidthHairline = "0.33px";
-
-// Semantic - Visibility - VariantSwitch
-export const changeOnLg = "xs/sm/md";
-/** This variable is used for controlling size changes across device sizes on some components such as the vertical newsticker cards and the search results cards. Both have cards that change layouts at different breakpoints. */
-export const changeOnMd = "xs/sm";
-export const bpSpecificWeb = "xs/sm";
-export const bpSpecificApp = "compact";
-
-// Semantic - Space - Inline - Responsive
-/** 8-8-12-16 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-export const inlineSpaceRespSm = "8px";
-/** 12-12-16-24 use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-export const inlineSpaceRespMd = "12px";
-/** 16-16-24-32 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-export const inlineSpaceRespLg = "16px";
-/** 32-32-48-64 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-export const inlineSpaceResp2Xl = "32px";
-/** 24-24-32-40 – use for horizontal (left/right) padding of UI elements that scales across breakpoints */
-export const inlineSpaceRespXl = "24px";
-
-// Semantic - Space - Inline - Constant
-/** 8-8-8-8 – Use for fixed horizontal (left/right) padding of UI elements */
-export const inlineSpaceConstSm = "8px";
-/** 12-12-12-12 – Use for fixed horizontal (left/right) padding of UI elements */
-export const inlineSpaceConstMd = "12px";
-/** 16-16-16-16 – Use for fixed horizontal (left/right) padding of UI elements */
-export const inlineSpaceConstLg = "16px";
-/** 32-32-32-32 – Use for fixed horizontal (left/right) padding of UI elements */
-export const inlineSpaceConst2Xl = "32px";
-/** 24-24-24-24 – Use for fixed horizontal (left/right) padding of UI elements */
-export const inlineSpaceConstXl = "24px";
-/** 6-6-6-6 – Use for fixed horizontal (left/right) padding of UI elements */
-export const inlineSpaceConstXs = "6px";
-/** 2-2-2-2 – Use for fixed horizontal (left/right) padding of UI elements */
-export const inlineSpaceConst3Xs = "2px";
-/** 4-4-4-4 – Use for fixed horizontal (left/right) padding of UI elements */
-export const inlineSpaceConst2Xs = "4px";
-
-// Semantic - Space - Stack - Responsive
-/** 12-12-16-24 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-export const stackSpaceRespMd = "12px";
-/** 16-16-24-32 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-export const stackSpaceRespLg = "16px";
-/** 32-32-48-64 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-export const stackSpaceResp2Xl = "32px";
-/** 8-8-12-16 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-export const stackSpaceRespSm = "8px";
-/** 24-24-32-40 – use for vertical (top/bottom) padding of UI elements that scales across breakpoints */
-export const stackSpaceRespXl = "24px";
-
-// Semantic - Space - Stack - Constant
-/** 8-8-8-8 – Use for fixed vertical (top/bottom) padding of UI elements */
-export const stackSpaceConstSm = "8px";
-/** 12-12-12-12 – Use for fixed vertical (top/bottom) padding of UI elements */
-export const stackSpaceConstMd = "12px";
-/** 16-16-16-16 – Use for fixed vertical (top/bottom) padding of UI elements */
-export const stackSpaceConstLg = "16px";
-/** 32-32-32-32 – Use for fixed vertical (top/bottom) padding of UI elements */
-export const stackSpaceConst2Xl = "32px";
-/** 24-24-24-24 – Use for fixed vertical (top/bottom) padding of UI elements */
-export const stackSpaceConstXl = "24px";
-/** 6-6-6-6 – Use for fixed vertical (top/bottom) padding of UI elements */
-export const stackSpaceConstXs = "6px";
-/** 2-2-2-2 – Use for fixed vertical (top/bottom) padding of UI elements */
-export const stackSpaceConst3Xs = "2px";
-/** 4-4-4-4 – Use for fixed vertical (top/bottom) padding of UI elements */
-export const stackSpaceConst2Xs = "4px";
-
-// Semantic - Space - Gap - Responsive
-/** 4-4-6-8 – Use for gaps between items inside of UI elements that scale across breakpoints */
-export const gapSpaceRespXs = "4px";
-/** 16-16-24-32 – Use for gaps between items inside of UI elements that scale across breakpoints */
-export const gapSpaceRespLg = "16px";
-/** 24-24-32-48 – Use for gaps between items inside of UI elements that scale across breakpoints */
-export const gapSpaceRespXl = "24px";
-/** 32-32-48-64 – Use for gaps between items inside of UI elements that scale across breakpoints */
-export const gapSpaceResp2Xl = "32px";
-/** 12-12-16-24 – Use for gaps between items inside of UI elements that scale across breakpoints */
-export const gapSpaceRespMd = "12px";
-/** 8-8-12-16 – Use for gaps between items inside of UI elements that scale across breakpoints */
-export const gapSpaceRespSm = "8px";
-/** 2-2-4-6 – Use for gaps between items inside of UI elements that scale across breakpoints */
-export const gapSpaceResp2Xs = "2px";
-/** 48-48-72-96 – Use for gaps between items inside of UI elements that scale across breakpoints */
-export const gapSpaceResp3Xl = "48px";
-
-// Semantic - Space - Gap - Constant
-/** 2-2-2-2 – Use for fixed gaps between items inside of UI elements */
-export const gapSpaceConst2Xs = "2px";
-/** 4-4-4-4 – Use for fixed gaps between items inside of UI elements */
-export const gapSpaceConstXs = "4px";
-/** 8-8-8-8 – Use for fixed gaps between items inside of UI elements */
-export const gapSpaceConstSm = "8px";
-/** 12-12-12-12 – Use for fixed gaps between items inside of UI elements */
-export const gapSpaceConstMd = "12px";
-/** 16-16-16-16 – Use for fixed gaps between items inside of UI elements */
-export const gapSpaceConstLg = "16px";
-/** 24-24-24-24 – Use for fixed gaps between items inside of UI elements */
-export const gapSpaceConstXl = "24px";
-/** 32-32-32-32 – Use for fixed gaps between items inside of UI elements */
-export const gapSpaceConst2Xl = "32px";
-/** 48-48-48-48 – Use for fixed gaps between items inside of UI elements */
-export const gapSpaceConst3Xl = "48px";
-
-// Semantic - Size - Constant
-/** 16-16-16-16 – Use for setting fixed height and width of UI elements */
-export const sizeConst3Xs = "16px";
-/** 24-24-24-24 – Use for setting fixed height and width of UI elements */
-export const sizeConst2Xs = "24px";
-/** 32-32-32-32 – Use for setting fixed height and width of UI elements */
-export const sizeConstXs = "32px";
-/** 40-40-40-40 – Use for setting fixed height and width of UI elements */
-export const sizeConstSm = "40px";
-/** 48-48-48-48 Use for setting fixed height and width of UI elements */
-export const sizeConstMd = "48px";
-/** 56-56-56-56 – Use for setting fixed height and width of UI elements */
-export const sizeConstLg = "56px";
-/** 64-64-64-64 – Use for setting fixed height and width of UI elements */
-export const sizeConstXl = "64px";
-/** 96-96-96-96 – Use for setting fixed height and width of UI elements */
-export const sizeConst3Xl = "96px";
-/** 148-148-148-148 – Use for setting fixed height and width of UI elements */
-export const sizeConst4Xl = "148px";
-/** 72-72-72-72 – Use for setting fixed height and width of UI elements */
-export const sizeConst2Xl = "72px";
-/** 8-8-8-8 – Use for setting fixed height and width of UI elements */
-export const sizeConst4Xs = "8px";
-
-// Semantic - Size - Responsive
-/** 16-16-16-24 – Use for setting height and width of UI elements that scale across breakpoints */
-export const sizeResp3Xs = "16px";
-/** 24-24-32-32 – Use for setting height and width of UI elements that scale across breakpoints */
-export const sizeResp2Xs = "24px";
-/** 32-32-40-48 – Use for setting height and width of UI elements that scale across breakpoints */
-export const sizeRespXs = "32px";
-/** 40-40-48-56 – Use for setting height and width of UI elements that scale across breakpoints */
-export const sizeRespSm = "40px";
-/** 48-48-64-72 – Use for setting height and width of UI elements that scale across breakpoints */
-export const sizeRespMd = "48px";
-/** 56-56-72-92 – Use for setting height and width of UI elements that scale across breakpoints */
-export const sizeRespLg = "56px";
-/** 64-64-80-96 – Use for setting height and width of UI elements that scale across breakpoints */
-export const sizeRespXl = "64px";
-/** 72-72-92-100 – Use for setting height and width of UI elements that scale across breakpoints */
-export const sizeResp2Xl = "72px";
-/** 96-96-120-148 – Use for setting height and width of UI elements that scale across breakpoints */
-export const sizeResp3Xl = "96px";
-/** 148-148-160-180 – Use for setting height and width of UI elements that scale across breakpoints */
-export const sizeResp4Xl = "148px";
-/** 12-12-14-16 – Use for setting height and width of UI elements that scale across breakpoints */
-export const sizeResp4Xs = "12px";
-
-
-// ============================================
-// OTHER
-// ============================================
-
-export const breakpointName = "xs";
-