@hero-design/rn 8.65.1 → 8.67.0

package/lib/index.js

@@ -1403,9 +1403,9 @@ var blue$1 = colorScales.blue,
   purple$1 = colorScales.purple,
   vermilion$2 = colorScales.vermilion,
   smalt = colorScales.smalt,
-  violet$1 = colorScales.violet,
+  violet$2 = colorScales.violet,
   yellow$1 = colorScales.yellow;
-var palette$b = {
+var palette$c = {
   black: '#000000',
   white: '#ffffff',
   blue: blue$1.base,
@@ -1508,19 +1508,19 @@ var palette$b = {
   smaltLight45: smalt.lighten45,
   smaltLight75: smalt.lighten75,
   smaltLight90: smalt.lighten90,
-  violet: violet$1.base,
-  violetDark15: violet$1.darken15,
-  violetDark30: violet$1.darken30,
-  violetDark45: violet$1.darken45,
-  violetDark60: violet$1.darken60,
-  violetDark75: violet$1.darken75,
-  violetDark90: violet$1.darken90,
-  violetLight15: violet$1.lighten15,
-  violetLight30: violet$1.lighten30,
-  violetLight45: violet$1.lighten45,
-  violetLight60: violet$1.lighten60,
-  violetLight75: violet$1.lighten75,
-  violetLight90: violet$1.lighten90,
+  violet: violet$2.base,
+  violetDark15: violet$2.darken15,
+  violetDark30: violet$2.darken30,
+  violetDark45: violet$2.darken45,
+  violetDark60: violet$2.darken60,
+  violetDark75: violet$2.darken75,
+  violetDark90: violet$2.darken90,
+  violetLight15: violet$2.lighten15,
+  violetLight30: violet$2.lighten30,
+  violetLight45: violet$2.lighten45,
+  violetLight60: violet$2.lighten60,
+  violetLight75: violet$2.lighten75,
+  violetLight90: violet$2.lighten90,
   yellow: yellow$1.base,
   yellowDark15: yellow$1.darken15,
   yellowDark30: yellow$1.darken30,
@@ -1533,16 +1533,16 @@ var palette$b = {
   yellowLight90: yellow$1.lighten90
 };
 var mauve$3 = colorScales.mauve,
-  violet$2 = colorScales.violet;
-Object.assign(Object.assign({}, palette$b), {
+  violet$1 = colorScales.violet;
+Object.assign(Object.assign({}, palette$c), {
   mauve: mauve$3.base,
   mauveLight80: mauve$3.lighten80,
-  violetDark50: violet$2.darken50
+  violetDark50: violet$1.darken50
 });
 var apple$3 = colorScales.apple,
   hitPink$1 = colorScales.hitPink,
   maasstrichtBlue$4 = colorScales.maasstrichtBlue;
-Object.assign(Object.assign({}, palette$b), {
+Object.assign(Object.assign({}, palette$c), {
   apple: apple$3.base,
   appleDark20: apple$3.darken20,
   appleDark50: apple$3.darken50,
@@ -1575,7 +1575,7 @@ var aliceBlue$1 = colorScales.aliceBlue,
   vodka$1 = colorScales.vodka,
   windsorGrey = colorScales.windsorGrey,
   black$1 = colorScales.black;
-var palette$8 = {
+var palette$9 = {
   black: black$1.base,
   white: '#ffffff',
   greyLight95: grey$1.lighten95,
@@ -1647,7 +1647,7 @@ var aliceBlue = colorScales.aliceBlue,
   mintLeaf = colorScales.mintLeaf,
   blueOblivion = colorScales.blueOblivion,
   pastelBlue = colorScales.pastelBlue;
-var palette$7 = {
+var palette$8 = {
   black: '#000000',
   white: '#ffffff',
   greyLight95: grey$3.lighten95,
@@ -1712,7 +1712,7 @@ var palette$7 = {
   flagstone: flagstone.base
 };
 var maasstrichtBlue$1 = colorScales.maasstrichtBlue;
-var palette$6 = {
+var palette$7 = {
   maasstrichtBlue: maasstrichtBlue$1.base,
   maasstrichtBlueLight5: maasstrichtBlue$1.lighten5,
   maasstrichtBlueLight10: maasstrichtBlue$1.lighten10,
@@ -1725,7 +1725,7 @@ var palette$6 = {
 };
 var violet1$2 = colorScales.violet1,
   mauve$2 = colorScales.mauve;
-var palette$5 = Object.assign(Object.assign({}, palette$8), {
+var palette$6 = Object.assign(Object.assign({}, palette$9), {
   violet: violet1$2.base,
   violetLight20: violet1$2.lighten20,
   violetLight30: violet1$2.lighten30,
@@ -1737,7 +1737,7 @@ var palette$5 = Object.assign(Object.assign({}, palette$8), {
 var apple = colorScales.apple,
   currant = colorScales.currant,
   hitPink = colorScales.hitPink;
-var palette$4 = Object.assign(Object.assign({}, palette$8), {
+var palette$5 = Object.assign(Object.assign({}, palette$9), {
   apple: apple.base,
   appleLight10: apple.lighten10,
   appleDark20: apple.darken20,
@@ -1751,7 +1751,7 @@ var palette$4 = Object.assign(Object.assign({}, palette$8), {
 var scarletGum$1 = colorScales.scarletGum,
   violet1$1 = colorScales.violet1,
   mauve$1 = colorScales.mauve;
-var palette$3 = Object.assign(Object.assign({}, palette$8), {
+var palette$4 = Object.assign(Object.assign({}, palette$9), {
   scarletGumLight20: scarletGum$1.lighten20,
   scarletGumLight30: scarletGum$1.lighten30,
   scarletGumLight50: scarletGum$1.lighten50,
@@ -1766,11 +1766,15 @@ var palette$3 = Object.assign(Object.assign({}, palette$8), {
   violet: violet1$1.base,
   mauve: mauve$1.base
 });
+var violet$3 = colorScales.violet;
+var palette$3 = Object.assign(Object.assign({}, palette$9), {
+  violet: violet$3.base
+});
 var scarletGum = colorScales.scarletGum,
   violet1 = colorScales.violet1,
   mauve = colorScales.mauve,
   maasstrichtBlue = colorScales.maasstrichtBlue;
-var palette$2 = Object.assign(Object.assign({}, palette$8), {
+var palette$2 = Object.assign(Object.assign({}, palette$9), {
   scarletGumLight20: scarletGum.lighten20,
   scarletGumLight30: scarletGum.lighten30,
   scarletGumLight50: scarletGum.lighten50,
@@ -1793,7 +1797,7 @@ var palette$2 = Object.assign(Object.assign({}, palette$8), {
 });
 var royalBlue = colorScales.royalBlue,
   frenchSky = colorScales.frenchSky;
-var palette$1 = Object.assign(Object.assign({}, palette$8), {
+var palette$1 = Object.assign(Object.assign({}, palette$9), {
   royalBlue: royalBlue.base,
   royalBlueLight10: royalBlue.lighten10,
   royalBlueLight80: royalBlue.lighten80,
@@ -1807,7 +1811,7 @@ var palette$1 = Object.assign(Object.assign({}, palette$8), {
 var gold$1 = colorScales.gold,
   policeBlue = colorScales.policeBlue,
   black$2 = colorScales.black;
-var palette = Object.assign(Object.assign({}, palette$8), {
+var palette = Object.assign(Object.assign({}, palette$9), {
   blackLight30: black$2.lighten30,
   blackLight90: black$2.lighten90,
   goldLight20: gold$1.lighten20,
@@ -1825,95 +1829,95 @@ var palette = Object.assign(Object.assign({}, palette$8), {
 var globalPalette$1 = {
   // Updated 21 / Nov / 22
   // Surfaces
-  defaultGlobalSurface: palette$8.white,
-  onDefaultGlobalSurface: palette$8.maasstrichtBlue,
-  neutralGlobalSurface: palette$8.greyLight90,
-  mutedOnDefaultGlobalSurface: palette$8.maasstrichtBlueLight30,
-  inactiveOnDefaultGlobalSurface: palette$8.maasstrichtBlueLight50,
-  disabledOnDefaultGlobalSurface: palette$8.greyLight30,
-  darkGlobalSurface: palette$8.maasstrichtBlue,
-  onDarkGlobalSurface: palette$8.white,
-  overlayGlobalSurface: palette$8.black,
+  defaultGlobalSurface: palette$9.white,
+  onDefaultGlobalSurface: palette$9.maasstrichtBlue,
+  neutralGlobalSurface: palette$9.greyLight90,
+  mutedOnDefaultGlobalSurface: palette$9.maasstrichtBlueLight30,
+  inactiveOnDefaultGlobalSurface: palette$9.maasstrichtBlueLight50,
+  disabledOnDefaultGlobalSurface: palette$9.greyLight30,
+  darkGlobalSurface: palette$9.maasstrichtBlue,
+  onDarkGlobalSurface: palette$9.white,
+  overlayGlobalSurface: palette$9.black,
   // Outlines
-  primaryOutline: palette$8.maasstrichtBlue,
-  secondaryOutline: palette$8.greyLight75,
-  inactiveOutline: palette$8.maasstrichtBlueLight50,
-  disabledOutline: palette$8.greyLight30,
+  primaryOutline: palette$9.maasstrichtBlue,
+  secondaryOutline: palette$9.greyLight75,
+  inactiveOutline: palette$9.maasstrichtBlueLight50,
+  disabledOutline: palette$9.greyLight30,
   // Accents
-  error: palette$8.pastelRed,
-  mutedError: palette$8.pastelRedLight20,
-  errorSurface: palette$8.linen,
-  onErrorSurface: palette$8.amaranthaRed,
-  warning: palette$8.mellowApricot,
-  mutedWarning: palette$8.mellowApricotLight20,
-  warningSurface: palette$8.seashell,
-  onWarningSurface: palette$8.orangeBrown,
-  success: palette$8.emerald,
-  mutedSuccess: palette$8.emeraldLight20,
-  successSurface: palette$8.honeydew,
-  onSuccessSurface: palette$8.pineGreen,
-  info: palette$8.vodka,
-  mutedInfo: palette$8.vodkaLight20,
-  infoSurface: palette$8.aliceBlue,
-  onInfoSurface: palette$8.gentianFlower,
-  archived: palette$8.silverChalice,
-  mutedArchived: palette$8.silverChaliceLight20,
-  archivedSurface: palette$8.cumberlandFog,
-  onArchivedSurface: palette$8.windsorGrey
+  error: palette$9.pastelRed,
+  mutedError: palette$9.pastelRedLight20,
+  errorSurface: palette$9.linen,
+  onErrorSurface: palette$9.amaranthaRed,
+  warning: palette$9.mellowApricot,
+  mutedWarning: palette$9.mellowApricotLight20,
+  warningSurface: palette$9.seashell,
+  onWarningSurface: palette$9.orangeBrown,
+  success: palette$9.emerald,
+  mutedSuccess: palette$9.emeraldLight20,
+  successSurface: palette$9.honeydew,
+  onSuccessSurface: palette$9.pineGreen,
+  info: palette$9.vodka,
+  mutedInfo: palette$9.vodkaLight20,
+  infoSurface: palette$9.aliceBlue,
+  onInfoSurface: palette$9.gentianFlower,
+  archived: palette$9.silverChalice,
+  mutedArchived: palette$9.silverChaliceLight20,
+  archivedSurface: palette$9.cumberlandFog,
+  onArchivedSurface: palette$9.windsorGrey
   // End of Updated 21 / Nov / 22
 };
 
-var swagBrandSystemPallete = {
-  primary: palette$3.scarletGum,
-  onPrimary: palette$3.white,
-  secondary: palette$3.scarletGumLight30,
-  onSecondary: palette$3.white,
-  defaultSurface: palette$3.greyLight90,
-  highlightedSurface: palette$3.scarletGumLight90,
-  pressedSurface: palette$3.scarletGumDark20,
-  decorativePrimary: palette$3.white,
-  decorativePrimarySurface: palette$3.maasstrichtBlueLight80
+var swagBrandSystemPallete$1 = {
+  primary: palette$4.scarletGum,
+  onPrimary: palette$4.white,
+  secondary: palette$4.scarletGumLight30,
+  onSecondary: palette$4.white,
+  defaultSurface: palette$4.greyLight90,
+  highlightedSurface: palette$4.scarletGumLight90,
+  pressedSurface: palette$4.scarletGumDark20,
+  decorativePrimary: palette$4.white,
+  decorativePrimarySurface: palette$4.maasstrichtBlueLight80
 };
-var swagSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), swagBrandSystemPallete);
+var swagSystemPalette$1 = _objectSpread2(_objectSpread2({}, globalPalette$1), swagBrandSystemPallete$1);
 
 var globalPalette = {
   // Updated 21 / Nov / 22
   // Surfaces
-  defaultGlobalSurface: palette$7.maasstrichtBlue,
-  onDefaultGlobalSurface: palette$7.white,
-  neutralGlobalSurface: palette$7.maasstrichtBlueLight15,
-  mutedOnDefaultGlobalSurface: palette$7.maasstrichtBlueLight70,
-  inactiveOnDefaultGlobalSurface: palette$7.maasstrichtBlueLight60,
-  disabledOnDefaultGlobalSurface: palette$7.greyDark20,
-  darkGlobalSurface: palette$7.white,
-  onDarkGlobalSurface: palette$7.maasstrichtBlue,
-  overlayGlobalSurface: palette$7.greyDark30,
+  defaultGlobalSurface: palette$8.maasstrichtBlue,
+  onDefaultGlobalSurface: palette$8.white,
+  neutralGlobalSurface: palette$8.maasstrichtBlueLight15,
+  mutedOnDefaultGlobalSurface: palette$8.maasstrichtBlueLight70,
+  inactiveOnDefaultGlobalSurface: palette$8.maasstrichtBlueLight60,
+  disabledOnDefaultGlobalSurface: palette$8.greyDark20,
+  darkGlobalSurface: palette$8.white,
+  onDarkGlobalSurface: palette$8.maasstrichtBlue,
+  overlayGlobalSurface: palette$8.greyDark30,
   // Outlines
-  primaryOutline: palette$7.white,
-  secondaryOutline: palette$7.maasstrichtBlueLight10,
-  inactiveOutline: palette$7.maasstrichtBlueLight60,
-  disabledOutline: palette$7.greyDark20,
+  primaryOutline: palette$8.white,
+  secondaryOutline: palette$8.maasstrichtBlueLight10,
+  inactiveOutline: palette$8.maasstrichtBlueLight60,
+  disabledOutline: palette$8.greyDark20,
   // Accents
-  error: palette$7.vermilionDark10,
-  mutedError: palette$7.vermilionLight20,
-  errorSurface: palette$7.moussaka,
-  onErrorSurface: palette$7.indianDance,
-  warning: palette$7.theatreGold,
-  mutedWarning: palette$7.theatreGoldLight20,
-  warningSurface: palette$7.uniformGreen,
-  onWarningSurface: palette$7.blazingBonfire,
-  success: palette$7.pineGreenDark10,
-  mutedSuccess: palette$7.pineGreenLight20,
-  successSurface: palette$7.deepIntoTheJungle,
-  onSuccessSurface: palette$7.mintLeaf,
-  info: palette$7.ultramarineBlueDark10,
-  mutedInfo: palette$7.ultramarineBlueLight20,
-  infoSurface: palette$7.blueOblivion,
-  onInfoSurface: palette$7.pastelBlue,
-  archived: palette$7.sonicSilverDark10,
-  mutedArchived: palette$7.sonicSilverLight50,
-  archivedSurface: palette$7.bigStone,
-  onArchivedSurface: palette$7.flagstone
+  error: palette$8.vermilionDark10,
+  mutedError: palette$8.vermilionLight20,
+  errorSurface: palette$8.moussaka,
+  onErrorSurface: palette$8.indianDance,
+  warning: palette$8.theatreGold,
+  mutedWarning: palette$8.theatreGoldLight20,
+  warningSurface: palette$8.uniformGreen,
+  onWarningSurface: palette$8.blazingBonfire,
+  success: palette$8.pineGreenDark10,
+  mutedSuccess: palette$8.pineGreenLight20,
+  successSurface: palette$8.deepIntoTheJungle,
+  onSuccessSurface: palette$8.mintLeaf,
+  info: palette$8.ultramarineBlueDark10,
+  mutedInfo: palette$8.ultramarineBlueLight20,
+  infoSurface: palette$8.blueOblivion,
+  onInfoSurface: palette$8.pastelBlue,
+  archived: palette$8.sonicSilverDark10,
+  mutedArchived: palette$8.sonicSilverLight50,
+  archivedSurface: palette$8.bigStone,
+  onArchivedSurface: palette$8.flagstone
   // End of Updated 21 / Nov / 22
 };
 
@@ -1930,6 +1934,19 @@ var swagDarkBrandSystemPalette = {
 };
 var swagDarkSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette), swagDarkBrandSystemPalette);
 
+var swagBrandSystemPallete = {
+  primary: palette$3.violet,
+  onPrimary: '#FDFBFF',
+  secondary: '#460078',
+  onSecondary: palette$3.white,
+  defaultSurface: '#FDFBFF',
+  highlightedSurface: '#F1E9FB',
+  pressedSurface: '#380060',
+  decorativePrimary: '#FDFBFF',
+  decorativePrimarySurface: '#B382FD'
+};
+var swagSystemPalette = _objectSpread2(_objectSpread2({}, globalPalette$1), swagBrandSystemPallete);
+
 var workBrandSystemPallete = {
   primary: palette.black,
   onPrimary: palette.white,
@@ -1941,20 +1958,20 @@ var workBrandSystemPallete = {
   decorativePrimary: palette.gold,
   decorativePrimarySurface: palette.goldLight80
 };
-var workSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), workBrandSystemPallete);
+var workSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette$1), workBrandSystemPallete);
 
 var jobsBrandSystemPallete = {
-  primary: palette$4.apple,
-  onPrimary: palette$4.white,
-  secondary: palette$4.maasstrichtBlueLight30,
-  onSecondary: palette$4.white,
-  defaultSurface: palette$4.white,
-  highlightedSurface: palette$4.hitPinkLight90,
-  pressedSurface: palette$4.appleDark20,
-  decorativePrimary: palette$4.hitPink,
-  decorativePrimarySurface: palette$4.hitPinkLight80
+  primary: palette$5.apple,
+  onPrimary: palette$5.white,
+  secondary: palette$5.maasstrichtBlueLight30,
+  onSecondary: palette$5.white,
+  defaultSurface: palette$5.white,
+  highlightedSurface: palette$5.hitPinkLight90,
+  pressedSurface: palette$5.appleDark20,
+  decorativePrimary: palette$5.hitPink,
+  decorativePrimarySurface: palette$5.hitPinkLight80
 };
-var jobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), jobsBrandSystemPallete);
+var jobsSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette$1), jobsBrandSystemPallete);
 
 var walletBrandSystemPallete = {
   primary: palette$1.royalBlue,
@@ -1967,20 +1984,20 @@ var walletBrandSystemPallete = {
   decorativePrimary: palette$1.frenchSky,
   decorativePrimarySurface: palette$1.frenchSkyLight80
 };
-var walletSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), walletBrandSystemPallete);
+var walletSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette$1), walletBrandSystemPallete);
 
 var eBensBrandSystemPallete = {
-  primary: palette$5.violet,
-  onPrimary: palette$5.white,
-  secondary: palette$5.violetLight30,
-  onSecondary: palette$5.white,
-  defaultSurface: palette$5.white,
-  highlightedSurface: palette$5.violetLight90,
-  pressedSurface: palette$5.violetDark20,
-  decorativePrimary: palette$5.mauve,
-  decorativePrimarySurface: palette$5.mauveLight80
-};
-var eBensSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette), eBensBrandSystemPallete);
+  primary: palette$6.violet,
+  onPrimary: palette$6.white,
+  secondary: palette$6.violetLight30,
+  onSecondary: palette$6.white,
+  defaultSurface: palette$6.white,
+  highlightedSurface: palette$6.violetLight90,
+  pressedSurface: palette$6.violetDark20,
+  decorativePrimary: palette$6.mauve,
+  decorativePrimarySurface: palette$6.mauveLight80
+};
+var eBensSystemPalette = _objectSpread2(_objectSpread2({}, swagSystemPalette$1), eBensBrandSystemPallete);
 
 var BASE_WIDTH = 390; // Based on iPhone 13's viewport size
 var horizontalScale = function horizontalScale(size) {
@@ -2493,7 +2510,8 @@ var getCardTheme = function getCardTheme(theme) {
     success: theme.colors.success,
     warning: theme.colors.warning,
     danger: theme.colors.error,
-    archived: theme.colors.archived
+    archived: theme.colors.archived,
+    neutral: theme.colors.neutralGlobalSurface
   };
   var sizes = {
     indicatorWidth: theme.sizes.medium
@@ -3774,7 +3792,7 @@ var getTypographyTheme = function getTypographyTheme(theme) {
 
 var getTheme$1 = function getTheme() {
   var scale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : scale$1;
-  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette;
+  var systemPallete = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : swagSystemPalette$1;
   var globalTheme = getGlobalTheme(scale, systemPallete);
   return _objectSpread2(_objectSpread2({}, globalTheme), {}, {
     __hd__: {
@@ -4998,7 +5016,7 @@ var ThemeSwitcher = function ThemeSwitcher(_ref) {
   var theme = React.useMemo(function () {
     switch (name) {
       case 'swag':
-        return getTheme$1(scale$1, swagSystemPalette);
+        return getTheme$1(scale$1, swagSystemPalette$1);
       case 'work':
         return getTheme$1(scale$1, workSystemPalette);
       case 'jobs':
@@ -8348,7 +8366,7 @@ var shuffleArray = function shuffleArray(array) {
  */
 var useAvatarColors = function useAvatarColors() {
   var shuffledColors = React.useMemo(function () {
-    return shuffleArray(Object.values(palette$6));
+    return shuffleArray(Object.values(palette$7));
   }, []);
   return shuffledColors;
 };
@@ -36176,7 +36194,8 @@ exports.getTheme = getTheme$1;
 exports.jobsSystemPalette = jobsSystemPalette;
 exports.scale = scale;
 exports.swagDarkSystemPalette = swagDarkSystemPalette;
-exports.swagSystemPalette = swagSystemPalette;
+exports.swagLightSystemPalette = swagSystemPalette;
+exports.swagSystemPalette = swagSystemPalette$1;
 exports.theme = defaultTheme;
 exports.useAvatarColors = useAvatarColors;
 exports.useTheme = useTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.65.1",
+  "version": "8.67.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -22,7 +22,7 @@
     "@emotion/native": "^11.9.3",
     "@emotion/primitives-core": "11.0.0",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.43.1",
+    "@hero-design/colors": "8.44.0",
     "date-fns": "^2.16.1",
     "hero-editor": "^1.9.21",
     "nanoid": "^4.0.2"

package/src/components/Card/StyledCard.tsx

@@ -2,7 +2,13 @@ import { View } from 'react-native';
 import styled from '@emotion/native';
 
 const StyledCard = styled(View)<{
-  themeIntent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
+  themeIntent?:
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'archived'
+    | 'neutral';
 }>(({ theme, themeIntent }) => ({
   ...(themeIntent !== undefined && {
     backgroundColor: theme.__hd__.card.colors[themeIntent],

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

@@ -260,6 +260,70 @@ exports[`Card renders correctly when intent is primary 1`] = `
 </View>
 `;
 
+exports[`Card renders correctly when intent is subdued 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <View
+    style={
+      [
+        {
+          "borderRadius": 12,
+          "overflow": "hidden",
+        },
+        undefined,
+      ]
+    }
+    themeIntent="subdued"
+  >
+    <Text
+      allowFontScaling={false}
+      style={
+        [
+          {
+            "color": "#001f23",
+            "fontFamily": "BeVietnamPro-Regular",
+            "fontSize": 14,
+            "letterSpacing": 0.48,
+            "lineHeight": 22,
+          },
+          undefined,
+        ]
+      }
+      themeIntent="body"
+      themeTypeface="neutral"
+      themeVariant="small"
+    >
+      Card Content
+    </Text>
+  </View>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;
+
 exports[`Card renders correctly when intent is success 1`] = `
 <View
   style={

package/src/components/Card/__tests__/index.spec.tsx

@@ -25,6 +25,7 @@ describe('Card', () => {
     ${'info'}
     ${'danger'}
     ${'archived'}
+    ${'subdued'}
   `('renders correctly when intent is $intent', ({ intent }) => {
     const { toJSON, getByText } = renderWithTheme(
       <Card intent={intent}>

package/src/components/Card/index.tsx

@@ -12,7 +12,13 @@ export interface CardProps extends ViewProps {
   /**
    * Visual intent color to apply to card.
    */
-  intent?: 'primary' | 'success' | 'warning' | 'danger' | 'archived';
+  intent?:
+    | 'primary'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'archived'
+    | 'neutral';
   /**
    * Additional style.
    */

package/src/index.ts

@@ -3,6 +3,7 @@ import theme, {
   ThemeProvider,
   useTheme,
   swagSystemPalette,
+  swagLightSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
@@ -77,6 +78,7 @@ export {
   ThemeSwitcher,
   withTheme,
   swagSystemPalette,
+  swagLightSystemPalette,
   swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,

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

@@ -273,6 +273,7 @@ exports[`theme returns correct theme object 1`] = `
         "danger": "#f46363",
         "dataCardIndicator": "#401960",
         "info": "#b5c3fd",
+        "neutral": "#f6f6f7",
         "primary": "#401960",
         "success": "#5ace7d",
         "warning": "#ffbe71",

package/src/theme/components/card.ts

@@ -9,6 +9,7 @@ const getCardTheme = (theme: GlobalTheme) => {
     warning: theme.colors.warning,
     danger: theme.colors.error,
     archived: theme.colors.archived,
+    neutral: theme.colors.neutralGlobalSurface,
   };
 
   const sizes = {

package/src/theme/global/colors/__tests__/__snapshots__/swagLight.spec.ts.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`swagDark returns correct theme object 1`] = `
+{
+  "archived": "#abacaf",
+  "archivedSurface": "#dadbde",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#FDFBFF",
+  "decorativePrimarySurface": "#B382FD",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#FDFBFF",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#F1E9FB",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#606065",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#001f23",
+  "onErrorSurface": "#cb300a",
+  "onInfoSurface": "#355bfb",
+  "onPrimary": "#FDFBFF",
+  "onSecondary": "#ffffff",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ac5d00",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#380060",
+  "primary": "#7622d7",
+  "primaryOutline": "#001f23",
+  "secondary": "#460078",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;