diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 41ab4af..4dad495 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -1,5 +1,6 @@ import type { Preview } from "@storybook/react"; import "../app/globals.css"; +import "./storybook-fonts.css"; import { Title, Subtitle, diff --git a/.storybook/storybook-fonts.css b/.storybook/storybook-fonts.css new file mode 100644 index 0000000..186d4e4 --- /dev/null +++ b/.storybook/storybook-fonts.css @@ -0,0 +1,4 @@ +@font-face { + font-family: "SUIT Variable"; + src: url("../public/fonts/SUIT-Variable.woff2"); +} diff --git a/app/globals.css b/app/globals.css index 8c02929..192c808 100644 --- a/app/globals.css +++ b/app/globals.css @@ -1,16 +1,22 @@ -@import "./tokens.css"; @import "tailwindcss"; +@config "../tailwind.config.ts"; +@import "./tokens.css"; :root { --background: #ffffff; --foreground: #171717; } +/* @font-face { + font-family: "SUIT Variable"; + src: url("../public/fonts//SUIT-Variable.woff2"); +} */ + @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); + --font-sans: [var(--font-suit-variable), var(--font-geist-sans)]; + --font-mono: [var(--font-suit-variable), var(--font-geist-mono)]; } @media (prefers-color-scheme: dark) { @@ -23,5 +29,6 @@ body { background: var(--background); color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; + + font-family: var(--font-suit-varialbe), Arial, Helvetica, sans-serif; } diff --git a/app/layout.tsx b/app/layout.tsx index f7fa87e..37acce2 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,15 +1,22 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +// import { Geist, Geist_Mono } from "next/font/google"; +import localFont from "next/font/local"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", - subsets: ["latin"], -}); +// const geistSans = Geist({ +// variable: "--font-geist-sans", +// subsets: ["latin"], +// }); + +// const geistMono = Geist_Mono({ +// variable: "--font-geist-mono", +// subsets: ["latin"], +// }); -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", - subsets: ["latin"], +export const customFont = localFont({ + src: "../public/fonts/SUIT-Variable.woff2", + display: "swap", + variable: "--font-suit-variable", }); export const metadata: Metadata = { @@ -23,12 +30,17 @@ export default function RootLayout({ children: React.ReactNode; }>) { return ( - - - {children} - + + + + + {children} ); } diff --git a/app/tokens.css b/app/tokens.css index 09e619c..08b60d2 100644 --- a/app/tokens.css +++ b/app/tokens.css @@ -1,4 +1,87 @@ @theme { + --color-Color-gray-5: #f7f7f8; + --color-Color-gray-10: #e6e8ea; + --color-Color-gray-20: #cdd1d5; + --color-Color-gray-30: #b1b8be; + --color-Color-gray-40: #8a949e; + --color-Color-gray-50: #6d7882; + --color-Color-gray-60: #58616a; + --color-Color-gray-70: #464c53; + --color-Color-gray-80: #33363d; + --color-Color-gray-90: #1e2124; + --color-Color-gray-95: #111111; + --color-Color-common-black: #000000; + --color-Color-common-white: #ffffff; + --color-Color-red-5: #fde9e8; + --color-Color-red-10: #fbd3d0; + --color-Color-red-20: #f8b9b5; + --color-Color-red-30: #f2847d; + --color-Color-red-40: #ee584f; + --color-Color-red-50: #ea3429; + --color-Color-red-60: #ce1308; + --color-Color-red-70: #890d06; + --color-Color-red-80: #620904; + --color-Color-red-90: #3b0502; + --color-Color-yellow-5: #fff7e5; + --color-Color-yellow-10: #ffe4ad; + --color-Color-yellow-20: #ffd070; + --color-Color-yellow-30: #ffc247; + --color-Color-yellow-40: #ffb114; + --color-Color-yellow-50: #e39902; + --color-Color-yellow-60: #c08102; + --color-Color-yellow-70: #8b5e04; + --color-Color-yellow-80: #634303; + --color-Color-yellow-90: #4a3202; + --color-Color-green-5: #ebfaee; + --color-Color-green-10: #c2f0cc; + --color-Color-green-20: #85e099; + --color-Color-green-30: #48d166; + --color-Color-green-40: #2bab47; + --color-Color-green-50: #228738; + --color-Color-green-60: #1d722f; + --color-Color-green-70: #196228; + --color-Color-green-80: #13491e; + --color-Color-green-90: #0c3114; + --color-Color-blue-5: #e7f4fe; + --color-Color-blue-10: #b6ddfb; + --color-Color-blue-20: #86c7f9; + --color-Color-blue-30: #55b1f6; + --color-Color-blue-40: #1694f3; + --color-Color-blue-50: #0576cc; + --color-Color-blue-60: #045c9f; + --color-Color-blue-70: #03487c; + --color-Color-blue-80: #023a64; + --color-Color-blue-90: #01233c; + --color-Color-primary-5: #e7e7fd; + --color-Color-primary-10: #dadafc; + --color-Color-primary-20: #c7c8fa; + --color-Color-primary-30: #abacf7; + --color-Color-primary-40: #8b8cf4; + --color-Color-primary-50: #5d5fef; + --color-Color-primary-60: #3033e8; + --color-Color-primary-70: #1719cf; + --color-Color-primary-80: #1214a1; + --color-Color-primary-90: #0a0b5c; + --spacing-Number-0: 0rem; + --spacing-Number-1: 0.062rem; + --spacing-Number-2: 0.125rem; + --spacing-Number-4: 0.25rem; + --spacing-Number-8: 0.5rem; + --spacing-Number-12: 0.75rem; + --spacing-Number-14: 0.875rem; + --spacing-Number-16: 1rem; + --spacing-Number-18: 1.125rem; + --spacing-Number-20: 1.25rem; + --spacing-Number-24: 1.5rem; + --spacing-Number-28: 1.75rem; + --spacing-Number-32: 2rem; + --spacing-Number-40: 2.5rem; + --spacing-Number-48: 3rem; + --spacing-Number-56: 3.5rem; + --spacing-Number-64: 4rem; + --spacing-Number-72: 4.5rem; + --spacing-Number-80: 5rem; + --spacing-Number-999: 62.438rem; --radius-2: 0.125rem; --radius-4: 0.25rem; --radius-8: 0.5rem; diff --git a/public/fonts/SUIT-Variable.woff2 b/public/fonts/SUIT-Variable.woff2 new file mode 100644 index 0000000..6d36940 Binary files /dev/null and b/public/fonts/SUIT-Variable.woff2 differ diff --git a/sd-tokens.config.mjs b/sd-tokens.config.mjs index 8bf3599..a2b5a1f 100644 --- a/sd-tokens.config.mjs +++ b/sd-tokens.config.mjs @@ -43,15 +43,17 @@ StyleDictionary.registerFormat({ format: function ({ dictionary }) { return [ "@theme {", - ...dictionary.allTokens - .filter((prop) => !prop.name.includes("primitive")) - .map((prop) => { - //test - console.log("prop.name, prop.type: ", prop.name, prop.type); - const nameFromPath = prop.path.slice(1).join("-"); - + ...dictionary.allTokens.map((prop) => { + const isPrimitive = prop.name.includes("primitive"); + const nameFromPath = prop.path.slice(1).join("-"); + + if (isPrimitive) { + const middleName = prop.type === "color" ? "Color-" : ""; + return ` --${token2TailwindTypeMap?.[prop.type] ?? "non-mapped"}-${middleName}${nameFromPath}: ${prop.value};`; + } else { return ` --${token2TailwindTypeMap?.[prop.type] ?? "non-mapped"}-${nameFromPath}: ${prop.value};`; - }), + } + }), "}", ].join("\n"); }, diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..781fb16 --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,12 @@ +// tailwind.config.js +const defaultTheme = require("tailwindcss/defaultTheme"); + +module.exports = { + theme: { + extend: { + fontFamily: { + SUIT_Variable: [`var(--font-suit-variable)`], + }, + }, + }, +};