diff --git a/change/@ni-nimble-components-a9107da1-a4c4-492b-9842-3d65680f0a8c.json b/change/@ni-nimble-components-a9107da1-a4c4-492b-9842-3d65680f0a8c.json new file mode 100644 index 0000000000..d5b8cf4006 --- /dev/null +++ b/change/@ni-nimble-components-a9107da1-a4c4-492b-9842-3d65680f0a8c.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Add nimble token for toolbar height", + "packageName": "@ni/nimble-components", + "email": "123377167+aagash-ni@users.noreply.github.com", + "dependentChangeType": "patch" +} 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 2cc0739068..08855339e9 100644 --- a/packages/nimble-components/src/theme-provider/design-token-comments.ts +++ b/packages/nimble-components/src/theme-provider/design-token-comments.ts @@ -322,5 +322,6 @@ export const comments: { readonly [key in TokenName]: string } = { 'Background fill color for the editable calendar event grab handle', calendarGridBorderColor: 'Border color for the calendar grid', calendarGroupHeaderBackgroundColor: - 'Background color for the calendar resource group header' + 'Background color for the calendar resource group header', + toolbarHeight: 'Standard height for the toolbar' }; 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 534998f24b..a3886de2f5 100644 --- a/packages/nimble-components/src/theme-provider/design-token-names.ts +++ b/packages/nimble-components/src/theme-provider/design-token-names.ts @@ -263,7 +263,9 @@ export const tokenNames: { readonly [key in TokenName]: string } = { calendarEventFillBlockedColor: 'calendar-event-fill-blocked-color', calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color', calendarGridBorderColor: 'calendar-grid-border-color', - calendarGroupHeaderBackgroundColor: 'calendar-group-header-background-color' + calendarGroupHeaderBackgroundColor: + 'calendar-group-header-background-color', + toolbarHeight: 'toolbar-height' }; const prefix = 'ni-nimble'; diff --git a/packages/nimble-components/src/theme-provider/design-tokens.ts b/packages/nimble-components/src/theme-provider/design-tokens.ts index 8016031c14..b2371bbd29 100644 --- a/packages/nimble-components/src/theme-provider/design-tokens.ts +++ b/packages/nimble-components/src/theme-provider/design-tokens.ts @@ -520,6 +520,10 @@ export const spinnerLargeHeight = DesignToken.create<string>( styleNameFromTokenName(tokenNames.spinnerLargeHeight) ).withDefault('64px'); +export const toolbarHeight = DesignToken.create<string>( + styleNameFromTokenName(tokenNames.toolbarHeight) +).withDefault('40px'); + // The token gets a default value of the table's default height (480px) // but is given a calculated value in the table styles. export const tableFitRowsHeight = DesignToken.create<string>(