@hero-design/rn 8.34.4 → 8.34.6

package/.eslintrc.js

@@ -9,5 +9,6 @@ module.exports = {
   rules: {
     'no-underscore-dangle': [2, { allow: ['__hd__'] }],
     'import/no-cycle': 2,
+    '@hero-design/no-invalid-theme-access': 0,
   },
 };

package/.turbo/turbo-build.log

@@ -4,5 +4,5 @@ $ rollup -c
 src/index.ts → lib/index.js, es/index.js...
 (!) Plugin replace: @rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
 (!) Plugin node-resolve: preferring built-in module 'events' over local alternative at '/root/hero-design/node_modules/events/events.js', pass 'preferBuiltins: false' to disable this behavior or 'preferBuiltins: true' to disable this warning
-created lib/index.js, es/index.js in 24.7s
+created lib/index.js, es/index.js in 23.8s
 $ tsc --noEmit false --emitDeclarationOnly --project tsconfig.prod.json

package/es/index.js

@@ -2874,8 +2874,8 @@ var getTagTheme = function getTagTheme(theme) {
     "default": theme.borderWidths.base
   };
   var colors = {
-    primary: theme.colors.onDefaultGlobalSurface,
-    primaryBackground: undefined,
+    primary: theme.colors.primary,
+    primaryBackground: theme.colors.highlightedSurface,
     info: theme.colors.onInfoSurface,
     infoBackground: theme.colors.infoSurface,
     success: theme.colors.onSuccessSurface,
@@ -11886,7 +11886,7 @@ var Carousel = function Carousel(_ref) {
     _ref$shouldShowPagina = _ref.shouldShowPagination,
     shouldShowPagination = _ref$shouldShowPagina === void 0 ? noop : _ref$shouldShowPagina,
     _ref$pageControlPosit = _ref.pageControlPosition,
-    pageControlPosition = _ref$pageControlPosit === void 0 ? 'bottom' : _ref$pageControlPosit,
+    pageControlPosition = _ref$pageControlPosit === void 0 ? 'top' : _ref$pageControlPosit,
     nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
@@ -16594,44 +16594,21 @@ var index$2 = Object.assign(Tabs, {
   useIsFocused: useIsFocused
 });
 
-var getFilledStyles = function getFilledStyles(themeIntent, theme) {
-  return {
-    textColor: theme.__hd__.tag.colors[themeIntent],
-    borderColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
-    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
-  };
-};
-var getOutlinedStyles = function getOutlinedStyles(themeIntent, theme) {
-  return {
-    textColor: theme.__hd__.tag.colors[themeIntent],
-    borderColor: theme.__hd__.tag.colors[themeIntent],
-    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
-  };
-};
 var StyledView = index$b(View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
-    themeVariant = _ref.themeVariant,
     theme = _ref.theme;
-  var _ref2 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
-    borderColor = _ref2.borderColor,
-    backgroundColor = _ref2.backgroundColor;
   return {
-    borderWidth: theme.__hd__.tag.borderWidths["default"],
+    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
     borderRadius: theme.__hd__.tag.radii["default"],
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
-    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
-    borderColor: borderColor,
-    backgroundColor: backgroundColor
+    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding
   };
 });
-var StyledText = index$b(Typography.Caption)(function (_ref3) {
-  var themeIntent = _ref3.themeIntent,
-    themeVariant = _ref3.themeVariant,
-    theme = _ref3.theme;
-  var _ref4 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
-    textColor = _ref4.textColor;
+var StyledText = index$b(Typography.Caption)(function (_ref2) {
+  var themeIntent = _ref2.themeIntent,
+    theme = _ref2.theme;
   return {
-    color: textColor,
+    color: theme.__hd__.tag.colors[themeIntent],
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center'
@@ -16648,14 +16625,13 @@ var Tag = function Tag(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$2);
+  useDeprecation("Tag's variant prop is deprecated and will be removed in the next major release. Please remove it.", variant !== undefined);
   return /*#__PURE__*/React.createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
-    themeVariant: variant,
     style: style,
     testID: testID
   }), typeof content === 'string' ? /*#__PURE__*/React.createElement(StyledText, {
     themeIntent: intent,
-    themeVariant: variant,
     fontWeight: "semi-bold"
   }, content) : content);
 };

package/lib/index.js

@@ -2905,8 +2905,8 @@ var getTagTheme = function getTagTheme(theme) {
     "default": theme.borderWidths.base
   };
   var colors = {
-    primary: theme.colors.onDefaultGlobalSurface,
-    primaryBackground: undefined,
+    primary: theme.colors.primary,
+    primaryBackground: theme.colors.highlightedSurface,
     info: theme.colors.onInfoSurface,
     infoBackground: theme.colors.infoSurface,
     success: theme.colors.onSuccessSurface,
@@ -11917,7 +11917,7 @@ var Carousel = function Carousel(_ref) {
     _ref$shouldShowPagina = _ref.shouldShowPagination,
     shouldShowPagination = _ref$shouldShowPagina === void 0 ? noop : _ref$shouldShowPagina,
     _ref$pageControlPosit = _ref.pageControlPosition,
-    pageControlPosition = _ref$pageControlPosit === void 0 ? 'bottom' : _ref$pageControlPosit,
+    pageControlPosition = _ref$pageControlPosit === void 0 ? 'top' : _ref$pageControlPosit,
     nativeProps = _objectWithoutProperties(_ref, _excluded$h);
   useDeprecation("shouldShowPagination prop has been deprecated", shouldShowPagination !== noop);
   useDeprecation("The use of 'pageControlPosition == bottom' has been deprecated", pageControlPosition === 'bottom');
@@ -16625,44 +16625,21 @@ var index$2 = Object.assign(Tabs, {
   useIsFocused: useIsFocused
 });
 
-var getFilledStyles = function getFilledStyles(themeIntent, theme) {
-  return {
-    textColor: theme.__hd__.tag.colors[themeIntent],
-    borderColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
-    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
-  };
-};
-var getOutlinedStyles = function getOutlinedStyles(themeIntent, theme) {
-  return {
-    textColor: theme.__hd__.tag.colors[themeIntent],
-    borderColor: theme.__hd__.tag.colors[themeIntent],
-    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")]
-  };
-};
 var StyledView = index$b(reactNative.View)(function (_ref) {
   var themeIntent = _ref.themeIntent,
-    themeVariant = _ref.themeVariant,
     theme = _ref.theme;
-  var _ref2 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
-    borderColor = _ref2.borderColor,
-    backgroundColor = _ref2.backgroundColor;
   return {
-    borderWidth: theme.__hd__.tag.borderWidths["default"],
+    backgroundColor: theme.__hd__.tag.colors["".concat(themeIntent, "Background")],
     borderRadius: theme.__hd__.tag.radii["default"],
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
-    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
-    borderColor: borderColor,
-    backgroundColor: backgroundColor
+    paddingHorizontal: theme.__hd__.tag.space.horizontalPadding
   };
 });
-var StyledText = index$b(Typography.Caption)(function (_ref3) {
-  var themeIntent = _ref3.themeIntent,
-    themeVariant = _ref3.themeVariant,
-    theme = _ref3.theme;
-  var _ref4 = themeVariant === 'filled' ? getFilledStyles(themeIntent, theme) : getOutlinedStyles(themeIntent, theme),
-    textColor = _ref4.textColor;
+var StyledText = index$b(Typography.Caption)(function (_ref2) {
+  var themeIntent = _ref2.themeIntent,
+    theme = _ref2.theme;
   return {
-    color: textColor,
+    color: theme.__hd__.tag.colors[themeIntent],
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center'
@@ -16679,14 +16656,13 @@ var Tag = function Tag(_ref) {
     style = _ref.style,
     testID = _ref.testID,
     nativeProps = _objectWithoutProperties(_ref, _excluded$2);
+  useDeprecation("Tag's variant prop is deprecated and will be removed in the next major release. Please remove it.", variant !== undefined);
   return /*#__PURE__*/React__default["default"].createElement(StyledView, _extends$1({}, nativeProps, {
     themeIntent: intent,
-    themeVariant: variant,
     style: style,
     testID: testID
   }), typeof content === 'string' ? /*#__PURE__*/React__default["default"].createElement(StyledText, {
     themeIntent: intent,
-    themeVariant: variant,
     fontWeight: "semi-bold"
   }, content) : content);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.34.4",
+  "version": "8.34.6",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,13 +21,13 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.34.4",
+    "@hero-design/colors": "8.34.6",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
   },
   "peerDependencies": {
-    "@hero-design/react-native-month-year-picker": "^8.34.4",
+    "@hero-design/react-native-month-year-picker": "^8.34.6",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "react": "18.0.0",
@@ -47,8 +47,8 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.34.4",
-    "@hero-design/react-native-month-year-picker": "^8.34.4",
+    "@hero-design/eslint-plugin": "8.34.6",
+    "@hero-design/react-native-month-year-picker": "^8.34.6",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -64,10 +64,10 @@
     "@types/react-native": "^0.67.7",
     "@types/react-native-vector-icons": "^6.4.10",
     "babel-plugin-inline-import": "^3.0.0",
-    "eslint-config-hd": "8.34.4",
+    "eslint-config-hd": "8.34.6",
     "eslint-plugin-import": "^2.27.5",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.34.4",
+    "prettier-config-hd": "8.34.6",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.5.0",

package/src/components/Carousel/__tests__/__snapshots__/index.spec.tsx.snap

@@ -1488,7 +1488,81 @@ exports[`Carousel should call skip call back when press skip 1`] = `
         undefined,
       ]
     }
-  />
+  >
+    <View
+      style={
+        Array [
+          Object {
+            "alignItems": "center",
+            "flexDirection": "row",
+          },
+          Array [
+            Object {
+              "paddingVertical": 8,
+            },
+            undefined,
+          ],
+        ]
+      }
+    >
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 1,
+            "width": 24,
+          }
+        }
+        testID="page-control-indicator0"
+      />
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator1"
+      />
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator2"
+      />
+      <View
+        collapsable={false}
+        style={
+          Object {
+            "backgroundColor": "#401960",
+            "borderRadius": 999,
+            "height": 8,
+            "marginHorizontal": 8,
+            "opacity": 0.5,
+            "width": 8,
+          }
+        }
+        testID="page-control-indicator3"
+      />
+    </View>
+  </View>
   <View
     style={
       Array [
@@ -2107,79 +2181,6 @@ exports[`Carousel should call skip call back when press skip 1`] = `
           Skip
         </Text>
       </View>
-      <View
-        style={
-          Array [
-            Object {
-              "alignItems": "center",
-              "flexDirection": "row",
-            },
-            Array [
-              Object {
-                "paddingVertical": 8,
-              },
-              undefined,
-            ],
-          ]
-        }
-      >
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 1,
-              "width": 24,
-            }
-          }
-          testID="page-control-indicator0"
-        />
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 0.5,
-              "width": 8,
-            }
-          }
-          testID="page-control-indicator1"
-        />
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 0.5,
-              "width": 8,
-            }
-          }
-          testID="page-control-indicator2"
-        />
-        <View
-          collapsable={false}
-          style={
-            Object {
-              "backgroundColor": "#401960",
-              "borderRadius": 999,
-              "height": 8,
-              "marginHorizontal": 8,
-              "opacity": 0.5,
-              "width": 8,
-            }
-          }
-          testID="page-control-indicator3"
-        />
-      </View>
     </View>
   </View>
 </View>

package/src/components/Carousel/index.tsx

@@ -87,7 +87,7 @@ const Carousel = ({
   selectedItemIndex = 0,
   style,
   shouldShowPagination = noop,
-  pageControlPosition = 'bottom',
+  pageControlPosition = 'top',
   ...nativeProps
 }: CarouselProps) => {
   useDeprecation(

package/src/components/Tag/StyledTag.tsx

@@ -1,6 +1,5 @@
-import { View } from 'react-native';
 import styled from '@emotion/native';
-import { Theme } from '../../theme';
+import { View } from 'react-native';
 import Typography from '../Typography';
 
 type ThemeIntent =
@@ -11,54 +10,26 @@ type ThemeIntent =
   | 'danger'
   | 'archived';
 
-type ThemeVariant = 'filled' | 'outlined';
-
-const getFilledStyles = (themeIntent: ThemeIntent, theme: Theme) => ({
-  textColor: theme.__hd__.tag.colors[themeIntent],
-  borderColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
-  backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
-});
-
-const getOutlinedStyles = (themeIntent: ThemeIntent, theme: Theme) => ({
-  textColor: theme.__hd__.tag.colors[themeIntent],
-  borderColor: theme.__hd__.tag.colors[themeIntent],
-  backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
-});
-
 const StyledView = styled(View)<{
   themeIntent: ThemeIntent;
-  themeVariant: ThemeVariant;
-}>(({ themeIntent, themeVariant, theme }) => {
-  const { borderColor, backgroundColor } =
-    themeVariant === 'filled'
-      ? getFilledStyles(themeIntent, theme)
-      : getOutlinedStyles(themeIntent, theme);
-
+}>(({ themeIntent, theme }) => {
   return {
-    borderWidth: theme.__hd__.tag.borderWidths.default,
+    backgroundColor: theme.__hd__.tag.colors[`${themeIntent}Background`],
     borderRadius: theme.__hd__.tag.radii.default,
     paddingVertical: theme.__hd__.tag.space.verticalPadding,
     paddingHorizontal: theme.__hd__.tag.space.horizontalPadding,
-    borderColor,
-    backgroundColor,
   };
 });
 
 const StyledText = styled(Typography.Caption)<{
   themeIntent: ThemeIntent;
-  themeVariant: ThemeVariant;
-}>(({ themeIntent, themeVariant, theme }) => {
-  const { textColor } =
-    themeVariant === 'filled'
-      ? getFilledStyles(themeIntent, theme)
-      : getOutlinedStyles(themeIntent, theme);
-
+}>(({ themeIntent, theme }) => {
   return {
-    color: textColor,
+    color: theme.__hd__.tag.colors[themeIntent],
     includeFontPadding: false,
     textAlignVertical: 'center',
     textAlign: 'center',
   };
 });
 
-export { StyledView, StyledText };
+export { StyledText, StyledView };

package/src/components/Tag/__tests__/Tag.spec.tsx

@@ -5,21 +5,21 @@ import Typography from '../../Typography';
 
 describe('Tag', () => {
   it.each`
-    variant       | intent       | content      | expected
-    ${'outlined'} | ${'success'} | ${'SUCCESS'} | ${'SUCCESS'}
-    ${'outlined'} | ${'warning'} | ${'WARNING'} | ${'WARNING'}
-    ${'outlined'} | ${'danger'}  | ${'DANGER'}  | ${'DANGER'}
-    ${'outlined'} | ${'info'}    | ${'INFO'}    | ${'INFO'}
-    ${'outlined'} | ${'primary'} | ${'PRIMARY'} | ${'PRIMARY'}
-    ${'filled'}   | ${'warning'} | ${'WARNING'} | ${'WARNING'}
-    ${'filled'}   | ${'danger'}  | ${'DANGER'}  | ${'DANGER'}
-    ${'filled'}   | ${'info'}    | ${'INFO'}    | ${'INFO'}
-    ${'filled'}   | ${'primary'} | ${'PRIMARY'} | ${'PRIMARY'}
+    intent       | content      | expected
+    ${'success'} | ${'SUCCESS'} | ${'SUCCESS'}
+    ${'warning'} | ${'WARNING'} | ${'WARNING'}
+    ${'danger'}  | ${'DANGER'}  | ${'DANGER'}
+    ${'info'}    | ${'INFO'}    | ${'INFO'}
+    ${'primary'} | ${'PRIMARY'} | ${'PRIMARY'}
+    ${'warning'} | ${'WARNING'} | ${'WARNING'}
+    ${'danger'}  | ${'DANGER'}  | ${'DANGER'}
+    ${'info'}    | ${'INFO'}    | ${'INFO'}
+    ${'primary'} | ${'PRIMARY'} | ${'PRIMARY'}
   `(
-    'renders correctly when variant is $variant and intent is $intent',
-    ({ variant, intent, content, expected }) => {
+    'renders correctly when intent is $intent',
+    ({ intent, content, expected }) => {
       const { getByText, toJSON } = renderWithTheme(
-        <Tag content={content} intent={intent} variant={variant} />
+        <Tag content={content} intent={intent} />
       );
 
       expect(toJSON()).toMatchSnapshot();

package/src/components/Tag/__tests__/__snapshots__/Tag.spec.tsx.snap

@@ -1,14 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Tag renders correctly when variant is filled and intent is danger 1`] = `
+exports[`Tag renders correctly when intent is danger 1`] = `
 <View
   style={
     Array [
       Object {
         "backgroundColor": "#fcebe7",
-        "borderColor": "#fcebe7",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -16,7 +14,6 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
     ]
   }
   themeIntent="danger"
-  themeVariant="filled"
 >
   <Text
     allowFontScaling={false}
@@ -42,30 +39,26 @@ exports[`Tag renders correctly when variant is filled and intent is danger 1`] =
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
     DANGER
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
+exports[`Tag renders correctly when intent is danger 2`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#ecf0ff",
-        "borderColor": "#ecf0ff",
+        "backgroundColor": "#fcebe7",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="info"
-  themeVariant="filled"
+  themeIntent="danger"
 >
   <Text
     allowFontScaling={false}
@@ -80,7 +73,7 @@ exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
         },
         Array [
           Object {
-            "color": "#355bfb",
+            "color": "#cb300a",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -91,30 +84,26 @@ exports[`Tag renders correctly when variant is filled and intent is info 1`] = `
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
-    INFO
+    DANGER
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is filled and intent is primary 1`] = `
+exports[`Tag renders correctly when intent is info 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": undefined,
-        "borderColor": undefined,
+        "backgroundColor": "#ecf0ff",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="primary"
-  themeVariant="filled"
+  themeIntent="info"
 >
   <Text
     allowFontScaling={false}
@@ -129,7 +118,7 @@ exports[`Tag renders correctly when variant is filled and intent is primary 1`]
         },
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#355bfb",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -140,30 +129,26 @@ exports[`Tag renders correctly when variant is filled and intent is primary 1`]
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
-    PRIMARY
+    INFO
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is filled and intent is warning 1`] = `
+exports[`Tag renders correctly when intent is info 2`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#fff6eb",
-        "borderColor": "#fff6eb",
+        "backgroundColor": "#ecf0ff",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="warning"
-  themeVariant="filled"
+  themeIntent="info"
 >
   <Text
     allowFontScaling={false}
@@ -178,7 +163,7 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
         },
         Array [
           Object {
-            "color": "#ac5d00",
+            "color": "#355bfb",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -189,30 +174,26 @@ exports[`Tag renders correctly when variant is filled and intent is warning 1`]
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="filled"
   >
-    WARNING
+    INFO
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is danger 1`] = `
+exports[`Tag renders correctly when intent is primary 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#fcebe7",
-        "borderColor": "#cb300a",
+        "backgroundColor": "#ece8ef",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="danger"
-  themeVariant="outlined"
+  themeIntent="primary"
 >
   <Text
     allowFontScaling={false}
@@ -227,7 +208,7 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
         },
         Array [
           Object {
-            "color": "#cb300a",
+            "color": "#401960",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -238,30 +219,26 @@ exports[`Tag renders correctly when variant is outlined and intent is danger 1`]
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    DANGER
+    PRIMARY
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is info 1`] = `
+exports[`Tag renders correctly when intent is primary 2`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#ecf0ff",
-        "borderColor": "#355bfb",
+        "backgroundColor": "#ece8ef",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="info"
-  themeVariant="outlined"
+  themeIntent="primary"
 >
   <Text
     allowFontScaling={false}
@@ -276,7 +253,7 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
         },
         Array [
           Object {
-            "color": "#355bfb",
+            "color": "#401960",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -287,30 +264,26 @@ exports[`Tag renders correctly when variant is outlined and intent is info 1`] =
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    INFO
+    PRIMARY
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is primary 1`] = `
+exports[`Tag renders correctly when intent is success 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": undefined,
-        "borderColor": "#001f23",
+        "backgroundColor": "#f0fef4",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="primary"
-  themeVariant="outlined"
+  themeIntent="success"
 >
   <Text
     allowFontScaling={false}
@@ -325,7 +298,7 @@ exports[`Tag renders correctly when variant is outlined and intent is primary 1`
         },
         Array [
           Object {
-            "color": "#001f23",
+            "color": "#017d6d",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -336,30 +309,26 @@ exports[`Tag renders correctly when variant is outlined and intent is primary 1`
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    PRIMARY
+    SUCCESS
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is success 1`] = `
+exports[`Tag renders correctly when intent is warning 1`] = `
 <View
   style={
     Array [
       Object {
-        "backgroundColor": "#f0fef4",
-        "borderColor": "#017d6d",
+        "backgroundColor": "#fff6eb",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
       undefined,
     ]
   }
-  themeIntent="success"
-  themeVariant="outlined"
+  themeIntent="warning"
 >
   <Text
     allowFontScaling={false}
@@ -374,7 +343,7 @@ exports[`Tag renders correctly when variant is outlined and intent is success 1`
         },
         Array [
           Object {
-            "color": "#017d6d",
+            "color": "#ac5d00",
             "includeFontPadding": false,
             "textAlign": "center",
             "textAlignVertical": "center",
@@ -385,22 +354,19 @@ exports[`Tag renders correctly when variant is outlined and intent is success 1`
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
-    SUCCESS
+    WARNING
   </Text>
 </View>
 `;
 
-exports[`Tag renders correctly when variant is outlined and intent is warning 1`] = `
+exports[`Tag renders correctly when intent is warning 2`] = `
 <View
   style={
     Array [
       Object {
         "backgroundColor": "#fff6eb",
-        "borderColor": "#ac5d00",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -408,7 +374,6 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
     ]
   }
   themeIntent="warning"
-  themeVariant="outlined"
 >
   <Text
     allowFontScaling={false}
@@ -434,7 +399,6 @@ exports[`Tag renders correctly when variant is outlined and intent is warning 1`
     }
     themeFontWeight="semi-bold"
     themeIntent="body"
-    themeVariant="outlined"
   >
     WARNING
   </Text>
@@ -446,10 +410,8 @@ exports[`Tag renders correctly with custom content 1`] = `
   style={
     Array [
       Object {
-        "backgroundColor": undefined,
-        "borderColor": "#001f23",
+        "backgroundColor": "#ece8ef",
         "borderRadius": 4,
-        "borderWidth": 1,
         "paddingHorizontal": 8,
         "paddingVertical": 4,
       },
@@ -457,7 +419,6 @@ exports[`Tag renders correctly with custom content 1`] = `
     ]
   }
   themeIntent="primary"
-  themeVariant="outlined"
 >
   <Text
     allowFontScaling={false}

package/src/components/Tag/index.tsx

@@ -1,6 +1,7 @@
 import React, { ReactElement } from 'react';
 import type { StyleProp, ViewProps, ViewStyle } from 'react-native';
 import { StyledText, StyledView } from './StyledTag';
+import { useDeprecation } from '../../utils/hooks';
 
 interface TagProps extends ViewProps {
   /**
@@ -12,6 +13,7 @@ interface TagProps extends ViewProps {
    */
   intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
   /**
+   * @deprecated Tag variant prop is deprecated and will be removed in the next major release. Please remove it.
    * Tag variant.
    */
   variant?: 'filled' | 'outlined';
@@ -33,20 +35,20 @@ const Tag = ({
   testID,
   ...nativeProps
 }: TagProps): JSX.Element => {
+  useDeprecation(
+    `Tag's variant prop is deprecated and will be removed in the next major release. Please remove it.`,
+    variant !== undefined
+  );
+
   return (
     <StyledView
       {...nativeProps}
       themeIntent={intent}
-      themeVariant={variant}
       style={style}
       testID={testID}
     >
       {typeof content === 'string' ? (
-        <StyledText
-          themeIntent={intent}
-          themeVariant={variant}
-          fontWeight="semi-bold"
-        >
+        <StyledText themeIntent={intent} fontWeight="semi-bold">
           {content}
         </StyledText>
       ) : (

package/src/theme/__tests__/__snapshots__/index.spec.ts.snap

@@ -925,8 +925,8 @@ Object {
         "dangerBackground": "#fcebe7",
         "info": "#355bfb",
         "infoBackground": "#ecf0ff",
-        "primary": "#001f23",
-        "primaryBackground": undefined,
+        "primary": "#401960",
+        "primaryBackground": "#ece8ef",
         "success": "#017d6d",
         "successBackground": "#f0fef4",
         "text": "#001f23",

package/src/theme/components/tag.ts

@@ -6,8 +6,8 @@ const getTagTheme = (theme: GlobalTheme) => {
   };
 
   const colors = {
-    primary: theme.colors.onDefaultGlobalSurface,
-    primaryBackground: undefined,
+    primary: theme.colors.primary,
+    primaryBackground: theme.colors.highlightedSurface,
     info: theme.colors.onInfoSurface,
     infoBackground: theme.colors.infoSurface,
     success: theme.colors.onSuccessSurface,

package/types/components/Tag/StyledTag.d.ts

@@ -1,13 +1,11 @@
 /// <reference types="react" />
 import { View } from 'react-native';
 type ThemeIntent = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
-type ThemeVariant = 'filled' | 'outlined';
 declare const StyledView: import("@emotion/native").StyledComponent<import("react-native").ViewProps & {
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeIntent: ThemeIntent;
-    themeVariant: ThemeVariant;
 }, {}, {
     ref?: import("react").Ref<View> | undefined;
 }>;
@@ -16,6 +14,5 @@ declare const StyledText: import("@emotion/native").StyledComponent<import("../T
     as?: import("react").ElementType<any> | undefined;
 } & {
     themeIntent: ThemeIntent;
-    themeVariant: ThemeVariant;
 }, {}, {}>;
-export { StyledView, StyledText };
+export { StyledText, StyledView };

package/types/components/Tag/index.d.ts

@@ -10,6 +10,7 @@ interface TagProps extends ViewProps {
      */
     intent?: 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'archived';
     /**
+     * @deprecated Tag variant prop is deprecated and will be removed in the next major release. Please remove it.
      * Tag variant.
      */
     variant?: 'filled' | 'outlined';

package/types/theme/components/tag.d.ts

@@ -5,7 +5,7 @@ declare const getTagTheme: (theme: GlobalTheme) => {
     };
     colors: {
         primary: string;
-        primaryBackground: undefined;
+        primaryBackground: string;
         info: string;
         infoBackground: string;
         success: string;