@baloise/ds-tokens 19.9.5 → 20.0.0-next.4

package/dist/tokens.json

@@ -1,265 +0,0 @@
-{
-  "balColorBackgroundPrimary": "#000d6e",
-  "balColorBackgroundGreenLight": "#e9fbf7",
-  "balColorBackgroundGreen": "#94e3d4",
-  "balColorBackgroundPurpleLight": "#f9f3ff",
-  "balColorBackgroundPurple": "#b8b2ff",
-  "balColorBackgroundYellowLight": "#fff9e8",
-  "balColorBackgroundYellow": "#fae052",
-  "balColorBackgroundRedLight": "#ffeef1",
-  "balColorBackgroundRed": "#ffaca6",
-  "balColorBackgroundWhite": "#ffffff",
-  "balColorBackgroundGreyLight": "#f6f6f6",
-  "balColorBackgroundGrey": "#e8e8e8",
-  "balColorBackgroundDisabled": "#e8e8e8",
-  "balColorBackgroundInfo": "#60a0e0",
-  "balColorBackgroundSuccess": "#5bab7a",
-  "balColorBackgroundWarning": "#ffd25e",
-  "balColorBackgroundDanger": "#f05d4d",
-  "balColorBorder": "#e8e8e8",
-  "balColorBorderPrimary": "#000d6e",
-  "balColorBorderPrimaryLight": "#656ea8",
-  "balColorBorderGreyLight": "#f6f6f6",
-  "balColorBorderGrey": "#e8e8e8",
-  "balColorBorderGreyDark": "#b6b6b6",
-  "balColorBorderWhite": "#ffffff",
-  "balColorBorderInfo": "#1c77d2",
-  "balColorBorderSuccess": "#168741",
-  "balColorBorderWarning": "#f99319",
-  "balColorBorderDanger": "#ea1800",
-  "balColorBorderInfoHovered": "#155ba3",
-  "balColorBorderInfoPressed": "#0e457b",
-  "balColorBorderPrimaryHovered": "#0014aa",
-  "balColorBorderPrimaryPressed": "#000739",
-  "balColorBorderSuccessHovered": "#116b34",
-  "balColorBorderSuccessPressed": "#0b5227",
-  "balColorBorderWarningHovered": "#f99319",
-  "balColorBorderWarningPressed": "#c97612",
-  "balColorBorderDangerHovered": "#cb1501",
-  "balColorBorderDangerPressed": "#a01100",
-  "balColorBorderGreenHovered": "#00b28f",
-  "balColorBorderGreenPressed": "#1b5951",
-  "balColorBorderPurpleHovered": "#9f52cc",
-  "balColorBorderPurplePressed": "#6c2273",
-  "balColorBorderRedHovered": "#d9304c",
-  "balColorBorderRedPressed": "#99172d",
-  "balColorBorderYellowHovered": "#fa9319",
-  "balColorBorderYellowPressed": "#b24a00",
-  "balColorBorderInverted": "#ffffff",
-  "balColorBorderInvertedDisabled": "#656ea8",
-  "balColorBorderInvertedPrimary": "#293485",
-  "balColorBorderInvertedPrimaryHovered": "#a7d1fa",
-  "balColorBorderInvertedPrimaryPressed": "#6672cc",
-  "balColorPrimary": "#000d6e",
-  "balColorGrey": "#e8e8e8",
-  "balColorLightBlue": "#e5f1fe",
-  "balColorPurple": "#b8b2ff",
-  "balColorGreen": "#94e3d4",
-  "balColorYellow": "#fae052",
-  "balColorRed": "#ffaca6",
-  "balColorInfo": "#60a0e0",
-  "balColorSuccess": "#5bab7a",
-  "balColorWarning": "#ffd25e",
-  "balColorDanger": "#f05d4d",
-  "balColorPrimary1": "#e5e7f0",
-  "balColorPrimary2": "#b3b6d4",
-  "balColorPrimary3": "#656ea8",
-  "balColorPrimary4": "#293485",
-  "balColorPrimary5": "#000d6e",
-  "balColorPrimary6": "#000739",
-  "balColorWhite": "#ffffff",
-  "balColorGreen1": "#e9fbf7",
-  "balColorGreen2": "#cbf2ec",
-  "balColorGreen3": "#94e3d4",
-  "balColorGreen4": "#21d9ac",
-  "balColorGreen5": "#00b28f",
-  "balColorGreen6": "#1b5951",
-  "balColorPurple1": "#f9f3ff",
-  "balColorPurple2": "#e1d9ff",
-  "balColorPurple3": "#b8b2ff",
-  "balColorPurple4": "#be82fa",
-  "balColorPurple5": "#9f52cc",
-  "balColorPurple6": "#6c2273",
-  "balColorYellow1": "#fff9e8",
-  "balColorYellow2": "#ffecbc",
-  "balColorYellow3": "#fae052",
-  "balColorYellow4": "#ffbe19",
-  "balColorYellow5": "#fa9319",
-  "balColorYellow6": "#b24a00",
-  "balColorRed1": "#ffeef1",
-  "balColorRed2": "#ffd7d7",
-  "balColorRed3": "#ffaca6",
-  "balColorRed4": "#ff596f",
-  "balColorRed5": "#d9304c",
-  "balColorRed6": "#99172d",
-  "balColorGrey1": "#fafafa",
-  "balColorGrey2": "#f6f6f6",
-  "balColorGrey3": "#e8e8e8",
-  "balColorGrey4": "#b6b6b6",
-  "balColorGrey5": "#747474",
-  "balColorGrey6": "#313131",
-  "balColorBlack": "#000000",
-  "balColorLightBlue1": "#e5f1fe",
-  "balColorLightBlue2": "#a7d1fa",
-  "balColorLightBlue3": "#56a7f5",
-  "balColorLightBlue4": "#6672cc",
-  "balColorLightBlue5": "#0014aa",
-  "balColorLightBlue6": "#000a55",
-  "balColorInfo1": "#e8f1fb",
-  "balColorInfo2": "#a4c9ed",
-  "balColorInfo3": "#60a0e0",
-  "balColorInfo4": "#1c77d2",
-  "balColorInfo5": "#155ba3",
-  "balColorInfo6": "#0e457b",
-  "balColorSuccess1": "#e8f3ec",
-  "balColorSuccess2": "#a1cfb3",
-  "balColorSuccess3": "#5bab7a",
-  "balColorSuccess4": "#168741",
-  "balColorSuccess5": "#116b34",
-  "balColorSuccess6": "#0b5227",
-  "balColorWarning1": "#fff9e8",
-  "balColorWarning2": "#ffe5a3",
-  "balColorWarning3": "#ffd25e",
-  "balColorWarning4": "#ffbe19",
-  "balColorWarning5": "#f99319",
-  "balColorWarning6": "#c97612",
-  "balColorDanger1": "#fce8e6",
-  "balColorDanger2": "#f7a299",
-  "balColorDanger3": "#f05d4d",
-  "balColorDanger4": "#ea1800",
-  "balColorDanger5": "#cb1501",
-  "balColorDanger6": "#a01100",
-  "balColorShadowFocusStart": "#ffffff",
-  "balColorShadowFocusEnd": "#6c2273",
-  "balColorShadowFocusInvertedStart": "#ffffff",
-  "balColorShadowFocusInvertedEnd": "#fae052",
-  "balColorTextPrimary": "#000d6e",
-  "balColorTextPrimaryLight": "#656ea8",
-  "balColorTextWhite": "#ffffff",
-  "balColorTextGreyLight": "#b6b6b6",
-  "balColorTextGrey": "#747474",
-  "balColorTextGreyDark": "#313131",
-  "balColorTextInfo": "#1c77d2",
-  "balColorTextWarning": "#f99319",
-  "balColorTextSuccess": "#168741",
-  "balColorTextDanger": "#ea1800",
-  "balColorTextBlack": "#000000",
-  "balColorTextPrimaryHovered": "#0014aa",
-  "balColorTextPrimaryPressed": "#000739",
-  "balColorTextDangerHovered": "#cb1501",
-  "balColorTextDangerPressed": "#a01100",
-  "balColorTextInverted": "#ffffff",
-  "balColorTextInvertedDisabled": "#656ea8",
-  "balColorTextInvertedHovered": "#a7d1fa",
-  "balColorTextInvertedPressed": "#60a0e0",
-  "balBorderWidthSmall": "0.063rem",
-  "balBorderWidthNormal": "0.125rem",
-  "balBorderWidthLarge": "0.25rem",
-  "balBreakpointTablet": "769px",
-  "balBreakpointDesktop": "1024px",
-  "balBreakpointHighDefinition": "1280px",
-  "balBreakpointWidescreen": "1440px",
-  "balBreakpointFullhd": "1920px",
-  "balContainerSizeDetailPage": "744px",
-  "balContainerSizeCompact": "896px",
-  "balContainerSizeNormal": "1496px",
-  "balContainerSizeFluid": "100%",
-  "balContainerSpace": "1rem",
-  "balContainerSpaceTablet": "2.5rem",
-  "balContainerSpaceDesktop": "3rem",
-  "balColumnGap": "1rem",
-  "balRadiusNormal": "0.25rem",
-  "balRadiusLarge": "0.75rem",
-  "balRadiusRounded": "9999px",
-  "balSpaceXxSmall": "0.25rem",
-  "balSpaceXxSmallTablet": "0.25rem",
-  "balSpaceXxSmallDesktop": "0.25rem",
-  "balSpaceXSmall": "0.5rem",
-  "balSpaceXSmallTablet": "0.5rem",
-  "balSpaceXSmallDesktop": "0.5rem",
-  "balSpaceSmall": "0.75rem",
-  "balSpaceSmallTablet": "0.75rem",
-  "balSpaceSmallDesktop": "0.75rem",
-  "balSpaceNormal": "1rem",
-  "balSpaceNormalTablet": "1rem",
-  "balSpaceNormalDesktop": "1rem",
-  "balSpaceMedium": "1.25rem",
-  "balSpaceMediumTablet": "1.25rem",
-  "balSpaceMediumDesktop": "1.5rem",
-  "balSpaceLarge": "1.5rem",
-  "balSpaceLargeTablet": "1.5rem",
-  "balSpaceLargeDesktop": "2rem",
-  "balSpaceXLarge": "2rem",
-  "balSpaceXLargeTablet": "2.5rem",
-  "balSpaceXLargeDesktop": "3rem",
-  "balSpaceXxLarge": "3rem",
-  "balSpaceXxLargeTablet": "3.5rem",
-  "balSpaceXxLargeDesktop": "4rem",
-  "balSpaceXxxLarge": "3.5rem",
-  "balSpaceXxxLargeTablet": "4.5rem",
-  "balSpaceXxxLargeDesktop": "6rem",
-  "balSpaceXxxxLarge": "4rem",
-  "balSpaceXxxxLargeTablet": "6rem",
-  "balSpaceXxxxLargeDesktop": "8rem",
-  "balFontWeightBold": "700",
-  "balFontWeightRegular": "400",
-  "balFontWeightLight": "300",
-  "balTextSizeXSmall": "0.75rem",
-  "balTextSizeXSmallTablet": "0.75rem",
-  "balTextSizeXSmallDesktop": "0.75rem",
-  "balTextSizeSmall": "0.875rem",
-  "balTextSizeSmallTablet": "0.875rem",
-  "balTextSizeSmallDesktop": "0.875rem",
-  "balTextSizeNormal": "1rem",
-  "balTextSizeNormalTablet": "1rem",
-  "balTextSizeNormalDesktop": "1rem",
-  "balTextSizeMedium": "1rem",
-  "balTextSizeMediumTablet": "1.125rem",
-  "balTextSizeMediumDesktop": "1.125rem",
-  "balTextSizeLarge": "1.125rem",
-  "balTextSizeLargeTablet": "1.25rem",
-  "balTextSizeLargeDesktop": "1.25rem",
-  "balTextSizeXLarge": "1.25rem",
-  "balTextSizeXLargeTablet": "1.5rem",
-  "balTextSizeXLargeDesktop": "1.5rem",
-  "balTextSizeXxLarge": "1.5rem",
-  "balTextSizeXxLargeTablet": "2rem",
-  "balTextSizeXxLargeDesktop": "2rem",
-  "balTextSizeXxxLarge": "1.75rem",
-  "balTextSizeXxxLargeTablet": "2.5rem",
-  "balTextSizeXxxLargeDesktop": "2.5rem",
-  "balTextSizeXxxxLarge": "2rem",
-  "balTextSizeXxxxLargeTablet": "3rem",
-  "balTextSizeXxxxLargeDesktop": "3rem",
-  "balTextSizeXxxxxLarge": "3rem",
-  "balTextSizeXxxxxLargeTablet": "5rem",
-  "balTextSizeXxxxxLargeDesktop": "5rem",
-  "balTextLineHeightTitle": "1.3",
-  "balTextLineHeightText": "1.5",
-  "balZIndexDeep": "-999999",
-  "balZIndex": "1",
-  "balZIndexMasked": "100",
-  "balZIndexMask": "200",
-  "balZIndexSticky": "300",
-  "balZIndexNavigation": "400",
-  "balZIndexPopup": "1000",
-  "balZIndexModal": "1100",
-  "balZIndexToast": "1200",
-  "balZIndexTooltip": "1300",
-  "balAnimationTransitionDuration": "300ms",
-  "balAnimationTransitionEasing": "cubic-bezier(0.25, 0.8, 0.5, 1)",
-  "balShadowSmall": "0px 2px 5px 1px rgba(0, 7, 57, 0.12)",
-  "balShadowNormal": "0 0 10px 0 rgba(0, 7, 57, 0.15)",
-  "balShadowLarge": "0 0 30px 0 rgba(0, 7, 57, 0.15)",
-  "balShadowHeader": "0 4px 4px 0 rgba(0, 7, 57, 0.15)",
-  "balFontFamilyTitle": "BaloiseCreateHeadline, Arial, sans-serif",
-  "balFontFamilyText": "BaloiseCreateText, Arial, sans-serif",
-  "balOpacity0": "0",
-  "balOpacity30": "0.3",
-  "balOpacity40": "0.4",
-  "balOpacity50": "0.5",
-  "balOpacity60": "0.6",
-  "balOpacity80": "0.8",
-  "balOpacity100": "1",
-  "balTextShadowNormal": "0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5)"
-}

