@semi-bot/semi-theme-fn-music 1.0.57 → 1.1.0

package/README.md

@@ -5,7 +5,7 @@ Operator: 秋之风腊肠.jpg
 
 ## Compatibility
 
-Compatible with Semi Foundation Version 2.101.0 or newer.
+Compatible with Semi Foundation Version 2.102.0 or newer.
     
 ## Version Release Note
     

package/package.json

@@ -1,6 +1,6 @@
 {
  "name": "@semi-bot/semi-theme-fn-music",
- "version": "1.0.57",
+ "version": "1.1.0",
  "description": "Semi theme generated by dsm. https://semi.design/dsm",
  "keywords": [
   "semi-theme",

package/raw.json

@@ -462,7 +462,7 @@
                 "success/--semi-color-success-disabled": "rgba(var(--semi-green-2), 1)",
                 "tertiary/--semi-color-tertiary-active": "rgba(255,255,255,0.2)",
                 "primary-blue/--semi-color-primary-blue": "rgba(80,156,255,1)",
-                "primary-pink/--semi-color-primary-pink": "rgba(var(--semi-pink-4),1)",
+                "primary-pink/--semi-color-primary-pink": "rgba(var(--semi-pink-4), 1)",
                 "secondary/--semi-color-secondary-hover": "rgba(var(--semi-light-blue-6), 1)",
                 "secondary/--semi-color-secondary-active": "rgba(var(--semi-light-blue-7), 1)",
                 "info-light/--semi-color-info-light-hover": "rgba(var(--semi-blue-5), 0.3)",
@@ -474,9 +474,10 @@
                 "danger-light/--semi-color-danger-light-hover": "rgba(var(--semi-red-5), 0.3)",
                 "primary-blue/--semi-color-primary-blue-hover": "rgba(124,183,255, 1)",
                 "primary-pink/--semi-color-primary-pink-hover": "rgba(var(--semi-pink-5),1)",
+                "primary-pink/--semi-color-primary-pink-light": "rgba(var(--semi-pink-4),0.12)",
                 "danger-light/--semi-color-danger-light-active": "rgba(var(--semi-red-5), 0.4)",
                 "primary-blue/--semi-color-primary-blue-active": "rgba(167,208,255, 1)",
-                "primary-pink/--semi-color-primary-pink-active": "rgba(var(--semi-pink-5),1)",
+                "primary-pink/--semi-color-primary-pink-active": "rgba(var(--semi-pink-5), 1)",
                 "progress-bar/--semi-color-progress-bar-buffer": "rgba(255,255,255,0.04)",
                 "progress-bar/--semi-color-progress-bar-played": "rgba(255,255,255,1)",
                 "danger-light/--semi-color-danger-light-default": "rgba(var(--semi-red-5), 0.2)",
@@ -489,6 +490,7 @@
                 "success-light/--semi-color-success-light-active": "rgba(var(--semi-green-5), 0.4)",
                 "warning-light/--semi-color-warning-light-active": "rgba(var(--semi-orange-5), 0.4)",
                 "primary-Orange/--semi-color-primary-Orange-hover": "rgba(255,190,121, 1)",
+                "primary-Orange/--semi-color-primary-Orange-light": "rgba(var(--semi-orange-4),0.16)",
                 "primary-light/--semi-color-primary-light-default": "rgba(var(--semi-brand-5), 0.2)",
                 "success-light/--semi-color-success-light-default": "rgba(var(--semi-green-5), 0.2)",
                 "tertiary-light/--semi-color-tertiary-light-hover": "rgba(var(--semi-grey-5), 0.3)",
@@ -771,6 +773,17 @@
         },
         "components": {
             "input": {
+                "color": {
+                    "$color-input_default-bg-hover": "var(--semi-color-fill-0)",
+                    "$color-input_default-bg-default": "var(--semi-color-fill-1)",
+                    "$color-input_default-bg-focus-hover": "var(--semi-color-fill-0)"
+                },
+                "height": {
+                    "$height-input_large": "40px",
+                    "$height-input_small": "24px",
+                    "$height-input_default": "36px",
+                    "$height-input_wrapper_default": "36px"
+                },
                 "radius": {
                     "$radius-input_wrapper": "10px"
                 }
@@ -794,6 +807,28 @@
                 "spacing": {
                     "$spacing-button_iconOnly_content-marginLeft": "4px"
                 }
+            },
+            "select": {
+                "height": {
+                    "$height-select_default": "36px"
+                },
+                "radius": {
+                    "$radius-select": "10px",
+                    "$radius-select_option": "10px"
+                },
+                "spacing": {
+                    "$spacing-select_option_list-paddingLeft": "4px",
+                    "$spacing-select_option_list-paddingRight": "4px"
+                }
+            },
+            "dropdown": {
+                "radius": {
+                    "$radius-dropdown": "12px",
+                    "$radius-dropdown_item": "4px"
+                },
+                "spacing": {
+                    "$spacing-dropdown_menu-paddingX": "4px"
+                }
             }
         },
         "typography": {

package/scss/global.scss

@@ -269,7 +269,7 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
 --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
 --semi-color-tertiary-active: rgba(255,255,255,0.2);
 --semi-color-primary-blue: rgba(80,156,255,1);
---semi-color-primary-pink: rgba(var(--semi-pink-4),1);
+--semi-color-primary-pink: rgba(var(--semi-pink-4), 1);
 --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
 --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
 --semi-color-info-light-hover: rgba(var(--semi-blue-5), 0.3);
@@ -281,9 +281,10 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
 --semi-color-danger-light-hover: rgba(var(--semi-red-5), 0.3);
 --semi-color-primary-blue-hover: rgba(124,183,255, 1);
 --semi-color-primary-pink-hover: rgba(var(--semi-pink-5),1);
+--semi-color-primary-pink-light: rgba(var(--semi-pink-4),0.12);
 --semi-color-danger-light-active: rgba(var(--semi-red-5), 0.4);
 --semi-color-primary-blue-active: rgba(167,208,255, 1);
---semi-color-primary-pink-active: rgba(var(--semi-pink-5),1);
+--semi-color-primary-pink-active: rgba(var(--semi-pink-5), 1);
 --semi-color-progress-bar-buffer: rgba(255,255,255,0.04);
 --semi-color-progress-bar-played: rgba(255,255,255,1);
 --semi-color-danger-light-default: rgba(var(--semi-red-5), 0.2);
@@ -296,6 +297,7 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
 --semi-color-success-light-active: rgba(var(--semi-green-5), 0.4);
 --semi-color-warning-light-active: rgba(var(--semi-orange-5), 0.4);
 --semi-color-primary-Orange-hover: rgba(255,190,121, 1);
+--semi-color-primary-Orange-light: rgba(var(--semi-orange-4),0.16);
 --semi-color-primary-light-default: rgba(var(--semi-brand-5), 0.2);
 --semi-color-success-light-default: rgba(var(--semi-green-5), 0.2);
 --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), 0.3);

