diff --git a/MIGRATION.md b/MIGRATION.md index 035ea32..7e208fb 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -34,7 +34,6 @@ brandColor.black000 modified to brandColor.black #### JS Tokens ``` -colors.overlay.inverse removed colors.primary.shadow modified to colors.shadow.primary colors.primary.disabled removed colors.secondary.default removed diff --git a/src/js/themes/darkTheme/colors.ts b/src/js/themes/darkTheme/colors.ts index 27ac461..ed8219f 100644 --- a/src/js/themes/darkTheme/colors.ts +++ b/src/js/themes/darkTheme/colors.ts @@ -29,6 +29,7 @@ export const colors: ThemeColors = { overlay: { default: '#00000099', // For the default shade of screen alternative: '#000000cc', // For a stronger shade of screen + inverse: brandColor.grey000, // For elements used on top of overlay/alternative. Used for text, icon or border }, primary: { default: brandColor.blue300, // For interactive, active, and selected semantics. Used for text, background, icon or border diff --git a/src/js/themes/lightTheme/colors.ts b/src/js/themes/lightTheme/colors.ts index 9035a3e..9dc1d0a 100644 --- a/src/js/themes/lightTheme/colors.ts +++ b/src/js/themes/lightTheme/colors.ts @@ -29,6 +29,7 @@ export const colors: ThemeColors = { overlay: { default: '#00000099', // For the default shade of screen alternative: '#000000cc', // For a stronger shade of screen + inverse: brandColor.grey000, // For elements used on top of overlay/alternative. Used for text, icon or border }, primary: { default: brandColor.blue500, // For interactive, active, and selected semantics. Used for text, background, icon or border diff --git a/src/js/themes/types.ts b/src/js/themes/types.ts index 0ff4f02..3334a57 100644 --- a/src/js/themes/types.ts +++ b/src/js/themes/types.ts @@ -103,6 +103,10 @@ export type ThemeColors = { * {string} overlay.alternative - For a stronger shade of screen */ alternative: string; + /** + * {string} overlay.inverse - For elements used on top of overlay/alternative. Used for text, icon or border + */ + inverse: string; }; shadow: { /**