@univerjs/ui 1.2.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;
 }
@@ -928,6 +955,10 @@
   overflow: hidden;
 }
 
+.univer-whitespace-normal {
+  white-space: normal;
+}
+
 .univer-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1122,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);
 }
@@ -1370,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;
 }
@@ -1472,6 +1507,10 @@
   color: var(--univer-gray-900);
 }
 
+.univer-text-inherit {
+  color: inherit;
+}
+
 .univer-text-primary-500 {
   color: var(--univer-primary-500);
 }
@@ -1561,6 +1600,12 @@
   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;
@@ -1681,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);
@@ -1730,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;
@@ -1904,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;
 }
@@ -1928,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 *) {
@@ -2019,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;
@@ -2053,14 +2122,14 @@
   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;
 }
@@ -2233,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;