package/scss/local.scss

@@ -1,3 +1,10 @@
+$color-input_default-bg-hover: var(--semi-color-fill-0);
+$color-input_default-bg-default: var(--semi-color-fill-1);
+$color-input_default-bg-focus-hover: var(--semi-color-fill-0);
+$height-input_large: 40px;
+$height-input_small: 24px;
+$height-input_default: 36px;
+$height-input_wrapper_default: 36px;
 $radius-input_wrapper: 10px;
 $color-modal-bg: var(--semi-color-modal-bg);
 $color-modal_mask-bg: var(--semi-color-pop-mask);
@@ -5,3 +12,11 @@ $color-button_light-bg-default: var(--semi-color-fill-0);
 $height-button_large: 44px;
 $radius-button: 8px;
 $spacing-button_iconOnly_content-marginLeft: 4px;
+$height-select_default: 36px;
+$radius-select: 10px;
+$radius-select_option: 10px;
+$spacing-select_option_list-paddingLeft: 4px;
+$spacing-select_option_list-paddingRight: 4px;
+$radius-dropdown: 12px;
+$radius-dropdown_item: 4px;
+$spacing-dropdown_menu-paddingX: 4px;

package/semi.css

@@ -618,7 +618,7 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
   --semi-color-success-disabled: rgba(var(--semi-green-2), 1);
   --semi-color-tertiary-active: rgba(255,255,255,0.2);
   --semi-color-primary-blue: rgba(80,156,255,1);
