@univerjs/design 1.0.0-beta.0 → 1.0.0-beta.1

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

@@ -655,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));
@@ -1038,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);
 }
@@ -1074,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;
 }
@@ -1100,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);
 }
@@ -1156,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));
 }
@@ -1472,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;
 }
@@ -1480,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));
@@ -1498,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);
 }
@@ -1578,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;
 }
@@ -1668,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);
 }
@@ -1676,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;
 }
@@ -1688,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 {
@@ -2110,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);
 }
@@ -2122,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;
 }
@@ -2280,6 +2286,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));
 }
 
+.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;
 }
@@ -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;
 }
@@ -2462,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 *) {
@@ -2518,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 {
@@ -2764,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 {