arekui 1.0.0

package/src/utilities/borders.css

@@ -0,0 +1,152 @@
+/* UTILITIES — border, radius, shadow, position, misc */
+.ar-border {
+ border: var(--ar-border-width) solid;
+}
+.ar-border-2 {
+ border: 2px solid;
+}
+.ar-border-t {
+ border-top: var(--ar-border-width) solid;
+}
+.ar-border-t-0 {
+ border-top: 0;
+}
+.ar-border-b {
+ border-bottom: var(--ar-border-width) solid;
+}
+.ar-border-base-content {
+ border-color: var(--ar-base-content);
+}
+.ar-border-neutral {
+ border-color: var(--ar-neutral);
+}
+.ar-border-gray-200 {
+ border-color: var(--ar-gray-200);
+}
+.ar-border-gray-300 {
+ border-color: var(--ar-gray-300);
+}
+.ar-border-base-300 {
+ border-color: var(--ar-base-300);
+}
+.ar-rounded {
+ border-radius: var(--ar-radius-field);
+}
+.ar-rounded-lg {
+ border-radius: var(--ar-radius-box);
+}
+.ar-rounded-xl {
+ border-radius: 0.75rem;
+}
+.ar-rounded-box {
+ border-radius: var(--ar-radius-box);
+}
+.ar-rounded-full {
+ border-radius: var(--ar-radius-pill);
+}
+.ar-shadow-sm {
+ box-shadow: var(--ar-shadow-sm);
+}
+.ar-shadow-md {
+ box-shadow: var(--ar-shadow-md);
+}
+.ar-shadow-lg {
+ box-shadow: var(--ar-shadow-lg);
+}
+.ar-shadow-xl {
+ box-shadow: var(--ar-shadow-xl);
+}
+.ar-shadow-2xl {
+ box-shadow: var(--ar-shadow-2xl);
+}
+.ar-relative {
+ position: relative;
+}
+.ar-absolute {
+ position: absolute;
+}
+.ar-fixed {
+ position: fixed;
+}
+.ar-sticky {
+ position: sticky;
+ top: 0;
+ z-index: 50;
+}
+.ar-inset-0 {
+ inset: 0;
+}
+.ar-top-0 {
+ top: 0;
+}
+.ar-bottom-0 {
+ bottom: 0;
+}
+.ar-left-0 {
+ left: 0;
+}
+.ar-right-0 {
+ right: 0;
+}
+.ar-top-1\/2 {
+ top: 50%;
+}
+.ar-left-5 {
+ left: 1.25rem;
+}
+.ar-right-5 {
+ right: 1.25rem;
+}
+.ar-z-10 {
+ z-index: 10;
+}
+.ar-z-20 {
+ z-index: 20;
+}
+.ar-z-50 {
+ z-index: 50;
+}
+.ar-opacity-0 {
+ opacity: 0;
+}
+.ar-opacity-30 {
+ opacity: 0.3;
+}
+.ar-opacity-60 {
+ opacity: 0.6;
+}
+.ar-transition-all {
+ transition: all 0.3s ease;
+}
+.ar-transition-transform {
+ transition: transform 0.3s ease;
+}
+.ar-duration-300 {
+ transition-duration: 0.3s;
+}
+.ar-duration-500 {
+ transition-duration: 0.5s;
+}
+.ar-ease-out {
+ transition-timing-function: ease-out;
+}
+.ar-ease-in-out {
+ transition-timing-function: ease-in-out;
+}
+.ar-cursor-pointer {
+ cursor: pointer;
+}
+.ar-whitespace-nowrap {
+ white-space: nowrap;
+}
+.ar-sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ margin: -1px;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ border: 0;
+}

package/src/utilities/colors.css

