@hero-design/rn 8.11.2 → 8.11.4-rc.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.11.2",
+  "version": "8.11.4-rc.1",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -21,7 +21,7 @@
   "dependencies": {
     "@emotion/native": "^11.9.3",
     "@emotion/react": "^11.9.3",
-    "@hero-design/colors": "8.11.2",
+    "@hero-design/colors": "8.11.4-rc.1",
     "date-fns": "^2.16.1",
     "events": "^3.2.0",
     "hero-editor": "^1.9.21"
@@ -44,7 +44,7 @@
     "@babel/preset-typescript": "^7.17.12",
     "@babel/runtime": "^7.18.9",
     "@emotion/jest": "^11.9.3",
-    "@hero-design/eslint-plugin": "8.11.2",
+    "@hero-design/eslint-plugin": "8.11.4-rc.1",
     "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/slider": "4.1.12",
     "@rollup/plugin-babel": "^5.3.1",
@@ -60,9 +60,9 @@
     "@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.11.2",
+    "eslint-config-hd": "8.11.4-rc.1",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.11.2",
+    "prettier-config-hd": "8.11.4-rc.1",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

package/src/components/Carousel/CardCarousel.tsx

@@ -5,7 +5,12 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { FlatList, StyleProp, ViewStyle } from 'react-native';
+import {
+  FlatList,
+  LayoutChangeEvent,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
 import { useTheme } from '../../theme';
 import { ITEM_WIDTH_RATE, VIEW_POSITION_CENTER } from './contants';
 import {
@@ -34,9 +39,9 @@ export interface CardCarouselProps {
    */
   onItemIndexChange?: (index: number) => void;
   /**
-   * Carousel data.
+   * Carousel items.
    */
-  items: any[];
+  items: React.ReactNode[];
   /**
    * Indicates hide or show page control.
    */
@@ -53,6 +58,10 @@ export interface CardCarouselProps {
    * Component ref.
    */
   ref?: React.Ref<CardCarouselHandles>;
+  /*
+   * onLayout event handler.
+   */
+  onLayout?: (event: LayoutChangeEvent) => void;
 }
 
 export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
@@ -65,6 +74,7 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       testID,
       autoPlay = false,
       autoPlayInterval = 3000,
+      onLayout,
     }: CardCarouselProps,
     ref?: React.Ref<CardCarouselHandles>
   ) => {
@@ -155,11 +165,14 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
       [itemWidth]
     );
 
-    const onLayout = useCallback(
+    const flatListOnLayout = useCallback(
       (e) => {
         setFlatListWidth(e.nativeEvent.layout.width);
+        setTimeout(() => {
+          onLayout?.(e);
+        });
       },
-      [setFlatListWidth]
+      [setFlatListWidth, onLayout]
     );
 
     const renderItem = useCallback(
@@ -179,11 +192,15 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
     return (
       <StyledWrapper style={style} testID={testID}>
         <FlatList
-          contentContainerStyle={{
-            paddingHorizontal:
+          contentInset={{
+            top: 0,
+            left: theme.__hd__.cardCarousel.space
+              .contentContainerPaddingHorizontal,
+            bottom: 0,
+            right:
               theme.__hd__.cardCarousel.space.contentContainerPaddingHorizontal,
           }}
-          onLayout={onLayout}
+          onLayout={flatListOnLayout}
           data={items}
           horizontal
           showsHorizontalScrollIndicator={false}
@@ -197,14 +214,13 @@ export const CardCarousel = forwardRef<CardCarouselHandles, CardCarouselProps>(
           keyExtractor={(_, index) => `${index}`}
           decelerationRate="fast"
           renderToHardwareTextureAndroid
-          snapToInterval={
-            itemWidth + theme.__hd__.cardCarousel.space.carouselItemSpacing
-          }
+          snapToInterval={itemWidth}
           onViewableItemsChanged={visibleSlideChanged}
           viewabilityConfig={{
             itemVisiblePercentThreshold: 80,
           }}
         />
+
         {!hidePageControl && (
           <StyledPageControl
             testID="pageControl"

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

@@ -15,9 +15,12 @@ exports[`CardCarousel should render correctly 1`] = `
 >
   <RCTScrollView
     bounces={false}
-    contentContainerStyle={
+    contentInset={
       Object {
-        "paddingHorizontal": 24,
+        "bottom": 0,
+        "left": 24,
+        "right": 24,
+        "top": 0,
       }
     }
     data={
@@ -51,7 +54,7 @@ exports[`CardCarousel should render correctly 1`] = `
     scrollEventThrottle={32}
     showsHorizontalScrollIndicator={false}
     snapToAlignment="center"
-    snapToInterval={8}
+    snapToInterval={0}
     stickyHeaderIndices={Array []}
     viewabilityConfig={
       Object {

package/src/components/Collapse/StyledCollapse.tsx

@@ -1,11 +1,11 @@
 import { Animated, Dimensions, View } from 'react-native';
 import styled from '@emotion/native';
 
-const StyledWrapper = styled(Animated.View)(() => ({
+const StyledWrapper = styled(Animated.View)({
   margin: 0,
   padding: 0,
   overflow: 'hidden',
-}));
+});
 
 /**
  * Height need to be high enough to cover most scenario
@@ -16,9 +16,9 @@ const StyledHiddenWrapper = styled(View)(() => ({
   height: Dimensions.get('window').height,
 }));
 
-const StyledChildWrapper = styled(View)(() => ({
+const StyledChildWrapper = styled(View)({
   margin: 0,
   padding: 0,
-}));
+});
 
 export { StyledWrapper, StyledHiddenWrapper, StyledChildWrapper };

package/src/components/DatePicker/DatePickerIOS.tsx

@@ -8,6 +8,7 @@ import TextInput from '../TextInput';
 import Button from '../Button';
 import { StyledPickerWrapper } from './StyledDatePicker';
 import type { DatePickerProps } from './types';
+import { useTheme } from '../../theme';
 
 const DatePickerIOS = ({
   value,
@@ -30,6 +31,7 @@ const DatePickerIOS = ({
 
   const displayValue = value ? formatDate(displayFormat, value) : '';
 
+  const theme = useTheme();
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
       <View pointerEvents="none" testID="datePickerInputIOS">
@@ -77,6 +79,7 @@ const DatePickerIOS = ({
             }}
             display="spinner"
             style={{ flex: 1 }}
+            textColor={theme.colors.onDefaultGlobalSurface}
           />
         </StyledPickerWrapper>
       </BottomSheet>

package/src/components/DatePicker/__tests__/__snapshots__/DatePickerIOS.spec.tsx.snap

@@ -448,6 +448,7 @@ exports[`DatePickerIOS renders correctly 1`] = `
                       }
                     }
                     testID="datePickerIOS"
+                    textColor="#001f23"
                     value={1995-12-21T00:00:00.000Z}
                   />
                 </View>

package/src/components/FAB/ActionGroup/StyledActionGroup.tsx

@@ -44,7 +44,7 @@ const StyledBackdrop = styled(Animated.View)<
 const StyledHeaderText = styled(Typography.Text)<TextProps>(({ theme }) => ({
   fontSize: theme.__hd__.fab.fontSizes.header,
   lineHeight: theme.__hd__.fab.lineHeights.header,
-  color: theme.__hd__.fab.colors.titleText,
+  color: theme.__hd__.fab.colors.headerText,
   fontFamily: theme.__hd__.fab.fonts.header,
   marginRight: theme.__hd__.fab.space.headerTextMarginRight,
   marginBottom: theme.__hd__.fab.space.headerTextMarginBottom,

package/src/components/FAB/ActionGroup/__tests__/__snapshots__/index.spec.tsx.snap

@@ -64,7 +64,7 @@ exports[`ActionGroup has active false 1`] = `
           },
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 24,
               "lineHeight": 32,
@@ -626,7 +626,7 @@ exports[`ActionGroup has active true 1`] = `
           },
           Array [
             Object {
-              "color": "#ffffff",
+              "color": "#001f23",
               "fontFamily": "BeVietnamPro-SemiBold",
               "fontSize": 24,
               "lineHeight": 32,

package/src/components/RichTextEditor/RichTextEditor.tsx

@@ -195,7 +195,8 @@ const RichTextEditor: ComponentType<RichTextEditorProps> = ({
               autoFocus: ${autoFocus},
               style: {
                 padding: '0 !important',
-                fontSize: ${theme.__hd__.richTextEditor.fontSizes.editor}
+                fontSize: ${theme.__hd__.richTextEditor.fontSizes.editor},
+                color: '${theme.__hd__.richTextEditor.colors.text}'
               }
             };
             ${heroEditorApp}

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

@@ -151,7 +151,8 @@ exports[`RichTextEditor onMessage recevied event editor-layout should update hei
               autoFocus: true,
               style: {
                 padding: '0 !important',
-                fontSize: 14
+                fontSize: 14,
+                color: '#001f23'
               }
             };
             mockHeroEditApp
@@ -415,7 +416,8 @@ exports[`RichTextEditor should render correctly 1`] = `
               autoFocus: true,
               style: {
                 padding: '0 !important',
-                fontSize: 14
+                fontSize: 14,
+                color: '#001f23'
               }
             };
             mockHeroEditApp

package/src/components/TextInput/__tests__/__snapshots__/StyledTextInput.spec.tsx.snap

@@ -671,7 +671,7 @@ exports[`StyledHelperText renders correctly 1`] = `
       },
       Array [
         Object {
-          "color": "#ffffff",
+          "color": "#001f23",
           "fontFamily": "BeVietnamPro-SemiBold",
           "fontSize": 24,
           "lineHeight": 32,

package/src/components/TimePicker/TimePickerIOS.tsx

@@ -8,6 +8,7 @@ import TextInput from '../TextInput';
 import Button from '../Button';
 import { StyledPickerWrapper } from './StyledTimePicker';
 import type { TimePickerProps } from './types';
+import { useTheme } from '../../theme';
 
 const TimePickerIOS = ({
   value,
@@ -29,6 +30,7 @@ const TimePickerIOS = ({
 
   const is12Hour = displayFormat.includes('hh');
   const displayValue = value ? formatTime(displayFormat, value) : '';
+  const theme = useTheme();
 
   return (
     <TouchableOpacity onPress={() => setOpen(true)} disabled={disabled}>
@@ -78,6 +80,7 @@ const TimePickerIOS = ({
             }}
             display="spinner"
             style={{ flex: 1 }}
+            textColor={theme.colors.onDefaultGlobalSurface}
           />
         </StyledPickerWrapper>
       </BottomSheet>

package/src/components/TimePicker/__tests__/__snapshots__/TimePickerIOS.spec.tsx.snap

@@ -662,6 +662,7 @@ exports[`TimePickerIOS renders correctly 1`] = `
                       }
                     }
                     testID="timePickerIOS"
+                    textColor="#001f23"
                     value={1995-12-17T03:24:00.000Z}
                   />
                 </View>

package/src/index.ts

@@ -3,6 +3,7 @@ import theme, {
   ThemeProvider,
   useTheme,
   swagSystemPalette,
+  swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
   walletSystemPalette,
@@ -62,6 +63,7 @@ export {
   ThemeProvider,
   ThemeSwitcher,
   swagSystemPalette,
+  swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
   walletSystemPalette,

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

@@ -399,7 +399,7 @@ Object {
         "actionItemText": "#ffffff",
         "backdropBackground": "#000000",
         "buttonBackground": "#401960",
-        "headerText": "#ffffff",
+        "headerText": "#001f23",
         "icon": "#ffffff",
         "titleText": "#ffffff",
       },
@@ -621,6 +621,7 @@ Object {
     },
     "richTextEditor": Object {
       "colors": Object {
+        "text": "#001f23",
         "toolbarBackgroundColor": "#f6f6f7",
         "toolbarBorderColor": "#e8e9ea",
         "toolbarButtonSelectedBackground": "#ece8ef",

package/src/theme/components/fab.ts

@@ -4,10 +4,10 @@ const getFABTheme = (theme: GlobalTheme) => {
   const colors = {
     buttonBackground: theme.colors.primary,
     icon: theme.colors.onPrimary,
-    headerText: theme.colors.onDarkGlobalSurface,
+    headerText: theme.colors.onDefaultGlobalSurface,
     actionItemBackground: theme.colors.primary,
     backdropBackground: theme.colors.overlayGlobalSurface,
-    titleText: theme.colors.onDarkGlobalSurface,
+    titleText: theme.colors.onPrimary,
     actionItemText: theme.colors.onPrimary,
   };
 

package/src/theme/components/richTextEditor.ts

@@ -5,6 +5,7 @@ const getRichTextEditorTheme = (theme: GlobalTheme) => {
     toolbarBorderColor: theme.colors.secondaryOutline,
     toolbarBackgroundColor: theme.colors.neutralGlobalSurface,
     toolbarButtonSelectedBackground: theme.colors.highlightedSurface,
+    text: theme.colors.onDefaultGlobalSurface,
   };
 
   const sizes = {

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`eBens returns correct theme object 1`] = `
+Object {
+  "archived": "#abacaf",
+  "archivedSurface": "#f1f2f3",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#c38cee",
+  "decorativePrimarySurface": "#f3e8fc",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#f6f6f7",
+  "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": "#737479",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#001f23",
+  "onErrorSurface": "#de350b",
+  "onInfoSurface": "#4568fb",
+  "onPrimary": "#ffffff",
+  "onSecondary": "#ffffff",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ffa234",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#914edf",
+  "primary": "#7622d7",
+  "primaryOutline": "#001f23",
+  "secondary": "#9f64e3",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`global returns correct theme object 1`] = `
+Object {
+  "archived": "#abacaf",
+  "archivedSurface": "#f1f2f3",
+  "darkGlobalSurface": "#001f23",
+  "defaultGlobalSurface": "#ffffff",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#737479",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#001f23",
+  "onErrorSurface": "#de350b",
+  "onInfoSurface": "#4568fb",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ffa234",
+  "overlayGlobalSurface": "#000000",
+  "primaryOutline": "#001f23",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`globalDark returns correct theme object 1`] = `
+Object {
+  "archived": "#abacaf",
+  "archivedSurface": "#f1f2f3",
+  "darkGlobalSurface": "#ffffff",
+  "defaultGlobalSurface": "#001f23",
+  "disabledOnDefaultGlobalSurface": "#82858a",
+  "disabledOutline": "#82858a",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "inactiveOnDefaultGlobalSurface": "#99a5a7",
+  "inactiveOutline": "#99a5a7",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#b3bcbd",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#264144",
+  "onArchivedSurface": "#737479",
+  "onDarkGlobalSurface": "#001f23",
+  "onDefaultGlobalSurface": "#ffffff",
+  "onErrorSurface": "#de350b",
+  "onInfoSurface": "#4568fb",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ffa234",
+  "overlayGlobalSurface": "#727478",
+  "primaryOutline": "#ffffff",
+  "secondaryOutline": "#193539",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`jobs returns correct theme object 1`] = `
+Object {
+  "archived": "#abacaf",
+  "archivedSurface": "#f1f2f3",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#ffad79",
+  "decorativePrimarySurface": "#ffefe4",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#ffffff",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#fff7f2",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#737479",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#001f23",
+  "onErrorSurface": "#de350b",
+  "onInfoSurface": "#4568fb",
+  "onPrimary": "#ffffff",
+  "onSecondary": "#ffffff",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ffa234",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#e6703f",
+  "primary": "#e3602a",
+  "primaryOutline": "#001f23",
+  "secondary": "#4d6265",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`swag returns correct theme object 1`] = `
+Object {
+  "archived": "#abacaf",
+  "archivedSurface": "#f1f2f3",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#ffffff",
+  "decorativePrimarySurface": "#ccd2d3",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#f6f6f7",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#ece8ef",
+  "inactiveOnDefaultGlobalSurface": "#808f91",
+  "inactiveOutline": "#808f91",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#4d6265",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#f6f6f7",
+  "onArchivedSurface": "#737479",
+  "onDarkGlobalSurface": "#ffffff",
+  "onDefaultGlobalSurface": "#001f23",
+  "onErrorSurface": "#de350b",
+  "onInfoSurface": "#4568fb",
+  "onPrimary": "#ffffff",
+  "onSecondary": "#ffffff",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ffa234",
+  "overlayGlobalSurface": "#000000",
+  "pressedSurface": "#664780",
+  "primary": "#401960",
+  "primaryOutline": "#001f23",
+  "secondary": "#795e90",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`swagDark returns correct theme object 1`] = `
+Object {
+  "archived": "#abacaf",
+  "archivedSurface": "#f1f2f3",
+  "darkGlobalSurface": "#ffffff",
+  "decorativePrimary": "#001f23",
+  "decorativePrimarySurface": "#193539",
+  "defaultGlobalSurface": "#001f23",
+  "defaultSurface": "#001f23",
+  "disabledOnDefaultGlobalSurface": "#82858a",
+  "disabledOutline": "#82858a",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#160922",
+  "inactiveOnDefaultGlobalSurface": "#99a5a7",
+  "inactiveOutline": "#99a5a7",
+  "info": "#b5c3fd",
+  "infoSurface": "#ecf0ff",
+  "mutedArchived": "#bcbdbf",
+  "mutedError": "#f68282",
+  "mutedInfo": "#c4cffd",
+  "mutedOnDefaultGlobalSurface": "#b3bcbd",
+  "mutedSuccess": "#7bd897",
+  "mutedWarning": "#ffcb8d",
+  "neutralGlobalSurface": "#264144",
+  "onArchivedSurface": "#737479",
+  "onDarkGlobalSurface": "#001f23",
+  "onDefaultGlobalSurface": "#ffffff",
+  "onErrorSurface": "#de350b",
+  "onInfoSurface": "#4568fb",
+  "onPrimary": "#001f23",
+  "onSecondary": "#001f23",
+  "onSuccessSurface": "#017d6d",
+  "onWarningSurface": "#ffa234",
+  "overlayGlobalSurface": "#727478",
+  "pressedSurface": "#664780",
+  "primary": "#c38cee",
+  "primaryOutline": "#ffffff",
+  "secondary": "#d5aff3",
+  "secondaryOutline": "#193539",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;