@kadoui/tailwindcss 1.0.0

package/README.md

@@ -0,0 +1,127 @@
+# Kadoui-css
+
+The TailwindCSS styles for build robust UIs
+
+---
+
+### Add the following code to your main CSS file
+
+```css
+@import "tailwindcss";
+@import "@kadoui/css";
+
+@theme {
+  --font-*: initial;
+  --font-beautifulFont: var(--font-beautifulFont);
+
+  --color-*: initial;
+  --color-background: #fafafa;
+  --color-background-thick: #efefef;
+  --color-foreground: #151515;
+  --color-beautifulRed: #9e0000;
+  /* You can add any colors */
+
+  --color-palette: var(--color-foreground);
+  --color-brush: var(--color-background);
+}
+
+[data-theme="dark"] {
+  --color-background: #151515;
+  --color-background-thick: #101010;
+  --color-foreground: #fafafa;
+}
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+/* If you add a color, please add its palette as well */
+@utility palette-background {
+  --color-palette: var(--color-background);
+  --color-brush: var(--color-foreground);
+}
+
+@utility palette-background-thick {
+  --color-palette: var(--color-background-thick);
+  --color-brush: var(--color-foreground);
+}
+
+@utility palette-foreground {
+  --color-palette: var(--color-foreground);
+  --color-brush: var(--color-background);
+}
+
+@utility palette-beautifulRed {
+  --color-palette: var(--color-beautifulRed);
+  --color-brush: var(--color-background);
+}
+
+@layer base {
+  html {
+    @apply font-beautifulFont;
+  }
+}
+```
+
+---
+
+### We recommend that you develop the UI of your app with this system
+
+```
+  Media query:
+    sm < mobile
+    sm > tablet
+    lg < tablet
+    lg > desktop
+
+  Spacing:
+    lvl-1: 0.5
+    lvl-2: 1.5
+    lvl-3: 3
+    lvl-4: 6
+    lvl-5: 9
+    lvl-6: 12
+    lvl-7: 16
+    lvl-8: 20
+
+  Color shades:
+    lvl-1: 100%
+    lvl-2: 90%
+    lvl-3: 80%
+    lvl-4: 50%
+    lvl-5: 20%
+    lvl-6: 10%
+
+  Z-index layers:
+    lvl-1: 10
+    lvl-2: 20
+    lvl-3: 30
+    lvl-4: 40
+    lvl-5: 50
+
+  Border radius:
+    lvl-1: rounded
+    lvl-2: rounded-md
+    lvl-3: rounded-lg
+    lvl-4: rounded-xl
+    lvl-5: rounded-2xl
+
+  Heading:
+    text-xl sm:text-2xl lg:text-5xl font-black
+
+  Title:
+    text-base sm:text-lg lg:text-xl font-bold
+
+  Paragraph:
+    text-sm sm:text-base
+```
+
+---
+
+### Kadoui toolchain
+
+Consider that `Kadoui-css` should be mix by a logical UI package, You can use `Kadoui-react` or build your own.
+
+[Read about `Kadoui-react`](https://www.npmjs.com/package/@kadoui/react)
+
+---
+
+Written with ❤️ by [Farzad Vahdati](https://github.com/FarzadVav)

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@kadoui/tailwindcss",
+  "version": "1.0.0",
+  "description": "Kadoui TailwindCSS styles",
+  "author": "FarzadVav",
+  "license": "MIT",
+  "type": "module",
+  "repository": "https://github.com/FarzadVav/kadoui/packages/kadoui-tailwindcss",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.css",
+    "./postcss": "./postcss.config.js"
+  },
+  "keywords": [
+    "@kadoui/tailwindcss",
+    "kado",
+    "ui",
+    "css",
+    "tailwind"
+  ],
+  "devDependencies": {
+    "postcss": "8.5.6",
+    "tailwindcss": "4.1.18",
+    "@tailwindcss/postcss": "4.1.18"
+  },
+  "packageManager": "pnpm@10.25.0"
+}

package/postcss.config.js

@@ -0,0 +1,6 @@
+// Optional PostCSS configuration for apps that need it
+export const kadouiPostcssConfig = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};

package/src/index.css

