@ryanhe919/lumen-ui 0.2.1 → 0.3.0

package/dist/style.css

@@ -80,6 +80,8 @@
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
+    --tracking-tighter: -.05em;
+    --tracking-tight: -.025em;
     --tracking-wide: .025em;
     --tracking-wider: .05em;
     --leading-tight: 1.25;
@@ -93,6 +95,7 @@
     --ease-in-out: cubic-bezier(.4, 0, .2, 1);
     --animate-spin: spin 1s linear infinite;
     --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+    --animate-bounce: bounce 1s infinite;
     --blur-sm: 8px;
     --blur-md: 12px;
     --blur-xl: 24px;
@@ -495,6 +498,10 @@
     }
   }
 
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
+
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -519,6 +526,18 @@
     margin-block: calc(var(--spacing) * 2);
   }
 
+  .my-3 {
+    margin-block: calc(var(--spacing) * 3);
+  }
+
+  .my-4 {
+    margin-block: calc(var(--spacing) * 4);
+  }
+
+  .my-6 {
+    margin-block: calc(var(--spacing) * 6);
+  }
+
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * .5);
   }
@@ -547,6 +566,10 @@
     margin-top: calc(var(--spacing) * 4);
   }
 
+  .mt-6 {
+    margin-top: calc(var(--spacing) * 6);
+  }
+
   .mr-1\.5 {
     margin-right: calc(var(--spacing) * 1.5);
   }
@@ -555,10 +578,18 @@
     margin-right: calc(var(--spacing) * 2);
   }
 
+  .-mb-1 {
+    margin-bottom: calc(var(--spacing) * -1);
+  }
+
   .-mb-px {
     margin-bottom: -1px;
   }
 
+  .mb-1 {
+    margin-bottom: calc(var(--spacing) * 1);
+  }
+
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -583,6 +614,10 @@
     margin-left: calc(var(--spacing) * 2);
   }
 
+  .ml-2\.5 {
+    margin-left: calc(var(--spacing) * 2.5);
+  }
+
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
@@ -647,10 +682,18 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .h-4\.5 {
+    height: calc(var(--spacing) * 4.5);
+  }
+
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
 
+  .h-5\.5 {
+    height: calc(var(--spacing) * 5.5);
+  }
+
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
@@ -671,6 +714,10 @@
     height: calc(var(--spacing) * 10);
   }
 
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
@@ -691,14 +738,18 @@
     height: calc(var(--spacing) * 24);
   }
 
-  .h-\[168px\] {
-    height: 168px;
+  .h-\[1\.1em\] {
+    height: 1.1em;
   }
 
   .h-full {
     height: 100%;
   }
 
+  .h-px {
+    height: 1px;
+  }
+
   .max-h-32 {
     max-height: calc(var(--spacing) * 32);
   }
@@ -755,6 +806,10 @@
     min-height: 160px;
   }
 
+  .w-0\.5 {
+    width: calc(var(--spacing) * .5);
+  }
+
   .w-1\.5 {
     width: calc(var(--spacing) * 1.5);
   }
@@ -783,6 +838,10 @@
     width: calc(var(--spacing) * 4);
   }
 
+  .w-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+  }
+
   .w-4\/6 {
     width: 66.6667%;
   }
@@ -791,6 +850,10 @@
     width: calc(var(--spacing) * 5);
   }
 
+  .w-5\.5 {
+    width: calc(var(--spacing) * 5.5);
+  }
+
   .w-5\/6 {
     width: 83.3333%;
   }
@@ -851,6 +914,14 @@
     width: 100%;
   }
 
+  .max-w-45 {
+    max-width: calc(var(--spacing) * 45);
+  }
+
+  .max-w-\[70\%\] {
+    max-width: 70%;
+  }
+
   .max-w-md {
     max-width: var(--container-md);
   }
@@ -891,7 +962,7 @@
     flex: 1;
   }
 
