@univerjs/ui 1.1.0 → 1.3.0

package/lib/index.css

@@ -206,6 +206,10 @@
   margin-bottom: 0;
 }
 
+.univer-mb-1 {
+  margin-bottom: .25rem;
+}
+
 .univer-ml-2 {
   margin-left: .5rem;
 }
@@ -288,11 +292,6 @@
   height: 1rem !important;
 }
 
-.univer-size-1\.5 {
-  width: .375rem;
-  height: .375rem;
-}
-
 .univer-size-10 {
   width: 2.5rem;
   height: 2.5rem;
@@ -353,6 +352,14 @@
   height: 100%;
 }
 
+.\!univer-h-14 {
+  height: 3.5rem !important;
+}
+
+.\!univer-h-auto {
+  height: auto !important;
+}
+
 .univer-h-0 {
   height: 0;
 }
@@ -389,6 +396,10 @@
   height: .5rem;
 }
 
+.univer-h-3 {
+  height: .75rem;
+}
+
 .univer-h-4 {
   height: 1rem;
 }
@@ -421,6 +432,10 @@
   height: 340px;
 }
 
+.univer-h-\[73px\] {
+  height: 73px;
+}
+
 .univer-h-full {
   height: 100%;
 }
@@ -449,6 +464,10 @@
   min-height: 5rem;
 }
 
+.univer-min-h-7 {
+  min-height: 1.75rem;
+}
+
 .univer-min-h-8 {
   min-height: 2rem;
 }
@@ -461,6 +480,10 @@
   min-height: 100%;
 }
 
+.\!univer-w-14 {
+  width: 3.5rem !important;
+}
+
 .\!univer-w-full {
   width: 100% !important;
 }
@@ -521,6 +544,10 @@
   width: 2rem;
 }
 
+.univer-w-80 {
+  width: 20rem;
+}
+
 .univer-w-9 {
   width: 2.25rem;
 }
@@ -605,6 +632,10 @@
   max-width: 32%;
 }
 
+.univer-max-w-\[50\%\] {
+  max-width: 50%;
+}
+
 .univer-max-w-\[560px\] {
   max-width: 560px;
 }
@@ -924,6 +955,10 @@
   overflow: hidden;
 }
 
+.univer-whitespace-normal {
+  white-space: normal;
+}
+
 .univer-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1118,14 +1153,14 @@
   background-color: var(--univer-gray-300);
 }
 
-.univer-bg-gray-400 {
-  background-color: var(--univer-gray-400);
-}
-
 .univer-bg-gray-50 {
   background-color: var(--univer-gray-50);
 }
 
+.univer-bg-gray-600 {
+  background-color: var(--univer-gray-600);
+}
+
 .univer-bg-gray-700 {
   background-color: var(--univer-gray-700);
 }
@@ -1138,6 +1173,10 @@
   background-color: var(--univer-primary-50);
 }
 
+.univer-bg-primary-500 {
+  background-color: var(--univer-primary-500);
+}
+
 .univer-bg-primary-600 {
   background-color: var(--univer-primary-600);
 }
@@ -1362,6 +1401,10 @@
   text-align: right;
 }
 
+.univer-text-start {
+  text-align: left;
+}
+
 .univer-font-sans {
   font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
@@ -1464,6 +1507,10 @@
   color: var(--univer-gray-900);
 }
 
+.univer-text-inherit {
+  color: inherit;
+}
+
 .univer-text-primary-500 {
   color: var(--univer-primary-500);
 }
@@ -1476,11 +1523,6 @@
   color: var(--univer-primary-700);
 }
 
-.univer-text-slate-200 {
-  --univer-tw-text-opacity: 1;
-  color: rgba(226, 232, 240, var(--univer-tw-text-opacity, 1));
-}
-
 .univer-underline {
   text-decoration-line: underline;
 }
@@ -1554,15 +1596,16 @@
   backdrop-filter: var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia);
 }
 
-.univer-backdrop-blur-xl {
-  --univer-tw-backdrop-blur: blur(24px);
-  backdrop-filter: var(--univer-tw-backdrop-blur) var(--univer-tw-backdrop-brightness) var(--univer-tw-backdrop-contrast) var(--univer-tw-backdrop-grayscale) var(--univer-tw-backdrop-hue-rotate) var(--univer-tw-backdrop-invert) var(--univer-tw-backdrop-opacity) var(--univer-tw-backdrop-saturate) var(--univer-tw-backdrop-sepia);
-}
-
 .\!univer-transition-none {
   transition-property: none !important;
 }
 
+.univer-transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-duration: .15s;
+  transition-timing-function: cubic-bezier(.4, 0, .2, 1);
+}
+
 .univer-transition-\[height\] {
   transition-property: height;
   transition-duration: .15s;
@@ -1683,6 +1726,14 @@
   opacity: .4;
 }
 
+.data-\[state\=open\]\:univer-bg-primary-50[data-state="open"] {
+  background-color: var(--univer-primary-50);
+}
+
+.data-\[state\=open\]\:univer-text-primary-600[data-state="open"] {
+  color: var(--univer-primary-600);
+}
+
 @media (hover: hover) and (pointer: fine) {
   .hover\:univer-border-primary-600:hover {
     border-color: var(--univer-primary-600);
@@ -1704,6 +1755,10 @@
     background-color: var(--univer-gray-50);
   }
 
+  .hover\:univer-bg-primary-500:hover {
+    background-color: var(--univer-primary-500);
+  }
+
   .hover\:univer-bg-transparent:hover {
     background-color: #0000;
   }
@@ -1728,14 +1783,14 @@
   }
 }
 
