@refinn/core-ui 0.1.1 → 0.1.2

package/dist/theme.css

@@ -6,6 +6,8 @@
  */
 
 @theme {
+  --spacing: 1px;
+
   /* ========================================
    * Fonts
    * ======================================== */
@@ -622,7 +624,8 @@
    * Border Radius
    * ======================================== */
   --radius-none: 0px;
-  --radius-sm: 2px;
+  --radius-xs: 2px;
+  --radius-sm: 4px;
   --radius-DEFAULT: 4px;
   --radius-md: 6px;
   --radius-lg: 8px;
@@ -631,6 +634,14 @@
   --radius-3xl: 24px;
   --radius-4xl: 32px;
   --radius-full: 9999px;
+  --radius-2: 2px;
+  --radius-4: 4px;
+  --radius-6: 6px;
+  --radius-8: 8px;
+  --radius-12: 12px;
+  --radius-16: 16px;
+  --radius-24: 24px;
+  --radius-32: 32px;
 
   /* ========================================
    * Toast
@@ -700,6 +711,9 @@
   --color-alert-text-secondary:        var(--color-gray-600);
   --color-alert-text-primary-inverse:  var(--color-white-100);
   --color-alert-text-secondary-inverse: var(--color-white-90);
+  --color-enabled:                       var(--color-blue-600);
+  --color-enabled-inverse:              var(--color-white-100);
+  --color-enabled-dark:                 var(--color-gray-900);
 
   /* Close button */
   --color-alert-close:         var(--color-gray-500);
@@ -747,4 +761,636 @@
   --shadow-medium: 0px 4px 6px -1px rgba(17, 24, 39, 0.1), 0px 2px 4px -2px rgba(17, 24, 39, 0.1);
   --shadow-large: 0px 10px 16px -3px rgba(17, 24, 39, 0.1), 0px 4px 6px -4px rgba(17, 24, 39, 0.1);
   --shadow-xl: 0px 20px 24px -5px rgba(17, 24, 39, 0.1), 0px 8px 10px -6px rgba(17, 24, 39, 0.1);
-}
+  --shadow-small-top: 0px -1px 2px 0px rgba(17, 24, 39, 0.05);
+  --shadow-base-top: 0px -1px 3px 0px rgba(17, 24, 39, 0.1), 0px -1px 2px -1px rgba(17, 24, 39, 0.1);
+  --shadow-medium-top: 0px -4px 6px -1px rgba(17, 24, 39, 0.1), 0px -2px 4px -2px rgba(17, 24, 39, 0.1);
+
+  /* ========================================
+   * Variables - Collections - Colors
+   * ======================================== */
+  --color-button-background-primary-enabled:   var(--color-blue-600);
+  --color-button-background-primary-hover:     var(--color-blue-700);
+  --color-button-background-primary-active:    var(--color-blue-800);
+  --color-button-background-primary-focus:     var(--color-blue-600);
+  --color-button-background-primary-disabled:  var(--color-gray-100);
+  --color-button-background-primary-pending:   var(--color-blue-600);
+
+  --color-button-background-secondary-enabled:   var(--color-gray-100);
+  --color-button-background-secondary-hover:     var(--color-gray-200);
+  --color-button-background-secondary-active:    var(--color-gray-300);
+  --color-button-background-secondary-focus:     var(--color-gray-100);
+  --color-button-background-secondary-disabled:  var(--color-gray-100);
+  --color-button-background-secondary-pending:   var(--color-gray-100);
+
+  --color-button-background-tertiary-enabled:   var(--color-black-0);
+  --color-button-background-tertiary-hover:     var(--color-gray-200);
+  --color-button-background-tertiary-active:    var(--color-gray-300);
+  --color-button-background-tertiary-focus:     var(--color-gray-100);
+  --color-button-background-tertiary-disabled:  var(--color-gray-100);
+  --color-button-background-tertiary-pending:   var(--color-gray-100);
+
+  --color-button-background-inverse-enabled:   var(--color-white-100);
+  --color-button-background-inverse-hover:     var(--color-white-90);
+  --color-button-background-inverse-active:    var(--color-white-80);
+  --color-button-background-inverse-focus:     var(--color-white-100);
+  --color-button-background-inverse-disabled:  var(--color-gray-50);
+  --color-button-background-inverse-pending:   var(--color-white-100);
+
+  --color-button-background-transparent-enabled:           var(--color-black-0);
+  --color-button-background-transparent-on-light-hover:    var(--color-white-20);
+  --color-button-background-transparent-on-dark-hover:     var(--color-black-20);
+  --color-button-background-transparent-on-light-active:   var(--color-white-30);
+  --color-button-background-transparent-on-dark-active:    var(--color-black-30);
+  --color-button-background-transparent-focus:             var(--color-black-0);
+  --color-button-background-transparent-disabled:          var(--color-black-0);
+  --color-button-background-transparent-pending:           var(--color-black-0);
+
+  --color-button-text-enabled:           var(--color-gray-900);
+  --color-button-text-disabled:          var(--color-gray-400);
+  --color-button-text-danger:            var(--color-red-600);
+  --color-button-text-brand:             var(--color-blue-600);
+  --color-button-text-inverse:           var(--color-white-100);
+  --color-button-text-inverse-disabled:  var(--color-white-40);
+
+  --color-button-border-focus:     var(--color-blue-500);
+  --color-button-border-inverse:   var(--color-white-100);
+
+  --color-button-sheet-background-enabled:     var(--color-white-100);
+
+  --color-button-sheet-text-primary:     var(--color-gray-900);
+  --color-button-sheet-text-secondary:   var(--color-gray-600);
+
+  --color-link-text-enabled:         var(--color-blue-600);
+  --color-link-text-hover:           var(--color-blue-700);
+  --color-link-text-active:          var(--color-blue-800);
+  --color-link-text-focus:           var(--color-blue-600);
+  --color-link-text-visited:         var(--color-purple-700);
+  --color-link-text-enabled-inverse: var(--color-white-100);
+  --color-link-text-hover-inverse:   var(--color-white-80);
+  --color-link-text-active-inverse:  var(--color-white-65);
+  --color-link-text-focus-inverse:   var(--color-white-100);
+  --color-link-text-visited-inverse: var(--color-white-65);
+  --color-link-text-enabled-dark:    var(--color-gray-900);
+  --color-link-text-hover-dark:      var(--color-blue-600);
+  --color-link-text-active-dark:     var(--color-blue-700);
+  --color-link-text-focus-dark:      var(--color-gray-900);
+
+  --color-link-icon-enabled:         var(--color-blue-600);
+  --color-link-icon-hover:           var(--color-blue-700);
+  --color-link-icon-active:          var(--color-blue-800);
+  --color-link-icon-focus:           var(--color-blue-600);
+  --color-link-icon-visited:         var(--color-purple-700);
+  --color-link-icon-enabled-inverse: var(--color-white-100);
+  --color-link-icon-hover-inverse:   var(--color-white-85);
+  --color-link-icon-active-inverse:  var(--color-white-80);
+  --color-link-icon-focus-inverse:   var(--color-white-100);
+  --color-link-icon-visited-inverse: var(--color-white-65);
+  --color-link-icon-enabled-dark:    var(--color-gray-900);
+  --color-link-icon-hover-dark:      var(--color-blue-600);
+  --color-link-icon-active-dark:     var(--color-blue-700);
+  --color-link-icon-focus-dark:      var(--color-gray-900);
+
+  --color-link-border-focus:           var(--color-blue-500);
+  --color-link-border-focus-inverse:   var(--color-white-100);
+
+  --color-tab-background-primary:      var(--color-black-0);
+
+  --color-tab-text-enabled:           var(--color-gray-900);
+  --color-tab-text-hover:             var(--color-gray-600);
+  --color-tab-text-active:            var(--color-blue-600);
+  --color-tab-text-focus:             var(--color-gray-900);
+  --color-tab-text-disabled:          var(--color-gray-400);
+
+  --color-tab-border-enabled:           var(--color-gray-50);
+  --color-tab-border-hover:             var(--color-gray-200);
+  --color-tab-border-active:            var(--color-blue-600);
+  --color-tab-border-focus:             var(--color-blue-500);
+  --color-tab-border-disabled:          var(--color-gray-100);
+
+  --color-navigation-menu-background-enabled:          var(--color-white-100);
+  --color-navigation-menu-background-hover:            var(--color-gray-50);
+  --color-navigation-menu-background-active:           var(--color-gray-50);
+  --color-navigation-menu-background-brand:            var(--color-blue-600);
+  --color-navigation-menu-background-brand-subtle:     var(--color-blue-50);
+  --color-navigation-menu-background-transparent:      var(--color-black-0);
+
+  --color-navigation-menu-text-enabled:          var(--color-gray-900);
+  --color-navigation-menu-text-subtle:           var(--color-gray-600);
+  --color-navigation-menu-text-inverse:          var(--color-white-100);
+  --color-navigation-menu-text-hover:            var(--color-blue-600);
+  --color-navigation-menu-text-hover-inverse:    var(--color-white-80);
+  --color-navigation-menu-text-active:           var(--color-blue-600);
+  --color-navigation-menu-text-active-inverse:   var(--color-white-100);
+  --color-navigation-menu-text-focus:            var(--color-gray-900);
+  --color-navigation-menu-text-focus-inverse:    var(--color-white-100);
+
+  --color-navigation-menu-icon-brand:            var(--color-blue-600);
+
+  --color-navigation-menu-border-enabled:          var(--color-gray-300);
+  --color-navigation-menu-border-inverse:          var(--color-white-100);
+  --color-navigation-menu-border-active:           var(--color-blue-600);
+  --color-navigation-menu-border-active-inverse:   var(--color-white-100);
+  --color-navigation-menu-border-focus:            var(--color-blue-500);
+  --color-navigation-menu-border-focus-inverse:    var(--color-white-100);
+
+  --color-icon-button-background-enabled:                        var(--color-gray-100);
+  --color-icon-button-background-hover:                          var(--color-gray-200);
+  --color-icon-button-background-active:                         var(--color-gray-300);
+  --color-icon-button-background-transparent:                    var(--color-black-0);
+  --color-icon-button-background-light-transparent-enabled:      var(--color-white-10);
+  --color-icon-button-background-light-transparent-hover:        var(--color-white-20);
+  --color-icon-button-background-light-transparent-active:       var(--color-white-30);
+  --color-icon-button-background-dark-transparent-enabled:       var(--color-black-10);
+  --color-icon-button-background-dark-transparent-hover:         var(--color-black-20);
+  --color-icon-button-background-dark-transparent-active:        var(--color-black-30);
+
+  --color-icon-button-icon-primary:              var(--color-gray-600);
+  --color-icon-button-icon-inverse:              var(--color-white-100);
+  --color-icon-button-icon-brand:                var(--color-blue-600);
+  --color-icon-button-icon-danger:               var(--color-red-500);
+  --color-icon-button-icon-disabled:             var(--color-gray-400);
+  --color-icon-button-icon-inverse-disabled:     var(--color-white-40);
+  --color-icon-button-icon-brand-disabled:       var(--color-blue-600 / 40%);
+  --color-icon-button-icon-inverse-danger:       var(--color-red-400);
+
+  --color-icon-button-border-focus:              var(--color-blue-500);
+
+  --color-chip-background-enabled:               var(--color-gray-100);
+  --color-chip-background-hover:                 var(--color-gray-200);
+  --color-chip-background-active:                var(--color-blue-600);
+  --color-chip-background-active-hover:          var(--color-blue-700);
+  --color-chip-background-black-active:          var(--color-blue-950);
+  --color-chip-background-black-active-hover:    var(--color-blue-900);
+  --color-chip-background-active-focus:          var(--color-blue-600);
+  --color-chip-background-active-disabled:       var(--color-blue-600 / 40%);
+  --color-chip-background-focus:                 var(--color-gray-100);
+  --color-chip-background-disabled:              var(--color-gray-100);
+  --color-chip-background-inverse:               var(--color-white-100);
+
+  --color-chip-text-enabled:                var(--color-gray-900);
+  --color-chip-text-disabled:               var(--color-gray-400);
+  --color-chip-text-inverse:                var(--color-white-100);
+  --color-chip-text-inverse-disabled:       var(--color-white-65);
+
+  --color-chip-border-enabled:       var(--color-gray-300);
+  --color-chip-border-hover:         var(--color-gray-500);
+  --color-chip-border-focus:         var(--color-blue-500);
+  --color-chip-border-inverse:       var(--color-white-100);
+
+  --color-segmented-control-background-enabled:       var(--color-black-0);
+  --color-segmented-control-background-hover:       var(--color-gray-200);
+  --color-segmented-control-background-active:       var(--color-blue-950);
+  --color-segmented-control-background-active-hover:       var(--color-blue-900);
+  --color-segmented-control-background-active-focus:       var(--color-blue-950);
+  --color-segmented-control-background-focus:       var(--color-black-0);
+
+  --color-segmented-control-text-primary:       var(--color-gray-900);
+  --color-segmented-control-text-secondary:       var(--color-gray-600);
+  --color-segmented-control-text-primary-inverse:       var(--color-white-100);
+  --color-segmented-control-text-secondary-inverse:       var(--color-white-80);
+
+  --color-segmented-control-border-focus:       var(--color-blue-600);
+
+  --color-slider-background-track:       var(--color-blue-600);
+  --color-slider-background-root:       var(--color-gray-100);
+  --color-slider-background-disabled:       var(--color-gray-200);
+
+  --color-slider-border-enabled:       var(--color-gray-200);
+  --color-slider-border-hover:       var(--color-gray-300);
+  --color-slider-border-active:       var(--color-gray-300);
+  --color-slider-border-focus:       var(--color-blue-500);
+  --color-slider-border-disabled:       var(--color-gray-200);
+
+  --color-slider-handle-enabled:       var(--color-white-100);
+  --color-slider-handle-hover:       var(--color-white-100);
+  --color-slider-handle-active:       var(--color-gray-50);
+  --color-slider-handle-focus:       var(--color-white-100);
+  --color-slider-handle-disabled:       var(--color-gray-100);
+
+  --color-menu-background-enabled:       var(--color-white-100);
+  --color-menu-background-hover:       var(--color-gray-100);
+  --color-menu-background-active:       var(--color-gray-200);
+  --color-menu-background-focus:       var(--color-white-100);
+  --color-menu-background-disabled:       var(--color-gray-50);
+
+  --color-menu-text-enabled:       var(--color-gray-900);
+  --color-menu-text-disabled:       var(--color-gray-400);
+
+  --color-menu-border-focus:       var(--color-blue-500);
+
+  --color-checkbox-text-primary:      var(--color-gray-900);
+  --color-checkbox-text-secondary:      var(--color-gray-600);
+  --color-checkbox-text-danger:      var(--color-red-600);
+  --color-checkbox-text-disabled:      var(--color-gray-400);
+  --color-checkbox-text-primary-inverse:      var(--color-white-100);
+  --color-checkbox-text-secondary-inverse:      var(--color-white-85);
+  --color-checkbox-text-danger-inverse:      var(--color-red-500);
+  --color-checkbox-text-disabled-inverse:      var(--color-white-40);
+
+  --color-checkbox-border-focus:      var(--color-blue-500);
+
+  --color-dropdown-background-enabled:      var(--color-white-100);
+  --color-dropdown-background-hover:      var(--color-gray-100);
+  --color-dropdown-background-active:      var(--color-gray-200);
+  --color-dropdown-background-focus:      var(--color-white-100);
+  --color-dropdown-background-disabled:      var(--color-gray-50);
+
+  --color-dropdown-text-primary:      var(--color-gray-900);
+  --color-dropdown-text-secondary:      var(--color-gray-600);
+  --color-dropdown-text-tertiary:      var(--color-gray-400);
+  --color-dropdown-text-danger:      var(--color-red-600);
+  --color-dropdown-text-disabled:      var(--color-gray-400);
+
+  --color-dropdown-border-enabled:      var(--color-gray-300);
+  --color-dropdown-border-hover:      var(--color-gray-400);
+  --color-dropdown-border-active:      var(--color-blue-600);
+  --color-dropdown-border-focus:      var(--color-blue-500);
+  --color-dropdown-border-danger:      var(--color-red-600);
+  --color-dropdown-border-disabled:      var(--color-gray-200);
+  --color-dropdown-border-typing-indicator:      var(--color-gray-900);
+
+  --color-text-field-background-enabled:      var(--color-white-100);
+  --color-text-field-background-disabled:      var(--color-gray-50);
+
+  --color-text-field-text-primary:      var(--color-gray-900);
+  --color-text-field-text-secondary:      var(--color-gray-600);
+  --color-text-field-text-tertiary:      var(--color-gray-400);
+  --color-text-field-text-danger:      var(--color-red-600);
+  --color-text-field-text-disabled:      var(--color-gray-400);
+
+  --color-text-field-border-enabled:      var(--color-gray-300);
+  --color-text-field-border-hover:      var(--color-gray-400);
+  --color-text-field-border-active:      var(--color-blue-600);
+  --color-text-field-border-focus:      var(--color-blue-500);
+  --color-text-field-border-danger:      var(--color-red-500);
+  --color-text-field-border-disabled:      var(--color-gray-200);
+  --color-text-field-border-typing-indicator:      var(--color-gray-900);
+
+  --color-text-area-background-enabled:     var(--color-white-100);
+  --color-text-area-background-disabled:     var(--color-gray-50);
+
+  --color-text-area-text-primary:     var(--color-gray-900);
+  --color-text-area-text-secondary:     var(--color-gray-600);
+  --color-text-area-text-tertiary:     var(--color-gray-400);
+  --color-text-area-text-danger:     var(--color-red-600);
+  --color-text-area-text-disabled:     var(--color-gray-400);
+
+  --color-text-area-border-enabled:     var(--color-gray-300);
+  --color-text-area-border-hover:     var(--color-gray-400);
+  --color-text-area-border-active:     var(--color-blue-600);
+  --color-text-area-border-focus:     var(--color-blue-500);
+  --color-text-area-border-danger:     var(--color-red-500);
+  --color-text-area-border-disabled:     var(--color-gray-200);
+  --color-text-area-border-typing-indicator:     var(--color-gray-900);
+
+  --color-password-input-background-primary:     var(--color-white-100);
+
+  --color-password-input-text-primary:     var(--color-gray-900);
+  --color-password-input-text-secondary:     var(--color-gray-600);
+  --color-password-input-text-tertiary:     var(--color-gray-400);
+
+  --color-password-input-icon-primary:     var(--color-gray-900);
+
+  --color-password-input-border-enabled:     var(--color-gray-300);
+  --color-password-input-border-hover:     var(--color-gray-400);
+  --color-password-input-border-active:     var(--color-blue-600);
+  --color-password-input-border-focus:     var(--color-blue-500);
+  --color-password-input-border-typing-indicator:     var(--color-gray-900);
+
+  --color-radio-text-primary:      var(--color-gray-900);
+  --color-radio-text-secondary:      var(--color-gray-600);
+  --color-radio-text-danger:      var(--color-red-600);
+  --color-radio-text-disabled:      var(--color-gray-400);
+
+  --color-radio-border-focus:      var(--color-blue-500);
+
+  --color-toggle-switch-background-enabled:      var(--color-gray-200);
+  --color-toggle-switch-background-hover:      var(--color-gray-300);
+  --color-toggle-switch-background-focus:      var(--color-gray-200);
+  --color-toggle-switch-background-active:      var(--color-green-600);
+  --color-toggle-switch-background-active-hover:      var(--color-green-700);
+  --color-toggle-switch-background-active-focus:      var(--color-green-600);
+  --color-toggle-switch-background-active-disabled:      var(--color-green-600 / 40%);
+  --color-toggle-switch-background-disabled:      var(--color-gray-100);
+  --color-toggle-switch-background-toggle:      var(--color-white-100);
+
+  --color-toggle-switch-text-primary:      var(--color-gray-900);
+  --color-toggle-switch-text-disabled:      var(--color-gray-400);
+
+  --color-toggle-switch-border-focus:      var(--color-blue-500);
+  --color-toggle-switch-border-focus-inverse:      var(--color-white-100);
+
+  --color-search-color:     var(--color-white-100);
+
+  --color-date-picker-color:     var(--color-white-100);
+
+  --color-accordion-background-enabled:     var(--color-white-100);
+  --color-accordion-background-hover:     var(--color-gray-50);
+  --color-accordion-background-active:     var(--color-gray-100);
+  --color-accordion-background-focus:     var(--color-white-100);
+  --color-accordion-background-disabled:     var(--color-white-100);
+
+  --color-accordion-text-primary:     var(--color-gray-900);
+  --color-accordion-text-secondary:     var(--color-gray-600);
+  --color-accordion-text-disabled:     var(--color-gray-400);
+
+  --color-accordion-border-enabled:     var(--color-gray-100);
+  --color-accordion-border-focus:     var(--color-blue-500);
+
+  --color-dialog-background-primary:     var(--color-white-100);
+  --color-dialog-background-transparent:     var(--color-black-20);
+
+  --color-dialog-text-primary:     var(--color-gray-900);
+  --color-dialog-text-secondary:     var(--color-gray-600);
+
+  --color-dialog-icon-warning:     var(--color-amber-500);
+  --color-dialog-icon-danger:     var(--color-red-500);
+
+  --color-card-enabled:     var(--color-white-100);
+
+  --color-drawer-enabled:     var(--color-white-100);
+
+  --color-footer-enabled:     var(--color-white-100);
+
+  --color-alert-banner-background-info-subtle:     var(--color-ocean-50);
+  --color-alert-banner-background-success-subtle:     var(--color-green-50);
+  --color-alert-banner-background-warning-subtle:     var(--color-amber-50);
+  --color-alert-banner-background-danger-subtle:     var(--color-red-50);
+  --color-alert-banner-background-common-subtle:     var(--color-gray-50);
+  --color-alert-banner-background-info:     var(--color-ocean-600);
+  --color-alert-banner-background-success:     var(--color-green-600);
+  --color-alert-banner-background-warning:     var(--color-amber-500);
+  --color-alert-banner-background-danger:     var(--color-red-600);
+  --color-alert-banner-background-common:     var(--color-gray-600);
+  --color-alert-banner-background-transparent:     var(--color-black-0);
+
+  --color-alert-banner-text-primary:     var(--color-gray-900);
+  --color-alert-banner-text-secondary:     var(--color-gray-600);
+  --color-alert-banner-text-primary-inverse:     var(--color-white-100);
+  --color-alert-banner-text-secondary-inverse:     var(--color-white-90);
+
+  --color-alert-banner-border-info:     var(--color-ocean-500);
+  --color-alert-banner-border-success:     var(--color-green-600);
+  --color-alert-banner-border-warning:     var(--color-amber-500);
+  --color-alert-banner-border-danger:     var(--color-red-500);
+  --color-alert-banner-border-common:     var(--color-gray-400);
+
+  --color-avatar-background-enabled:     var(--color-gray-200);
+  --color-avatar-background-hover:     var(--color-gray-300);
+  --color-avatar-background-active:     var(--color-gray-400);
+  --color-avatar-background-focus:     var(--color-gray-200);
+  --color-avatar-background-transparent-hover:     var(--color-black-10);
+  --color-avatar-background-transparent-active:     var(--color-black-20);
+
+  --color-avatar-text-primary:     var(--color-gray-900);
+
+  --color-avatar-border-primary:     var(--color-blue-500);
+
+  --color-badges-background-common:            var(--color-gray-400);
+  --color-badges-background-common-subtle:     var(--color-gray-100);
+  --color-badges-background-success:           var(--color-green-600);
+  --color-badges-background-success-subtle:    var(--color-green-100);
+  --color-badges-background-warning:           var(--color-amber-500);
+  --color-badges-background-warning-subtle:    var(--color-amber-100);
+  --color-badges-background-danger:            var(--color-red-500);
+  --color-badges-background-danger-subtle:     var(--color-red-100);
+  --color-badges-background-info:              var(--color-ocean-500);
+  --color-badges-background-info-subtle:       var(--color-ocean-100);
+  --color-badges-background-brand:             var(--color-blue-600);
+  --color-badges-background-brand-subtle:      var(--color-blue-100);
+  --color-badges-background-transparent:       var(--color-black-0);
+
+  --color-badges-text-primary:            var(--color-gray-900);
+  --color-badges-text-inverse:            var(--color-white-100);
+  --color-badges-text-success:            var(--color-green-700);
+  --color-badges-text-info:            var(--color-ocean-700);
+  --color-badges-text-brand:            var(--color-blue-700);
+  --color-badges-text-warning:            var(--color-amber-700);
+  --color-badges-text-danger:            var(--color-red-600);
+
+  --color-badges-border-primary:            var(--color-gray-400);
+  --color-badges-border-success:            var(--color-green-600);
+  --color-badges-border-info:            var(--color-ocean-500);
+  --color-badges-border-brand:            var(--color-blue-500);
+  --color-badges-border-warning:            var(--color-amber-500);
+  --color-badges-border-danger:            var(--color-red-500);
+
+  --color-loading-primary:            var(--color-blue-600);
+  --color-loading-primary-inverse:     var(--color-white-100);
+  --color-loading-secondary:            var(--color-gray-100);
+  --color-loading-skeleton:            var(--color-gray-200);
+
+  --color-tooltip-background-enabled:     var(--color-gray-900);
+  --color-tooltip-background-inverse:     var(--color-black-0);
+  --color-tooltip-background-hover:     var(--color-white-10);
+  --color-tooltip-background-active:     var(--color-white-20);
+
+  --color-tooltip-text-primary:     var(--color-white-100);
+  --color-tooltip-text-secondary:     var(--color-white-85);
+
+  --color-static-icon-primary:     var(--color-gray-900);
+  --color-static-icon-secondary:     var(--color-gray-600);
+  --color-static-icon-tertiary:     var(--color-gray-500);
+  --color-static-icon-brand:     var(--color-blue-600);
+  --color-static-icon-info:     var(--color-ocean-500);
+  --color-static-icon-success:     var(--color-green-600);
+  --color-static-icon-warning:     var(--color-amber-500);
+  --color-static-icon-disabled:     var(--color-gray-400);
+  --color-static-icon-danger:     var(--color-red-500);
+  --color-static-icon-inverse:     var(--color-white-100);
+  --color-static-icon-inverse-disabled:     var(--color-white-40);
+
+  --color-toast-background-primary:     var(--color-gray-900);
+  --color-toast-background-primary-danger:     var(--color-red-500);
+
+  --color-toast-text-primary-inverse:     var(--color-white-100);
+
+
+  /* ========================================
+   * Variables - Collections - Global Colors
+   * ======================================== */
+  --color-background-primary:   var(--color-white-100);
+  --color-background-inverse:   var(--color-gray-900);
+  --color-background-secondary:   var(--color-gray-50);
+  --color-background-tertiary:   var(--color-gray-100);
+  --color-background-overlay:   var(--color-gray-900 / 50%);
+  --color-background-disabled:   var(--color-gray-100);
+
+  --color-text-primary:        var(--color-gray-900);
+  --color-text-secondary:        var(--color-gray-600);
+  --color-text-tertiary:        var(--color-gray-500);
+  --color-text-disabled:        var(--color-gray-400);
+  --color-text-inverse:        var(--color-white-100);
+  --color-text-inverse-85:        var(--color-white-85);
+
+  --color-border-enabled:        var(--color-gray-300);
+  --color-border-subtle:        var(--color-gray-200);
+  --color-border-strong:        var(--color-gray-400);
+  --color-border-focus:        var(--color-blue-500);
+  --color-border-divider:        var(--color-gray-50);
+
+  --color-accent-common:        var(--color-gray-400);
+  --color-accent-common-subtle:        var(--color-gray-100);
+  --color-accent-success:        var(--color-green-600);
+  --color-accent-success-bold:        var(--color-green-900);
+  --color-accent-success-subtle:        var(--color-green-100);
+  --color-accent-success-minimal:        var(--color-green-50);
+  --color-accent-warning:        var(--color-amber-500);
+  --color-accent-warning-bold:        var(--color-amber-900);
+  --color-accent-warning-subtle:        var(--color-amber-100);
+  --color-accent-warning-minimal:        var(--color-amber-50);
+  --color-accent-danger:        var(--color-red-500);
+  --color-accent-danger-bold:        var(--color-red-900);
+  --color-accent-danger-subtle:        var(--color-red-100);
+  --color-accent-danger-minimal:        var(--color-red-50);
+  --color-accent-info:        var(--color-ocean-500);
+  --color-accent-info-bold:        var(--color-ocean-950);
+  --color-accent-info-subtle:        var(--color-ocean-100);
+  --color-accent-info-minimal:        var(--color-ocean-50);
+  --color-accent-brand:        var(--color-blue-600);
+  --color-accent-brand-bold:        var(--color-blue-950);
+  --color-accent-brand-subtle:        var(--color-blue-100);
+  --color-accent-brand-minimal:        var(--color-blue-50);
+
+
+  /* ========================================
+  * Variables - Collections - Class - Typography
+  * ======================================== */
+
+  /* ================= DISPLAY ================= */
+
+  --text-display-small: 28px;
+  --text-display-small--line-height: 1.3;
+  --text-display-small--font-weight: 500;
+  --text-display-small--letter-spacing: 0.005em;
+
+  --text-display-small-md: 32px;
+  --text-display-small-md--line-height: 1.25;
+  --text-display-small-md--font-weight: 500;
+  --text-display-small-md--letter-spacing: 0.01em;
+
+
+  --text-display-medium: 32px;
+  --text-display-medium--line-height: 1.25;
+  --text-display-medium--font-weight: 500;
+  --text-display-medium--letter-spacing: 0.01em;
+
+  --text-display-medium-md: 40px;
+  --text-display-medium-md--line-height: 1.2;
+  --text-display-medium-md--font-weight: 500;
+  --text-display-medium-md--letter-spacing: 0.015em;
+
+
+  --text-display-large: 40px;
+  --text-display-large--line-height: 1.2;
+  --text-display-large--font-weight: 600;
+  --text-display-large--letter-spacing: 0.02em;
+
+  --text-display-large-md: 48px;
+  --text-display-large-md--line-height: 1.17;
+  --text-display-large-md--font-weight: 600;
+  --text-display-large-md--letter-spacing: 0.02em;
+
+
+  /* ================= HEADING ================= */
+
+  --text-heading-1: 24px;
+  --text-heading-1--line-height: 1.33;
+  --text-heading-1--font-weight: 500;
+  --text-heading-1--letter-spacing: 0em;
+
+  --text-heading-1-md: 28px;
+  --text-heading-1-md--line-height: 1.3;
+  --text-heading-1-md--font-weight: 500;
+  --text-heading-1-md--letter-spacing: -0.005em;
+
+
+  --text-heading-2: 20px;
+  --text-heading-2--line-height: 1.56;
+  --text-heading-2--font-weight: 500;
+  --text-heading-2--letter-spacing: 0.01em;
+
+  --text-heading-2-md: 24px;
+  --text-heading-2-md--line-height: 1.33;
+  --text-heading-2-md--font-weight: 500;
+  --text-heading-2-md--letter-spacing: 0em;
+
+
+  --text-heading-3: 18px;
+  --text-heading-3--line-height: 1.44;
+  --text-heading-3--font-weight: 500;
+  --text-heading-3--letter-spacing: 0.01em;
+
+  --text-heading-3-md: 20px;
+  --text-heading-3-md--line-height: 1.4;
+  --text-heading-3-md--font-weight: 500;
+  --text-heading-3-md--letter-spacing: 0.01em;
+
+  /* ================= BODY ================= */
+
+  --text-body-small: 14px;
+  --text-body-small--line-height: 1.57;
+  --text-body-small--font-weight: 400;
+  --text-body-small--letter-spacing: 0.02em;
+
+  --text-body-regular: 16px;
+  --text-body-regular--line-height: 1.5;
+  --text-body-regular--font-weight: 400;
+  --text-body-regular--letter-spacing: 0.01em;
+
+  --text-body-large: 18px;
+  --text-body-large--line-height: 1.56;
+  --text-body-large--font-weight: 400;
+  --text-body-large--letter-spacing: 0.01em;
+
+  /* ================= LABEL ================= */
+
+  --text-label-small: 12px;
+  --text-label-small--line-height: 1.33;
+  --text-label-small--font-weight: 500;
+  --text-label-small--letter-spacing: 0.03em;
+
+  --text-label-medium: 14px;
+  --text-label-medium--line-height: 1.43;
+  --text-label-medium--font-weight: 500;
+  --text-label-medium--letter-spacing: 0.02em;
+
+  --text-label-large: 16px;
+  --text-label-large--line-height: 1.25;
+  --text-label-large--font-weight: 500;
+  --text-label-large--letter-spacing: 0.01em;
+
+  /* ================= CAPTION ================= */
+
+  --text-caption-caption: 12px;
+  --text-caption-caption--line-height: 1.5;
+  --text-caption-caption--font-weight: 400;
+  --text-caption-caption--letter-spacing: 0.03em;
+
+  --text-caption-fine-print: 10px;
+  --text-caption-fine-print--line-height: 1.6;
+  --text-caption-fine-print--font-weight: 400;
+  --text-caption-fine-print--letter-spacing: 0.04em;
+
+  /* ================= LINK ================= */
+
+  --text-link-extra-small: 12px;
+  --text-link-extra-small--line-height: 1.5;
+  --text-link-extra-small--font-weight: 500;
+  --text-link-extra-small--letter-spacing: 0.03em;
+
+  --text-link-small: 14px;
+  --text-link-small--line-height: 1.57;
+  --text-link-small--font-weight: 500;
+  --text-link-small--letter-spacing: 0.02em;
+
+  --text-link-medium: 16px;
+  --text-link-medium--line-height: 1.5;
+  --text-link-medium--font-weight: 500;
+  --text-link-medium--letter-spacing: 0.01em;
+
+  --text-link-large: 18px;
+  --text-link-large--line-height: 1.56;
+  --text-link-large--font-weight: 500;
+  --text-link-large--letter-spacing: 0.01em;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refinn/core-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Refinn Design System — UI components + Tailwind v4 theme preset",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",