...
diff --git a/packages/foundations/scss/colors/classes/_get-class.scss b/packages/foundations/scss/colors/classes/_get-class.scss
index ad7662b3687..a31163126cb 100644
--- a/packages/foundations/scss/colors/classes/_get-class.scss
+++ b/packages/foundations/scss/colors/classes/_get-class.scss
@@ -26,7 +26,7 @@
@mixin init-on-background-colors($color) {
[data-on-bg-color="#{$color}"],
.db-on-bg-color-#{$color} {
- color: var(-db-adaptive-on-bg-basic-#{$color}-default);
+ color: var(--db-adaptive-on-bg-basic-#{$color}-default);
}
}
diff --git a/packages/foundations/scss/init/default-fonts.scss b/packages/foundations/scss/init/default-fonts.scss
index 42f1bc340cc..2dad9a42f8d 100644
--- a/packages/foundations/scss/init/default-fonts.scss
+++ b/packages/foundations/scss/init/default-fonts.scss
@@ -20,6 +20,7 @@ $headlines: (
:is(h1, h2, h3, h4, h5, h6) {
font-family: var(--db-font-family-head);
font-weight: 700;
+ text-wrap: balance;
&[data-variant="light"] {
font-weight: 300;
diff --git a/packages/foundations/tailwind/tailwind-tokens.json b/packages/foundations/tailwind/tailwind-tokens.json
index 96bbea1418a..0a0540d7a21 100644
--- a/packages/foundations/tailwind/tailwind-tokens.json
+++ b/packages/foundations/tailwind/tailwind-tokens.json
@@ -121,28 +121,26 @@
"var(--db-type-body-font-size-3xl)",
"var(--db-type-body-line-height-3xl)"
],
- "body": {
- "xs": [
- "var(--db-type-body-font-size-xs)",
- "var(--db-type-body-line-height-xs)"
- ],
- "sm": [
- "var(--db-type-body-font-size-sm)",
- "var(--db-type-body-line-height-sm)"
- ],
- "md": [
- "var(--db-type-body-font-size-md)",
- "var(--db-type-body-line-height-md)"
- ],
- "lg": [
- "var(--db-type-body-font-size-lg)",
- "var(--db-type-body-line-height-lg)"
- ],
- "xl": [
- "var(--db-type-body-font-size-xl)",
- "var(--db-type-body-line-height-xl)"
- ]
- },
+ "body-xs": [
+ "var(--db-type-body-font-size-xs)",
+ "var(--db-type-body-line-height-xs)"
+ ],
+ "body-sm": [
+ "var(--db-type-body-font-size-sm)",
+ "var(--db-type-body-line-height-sm)"
+ ],
+ "body-md": [
+ "var(--db-type-body-font-size-md)",
+ "var(--db-type-body-line-height-md)"
+ ],
+ "body-lg": [
+ "var(--db-type-body-font-size-lg)",
+ "var(--db-type-body-line-height-lg)"
+ ],
+ "body-xl": [
+ "var(--db-type-body-font-size-xl)",
+ "var(--db-type-body-line-height-xl)"
+ ],
"head-3xs": [
"var(--db-type-headline-font-size-3xs)",
"var(--db-type-headline-line-height-3xs)"
@@ -159,28 +157,26 @@
"var(--db-type-headline-font-size-3xl)",
"var(--db-type-headline-line-height-3xl)"
],
- "head": {
- "xs": [
- "var(--db-type-headline-font-size-xs)",
- "var(--db-type-headline-line-height-xs)"
- ],
- "sm": [
- "var(--db-type-headline-font-size-sm)",
- "var(--db-type-headline-line-height-sm)"
- ],
- "md": [
- "var(--db-type-headline-font-size-md)",
- "var(--db-type-headline-line-height-md)"
- ],
- "lg": [
- "var(--db-type-headline-font-size-lg)",
- "var(--db-type-headline-line-height-lg)"
- ],
- "xl": [
- "var(--db-type-headline-font-size-xl)",
- "var(--db-type-headline-line-height-xl)"
- ]
- }
+ "head-xs": [
+ "var(--db-type-headline-font-size-xs)",
+ "var(--db-type-headline-line-height-xs)"
+ ],
+ "head-sm": [
+ "var(--db-type-headline-font-size-sm)",
+ "var(--db-type-headline-line-height-sm)"
+ ],
+ "head-md": [
+ "var(--db-type-headline-font-size-md)",
+ "var(--db-type-headline-line-height-md)"
+ ],
+ "head-lg": [
+ "var(--db-type-headline-font-size-lg)",
+ "var(--db-type-headline-line-height-lg)"
+ ],
+ "head-xl": [
+ "var(--db-type-headline-font-size-xl)",
+ "var(--db-type-headline-line-height-xl)"
+ ]
},
"borderRadius": {
"DEFAULT": "var(--db-border-radius-xs)",
diff --git a/showcases/nuxt-showcase/package.json b/showcases/nuxt-showcase/package.json
index 11a3ef744b6..6ae4379a5eb 100644
--- a/showcases/nuxt-showcase/package.json
+++ b/showcases/nuxt-showcase/package.json
@@ -12,7 +12,7 @@
},
"dependencies": {
"nuxt": "^3.12.4",
- "vue": "^3.4.35",
- "vue-router": "^4.4.2"
+ "vue": "^3.4.36",
+ "vue-router": "^4.4.3"
}
}
diff --git a/showcases/patternhub/components/foundations/colors/data.ts b/showcases/patternhub/components/foundations/colors/data.ts
index bf2b8b43958..44da5949abb 100644
--- a/showcases/patternhub/components/foundations/colors/data.ts
+++ b/showcases/patternhub/components/foundations/colors/data.ts
@@ -20,19 +20,20 @@ export const additionalColors = [
];
export const backgroundColors = [
- 'lvl-1',
- 'lvl-2',
- 'lvl-3',
- 'transparent-full',
- 'transparent-semi'
+ 'basic-level-1',
+ 'basic-level-2',
+ 'basic-level-3',
+ 'basic-transparent-full',
+ 'basic-transparent-semi'
];
export const onBackgroundColors = [
- { value: 'default' },
- { value: 'weak' },
- { value: 'contrast' },
- { value: 'contrast-weak', appendix: ' *' },
- { value: 'border', appendix: ' *' }
+ { value: 'emphasis-100' },
+ { value: 'emphasis-90' },
+ { value: 'emphasis-80' },
+ { value: 'emphasis-70', appendix: ' *' },
+ { value: 'emphasis-60', appendix: ' *' },
+ { value: 'emphasis-50', appendix: ' *' }
];
export type ColorValue = string | { value: string; appendix?: string };
diff --git a/showcases/patternhub/data/routes.tsx b/showcases/patternhub/data/routes.tsx
index 38c7692ac45..26db9162db0 100644
--- a/showcases/patternhub/data/routes.tsx
+++ b/showcases/patternhub/data/routes.tsx
@@ -167,7 +167,10 @@ export const ROUTES: NavigationItem[] = [
path: '/foundations/colors',
subNavigation: [
{ label: 'Readme', path: '/foundations/colors/readme' },
- { label: 'Overview', path: '/foundations/colors/overview' },
+ {
+ label: 'Color Classes',
+ path: '/foundations/colors/color-classes'
+ },
{
label: 'Color Schemes',
path: '/foundations/colors/color-schemes'
diff --git a/showcases/patternhub/pages/foundations/colors/overview.tsx b/showcases/patternhub/pages/foundations/colors/color-classes.tsx
similarity index 94%
rename from showcases/patternhub/pages/foundations/colors/overview.tsx
rename to showcases/patternhub/pages/foundations/colors/color-classes.tsx
index 5e98a974df1..6841eb9d282 100644
--- a/showcases/patternhub/pages/foundations/colors/overview.tsx
+++ b/showcases/patternhub/pages/foundations/colors/color-classes.tsx
@@ -8,7 +8,7 @@ import {
semanticColors
} from '../../../components/foundations/colors/data';
-const ColorOverview = () => {
+const ColorClasses = () => {
return (
@@ -70,13 +70,13 @@ const ColorOverview = () => {
Background color modifier{' '}
- db-bg-color-lvl-1 (Level 1 background
- by default)
+ db-bg-color-basic-level-1 (Level 1
+ background by default)
On background color modifier{' '}
- db-on-bg-color-default (highest text
- contrast by default)
+ db-on-bg-color-emphasis-100 (highest
+ text contrast by default)
Semantic container color
@@ -136,4 +136,4 @@ const ColorOverview = () => {
);
};
-export default ColorOverview;
+export default ColorClasses;
diff --git a/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx b/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx
index 7624a608c0c..7cd7bc5b7d9 100644
--- a/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx
+++ b/showcases/patternhub/pages/foundations/colors/color-usage-guide.tsx
@@ -332,7 +332,7 @@ const ColorUsageGuide = () => {
- {
- {
- {
testDefault({
test,
- title: 'should not have icon in screen reader (next)',
+ title: 'should not have icon in screen reader (next())',
url: './#/02/button?page=content',
async testFn(voiceOver, nvda) {
if (nvda) {
diff --git a/showcases/screen-reader/tests/input.spec.ts b/showcases/screen-reader/tests/input.spec.ts
index 67ac4e5779d..e3a0311cc47 100644
--- a/showcases/screen-reader/tests/input.spec.ts
+++ b/showcases/screen-reader/tests/input.spec.ts
@@ -5,7 +5,7 @@ const test = getTest();
test.describe('DBInput', () => {
testDefault({
test,
- title: 'should have message and label (next)',
+ title: 'should have message and label (next())',
url: './#/03/input?page=variant%20helper%20message',
async testFn(voiceOver, nvda) {
if (nvda) {
diff --git a/showcases/screen-reader/tests/radio.spec.ts b/showcases/screen-reader/tests/radio.spec.ts
index c732100998f..4b60359eac1 100644
--- a/showcases/screen-reader/tests/radio.spec.ts
+++ b/showcases/screen-reader/tests/radio.spec.ts
@@ -4,7 +4,7 @@ const test = getTest();
test.describe('DBRadio', () => {
testDefault({
test,
- title: 'should label duplicated (next)',
+ title: 'should label duplicated (next())',
url: './#/03/radio?page=density',
async testFn(voiceOver, nvda) {
if (nvda) {
diff --git a/showcases/vue-showcase/package.json b/showcases/vue-showcase/package.json
index 18303c09740..41468d5422a 100644
--- a/showcases/vue-showcase/package.json
+++ b/showcases/vue-showcase/package.json
@@ -13,8 +13,8 @@
},
"dependencies": {
"sa11y": "3.2.2",
- "vue": "^3.4.35",
- "vue-router": "4.4.2"
+ "vue": "^3.4.36",
+ "vue-router": "4.4.3"
},
"devDependencies": {
"@vitejs/plugin-vue": "^5.1.2",