@workday/canvas-kit-docs 16.0.0-alpha.0494-next.0 → 16.0.0-alpha.0499-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -477148,34 +477148,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
477148
477148
  "tags": {
477149
477149
  "default": "'accent'"
477150
477150
  }
477151
- },
477152
- {
477153
- "kind": "property",
477154
- "name": "surfaceType",
477155
- "required": false,
477156
- "type": {
477157
- "kind": "union",
477158
- "value": [
477159
- {
477160
- "kind": "string",
477161
- "value": "default"
477162
- },
477163
- {
477164
- "kind": "string",
477165
- "value": "inverse"
477166
- }
477167
- ]
477168
- },
477169
- "description": "A string that will determine which surface overlay variant to use.",
477170
- "declarations": [
477171
- {
477172
- "name": "surfaceType",
477173
- "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
477174
- }
477175
- ],
477176
- "tags": {
477177
- "default": "'default'"
477178
- }
477179
477151
  }
477180
477152
  ]
477181
477153
  }
@@ -23,7 +23,7 @@ export const packageJSONFile = `{
23
23
  "@workday/canvas-kit-react": "15.1.4",
24
24
  "@workday/canvas-kit-react-fonts": "^15.1.4",
25
25
  "@workday/canvas-kit-styling": "15.1.4",
26
- "@workday/canvas-system-icons-web": "5.0.1",
26
+ "@workday/canvas-system-icons-web": "^5.0.3",
27
27
  "@workday/canvas-expressive-icons-web": "1.0.1",
28
28
  "@workday/canvas-tokens-web": "4.4.0-beta.11"
29
29
  },
@@ -24,7 +24,7 @@ export const packageJSONFile = `{
24
24
  "@workday/canvas-kit-react": "15.1.4",
25
25
  "@workday/canvas-kit-react-fonts": "^15.1.4",
26
26
  "@workday/canvas-kit-styling": "15.1.4",
27
- "@workday/canvas-system-icons-web": "5.0.1",
27
+ "@workday/canvas-system-icons-web": "^5.0.3",
28
28
  "@workday/canvas-expressive-icons-web": "1.0.1",
29
29
  "@workday/canvas-tokens-web": "4.4.0-beta.11"
30
30
  },
@@ -12,18 +12,22 @@ Soon to be...
12
12
 
