@pingux/astro 2.207.1-alpha.0 → 2.208.1-alpha.0

package/lib/components/SearchField/SearchField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as SearchFieldStories from './SearchField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={SearchFieldStories} isTemplate />
 
@@ -22,13 +24,9 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Enter or Space | Once the user starts typing, the previously hidden clear button can be focused and selected by pressing the Enter or Space key. |
-| Esc and Enter | The field can be cleared by pressing the Escape key and handles submit events on Enter. |
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Enter or Space', description: 'Once the user starts typing, the previously hidden clear button can be focused and selected by pressing the Enter or Space key.' },
+  { key: 'Esc and Enter', description: 'The field can be cleared by pressing the Escape key and handles submit events on Enter.' },
+]} />

package/lib/components/SelectField/SelectField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as SelectFieldStories from './SelectField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={SelectFieldStories} isTemplate />
 
@@ -22,26 +24,19 @@ This component requires the OverlayProvider and Item originating from [react-sta
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component.|
-| Space or Enter | Pressing Space or Enter when the trigger button is focused opens or closes the menu. Pressing Space or Enter when the menu item is focused selects the listbox option. |
-| Arrow keys | Can be used to move through the listbox selection. |
-| Typing in input field | Adds focus to it and opens the popover. |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first item in the listbox. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last item in the listbox. |
-| Esc | Pressing the escape key closes the popover menu and adds focus to the input.|
-
-#### Screen readers
-
-This component uses the following attributes to assist screen readers:
-- The trigger button uses the **`aria-labelledby`** attribute to reference the label ID, the **`aria-expanded`** attribute to indicate the expansion or collapse of the popover, 
-- The **`aria-haspopup`** attribute indicates the type of popup content as a listbox. Once expanded, the **`aria-controls`** attribute is added to the button pointing to the popover. 
-- The component uses the **`aria-invalid`** attribute to detect incorrect values or status errors, and is set to “False” by default.
-- The listbox uses the **`aria-labelledby`** attribute pointing to the label ID.
-- Each option in the list uses the **`aria-selected`** attribute to indicate the selection state, **`aria-posinset`** to give the option’s position in the current set of list items, and **`aria-setsize`** to define the current set of options. The default **`aria-disabled`** value is false for each option.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Space or Enter', description: 'Pressing Space or Enter when the trigger button is focused opens or closes the menu. Pressing Space or Enter when the menu item is focused selects the listbox option.' },
+  { key: 'Arrow keys', description: 'Can be used to move through the listbox selection.' },
+  KeyboardRows.typingOpenPopover,
+  KeyboardRows.homeFirstListboxItem,
+  KeyboardRows.endLastListboxItem,
+  { key: 'Esc', description: 'Pressing the escape key closes the popover menu and adds focus to the input.' },
+]} screenReaderRows={[
+  "The trigger button uses the **`aria-labelledby`** attribute to reference the label ID, the **`aria-expanded`** attribute to indicate the expansion or collapse of the popover, ",
+  "The **`aria-haspopup`** attribute indicates the type of popup content as a listbox. Once expanded, the **`aria-controls`** attribute is added to the button pointing to the popover. ",
+  "The component uses the **`aria-invalid`** attribute to detect incorrect values or status errors, and is set to “False” by default.",
+  "The listbox uses the **`aria-labelledby`** attribute pointing to the label ID.",
+  "Each option in the list uses the **`aria-selected`** attribute to indicate the selection state, **`aria-posinset`** to give the option’s position in the current set of list items, and **`aria-setsize`** to define the current set of options. The default **`aria-disabled`** value is false for each option.",
+]} />

package/lib/components/Separator/Separator.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as SeparatorStories from './Separator.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={SeparatorStories} isTemplate />
 
@@ -15,6 +16,6 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Screen Readers
-
-The **`aria-orientation`** attribute indicates whether the  orientation is horizontal, vertical, unknown, or ambiguous
+<AccessibilityTable screenReaderRows={[
+  'The **`aria-orientation`** attribute indicates whether the  orientation is horizontal, vertical, unknown, or ambiguous',
+]} />

package/lib/components/ServerErrorBoundary/ServerErrorBoundary.mdx

@@ -1,5 +1,7 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 import * as ServerErrorBoundaryStories from './ServerErrorBoundary.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={ServerErrorBoundaryStories} isTemplate />
 
@@ -15,11 +17,7 @@ This component can be used independently and does not require additional compone
 
 This component should adhere to the [WAI-ARIA Button](https://www.w3.org/TR/wai-aria-practices-1.1/examples/button/button.html) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys           | Functions                                             |
-| -------------- | ----------------------------------------------------- |
-| Space or Enter | Selects the button.                                   |
-| Tab            | Focuses the button and follows the page tab sequence. |
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.spaceEnterSelectsButton,
+  KeyboardRows.tabFocusesButton,
+]} />