-  --semi-color-primary-pink: rgba(var(--semi-pink-4),1);
+  --semi-color-primary-pink: rgba(var(--semi-pink-4), 1);
   --semi-color-secondary-hover: rgba(var(--semi-light-blue-6), 1);
   --semi-color-secondary-active: rgba(var(--semi-light-blue-7), 1);
   --semi-color-info-light-hover: rgba(var(--semi-blue-5), 0.3);
@@ -630,9 +630,10 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
   --semi-color-danger-light-hover: rgba(var(--semi-red-5), 0.3);
   --semi-color-primary-blue-hover: rgba(124,183,255, 1);
   --semi-color-primary-pink-hover: rgba(var(--semi-pink-5),1);
+  --semi-color-primary-pink-light: rgba(var(--semi-pink-4),0.12);
   --semi-color-danger-light-active: rgba(var(--semi-red-5), 0.4);
   --semi-color-primary-blue-active: rgba(167,208,255, 1);
-  --semi-color-primary-pink-active: rgba(var(--semi-pink-5),1);
+  --semi-color-primary-pink-active: rgba(var(--semi-pink-5), 1);
   --semi-color-progress-bar-buffer: rgba(255,255,255,0.04);
   --semi-color-progress-bar-played: rgba(255,255,255,1);
   --semi-color-danger-light-default: rgba(var(--semi-red-5), 0.2);
@@ -645,6 +646,7 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
   --semi-color-success-light-active: rgba(var(--semi-green-5), 0.4);
   --semi-color-warning-light-active: rgba(var(--semi-orange-5), 0.4);
   --semi-color-primary-Orange-hover: rgba(255,190,121, 1);
+  --semi-color-primary-Orange-light: rgba(var(--semi-orange-4),0.16);
   --semi-color-primary-light-default: rgba(var(--semi-brand-5), 0.2);
   --semi-color-success-light-default: rgba(var(--semi-green-5), 0.2);
   --semi-color-tertiary-light-hover: rgba(var(--semi-grey-5), 0.3);
