feat(WEB-304): remaning UI from design system primitives

components/TempDesignSystem/Divider/divider.module.css

@@ -1,9 +1,18 @@
 .divider {
-  border-bottom-color: var(--Scandic-Brand-Burgundy);
   border-bottom-style: solid;
   border-bottom-width: 1px;
+  height: 1px;
+  width: 100%;
 }
 
 .dotted {
   border-bottom-style: dotted;
 }
+
+.burgundy {
+  border-bottom-color: var(--Scandic-Brand-Burgundy);
+}
+
+.peach {
+  border-bottom-color: var(--Theme-Primary-Light-On-Surface-Divider);
+}

components/TempDesignSystem/Divider/divider.ts

@@ -3,5 +3,5 @@ import { dividerVariants } from "./variants"
 import type { VariantProps } from "class-variance-authority"
 
 export interface DividerProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "color">,
     VariantProps<typeof dividerVariants> {}

components/TempDesignSystem/Divider/index.tsx

@@ -2,6 +2,7 @@ import { dividerVariants } from "./variants"
 
 import type { DividerProps } from "./divider"
 
-export default function Divider({ className, variant }: DividerProps) {
-  return <div className={dividerVariants({ className, variant })} />
+export default function Divider({ className, color, variant }: DividerProps) {
+  const classNames = dividerVariants({ className, color, variant })
+  return <div className={classNames} />
 }

components/TempDesignSystem/Divider/variants.ts

@@ -4,12 +4,17 @@ import styles from "./divider.module.css"
 
 export const dividerVariants = cva(styles.divider, {
   variants: {
+    color: {
+      burgundy: styles.burgundy,
+      peach: styles.peach,
+    },
     variant: {
       default: styles.default,
       dotted: styles.dotted,
     },
   },
   defaultVariants: {
+    color: "burgundy",
     variant: "default",
   },
 })