@universal-tennis/ui-shared 0.0.24 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/components.js +1 -1
  2. package/dist/components.js.map +1 -1
  3. package/dist/stories/assets/css/variables.css +10 -0
  4. package/dist/stories/atoms/Button/Button.js +12 -13
  5. package/dist/stories/atoms/Button/Button.js.map +1 -1
  6. package/dist/stories/atoms/Typography/Typography.d.ts +1 -0
  7. package/dist/stories/atoms/Typography/Typography.js +4 -3
  8. package/dist/stories/atoms/Typography/Typography.js.map +1 -1
  9. package/dist/stories/molecules/Cards/shared.js +1 -2
  10. package/dist/stories/molecules/Cards/shared.js.map +1 -1
  11. package/package.json +1 -1
  12. package/src/components.jsx +1 -1
  13. package/src/stories/assets/css/variables.css +10 -0
  14. package/src/stories/atoms/Button/Button.tsx +12 -13
  15. package/src/stories/atoms/Typography/Typography.tsx +4 -3
  16. package/src/stories/molecules/Cards/shared.tsx +1 -2
  17. package/dist/stories/theme/colors.d.ts +0 -10
  18. package/dist/stories/theme/colors.js +0 -11
  19. package/dist/stories/theme/colors.js.map +0 -1
  20. package/src/stories/theme/colors.ts +0 -10
package/dist/components.js CHANGED
@@ -1,4 +1,4 @@
1
- import "./stories/assets/css/typography.css";
1
+ import "./stories/assets/css/variables.css";
2
2
  // ATOMS
3
3
  export { default as Button } from './stories/atoms/Button/Button';
4
4
  export { default as Typography } from './stories/atoms/Typography/Typography';
package/dist/components.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,OAAO,qCAAqC,CAAC;AAE7C,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"}
1
+ {"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.jsx"],"names":[],"mappings":"AAAA,OAAO,oCAAoC,CAAC;AAE5C,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/assets/css/variables.css ADDED
@@ -0,0 +1,10 @@
1
+ :root {
2
+ --primary: #008ded;
3
+ --secondary: #e0004f;
4
+ --disabled: #bac6d6;
5
+ --black: #000;
6
+ --white: #fff;
7
+ --light-grey: #d7e0ea;
8
+ --darkest-grey: #3b4859;
9
+ --cool-grey-300: #DDE3EB;
10
+ }
package/dist/stories/atoms/Button/Button.js CHANGED
@@ -12,7 +12,6 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import React from 'react';
13
13
  import MuiButton from '@mui/material/Button';
14
14
  import { styled } from '@mui/material/styles';
