graphwise-styleguide 1.0.0 → 1.0.2

package/dist/variables-dark.css

@@ -143,6 +143,7 @@
   --gw-size-0-75: 0.75rem;
   --gw-size-0-875: 0.875rem;
   --gw-size-1-125: 1.125rem;
+  --gw-size-1-25: 1.25rem;
   --gw-size-1-5: 1.5rem;
   --gw-size-1-75: 1.75rem;
   --gw-size-2-5: 2.5rem;
@@ -169,7 +170,6 @@
   --gw-sidenav-list-gap: 2px;
   --gw-sidenav-menuitem-padding: 0.5rem 1rem;
   --gw-sidenav-menuitem-gap: 0.5rem;
-  --gw-sidenav-menuitem-selected-icon-size: 2.5rem;
   --gw-sidenav-menuitem-height: 56px;
   --gw-sidenav-submenu-del-label-padding: 0.5rem 0.75rem 0.5rem 10rem;
   --gw-sidenav-submenuitem-icon-size: 0.875rem;
@@ -194,7 +194,6 @@
   --gw-button-badge-size: 1rem;
   --gw-button-success-hover-color: #ffffff;
   --gw-button-success-disabled-color: #ffffff;
-  --gw-xxs-line-height: 1.125rem;
   --gw-1rem-line-height: 1rem;
   --gw-mask-background: rgba(0, 0, 0, 0.4);
   --gw-inputtext-sm-font-size: 0.875rem;
@@ -280,21 +279,12 @@
   --gw-avatar-xl-icon-size: 2rem;
   --gw-avatar-xl-group-offset: -1.5rem;
   --gw-avatar-icon-size: 1rem;
-  --gw-badge-padding: 0 0.5rem;
+  --gw-badge-padding: 0 0.125rem;
   --gw-badge-font-size: 0.75rem;
   --gw-badge-font-weight: 700;
-  --gw-badge-min-width: 1.5rem;
-  --gw-badge-height: 1.5rem;
   --gw-badge-dot-size: 0.5rem;
-  --gw-badge-sm-font-size: 0.625rem;
-  --gw-badge-sm-min-width: 1.25rem;
-  --gw-badge-sm-height: 1.25rem;
   --gw-badge-lg-font-size: 0.875rem;
-  --gw-badge-lg-min-width: 1.75rem;
-  --gw-badge-lg-height: 1.75rem;
   --gw-badge-xl-font-size: 1rem;
-  --gw-badge-xl-min-width: 2rem;
-  --gw-badge-xl-height: 2rem;
   --gw-chip-border-radius: 16px;
   --gw-chip-padding-x: 0.75rem;
   --gw-chip-gap: 0.5rem;
@@ -434,6 +424,7 @@
   --gw-tooltip-gutter: 0.25rem;
   --gw-tooltip-padding: 0.5rem 0.75rem;
   --gw-contextmenu-submenu-mobile-indent: 1rem;
+  --gw-statusmenu-padding: 0 0.25rem;
   --gw-dock-background: rgba(255, 255, 255, 0.1);
   --gw-dock-border-color: rgba(255, 255, 255, 0.2);
   --gw-dock-padding: 0.5rem;
@@ -643,7 +634,7 @@
   --gw-imagecompare-handle-border-color: rgba(0, 0, 0, 0);
   --gw-imagecompare-handle-border-width: 0;
   --gw-imagecompare-handle-focus-ring-color: rgba(255, 255, 255, 0.3);
-  --gw-overlaybadge-outline-width: 2px;
+  --gw-overlaybadge-outline-width: 1px;
   --gw-inputotp-input-width: 2.5rem;
   --gw-inputotp-input-sm-width: 2rem;
   --gw-inputotp-input-lg-width: 3rem;
@@ -1272,6 +1263,16 @@
   --gw-contextmenu-shadow-2-type: dropShadow;
   --gw-contextmenu-shadow-2-offset-x: 0;
   --gw-contextmenu-shadow-2-offset-y: 2px;
+  --gw-statusmenu-list-shadow-1-blur: 4px;
+  --gw-statusmenu-list-shadow-1-spread: 2px;
+  --gw-statusmenu-list-shadow-1-type: dropShadow;
+  --gw-statusmenu-list-shadow-1-offset-x: 0;
+  --gw-statusmenu-list-shadow-1-offset-y: 4px;
+  --gw-statusmenu-list-shadow-2-blur: 4px;
+  --gw-statusmenu-list-shadow-2-spread: -2px;
+  --gw-statusmenu-list-shadow-2-type: dropShadow;
+  --gw-statusmenu-list-shadow-2-offset-x: 0;
+  --gw-statusmenu-list-shadow-2-offset-y: 2px;
   --gw-dock-item-focus-ring-shadow-blur: 0;
   --gw-dock-item-focus-ring-shadow-spread: 0;
   --gw-dock-item-focus-ring-shadow-type: dropShadow;
@@ -1576,8 +1577,6 @@
   --color: {sidenav.item.icon.focus.color};
   --color: {sidenav.item.icon.active.color};
   --color: {sidenav.item.icon.focus.color};
