@sellmate/design-system 1.0.19 → 1.0.21

package/dist/cjs/sd-toast.cjs.entry.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index--TtofS7_.js');
-var resolveColor = require('./resolveColor-B7Ku3IGq.js');
+var index = require('./index-D-PnW6jc.js');
+var resolveColor = require('./resolveColor-4RlaGD62.js');
 
 const sdToastCss = () => `sd-toast{display:block;width:fit-content;height:fit-content}sd-toast .sd-toast{display:flex;width:fit-content;align-items:center;gap:16px;padding:12px 24px;border-radius:4px;background-color:var(--sd-toast-bg);color:var(--sd-toast-text);transition:opacity 0.2s ease, visibility 0.2s ease;box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.2)}sd-toast .sd-toast--hidden{opacity:0;visibility:hidden;pointer-events:none}sd-toast .sd-toast__icon{display:flex;align-items:center;flex-shrink:0}sd-toast .sd-toast__content{display:flex;flex:1}sd-toast .sd-toast__message{font-size:14px;line-height:20px;font-weight:400}sd-toast .sd-toast__link{font-size:14px;line-height:20px;color:var(--sd-toast-text);text-decoration:underline;cursor:pointer;transition:opacity 0.2s ease;margin-left:4px}sd-toast .sd-toast__link:hover{opacity:0.8}sd-toast .sd-toast__button{flex-shrink:0}sd-toast .sd-toast__button button{color:var(--button-text-color, inherit) !important}sd-toast .sd-toast__close{display:flex;align-items:center;justify-content:center;padding:4px;background-color:transparent;border:none;cursor:pointer;transition:opacity 0.2s ease;flex-shrink:0}sd-toast .sd-toast__close:hover{opacity:0.7}sd-toast .sd-toast__close:active{opacity:0.5}`;
 

package/dist/cjs/sd-toggle-button.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index--TtofS7_.js');
+var index = require('./index-D-PnW6jc.js');
 