@@ -0,0 +1,32 @@
+@import "tailwindcss";
+
+/* Utilities */
+@import "./styles/base.css";
+@import "./styles/button.css";
+@import "./styles/input.css";
+@import "./styles/badge.css";
+@import "./styles/card.css";
+@import "./styles/kbd.css";
+@import "./styles/alert.css";
+@import "./styles/join.css";
+@import "./styles/position.css";
+@import "./styles/separator.css";
+
+/* Components */
+@import "./styles/components/affix.css";
+@import "./styles/components/carousel.css";
+@import "./styles/components/choice.css";
+@import "./styles/components/show-more.css";
+@import "./styles/components/accordion.css";
+@import "./styles/components/context-menu.css";
+@import "./styles/components/popover.css";
+@import "./styles/components/drawer.css";
+@import "./styles/components/modal.css";
+@import "./styles/components/otp.css";
+@import "./styles/components/pagination.css";
+@import "./styles/components/progress.css";
+@import "./styles/components/rating.css";
+@import "./styles/components/select-box.css";
+@import "./styles/components/sheet.css";
+@import "./styles/components/breadcrumbs.css";
+@import "./styles/components/spoiler.css";

package/src/styles/alert.css

@@ -0,0 +1,10 @@
+@utility alert {
+  @apply flex items-center bg-palette/10 text-palette border border-palette;
+
+  min-height: var(--element-h);
+  font-size: var(--element-text);
+  line-height: var(--element-line);
+  padding: var(--element-spacing);
+  gap: calc(var(--element-spacing));
+  border-radius: var(--element-rounded);
+}

package/src/styles/badge.css

@@ -0,0 +1,25 @@
+@utility badge {
+  --element-w: max-content;
+
+  @apply flex items-center justify-center max-w-full;
+
+  width: var(--element-w);
+  height: var(--element-h);
+  padding: 0 var(--element-spacing);
+  gap: calc(var(--element-spacing) / 1.5);
+  border-radius: var(--element-rounded);
+  font-size: var(--element-text);
+  line-height: var(--element-line);
+}
+
+@utility badge-fill {
+  @apply bg-palette text-brush;
+}
+
+@utility badge-outline {
+  @apply border border-palette text-palette;
+}
+
+@utility badge-soft {
+  @apply bg-palette/10 text-palette;
+}

package/src/styles/base.css

