@gitbutler/design-core 2.2.2 → 3.0.0

package/README.md

@@ -10,9 +10,23 @@ npm install @gitbutler/design-core
 
 ## Usage
 
+### Single Import
+
+The easiest way to get everything — fonts, CSS reset, text utilities, and design tokens:
+
+```css
+@import "@gitbutler/design-core/core";
+```
+
+Or in JavaScript/TypeScript:
+
+```javascript
+import "@gitbutler/design-core/core";
+```
+
 ### Design Tokens (CSS)
 
-Import the design tokens CSS file:
+Import only the design tokens CSS file:
 
 ```css
 @import "@gitbutler/design-core/tokens";
@@ -28,103 +42,51 @@ This provides CSS custom properties for colors, spacing, typography, and other d
 
 ### Fonts
 
-Import all fonts:
+Import all font declarations:
 
 ```css
 @import "@gitbutler/design-core/fonts";
 ```
 
-Or import individual font families:
+Or reference individual font files directly:
 
 ```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/inter/Inter-Variable.woff2";
+@import "@gitbutler/design-core/fonts/geist-mono/GeistMono-Variable.woff2";
 @import "@gitbutler/design-core/fonts/but-head/But-Head-Regular.woff2";
 ```
 
-### Core Styles
+### Styles
 
-Import the core CSS styles:
+Import individual style sheets:
 
 ```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 */
 ```
 
-### Utility Classes
-
-Import all utility classes at once:
-
-```css
-@import "@gitbutler/design-core/utility";
-```
-
-Or in JavaScript/TypeScript:
-
-```javascript
-import "@gitbutler/design-core/utility";
-```
-
-Or import individual utility class files:
+**Text utilities** include:
 
-```css
-@import "@gitbutler/design-core/utility/general"; /* Border radius, colors, borders */
-@import "@gitbutler/design-core/utility/helpers"; /* Scrollbar helpers, stack utilities */
-@import "@gitbutler/design-core/utility/layout"; /* Spacing, positioning, flexbox, overflow, text alignment */
-```
-
-**General utilities** include:
-
-- Border radius (`.radius-s`, `.radius-m`, `.radius-ml`, `.radius-l`)
-- Background colors (`.clr-bg-1`, `.clr-bg-2`, `.clr-bg-3` and their muted variants)
-- Borders (`.clr-border-1`, `.clr-border-2`, `.clr-border-3`)
-- Text colors (`.text-1`, `.text-2`, `.text-3`)
-
-**Helper utilities** include:
-
-- Scrollbar utilities (`.hide-native-scrollbar`, `.scrollbar`)
-- Stack layouts (`.stack-v`, `.stack-h`)
-
-**Layout utilities** include:
-
-- Spacing (margin, padding, gap in 2px increments from 2px to 48px)
-- Positioning (`.relative`, `.absolute`, `.fixed`, `.sticky`, positioning utilities)
-- Size (`.full-width`, `.full-height`)
-- Flexbox (`.flex`, `.flex-col`, alignment and justify utilities, flex grow/shrink)
-- Overflow (`.overflow-hidden`, `.overflow-auto`, `.overflow-scroll`, `.overflow-visible`)
-- Text alignment (`.text-center`, `.text-left`, `.text-right`, `.text-nowrap`)
+- Size classes (`.text-10`, `.text-11`, `.text-12`, `.text-13`, `.text-14`, `.text-15`, `.text-16`, `.text-accent-head`)
+- Weight modifiers (`.text-semibold`, `.text-bold`)
+- Style modifiers (`.text-italic`, `.text-monospace`, `.text-body`, `.text-balance`, `.text-pre`)
 
 ## Available Exports
 
-- `@gitbutler/design-core/tokens` - CSS custom properties
+- `@gitbutler/design-core/core` - Single import: fonts + reset + text utilities + tokens
+- `@gitbutler/design-core/tokens` - CSS custom properties (design tokens)
 - `@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
-- `@gitbutler/design-core/utility` - All utility classes (combined)
-- `@gitbutler/design-core/utility/general` - General utility classes (borders, colors)
-- `@gitbutler/design-core/utility/helpers` - Helper utility classes (scrollbar, stacks)
-- `@gitbutler/design-core/utility/layout` - Layout utility classes (spacing, flexbox, positioning)
+- `@gitbutler/design-core/styles/text` - Text utility classes
 
 ## Included Fonts
 
-- **Inter** - Primary UI font family
-- **Geist Mono** - Monospace font for code
-- **But Head** - Brand display font
-- **PP Editorial** - Editorial content font
+All fonts are variable fonts unless noted.
+
+- **Inter** — Primary UI font (`Inter-Variable.woff2`, `Inter-Variable-Italic.woff2`)
+- **Geist Mono** — Monospace font for code (`GeistMono-Variable.woff2`)
+- **But Head** — Brand display font (`But-Head-Regular.woff2`, `But-Head-Italic.woff2`)
 
 ## Development
 

package/fonts/fonts.css

@@ -30,79 +30,23 @@
 
 @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-weight: 100 900;
