@universal-tennis/ui-shared 0.0.21 → 0.0.23

package/.storybook/preview.js

@@ -1,4 +1,4 @@
-import "./variables.css";
+import "./typography.css";
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },

package/dist/components.js

@@ -1,5 +1,4 @@
 // ATOMS
-import "./stories/assets/css/variables.css";
 export { default as Button } from './stories/atoms/Button/Button';
 export { default as Typography } from './stories/atoms/Typography/Typography';
 // MOLECULES

package/dist/components.js.map

@@ -1 +1 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,oCAAoC,CAAC;AAE5C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAE9E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAEzE,aAAa"}
+{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,+BAA+B,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,uCAAuC,CAAC;AAE9E,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,oCAAoC,CAAC;AAEzE,aAAa"}

package/dist/stories/atoms/Button/Button.js

@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import MuiButton from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
+import { colors } from '../../theme/colors';
 const StyledButton = styled(MuiButton)({
     borderRadius: '24px',
     fontSize: '12px',
@@ -25,33 +26,33 @@ const StyledButton = styled(MuiButton)({
     },
 });
 const PrimaryButton = styled(StyledButton)((props) => ({
-    backgroundColor: 'var(--black)',
-    color: 'var(--white)',
+    backgroundColor: colors.black,
+    color: colors.white,
     width: props.isExpanded ? '100%' : 'inherit',
     '&:hover': {
-        backgroundColor: 'var(--darkest-grey)',
-        borderColor: 'var(--darkest-grey)',
+        backgroundColor: colors.darkestGrey,
+        borderColor: colors.darkestGrey,
     },
     '&:disabled': {
-        backgroundColor: 'var(--lightest-grey)',
-        borderColor: 'var(--lightest-grey)',
+        backgroundColor: colors.lightGrey,
+        borderColor: colors.lightGrey,
     },
 }));
 const SecondaryButton = styled(StyledButton)({
-    borderColor: 'var(--black)',
+    borderColor: colors.black,
     backgroundColor: 'transparent',
-    color: 'var(--black)',
+    color: colors.black,
     '&:hover': {
-        borderColor: 'var(--darkest-grey)',
+        borderColor: colors.darkestGrey,
     },
     '&:disabled': {
-        borderColor: 'var(--disabled)'
+        borderColor: colors.disabled
     },
 });
 const LinkButton = styled(MuiButton)({
     borderColor: 'transparent',
     backgroundColor: 'transparent',
-    color: 'var(--primary)',
+    color: colors.primary,
     textTransform: 'inherit',
     justifyContent: 'left',
     padding: 0,
@@ -59,7 +60,7 @@ const LinkButton = styled(MuiButton)({
         backgroundColor: 'transparent',
     },
     '&:disabled': {
-        borderColor: 'var(--disabled)'
+        borderColor: colors.disabled
     },
 });
 export default function Button(_a) {

package/dist/stories/atoms/Button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAa9C,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,uBAAuB;IAE/B,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAwB,EAAE,EAAE,CAAC,CAAC;IACxE,eAAe,EAAE,cAAc;IAC/B,KAAK,EAAE,cAAc;IACrB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;IAE5C,SAAS,EAAE;QACT,eAAe,EAAE,qBAAqB;QACtC,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,sBAAsB;QACvC,WAAW,EAAE,sBAAsB;KACpC;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC3C,WAAW,EAAE,cAAc;IAC3B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,cAAc;IAErB,SAAS,EAAE;QACT,WAAW,EAAE,qBAAqB;KACnC;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,EAAE,aAAa;IAC1B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,gBAAgB;IACvB,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,MAAM;IACtB,OAAO,EAAE,CAAC;IAEV,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;IAED,YAAY,EAAE;QACZ,WAAW,EAAE,iBAAiB;KAC/B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAA6C;QAA7C,EAAE,QAAQ,EAAE,QAAQ,OAAyB,EAApB,KAAK,cAA9B,wBAAgC,CAAF;IAC3D,QAAQ,QAAQ,EAAE;QAChB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,GAER,QAAQ,CACK,CACjB,CAAC;QACJ,KAAK,kBAAkB;YACrB,OAAO,CACH,oBAAC,aAAa,kBACZ,UAAU,UACN,KAAK,GAER,QAAQ,CACK,CACnB,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,eAAe,oBACV,KAAK,GAER,QAAQ,CACO,CACnB,CAAC;QACJ,KAAK,MAAM;YACT,OAAO,CACH,oBAAC,UAAU,kBACT,kBAAkB,UACd,KAAK,GAER,QAAQ,CACE,CAChB,CAAC;QACJ;YACE,OAAO,CACH,oBAAC,YAAY,oBACP,KAAK,GAEV,QAAQ,CACM,CAClB,CAAC;KACL;AACH,CAAC"}
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Button/Button.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAC1C,OAAO,SAAS,MAAM,sBAAsB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAC,MAAM,EAAC,MAAM,oBAAoB,CAAC;AAa1C,MAAM,YAAY,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACrC,YAAY,EAAE,MAAM;IACpB,QAAQ,EAAE,MAAM;IAChB,OAAO,EAAE,QAAQ;IACjB,MAAM,EAAE,MAAM;IACd,UAAU,EAAE,QAAQ;IACpB,UAAU,EAAE,MAAM;IAClB,MAAM,EAAE,uBAAuB;IAE/B,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC;AAEH,MAAM,aAAa,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAwB,EAAE,EAAE,CAAC,CAAC;IACxE,eAAe,EAAE,MAAM,CAAC,KAAK;IAC7B,KAAK,EAAE,MAAM,CAAC,KAAK;IACnB,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;IAE5C,SAAS,EAAE;QACT,eAAe,EAAE,MAAM,CAAC,WAAW;QACnC,WAAW,EAAE,MAAM,CAAC,WAAW;KAChC;IACD,YAAY,EAAE;QACZ,eAAe,EAAE,MAAM,CAAC,SAAS;QACjC,WAAW,EAAE,MAAM,CAAC,SAAS;KAC9B;CACF,CAAC,CAAC,CAAC;AAEJ,MAAM,eAAe,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC;IAC3C,WAAW,EAAE,MAAM,CAAC,KAAK;IACzB,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,MAAM,CAAC,KAAK;IAEnB,SAAS,EAAE;QACT,WAAW,EAAE,MAAM,CAAC,WAAW;KAChC;IACD,YAAY,EAAE;QACZ,WAAW,EAAE,MAAM,CAAC,QAAQ;KAC7B;CACF,CAAC,CAAC;AAEH,MAAM,UAAU,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;IACnC,WAAW,EAAE,aAAa;IAC1B,eAAe,EAAE,aAAa;IAC9B,KAAK,EAAE,MAAM,CAAC,OAAO;IACrB,aAAa,EAAE,SAAS;IACxB,cAAc,EAAE,MAAM;IACtB,OAAO,EAAE,CAAC;IAEV,SAAS,EAAE;QACT,eAAe,EAAE,aAAa;KAC/B;IAED,YAAY,EAAE;QACZ,WAAW,EAAE,MAAM,CAAC,QAAQ;KAC7B;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAA6C;QAA7C,EAAE,QAAQ,EAAE,QAAQ,OAAyB,EAApB,KAAK,cAA9B,wBAAgC,CAAF;IAC3D,QAAQ,QAAQ,EAAE;QAChB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,aAAa,oBACR,KAAK,GAER,QAAQ,CACK,CACjB,CAAC;QACJ,KAAK,kBAAkB;YACrB,OAAO,CACH,oBAAC,aAAa,kBACZ,UAAU,UACN,KAAK,GAER,QAAQ,CACK,CACnB,CAAC;QACJ,KAAK,WAAW;YACd,OAAO,CACL,oBAAC,eAAe,oBACV,KAAK,GAER,QAAQ,CACO,CACnB,CAAC;QACJ,KAAK,MAAM;YACT,OAAO,CACH,oBAAC,UAAU,kBACT,kBAAkB,UACd,KAAK,GAER,QAAQ,CACE,CAChB,CAAC;QACJ;YACE,OAAO,CACH,oBAAC,YAAY,oBACP,KAAK,GAEV,QAAQ,CACM,CAClB,CAAC;KACL;AACH,CAAC"}

package/dist/stories/atoms/Typography/Typography.d.ts

@@ -1,5 +1,4 @@
 import React, { ReactElement } from 'react';
-import "../../assets/css/typography.css";
 type TypographyProps = {
     children: string | ReactElement;
     category?: string;

package/dist/stories/atoms/Typography/Typography.js

@@ -12,7 +12,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React from 'react';
 import MuiTypography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
-import "../../assets/css/typography.css";
 const DISPLAY_SIZES = {
     "XXX-large": '120px',
     "XX-large": '100px',
@@ -47,17 +46,17 @@ const SECONDARY_SIZES = {
     "xx-small-book": '10px',
 };
 const DisplayTypography = styled(MuiTypography)((props) => ({
-    fontFamily: 'var(--display-font)',
+    fontFamily: `'UTR Numerals', 'Tungsten A', 'Tungsten B'`,
     fontSize: DISPLAY_SIZES[props.size],
     fontWeight: props.weight
 }));
 const PrimaryTypography = styled(MuiTypography)((props) => ({
-    fontFamily: 'var(--primary-font)',
+    fontFamily: `'Tungsten A', 'Tungsten B', 'Helvetica', Arial, sans-serif`,
     fontSize: PRIMARY_SIZES[props.size],
     fontWeight: props.weight
 }));
 const SecondaryTypography = styled(MuiTypography)((props) => ({
-    fontFamily: 'var(--secondary-font)',
+    fontFamily: `'Gotham SSm A', 'Gotham SSm B', 'Helvetica', Arial, sans-serif`,
     fontSize: SECONDARY_SIZES[props.size],
     textTransform: props.isCap ? 'uppercase' : 'inherit',
     fontWeight: props.weight

package/dist/stories/atoms/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":"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"}

package/dist/stories/molecules/Cards/shared.js

@@ -1,11 +1,12 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
+import { colors } from 'stories/theme/colors';
 export const StyledCard = styled(Box)({
     display: 'flex',
     flexDirection: 'column',
     borderRadius: '4px',
     padding: '16px',
-    border: '1px solid var(--cool-grey-300)',
+    border: `1px solid ${colors.coolGrey300}`,
     '&:hover': {
         cursor: 'pointer'
     },

package/dist/stories/molecules/Cards/shared.js.map

@@ -1 +1 @@
-{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,gCAAgC;IAExC,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC"}
+{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../../src/stories/molecules/Cards/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC;IACpC,OAAO,EAAE,MAAM;IACf,aAAa,EAAE,QAAQ;IACvB,YAAY,EAAE,KAAK;IACnB,OAAO,EAAE,MAAM;IACf,MAAM,EAAE,aAAa,MAAM,CAAC,WAAW,EAAE;IAEzC,SAAS,EAAE;QACT,MAAM,EAAE,SAAS;KAClB;CACF,CAAC,CAAC"}

package/dist/stories/theme/colors.d.ts

@@ -0,0 +1,10 @@
+export declare const colors: {
+    primary: string;
+    secondary: string;
+    disabled: string;
+    black: string;
+    white: string;
+    lightGrey: string;
+    darkestGrey: string;
+    coolGrey300: string;
+};

package/dist/stories/theme/colors.js

@@ -0,0 +1,11 @@
+export const colors = {
+    primary: '#008ded',
+    secondary: '#e0004f',
+    disabled: '#bac6d6',
+    black: '#000',
+    white: '#fff',
+    lightGrey: '#d7e0ea',
+    darkestGrey: '#3b4859',
+    coolGrey300: '#DDE3EB'
+};
+//# sourceMappingURL=colors.js.map

package/dist/stories/theme/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../src/stories/theme/colors.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,SAAS;IACpB,QAAQ,EAAE,SAAS;IACnB,KAAK,EAAE,MAAM;IACb,KAAK,EAAE,MAAM;IACb,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,WAAW,EAAE,SAAS;CACvB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@universal-tennis/ui-shared",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "main": "dist/items.js",
   "license": "MIT",
   "homepage": "https://universaltennis.com",

package/src/components.jsx

@@ -1,6 +1,4 @@
 // ATOMS
-import "./stories/assets/css/variables.css";
-
 export { default as Button } from './stories/atoms/Button/Button';
 export { default as Typography } from './stories/atoms/Typography/Typography';
 

package/src/custom.d.ts

@@ -11,8 +11,3 @@ declare module '*.svg' {
   const src: string;
   export default src;
 }
-
-declare module '*.css' {
-  const classes: { [key: string]: string };
-  export default classes;
-}

package/src/stories/atoms/Button/Button.tsx

@@ -1,6 +1,7 @@
 import React, {ReactElement} from 'react';
 import MuiButton from '@mui/material/Button';
 import { styled } from '@mui/material/styles';
+import {colors} from '../../theme/colors';
 
 type ButtonProps = {
   children: string | ReactElement;
@@ -28,37 +29,37 @@ const StyledButton = styled(MuiButton)({
 });
 
 const PrimaryButton = styled(StyledButton)((props: StyledButtonProps) => ({
-  backgroundColor: 'var(--black)',
-  color: 'var(--white)',
+  backgroundColor: colors.black,
+  color: colors.white,
   width: props.isExpanded ? '100%' : 'inherit',
   
   '&:hover': {
-    backgroundColor: 'var(--darkest-grey)',
-    borderColor: 'var(--darkest-grey)',
+    backgroundColor: colors.darkestGrey,
+    borderColor: colors.darkestGrey,
   },
   '&:disabled': {
-    backgroundColor: 'var(--lightest-grey)',
-    borderColor: 'var(--lightest-grey)',
+    backgroundColor: colors.lightGrey,
+    borderColor: colors.lightGrey,
   },
 }));
 
 const SecondaryButton = styled(StyledButton)({
-  borderColor: 'var(--black)',
+  borderColor: colors.black,
   backgroundColor: 'transparent',
-  color: 'var(--black)',
+  color: colors.black,
 
   '&:hover': {
-    borderColor: 'var(--darkest-grey)',
+    borderColor: colors.darkestGrey,
   },
   '&:disabled': {
-    borderColor: 'var(--disabled)'
+    borderColor: colors.disabled
   },
 });
 
 const LinkButton = styled(MuiButton)({
   borderColor: 'transparent',
   backgroundColor: 'transparent',
-  color: 'var(--primary)',
+  color: colors.primary,
   textTransform: 'inherit',
   justifyContent: 'left',
   padding: 0,
@@ -68,7 +69,7 @@ const LinkButton = styled(MuiButton)({
   },
 
   '&:disabled': {
-    borderColor: 'var(--disabled)'
+    borderColor: colors.disabled
   },
 });
 

package/src/stories/atoms/Typography/Typography.tsx

@@ -1,7 +1,6 @@
 import React, {ReactElement} from 'react';
 import MuiTypography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
-import "../../assets/css/typography.css";
 
 type TypographyProps = {
   children: string | ReactElement;
@@ -53,19 +52,19 @@ const SECONDARY_SIZES = {
 };
 
 const DisplayTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: 'var(--display-font)',
+  fontFamily: `'UTR Numerals', 'Tungsten A', 'Tungsten B'`,
   fontSize: DISPLAY_SIZES[props.size as keyof typeof DISPLAY_SIZES],
   fontWeight: props.weight
 }));
 
 const PrimaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: 'var(--primary-font)',
+  fontFamily: `'Tungsten A', 'Tungsten B', 'Helvetica', Arial, sans-serif`,
   fontSize: PRIMARY_SIZES[props.size as keyof typeof PRIMARY_SIZES],
   fontWeight: props.weight
 }));
 
 const SecondaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: 'var(--secondary-font)',
+  fontFamily: `'Gotham SSm A', 'Gotham SSm B', 'Helvetica', Arial, sans-serif`,
   fontSize: SECONDARY_SIZES[props.size as keyof typeof SECONDARY_SIZES],
   textTransform: props.isCap ? 'uppercase' : 'inherit',
   fontWeight: props.weight

package/src/stories/molecules/Cards/shared.tsx

@@ -1,12 +1,13 @@
 import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
+import { colors } from 'stories/theme/colors';
 
 export const StyledCard = styled(Box)({
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '4px',
   padding: '16px',
-  border: '1px solid var(--cool-grey-300)',
+  border: `1px solid ${colors.coolGrey300}`,
   
   '&:hover': {
     cursor: 'pointer'

package/src/stories/theme/colors.ts

@@ -0,0 +1,10 @@
+export const colors = {
+  primary: '#008ded',
+  secondary: '#e0004f',
+  disabled: '#bac6d6',
+  black: '#000',
+  white: '#fff',
+  lightGrey: '#d7e0ea',
+  darkestGrey: '#3b4859',
+  coolGrey300: '#DDE3EB'
+};

package/tsconfig.json

@@ -17,7 +17,6 @@
       "baseUrl": "src",
       "allowSyntheticDefaultImports": true,
       "noImplicitAny": true,
-      "plugins": [{ "name": "typescript-plugin-css-modules" }]
     },
     "exclude": [
       "node_modules",

package/.storybook/variables.css

@@ -1,12 +0,0 @@
-:root {
-    --primary: #008ded;
-    --secondary: #e0004f;
-    --disabled: #bac6d6;
-    --black: #000;
-    --white: #fff;
-    --light-grey: #d7e0ea;
-    --darkest-grey: #3b4859;
-
-    /* colors */
-    --cool-grey-300: #DDE3EB;
-}

package/src/stories/assets/css/variables.scss

@@ -1,12 +0,0 @@
-:root {
-    --primary: #008ded;
-    --secondary: #e0004f;
-    --disabled: #bac6d6;
-    --black: #000;
-    --white: #fff;
-    --light-grey: #d7e0ea;
-    --darkest-grey: #3b4859;
-
-    /* colors */
-    --cool-grey-300: #DDE3EB;
-}