-const sdToggleButtonCss = () => `sd-toggle-button{display:inline-block;line-height:0}.sd-toggle-button{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:4px 12px;gap:6px;border-radius:14px;border:1px solid #888888;background-color:#ffffff;color:#737373;font-size:12px;line-height:20px;font-weight:400;cursor:pointer;transition:border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;white-space:nowrap;user-select:none;box-sizing:border-box}.sd-toggle-button--active{border-color:#0075ff;color:#0075ff}.sd-toggle-button--disabled{background-color:#eeeeee;border-color:#cccccc;color:#888888;cursor:not-allowed}.sd-toggle-button--disabled.sd-toggle-button--active{background-color:#eeeeee;border-color:#cccccc;color:#888888}.sd-toggle-button:hover:not(.sd-toggle-button--disabled):not(.sd-toggle-button--active){border-color:#737373}.sd-toggle-button:hover:not(.sd-toggle-button--disabled).sd-toggle-button--active{border-color:#005cc9;color:#005cc9}`;
+const sdToggleButtonCss = () => `sd-toggle-button{display:inline-block;line-height:0}.sd-toggle-button{display:inline-flex;align-items:center;justify-content:center;height:28px;padding:4px 12px;gap:6px;border-radius:14px;border:1px solid #888888;background-color:#FFFFFF;color:#737373;font-size:12px;line-height:20px;font-weight:400;cursor:pointer;transition:border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;white-space:nowrap;user-select:none;box-sizing:border-box}.sd-toggle-button--active{border-color:#0075FF;color:#0075FF}.sd-toggle-button--disabled{background-color:#EEEEEE;border-color:#CCCCCC;color:#888888;cursor:not-allowed}.sd-toggle-button--disabled.sd-toggle-button--active{background-color:#EEEEEE;border-color:#CCCCCC;color:#888888}.sd-toggle-button:hover:not(.sd-toggle-button--disabled):not(.sd-toggle-button--active){border-color:#737373}.sd-toggle-button:hover:not(.sd-toggle-button--disabled).sd-toggle-button--active{border-color:#005CC9;color:#005CC9}`;
 
 const SdToggleButton = class {
     constructor(hostRef) {

package/dist/cjs/sd-toggle.cjs.entry.js

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index--TtofS7_.js');
+var index = require('./index-D-PnW6jc.js');
 
-const sdToggleCss = () => `sd-toggle{display:inline-block;height:20px;line-height:0}sd-toggle .sd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px}sd-toggle .sd-toggle>input{display:none}sd-toggle .sd-toggle__label{font-size:12px;color:#333333;line-height:20px}sd-toggle .sd-toggle__track{width:36px;height:20px;border-radius:12px;background:#cccccc;position:relative;transition:background-color 0.2s ease}sd-toggle .sd-toggle__thumb{width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform 0.2s ease}sd-toggle .sd-toggle--checked .sd-toggle__track{background:#0075ff}sd-toggle .sd-toggle--checked .sd-toggle__thumb{transform:translateX(16px)}sd-toggle .sd-toggle--disabled{cursor:not-allowed}sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track{background:#bbdaff}sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track{background:#eeeeee}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track{background:#005cc9}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track{background:#bbbbbb}`;
+const sdToggleCss = () => `sd-toggle{display:inline-block;height:20px;line-height:0}sd-toggle .sd-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:20px}sd-toggle .sd-toggle>input{display:none}sd-toggle .sd-toggle__label{font-size:12px;color:#333333;line-height:20px}sd-toggle .sd-toggle__track{width:36px;height:20px;border-radius:12px;background:#CCCCCC;position:relative;transition:background-color 0.2s ease}sd-toggle .sd-toggle__thumb{width:16px;height:16px;border-radius:50%;background:white;position:absolute;top:2px;left:2px;transition:transform 0.2s ease}sd-toggle .sd-toggle--checked .sd-toggle__track{background:#0075FF}sd-toggle .sd-toggle--checked .sd-toggle__thumb{transform:translateX(16px)}sd-toggle .sd-toggle--disabled{cursor:not-allowed}sd-toggle .sd-toggle--disabled.sd-toggle--checked .sd-toggle__track{background:#BBDAFF}sd-toggle .sd-toggle--disabled.sd-toggle--unchecked .sd-toggle__track{background:#EEEEEE}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--checked .sd-toggle__track{background:#005CC9}sd-toggle .sd-toggle:hover:not(.sd-toggle--disabled).sd-toggle--unchecked .sd-toggle__track{background:#BBBBBB}`;
 
 const SdToggle = class {
     constructor(hostRef) {

package/dist/cjs/{tooltipArrow-QmTMaygR.js → tooltipArrow-CMyNLSC-.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index--TtofS7_.js');
+var index = require('./index-D-PnW6jc.js');
 
 const TooltipArrow = (props) => (index.h("svg", { width: "16", height: "12", viewBox: "0 0 16 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, index.h("path", { d: "M8.83205 10.7519C8.43623 11.3457 7.56377 11.3457 7.16795 10.7519L1.04907e-06 -1.39876e-06L16 0L8.83205 10.7519Z", fill: "currentColor" })));
 

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

@@ -7,7 +7,7 @@ sd-badge .sd-badge {
   justify-content: center;
 }
 sd-badge .sd-badge .sd-badge__dot {
-  background: var(--sd-badge-color, #0075ff);
+  background: var(--sd-badge-color, #0075FF);
 }
 sd-badge .sd-badge .sd-badge__label {
   margin-left: 8px;

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

@@ -5,9 +5,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;
@@ -19,34 +28,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);
@@ -67,7 +106,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 {
@@ -108,16 +147,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;
@@ -126,7 +165,7 @@ 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;
 }

package/dist/collection/components/sd-button/sd-button.js

@@ -1,10 +1,11 @@
 import { h } from "@stencil/core";
+import buttonTokens from "../../tokens/generated/component.button.json";
 import { resolveColor } from "../../utils/color";
 const ICON_SIZES = {
-    xs: 12,
-    sm: 16,
-    md: 20,
-    lg: 24,
+    xs: Number(buttonTokens.size.xs.icon),
+    sm: Number(buttonTokens.size.sm.icon),
+    md: Number(buttonTokens.size.md.icon),
+    lg: Number(buttonTokens.size.lg.icon),
 };
 export class SdButton {
     el;
@@ -35,6 +36,9 @@ export class SdButton {
         if (this.disabled) {
             classes.push('sd-button--disabled');
         }
+        if (this.label) {
+            classes.push('sd-button--has-label');
+        }
         if (!this.label && (this.icon || this.iconRight)) {
             classes.push('sd-button--icon-only');
         }
@@ -47,7 +51,7 @@ export class SdButton {
         const buttonClasses = this.getButtonClasses();
         // 유틸로 색상 키 -> HEX 매핑 (없으면 원본 그대로)
         const resolvedColor = resolveColor(this.color);
-        return (h("button", { key: '9ec771aafd98f10d37d2cb2f5e77c1a2a4e78f1f', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '0f58e79c1c12bf071ff839fdf3db7ddc09c71a67', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: '6e4135d9c5315e1504ce6ae617f7eebe1f24b2d9', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: '6dbf55c9fbb992ddd85fec51777679c4fa03f67d', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '318d664ac5a689560b9aaa5ba43e2c5abb5f17ae', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
+        return (h("button", { key: 'b1436c0cdf0267446df9cd022df68a8a6c349ca5', class: `${buttonClasses} ${this.sdClass}`, type: this.type, disabled: this.disabled, style: { '--button-color': resolvedColor }, onClick: this.handleClick }, h("div", { key: '70f9450410dbc7b2603679cda397bc8f211928b1', class: "sd-button__content" }, this.icon && (h("sd-icon", { key: 'ab09632262d175e8dc9a31df4e673470d128b274', class: "sd-button__icon sd-button__icon--left", name: this.icon, size: this.iconSize ?? ICON_SIZES[this.size], color: this.iconColor ?? (this.variant === 'primary' ? '#fff' : resolvedColor) })), this.label && h("div", { key: 'c33e565c9108996ab4a3d84b5beaf1d8acbd5700', class: "sd-button__label" }, this.label), this.iconRight && (h("sd-icon", { key: '112a9649b77e7eb67198d0bf7bf407e9f7f71cd5', class: "sd-button__icon sd-button__icon--right", name: this.iconRight, size: ICON_SIZES[this.size], color: this.variant === 'primary' ? '#fff' : resolvedColor })))));
     }
     static get is() { return "sd-button"; }
     static get originalStyleUrls() {

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

@@ -7,5 +7,5 @@ sd-card .sd-card {
   background: white;
 }
 sd-card .sd-card--bordered {
-  border: 1px solid #e1e1e1;
+  border: 1px solid #E1E1E1;
 }

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

@@ -15,16 +15,16 @@ sd-checkbox .sd-checkbox > input {
   display: none;
 }
 sd-checkbox .sd-checkbox:hover.sd-checkbox--checked .sd-checkbox__bg, sd-checkbox .sd-checkbox:hover.sd-checkbox--indeterminate .sd-checkbox__bg {
-  border-color: #005cc9;
-  background: #005cc9;
+  border-color: #005CC9;
+  background: #005CC9;
 }
 sd-checkbox .sd-checkbox:hover.sd-checkbox--unchecked .sd-checkbox__bg {
-  border: 1px solid #0075ff;
-  background: #d9eaff;
+  border: 1px solid #0075FF;
+  background: #D9EAFF;
 }
 sd-checkbox .sd-checkbox:hover.sd-checkbox--disabled .sd-checkbox__bg {
   border: 1px solid transparent;
-  background: #eeeeee;
+  background: #EEEEEE;
 }
 sd-checkbox .sd-checkbox__bg {
   width: 16px;
@@ -44,12 +44,12 @@ sd-checkbox .sd-checkbox__label {
   line-height: 20px;
 }
 sd-checkbox .sd-checkbox--checked.sd-checkbox--disabled .sd-checkbox__bg, sd-checkbox .sd-checkbox--indeterminate.sd-checkbox--disabled .sd-checkbox__bg {
-  background: #eeeeee;
-  border: 1px solid #cccccc !important;
+  background: #EEEEEE;
+  border: 1px solid #CCCCCC !important;
 }
 sd-checkbox .sd-checkbox--checked .sd-checkbox__bg, sd-checkbox .sd-checkbox--indeterminate .sd-checkbox__bg {
-  border: 1px solid #0075ff;
-  background: #0075ff;
+  border: 1px solid #0075FF;
+  background: #0075FF;
 }
 sd-checkbox .sd-checkbox--unchecked .sd-checkbox__bg {
   background: white;
@@ -58,6 +58,6 @@ sd-checkbox .sd-checkbox--disabled {
   cursor: not-allowed;
 }
 sd-checkbox .sd-checkbox--disabled .sd-checkbox__bg {
-  background: #eeeeee;
-  border: 1px solid #cccccc !important;
+  background: #EEEEEE;
+  border: 1px solid #CCCCCC !important;
 }

package/dist/collection/components/sd-date-box/sd-date-box.css

@@ -25,7 +25,7 @@
   line-height: 28px;
 }
 .sd-date-box.sd-date-box--disabled {
-  color: #cccccc;
+  color: #CCCCCC;
   cursor: default !important;
   pointer-events: none;
 }
@@ -34,7 +34,7 @@
   cursor: pointer;
 }
 .sd-date-box.sd-hoverable:hover .sd-date-box__content {
-  background: #d9eaff;
+  background: #D9EAFF;
 }
 .sd-date-box.sd-date-box--in-range:not(.sd-date-box--disabled) .sd-date-box__content::before {
   content: "";
@@ -43,7 +43,7 @@
   left: -5px;
   width: calc(100% + 10px);
   height: 100%;
-  background: #d9eaff;
+  background: #D9EAFF;
 }
 .sd-date-box.sd-date-box--in-range.sd-date-box--type-start .sd-date-box__content::before {
   left: auto !important;
@@ -60,7 +60,7 @@
   content: "";
   position: absolute;
   inset: 0;
-  background: #0075ff;
+  background: #0075FF;
   border-radius: 14px;
   z-index: 1;
 }
@@ -79,6 +79,6 @@
   transform: translateX(-50%);
   width: 28px;
   height: 28px;
-  border: 1px solid #e1e1e1 !important;
+  border: 1px solid #E1E1E1 !important;
   border-radius: 14px;
 }

package/dist/collection/components/sd-date-range-picker/sd-date-range-picker.css

@@ -90,5 +90,5 @@ 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;
 }

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

@@ -10,7 +10,7 @@ sd-field .sd-field *:focus-within {
   outline: none !important;
 }
 sd-field .sd-field:not(.sd-field--disabled):hover .sd-field__control {
-  border: 1px solid #0075ff !important;
+  border: 1px solid #0075FF !important;
   box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
 }
 sd-field .sd-field.sd-field--disabled {
@@ -20,13 +20,13 @@ sd-field .sd-field.sd-field--disabled .sd-field__wrapper {
   cursor: not-allowed !important;
 }
 sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__label-inside {
-  border-color: #cccccc;
+  border-color: #CCCCCC;
   color: #888888;
   cursor: not-allowed !important;
 }
 sd-field .sd-field.sd-field--disabled .sd-field__wrapper .sd-field__control {
-  background-color: #eeeeee;
-  border-color: #cccccc;
+  background-color: #EEEEEE;
+  border-color: #CCCCCC;
   color: #888888;
   cursor: not-allowed !important;
 }
@@ -53,11 +53,11 @@ sd-field .sd-field--has-label-inside .sd-field__wrapper .sd-field__label {
   align-items: center;
   justify-content: center;
   padding: 3px 12px;
-  border: 1px solid #cccccc;
+  border: 1px solid #CCCCCC;
   border-right: none;
   border-radius: 4px 0 0 4px;
-  border-color: #aaaaaa;
-  background-color: #f6f6f6;
+  border-color: #AAAAAA;
+  background-color: #F6F6F6;
 }
 sd-field .sd-field__wrapper {
   width: 100%;
@@ -77,7 +77,7 @@ sd-field .sd-field__wrapper .sd-field__control {
   height: 100%;
   display: flex;
   flex: 1;
-  border: 1px solid #aaaaaa;
+  border: 1px solid #AAAAAA;
   border-radius: 4px;
   background: white;
 }
@@ -86,17 +86,17 @@ sd-field .sd-field__wrapper .sd-field__control--label-inside {
   border-bottom-left-radius: 0px;
 }
 sd-field .sd-field--error:not(:hover) .sd-field__wrapper .sd-field__control {
-  border: 1px solid #fb4444 !important;
+  border: 1px solid #FB4444 !important;
 }
 sd-field .sd-field.sd-field--focus .sd-field__wrapper .sd-field__control, sd-field .sd-field.sd-field--hover .sd-field__wrapper .sd-field__control {
-  border: 1px solid #0075ff !important;
+  border: 1px solid #0075FF !important;
   box-shadow: 0px 0px 4px 0px rgba(0, 113, 255, 0.4);
 }
 sd-field .sd-field.sd-field--pass .sd-field__wrapper .sd-field__control {
-  border: 1px solid #2bce6c !important;
+  border: 1px solid #2BCE6C !important;
 }
 sd-field .sd-field .sd-field__error-message {
-  color: #fb4444;
+  color: #FB4444;
   font-size: 12px;
   line-height: 20px;
   margin-top: 4px;

package/dist/collection/components/sd-file-picker/sd-file-picker.css

@@ -11,9 +11,9 @@ sd-file-picker {
   height: 28px;
   gap: 8px;
   padding: 4px 8px;
-  border: 1px solid #aaaaaa;
+  border: 1px solid #AAAAAA;
   border-radius: 4px;
-  background-color: #ffffff;
+  background-color: #FFFFFF;
   cursor: pointer;
   -webkit-user-select: none;
   user-select: none;
@@ -29,13 +29,13 @@ sd-file-picker {
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
-  color: #aaaaaa;
+  color: #AAAAAA;
 }
 .sd-file-picker__text--active {
   color: #222222;
 }
 .sd-file-picker__text--placeholder {
-  color: #aaaaaa;
+  color: #AAAAAA;
 }
 .sd-file-picker__icon {
   flex-shrink: 0;
@@ -67,17 +67,17 @@ sd-file-picker {
   pointer-events: none;
 }
 .sd-file-picker:hover:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) {
-  background-color: #f6f6f6;
+  background-color: #F6F6F6;
 }
 .sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) {
-  background-color: #ffffff;
+  background-color: #FFFFFF;
 }
 .sd-file-picker--active:not(.sd-file-picker--inline):not(.sd-file-picker--disabled) .sd-file-picker__text {
   color: #222222;
 }
 .sd-file-picker--disabled:not(.sd-file-picker--inline) {
-  background-color: #eeeeee;
-  border-color: #cccccc;
+  background-color: #EEEEEE;
+  border-color: #CCCCCC;
   cursor: not-allowed !important;
 }
 .sd-file-picker--disabled:not(.sd-file-picker--inline) .sd-file-picker__text {
@@ -90,7 +90,7 @@ sd-file-picker {
   height: auto;
 }
 .sd-file-picker--inline .sd-file-picker__text {
-  color: #aaaaaa;
+  color: #AAAAAA;
 }
 .sd-file-picker--inline:hover:not(.sd-file-picker--disabled) .sd-file-picker__text {
   color: #737373;
@@ -99,5 +99,5 @@ sd-file-picker {
   color: #222222;
 }
 .sd-file-picker--inline.sd-file-picker--disabled .sd-file-picker__text {
-  color: #cccccc;
+  color: #CCCCCC;
 }

package/dist/collection/components/sd-floating-portal/sd-floating-portal.css

@@ -5,39 +5,39 @@
   font-size: 12px;
   position: relative;
   box-sizing: border-box;
-  background: #07284a;
-  color: #ffffff;
+  background: #07284A;
+  color: #FFFFFF;
 }
 .sd-floating-menu .sd-floating-menu__arrow {
-  color: #07284a;
+  color: #07284A;
 }
 .sd-floating-menu--default {
-  background: #07284a;
-  color: #ffffff;
+  background: #07284A;
+  color: #FFFFFF;
 }
 .sd-floating-menu--default .sd-floating-menu__arrow {
-  color: #07284a;
+  color: #07284A;
 }
 .sd-floating-menu--caution {
-  background: #fce6e6;
-  color: #fb4444;
+  background: #FCE6E6;
+  color: #FB4444;
 }
 .sd-floating-menu--caution .sd-floating-menu__arrow {
-  color: #fce6e6;
+  color: #FCE6E6;
 }
 .sd-floating-menu--notice {
-  background: #ffead7;
-  color: #ff6b00;
+  background: #FEF1EA;
+  color: #FF6B00;
 }
 .sd-floating-menu--notice .sd-floating-menu__arrow {
-  color: #ffead7;
+  color: #FEF1EA;
 }
 .sd-floating-menu--accent {
-  background: #e6f1ff;
-  color: #0075ff;
+  background: #E6F1FF;
+  color: #0075FF;
 }
 .sd-floating-menu--accent .sd-floating-menu__arrow {
-  color: #e6f1ff;
+  color: #E6F1FF;
 }
 .sd-floating-menu__arrow {
   position: absolute;