package/dist/tokens.less

@@ -1,267 +0,0 @@
-
-// Do not edit directly
-// Generated on Mon, 18 May 2026 09:23:43 GMT
-
-@bal-text-shadow-normal: 0px 0px 4px rgba(0, 0, 0, 0.15), 0px 4px 12px rgba(0, 0, 0, 0.25), 0px 0px 80px rgba(0, 0, 0, 0.5); // Increases readability when used on a image background.
-@bal-opacity-100: 1;
-@bal-opacity-80: 0.8;
-@bal-opacity-60: 0.6;
-@bal-opacity-50: 0.5;
-@bal-opacity-40: 0.4;
-@bal-opacity-30: 0.3;
-@bal-opacity-0: 0;
-@bal-font-family-text: BaloiseCreateText, Arial, sans-serif;
-@bal-font-family-title: BaloiseCreateHeadline, Arial, sans-serif;
-@bal-shadow-header: 0 4px 4px 0 rgba(0, 7, 57, 0.15); // Shadow effect for a header bar
-@bal-shadow-large: 0 0 30px 0 rgba(0, 7, 57, 0.15); // Large shadow are used for hover effects.
-@bal-shadow-normal: 0 0 10px 0 rgba(0, 7, 57, 0.15); // Default shadow size to elevate an element.
-@bal-shadow-small: 0px 2px 5px 1px rgba(0, 7, 57, 0.12);
-@bal-animation-transition-easing: cubic-bezier(0.25, 0.8, 0.5, 1);
-@bal-animation-transition-duration: 300ms;
-@bal-z-index-tooltip: 1300; // Default z-index for tooltips.
-@bal-z-index-toast: 1200; // Default z-index for toast and snackbar messages.
-@bal-z-index-modal: 1100; // Default z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible.
-@bal-z-index-popup: 1000; // Default z-index for popups that stacks on top of all other elements.
-@bal-z-index-navigation: 400; // Default z-index for navigation.
-@bal-z-index-sticky: 300; // Default z-index for sticky interface elements.
-@bal-z-index-mask: 200; // Default z-index for masking interface elements.
-@bal-z-index-masked: 100; // Default z-index for masked interface elements.
-@bal-z-index: 1; // The default z-index for components and elements inside components.
-@bal-z-index-deep: -999999; // Deep z-index is used to stack something behind everything else.
-@bal-text-line-height-text: 1.5; // Default line height for all text elements.
-@bal-text-line-height-title: 1.3; // Standard line-height for the headings.
-@bal-text-size-xxxxx-large-tablet: 5rem;
-@bal-text-size-xxxxx-large: 3rem; // Should only be uses to illustrate large stage areas.
-@bal-text-size-xxxx-large-tablet: 3rem;
-@bal-text-size-xxxx-large: 2rem; // Should only be uses to illustrate large stage areas.
-@bal-text-size-xxx-large-tablet: 2.5rem;
-@bal-text-size-xxx-large: 1.75rem; // Should only be used for stage titles and headings of level 1.
-@bal-text-size-xx-large-tablet: 2rem;
-@bal-text-size-xx-large: 1.5rem; // Should only be used for content titles and headings of level 2.
-@bal-text-size-x-large-tablet: 1.5rem;
-@bal-text-size-x-large: 1.25rem; // Should only be used for form titles, quick link navigation's and headings of level 3.
-@bal-text-size-large-tablet: 1.25rem;
-@bal-text-size-large: 1.125rem; // Should only be used for standard card titles and headings of level 4 or for lead text/paragraphs after a heading.
-@bal-text-size-medium-tablet: 1.125rem;
-@bal-text-size-medium: 1rem; // Should only be used in a 2/3 grid column to improve readability.
-@bal-text-size-normal: 1rem; // Should only be used for label texts.
-@bal-text-size-small: 0.875rem; // Should only be used for label texts.
-@bal-text-size-x-small: 0.75rem; // Should only be used for helper texts or validation messages of a form control.
-@bal-font-weight-light: 300; // Can be used for secondary headings. Only available with the font BaloiseCreateHeadline.
-@bal-font-weight-regular: 400; // Default width of paragraphs. Only available with the font BaloiseCreateText.
-@bal-font-weight-bold: 700; // Bold is used for headings, links and buttons.
-@bal-space-xxxx-large-desktop: 8rem;
-@bal-space-xxxx-large-tablet: 6rem;
-@bal-space-xxxx-large: 4rem; // Space between sections
-@bal-space-xxx-large-desktop: 6rem;
-@bal-space-xxx-large-tablet: 4.5rem;
-@bal-space-xxx-large: 3.5rem; // Footer bottom padding
-@bal-space-xx-large-desktop: 4rem;
-@bal-space-xx-large-tablet: 3.5rem;
-@bal-space-xx-large: 3rem;
-@bal-space-x-large-desktop: 3rem;
-@bal-space-x-large-tablet: 2.5rem;
-@bal-space-x-large: 2rem; // Space between heading and card
-@bal-space-large-desktop: 2rem;
-@bal-space-large: 1.5rem; // Space between cards
-@bal-space-medium-desktop: 1.5rem;
-@bal-space-medium: 1.25rem; // Inner padding of cards
-@bal-space-normal: 1rem; // Space between large headings and content.
-@bal-space-small: 0.75rem;
-@bal-space-x-small: 0.5rem; // Space between text and icons or headings and content or clickable elements
-@bal-space-xx-small: 0.25rem; // Minimum space between two elements
-@bal-radius-rounded: 9999px; // The rounded radius token embraces a curvier design language, introducing a high degree of softness and fluidity to your elements.
-@bal-radius-large: 0.75rem; // The large radius token makes a bold visual statement by significantly rounding the corners of elements.
-@bal-radius-normal: 0.25rem; // The normal radius token strikes a balance between softness and structure.
-@bal-container-size-fluid: 100%; // The container for fullscreen application with a large table for example.
-@bal-container-size-normal: 1496px; // The default container size is versatile and suitable for various applications and website pages.
-@bal-container-size-compact: 896px; // Tailored container size designed for form wizard applications or pages.
-@bal-container-size-detail-page: 744px; // Deprecated container size for the website
-@bal-breakpoint-fullhd: 1920px; // Crafted for Full HD displays, this breakpoint strikes a balance between detail and performance.
-@bal-breakpoint-widescreen: 1440px; // Tailored for widescreen monitors, this breakpoint offers a panoramic view that accommodates expansive content layouts.
-@bal-breakpoint-high-definition: 1280px; // Designed for high-definition displays, this breakpoint elevates your interface to a level of visual richness and clarity.
-@bal-breakpoint-desktop: 1024px; // Optimized for desktop screens, this breakpoint provides a spacious canvas for your design, allowing for more intricate layouts and detailed content presentation.
-@bal-breakpoint-tablet: 769px; // Tailored for tablet devices, this breakpoint ensures a seamless and optimized user experience on medium-sized screens.
-@bal-border-width-large: 0.25rem; // The large border size makes a bold statement, creating strong visual contrasts and emphasizing key elements within your interface.
-@bal-border-width-normal: 0.125rem; // The normal border size strikes a harmonious balance, offering a versatile choice for defining boundaries within your design.
-@bal-border-width-small: 0.063rem; // The small border size is crafted for subtle, refined delineation.
-@bal-color-danger-6: #a01100;
-@bal-color-danger-5: #cb1501;
-@bal-color-danger-4: #ea1800;
-@bal-color-danger-3: #f05d4d;
-@bal-color-danger-2: #f7a299;
-@bal-color-danger-1: #fce8e6;
-@bal-color-warning-6: #c97612;
-@bal-color-warning-5: #f99319;
-@bal-color-warning-4: #ffbe19;
-@bal-color-warning-3: #ffd25e;
-@bal-color-warning-2: #ffe5a3;
-@bal-color-warning-1: #fff9e8;
-@bal-color-success-6: #0b5227;
-@bal-color-success-5: #116b34;
-@bal-color-success-4: #168741;
-@bal-color-success-3: #5bab7a;
-@bal-color-success-2: #a1cfb3;
-@bal-color-success-1: #e8f3ec;
-@bal-color-info-6: #0e457b;
-@bal-color-info-5: #155ba3;
-@bal-color-info-4: #1c77d2;
-@bal-color-info-3: #60a0e0;
-@bal-color-info-2: #a4c9ed;
-@bal-color-info-1: #e8f1fb;
-@bal-color-light-blue-6: #000a55;
-@bal-color-light-blue-5: #0014aa;
-@bal-color-light-blue-4: #6672cc;
-@bal-color-light-blue-3: #56a7f5;
-@bal-color-light-blue-2: #a7d1fa;
-@bal-color-light-blue-1: #e5f1fe;
-@bal-color-black: #000000;
-@bal-color-grey-6: #313131;
-@bal-color-grey-5: #747474;
-@bal-color-grey-4: #b6b6b6;
-@bal-color-grey-3: #e8e8e8;
-@bal-color-grey-2: #f6f6f6;
-@bal-color-grey-1: #fafafa;
-@bal-color-red-6: #99172d;
-@bal-color-red-5: #d9304c;
-@bal-color-red-4: #ff596f;
-@bal-color-red-3: #ffaca6;
-@bal-color-red-2: #ffd7d7;
-@bal-color-red-1: #ffeef1;
-@bal-color-yellow-6: #b24a00;
-@bal-color-yellow-5: #fa9319;
-@bal-color-yellow-4: #ffbe19;
-@bal-color-yellow-3: #fae052;
-@bal-color-yellow-2: #ffecbc;
-@bal-color-yellow-1: #fff9e8;
-@bal-color-purple-6: #6c2273;
-@bal-color-purple-5: #9f52cc;
-@bal-color-purple-4: #be82fa;
-@bal-color-purple-3: #b8b2ff;
-@bal-color-purple-2: #e1d9ff;
-@bal-color-purple-1: #f9f3ff;
-@bal-color-green-6: #1b5951;
-@bal-color-green-5: #00b28f;
-@bal-color-green-4: #21d9ac;
-@bal-color-green-3: #94e3d4;
-@bal-color-green-2: #cbf2ec;
-@bal-color-green-1: #e9fbf7;
-@bal-color-white: #ffffff;
-@bal-color-primary-6: #000739;
-@bal-color-primary-5: #000d6e;
-@bal-color-primary-4: #293485;
-@bal-color-primary-3: #656ea8;
-@bal-color-primary-2: #b3b6d4;
-@bal-color-primary-1: #e5e7f0;
-@bal-text-size-xxxxx-large-desktop: @bal-text-size-xxxxx-large-tablet;
-@bal-text-size-xxxx-large-desktop: @bal-text-size-xxxx-large-tablet;
-@bal-text-size-xxx-large-desktop: @bal-text-size-xxx-large-tablet;
-@bal-text-size-xx-large-desktop: @bal-text-size-xx-large-tablet;
-@bal-text-size-x-large-desktop: @bal-text-size-x-large-tablet;
-@bal-text-size-large-desktop: @bal-text-size-large-tablet;
-@bal-text-size-medium-desktop: @bal-text-size-medium-tablet;
-@bal-text-size-normal-desktop: @bal-text-size-normal;
-@bal-text-size-normal-tablet: @bal-text-size-normal;
-@bal-text-size-small-desktop: @bal-text-size-small;
-@bal-text-size-small-tablet: @bal-text-size-small;
-@bal-text-size-x-small-desktop: @bal-text-size-x-small;
-@bal-text-size-x-small-tablet: @bal-text-size-x-small;
-@bal-space-large-tablet: @bal-space-large;
-@bal-space-medium-tablet: @bal-space-medium;
-@bal-space-normal-desktop: @bal-space-normal;
-@bal-space-normal-tablet: @bal-space-normal;
-@bal-space-small-desktop: @bal-space-small;
-@bal-space-small-tablet: @bal-space-small;
-@bal-space-x-small-desktop: @bal-space-x-small;
-@bal-space-x-small-tablet: @bal-space-x-small;
-@bal-space-xx-small-desktop: @bal-space-xx-small;
-@bal-space-xx-small-tablet: @bal-space-xx-small;
-@bal-column-gap: @bal-space-normal;
-@bal-container-space-desktop: @bal-space-x-large-desktop; // Default space on desktops of a container to left and right side.
-@bal-container-space-tablet: @bal-space-x-large-tablet; // Default space on tablets of a container to left and right side.
-@bal-container-space: @bal-space-normal; // Default space of a container to left and right side.
-@bal-color-text-inverted-pressed: @bal-color-info-3;
-@bal-color-text-inverted-hovered: @bal-color-light-blue-2;
-@bal-color-text-inverted-disabled: @bal-color-primary-3;
-@bal-color-text-inverted: @bal-color-white;
-@bal-color-text-danger-pressed: @bal-color-danger-6;
-@bal-color-text-danger-hovered: @bal-color-danger-5;
-@bal-color-text-primary-pressed: @bal-color-primary-6;
-@bal-color-text-primary-hovered: @bal-color-light-blue-5;
-@bal-color-text-black: @bal-color-black;
-@bal-color-text-danger: @bal-color-danger-4;
-@bal-color-text-success: @bal-color-success-4;
-@bal-color-text-warning: @bal-color-warning-5;
-@bal-color-text-info: @bal-color-info-4;
-@bal-color-text-grey-dark: @bal-color-grey-6; // Font color for disabled elements
-@bal-color-text-grey: @bal-color-grey-5; // Font color for placeholders
-@bal-color-text-grey-light: @bal-color-grey-4; // Font color for disabled texts
-@bal-color-text-white: @bal-color-white; // Main font color for all headings and paragraphs on a dark background.
-@bal-color-text-primary-light: @bal-color-primary-3; // Secondary font color for help messages.
-@bal-color-text-primary: @bal-color-primary-5; // Main font color for all headings and paragraphs.
-@bal-color-shadow-focus-inverted-end: @bal-color-yellow-3;
-@bal-color-shadow-focus-inverted-start: @bal-color-white;
-@bal-color-shadow-focus-end: @bal-color-purple-6;
-@bal-color-shadow-focus-start: @bal-color-white;
-@bal-color-danger: @bal-color-danger-3;
-@bal-color-warning: @bal-color-warning-3;
-@bal-color-success: @bal-color-success-3;
-@bal-color-info: @bal-color-info-3;
-@bal-color-red: @bal-color-red-3;
-@bal-color-yellow: @bal-color-yellow-3;
-@bal-color-green: @bal-color-green-3;
-@bal-color-purple: @bal-color-purple-3;
-@bal-color-light-blue: @bal-color-light-blue-1;
-@bal-color-grey: @bal-color-grey-3;
-@bal-color-primary: @bal-color-primary-5;
-@bal-color-border-inverted-primary-pressed: @bal-color-light-blue-4;
-@bal-color-border-inverted-primary-hovered: @bal-color-light-blue-2;
-@bal-color-border-inverted-primary: @bal-color-primary-4;
-@bal-color-border-inverted-disabled: @bal-color-primary-3; // Disabled.
-@bal-color-border-inverted: @bal-color-white; // Default color on dark backgrounds.
-@bal-color-border-yellow-pressed: @bal-color-yellow-6;
-@bal-color-border-yellow-hovered: @bal-color-yellow-5;
-@bal-color-border-red-pressed: @bal-color-red-6;
-@bal-color-border-red-hovered: @bal-color-red-5;
-@bal-color-border-purple-pressed: @bal-color-purple-6;
-@bal-color-border-purple-hovered: @bal-color-purple-5;
-@bal-color-border-green-pressed: @bal-color-green-6;
-@bal-color-border-green-hovered: @bal-color-green-5;
-@bal-color-border-danger-pressed: @bal-color-danger-6;
-@bal-color-border-danger-hovered: @bal-color-danger-5;
-@bal-color-border-warning-pressed: @bal-color-warning-6;
-@bal-color-border-warning-hovered: @bal-color-warning-5;
-@bal-color-border-success-pressed: @bal-color-success-6;
-@bal-color-border-success-hovered: @bal-color-success-5;
-@bal-color-border-primary-pressed: @bal-color-primary-6;
-@bal-color-border-primary-hovered: @bal-color-light-blue-5;
-@bal-color-border-info-pressed: @bal-color-info-6;
-@bal-color-border-info-hovered: @bal-color-info-5;
-@bal-color-border-danger: @bal-color-danger-4; // Use for invalid state.
-@bal-color-border-warning: @bal-color-warning-5; // Use for warning/hint state.
-@bal-color-border-success: @bal-color-success-4; // Use for valid state.
-@bal-color-border-info: @bal-color-info-4;
-@bal-color-border-white: @bal-color-white; // Default color on dark backgrounds.
-@bal-color-border-grey-dark: @bal-color-grey-4; // Use for disabled state.
-@bal-color-border-grey: @bal-color-grey-3; // Default border color
-@bal-color-border-grey-light: @bal-color-grey-2; // Default input color or can be use for a divider
-@bal-color-border-primary-light: @bal-color-primary-3; // Disabled or secondary color on dark backgrounds
-@bal-color-border-primary: @bal-color-primary-5; // Use for focused or selected state.
-@bal-color-border: @bal-color-grey-3; // Default border color
-@bal-color-background-danger: @bal-color-danger-3;
-@bal-color-background-warning: @bal-color-warning-3;
-@bal-color-background-success: @bal-color-success-3;
-@bal-color-background-info: @bal-color-info-3;
-@bal-color-background-disabled: @bal-color-grey-3;
-@bal-color-background-grey: @bal-color-grey-3;
-@bal-color-background-grey-light: @bal-color-grey-2;
-@bal-color-background-white: @bal-color-white;
-@bal-color-background-red: @bal-color-red-3; // Use this background for call to action sections
-@bal-color-background-red-light: @bal-color-red-1; // Default brand background color to use
-@bal-color-background-yellow: @bal-color-yellow-3; // Use this background for call to action sections
-@bal-color-background-yellow-light: @bal-color-yellow-1; // Default brand background color to use
-@bal-color-background-purple: @bal-color-purple-3; // Use this background for call to action sections
-@bal-color-background-purple-light: @bal-color-purple-1; // Default brand background color to use
-@bal-color-background-green: @bal-color-green-3; // Use this background for call to action sections
-@bal-color-background-green-light: @bal-color-green-1; // Default brand background color to use
-@bal-color-background-primary: @bal-color-primary-5; // Blue is our accent color and it is present on every touchpoint. Our logo, text, buttons and links are blue.