@@ -0,0 +1,176 @@
+/* Base styles */
+
+@layer base {
+  html {
+    @apply scroll-smooth;
+  }
+
+  body {
+    @apply bg-background text-foreground;
+  }
+
+  * {
+    @apply select-none;
+
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-foreground) transparent;
+  }
+
+  a,
+  span,
+  label {
+    @apply inline-block;
+  }
+
+  button {
+    @apply cursor-pointer;
+  }
+
+  input:focus,
+  textarea:focus {
+    @apply outline-none;
+  }
+
+  textarea {
+    @apply resize-none;
+  }
+}
+
+/* Dark mode */
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+/* Palette colors */
+
+@utility palette-background {
+  --color-palette: var(--color-background);
+  --color-brush: var(--color-foreground);
+}
+
+@utility palette-foreground {
+  --color-palette: var(--color-foreground);
+  --color-brush: var(--color-background);
+}
+
+@utility palette-primary {
+  --color-palette: var(--color-primary);
+  --color-brush: var(--color-primary-foreground);
+}
+
+@utility palette-secondary {
+  --color-palette: var(--color-secondary);
+  --color-brush: var(--color-secondary-foreground);
+}
+
+@utility palette-error {
+  --color-palette: var(--color-error);
+  --color-brush: var(--color-error-foreground);
+}
+
+@utility palette-success {
+  --color-palette: var(--color-success);
+  --color-brush: var(--color-success-foreground);
+}
+
+@utility palette-warning {
+  --color-palette: var(--color-warning);
+  --color-brush: var(--color-warning-foreground);
+}
+
+@utility palette-info {
+  --color-palette: var(--color-info);
+  --color-brush: var(--color-info-foreground);
+}
+
+/* Element sizes */
+
+@utility element-xs {
+  --element-h: var(--element-xs-h);
+  --element-spacing: var(--element-xs-spacing);
+  --element-text: var(--element-xs-text);
+  --element-leading: var(--element-xs-leading);
+  --element-rounded: var(--element-xs-rounded);
+}
+
+@utility element-sm {
+  --element-h: var(--element-sm-h);
+  --element-spacing: var(--element-sm-spacing);
+  --element-text: var(--element-sm-text);
+  --element-leading: var(--element-sm-leading);
+  --element-rounded: var(--element-sm-rounded);
+}
+
+@utility element-md {
+  --element-h: var(--element-medium-h);
+  --element-spacing: var(--element-medium-spacing);
+  --element-text: var(--element-medium-text);
+  --element-leading: var(--element-medium-leading);
+  --element-rounded: var(--element-medium-rounded);
+}
+
+@utility element-lg {
+  --element-h: var(--element-lg-h);
+  --element-spacing: var(--element-lg-spacing);
+  --element-text: var(--element-lg-text);
+  --element-leading: var(--element-lg-leading);
+  --element-rounded: var(--element-lg-rounded);
+}
+
+@utility element-xl {
+  --element-h: var(--element-xl-h);
+  --element-spacing: var(--element-xl-spacing);
+  --element-text: var(--element-xl-text);
+  --element-leading: var(--element-xl-leading);
+  --element-rounded: var(--element-xl-rounded);
+}
+
+/* Use element sizes */
+
+@utility element-square-size {
+  --element-w: var(--element-h);
+  --element-spacing: 0;
+
+  text-align: center;
+  min-width: var(--element-w);
+}
+
+@utility element-full-w {
+  --element-w: 100%;
+}
+
+@utility element-icon-size {
+  width: calc(var(--element-h) / 2);
+  min-width: calc(var(--element-h) / 2);
+  height: calc(var(--element-h) / 2);
+  min-height: calc(var(--element-h) / 2);
+}
+
+/* Utilities */
+
+@utility no-scrollbar {
+  scrollbar-width: none;
+}
+
+@utility w-fix {
+  @apply w-max max-w-full;
+}
+
+@utility link {
+  @apply underline decoration-transparent decoration-0 hover:decoration-palette focus-visible:decoration-palette;
+}
+
+@utility highlight {
+  @apply px-[calc(var(--element-spacing)/2)] bg-palette/10 text-palette rounded font-bold;
+}
+
+@utility ignore {
+  @apply opacity-0 invisible pointer-events-none;
+}
+
+@utility not-ignore {
+  @apply opacity-100 visible pointer-events-auto;
+}
+
+@utility range-slider {
+  @apply bg-palette rounded-full appearance-none cursor-grab active:cursor-grabbing;
+}

package/src/styles/button.css

@@ -0,0 +1,29 @@
+@utility btn {
+  --element-w: max-content;
+
+  @apply max-w-full flex items-center justify-center transition-all outline-solid outline-2 outline-transparent focus-visible:outline-palette disabled:opacity-50 disabled:cursor-not-allowed active:opacity-50;
+
+  width: var(--element-w);
+  height: var(--element-h);
+  padding: 0 var(--element-spacing);
+  gap: calc(var(--element-spacing) / 1.5);
+  border-radius: var(--element-rounded);
+  font-size: var(--element-text);
+  line-height: var(--element-line);
+}
+
+@utility btn-fill {
+  @apply bg-palette text-brush outline-offset-2 hover:bg-palette/90;
+}
+
+@utility btn-outline {
+  @apply border border-palette text-palette outline-offset-2 hover:bg-palette/10;
+}
+
+@utility btn-soft {
+  @apply bg-palette/10 text-palette hover:bg-palette/20;
+}
+
+@utility btn-ghost {
+  @apply text-palette hover:bg-palette/10;
+}

package/src/styles/card.css

@@ -0,0 +1,22 @@
+@utility card {
+  padding: var(--element-spacing);
+  border-radius: var(--element-rounded);
+  font-size: var(--element-text);
+  line-height: var(--element-line);
+}
+
+@utility card-menu {
+  @apply w-max;
+}
+
+@utility card-y {
+  @apply flex flex-col;
+
+  row-gap: calc(var(--element-spacing) / 2);
+}
+
+@utility card-x {
+  @apply flex items-center justify-between;
+
+  column-gap: calc(var(--element-spacing) / 2);
+}

package/src/styles/components/accordion.css

@@ -0,0 +1,3 @@
+@utility accordion-body {
+  @apply overflow-hidden;
+}

package/src/styles/components/affix.css

@@ -0,0 +1,3 @@
+@utility affix {
+  @apply fixed transition-all z-40 data-[state=false]:ignore;
+}

package/src/styles/components/breadcrumbs.css