-  --color: {sidenav.item.icon.active.color};
-  --color: {sidenav.item.icon.focus.color};
   --color: {sidenav.item.icon.focus.color};
   --color: {default.color.grey.0};
   --gw-color-green-100: var(--gw-color-teal-50);
@@ -1680,10 +1679,12 @@
   --gw-form-field-base-font-size: var(--gw-base-font-size);
   --gw-focus-ring-style: var(--gw-style-solid);
   --gw-defaul-border-radius: var(--gw-border-radius-sm);
+  --gw-sidenav-padding: var(--gw-space-1-125);
   --gw-sidenav-gap: var(--gw-space-1);
   --gw-sidenav-menuitem-icon-size: var(--gw-size-1-5);
   --gw-sidenav-menuitem-hover-icon-size: var(--gw-size-1-75);
   --gw-sidenav-menuitem-label-font-weight: var(--gw-font-weight-400);
+  --gw-sidenav-menuitem-selected-icon-size: var(--gw-size-1-5);
   --gw-sidenav-submenuitem-label-font-weight: var(--gw-font-weight-500);
   --gw-button-sm-padding-y: var(--gw-form-field-sm-padding-y);
   --gw-button-sm-icon-size: var(--gw-button-sm-font-size);
@@ -1691,7 +1692,6 @@
   --gw-button-icon-size: var(--gw-icon-size);
   --gw-button-label-font-weight: var(--gw-font-weight-400);
   --gw-button-label-font-size: var(--gw-base-font-size);
-  --gw-button-label-line-height: var(--gw-xxs-line-height);
   --gw-button-label-font-family: var(--gw-font-family-body);
   --gw-button-focus-ring-width: var(--gw-focus-ring-width);
   --gw-button-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -1717,6 +1717,7 @@
   --gw-button-tertiary-disabled-background: var(--gw-neutral-transparent);
   --gw-button-tertiary-disabled-border-color: var(--gw-neutral-transparent);
   --gw-button-tertiary-link-border-color: var(--gw-neutral-transparent);
+  --gw-xxs-line-height: var(--gw-1rem-line-height);
   --gw-topnav-border-color: var(--gw-neutral-transparent);
   --gw-inputtext-focus-ring-width: var(--gw-focus-ring-width);
   --gw-inputtext-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -1759,7 +1760,17 @@
   --gw-rating-focus-ring-width: var(--gw-focus-ring-width);
   --gw-rating-focus-ring-offset: var(--gw-focus-ring-offset);
   --gw-rating-transition-duration: var(--gw-transition-duration);
-  --gw-badge-border-radius: var(--gw-border-radius-md);
+  --gw-badge-border-radius: var(--gw-border-radius-xs);
+  --gw-badge-min-width: var(--gw-size-1-125);
+  --gw-badge-height: var(--gw-size-1-125);
+  --gw-badge-sm-font-size: var(--gw-xs-font-size);
+  --gw-badge-sm-min-width: var(--gw-size-1);
+  --gw-badge-sm-height: var(--gw-size-1);
+  --gw-badge-sm-line-height: var(--gw-1rem-line-height);
+  --gw-badge-lg-min-width: var(--gw-size-1-125);
+  --gw-badge-lg-height: var(--gw-size-1-125);
+  --gw-badge-xl-min-width: var(--gw-size-1-25);
+  --gw-badge-xl-height: var(--gw-size-1-25);
   --gw-chip-padding-y: var(--gw-space-0-125);
   --gw-chip-remove-icon-focus-ring-width: var(--gw-focus-ring-width);
   --gw-chip-remove-icon-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -1899,6 +1910,9 @@
   --gw-contextmenu-item-gap: var(--gw-sidenav-menuitem-gap);
   --gw-contextmenu-submenu-icon-size: var(--gw-sidenav-submenuitem-icon-size);
   --gw-contextmenu-transition-duration: var(--gw-transition-duration);
+  --gw-statusmenu-list-padding: var(--gw-sidenav-list-padding);
+  --gw-statusmenu-list-gap: var(--gw-sidenav-list-gap);
+  --gw-statusmenu-background: var(--gw-neutral-transparent);
   --gw-dock-border-radius: var(--gw-border-radius-xl-circle);
   --gw-dock-item-focus-ring-width: var(--gw-focus-ring-width);
   --gw-dock-item-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -2115,15 +2129,12 @@
   --gw-caption-sm-font-size: var(--gw-xs-font-size);
   --gw-label-base-regular-font-family: var(--gw-font-family-body);
   --gw-label-base-regular-font-weight: var(--gw-font-weight-400);
-  --gw-label-base-regular-line-height: var(--gw-xxs-line-height);
   --gw-label-base-regular-font-size: var(--gw-base-font-size);
   --gw-label-base-medium-font-family: var(--gw-font-family-body);
   --gw-label-base-medium-font-weight: var(--gw-font-weight-500);
-  --gw-label-base-medium-line-height: var(--gw-xxs-line-height);
   --gw-label-base-medium-font-size: var(--gw-base-font-size);
   --gw-label-base-bold-font-family: var(--gw-font-family-body);
   --gw-label-base-bold-font-weight: var(--gw-font-weight-700);