-.focus\:univer-bg-gray-0:focus {
-  background-color: var(--univer-gray-0);
-}
-
 .focus\:univer-bg-gray-50:focus {
   background-color: var(--univer-gray-50);
 }
 
+.focus\:univer-bg-transparent:focus {
+  background-color: #0000;
+}
+
 .focus\:univer-outline-none:focus {
   outline-offset: 2px;
   outline: 2px solid #0000;
@@ -1748,6 +1803,10 @@
   box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
 }
 
+.focus\:univer-ring-primary-500:focus {
+  --univer-tw-ring-color: var(--univer-primary-500);
+}
+
 .focus-visible\:univer-outline-none:focus-visible {
   outline-offset: 2px;
   outline: 2px solid #0000;
@@ -1795,6 +1854,10 @@
   background-color: var(--univer-gray-200);
 }
 
+.active\:univer-bg-primary-500:active {
+  background-color: var(--univer-primary-500);
+}
+
 .enabled\:active\:univer-scale-\[0\.98\]:active:enabled {
   --univer-tw-scale-x: .98;
   --univer-tw-scale-y: .98;
@@ -1894,6 +1957,10 @@
   border-bottom-right-radius: 0;
 }
 
+.rtl\:univer-pl-0:where([dir="rtl"], [dir="rtl"] *) {
+  padding-left: 0;
+}
+
 .rtl\:univer-pl-1\.5:where([dir="rtl"], [dir="rtl"] *) {
   padding-left: .375rem;
 }
@@ -1918,12 +1985,16 @@
   border-color: var(--univer-gray-700) !important;
 }
 
-.dark\:\!univer-bg-gray-200:where(.univer-dark, .univer-dark *) {
-  background-color: var(--univer-gray-200) !important;
+.dark\:\!univer-border-gray-800:where(.univer-dark, .univer-dark *) {
+  border-color: var(--univer-gray-800) !important;
 }
 
-.dark\:\!univer-bg-gray-300:where(.univer-dark, .univer-dark *) {
-  background-color: var(--univer-gray-300) !important;
+.dark\:\!univer-bg-gray-100:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-gray-100) !important;
+}
+
+.dark\:\!univer-bg-gray-200:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-gray-200) !important;
 }
 
 .dark\:\!univer-bg-gray-500:where(.univer-dark, .univer-dark *) {
@@ -2009,6 +2080,14 @@
   box-shadow: var(--univer-tw-ring-offset-shadow, 0 0 #0000), var(--univer-tw-ring-shadow, 0 0 #0000), var(--univer-tw-shadow) !important;
 }
 
+.dark\:data-\[state\=open\]\:\!univer-bg-gray-700[data-state="open"]:where(.univer-dark, .univer-dark *) {
+  background-color: var(--univer-gray-700) !important;
+}
+
+.dark\:data-\[state\=open\]\:\!univer-text-primary-300[data-state="open"]:where(.univer-dark, .univer-dark *) {
+  color: var(--univer-primary-300) !important;
+}
+
 @media (hover: hover) and (pointer: fine) {
   .dark\:hover\:\!univer-bg-gray-600:hover:where(.univer-dark, .univer-dark *) {
     background-color: var(--univer-gray-600) !important;
@@ -2043,14 +2122,18 @@
   background-color: var(--univer-gray-600) !important;
 }
 
-.dark\:focus\:\!univer-bg-gray-800:focus:where(.univer-dark, .univer-dark *) {
-  background-color: var(--univer-gray-800) !important;
-}
-
 .dark\:focus\:\!univer-bg-gray-900:focus:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-900) !important;
 }
 
+.dark\:focus\:\!univer-bg-transparent:focus:where(.univer-dark, .univer-dark *) {
+  background-color: #0000 !important;
+}
+
+.dark\:focus\:\!univer-ring-primary-300:focus:where(.univer-dark, .univer-dark *) {
+  --univer-tw-ring-color: var(--univer-primary-300) !important;
+}
+
 .dark\:active\:\!univer-bg-gray-600:active:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-600) !important;
 }
@@ -2219,12 +2302,20 @@
   width: 100%;
 }
 
+.\[\&\>span\]\:univer-min-w-0 > span {
+  min-width: 0;
+}
+
 .\[\&\>span\]\:univer-truncate > span {
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
 }
 
+.\[\&\>span\]\:univer-whitespace-normal > span {
+  white-space: normal;
+}
+
 .\[\&\>span\]\:univer-text-base > span {
   font-size: 1rem;
   line-height: 1.5rem;
@@ -2484,6 +2575,10 @@
   outline: 2px solid #0000 !important;
 }
 
+.\[\&_button\]\:\!\[font-family\:inherit\] button {
+  font-family: inherit !important;
+}
+
 .\[\&_button_svg\]\:\!univer-size-5 button svg {
   width: 1.25rem !important;
   height: 1.25rem !important;