package/lib/components/SliderField/SliderField.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as SliderFieldStories from './SliderField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={SliderFieldStories} isTemplate />
 
@@ -57,20 +58,16 @@ The `SliderField` component is used to allow users to select a value from a rang
 
 This component adheres to accessibility guidelines to ensure a better user experience for all users.
 
-#### Keyboard Navigation
-
-| Keys         | Function                                                                 |
-| ------------ | ----------------------------------------------------------------------- |
-| Tab          | Moves focus to the slider.                                              |
-| Arrow Keys   | Adjusts the slider value incrementally.                                  |
-| Home         | Moves the slider to the minimum value.                                  |
-| End          | Moves the slider to the maximum value.                                  |
-
-#### Screen Readers
-
-- **`aria-valuenow`**: Announces the current value of the slider.
-- **`aria-valuemin` and `aria-valuemax`**: Define the minimum and maximum values of the slider.
-- **`aria-orientation`**: Indicates whether the slider is horizontal or vertical.
+<AccessibilityTable keyboardRows={[
+  { key: 'Tab', description: 'Moves focus to the slider.' },
+  { key: 'Arrow Keys', description: 'Adjusts the slider value incrementally.' },
+  { key: 'Home', description: 'Moves the slider to the minimum value.' },
+  { key: 'End', description: 'Moves the slider to the maximum value.' },
+]} screenReaderRows={[
+  '**`aria-valuenow`**: Announces the current value of the slider.',
+  '**`aria-valuemin` and `aria-valuemax`**: Define the minimum and maximum values of the slider.',
+  '**`aria-orientation`**: Indicates whether the slider is horizontal or vertical.',
+]} />
 
 ### Example Usage
 
@@ -125,4 +122,4 @@ This component adheres to accessibility guidelines to ensure a better user exper
   minValue={0}
   maxValue={100}
 />
-```
+```

package/lib/components/StatusIcon/StatusIcon.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as StatusIconStories from './StatusIcon.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={StatusIconStories} isTemplate />
 
