zenkit-css 1.4.0 → 1.4.1

package/dist/zenkit.css

@@ -37614,6 +37614,329 @@ mark {
   padding: 1.25rem;
 }
 
+.box {
+  display: block;
+}
+
+.box-flex {
+  display: flex;
+}
+
+.box-inline {
+  display: inline-block;
+}
+
+.box-inline-flex {
+  display: inline-flex;
+}
+
+.box-grid {
+  display: grid;
+}
+
+.box-p-0 {
+  padding: 0;
+}
+
+.box-p-1 {
+  padding: var(--space-1);
+}
+
+.box-p-2 {
+  padding: var(--space-2);
+}
+
+.box-p-3 {
+  padding: var(--space-3);
+}
+
+.box-p-4 {
+  padding: var(--space-4);
+}
+
+.box-p-5 {
+  padding: var(--space-5);
+}
+
+.box-p-6 {
+  padding: var(--space-6);
+}
+
+.box-p-8 {
+  padding: var(--space-8);
+}
+
+.box-p-10 {
+  padding: var(--space-10);
+}
+
+.box-p-12 {
+  padding: var(--space-12);
+}
+
+.box-m-0 {
+  margin: 0;
+}
+
+.box-m-1 {
+  margin: var(--space-1);
+}
+
+.box-m-2 {
+  margin: var(--space-2);
+}
+
+.box-m-3 {
+  margin: var(--space-3);
+}
+
+.box-m-4 {
+  margin: var(--space-4);
+}
+
+.box-m-5 {
+  margin: var(--space-5);
+}
+
+.box-m-6 {
+  margin: var(--space-6);
+}
+
+.box-m-8 {
+  margin: var(--space-8);
+}
+
+.box-m-auto {
+  margin: auto;
+}
+
+.box-mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.box-my-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+.box-rounded-none {
+  border-radius: 0;
+}
+
+.box-rounded-sm {
+  border-radius: var(--radius-sm);
+}
+
+.box-rounded {
+  border-radius: var(--radius);
+}
+
+.box-rounded-md {
+  border-radius: var(--radius-md);
+}
+
+.box-rounded-lg {
+  border-radius: var(--radius-lg);
+}
+
+.box-rounded-xl {
+  border-radius: var(--radius-xl);
+}
+
+.box-rounded-2xl {
+  border-radius: var(--radius-2xl);
+}
+
+.box-rounded-full {
+  border-radius: var(--radius-full);
+}
+
+.box-bg-transparent {
+  background-color: transparent;
+}
+
+.box-bg-white {
+  background-color: white;
+}
+
+.box-bg-black {
+  background-color: black;
+}
+
+.box-bg-primary {
+  background-color: var(--primary);
+}
+
+.box-bg-secondary {
+  background-color: var(--secondary);
+}
+
+.box-bg-surface {
+  background-color: var(--surface);
+}
+
+.box-bg-muted {
+  background-color: var(--muted);
+}
+
+.box-border {
+  border: 1px solid var(--border);
+}
+
+.box-border-none {
+  border: none;
+}
+
+.box-border-2 {
+  border-width: 2px;
+}
+
+.box-border-primary {
+  border-color: var(--primary);
+}
+
+.box-border-muted {
+  border-color: var(--border);
+}
+
+.box-shadow-none {
+  box-shadow: none;
+}
+
+.box-shadow-sm {
+  box-shadow: var(--shadow-sm);
+}
+
+.box-shadow {
+  box-shadow: var(--shadow);
+}
+
+.box-shadow-md {
+  box-shadow: var(--shadow-md);
+}
+
+.box-shadow-lg {
+  box-shadow: var(--shadow-lg);
+}
+
+.box-shadow-xl {
+  box-shadow: var(--shadow-xl);
+}
+
+.box-relative {
+  position: relative;
+}
+
+.box-absolute {
+  position: absolute;
+}
+
+.box-fixed {
+  position: fixed;
+}
+
+.box-sticky {
+  position: sticky;
+}
+
+.box-overflow-auto {
+  overflow: auto;
+}
+
+.box-overflow-hidden {
+  overflow: hidden;
+}
+
+.box-overflow-visible {
+  overflow: visible;
+}
+
+.box-overflow-scroll {
+  overflow: scroll;
+}
+
+.box-w-full {
+  width: 100%;
+}
+
+.box-w-screen {
+  width: 100vw;
+}
+
+.box-w-auto {
+  width: auto;
+}
+
+.box-w-fit {
+  width: fit-content;
+}
+
+.box-w-min {
+  width: min-content;
+}
+
+.box-w-max {
+  width: max-content;
+}
+
+.box-h-full {
+  height: 100%;
+}
+
+.box-h-screen {
+  height: 100vh;
+}
+
+.box-h-auto {
+  height: auto;
+}
+
+.box-h-fit {
+  height: fit-content;
+}
+
+.box-min-h-0 {
+  min-height: 0;
+}
+
+.box-min-h-full {
+  min-height: 100%;
+}
+
+.box-min-h-screen {
+  min-height: 100vh;
+}
+
+.box-max-w-full {
+  max-width: 100%;
+}
+
+.box-max-w-screen {
+  max-width: 100vw;
+}
+
+.box-card {
+  background-color: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+}
+
+.box-card-elevated {
+  background-color: var(--surface);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4);
+  box-shadow: var(--shadow-md);
+}
+
+[data-theme=dark] .box-bg-white {
+  background-color: var(--gray-900);
+}
+[data-theme=dark] .box-bg-black {
+  background-color: white;
+}
+
 .accordion {
   --accordion-color: var(--text);
   --accordion-bg: transparent;