@gitbutler/design-core 1.0.3 → 1.2.0

package/README.md

@@ -15,13 +15,13 @@ npm install @gitbutler/design-core
 Import the design tokens CSS file:
 
 ```css
-@import '@gitbutler/design-core/tokens';
+@import "@gitbutler/design-core/tokens";
 ```
 
 Or in JavaScript/TypeScript:
 
 ```javascript
-import '@gitbutler/design-core/tokens';
+import "@gitbutler/design-core/tokens";
 ```
 
 This provides CSS custom properties for colors, spacing, typography, and other design tokens with automatic light/dark mode support.
@@ -31,7 +31,7 @@ This provides CSS custom properties for colors, spacing, typography, and other d
 Import the raw design tokens data:
 
 ```javascript
-import tokens from '@gitbutler/design-core/tokens.json';
+import tokens from "@gitbutler/design-core/tokens.json";
 ```
 
 ### Fonts
@@ -39,24 +39,95 @@ import tokens from '@gitbutler/design-core/tokens.json';
 Import all fonts:
 
 ```css
-@import '@gitbutler/design-core/fonts';
+@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';
+@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 */
+```
+
+### 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
 - `@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
+- `@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/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.3",
+  "version": "1.2.0",
   "type": "module",
   "description": "Design tokens for GitButler applications",
   "keywords": [
@@ -19,7 +19,16 @@
     "./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",
+    "./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",
@@ -35,6 +44,9 @@
   "files": [
     "tokens/",
     "fonts/",
+    "styles/",
+    "utility/",
+    "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(--font-default);
+}
+
+.text-10 {
+  font-weight: var(--text-weight-regular);
+  font-size: 0.625rem;
+  line-height: var(--text-lineheight-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(--font-default);
+}
+
+.text-12 {
+  font-weight: var(--text-weight-regular);
+  font-size: 0.75rem;
+  line-height: var(--text-lineheight-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(--font-default);
+}
+
+.text-14 {
+  font-weight: var(--text-weight-regular);
+  font-size: 0.875rem;
+  line-height: var(--text-lineheight-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(--font-default);
+}
+
+.text-16 {
+  font-weight: var(--text-weight-regular);
+  font-size: 1rem;
+  line-height: var(--text-lineheight-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(--font-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(--font-default);
+}
+
+.text-head-22 {
+  font-weight: var(--text-weight-bold);
+  font-size: 1.375rem;
+  line-height: var(--text-lineheight-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(--font-default);
+}
+
+/* Serif Classes */
+.text-serif-42 {
+  font-weight: 400;
+  font-size: 2.625rem;
+  line-height: var(--text-lineheight-accent);
+  font-family: var(--font-accent);
+}
+
+.text-serif-32 {
+  font-weight: 400;
+  font-size: 2rem;
+  line-height: var(--text-lineheight-accent);
+  font-family: var(--font-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;
+}

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";