@universal-tennis/ui-shared 0.0.23 → 0.0.25

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

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

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

@@ -1,7 +1,6 @@
 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;
@@ -29,37 +28,37 @@ const StyledButton = styled(MuiButton)({
 });
 
 const PrimaryButton = styled(StyledButton)((props: StyledButtonProps) => ({
-  backgroundColor: colors.black,
-  color: colors.white,
+  backgroundColor: 'var(--black)',
+  color: 'var(--white)',
   width: props.isExpanded ? '100%' : 'inherit',
   
   '&:hover': {
-    backgroundColor: colors.darkestGrey,
-    borderColor: colors.darkestGrey,
+    backgroundColor: 'var(--darkest-grey)',
+    borderColor: 'var(--darkest-grey)',
   },
   '&:disabled': {
-    backgroundColor: colors.lightGrey,
-    borderColor: colors.lightGrey,
+    backgroundColor: 'var(--light-grey)',
+    borderColor: 'var(--light-grey)',
   },
 }));
 
 const SecondaryButton = styled(StyledButton)({
-  borderColor: colors.black,
+  borderColor: 'var(--black)',
   backgroundColor: 'transparent',
-  color: colors.black,
+  color: 'var(--black)',
 
   '&:hover': {
-    borderColor: colors.darkestGrey,
+    borderColor: 'var(--darkest-grey)',
   },
   '&:disabled': {
-    borderColor: colors.disabled
+    borderColor: 'var(--disabled)'
   },
 });
 
 const LinkButton = styled(MuiButton)({
   borderColor: 'transparent',
   backgroundColor: 'transparent',
-  color: colors.primary,
+  color: 'var(--primary)',
   textTransform: 'inherit',
   justifyContent: 'left',
   padding: 0,
@@ -69,7 +68,7 @@ const LinkButton = styled(MuiButton)({
   },
 
   '&:disabled': {
-    borderColor: colors.disabled
+    borderColor: 'var(--disabled)'
   },
 });
 

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

@@ -1,6 +1,7 @@
 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;
@@ -52,19 +53,19 @@ const SECONDARY_SIZES = {
 };
 
 const DisplayTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: `'UTR Numerals', 'Tungsten A', 'Tungsten B'`,
+  fontFamily: 'var(--display-font)',
   fontSize: DISPLAY_SIZES[props.size as keyof typeof DISPLAY_SIZES],
   fontWeight: props.weight
 }));
 
 const PrimaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: `'Tungsten A', 'Tungsten B', 'Helvetica', Arial, sans-serif`,
+  fontFamily: 'var(--primary-font)',
   fontSize: PRIMARY_SIZES[props.size as keyof typeof PRIMARY_SIZES],
   fontWeight: props.weight
 }));
 
 const SecondaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
-  fontFamily: `'Gotham SSm A', 'Gotham SSm B', 'Helvetica', Arial, sans-serif`,
+  fontFamily: 'var(--secondary-font)',
   fontSize: SECONDARY_SIZES[props.size as keyof typeof SECONDARY_SIZES],
   textTransform: props.isCap ? 'uppercase' : 'inherit',
   fontWeight: props.weight

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

@@ -13,11 +13,11 @@ type ContactCardProps = {
   name: string;
   phone: string;
   email: string;
-  handleOnMessageClick?: VoidFunction;
+  onMessageClick?: VoidFunction;
 }
 
 export default function ContactCard({
-  name, phone, email, handleOnMessageClick, ...props 
+  name, phone, email, onMessageClick, ...props 
 }: ContactCardProps) {
   const firstName = name.split(" ")[0];
   const parsedNumber = parsePhoneNumber(phone || '');
@@ -40,7 +40,7 @@ export default function ContactCard({
             <Typography category="secondary" size="x-small-book">{email}</Typography>
         </Link>
         )}
-        <Button onClick={handleOnMessageClick} category="link" style={{marginTop: '8px'}}>
+        <Button onClick={onMessageClick} category="link" style={{marginTop: '8px'}}>
           <>
             <img src={ChatIcon} alt="message" style={{width: '20px'}} />
             <Typography style={{paddingLeft: '8px'}} category="secondary" size="x-small-book">

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

@@ -1,13 +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 ${colors.coolGrey300}`,
+  border: `1px solid var(--cool-grey-300)`,
   
   '&:hover': {
     cursor: 'pointer'

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

@@ -1,10 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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/src/stories/theme/colors.ts

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