15
- import { colors } from '../../theme/colors';
16
15
  const StyledButton = styled(MuiButton)({
17
16
  borderRadius: '24px',
18
17
  fontSize: '12px',
@@ -26,33 +25,33 @@ const StyledButton = styled(MuiButton)({
26
25
  },
27
26
  });
28
27
  const PrimaryButton = styled(StyledButton)((props) => ({
29
- backgroundColor: colors.black,
30
- color: colors.white,
28
+ backgroundColor: 'var(--black)',
29
+ color: 'var(--white)',
31
30
  width: props.isExpanded ? '100%' : 'inherit',
32
31
  '&:hover': {
33
- backgroundColor: colors.darkestGrey,
34
- borderColor: colors.darkestGrey,
32
+ backgroundColor: 'var(--darkest-grey)',
33
+ borderColor: 'var(--darkest-grey)',
35
34
  },
36
35
  '&:disabled': {
37
- backgroundColor: colors.lightGrey,
38
- borderColor: colors.lightGrey,
36
+ backgroundColor: 'var(--light-grey)',
37
+ borderColor: 'var(--light-grey)',
39
38
  },
40
39
  }));
41
40
  const SecondaryButton = styled(StyledButton)({
42
- borderColor: colors.black,
41
+ borderColor: 'var(--black)',
43
42
  backgroundColor: 'transparent',
44
- color: colors.black,
43
+ color: 'var(--black)',
45
44
  '&:hover': {
46
- borderColor: colors.darkestGrey,
45
+ borderColor: 'var(--darkest-grey)',
47
46
  },
48
47
  '&:disabled': {
49
- borderColor: colors.disabled
48
+ borderColor: 'var(--disabled)'
50
49
  },
51
50
  });
52
51
  const LinkButton = styled(MuiButton)({
53
52
  borderColor: 'transparent',
54
53
  backgroundColor: 'transparent',
55
- color: colors.primary,
54
+ color: 'var(--primary)',
56
55
  textTransform: 'inherit',
57
56
  justifyContent: 'left',
58
57
  padding: 0,
@@ -60,7 +59,7 @@ const LinkButton = styled(MuiButton)({
60
59
  backgroundColor: 'transparent',
61
60
  },
62
61
  '&:disabled': {
63
- borderColor: colors.disabled
62
+ borderColor: 'var(--disabled)'
64
63
  },
65
64
  });
66
65
  export default function Button(_a) {
package/dist/stories/atoms/Button/Button.js.map CHANGED
@@ -1 +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;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"}
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,mBAAmB;QACpC,WAAW,EAAE,mBAAmB;KACjC;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"}
package/dist/stories/atoms/Typography/Typography.d.ts CHANGED
@@ -1,4 +1,5 @@
1
1
  import React, { ReactElement } from 'react';
2
+ import "../../assets/css/typography.css";
2
3
  type TypographyProps = {
3
4
  children: string | ReactElement;
4
5
  category?: string;
package/dist/stories/atoms/Typography/Typography.js CHANGED
@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import React from 'react';
13
13
  import MuiTypography from '@mui/material/Typography';
14
14
  import { styled } from '@mui/material/styles';
15
+ import "../../assets/css/typography.css";
15
16
  const DISPLAY_SIZES = {
16
17
  "XXX-large": '120px',
17
18
  "XX-large": '100px',
@@ -46,17 +47,17 @@ const SECONDARY_SIZES = {
46
47
  "xx-small-book": '10px',
47
48
  };
48
49
  const DisplayTypography = styled(MuiTypography)((props) => ({
49
- fontFamily: `'UTR Numerals', 'Tungsten A', 'Tungsten B'`,
50
+ fontFamily: 'var(--display-font)',
50
51
  fontSize: DISPLAY_SIZES[props.size],
51
52
  fontWeight: props.weight
52
53
  }));
53
54
  const PrimaryTypography = styled(MuiTypography)((props) => ({
54
- fontFamily: `'Tungsten A', 'Tungsten B', 'Helvetica', Arial, sans-serif`,
55
+ fontFamily: 'var(--primary-font)',
55
56
  fontSize: PRIMARY_SIZES[props.size],
56
57
  fontWeight: props.weight
57
58
  }));
58
59
  const SecondaryTypography = styled(MuiTypography)((props) => ({
59
- fontFamily: `'Gotham SSm A', 'Gotham SSm B', 'Helvetica', Arial, sans-serif`,
60
+ fontFamily: 'var(--secondary-font)',
60
61
  fontSize: SECONDARY_SIZES[props.size],
61
62
  textTransform: props.isCap ? 'uppercase' : 'inherit',
62
63
  fontWeight: props.weight
package/dist/stories/atoms/Typography/Typography.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../../src/stories/atoms/Typography/Typography.tsx"],"names":[],"mappings":"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"}
1
+ {"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 CHANGED
@@ -1,12 +1,11 @@
1
1
  import Box from '@mui/material/Box';
2
2
  import { styled } from '@mui/material/styles';
3
- import { colors } from 'stories/theme/colors';
4
3
  export const StyledCard = styled(Box)({
5
4
  display: 'flex',
6
5
  flexDirection: 'column',
7
6
  borderRadius: '4px',
8
7
  padding: '16px',
9
- border: `1px solid ${colors.coolGrey300}`,
8
+ border: `1px solid var(--cool-grey-300)`,
10
9
  '&:hover': {
11
10
  cursor: 'pointer'
12
11
  },
package/dist/stories/molecules/Cards/shared.js.map CHANGED
@@ -1 +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;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"}
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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-tennis/ui-shared",
3
- "version": "0.0.24",
3
+ "version": "0.0.25",
4
4
  "main": "dist/items.js",
5
5
  "license": "MIT",
6
6
  "homepage": "https://universaltennis.com",
package/src/components.jsx CHANGED
@@ -1,4 +1,4 @@
1
- import "./stories/assets/css/typography.css";
1
+ import "./stories/assets/css/variables.css";
2
2
 
3
3
  // ATOMS
4
4
  export { default as Button } from './stories/atoms/Button/Button';
package/src/stories/assets/css/variables.css ADDED
@@ -0,0 +1,10 @@
1
+ :root {
2
+ --primary: #008ded;
3
+ --secondary: #e0004f;
4
+ --disabled: #bac6d6;
5
+ --black: #000;
6
+ --white: #fff;
7
+ --light-grey: #d7e0ea;
8
+ --darkest-grey: #3b4859;
9
+ --cool-grey-300: #DDE3EB;
10
+ }
package/src/stories/atoms/Button/Button.tsx CHANGED
@@ -1,7 +1,6 @@
1
1
  import React, {ReactElement} from 'react';
2
2
  import MuiButton from '@mui/material/Button';
3
3
  import { styled } from '@mui/material/styles';
4
- import {colors} from '../../theme/colors';
5
4
 
6
5
  type ButtonProps = {
7
6
  children: string | ReactElement;
@@ -29,37 +28,37 @@ const StyledButton = styled(MuiButton)({
29
28
  });
30
29
 
31
30
  const PrimaryButton = styled(StyledButton)((props: StyledButtonProps) => ({
32
- backgroundColor: colors.black,
33
- color: colors.white,
31
+ backgroundColor: 'var(--black)',
32
+ color: 'var(--white)',
34
33
  width: props.isExpanded ? '100%' : 'inherit',
35
34
 
36
35
  '&:hover': {
37
- backgroundColor: colors.darkestGrey,
38
- borderColor: colors.darkestGrey,
36
+ backgroundColor: 'var(--darkest-grey)',
37
+ borderColor: 'var(--darkest-grey)',
39
38
  },
40
39
  '&:disabled': {
41
- backgroundColor: colors.lightGrey,
42
- borderColor: colors.lightGrey,
40
+ backgroundColor: 'var(--light-grey)',
41
+ borderColor: 'var(--light-grey)',
43
42
  },
44
43
  }));
45
44
 
46
45
  const SecondaryButton = styled(StyledButton)({
47
- borderColor: colors.black,
46
+ borderColor: 'var(--black)',
48
47
  backgroundColor: 'transparent',
49
- color: colors.black,
48
+ color: 'var(--black)',
50
49
 
51
50
  '&:hover': {
52
- borderColor: colors.darkestGrey,
51
+ borderColor: 'var(--darkest-grey)',
53
52
  },
54
53
  '&:disabled': {
55
- borderColor: colors.disabled
54
+ borderColor: 'var(--disabled)'
56
55
  },
57
56
  });
58
57
 
59
58
  const LinkButton = styled(MuiButton)({
60
59
  borderColor: 'transparent',
61
60
  backgroundColor: 'transparent',
62
- color: colors.primary,
61
+ color: 'var(--primary)',
63
62
  textTransform: 'inherit',
64
63
  justifyContent: 'left',
65
64
  padding: 0,
@@ -69,7 +68,7 @@ const LinkButton = styled(MuiButton)({
69
68
  },
70
69
 
71
70
  '&:disabled': {
72
- borderColor: colors.disabled
71
+ borderColor: 'var(--disabled)'
73
72
  },
74
73
  });
75
74
 
package/src/stories/atoms/Typography/Typography.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  import React, {ReactElement} from 'react';
2
2
  import MuiTypography from '@mui/material/Typography';
3
3
  import { styled } from '@mui/material/styles';
4
+ import "../../assets/css/typography.css";
4
5
 
5
6
  type TypographyProps = {
6
7
  children: string | ReactElement;
@@ -52,19 +53,19 @@ const SECONDARY_SIZES = {
52
53
  };
53
54
 
54
55
  const DisplayTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
55
- fontFamily: `'UTR Numerals', 'Tungsten A', 'Tungsten B'`,
56
+ fontFamily: 'var(--display-font)',
56
57
  fontSize: DISPLAY_SIZES[props.size as keyof typeof DISPLAY_SIZES],
57
58
  fontWeight: props.weight
58
59
  }));
59
60
 
60
61
  const PrimaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
61
- fontFamily: `'Tungsten A', 'Tungsten B', 'Helvetica', Arial, sans-serif`,
62
+ fontFamily: 'var(--primary-font)',
62
63
  fontSize: PRIMARY_SIZES[props.size as keyof typeof PRIMARY_SIZES],
63
64
  fontWeight: props.weight
64
65
  }));
65
66
 
66
67
  const SecondaryTypography = styled(MuiTypography)((props: MuiTypographyProps) => ({
67
- fontFamily: `'Gotham SSm A', 'Gotham SSm B', 'Helvetica', Arial, sans-serif`,
68
+ fontFamily: 'var(--secondary-font)',
68
69
  fontSize: SECONDARY_SIZES[props.size as keyof typeof SECONDARY_SIZES],
69
70
  textTransform: props.isCap ? 'uppercase' : 'inherit',
70
71
  fontWeight: props.weight
package/src/stories/molecules/Cards/shared.tsx CHANGED
@@ -1,13 +1,12 @@
1
1
  import Box from '@mui/material/Box';
2
2
  import { styled } from '@mui/material/styles';
3
- import { colors } from 'stories/theme/colors';
4
3
 
5
4
  export const StyledCard = styled(Box)({
6
5
  display: 'flex',
7
6
  flexDirection: 'column',
8
7
  borderRadius: '4px',
9
8
  padding: '16px',
10
- border: `1px solid ${colors.coolGrey300}`,
9
+ border: `1px solid var(--cool-grey-300)`,
11
10
 
12
11
  '&:hover': {
13
12
  cursor: 'pointer'
package/dist/stories/theme/colors.d.ts DELETED
@@ -1,10 +0,0 @@
1
- export declare const colors: {
2
- primary: string;
3
- secondary: string;
4
- disabled: string;
5
- black: string;
6
- white: string;
7
- lightGrey: string;
8
- darkestGrey: string;
9
- coolGrey300: string;
10
- };
package/dist/stories/theme/colors.js DELETED
@@ -1,11 +0,0 @@
1
- export const colors = {
2
- primary: '#008ded',
3
- secondary: '#e0004f',
4
- disabled: '#bac6d6',
5
- black: '#000',
6
- white: '#fff',
7
- lightGrey: '#d7e0ea',
8
- darkestGrey: '#3b4859',
9
- coolGrey300: '#DDE3EB'
10
- };
11
- //# sourceMappingURL=colors.js.map
package/dist/stories/theme/colors.js.map DELETED
@@ -1 +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/src/stories/theme/colors.ts DELETED
@@ -1,10 +0,0 @@
1
- export const colors = {
2
- primary: '#008ded',
3
- secondary: '#e0004f',
4
- disabled: '#bac6d6',
5
- black: '#000',
6
- white: '#fff',
7
- lightGrey: '#d7e0ea',
8
- darkestGrey: '#3b4859',
9
- coolGrey300: '#DDE3EB'
10
- };