-  --gw-label-base-bold-line-height: var(--gw-xxs-line-height);
   --gw-label-base-bold-font-size: var(--gw-base-font-size);
   --gw-label-sm-regular-font-family: var(--gw-font-family-body);
   --gw-label-sm-regular-font-weight: var(--gw-font-weight-400);
@@ -2165,7 +2176,6 @@
   --gw-card-shadow-2-color: var(--gw-color-grey-900-50);
   --gw-tabs-tab-label-font-family: var(--gw-font-family-body);
   --gw-tabs-tab-label-font-weight: var(--gw-font-weight-400);
-  --gw-tabs-tab-label-line-height: var(--gw-xxs-line-height);
   --gw-tabs-tab-label-font-size: var(--gw-base-font-size);
   --gw-fileupload-header-stroke-color: var(--gw-fileupload-header-border-color);
   --gw-fileupload-header-stroke-width: var(--gw-fileupload-header-border-width);
@@ -2210,7 +2220,8 @@
   --gw-tertiary-dark: var(--gw-tertiary-800);
   --gw-tertiary-darker: var(--gw-tertiary-900);
   --gw-background-page: var(--gw-neutral-50);
-  --gw-background-topnav: var(--gw-primary-50);
+  --gw-background-header: var(--gw-primary-50);
+  --gw-background-raised: var(--gw-primary-50);
   --gw-background-highlighted: var(--gw-primary-100);
   --gw-background-surface: var(--gw-neutral-0);
   --gw-background-surface-semitransparent: var(--gw-neutral-50-50);
@@ -2220,6 +2231,7 @@
   --gw-foreground-on-surface-muted: var(--gw-neutral-500);
   --gw-foreground-on-surface-subtile: var(--gw-neutral-600);
   --gw-foreground-on-surface-disabled: var(--gw-neutral-400);
+  --gw-foreground-on-surface-accent: var(--gw-accent-500);
   --gw-foreground-on-brand: var(--gw-neutral-900);
   --gw-border-subtle: var(--gw-neutral-100);
   --gw-border-focus: var(--gw-primary-400);
@@ -2251,6 +2263,7 @@
   --gw-overlay-modal-background: var(--gw-neutral-0);
   --gw-button-padding-x: var(--gw-form-field-padding-x);
   --gw-button-padding-y: var(--gw-form-field-padding-y);
+  --gw-button-label-line-height: var(--gw-xxs-line-height);
   --gw-button-focus-ring-style: var(--gw-focus-ring-style);
   --gw-button-transition-duration: var(--gw-form-field-transition-duration);
   --gw-button-secondary-background: var(--gw-neutral-0);
@@ -2510,6 +2523,9 @@
   --gw-body-base-medium-line-height: var(--gw-base-line-height);
   --gw-body-base-medium-underlined-line-height: var(--gw-base-line-height);
   --gw-body-base-bold-line-height: var(--gw-base-line-height);
+  --gw-label-base-regular-line-height: var(--gw-xxs-line-height);
+  --gw-label-base-medium-line-height: var(--gw-xxs-line-height);
+  --gw-label-base-bold-line-height: var(--gw-xxs-line-height);
   --gw-inputtext-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-inputtext-shadow-color: var(--gw-neutral-shadow);
   --gw-toggleswitch-shadow-color: var(--gw-neutral-shadow);
@@ -2560,6 +2576,7 @@
   --gw-splitter-handle-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-scrollpanel-bar-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-tabs-tab-focus-ring-shadow-color: var(--gw-neutral-shadow);
+  --gw-tabs-tab-label-line-height: var(--gw-xxs-line-height);
   --gw-tabs-tabpanel-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-tabs-nav-button-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-confirmpopup-shadow-1-color: var(--gw-neutral-shadow);
@@ -2570,6 +2587,8 @@
   --gw-tooltip-shadow-2-color: var(--gw-neutral-shadow);
   --gw-contextmenu-shadow-1-color: var(--gw-neutral-shadow);
   --gw-contextmenu-shadow-2-color: var(--gw-neutral-shadow);
+  --gw-statusmenu-list-shadow-1-color: var(--gw-neutral-shadow);
+  --gw-statusmenu-list-shadow-2-color: var(--gw-neutral-shadow);
   --gw-dock-item-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-megamenu-overlay-shadow-1-color: var(--gw-neutral-shadow);
   --gw-megamenu-overlay-shadow-2-color: var(--gw-neutral-shadow);
@@ -2626,7 +2645,8 @@
   --gw-tertiary-active-color: var(--gw-tertiary-light);
   --gw-background-brand: var(--gw-primary-base);
   --gw-foreground-on-surface-brand: var(--gw-primary-base);
-  --gw-foreground-on-surface-strong: var(--gw-primary-dark);
+  --gw-foreground-on-surface-primary: var(--gw-primary-dark);
+  --gw-foreground-on-surface-strong: var(--gw-primary-base);
   --gw-foreground-link-idle: var(--gw-primary-base);
   --gw-foreground-link-hover: var(--gw-primary-dark);
   --gw-foreground-link-visited: var(--gw-secondary-base);