@@ -0,0 +1,7 @@
+@utility breadcrumbs {
+  @apply flex items-center flex-wrap gap-x-(--element-spacing);
+}
+
+@utility breadcrumbs-item {
+  @apply flex items-center;
+}

package/src/styles/components/carousel.css

@@ -0,0 +1,15 @@
+@utility carousel {
+  @apply relative;
+}
+
+@utility carousel-container {
+  @apply flex items-center overflow-x-auto scroll-smooth;
+}
+
+@utility carousel-left-fade {
+  @apply pointer-events-none absolute right-0 top-0 h-full w-1/3 lg:w-1/6 bg-linear-to-l from-background from-10% lg:from-5% to-transparent z-10 transition-opacity;
+}
+
+@utility carousel-right-fade {
+  @apply pointer-events-none absolute left-0 top-0 h-full w-1/3 lg:w-1/6 bg-linear-to-r from-background from-10% lg:from-5% to-transparent z-10 transition-opacity;
+}

package/src/styles/components/choice.css

@@ -0,0 +1,69 @@
+@utility choice {
+  @apply border border-palette p-1 outline-solid outline-2 outline-transparent focus-visible:outline-palette outline-offset-2;
+}
+
+@utility choice-radio {
+  @apply rounded-full flex items-center justify-center;
+
+  width: var(--element-h);
+  height: var(--element-h);
+
+  &[data-state="false"]>.choice-radio-trigger {
+    @apply opacity-0 scale-0;
+  }
+}
+
+@utility choice-radio-trigger {
+  @apply bg-palette rounded-full transition-all flex items-center justify-center text-brush;
+
+  width: calc(var(--element-h) - 0.5rem);
+  height: calc(var(--element-h) - 0.5rem);
+}
+
+@utility choice-checkbox {
+  @apply rounded-(--element-rounded) flex items-center justify-center;
+
+  width: var(--element-h);
+  height: var(--element-h);
+
+  &[data-state="false"]>.choice-checkbox-trigger {
+    @apply opacity-0 scale-0;
+  }
+}
+
+@utility choice-checkbox-trigger {
+  @apply bg-palette rounded-[calc(var(--element-rounded)-0.25rem)] transition-all flex items-center justify-center text-brush;
+
+  width: calc(var(--element-h) - 0.5rem);
+  height: calc(var(--element-h) - 0.5rem);
+}
+
+@utility choice-switch {
+  @apply relative rounded-full flex items-center;
+
+  width: calc(var(--element-h) * 2);
+  height: var(--element-h);
+
+  &[data-state="true"] {
+    @apply bg-palette text-brush;
+
+    &>.choice-switch-trigger {
+      @apply bg-brush text-palette;
+
+      left: calc(var(--element-h) + 0.25rem);
+    }
+  }
+
+  &[data-state="false"]>.choice-switch-trigger {
+    @apply bg-palette text-brush;
+
+    left: 0.25rem;
+  }
+}
+
+@utility choice-switch-trigger {
+  @apply absolute rounded-full transition-all flex items-center justify-center;
+
+  width: calc(var(--element-h) - 0.5rem);
+  height: calc(var(--element-h) - 0.5rem);
+}

package/src/styles/components/context-menu.css

@@ -0,0 +1,11 @@
+@utility context-menu {
+  @apply relative;
+}
+
+@utility context-menu-body {
+  @apply z-10 fixed transition-all card card-menu card-y data-[state=false]:ignore;
+}
+
+@utility context-menu-navigation {
+  @apply card card-menu card-y;
+}

package/src/styles/components/drawer.css

@@ -0,0 +1,7 @@
+@utility drawer-portal {
+  @apply fixed inset-0 z-50 bg-foreground/50;
+}
+
+@utility drawer-body {
+  @apply absolute bg-background p-(--element-spacing) overflow-y-auto;
+}

package/src/styles/components/modal.css

@@ -0,0 +1,15 @@
+@utility modal-portal {
+  @apply fixed inset-0 z-50 flex items-center justify-center bg-foreground/50;
+}
+
+@utility modal-body {
+  @apply w-max max-w-[90%] h-full max-h-[90%] flex items-center justify-center flex-col;
+}
+
+@utility modal-header {
+  @apply w-full h-[calc(var(--element-h)*1.5)] flex items-center px-(--element-spacing) bg-background rounded-t-(--element-rounded) border-b border-background-thin sticky top-0;
+}
+
+@utility modal-content {
+  @apply w-full py-(--element-spacing) px-(--element-spacing) bg-background rounded-b-(--element-rounded) max-h-[calc(100%-(var(--element-h)*1.5))] overflow-y-auto;
+}

