npm - @revikornmann/muka-ui - Versions diffs - 0.2.4 → 0.3.0 - Mend

@revikornmann/muka-ui 0.2.4 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (275) hide show

package/dist/styles/tokens-wireframe-light.css CHANGED Viewed

@@ -933,9 +933,9 @@
   --color-text-subtle-default: #838383;
   --color-text-subtle-inverse: #e8e8e8;
   --color-text-muted-default: #bbbbbb;
-  --color-text-action-default: #202020;
-  --color-text-action-hover: #646464;
-  --color-text-action-pressed: #646464;
+  --color-text-action-default: #113264;
+  --color-text-action-hover: #0d74ce;
+  --color-text-action-pressed: #0d74ce;
   --color-state-success-default: #30a46c;
   --color-state-success-contrast: #18794e;
   --color-state-success-background: #e9f6ec;
@@ -951,15 +951,15 @@
   --color-border-contrast: #bbbbbb;
   --color-border-default: #e0e0e0;
   --color-border-muted: #e8e8e8;
-  --color-border-focus: #202020;
-  --color-action-default: #202020;
-  --color-action-hover: #646464;
-  --color-action-pressed: #646464;
-  --color-action-muted: #bbbbbb;
-  --color-action-inverse-default: #fcfcfc;
-  --color-action-inverse-hover: #ffffff;
-  --color-action-inverse-pressed: #f9f9f9;
-  --color-action-inverse-muted: #f0f0f0;
+  --color-border-focus: #113264;
+  --color-action-default: #113264;
+  --color-action-hover: #0d74ce;
+  --color-action-pressed: #0d74ce;
+  --color-action-muted: #5eb0ef;
+  --color-action-inverse-default: #fbfdff;
+  --color-action-inverse-hover: #f5faff;
+  --color-action-inverse-pressed: #f5faff;
+  --color-action-inverse-muted: #edf6ff;
   --alias-color-neutral-1: #fcfcfc;
   --alias-color-neutral-2: #f0f0f0;
   --alias-color-neutral-3: #e8e8e8;
@@ -990,31 +990,51 @@
   --alias-color-brand-default-deprecated: #8d8d8d;
   --alias-color-brand-contrast-deprecated: #202020;
   --alias-color-brand-muted-deprecated: #e0e0e0;
-  --alias-color-accent-default: #202020;
-  --alias-color-accent-hover: #646464;
-  --alias-color-accent-pressed: #646464;
-  --alias-color-accent-contrast: #202020;
-  --alias-color-accent-muted: #bbbbbb;
-  --alias-color-accent-inverse-default: #fcfcfc;
-  --alias-color-accent-inverse-hover: #ffffff;
-  --alias-color-accent-inverse-pressed: #f9f9f9;
-  --alias-color-accent-inverse-contrast: #ffffff;
-  --alias-color-accent-inverse-muted: #f0f0f0;
+  --alias-color-accent-default: #113264;
+  --alias-color-accent-hover: #0d74ce;
+  --alias-color-accent-pressed: #0d74ce;
+  --alias-color-accent-contrast: #113264;
+  --alias-color-accent-muted: #5eb0ef;
+  --alias-color-accent-inverse-default: #fbfdff;
+  --alias-color-accent-inverse-hover: #f5faff;
+  --alias-color-accent-inverse-pressed: #f5faff;
+  --alias-color-accent-inverse-contrast: #fbfdff;
+  --alias-color-accent-inverse-muted: #edf6ff;
   --alias-color-state-success-contrast: #18794e;
   --alias-color-state-success-default: #30a46c;
   --alias-color-state-success-muted: #e9f6ec;
+  --alias-color-state-success-surface-level0: #f2fcf4;
+  --alias-color-state-success-surface-level1: #e9f6ec;
+  --alias-color-state-success-surface-level2: #ddf3df;
+  --alias-color-state-success-surface-level3: #ccebd1;
   --alias-color-state-warning-contrast: #ab6400;
   --alias-color-state-warning-default: #ffc53d;
   --alias-color-state-warning-muted: #fff7c2;
+  --alias-color-state-warning-surface-level0: #fefbe9;
+  --alias-color-state-warning-surface-level1: #fff7c2;
+  --alias-color-state-warning-surface-level2: #ffee9c;
+  --alias-color-state-warning-surface-level3: #fbe577;
   --alias-color-state-error-contrast: #cd2b31;
   --alias-color-state-error-default: #e5484d;
   --alias-color-state-error-muted: #ffefef;