@@ -2641,7 +2661,7 @@
   --gw-form-field-hover-border-color: var(--gw-hover-border-color);
   --gw-form-field-invalid-border-color: var(--gw-error-light);
   --gw-form-field-invalid-placeholder-color: var(--gw-error-base);
-  --gw-form-field-icon-color: var(--gw-neutral-light);
+  --gw-form-field-icon-color: var(--gw-foreground-on-surface-subtile);
   --gw-form-field-color: var(--gw-neutral-dark);
   --gw-list-option-focus-color: var(--gw-hover-color);
   --gw-list-option-selected-background: var(--gw-highlight-background);
@@ -3252,7 +3272,9 @@
   --gw-link-subtile-visited-color: var(--gw-neutral-dark);
   --gw-progressspinner-color-one: var(--gw-error-light);
   --gw-progressspinner-color-two: var(--gw-warning-light);
+  --gw-loader-color: var(--gw-foreground-on-surface-accent);
   --gw-page-background: var(--gw-background-page);
+  --gw-page-login-background: var(--gw-background-surface);
   --gw-border-default-color: var(--gw-default-border-color);
   --gw-focus-ring-stroke-color: var(--gw-focus-ring-color);
   --gw-success-text: var(--gw-success-dark);
@@ -3568,8 +3590,11 @@
   --gw-contextmenu-item-active-color: var(--gw-sidenav-menuitem-selected-color);
   --gw-contextmenu-item-color: var(--gw-sidenav-menuitem-color);
   --gw-contextmenu-item-icon-color: var(--gw-sidenav-menuitem-icon-color);
+  --gw-contextmenu-item-icon-focus-color: var(--gw-sidenav-menuitem-hover-icon-color);
+  --gw-contextmenu-item-icon-active-color: var(--gw-sidenav-menuitem-selected-icon-color);
   --gw-contextmenu-submenu-icon-color: var(--gw-sidenav-menuitem-icon-color);
   --gw-contextmenu-submenu-icon-active-color: var(--gw-sidenav-menuitem-selected-background);
+  --gw-statusmenu-list-border-color: var(--gw-contextmenu-border-color);
   --gw-megamenu-background: var(--gw-default-background);
   --gw-megamenu-color: var(--gw-default-color);
   --gw-megamenu-item-focus-background: var(--gw-sidenav-menuitem-selected-background);
@@ -3785,6 +3810,7 @@
   --gw-confirmpopup-icon-color: var(--gw-overlay-popover-color);
   --gw-dialog-color: var(--gw-overlay-modal-color);
   --gw-contextmenu-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
+  --gw-statusmenu-list-background: var(--gw-contextmenu-background);
   --gw-megamenu-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
   --gw-menubar-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
   --gw-panelmenu-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);

package/dist/variables-light.css

@@ -143,6 +143,7 @@
   --gw-size-0-75: 0.75rem;
   --gw-size-0-875: 0.875rem;
   --gw-size-1-125: 1.125rem;
+  --gw-size-1-25: 1.25rem;
   --gw-size-1-5: 1.5rem;
   --gw-size-1-75: 1.75rem;
   --gw-size-2-5: 2.5rem;
@@ -169,7 +170,6 @@
   --gw-sidenav-list-gap: 2px;
   --gw-sidenav-menuitem-padding: 0.5rem 1rem;
   --gw-sidenav-menuitem-gap: 0.5rem;
-  --gw-sidenav-menuitem-selected-icon-size: 2.5rem;
   --gw-sidenav-menuitem-height: 56px;
   --gw-sidenav-submenu-del-label-padding: 0.5rem 0.75rem 0.5rem 10rem;
   --gw-sidenav-submenuitem-icon-size: 0.875rem;
@@ -194,7 +194,6 @@
   --gw-button-badge-size: 1rem;
   --gw-button-success-hover-color: #ffffff;
   --gw-button-success-disabled-color: #ffffff;
-  --gw-xxs-line-height: 1.125rem;
   --gw-1rem-line-height: 1rem;
   --gw-mask-background: rgba(0, 0, 0, 0.4);
   --gw-inputtext-sm-font-size: 0.875rem;
@@ -280,21 +279,12 @@
   --gw-avatar-xl-icon-size: 2rem;
   --gw-avatar-xl-group-offset: -1.5rem;
   --gw-avatar-icon-size: 1rem;
-  --gw-badge-padding: 0 0.5rem;
+  --gw-badge-padding: 0 0.125rem;
   --gw-badge-font-size: 0.75rem;
   --gw-badge-font-weight: 700;
-  --gw-badge-min-width: 1.5rem;
-  --gw-badge-height: 1.5rem;
   --gw-badge-dot-size: 0.5rem;
-  --gw-badge-sm-font-size: 0.625rem;
-  --gw-badge-sm-min-width: 1.25rem;
-  --gw-badge-sm-height: 1.25rem;
   --gw-badge-lg-font-size: 0.875rem;