package/src/styles/components/otp.css

@@ -0,0 +1,3 @@
+@utility otp {
+  @apply flex items-center gap-[calc(var(--element-spacing)/2)];
+}

package/src/styles/components/pagination.css

@@ -0,0 +1,3 @@
+@utility pagination {
+  @apply flex items-center gap-(--element-spacing);
+}

package/src/styles/components/popover.css

@@ -0,0 +1,7 @@
+@utility popover {
+  @apply relative w-fix;
+}
+
+@utility popover-body {
+  @apply absolute w-max rounded-lg z-10;
+}

package/src/styles/components/progress.css

@@ -0,0 +1,7 @@
+@utility progress {
+  @apply w-full rounded-(--element-rounded) overflow-hidden h-(--element-h) bg-palette/10;
+}
+
+@utility progress-bar {
+  @apply flex items-center justify-center h-full bg-palette text-brush max-w-full;
+}

package/src/styles/components/rating.css

@@ -0,0 +1,7 @@
+@utility rating {
+  @apply flex items-center w-fix;
+}
+
+@utility rating-items {
+  @apply transition-all px-1 not-active:hover:-translate-y-1;
+}

package/src/styles/components/select-box.css

@@ -0,0 +1,11 @@
+@utility select-box-input {
+  @apply relative cursor-pointer *:cursor-pointer;
+}
+
+@utility select-box-list {
+  @apply card card-y absolute position-b w-full cursor-default z-10;
+}
+
+@utility select-box-option {
+  @apply btn element-full-w justify-start;
+}

package/src/styles/components/sheet.css

@@ -0,0 +1,19 @@
+@utility sheet-portal {
+  @apply fixed inset-0 z-50 bg-foreground/50;
+}
+
+@utility sheet-body {
+  @apply absolute bottom-0 h-[75%] w-full flex flex-col overflow-hidden bg-background touch-none;
+}
+
+@utility sheet-header {
+  @apply p-(--element-spacing) flex items-center justify-center;
+}
+
+@utility sheet-handlebar {
+  @apply w-1/4 h-1 rounded-full bg-foreground;
+}
+
+@utility sheet-content {
+  @apply overflow-y-auto flex-1 p-(--element-spacing);
+}

package/src/styles/components/show-more.css

@@ -0,0 +1,3 @@
+@utility show-more-fade {
+  @apply absolute inset-0 bg-linear-to-t from-background from-30% to-transparent;
+}

package/src/styles/components/spoiler.css

@@ -0,0 +1,7 @@
+@utility spoiler {
+  @apply transition-all data-[state=false]:inline data-[state=false]:cursor-pointer data-[state=false]:rounded data-[state=false]:overflow-hidden data-[state=false]:px-1;
+}
+
+@utility spoiler-blur {
+  @apply transition-all data-[state=false]:select-none data-[state=false]:blur-[3px];
+}

package/src/styles/components/steps.css

@@ -0,0 +1,3 @@
+@utility steps-controls {
+  @apply flex items-center mb-[calc(1.5rem+0.75rem+0.375rem)];
+}

package/src/styles/input.css

@@ -0,0 +1,43 @@
+/* Input element should be a `label` */
+
+@utility input {
+  --element-w: auto;
+
+  @apply text-palette flex cursor-text relative transition-all outline-solid outline-2 outline-transparent focus-within:outline-palette disabled:opacity-50 disabled:cursor-not-allowed has-[[type=file]]:cursor-pointer;
+
+  width: var(--element-w);
+  height: var(--element-h);
+  font-size: var(--element-text);
+  line-height: var(--element-line);
+  border-radius: var(--element-rounded);
+  padding: var(--element-spacing);
+  gap: var(--element-spacing);
+
+  &:has(input, select) {
+    @apply items-center;
+
+    padding: 0 var(--element-spacing);
+  }
+
+  &:has(textarea) {
+    @apply h-[25dvh];
+
+    padding: var(--element-spacing);
+  }
+}
+
+@utility input-field {
+  @apply bg-transparent placeholder:text-palette/50 flex-1 not-[[type=file]]:h-full max-w-full [[type=file]]:cursor-pointer disabled:cursor-not-allowed;
+
+  &:where(select) {
+    @apply cursor-pointer;
+  }
+}
+
+@utility input-outline {
+  @apply border border-palette outline-offset-2;
+}
+
+@utility input-soft {
+  @apply bg-palette/10;
+}

