diff --git a/angular-workspace/package.json b/angular-workspace/package.json index 8850fcb683..7173fbc48e 100644 --- a/angular-workspace/package.json +++ b/angular-workspace/package.json @@ -58,7 +58,7 @@ "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "ng-packagr": "^15.2.2", - "playwright": "1.40.0", + "playwright": "1.42.0", "rollup": "^4.12.0", "typescript": "~4.9.5" } diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json index f170144ec8..c95bf7331b 100644 --- a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json +++ b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/nimble-angular", "entries": [ + { + "date": "Thu, 21 Mar 2024 17:13:38 GMT", + "version": "20.5.2", + "tag": "@ni/nimble-angular_v20.5.2", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v23.0.0", + "commit": "not available" + } + ] + } + }, { "date": "Wed, 20 Mar 2024 16:45:59 GMT", "version": "20.5.1", diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md index 1a2aa3c1ca..3a4d8e308d 100644 --- a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md +++ b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md @@ -1,9 +1,17 @@ # Change Log - @ni/nimble-angular -This log was last generated on Wed, 20 Mar 2024 16:45:59 GMT and should not be manually modified. +This log was last generated on Thu, 21 Mar 2024 17:13:38 GMT and should not be manually modified. +## 20.5.2 + +Thu, 21 Mar 2024 17:13:38 GMT + +### Patches + +- Bump @ni/nimble-components to v23.0.0 + ## 20.5.1 Wed, 20 Mar 2024 16:45:59 GMT diff --git a/angular-workspace/projects/ni/nimble-angular/package.json b/angular-workspace/projects/ni/nimble-angular/package.json index cc13ba5b80..b6db60197e 100644 --- a/angular-workspace/projects/ni/nimble-angular/package.json +++ b/angular-workspace/projects/ni/nimble-angular/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-angular", - "version": "20.5.1", + "version": "20.5.2", "description": "Angular components for the NI Nimble Design System", "scripts": { "invoke-publish": "cd ../../../ && npm run build:library && cd dist/ni/nimble-angular && npm publish" @@ -31,7 +31,7 @@ "@angular/forms": "^15.2.10", "@angular/localize": "^15.2.10", "@angular/router": "^15.2.10", - "@ni/nimble-components": "^22.1.1" + "@ni/nimble-components": "^23.0.0" }, "dependencies": { "tslib": "^2.2.0" diff --git a/package-lock.json b/package-lock.json index f8fe26c4e2..46b53e8b5b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,7 @@ "beachball": "^2.31.0", "cross-env": "^7.0.3", "patch-package": "^8.0.0", - "playwright": "1.40.0" + "playwright": "1.42.0" } }, "angular-workspace": { @@ -67,14 +67,14 @@ "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "ng-packagr": "^15.2.2", - "playwright": "1.40.0", + "playwright": "1.42.0", "rollup": "^4.12.0", "typescript": "~4.9.5" } }, "angular-workspace/projects/ni/nimble-angular": { "name": "@ni/nimble-angular", - "version": "20.5.1", + "version": "20.5.2", "license": "MIT", "dependencies": { "tslib": "^2.2.0" @@ -85,7 +85,7 @@ "@angular/forms": "^15.2.10", "@angular/localize": "^15.2.10", "@angular/router": "^15.2.10", - "@ni/nimble-components": "^22.1.1" + "@ni/nimble-components": "^23.0.0" } }, "node_modules/@11ty/dependency-tree": { @@ -26482,12 +26482,12 @@ } }, "node_modules/playwright": { - "version": "1.40.0", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.40.0.tgz", - "integrity": "sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw==", + "version": "1.42.0", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.42.0.tgz", + "integrity": "sha512-Ko7YRUgj5xBHbntrgt4EIw/nE//XBHOKVKnBjO1KuZkmkhlbgyggTe5s9hjqQ1LpN+Xg+kHsQyt5Pa0Bw5XpvQ==", "dev": true, "dependencies": { - "playwright-core": "1.40.0" + "playwright-core": "1.42.0" }, "bin": { "playwright": "cli.js" @@ -26500,9 +26500,9 @@ } }, "node_modules/playwright-core": { - "version": "1.40.0", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.40.0.tgz", - "integrity": "sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q==", + "version": "1.42.0", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.42.0.tgz", + "integrity": "sha512-0HD9y8qEVlcbsAjdpBaFjmaTHf+1FeIddy8VJLeiqwhcNqGCBe4Wp2e8knpqiYbzxtxarxiXyNDw2cG8sCaNMQ==", "dev": true, "bin": { "playwright-core": "cli.js" @@ -33062,14 +33062,15 @@ } }, "node_modules/webpack-dev-middleware": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-7.0.0.tgz", - "integrity": "sha512-tZ5hqsWwww/8DislmrzXE3x+4f+v10H1z57mA2dWFrILb4i3xX+dPhTkcdR0DLyQztrhF2AUmO5nN085UYjd/Q==", + "version": "7.1.0", + "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-7.1.0.tgz", + "integrity": "sha512-+RYhGOyviHkKdMi1aaT8WZBQW033YgyBgtQHF2kMWo3mYA9z7W2AjsyY/DIzvp2Bhzys4UgHXFsIyTiL5qRBVw==", "dev": true, "dependencies": { "colorette": "^2.0.10", "memfs": "^4.6.0", "mime-types": "^2.1.31", + "on-finished": "^2.4.1", "range-parser": "^1.2.1", "schema-utils": "^4.0.0" }, @@ -33090,9 +33091,9 @@ } }, "node_modules/webpack-dev-middleware/node_modules/memfs": { - "version": "4.7.7", - "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.7.7.tgz", - "integrity": "sha512-x9qc6k88J/VVwnfTkJV8pRRswJ2156Rc4w5rciRqKceFDZ0y1MqsNL9pkg5sE0GOcDzZYbonreALhaHzg1siFw==", + "version": "4.8.0", + "resolved": "https://registry.npmjs.org/memfs/-/memfs-4.8.0.tgz", + "integrity": "sha512-fcs7trFxZlOMadmTw5nyfOwS3il9pr3y+6xzLfXNwmuR/D0i4wz6rJURxArAbcJDGalbpbMvQ/IFI0NojRZgRg==", "dev": true, "dependencies": { "tslib": "^2.0.0" @@ -33933,13 +33934,13 @@ "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "karma-spec-reporter": "^0.0.36", - "playwright": "1.40.0", + "playwright": "1.42.0", "typescript": "~4.9.5" } }, "packages/nimble-blazor": { "name": "@ni/nimble-blazor", - "version": "14.5.1", + "version": "14.5.2", "hasInstallScript": true, "license": "MIT", "devDependencies": { @@ -33950,7 +33951,7 @@ "@rollup/plugin-node-resolve": "^15.0.1", "cross-env": "^7.0.3", "glob": "^10.3.10", - "playwright": "1.40.0", + "playwright": "1.42.0", "rimraf": "^5.0.5", "rollup": "^4.12.0" } @@ -33975,14 +33976,14 @@ }, "packages/nimble-components": { "name": "@ni/nimble-components", - "version": "22.1.1", + "version": "23.0.0", "license": "MIT", "dependencies": { "@microsoft/fast-colors": "^5.3.1", "@microsoft/fast-element": "^1.12.0", "@microsoft/fast-foundation": "2.49.4", "@microsoft/fast-web-utilities": "^6.0.0", - "@ni/nimble-tokens": "^6.12.1", + "@ni/nimble-tokens": "^6.13.0", "@tanstack/table-core": "^8.10.7", "@tanstack/virtual-core": "^3.0.0-beta.68", "@tiptap/core": "^2.2.2", @@ -34062,7 +34063,7 @@ "karma-spec-reporter": "^0.0.36", "karma-webkit-launcher": "^2.1.0", "karma-webpack": "^5.0.0", - "playwright": "1.40.0", + "playwright": "1.42.0", "prettier-eslint": "^16.3.0", "prettier-eslint-cli": "^8.0.1", "remark-gfm": "^3.0.1", @@ -34974,7 +34975,7 @@ }, "packages/nimble-tokens": { "name": "@ni/nimble-tokens", - "version": "6.12.1", + "version": "6.13.0", "license": "MIT", "devDependencies": { "@microsoft/fast-colors": "^5.3.1", diff --git a/package.json b/package.json index 69f6114952..a0cde29a26 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,6 @@ "beachball": "^2.31.0", "cross-env": "^7.0.3", "patch-package": "^8.0.0", - "playwright": "1.40.0" + "playwright": "1.42.0" } } diff --git a/packages/jasmine-parameterized/CHANGELOG.json b/packages/jasmine-parameterized/CHANGELOG.json index 62aadb0a18..b9f515edf9 100644 --- a/packages/jasmine-parameterized/CHANGELOG.json +++ b/packages/jasmine-parameterized/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/jasmine-parameterized", "entries": [ + { + "date": "Fri, 22 Mar 2024 16:18:25 GMT", + "version": "0.2.3", + "tag": "@ni/jasmine-parameterized_v0.2.3", + "comments": { + "none": [ + { + "author": "jattasNI@users.noreply.github.com", + "package": "@ni/jasmine-parameterized", + "commit": "559c12f4b5eaae8fdbd18c6c0d2ecff097b699d5", + "comment": "Update Playwright dev dependency to 1.42.0" + } + ] + } + }, { "date": "Tue, 12 Mar 2024 21:01:53 GMT", "version": "0.2.3", diff --git a/packages/jasmine-parameterized/package.json b/packages/jasmine-parameterized/package.json index 5683dbbc83..f4888edaea 100644 --- a/packages/jasmine-parameterized/package.json +++ b/packages/jasmine-parameterized/package.json @@ -51,7 +51,7 @@ "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "karma-spec-reporter": "^0.0.36", - "playwright": "1.40.0", + "playwright": "1.42.0", "typescript": "~4.9.5" } } diff --git a/packages/nimble-blazor/CHANGELOG.json b/packages/nimble-blazor/CHANGELOG.json index bb6c73b2d4..4f5282b62b 100644 --- a/packages/nimble-blazor/CHANGELOG.json +++ b/packages/nimble-blazor/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/nimble-blazor", "entries": [ + { + "date": "Fri, 22 Mar 2024 16:18:25 GMT", + "version": "14.5.2", + "tag": "@ni/nimble-blazor_v14.5.2", + "comments": { + "none": [ + { + "author": "jattasNI@users.noreply.github.com", + "package": "@ni/nimble-blazor", + "commit": "559c12f4b5eaae8fdbd18c6c0d2ecff097b699d5", + "comment": "Update Playwright dev dependency to 1.42.0" + } + ] + } + }, { "date": "Mon, 18 Mar 2024 17:12:34 GMT", "version": "14.5.0", diff --git a/packages/nimble-blazor/package.json b/packages/nimble-blazor/package.json index ff76936429..85d6a32cc7 100644 --- a/packages/nimble-blazor/package.json +++ b/packages/nimble-blazor/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-blazor", - "version": "14.5.1", + "version": "14.5.2", "description": "Blazor components for the NI Nimble Design System", "scripts": { "postinstall": "node build/generate-playwright-version-properties/source/index.js", @@ -48,7 +48,7 @@ "@rollup/plugin-node-resolve": "^15.0.1", "cross-env": "^7.0.3", "glob": "^10.3.10", - "playwright": "1.40.0", + "playwright": "1.42.0", "rimraf": "^5.0.5", "rollup": "^4.12.0" } diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json index 8b2a7bfc67..13aaa57ee5 100644 --- a/packages/nimble-components/CHANGELOG.json +++ b/packages/nimble-components/CHANGELOG.json @@ -1,6 +1,72 @@ { "name": "@ni/nimble-components", "entries": [ + { + "date": "Fri, 22 Mar 2024 16:18:25 GMT", + "version": "23.0.0", + "tag": "@ni/nimble-components_v23.0.0", + "comments": { + "none": [ + { + "author": "jattasNI@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "559c12f4b5eaae8fdbd18c6c0d2ecff097b699d5", + "comment": "Update Playwright dev dependency to 1.42.0" + } + ] + } + }, + { + "date": "Thu, 21 Mar 2024 17:13:38 GMT", + "version": "23.0.0", + "tag": "@ni/nimble-components_v23.0.0", + "comments": { + "major": [ + { + "author": "1458528+fredvisser@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "b93385a27672ebc03e18a864e8fa268727595c66", + "comment": "Breaking change: Renamed bodyEmphasizedPlus1 to bodyPlus1Emphasized to align with token conventions. Also, added bodyPlus1 font token" + }, + { + "author": "beachball", + "package": "@ni/nimble-components", + "comment": "Bump @ni/nimble-tokens to v6.13.0", + "commit": "not available" + } + ] + } + }, + { + "date": "Thu, 21 Mar 2024 16:25:39 GMT", + "version": "22.1.1", + "tag": "@ni/nimble-components_v22.1.1", + "comments": { + "none": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "7e52ce24569e94af5282b4b77f34608211cf74c9", + "comment": "Fix column sizing test to pass in webkit" + } + ] + } + }, + { + "date": "Thu, 21 Mar 2024 00:31:13 GMT", + "version": "22.1.1", + "tag": "@ni/nimble-components_v22.1.1", + "comments": { + "none": [ + { + "author": "7282195+m-akinc@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "755823b11215aa2a2c48f296546d0cb8acf6f64c", + "comment": "Small change to design token naming scheme" + } + ] + } + }, { "date": "Wed, 20 Mar 2024 16:45:59 GMT", "version": "22.1.1", diff --git a/packages/nimble-components/CHANGELOG.md b/packages/nimble-components/CHANGELOG.md index 8825f33110..a3208751fb 100644 --- a/packages/nimble-components/CHANGELOG.md +++ b/packages/nimble-components/CHANGELOG.md @@ -1,9 +1,18 @@ # Change Log - @ni/nimble-components -This log was last generated on Wed, 20 Mar 2024 16:45:59 GMT and should not be manually modified. +This log was last generated on Thu, 21 Mar 2024 17:13:38 GMT and should not be manually modified. +## 23.0.0 + +Thu, 21 Mar 2024 17:13:38 GMT + +### Major changes + +- Breaking change: Renamed bodyEmphasizedPlus1 to bodyPlus1Emphasized to align with token conventions. Also, added bodyPlus1 font token ([ni/nimble@b93385a](https://github.com/ni/nimble/commit/b93385a27672ebc03e18a864e8fa268727595c66)) +- Bump @ni/nimble-tokens to v6.13.0 + ## 22.1.1 Wed, 20 Mar 2024 16:45:59 GMT diff --git a/packages/nimble-components/CONTRIBUTING.md b/packages/nimble-components/CONTRIBUTING.md index 607712adff..8366356817 100644 --- a/packages/nimble-components/CONTRIBUTING.md +++ b/packages/nimble-components/CONTRIBUTING.md @@ -490,12 +490,13 @@ To modify the generated tokens, complete these steps: Public names for theme-aware tokens are specified in `src/theme-provider/design-token-names.ts`. Use the following structure when creating new tokens. -`[element]-[part]-[state]-[token_type]` +`[element]-[part]-[interaction_states]-[remaining_states]-[token_type]` 1. Where **element** is the type to which the token applies (e.g. 'application', 'body', or 'title-plus-1'). 2. Where **part** is the specific part of the element to which the token applies (e.g. 'border', 'background', or shadow). -3. Where **state** is the more specific state descriptor (e.g. 'selected' or 'disabled'). Multiple states should be sorted alphabetically. -4. Where **token_type** is the token category (e.g. 'color', 'font', 'font-color', 'height', 'width', or 'size'). +3. Where **interaction_states** is one or more interaction states (e.g. 'active', 'disabled', 'hover', or 'selected'). Multiple values should be sorted alphabetically. +4. Where **remaining_states** the remaining, non-interaction states (e.g. 'accent', 'primary, or 'large'). Multiple values should be sorted alphabetically. +5. Where **token_type** is the token category (e.g. 'color', 'font', 'font-color', 'height', 'width', or 'size'). ### Size ramp diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json index eedf89911c..b2052a19b5 100644 --- a/packages/nimble-components/package.json +++ b/packages/nimble-components/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-components", - "version": "22.1.1", + "version": "23.0.0", "description": "Styled web components for the NI Nimble Design System", "scripts": { "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook", @@ -68,7 +68,7 @@ "@microsoft/fast-element": "^1.12.0", "@microsoft/fast-foundation": "2.49.4", "@microsoft/fast-web-utilities": "^6.0.0", - "@ni/nimble-tokens": "^6.12.1", + "@ni/nimble-tokens": "^6.13.0", "@tanstack/table-core": "^8.10.7", "@tanstack/virtual-core": "^3.0.0-beta.68", "@tiptap/core": "^2.2.2", @@ -151,7 +151,7 @@ "karma-spec-reporter": "^0.0.36", "karma-webkit-launcher": "^2.1.0", "karma-webpack": "^5.0.0", - "playwright": "1.40.0", + "playwright": "1.42.0", "prettier-eslint": "^16.3.0", "prettier-eslint-cli": "^8.0.1", "remark-gfm": "^3.0.1", diff --git a/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts b/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts index 56012c72c5..3b32cfa666 100644 --- a/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts +++ b/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts @@ -495,16 +495,18 @@ describe('Table Interactive Column Sizing', () => { expect(pageObject.isHorizontalScrollbarVisible()).toBeTrue(); }); - // WebKit skipped, see https://github.com/ni/nimble/issues/1939 - it('sizing table with a horizontal scrollbar does not change column widths until sized beyond current column pixel widths #SkipWebkit', async () => { - // create horizontal scrollbar with total column width of 450 - pageObject.dragSizeColumnByRightDivider(2, [100]); + it('sizing table with a horizontal scrollbar does not change column widths until sized beyond current column pixel widths', async () => { + // Create a horizontal scrollbar with a total column width of 500. This updates the columns' + // current fractional widths to 0.8, 0.8, 2, and 0.4, which keeps the columns widths as + // integers when the table is resized later in the test. Otherwise, different browsers + // may have slightly different rounding behaviors. + pageObject.dragSizeColumnByRightDivider(2, [150]); // size table below threshhold of total column widths await pageObject.sizeTableToGivenRowWidth(425, element); - expect(pageObject.getTotalCellRenderedWidth()).toBe(450); - // size table 50 pixels beyond total column widths - await pageObject.sizeTableToGivenRowWidth(500, element); expect(pageObject.getTotalCellRenderedWidth()).toBe(500); + // size table 100 pixels beyond total column widths + await pageObject.sizeTableToGivenRowWidth(600, element); + expect(pageObject.getTotalCellRenderedWidth()).toBe(600); expect(pageObject.isHorizontalScrollbarVisible()).toBeFalse(); }); diff --git a/packages/nimble-components/src/theme-provider/design-token-comments.ts b/packages/nimble-components/src/theme-provider/design-token-comments.ts index 7e38139d14..945379c8bf 100644 --- a/packages/nimble-components/src/theme-provider/design-token-comments.ts +++ b/packages/nimble-components/src/theme-provider/design-token-comments.ts @@ -210,6 +210,14 @@ export const comments: { readonly [key in TokenName]: string | null } = { 'Font line height for the "Placeholder" base token', placeholderFallbackFontFamily: 'Fallback font family for the "Placeholder" base token', + bodyFont: 'Font shorthand for the "Body" base token', + bodyFontColor: 'Font color for the "Body" base token', + bodyDisabledFontColor: 'Disabled font color for the "Body" base token', + bodyFontFamily: 'Font family for the "Body" base token', + bodyFontSize: 'Font size for the "Body" base token', + bodyFontWeight: 'Font weight for the "Body" base token', + bodyFontLineHeight: 'Font line height for the "Body" base token', + bodyFallbackFontFamily: 'Fallback font family for the "Body" base token', bodyEmphasizedFont: 'Font shorthand for the "BodyEmphasized" base token', bodyEmphasizedFontColor: 'Font color for the "BodyEmphasized" base token', bodyEmphasizedDisabledFontColor: @@ -221,30 +229,32 @@ export const comments: { readonly [key in TokenName]: string | null } = { 'Font line height for the "BodyEmphasized" base token', bodyEmphasizedFallbackFontFamily: 'Fallback font family for the "BodyEmphasized" base token', - bodyEmphasizedPlus1Font: + bodyPlus1Font: 'Font shorthand for the "Body_2" base token', + bodyPlus1FontColor: 'Font color for the "Body_2" base token', + bodyPlus1DisabledFontColor: + 'Disabled font color for the "Body_2" base token', + bodyPlus1FontFamily: 'Font family for the "Body_2" base token', + bodyPlus1FontSize: 'Font size for the "Body_2" base token', + bodyPlus1FontWeight: 'Font weight for the "Body_2" base token', + bodyPlus1FontLineHeight: 'Font line height for the "Body_2" base token', + bodyPlus1FallbackFontFamily: + 'Fallback font family for the "Body_2" base token', + bodyPlus1EmphasizedFont: 'Font shorthand for the "BodyEmphasized_2" base token', - bodyEmphasizedPlus1FontColor: + bodyPlus1EmphasizedFontColor: 'Font color for the "BodyEmphasized_2" base token', - bodyEmphasizedPlus1DisabledFontColor: + bodyPlus1EmphasizedDisabledFontColor: 'Disabled font color for the "BodyEmphasized_2" base token', - bodyEmphasizedPlus1FontFamily: + bodyPlus1EmphasizedFontFamily: 'Font family for the "BodyEmphasized_2" base token', - bodyEmphasizedPlus1FontSize: + bodyPlus1EmphasizedFontSize: 'Font size for the "BodyEmphasized_2" base token', - bodyEmphasizedPlus1FontWeight: + bodyPlus1EmphasizedFontWeight: 'Font weight for the "BodyEmphasized_2" base token', - bodyEmphasizedPlus1FontLineHeight: + bodyPlus1EmphasizedFontLineHeight: 'Font line height for the "BodyEmphasized_2" base token', - bodyEmphasizedPlus1FallbackFontFamily: + bodyPlus1EmphasizedFallbackFontFamily: 'Fallback font family for the "BodyEmphasized_2" base token', - bodyFont: 'Font shorthand for the "Body" base token', - bodyFontColor: 'Font color for the "Body" base token', - bodyDisabledFontColor: 'Disabled font color for the "Body" base token', - bodyFontFamily: 'Font family for the "Body" base token', - bodyFontSize: 'Font size for the "Body" base token', - bodyFontWeight: 'Font weight for the "Body" base token', - bodyFontLineHeight: 'Font line height for the "Body" base token', - bodyFallbackFontFamily: 'Fallback font family for the "Body" base token', groupHeaderFont: 'Font shorthand for the "Group_Header_1" base token', groupHeaderFontColor: 'Font color for the "Group_Header_1" base token', groupHeaderDisabledFontColor: diff --git a/packages/nimble-components/src/theme-provider/design-token-names.ts b/packages/nimble-components/src/theme-provider/design-token-names.ts index 3725fadbba..02900b47d5 100644 --- a/packages/nimble-components/src/theme-provider/design-token-names.ts +++ b/packages/nimble-components/src/theme-provider/design-token-names.ts @@ -169,25 +169,6 @@ export const tokenNames: { readonly [key in TokenName]: string } = { placeholderFontWeight: 'placeholder-font-weight', placeholderFontLineHeight: 'placeholder-font-line-height', placeholderFallbackFontFamily: 'placeholder-fallback-font-family', - bodyEmphasizedFont: 'body-emphasized-font', - bodyEmphasizedFontColor: 'body-emphasized-font-color', - bodyEmphasizedDisabledFontColor: 'body-emphasized-disabled-font-color', - bodyEmphasizedFontFamily: 'body-emphasized-font-family', - bodyEmphasizedFontSize: 'body-emphasized-font-size', - bodyEmphasizedFontWeight: 'body-emphasized-font-weight', - bodyEmphasizedFontLineHeight: 'body-emphasized-font-line-height', - bodyEmphasizedFallbackFontFamily: 'body-emphasized-fallback-font-family', - bodyEmphasizedPlus1Font: 'body-emphasized-plus-1-font', - bodyEmphasizedPlus1FontColor: 'body-emphasized-plus-1-font-color', - bodyEmphasizedPlus1DisabledFontColor: - 'body-emphasized-plus-1-disabled-font-color', - bodyEmphasizedPlus1FontFamily: 'body-emphasized-plus-1-font-family', - bodyEmphasizedPlus1FontSize: 'body-emphasized-plus-1-font-size', - bodyEmphasizedPlus1FontWeight: 'body-emphasized-plus-1-font-weight', - bodyEmphasizedPlus1FontLineHeight: - 'body-emphasized-plus-1-font-line-height', - bodyEmphasizedPlus1FallbackFontFamily: - 'body-emphasized-plus-1-fallback-font-family', bodyFont: 'body-font', bodyFontColor: 'body-font-color', bodyDisabledFontColor: 'body-disabled-font-color', @@ -196,6 +177,33 @@ export const tokenNames: { readonly [key in TokenName]: string } = { bodyFontWeight: 'body-font-weight', bodyFontLineHeight: 'body-font-line-height', bodyFallbackFontFamily: 'body-fallback-font-family', + bodyEmphasizedFont: 'body-emphasized-font', + bodyEmphasizedFontColor: 'body-emphasized-font-color', + bodyEmphasizedDisabledFontColor: 'body-emphasized-disabled-font-color', + bodyEmphasizedFontFamily: 'body-emphasized-font-family', + bodyEmphasizedFontSize: 'body-emphasized-font-size', + bodyEmphasizedFontWeight: 'body-emphasized-font-weight', + bodyEmphasizedFontLineHeight: 'body-emphasized-font-line-height', + bodyEmphasizedFallbackFontFamily: 'body-emphasized-fallback-font-family', + bodyPlus1Font: 'body-plus-1-font', + bodyPlus1FontColor: 'body-plus-1-font-color', + bodyPlus1DisabledFontColor: 'body-plus-1-disabled-font-color', + bodyPlus1FontFamily: 'body-plus-1-font-family', + bodyPlus1FontSize: 'body-plus-1-font-size', + bodyPlus1FontWeight: 'body-plus-1-font-weight', + bodyPlus1FontLineHeight: 'body-plus-1-font-line-height', + bodyPlus1FallbackFontFamily: 'body-plus-1-fallback-font-family', + bodyPlus1EmphasizedFont: 'body-plus-1-emphasized-font', + bodyPlus1EmphasizedFontColor: 'body-plus-1-emphasized-font-color', + bodyPlus1EmphasizedDisabledFontColor: + 'body-plus-1-emphasized-disabled-font-color', + bodyPlus1EmphasizedFontFamily: 'body-plus-1-emphasized-font-family', + bodyPlus1EmphasizedFontSize: 'body-plus-1-emphasized-font-size', + bodyPlus1EmphasizedFontWeight: 'body-plus-1-emphasized-font-weight', + bodyPlus1EmphasizedFontLineHeight: + 'body-plus-1-emphasized-font-line-height', + bodyPlus1EmphasizedFallbackFontFamily: + 'body-plus-1-emphasized-fallback-font-family', groupHeaderFont: 'group-header-font', groupHeaderFontColor: 'group-header-font-color', groupHeaderDisabledFontColor: 'group-header-disabled-font-color', @@ -270,6 +278,7 @@ export const scssInternalPropertySetterMarkdown = ( // Order of suffixes in the array matter, as we want single word suffixes after the multi-word ones const tokenSuffixes = [ 'RgbPartialColor', + 'DisabledFontColor', 'FontColor', 'FontLineHeight', 'FontWeight', diff --git a/packages/nimble-components/src/theme-provider/design-tokens.ts b/packages/nimble-components/src/theme-provider/design-tokens.ts index 0261fe694d..015722a783 100644 --- a/packages/nimble-components/src/theme-provider/design-tokens.ts +++ b/packages/nimble-components/src/theme-provider/design-tokens.ts @@ -23,6 +23,9 @@ import { BodyFamily, BodySize, BodyWeight, + Body2Family, + Body2Size, + Body2Weight, ControlLabel1Family, ControlLabel1Size, ControlLabel1Weight, @@ -83,6 +86,7 @@ import { BodyEmphasizedLineHeight, BodyEmphasized2LineHeight, BodyLineHeight, + Body2LineHeight, GroupLabel1LineHeight, ControlLabel1LineHeight, ButtonLabel1LineHeight, @@ -118,6 +122,7 @@ const Subtitle2FallbackFontFamily = 'Source Sans Pro Fallback'; const LinkFallbackFontFamily = 'Source Sans Pro Fallback'; const PlaceholderFallbackFontFamily = 'Source Sans Pro Fallback'; const BodyFallbackFontFamily = 'Source Sans Pro Fallback'; +const Body2FallbackFontFamily = 'Source Sans Pro Fallback'; const BodyEmphasizedFallbackFontFamily = 'Source Sans Pro Fallback'; const BodyEmphasized2FallbackFontFamily = 'Source Sans Pro Fallback'; const GroupLabel1FallbackFontFamily = 'Source Sans Pro Fallback'; @@ -627,6 +632,26 @@ export const [ PlaceholderFallbackFontFamily ); +export const [ + bodyFont, + bodyFontColor, + bodyDisabledFontColor, + bodyFontFamily, + bodyFontWeight, + bodyFontSize, + bodyFontLineHeight, + bodyFallbackFontFamily +] = createFontTokens( + tokenNames.bodyFont, + (element: HTMLElement) => getDefaultFontColorForTheme(element), + (element: HTMLElement) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), + BodyFamily, + BodyWeight, + BodySize, + BodyLineHeight, + BodyFallbackFontFamily +); + export const [ bodyEmphasizedFont, bodyEmphasizedFontColor, @@ -648,43 +673,43 @@ export const [ ); export const [ - bodyEmphasizedPlus1Font, - bodyEmphasizedPlus1FontColor, - bodyEmphasizedPlus1DisabledFontColor, - bodyEmphasizedPlus1FontFamily, - bodyEmphasizedPlus1FontWeight, - bodyEmphasizedPlus1FontSize, - bodyEmphasizedPlus1FontLineHeight, - bodyEmphasizedPlus1FallbackFontFamily + bodyPlus1Font, + bodyPlus1FontColor, + bodyPlus1DisabledFontColor, + bodyPlus1FontFamily, + bodyPlus1FontWeight, + bodyPlus1FontSize, + bodyPlus1FontLineHeight, + bodyPlus1FallbackFontFamily ] = createFontTokens( - tokenNames.bodyEmphasizedPlus1Font, + tokenNames.bodyPlus1Font, (element: HTMLElement) => getDefaultFontColorForTheme(element), (element: HTMLElement) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), - BodyEmphasized2Family, - BodyEmphasized2Weight, - BodyEmphasized2Size, - BodyEmphasized2LineHeight, - BodyEmphasized2FallbackFontFamily + Body2Family, + Body2Weight, + Body2Size, + Body2LineHeight, + Body2FallbackFontFamily ); export const [ - bodyFont, - bodyFontColor, - bodyDisabledFontColor, - bodyFontFamily, - bodyFontWeight, - bodyFontSize, - bodyFontLineHeight, - bodyFallbackFontFamily + bodyPlus1EmphasizedFont, + bodyPlus1EmphasizedFontColor, + bodyPlus1EmphasizedDisabledFontColor, + bodyPlus1EmphasizedFontFamily, + bodyPlus1EmphasizedFontWeight, + bodyPlus1EmphasizedFontSize, + bodyPlus1EmphasizedFontLineHeight, + bodyPlus1EmphasizedFallbackFontFamily ] = createFontTokens( - tokenNames.bodyFont, + tokenNames.bodyPlus1EmphasizedFont, (element: HTMLElement) => getDefaultFontColorForTheme(element), (element: HTMLElement) => hexToRgbaCssColor(getDefaultFontColorForTheme(element), 0.3), - BodyFamily, - BodyWeight, - BodySize, - BodyLineHeight, - BodyFallbackFontFamily + BodyEmphasized2Family, + BodyEmphasized2Weight, + BodyEmphasized2Size, + BodyEmphasized2LineHeight, + BodyEmphasized2FallbackFontFamily ); export const [ diff --git a/packages/nimble-components/src/theme-provider/tests/tokens.stories.ts b/packages/nimble-components/src/theme-provider/tests/tokens.stories.ts index 595f922d0f..5c84b9fb61 100644 --- a/packages/nimble-components/src/theme-provider/tests/tokens.stories.ts +++ b/packages/nimble-components/src/theme-provider/tests/tokens.stories.ts @@ -96,6 +96,7 @@ const tokenTemplates: { } = { Color: colorTemplate, RgbPartialColor: rgbColorTemplate, + DisabledFontColor: colorTemplate, FontColor: colorTemplate, FontLineHeight: stringValueTemplate, FontWeight: stringValueTemplate, diff --git a/packages/nimble-tokens/CHANGELOG.json b/packages/nimble-tokens/CHANGELOG.json index 4b32d99095..089330fec9 100644 --- a/packages/nimble-tokens/CHANGELOG.json +++ b/packages/nimble-tokens/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/nimble-tokens", "entries": [ + { + "date": "Thu, 21 Mar 2024 17:13:38 GMT", + "version": "6.13.0", + "tag": "@ni/nimble-tokens_v6.13.0", + "comments": { + "minor": [ + { + "author": "1458528+fredvisser@users.noreply.github.com", + "package": "@ni/nimble-tokens", + "commit": "b93385a27672ebc03e18a864e8fa268727595c66", + "comment": "Add Body_2 base font token" + } + ] + } + }, { "date": "Tue, 12 Mar 2024 21:01:54 GMT", "version": "6.12.1", diff --git a/packages/nimble-tokens/CHANGELOG.md b/packages/nimble-tokens/CHANGELOG.md index 1640ba454b..def2a83a56 100644 --- a/packages/nimble-tokens/CHANGELOG.md +++ b/packages/nimble-tokens/CHANGELOG.md @@ -1,9 +1,17 @@ # Change Log - @ni/nimble-tokens -This log was last generated on Tue, 12 Mar 2024 21:01:54 GMT and should not be manually modified. +This log was last generated on Thu, 21 Mar 2024 17:13:38 GMT and should not be manually modified. +## 6.13.0 + +Thu, 21 Mar 2024 17:13:38 GMT + +### Minor changes + +- Add Body_2 base font token ([ni/nimble@b93385a](https://github.com/ni/nimble/commit/b93385a27672ebc03e18a864e8fa268727595c66)) + ## 6.12.1 Tue, 12 Mar 2024 21:01:54 GMT diff --git a/packages/nimble-tokens/package.json b/packages/nimble-tokens/package.json index c44fcb3619..afefbfb147 100644 --- a/packages/nimble-tokens/package.json +++ b/packages/nimble-tokens/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-tokens", - "version": "6.12.1", + "version": "6.13.0", "description": "Design tokens for the NI Nimble Design System", "scripts": { "build": "npm run build:svg-to-ts && npm run build:ts && npm run build:svg-to-ico && npm run build:generate-font-scss && npm run build:style-dictionary", diff --git a/packages/nimble-tokens/source/styledictionary/properties/fonts.json b/packages/nimble-tokens/source/styledictionary/properties/fonts.json index 4745cd3608..9e43932adf 100644 --- a/packages/nimble-tokens/source/styledictionary/properties/fonts.json +++ b/packages/nimble-tokens/source/styledictionary/properties/fonts.json @@ -24,6 +24,14 @@ "value": "Regular" } }, + "Body_2": { + "family": { + "value": "Source Sans Pro" + }, + "weight": { + "value": "Regular" + } + }, "Header0": { "family": { "value": "Noto Serif" @@ -260,6 +268,9 @@ "Body": { "value": "14" }, + "Body_2": { + "value": "16" + }, "Header0": { "value": "36" }, diff --git a/packages/nimble-tokens/source/styledictionary/properties/sizes.json b/packages/nimble-tokens/source/styledictionary/properties/sizes.json index 97d1a1fa25..0b6de7129d 100644 --- a/packages/nimble-tokens/source/styledictionary/properties/sizes.json +++ b/packages/nimble-tokens/source/styledictionary/properties/sizes.json @@ -3,6 +3,9 @@ "Body-line-height": { "value": "18" }, + "Body_2-line-height": { + "value": "16" + }, "ControlLabel_1-line-height": { "value": "16" },