arekui 1.0.2 → 2.0.0

package/src/base/pixel-overrides.css

@@ -0,0 +1,336 @@
+/* PIXEL-ART OVERRIDES */
+html[data-theme="pixel"] body {
+ font-family: var(--ar-font-mono);
+ image-rendering: pixelated;
+}
+
+html[data-theme="pixel"] .ar-btn {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-md);
+ font-family: var(--ar-font-mono);
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ transition:
+  box-shadow 0.1s step-end,
+  transform 0.1s step-end;
+}
+html[data-theme="pixel"] .ar-btn:hover {
+ box-shadow: var(--ar-pixel-shadow-sm);
+ transform: translate(2px, 2px);
+}
+html[data-theme="pixel"] .ar-btn:active {
+ box-shadow: none;
+ transform: translate(4px, 4px);
+}
+html[data-theme="pixel"] .ar-btn-primary {
+ background: var(--ar-pixel-primary);
+ color: var(--ar-pixel-primary-content);
+}
+html[data-theme="pixel"] .ar-btn-primary:hover {
+ background: var(--ar-pixel-primary);
+}
+html[data-theme="pixel"] .ar-btn-outline {
+ background: var(--ar-pixel-base-100);
+ border-color: var(--ar-pixel-border-color);
+ color: var(--ar-pixel-base-content);
+}
+html[data-theme="pixel"] .ar-btn-outline:hover {
+ background: var(--ar-pixel-base-content);
+ color: var(--ar-pixel-base-100);
+}
+html[data-theme="pixel"] .ar-btn-ghost {
+ background: transparent;
+ border-color: transparent;
+ box-shadow: none;
+}
+html[data-theme="pixel"] .ar-btn-ghost:hover {
+ background: var(--ar-pixel-base-200);
+ box-shadow: var(--ar-pixel-shadow-sm);
+}
+html[data-theme="pixel"] .ar-btn-neutral {
+ background: var(--ar-pixel-neutral);
+ color: var(--ar-pixel-neutral-content);
+}
+html[data-theme="pixel"] .ar-btn-circle {
+ border-radius: 0;
+}
+
+html[data-theme="pixel"] .ar-card {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-lg);
+ overflow: hidden;
+}
+
+html[data-theme="pixel"] .ar-badge {
+ border: 2px solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: 2px 2px 0px 0px var(--ar-pixel-border-color);
+ font-weight: 700;
+ text-transform: uppercase;
+}
+
+html[data-theme="pixel"] .ar-modal-box {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-xl);
+}
+
+html[data-theme="pixel"] .ar-alert {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-md);
+ font-weight: 600;
+}
+
+html[data-theme="pixel"] .ar-table th,
+html[data-theme="pixel"] .ar-table td {
+ border: 2px solid var(--ar-pixel-border-color);
+}
+html[data-theme="pixel"] .ar-table th {
+ background: var(--ar-pixel-base-200);
+ font-weight: 700;
+ text-transform: uppercase;
+}
+
+html[data-theme="pixel"] .ar-tabs {
+ border-bottom: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+}
+html[data-theme="pixel"] .ar-tab {
+ border: 2px solid transparent;
+ border-bottom: 0;
+ border-radius: 0;
+ font-weight: 700;
+ font-family: var(--ar-font-mono);
+ text-transform: uppercase;
+}
+html[data-theme="pixel"] .ar-tab-active {
+ border-color: var(--ar-pixel-border-color);
+ background: var(--ar-pixel-base-100);
+ color: var(--ar-pixel-primary);
+}
+
+html[data-theme="pixel"] .ar-accordion {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-md);
+}
+html[data-theme="pixel"] .ar-accordion details {
+ border-top: 2px solid var(--ar-pixel-border-color);
+}
+html[data-theme="pixel"] .ar-accordion details:first-child {
+ border-top: 0;
+}
+
+html[data-theme="pixel"] .ar-progress {
+ border: 2px solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ overflow: hidden;
+}
+html[data-theme="pixel"] .ar-progress::-webkit-progress-value {
+ background: var(--ar-pixel-primary);
+}
+
+html[data-theme="pixel"] .ar-toast {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-lg);
+ font-weight: 600;
+}
+
+html[data-theme="pixel"] .ar-tag {
+ border: 2px solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: 2px 2px 0px 0px var(--ar-pixel-border-color);
+ font-weight: 600;
+}
+
+html[data-theme="pixel"] .ar-chat-bubble {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-sm);
+}
+html[data-theme="pixel"] .ar-chat-end .ar-chat-bubble {
+ background: var(--ar-pixel-primary);
+ color: var(--ar-pixel-primary-content);
+ border-color: var(--ar-pixel-border-color);
+}
+
+html[data-theme="pixel"] .ar-dropdown-content {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-lg);
+}
+
+html[data-theme="pixel"] .ar-popover-content {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-lg);
+}
+
+html[data-theme="pixel"] .ar-tooltip[data-tip]::after {
+ border: 2px solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: 2px 2px 0px 0px var(--ar-pixel-border-color);
+ font-weight: 600;
+}
+
+html[data-theme="pixel"] .ar-input,
+html[data-theme="pixel"] .ar-select,
+html[data-theme="pixel"] .ar-textarea {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-sm);
+ font-family: var(--ar-font-mono);
+ transition:
+  box-shadow 0.1s step-end,
+  border-color 0.1s step-end;
+}
+html[data-theme="pixel"] .ar-input:focus,
+html[data-theme="pixel"] .ar-select:focus,
+html[data-theme="pixel"] .ar-textarea:focus {
+ border-color: var(--ar-pixel-primary);
+ box-shadow: var(--ar-pixel-shadow-md);
+ outline: 0;
+}
+
+html[data-theme="pixel"] .ar-toggle {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-sm);
+ transition: background 0.1s step-end;
+}
+html[data-theme="pixel"] .ar-toggle::after {
+ top: 0.125rem;
+ left: 0.125rem;
+ width: 1rem;
+ height: 1rem;
+ border-radius: 0;
+ transition: transform 0.1s step-end;
+}
+
+html[data-theme="pixel"] .ar-page-item {
+ border: 2px solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ font-weight: 700;
+ box-shadow: 2px 2px 0px 0px var(--ar-pixel-border-color);
+ transition:
+  box-shadow 0.1s step-end,
+  transform 0.1s step-end;
+}
+html[data-theme="pixel"] .ar-page-item:hover {
+ box-shadow: 1px 1px 0px 0px var(--ar-pixel-border-color);
+ transform: translate(1px, 1px);
+}
+html[data-theme="pixel"] .ar-page-active {
+ background: var(--ar-pixel-primary);
+ color: var(--ar-pixel-primary-content);
+ border-color: var(--ar-pixel-border-color);
+}
+
+html[data-theme="pixel"] .ar-step::before {
+ border: 2px solid var(--ar-pixel-border-color);
+ box-shadow: 2px 2px 0px 0px var(--ar-pixel-border-color);
+}
+
+html[data-theme="pixel"] .ar-navbar {
+ border-bottom: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ background: var(--ar-pixel-base-100);
+}
+
+html[data-theme="pixel"] .ar-footer {
+ border-top: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+}
+
+html[data-theme="pixel"] .ar-hero {
+ background: var(--ar-pixel-base-200);
+}
+
+html[data-theme="pixel"] .ar-scroll-top {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-md);
+}
+html[data-theme="pixel"] .ar-scroll-top:hover {
+ box-shadow: var(--ar-pixel-shadow-sm);
+ transform: translate(2px, 2px);
+}
+
+html[data-theme="pixel"] .ar-sidebar-panel > .ar-menu {
+ border-right: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+}
+html[data-theme="pixel"] .ar-sidebar-panel-end > .ar-menu {
+ border-right: 0;
+ border-left: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+}
+
+html[data-theme="pixel"] .ar-skeleton {
+ border: 2px solid var(--ar-pixel-border-color);
+}
+
+html[data-theme="pixel"] .ar-breadcrumb-item:not(:last-child)::after {
+ color: var(--ar-pixel-gray-400);
+}
+
+html[data-theme="pixel"] .ar-file-upload {
+ border: 3px dashed var(--ar-pixel-border-color);
+ border-radius: 0;
+ transition: all 0.1s step-end;
+}
+html[data-theme="pixel"] .ar-file-upload:hover {
+ border-color: var(--ar-pixel-primary);
+ background: rgb(74 144 217 / 0.1);
+ transform: scale(1.02);
+}
+html[data-theme="pixel"] .ar-file-upload.ar-file-upload-dragover {
+ border-color: var(--ar-pixel-primary);
+ background: rgb(74 144 217 / 0.1);
+ transform: scale(1.02);
+}
+
+html[data-theme="pixel"] .ar-prose pre {
+ border: 2px solid var(--ar-pixel-border-color);
+ border-radius: 0;
+ box-shadow: var(--ar-pixel-shadow-sm);
+}
+html[data-theme="pixel"] .ar-prose code {
+ border: 1px solid var(--ar-pixel-border-color);
+}
+html[data-theme="pixel"] .ar-prose th {
+ border: 2px solid var(--ar-pixel-border-color);
+}
+html[data-theme="pixel"] .ar-prose td {
+ border: 2px solid var(--ar-pixel-border-color);
+}
+html[data-theme="pixel"] .ar-prose blockquote {
+ border-left: 4px solid var(--ar-pixel-primary);
+}
+
+html[data-theme="pixel"] .ar-empty-icon {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ box-shadow: var(--ar-pixel-shadow-sm);
+}
+html[data-theme="pixel"] .ar-segmented {
+ border: var(--ar-pixel-border-width) solid var(--ar-pixel-border-color);
+ box-shadow: var(--ar-pixel-shadow-sm);
+}
+html[data-theme="pixel"] .ar-segmented-input:checked + .ar-segmented-item {
+ box-shadow: var(--ar-pixel-shadow-sm);
+}
+html[data-theme="pixel"] .ar-kbd {
+ border-color: var(--ar-pixel-border-color);
+ box-shadow: var(--ar-pixel-shadow-sm);
+}
+@media (min-width: 480px) {
+ html[data-theme="pixel"] .ar-dt {
+  border-bottom-color: var(--ar-pixel-border-color);
+ }
+}
+html[data-theme="pixel"] .ar-dd {
+ border-bottom-color: var(--ar-pixel-border-color);
+}
+html[data-theme="pixel"] .ar-dl > :nth-last-child(-n + 2) {
+ border-bottom: 0;
+}

