@univerjs/design 1.0.0-alpha.8 → 1.0.0-beta.1

package/lib/es/locale/ar-SA.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "اختر الشهر"
 		}
 	},
-	Select: { empty: "لا شيء" },
 	ColorPicker: {
 		more: "المزيد من الألوان",
 		cancel: "إلغاء",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "ماسي",
 		offset: "إزاحة",
 		angle: "زاوية",
-		flip: "قلب",
 		delete: "حذف",
 		transparency: "الشفافية"
 	}

package/lib/es/locale/ca-ES.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "Selecciona el mes"
 		}
 	},
-	Select: { empty: "Cap" },
 	ColorPicker: {
 		more: "Més colors",
 		cancel: "cancel·la",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "Diamant",
 		offset: "Desplaçament",
 		angle: "Angle",
-		flip: "Girar",
 		delete: "Eliminar",
 		transparency: "Transparència"
 	}

package/lib/es/locale/de-DE.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "Monat auswählen"
 		}
 	},
-	Select: { empty: "Keine" },
 	ColorPicker: {
 		more: "Mehr Farben",
 		cancel: "Abbrechen",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "Diamant",
 		offset: "Versatz",
 		angle: "Winkel",
-		flip: "Umkehren",
 		delete: "Löschen",
 		transparency: "Transparenz"
 	}

package/lib/es/locale/en-US.js

@@ -62,7 +62,6 @@ const locale = { design: {
 			selectMonth: "Select month"
 		}
 	},
-	Select: { empty: "None" },
 	ColorPicker: {
 		more: "More Colors",
 		cancel: "cancel",
@@ -75,7 +74,6 @@ const locale = { design: {
 		diamond: "Diamond",
 		offset: "Offset",
 		angle: "Angle",
-		flip: "Flip",
 		delete: "Delete",
 		transparency: "Transparency"
 	}

package/lib/es/locale/es-ES.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "Seleccionar mes"
 		}
 	},
-	Select: { empty: "Cap" },
 	ColorPicker: {
 		more: "Más colores",
 		cancel: "Cancelar",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "Diamante",
 		offset: "Desplazamiento",
 		angle: "Ángulo",
-		flip: "Invertir",
 		delete: "Eliminar",
 		transparency: "Transparencia"
 	}

package/lib/es/locale/fa-IR.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "انتخاب ماه"
 		}
 	},
-	Select: { empty: "هیچ‌کدام" },
 	ColorPicker: {
 		more: "رنگ‌های بیشتر",
 		cancel: "لغو",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "الماسی",
 		offset: "افست",
 		angle: "زاویه",
-		flip: "برگردان",
 		delete: "حذف",
 		transparency: "شفافیت"
 	}

package/lib/es/locale/fr-FR.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "Sélectionner le mois"
 		}
 	},
-	Select: { empty: "Aucun" },
 	ColorPicker: {
 		more: "Plus de couleurs",
 		cancel: "annuler",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "Diamant",
 		offset: "Décalage",
 		angle: "Angle",
-		flip: "Retourner",
 		delete: "Supprimer",
 		transparency: "Transparence"
 	}

package/lib/es/locale/id-ID.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "Pilih bulan"
 		}
 	},
-	Select: { empty: "Tidak ada" },
 	ColorPicker: {
 		more: "Warna Lainnya",
 		cancel: "Batal",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "Berlian",
 		offset: "Offset",
 		angle: "Sudut",
-		flip: "Balik",
 		delete: "Hapus",
 		transparency: "Transparansi"
 	}

package/lib/es/locale/it-IT.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "Seleziona mese"
 		}
 	},
-	Select: { empty: "Nessuno" },
 	ColorPicker: {
 		more: "Altri Colori",
 		cancel: "annulla",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "Diamante",
 		offset: "Offset",
 		angle: "Angolo",
-		flip: "Capovolgi",
 		delete: "Elimina",
 		transparency: "Trasparenza"
 	}

package/lib/es/locale/ja-JP.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "月を選択"
 		}
 	},
-	Select: { empty: "該当なし" },
 	ColorPicker: {
 		more: "その他の色",
 		cancel: "キャンセル",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "菱形",
 		offset: "オフセット",
 		angle: "角度",
-		flip: "反転",
 		delete: "削除",
 		transparency: "透明度"
 	}