@@ -0,0 +1,73 @@
+/* UTILITIES — colors */
+.ar-bg-base-100 {
+ background: var(--ar-base-100);
+}
+.ar-bg-base-200 {
+ background: var(--ar-base-200);
+}
+.ar-bg-base-300 {
+ background: var(--ar-base-300);
+}
+.ar-bg-base-content {
+ background: var(--ar-base-content);
+}
+.ar-bg-base-content\/80 {
+ background: var(--ar-base-content-80);
+}
+.ar-bg-neutral {
+ background: var(--ar-neutral);
+}
+.ar-bg-primary {
+ background: var(--ar-primary);
+}
+.ar-bg-gray-100 {
+ background: var(--ar-gray-100);
+}
+.ar-bg-gray-200 {
+ background: var(--ar-gray-200);
+}
+.ar-bg-gray-700 {
+ background: var(--ar-gray-700);
+}
+.ar-text-base-content {
+ color: var(--ar-base-content);
+}
+.ar-text-primary {
+ color: var(--ar-primary);
+}
+.ar-text-primary-content {
+ color: var(--ar-primary-content);
+}
+.ar-text-neutral {
+ color: var(--ar-neutral);
+}
+.ar-text-neutral-content {
+ color: var(--ar-neutral-content);
+}
+.ar-text-white {
+ color: #ffffff;
+}
+.ar-text-black {
+ color: #000000;
+}
+.ar-text-gray-100 {
+ color: var(--ar-gray-100);
+}
+.ar-text-gray-200 {
+ color: var(--ar-gray-200);
+}
+.ar-text-gray-300 {
+ color: var(--ar-gray-300);
+}
+.ar-text-gray-400 {
+ color: var(--ar-gray-400);
+}
+.ar-text-gray-500 {
+ color: var(--ar-gray-500);
+}
+.ar-text-gray-600 {
+ color: var(--ar-gray-600);
+}
+.ar-text-gray-700 {
+ color: var(--ar-gray-700);
+}

package/src/utilities/hover.css

@@ -0,0 +1,33 @@
+/* UTILITIES — hover states */
+.ar-hover-bounce:hover {
+ animation: ar-bounce 1s infinite;
+}
+.ar-hover-scale-110:hover {
+ transform: scale(1.1);
+}
+.ar-hover-shadow-xl:hover {
+ box-shadow: var(--ar-shadow-xl);
+}
+.ar-hover-text-gray-600:hover {
+ color: var(--ar-gray-600);
+}
+.ar-hover-text-neutral:hover {
+ color: var(--ar-neutral);
+}
+.ar-hover-bg-gray-100:hover {
+ background: var(--ar-gray-100);
+}
+.ar-hover-bg-gray-700:hover {
+ background: var(--ar-gray-700);
+}
+.ar-hover-border-gray-400:hover {
+ border-color: var(--ar-gray-400);
+}
+.ar-hover-ring:hover {
+ box-shadow: 0 0 0 1px var(--ar-gray-400);
+ border-color: var(--ar-gray-400);
+}
+.ar-hover-ring-gray-200:hover {
+ box-shadow: 0 0 0 1px var(--ar-gray-200);
+ border-color: var(--ar-gray-400);
+}

package/src/utilities/layout.css

