@mgremy/ng-primitives 0.0.1

package/fesm2022/mgremy-ng-primitives-tooltip.mjs

@@ -0,0 +1,60 @@
+import * as i0 from '@angular/core';
+import { inject, Directive } from '@angular/core';
+import { NgpTooltip, NgpTooltipArrow } from 'ng-primitives/tooltip';
+
+const options$1 = ['ngpTooltip'];
+const error$1 = new Error(`MgnpTooltip must be used with ${options$1.join(' / ')}`);
+class MgnpTooltip {
+    ngpTooltip = inject(NgpTooltip, { optional: true });
+    constructor() {
+        if (!this.ngpTooltip) {
+            console.error(this);
+            throw error$1;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MgnpTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: MgnpTooltip, isStandalone: true, selector: "[ngpTooltip][mgnpTooltip]", host: { attributes: { "data-mgnp-component": "mgnp-tooltip" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MgnpTooltip, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpTooltip][mgnpTooltip]',
+                    standalone: true,
+                    host: {
+                        'data-mgnp-component': 'mgnp-tooltip',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+const options = ['ngpTooltipArrow'];
+const error = new Error(`MgnpTooltipArrow must be used with ${options.join(' / ')}`);
+class MgnpTooltipArrow {
+    ngpTooltipArrow = inject(NgpTooltipArrow, {
+        optional: true,
+    });
+    constructor() {
+        if (!this.ngpTooltipArrow) {
+            console.error(this);
+            throw error;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MgnpTooltipArrow, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.6", type: MgnpTooltipArrow, isStandalone: true, selector: "[ngpTooltipArrow][mgnpTooltipArrow]", host: { attributes: { "data-mgnp-component": "mgnp-tooltip-arrow" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: MgnpTooltipArrow, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ngpTooltipArrow][mgnpTooltipArrow]',
+                    standalone: true,
+                    host: {
+                        'data-mgnp-component': 'mgnp-tooltip-arrow',
+                    },
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MgnpTooltip, MgnpTooltipArrow };
+//# sourceMappingURL=mgremy-ng-primitives-tooltip.mjs.map

package/fesm2022/mgremy-ng-primitives-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mgremy-ng-primitives-tooltip.mjs","sources":["../../../../libs/ng-primitives/tooltip/src/lib/mgnp-tooltip/mgnp-tooltip.directive.ts","../../../../libs/ng-primitives/tooltip/src/lib/mgnp-tooltip-arrow/mgnp-tooltip-arrow.directive.ts","../../../../libs/ng-primitives/tooltip/src/mgremy-ng-primitives-tooltip.ts"],"sourcesContent":["import { Directive, inject } from '@angular/core';\nimport { NgpTooltip } from 'ng-primitives/tooltip';\n\nconst options = ['ngpTooltip'];\n\nconst error = new Error(`MgnpTooltip must be used with ${options.join(' / ')}`);\n\n@Directive({\n  selector: '[ngpTooltip][mgnpTooltip]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-tooltip',\n  },\n})\nexport class MgnpTooltip {\n  protected readonly ngpTooltip = inject(NgpTooltip, { optional: true });\n\n  constructor() {\n    if (!this.ngpTooltip) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","import { Directive, inject } from '@angular/core';\nimport { NgpTooltipArrow } from 'ng-primitives/tooltip';\n\nconst options = ['ngpTooltipArrow'];\n\nconst error = new Error(\n  `MgnpTooltipArrow must be used with ${options.join(' / ')}`,\n);\n\n@Directive({\n  selector: '[ngpTooltipArrow][mgnpTooltipArrow]',\n  standalone: true,\n  host: {\n    'data-mgnp-component': 'mgnp-tooltip-arrow',\n  },\n})\nexport class MgnpTooltipArrow {\n  protected readonly ngpTooltipArrow = inject(NgpTooltipArrow, {\n    optional: true,\n  });\n\n  constructor() {\n    if (!this.ngpTooltipArrow) {\n      console.error(this);\n      throw error;\n    }\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["options","error"],"mappings":";;;;AAGA,MAAMA,SAAO,GAAG,CAAC,YAAY,CAAC;AAE9B,MAAMC,OAAK,GAAG,IAAI,KAAK,CAAC,CAAA,8BAAA,EAAiCD,SAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAE,CAAC;MASlE,WAAW,CAAA;IACH,UAAU,GAAG,MAAM,CAAC,UAAU,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC;AAEtE,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE;AACpB,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;AACnB,YAAA,MAAMC,OAAK;QACb;IACF;uGARW,WAAW,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAX,WAAW,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,2BAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,cAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAX,WAAW,EAAA,UAAA,EAAA,CAAA;kBAPvB,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,2BAA2B;AACrC,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,qBAAqB,EAAE,cAAc;AACtC,qBAAA;AACF,iBAAA;;;ACVD,MAAM,OAAO,GAAG,CAAC,iBAAiB,CAAC;AAEnC,MAAM,KAAK,GAAG,IAAI,KAAK,CACrB,CAAA,mCAAA,EAAsC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,CAAE,CAC5D;MASY,gBAAgB,CAAA;AACR,IAAA,eAAe,GAAG,MAAM,CAAC,eAAe,EAAE;AAC3D,QAAA,QAAQ,EAAE,IAAI;AACf,KAAA,CAAC;AAEF,IAAA,WAAA,GAAA;AACE,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,OAAO,CAAC,KAAK,CAAC,IAAI,CAAC;AACnB,YAAA,MAAM,KAAK;QACb;IACF;uGAVW,gBAAgB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAhB,gBAAgB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,qCAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,qBAAA,EAAA,oBAAA,EAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,CAAA;;2FAAhB,gBAAgB,EAAA,UAAA,EAAA,CAAA;kBAP5B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,qCAAqC;AAC/C,oBAAA,UAAU,EAAE,IAAI;AAChB,oBAAA,IAAI,EAAE;AACJ,wBAAA,qBAAqB,EAAE,oBAAoB;AAC5C,qBAAA;AACF,iBAAA;;;ACfD;;AAEG;;;;"}

package/fesm2022/mgremy-ng-primitives.mjs

@@ -0,0 +1,6 @@
+var index = {};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=mgremy-ng-primitives.mjs.map

package/fesm2022/mgremy-ng-primitives.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"mgremy-ng-primitives.mjs","sources":["../../../../libs/ng-primitives/src/index.ts","../../../../libs/ng-primitives/src/mgremy-ng-primitives.ts"],"sourcesContent":["export default {};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"AAAA,YAAe,EAAE;;ACAjB;;AAEG"}

package/input/README.md

@@ -0,0 +1,3 @@
+# @mgremy/ng-primitives/src/lib/input
+
+Secondary entry point of `@mgremy/ng-primitives`. It can be used by importing from `@mgremy/ng-primitives/input`.

package/loader/README.md

@@ -0,0 +1,3 @@
+# @mgremy/ng-primitives/src/lib/loader
+
+Secondary entry point of `@mgremy/ng-primitives`. It can be used by importing from `@mgremy/ng-primitives/loader`.

package/menu/README.md

@@ -0,0 +1,3 @@
+# @mgremy/ng-primitives/src/lib/menu
+
+Secondary entry point of `@mgremy/ng-primitives`. It can be used by importing from `@mgremy/ng-primitives/menu`.

package/navbar/README.md

@@ -0,0 +1,3 @@
+# @mgremy/ng-primitives/src/lib/navbar
+
+Secondary entry point of `@mgremy/ng-primitives`. It can be used by importing from `@mgremy/ng-primitives/navbar`.

package/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@mgremy/ng-primitives",
+  "version": "0.0.1",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "url": "https://github.com/MGREMY/nx_source"
+  },
+  "peerDependencies": {
+    "@angular/common": "~21.1.0",
+    "@angular/core": "~21.1.0",
+    "ng-primitives": "~0.110.0",
+    "tailwindcss": "~4.0.0",
+    "@ng-icons/core": "~33.0.0",
+    "@ng-icons/flag-icons": "~33.0.0",
+    "@ng-icons/heroicons": "~33.0.0"
+  },
+  "sideEffects": false,
+  "exports": {
+    "./theme*": {
+      "default": "./theme"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/mgremy-ng-primitives.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives.mjs"
+    },
+    "./button": {
+      "types": "./types/mgremy-ng-primitives-button.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives-button.mjs"
+    },
+    "./combobox": {
+      "types": "./types/mgremy-ng-primitives-combobox.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives-combobox.mjs"
+    },
+    "./input": {
+      "types": "./types/mgremy-ng-primitives-input.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives-input.mjs"
+    },
+    "./loader": {
+      "types": "./types/mgremy-ng-primitives-loader.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives-loader.mjs"
+    },
+    "./menu": {
+      "types": "./types/mgremy-ng-primitives-menu.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives-menu.mjs"
+    },
+    "./navbar": {
+      "types": "./types/mgremy-ng-primitives-navbar.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives-navbar.mjs"
+    },
+    "./pagination": {
+      "types": "./types/mgremy-ng-primitives-pagination.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives-pagination.mjs"
+    },
+    "./table": {
+      "types": "./types/mgremy-ng-primitives-table.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives-table.mjs"
+    },
+    "./tooltip": {
+      "types": "./types/mgremy-ng-primitives-tooltip.d.ts",
+      "default": "./fesm2022/mgremy-ng-primitives-tooltip.mjs"
+    }
+  },
+  "module": "fesm2022/mgremy-ng-primitives.mjs",
+  "typings": "types/mgremy-ng-primitives.d.ts",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/pagination/README.md

@@ -0,0 +1,3 @@
+# @mgremy/ng-primitives/src/lib/pagination
+
+Secondary entry point of `@mgremy/ng-primitives`. It can be used by importing from `@mgremy/ng-primitives/pagination`.

package/table/README.md

@@ -0,0 +1,3 @@
+# @mgremy/ng-primitives/src/lib/table
+
+Secondary entry point of `@mgremy/ng-primitives`. It can be used by importing from `@mgremy/ng-primitives/table`.

package/theme/components/button.css

@@ -0,0 +1,39 @@
+@utility mgnp-button {
+  display: inline-block;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  border-radius: 0.5rem;
+  color: var(--ngp-text-primary);
+  border: none;
+  font-weight: 500;
+  height: fit-content;
+  width: max-content;
+  background-color: var(--ngp-background);
+  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+  box-shadow: var(--ngp-button-shadow);
+  cursor: pointer;
+
+  @variant data-hover {
+    background-color: var(--ngp-background-hover);
+  }
+
+  @variant data-focus-visible {
+    outline: 2px solid var(--ngp-focus-ring);
+  }
+
+  @variant data-press {
+    background-color: var(--ngp-background-active);
+  }
+
+  @variant data-disabled {
+    opacity: 50%;
+  }
+}
+
+@layer base {
+  [mgnpButton][data-mgnp-component='mgnp-button'] {
+    @apply mgnp-button;
+  }
+}

package/theme/components/combobox.css

@@ -0,0 +1,145 @@
+@utility mgnp-combobox {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: fit-content;
+  width: fit-content;
+  border-radius: 8px;
+  border: none;
+  background-color: var(--ngp-background);
+  box-shadow: var(--ngp-input-shadow);
+  box-sizing: border-box;
+
+  @variant data-focus {
+    outline: 2px solid var(--ngp-focus-ring);
+    outline-offset: 2px;
+  }
+}
+
+@utility mgnp-combobox-input {
+  flex: 1;
+  padding: 0 16px;
+  border: none;
+  background-color: transparent;
+  color: var(--ngp-text);
+  font-family: inherit;
+  font-size: 14px;
+  outline: none;
+  height: auto;
+  width: auto;
+}
+
+@utility mgnp-combobox-button {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: auto;
+  width: auto;
+  background-color: transparent;
+  border: none;
+  color: var(--ngp-text);
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+@utility mgnp-combobox-dropdown {
+  background-color: var(--ngp-background);
+  border: 1px solid var(--ngp-border);
+  padding: 0.25rem;
+  border-radius: 0.75rem;
+  outline: none;
+  position: absolute;
+  animation: popover-show 0.1s ease-out;
+  width: var(--ngp-combobox-width);
+  min-width: fit-content;
+  box-shadow: var(--ngp-shadow-lg);
+  box-sizing: border-box;
+  margin-top: 4px;
+  max-height: 240px;
+  overflow-y: auto;
+  z-index: 1001;
+
+  @variant data-enter {
+    animation: combobox-show 0.1s ease-out;
+  }
+
+  @variant data-exit {
+    animation: combobox-hide 0.1s ease-out;
+  }
+}
+
+@utility mgnp-combobox-option {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.375rem 0.75rem;
+  cursor: pointer;
+  border-radius: 0.5rem;
+  width: 100%;
+  height: 36px;
+  font-size: 14px;
+  color: var(--ngp-text-primary);
+  box-sizing: border-box;
+
+  @variant data-hover {
+    background-color: var(--ngp-background-hover);
+  }
+
+  @variant data-press {
+    background-color: var(--ngp-background-active);
+  }
+
+  @variant data-active {
+    background-color: var(--ngp-background-active);
+  }
+
+  @variant data-disabled {
+    opacity: 50%;
+  }
+}
+
+@layer base {
+  [mgnpComboboxdata-mgnp-componentnent='mgnp-combobox'] {
+    @apply mgnp-combobox;
+  }
+
+  [mgnpComboboxInputdata-mgnp-componentnent='mgnp-combobox-input'] {
+    @apply mgnp-combobox-input;
+  }
+
+  [mgnpComboboxButtondata-mgnp-componentnent='mgnp-combobox-button'] {
+    @apply mgnp-combobox-button;
+  }
+
+  [mgnpComboboxDropdowndata-mgnp-componentnent='mgnp-combobox-dropdown'] {
+    @apply mgnp-combobox-dropdown;
+  }
+
+  [mgnpComboboxOptiondata-mgnp-componentnent='mgnp-combobox-option'] {
+    @apply mgnp-combobox-option;
+  }
+}
+
+@theme {
+  @keyframes combobox-show {
+    0% {
+      opacity: 0;
+      transform: translateY(-10px) scale(0.9);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+  }
+
+  @keyframes combobox-hide {
+    0% {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: translateY(-10px) scale(0.9);
+    }
+  }
+}

package/theme/components/input.css

@@ -0,0 +1,25 @@
+@utility mgnp-input {
+  height: 36px;
+  width: 100%;
+  border-radius: 8px;
+  padding: 0 16px;
+  border: none;
+  box-shadow: var(--ngp-input-shadow);
+  background-color: var(--ngp-background);
+  outline: none;
+
+  @variant data-focus {
+    outline: 2px solid var(--ngp-focus-ring);
+    outline-offset: 2px;
+  }
+
+  ::placeholder {
+    color: var(--ngp-text-placeholder);
+  }
+}
+
+@layer base {
+  [mgnpInputdata-mgnp-componentnt='mgnp-input'] {
+    @apply mgnp-input;
+  }
+}

package/theme/components/menu.css

@@ -0,0 +1,85 @@
+@utility mgnp-menu {
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  width: max-content;
+  background: var(--ngp-background);
+  border: 1px solid var(--ngp-border);
+  box-shadow: var(--ngp-shadow-lg);
+  border-radius: 8px;
+  padding: 4px;
+  transform-origin: var(--ngp-menu-transform-origin);
+
+  @variant data-enter {
+    animation: menu-show 0.1s ease-out;
+  }
+
+  @variant data-exit {
+    animation: menu-hide 0.1s ease-out;
+  }
+}
+
+@utility mgnp-menu-item {
+  padding: 6px 14px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  transition: background-color 0.2s;
+  border-radius: 4px;
+  min-width: 120px;
+  text-align: start;
+  outline: none;
+  font-size: 14px;
+  font-weight: 400;
+
+  @variant data-hover {
+    background-color: var(--ngp-background-hover);
+  }
+
+  @variant data-press {
+    background-color: var(--ngp-background-active);
+  }
+
+  @variant data-focus-visible {
+    outline: 2px solid var(--ngp-focus-ring);
+    z-index: 1;
+  }
+
+  @variant data-disabled {
+    opacity: 50%;
+  }
+}
+
+@layer base {
+  [mgnpMenudata-mgnp-componentnent='mgnp-menu'] {
+    @apply mgnp-menu;
+  }
+
+  [mgnpMenuItemdata-mgnp-componentnent='mgnp-menu-item'] {
+    @apply mgnp-menu-item;
+  }
+}
+
+@theme {
+  @keyframes menu-show {
+    0% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes menu-hide {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+}

package/theme/components/tooltip.css

@@ -0,0 +1,69 @@
+@utility mgnp-tooltip {
+  position: absolute;
+  max-width: 16rem;
+  border-radius: 0.5rem;
+  background-color: var(--ngp-background-inverse);
+  padding: 0.5rem 0.75rem;
+  border: none;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--ngp-text-inverse);
+  animation: tooltip-show 200ms ease-in-out;
+  transform-origin: var(--ngp-tooltip-transform-origin);
+
+  @variant data-exit {
+    animation: tooltip-hide 200ms ease-in-out;
+  }
+}
+
+@utility mgnp-tooltip-arrow {
+  position: absolute;
+  pointer-events: none;
+  background-color: var(--ngp-background-inverse);
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  transform: rotate(45deg);
+
+  @variant data-[placement="top"] {
+    top: calc(100% - 5px);
+  }
+
+  @variant data-[placement="bottom"] {
+    bottom: calc(100% - 5px);
+  }
+}
+
+@layer base {
+  [mgnpTooltipdata-mgnp-componentnent='mgnp-tooltip'] {
+    @apply mgnp-tooltip;
+  }
+
+  [mgnpTooltipArrowdata-mgnp-componentnent='mgnp-tooltip-arrow'] {
+    @apply mgnp-tooltip-arrow;
+  }
+}
+
+@theme {
+  @keyframes tooltip-show {
+    0% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+    100% {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes tooltip-hide {
+    0% {
+      opacity: 1;
+      transform: scale(1);
+    }
+    100% {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+}

package/theme/mgnp.css

@@ -0,0 +1,107 @@
+@import './ngp_tw.css';
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --bg-ui: var(--color-white);
+  --bg-secondary: var(--color-gray-300);
+  --bg-hover: var(--color-gray-50);
+  --bg-active: var(--color-gray-100);
+  --bg-inverse: var(--color-black);
+  --bg-disabled: var(--color-gray-100);
+  --bg-blue: var(--color-blue-200);
+  --bg-success: var(--color-lime-400);
+
+  --border-ui: var(--color-gray-300);
+  --border-secondary: var(--color-gray-200);
+  --border-blue: var(--color-blue-500);
+  --border-inverse: var(--color-black);
+
+  --text-ui: var(--color-black);
+  --text-active: var(--color-blue-400);
+  --text-emphasis: var(--color-black);
+  --text-primary: var(--color-gray-900);
+  --text-secondary: var(--color-gray-600);
+  --text-tertiary: var(--color-gray-500);
+  --text-disabled: var(--color-gray-400);
+  --text-placeholder: var(--color-gray-400);
+  --text-inverse: var(--color-white);
+  --text-blue: var(--color-blue-400);
+  --text-red: var(--color-red-500);
+
+  --shadow-ui: 0 1px 2px 0 rgba(0, 0, 0, 0.051);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.102), 0 4px 6px -4px rgba(0, 0, 0, 0.102);
+  --shadow-border: inset 0 0 0 1px rgba(0, 0, 0, 0.102);
+
+  --focus-ring-ui: rgb(59, 130, 246);
+
+  --avatar-background: rgb(186, 230, 253);
+  --avatar-border: rgb(255, 255, 255);
+
+  --button-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.102), 0 1px 2px -1px rgba(0, 0, 0, 0.102),
+    0 0 0 1px rgba(0, 0, 0, 0.051);
+
+  --input-shadow: 0 1px 2px rgba(0, 0, 0, 0.051), 0 0 0 1px rgba(0, 0, 0, 0.102);
+}
+
+@layer base {
+  html {
+    background-color: var(--bg-ui);
+    color: var(--text-ui);
+  }
+
+  @variant dark {
+    --bg-ui: var(--color-gray-950);
+    --bg-secondary: var(--color-gray-700);
+    --bg-hover: var(--color-gray-900);
+    --bg-active: var(--color-gray-800);
+    --bg-inverse: var(--color-white);
+    --bg-disabled: var(--color-gray-900);
+    --bg-blue: var(--color-blue-200);
+
+    --border-ui: var(--color-gray-800);
+    --border-secondary: var(--color-gray-700);
+    --border-blue: var(--color-blue-500);
+    --border-inverse: var(--color-white);
+
+    --text-ui: var(--color-white);
+    --text-active: var(--color-blue-600);
+    --text-emphasis: var(--color-white);
+    --text-primary: var(--color-gray-100);
+    --text-secondary: var(--color-gray-300);
+    --text-tertiary: var(--color-gray-400);
+    --text-disabled: var(--color-gray-500);
+    --text-inverse: var(--color-black);
+    --text-blue: var(--color-blue-600);
+    --text-red: var(--color-red-500);
+
+    --avatar-background: rgb(24, 24, 27);
+    --avatar-border: rgb(63, 63, 70);
+
+    --shadow-border: inset 0 0 0 1px rgba(255, 255, 255, 0.102);
+    --input-shadow: 0 1px 2px rgba(255, 255, 255, 0.008), 0 0 0 1px rgba(255, 255, 255, 0.1);
+
+    --button-shadow:
+      0 1px 3px 0 rgba(255, 255, 255, 0.102), 0 1px 2px -1px rgba(255, 255, 255, 0.102),
+      0 0 0 1px rgba(255, 255, 255, 0.051);
+  }
+}
+
+@utility bg-* {
+  background-color: --value([integer]);
+  background-color: --value(integer);
+  background-color: --value(--bg-*);
+}
+
+@utility border-* {
+  border-color: --value([integer]);
+  border-color: --value(integer);
+  border-color: --value(--border-*);
+}
+
+@utility text-* {
+  color: --value([integer]);
+  color: --value(integer);
+  color: --value(--text-*);
+}