package/lib/es/locale/ko-KR.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "월 선택"
 		}
 	},
-	Select: { empty: "없음" },
 	ColorPicker: {
 		more: "추가 색상",
 		cancel: "취소",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "다이아몬드형",
 		offset: "오프셋",
 		angle: "각도",
-		flip: "뒤집기",
 		delete: "삭제",
 		transparency: "투명도"
 	}

package/lib/es/locale/pl-PL.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "Wybierz miesiąc"
 		}
 	},
-	Select: { empty: "Brak" },
 	ColorPicker: {
 		more: "Więcej kolorów",
 		cancel: "anuluj",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "Diamentowy",
 		offset: "Przesunięcie",
 		angle: "Kąt",
-		flip: "Obrót",
 		delete: "Usuń",
 		transparency: "Przezroczystość"
 	}

package/lib/es/locale/pt-BR.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "Selecionar mês"
 		}
 	},
-	Select: { empty: "Nenhum" },
 	ColorPicker: {
 		more: "Mais Cores",
 		cancel: "cancelar",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "Diamante",
 		offset: "Deslocamento",
 		angle: "Ângulo",
-		flip: "Inverter",
 		delete: "Excluir",
 		transparency: "Transparência"
 	}

package/lib/es/locale/ru-RU.js

@@ -15,7 +15,6 @@ const locale = { design: {
 		confirm: "ок"
 	},
 	CascaderList: { empty: "Нет" },
-	Select: { empty: "Нет" },
 	Calendar: {
 		year: "Год",
 		weekDays: [
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "ромбовидный",
 		offset: "смещение",
 		angle: "угол",
-		flip: "перевернуть",
 		delete: "удалить",
 		transparency: "прозрачность"
 	}

package/lib/es/locale/sk-SK.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "Vybrať mesiac"
 		}
 	},
-	Select: { empty: "Žiadne" },
 	ColorPicker: {
 		more: "Viac farieb",
 		cancel: "zrušiť",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "Diamantový",
 		offset: "Posun",
 		angle: "Uhol",
-		flip: "Prevrátiť",
 		delete: "Odstrániť",
 		transparency: "Priehľadnosť"
 	}

package/lib/es/locale/vi-VN.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "Chọn tháng"
 		}
 	},
-	Select: { empty: "Không có" },
 	ColorPicker: {
 		more: "Màu sắc khác",
 		cancel: "Hủy bỏ",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "Hình thoi",
 		offset: "Độ lệch",
 		angle: "Góc",
-		flip: "Lật",
 		delete: "Xóa",
 		transparency: "Độ trong suốt"
 	}

package/lib/es/locale/zh-CN.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "选择月份"
 		}
 	},
-	Select: { empty: "无" },
 	ColorPicker: {
 		more: "更多颜色",
 		cancel: "取消",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "菱形",
 		offset: "偏移",
 		angle: "角度",
-		flip: "翻转",
 		delete: "删除",
 		transparency: "透明度"
 	}

package/lib/es/locale/zh-HK.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "選擇月份"
 		}
 	},
-	Select: { empty: "無" },
 	ColorPicker: {
 		more: "更多顏色",
 		cancel: "取消",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "菱形",
 		offset: "偏移",
 		angle: "角度",
-		flip: "翻轉",
 		delete: "刪除",
 		transparency: "透明度"
 	}

package/lib/es/locale/zh-TW.js

@@ -47,7 +47,6 @@ const locale = { design: {
 			selectMonth: "選擇月份"
 		}
 	},
