@sellmate/design-system 1.0.19 → 1.0.21

package/dist/collection/components/sd-guide/sd-guide.css

@@ -6,9 +6,18 @@ sd-button {
 }
 
 .sd-button {
+  --sd-button-height: 34px;
+  --sd-button-padding-x: 20px;
+  --sd-button-gap: 8px;
+  --sd-button-font-family: inherit;
+  --sd-button-font-size: 16px;
+  --sd-button-font-weight: 500;
+  --sd-button-text-decoration: none;
+  --sd-button-label-min-width: auto;
+  --sd-button-icon-only-size: var(--sd-button-height);
   text-decoration: none;
   cursor: pointer;
-  border-radius: 4px;
+  border-radius: var(--sd-button-radius-default, 4px);
   transition: all 0.2s ease-in-out;
   position: relative;
   overflow: hidden;
@@ -20,34 +29,64 @@ sd-button {
   align-items: center;
   justify-content: center;
   border: none;
+  padding: 0 var(--sd-button-padding-x);
+  min-width: var(--sd-button-min-width, auto);
+  min-height: var(--sd-button-height);
+  font-family: var(--sd-button-font-family);
+  font-size: var(--sd-button-font-size);
+  font-weight: var(--sd-button-font-weight);
+  text-decoration: var(--sd-button-text-decoration);
 }
 .sd-button--xs {
-  padding: 0 8px;
-  font-size: 12px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-xs-height, 24px);
+  --sd-button-padding-x: var(--sd-button-xs-padding-x, 8px);
+  --sd-button-gap: var(--sd-button-xs-gap, 4px);
+  --sd-button-font-family: var(--sd-button-xs-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-xs-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-xs-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-xs-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-xs-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-xs-width, var(--sd-button-height));
   line-height: 20px;
-  min-height: 24px;
 }
 .sd-button--sm {
-  padding: 0 12px;
-  font-size: 12px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-sm-height, 28px);
+  --sd-button-padding-x: var(--sd-button-sm-padding-x, 12px);
+  --sd-button-gap: var(--sd-button-sm-gap, 6px);
+  --sd-button-font-family: var(--sd-button-sm-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-sm-typography-font-size, 12px);
+  --sd-button-font-weight: var(--sd-button-sm-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-sm-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-sm-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-sm-width, var(--sd-button-height));
   line-height: 20px;
-  min-height: 28px;
 }
 .sd-button--md {
-  padding: 0 20px;
-  font-size: 16px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-md-height, 34px);
+  --sd-button-padding-x: var(--sd-button-md-padding-x, 20px);
+  --sd-button-gap: var(--sd-button-md-gap, 8px);
+  --sd-button-font-family: var(--sd-button-md-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-md-typography-font-size, 16px);
+  --sd-button-font-weight: var(--sd-button-md-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-md-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-md-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-md-width, var(--sd-button-height));
   line-height: 26px;