package/src/base/reset.css

@@ -1,4 +1,4 @@
-/* BASE / RESET */
+/* BASE / RESET */
 *,
 *::before,
 *::after {
@@ -29,7 +29,7 @@ p {
 }
 
 a {
- color: var(--ar-primary);
+ color: var(--ar-primary-text);
  text-decoration: none;
 }
 
@@ -62,6 +62,120 @@ code {
  outline-offset: 2px;
 }
 
-.ar-scroll-smooth {
- scroll-behavior: smooth;
+@media (prefers-reduced-motion: no-preference) {
+ .ar-scroll-smooth {
+  scroll-behavior: smooth;
+ }
 }
+
+* {
+ scrollbar-width: thin;
+ scrollbar-color: var(--ar-gray-400) var(--ar-base-200);
+}
+
+::-webkit-scrollbar {
+ width: 10px;
+ height: 10px;
+}
+
+::-webkit-scrollbar-button {
+ display: none;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--ar-base-200);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--ar-gray-400);
+ border: 2px solid var(--ar-base-200);
+ border-radius: var(--ar-radius-field);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--ar-gray-600);
+}
+
+::-webkit-scrollbar-corner {
+ background: var(--ar-base-200);
+}
+
+html[data-theme="neo"],
+html[data-theme="neo"] * {
+ scrollbar-color: var(--ar-neo-border-color) var(--ar-neo-base-200);
+}
+
+html[data-theme="neo"] ::-webkit-scrollbar-track,
+html[data-theme="neo"]::-webkit-scrollbar-track {
+ background: var(--ar-neo-base-200);
+}
+
+html[data-theme="neo"] ::-webkit-scrollbar-thumb,
+html[data-theme="neo"]::-webkit-scrollbar-thumb {
+ background: var(--ar-neo-gray-300);
+ border-color: var(--ar-neo-border-color);
+}
+
+html[data-theme="neo"] ::-webkit-scrollbar-thumb:hover,
+html[data-theme="neo"]::-webkit-scrollbar-thumb:hover {
+ background: var(--ar-neo-gray-400);
+}
+
+html[data-theme="neo"] ::-webkit-scrollbar-corner,
+html[data-theme="neo"]::-webkit-scrollbar-corner {
+ background: var(--ar-neo-base-200);
+}
+
+html[data-theme="pixel"],
+html[data-theme="pixel"] * {
+ scrollbar-color: var(--ar-pixel-gray-500) var(--ar-pixel-base-200);
+}
+
+html[data-theme="pixel"] ::-webkit-scrollbar-track,
+html[data-theme="pixel"]::-webkit-scrollbar-track {
+ background: var(--ar-pixel-base-200);
+}
+
+html[data-theme="pixel"] ::-webkit-scrollbar-thumb,
+html[data-theme="pixel"]::-webkit-scrollbar-thumb {
+ background: var(--ar-pixel-gray-300);
+ border-color: var(--ar-pixel-border-color);
+ border-radius: 0;
+}
+
+html[data-theme="pixel"] ::-webkit-scrollbar-thumb:hover,
+html[data-theme="pixel"]::-webkit-scrollbar-thumb:hover {
+ background: var(--ar-pixel-gray-400);
+}
+
+html[data-theme="pixel"] ::-webkit-scrollbar-corner,
+html[data-theme="pixel"]::-webkit-scrollbar-corner {
+ background: var(--ar-pixel-base-200);
+}
+
+html[data-theme="brutalist"],
+html[data-theme="brutalist"] * {
+ scrollbar-color: var(--ar-brutalist-gray-900) var(--ar-brutalist-base-200);
+}
+
+html[data-theme="brutalist"] ::-webkit-scrollbar-track,
+html[data-theme="brutalist"]::-webkit-scrollbar-track {
+ background: var(--ar-brutalist-base-200);
+}
+
+html[data-theme="brutalist"] ::-webkit-scrollbar-thumb,
+html[data-theme="brutalist"]::-webkit-scrollbar-thumb {
+ background: var(--ar-brutalist-gray-900);
+ border-color: var(--ar-brutalist-border-color);
+ border-radius: 0;
+}
+
+html[data-theme="brutalist"] ::-webkit-scrollbar-thumb:hover,
+html[data-theme="brutalist"]::-webkit-scrollbar-thumb:hover {
+ background: var(--ar-brutalist-gray-700);
+}
+
+html[data-theme="brutalist"] ::-webkit-scrollbar-corner,
+html[data-theme="brutalist"]::-webkit-scrollbar-corner {
+ background: var(--ar-brutalist-base-200);
+}

