From 309289d43df80f5538650ade6ebe59701523ab2d Mon Sep 17 00:00:00 2001
From: Olava Faksdal <38139899+olavis@users.noreply.github.com>
Date: Tue, 19 Sep 2023 12:39:12 +0200
Subject: [PATCH] chore: add backgrounds to theme

---
 .../ModelView/ModelImageView/ModelImageView.styled.tsx |  3 ++-
 .../ModelView/ModelNameFrame/ModelNameFrame.styled.tsx |  3 ++-
 src/tokens/theme.ts                                    | 10 +++++++++-
 3 files changed, 13 insertions(+), 3 deletions(-)

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,
+      },
     },
   },
 }