-  min-height: 34px;
 }
 .sd-button--lg {
-  padding: 0 28px;
-  font-size: 18px;
-  font-weight: 500;
+  --sd-button-height: var(--sd-button-lg-height, 62px);
+  --sd-button-padding-x: var(--sd-button-lg-padding-x, 28px);
+  --sd-button-gap: var(--sd-button-lg-gap, 12px);
+  --sd-button-font-family: var(--sd-button-lg-typography-font-family, inherit);
+  --sd-button-font-size: var(--sd-button-lg-typography-font-size, 18px);
+  --sd-button-font-weight: var(--sd-button-lg-typography-font-weight, 500);
+  --sd-button-text-decoration: var(--sd-button-lg-typography-text-decoration, none);
+  --sd-button-label-min-width: var(--sd-button-label-lg-min-width, auto);
+  --sd-button-icon-only-size: var(--sd-button-icon-only-lg-width, var(--sd-button-height));
   line-height: 30px;
-  min-height: 62px;
+}
+.sd-button--has-label {
+  --sd-button-min-width: var(--sd-button-label-min-width, auto);
 }
 .sd-button--primary {
   background-color: var(--button-color);
@@ -68,7 +107,7 @@ sd-button {
 }
 .sd-button--outline {
   background: white;
-  border: 1px solid var(--button-color);
+  border: var(--sd-button-border-width-default, 1px) solid var(--button-color);
   color: var(--button-color);
 }
 .sd-button--outline::before {
@@ -109,16 +148,16 @@ sd-button {
   z-index: 1;
 }
 .sd-button--disabled {
-  border: 1px solid #cccccc;
-  background: #e1e1e1;
-  color: #888888;
+  border: var(--sd-button-border-width-default, 1px) solid var(--sd-button-border-disabled, #CCCCCC);
+  background: var(--sd-button-bg-disabled, #E1E1E1);
+  color: var(--sd-button-content-disabled, #888888);
   cursor: not-allowed !important;
 }
 .sd-button--icon-only {
   padding: 0;
-  width: fit-content;
-  height: fit-content;
-  aspect-ratio: 1/1;
+  width: var(--sd-button-icon-only-size, var(--sd-button-height));
+  min-width: var(--sd-button-icon-only-size, var(--sd-button-height));
+  height: var(--sd-button-icon-only-size, var(--sd-button-height));
 }
 .sd-button--no-hover:hover::before {
   opacity: 0 !important;
@@ -127,9 +166,9 @@ sd-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 4px;
+  gap: var(--sd-button-gap);
   z-index: 1;
-  font-weight: 500;
+  font-weight: inherit;
 }
 
 sd-guide {
@@ -160,7 +199,7 @@ sd-guide .sd-guide .sd-button .sd-button__content .sd-button__label {
   margin-left: 4px;
 }
 sd-guide .sd-guide--active .sd-button {
-  border: 1px solid #00973c;
+  border: 1px solid #00973C;
 }
 sd-guide .sd-guide--active .sd-button .sd-button__content .sd-button__label {
   color: white !important;

package/dist/collection/components/sd-input/sd-input.css

@@ -178,7 +178,7 @@ sd-date-range-picker .sd-field .sd-input__native {
 }
 .sd-date-range-picker__menu .sd-date-range-picker__body .separator {
   width: 1px;
-  background-color: #d8d8d8;
+  background-color: #D8D8D8;
 }
 
 input:-webkit-autofill,
@@ -227,5 +227,5 @@ sd-input .sd-input__content .sd-input__native[disabled] {
   color: #888888;
 }
 sd-input .sd-input__content .sd-input__native::placeholder {
-  color: #aaaaaa;
+  color: #AAAAAA;
 }

package/dist/collection/components/sd-number-input/sd-number-input.css

@@ -49,7 +49,7 @@ sd-number-input .sd-number-input .sd-number-input__input::placeholder {
   font-size: 12px;
   height: 20px;
   line-height: 20px;
-  color: #aaaaaa;
+  color: #AAAAAA;
 }
 sd-number-input .sd-number-input .sd-number-input__clear-icon {
   cursor: pointer;
@@ -71,7 +71,7 @@ sd-number-input .sd-number-input .sd-number-input__button {
   height: 20px;
   border: none;
   border-radius: 2px;
-  background-color: #eff6ff;
+  background-color: #EFF6FF;
   cursor: pointer;
   display: flex;
   align-items: center;
@@ -81,10 +81,10 @@ sd-number-input .sd-number-input .sd-number-input__button {
   transition: background-color 0.2s ease;
 }
 sd-number-input .sd-number-input .sd-number-input__button:hover:not(:disabled) {
-  background-color: #e6f1ff;
+  background-color: #E6F1FF;
 }
 sd-number-input .sd-number-input .sd-number-input__button:disabled {
-  background-color: #eeeeee;
+  background-color: #EEEEEE;
   cursor: not-allowed;
 }
 sd-number-input .sd-number-input .sd-number-input__button--decrement {
@@ -105,6 +105,6 @@ sd-number-input:focus-within .sd-number-input__buttons {
   pointer-events: auto;
 }
 sd-number-input:focus-within .sd-number-input {
-  border-color: #0075ff;
+  border-color: #0075FF;
   box-shadow: 0 0 4px 0 rgba(0, 113, 255, 0.4);
 }

package/dist/collection/components/sd-pagination/sd-pagination.css

@@ -22,7 +22,7 @@
   background: none;
 }
 .sd-pagination .prepend-btns button:hover {
-  border: 1px solid #006ac1;
+  border: 1px solid #006AC1;
   border-radius: 14px;
 }
 .sd-pagination .append-btns {
@@ -39,7 +39,7 @@
   background: none;
 }
 .sd-pagination .append-btns button:hover {
-  border: 1px solid #006ac1;
+  border: 1px solid #006AC1;
   border-radius: 14px;
 }
 .sd-pagination .pagination-btn {
@@ -55,11 +55,11 @@
   width: var(--pagination-btn-width, 26px);
 }
 .sd-pagination .pagination-btn--selected {
-  background-color: #006ac1;
+  background-color: #006AC1;
   color: white;
 }
 .sd-pagination .pagination-btn:hover {
-  border: 1px solid #006ac1;
+  border: 1px solid #006AC1;
 }
 .sd-pagination--simple .pagination-info {
   line-height: 26px;

package/dist/collection/components/sd-progress/sd-progress.css

@@ -7,14 +7,14 @@ sd-progress .sd-progress__bar {
   height: 20px;
   overflow: hidden;
   border-radius: 4px;
-  background-color: #eeeeee;
+  background-color: #EEEEEE;
   text-align: center;
 }
 sd-progress .sd-progress__bar__percent {
   width: var(--progress-percentage);
   height: 100%;
   border-radius: 4px;
-  background-color: var(--progress-color, #0075ff);
+  background-color: var(--progress-color, #0075FF);
   transition: all 0.5s;
 }
 sd-progress .sd-progress__bar__percent.proceed {
@@ -26,19 +26,19 @@ sd-progress .sd-progress__bar__indicator {
   top: 0;
   height: 20px;
   width: 100%;
-  background-color: #eeeeee;
+  background-color: #EEEEEE;
   font-size: 12px;
   font-weight: 700;
   line-height: 20px;
   z-index: 1;
 }
 sd-progress .sd-progress__bar__indicator--left {
-  color: var(--progress-color, #0075ff);
+  color: var(--progress-color, #0075FF);
   clip-path: inset(0 0 0 var(--progress-percentage));
 }
 sd-progress .sd-progress__bar__indicator--right {
   color: white;
-  background-color: var(--progress-color, #0075ff);
+  background-color: var(--progress-color, #0075FF);
   clip-path: inset(0 calc(100% - var(--progress-percentage)) 0 0);
 }
 sd-progress .sd-progress__spinner {
@@ -53,7 +53,7 @@ sd-progress .sd-progress__spinner svg {
 sd-progress .sd-progress__spinner__label {
   margin-top: 8px;
   font-size: 16px;
-  color: var(--progress-color, #0075ff);
+  color: var(--progress-color, #0075FF);
 }
 sd-progress .sd-progress__label {
   margin-top: 4px;

package/dist/collection/components/sd-radio/sd-radio.css

@@ -22,12 +22,12 @@ sd-radio .sd-radio label input {
   height: 16px;
   border: 1px solid #888888;
   border-radius: 50%;
-  accent-color: #0075ff;
+  accent-color: #0075FF;
   background-color: white;
   cursor: pointer;
 }
 sd-radio .sd-radio label input:checked {
-  border-color: #0075ff;
+  border-color: #0075FF;
   background-color: white;
 }
 sd-radio .sd-radio label input:checked::before {
@@ -39,18 +39,18 @@ sd-radio .sd-radio label input:checked::before {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: #0075ff;
+  background-color: #0075FF;
 }
 sd-radio .sd-radio label input:disabled {
-  border-color: #cccccc;
-  background-color: #eeeeee;
+  border-color: #CCCCCC;
+  background-color: #EEEEEE;
 }
 sd-radio .sd-radio label input:disabled:checked::before {
-  background-color: #cccccc;
+  background-color: #CCCCCC;
 }
 sd-radio .sd-radio label input:not(:disabled):hover {
-  border-color: #0075ff;
-  background-color: #d9eaff;
+  border-color: #0075FF;
+  background-color: #D9EAFF;
 }
 sd-radio .sd-radio--disabled {
   cursor: not-allowed !important;

package/dist/collection/components/sd-radio-button-group/sd-radio-button-group.css

@@ -13,7 +13,7 @@ sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  border: 1px solid #cccccc;
+  border: 1px solid #CCCCCC;
   background-color: white;
   color: #333333;
   font-weight: 400;
@@ -44,23 +44,23 @@ sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option::aft
   transition: font-weight 0.2s ease;
 }
 sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--selected):hover {
-  background-color: #0075ff;
+  background-color: #0075FF;
   color: white;
-  border-color: #0075ff;
+  border-color: #0075FF;
   z-index: 2;
 }
 sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option:not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--disabled):not(sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--selected):hover::after {
   font-weight: 500;
 }
 sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--selected {
-  border-color: #0075ff;
-  color: #0075ff;
+  border-color: #0075FF;
+  color: #0075FF;
   background-color: white;
   z-index: 1;
 }
 sd-radio-button-group .sd-radio-button-group .sd-radio-button-group__option--disabled {
-  background-color: #e1e1e1;
-  border-color: #cccccc;
+  background-color: #E1E1E1;
+  border-color: #CCCCCC;
   color: #888888;
   cursor: not-allowed;
 }

package/dist/collection/components/sd-radio-group/sd-radio-group.css

@@ -22,12 +22,12 @@ sd-radio .sd-radio label input {
   height: 16px;
   border: 1px solid #888888;
   border-radius: 50%;
-  accent-color: #0075ff;
+  accent-color: #0075FF;
   background-color: white;
   cursor: pointer;
 }
 sd-radio .sd-radio label input:checked {
-  border-color: #0075ff;
+  border-color: #0075FF;
   background-color: white;
 }
 sd-radio .sd-radio label input:checked::before {
@@ -39,18 +39,18 @@ sd-radio .sd-radio label input:checked::before {
   width: 10px;
   height: 10px;
   border-radius: 50%;
-  background-color: #0075ff;
+  background-color: #0075FF;
 }
 sd-radio .sd-radio label input:disabled {
-  border-color: #cccccc;
-  background-color: #eeeeee;
+  border-color: #CCCCCC;
+  background-color: #EEEEEE;
 }
 sd-radio .sd-radio label input:disabled:checked::before {
-  background-color: #cccccc;
+  background-color: #CCCCCC;
 }
 sd-radio .sd-radio label input:not(:disabled):hover {
-  border-color: #0075ff;
-  background-color: #d9eaff;
+  border-color: #0075FF;
+  background-color: #D9EAFF;
 }
 sd-radio .sd-radio--disabled {
   cursor: not-allowed !important;

package/dist/collection/components/sd-select/sd-select-dropdown/sd-select-dropdown.css

@@ -5,7 +5,7 @@
 }
 .sd-select-dropdown::-webkit-scrollbar {
   opacity: 0;
-  background: #e5e5e5;
+  background: #E5E5E5;
 }
 .sd-select-dropdown::-webkit-scrollbar:horizontal {
   height: 8px;
@@ -15,7 +15,7 @@
 }
 .sd-select-dropdown::-webkit-scrollbar-thumb {
   height: 80px;
-  background-color: #cccccc;
+  background-color: #CCCCCC;
   border-radius: 4px;
 }
 .sd-select-dropdown::-webkit-scrollbar-track {

package/dist/collection/components/sd-select/sd-select-option/sd-select-option.css

@@ -20,17 +20,17 @@ sd-select-option .sd-select__option__checkbox-wrapper {
   text-overflow: ellipsis;
 }
 sd-select-option .sd-select__option--focused {
-  background-color: #e6f1ff;
+  background-color: #E6F1FF;
 }
 sd-select-option .sd-select__option--selected:not(:hover):not(.sd-select__option--use-checkbox), sd-select-option .sd-select__option--focused:not(:hover):not(.sd-select__option--use-checkbox) {
-  color: #0075ff;
+  color: #0075FF;
   font-weight: 700;
 }
 sd-select-option .sd-select__option--disabled {
-  color: #aaaaaa;
+  color: #AAAAAA;
   cursor: not-allowed;
 }
 sd-select-option .sd-select__option:hover:not(.sd-select__option--disabled) {
-  background-color: #0075ff;
+  background-color: #0075FF;
   color: white;
 }

package/dist/collection/components/sd-select-multiple-group/sd-select-multiple-group.css

@@ -5,7 +5,7 @@
 }
 .sd-select-multiple-group__dropdown::-webkit-scrollbar {
   opacity: 0;
-  background: #e5e5e5;
+  background: #E5E5E5;
 }
 .sd-select-multiple-group__dropdown::-webkit-scrollbar:horizontal {
   height: 8px;
@@ -15,7 +15,7 @@
 }
 .sd-select-multiple-group__dropdown::-webkit-scrollbar-thumb {
   height: 80px;
-  background-color: #cccccc;
+  background-color: #CCCCCC;
   border-radius: 4px;
 }
 .sd-select-multiple-group__dropdown::-webkit-scrollbar-track {

package/dist/collection/components/sd-select-multiple-group/sd-select-option-group/sd-select-option-group.css

@@ -14,13 +14,13 @@ sd-select-option-group .sd-select__option-group.sd-select__option-group--group:n
   cursor: default !important;
 }
 sd-select-option-group .sd-select__option-group.sd-select__option-group--group {
-  background-color: #f5faff !important;
+  background-color: #F5FAFF !important;
   color: #333333 !important;
   font-weight: 700;
 }
 sd-select-option-group .sd-select__option-group.sd-select__option-group--subgroup {
   padding-left: 20px;
-  background-color: #f9f9f9 !important;
+  background-color: #F9F9F9 !important;
   color: #333333 !important;
   font-weight: 500;
 }
@@ -56,18 +56,18 @@ sd-select-option-group .sd-select__option-group__label-wrapper .sd-select__optio
   color: #888888;
 }
 sd-select-option-group .sd-select__option-group--focused {
-  background-color: #e6f1ff;
+  background-color: #E6F1FF;
 }
 sd-select-option-group .sd-select__option-group--selected.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox), sd-select-option-group .sd-select__option-group--focused.sd-select__option-group--item:not(:hover):not(.sd-select__option-group--use-checkbox) {
-  color: #0075ff;
+  color: #0075FF;
   font-weight: 700;
 }
 sd-select-option-group .sd-select__option-group--disabled {
-  color: #aaaaaa;
+  color: #AAAAAA;
   cursor: not-allowed;
 }
 sd-select-option-group .sd-select__option-group:hover:not(.sd-select__option-group--disabled) {
-  background-color: #0075ff;
+  background-color: #0075FF;
   color: white;
 }
 sd-select-option-group .sd-select__option-group:hover.sd-select__option-group--selected:not(.sd-select__option-group--group):not(.sd-select__option-group--subgroup) sd-checkbox .sd-checkbox__bg {

package/dist/collection/components/sd-table/sd-table.css

@@ -5,7 +5,7 @@
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar {
   opacity: 0;
-  background: #e5e5e5;
+  background: #E5E5E5;
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal {
   height: 8px;
@@ -15,7 +15,7 @@
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb {
   height: 80px;
-  background-color: #cccccc;
+  background-color: #CCCCCC;
   border-radius: 4px;
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track {
@@ -33,11 +33,11 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  border: 1px solid #e1e1e1;
+  border: 1px solid #E1E1E1;
   border-radius: 8px;
   font-size: 12px;
   overflow: hidden;
-  background: #ffffff;
+  background: #FFFFFF;
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle {
   overflow: auto;
@@ -113,7 +113,7 @@
 .sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,
 .sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right {
   position: sticky;
-  background-color: #f5faff;
+  background-color: #F5FAFF;
   z-index: 110 !important;
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,
@@ -131,7 +131,7 @@
 .sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell {
   position: sticky;
   z-index: 102;
-  background-color: #f5faff;
+  background-color: #F5FAFF;
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell {
   position: sticky;
@@ -194,12 +194,12 @@
   width: 100%;
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th {
-  background: #f5faff;
+  background: #F5FAFF;
   height: 36px;
   padding: 0 16px;
   font-weight: 500;
   vertical-align: middle;
-  border-bottom: 1px solid #e1e1e1;
+  border-bottom: 1px solid #E1E1E1;
   -webkit-user-select: none;
   user-select: none;
   position: relative;
@@ -228,13 +228,13 @@
   height: 16px;
   cursor: col-resize;
   z-index: 3;
-  border-left: 1px solid #cccccc;
-  border-right: 1px solid #cccccc;
+  border-left: 1px solid #CCCCCC;
+  border-right: 1px solid #CCCCCC;
 }
 .sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td {
   height: 44px;
   padding: 0 16px;
-  border-bottom: 1px solid #e1e1e1;
+  border-bottom: 1px solid #E1E1E1;
   background: white;
   vertical-align: middle;
 }
@@ -264,12 +264,12 @@
 }
 .sd-table__wrapper .sd-table__pagination {
   position: relative;
-  background: #f9f9f9;
+  background: #F9F9F9;
   height: 48px;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #e1e1e1;
+  border: 1px solid #E1E1E1;
   border-top: none;
   border-radius: 8px;
 }
@@ -305,7 +305,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #e1e1e1 calc(var(--row-height, 44px) - 1px), #e1e1e1 var(--row-height, 44px));
+  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--row-height, 44px) - 1px), #E1E1E1 calc(var(--row-height, 44px) - 1px), #E1E1E1 var(--row-height, 44px));
   pointer-events: none;
 }
 .sd-table__wrapper .sd-table__skeleton-cell {

package/dist/collection/components/sd-tabs/sd-tabs.css

@@ -5,7 +5,7 @@ sd-tabs .sd-tabs {
   display: flex;
   flex-direction: row;
   gap: 4px;
-  border-bottom: 1px solid #0075ff;
+  border-bottom: 1px solid #0075FF;
 }
 sd-tabs .sd-tabs__tab {
   display: flex;
@@ -13,10 +13,10 @@ sd-tabs .sd-tabs__tab {
   justify-content: center;
   gap: 8px;
   cursor: pointer;
-  border: 1px solid #cccccc;
+  border: 1px solid #CCCCCC;
   border-bottom: none;
   border-radius: 4px 4px 0 0;
-  background-color: #f6f6f6;
+  background-color: #F6F6F6;
   color: #888888;
   font-weight: 400;
   transition: all 0.2s ease;
@@ -31,15 +31,15 @@ sd-tabs .sd-tabs__tab::before {
   transition: all 0.3s;
 }
 sd-tabs .sd-tabs__tab--selected {
-  border-color: #0075ff;
-  color: #0075ff;
+  border-color: #0075FF;
+  color: #0075FF;
   background-color: white;
 }
 sd-tabs .sd-tabs__tab--selected .sd-tabs__label::before {
   font-weight: 700;
 }
 sd-tabs .sd-tabs__tab--selected:hover::before {
-  background-color: #0075ff;
+  background-color: #0075FF;
   opacity: 0.15;
 }
 sd-tabs .sd-tabs__tab--unselected:hover::before {
@@ -91,7 +91,7 @@ sd-tabs .sd-tabs--sub .sd-tabs__tab::before {
   right: 0;
   height: 1px;
   width: 100%;
-  background-color: #0075ff;
+  background-color: #0075FF;
   opacity: 0;
   transition: opacity 0.2s ease;
 }
@@ -99,7 +99,7 @@ sd-tabs .sd-tabs--sub .sd-tabs__tab::after {
   font-weight: 400;
 }
 sd-tabs .sd-tabs--sub .sd-tabs__tab--selected {
-  color: #0075ff;
+  color: #0075FF;
   background-color: transparent;
 }
 sd-tabs .sd-tabs--sub .sd-tabs__tab--selected::before {