+	src: url("geist-mono/GeistMono-Variable.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-weight: 100 900;
+	src: url("inter/Inter-Variable.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-weight: 100 900;
+	src: url("inter/Inter-Variable-Italic.woff2") format("woff2");
 	font-family: "Inter";
 	font-display: swap;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@gitbutler/design-core",
-	"version": "2.2.2",
+	"version": "3.0.0",
 	"type": "module",
 	"description": "Design tokens for GitButler applications",
 	"keywords": [
@@ -20,25 +20,16 @@
 		"./fonts": "./fonts/fonts.css",
 		"./fonts/*": "./fonts/*",
 		"./core": "./core.css",
-		"./styles": "./styles/base.css",
-		"./styles/base": "./styles/base.css",
 		"./styles/reset": "./styles/reset.css",
-		"./styles/text": "./styles/text.css",
-		"./utility": "./utility/utility.css",
-		"./utility/general": "./utility/general.css",
-		"./utility/helpers": "./utility/helpers.css",
-		"./utility/layout": "./utility/layout.min.css"
+		"./styles/text": "./styles/text.css"
 	},
 	"scripts": {
-		"build": "npx tz build",
-		"build:tokens": "npx tz build",
-		"dev:tokens": "npx tz build --watch",
-		"prepublishOnly": "npm run build:tokens",
+		"build": "node scripts/postprocess-light-dark.mjs",
+		"dev:tokens": "node scripts/postprocess-light-dark.mjs --watch",
+		"prepublishOnly": "npm run build",
 		"format": "prettier --write \"**/*.{css,ts,js}\"",
 		"format:check": "prettier --check \"**/*.{css,ts,js}\"",
-		"dev:hue-dini": "cd tools/hue-dini && pnpm dev",
-		"dev:generator": "cd color-generator && pnpm dev",
-		"build:generator": "cd color-generator && pnpm build"
+		"dev:hue-dini": "cd tools/hue-dini && pnpm dev"
 	},
 	"devDependencies": {
 		"@terrazzo/cli": "0.10.3",
@@ -50,7 +41,6 @@
 		"tokens/",
 		"fonts/",
 		"styles/",
-		"utility/",
 		"core.css",
 		"README.md"
 	],

package/styles/reset.css

@@ -1,18 +1,17 @@
 /* BOILERPLATE CSS */
-/* reset all styles */
 @layer reset {
-	/* base */
+	/* Box sizing rules */
 	*,
-	:after,
-	:before {
+	*::before,
+	*::after {
 		box-sizing: border-box;
-		border: 0 solid;
 	}
 
+	/* Prevent font size inflation */
 	html {
-		overscroll-behavior: none;
-		font-size: 16px;
-		line-height: 1.5;
+		-moz-text-size-adjust: none;
+		-webkit-text-size-adjust: none;
+		text-size-adjust: none;
 		-webkit-font-smoothing: antialiased;
 		-moz-osx-font-smoothing: grayscale;
 		text-rendering: optimizeLegibility;
@@ -24,246 +23,57 @@
 		margin: 0;
 		overflow-x: hidden;
 		color: var(--text-1);
-		font-family: var(--font-default);
+		font-family: var(--fontfamily-base);
 	}
 
-	/* 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: var(--font-mono);
-		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;
+	textarea,
+	select {
 		padding: 0;
-		border: 0;
+		border: none;
+		background: none;
 		color: inherit;
-		font-weight: inherit;
-		font-size: 100%;
+		font: inherit;
 		line-height: inherit;
-		font-family: inherit;
-		font-variation-settings: inherit;
-		font-feature-settings: inherit;
-		letter-spacing: inherit;
-		background: transparent;
-	}
-
-	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;
-		outline: none;
-		touch-action: manipulation;
-	}
-
-	:-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;
+	button {
+		padding: 0;
+		border: none;
+		background: none;
+		color: inherit;
 		font: inherit;
+		line-height: inherit;
+		text-align: left;
 	}
 
-	summary {
-		display: list-item;
+	* {
+		box-sizing: border-box;
 	}
 
-	blockquote,
-	dd,
-	dl,
-	figure,
 	h1,
 	h2,
 	h3,
 	h4,
 	h5,
-	h6,
-	hr,
-	p,
-	pre {
-		margin: 0;
+	h6 {
+		margin-block: 0;
 	}
 
-	fieldset {
-		margin: 0;
+	code,
+	pre {
+		font-family: var(--fontfamily-mono);
 	}
 
-	fieldset,
-	legend {
-		padding: 0;
+	ul,
+	pre,
+	p {
+		margin-block: 0;
 	}
 
-	menu,
-	ol,
-	ul {
-		margin: 0;
-		padding: 0;
+	ul,
+	ol {
+		padding-left: 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 {
-		text-align: left;
-		cursor: pointer;
-	}
-
-	[role="button"]:disabled,
-	button:disabled,
-	:disabled {
-		cursor: not-allowed;
-	}
-
-	audio,
-	canvas,
-	embed,
-	iframe,
-	img,
-	object,
-	video {
-		display: block;
-		vertical-align: middle;
-	}
-
-	img,
-	video {
-		max-width: 100%;
-		height: auto;
-	}
-
-	[hidden] {
-		display: none;
-	}
-
-	/* Focus outline for keyboard navigation */
-	a:focus-visible,
-	button:focus-visible,
-	input:focus-visible,
-	select:focus-visible,
-	textarea:focus-visible,
-	[tabindex]:focus-visible,
-	[role="button"]:focus-visible,
-	[role="link"]:focus-visible,
-	details:focus-visible,
-	summary:focus-visible,
-	.focus-visible:focus-visible {
-		outline: 2px solid var(--clr-theme-pop-element);
-		outline-offset: -2px;
-	}
 }