@@ -3410,6 +3412,7 @@ body, :host {
   padding-right: 12px;
   padding-top: 6px;
   padding-bottom: 6px;
+  font-family: inherit;
   font-size: 14px;
   line-height: 20px;
   font-weight: 600;
@@ -8356,7 +8359,7 @@ body, :host {
   box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3), 0px 4px 14px 0px rgba(0, 0, 0, 0.1);
   position: relative;
   z-index: 1050;
-  border-radius: var(--semi-border-radius-medium);
+  border-radius: 12px;
   background: var(--semi-color-bg-3);
   backdrop-filter: none;
   opacity: 0;
@@ -8369,7 +8372,7 @@ body, :host {
 }
 .semi-dropdown-menu {
   list-style: none;
-  padding: 4px 0;
+  padding: 4px 4px;
   margin: 0;
 }
 .semi-dropdown-title {
@@ -8393,7 +8396,7 @@ body, :host {
   display: flex;
   align-items: center;
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeOut) 0ms;
-  border-radius: 0px;
+  border-radius: 4px;
 }
 .semi-dropdown-item-hover {
   background-color: var(--semi-color-fill-0);
@@ -14666,7 +14669,7 @@ img[src=""], img:not([src]) {
   font-size: 14px;
   font-family: Montserrat, Helvetica, "Helvetica Neue", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Inter";
   line-height: 20px;
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-1);
   border: 1px transparent solid;
   border-radius: 10px;
   width: 100%;
@@ -14678,28 +14681,28 @@ img[src=""], img:not([src]) {
   transform: scale(var(--semi-transform_scale-none));
 }
 .semi-input-wrapper-default {
-  height: 32px;
+  height: 36px;
   font-size: 14px;
   font-family: Montserrat, Helvetica, "Helvetica Neue", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Inter";
   line-height: 20px;
-  line-height: 30px;
+  line-height: 36px;
 }
 .semi-input-wrapper-small {
   height: 24px;
   font-size: 14px;
   font-family: Montserrat, Helvetica, "Helvetica Neue", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Inter";
   line-height: 20px;
-  line-height: 22px;
+  line-height: 24px;
 }
 .semi-input-wrapper-large {
   height: 40px;
   font-size: 16px;
   font-family: Montserrat, Helvetica, "Helvetica Neue", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Inter";
   line-height: 22px;
-  line-height: 38px;
+  line-height: 40px;
 }
 .semi-input-wrapper:hover {
-  background-color: var(--semi-color-fill-1);
+  background-color: var(--semi-color-fill-0);
   border-color: transparent;
 }
 .semi-input-wrapper-focus {
@@ -14829,14 +14832,14 @@ img[src=""], img:not([src]) {
   background-color: transparent;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-1);
   border: 1px transparent solid;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover {
-  background-color: var(--semi-color-fill-1);
+  background-color: var(--semi-color-fill-0);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:hover ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:hover ~ .semi-input-modebtn {
-  background-color: var(--semi-color-fill-1);
+  background-color: var(--semi-color-fill-0);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus {
   border: 1px var(--semi-color-focus-border) solid;
@@ -14875,7 +14878,7 @@ img[src=""], img:not([src]) {
   background-color: var(--semi-color-fill-2);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover {
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-1);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input-modebtn:hover:last-child {
   border-radius: 0 10px 10px 0;
@@ -14990,25 +14993,25 @@ img[src=""], img:not([src]) {
   color: var(--semi-color-text-2);
 }
 .semi-input-large {
-  height: 38px;
+  height: 40px;
   font-size: 16px;
   font-family: Montserrat, Helvetica, "Helvetica Neue", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Inter";
   line-height: 22px;
-  line-height: 38px;
+  line-height: 40px;
 }
 .semi-input-small {
-  height: 22px;
+  height: 24px;
   font-size: 14px;
   font-family: Montserrat, Helvetica, "Helvetica Neue", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Inter";
   line-height: 20px;
-  line-height: 22px;
+  line-height: 24px;
 }
 .semi-input-default {
-  height: 30px;
+  height: 36px;
   font-size: 14px;
   font-family: Montserrat, Helvetica, "Helvetica Neue", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Inter";
   line-height: 20px;
-  line-height: 30px;
+  line-height: 36px;
 }
 .semi-input-disabled {
   cursor: not-allowed;
@@ -15061,7 +15064,7 @@ img[src=""], img:not([src]) {
   height: 100%;
   display: flex;
   align-items: center;
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-1);
   color: var(--semi-color-text-2);
   font-size: 14px;
   font-family: Montserrat, Helvetica, "Helvetica Neue", "PingFang SC", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif, "Inter";
@@ -18543,7 +18546,7 @@ img[src=""], img:not([src]) {
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
-  border-radius: 0px;
+  border-radius: 10px;
   position: relative;
   display: flex;
   flex-wrap: nowrap;
@@ -18604,9 +18607,9 @@ img[src=""], img:not([src]) {
 
 .semi-select {
   box-sizing: border-box;
-  border-radius: var(--semi-border-radius-small);
+  border-radius: 10px;
   border: 1px solid transparent;
-  height: 32px;
+  height: 36px;
   font-weight: 400;
   background-color: var(--semi-color-fill-0);
   display: inline-flex;
@@ -18790,7 +18793,7 @@ img[src=""], img:not([src]) {
 }
 .semi-select-multiple .semi-select-content-wrapper {
   width: 100%;
-  min-height: 30px;
+  min-height: 34px;
   flex-wrap: wrap;
 }
 .semi-select-multiple .semi-select-content-wrapper-empty {
@@ -18965,8 +18968,8 @@ img[src=""], img:not([src]) {
 .semi-select-option-list-wrapper {
   padding-top: 4px;
   padding-bottom: 4px;
-  padding-left: 0px;
-  padding-right: 0px;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 
 .semi-select-option-list {
@@ -26777,7 +26780,7 @@ p.semi-typography-extended,
   border: 1px transparent solid;
   border-radius: 10px;
   vertical-align: bottom;
-  background-color: var(--semi-color-fill-0);
+  background-color: var(--semi-color-fill-1);
   transition: background-color var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none), border var(--semi-transition_duration-none) var(--semi-transition_function-easeIn) var(--semi-transition_delay-none);
 }
 .semi-input-textarea-wrapper-resizeX {
@@ -26786,7 +26789,7 @@ p.semi-typography-extended,
   max-width: 100%;
 }
 .semi-input-textarea-wrapper:hover {
-  background-color: var(--semi-color-fill-1);
+  background-color: var(--semi-color-fill-0);
 }
 .semi-input-textarea-wrapper-focus {
   background-color: var(--semi-color-fill-0);