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

package/dist/tokens.scss

@@ -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.

package/dist/types/tokens.d.ts

@@ -1,350 +0,0 @@
-/**
- * Do not edit directly
- * Generated on Mon, 18 May 2026 09:23:43 GMT
- */
-
-/** Blue is our accent color and it is present on every touchpoint. Our logo, text, buttons and links are blue. */
-export const balColorBackgroundPrimary : string;
-/** Default brand background color to use */
-export const balColorBackgroundGreenLight : string;
-/** Use this background for call to action sections */
-export const balColorBackgroundGreen : string;
-/** Default brand background color to use */
-export const balColorBackgroundPurpleLight : string;
-/** Use this background for call to action sections */
-export const balColorBackgroundPurple : string;
-/** Default brand background color to use */
-export const balColorBackgroundYellowLight : string;
-/** Use this background for call to action sections */
-export const balColorBackgroundYellow : string;
-/** Default brand background color to use */
-export const balColorBackgroundRedLight : string;
-/** Use this background for call to action sections */
-export const balColorBackgroundRed : string;
-export const balColorBackgroundWhite : string;
-export const balColorBackgroundGreyLight : string;
-export const balColorBackgroundGrey : string;
-export const balColorBackgroundDisabled : string;
-export const balColorBackgroundInfo : string;
-export const balColorBackgroundSuccess : string;
-export const balColorBackgroundWarning : string;
-export const balColorBackgroundDanger : string;
-/** Default border color */
-export const balColorBorder : string;
-/** Use for focused or selected state. */
-export const balColorBorderPrimary : string;
-/** Disabled or secondary color on dark backgrounds */
-export const balColorBorderPrimaryLight : string;
-/** Default input color or can be use for a divider */
-export const balColorBorderGreyLight : string;
-/** Default border color */
-export const balColorBorderGrey : string;
-/** Use for disabled state. */
-export const balColorBorderGreyDark : string;
-/** Default color on dark backgrounds. */
-export const balColorBorderWhite : string;
-export const balColorBorderInfo : string;
-/** Use for valid state. */
-export const balColorBorderSuccess : string;
-/** Use for warning/hint state. */
-export const balColorBorderWarning : string;
-/** Use for invalid state. */
-export const balColorBorderDanger : string;
-export const balColorBorderInfoHovered : string;
-export const balColorBorderInfoPressed : string;
-export const balColorBorderPrimaryHovered : string;
-export const balColorBorderPrimaryPressed : string;
-export const balColorBorderSuccessHovered : string;
-export const balColorBorderSuccessPressed : string;
-export const balColorBorderWarningHovered : string;
-export const balColorBorderWarningPressed : string;
-export const balColorBorderDangerHovered : string;
-export const balColorBorderDangerPressed : string;
-export const balColorBorderGreenHovered : string;
-export const balColorBorderGreenPressed : string;
-export const balColorBorderPurpleHovered : string;
-export const balColorBorderPurplePressed : string;
-export const balColorBorderRedHovered : string;
-export const balColorBorderRedPressed : string;
-export const balColorBorderYellowHovered : string;
-export const balColorBorderYellowPressed : string;
-/** Default color on dark backgrounds. */
-export const balColorBorderInverted : string;
-/** Disabled. */
-export const balColorBorderInvertedDisabled : string;
-export const balColorBorderInvertedPrimary : string;
-export const balColorBorderInvertedPrimaryHovered : string;
-export const balColorBorderInvertedPrimaryPressed : string;
-export const balColorPrimary : string;
-export const balColorGrey : string;
-export const balColorLightBlue : string;
-export const balColorPurple : string;
-export const balColorGreen : string;
-export const balColorYellow : string;
-export const balColorRed : string;
-export const balColorInfo : string;
-export const balColorSuccess : string;
-export const balColorWarning : string;
-export const balColorDanger : string;
-export const balColorPrimary1 : string;
-export const balColorPrimary2 : string;
-export const balColorPrimary3 : string;
-export const balColorPrimary4 : string;
-export const balColorPrimary5 : string;
-export const balColorPrimary6 : string;
-export const balColorWhite : string;
-export const balColorGreen1 : string;
-export const balColorGreen2 : string;
-export const balColorGreen3 : string;
-export const balColorGreen4 : string;
-export const balColorGreen5 : string;
-export const balColorGreen6 : string;
-export const balColorPurple1 : string;
-export const balColorPurple2 : string;
-export const balColorPurple3 : string;
-export const balColorPurple4 : string;
-export const balColorPurple5 : string;
-export const balColorPurple6 : string;
-export const balColorYellow1 : string;
-export const balColorYellow2 : string;
-export const balColorYellow3 : string;
-export const balColorYellow4 : string;
-export const balColorYellow5 : string;
-export const balColorYellow6 : string;
-export const balColorRed1 : string;
-export const balColorRed2 : string;
-export const balColorRed3 : string;
-export const balColorRed4 : string;
-export const balColorRed5 : string;
-export const balColorRed6 : string;
-export const balColorGrey1 : string;
-export const balColorGrey2 : string;
-export const balColorGrey3 : string;
-export const balColorGrey4 : string;
-export const balColorGrey5 : string;
-export const balColorGrey6 : string;
-export const balColorBlack : string;
-export const balColorLightBlue1 : string;
-export const balColorLightBlue2 : string;
-export const balColorLightBlue3 : string;
-export const balColorLightBlue4 : string;
-export const balColorLightBlue5 : string;
-export const balColorLightBlue6 : string;
-export const balColorInfo1 : string;
-export const balColorInfo2 : string;
-export const balColorInfo3 : string;
-export const balColorInfo4 : string;
-export const balColorInfo5 : string;
-export const balColorInfo6 : string;
-export const balColorSuccess1 : string;
-export const balColorSuccess2 : string;
-export const balColorSuccess3 : string;
-export const balColorSuccess4 : string;
-export const balColorSuccess5 : string;
-export const balColorSuccess6 : string;
-export const balColorWarning1 : string;
-export const balColorWarning2 : string;
-export const balColorWarning3 : string;
-export const balColorWarning4 : string;
-export const balColorWarning5 : string;
-export const balColorWarning6 : string;
-export const balColorDanger1 : string;
-export const balColorDanger2 : string;
-export const balColorDanger3 : string;
-export const balColorDanger4 : string;
-export const balColorDanger5 : string;
-export const balColorDanger6 : string;
-export const balColorShadowFocusStart : string;
-export const balColorShadowFocusEnd : string;
-export const balColorShadowFocusInvertedStart : string;
-export const balColorShadowFocusInvertedEnd : string;
-/** Main font color for all headings and paragraphs. */
-export const balColorTextPrimary : string;
-/** Secondary font color for help messages. */
-export const balColorTextPrimaryLight : string;
-/** Main font color for all headings and paragraphs on a dark background. */
-export const balColorTextWhite : string;
-/** Font color for disabled texts */
-export const balColorTextGreyLight : string;
-/** Font color for placeholders */
-export const balColorTextGrey : string;
-/** Font color for disabled elements */
-export const balColorTextGreyDark : string;
-export const balColorTextInfo : string;
-export const balColorTextWarning : string;
-export const balColorTextSuccess : string;
-export const balColorTextDanger : string;
-export const balColorTextBlack : string;
-export const balColorTextPrimaryHovered : string;
-export const balColorTextPrimaryPressed : string;
-export const balColorTextDangerHovered : string;
-export const balColorTextDangerPressed : string;
-export const balColorTextInverted : string;
-export const balColorTextInvertedDisabled : string;
-export const balColorTextInvertedHovered : string;
-export const balColorTextInvertedPressed : string;
-/** The small border size is crafted for subtle, refined delineation. */
-export const balBorderWidthSmall : string;
-/** The normal border size strikes a harmonious balance, offering a versatile choice for defining boundaries within your design. */
-export const balBorderWidthNormal : string;
-/** The large border size makes a bold statement, creating strong visual contrasts and emphasizing key elements within your interface. */
-export const balBorderWidthLarge : string;
-/** Tailored for tablet devices, this breakpoint ensures a seamless and optimized user experience on medium-sized screens. */
-export const balBreakpointTablet : string;
-/** Optimized for desktop screens, this breakpoint provides a spacious canvas for your design, allowing for more intricate layouts and detailed content presentation. */
-export const balBreakpointDesktop : string;
-/** Designed for high-definition displays, this breakpoint elevates your interface to a level of visual richness and clarity. */
-export const balBreakpointHighDefinition : string;
-/** Tailored for widescreen monitors, this breakpoint offers a panoramic view that accommodates expansive content layouts. */
-export const balBreakpointWidescreen : string;
-/** Crafted for Full HD displays, this breakpoint strikes a balance between detail and performance. */
-export const balBreakpointFullhd : string;
-/** Deprecated container size for the website */
-export const balContainerSizeDetailPage : string;
-/** Tailored container size designed for form wizard applications or pages. */
-export const balContainerSizeCompact : string;
-/** The default container size is versatile and suitable for various applications and website pages. */
-export const balContainerSizeNormal : string;
-/** The container for fullscreen application with a large table for example. */
-export const balContainerSizeFluid : string;
-/** Default space of a container to left and right side. */
-export const balContainerSpace : string;
-/** Default space on tablets of a container to left and right side. */
-export const balContainerSpaceTablet : string;
-/** Default space on desktops of a container to left and right side. */
-export const balContainerSpaceDesktop : string;
-export const balColumnGap : string;
-/** The normal radius token strikes a balance between softness and structure. */
-export const balRadiusNormal : string;
-/** The large radius token makes a bold visual statement by significantly rounding the corners of elements. */
-export const balRadiusLarge : string;
-/** The rounded radius token embraces a curvier design language, introducing a high degree of softness and fluidity to your elements. */
-export const balRadiusRounded : string;
-/** Minimum space between two elements */
-export const balSpaceXxSmall : string;
-export const balSpaceXxSmallTablet : string;
-export const balSpaceXxSmallDesktop : string;
-/** Space between text and icons or headings and content or clickable elements */
-export const balSpaceXSmall : string;
-export const balSpaceXSmallTablet : string;
-export const balSpaceXSmallDesktop : string;
-export const balSpaceSmall : string;
-export const balSpaceSmallTablet : string;
-export const balSpaceSmallDesktop : string;
-/** Space between large headings and content. */
-export const balSpaceNormal : string;
-export const balSpaceNormalTablet : string;
-export const balSpaceNormalDesktop : string;
-/** Inner padding of cards */
-export const balSpaceMedium : string;
-export const balSpaceMediumTablet : string;
-export const balSpaceMediumDesktop : string;
-/** Space between cards */
-export const balSpaceLarge : string;
-export const balSpaceLargeTablet : string;
-export const balSpaceLargeDesktop : string;
-/** Space between heading and card */
-export const balSpaceXLarge : string;
-export const balSpaceXLargeTablet : string;
-export const balSpaceXLargeDesktop : string;
-export const balSpaceXxLarge : string;
-export const balSpaceXxLargeTablet : string;
-export const balSpaceXxLargeDesktop : string;
-/** Footer bottom padding */
-export const balSpaceXxxLarge : string;
-export const balSpaceXxxLargeTablet : string;
-export const balSpaceXxxLargeDesktop : string;
-/** Space between sections */
-export const balSpaceXxxxLarge : string;
-export const balSpaceXxxxLargeTablet : string;
-export const balSpaceXxxxLargeDesktop : string;
-/** Bold is used for headings, links and buttons. */
-export const balFontWeightBold : string;
-/** Default width of paragraphs. Only available with the font BaloiseCreateText. */
-export const balFontWeightRegular : string;
-/** Can be used for secondary headings. Only available with the font BaloiseCreateHeadline. */
-export const balFontWeightLight : string;
-/** Should only be used for helper texts or validation messages of a form control. */
-export const balTextSizeXSmall : string;
-export const balTextSizeXSmallTablet : string;
-export const balTextSizeXSmallDesktop : string;
-/** Should only be used for label texts. */
-export const balTextSizeSmall : string;
-export const balTextSizeSmallTablet : string;
-export const balTextSizeSmallDesktop : string;
-/** Should only be used for label texts. */
-export const balTextSizeNormal : string;
-export const balTextSizeNormalTablet : string;
-export const balTextSizeNormalDesktop : string;
-/** Should only be used in a 2/3 grid column to improve readability. */
-export const balTextSizeMedium : string;
-export const balTextSizeMediumTablet : string;
-export const balTextSizeMediumDesktop : string;
-/** Should only be used for standard card titles and headings of level 4 or for lead text/paragraphs after a heading. */
-export const balTextSizeLarge : string;
-export const balTextSizeLargeTablet : string;
-export const balTextSizeLargeDesktop : string;
-/** Should only be used for form titles, quick link navigation's and headings of level 3. */
-export const balTextSizeXLarge : string;
-export const balTextSizeXLargeTablet : string;
-export const balTextSizeXLargeDesktop : string;
-/** Should only be used for content titles and headings of level 2. */
-export const balTextSizeXxLarge : string;
-export const balTextSizeXxLargeTablet : string;
-export const balTextSizeXxLargeDesktop : string;
-/** Should only be used for stage titles and headings of level 1. */
-export const balTextSizeXxxLarge : string;
-export const balTextSizeXxxLargeTablet : string;
-export const balTextSizeXxxLargeDesktop : string;
-/** Should only be uses to illustrate large stage areas. */
-export const balTextSizeXxxxLarge : string;
-export const balTextSizeXxxxLargeTablet : string;
-export const balTextSizeXxxxLargeDesktop : string;
-/** Should only be uses to illustrate large stage areas. */
-export const balTextSizeXxxxxLarge : string;
-export const balTextSizeXxxxxLargeTablet : string;
-export const balTextSizeXxxxxLargeDesktop : string;
-/** Standard line-height for the headings. */
-export const balTextLineHeightTitle : string;
-/** Default line height for all text elements. */
-export const balTextLineHeightText : string;
-/** Deep z-index is used to stack something behind everything else. */
-export const balZIndexDeep : string;
-/** The default z-index for components and elements inside components. */
-export const balZIndex : string;
-/** Default z-index for masked interface elements. */
-export const balZIndexMasked : string;
-/** Default z-index for masking interface elements. */
-export const balZIndexMask : string;
-/** Default z-index for sticky interface elements. */
-export const balZIndexSticky : string;
-/** Default z-index for navigation. */
-export const balZIndexNavigation : string;
-/** Default z-index for popups that stacks on top of all other elements. */
-export const balZIndexPopup : string;
-/** Default z-index for modals that stacks on top of overlays and other elements, but still allows popups to be visible. */
-export const balZIndexModal : string;
-/** Default z-index for toast and snackbar messages. */
-export const balZIndexToast : string;
-/** Default z-index for tooltips. */
-export const balZIndexTooltip : string;
-export const balAnimationTransitionDuration : string;
-export const balAnimationTransitionEasing : string;
-export const balShadowSmall : string;
-/** Default shadow size to elevate an element. */
-export const balShadowNormal : string;
-/** Large shadow are used for hover effects. */
-export const balShadowLarge : string;
-/** Shadow effect for a header bar */
-export const balShadowHeader : string;
-export const balFontFamilyTitle : string;
-export const balFontFamilyText : string;
-export const balOpacity0 : string;
-export const balOpacity30 : string;
-export const balOpacity40 : string;
-export const balOpacity50 : string;
-export const balOpacity60 : string;
-export const balOpacity80 : string;
-export const balOpacity100 : string;
-/** Increases readability when used on a image background. */
-export const balTextShadowNormal : string;