-  --gw-badge-lg-min-width: 1.75rem;
-  --gw-badge-lg-height: 1.75rem;
   --gw-badge-xl-font-size: 1rem;
-  --gw-badge-xl-min-width: 2rem;
-  --gw-badge-xl-height: 2rem;
   --gw-chip-border-radius: 16px;
   --gw-chip-padding-x: 0.75rem;
   --gw-chip-gap: 0.5rem;
@@ -434,6 +424,7 @@
   --gw-tooltip-gutter: 0.25rem;
   --gw-tooltip-padding: 0.5rem 0.75rem;
   --gw-contextmenu-submenu-mobile-indent: 1rem;
+  --gw-statusmenu-padding: 0 0.25rem;
   --gw-dock-background: rgba(255, 255, 255, 0.1);
   --gw-dock-border-color: rgba(255, 255, 255, 0.2);
   --gw-dock-padding: 0.5rem;
@@ -643,7 +634,7 @@
   --gw-imagecompare-handle-border-color: rgba(0, 0, 0, 0);
   --gw-imagecompare-handle-border-width: 0;
   --gw-imagecompare-handle-focus-ring-color: rgba(255, 255, 255, 0.3);
-  --gw-overlaybadge-outline-width: 2px;
+  --gw-overlaybadge-outline-width: 1px;
   --gw-inputotp-input-width: 2.5rem;
   --gw-inputotp-input-sm-width: 2rem;
   --gw-inputotp-input-lg-width: 3rem;
@@ -1272,6 +1263,16 @@
   --gw-contextmenu-shadow-2-type: dropShadow;
   --gw-contextmenu-shadow-2-offset-x: 0;
   --gw-contextmenu-shadow-2-offset-y: 2px;
+  --gw-statusmenu-list-shadow-1-blur: 4px;
+  --gw-statusmenu-list-shadow-1-spread: 2px;
+  --gw-statusmenu-list-shadow-1-type: dropShadow;
+  --gw-statusmenu-list-shadow-1-offset-x: 0;
+  --gw-statusmenu-list-shadow-1-offset-y: 4px;
+  --gw-statusmenu-list-shadow-2-blur: 4px;
+  --gw-statusmenu-list-shadow-2-spread: -2px;
+  --gw-statusmenu-list-shadow-2-type: dropShadow;
+  --gw-statusmenu-list-shadow-2-offset-x: 0;
+  --gw-statusmenu-list-shadow-2-offset-y: 2px;
   --gw-dock-item-focus-ring-shadow-blur: 0;
   --gw-dock-item-focus-ring-shadow-spread: 0;
   --gw-dock-item-focus-ring-shadow-type: dropShadow;
@@ -1576,8 +1577,6 @@
   --color: {sidenav.item.icon.focus.color};
   --color: {sidenav.item.icon.active.color};
   --color: {sidenav.item.icon.focus.color};
-  --color: {sidenav.item.icon.active.color};
-  --color: {sidenav.item.icon.focus.color};
   --color: {sidenav.item.icon.focus.color};
   --color: {default.color.grey.0};
   --gw-color-green-100: var(--gw-color-teal-50);
@@ -1680,10 +1679,12 @@
   --gw-form-field-base-font-size: var(--gw-base-font-size);
   --gw-focus-ring-style: var(--gw-style-solid);
   --gw-defaul-border-radius: var(--gw-border-radius-sm);
+  --gw-sidenav-padding: var(--gw-space-1-125);
   --gw-sidenav-gap: var(--gw-space-1);
   --gw-sidenav-menuitem-icon-size: var(--gw-size-1-5);
   --gw-sidenav-menuitem-hover-icon-size: var(--gw-size-1-75);
   --gw-sidenav-menuitem-label-font-weight: var(--gw-font-weight-400);
+  --gw-sidenav-menuitem-selected-icon-size: var(--gw-size-1-5);
   --gw-sidenav-submenuitem-label-font-weight: var(--gw-font-weight-500);
   --gw-button-sm-padding-y: var(--gw-form-field-sm-padding-y);
   --gw-button-sm-icon-size: var(--gw-button-sm-font-size);
@@ -1691,7 +1692,6 @@
   --gw-button-icon-size: var(--gw-icon-size);
   --gw-button-label-font-weight: var(--gw-font-weight-400);
   --gw-button-label-font-size: var(--gw-base-font-size);
-  --gw-button-label-line-height: var(--gw-xxs-line-height);
   --gw-button-label-font-family: var(--gw-font-family-body);
   --gw-button-focus-ring-width: var(--gw-focus-ring-width);
   --gw-button-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -1717,6 +1717,7 @@
   --gw-button-tertiary-disabled-background: var(--gw-neutral-transparent);
   --gw-button-tertiary-disabled-border-color: var(--gw-neutral-transparent);
   --gw-button-tertiary-link-border-color: var(--gw-neutral-transparent);