@@ -15,6 +16,6 @@ It is built on top of the [Box from Theme-UI](https://theme-ui.com/components/bo
 
 This component can be used independently and does not require additional components.
 
-#### Screen Readers
-
-If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.
+<AccessibilityTable screenReaderRows={[
+  'If the icon has a title associated with it, the **`aria-labelledby`** attribute is used to provide the label ID.',
+]} />

package/lib/components/Stepper/Stepper.mdx

@@ -1,5 +1,7 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 import * as StepperStories from './Stepper.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={StepperStories} isTemplate />
 
@@ -23,26 +25,22 @@ This component requires the Item originating from [react-stately/collections](ht
 
 This component should adhere to the [WAI-ARIA Stepper](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines.
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys                                                 | Function                                                                              |
-| ---------------------------------------------------- | ------------------------------------------------------------------------------------- |
-| Tab                                                  | The field is focusable using the Tab key and follows the page tab sequence.           |
-| Arrow keys                                           | When this field is focused, the arrow keys can be used to navigate through the steps. |
-| Shift + Tab                                          | Moves focus to the previous focusable component.                                      |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home | Shifts the focus to the first step.                                                   |
-| End(Fn + Left Arrow Key) Or Control/Command + End    | Shifts the focus to the last step.                                                    |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-
-- The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous.
-- Each step uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.
-- Each step uses the **`aria-labelledby`** with the label ID to reference it.
-
+<AccessibilityTable
+  keyboardRows={[
+    KeyboardRows.tabField,
+    { key: 'Arrow keys', description: 'When this field is focused, the arrow keys can be used to navigate through the steps.' },
+    KeyboardRows.shiftTabFocusPrevious,
+    { key: 'Home(Fn + Right Arrow Key) Or Control/Command + Home', description: 'Shifts the focus to the first step.' },
+    { key: 'End(Fn + Left Arrow Key) Or Control/Command + End', description: 'Shifts the focus to the last step.' },
+  ]}
+  screenReaderRows={[
+    ScreenReaderRows.ariaOrientationNoTrailingSpace,
+    'Each step uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.',
+    'Each step uses the **`aria-labelledby`** with the label ID to reference it.',
+  ]}
+/>
+
+{/* Non-standard section: '#### Usage' contains layout guidance. Flagged for future migration. */}
 #### Usage
 
 - The stepper component is always center-aligned in its context, whether it's in a page, a panel, or a popup.

package/lib/components/SwitchField/SwitchField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as SwitchFieldStories from './SwitchField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={SwitchFieldStories} isTemplate />
 
@@ -21,17 +23,10 @@ This component can be used independently and does not require additional compone
 
 This component should adhere to the [WAI-ARIA Switch](https://www.w3.org/WAI/ARIA/apg/patterns/switch/) accessibility guidelines. 
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component.|
-| Space | When focused, Space toggles the switched field. |
-
-#### Screen readers
-
-The hidden input uses the **`aria-labelledby`** attribute to associate the label, the **`aria-label`** attribute to provide an accessible name, 
-and the **`aria-checked`** attribute for the switched state.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Space', description: 'When focused, Space toggles the switched field.' },
+]} screenReaderRows={[
+  'The hidden input uses the **`aria-labelledby`** attribute to associate the label, the **`aria-label`** attribute to provide an accessible name, and the **`aria-checked`** attribute for the switched state.',
+]} />

package/lib/components/TableBase/TableBase.js

@@ -328,7 +328,10 @@ function TableColumnHeader(props) {
     isRow: true,
     gap: "sm",
     alignItems: "center"
-  }, ___EmotionJSX(Text, null, column.rendered), allowsSorting && sortIcon), allowsResizing && ___EmotionJSX(Resizer, {
+  }, ___EmotionJSX(Text, {
+    as: "h4",
+    variant: "headText"
+  }, column.rendered), allowsSorting && sortIcon), allowsResizing && ___EmotionJSX(Resizer, {
     column: column,
     layoutState: layoutState,
     onResizeStart: onResizeStart,

package/lib/components/TableBase/TableBase.stories.js

@@ -79,11 +79,11 @@ var objects = [{
   total_grant: '75,000'
 }];
 var statusVariant = {
-  Pending: 'warningStatusBadge',
-  Failed: 'criticalStatusBadge',
-  Rejected: 'criticalStatusBadge',
-  Active: 'healthyStatusBadge',
-  Inactive: 'secondaryStatusBadge'
+  Pending: 'tableBaseBadge.secondary',
+  Failed: 'tableBaseBadge.critical',
+  Rejected: 'tableBaseBadge.critical',
+  Active: 'tableBaseBadge.healthy',
+  Inactive: 'tableBaseBadge.secondary'
 };
 export var Default = function Default() {
   return ___EmotionJSX(Card, {
@@ -246,11 +246,11 @@ export var DynamicWithSorting = function DynamicWithSorting() {
   }, {
     name: 'Population',
     key: 'population',
-    isSortable: true
+    isSortable: false
   }, {
     name: 'Continent',
     key: 'continent',
-    isSortable: true
+    isSortable: false
   }];
   var rows = [{
     id: 1,
@@ -357,7 +357,7 @@ export var DynamicWithSorting = function DynamicWithSorting() {
   }, function (column) {
     return ___EmotionJSX(Column, {
       minWidth: 155,
-      allowsSorting: true
+      allowsSorting: column.isSortable
     }, column.name);
   }), ___EmotionJSX(TBody, {
     items: list.items,

package/lib/components/Tabs/Tabs.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TabsStories from './Tabs.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TabsStories} isTemplate />
 
@@ -21,21 +23,14 @@ This component requires the Tab component.
 
 This component should adhere to the [WAI-ARIA Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) accessibility guidelines. 
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Function |
-| ---- | ---- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Arrow keys | When a tab is focused, tabs can be navigated using the left and right arrow keys. |
-| Shift + Tab | Moves focus to the previous focusable component.  |
-| Home(Fn + Right Arrow Key) Or Control/Command + Home| Shifts the focus to the first tab. |
-| End(Fn + Left Arrow Key) Or Control/Command + End | Shifts the focus to the last tab. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-- The **`aria-orientation`** attribute indicates whether the orientation is horizontal, vertical, unknown, or ambiguous. 
-- Each tab uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.
-- Each tab uses the **`aria-labelledby`** with the label ID to reference it.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  { key: 'Arrow keys', description: 'When a tab is focused, tabs can be navigated using the left and right arrow keys.' },
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Home(Fn + Right Arrow Key) Or Control/Command + Home', description: 'Shifts the focus to the first tab.' },
+  { key: 'End(Fn + Left Arrow Key) Or Control/Command + End', description: 'Shifts the focus to the last tab.' },
+]} screenReaderRows={[
+  ScreenReaderRows.ariaOrientationWithTrailingSpace,
+  'Each tab uses the **`aria-selected`** attribute to indicate the selection status, and the **`aria-control`** attribute is supplied with the associated panel ID that displays the content.',
+  'Each tab uses the **`aria-labelledby`** with the label ID to reference it.',
+]} />

package/lib/components/TextAreaField/TextAreaField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TextAreaFieldStories from './TextAreaField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TextAreaFieldStories} isTemplate />
 
@@ -21,15 +23,9 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-
-#### Screen readers
-
-This component uses the **`aria-labelledby`** attribute pointing to the label, and the **`aria-invalid`** attribute to detect incorrect values or status errors, which is set to “False” by default.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelledByInvalidFalse,
+]} />

package/lib/components/TextField/TextField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TextFieldStories from './TextField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TextFieldStories} isTemplate />
 
@@ -21,15 +23,9 @@ This component can be used independently and does not require additional compone
 
 ### Accessibility
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component. 
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | The field is focusable using the Tab key and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-
-#### Screen readers
-
-This component uses the **`aria-labelledby`** attribute pointing to the label, and the **`aria-invalid`** attribute to detect incorrect values or status errors, which is set to “False” by default.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabField,
+  KeyboardRows.shiftTabFocusPrevious,
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelledByInvalidFalse,
+]} />

package/lib/components/TimeField/TimeField.mdx

@@ -1,5 +1,7 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TimeFieldStories from './TimeField.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
+import { KeyboardRows, ScreenReaderRows } from '../../utils/docUtils/accessibilityTableConstants';
 
 <Meta of={TimeFieldStories} isTemplate />
 
@@ -16,21 +18,13 @@ and [useTimeFieldState](https://react-spectrum.adobe.com/react-stately/useTimeFi
 
 This component can be used independently and does not require additional components. 
 
-#### Keyboard Navigation
-
-These keys provide additional functionality to the component.
-
-| Keys | Functions |
-| ---- | --------- |
-| Tab | Focuses the field and follows the page tab sequence. |
-| Shift + Tab | Moves focus to the previous focusable component. |
-| Up and down Arrow keys | When segments are focused, it increments and decrements time values |
-| Left and right arrows | Moves focus between segments. |
-
-#### Screen Readers
-
-This component uses the following attributes to assist screen readers:
-
-- The **`aria-label`** attribute is used to provide an accessible name.
-- The hidden input, TimeField, and all spin buttons have an **`aria-labelledby`** attribute pointing to the label ID, along with the **`aria-label`** attribute for an accessible name.
-- Each spin button has an **`aria-valuenow`**, **`aria-valuemin`**, and **`aria-valuemax`** to represent the current value, minimum allowed value, and maximum allowed value.
+<AccessibilityTable keyboardRows={[
+  KeyboardRows.tabFocusesField,
+  KeyboardRows.shiftTabFocusPrevious,
+  { key: 'Up and down Arrow keys', description: 'When segments are focused, it increments and decrements time values.' },
+  { key: 'Left and right arrows', description: 'Moves focus between segments.' },
+]} screenReaderRows={[
+  ScreenReaderRows.ariaLabelAccessibleName,
+  'The hidden input, TimeField, and all spin buttons have an **`aria-labelledby`** attribute pointing to the label ID, along with the **`aria-label`** attribute for an accessible name.',
+  'Each spin button has an **`aria-valuenow`**, **`aria-valuemin`**, and **`aria-valuemax`** to represent the current value, minimum allowed value, and maximum allowed value.',
+]} />

package/lib/components/TooltipTrigger/TooltipTrigger.mdx

@@ -1,5 +1,6 @@
 import { Meta } from '@storybook/addon-docs/blocks';
 import * as TooltipTriggerStories from './TooltipTrigger.stories';
+import AccessibilityTable from '../../utils/docUtils/AccessibilityTable';
 
 <Meta of={TooltipTriggerStories} isTemplate />
 
@@ -19,6 +20,6 @@ This component requires the [Button](./?path=/docs/components-button--default) a
 
 ### Accessibility
 
-#### Screen Readers
-
-The trigger button uses the **`aria-describedby`** attribute with the tooltip container ID to announce the screen reader content when it becomes visible.
+<AccessibilityTable screenReaderRows={[
+  'The trigger button uses the **`aria-describedby`** attribute with the tooltip container ID to announce the screen reader content when it becomes visible.',
+]} />

package/lib/styles/themeOverrides/nextGenDarkMode/variants/badges.js

@@ -103,6 +103,42 @@ var itemBadgeWithSlot = _objectSpread(_objectSpread({}, selectedItemBadge), {},
     }
   }
 });
+var tableBaseBadgeSpanStyle = {
+  fontSize: '11.25px',
+  lineHeight: '1'
+};
+var tableBaseBadge = {
+  active: {
+    backgroundColor: "".concat(astroTokensDark.color.blue[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokensDark.color.black
+    })
+  },
+  warning: {
+    backgroundColor: "".concat(astroTokensDark.color.yellow[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokensDark.color.black
+    })
+  },
+  critical: {
+    backgroundColor: "".concat(astroTokensDark.color.red[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokensDark.color.black
+    })
+  },
+  healthy: {
+    backgroundColor: "".concat(astroTokensDark.color.green[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokensDark.color.black
+    })
+  },
+  secondary: {
+    backgroundColor: "".concat(astroTokensDark.color.gray[500], " !important"),
+    '& > span': _objectSpread(_objectSpread({}, tableBaseBadgeSpanStyle), {}, {
+      color: astroTokensDark.color.black
+    })
+  }
+};
 var badges = {
   baseBadge: baseBadge,
   primary: primary,
@@ -147,6 +183,7 @@ var badges = {
     '& span': {
       color: 'font.base'
     }
-  }
+  },
+  tableBaseBadge: tableBaseBadge
 };
 export default badges;

package/lib/styles/themeOverrides/nextGenDarkMode/variants/cards.js

@@ -1,3 +1,4 @@
+import { astroTokensDark } from '@pingux/onyx-tokens';
 var cards = {
   dark: {
     border: '1px solid',
@@ -24,6 +25,9 @@ var cards = {
   },
   activeCard: {
     borderColor: 'border.attachment'
+  },
+  tableWrapper: {
+    borderColor: astroTokensDark.color.common.border
   }
 };
 export default cards;

package/lib/styles/themeOverrides/nextGenDarkMode/variants/text.js

@@ -49,6 +49,9 @@ export var text = {
   pageHeaderTitle: {
     color: astroTokensDark.color.gray[100]
   },
+  headText: {
+    color: astroTokensDark.color.font.base
+  },
   linkSelectFieldLabel: {
     color: astroTokensDark.color.font.link
   },

package/lib/styles/themeOverrides/nextGenDarkMode/variants/variants.js

@@ -1,5 +1,4 @@
 import { astroTokensDark } from '@pingux/onyx-tokens';
-import { colors } from '../colors';
 import { avatar } from './avatar';
 import callout from './callout';
 import { footer } from './footer';
@@ -254,18 +253,41 @@ export default {
       }
     },
     caption: {
-      color: 'text.secondary'
+      color: astroTokensDark.color.font.base,
+      borderBottomColor: astroTokensDark.color.common.border
     },
     thead: {
+      borderBottomColor: astroTokensDark.color.common.border,
       '&.is-sticky': {
-        boxShadow: "0 1px 0 ".concat(colors.border.base)
+        boxShadow: "0 1px 0 ".concat(astroTokensDark.color.common.border)
+      }
+    },
+    tbody: {
+      borderTopColor: astroTokensDark.color.common.border
+    },
+    row: {
+      borderBottomColor: astroTokensDark.color.common.border,
+      '&.is-hovered': {
+        bg: astroTokensDark.color['table-row'].hover.bg,
+        '& > td:last-of-type': {
+          bg: astroTokensDark.color['table-row'].hover.bg
+        }
+      },
+      '&:nth-of-type(odd)': {
+        bg: astroTokensDark.color.common.bg.base,
+        '&.is-hovered': {
+          bg: astroTokensDark.color['table-row'].hover.bg
+        },
+        '& > td:last-of-type': {
+          bg: astroTokensDark.color.common.bg.base
+        }
       }
     },
     head: {
-      color: 'text.secondary'
+      color: astroTokensDark.color.font.base
     },
     data: {
-      color: 'text.secondary'
+      color: astroTokensDark.color.font.base
     },
     resizer: {
       backgroundColor: astroTokensDark.color.common['border-dark']

package/lib/styles/themes/next-gen/next-gen.js

@@ -54,7 +54,7 @@ var nextGenTheme = {
     codeView: 'Consolas, Monaco, Andale Mono, Ubuntu Mono, monospace'
   },
   shadows: {
-    standard: _concatInstanceProperty(_context = "0 ".concat(astroTokens.spacing.card.shadow.y, " ")).call(_context, astroTokens.spacing.card.shadow.blur, " 0 rgba(0, 0, 0, 0.13)")
+    standard: _concatInstanceProperty(_context = "0 ".concat(astroTokens.spacing.card.shadow.y, "px ")).call(_context, astroTokens.spacing.card.shadow.blur, "px 0 rgba(0, 0, 0, 0.13)")
   },
   sizes: sizes,
   badges: badges,