-	Select: { empty: "無" },
 	ColorPicker: {
 		more: "更多顏色",
 		cancel: "取消",
@@ -60,7 +59,6 @@ const locale = { design: {
 		diamond: "菱形",
 		offset: "偏移",
 		angle: "角度",
-		flip: "翻轉",
 		delete: "刪除",
 		transparency: "透明度"
 	}

package/lib/index.css

@@ -91,10 +91,7 @@
 }
 
 .univer-inset-0 {
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  inset: 0;
 }
 
 .univer-inset-x-0 {
@@ -658,6 +655,12 @@
   transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
 }
 
+.univer-rotate-90 {
+  --univer-tw-rotate: 90deg;
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(90deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+}
+
 .univer-rotate-\[-90deg\] {
   --univer-tw-rotate: -90deg;
   transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(-90deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
@@ -723,7 +726,6 @@
 }
 
 .univer-appearance-none {
-  -webkit-appearance: none;
   appearance: none;
 }
 
@@ -1042,6 +1044,10 @@
   border-color: var(--univer-gray-200) !important;
 }
 
+.univer-border-gray-0 {
+  border-color: var(--univer-gray-0);
+}
+
 .univer-border-gray-100 {
   border-color: var(--univer-gray-100);
 }
@@ -1078,10 +1084,6 @@
   border-color: #0000;
 }
 
-.univer-border-white {
-  border-color: var(--univer-white);
-}
-
 .\!univer-bg-gray-500 {
   background-color: var(--univer-gray-500) !important;
 }
@@ -1104,6 +1106,10 @@
   background-color: #000c;
 }
 
+.univer-bg-gray-0 {
+  background-color: var(--univer-gray-0);
+}
+
 .univer-bg-gray-100 {
   background-color: var(--univer-gray-100);
 }
@@ -1160,10 +1166,6 @@
   background-color: #0000;
 }
 
-.univer-bg-white {
-  background-color: var(--univer-white);
-}
-
 .univer-bg-gradient-to-br {
   background-image: linear-gradient(to bottom right, var(--univer-tw-gradient-stops));
 }
@@ -1476,6 +1478,10 @@
   letter-spacing: .1em;
 }
 
+.\!univer-text-gray-0 {
+  color: var(--univer-gray-0) !important;
+}
+
 .\!univer-text-gray-400 {
   color: var(--univer-gray-400) !important;
 }
@@ -1484,10 +1490,6 @@
   color: var(--univer-primary-500) !important;
 }
 
-.\!univer-text-white {
-  color: var(--univer-white) !important;
-}
-
 .univer-text-amber-500 {
   --univer-tw-text-opacity: 1;
   color: rgba(245, 158, 11, var(--univer-tw-text-opacity, 1));
@@ -1502,6 +1504,10 @@
   color: rgba(14, 116, 144, var(--univer-tw-text-opacity, 1));
 }
 
+.univer-text-gray-0 {
+  color: var(--univer-gray-0);
+}
+
 .univer-text-gray-400 {
   color: var(--univer-gray-400);
 }
@@ -1582,10 +1588,6 @@
   color: rgba(139, 92, 246, var(--univer-tw-text-opacity, 1));
 }
 
-.univer-text-white {
-  color: var(--univer-white);
-}
-
 .univer-underline-offset-4 {
   text-underline-offset: 4px;
 }
@@ -1672,6 +1674,10 @@
   --univer-tw-ring-color: var(--univer-primary-900) !important;
 }
 
+.univer-ring-gray-0 {
+  --univer-tw-ring-color: var(--univer-gray-0);
+}
+
 .univer-ring-primary-50 {
   --univer-tw-ring-color: var(--univer-primary-50);
 }
@@ -1680,10 +1686,6 @@
   --univer-tw-ring-color: var(--univer-primary-500);
 }
 
-.univer-ring-white {
-  --univer-tw-ring-color: var(--univer-white);
-}
-
 .univer-ring-offset-2 {
   --univer-tw-ring-offset-width: 2px;
 }
@@ -1692,8 +1694,8 @@
   --univer-tw-ring-offset-color: var(--univer-gray-600) !important;
 }
 
-.univer-ring-offset-white {
-  --univer-tw-ring-offset-color: var(--univer-white);
+.univer-ring-offset-gray-0 {
+  --univer-tw-ring-offset-color: var(--univer-gray-0);
 }
 
 .univer-drop-shadow-sm {
@@ -2114,6 +2116,10 @@
   background-color: var(--univer-red-400);
 }
 
+.hover\:univer-text-gray-0:hover {
+  color: var(--univer-gray-0);
+}
+
 .hover\:univer-text-gray-500:hover {
   color: var(--univer-gray-500);
 }
@@ -2126,10 +2132,6 @@
   color: var(--univer-primary-500);
 }
 