+  --gw-xxs-line-height: var(--gw-1rem-line-height);
   --gw-topnav-border-color: var(--gw-neutral-transparent);
   --gw-inputtext-focus-ring-width: var(--gw-focus-ring-width);
   --gw-inputtext-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -1759,7 +1760,17 @@
   --gw-rating-focus-ring-width: var(--gw-focus-ring-width);
   --gw-rating-focus-ring-offset: var(--gw-focus-ring-offset);
   --gw-rating-transition-duration: var(--gw-transition-duration);
-  --gw-badge-border-radius: var(--gw-border-radius-md);
+  --gw-badge-border-radius: var(--gw-border-radius-xs);
+  --gw-badge-min-width: var(--gw-size-1-125);
+  --gw-badge-height: var(--gw-size-1-125);
+  --gw-badge-sm-font-size: var(--gw-xs-font-size);
+  --gw-badge-sm-min-width: var(--gw-size-1);
+  --gw-badge-sm-height: var(--gw-size-1);
+  --gw-badge-sm-line-height: var(--gw-1rem-line-height);
+  --gw-badge-lg-min-width: var(--gw-size-1-125);
+  --gw-badge-lg-height: var(--gw-size-1-125);
+  --gw-badge-xl-min-width: var(--gw-size-1-25);
+  --gw-badge-xl-height: var(--gw-size-1-25);
   --gw-chip-padding-y: var(--gw-space-0-125);
   --gw-chip-remove-icon-focus-ring-width: var(--gw-focus-ring-width);
   --gw-chip-remove-icon-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -1899,6 +1910,9 @@
   --gw-contextmenu-item-gap: var(--gw-sidenav-menuitem-gap);
   --gw-contextmenu-submenu-icon-size: var(--gw-sidenav-submenuitem-icon-size);
   --gw-contextmenu-transition-duration: var(--gw-transition-duration);
+  --gw-statusmenu-list-padding: var(--gw-sidenav-list-padding);
+  --gw-statusmenu-list-gap: var(--gw-sidenav-list-gap);
+  --gw-statusmenu-background: var(--gw-neutral-transparent);
   --gw-dock-border-radius: var(--gw-border-radius-xl-circle);
   --gw-dock-item-focus-ring-width: var(--gw-focus-ring-width);
   --gw-dock-item-focus-ring-offset: var(--gw-focus-ring-offset);
@@ -2115,15 +2129,12 @@
   --gw-caption-sm-font-size: var(--gw-xs-font-size);
   --gw-label-base-regular-font-family: var(--gw-font-family-body);
   --gw-label-base-regular-font-weight: var(--gw-font-weight-400);
-  --gw-label-base-regular-line-height: var(--gw-xxs-line-height);
   --gw-label-base-regular-font-size: var(--gw-base-font-size);
   --gw-label-base-medium-font-family: var(--gw-font-family-body);
   --gw-label-base-medium-font-weight: var(--gw-font-weight-500);
-  --gw-label-base-medium-line-height: var(--gw-xxs-line-height);
   --gw-label-base-medium-font-size: var(--gw-base-font-size);
   --gw-label-base-bold-font-family: var(--gw-font-family-body);
   --gw-label-base-bold-font-weight: var(--gw-font-weight-700);
-  --gw-label-base-bold-line-height: var(--gw-xxs-line-height);
   --gw-label-base-bold-font-size: var(--gw-base-font-size);
   --gw-label-sm-regular-font-family: var(--gw-font-family-body);
   --gw-label-sm-regular-font-weight: var(--gw-font-weight-400);
@@ -2165,7 +2176,6 @@
   --gw-card-shadow-2-color: var(--gw-color-grey-900-50);
   --gw-tabs-tab-label-font-family: var(--gw-font-family-body);
   --gw-tabs-tab-label-font-weight: var(--gw-font-weight-400);
-  --gw-tabs-tab-label-line-height: var(--gw-xxs-line-height);
   --gw-tabs-tab-label-font-size: var(--gw-base-font-size);
   --gw-fileupload-header-stroke-color: var(--gw-fileupload-header-border-color);
   --gw-fileupload-header-stroke-width: var(--gw-fileupload-header-border-width);
@@ -2211,11 +2221,14 @@
   --gw-tertiary-darker: var(--gw-tertiary-900);
   --gw-background-page: var(--gw-neutral-0);
   --gw-background-highlighted: var(--gw-primary-100);
-  --gw-background-topnav: var(--gw-primary-50);
+  --gw-background-header: var(--gw-primary-50);
+  --gw-background-raised: var(--gw-primary-50);
   --gw-background-surface-semitransparent: var(--gw-neutral-50-50);
   --gw-background-elevated: var(--gw-neutral-0);
   --gw-background-surface: var(--gw-neutral-50);
   --gw-background-disabled: var(--gw-neutral-200);
+  --gw-foreground-on-surface-brand: var(--gw-primary-500);
+  --gw-foreground-on-surface-accent: var(--gw-accent-500);
   --gw-foreground-on-surface-default: var(--gw-neutral-900);
   --gw-foreground-on-surface-subtile: var(--gw-neutral-500);
   --gw-foreground-on-surface-disabled: var(--gw-neutral-400);