+  --alias-color-state-error-surface-level0: #fff8f8;
+  --alias-color-state-error-surface-level1: #ffefef;
+  --alias-color-state-error-surface-level2: #ffe5e5;
+  --alias-color-state-error-surface-level3: #fdd8d8;
   --alias-color-state-info-contrast: #0d74ce;
   --alias-color-state-info-default: #0091ff;
   --alias-color-state-info-muted: #edf6ff;
+  --alias-color-state-info-surface-level0: #f5faff;
+  --alias-color-state-info-surface-level1: #edf6ff;
+  --alias-color-state-info-surface-level2: #e1f0ff;
+  --alias-color-state-info-surface-level3: #cee7fe;
   --alias-color-state-neutral-contrast: #646464;
   --alias-color-state-neutral-default: #8d8d8d;
   --alias-color-state-neutral-muted: #f0f0f0;
+  --alias-color-state-neutral-surface-level0: #f9f9f9;
+  --alias-color-state-neutral-surface-level1: #f0f0f0;
+  --alias-color-state-neutral-surface-level2: #e8e8e8;
+  --alias-color-state-neutral-surface-level3: #e0e0e0;
   --alias-font-plain-family: Helvetica;
   --alias-font-plain-weight-regular: 400;
   --alias-font-plain-weight-medium: 500;
@@ -1242,14 +1262,14 @@
   --shadow-level6: 0 48px 96px 0 rgba(0, 0, 0, 0.220), inset 0 0 1px 0 rgba(0, 0, 0, 0.220);
   --shadow-bevel: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
   --shadow-sunken: inset 0px 0px 1px 0px rgba(0, 0, 0, 0.090), inset 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
-  --button-color-primary-background-default: #202020;
-  --button-color-primary-background-hover: #646464;
-  --button-color-primary-background-pressed: #646464;
-  --button-color-primary-background-disabled: #bbbbbb;
-  --button-color-primary-foreground-default: #fcfcfc;
-  --button-color-primary-foreground-hover: #ffffff;
-  --button-color-primary-foreground-pressed: #f9f9f9;
-  --button-color-primary-foreground-disabled: #f0f0f0;
+  --button-color-primary-background-default: #113264;
+  --button-color-primary-background-hover: #0d74ce;
+  --button-color-primary-background-pressed: #0d74ce;
+  --button-color-primary-background-disabled: #5eb0ef;
+  --button-color-primary-foreground-default: #fbfdff;
+  --button-color-primary-foreground-hover: #f5faff;
+  --button-color-primary-foreground-pressed: #f5faff;
+  --button-color-primary-foreground-disabled: #edf6ff;
   --button-color-primary-shadow-default: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
   --button-color-primary-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
   --button-color-primary-shadow-pressed: none;
@@ -1259,8 +1279,8 @@
   --button-color-secondary-background-pressed: #e0e0e0;
   --button-color-secondary-background-disabled: #e0e0e0;
   --button-color-secondary-foreground-default: #202020;
-  --button-color-secondary-foreground-hover: #646464;
-  --button-color-secondary-foreground-pressed: #646464;
+  --button-color-secondary-foreground-hover: #0d74ce;
+  --button-color-secondary-foreground-pressed: #0d74ce;
   --button-color-secondary-foreground-disabled: #bbbbbb;
   --button-color-secondary-shadow-default: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
   --button-color-secondary-shadow-hover: inset 0px -2px 0px 0px rgba(0, 0, 0, 0.090);
@@ -1282,9 +1302,9 @@
   --button-color-tertiary-background-hover: #fcfcfc;
   --button-color-tertiary-background-pressed: #e8e8e8;
   --button-color-tertiary-background-disabled: #fcfcfc;
-  --button-color-tertiary-foreground-default: #202020;
-  --button-color-tertiary-foreground-hover: #646464;
-  --button-color-tertiary-foreground-pressed: #646464;
+  --button-color-tertiary-foreground-default: #113264;
+  --button-color-tertiary-foreground-hover: #0d74ce;
+  --button-color-tertiary-foreground-pressed: #0d74ce;
   --button-color-tertiary-foreground-disabled: #bbbbbb;
   --button-color-tertiary-border-default: #e0e0e0;
   --button-color-tertiary-border-hover: #bbbbbb;
