inverseOn => onInverse

Author: Luke Bowerman

packages/components/src/Text/text_variant.ts

@@ -49,7 +49,7 @@ export const textVariant = variant({
       color: 'text1',
     },
     inverted: {
-      color: 'inverseOn',
+      color: 'onInverse',
     },
     positive: {
       color: 'positive',

packages/components/src/Tooltip/Tooltip.tsx

@@ -217,7 +217,7 @@ export function useTooltip({
           backgroundColor="inverse"
           borderRadius="medium"
           boxShadow={3}
-          color="inverseOn"
+          color="onInverse"
           {...surfaceStyles}
         >
           <TooltipContent

packages/design-tokens/src/system/color/specifiable.ts

@@ -42,7 +42,7 @@ export interface SurfaceColors {
    * Used for: Icons in main nav, Text on primary buttons
    * @default white
    */
-  inverseOn: string
+  onInverse: string
 }
 
 export interface IntentColors {

packages/design-tokens/src/tokens/color/index.ts

@@ -51,7 +51,7 @@ const generateSurfaceColors = (coreColors: CoreColors): SurfaceColors => {
   return {
     field: coreColors.background,
     inverse: coreColors.text,
-    inverseOn: coreColors.background,
+    onInverse: coreColors.background,
   }
 }
 

packages/www/src/documentation/components/content/avatar.mdx

@@ -93,7 +93,7 @@ Avatars allow the developer to specify a color to use. Default Colors:
       <AvatarIcon color="inform" />
       <AvatarUser color="positive" user={data} />
       <AvatarIcon color="positive" />
-      <AvatarIcon color="inverseOn" bg="positive" />
+      <AvatarIcon color="onInverse" bg="positive" />
     </Flex>
   )
 }
@@ -105,7 +105,7 @@ A combination of `AvatarUser` and `AvatarIcon`.
 
 - `secondaryIcon` - icon used for secondary avatar. Default: `User`
 - `secondaryColor` - color to use for secondary avatar border & icon. Default: `key`
-- `secondaryBg` - color to use for secondary avatar background. Default: `inverseOn`
+- `secondaryBg` - color to use for secondary avatar background. Default: `onInverse`
 
 ```jsx
 ;() => {
@@ -125,7 +125,7 @@ A combination of `AvatarUser` and `AvatarIcon`.
         user={noImageData}
         color="inform"
         secondaryBg="key"
-        secondaryColor="inverseOn"
+        secondaryColor="onInverse"
         secondaryIcon="User"
       />
     </Flex>

packages/www/src/documentation/components/layout/box.mdx

@@ -75,7 +75,7 @@ Boxes provide a low-level customization interface which allows them to have diff
   display="inline-block"
   height="100px"
   bg="positive"
-  color="inverseOn"
+  color="onInverse"
   p="small"
   minWidth="200px"
 >
@@ -85,7 +85,7 @@ Boxes provide a low-level customization interface which allows them to have diff
   display="inline-block"
   height="50px"
   bg="inform"
-  color="inverseOn"
+  color="onInverse"
   ml="small"
   p="small"
   width="100px"
@@ -100,7 +100,7 @@ Boxes provide a low-level customization interface which allows them to have diff
 Boxes can reference colors from the theme object, pulling any color on the theme's `colors` property.
 
 ```jsx
-<Box bg="positive" color="inverseOn" p="medium">
+<Box bg="positive" color="onInverse" p="medium">
   My background is <Code>positive</Code>.
 </Box>
 ```
@@ -111,7 +111,7 @@ Boxes can set positioning when needed.
 
 ```jsx
 <Box p="small" position="relative">
-  <Box position="absolute" top="0" right="0" bg="negative" color="inverseOn">
+  <Box position="absolute" top="0" right="0" bg="negative" color="onInverse">
     I'm absolutely positioned!
   </Box>
 </Box>

packages/www/src/documentation/components/layout/flex.mdx

@@ -42,10 +42,10 @@ Using our `<Flex>` and `<FlexItem>` components we can quickly scaffold out real
   justifyContent="space-between"
 >
   <FlexItem mr="medium" pt="xsmall">
-    <Icon name="Hamburger" color="inverseOn" size={24} />
+    <Icon name="Hamburger" color="onInverse" size={24} />
   </FlexItem>
   <FlexItem>
-    <Icon name="LookerLogo" color="inverseOn" size={60} />
+    <Icon name="LookerLogo" color="onInverse" size={60} />
   </FlexItem>
   <FlexItem flex="1">
     <Flex justifyContent="center">
@@ -74,13 +74,13 @@ Using our `<Flex>` and `<FlexItem>` components we can quickly scaffold out real
   <FlexItem>
     <Flex>
       <FlexItem mr="small">
-        <Icon name="Search" color="inverseOn" size={24} />
+        <Icon name="Search" color="onInverse" size={24} />
       </FlexItem>
       <FlexItem mr="small">
-        <Icon name="Chat" color="inverseOn" size={24} />
+        <Icon name="Chat" color="onInverse" size={24} />
       </FlexItem>
       <FlexItem>
-        <Icon name="Group" color="inverseOn" size={24} />
+        <Icon name="Group" color="onInverse" size={24} />
       </FlexItem>
     </Flex>
   </FlexItem>
@@ -461,7 +461,7 @@ By default flex items are laid our in source order, the `order` property on a `<
     </Box>
   </FlexItem>
   <FlexItem>
-    <Box m="small" p="large" bg="ui5" color="inverseOn">
+    <Box m="small" p="large" bg="ui5" color="onInverse">
       3
     </Box>
   </FlexItem>
@@ -488,7 +488,7 @@ By default flex items are laid our in source order, the `order` property on a `<
     </Box>
   </FlexItem>
   <FlexItem>
-    <Box m="small" p="large" bg="ui5" color="inverseOn">
+    <Box m="small" p="large" bg="ui5" color="onInverse">
       3
     </Box>
   </FlexItem>

packages/www/src/documentation/system/demos/BorderRender.tsx

@@ -63,7 +63,7 @@ const borderData: BorderType[] = [
     color: 'text4',
     examples: ['inverse'],
     label: 'Border on Dark',
-    textColor: 'inverseOn',
+    textColor: 'onInverse',
   },
 ]