feat(WEB-249): first iteration design system primitives (typography, grid)

components/TempDesignSystem/Text/BiroScript/biroScript.module.css

@@ -0,0 +1,34 @@
+.text {
+  font-family: var(--typography-Script-1-fontFamily);
+  text-transform: none;
+}
+
+.one {
+  font-size: clamp(
+    var(--typography-Script-1-Mobile-fontSize),
+    1.3vw + 14px,
+    var(--typography-Script-1-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Script-1-fontWeight);
+  letter-spacing: var(--typography-Script-1-letterSpacing);
+  line-height: var(--typography-Script-1-lineHeight);
+}
+
+.two {
+  font-size: clamp(
+    var(--typography-Script-2-Mobile-fontSize),
+    0.6vw + 15px,
+    var(--typography-Script-2-Desktop-fontSize)
+  );
+  font-weight: var(--typography-Script-2-fontWeight);
+  letter-spacing: var(--typography-Script-2-letterSpacing);
+  line-height: var(--typography-Script-2-lineHeight);
+}
+
+.burgundy {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
+.pale {
+  color: var(--Scandic-Brand-Pale-Peach);
+}

components/TempDesignSystem/Text/BiroScript/biroScript.ts

@@ -0,0 +1,7 @@
+import { biroScriptVariants } from "./variants"
+
+import type { VariantProps } from "class-variance-authority"
+
+export interface BiroScriptProps
+  extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color">,
+    VariantProps<typeof biroScriptVariants> {}

components/TempDesignSystem/Text/BiroScript/index.tsx

@@ -0,0 +1,17 @@
+import { biroScriptVariants } from "./variants"
+
+import type { BiroScriptProps } from "./biroScript"
+
+export default function BiroScript({
+  children,
+  className,
+  color,
+  type,
+}: BiroScriptProps) {
+  const classNames = biroScriptVariants({
+    className,
+    color,
+    type,
+  })
+  return <span className={classNames}>{children}</span>
+}

components/TempDesignSystem/Text/BiroScript/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority"
+
+import styles from "./biroScript.module.css"
+
+const config = {
+  variants: {
+    color: {
+      burgundy: styles.burgundy,
+      pale: styles.pale,
+    },
+    type: {
+      one: styles.one,
+      two: styles.two,
+    },
+  },
+  defaultVariants: {
+    type: "one",
+  },
+} as const
+
+export const biroScriptVariants = cva(styles.text, config)