-  .flex-shrink-0 {
+  .flex-shrink-0, .shrink-0 {
     flex-shrink: 0;
   }
 
@@ -966,6 +1037,10 @@
     transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
   }
 
+  .animate-bounce {
+    animation: var(--animate-bounce);
+  }
+
   .animate-pulse {
     animation: var(--animate-pulse);
   }
@@ -990,6 +1065,14 @@
     resize: none;
   }
 
+  .list-decimal {
+    list-style-type: decimal;
+  }
+
+  .list-disc {
+    list-style-type: disc;
+  }
+
   .grid-cols-7 {
     grid-template-columns: repeat(7, minmax(0, 1fr));
   }
@@ -998,6 +1081,14 @@
     flex-direction: column;
   }
 
+  .flex-row {
+    flex-direction: row;
+  }
+
+  .flex-row-reverse {
+    flex-direction: row-reverse;
+  }
+
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -1010,6 +1101,10 @@
     align-items: center;
   }
 
+  .items-end {
+    align-items: flex-end;
+  }
+
   .items-start {
     align-items: flex-start;
   }
@@ -1026,6 +1121,10 @@
     justify-content: flex-end;
   }
 
+  .gap-0\.5 {
+    gap: calc(var(--spacing) * .5);
+  }
+
   .gap-1 {
     gap: calc(var(--spacing) * 1);
   }
@@ -1098,6 +1197,10 @@
     overflow: hidden;
   }
 
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
+
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -1163,6 +1266,11 @@
     border-width: 1px;
   }
 
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0;
+  }
+
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -1193,11 +1301,33 @@
     border-left-width: 1px;
   }
 
+  .border-l-4 {
+    border-left-style: var(--tw-border-style);
+    border-left-width: 4px;
+  }
+
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
   }
 
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
+
+  .border-current {
+    border-color: currentColor;
+  }
+
+  .border-t-transparent {
+    border-top-color: #0000;
+  }
+
+  .bg-transparent {
+    background-color: #0000;
+  }
+
   .object-cover {
     object-fit: cover;
   }
@@ -1254,6 +1384,10 @@
     padding-inline: calc(var(--spacing) * 1);
   }
 
+  .px-1\.5 {
+    padding-inline: calc(var(--spacing) * 1.5);
+  }
+
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
@@ -1322,6 +1456,10 @@
     padding-block: calc(var(--spacing) * 4);
   }
 
+  .py-4\.5 {
+    padding-block: calc(var(--spacing) * 4.5);
+  }
+
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
@@ -1346,6 +1484,10 @@
     padding-block: calc(var(--spacing) * 16);
   }
 
+  .pt-0\.5 {
+    padding-top: calc(var(--spacing) * .5);
+  }
+
   .pt-3 {
     padding-top: calc(var(--spacing) * 3);
   }
@@ -1382,6 +1524,10 @@
     padding-left: calc(var(--spacing) * 4);
   }
 
+  .pl-6 {
+    padding-left: calc(var(--spacing) * 6);
+  }
+
   .pl-10 {
     padding-left: calc(var(--spacing) * 10);
   }
@@ -1398,6 +1544,18 @@
     text-align: left;
   }
 
+  .text-right {
+    text-align: right;
+  }
+
+  .align-middle {
+    vertical-align: middle;
+  }
+
+  .font-mono {
+    font-family: var(--font-mono);
+  }
+
   .text-2xl {
     font-size: var(--text-2xl);
     line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -1448,10 +1606,19 @@
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
 
+  .text-\[0\.9em\] {
+    font-size: .9em;
+  }
+
   .text-\[10px\] {
     font-size: 10px;
   }
 
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -1477,6 +1644,16 @@
     font-weight: var(--font-weight-semibold);
   }
 