@@ -1314,10 +1334,10 @@
   --card-color-hover-border: #bbbbbb;
   --card-color-pressed-background: #e0e0e0;
   --card-color-pressed-foreground: #202020;
-  --card-color-pressed-border: #202020;
+  --card-color-pressed-border: #113264;
   --card-color-selected-background: #e8e8e8;
   --card-color-selected-foreground: #202020;
-  --card-color-selected-border: #202020;
+  --card-color-selected-border: #113264;
   --card-radius-sm: 0.1875rem;
   --card-radius-md: 0.375rem;
   --card-radius-lg: 0.75rem;
@@ -1330,8 +1350,8 @@
   --card-shadow-selected: 0px 0px 1px 0px rgba(0, 0, 0, 0.090), 0px 2px 4px 0px rgba(0, 0, 0, 0.090);
   --card-border-default: 0.0625rem solid #e0e0e0;
   --card-border-hover: 0.0625rem solid #bbbbbb;
-  --card-border-pressed: 0.125rem solid #202020;
-  --card-border-selected: 0.125rem solid #202020;
+  --card-border-pressed: 0.125rem solid #113264;
+  --card-border-selected: 0.125rem solid #113264;
   --input-field-color-default-background: #fcfcfc;
   --input-field-color-default-foreground: #202020;
   --input-field-color-default-border: #bbbbbb;
@@ -1340,7 +1360,7 @@
   --input-field-color-hover-border: #bbbbbb;
   --input-field-color-focus-background: #fcfcfc;
   --input-field-color-focus-foreground: #202020;
-  --input-field-color-focus-border: #202020;
+  --input-field-color-focus-border: #113264;
   --input-field-color-error-background: #fcfcfc;
   --input-field-color-error-foreground: #202020;
   --input-field-color-error-border: #cd2b31;
@@ -1354,7 +1374,7 @@
   --input-field-padding-y: 0.5rem;
   --input-field-border-default: 0.125rem solid #bbbbbb;
   --input-field-border-hover: 0.0625rem solid #bbbbbb;
-  --input-field-border-focused: 0.125rem solid #202020;
+  --input-field-border-focused: 0.125rem solid #113264;
   --input-field-height-sm: 2rem;
   --input-field-height-default: 2.5rem;
   --input-field-height-lg: 3rem;
@@ -1365,14 +1385,14 @@
   --input-control-height-default: 1.5rem;
   --input-control-height-lg: 2rem;
   --input-control-color-default-background: #fcfcfc;
-  --input-control-color-default-foreground: #202020;
+  --input-control-color-default-foreground: #113264;
   --input-control-color-default-border: #e0e0e0;
   --input-control-color-hover-background: #e8e8e8;
-  --input-control-color-hover-foreground: #646464;
+  --input-control-color-hover-foreground: #0d74ce;
   --input-control-color-hover-border: #bbbbbb;
   --input-control-color-pressed-background: #e0e0e0;
-  --input-control-color-pressed-foreground: #646464;
-  --input-control-color-pressed-border: #202020;
+  --input-control-color-pressed-foreground: #0d74ce;
+  --input-control-color-pressed-border: #113264;
   --input-control-color-disabled-background: #e0e0e0;
   --input-control-color-disabled-foreground: #e0e0e0;
   --input-control-color-disabled-border: #e0e0e0;
@@ -1383,9 +1403,51 @@
   --icon-size-sm: 1.25rem;
   --icon-size-default: 1.5rem;
   --icon-size-lg: 2rem;