@@ -2250,6 +2263,7 @@
   --gw-overlay-modal-background: var(--gw-neutral-0);
   --gw-button-padding-x: var(--gw-form-field-padding-x);
   --gw-button-padding-y: var(--gw-form-field-padding-y);
+  --gw-button-label-line-height: var(--gw-xxs-line-height);
   --gw-button-focus-ring-style: var(--gw-focus-ring-style);
   --gw-button-transition-duration: var(--gw-form-field-transition-duration);
   --gw-button-secondary-background: var(--gw-neutral-0);
@@ -2509,6 +2523,9 @@
   --gw-body-base-medium-line-height: var(--gw-base-line-height);
   --gw-body-base-medium-underlined-line-height: var(--gw-base-line-height);
   --gw-body-base-bold-line-height: var(--gw-base-line-height);
+  --gw-label-base-regular-line-height: var(--gw-xxs-line-height);
+  --gw-label-base-medium-line-height: var(--gw-xxs-line-height);
+  --gw-label-base-bold-line-height: var(--gw-xxs-line-height);
   --gw-inputtext-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-inputtext-shadow-color: var(--gw-neutral-shadow);
   --gw-toggleswitch-shadow-color: var(--gw-neutral-shadow);
@@ -2559,6 +2576,7 @@
   --gw-splitter-handle-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-scrollpanel-bar-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-tabs-tab-focus-ring-shadow-color: var(--gw-neutral-shadow);
+  --gw-tabs-tab-label-line-height: var(--gw-xxs-line-height);
   --gw-tabs-tabpanel-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-tabs-nav-button-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-confirmpopup-shadow-1-color: var(--gw-neutral-shadow);
@@ -2569,6 +2587,8 @@
   --gw-tooltip-shadow-2-color: var(--gw-neutral-shadow);
   --gw-contextmenu-shadow-1-color: var(--gw-neutral-shadow);
   --gw-contextmenu-shadow-2-color: var(--gw-neutral-shadow);
+  --gw-statusmenu-list-shadow-1-color: var(--gw-neutral-shadow);
+  --gw-statusmenu-list-shadow-2-color: var(--gw-neutral-shadow);
   --gw-dock-item-focus-ring-shadow-color: var(--gw-neutral-shadow);
   --gw-megamenu-overlay-shadow-1-color: var(--gw-neutral-shadow);
   --gw-megamenu-overlay-shadow-2-color: var(--gw-neutral-shadow);
@@ -2624,7 +2644,7 @@
   --gw-tertiary-hover-color: var(--gw-tertiary-dark);
   --gw-tertiary-active-color: var(--gw-tertiary-light);
   --gw-background-brand: var(--gw-primary-dark);
-  --gw-foreground-on-surface-brand: var(--gw-primary-dark);
+  --gw-foreground-on-surface-primary: var(--gw-primary-dark);
   --gw-foreground-on-surface-strong: var(--gw-primary-base);
   --gw-foreground-on-surface-muted: var(--gw-secondary-base);
   --gw-foreground-link-idle: var(--gw-primary-base);
@@ -2641,13 +2661,14 @@
   --gw-form-field-hover-border-color: var(--gw-hover-border-color);
   --gw-form-field-invalid-border-color: var(--gw-error-light);
   --gw-form-field-invalid-placeholder-color: var(--gw-error-base);
-  --gw-form-field-icon-color: var(--gw-neutral-light);
+  --gw-form-field-icon-color: var(--gw-foreground-on-surface-subtile);
   --gw-form-field-color: var(--gw-neutral-dark);
   --gw-list-option-focus-color: var(--gw-hover-color);
   --gw-list-option-selected-background: var(--gw-highlight-background);
   --gw-sidenav-menuitem-icon-color: var(--gw-foreground-on-surface-default);
   --gw-sidenav-menuitem-icon-second-color: var(--gw-foreground-on-surface-subtile);
   --gw-sidenav-menuitem-hover-icon-color: var(--gw-primary-base);
+  --gw-sidenav-menuitem-hover-color: var(--gw-foreground-on-surface-brand);
   --gw-sidenav-menuitem-hover-background: var(--gw-background-highlighted);
   --gw-sidenav-menuitem-selected-icon-color: var(--gw-primary-base);
   --gw-sidenav-menuitem-selected-background: var(--gw-background-highlighted);
@@ -3249,7 +3270,9 @@
   --gw-link-subtile-visited-color: var(--gw-neutral-dark);
   --gw-progressspinner-color-one: var(--gw-error-light);
   --gw-progressspinner-color-two: var(--gw-warning-light);
+  --gw-loader-color: var(--gw-foreground-on-surface-accent);
   --gw-page-background: var(--gw-background-page);
+  --gw-page-login-background: var(--gw-background-surface);
   --gw-border-default-color: var(--gw-default-border-color);
   --gw-focus-ring-stroke-color: var(--gw-focus-ring-color);
   --gw-success-text: var(--gw-success-dark);
@@ -3262,7 +3285,6 @@
   --gw-list-option-selected-focus-color: var(--gw-highlight-focus-color);
   --gw-list-option-selected-color: var(--gw-text-color);
   --gw-list-option-color: var(--gw-text-color);