+  .tracking-tight {
+    --tw-tracking: var(--tracking-tight);
+    letter-spacing: var(--tracking-tight);
+  }
+
+  .tracking-tighter {
+    --tw-tracking: var(--tracking-tighter);
+    letter-spacing: var(--tracking-tighter);
+  }
+
   .tracking-wide {
     --tw-tracking: var(--tracking-wide);
     letter-spacing: var(--tracking-wide);
@@ -1487,10 +1664,22 @@
     letter-spacing: var(--tracking-wider);
   }
 
-  .break-words {
+  .wrap-break-word {
     overflow-wrap: break-word;
   }
 
+  .break-all {
+    word-break: break-all;
+  }
+
+  .whitespace-pre {
+    white-space: pre;
+  }
+
+  .whitespace-pre-wrap {
+    white-space: pre-wrap;
+  }
+
   .capitalize {
     text-transform: capitalize;
   }
@@ -1499,10 +1688,26 @@
     text-transform: uppercase;
   }
 
+  .italic {
+    font-style: italic;
+  }
+
+  .line-through {
+    text-decoration-line: line-through;
+  }
+
   .underline {
     text-decoration-line: underline;
   }
 
+  .decoration-1 {
+    text-decoration-thickness: 1px;
+  }
+
+  .underline-offset-2 {
+    text-underline-offset: 2px;
+  }
+
   .opacity-0 {
     opacity: 0;
   }
@@ -1511,6 +1716,14 @@
     opacity: .25;
   }
 
+  .opacity-40 {
+    opacity: .4;
+  }
+
+  .opacity-60 {
+    opacity: .6;
+  }
+
   .opacity-75 {
     opacity: .75;
   }
@@ -1607,21 +1820,6 @@
     transition-duration: .3s;
   }
 
-  .duration-500 {
-    --tw-duration: .5s;
-    transition-duration: .5s;
-  }
-
-  .duration-700 {
-    --tw-duration: .7s;
-    transition-duration: .7s;
-  }
-
-  .duration-1000 {
-    --tw-duration: 1s;
-    transition-duration: 1s;
-  }
-
   .ease-in-out {
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
@@ -1641,10 +1839,27 @@
     outline-style: none;
   }
 
+  .select-none {
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
   .\[-moz-appearance\:textfield\] {
     -moz-appearance: textfield;
   }
 
+  .placeholder\:text-\(--lm-text-tertiary\)::placeholder {
+    color: var(--lm-text-tertiary);
+  }
+
+  .first\:mt-0:first-child {
+    margin-top: calc(var(--spacing) * 0);
+  }
+
+  .last\:mb-0:last-child {
+    margin-bottom: calc(var(--spacing) * 0);
+  }
+
   @media (hover: hover) {
     .hover\:scale-105:hover {
       --tw-scale-x: 105%;
@@ -1657,11 +1872,11 @@
       scale: 1.02;
     }
 
-    .hover\:border-\[var\(--lm-primary-400\)\]:hover {
+    .hover\:border-\(--lm-primary-400\):hover {
       border-color: var(--lm-primary-400);
     }
 
-    .hover\:bg-\[var\(--lm-bg-hover\)\]:hover {
+    .hover\:bg-\(--lm-bg-hover\):hover {
       background-color: var(--lm-bg-hover);
     }
 
@@ -1674,6 +1889,15 @@
         background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
       }
     }
+
+    .hover\:opacity-80:hover {
+      opacity: .8;
+    }
+  }
+
+  .focus\:ring-0:focus {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
   .focus\:ring-2:focus {
@@ -1700,6 +1924,13 @@
     outline-style: none;
   }
 
+  .active\:scale-95:active {
+    --tw-scale-x: 95%;
+    --tw-scale-y: 95%;
+    --tw-scale-z: 95%;
+    scale: var(--tw-scale-x) var(--tw-scale-y);
+  }
+
   .active\:scale-\[0\.98\]:active {
     scale: .98;
   }
@@ -1718,6 +1949,18 @@
     cursor: not-allowed;
   }
 
+  .disabled\:text-\(--lm-text-disabled\):disabled {
+    color: var(--lm-text-disabled);
+  }
+
+  .disabled\:opacity-40:disabled {
+    opacity: .4;
+  }
+
+  .disabled\:opacity-50:disabled {
+    opacity: .5;
+  }
+
   .\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
     appearance: none;
   }
