chore: add backgrounds to theme

equinor · Sep 20, 2023 · 309289d · 309289d
1 parent 87276f1
commit 309289d
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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,
+      },
     },
   },
 }