@semi-bot/semi-theme-fn-music 1.0.27 → 1.0.29

package/package.json

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

package/raw.json

@@ -414,7 +414,7 @@
                 "focus/--semi-color-focus-border": "rgba(var(--semi-brand-5), 1)",
                 "info/--semi-color-info-disabled": "rgba(var(--semi-blue-2), 1)",
                 "overlay/--semi-color-overlay-bg": "rgba(22, 22, 26, 0.6)",
-                "sidebar/--semi-color-sidebar-bg": "rgba(56,56,56,0.7)",
+                "sidebar/--semi-color-sidebar-bg": "rgba(0,0,0,0.7)",
                 "danger/--semi-color-danger-hover": "rgba(var(--semi-red-6), 1)",
                 "highlight/--semi-color-highlight": "rgba(var(--semi-white), 1)",
                 "secondary/--semi-color-secondary": "rgba(var(--semi-light-blue-5), 1)",
@@ -532,7 +532,7 @@
                 "focus/--semi-color-focus-border": "rgba(var(--semi-brand-5), 1)",
                 "info/--semi-color-info-disabled": "rgba(var(--semi-blue-2), 1)",
                 "overlay/--semi-color-overlay-bg": "rgba(22, 22, 26, 0.6)",
-                "sidebar/--semi-color-sidebar-bg": "rgba(164,161,174,0.9)",
+                "sidebar/--semi-color-sidebar-bg": "rgba(243,242,245,0.9)",
                 "danger/--semi-color-danger-hover": "rgba(var(--semi-red-6), 1)",
                 "highlight/--semi-color-highlight": "rgba(var(--semi-black), 1)",
                 "secondary/--semi-color-secondary": "rgba(var(--semi-light-blue-5), 1)",
@@ -564,10 +564,13 @@
                 "tertiary/--semi-color-tertiary-disabled": "rgba(0,0,0,0.04)",
                 "info-light/--semi-color-info-light-hover": "rgba(var(--semi-blue-1), 1)",
                 "info-light/--semi-color-info-light-active": "rgba(var(--semi-blue-2), 1)",
+                "progress-bar/--semi-color-progress-bar-bg": "rgba(18,18,20,0.08)",
                 "secondary/--semi-color-secondary-disabled": "rgba(var(--semi-light-blue-2), 1)",
                 "info-light/--semi-color-info-light-default": "rgba(var(--semi-blue-0), 1)",
                 "danger-light/--semi-color-danger-light-hover": "rgba(var(--semi-red-1), 1)",
                 "danger-light/--semi-color-danger-light-active": "rgba(var(--semi-red-2), 1)",
+                "progress-bar/--semi-color-progress-bar-buffer": "rgba(18,18,20,0.06)",
+                "progress-bar/--semi-color-progress-bar-played": "rgba(18,18,20,1)",
                 "danger-light/--semi-color-danger-light-default": "rgba(var(--semi-red-0), 1)",
                 "primary-light/--semi-color-primary-light-hover": "rgba(var(--semi-brand-1), 1)",
                 "success-light/--semi-color-success-light-hover": "rgba(var(--semi-green-1), 1)",
@@ -710,7 +713,33 @@
                 "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)"
             }
         },