@@ -1728,17 +1971,17 @@
 }
 
 :root, [data-theme="light"] {
-  --lm-primary-50: #f0f9ff;
-  --lm-primary-100: #e0f2fe;
-  --lm-primary-200: #bae6fd;
-  --lm-primary-300: #7dd3fc;
-  --lm-primary-400: #38bdf8;
-  --lm-primary-500: #0ea5e9;
-  --lm-primary-600: #0284c7;
-  --lm-primary-700: #0369a1;
-  --lm-primary-800: #075985;
-  --lm-primary-900: #0c4a6e;
-  --lm-primary-950: #082f49;
+  --lm-primary-50: #f0f7ff;
+  --lm-primary-100: #e0efff;
+  --lm-primary-200: #b8dbff;
+  --lm-primary-300: #7abbff;
+  --lm-primary-400: #3d9bff;
+  --lm-primary-500: #007aff;
+  --lm-primary-600: #0066d6;
+  --lm-primary-700: #0052ab;
+  --lm-primary-800: #00408a;
+  --lm-primary-900: #003166;
+  --lm-primary-950: #001f42;
   --lm-secondary-50: #f8fafc;
   --lm-secondary-100: #f1f5f9;
   --lm-secondary-200: #e2e8f0;
@@ -1819,33 +2062,38 @@
   --lm-border-default: #e5e7eb;
   --lm-border-light: #f3f4f6;
   --lm-border-strong: #d1d5db;
-  --lm-border-focus: #0ea5e9;
-  --lm-shadow-sm: 0 1px 2px 0 #0000000d;
-  --lm-shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
-  --lm-shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
-  --lm-shadow-xl: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
-  --lm-radius-sm: .25rem;
-  --lm-radius-md: .375rem;
-  --lm-radius-lg: .5rem;
-  --lm-radius-xl: .75rem;
+  --lm-border-focus: #007aff;
+  --lm-shadow-sm: 0 1px 3px #0000000a, 0 1px 2px #0000000f;
+  --lm-shadow-md: 0 4px 12px #0000000f, 0 2px 4px #0000000a;
+  --lm-shadow-lg: 0 8px 24px #00000014, 0 4px 8px #0000000a;
+  --lm-shadow-xl: 0 16px 48px #0000001a, 0 8px 16px #0000000f;
+  --lm-radius-sm: 6px;
+  --lm-radius-md: 10px;
+  --lm-radius-lg: 12px;
+  --lm-radius-xl: 16px;
+  --lm-radius-2xl: 20px;
   --lm-radius-full: 9999px;
-  --lm-transition-fast: .15s;
-  --lm-transition-normal: .2s;
-  --lm-transition-slow: .3s;
+  --lm-transition-fast: .12s;
+  --lm-transition-normal: .18s;
+  --lm-transition-slow: .25s;
+  --lm-ease-default: cubic-bezier(.25, .1, .25, 1);
+  --lm-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
+  --lm-ease-out: cubic-bezier(0, 0, .2, 1);
+  --lm-ease-in-out: cubic-bezier(.4, 0, .2, 1);
 }
 
 [data-theme="dark"] {
-  --lm-primary-50: #082f49;
-  --lm-primary-100: #0c4a6e;
-  --lm-primary-200: #075985;
-  --lm-primary-300: #0369a1;
-  --lm-primary-400: #0284c7;
-  --lm-primary-500: #0ea5e9;
-  --lm-primary-600: #38bdf8;
-  --lm-primary-700: #7dd3fc;
-  --lm-primary-800: #bae6fd;
-  --lm-primary-900: #e0f2fe;
-  --lm-primary-950: #f0f9ff;
+  --lm-primary-50: #001f42;
+  --lm-primary-100: #003166;
+  --lm-primary-200: #00408a;
+  --lm-primary-300: #0052ab;
+  --lm-primary-400: #0066d6;
+  --lm-primary-500: #0a84ff;
+  --lm-primary-600: #3d9bff;
+  --lm-primary-700: #7abbff;
+  --lm-primary-800: #b8dbff;
+  --lm-primary-900: #e0efff;
+  --lm-primary-950: #f0f7ff;
   --lm-secondary-50: #020617;
   --lm-secondary-100: #0f172a;
   --lm-secondary-200: #1e293b;
@@ -1915,11 +2163,11 @@
   --lm-border-default: #374151;
   --lm-border-light: #4b5563;
   --lm-border-strong: #6b7280;
-  --lm-border-focus: #38bdf8;
-  --lm-shadow-sm: 0 1px 2px 0 #0003;
-  --lm-shadow-md: 0 4px 6px -1px #0000004d, 0 2px 4px -2px #0003;
-  --lm-shadow-lg: 0 10px 15px -3px #0006, 0 4px 6px -4px #0000004d;
-  --lm-shadow-xl: 0 20px 25px -5px #00000080, 0 8px 10px -6px #0006;
+  --lm-border-focus: #0a84ff;
+  --lm-shadow-sm: 0 1px 3px #0000001f, 0 1px 2px #00000029;
+  --lm-shadow-md: 0 4px 12px #00000029, 0 2px 4px #0000001f;
+  --lm-shadow-lg: 0 8px 24px #0003, 0 4px 8px #0000001f;
+  --lm-shadow-xl: 0 16px 48px #0000003d, 0 8px 16px #00000029;
 }
 
 [data-theme="blue"] {
@@ -2192,6 +2440,75 @@ body {
   transition: background-color var(--lm-transition-normal), color var(--lm-transition-normal);
 }
 
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+:focus-visible {
+  outline: 2px solid var(--lm-primary-500);
+  outline-offset: 2px;
+}
+
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, :before, :after {
+    scroll-behavior: auto !important;
+    transition-duration: .01ms !important;
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+  }
+}
+
+.lm-rounded-apple {
+  border-radius: var(--lm-radius-lg);
+}
+
+.lm-rounded-apple-lg {
+  border-radius: var(--lm-radius-xl);
+}
+
+.lm-transition {
+  transition-property: all;
+  transition-duration: var(--lm-transition-normal);
+  transition-timing-function: var(--lm-ease-out);
+}
+
+.lm-transition-fast {
+  transition-property: all;
+  transition-duration: var(--lm-transition-fast);
+  transition-timing-function: var(--lm-ease-out);
+}
+
+.lm-hover-lift {
+  transition: transform var(--lm-transition-normal) var(--lm-ease-spring), box-shadow var(--lm-transition-normal) var(--lm-ease-out);
+}
+
+.lm-hover-lift:hover {
+  transform: scale(1.02);
+}
+
+.lm-glass {
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  background: #ffffffb8;
+}
+
+[data-theme="dark"] .lm-glass {
+  background: #1e1e1eb8;
+}
+
+.lm-tracking-tight {
+  letter-spacing: -.025em;
+}
+
+.lm-tracking-tighter {
+  letter-spacing: -.05em;
+}
+
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -2437,3 +2754,15 @@ body {
     opacity: .5;
   }
 }
+
+@keyframes bounce {
+  0%, 100% {
+    animation-timing-function: cubic-bezier(.8, 0, 1, 1);
+    transform: translateY(-25%);
+  }
+
+  50% {
+    animation-timing-function: cubic-bezier(0, 0, .2, 1);
+    transform: none;
+  }
+}