+
Heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,
diff --git a/packages/components/src/components/bal-popover/bal-popover.sass b/packages/components/src/components/bal-popover/bal-popover.sass
index 1b4da865d..3fadc8464 100644
--- a/packages/components/src/components/bal-popover/bal-popover.sass
+++ b/packages/components/src/components/bal-popover/bal-popover.sass
@@ -35,7 +35,7 @@
+element(content)
display: none
- z-index: 20
+ z-index: 25
box-shadow: var(--bal-shadow)
background: var(--bal-color-white)
min-width: 16.25rem
@@ -74,10 +74,12 @@
+modifier(color-grey)
background: var(--bal-color-grey-2)
+element(inner)
- max-height: calc(100vh - 8rem)
+ max-height: calc(100vh - 4.5rem)
overflow: auto
+tablet
padding: 1.5rem
+ +desktop
+ max-height: calc(100vh - 8rem)
+modifier(spaceless)
.bal-popover__content__inner
padding: 0
diff --git a/packages/components/src/components/bal-stage/bal-stage.sass b/packages/components/src/components/bal-stage/bal-stage.sass
index b01d0d2a4..56d918750 100644
--- a/packages/components/src/components/bal-stage/bal-stage.sass
+++ b/packages/components/src/components/bal-stage/bal-stage.sass
@@ -55,11 +55,6 @@
text-decoration: underline
&:active
text-decoration: underline
- &:focus-visible
- outline: none
- border: 2px solid transparent
- border-radius: 5px
- outline: 3px solid var(--bal-color-purple-dark)
+modifier(is-inverted)
+block(stage-body)
diff --git a/packages/components/src/components/bal-stage/bal-stage.tsx b/packages/components/src/components/bal-stage/bal-stage.tsx
index 6aa3f1e90..a3738cc1a 100644
--- a/packages/components/src/components/bal-stage/bal-stage.tsx
+++ b/packages/components/src/components/bal-stage/bal-stage.tsx
@@ -9,7 +9,7 @@ export class Stage implements ComponentInterface {
/**
* Defines content width of the stage
*/
- @Prop() containerSize: Props.BalStageContainer = 'wide'
+ @Prop() containerSize: Props.BalStageContainer = ''
/**
* Defines size of the stage
@@ -64,17 +64,21 @@ export class Stage implements ComponentInterface {
case 'is-blog-page':
case 'blog-page':
return '920px'
- case 'is-wide':
- case 'wide':
- return '1400px'
case 'is-fluid':
case 'fluid':
- default:
return '100vw'
+ case 'is-wide':
+ case 'wide':
+ default:
+ return '1400px'
}
}
private get containerClass(): string {
+ if (this.containerSize.includes('wide')) {
+ return ''
+ }
+
if (this.containerSize.startsWith('is-')) {
return this.containerSize
}
@@ -99,7 +103,8 @@ export class Stage implements ComponentInterface {
class={{
...element.class(),
...element.modifier('is-inverted').class(this.inverted),
- [`container ${this.containerClass}`]: this.containerSize !== '',
+ container: true,
+ [`${this.containerClass}`]: this.containerSize !== '',
}}
>
diff --git a/packages/components/src/components/bal-tabs/bal-tabs.sass b/packages/components/src/components/bal-tabs/bal-tabs.sass
index f0f6c870d..ac150a650 100644
--- a/packages/components/src/components/bal-tabs/bal-tabs.sass
+++ b/packages/components/src/components/bal-tabs/bal-tabs.sass
@@ -38,8 +38,6 @@
+element(tabs)
+overflow-touch
+unselectable
- overflow: hidden
- overflow-x: auto
position: relative
align-items: stretch
display: flex
@@ -52,9 +50,13 @@
flex-grow: 1
flex-shrink: 0
justify-content: flex-start
- +modifier(float-right)
+ +modifier(spaceless)
ul
- justify-content: flex-end
+ margin-left: -0.75rem
+ +modifier(float-right)
+ +high-definition
+ ul
+ justify-content: flex-end
+modifier(vertical)
ul
flex-direction: column
@@ -108,7 +110,7 @@
align-items: center
font-family: var(--bal-font-family-title)
font-weight: 700
- gap: .25rem
+ gap: .5rem
padding: 1rem .75rem
flex-grow: 1
flex-basis: 0
@@ -116,9 +118,19 @@
outline: none !important
border-radius: var(--bal-radius-small)
z-index: 1
+ -webkit-user-select: none
+ -khtml-user-select: none
+ -moz-user-select: none
+ -o-user-select: none
+ user-select: none
+ -webkit-user-drag: none
+ -khtml-user-drag: none
+ -moz-user-drag: none
+ -o-user-drag: none
+ user-drag: none
&:focus-visible
&:not(:active)
- @extend %focus-shadow
+ @extend %focus-inset-shadow
span
display: flex
position: relative
@@ -147,7 +159,7 @@
+fillSvg(var(--bal-color-info-3))
&:focus-visible
&:not(:active)
- @extend %focus-inverted-shadow
+ @extend %focus-inverted-inset-shadow
+modifier(context-navbar)
+touch
color: var(--bal-color-primary)
@@ -197,30 +209,20 @@
+desktop
height: 80px
+modifier(context-navigation)
- height: 64px
flex-direction: row-reverse
+ height: 3rem
+ +high-definition
+ height: 4rem
+widescreen
- height: 80px
+ height: 5rem
+modifier(context-meta)
- height: 48px
+ height: 3rem
font-size: var(--bal-size-small)
font-family: var(--bal-font-family-text)
font-weight: var(--bal-weight-regular)
&.bal-tabs__tabs__item__button--active
font-weight: var(--bal-weight-bold)
- .bal-tabs__tabs__item--spaceless:first-child:not(.bal-tabs__tabs__item__button--vertical-on-tablet):not(.bal-tabs__tabs__item__button--vertical-on-mobile)
- & > .bal-tabs__tabs__item__button--context-tabs,
- & > .bal-tabs__tabs__item__button--context-meta,
- & > .bal-tabs__tabs__item__button--context-navigation
- padding-left: 0
-
- .bal-tabs__tabs__item--spaceless:last-child:not(.bal-tabs__tabs__item__button--vertical-on-tablet):not(.bal-tabs__tabs__item__button--vertical-on-mobile)
- & > .bal-tabs__tabs__item__button--context-tabs,
- & > .bal-tabs__tabs__item__button--context-meta,
- & > .bal-tabs__tabs__item__button--context-navigation
- padding-right: 0
-
+element(border)
position: absolute
background: var(--bal-color-border-normal)
diff --git a/packages/components/src/components/bal-tabs/bal-tabs.tsx b/packages/components/src/components/bal-tabs/bal-tabs.tsx
index bc303066f..a64dd5de1 100644
--- a/packages/components/src/components/bal-tabs/bal-tabs.tsx
+++ b/packages/components/src/components/bal-tabs/bal-tabs.tsx
@@ -38,7 +38,8 @@ export class Tabs {
@Prop() iconPosition: Props.BalTabsIconPosition = 'horizontal'
/**
- * Defines the layout of the tabs.
+ * Defines the layout of the tabs. Right only works from the breakpoint
+ * high-definition and beyond.
*/
@Prop() float: Props.BalTabsFloat = 'left'
@@ -207,9 +208,6 @@ export class Tabs {
if (tab.value !== this.value) {
this.balChange.emit(tab.value)
await this.select(tab)
- } else if (this.interface === 'navigation' && tab.value === this.value) {
- this.value = ''
- this.balChange.emit(this.value)
}
}
}
diff --git a/packages/components/src/components/bal-tabs/components/tabs.tsx b/packages/components/src/components/bal-tabs/components/tabs.tsx
index 1b8e4a98a..7ff5fe88f 100644
--- a/packages/components/src/components/bal-tabs/components/tabs.tsx
+++ b/packages/components/src/components/bal-tabs/components/tabs.tsx
@@ -50,6 +50,7 @@ export const TabList: FunctionalComponent = ({
...tabsEl.class(),
...tabsEl.modifier(`float-${float}`).class(),
...tabsEl.modifier('vertical').class(vertical === true),
+ ...tabsEl.modifier('spaceless').class(spaceless && !vertical),
...tabsEl.modifier('vertical-on-mobile').class(vertical === 'mobile'),
...tabsEl.modifier('vertical-on-tablet').class(vertical === 'tablet'),
}}
diff --git a/packages/components/src/stories/design/05-breakpoints.stories.mdx b/packages/components/src/stories/design/05-breakpoints.stories.mdx
index 8f5b69cd8..c9da04f99 100644
--- a/packages/components/src/stories/design/05-breakpoints.stories.mdx
+++ b/packages/components/src/stories/design/05-breakpoints.stories.mdx
@@ -19,6 +19,7 @@ import { isPlatform } from '@baloise/design-system-next-components'
isPlatform(window, 'mobile')
isPlatform(window, 'tablet')
isPlatform(window, 'desktop')
+isPlatform(window, 'high-definition')
isPlatform(window, 'widescreen')
isPlatform(window, 'fullhd')
```
diff --git a/packages/components/src/stories/design/css.stories.ts b/packages/components/src/stories/design/css.stories.ts
index 42a8d401f..cb025ebef 100644
--- a/packages/components/src/stories/design/css.stories.ts
+++ b/packages/components/src/stories/design/css.stories.ts
@@ -38,11 +38,6 @@ export const Container = args => ({
container blog-page
container fluid
diff --git a/packages/components/src/stories/migration/10-migration-from-10x-to-11x.stories.mdx b/packages/components/src/stories/migration/10-migration-from-10x-to-11x.stories.mdx
index f9a472be0..77ed887d9 100644
--- a/packages/components/src/stories/migration/10-migration-from-10x-to-11x.stories.mdx
+++ b/packages/components/src/stories/migration/10-migration-from-10x-to-11x.stories.mdx
@@ -48,4 +48,10 @@ to the defineConfig function.
},
```
+## New breakpoint high-definition
+
+The high-definition breakpoint gets introduced in the new version. It starts at 1280px and is added between desktop and widescreen.
+
+The only breaking change is that the range of the sass mixin desktop-only is changed.
+
diff --git a/packages/components/src/styles/global.fonts.sass b/packages/components/src/styles/global.fonts.sass
new file mode 100644
index 000000000..62f9053d1
--- /dev/null
+++ b/packages/components/src/styles/global.fonts.sass
@@ -0,0 +1 @@
+@import '~@baloise/design-system-next-css/scss/baloise-design-system.fonts.sass'
diff --git a/packages/components/src/styles/global.sass b/packages/components/src/styles/global.sass
index 99e1550a7..be944cfad 100644
--- a/packages/components/src/styles/global.sass
+++ b/packages/components/src/styles/global.sass
@@ -1,6 +1,7 @@
@charset "utf-8"
@import 'global.utilities'
+@import 'global.fonts'
@import 'global.base'
@import 'global.core'
@import 'global.helpers'
diff --git a/packages/components/src/utils/platform.ts b/packages/components/src/utils/platform.ts
index ba3800558..4add48a97 100644
--- a/packages/components/src/utils/platform.ts
+++ b/packages/components/src/utils/platform.ts
@@ -10,6 +10,7 @@ export interface PlatformSrcSet {
tablet?: string
touch?: string
desktop?: string
+ highDefinition?: string
widescreen?: string
fullhd?: string
}
@@ -55,6 +56,11 @@ const isTouch = (win: Window) => isMobile(win) || isTablet(win)
const isDesktop = (win: Window) => !isTouch(win)
+const isHighDefinition = (win: Window) => {
+ const width = win.innerWidth
+ return width > 1280 && width < 1440
+}
+
const isWideScreen = (win: Window) => {
const width = win.innerWidth
return width > 1439 && width < 1920
@@ -70,6 +76,7 @@ const PLATFORMS_MAP = {
tablet: isTablet,
touch: isTouch,
desktop: isDesktop,
+ highDefinition: isHighDefinition,
widescreen: isWideScreen,
fullhd: isFullHD,
}
diff --git a/packages/components/src/utils/toggle-scrolling-body.ts b/packages/components/src/utils/toggle-scrolling-body.ts
index fd02e4076..9301f467e 100644
--- a/packages/components/src/utils/toggle-scrolling-body.ts
+++ b/packages/components/src/utils/toggle-scrolling-body.ts
@@ -3,11 +3,37 @@ const getBodyTopOffset = () => {
return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0)
}
+const getBody = () => document.body
+const getHtml = () => document.firstChild?.nextSibling as HTMLElement
+
+const getHtmlStyles = () => getComputedStyle(getHtml())
+
+const hasScrollSmoothOnHtml = () => getHtmlStyles().scrollBehavior === 'smooth'
+
+export const disableSmoothScrolling = () => {
+ const body = getBody()
+
+ body.style.scrollBehavior = 'auto'
+ if (hasScrollSmoothOnHtml()) {
+ const html = getHtml()
+ html.style.scrollBehavior = 'auto'
+ }
+}
+
+export const enableSmoothScrolling = () => {
+ const body = getBody()
+
+ body.style.scrollBehavior = 'smooth'
+ if (hasScrollSmoothOnHtml()) {
+ const html = getHtml()
+ html.style.scrollBehavior = 'smooth'
+ }
+}
+
export const BodyScrollBlocker = () => {
- const body = document.body
- const html = document.firstChild?.nextSibling as HTMLElement
- const htmlStyle = getComputedStyle(html)
- const hasScrollSmoothOnHtml = htmlStyle.scrollBehavior === 'smooth'
+ const body = getBody()
+ const html = getHtml()
+ let timer: NodeJS.Timer | undefined = undefined
let isBlocked = false
let bodyTopOffset = getBodyTopOffset()
@@ -15,10 +41,11 @@ export const BodyScrollBlocker = () => {
return {
isBlocked: () => isBlocked,
block: () => {
+ clearTimeout(timer)
isBlocked = true
bodyTopOffset = getBodyTopOffset()
body.style.scrollBehavior = 'auto'
- if (hasScrollSmoothOnHtml) {
+ if (hasScrollSmoothOnHtml()) {
html.style.scrollBehavior = 'auto'
}
body.style.position = 'fixed'
@@ -26,14 +53,15 @@ export const BodyScrollBlocker = () => {
body.style.top = `-${bodyTopOffset}px`
},
allow: () => {
+ clearTimeout(timer)
body.style.position = 'static'
body.style.width = 'inherit'
body.style.top = `inherit`
document.documentElement.scrollTop = bodyTopOffset
- setTimeout(() => {
+ timer = setTimeout(() => {
isBlocked = false
body.style.scrollBehavior = 'smooth'
- if (hasScrollSmoothOnHtml) {
+ if (hasScrollSmoothOnHtml()) {
html.style.scrollBehavior = 'smooth'
}
}, 0)
diff --git a/packages/css/scss/baloise-design-system.base.sass b/packages/css/scss/baloise-design-system.base.sass
index f6561acb5..601366280 100644
--- a/packages/css/scss/baloise-design-system.base.sass
+++ b/packages/css/scss/baloise-design-system.base.sass
@@ -3,6 +3,5 @@
// ----------------------------------------------
// BASE
// ----------------------------------------------
-@import '~@baloise/design-system-next-fonts/scss/fonts.sass'
@import '~@baloise/design-system-next-tokens/dist/tokens.css.sass'
@import 'base/_all'
diff --git a/packages/css/scss/baloise-design-system.fonts.sass b/packages/css/scss/baloise-design-system.fonts.sass
new file mode 100644
index 000000000..9625fd3c8
--- /dev/null
+++ b/packages/css/scss/baloise-design-system.fonts.sass
@@ -0,0 +1,6 @@
+@charset "utf-8"
+
+// ----------------------------------------------
+// CUSTOM FONTS
+// ----------------------------------------------
+@import '~@baloise/design-system-next-fonts/scss/fonts.sass'
diff --git a/packages/css/scss/baloise-design-system.sass b/packages/css/scss/baloise-design-system.sass
index 20cca0c90..8f429b00d 100644
--- a/packages/css/scss/baloise-design-system.sass
+++ b/packages/css/scss/baloise-design-system.sass
@@ -1,6 +1,7 @@
@charset "utf-8"
@import 'baloise-design-system.utilities'
+@import 'baloise-design-system.fonts'
@import 'baloise-design-system.base'
@import 'baloise-design-system.layout'
@import 'baloise-design-system.helpers'
diff --git a/packages/css/scss/base/_all.sass b/packages/css/scss/base/_all.sass
index 47ea5a2a4..359570271 100644
--- a/packages/css/scss/base/_all.sass
+++ b/packages/css/scss/base/_all.sass
@@ -13,6 +13,7 @@ html
text-rendering: $body-rendering
text-size-adjust: 100%
-webkit-tap-highlight-color: transparent
+ -webkit-overflow-scrolling: auto
overflow: scroll
overflow-x: hidden
overflow-y: overlay
@@ -45,6 +46,7 @@ body
font-size: $body-font-size
font-weight: $body-weight
line-height: $body-line-height
+ -webkit-overflow-scrolling: auto
// Inline
diff --git a/packages/css/scss/form/button.sass b/packages/css/scss/form/button.sass
index 4ff97448c..eb2cf7509 100644
--- a/packages/css/scss/form/button.sass
+++ b/packages/css/scss/form/button.sass
@@ -30,6 +30,7 @@
appearance: none
text-decoration: none
user-select: none
+ touch-action: manipulation
span,
strong
color: inherit
@@ -329,7 +330,7 @@
&:focus-visible,
&.is-focused
&:not(:active)
- @extend %focus-shadow
+ @extend %focus-inverted-shadow
&:active,
&.is-active
background: var(--bal-color-white)
diff --git a/packages/css/scss/form/tools.sass b/packages/css/scss/form/tools.sass
index 226712ea6..834b888e3 100644
--- a/packages/css/scss/form/tools.sass
+++ b/packages/css/scss/form/tools.sass
@@ -97,7 +97,6 @@
flex-shrink: 0
&:not(:last-child)
margin-bottom: 0
- +ltr-property("margin", 0.75rem)
&.is-expanded
flex-grow: 1
flex-shrink: 1
@@ -167,14 +166,19 @@
top: 0.875rem
z-index: 4
-.field.is-grouped .control:not(:last-child)
- margin-right: 8px
+.field.is-grouped
+ gap: calc(var(--bal-column-gap) / 2)
.field.has-direction-row.is-grouped
flex-direction: row
.field.has-direction-column.is-grouped
flex-direction: column
+ width: fit-content
+ .button
+ width: 100%
+ .bal-button
+ margin: 0 !important
+mobile()
.field.has-direction-auto.is-grouped
diff --git a/packages/css/scss/helpers/grid.helper.sass b/packages/css/scss/helpers/grid.helper.sass
index dc7a5218e..d2462ee79 100644
--- a/packages/css/scss/helpers/grid.helper.sass
+++ b/packages/css/scss/helpers/grid.helper.sass
@@ -505,6 +505,12 @@
+desktop-only
&.is-#{$i}-desktop-only
--columnGap: #{$i * 0.25rem}
+ +high-definition
+ &.is-#{$i}-high-definition
+ --columnGap: #{$i * 0.25rem}
+ +high-definition-only
+ &.is-#{$i}-high-definition-only
+ --columnGap: #{$i * 0.25rem}
+widescreen
&.is-#{$i}-widescreen
--columnGap: #{$i * 0.25rem}
diff --git a/packages/css/scss/helpers/visibility.helper.sass b/packages/css/scss/helpers/visibility.helper.sass
index 9c388b6d8..34936aa2a 100644
--- a/packages/css/scss/helpers/visibility.helper.sass
+++ b/packages/css/scss/helpers/visibility.helper.sass
@@ -21,6 +21,12 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
+desktop-only
.is-#{$display}-desktop-only
display: #{$display} !important
+ +high-definition
+ .is-#{$display}-high-definition
+ display: #{$display} !important
+ +high-definition-only
+ .is-#{$display}-high-definition-only
+ display: #{$display} !important
+widescreen
.is-#{$display}-widescreen
display: #{$display} !important
@@ -68,6 +74,14 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
.is-hidden-desktop-only
display: none !important
++high-definition
+ .is-hidden-high-definition
+ display: none !important
+
++high-definition-only
+ .is-hidden-high-definition-only
+ display: none !important
+
+widescreen
.is-hidden-widescreen
display: none !important
@@ -107,6 +121,14 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
.is-invisible-desktop-only
visibility: hidden !important
++high-definition
+ .is-invisible-high-definition
+ visibility: hidden !important
+
++high-definition-only
+ .is-invisible-high-definition-only
+ visibility: hidden !important
+
+widescreen
.is-invisible-widescreen
visibility: hidden !important
diff --git a/packages/css/scss/layout/container.sass b/packages/css/scss/layout/container.sass
index 914e5f7ad..f74ee1945 100644
--- a/packages/css/scss/layout/container.sass
+++ b/packages/css/scss/layout/container.sass
@@ -17,8 +17,6 @@
max-width: 896px !important
&.is-blog-page
max-width: 984px !important
- &.is-wide
- max-width: 1464px !important
+tablet
padding-left: 2.5rem
padding-right: 2.5rem
diff --git a/packages/css/scss/mixins/breakpoint.mixin.sass b/packages/css/scss/mixins/breakpoint.mixin.sass
index 4cebcb46d..edc06b656 100644
--- a/packages/css/scss/mixins/breakpoint.mixin.sass
+++ b/packages/css/scss/mixins/breakpoint.mixin.sass
@@ -27,7 +27,19 @@
@content
=desktop-only
- @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
+ @media screen and (min-width: $desktop) and (max-width: $high-definition - 1px)
+ @content
+
+=high-definition
+ @media screen and (min-width: $high-definition)
+ @content
+
+=high-definition-only
+ @media screen and (min-width: $high-definition) and (max-width: $widescreen - 1px)
+ @content
+
+=until-high-definition
+ @media screen and (max-width: $high-definition - 1px)
@content
=until-widescreen
diff --git a/packages/css/scss/mixins/extends.sass b/packages/css/scss/mixins/extends.sass
index 29069c42e..8f07258ad 100644
--- a/packages/css/scss/mixins/extends.sass
+++ b/packages/css/scss/mixins/extends.sass
@@ -13,6 +13,12 @@
%focus-inverted-shadow
+focus-inverted-shadow
+%focus-inset-shadow
+ +focus-inset-shadow
+
+%focus-inverted-inset-shadow
+ +focus-inverted-inset-shadow
+
%arrow
+arrow
diff --git a/packages/css/scss/mixins/general.mixin.sass b/packages/css/scss/mixins/general.mixin.sass
index 8e90d362a..7ecc83dd9 100644
--- a/packages/css/scss/mixins/general.mixin.sass
+++ b/packages/css/scss/mixins/general.mixin.sass
@@ -12,9 +12,15 @@
=focus-shadow
box-shadow: var(--bal-color-white) 0 0 0 2px, var(--bal-color-purple-dark) 0 0 0 5px !important
+=focus-inset-shadow
+ box-shadow: inset var(--bal-color-purple-dark) 0 0 0 3px, inset var(--bal-color-white) 0 0 0 5px !important
+
=focus-inverted-shadow
box-shadow: var(--bal-color-white) 0 0 0 2px, var(--bal-color-yellow) 0 0 0 5px !important
+=focus-inverted-inset-shadow
+ box-shadow: inset var(--bal-color-yellow) 0 0 0 3px, inset var(--bal-color-white) 0 0 0 5px !important
+
=placeholder
$placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
@each $placeholder in $placeholders
diff --git a/packages/tokens/src/index.ts b/packages/tokens/src/index.ts
index 505552b93..ecb7fe5d7 100644
--- a/packages/tokens/src/index.ts
+++ b/packages/tokens/src/index.ts
@@ -119,10 +119,11 @@ const tokens = {
'danger-6': { hex: '#a01100', inverted: 'white', description: descriptions.color.alert },
},
breakpoint: {
- tablet: '769px',
- desktop: '1024px',
- widescreen: '1440px',
- fullhd: '1920px',
+ 'tablet': '769px',
+ 'desktop': '1024px',
+ 'high-definition': '1280px',
+ 'widescreen': '1440px',
+ 'fullhd': '1920px',
},
radius: {
none: { value: '0' },
diff --git a/packages/tokens/src/tokens.ts b/packages/tokens/src/tokens.ts
index 763b47452..6dd3ad6f9 100644
--- a/packages/tokens/src/tokens.ts
+++ b/packages/tokens/src/tokens.ts
@@ -268,6 +268,7 @@ export const BaloiseDesignToken = {
balColorBackgroundLightInverted: '#000d6e',
balTablet: '769px',
balDesktop: '1024px',
+ balHighDefinition: '1280px',
balWidescreen: '1440px',
balFullhd: '1920px',
balColumnGap: '1rem',