13
13
  - [Codemod](#codemod)
14
14
  - [Instructions](#instructions)
15
+ - [Codemod Transformations for Icons](#codemod-transformations-for-icons)
15
16
  - [New Components](#new-components)
16
17
  - [KBD](#kbd)
17
18
  - [Tabs](#tabs)
18
19
  - [Component Updates](#component-updates)
19
20
  - [Action Bar](#action-bar)
20
- - [Avatar](#avatar)
21
21
  - [Buttons](#buttons)
22
22
  - [Delete Button Outline Variant](#delete-button-outline-variant)
23
+ - [Secondary Button](#secondary-button)
23
24
  - [Container Components](#container-components)
24
25
  - [Card](#card)
25
26
  - [Expandable](#expandable)
27
+ - [Side Panel](#side-panel)
28
+ - [Table](#table)
26
29
  - [Indicators](#indicators)
30
+ - [Avatar](#avatar)
27
31
  - [Banner](#banner)
28
32
  - [Count Badge](#count-badge)
29
33
  - [Information Highlight](#information-highlight)
@@ -42,18 +46,17 @@ Soon to be...
42
46
  - [Text Input](#text-input)
43
47
  - [Select](#select)
44
48
  - [MultiSelect](#multiselect)
45
- - [Menu](#menu)
46
- - [Modal](#modal)
49
+ - [Popups](#popups)
50
+ - [Menu](#menu)
51
+ - [Modal](#modal)
52
+ - [Popup](#popup)
53
+ - [Toast](#toast)
54
+ - [Tooltip](#tooltip)
47
55
  - [Navigation Components](#navigation-components)
48
56
  - [Hyperlink](#hyperlink)
49
57
  - [Breadcrumbs](#breadcrumbs)
50
58
  - [Pagination](#pagination)
51
- - [Popup](#popup)
52
59
  - [Segmented Control](#segmented-control)
53
- - [Side Panel](#side-panel)
54
- - [Table](#table)
55
- - [Toast](#toast)
56
- - [Tooltip](#tooltip)
57
60
  - [New Utilities](#new-utilities)
58
61
  - [cornerShapeStencil](#cornershapestencil)
59
62
  - [Fonts](#fonts)
@@ -123,6 +126,60 @@ yarn remove @workday/canvas-kit-codemod
123
126
  > after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
124
127
  > your project conventions.
125
128
 
129
+ ## Codemod Transformations for v16
130
+
131
+ The following automated transformations are available for upgrading to v16:
132
+
133
+ - **Update Hyperlink Props**: updateHyperlinkProps
134
+
135
+ Run the codemod with: `npx @workday/canvas-kit-codemod v16 [path]`
136
+
137
+ ### Codemod Transformations for Icons
138
+
139
+ #### Icon Migration Codemod
140
+
141
+ For v16, there is a **separate codemod** called `icon-migration` that updates
142
+ `@workday/canvas-system-icons-web` usage across your codebase. Upgrade the icon package to v5 before
143
+ you run it so deprecation and fallback mappings match what the transform expects.
144
+
145
+ ```sh
146
+ yarn add @workday/canvas-system-icons-web@^5
147
+ ```
148
+
149
+ The codemod reads `system.deprecated.metadata.json` from the installed icon package and rewrites
150
+ each deprecated export to its fallback icon. This codemod will:
151
+
152
+ - Update **named imports** and their references (for example, `uploadIcon` to `arrowUpToLineIcon`).
153
+ - Preserve **import aliases** and point them at the fallback export.
154
+ - Update **namespace imports** member access (for example, `systemIcons.uploadIcon` to
155
+ `systemIcons.arrowUpToLineIcon`).
156
+ - Resolve **chained fallbacks** when a fallback icon is itself deprecated.
157
+ - Remove **duplicate imports** when the fallback is already imported in the same declaration.
158
+
159
+ Because it applies every mapping in the metadata file, a single run covers both the v4 naming
160
+ convention migrations and the v5 Sana Canvas Assets renames and deprecations. Icons that are not
161
+ deprecated are left unchanged.
162
+
163
+ To run the codemod:
164
+
165
+ ```sh
166
+ npx @workday/canvas-kit-codemod icon-migration [path]
167
+ ```
168
+
169
+ > **Tip:** Provide the specific directory or directories you want to update as `[path]` to speed up
170
+ > migration.
171
+ >
172
+ > This codemod only touches `@workday/canvas-system-icons-web`. For accent, applet, and expressive
173
+ > icons, use the `v15-icons` transform covered in the
174
+ > [v15 upgrade guide](/docs/guides-upgrade-guides-v15-0-overview--docs#codemod-transformations-for-icons).
175
+ > For details on what changed in v5 and the full list of deprecated icons, see the
176
+ > [Sana Canvas Assets overview](/docs/guides-icon-migration-sana-canvas-assets-overview--docs) and
177
+ > the [Icon Migration codemod guide](/docs/guides-icon-migration-codemod--docs).
178
+
179
+ > **Note:** 🤖 The `icon-migration` codemod automates the majority of system icon migration work,
180
+ > but _always_ review the PR for any remaining icons the codemod could not address, especially
181
+ > dynamic icon selection, non-code assets, and heavily customized usages.
182
+
126
183
  ## New Components
127
184
 
128
185
  ### KBD
@@ -187,39 +244,6 @@ import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
187
244
 
188
245
  - `ActionBar` padding has been updated to `padding.md` (16px).
189
246
 
190
- ### Avatar
191
-
192
- **PR:** [#3981](https://github.com/Workday/canvas-kit/pull/3981)
193
-
194
- We've updated `Avatar` color variants to align with Sana Canvas. These changes are **only visual** —
195
- the component API is unchanged except for two new `variant` options.
196
-
197
- #### Updated Variants
198
-
199
- Existing variants use darker background colors and updated foreground colors for improved contrast:
200
-
201
- | Variant | Change |
202
- | -------- | -------------------------------------------------------------------------------------------- |
203
- | `blue` | Background updated from `blue300` to `blue600`; text now uses `system.color.fg.inverse` |
204
- | `amber` | Background updated from `amber200` to `amber300`; text updated from `amber700` to `amber800` |
205
- | `purple` | Background updated from `purple300` to `purple600`; text now uses `system.color.fg.inverse` |
206
-
207
- The `teal` variant is unchanged.
208
-
209
- #### New Variants
210
-
211
- Two new color variants are available:
212
-
213
- - `magenta` — `magenta600` background with `system.color.fg.inverse` text
214
- - `green` — `green600` background with `system.color.fg.inverse` text
215
-
216
- ```tsx
217
- import {Avatar} from '@workday/canvas-kit-react/avatar';
218
-
219
- <Avatar name="Mary Jane" variant="magenta" />
220
- <Avatar name="Green Arrow" variant="green" />
221
- ```
222
-
223
247
  ### Buttons
224
248
 
225
249
  **PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
@@ -256,6 +280,11 @@ import {DeleteButton} from '@workday/canvas-kit-react/button';
256
280
  <DeleteButton variant="outline">Delete</DeleteButton>;
257
281
  ```
258
282
 
283
+ #### Secondary Button
284
+
285
+ `SecondaryButton` now has a `transparent` `backgroundColor` and will not show on interactive states.
286
+ The interactive states will now show on the `border`.
287
+
259
288
  ### Container Components
260
289
 
261
290
  **PR:** [#4088](https://github.com/Workday/canvas-kit/pull/4088)
@@ -346,8 +375,112 @@ instead. While the styles are different, both where intended to be used on an `a
346
375
  - `Expandable.Content` padding is now uniform `padding.xs` (8px) on all sides (previously
347
376
  `padding.md` top / `padding.xs` sides and bottom).
348
377
 
378
+ #### Side Panel
379
+
380
+ **PR:** [#4107](https://github.com/Workday/canvas-kit/pull/4107)
381
+
382
+ ##### Breaking Changes
383
+
384
+ The `variant` prop on `SidePanel` no longer accepts `alternate`. It has been renamed to `overlay` to
385
+ describe what the variant is for — a panel that floats above page content — because a second
386
+ non-overlay variant now occupies the "alternative surface" role.
387
+
388
+ ```tsx
389
+ import {SidePanel} from '@workday/canvas-kit-react/side-panel';
390
+
391
+ // Before
392
+ <SidePanel variant="alternate">{/* ... */}</SidePanel>
393
+
394
+ // After
395
+ <SidePanel variant="overlay">{/* ... */}</SidePanel>
396
+ ```
397
+
398
+ > 🤖 The `v16` codemod will rename `variant="alternate"` to `variant="overlay"` as shown above. It
399
+ > only transforms `SidePanel` imported from `@workday/canvas-kit-react`; the deprecated `SidePanel`
400
+ > in `@workday/canvas-kit-preview-react` is left alone.
401
+
402
+ If you were using `alternate` for a panel that sits inline with page content rather than over it,
403
+ switch to the new `alternative` variant instead of `overlay` to avoid picking up the elevation
404
+ shadow.
405
+
406
+ ##### New API
407
+
408
+ - `variant="alternative"` — uses a raised surface (`system.legacy.color.surface.raised`) with no
409
+ depth. Use it for panels that need to stand out from the page background while remaining part of
410
+ the page layout.
411
+
412
+ The full set of variants is now:
413
+
414
+ | Variant | Surface | Depth |
415
+ | ------------- | ---------------------------------------- | ----- |
416
+ | `standard` | `system.legacy.color.surface.navigation` | None |
417
+ | `alternative` | `system.legacy.color.surface.raised` | None |
418
+ | `overlay` | `system.legacy.color.surface.default` | 6 |
419
+
420
+ ##### Visual Updates
421
+
422
+ - The `overlay` variant's box-shadow updated from `system.depth[3]` to `system.depth[6]`.
423
+ - `SidePanel.ToggleButton`'s default icon changed from `extendIcon` to `sidebarLeftIcon`. The icon
424
+ no longer rotates as the panel expands and collapses: it keeps a single orientation in LTR and is
425
+ mirrored horizontally in RTL.
426
+ - `SidePanel.ToggleButton`'s width changed from `gap.lg` (24px) to `size.md` (40px), and its top
427
+ offset changed from `gap.lg` (24px) to `12px`.
428
+ - `SidePanel.Heading` padding changed from a symmetric `padding.xs` (8px) to `padding.sm` (12px)
429
+ with a `paddingInlineStart` of `padding.md` (16px), and it now has a `minHeight` of `size.xxl`
430
+ (64px) so the heading lines up with the toggle button and the collapsed panel width.
431
+ - `SidePanel.Heading` now lays out its children with flexbox and centers them vertically, so an icon
432
+ passed alongside the heading text aligns without extra styling.
433
+
434
+ #### Table
435
+
436
+ ##### Visual Updates
437
+
438
+ - `BaseTable` / `Table` outer border color updated from `system.legacy.color.border.strong` to
439
+ `system.legacy.color.border.default`.
440
+ - `Table.Caption` divider (`borderBlockEnd`) updated from `system.legacy.color.border.strong` to
441
+ `system.legacy.color.border.default`.
442
+ - Container corner radius is now **12px** (`shape.lg`, previously `shape.md` / 8px), managed via
443
+ `cornerShapeStencil` (see [New Utilities](#new-utilities)).
444
+ - `Table.Header` (and `BaseTable.Header`) cell padding is now uniform `padding.md` (16px) on all
445
+ sides (previously asymmetric `padding.xs` vertically and `padding.md` horizontally).
446
+ - Column header label text color is now `system.color.fg.strong` (previously inherited `fg.default`
447
+ from the table container).
448
+
349
449
  ### Indicators
350
450
 
451
+ #### Avatar
452
+
453
+ **PR:** [#3981](https://github.com/Workday/canvas-kit/pull/3981)
454
+
455
+ We've updated `Avatar` color variants to align with Sana Canvas. These changes are **only visual** —
456
+ the component API is unchanged except for two new `variant` options.
457
+
458
+ ##### Updated Variants
459
+
460
+ Existing variants use darker background colors and updated foreground colors for improved contrast:
461
+
462
+ | Variant | Change |
463
+ | -------- | -------------------------------------------------------------------------------------------- |
464
+ | `blue` | Background updated from `blue300` to `blue600`; text now uses `system.color.fg.inverse` |
465
+ | `amber` | Background updated from `amber200` to `amber300`; text updated from `amber700` to `amber800` |
466
+ | `purple` | Background updated from `purple300` to `purple600`; text now uses `system.color.fg.inverse` |
467
+
468
+ The `teal` variant is unchanged.
469
+
470
+ ##### New Variants
471
+
472
+ Two new color variants are available:
473
+
474
+ - `magenta` — `magenta600` background with `system.color.fg.inverse` text
475
+ - `green` — `green600` background with `system.color.fg.inverse` text
476
+
477
+ ```tsx
478
+ import {Avatar} from '@workday/canvas-kit-react/avatar';
479
+
480
+ <Avatar name="Mary Jane" variant="magenta" />
481
+ <Avatar name="Green Arrow" variant="green" />
482
+ ```
483
+
351
484
  #### Banner
352
485
 
353
486
  **PR:** [#4087](https://github.com/Workday/canvas-kit/pull/4087)
@@ -631,11 +764,13 @@ No API changes. No migration is required unless you render a custom dropdown ind
631
764
  No API changes. No migration is required unless you render a custom dropdown indicator or override
632
765
  `multiSelectInputStencil` styles.
633
766
 
634
- ### Menu
767
+ ### Popups
768
+
769
+ #### Menu
635
770
 
636
771
  **PR:** [#3987](https://github.com/Workday/canvas-kit/pull/3987)
637
772
 
638
- #### Visual Updates
773
+ ##### Visual Updates
639
774
 
640
775
  **Menu.Card**
641
776
 
@@ -661,7 +796,7 @@ No API changes. No migration is required unless you render a custom dropdown ind
661
796
  - Text color updated from `system.color.fg.default` to `system.color.fg.strong`.
662
797
  - Icon size updated to `md` (20px / 1.25rem).
663
798
 
664
- #### Menu icon sizing
799
+ ##### Menu icon sizing
665
800
 
666
801
  Menu icons are now smaller to align with Sana Canvas specs. In v15, `Menu.Item.Icon` did not set a
667
802
  `size` prop and fell back to the `SystemIcon` default of `lg` (24px / 1.5rem). In v16, all icons
@@ -680,14 +815,14 @@ custom chevron or checkmark icons inside of menu items, update them to `size="md
680
815
 
681
816
  - Padding updated to use `paddingBlock: padding.xs` with `paddingInline: padding.sm` / `padding.md`.
682
817
 
683
- #### State Style Updates
818
+ ##### State Style Updates
684
819
 
685
820
  `Menu.Item` and `Menu.Option` share the same underlying item styles via `menuItemStencil`. For
686
821
  guidance on when to use `Menu.Item` vs `Menu.Option`, including accessibility requirements for
687
822
  selectable menus, see the
688
823
  [Menu accessibility documentation](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--docs#accessibility).
689
824
 
690
- ##### Menu.Item
825
+ ###### Menu.Item
691
826
 
692
827
  | State | v15 | v16 |
693
828
  | ----------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
@@ -696,7 +831,7 @@ selectable menus, see the
696
831
  | Disabled + Focus (`aria-disabled="true"`) | Solid blue fill and white text with disabled opacity (dims focus style) | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) with disabled opacity (dims focus indicator) |
697
832
  | Expanded submenu parent + Focus | Same blue fill and white text focus style as other focused items | Focus ring removed; ancestor-trail styling shown instead (`Submenu.TargetItem`) |
698
833
 
699
- ##### Menu.Option
834
+ ###### Menu.Option
700
835
 
701
836
  Used in `Select`, `Combobox`, and other listbox menus. Selected states apply when
702
837
  `aria-selected="true"`.
@@ -710,12 +845,50 @@ Used in `Select`, `Combobox`, and other listbox menus. Selected states apply whe
710
845
  | Disabled + Focus (`aria-disabled="true"`) | Solid blue fill and white text with disabled opacity (dims focus style) | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) with disabled opacity (dims focus indicator) |
711
846
  | Disabled + Selected | Solid blue fill and white text with disabled opacity | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) with disabled opacity |
712
847
 
713
- ### Modal
848
+ #### Modal
714
849
 
715
- #### Visual Updates
850
+ ##### Visual Updates
716
851
 
717
852
  - `Modal.Card` box-shadow updated from `system.depth[5]` to `system.depth[6]`.
718
853
 
854
+ #### Popup
855
+
856
+ ##### Visual Updates
857
+
858
+ - `Popup.Card` box-shadow updated from `system.depth[3]` to `system.depth[4]`.
859
+
860
+ #### Toast
861
+
862
+ **PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
863
+
864
+ ##### Visual Updates
865
+
866
+ - Padding is now applied to the `Toast` container itself instead of being distributed across
867
+ `Toast.Body` and `Toast.Icon`.
868
+ - Gap between the icon, body, and close icon is now `base.size150` (12px).
869
+ - Shape uses `system.shape.xl`.
870
+ - Box-shadow updated from `system.depth[3]` to `system.depth[5]`.
871
+ - `Toast.Body` no longer has a gap between text and link.
872
+ - `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
873
+ LTR).
874
+ - `Toast.CloseIcon` was changed to be `extraSmall` tertiary button.
875
+
876
+ #### Tooltip
877
+
878
+ **PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
879
+
880
+ ##### Visual Updates
881
+
882
+ - The default tooltip has been restyled from a dark surface to a light surface.
883
+ - A visible border (`system.color.border.default`) is now applied to the container, replacing the
884
+ previous transparent outline.
885
+ - Tooltip boundaries remain visible in Windows High Contrast mode: when High Contrast is detected,
886
+ Tooltip uses a solid outline (`outline: solid 1px CanvasText`) to ensure clear visibility.
887
+ - Shape is now fully rounded using `system.shape.full`.
888
+ - Box-shadow updated from `system.depth[2]` to `system.depth[3]`.
889
+ - Type level is now `subtext.lg` (previously `subtext.md`).
890
+ - Padding and spacing have been adjusted to accommodate the new styling.
891
+
719
892
  ### Navigation Components
720
893
 
721
894
  #### Hyperlink
@@ -796,12 +969,6 @@ Run the Canvas Kit v16 codemod (`updateHyperlinkProps`) to migrate automatically
796
969
  TextInput `shape.lg` (12px).
797
970
  - GoToForm spacing uses `marginInlineStart: gap.xs` alongside Controls `gap.xs`.
798
971
 
799
- ### Popup
800
-
801
- #### Visual Updates
802
-
803
- - `Popup.Card` box-shadow updated from `system.depth[3]` to `system.depth[4]`.
804
-
805
972
  ### Segmented Control
806
973
 
807
974
  **PR:** [#4048](https://github.com/Workday/canvas-kit/pull/4048)
@@ -822,109 +989,6 @@ Run the Canvas Kit v16 codemod (`updateHyperlinkProps`) to migrate automatically
822
989
  - Container padding changed to `padding.md` (16px) including for mobile devices.
823
990
  - On mobile devices, the container padding remains `padding.md` (16px).
824
991
 
825
- ### Side Panel
826
-
827
- **PR:** [#4107](https://github.com/Workday/canvas-kit/pull/4107)
828
-
829
- #### Breaking Changes
830
-
831
- The `variant` prop on `SidePanel` no longer accepts `alternate`. It has been renamed to `overlay` to
832
- describe what the variant is for — a panel that floats above page content — because a second
833
- non-overlay variant now occupies the "alternative surface" role.
834
-
835
- ```tsx
836
- import {SidePanel} from '@workday/canvas-kit-react/side-panel';
837
-
838
- // Before
839
- <SidePanel variant="alternate">{/* ... */}</SidePanel>
840
-
841
- // After
842
- <SidePanel variant="overlay">{/* ... */}</SidePanel>
843
- ```
844
-
845
- > 🤖 The `v16` codemod will rename `variant="alternate"` to `variant="overlay"` as shown above. It
846
- > only transforms `SidePanel` imported from `@workday/canvas-kit-react`; the deprecated `SidePanel`
847
- > in `@workday/canvas-kit-preview-react` is left alone.
848
-
849
- If you were using `alternate` for a panel that sits inline with page content rather than over it,
850
- switch to the new `alternative` variant instead of `overlay` to avoid picking up the elevation
851
- shadow.
852
-
853
- #### New API
854
-
855
- - `variant="alternative"` — uses a raised surface (`system.legacy.color.surface.raised`) with no
856
- depth. Use it for panels that need to stand out from the page background while remaining part of
857
- the page layout.
858
-
859
- The full set of variants is now:
860
-
861
- | Variant | Surface | Depth |
862
- | ------------- | ---------------------------------------- | ----- |
863
- | `standard` | `system.legacy.color.surface.navigation` | None |
864
- | `alternative` | `system.legacy.color.surface.raised` | None |
865
- | `overlay` | `system.legacy.color.surface.default` | 6 |
866
-
867
- #### Visual Updates
868
-
869
- - The `overlay` variant's box-shadow updated from `system.depth[3]` to `system.depth[6]`.
870
- - `SidePanel.ToggleButton`'s default icon changed from `extendIcon` to `sidebarLeftIcon`. The icon
871
- no longer rotates as the panel expands and collapses: it keeps a single orientation in LTR and is
872
- mirrored horizontally in RTL.
873
- - `SidePanel.ToggleButton`'s width changed from `gap.lg` (24px) to `size.md` (40px), and its top
874
- offset changed from `gap.lg` (24px) to `12px`.
875
- - `SidePanel.Heading` padding changed from a symmetric `padding.xs` (8px) to `padding.sm` (12px)
876
- with a `paddingInlineStart` of `padding.md` (16px), and it now has a `minHeight` of `size.xxl`
877
- (64px) so the heading lines up with the toggle button and the collapsed panel width.
878
- - `SidePanel.Heading` now lays out its children with flexbox and centers them vertically, so an icon
879
- passed alongside the heading text aligns without extra styling.
880
-
881
- ### Table
882
-
883
- #### Visual Updates
884
-
885
- - `BaseTable` / `Table` outer border color updated from `system.legacy.color.border.strong` to
886
- `system.legacy.color.border.default`.
887
- - `Table.Caption` divider (`borderBlockEnd`) updated from `system.legacy.color.border.strong` to
888
- `system.legacy.color.border.default`.
889
- - Container corner radius is now **12px** (`shape.lg`, previously `shape.md` / 8px), managed via
890
- `cornerShapeStencil` (see [New Utilities](#new-utilities)).
891
- - `Table.Header` (and `BaseTable.Header`) cell padding is now uniform `padding.md` (16px) on all
892
- sides (previously asymmetric `padding.xs` vertically and `padding.md` horizontally).
893
- - Column header label text color is now `system.color.fg.strong` (previously inherited `fg.default`
894
- from the table container).
895
-
896
- ### Toast
897
-
898
- **PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
899
-
900
- #### Visual Updates
901
-
902
- - Padding is now applied to the `Toast` container itself instead of being distributed across
903
- `Toast.Body` and `Toast.Icon`.
904
- - Gap between the icon, body, and close icon is now `base.size150` (12px).
905
- - Shape uses `system.shape.xl`.
906
- - Box-shadow updated from `system.depth[3]` to `system.depth[5]`.
907
- - `Toast.Body` no longer has a gap between text and link.
908
- - `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
909
- LTR).
910
- - `Toast.CloseIcon` was changed to be `extraSmall` tertiary button.
911
-
912
- ### Tooltip
913
-
914
- **PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
915
-
916
- #### Visual Updates
917
-
918
- - The default tooltip has been restyled from a dark surface to a light surface.
919
- - A visible border (`system.color.border.default`) is now applied to the container, replacing the
920
- previous transparent outline.
921
- - Tooltip boundaries remain visible in Windows High Contrast mode: when High Contrast is detected,
922
- Tooltip uses a solid outline (`outline: solid 1px CanvasText`) to ensure clear visibility.
923
- - Shape is now fully rounded using `system.shape.full`.
924
- - Box-shadow updated from `system.depth[2]` to `system.depth[3]`.
925
- - Type level is now `subtext.lg` (previously `subtext.md`).
926
- - Padding and spacing have been adjusted to accommodate the new styling.
927
-
928
992
  ## New Utilities
929
993
 
930
994
  ### cornerShapeStencil
@@ -954,13 +1018,6 @@ export const myStencil = createStencil({
954
1018
  `Card`, `Expandable` (`Expandable.Target`), `Menu` (`Menu.Card`, `Menu.List`, `Menu.Item`),
955
1019
  `MultiSelect`, and `Table` (`BaseTable`, `Table`) extend this stencil for their rounded corners.
956
1020
 
957
- ## Fonts
958
-
959
- Sana Canvas is a new theme available in v16, enabled by setting `data-theme="sana-canvas"` on
960
- `<html>` (or a scoped ancestor element). See our
961
- [Fonts guide](https://workday.github.io/canvas-kit/?path=/docs/guides-fonts--docs) for instructions
962
- on setting up the Sana Sans font required by this theme.
963
-
964
1021
  ## Deprecations
965
1022
 
966
1023
  We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove