diff --git a/docs/src/__examples__/Badge/DEFAULT.tsx b/docs/src/__examples__/Badge/DEFAULT.tsx
index ff8c33ace8..ca755f4477 100644
--- a/docs/src/__examples__/Badge/DEFAULT.tsx
+++ b/docs/src/__examples__/Badge/DEFAULT.tsx
@@ -23,10 +23,10 @@ export default {
"success",
"critical",
"warning",
- "infoInverted",
- "criticalInverted",
- "successInverted",
- "warningInverted",
+ "infoSubtle",
+ "criticalSubtle",
+ "successSubtle",
+ "warningSubtle",
"bundleBasic",
"bundleMedium",
"bundleTop",
diff --git a/docs/src/__examples__/Badge/TYPES.tsx b/docs/src/__examples__/Badge/TYPES.tsx
index 210c00ac19..1f8bc46be4 100644
--- a/docs/src/__examples__/Badge/TYPES.tsx
+++ b/docs/src/__examples__/Badge/TYPES.tsx
@@ -10,18 +10,18 @@ export default {
{ name: "Success", code: `() => success` },
{ name: "Warning", code: `() => Warning` },
{ name: "Critical", code: `() => Critical` },
- { name: "infoInverted", code: `() => InfoInverted` },
+ { name: "infoSubtle", code: `() => InfoSubtle` },
{
- name: "criticalInverted",
- code: `() => CriticalInverted`,
+ name: "criticalSubtle",
+ code: `() => CriticalSubtle`,
},
{
- name: "successInverted",
- code: `() => successInverted`,
+ name: "successSubtle",
+ code: `() => successSubtle`,
},
{
- name: "warningInverted",
- code: `() => WarningInverted`,
+ name: "warningSubtle",
+ code: `() => WarningSubtle`,
},
{
name: "bundleBasic",
diff --git a/docs/src/__examples__/NotificationBadge/DEFAULT.tsx b/docs/src/__examples__/NotificationBadge/DEFAULT.tsx
index 580819adcd..d8534a3f9a 100644
--- a/docs/src/__examples__/NotificationBadge/DEFAULT.tsx
+++ b/docs/src/__examples__/NotificationBadge/DEFAULT.tsx
@@ -19,10 +19,10 @@ export default {
"success",
"critical",
"warning",
- "infoInverted",
- "criticalInverted",
- "successInverted",
- "warningInverted",
+ "infoSubtle",
+ "criticalSubtle",
+ "successSubtle",
+ "warningSubtle",
],
},
],
diff --git a/docs/src/__examples__/NotificationBadge/TYPES.tsx b/docs/src/__examples__/NotificationBadge/TYPES.tsx
index 7d80a67544..f564da73f7 100644
--- a/docs/src/__examples__/NotificationBadge/TYPES.tsx
+++ b/docs/src/__examples__/NotificationBadge/TYPES.tsx
@@ -6,11 +6,11 @@ export default {
3
- 3
+ 3
3
- 3
+ 3
),
diff --git a/docs/src/components/Navbar/index.tsx b/docs/src/components/Navbar/index.tsx
index c2ae3f5052..8b232b733b 100644
--- a/docs/src/components/Navbar/index.tsx
+++ b/docs/src/components/Navbar/index.tsx
@@ -245,7 +245,7 @@ const Navbar = ({ location, docNavigation }: Props) => {
{activeTab === "bookmarks" && (
Your bookmarks
-
+
{bookmarks ? Object.keys(bookmarks).length : 0}
@@ -264,7 +264,7 @@ const Navbar = ({ location, docNavigation }: Props) => {
>
Your bookmarks
-
+
{bookmarks ? Object.keys(bookmarks).length : 0}
@@ -301,7 +301,7 @@ const Navbar = ({ location, docNavigation }: Props) => {
title={
Your bookmarks
-
+
{bookmarks ? Object.keys(bookmarks).length : 0}
diff --git a/packages/orbit-components/src/Badge/Badge.stories.tsx b/packages/orbit-components/src/Badge/Badge.stories.tsx
index a92b3d523c..93a54a67d0 100644
--- a/packages/orbit-components/src/Badge/Badge.stories.tsx
+++ b/packages/orbit-components/src/Badge/Badge.stories.tsx
@@ -58,16 +58,16 @@ Info.story = {
},
};
-export const InfoInverted = () => {
+export const InfoSubtle = () => {
const content = text("Content", "Badge");
return (
- }>
+ }>
{content}
);
};
-InfoInverted.story = {
+InfoSubtle.story = {
parameters: {
info: "Check Orbit.Kiwi for more detailed design guidelines.",
},
@@ -88,16 +88,16 @@ Success.story = {
},
};
-export const SuccessInverted = () => {
+export const SuccessSubtle = () => {
const content = text("Content", "Badge");
return (
- }>
+ }>
{content}
);
};
-SuccessInverted.story = {
+SuccessSubtle.story = {
parameters: {
info: "Check Orbit.Kiwi for more detailed design guidelines.",
},
@@ -118,16 +118,16 @@ Warning.story = {
},
};
-export const WarningInverted = () => {
+export const WarningSubtle = () => {
const content = text("Content", "Badge");
return (
- }>
+ }>
{content}
);
};
-WarningInverted.story = {
+WarningSubtle.story = {
parameters: {
info: "Check Orbit.Kiwi for more detailed design guidelines.",
},
@@ -148,16 +148,16 @@ Critical.story = {
},
};
-export const CriticalInverted = () => {
+export const CriticalSubtle = () => {
const content = text("Content", "Badge");
return (
- }>
+ }>
{content}
);
};
-CriticalInverted.story = {
+CriticalSubtle.story = {
parameters: {
info: "Check Orbit.Kiwi for more detailed design guidelines.",
},
@@ -209,7 +209,7 @@ BadgeWithTranslatedNode.story = {
export const Playground = () => {
const content = text("Content", "Badge");
- const type = select("Type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.INFO);
+ const type = select("Type", Object.values(TYPE_OPTIONS), TYPE_OPTIONS.INFO_SUBTLE);
const dataTest = text("dataTest", "test");
const Icon = getIcon(getIcons("Airplane"));
const ariaLabel = text("ariaLabel", "test");
diff --git a/packages/orbit-components/src/Badge/README.md b/packages/orbit-components/src/Badge/README.md
index 1efe3c4ffb..e9aff0ab96 100644
--- a/packages/orbit-components/src/Badge/README.md
+++ b/packages/orbit-components/src/Badge/README.md
@@ -39,21 +39,21 @@ Table below contains all types of the props available for object in Carrier arra
### enum
-| type |
-| :------------------- |
-| `"neutral"` |
-| `"dark"` |
-| `"info"` |
-| `"success"` |
-| `"warning"` |
-| `"critical"` |
-| `"infoInverted"` |
-| `"criticalInverted"` |
-| `"successInverted"` |
-| `"warningInverted"` |
-| `"bundleBasic"` |
-| `"bundleMedium"` |
-| `"bundleTop"` |
+| type |
+| :----------------- |
+| `"neutral"` |
+| `"dark"` |
+| `"info"` |
+| `"success"` |
+| `"warning"` |
+| `"critical"` |
+| `"infoSubtle"` |
+| `"criticalSubtle"` |
+| `"successSubtle"` |
+| `"warningSubtle"` |
+| `"bundleBasic"` |
+| `"bundleMedium"` |
+| `"bundleTop"` |
## Functional specs
diff --git a/packages/orbit-components/src/Badge/consts.ts b/packages/orbit-components/src/Badge/consts.ts
index 2760dff5ed..8f4e083e65 100644
--- a/packages/orbit-components/src/Badge/consts.ts
+++ b/packages/orbit-components/src/Badge/consts.ts
@@ -2,16 +2,16 @@ import type { Type } from "./types";
export const TYPE_OPTIONS: Record = {
NEUTRAL: "neutral",
+ INFO_SUBTLE: "infoSubtle",
+ SUCCESS_SUBTLE: "successSubtle",
+ WARNING_SUBTLE: "warningSubtle",
+ CRITICAL_SUBTLE: "criticalSubtle",
+ DARK: "dark",
+ WHITE: "white",
INFO: "info",
+ CRITICAL: "critical",
SUCCESS: "success",
WARNING: "warning",
- CRITICAL: "critical",
- DARK: "dark",
- WHITE: "white",
- INFO_INVERTED: "infoInverted",
- CRITICAL_INVERTED: "criticalInverted",
- SUCCESS_INVERTED: "successInverted",
- WARNING_INVERTED: "warningInverted",
BUNDLE_BASIC: "bundleBasic",
BUNDLE_MEDIUM: "bundleMedium",
BUNDLE_TOP: "bundleTop",
diff --git a/packages/orbit-components/src/Badge/index.js.flow b/packages/orbit-components/src/Badge/index.js.flow
index 46f7bb62bd..322d31ea17 100644
--- a/packages/orbit-components/src/Badge/index.js.flow
+++ b/packages/orbit-components/src/Badge/index.js.flow
@@ -15,10 +15,10 @@ export type Type =
| "warning"
| "critical"
| "white"
- | "infoInverted"
- | "criticalInverted"
- | "successInverted"
- | "warningInverted"
+ | "infoSubtle"
+ | "criticalSubtle"
+ | "successSubtle"
+ | "warningSubtle"
| "bundleBasic"
| "bundleMedium"
| "bundleTop";
diff --git a/packages/orbit-components/src/Badge/index.tsx b/packages/orbit-components/src/Badge/index.tsx
index 55fa9a8aeb..960f2bd675 100644
--- a/packages/orbit-components/src/Badge/index.tsx
+++ b/packages/orbit-components/src/Badge/index.tsx
@@ -10,32 +10,32 @@ const getTypeToken = ({ name, theme, type }: { name: string; theme: Theme; type:
const tokens = {
[TOKENS.background]: {
[TYPE_OPTIONS.NEUTRAL]: theme.orbit.paletteCloudLight,
- [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueLight,
- [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenLight,
- [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeLight,
- [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedLight,
+ [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.paletteBlueLight,
+ [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.paletteGreenLight,
+ [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.paletteOrangeLight,
+ [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedLight,
[TYPE_OPTIONS.DARK]: theme.orbit.paletteInkDark,
[TYPE_OPTIONS.WHITE]: theme.orbit.paletteWhite,
- [TYPE_OPTIONS.INFO_INVERTED]: theme.orbit.paletteBlueNormal,
- [TYPE_OPTIONS.CRITICAL_INVERTED]: theme.orbit.paletteRedNormal,
- [TYPE_OPTIONS.SUCCESS_INVERTED]: theme.orbit.paletteGreenNormal,
- [TYPE_OPTIONS.WARNING_INVERTED]: theme.orbit.paletteOrangeNormal,
+ [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueNormal,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedNormal,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenNormal,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeNormal,
[TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.backgroundBadgeBundleBasic,
[TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.backgroundBadgeBundleMedium,
[TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.backgroundBadgeBundleTop,
},
[TOKENS.color]: {
[TYPE_OPTIONS.NEUTRAL]: theme.orbit.paletteInkDark,
- [TYPE_OPTIONS.INFO]: theme.orbit.paletteBlueDark,
- [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteGreenDark,
- [TYPE_OPTIONS.WARNING]: theme.orbit.paletteOrangeDark,
- [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteRedDark,
+ [TYPE_OPTIONS.INFO_SUBTLE]: theme.orbit.paletteBlueDark,
+ [TYPE_OPTIONS.SUCCESS_SUBTLE]: theme.orbit.paletteGreenDark,
+ [TYPE_OPTIONS.WARNING_SUBTLE]: theme.orbit.paletteOrangeDark,
+ [TYPE_OPTIONS.CRITICAL_SUBTLE]: theme.orbit.paletteRedDark,
[TYPE_OPTIONS.DARK]: theme.orbit.paletteWhite,
[TYPE_OPTIONS.WHITE]: theme.orbit.paletteInkDark,
- [TYPE_OPTIONS.INFO_INVERTED]: theme.orbit.paletteWhite,
- [TYPE_OPTIONS.CRITICAL_INVERTED]: theme.orbit.paletteWhite,
- [TYPE_OPTIONS.SUCCESS_INVERTED]: theme.orbit.paletteWhite,
- [TYPE_OPTIONS.WARNING_INVERTED]: theme.orbit.paletteWhite,
+ [TYPE_OPTIONS.INFO]: theme.orbit.paletteWhite,
+ [TYPE_OPTIONS.CRITICAL]: theme.orbit.paletteWhite,
+ [TYPE_OPTIONS.SUCCESS]: theme.orbit.paletteWhite,
+ [TYPE_OPTIONS.WARNING]: theme.orbit.paletteWhite,
[TYPE_OPTIONS.BUNDLE_BASIC]: theme.orbit.paletteWhite,
[TYPE_OPTIONS.BUNDLE_MEDIUM]: theme.orbit.paletteWhite,
[TYPE_OPTIONS.BUNDLE_TOP]: theme.orbit.paletteWhite,
diff --git a/packages/orbit-components/src/Badge/types.d.ts b/packages/orbit-components/src/Badge/types.d.ts
index ba5f5325f5..ab52a5ecda 100644
--- a/packages/orbit-components/src/Badge/types.d.ts
+++ b/packages/orbit-components/src/Badge/types.d.ts
@@ -13,10 +13,10 @@ export type Type =
| "warning"
| "critical"
| "white"
- | "infoInverted"
- | "criticalInverted"
- | "successInverted"
- | "warningInverted"
+ | "infoSubtle"
+ | "criticalSubtle"
+ | "successSubtle"
+ | "warningSubtle"
| "bundleBasic"
| "bundleMedium"
| "bundleTop";
diff --git a/packages/orbit-components/src/Card/Card.stories.tsx b/packages/orbit-components/src/Card/Card.stories.tsx
index 0bd77449d9..ecbdcb7d7b 100644
--- a/packages/orbit-components/src/Card/Card.stories.tsx
+++ b/packages/orbit-components/src/Card/Card.stories.tsx
@@ -199,7 +199,7 @@ export const CardWithDefaultExpanded = () => {
header={
Trip length: 1h55m
- } type="warning">
+ } type="warningSubtle">
Unavailable
@@ -221,7 +221,7 @@ export const CardWithDefaultExpanded = () => {
header={
Trip length: 1h55m
- } type="warning">
+ } type="warningSubtle">
Unavailable
diff --git a/packages/orbit-components/src/NotificationBadge/NotificationBadge.stories.tsx b/packages/orbit-components/src/NotificationBadge/NotificationBadge.stories.tsx
index 1bac2a10d5..5d5f575d4c 100644
--- a/packages/orbit-components/src/NotificationBadge/NotificationBadge.stories.tsx
+++ b/packages/orbit-components/src/NotificationBadge/NotificationBadge.stories.tsx
@@ -50,12 +50,12 @@ Info.story = {
},
};
-export const InfoInverted = () => {
+export const InfoSubtle = () => {
const content = text("Content", "10");
- return {content};
+ return {content};
};
-InfoInverted.story = {
+InfoSubtle.story = {
parameters: {
info: "Check Orbit.Kiwi for more detailed design guidelines.",
},
@@ -94,12 +94,12 @@ Critical.story = {
},
};
-export const CriticalInverted = () => {
+export const CriticalSubtle = () => {
const content = text("Content", "10");
- return {content};
+ return {content};
};
-CriticalInverted.story = {
+CriticalSubtle.story = {
parameters: {
info: "Check Orbit.Kiwi for more detailed design guidelines.",
},
diff --git a/packages/orbit-components/src/NotificationBadge/README.md b/packages/orbit-components/src/NotificationBadge/README.md
index 15b2afa2d6..1472c59ae8 100644
--- a/packages/orbit-components/src/NotificationBadge/README.md
+++ b/packages/orbit-components/src/NotificationBadge/README.md
@@ -27,13 +27,13 @@ Table below contains all types of the props available in NotificationBadge compo
### enum
-| type |
-| :------------------- |
-| `"neutral"` |
-| `"dark"` |
-| `"info"` |
-| `"success"` |
-| `"warning"` |
-| `"critical"` |
-| `"infoInverted"` |
-| `"criticalInverted"` |
+| type |
+| :----------------- |
+| `"neutral"` |
+| `"dark"` |
+| `"info"` |
+| `"success"` |
+| `"warning"` |
+| `"critical"` |
+| `"infoSubtle"` |
+| `"criticalSubtle"` |
diff --git a/packages/orbit-components/src/NotificationBadge/__tests__/index.test.tsx b/packages/orbit-components/src/NotificationBadge/__tests__/index.test.tsx
index cfef49be54..393b806aba 100644
--- a/packages/orbit-components/src/NotificationBadge/__tests__/index.test.tsx
+++ b/packages/orbit-components/src/NotificationBadge/__tests__/index.test.tsx
@@ -7,7 +7,7 @@ import Sightseeing from "../../icons/Sightseeing";
describe("NotificationBadge", () => {
const content = "badge";
- const type = "info";
+ const type = "infoSubtle";
const dataTest = "test";
const ariaLabel = content;
diff --git a/packages/orbit-components/src/Tile/Tile.stories.tsx b/packages/orbit-components/src/Tile/Tile.stories.tsx
index d151fc6c04..a73361fa41 100644
--- a/packages/orbit-components/src/Tile/Tile.stories.tsx
+++ b/packages/orbit-components/src/Tile/Tile.stories.tsx
@@ -117,7 +117,7 @@ export const ExpandableWithCustomDescription = () => {
13/37/1337
- You
+ You
}
diff --git a/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx b/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx
index 9ab3552c34..bfdc63b825 100644
--- a/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx
+++ b/packages/orbit-components/src/TileGroup/TileGroup.stories.tsx
@@ -109,7 +109,7 @@ export const ExpandableWithCustomDescription = () => {
13/37/1337
- You
+ You
}
@@ -132,7 +132,7 @@ export const ExpandableWithCustomDescription = () => {
13/37/1337
- You
+ You
}
@@ -155,7 +155,7 @@ export const ExpandableWithCustomDescription = () => {
13/37/1337
- You
+ You
}
@@ -178,7 +178,7 @@ export const ExpandableWithCustomDescription = () => {
13/37/1337
- You
+ You
}
diff --git a/packages/orbit-themer/src/Components/Badge/index.tsx b/packages/orbit-themer/src/Components/Badge/index.tsx
index bcacde5ec1..cd679f7726 100644
--- a/packages/orbit-themer/src/Components/Badge/index.tsx
+++ b/packages/orbit-themer/src/Components/Badge/index.tsx
@@ -11,10 +11,10 @@ const Badges = () => {
{message}
{message}
{message}
- {message}
- {message}
- {message}
- {message}
+ {message}
+ {message}
+ {message}
+ {message}
{message}
diff --git a/packages/orbit-themer/src/Tabs/ColorTab.tsx b/packages/orbit-themer/src/Tabs/ColorTab.tsx
index 9865ede15c..6a2afd0fb0 100644
--- a/packages/orbit-themer/src/Tabs/ColorTab.tsx
+++ b/packages/orbit-themer/src/Tabs/ColorTab.tsx
@@ -84,7 +84,7 @@ const ColorTab = ({ title, children, colorPath }) => {
{title}
{isAdjusted && (
- }>
+ }>
Adjusted