-  --chip-size-height-sm: 2rem;
-  --chip-size-height-md: 2.5rem;
-  --chip-size-height-lg: 3rem;
+  --chip-size-height-sm: 1.5rem;
+  --chip-size-height-md: 2rem;
+  --chip-size-height-lg: 2.5rem;
+  --chip-gap-sm: 0.25rem;
+  --chip-gap-md: 0.5rem;
+  --chip-gap-lg: 0.5rem;
+  --chip-padding-label-sm: 0.75rem;
+  --chip-padding-label-md: 1rem;
+  --chip-padding-label-lg: 1rem;
+  --chip-padding-leading-sm: 0.5rem;
+  --chip-padding-leading-md: 0.75rem;
+  --chip-padding-leading-lg: 0.75rem;
+  --chip-padding-trailing-sm: 2px;
+  --chip-padding-trailing-md: 0.25rem;
+  --chip-padding-trailing-lg: 0.25rem;
+  --chip-dismiss-default-background-default: #f0f0f0;
+  --chip-dismiss-default-background-hover: #e8e8e8;
+  --chip-dismiss-default-background-pressed: #e0e0e0;
+  --chip-dismiss-default-foreground-default: #646464;
+  --chip-dismiss-default-foreground-hover: #646464;
+  --chip-dismiss-default-foreground-pressed: #646464;
+  --chip-dismiss-success-background-default: #e9f6ec;
+  --chip-dismiss-success-background-hover: #ddf3df;
+  --chip-dismiss-success-background-pressed: #ccebd1;
+  --chip-dismiss-success-foreground-default: #18794e;
+  --chip-dismiss-success-foreground-hover: #18794e;
+  --chip-dismiss-success-foreground-pressed: #18794e;
+  --chip-dismiss-warning-background-default: #fff7c2;
+  --chip-dismiss-warning-background-hover: #ffee9c;
+  --chip-dismiss-warning-background-pressed: #fbe577;
+  --chip-dismiss-warning-foreground-default: #ab6400;
+  --chip-dismiss-warning-foreground-hover: #ab6400;
+  --chip-dismiss-warning-foreground-pressed: #ab6400;
+  --chip-dismiss-error-background-default: #ffefef;
+  --chip-dismiss-error-background-hover: #ffe5e5;
+  --chip-dismiss-error-background-pressed: #fdd8d8;
+  --chip-dismiss-error-foreground-default: #cd2b31;
+  --chip-dismiss-error-foreground-hover: #cd2b31;
+  --chip-dismiss-error-foreground-pressed: #cd2b31;
+  --chip-dismiss-info-background-default: #edf6ff;
+  --chip-dismiss-info-background-hover: #e1f0ff;
+  --chip-dismiss-info-background-pressed: #cee7fe;
+  --chip-dismiss-info-foreground-default: #0d74ce;
+  --chip-dismiss-info-foreground-hover: #0d74ce;
+  --chip-dismiss-info-foreground-pressed: #0d74ce;
   --checkbox-size-sm: 1.25rem;
   --checkbox-size-default: 1.5rem;
   --checkbox-size-lg: 2rem;
@@ -1398,8 +1460,8 @@
   --checkbox-color-default-icon: #fcfcfc;
   --checkbox-color-hover-background: #e8e8e8;
   --checkbox-color-hover-border: #bbbbbb;
-  --checkbox-color-checked-background: #202020;
-  --checkbox-color-checked-border: #202020;
+  --checkbox-color-checked-background: #113264;
+  --checkbox-color-checked-border: #113264;
   --checkbox-color-checked-icon: #fcfcfc;
   --checkbox-color-disabled-background: #e0e0e0;
   --checkbox-color-disabled-border: #e0e0e0;
@@ -1438,7 +1500,7 @@
   --select-field-color-hover-border: #bbbbbb;
   --select-field-color-focus-background: #fcfcfc;
   --select-field-color-focus-foreground: #202020;
-  --select-field-color-focus-border: #202020;
+  --select-field-color-focus-border: #113264;
   --select-field-color-error-background: #fcfcfc;
   --select-field-color-error-foreground: #202020;
   --select-field-color-error-border: #cd2b31;
@@ -1489,7 +1551,7 @@
   --menu-item-color-hover-background: #f0f0f0;
   --menu-item-color-hover-foreground: #202020;
   --menu-item-color-hover-icon: #202020;
-  --menu-item-color-focus-background: #bbbbbb;
+  --menu-item-color-focus-background: #5eb0ef;
   --menu-item-color-focus-foreground: #202020;
   --menu-item-color-focus-icon: #202020;
   --menu-item-color-disabled-background: transparent;
@@ -1513,11 +1575,11 @@
   --menu-group-label-padding-y: 0.5rem;
   --menu-shortcut-color: #bbbbbb;
   --menu-checkbox-indicator-size: 1rem;
-  --menu-checkbox-indicator-color: #202020;
+  --menu-checkbox-indicator-color: #113264;
   --menu-radio-indicator-size: 1rem;
-  --menu-radio-indicator-color: #202020;
+  --menu-radio-indicator-color: #113264;
   --contextmenu-trigger-outline-width: 0.125rem;
-  --contextmenu-trigger-outline-color: #202020;
+  --contextmenu-trigger-outline-color: #113264;
   --contextmenu-trigger-outline-offset: 0.25rem;
   --tabs-trigger-color-default-background: #e8e8e8;
   --tabs-trigger-color-default-foreground: #202020;
