Typography typescript (#645)

* Moved base types to tokens library

* Typography typescript

* removed comment

* Uniformed variants type

libraries/core-react/src/TextField/HelperText/HelperText.tsx

@@ -1,13 +1,14 @@
 import React, { ReactNode } from 'react'
 import styled, { css } from 'styled-components'
-import { Spacing, typographyTemplate } from '../../_common/templates'
+import { typographyTemplate } from '../../_common/templates'
 import {
   HelperTextVariantProps,
   helperText as tokens,
 } from './HelperText.token'
 import { useTextField } from '../context'
 import { Icon } from '../Icon'
 import type { Variants } from '../types'
+import type { Spacing } from '@equinor/eds-tokens'
 
 type VariantionProps = {
   variant: HelperTextVariantProps

libraries/core-react/src/TextField/Input/Input.tsx

@@ -1,14 +1,11 @@
 import React, { ReactNode, ElementType } from 'react'
 import styled, { css } from 'styled-components'
 import { InputVariantProps, input as tokens } from './Input.tokens'
-import {
-  Spacing,
-  typographyTemplate,
-  spacingsTemplate,
-} from '../../_common/templates'
+import { typographyTemplate, spacingsTemplate } from '../../_common/templates'
 import { useTextField } from '../context'
 import { Icon } from '../Icon'
 import type { Variants } from '../types'
+import type { Spacing } from '@equinor/eds-tokens'
 
 const Variation = ({ variant }: { variant: InputVariantProps }) => {
   if (!variant) {

libraries/core-react/src/Typography/Typography.test.jsx → libraries/core-react/src/Typography/Typography.test.tsx

@@ -6,15 +6,16 @@ import 'jest-styled-components'
 import styled from 'styled-components'
 import { Typography } from '.'
 import { tokens } from '@equinor/eds-tokens'
-import { colors } from './Typography.tokens.js'
+import { colors } from './Typography.tokens'
+import type { Typography as TypographyType } from '@equinor/eds-tokens'
 
 const StyledTypography = styled(Typography)`
   margin-top: 16px;
   margin-bottom: 32px;
 `
-const stripSpaces = (t) => t.replace(/\s/g, '')
+const stripSpaces = (t: string): string => t.replace(/\s/g, '')
 
-const expectToMatchTypography = (element, token) => {
+const expectToMatchTypography = (element, token: TypographyType) => {
   const {
     color,
     fontFamily,
@@ -35,7 +36,7 @@ afterEach(cleanup)
 
 describe('Typography', () => {
   it('throws error when variant is wrong', () => {
-    jest.spyOn(console, 'error').mockImplementation(() => {})
+    jest.spyOn(console, 'error').mockImplementation()
 
     expect(() => {
       render(<Typography variant="label">Test</Typography>)

libraries/core-react/src/Typography/Typography.tokens.ts

@@ -0,0 +1,61 @@
+import { tokens } from '@equinor/eds-tokens'
+import type { TypographyTokens } from '@equinor/eds-tokens'
+
+const { typography, colors: colorsToken } = tokens
+const { heading, paragraph } = typography
+
+const {
+  interactive: {
+    primary__resting: { rgba: primary },
+    secondary__resting: { rgba: secondary },
+    danger__resting: { rgba: danger },
+    warning__resting: { rgba: warning },
+    success__resting: { rgba: success },
+    disabled__text: { rgba: disabled },
+  },
+} = colorsToken
+
+const colors = {
+  primary,
+  secondary,
+  danger,
+  warning,
+  success,
+  disabled,
+}
+
+export type QuickTypographyVariants =
+  | TypographyTokens['heading']
+  | TypographyTokens['paragraph']
+
+const quickVariants: QuickTypographyVariants = {
+  ...heading,
+  ...paragraph,
+}
+
+type TypographyVariants =
+  | keyof TypographyTokens['heading']
+  | keyof TypographyTokens['paragraph']
+  | keyof TypographyTokens['navigation']
+  | keyof TypographyTokens['input']
+  | keyof TypographyTokens['ui']
+  | keyof TypographyTokens['table']
+
+type ColorVariants =
+  | 'primary'
+  | 'secondary'
+  | 'danger'
+  | 'warning'
+  | 'success'
+  | 'disabled'
+
+type TypographyGroups = keyof typeof typography
+
+export {
+  typography,
+  colors,
+  quickVariants,
+  TypographyVariants,
+  ColorVariants,
+  TypographyGroups,
+}