@gitbutler/design-core 1.0.2

package/README.md

@@ -0,0 +1,47 @@
+# GitButler Design Tokens
+
+The official design tokens repository for GitButler applications.
+We use [Terrazzo](https://terrazzo.app/) to generate CSS custom properties from design tokens.
+
+## Installation
+
+```bash
+npm install
+```
+
+## Usage
+
+Place your tokens in the root of the project in a file called `design-tokens.json` and run:
+
+```bash
+npm run build
+```
+
+This will generate a `tokens` folder with the tokens in CSS format.
+
+For development with automatic rebuilding:
+
+```bash
+npm run dev
+```
+
+## Output
+
+The build process generates:
+- `tokens/design-tokens.css` - CSS custom properties with light and dark mode support
+- Formatted JSON and CSS files with prettier
+
+## Integration
+
+To use these tokens in your application:
+
+1. Import the generated CSS file
+2. Reference the CSS custom properties in your stylesheets
+3. The tokens support both light and dark themes through CSS selectors
+
+## Configuration
+
+The Terrazzo configuration is in `terrazzo.config.js` and includes:
+- Pixel to rem conversion for dimension tokens
+- Dark mode selector support (`:root.dark`)
+- Custom variable naming (removes `fx.` prefixes)

package/fonts/fonts.css

@@ -0,0 +1,113 @@
+/**
+ * GitButler Font System - Single Source of Truth
+ * 
+ * This file contains all font definitions for GitButler applications.
+ * 
+ * USAGE:
+ * Import this file: @import '@gitbutler/design-core/fonts';
+ * Or in JS: import '@gitbutler/design-core/fonts';
+ * 
+ * ARCHITECTURE:
+ * - Font files: fonts/{family}/
+ * - CSS definitions: This file (fonts.css)
+ * - Export: Available via @gitbutler/design-core/fonts
+ */
+
+@font-face {
+  src: url("pp-editorial/PPEditorialNew-Regular.woff2") format("woff2");
+  font-family: "PP Editorial New";
+}
+
+@font-face {
+  font-style: normal;
+  font-weight: 400;
+  src: url("but-head/But-Head-Regular.woff2") format("woff2");
+  font-family: "But Head";
+  font-display: swap;
+}
+@font-face {
+  font-style: italic;
+  font-weight: 400;
+  src: url("but-head/But-Head-Italic.woff2") format("woff2");
+  font-family: "But Head";
+  font-display: swap;
+}
+
+@font-face {
+  font-style: normal;
+  font-weight: 400;
+  src: url("geist-mono/GeistMono-Regular.woff2") format("woff2");
+  font-family: "Geist Mono";
+  font-display: swap;
+}
+@font-face {
+  font-style: normal;
+  font-weight: 500;
+  src: url("geist-mono/GeistMono-Medium.woff2") format("woff2");
+  font-family: "Geist Mono";
+  font-display: swap;
+}
+@font-face {
+  font-style: normal;
+  font-weight: 700;
+  src: url("geist-mono/GeistMono-Bold.woff2") format("woff2");
+  font-family: "Geist Mono";
+  font-display: swap;
+}
+
+@font-face {
+  font-style: normal;
+  font-weight: 400;
+  src: url("inter/Inter-Regular.woff2") format("woff2");
+  font-family: "Inter";
+  font-display: swap;
+}
+@font-face {
+  font-style: italic;
+  font-weight: 400;
+  src: url("inter/Inter-Italic.woff2") format("woff2");
+  font-family: "Inter";
+  font-display: swap;
+}
+@font-face {
+  font-style: normal;
+  font-weight: 500;
+  src: url("inter/Inter-Medium.woff2") format("woff2");
+  font-family: "Inter";
+  font-display: swap;
+}
+@font-face {
+  font-style: italic;
+  font-weight: 500;
+  src: url("inter/Inter-MediumItalic.woff2") format("woff2");
+  font-family: "Inter";
+  font-display: swap;
+}
+@font-face {
+  font-style: normal;
+  font-weight: 600;
+  src: url("inter/Inter-SemiBold.woff2") format("woff2");
+  font-family: "Inter";
+  font-display: swap;
+}
+@font-face {
+  font-style: italic;
+  font-weight: 600;
+  src: url("inter/Inter-SemiBoldItalic.woff2") format("woff2");
+  font-family: "Inter";
+  font-display: swap;
+}
+@font-face {
+  font-style: normal;
+  font-weight: 700;
+  src: url("inter/Inter-Bold.woff2") format("woff2");
+  font-family: "Inter";
+  font-display: swap;
+}
+@font-face {
+  font-style: italic;
+  font-weight: 700;
+  src: url("inter/Inter-BoldItalic.woff2") format("woff2");
+  font-family: "Inter";
+  font-display: swap;
+}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@gitbutler/design-core",
+  "version": "1.0.2",
+  "type": "module",
+  "description": "Design tokens for GitButler applications",
+  "keywords": [
+    "design-tokens",
+    "css",
+    "terrazzo",
+    "gitbutler"
+  ],
+  "homepage": "https://github.com/gitbutlerapp/design-tokens",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/gitbutlerapp/design-tokens.git"
+  },
+  "main": "./tokens/tokens.css",
+  "exports": {
+    "./tokens": "./tokens/tokens.css",
+    "./tokens.json": "./tokens/tokens.json",
+    "./fonts": "./fonts/fonts.css",
+    "./fonts/*": "./fonts/*"
+  },
+  "scripts": {
+    "build": "npx tz build",
+    "dev": "npx tz build --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "@terrazzo/cli": "0.6.0",
+    "@terrazzo/parser": "0.6.0",
+    "@terrazzo/plugin-css": "0.6.0",
+    "prettier": "^3.0.0"
+  },
+  "files": [
+    "tokens/",
+    "fonts/",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}