@@ -1555,8 +1617,8 @@
   --radio-color-hover-background: #e8e8e8;
   --radio-color-hover-border: #bbbbbb;
   --radio-color-checked-background: #fcfcfc;
-  --radio-color-checked-border: #202020;
-  --radio-color-checked-dot: #202020;
+  --radio-color-checked-border: #113264;
+  --radio-color-checked-dot: #113264;
   --radio-color-disabled-background: #e0e0e0;
   --radio-color-disabled-border: #e0e0e0;
   --radio-color-disabled-dot: #e0e0e0;
@@ -1622,7 +1684,7 @@
   --toggle-track-height: 2rem;
   --toggle-track-radius: 999rem;
   --toggle-track-color-off: #cecece;
-  --toggle-track-color-on: #202020;
+  --toggle-track-color-on: #113264;
   --toggle-track-color-disabled: #e0e0e0;
   --toggle-knob-size: 1.5rem;
   --toggle-knob-offset: 0.25rem;
@@ -1690,6 +1752,15 @@
   --badge-size-dot-sm: 0.5rem;
   --badge-size-dot-md: 0.75rem;
   --badge-size-dot-lg: 1rem;
+  --badge-gap-sm: 0.25rem;
+  --badge-gap-md: 0.5rem;
+  --badge-gap-lg: 0.5rem;
+  --badge-padding-label-sm: 0.75rem;
+  --badge-padding-label-md: 1rem;
+  --badge-padding-label-lg: 1rem;
+  --badge-padding-leading-sm: 0.5rem;
+  --badge-padding-leading-md: 0.75rem;
+  --badge-padding-leading-lg: 0.75rem;
   --table-cell-padding-x-sm: 0.5rem;
   --table-cell-padding-x-md: 0.75rem;
   --table-cell-padding-x-lg: 1rem;
@@ -1701,6 +1772,25 @@
   --table-pagination-gap: 1rem;
   --table-pagination-background: #e0e0e0;
   --table-pagination-border: #e0e0e0;
+  --datatable-header-background: #e0e0e0;
+  --datatable-header-foreground: #202020;
+  --datatable-header-border: #e0e0e0;
+  --datatable-row-background: #fcfcfc;
+  --datatable-row-foreground: #202020;
+  --datatable-row-border: #e0e0e0;
+  --datatable-row-hover-background: #f0f0f0;
+  --datatable-row-pressed-background: #fcfcfc;
+  --datatable-row-selected-background: #edf6ff;
+  --datatable-cell-padding-x-sm: 0.5rem;
+  --datatable-cell-padding-x-md: 0.75rem;
+  --datatable-cell-padding-x-lg: 1rem;
+  --datatable-cell-padding-y-sm: 0.5rem;
+  --datatable-cell-padding-y-md: 0.75rem;
+  --datatable-cell-padding-y-lg: 1rem;
+  --datatable-cell-min-height: 2rem;
+  --datatable-divider-color: #e0e0e0;
+  --datatable-selection-column-width: 3.5rem;
+  --datatable-focus-ring: #113264;
   --datepicker-color-background: #fcfcfc;
   --datepicker-size-day-sm: 2.5rem;
   --datepicker-size-day-md: 3rem;
@@ -1759,7 +1849,7 @@
   --documentviewer-thumbnails-item-background-hover: #e8e8e8;
   --documentviewer-thumbnails-item-background-selected: #fcfcfc;
   --documentviewer-thumbnails-item-border-default: transparent;
-  --documentviewer-thumbnails-item-border-selected: #202020;
+  --documentviewer-thumbnails-item-border-selected: #113264;
   --documentviewer-page-background: #ffffff;
   --documentviewer-page-foreground: #000000;
   --documentviewer-page-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.090), 0 2px 4px 0 rgba(0, 0, 0, 0.090);
@@ -1774,7 +1864,7 @@
   --fileupload-dropzone-color-hover-background: #e0e0e0;
   --fileupload-dropzone-color-hover-border: #bbbbbb;
   --fileupload-dropzone-color-active-background: #edf6ff;
-  --fileupload-dropzone-color-active-border: #202020;
+  --fileupload-dropzone-color-active-border: #113264;
   --fileupload-dropzone-color-error-background: #ffefef;
   --fileupload-dropzone-color-error-border: #cd2b31;
   --fileupload-dropzone-color-disabled-background: #e0e0e0;