package/src/styles/join.css

@@ -0,0 +1,16 @@
+@utility join {
+  @apply flex items-center ltr:*:not-first:rounded-l-none ltr:*:not-last:rounded-r-none rtl:*:not-first:rounded-r-none rtl:*:not-last:rounded-l-none;
+}
+
+/* Consider border color may not be suitable for your use, you should change it */
+@utility join-border {
+  @apply ltr:*:not-last:border-r rtl:*:not-last:border-l;
+
+  * {
+    border-color: color-mix(in oklab, var(--color-palette) 50%, var(--color-brush))
+  }
+}
+
+@utility join-fix-border {
+  @apply ltr:*:not-first:border-l-0 rtl:*:not-first:border-r-0;
+}

package/src/styles/kbd.css

@@ -0,0 +1,13 @@
+@utility kbd {
+  @apply bg-palette/10 text-palette transition-transform active:translate-y-0.5;
+
+  padding: var(--element-spacing);
+  border-radius: var(--element-rounded);
+  font-size: var(--element-text);
+  line-height: var(--element-line);
+  box-shadow: 0 2px 0 1px var(--color-palette);
+
+  &:active {
+    box-shadow: 0 1px 0 1px var(--color-palette);
+  }
+}

package/src/styles/position.css

@@ -0,0 +1,85 @@
+@utility top-center {
+  @apply top-1/2 -translate-y-1/2;
+}
+
+@utility top-boundary {
+  @apply top-0 -translate-y-1/2;
+}
+
+@utility top-out {
+  @apply top-0 -translate-y-full;
+}
+
+@utility right-center {
+  @apply right-1/2 translate-x-1/2;
+}
+
+@utility right-boundary {
+  @apply right-0 translate-x-1/2;
+}
+
+@utility right-out {
+  @apply right-0 translate-x-full;
+}
+
+@utility bottom-center {
+  @apply bottom-1/2 translate-y-1/2;
+}
+
+@utility bottom-boundary {
+  @apply bottom-0 translate-y-1/2;
+}
+
+@utility bottom-out {
+  @apply bottom-0 translate-y-full;
+}
+
+@utility left-center {
+  @apply left-1/2 -translate-x-1/2;
+}
+
+@utility left-boundary {
+  @apply left-0 -translate-x-1/2;
+}
+
+@utility left-out {
+  @apply left-0 -translate-x-full;
+}
+
+@utility inset-center {
+  @apply top-center left-center;
+}
+
+/* Compaound positions */
+
+@utility position-t {
+  @apply top-out left-center;
+}
+
+@utility position-tr {
+  @apply top-out right-out;
+}
+
+@utility position-r {
+  @apply top-center right-out;
+}
+
+@utility position-br {
+  @apply bottom-out right-out;
+}
+
+@utility position-b {
+  @apply bottom-out left-center;
+}
+
+@utility position-bl {
+  @apply bottom-out left-out;
+}
+
+@utility position-l {
+  @apply top-center left-out;
+}
+
+@utility position-tl {
+  @apply left-out;
+}

package/src/styles/separator.css

@@ -0,0 +1,41 @@
+@utility separate-t {
+  @apply border-t;
+
+  padding-top: var(--element-spacing);
+  margin-top: var(--element-spacing);
+}
+
+@utility separate-r {
+  @apply border-r;
+
+  padding-right: var(--element-spacing);
+  margin-right: var(--element-spacing);
+}
+
+@utility separate-b {
+  @apply border-b;
+
+  padding-bottom: var(--element-spacing);
+  margin-bottom: var(--element-spacing);
+}
+
+@utility separate-l {
+  @apply border-l;
+
+  padding-left: var(--element-spacing);
+  margin-left: var(--element-spacing);
+}
+
+@utility separate-y {
+  @apply border-y;
+
+  padding: var(--element-spacing) 0;
+  margin: var(--element-spacing) 0;
+}
+
+@utility separate-x {
+  @apply border-x;
+
+  padding: 0 var(--element-spacing);
+  margin: 0 var(--element-spacing);
+}