-        "components": {},
+        "components": {
+            "input": {
+                "radius": {
+                    "$radius-input_wrapper": "10px"
+                }
+            },
+            "modal": {
+                "color": {
+                    "$color-modal-bg": "var(--semi-color-modal-bg)",
+                    "$color-modal_mask-bg": "var(--semi-color-pop-mask)"
+                }
+            },
+            "button": {
+                "color": {
+                    "$color-button_light-bg-default": "var(--semi-color-fill-0)"
+                },
+                "height": {
+                    "$height-button_large": "44px"
+                },
+                "radius": {
+                    "$radius-button": "8px"
+                },
+                "spacing": {
+                    "$spacing-button_iconOnly_content-marginLeft": "4px"
+                }
+            }
+        },
         "typography": {
             "Header": {
                 "header-1": {

package/scss/global.scss

@@ -63,7 +63,7 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
 --semi-color-focus-border: rgba(var(--semi-brand-5), 1);
 --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
 --semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
---semi-color-sidebar-bg: rgba(164,161,174,0.9);
+--semi-color-sidebar-bg: rgba(243,242,245,0.9);
 --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
 --semi-color-highlight: rgba(var(--semi-black), 1);
 --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
@@ -95,10 +95,13 @@ body, body[theme-mode="dark"] .semi-always-light, :host, :host .semi-always-ligh
 --semi-color-tertiary-disabled: rgba(0,0,0,0.04);
 --semi-color-info-light-hover: rgba(var(--semi-blue-1), 1);
 --semi-color-info-light-active: rgba(var(--semi-blue-2), 1);
+--semi-color-progress-bar-bg: rgba(18,18,20,0.08);
 --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
 --semi-color-info-light-default: rgba(var(--semi-blue-0), 1);
 --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1);
 --semi-color-danger-light-active: rgba(var(--semi-red-2), 1);
+--semi-color-progress-bar-buffer: rgba(18,18,20,0.06);
+--semi-color-progress-bar-played: rgba(18,18,20,1);
 --semi-color-danger-light-default: rgba(var(--semi-red-0), 1);
 --semi-color-primary-light-hover: rgba(var(--semi-brand-1), 1);
 --semi-color-success-light-hover: rgba(var(--semi-green-1), 1);
@@ -194,7 +197,7 @@ body[theme-mode="dark"], body .semi-always-dark, :host([theme-mode="dark"]), :ho
 --semi-color-focus-border: rgba(var(--semi-brand-5), 1);
 --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
 --semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
---semi-color-sidebar-bg: rgba(56,56,56,0.7);
+--semi-color-sidebar-bg: rgba(0,0,0,0.7);
 --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
 --semi-color-highlight: rgba(var(--semi-white), 1);
 --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);

package/scss/local.scss

@@ -0,0 +1,7 @@
+$radius-input_wrapper: 10px;
+$color-modal-bg: var(--semi-color-modal-bg);
+$color-modal_mask-bg: var(--semi-color-pop-mask);
+$color-button_light-bg-default: var(--semi-color-fill-0);
+$height-button_large: 44px;
+$radius-button: 8px;
+$spacing-button_iconOnly_content-marginLeft: 4px;

package/semi.css

@@ -413,7 +413,7 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
   --semi-color-focus-border: rgba(var(--semi-brand-5), 1);
   --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
   --semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
-  --semi-color-sidebar-bg: rgba(164,161,174,0.9);
+  --semi-color-sidebar-bg: rgba(243,242,245,0.9);
   --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
   --semi-color-highlight: rgba(var(--semi-black), 1);
   --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
@@ -445,10 +445,13 @@ body, body[theme-mode=dark] .semi-always-light, :host, :host .semi-always-light
   --semi-color-tertiary-disabled: rgba(0,0,0,0.04);
   --semi-color-info-light-hover: rgba(var(--semi-blue-1), 1);
   --semi-color-info-light-active: rgba(var(--semi-blue-2), 1);
+  --semi-color-progress-bar-bg: rgba(18,18,20,0.08);
   --semi-color-secondary-disabled: rgba(var(--semi-light-blue-2), 1);
   --semi-color-info-light-default: rgba(var(--semi-blue-0), 1);
   --semi-color-danger-light-hover: rgba(var(--semi-red-1), 1);
   --semi-color-danger-light-active: rgba(var(--semi-red-2), 1);
+  --semi-color-progress-bar-buffer: rgba(18,18,20,0.06);
+  --semi-color-progress-bar-played: rgba(18,18,20,1);
   --semi-color-danger-light-default: rgba(var(--semi-red-0), 1);
   --semi-color-primary-light-hover: rgba(var(--semi-brand-1), 1);
   --semi-color-success-light-hover: rgba(var(--semi-green-1), 1);
@@ -543,7 +546,7 @@ body[theme-mode=dark], body .semi-always-dark, :host([theme-mode=dark]), :host .
   --semi-color-focus-border: rgba(var(--semi-brand-5), 1);
   --semi-color-info-disabled: rgba(var(--semi-blue-2), 1);
   --semi-color-overlay-bg: rgba(22, 22, 26, 0.6);
-  --semi-color-sidebar-bg: rgba(56,56,56,0.7);
+  --semi-color-sidebar-bg: rgba(0,0,0,0.7);
   --semi-color-danger-hover: rgba(var(--semi-red-6), 1);
   --semi-color-highlight: rgba(var(--semi-white), 1);
   --semi-color-secondary: rgba(var(--semi-light-blue-5), 1);
@@ -3346,7 +3349,7 @@ body, :host {
   cursor: pointer;
   user-select: none;
   border: 0 transparent solid;
-  border-radius: var(--semi-border-radius-small);
+  border-radius: 8px;
   padding-left: 12px;
   padding-right: 12px;
   padding-top: 6px;
@@ -3615,7 +3618,7 @@ body, :host {
   font-weight: 600;
 }
 .semi-button-size-large {
-  height: 40px;
+  height: 44px;
   padding-top: 10px;
   padding-bottom: 10px;
   padding-left: 16px;
@@ -3815,7 +3818,7 @@ body, :host {
 }
 .semi-rtl .semi-button-content-right,
 .semi-portal-rtl .semi-button-content-right {
-  margin-right: 8px;
+  margin-right: 4px;
   margin-left: 0;
 }
 
@@ -14609,7 +14612,7 @@ img[src=""], img:not([src]) {
   line-height: 20px;
   background-color: var(--semi-color-fill-0);
   border: 1px transparent solid;
-  border-radius: var(--semi-border-radius-small);
+  border-radius: 10px;
   width: 100%;
   outline: none;
   cursor: text;
@@ -14732,7 +14735,7 @@ img[src=""], img:not([src]) {
 }
 .semi-input-wrapper .semi-input-clearbtn:focus-visible,
 .semi-input-wrapper .semi-input-modebtn:focus-visible {
-  border-radius: var(--semi-border-radius-small);
+  border-radius: 10px;
   outline: 2px solid var(--semi-color-primary-light-active);
   outline-offset: -1px;
 }
@@ -14745,14 +14748,14 @@ img[src=""], img:not([src]) {
   justify-content: center;
 }
 .semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input {
-  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  border-radius: 0 10px 10px 0;
 }
 .semi-input-wrapper.semi-input-wrapper__with-append-only .semi-input:not(:last-child) {
   border-right-style: none;
   border-radius: 0;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input {
-  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+  border-radius: 10px 0 0 10px;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend-only .semi-input:not(:last-child) {
   border-right-style: none;
@@ -14795,7 +14798,7 @@ img[src=""], img:not([src]) {
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn {
   border: 1px var(--semi-color-focus-border) solid;
-  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  border-radius: 0 10px 10px 0;
   border-left-style: none;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus + .semi-input-clearbtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus + .semi-input-clearbtn:not(:last-child) {
@@ -14803,7 +14806,7 @@ img[src=""], img:not([src]) {
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn, .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn {
   border: 1px var(--semi-color-focus-border) solid;
-  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  border-radius: 0 10px 10px 0;
   border-left-style: none;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend .semi-input:focus ~ .semi-input-modebtn:not(:last-child), .semi-input-wrapper.semi-input-wrapper__with-append .semi-input:focus ~ .semi-input-modebtn:not(:last-child) {
@@ -14819,7 +14822,7 @@ img[src=""], img:not([src]) {
   background-color: var(--semi-color-fill-0);
 }
 .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 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  border-radius: 0 10px 10px 0;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error {
   border-color: transparent;
@@ -14854,7 +14857,7 @@ img[src=""], img:not([src]) {
   background-color: var(--semi-color-danger-light-default);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-error .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-error .semi-input-modebtn:hover:last-child {
-  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  border-radius: 0 10px 10px 0;
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning {
   border-color: transparent;
@@ -14889,7 +14892,7 @@ img[src=""], img:not([src]) {
   background-color: var(--semi-color-warning-light-default);
 }
 .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-prepend.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-clearbtn:hover:last-child, .semi-input-wrapper.semi-input-wrapper__with-append.semi-input-wrapper-warning .semi-input-modebtn:hover:last-child {
-  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  border-radius: 0 10px 10px 0;
 }
 .semi-input-wrapper-disabled {
   cursor: not-allowed;
@@ -15013,11 +15016,11 @@ img[src=""], img:not([src]) {
   padding: 0 12px;
 }
 .semi-input-append {
-  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  border-radius: 0 10px 10px 0;
   border-left: 1px transparent solid;
 }
 .semi-input-prepend {
-  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+  border-radius: 10px 0 0 10px;
   border-right: 1px transparent solid;
 }
 .semi-input-disabled::placeholder {
@@ -15039,13 +15042,13 @@ img[src=""], img:not([src]) {
 .semi-input-group .semi-tagInput:first-child,
 .semi-input-group .semi-cascader:first-child,
 .semi-input-group .semi-tree-select:first-child, .semi-input-group > .semi-input-wrapper:first-child {
-  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+  border-radius: 10px 0 0 10px;
 }
 .semi-input-group .semi-select:last-child,
 .semi-input-group .semi-tagInput:last-child,
 .semi-input-group .semi-cascader:last-child,
 .semi-input-group .semi-tree-select:last-child, .semi-input-group > .semi-input-wrapper:last-child {
-  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  border-radius: 0 10px 10px 0;
 }
 .semi-input-group .semi-select:not(:last-child),
 .semi-input-group .semi-tagInput:not(:last-child),
@@ -15086,7 +15089,7 @@ img[src=""], img:not([src]) {
 .semi-input-group .semi-timepicker:first-child .semi-datepicker-range-input,
 .semi-input-group .semi-autocomplete:first-child .semi-input-wrapper,
 .semi-input-group .semi-autocomplete:first-child .semi-datepicker-range-input {
-  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+  border-radius: 10px 0 0 10px;
 }
 .semi-input-group .semi-input-number:last-child .semi-input-wrapper,
 .semi-input-group .semi-input-number:last-child .semi-datepicker-range-input,
@@ -15096,7 +15099,7 @@ img[src=""], img:not([src]) {
 .semi-input-group .semi-timepicker:last-child .semi-datepicker-range-input,
 .semi-input-group .semi-autocomplete:last-child .semi-input-wrapper,
 .semi-input-group .semi-autocomplete:last-child .semi-datepicker-range-input {
-  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  border-radius: 0 10px 10px 0;
 }
 .semi-input-group .semi-input-number:not(:last-child),
 .semi-input-group .semi-datepicker:not(:last-child),
@@ -15724,7 +15727,7 @@ img[src=""], img:not([src]) {
   right: 0;
   left: 0;
   bottom: 0;
-  background-color: var(--semi-color-overlay-bg);
+  background-color: var(--semi-color-pop-mask);
   backdrop-filter: none;
   height: 100%;
   z-index: 1000;
@@ -15766,7 +15769,7 @@ img[src=""], img:not([src]) {
   width: 100%;
   box-sizing: border-box;
   flex-direction: column;
-  background-color: var(--semi-color-bg-2);
+  background-color: var(--semi-color-modal-bg);
   backdrop-filter: none;
   border: 1px solid var(--semi-color-border);
   border-radius: var(--semi-border-radius-large);
@@ -26478,7 +26481,7 @@ p.semi-typography-extended,
   align-items: center;
 }
 .semi-button-content-right {
-  margin-left: 8px;
+  margin-left: 4px;
   display: flex;
   align-items: center;
 }
@@ -26584,7 +26587,7 @@ p.semi-typography-extended,
 }
 .semi-rtl .semi-button-content-right,
 .semi-portal-rtl .semi-button-content-right {
-  margin-right: 8px;
+  margin-right: 4px;
   margin-left: 0;
 }
 
@@ -26594,7 +26597,7 @@ p.semi-typography-extended,
   position: relative;
   width: 100%;
   border: 1px transparent solid;
-  border-radius: var(--semi-border-radius-small);
+  border-radius: 10px;
   vertical-align: bottom;
   background-color: var(--semi-color-fill-0);
   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);
@@ -26792,7 +26795,7 @@ p.semi-typography-extended,
   text-align: right;
   user-select: none;
   min-width: 36px;
-  border-radius: var(--semi-border-radius-small) 0 0 var(--semi-border-radius-small);
+  border-radius: 10px 0 0 10px;
   overflow-y: auto;
   overflow-x: hidden;
   scrollbar-width: none;
@@ -26813,7 +26816,7 @@ p.semi-typography-extended,
   box-sizing: border-box;
 }
 .semi-input-textarea-wrapper-withLineNumber .semi-input-textarea {
-  border-radius: 0 var(--semi-border-radius-small) var(--semi-border-radius-small) 0;
+  border-radius: 0 10px 10px 0;
   line-height: 1.5;
   flex: 1;
 }