-.hover\:univer-text-white:hover {
-  color: var(--univer-white);
-}
-
 .hover\:univer-underline:hover {
   text-decoration-line: underline;
 }
@@ -2284,6 +2286,16 @@
   transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
 }
 
+.rtl\:univer-rotate-90:where([dir="rtl"], [dir="rtl"] *) {
+  --univer-tw-rotate: 90deg;
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(90deg) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+  transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
+}
+
+.rtl\:univer-flex-row-reverse:where([dir="rtl"], [dir="rtl"] *) {
+  flex-direction: row-reverse;
+}
+
 .rtl\:univer-rounded-l-md:where([dir="rtl"], [dir="rtl"] *) {
   border-top-left-radius: .375rem;
   border-bottom-left-radius: .375rem;
@@ -2380,6 +2392,10 @@
   background-color: #0000 !important;
 }
 
+.dark\:\!univer-text-gray-0:where(.univer-dark, .univer-dark *) {
+  color: var(--univer-gray-0) !important;
+}
+
 .dark\:\!univer-text-gray-100:where(.univer-dark, .univer-dark *) {
   color: var(--univer-gray-100) !important;
 }
@@ -2417,10 +2433,6 @@
   color: rgba(56, 189, 248, var(--univer-tw-text-opacity, 1)) !important;
 }
 
-.dark\:\!univer-text-white:where(.univer-dark, .univer-dark *) {
-  color: var(--univer-white) !important;
-}
-
 .dark\:\!univer-ring-primary-600:where(.univer-dark, .univer-dark *) {
   --univer-tw-ring-color: var(--univer-primary-600) !important;
 }
@@ -2446,11 +2458,7 @@
   background-color: var(--univer-gray-600) !important;
 }
 
-.dark\:data-\[selected\=true\]\:\!univer-bg-gray-600[data-selected="true"]:where(.univer-dark, .univer-dark *) {
-  background-color: var(--univer-gray-600) !important;
-}
-
-.dark\:data-\[state\=open\]\:\!univer-bg-gray-600[data-state="open"]:where(.univer-dark, .univer-dark *) {
+.dark\:data-\[selected\=true\]\:\!univer-bg-gray-600[data-selected="true"]:where(.univer-dark, .univer-dark *), .dark\:data-\[state\=open\]\:\!univer-bg-gray-600[data-state="open"]:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-600) !important;
 }
 
@@ -2466,8 +2474,8 @@
   background-color: var(--univer-gray-700) !important;
 }
 
-.dark\:hover\:\!univer-text-white:hover:where(.univer-dark, .univer-dark *) {
-  color: var(--univer-white) !important;
+.dark\:hover\:\!univer-text-gray-0:hover:where(.univer-dark, .univer-dark *) {
+  color: var(--univer-gray-0) !important;
 }
 
 .dark\:focus\:\!univer-border-primary-500:focus:where(.univer-dark, .univer-dark *) {
@@ -2503,7 +2511,6 @@
 }
 
 .\[\&\:\:-webkit-calendar-picker-indicator\]\:univer-appearance-none::-webkit-calendar-picker-indicator {
-  -webkit-appearance: none;
   appearance: none;
 }
 
@@ -2523,8 +2530,8 @@
   border-color: var(--univer-gray-600) !important;
 }
 
-.dark\:\[\&\>input\]\:\!univer-text-white > input:where(.univer-dark, .univer-dark *) {
-  color: var(--univer-white) !important;
+.dark\:\[\&\>input\]\:\!univer-text-gray-0 > input:where(.univer-dark, .univer-dark *) {
+  color: var(--univer-gray-0) !important;
 }
 
 .\[\&\>svg\]\:univer-block > svg {
@@ -2769,12 +2776,12 @@
   line-height: 1.25rem;
 }
 
-.\[\&_input\]\:univer-text-gray-700 input {
-  color: var(--univer-gray-700);
+.\[\&_input\]\:univer-text-gray-0 input {
+  color: var(--univer-gray-0);
 }
 
-.\[\&_input\]\:univer-text-white input {
-  color: var(--univer-white);
+.\[\&_input\]\:univer-text-gray-700 input {
+  color: var(--univer-gray-700);
 }
 
 .\[\&_input\]\:univer-outline-none input {