@sdata/web-vue 4.7.1 → 5.0.0

package/es/collapse/style/index.css

@@ -21,26 +21,26 @@
 }
 
 .sd-icon-hover.sd-collapse-item-icon-hover:hover::before {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-collapse-collapse-expand-icon-color-bg, var(--component-collapse-expand-icon-color-bg, var(--sd-color-fill-2)));
 }
 
 .sd-collapse {
   overflow: hidden;
-  line-height: 1.5715;
-  border: 1px solid var(--sd-color-neutral-3);
-  border-radius: var(--sd-border-radius-medium);
+  line-height: var(--component-collapse-collapse-line-height, var(--component-collapse-line-height, 1.5715));
+  border: var(--component-collapse-collapse-border-width, var(--component-collapse-border-width, var(--border-1, 1px))) solid var(--component-collapse-collapse-color-border, var(--component-collapse-color-border, var(--sd-color-neutral-3)));
+  border-radius: var(--component-collapse-collapse-border-radius, var(--component-collapse-border-radius, var(--sd-border-radius-medium)));
 }
 .sd-collapse-item {
   box-sizing: border-box;
-  border-bottom: 1px solid var(--sd-color-border-2);
+  border-bottom: var(--component-collapse-collapse-title-border-width, var(--component-collapse-title-border-width, var(--border-1, 1px))) solid var(--component-collapse-collapse-item-color-border, var(--component-collapse-item-color-border, var(--sd-color-border-2)));
 }
 .sd-collapse-item-active > .sd-collapse-item-header {
-  background-color: var(--sd-color-bg-2);
-  border-color: var(--sd-color-neutral-3);
+  background-color: var(--component-collapse-collapse-title-color-bg-active, var(--component-collapse-title-color-bg-active, var(--sd-color-bg-2)));
+  border-color: var(--component-collapse-collapse-title-color-border, var(--component-collapse-title-color-border, var(--sd-color-neutral-3)));
   transition: border-color 0s ease 0s;
 }
 .sd-collapse-item-active > .sd-collapse-item-header .sd-collapse-item-header-title {
-  font-weight: 500;
+  font-weight: var(--component-collapse-collapse-title-font-weight-active, var(--component-collapse-title-font-weight-active, var(--font-weight-500, 500)));
 }
 .sd-collapse-item-active > .sd-collapse-item-header .sd-collapse-item-expand-icon {
   transform: rotate(90deg);
@@ -54,13 +54,13 @@
   align-items: center;
   justify-content: space-between;
   box-sizing: border-box;
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding-top: var(--component-collapse-collapse-title-padding-vertical, var(--component-collapse-title-padding-vertical, var(--spacing-4, 8px)));
+  padding-bottom: var(--component-collapse-collapse-title-padding-vertical, var(--component-collapse-title-padding-vertical, var(--spacing-4, 8px)));
   overflow: hidden;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  line-height: 24px;
-  background-color: var(--sd-color-bg-2);
+  color: var(--component-collapse-collapse-title-color-text, var(--component-collapse-title-color-text, var(--sd-color-text-1)));
+  font-size: var(--component-collapse-collapse-title-font-size, var(--component-collapse-title-font-size, var(--font-size-body-3, 14px)));
+  line-height: var(--component-collapse-collapse-title-line-height, var(--component-collapse-title-line-height, 24px));
+  background-color: var(--component-collapse-collapse-title-color-bg, var(--component-collapse-title-color-bg, var(--sd-color-bg-2)));
   border-bottom: 1px solid transparent;
   cursor: pointer;
   transition: border-color 0s ease 0.19s;
@@ -77,12 +77,12 @@
   padding-left: 13px;
 }
 .sd-collapse-item-header-disabled {
-  color: var(--sd-color-text-4);
-  background-color: var(--sd-color-bg-2);
+  color: var(--component-collapse-collapse-title-color-text-disabled, var(--component-collapse-title-color-text-disabled, var(--sd-color-text-4)));
+  background-color: var(--component-collapse-collapse-title-color-bg-disabled, var(--component-collapse-title-color-bg-disabled, var(--sd-color-bg-2)));
   cursor: not-allowed;
 }
 .sd-collapse-item-header-disabled .sd-collapse-item-header-icon {
-  color: var(--sd-color-text-4);
+  color: var(--component-collapse-collapse-title-color-text-disabled, var(--component-collapse-title-color-text-disabled, var(--sd-color-text-4)));
 }
 .sd-collapse-item-header-title {
   display: inline;
@@ -108,8 +108,8 @@
 .sd-collapse-item .sd-collapse-item-expand-icon {
   position: relative;
   display: block;
-  color: var(--sd-color-neutral-7);
-  font-size: 14px;
+  color: var(--component-collapse-collapse-color-expand-icon, var(--component-collapse-color-expand-icon, var(--sd-color-neutral-7)));
+  font-size: var(--component-collapse-collapse-expand-icon-size, var(--component-collapse-expand-icon-size, 14px));
   vertical-align: middle;
   transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
 }
@@ -118,19 +118,19 @@
   padding-right: 13px;
   padding-left: 34px;
   overflow: hidden;
-  color: var(--sd-color-text-1);
-  font-size: 14px;
-  background-color: var(--sd-color-fill-1);
+  color: var(--component-collapse-collapse-content-color-text, var(--component-collapse-content-color-text, var(--sd-color-text-1)));
+  font-size: var(--component-collapse-collapse-content-font-size, var(--component-collapse-content-font-size, var(--font-size-body-3, 14px)));
+  background-color: var(--component-collapse-collapse-content-color-bg, var(--component-collapse-content-color-bg, var(--sd-color-fill-1)));
 }
 .sd-collapse-item-content-expanded {
   display: block;
   height: auto;
 }
 .sd-collapse-item-content-box {
-  padding: 8px 0;
+  padding: var(--component-collapse-collapse-content-padding-vertical, var(--component-collapse-content-padding-vertical, var(--spacing-4, 8px))) 0;
 }
 .sd-collapse-item.sd-collapse-item-disabled > .sd-collapse-item-content {
-  color: var(--sd-color-text-4);
+  color: var(--component-collapse-collapse-content-color-text-disabled, var(--component-collapse-content-color-text-disabled, var(--sd-color-text-4)));
 }
 .sd-collapse-item-no-icon > .sd-collapse-item-header {
   padding-right: 13px;

package/es/collapse/style/token.scss

@@ -1,3 +1,4 @@
+@use '@style/theme/runtime.scss' as theme-runtime;
 @use '@style/theme/index.scss' as global;
 
 @forward '@style/theme/index.scss';
@@ -65,3 +66,138 @@ $collapse-item-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-co
 $collapse-item-border-width: global.$border-1;
 
 $collapse-expand-icon-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-fill-2'));
+
+// @generated runtime tokens — pnpm theme:generate
+$collapse-border-width: theme-runtime.token(
+  'collapse',
+  'collapse-border-width',
+  $collapse-border-width,
+  'border-1'
+);
+$collapse-border-radius: theme-runtime.token(
+  'collapse',
+  'collapse-border-radius',
+  $collapse-border-radius
+);
+$collapse-color-border: theme-runtime.token(
+  'collapse',
+  'collapse-color-border',
+  $collapse-color-border
+);
+$collapse-line-height: theme-runtime.token(
+  'collapse',
+  'collapse-line-height',
+  $collapse-line-height
+);
+$collapse-title-line-height: theme-runtime.token(
+  'collapse',
+  'collapse-title-line-height',
+  $collapse-title-line-height
+);
+$collapse-title-border-width: theme-runtime.token(
+  'collapse',
+  'collapse-title-border-width',
+  $collapse-title-border-width,
+  'border-1'
+);
+$collapse-title-color-border: theme-runtime.token(
+  'collapse',
+  'collapse-title-color-border',
+  $collapse-title-color-border
+);
+$collapse-title-font-size: theme-runtime.token(
+  'collapse',
+  'collapse-title-font-size',
+  $collapse-title-font-size,
+  'font-size-body-3'
+);
+$collapse-title-padding-vertical: theme-runtime.token(
+  'collapse',
+  'collapse-title-padding-vertical',
+  $collapse-title-padding-vertical,
+  'spacing-4'
+);
+$collapse-title-color-bg: theme-runtime.token(
+  'collapse',
+  'collapse-title-color-bg',
+  $collapse-title-color-bg
+);
+$collapse-title-color-bg_active: theme-runtime.token(
+  'collapse',
+  'collapse-title-color-bg-active',
+  $collapse-title-color-bg_active
+);
+$collapse-title-color-bg_disabled: theme-runtime.token(
+  'collapse',
+  'collapse-title-color-bg-disabled',
+  $collapse-title-color-bg_disabled
+);
+$collapse-title-color-text: theme-runtime.token(
+  'collapse',
+  'collapse-title-color-text',
+  $collapse-title-color-text
+);
+$collapse-title-color-text_disabled: theme-runtime.token(
+  'collapse',
+  'collapse-title-color-text-disabled',
+  $collapse-title-color-text_disabled
+);
+$collapse-title-font-weight_active: theme-runtime.token(
+  'collapse',
+  'collapse-title-font-weight-active',
+  $collapse-title-font-weight_active,
+  'font-weight-500'
+);
+$collapse-content-color-text: theme-runtime.token(
+  'collapse',
+  'collapse-content-color-text',
+  $collapse-content-color-text
+);
+$collapse-content-color-text_disabled: theme-runtime.token(
+  'collapse',
+  'collapse-content-color-text-disabled',
+  $collapse-content-color-text_disabled
+);
+$collapse-content-font-size: theme-runtime.token(
+  'collapse',
+  'collapse-content-font-size',
+  $collapse-content-font-size,
+  'font-size-body-3'
+);
+$collapse-content-padding-vertical: theme-runtime.token(
+  'collapse',
+  'collapse-content-padding-vertical',
+  $collapse-content-padding-vertical,
+  'spacing-4'
+);
+$collapse-content-color-bg: theme-runtime.token(
+  'collapse',
+  'collapse-content-color-bg',
+  $collapse-content-color-bg
+);
+$collapse-expand-icon-size: theme-runtime.token(
+  'collapse',
+  'collapse-expand-icon-size',
+  $collapse-expand-icon-size
+);
+$collapse-color-expand-icon: theme-runtime.token(
+  'collapse',
+  'collapse-color-expand-icon',
+  $collapse-color-expand-icon
+);
+$collapse-item-color-border: theme-runtime.token(
+  'collapse',
+  'collapse-item-color-border',
+  $collapse-item-color-border
+);
+$collapse-item-border-width: theme-runtime.token(
+  'collapse',
+  'collapse-item-border-width',
+  $collapse-item-border-width,
+  'border-1'
+);
+$collapse-expand-icon-color-bg: theme-runtime.token(
+  'collapse',
+  'collapse-expand-icon-color-bg',
+  $collapse-expand-icon-color-bg
+);

package/es/color-picker/style/index.css

@@ -24,17 +24,17 @@
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
-  background-color: var(--sd-color-fill-2);
-  border-radius: 4px;
+  background-color: var(--component-color-picker-color-input-bg-color, var(--component-color-picker-input-bg-color, var(--sd-color-fill-2)));
+  border-radius: var(--component-color-picker-color-input-border-radius, var(--component-color-picker-input-border-radius, var(--border-radius-small, 4px)));
 }
 .sd-color-picker-preview {
   box-sizing: border-box;
-  border: 1px solid var(--sd-color-border-2);
+  border: var(--component-color-picker-color-preview-border-size, var(--component-color-picker-preview-border-size, var(--border-1, 1px))) solid var(--component-color-picker-color-preview-border-color, var(--component-color-picker-preview-border-color, var(--sd-color-border-2)));
 }
 .sd-color-picker-value {
-  margin-left: 4px;
-  color: var(--sd-color-text-1);
-  font-weight: 400;
+  margin-left: var(--component-color-picker-color-value-margin-left, var(--component-color-picker-value-margin-left, var(--spacing-2, 4px)));
+  color: var(--component-color-picker-color-value-font-color, var(--component-color-picker-value-font-color, var(--sd-color-text-1)));
+  font-weight: var(--component-color-picker-color-value-font-size, var(--component-color-picker-value-font-size, var(--font-weight-400, 400)));
 }
 .sd-color-picker-input {
   display: none;
@@ -48,58 +48,58 @@
   padding: 4px 4px;
 }
 .sd-color-picker-size-medium .sd-color-picker-preview {
-  width: 24px;
-  height: 24px;
+  width: var(--component-color-picker-color-preview-size-medium, var(--component-color-picker-preview-size-medium, var(--size-6, 24px)));
+  height: var(--component-color-picker-color-preview-size-medium, var(--component-color-picker-preview-size-medium, var(--size-6, 24px)));
 }
 .sd-color-picker-size-medium .sd-color-picker-value {
-  font-size: 14px;
+  font-size: var(--component-color-picker-color-value-size-medium-font-size, var(--component-color-picker-value-size-medium-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-color-picker-size-mini {
   height: 24px;
   padding: 4px 4px;
 }
 .sd-color-picker-size-mini .sd-color-picker-preview {
-  width: 16px;
-  height: 16px;
+  width: var(--component-color-picker-color-preview-size-mini, var(--component-color-picker-preview-size-mini, var(--size-4, 16px)));
+  height: var(--component-color-picker-color-preview-size-mini, var(--component-color-picker-preview-size-mini, var(--size-4, 16px)));
 }
 .sd-color-picker-size-mini .sd-color-picker-value {
-  font-size: 12px;
+  font-size: var(--component-color-picker-color-value-size-mini-font-size, var(--component-color-picker-value-size-mini-font-size, var(--font-size-body-1, 12px)));
 }
 .sd-color-picker-size-small {
   height: 28px;
   padding: 3px 4px;
 }
 .sd-color-picker-size-small .sd-color-picker-preview {
-  width: 22px;
-  height: 22px;
+  width: var(--component-color-picker-color-preview-size-small, var(--component-color-picker-preview-size-small, 22px));
+  height: var(--component-color-picker-color-preview-size-small, var(--component-color-picker-preview-size-small, 22px));
 }
 .sd-color-picker-size-small .sd-color-picker-value {
-  font-size: 14px;
+  font-size: var(--component-color-picker-color-value-size-small-font-size, var(--component-color-picker-value-size-small-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-color-picker-size-large {
   height: 36px;
   padding: 5px 5px;
 }
 .sd-color-picker-size-large .sd-color-picker-preview {
-  width: 26px;
-  height: 26px;
+  width: var(--component-color-picker-color-preview-size-large, var(--component-color-picker-preview-size-large, 26px));
+  height: var(--component-color-picker-color-preview-size-large, var(--component-color-picker-preview-size-large, 26px));
 }
 .sd-color-picker-size-large .sd-color-picker-value {
-  font-size: 14px;
+  font-size: var(--component-color-picker-color-value-size-large-font-size, var(--component-color-picker-value-size-large-font-size, var(--font-size-body-3, 14px)));
 }
 .sd-color-picker.sd-color-picker-disabled {
-  background-color: var(--sd-color-fill-2);
+  background-color: var(--component-color-picker-color-input-bg-color, var(--component-color-picker-input-bg-color, var(--sd-color-fill-2)));
   cursor: not-allowed;
 }
 .sd-color-picker.sd-color-picker-disabled .sd-color-picker-value {
-  color: var(--sd-color-text-4);
+  color: var(--component-color-picker-color-value-font-color-disabled, var(--component-color-picker-value-font-color-disabled, var(--sd-color-text-4)));
 }
 
 .sd-color-picker-panel {
-  width: 260px;
-  background-color: var(--sd-color-bg-1);
-  border-radius: 4px;
-  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
+  width: var(--component-color-picker-color-panel-width, var(--component-color-picker-panel-width, 260px));
+  background-color: var(--component-color-picker-color-panel-bg-color, var(--component-color-picker-panel-bg-color, var(--sd-color-bg-1)));
+  border-radius: var(--component-color-picker-color-panel-border-radius, var(--component-color-picker-panel-border-radius, var(--border-radius-small, 4px)));
+  box-shadow: var(--component-color-picker-color-panel-box-shadow, var(--component-color-picker-panel-box-shadow, 0 8px 20px 0 rgba(0, 0, 0, 0.1)));
 }
 .sd-color-picker-panel .sd-color-picker-panel-head {
   display: flex;
@@ -123,7 +123,7 @@
   height: 8px;
   padding: 0;
   background-color: transparent;
-  border: 1px solid var(--sd-color-border-2);
+  border: 1px solid var(--component-color-picker-color-panel-border-color, var(--component-color-picker-panel-border-color, var(--sd-color-border-2)));
   border-radius: 6px;
   cursor: pointer;
 }
@@ -167,33 +167,33 @@
 .sd-color-picker-panel .sd-color-picker-gradient-preview {
   height: 32px;
   margin-top: 8px;
-  border: 1px solid var(--sd-color-border-2);
+  border: 1px solid var(--component-color-picker-color-panel-border-color, var(--component-color-picker-panel-border-color, var(--sd-color-border-2)));
   border-radius: 6px;
 }
 .sd-color-picker-panel .sd-color-picker-palette {
   position: relative;
   box-sizing: border-box;
   width: 100%;
-  height: 178px;
+  height: var(--component-color-picker-color-palette-height, var(--component-color-picker-palette-height, 178px));
   overflow: hidden;
   background-image: linear-gradient(0deg, rgb(0, 0, 0), transparent), linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0));
-  border-top: 1px solid var(--sd-color-border-2);
-  border-right: 1px solid var(--sd-color-border-2);
-  border-left: 1px solid var(--sd-color-border-2);
+  border-top: 1px solid var(--component-color-picker-color-panel-border-color, var(--component-color-picker-panel-border-color, var(--sd-color-border-2)));
+  border-right: 1px solid var(--component-color-picker-color-panel-border-color, var(--component-color-picker-panel-border-color, var(--sd-color-border-2)));
+  border-left: 1px solid var(--component-color-picker-color-panel-border-color, var(--component-color-picker-panel-border-color, var(--sd-color-border-2)));
   cursor: pointer;
 }
 .sd-color-picker-panel .sd-color-picker-palette .sd-color-picker-handler {
   position: absolute;
   box-sizing: border-box;
-  width: 16px;
-  height: 16px;
+  width: var(--component-color-picker-color-palette-handle-size, var(--component-color-picker-palette-handle-size, var(--size-4, 16px)));
+  height: var(--component-color-picker-color-palette-handle-size, var(--component-color-picker-palette-handle-size, var(--size-4, 16px)));
   background-color: transparent;
-  border: 2px solid var(--sd-color-bg-white);
+  border: var(--component-color-picker-color-palette-handle-border-size, var(--component-color-picker-palette-handle-border-size, var(--border-2, 2px))) solid var(--sd-color-bg-white);
   border-radius: 50%;
   transform: translate(-50%, -50%);
 }
 .sd-color-picker-panel .sd-color-picker-panel-control {
-  padding: 12px;
+  padding: var(--component-color-picker-color-panel-padding, var(--component-color-picker-panel-padding, var(--spacing-6, 12px)));
 }
 .sd-color-picker-panel .sd-color-picker-panel-control .sd-color-picker-control-wrapper {
   display: flex;
@@ -209,20 +209,20 @@
   margin-left: auto;
   color: #fff;
   font-size: 20px;
-  border: 1px solid var(--sd-color-border-2);
+  border: 1px solid var(--component-color-picker-color-panel-border-color, var(--component-color-picker-panel-border-color, var(--sd-color-border-2)));
   border-radius: 6px;
 }
 .sd-color-picker-panel .sd-color-picker-panel-control .sd-color-picker-control-wrapper .sd-color-picker-control-bar-alpha {
-  margin-top: 12px;
+  margin-top: var(--component-color-picker-color-control-bar-alpha-margin-top, var(--component-color-picker-control-bar-alpha-margin-top, var(--spacing-6, 12px)));
 }
 .sd-color-picker-panel .sd-color-picker-panel-control .sd-color-picker-input-wrapper {
   display: flex;
-  margin-top: 12px;
+  margin-top: var(--component-color-picker-color-panel-input-margin-top, var(--component-color-picker-panel-input-margin-top, var(--spacing-6, 12px)));
 }
 .sd-color-picker-panel .sd-color-picker-panel-control .sd-color-picker-input-wrapper .sd-color-picker-group-wrapper {
   display: flex;
   flex: 1;
-  margin-left: 12px;
+  margin-left: var(--component-color-picker-color-panel-input-group-margin-left, var(--component-color-picker-panel-input-group-margin-left, var(--spacing-6, 12px)));
 }
 .sd-color-picker-panel .sd-color-picker-panel-control .sd-color-picker-input-wrapper .sd-select-view,
 .sd-color-picker-panel .sd-color-picker-panel-control .sd-color-picker-input-wrapper .sd-input-wrapper {
@@ -236,7 +236,7 @@
   font-size: 12px;
 }
 .sd-color-picker-panel .sd-color-picker-panel-colors {
-  padding: 12px;
+  padding: var(--component-color-picker-color-panel-padding, var(--component-color-picker-panel-padding, var(--spacing-6, 12px)));
   border-top: 1px solid var(--sd-color-fill-3);
 }
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-section:not(:first-child) {
@@ -251,7 +251,7 @@
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-text {
   color: var(--sd-color-text-1);
   font-weight: 400;
-  font-size: 12px;
+  font-size: var(--component-color-picker-color-panel-section-title-font-size, var(--component-color-picker-panel-section-title-font-size, var(--font-size-caption, 12px)));
 }
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-action {
   padding: 0;
@@ -264,7 +264,7 @@
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-empty {
   margin: 12px 0;
   color: var(--sd-color-text-3);
-  font-size: 12px;
+  font-size: var(--component-color-picker-color-panel-empty-font-size, var(--component-color-picker-panel-empty-font-size, var(--font-size-body-1, 12px)));
 }
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-colors-wrapper {
   margin-top: 8px;
@@ -275,13 +275,13 @@
   margin: -8px -4px 0;
 }
 .sd-color-picker-panel .sd-color-picker-panel-colors .sd-color-picker-color-block {
-  width: 16px;
-  height: 16px;
+  width: var(--component-color-picker-color-panel-block-size, var(--component-color-picker-panel-block-size, var(--size-4, 16px)));
+  height: var(--component-color-picker-color-panel-block-size, var(--component-color-picker-panel-block-size, var(--size-4, 16px)));
   margin: 6px 3px 0;
   overflow: hidden;
   background-image: conic-gradient(rgba(0, 0, 0, 0.06) 0 25%, transparent 0 50%, rgba(0, 0, 0, 0.06) 0 75%, transparent 0);
   background-size: 8px 8px;
-  border-radius: 2px;
+  border-radius: var(--component-color-picker-color-panel-block-border-radius, var(--component-color-picker-panel-block-border-radius, var(--border-2, 2px)));
   cursor: pointer;
   transition: transform ease-out 60ms;
 }
@@ -295,15 +295,15 @@
 .sd-color-picker-panel .sd-color-picker-control-bar-bg {
   background-image: conic-gradient(rgba(0, 0, 0, 0.06) 0 25%, transparent 0 50%, rgba(0, 0, 0, 0.06) 0 75%, transparent 0);
   background-size: 8px 8px;
-  border-radius: 10px;
+  border-radius: var(--component-color-picker-color-control-bar-border-radius, var(--component-color-picker-control-bar-border-radius, 10px));
 }
 .sd-color-picker-panel .sd-color-picker-control-bar {
   position: relative;
   box-sizing: border-box;
-  width: 182px;
-  height: 14px;
-  border: 1px solid var(--sd-color-border-2);
-  border-radius: 10px;
+  width: var(--component-color-picker-color-control-bar-width, var(--component-color-picker-control-bar-width, 182px));
+  height: var(--component-color-picker-color-control-bar-height, var(--component-color-picker-control-bar-height, 14px));
+  border: 1px solid var(--component-color-picker-color-panel-border-color, var(--component-color-picker-panel-border-color, var(--sd-color-border-2)));
+  border-radius: var(--component-color-picker-color-control-bar-border-radius, var(--component-color-picker-control-bar-border-radius, 10px));
   cursor: pointer;
 }
 .sd-color-picker-panel .sd-color-picker-control-bar .sd-color-picker-handler {
@@ -340,7 +340,7 @@
   background: linear-gradient(90deg, #f00 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00);
 }
 .sd-color-picker-panel .sd-color-picker-select {
-  width: 58px;
+  width: var(--component-color-picker-color-panel-format-select-width, var(--component-color-picker-panel-format-select-width, 58px));
 }
 .sd-color-picker-panel .sd-color-picker-input-group {
   width: 100%;