@kupola/kupola 1.2.0 → 1.4.0

package/dist/css/brand-themes.css

@@ -0,0 +1,300 @@
+/* ===== Brand Color Themes ===== */
+/* 仅替换品牌绿色系，其他颜色保持不变 */
+
+/* 翠绿色（默认）- 原品牌色 */
+[data-brand="green"] {
+  --bg-brand: #32F08C;
+  --bg-brand-hover: #0FDC78;
+  --bg-brand-disabled: rgba(50, 240, 140, 0.2);
+  --bg-brand-popup: rgba(50, 240, 140, 0.12);
+  --text-brand: #32F08C;
+  --text-brand-hover: #0FDC78;
+  --icon-brand: #32F08C;
+  --icon-brand-hover: #0FDC78;
+  --border-brand: #32F08C;
+  --text-onbrand: #0C0C0D;
+  --icon-onbrand: #0C0C0D;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 雄黄 - 橙色系 */
+[data-brand="xionghuang"] {
+  --bg-brand: #FF9900;
+  --bg-brand-hover: #E68A00;
+  --bg-brand-disabled: rgba(255, 153, 0, 0.2);
+  --bg-brand-popup: rgba(255, 153, 0, 0.12);
+  --text-brand: #FF9900;
+  --text-brand-hover: #E68A00;
+  --icon-brand: #FF9900;
+  --icon-brand-hover: #E68A00;
+  --border-brand: #FF9900;
+  --text-onbrand: #0C0C0D;
+  --icon-onbrand: #0C0C0D;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 姜黄 - 黄色系 */
+[data-brand="jianghuang"] {
+  --bg-brand: #E2C027;
+  --bg-brand-hover: #C9AB1F;
+  --bg-brand-disabled: rgba(226, 192, 39, 0.2);
+  --bg-brand-popup: rgba(226, 192, 39, 0.12);
+  --text-brand: #E2C027;
+  --text-brand-hover: #C9AB1F;
+  --icon-brand: #E2C027;
+  --icon-brand-hover: #C9AB1F;
+  --border-brand: #E2C027;
+  --text-onbrand: #0C0C0D;
+  --icon-onbrand: #0C0C0D;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 蓝绿 - 青色系 */
+[data-brand="lanlv"] {
+  --bg-brand: #12A182;
+  --bg-brand-hover: #0F8F70;
+  --bg-brand-disabled: rgba(18, 161, 130, 0.2);
+  --bg-brand-popup: rgba(18, 161, 130, 0.12);
+  --text-brand: #12A182;
+  --text-brand-hover: #0F8F70;
+  --icon-brand: #12A182;
+  --icon-brand-hover: #0F8F70;
+  --border-brand: #12A182;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 孔雀蓝 - 蓝绿色系 */
+[data-brand="kongquelan"] {
+  --bg-brand: #0EB0C9;
+  --bg-brand-hover: #0C99B0;
+  --bg-brand-disabled: rgba(14, 176, 201, 0.2);
+  --bg-brand-popup: rgba(14, 176, 201, 0.12);
+  --text-brand: #0EB0C9;
+  --text-brand-hover: #0C99B0;
+  --icon-brand: #0EB0C9;
+  --icon-brand-hover: #0C99B0;
+  --border-brand: #0EB0C9;
+  --text-onbrand: #0C0C0D;
+  --icon-onbrand: #0C0C0D;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 玫瑰紫 - 紫色系 */
+[data-brand="meiguizi"] {
+  --bg-brand: #BA2F7B;
+  --bg-brand-hover: #A5296D;
+  --bg-brand-disabled: rgba(186, 47, 123, 0.2);
+  --bg-brand-popup: rgba(186, 47, 123, 0.12);
+  --text-brand: #BA2F7B;
+  --text-brand-hover: #A5296D;
+  --icon-brand: #BA2F7B;
+  --icon-brand-hover: #A5296D;
+  --border-brand: #BA2F7B;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 柿红 - 红色系 */
+[data-brand="shihong"] {
+  --bg-brand: #F2481B;
+  --bg-brand-hover: #D94018;
+  --bg-brand-disabled: rgba(242, 72, 27, 0.2);
+  --bg-brand-popup: rgba(242, 72, 27, 0.12);
+  --text-brand: #F2481B;
+  --text-brand-hover: #D94018;
+  --icon-brand: #F2481B;
+  --icon-brand-hover: #D94018;
+  --border-brand: #F2481B;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 紫云 - 淡紫色系 */
+[data-brand="quhong"] {
+  --bg-brand: #B1A6CC;
+  --bg-brand-hover: #9E92B5;
+  --bg-brand-disabled: rgba(177, 166, 204, 0.2);
+  --bg-brand-popup: rgba(177, 166, 204, 0.12);
+  --text-brand: #B1A6CC;
+  --text-brand-hover: #9E92B5;
+  --icon-brand: #B1A6CC;
+  --icon-brand-hover: #9E92B5;
+  --border-brand: #B1A6CC;
+  --text-onbrand: #0C0C0D;
+  --icon-onbrand: #0C0C0D;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 山茶红 - 红色系（与曲红相同） */
+[data-brand="shanchahong"] {
+  --bg-brand: #F05A46;
+  --bg-brand-hover: #D9503F;
+  --bg-brand-disabled: rgba(240, 90, 70, 0.2);
+  --bg-brand-popup: rgba(240, 90, 70, 0.12);
+  --text-brand: #F05A46;
+  --text-brand-hover: #D9503F;
+  --icon-brand: #F05A46;
+  --icon-brand-hover: #D9503F;
+  --border-brand: #F05A46;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 曾青 - 蓝紫色系 */
+[data-brand="zengqing"] {
+  --bg-brand: #535164;
+  --bg-brand-hover: #4A4859;
+  --bg-brand-disabled: rgba(83, 81, 100, 0.2);
+  --bg-brand-popup: rgba(83, 81, 100, 0.12);
+  --text-brand: #535164;
+  --text-brand-hover: #4A4859;
+  --icon-brand: #535164;
+  --icon-brand-hover: #4A4859;
+  --border-brand: #535164;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 柔蓝 - 蓝色系 */
+[data-brand="roulan"] {
+  --bg-brand: #106898;
+  --bg-brand-hover: #0E5C87;
+  --bg-brand-disabled: rgba(16, 104, 152, 0.2);
+  --bg-brand-popup: rgba(16, 104, 152, 0.12);
+  --text-brand: #106898;
+  --text-brand-hover: #0E5C87;
+  --icon-brand: #106898;
+  --icon-brand-hover: #0E5C87;
+  --border-brand: #106898;
+  --text-onbrand: #FFFFFF;
+  --icon-onbrand: #FFFFFF;
+  --color-primary: var(--bg-brand);
+  --color-primary-hover: var(--bg-brand-hover);
+  --color-primary-disabled: var(--bg-brand-disabled);
+  --color-primary-soft: var(--bg-brand-popup);
+  --color-accent: var(--bg-brand);
+  --color-on-primary: var(--text-onbrand);
+}
+
+/* 浅色主题下的品牌色适配 */
+[data-theme="light"][data-brand="green"] {
+  --bg-brand: #32F08C;
+  --bg-brand-hover: #0FDC78;
+  --bg-brand-popup: rgba(50, 240, 140, 0.15);
+}
+
+[data-theme="light"][data-brand="xionghuang"] {
+  --bg-brand: #FF9900;
+  --bg-brand-hover: #E68A00;
+  --bg-brand-popup: rgba(255, 153, 0, 0.15);
+}
+
+[data-theme="light"][data-brand="jianghuang"] {
+  --bg-brand: #E2C027;
+  --bg-brand-hover: #C9AB1F;
+  --bg-brand-popup: rgba(226, 192, 39, 0.15);
+}
+
+[data-theme="light"][data-brand="lanlv"] {
+  --bg-brand: #12A182;
+  --bg-brand-hover: #0F8F70;
+  --bg-brand-popup: rgba(18, 161, 130, 0.15);
+}
+
+[data-theme="light"][data-brand="kongquelan"] {
+  --bg-brand: #0EB0C9;
+  --bg-brand-hover: #0C99B0;
+  --bg-brand-popup: rgba(14, 176, 201, 0.15);
+}
+
+[data-theme="light"][data-brand="meiguizi"] {
+  --bg-brand: #BA2F7B;
+  --bg-brand-hover: #A5296D;
+  --bg-brand-popup: rgba(186, 47, 123, 0.15);
+}
+
+[data-theme="light"][data-brand="shihong"] {
+  --bg-brand: #F2481B;
+  --bg-brand-hover: #D94018;
+  --bg-brand-popup: rgba(242, 72, 27, 0.15);
+}
+
+[data-theme="light"][data-brand="quhong"] {
+  --bg-brand: #B1A6CC;
+  --bg-brand-hover: #9E92B5;
+  --bg-brand-popup: rgba(177, 166, 204, 0.15);
+}
+
+[data-theme="light"][data-brand="shanchahong"] {
+  --bg-brand: #F05A46;
+  --bg-brand-hover: #D9503F;
+  --bg-brand-popup: rgba(240, 90, 70, 0.15);
+}
+
+[data-theme="light"][data-brand="zengqing"] {
+  --bg-brand: #535164;
+  --bg-brand-hover: #4A4859;
+  --bg-brand-popup: rgba(83, 81, 100, 0.15);
+}
+
+[data-theme="light"][data-brand="roulan"] {
+  --bg-brand: #106898;
+  --bg-brand-hover: #0E5C87;
+  --bg-brand-popup: rgba(16, 104, 152, 0.15);
+}