Shallow freeze on `colorPalette` object

[shanpriyan]

I've noticed that colorPalette has been shallow frozen, colorGuide hasn't been frozen from @cred/neopop-web/lib/primitives and properties with objects on it can still be mutated. If the intention is to freeze all objects, can we do a deepFreeze ? if yes shall I send a fix.

The result of calling Object.freeze(object) only applies to the immediate properties of object itself and will prevent future property addition, removal or value re-assignment operations only on object. If the value of those properties are objects themselves, those objects are not frozen and may be the target of property addition, removal or value re-assignment operations. MDN docs

Issue

colorPalette

```js export let colorPalette = Object.freeze({ white: { 50: '#E0E0E0', 70: '#EFEFEF', 90: '#FBFBFB', }, popWhite: { 100: '#D2D2D2', 200: '#E0E0E0', 300: '#EFEFEF', 400: '#FBFBFB', 500: '#ffffff', }, popBlack: { 100: '#8A8A8A', 200: '#3D3D3D', 300: '#161616', 400: '#121212', 500: '#0d0d0d', }, black: { 50: '#8A8A8A', 70: '#3D3D3D', 90: '#161616', 100: '#121212', }, poliPurple: { 100: '#E8DFFF', 200: '#D2C2FF', 300: '#B49AFF', 400: '#9772FF', 500: '#6A35FF', 600: '#4A25B3', 700: '#351A80', 800: '#20104D', }, orangeSunshine: { 100: '#FFEFE6', 200: '#FFDBC7', 300: '#FFC3A2', 400: '#FFAB7C', 500: '#FF8744', 600: '#B35F30', 700: '#804322', 800: '#4D2914', }, parkGreen: { 100: '#DDFFF1', 200: '#C4FFE6', 300: '#9DFFD6', 400: '#76FFC6', 500: '#3BFFAD', 600: '#29B379', 700: '#1E8057', 800: '#124D34', }, pinkPong: { 100: '#FFE1E9', 200: '#FFC6D4', 300: '#FFA0B7', 400: '#FF7B9A', 500: '#FF426F', 600: '#B32E4E', 700: '#802138', 800: '#4D1421', }, mannna: { 100: '#FFF8E5', 200: '#FFEFC7', 300: '#FFE5A2', 400: '#FFDB7D', 500: '#FFCB45', 600: '#B38E30', 700: '#806623', 800: '#4D3D15', }, neoPaccha: { 100: '#FBFFE6', 200: '#F7FFC6', 300: '#F2FF9F', 400: '#EDFE79', 500: '#E5FE40', 600: '#A0B22D', 700: '#727F20', 800: '#454C13', }, yoyo: { 100: '#F4E5FF', 200: '#E5C5FF', 300: '#D59FFF', 400: '#C379FF', 500: '#AA3FFF', 600: '#772CB3', 700: '#552080', 800: '#33134D', }, error: { 100: '#FCE2DD', 200: '#F6A69B', 300: '#F47564', 400: '#F05E4B', 500: '#EE4D37', }, warning: { 100: '#FBDDC2', 200: '#F8C699', 300: '#F5AC6A', 400: '#F29947', 500: '#F08D32', }, info: { 100: '#C2D0F2', 200: '#89A5E3', 300: '#3F6FD9', 400: '#2C5ECD', 500: '#144CC7', }, success: { 100: '#E6F9F1', 200: '#83E0B8', 300: '#4FE3A3', 400: '#1FC87F', 500: '#06C270', }, }); ```

colorGuide

```js const getColorGuide = () => ({ mainAppBackground: mainColors.black, darkComponents: getDarkThemedColors(), lightComponents: getLightThemedColors(), }); export let colorGuide = getColorGuide(); ```