package/src/base/theme-brutalist.css

@@ -0,0 +1,111 @@
+:root {
+ --ar-brutalist-base-100: #f1efe9;
+ --ar-brutalist-base-200: #e7e5dc;
+ --ar-brutalist-base-300: #d6d3c8;
+ --ar-brutalist-base-content: #0a0a0a;
+ --ar-brutalist-base-content-80: rgb(10 10 10 / 0.8);
+ --ar-brutalist-primary: #0a0a0a;
+ --ar-brutalist-primary-text: var(--ar-brutalist-primary);
+ --ar-brutalist-primary-content: #f1efe9;
+ --ar-brutalist-secondary: #e7e5dc;
+ --ar-brutalist-secondary-text: var(--ar-brutalist-secondary-content);
+ --ar-brutalist-secondary-content: #0a0a0a;
+ --ar-brutalist-accent: #ea580c;
+ --ar-brutalist-accent-text: #b03e0a;
+ --ar-brutalist-accent-content: #ffffff;
+ --ar-brutalist-neutral: #1c1b17;
+ --ar-brutalist-neutral-text: var(--ar-brutalist-neutral);
+ --ar-brutalist-neutral-content: #f1efe9;
+ --ar-brutalist-info: #2563eb;
+ --ar-brutalist-info-text: #1e40af;
+ --ar-brutalist-info-content: #ffffff;
+ --ar-brutalist-success: #16a34a;
+ --ar-brutalist-success-text: #136f38;
+ --ar-brutalist-success-content: #ffffff;
+ --ar-brutalist-warning: #d97706;
+ --ar-brutalist-warning-text: #a04a08;
+ --ar-brutalist-warning-content: #ffffff;
+ --ar-brutalist-error: #dc2626;
+ --ar-brutalist-error-text: #b91c1c;
+ --ar-brutalist-error-content: #ffffff;
+ --ar-brutalist-bg-img-fill: rgb(10 10 10 / 0.06);
+ --ar-brutalist-desc-grad: linear-gradient(to left, #f1efe9 50%, #0a0a0a 50%) right;
+ --ar-brutalist-arc: #d6d3c8;
+ --ar-brutalist-gray-50: #faf9f4;
+ --ar-brutalist-gray-100: #f1efe9;
+ --ar-brutalist-gray-200: #e7e5dc;
+ --ar-brutalist-gray-300: #d6d3c8;
+ --ar-brutalist-gray-400: #a8a49a;
+ --ar-brutalist-gray-500: #7c786e;
+ --ar-brutalist-gray-600: #56534b;
+ --ar-brutalist-gray-700: #3a3833;
+ --ar-brutalist-gray-800: #23221d;
+ --ar-brutalist-gray-900: #0a0a0a;
+
+ --ar-brutalist-border-width: 1px;
+ --ar-brutalist-border-color: #0a0a0a;
+ --ar-brutalist-shadow-sm: none;
+ --ar-brutalist-shadow-md: none;
+ --ar-brutalist-shadow-lg: none;
+ --ar-brutalist-shadow-xl: none;
+ --ar-brutalist-shadow-2xl: none;
+ --ar-brutalist-radius: 0;
+}
+
+html[data-theme="brutalist"] {
+ color-scheme: light;
+ --ar-base-100: var(--ar-brutalist-base-100);
+ --ar-base-200: var(--ar-brutalist-base-200);
+ --ar-base-300: var(--ar-brutalist-base-300);
+ --ar-base-content: var(--ar-brutalist-base-content);
+ --ar-base-content-80: var(--ar-brutalist-base-content-80);
+ --ar-primary: var(--ar-brutalist-primary);
+ --ar-primary-text: var(--ar-brutalist-primary-text);
+ --ar-primary-content: var(--ar-brutalist-primary-content);
+ --ar-secondary: var(--ar-brutalist-secondary);
+ --ar-secondary-text: var(--ar-brutalist-secondary-text);
+ --ar-secondary-content: var(--ar-brutalist-secondary-content);
+ --ar-accent: var(--ar-brutalist-accent);
+ --ar-accent-text: var(--ar-brutalist-accent-text);
+ --ar-accent-content: var(--ar-brutalist-accent-content);
+ --ar-neutral: var(--ar-brutalist-neutral);
+ --ar-neutral-text: var(--ar-brutalist-neutral-text);
+ --ar-neutral-content: var(--ar-brutalist-neutral-content);
+ --ar-info: var(--ar-brutalist-info);
+ --ar-info-text: var(--ar-brutalist-info-text);
+ --ar-info-content: var(--ar-brutalist-info-content);
+ --ar-success: var(--ar-brutalist-success);
+ --ar-success-text: var(--ar-brutalist-success-text);
+ --ar-success-content: var(--ar-brutalist-success-content);
+ --ar-warning: var(--ar-brutalist-warning);
+ --ar-warning-text: var(--ar-brutalist-warning-text);
+ --ar-warning-content: var(--ar-brutalist-warning-content);
+ --ar-error: var(--ar-brutalist-error);
+ --ar-error-text: var(--ar-brutalist-error-text);
+ --ar-error-content: var(--ar-brutalist-error-content);
+ --ar-bg-img-fill: var(--ar-brutalist-bg-img-fill);
+ --ar-desc-grad: var(--ar-brutalist-desc-grad);
+ --ar-arc: var(--ar-brutalist-arc);
+ --ar-gray-50: var(--ar-brutalist-gray-50);
+ --ar-gray-100: var(--ar-brutalist-gray-100);
+ --ar-gray-200: var(--ar-brutalist-gray-200);
+ --ar-gray-300: var(--ar-brutalist-gray-300);
+ --ar-gray-400: var(--ar-brutalist-gray-400);
+ --ar-gray-500: var(--ar-brutalist-gray-500);
+ --ar-gray-600: var(--ar-brutalist-gray-600);
+ --ar-gray-700: var(--ar-brutalist-gray-700);
+ --ar-gray-800: var(--ar-brutalist-gray-800);
+ --ar-gray-900: var(--ar-brutalist-gray-900);
+
+ --ar-border-width: var(--ar-brutalist-border-width);
+ --ar-radius-field: var(--ar-brutalist-radius);
+ --ar-radius-box: var(--ar-brutalist-radius);
+ --ar-radius-selector: var(--ar-brutalist-radius);
+ --ar-radius-pill: var(--ar-brutalist-radius);
+ --ar-shadow-sm: var(--ar-brutalist-shadow-sm);
+ --ar-shadow-md: var(--ar-brutalist-shadow-md);
+ --ar-shadow-lg: var(--ar-brutalist-shadow-lg);
+ --ar-shadow-xl: var(--ar-brutalist-shadow-xl);
+ --ar-shadow-2xl: var(--ar-brutalist-shadow-2xl);
+ --ar-base-font: var(--ar-font-mono);
+}