@gitbutler/design-core 1.1.0 → 1.2.1

package/README.md

@@ -70,6 +70,49 @@ Import individual style utilities:
 @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:
+
+```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 (`.clr-text-1`, `.clr-text-2`, `.clr-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`)
+
 ## Available Exports
 
 - `@gitbutler/design-core/tokens` - CSS custom properties
@@ -81,6 +124,10 @@ Import individual 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)
 
 ## Included Fonts
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitbutler/design-core",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "type": "module",
   "description": "Design tokens for GitButler applications",
   "keywords": [
@@ -12,7 +12,7 @@
   "homepage": "https://github.com/gitbutlerapp/design-tokens",
   "repository": {
     "type": "git",
-    "url": "https://github.com/gitbutlerapp/design-tokens.git"
+    "url": "git+https://github.com/gitbutlerapp/design-tokens.git"
   },
   "main": "./tokens/tokens.css",
   "exports": {
@@ -24,7 +24,11 @@
     "./styles": "./styles/base.css",
     "./styles/base": "./styles/base.css",
     "./styles/reset": "./styles/reset.css",
-    "./styles/text": "./styles/text.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"
   },
   "scripts": {
     "build": "npx tz build",
@@ -41,6 +45,7 @@
     "tokens/",
     "fonts/",
     "styles/",
+    "utility/",
     "core.css",
     "README.md"
   ],

package/styles/base.css

@@ -32,5 +32,5 @@ html {
 body {
   overflow-x: hidden;
   color: var(--clr-text-1);
-  font-family: var;
+  font-family: var(--font-default);
 }

package/styles/text.css

@@ -9,63 +9,63 @@
   font-weight: var(--text-weight-regular);
   font-size: 0.563rem;
   line-height: var(--text-lineheight-default);
-  font-family: var(--fontfamily-default);
+  font-family: var(--font-default);
 }
 
 .text-10 {
   font-weight: var(--text-weight-regular);
   font-size: 0.625rem;
   line-height: var(--text-lineheight-default);
-  font-family: var(--fontfamily-default);
+  font-family: var(--font-default);
 }
 
 .text-11 {
   font-weight: var(--text-weight-regular);
   font-size: 0.6875rem;
   line-height: var(--text-lineheight-default);
-  font-family: var(--fontfamily-default);
+  font-family: var(--font-default);
 }
 
 .text-12 {
   font-weight: var(--text-weight-regular);
   font-size: 0.75rem;
   line-height: var(--text-lineheight-default);
-  font-family: var(--fontfamily-default);
+  font-family: var(--font-default);
 }
 
 .text-13 {
   font-weight: var(--text-weight-regular);
   font-size: 0.8125rem;
   line-height: var(--text-lineheight-default);
-  font-family: var(--fontfamily-default);
+  font-family: var(--font-default);
 }
 
 .text-14 {
   font-weight: var(--text-weight-regular);
   font-size: 0.875rem;
   line-height: var(--text-lineheight-default);
-  font-family: var(--fontfamily-default);
+  font-family: var(--font-default);
 }
 
 .text-15 {
   font-weight: var(--text-weight-regular);
   font-size: 0.938rem;
   line-height: var(--text-lineheight-default);
-  font-family: var(--fontfamily-default);
+  font-family: var(--font-default);
 }
 
 .text-16 {
   font-weight: var(--text-weight-regular);
   font-size: 1rem;
   line-height: var(--text-lineheight-default);
-  font-family: var(--fontfamily-default);
+  font-family: var(--font-default);
 }
 
 .text-18 {
   font-weight: var(--text-weight-regular);
   font-size: 1.125rem;
   line-height: var(--text-lineheight-default);
-  font-family: var(--fontfamily-default);
+  font-family: var(--font-default);
 }
 
 /* text Head Classes */
@@ -73,21 +73,21 @@
   font-weight: var(--text-weight-bold);
   font-size: 1.25rem;
   line-height: var(--text-lineheight-default);
-  font-family: var(--fontfamily-default);
+  font-family: var(--font-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);
+  font-family: var(--font-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);
+  font-family: var(--font-default);
 }
 
 /* Serif Classes */
@@ -95,14 +95,14 @@
   font-weight: 400;
   font-size: 2.625rem;
   line-height: var(--text-lineheight-accent);
-  font-family: var(--fontfamily-accent);
+  font-family: var(--font-accent);
 }
 
 .text-serif-32 {
   font-weight: 400;
   font-size: 2rem;
   line-height: var(--text-lineheight-accent);
-  font-family: var(--fontfamily-accent);
+  font-family: var(--font-accent);
 }
 
 /* MODIFIERS */

package/utility/general.css

@@ -0,0 +1,55 @@
+/* Border radius */
+.radius-s {
+  border-radius: var(--radius-s);
+}
+.radius-m {
+  border-radius: var(--radius-m);
+}
+.radius-ml {
+  border-radius: var(--radius-ml);
+}
+.radius-l {
+  border-radius: var(--radius-l);
+}
+
+/* Background colors */
+.clr-bg-1 {
+  background-color: var(--clr-bg-1);
+}
+.clr-bg-1-muted {
+  background-color: var(--clr-bg-1-muted);
+}
+.clr-bg-2 {
+  background-color: var(--clr-bg-2);
+}
+.clr-bg-2-muted {
+  background-color: var(--clr-bg-2-muted);
+}
+.clr-bg-3 {
+  background-color: var(--clr-bg-3);
+}
+.clr-bg-3-muted {
+  background-color: var(--clr-bg-3-muted);
+}
+
+/* Borders */
+.clr-border-1 {
+  border: 1px solid var(--clr-border-1);
+}
+.clr-border-2 {
+  border: 1px solid var(--clr-border-2);
+}
+.clr-border-3 {
+  border: 1px solid var(--clr-border-3);
+}
+
+/* Text colors */
+.clr-text-1 {
+  color: var(--clr-text-1);
+}
+.clr-text-2 {
+  color: var(--clr-text-2);
+}
+.clr-text-3 {
+  color: var(--clr-text-3);
+}

package/utility/helpers.css

@@ -0,0 +1,205 @@
+/* scrollbar helpers */
+.hide-native-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* custom scrollbar */
+.scrollbar,
+pre {
+  &::-webkit-scrollbar {
+    width: 14px;
+    background-color: transaparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transaparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border: 4px solid rgba(0, 0, 0, 0);
+    border-radius: 12px;
+    background-clip: padding-box;
+    background-color: var(--clr-border-1);
+    opacity: 0.3;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    opacity: 0.8;
+  }
+
+  &::-webkit-scrollbar-button {
+    display: none;
+  }
+
+  &::-webkit-scrollbar-corner {
+    background-color: transparent;
+  }
+}
+
+.stack-v {
+  display: flex;
+  flex-direction: column;
+}
+
+.stack-h {
+  display: flex;
+  flex-direction: row;
+}
+
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.no-select {
+  cursor: default;
+  user-select: none;
+}
+
+.hide-when-empty {
+  &:empty {
+    display: none;
+  }
+}
+
+.no-pointer-events {
+  pointer-events: none;
+}
+
+.pointer-events {
+  pointer-events: auto;
+}
+
+.underline {
+  text-decoration: underline;
+}
+
+.underline-dotted {
+  text-decoration: underline dotted;
+}
+
+.underline,
+.underline-dotted {
+  text-underline-offset: 3px;
+}
+
+.capitalize {
+  display: inline-block;
+}
+.capitalize:first-letter {
+  text-transform: capitalize;
+}
+
+/* OPACITY */
+.op-10 {
+  opacity: 0.1;
+}
+.op-20 {
+  opacity: 0.2;
+}
+.op-30 {
+  opacity: 0.3;
+}
+.op-40 {
+  opacity: 0.4;
+}
+.op-50 {
+  opacity: 0.5;
+}
+.op-60 {
+  opacity: 0.6;
+}
+.op-70 {
+  opacity: 0.7;
+}
+.op-80 {
+  opacity: 0.8;
+}
+.op-90 {
+  opacity: 0.9;
+}
+
+/* ANIMATION */
+
+.wiggle-animation {
+  animation: wiggle-animation 0.35s forwards;
+}
+
+@keyframes wiggle-animation {
+  0% {
+    transform: translateX(-3px);
+  }
+  25% {
+    transform: translateX(3px);
+  }
+  50% {
+    transform: translateX(-2px);
+  }
+  75% {
+    transform: translateX(2px);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+.highlight-animation {
+  animation: highlight-animation 0.5s forwards;
+}
+
+@keyframes highlight-animation {
+  0% {
+    transform: translate(0, 0) rotate(0deg);
+    box-shadow: 0 0 0 0
+      color-mix(in srgb, var(--clr-theme-pop-element), transparent, 0.5);
+  }
+  12.5% {
+    transform: translate(-1px, -1px) rotate(-0.5deg);
+    box-shadow: 0 0 0 1px var(--clr-theme-pop-element);
+  }
+  25% {
+    transform: translate(1px, 0px) rotate(0.5deg);
+    box-shadow: 0 0 0 1.5px var(--clr-theme-pop-element);
+  }
+  37.5% {
+    transform: translate(-1px, 1px) rotate(-0.3deg);
+    box-shadow: 0 0 0 2px var(--clr-theme-pop-element);
+  }
+  50% {
+    transform: translate(1px, -1px) rotate(0.3deg);
+    box-shadow: 0 0 0 2px var(--clr-theme-pop-element);
+  }
+  62.5% {
+    transform: translate(-1px, 0px) rotate(-0.2deg);
+    box-shadow: 0 0 0 1.5px var(--clr-theme-pop-element);
+  }
+  75% {
+    transform: translate(1px, 1px) rotate(0.2deg);
+    box-shadow: 0 0 0 1px var(--clr-theme-pop-element);
+  }
+  87.5% {
+    transform: translate(0px, -1px) rotate(-0.1deg);
+    box-shadow: 0 0 0 0.5px var(--clr-theme-pop-element);
+  }
+  100% {
+    transform: translate(0, 0) rotate(0deg);
+    box-shadow: 0 0 0 0
+      color-mix(in srgb, var(--clr-theme-pop-element), transparent, 0.5);
+  }
+}
+
+/* ACCESSIBILITY */
+.focus-state {
+  outline: none;
+  outline-offset: 2px;
+
+  &:focus-visible {
+    outline: 0.094rem solid var(--focus-color);
+  }
+}

package/utility/layout.min.css

@@ -0,0 +1 @@
+/*Spasing*/.gap-2{gap:2px;}.p-2{padding:2px;}.p-l-2{padding-left:2px;}.p-r-2{padding-right:2px;}.p-t-2{padding-top:2px;}.p-b-2{padding-bottom:2px;}.m-2{margin:2px;}.m-l-2{margin-left:2px;}.m-r-2{margin-right:2px;}.m-t-2{margin-top:2px;}.m-b-2{margin-bottom:2px;}.gap-4{gap:4px;}.p-4{padding:4px;}.p-l-4{padding-left:4px;}.p-r-4{padding-right:4px;}.p-t-4{padding-top:4px;}.p-b-4{padding-bottom:4px;}.m-4{margin:4px;}.m-l-4{margin-left:4px;}.m-r-4{margin-right:4px;}.m-t-4{margin-top:4px;}.m-b-4{margin-bottom:4px;}.gap-6{gap:6px;}.p-6{padding:6px;}.p-l-6{padding-left:6px;}.p-r-6{padding-right:6px;}.p-t-6{padding-top:6px;}.p-b-6{padding-bottom:6px;}.m-6{margin:6px;}.m-l-6{margin-left:6px;}.m-r-6{margin-right:6px;}.m-t-6{margin-top:6px;}.m-b-6{margin-bottom:6px;}.gap-8{gap:8px;}.p-8{padding:8px;}.p-l-8{padding-left:8px;}.p-r-8{padding-right:8px;}.p-t-8{padding-top:8px;}.p-b-8{padding-bottom:8px;}.m-8{margin:8px;}.m-l-8{margin-left:8px;}.m-r-8{margin-right:8px;}.m-t-8{margin-top:8px;}.m-b-8{margin-bottom:8px;}.gap-10{gap:10px;}.p-10{padding:10px;}.p-l-10{padding-left:10px;}.p-r-10{padding-right:10px;}.p-t-10{padding-top:10px;}.p-b-10{padding-bottom:10px;}.m-10{margin:10px;}.m-l-10{margin-left:10px;}.m-r-10{margin-right:10px;}.m-t-10{margin-top:10px;}.m-b-10{margin-bottom:10px;}.gap-12{gap:12px;}.p-12{padding:12px;}.p-l-12{padding-left:12px;}.p-r-12{padding-right:12px;}.p-t-12{padding-top:12px;}.p-b-12{padding-bottom:12px;}.m-12{margin:12px;}.m-l-12{margin-left:12px;}.m-r-12{margin-right:12px;}.m-t-12{margin-top:12px;}.m-b-12{margin-bottom:12px;}.gap-14{gap:14px;}.p-14{padding:14px;}.p-l-14{padding-left:14px;}.p-r-14{padding-right:14px;}.p-t-14{padding-top:14px;}.p-b-14{padding-bottom:14px;}.m-14{margin:14px;}.m-l-14{margin-left:14px;}.m-r-14{margin-right:14px;}.m-t-14{margin-top:14px;}.m-b-14{margin-bottom:14px;}.gap-16{gap:16px;}.p-16{padding:16px;}.p-l-16{padding-left:16px;}.p-r-16{padding-right:16px;}.p-t-16{padding-top:16px;}.p-b-16{padding-bottom:16px;}.m-16{margin:16px;}.m-l-16{margin-left:16px;}.m-r-16{margin-right:16px;}.m-t-16{margin-top:16px;}.m-b-16{margin-bottom:16px;}.gap-20{gap:20px;}.p-20{padding:20px;}.p-l-20{padding-left:20px;}.p-r-20{padding-right:20px;}.p-t-20{padding-top:20px;}.p-b-20{padding-bottom:20px;}.m-20{margin:20px;}.m-l-20{margin-left:20px;}.m-r-20{margin-right:20px;}.m-t-20{margin-top:20px;}.m-b-20{margin-bottom:20px;}.gap-24{gap:24px;}.p-24{padding:24px;}.p-l-24{padding-left:24px;}.p-r-24{padding-right:24px;}.p-t-24{padding-top:24px;}.p-b-24{padding-bottom:24px;}.m-24{margin:24px;}.m-l-24{margin-left:24px;}.m-r-24{margin-right:24px;}.m-t-24{margin-top:24px;}.m-b-24{margin-bottom:24px;}.gap-28{gap:28px;}.p-28{padding:28px;}.p-l-28{padding-left:28px;}.p-r-28{padding-right:28px;}.p-t-28{padding-top:28px;}.p-b-28{padding-bottom:28px;}.m-28{margin:28px;}.m-l-28{margin-left:28px;}.m-r-28{margin-right:28px;}.m-t-28{margin-top:28px;}.m-b-28{margin-bottom:28px;}.gap-32{gap:32px;}.p-32{padding:32px;}.p-l-32{padding-left:32px;}.p-r-32{padding-right:32px;}.p-t-32{padding-top:32px;}.p-b-32{padding-bottom:32px;}.m-32{margin:32px;}.m-l-32{margin-left:32px;}.m-r-32{margin-right:32px;}.m-t-32{margin-top:32px;}.m-b-32{margin-bottom:32px;}.gap-36{gap:36px;}.p-36{padding:36px;}.p-l-36{padding-left:36px;}.p-r-36{padding-right:36px;}.p-t-36{padding-top:36px;}.p-b-36{padding-bottom:36px;}.m-36{margin:36px;}.m-l-36{margin-left:36px;}.m-r-36{margin-right:36px;}.m-t-36{margin-top:36px;}.m-b-36{margin-bottom:36px;}.gap-40{gap:40px;}.p-40{padding:40px;}.p-l-40{padding-left:40px;}.p-r-40{padding-right:40px;}.p-t-40{padding-top:40px;}.p-b-40{padding-bottom:40px;}.m-40{margin:40px;}.m-l-40{margin-left:40px;}.m-r-40{margin-right:40px;}.m-t-40{margin-top:40px;}.m-b-40{margin-bottom:40px;}.gap-44{gap:44px;}.p-44{padding:44px;}.p-l-44{padding-left:44px;}.p-r-44{padding-right:44px;}.p-t-44{padding-top:44px;}.p-b-44{padding-bottom:44px;}.m-44{margin:44px;}.m-l-44{margin-left:44px;}.m-r-44{margin-right:44px;}.m-t-44{margin-top:44px;}.m-b-44{margin-bottom:44px;}.gap-48{gap:48px;}.p-48{padding:48px;}.p-l-48{padding-left:48px;}.p-r-48{padding-right:48px;}.p-t-48{padding-top:48px;}.p-b-48{padding-bottom:48px;}.m-48{margin:48px;}.m-l-48{margin-left:48px;}.m-r-48{margin-right:48px;}.m-t-48{margin-top:48px;}.m-b-48{margin-bottom:48px;}/*Position*/.relative{position:relative;}.absolute{position:absolute;}.fixed{position:fixed;}.sticky{position:sticky;}.top-0{top:0;}.bottom-0{bottom:0;}.left-0{left:0;}.right-0{right:0;}/*Size*/.full-width{width:100%;}.full-height{height:100%;}/*Flexbox*/.flex{display:flex;}.flex-col{flex-direction:column;}.items-center{align-items:center;}.justify-center{justify-content:center;}.justify-between{justify-content:space-between;}.justify-end{justify-content:flex-end;}.full-width{width:100%;}.full-height{height:100%;}.flex-1{flex:1;}.flex-2{flex:2;}.flex-3{flex:3;}.flex-4{flex:4;}.flex-5{flex:5;}.flex-shrink-0{flex-shrink:0;}.flex-wrap{flex-wrap:wrap;}.flex-nowrap{flex-wrap:nowrap;}.grow{flex-grow:1;}/*Overflow*/.overflow-hidden{overflow:hidden;}.overflow-auto{overflow:auto;}.overflow-scroll{overflow:scroll;}.overflow-visible{overflow:visible;}/*Text*/.text-center{text-align:center;}.text-left{text-align:left;}.text-right{text-align:right;}.text-nowrap{white-space:nowrap;}

package/utility/utility.css

@@ -0,0 +1,3 @@
+@import "./general.css";
+@import "./helpers.css";
+@import "./layout.min.css";