diff --git a/src/features/ModelView/ModelImageView/ModelImageView.styled.tsx b/src/features/ModelView/ModelImageView/ModelImageView.styled.tsx index 9c94d509..fb115686 100644 --- a/src/features/ModelView/ModelImageView/ModelImageView.styled.tsx +++ b/src/features/ModelView/ModelImageView/ModelImageView.styled.tsx @@ -1,5 +1,6 @@ import styled from 'styled-components' import { spacings } from '../../../tokens/spacings' +import { theme } from '../../../tokens/theme' export const ImageWrapper = styled.div` display: flex; @@ -8,7 +9,7 @@ export const ImageWrapper = styled.div` border-style: solid; border-width: 1px; - border-color: #cdcdcd; + border-color: ${theme.light.ui.background.medium}; max-width: 100%; height: 100%; diff --git a/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx b/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx index 89f68936..09077eef 100644 --- a/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx +++ b/src/features/ModelView/ModelNameFrame/ModelNameFrame.styled.tsx @@ -1,10 +1,11 @@ import styled from 'styled-components' import { spacings } from '../../../tokens/spacings' +import { theme } from '../../../tokens/theme' export const NameFrame = styled.div` width: 100%; padding: ${spacings.LARGE} 0; - background-color: rgb(247, 247, 247, 1); + background-color: ${theme.light.ui.background.light}; > h1 { margin: 0; diff --git a/src/tokens/theme.ts b/src/tokens/theme.ts index b323ceb3..0d996c8d 100644 --- a/src/tokens/theme.ts +++ b/src/tokens/theme.ts @@ -1,6 +1,8 @@ import { tokens } from '@equinor/eds-tokens' const interactive = tokens.colors.interactive +const text = tokens.colors.text +const ui = tokens.colors.ui export const theme = { light: { @@ -17,7 +19,13 @@ export const theme = { highlight: interactive.secondary__highlight.hex, }, text: { - staticIconsTertiary: tokens.colors.text.static_icons__tertiary.hex, + staticIconsTertiary: text.static_icons__tertiary.hex, + }, + ui: { + background: { + light: ui.background__light.hex, + medium: ui.background__medium.hex, + }, }, }, }