Tailwind config and readme

README.md

@@ -6,3 +6,7 @@ The _one_ voting advice application used by millions of voters in four countries
 - 🇸🇰 **[Volebná kalkulačka](https://www.volebnakalkulacka.sk)** in Slovakia
 - 🇭🇺 **[Voksmonitor](https://www.voksmonitor.hu)** in Hungary
 - 🇦🇹 **[Wahlrechner](https://www.wahlrechner.at)** in Austria
+
+# Design System package
+
+[Desing System config and Theming](packages/design-system/README.md)

apps/design-system/.eslintrc.js

@@ -9,4 +9,5 @@ module.exports = {
   parserOptions: {
     project: true,
   },
+  ignorePatterns: ["build/**"],
 };

apps/design-system/tsconfig.json

@@ -1,11 +1,11 @@
 {
   "extends": "@repo/typescript-config/react-library.json",
   "include": ["**/*.mdx", "**/*.ts", "**/*.tsx"],
-  "exclude": ["dist", "node_modules", "public"],
+  "exclude": ["node_modules", "public", "build"],
   "compilerOptions": {
     "jsx": "react-jsx",
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node"
+    "moduleResolution": "NodeNext"
   }
 }

apps/web/tailwind.config.ts

@@ -1,20 +1,10 @@
-import globalConfig from "@repo/tailwind-config";
+import globalConfig from "@repo/design-system/tailwind";
 import type { Config } from "tailwindcss";
-import defaultTheme from "tailwindcss/defaultTheme";
 
-const fonts = {
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['"Radio Canada"', ...defaultTheme.fontFamily.sans],
-      },
-    },
-  },
-};
-
-const config: Pick<Config, "content" | "presets"> = {
+const config: Pick<Config, "content" | "presets" | "prefix"> = {
+  presets: [globalConfig],
   content: ["./app/**/*.tsx"],
-  presets: [globalConfig, fonts],
+  prefix: "", // design-system has k1- prefix. We might or might not use it in other projects. But it's better to not conflict with it.
 };
 
 export default config;

packages/design-system/README.md

@@ -0,0 +1,26 @@
+# Design system
+
+This package contains design system for all Kalkulacka One projects.
+
+## Exports
+
+- `./tailwind` exports `tailwind.config.js` file as default export
+- `./styles` exports compiled css file (compiled Tailwind CSS)
+- `./themes/*` export all theme css files (inlcuding default theme)
+- `/fonts` export public directory with all fonts used in the design system
+
+Components should be exported per-category using a barrel index file from each directory in `/src`.
+
+## Tailwind configuration
+
+- We define all config in `tailwind.config.js` file. Which is a base configuration for all projects using Tailwind CSS in their implementation. Each project is required to override `content` for their own tailwind files and `prefix` to avoid conflict with the design-system classes.
+- We use specific theme configuration in `/config` directory. e.g. `colors`, `typography`. To add new theme overrides, add a new file, properly type it using `Pick<Partial<ThemeConfig>, "XYZ">` and import in `tailwind.config.js` file.
+
+## Theming
+
+We use css variables as a theming solution. Currently they are in `/src/themes` directory, but this is a subject to change.
+
+- We have a default file `theme-default.css` which is a base theme for all projects.
+- For each theme we can have an override file, e.g. `theme-idnes.css` that can re-define some of the variables or add their own custom css.
+
+For each project, we need to import the default theme and then import the specific theme, if one is selected.

packages/design-system/config/colors.ts

@@ -0,0 +1,19 @@
+import { ThemeConfig } from "tailwindcss/types/config";
+
+const colors: Pick<Partial<ThemeConfig>, "colors"> = {
+  colors: {
+    primary: {
+      100: "var(--primary-100)",
+      50: "var(--primary-50)",
+    },
+    secondary: {
+      50: "var(--secondary-50)",
+    },
+    neutral: {
+      100: "var(--neutral-100)",
+      50: "var(--neutral-50)",
+    },
+  },
+};
+
+export default colors;

packages/design-system/config/typography.ts

@@ -0,0 +1,13 @@
+import defaultTheme from "tailwindcss/defaultTheme";
+import { ThemeConfig } from "tailwindcss/types/config";
+
+const typography: Pick<
+  Partial<ThemeConfig>,
+  "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing"
+> = {
+  fontFamily: {
+    sans: ['"Radio Canada"', ...defaultTheme.fontFamily.sans],
+  },
+};
+
+export default typography;

packages/design-system/package.json

@@ -6,7 +6,8 @@
     "./themes/*": "./src/themes/*.css",
     "./styles": "./dist/index.css",
     "./fonts": "./dist/fonts",
-    "./heading": "./src/heading.tsx"
+    "./heading": "./src/heading.tsx",
+    "./tailwind": "./tailwind.config.ts"
   },
   "scripts": {
     "build": "npm run fonts && npm run tailwind",

packages/design-system/src/heading.tsx

@@ -5,7 +5,7 @@ type Props = {
 };
 
 const Heading = ({ children }: Props): JSX.Element => {
-  return <h1 className="text-primary-50">{children}</h1>;
+  return <h1 className="k1-text-primary-50">{children}</h1>;
 };
 
 export { Heading };

packages/design-system/tailwind.config.ts

@@ -1,10 +1,18 @@
 import type { Config } from "tailwindcss";
+import colors from "./config/colors";
+import typography from "./config/typography";
 
-import globalConfig from "@repo/tailwind-config";
-
-const config: Pick<Config, "content" | "prefix" | "presets"> = {
+// Each package is responsible for its own content
+const config: Config = {
   content: ["./src/**/*.tsx"],
-  presets: [globalConfig],
+  prefix: "k1-",
+  theme: {
+    extend: {
+      ...colors,
+      ...typography,
+    },
+  },
+  plugins: [],
 };
 
 export default config;