From e1ec7913634b646f329f3700940c2ec3b4b59df1 Mon Sep 17 00:00:00 2001
From: Jonas Carlsen <jonas.carlsen@knowit.no>
Date: Fri, 8 Nov 2024 12:14:42 +0100
Subject: [PATCH] refactor: use panda for Slate span

---
 .../SlateEditor/plugins/span/Span.tsx           | 17 ++++++++---------
 .../SlateEditor/plugins/span/render.tsx         |  2 +-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/src/components/SlateEditor/plugins/span/Span.tsx b/src/components/SlateEditor/plugins/span/Span.tsx
index ba991b03b7..bb7e95eb33 100644
--- a/src/components/SlateEditor/plugins/span/Span.tsx
+++ b/src/components/SlateEditor/plugins/span/Span.tsx
@@ -6,13 +6,12 @@
  *
  */
 
-import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
+import { styled } from "@ndla/styled-system/jsx";
 
-const Span = styled.span`
-  position: relative;
-  text-decoration: underline;
-  text-decoration-color: ${colors.brand.tertiary};
-`;
-
-export default Span;
+export const Span = styled("span", {
+  base: {
+    position: "relative",
+    textDecoration: "underline",
+    textDecorationColor: "stroke.subtle",
+  },
+});
diff --git a/src/components/SlateEditor/plugins/span/render.tsx b/src/components/SlateEditor/plugins/span/render.tsx
index 25902b0a34..a5c3ab71f5 100644
--- a/src/components/SlateEditor/plugins/span/render.tsx
+++ b/src/components/SlateEditor/plugins/span/render.tsx
@@ -8,7 +8,7 @@
 
 import { Editor } from "slate";
 import { RenderElementProps } from "slate-react";
-import Span from "./Span";
+import { Span } from "./Span";
 import { TYPE_SPAN } from "./types";
 import { InlineBugfix } from "../../utils/InlineBugFix";