sellmate-design-system-react 0.1.7 → 0.1.9

package/dist/theme.css

@@ -285,9 +285,14 @@
   --spacing-feedback-md-gap: 8px;
   --spacing-feedback-lg-paddingX: 16px;
   --spacing-feedback-lg-gap: 12px;
-  --spacing-stack-gap-tight: 2px;
-  --spacing-stack-gap-normal: 4px;
-  --spacing-stack-gap-relaxed: 8px;
+  --spacing-stack-gap-text-tight: 2px;
+  --spacing-stack-gap-text-normal: 4px;
+  --spacing-stack-gap-text-relaxed: 8px;
+  --spacing-stack-gap-element-tight: 4px;
+  --spacing-stack-gap-element-normal: 8px;
+  --spacing-stack-gap-element-relaxed: 12px;
+  --spacing-stack-gap-element-wide: 16px;
+  --spacing-stack-gap-element-spacious: 24px;
   --spacing-field-sm-paddingX: 12px;
   --spacing-field-sm-paddingY: 4px;
   --spacing-field-sm-container-gap: 8px;
@@ -373,6 +378,7 @@
   --border-width-field-default: 1px;
   --border-width-navigation-default: 1px;
   --opacity-005: 5%;
+  --opacity-040: 40%;
   --z-raised: 1;
   --shadow-normal-xs: 0px 0px 16px -4px rgba(34,34,34,0.12), 2px 4px 6px -2px rgba(34,34,34,0.1);
   --shadow-normal-sm: 0px 0px 24px -6px rgba(34,34,34,0.12), 4px 8px 16px -4px rgba(34,34,34,0.1);
@@ -429,9 +435,14 @@
   --sys-space-feedback-md-gap: 8px;
   --sys-space-feedback-lg-paddingX: 16px;
   --sys-space-feedback-lg-gap: 12px;
-  --sys-space-stack-gap-tight: 2px;
-  --sys-space-stack-gap-normal: 4px;
-  --sys-space-stack-gap-relaxed: 8px;
+  --sys-space-stack-gap-text-tight: 2px;
+  --sys-space-stack-gap-text-normal: 4px;
+  --sys-space-stack-gap-text-relaxed: 8px;
+  --sys-space-stack-gap-element-tight: 4px;
+  --sys-space-stack-gap-element-normal: 8px;
+  --sys-space-stack-gap-element-relaxed: 12px;
+  --sys-space-stack-gap-element-wide: 16px;
+  --sys-space-stack-gap-element-spacious: 24px;
   --sys-space-field-sm-paddingX: 12px;
   --sys-space-field-sm-paddingY: 4px;
   --sys-space-field-sm-container-gap: 8px;
@@ -581,6 +592,8 @@
   --cmp-button-danger-outline-bg-hover: #FCEFEF;
   --cmp-button-danger-outline-border: #E30000;
   --cmp-button-danger-outline-content: #E30000;
+  --cmp-button-group-gap-normal: 8px;
+  --cmp-button-group-gap-wide: 12px;
   --cmp-ghostButton-xxs-size: 16px;
   --cmp-ghostButton-xxs-icon: 12px;
   --cmp-ghostButton-xs-size: 24px;
@@ -604,6 +617,7 @@
   --cmp-ghostButton-inverse-content: #FFFFFF;
   --cmp-ghostButton-inverse-disabled: #E1E1E1;
   --cmp-ghostButton-inverse-hover-bg: #FFFFFF;
+  --cmp-ghostButton-group-gap: 4px;
   --cmp-textLink-sm-gap: 4px;
   --cmp-textLink-sm-icon: 16px;
   --cmp-textLink-md-gap: 8px;
@@ -614,6 +628,9 @@
   --cmp-textLink-icon-disabled: #BBBBBB;
   --cmp-textLink-lg-gap: 8px;
   --cmp-textLink-lg-icon: 20px;
+  --cmp-textLink-group-horizontal-normal: 16px;
+  --cmp-textLink-group-horizontal-wide: 24px;
+  --cmp-textLink-group-vertical-normal: 4px;
   --cmp-switch-width: 32px;
   --cmp-switch-height: 20px;
   --cmp-switch-paddingXY: 2px;
@@ -641,6 +658,7 @@
   --cmp-toggle-content-hover: #FFFFFF;
   --cmp-toggle-content-select: #0075FF;
   --cmp-toggle-content-disabled: #888888;
+  --cmp-toggle-group-gap: 8px;
   --cmp-checkbox-size: 16px;
   --cmp-checkbox-radius: 2px;
   --cmp-checkbox-borderWidth: 1px;
@@ -740,10 +758,10 @@
   --cmp-select-text-disabled: #888888;
   --cmp-field-label-sm-height: 28px;
   --cmp-field-label-sm-gap: 6px;
-  --cmp-field-label-sm-icon: 12px;
+  --cmp-field-label-sm-icon: 16px;
   --cmp-field-label-md-height: 36px;
   --cmp-field-label-md-gap: 8px;
-  --cmp-field-label-md-icon: 12px;
+  --cmp-field-label-md-icon: 16px;
   --cmp-field-addonLabel-height: 28px;
   --cmp-field-addonLabel-gap: 6px;
   --cmp-field-addonLabel-paddingX: 12px;