-  --gw-sidenav-menuitem-hover-color: var(--gw-foreground-on-surface-brand);
   --gw-sidenav-togglebutton-background: var(--gw-sidenav-background);
   --gw-sidenav-togglebutton-hover-color: var(--gw-foreground-on-surface-muted);
   --gw-sidenav-togglebutton-color: var(--gw-foreground-on-surface-muted);
@@ -3559,8 +3581,12 @@
   --gw-contextmenu-item-active-color: var(--gw-sidenav-menuitem-selected-color);
   --gw-contextmenu-item-color: var(--gw-sidenav-menuitem-color);
   --gw-contextmenu-item-icon-color: var(--gw-sidenav-menuitem-icon-color);
+  --gw-contextmenu-item-icon-focus-color: var(--gw-sidenav-menuitem-hover-icon-color);
+  --gw-contextmenu-item-icon-active-color: var(--gw-sidenav-menuitem-selected-icon-color);
   --gw-contextmenu-submenu-icon-color: var(--gw-sidenav-menuitem-icon-color);
+  --gw-contextmenu-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
   --gw-contextmenu-submenu-icon-active-color: var(--gw-sidenav-menuitem-selected-background);
+  --gw-statusmenu-list-border-color: var(--gw-contextmenu-border-color);
   --gw-megamenu-background: var(--gw-default-background);
   --gw-megamenu-color: var(--gw-default-color);
   --gw-megamenu-item-focus-background: var(--gw-sidenav-menuitem-selected-background);
@@ -3574,6 +3600,7 @@
   --gw-megamenu-submenu-label-background: var(--gw-sidenav-menuitem-background);
   --gw-megamenu-submenu-label-color: var(--gw-sidenav-menuitem-color);
   --gw-megamenu-submenu-icon-color: var(--gw-sidenav-menuitem-icon-color);
+  --gw-megamenu-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
   --gw-megamenu-submenu-icon-active-color: var(--gw-sidenav-menuitem-selected-background);
   --gw-megamenu-mobile-button-color: var(--gw-text-muted-color);
   --gw-menu-background: var(--gw-default-background);
@@ -3594,6 +3621,7 @@
   --gw-menubar-item-icon-color: var(--gw-sidenav-menuitem-icon-color);
   --gw-menubar-submenu-background: var(--gw-default-background);
   --gw-menubar-submenu-icon-color: var(--gw-sidenav-menuitem-icon-color);
+  --gw-menubar-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
   --gw-menubar-submenu-icon-active-color: var(--gw-sidenav-menuitem-selected-background);
   --gw-menubar-mobile-button-color: var(--gw-text-muted-color);
   --gw-panelmenu-panel-background: var(--gw-default-background);
@@ -3603,6 +3631,7 @@
   --gw-panelmenu-item-color: var(--gw-sidenav-menuitem-color);
   --gw-panelmenu-item-icon-color: var(--gw-sidenav-menuitem-icon-color);
   --gw-panelmenu-submenu-icon-color: var(--gw-sidenav-menuitem-icon-color);
+  --gw-panelmenu-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
   --gw-tieredmenu-background: var(--gw-default-background);
   --gw-tieredmenu-color: var(--gw-default-color);
   --gw-tieredmenu-item-focus-background: var(--gw-sidenav-menuitem-selected-background);
@@ -3614,6 +3643,7 @@
   --gw-tieredmenu-item-icon-focus-color: var(--gw-sidenav-menuitem-hover-icon-color);
   --gw-tieredmenu-item-icon-active-color: var(--gw-sidenav-menuitem-selected-icon-color);
   --gw-tieredmenu-submenu-icon-color: var(--gw-sidenav-menuitem-icon-color);
+  --gw-tieredmenu-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
   --gw-tieredmenu-submenu-icon-active-color: var(--gw-sidenav-menuitem-selected-background);
   --gw-organizationchart-node-background: var(--gw-default-background);
   --gw-organizationchart-node-selected-color: var(--gw-highlight-color);
@@ -3773,13 +3803,9 @@
   --gw-confirmpopup-color: var(--gw-overlay-popover-color);
   --gw-confirmpopup-icon-color: var(--gw-overlay-popover-color);
   --gw-dialog-color: var(--gw-overlay-modal-color);
-  --gw-contextmenu-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
-  --gw-megamenu-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
+  --gw-statusmenu-list-background: var(--gw-contextmenu-background);
   --gw-megamenu-mobile-button-hover-color: var(--gw-default-muted-color);
-  --gw-menubar-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
   --gw-menubar-mobile-button-hover-color: var(--gw-default-muted-color);
-  --gw-panelmenu-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
-  --gw-tieredmenu-submenu-icon-focus-color: var(--gw-sidenav-menuitem-hover-color);
   --gw-paginator-nav-button-hover-color: var(--gw-default-muted-color);
   --gw-datatable-sort-icon-hover-color: var(--gw-default-muted-color);
   --gw-datatable-filter-overlay-select-color: var(--gw-overlay-select-color);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "graphwise-styleguide",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "Apache-2.0",
   "type": "module",
   "scripts": {