@hero-design/rn 8.11.3 → 8.12.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.11.3",
+  "version": "8.12.0-rc.0",
   "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.3",
+    "@hero-design/colors": "8.12.0-rc.0",
     "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.3",
+    "@hero-design/eslint-plugin": "8.12.0-rc.0",
     "@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.3",
+    "eslint-config-hd": "8.12.0-rc.0",
     "jest": "^27.3.1",
-    "prettier-config-hd": "8.11.3",
+    "prettier-config-hd": "8.12.0-rc.0",
     "react": "18.0.0",
     "react-native": "0.69.7",
     "react-native-gesture-handler": "~2.1.0",

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,11 +3,13 @@ import theme, {
   ThemeProvider,
   useTheme,
   swagSystemPalette,
+  swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
   walletSystemPalette,
   eBensSystemPalette,
   ThemeSwitcher,
+  withTheme,
 } from './theme';
 import { scale } from './utils/scale';
 
@@ -61,7 +63,9 @@ export {
   scale,
   ThemeProvider,
   ThemeSwitcher,
+  withTheme,
   swagSystemPalette,
+  swagDarkSystemPalette,
   workSystemPalette,
   jobsSystemPalette,
   walletSystemPalette,

package/src/theme/ThemeSwitcher.tsx

@@ -8,10 +8,11 @@ import {
   jobsSystemPalette,
   walletSystemPalette,
   eBensSystemPalette,
+  swagDarkSystemPalette,
 } from './global';
 import ThemeProvider from './ThemeProvider';
 
-type ThemeName = 'swag' | 'work' | 'jobs' | 'wallet' | 'eBens';
+type ThemeName = 'swag' | 'swagDark' | 'work' | 'jobs' | 'wallet' | 'eBens';
 
 const ThemeSwitcher = ({
   name = 'swag',
@@ -32,9 +33,21 @@ const ThemeSwitcher = ({
         return getTheme(defaultScale, walletSystemPalette);
       case 'eBens':
         return getTheme(defaultScale, eBensSystemPalette);
+      case 'swagDark':
+        return getTheme(defaultScale, swagDarkSystemPalette);
     }
   }, [name]);
   return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
 };
 
+export const withTheme =
+  <P extends {}>(C: React.ComponentType<P>, themeName: ThemeName) =>
+  (props: P) => {
+    return (
+      <ThemeSwitcher name={themeName}>
+        <C {...props} />
+      </ThemeSwitcher>
+    );
+  };
+
 export default ThemeSwitcher;

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",
+}
+`;

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`wallet returns correct theme object 1`] = `
+Object {
+  "archived": "#abacaf",
+  "archivedSurface": "#f1f2f3",
+  "darkGlobalSurface": "#001f23",
+  "decorativePrimary": "#8999ff",
+  "decorativePrimarySurface": "#e7ebff",
+  "defaultGlobalSurface": "#ffffff",
+  "defaultSurface": "#dce0ff",
+  "disabledOnDefaultGlobalSurface": "#bfc1c5",
+  "disabledOutline": "#bfc1c5",
+  "error": "#f46363",
+  "errorSurface": "#fcebe7",
+  "highlightedSurface": "#eff0fc",
+  "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": "#6b77e5",
+  "primary": "#5a68e2",
+  "primaryOutline": "#001f23",
+  "secondary": "#3f499e",
+  "secondaryOutline": "#e8e9ea",
+  "success": "#5ace7d",
+  "successSurface": "#f0fef4",
+  "warning": "#ffbe71",
+  "warningSurface": "#fff6eb",
+}
+`;