@@ -0,0 +1,100 @@
+/* UTILITIES — layout & flex & grid */
+.ar-flex {
+ display: flex;
+}
+.ar-inline-flex {
+ display: inline-flex;
+}
+.ar-grid {
+ display: grid;
+}
+.ar-block {
+ display: block;
+}
+.ar-inline-block {
+ display: inline-block;
+}
+.ar-hidden {
+ display: none;
+}
+.ar-flex-col {
+ flex-direction: column;
+}
+.ar-flex-row {
+ flex-direction: row;
+}
+.ar-flex-wrap {
+ flex-wrap: wrap;
+}
+.ar-flex-1 {
+ flex: 1 1 0%;
+}
+.ar-shrink-0 {
+ flex-shrink: 0;
+}
+.ar-items-start {
+ align-items: flex-start;
+}
+.ar-items-center {
+ align-items: center;
+}
+.ar-items-end {
+ align-items: flex-end;
+}
+.ar-justify-start {
+ justify-content: flex-start;
+}
+.ar-justify-center {
+ justify-content: center;
+}
+.ar-justify-between {
+ justify-content: space-between;
+}
+.ar-justify-end {
+ justify-content: flex-end;
+}
+.ar-grid-cols-1 {
+ grid-template-columns: repeat(1, minmax(0, 1fr));
+}
+.ar-grid-cols-2 {
+ grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+.ar-grid-cols-3 {
+ grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+.ar-grid-cols-4 {
+ grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+.ar-grid-flow-col {
+ grid-auto-flow: column;
+}
+.ar-gap-1 {
+ gap: var(--ar-s-1);
+}
+.ar-gap-2 {
+ gap: var(--ar-s-2);
+}
+.ar-gap-3 {
+ gap: var(--ar-s-3);
+}
+.ar-gap-4 {
+ gap: var(--ar-s-4);
+}
+.ar-gap-6 {
+ gap: var(--ar-s-6);
+}
+.ar-gap-x-2 {
+ column-gap: var(--ar-s-2);
+}
+.ar-gap-x-4 {
+ column-gap: var(--ar-s-4);
+}
+.ar-gap-x-8 {
+ column-gap: var(--ar-s-8);
+}
+.ar-gap-y-8 {
+ row-gap: var(--ar-s-8);
+}
+.ar-gap-y-16 {
+ row-gap: var(--ar-s-16);
+}

package/src/utilities/neo-utilities.css

@@ -0,0 +1,95 @@
+/* NEOBRUTALISM UTILITIES */
+/* Hard shadows */
+.ar-neo-shadow-sm {
+ box-shadow: var(--ar-neo-shadow-sm);
+}
+.ar-neo-shadow-md {
+ box-shadow: var(--ar-neo-shadow-md);
+}
+.ar-neo-shadow-lg {
+ box-shadow: var(--ar-neo-shadow-lg);
+}
+.ar-neo-shadow-xl {
+ box-shadow: var(--ar-neo-shadow-xl);
+}
+.ar-neo-shadow-2xl {
+ box-shadow: var(--ar-neo-shadow-2xl);
+}
+
+/* Thick borders */
+.ar-neo-border {
+ border: var(--ar-neo-border-width) solid var(--ar-neo-border-color);
+}
+.ar-neo-border-2 {
+ border: 2px solid var(--ar-neo-border-color);
+}
+
+/* Border radius */
+.ar-neo-rounded {
+ border-radius: 0.5rem;
+}
+.ar-neo-rounded-lg {
+ border-radius: 0.75rem;
+}
+.ar-neo-rounded-xl {
+ border-radius: 1rem;
+}
+
+/* Interactive press effect */
+.ar-neo-press {
+ transition:
+  box-shadow 0.15s ease-out,
+  transform 0.15s ease-out;
+}
+.ar-neo-press:hover {
+ box-shadow: var(--ar-neo-shadow-sm);
+ transform: translate(2px, 2px);
+}
+.ar-neo-press:active {
+ box-shadow: none;
+ transform: translate(4px, 4px);
+}
+
+/* Neo color accents */
+.ar-neo-primary {
+ background: var(--ar-neo-primary);
+ color: var(--ar-neo-primary-content);
+}
+.ar-neo-secondary {
+ background: var(--ar-neo-secondary);
+ color: var(--ar-neo-secondary-content);
+}
+.ar-neo-accent {
+ background: var(--ar-neo-accent);
+ color: var(--ar-neo-accent-content);
+}
+.ar-neo-danger {
+ background: var(--ar-neo-error);
+ color: var(--ar-neo-error-content);
+}
+
+/* Neo text colors */
+.ar-neo-text-primary {
+ color: var(--ar-neo-primary);
+}
+.ar-neo-text-secondary {
+ color: var(--ar-neo-secondary);
+}
+.ar-neo-text-accent {
+ color: var(--ar-neo-accent);
+}
+.ar-neo-text-danger {
+ color: var(--ar-neo-error);
+}
+.ar-neo-text-dark {
+ color: var(--ar-neo-base-content);
+}
+
+/* Playful hover animations */
+.ar-neo-hover-tilt:hover {
+ transform: rotate(-1deg);
+}
+.ar-neo-hover-lift:hover {
+ transform: translateY(-2px);
+ box-shadow: var(--ar-neo-shadow-lg);
+}

package/src/utilities/responsive.css

@@ -0,0 +1,128 @@
+/* UTILITIES — responsive */
+@media (min-width: 768px) {
+ .ar-md\:flex {
+  display: flex;
+ }
+ .ar-md\:flex-col {
+  flex-direction: column;
+ }
+ .ar-md\:flex-row {
+  flex-direction: row;
+ }
+ .ar-md\:hidden {
+  display: none;
+ }
+ .ar-md\:grid {
+  display: grid;
+ }
+ .ar-md\:grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+ .ar-md\:items-center {
+  align-items: center;
+ }
+ .ar-md\:w-1\/2 {
+  width: 50%;
+ }
+ .ar-md\:w-1\/3 {
+  width: 33.333333%;
+ }
+ .ar-md\:w-2\/3 {
+  width: 66.666667%;
+ }
+ .ar-md\:max-w-52 {
+  max-width: 13rem;
+ }
+ .ar-md\:p-8 {
+  padding: var(--ar-s-8);
+ }
+ .ar-md\:mx-0 {
+  margin-inline: 0;
+ }
+ .ar-md\:text-left {
+  text-align: left;
+ }
+ .ar-md\:text-center {
+  text-align: center;
+ }
+}
+@media (min-width: 1024px) {
+ .ar-lg\:flex {
+  display: flex;
+ }
+ .ar-lg\:flex-col {
+  flex-direction: column;
+ }
+ .ar-lg\:flex-row {
+  flex-direction: row;
+ }
+ .ar-lg\:hidden {
+  display: none;
+ }
+ .ar-lg\:grid {
+  display: grid;
+ }
+ .ar-lg\:grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+ }
+ .ar-lg\:grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+ }
+ .ar-lg\:grid-cols-4 {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+ }
+ .ar-lg\:items-center {
+  align-items: center;
+ }
+ .ar-lg\:justify-between {
+  justify-content: space-between;
+ }
+ .ar-lg\:gap-8 {
+  gap: var(--ar-s-8);
+ }
+ .ar-lg\:w-1\/2 {
+  width: 50%;
+ }
+ .ar-lg\:w-2\/5 {
+  width: 40%;
+ }
+ .ar-lg\:max-w-none {
+  max-width: none;
+ }
+ .ar-lg\:max-w-lg {
+  max-width: 32rem;
+ }
+ .ar-lg\:p-8 {
+  padding: var(--ar-s-8);
+ }
+ .ar-lg\:p-16 {
+  padding: var(--ar-s-16);
+ }
+ .ar-lg\:mx-0 {
+  margin-inline: 0;
+ }
+ .ar-lg\:text-2xl {
+  font-size: 1.5rem;
+ }
+ .ar-lg\:text-4xl {
+  font-size: 2.25rem;
+ }
+ .ar-lg\:text-6xl {
+  font-size: 3.75rem;
+ }
+ .ar-lg\:text-8xl {
+  font-size: 6rem;
+ }
+ .ar-lg\:text-9xl {
+  font-size: 8rem;
+ }
+ .ar-lg\:leading-tight {
+  line-height: 1.25;
+ }
+ .ar-lg\:text-left {
+  text-align: left;
+ }
+ .ar-lg\:text-center {
+  text-align: center;
+ }
+}

package/src/utilities/sizing.css

@@ -0,0 +1,91 @@
+/* UTILITIES — sizing */
+.ar-w-8 {
+ width: var(--ar-s-8);
+}
+.ar-w-40 {
+ width: var(--ar-s-40, 10rem);
+}
+.ar-w-48 {
+ width: var(--ar-s-48, 12rem);
+}
+.ar-w-60 {
+ width: 15rem;
+}
+.ar-w-80 {
+ width: 20rem;
+}
+.ar-w-full {
+ width: 100%;
+}
+.ar-w-1\/3 {
+ width: 33.333333%;
+}
+.ar-w-2\/3 {
+ width: 66.666667%;
+}
+.ar-w-1\/2 {
+ width: 50%;
+}
+.ar-w-11\/12 {
+ width: 91.666667%;
+}
+.ar-h-8 {
+ height: var(--ar-s-8);
+}
+.ar-h-48 {
+ height: 12rem;
+}
+.ar-h-full {
+ height: 100%;
+}
+.ar-min-h-full {
+ min-height: 100%;
+}
+.ar-min-h-screen {
+ min-height: 100vh;
+}
+.ar-max-w-none {
+ max-width: none;
+}
+.ar-max-w-sm {
+ max-width: 24rem;
+}
+.ar-max-w-md {
+ max-width: 28rem;
+}
+.ar-max-w-lg {
+ max-width: 32rem;
+}
+.ar-max-w-xl {
+ max-width: 36rem;
+}
+.ar-max-w-2xl {
+ max-width: 42rem;
+}
+.ar-max-w-3xl {
+ max-width: 48rem;
+}
+.ar-max-w-4xl {
+ max-width: 56rem;
+}
+.ar-max-w-5xl {
+ max-width: 64rem;
+}
+.ar-max-w-6xl {
+ max-width: 72rem;
+}
+.ar-max-w-7xl {
+ max-width: 80rem;
+}
+.ar-aspect-video {
+ aspect-ratio: 16 / 9;
+}
+.ar-object-cover {
+ object-fit: cover;
+}
+.ar-overflow-hidden {
+ overflow: hidden;
+}
+.ar-overflow-x-auto {
+ overflow-x: auto;
+}