@@ -807,6 +825,7 @@
   --cmp-numberInput-stepper-bg-disabled: #EEEEEE;
   --cmp-numberInput-stepper-icon-default: #0075FF;
   --cmp-numberInput-stepper-icon-disabled: #BBBBBB;
+  --cmp-numberInput-stepper-border-default: #93C4FF;
   --cmp-chipInput-sm-minHeight: 36px;
   --cmp-chipInput-sm-paddingX: 12px;
   --cmp-chipInput-sm-paddingY: 6px;
@@ -999,6 +1018,16 @@
   --cmp-toast-info-icon: #0075FF;
   --cmp-toast-info-text: #222222;
   --cmp-toast-info-textLink: #555555;
+  --cmp-overlay-header-bg: #FFFFFF;
+  --cmp-overlay-header-paddingX: 24px;
+  --cmp-overlay-header-paddingY: 20px;
+  --cmp-overlay-header-gap: 12px;
+  --cmp-overlay-header-title-color: #033F59;
+  --cmp-overlay-footer-bg-default: #FFFFFF;
+  --cmp-overlay-footer-bg-neutral: #F6F6F6;
+  --cmp-overlay-footer-paddingX: 20px;
+  --cmp-overlay-footer-paddingY: 8px;
+  --cmp-overlay-footer-gap: 16px;
   --cmp-modal-radius: 8px;
   --cmp-modal-confirm-paddingX: 32px;
   --cmp-modal-confirm-paddingY: 40px;
@@ -1012,10 +1041,6 @@
   --cmp-modal-confirm-positive-icon: #0075FF;
   --cmp-modal-confirm-negative-icon: #E30000;
   --cmp-modal-bg: #FFFFFF;
-  --cmp-modal-action-header-paddingX: 24px;
-  --cmp-modal-action-header-paddingY: 20px;
-  --cmp-modal-action-header-gap: 12px;
-  --cmp-modal-action-title-color: #033F59;
   --cmp-modal-action-body-paddingX: 20px;
   --cmp-modal-action-body-paddingBottom: 20px;
   --cmp-modal-action-footer-paddingX: 20px;
@@ -1032,14 +1057,11 @@
   --cmp-popup-header-bg-inverse: #FFFFFF;
   --cmp-popup-header-title-default: #FFFFFF;
   --cmp-popup-header-title-inverse: #004290;
-  --cmp-popup-footer-bg: #FFFFFF;
-  --cmp-popup-footer-paddingX: 20px;
-  --cmp-popup-footer-paddingY: 8px;
-  --cmp-popup-footer-gap: 16px;
+  --cmp-popup-header-paddingX: 16px;
+  --cmp-popup-header-paddingY: 12px;
   --cmp-popup-bg: #EEEEEE;
-  --cmp-spinner-size: 80px;
-  --cmp-spinner-color-track: #EEEEEE;
-  --cmp-spinner-color-arc: #2D8DFF;
+  --cmp-drawer-bg: #F6F6F6;
+  --cmp-drawer-body-border: #E1E1E1;
   --cmp-guide-gap: 4px;
   --cmp-guide-button-height: 28px;
   --cmp-guide-button-paddingX: 12px;
@@ -1076,6 +1098,8 @@
   --cmp-progress-success-color: #12B553;
   --cmp-progress-error-color: #FB4444;
   --cmp-progress-bar-text: #FFFFFF;
+  --cmp-progress-inverse-color: #FFFFFF;
+  --cmp-progress-inverse-opacity: 40%;
   --cmp-table-header-height: 36px;
   --cmp-table-header-paddingX: 16px;
   --cmp-table-header-gap: 4px;
@@ -1086,8 +1110,8 @@
   --cmp-table-body-default-paddingY: 8px;
   --cmp-table-body-dense-height: 32px;
   --cmp-table-body-dense-paddingY: 6px;
-  --cmp-table-body-paddingX: 16px;
-  --cmp-table-body-frame-padding: 8px;
+  --cmp-table-body-paddingX-default: 16px;
+  --cmp-table-body-paddingX-frame: 8px;
   --cmp-table-border-color: #E1E1E1;
   --cmp-table-border-width: 1px;
   --cmp-table-content-gap: 8px;
@@ -1097,7 +1121,9 @@
   --cmp-table-bar-count-total: #066D9B;
   --cmp-table-bar-count-null: #888888;
   --cmp-table-radius: 8px;
-  --cmp-table-keyValue-body-padding: 8px;
+  --cmp-table-keyValue-body-paddingY: 8px;
+  --cmp-table-keyValue-body-paddingX-default: 8px;
+  --cmp-table-keyValue-body-paddingX-wide: 16px;
   --cmp-table-keyValue-height: 44px;
   --cmp-table-keyValue-search-paddingX: 32px;
   --cmp-table-keyValue-search-bg: #F9F9F9;
@@ -1115,6 +1141,7 @@
   --cmp-pagination-item-content-default: #555555;
   --cmp-pagination-item-content-hover: #004290;
   --cmp-pagination-item-content-selected: #004290;
+  --cmp-pagination-simple-gap: 8px;
   --cmp-tab-main-lg-height: 44px;
   --cmp-tab-main-lg-paddingX: 32px;
   --cmp-tab-main-md-height: 36px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sellmate-design-system-react",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Sellmate Design System — React (TypeScript + Tailwind v4) port",
   "license": "UNLICENSED",
   "keywords": [