@gitbutler/design-core 1.0.2 → 1.1.0

package/README.md

@@ -1,47 +1,105 @@
-# GitButler Design Tokens
+# @gitbutler/design-core
 
-The official design tokens repository for GitButler applications.
-We use [Terrazzo](https://terrazzo.app/) to generate CSS custom properties from design tokens.
+Design tokens and fonts for GitButler applications. This package provides CSS custom properties, design tokens in JSON format, and web fonts used across GitButler products.
 
 ## Installation
 
 ```bash
-npm install
+npm install @gitbutler/design-core
 ```
 
 ## Usage
 
-Place your tokens in the root of the project in a file called `design-tokens.json` and run:
+### Design Tokens (CSS)
 
-```bash
-npm run build
+Import the design tokens CSS file:
+
+```css
+@import "@gitbutler/design-core/tokens";
 ```
 
-This will generate a `tokens` folder with the tokens in CSS format.
+Or in JavaScript/TypeScript:
 
-For development with automatic rebuilding:
+```javascript
+import "@gitbutler/design-core/tokens";
+```
 
-```bash
-npm run dev
+This provides CSS custom properties for colors, spacing, typography, and other design tokens with automatic light/dark mode support.
+
+### Design Tokens (JSON)
+
+Import the raw design tokens data:
+
+```javascript
+import tokens from "@gitbutler/design-core/tokens.json";
+```
+
+### Fonts
+
+Import all fonts:
+
+```css
+@import "@gitbutler/design-core/fonts";
+```
+
+Or import individual font families:
+
+```css
+@import "@gitbutler/design-core/fonts/inter/Inter-Regular.woff2";
+@import "@gitbutler/design-core/fonts/geist-mono/GeistMono-Regular.woff2";
+@import "@gitbutler/design-core/fonts/but-head/But-Head-Regular.woff2";
+@import "@gitbutler/design-core/fonts/pp-editorial/PPEditorialNew-Regular.woff2";
+```
+
+### Core Styles
+
+Import the core CSS styles:
+
+```css
+@import "@gitbutler/design-core/core";
+```
+
+### Style Utilities
+
+Import individual style utilities:
+
+```css
+@import "@gitbutler/design-core/styles"; /* Base styles */
+@import "@gitbutler/design-core/styles/base"; /* Base styles */
+@import "@gitbutler/design-core/styles/reset"; /* CSS reset */
+@import "@gitbutler/design-core/styles/text"; /* Text utilities */
 ```
 
-## Output
+## Available Exports
+
+- `@gitbutler/design-core/tokens` - CSS custom properties
+- `@gitbutler/design-core/tokens.json` - Design tokens as JSON
+- `@gitbutler/design-core/fonts` - All font CSS declarations
+- `@gitbutler/design-core/fonts/*` - Individual font files
+- `@gitbutler/design-core/core` - Core CSS styles
+- `@gitbutler/design-core/styles` - Base style utilities
+- `@gitbutler/design-core/styles/base` - Base styles
+- `@gitbutler/design-core/styles/reset` - CSS reset
+- `@gitbutler/design-core/styles/text` - Text utilities
 
-The build process generates:
-- `tokens/design-tokens.css` - CSS custom properties with light and dark mode support
-- Formatted JSON and CSS files with prettier
+## Included Fonts
 
-## Integration
+- **Inter** - Primary UI font family
+- **Geist Mono** - Monospace font for code
+- **But Head** - Brand display font
+- **PP Editorial** - Editorial content font
 
-To use these tokens in your application:
+## Development
 
-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
+This package uses [Terrazzo](https://terrazzo.app/) to generate CSS custom properties from design tokens.
+
+```bash
+# Install dependencies
+npm install
 
-## Configuration
+# Build tokens
+npm run build
 
-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)
+# Watch for changes
+npm run dev
+```

package/core.css

@@ -0,0 +1,23 @@
+/**
+ * GitButler Design Core - Single Import
+ * 
+ * This file provides a convenient single import for both fonts and design tokens.
+ * 
+ * USAGE:
+ * Import this file: @import '@gitbutler/design-core/core';
+ * Or in JS: import '@gitbutler/design-core/core';
+ * 
+ * INCLUDES:
+ * - All font definitions (fonts/fonts.css)
+ * - All design tokens (tokens/tokens.css)
+ */
+
+/* reset */
+@import "./styles/reset.css";
+/* Import design tokens */
+@import "./tokens/tokens.css";
+/* Import font definitions */
+@import "./fonts/fonts.css";
+/* Base styles */
+@import "./styles/base.css";
+@import "./styles/text.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitbutler/design-core",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "type": "module",
   "description": "Design tokens for GitButler applications",
   "keywords": [
@@ -19,7 +19,12 @@
     "./tokens": "./tokens/tokens.css",
     "./tokens.json": "./tokens/tokens.json",
     "./fonts": "./fonts/fonts.css",
-    "./fonts/*": "./fonts/*"
+    "./fonts/*": "./fonts/*",
+    "./core": "./core.css",
+    "./styles": "./styles/base.css",
+    "./styles/base": "./styles/base.css",
+    "./styles/reset": "./styles/reset.css",
+    "./styles/text": "./styles/text.css"
   },
   "scripts": {
     "build": "npx tz build",
@@ -35,6 +40,8 @@
   "files": [
     "tokens/",
     "fonts/",
+    "styles/",
+    "core.css",
     "README.md"
   ],
   "publishConfig": {

package/styles/base.css

@@ -0,0 +1,36 @@
+/**
+ * GitButler Base Styles
+ * 
+ * This file contains foundational CSS styles including resets, basic typography,
+ * and common element styling that serves as a base for GitButler applications.
+ * 
+ * USAGE:
+ * Import this file: @import '@gitbutler/design-core/base';
+ * Or in JS: import '@gitbutler/design-core/base';
+ */
+
+/* CSS Reset and Normalization */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  font-size: 16px;
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  overflow-x: hidden;
+  color: var(--clr-text-1);
+  font-family: var;
+}

package/styles/reset.css

@@ -0,0 +1,244 @@
+/* BOILERPLATE CSS */
+/* reset all styles */
+@layer reset {
+  /* base */
+  *,
+  :after,
+  :before {
+    box-sizing: border-box;
+    border: 0 solid;
+  }
+
+  html {
+    overscroll-behavior: none;
+  }
+
+  body {
+    margin: 0;
+    padding: 0;
+    line-height: inherit;
+    line-height: inherit;
+    font-family:
+      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+      Arial, "Noto Sans", sans-serif;
+  }
+
+  /* elements */
+  hr {
+    height: 0;
+    border-top-width: 1px;
+    color: inherit;
+  }
+
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: inherit;
+    font-size: inherit;
+  }
+
+  a {
+    color: inherit;
+    text-decoration: inherit;
+  }
+
+  b,
+  strong {
+    font-weight: bolder;
+  }
+
+  code,
+  kbd,
+  pre,
+  samp {
+    font-size: 1em;
+    font-family:
+      Söhne Mono,
+      monospace;
+    font-variation-settings: normal;
+    font-feature-settings: normal;
+  }
+
+  small {
+    font-size: 80%;
+  }
+
+  sub,
+  sup {
+    position: relative;
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+  }
+
+  sub {
+    bottom: -0.25em;
+  }
+
+  sup {
+    top: -0.5em;
+  }
+
+  table {
+    border-color: inherit;
+    border-collapse: collapse;
+    text-indent: 0;
+  }
+
+  button,
+  input,
+  optgroup,
+  select,
+  textarea {
+    margin: 0;
+    padding: 0;
+    color: inherit;
+    font-weight: inherit;
+    font-size: 100%;
+    line-height: inherit;
+    font-family: inherit;
+    font-variation-settings: inherit;
+    font-feature-settings: inherit;
+    letter-spacing: inherit;
+  }
+
+  button,
+  select {
+    text-transform: none;
+  }
+
+  button,
+  input:where([type="button"]),
+  input:where([type="reset"]),
+  input:where([type="submit"]) {
+    -webkit-appearance: button;
+    background-image: none;
+    background-color: transparent;
+  }
+
+  :-moz-focusring {
+    outline: auto;
+  }
+
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+
+  progress {
+    vertical-align: baseline;
+  }
+
+  ::-webkit-inner-spin-button,
+  ::-webkit-outer-spin-button {
+    height: auto;
+  }
+
+  [type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+  }
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+  }
+
+  summary {
+    display: list-item;
+  }
+
+  blockquote,
+  dd,
+  dl,
+  figure,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  hr,
+  p,
+  pre {
+    margin: 0;
+  }
+
+  fieldset {
+    margin: 0;
+  }
+
+  fieldset,
+  legend {
+    padding: 0;
+  }
+
+  menu,
+  ol,
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  dialog {
+    padding: 0;
+  }
+
+  textarea {
+    resize: vertical;
+  }
+
+  input::-moz-placeholder,
+  textarea::-moz-placeholder {
+    color: #9ca3af;
+    opacity: 1;
+  }
+
+  input::placeholder,
+  textarea::placeholder {
+    color: #9ca3af;
+    opacity: 1;
+  }
+
+  [role="button"],
+  button {
+    cursor: pointer;
+  }
+
+  :disabled {
+    cursor: default;
+  }
+
+  audio,
+  canvas,
+  embed,
+  iframe,
+  img,
+  object,
+  video {
+    display: block;
+    vertical-align: middle;
+  }
+
+  img,
+  video {
+    max-width: 100%;
+    height: auto;
+  }
+
+  [hidden] {
+    display: none;
+  }
+}

package/styles/text.css

@@ -0,0 +1,137 @@
+:root {
+  --font-mono: var(--text-fontfamily-mono), monospace;
+  --font-default: var(--text-fontfamily-default), sans-serif;
+  --font-accent: var(--text-fontfamily-accent), serif;
+}
+
+/* text Base Classes */
+.text-9 {
+  font-weight: var(--text-weight-regular);
+  font-size: 0.563rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+.text-10 {
+  font-weight: var(--text-weight-regular);
+  font-size: 0.625rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+.text-11 {
+  font-weight: var(--text-weight-regular);
+  font-size: 0.6875rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+.text-12 {
+  font-weight: var(--text-weight-regular);
+  font-size: 0.75rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+.text-13 {
+  font-weight: var(--text-weight-regular);
+  font-size: 0.8125rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+.text-14 {
+  font-weight: var(--text-weight-regular);
+  font-size: 0.875rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+.text-15 {
+  font-weight: var(--text-weight-regular);
+  font-size: 0.938rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+.text-16 {
+  font-weight: var(--text-weight-regular);
+  font-size: 1rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+.text-18 {
+  font-weight: var(--text-weight-regular);
+  font-size: 1.125rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+/* text Head Classes */
+.text-head-20 {
+  font-weight: var(--text-weight-bold);
+  font-size: 1.25rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+.text-head-22 {
+  font-weight: var(--text-weight-bold);
+  font-size: 1.375rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+.text-head-24 {
+  font-weight: var(--text-weight-bold);
+  font-size: 1.5rem;
+  line-height: var(--text-lineheight-default);
+  font-family: var(--fontfamily-default);
+}
+
+/* Serif Classes */
+.text-serif-42 {
+  font-weight: 400;
+  font-size: 2.625rem;
+  line-height: var(--text-lineheight-accent);
+  font-family: var(--fontfamily-accent);
+}
+
+.text-serif-32 {
+  font-weight: 400;
+  font-size: 2rem;
+  line-height: var(--text-lineheight-accent);
+  font-family: var(--fontfamily-accent);
+}
+
+/* MODIFIERS */
+
+.text-body {
+  line-height: var(--text-lineheight-body);
+}
+
+.text-semibold {
+  font-weight: var(--text-weight-semibold);
+}
+
+.text-bold {
+  font-weight: var(--text-weight-bold);
+}
+
+.text-monospace {
+  font-family: var(--fontfamily-mono);
+}
+
+.text-balance {
+  text-wrap: balance;
+}
+
+.text-pre {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.text-italic {
+  font-style: italic;
+}