Generated: 10/20/2026, 12:46:35 PM
Comparison between: graphwise-styleguide@1.3.2 (local) and graphwise-styleguide@1.3.1 (npm)
Total: 139
| Theme | CSS Variable | Status | Old Value | New Value |
|---|---|---|---|---|
| variables-dark.css | --gw-color-grey-500 | Changed | #6b7280 | #768093 |
| variables-dark.css | --gw-color-grey-600 | Changed | #4f5a69 | #555f6d |
| variables-dark.css | --gw-color-grey-700 | Changed | #384252 | #323943 |
| variables-dark.css | --gw-color-grey-800 | Changed | #121921 | #14191f |
| variables-dark.css | --gw-color-grey-900 | Changed | #05070b | #060709 |
| variables-dark.css | --gw-dataview-content-border-color | Changed | rgba(0, 0, 0, 0) | var(--gw-border-color-subtle) |
| variables-dark.css | --gw-datatable-header-padding | Changed | 0.75rem 1rem | 0.75rem 0 |
| variables-dark.css | --gw-datatable-footer-padding | Changed | 0.75rem 1rem | 0.75rem 0 |
| variables-dark.css | --gw-primary-dark | Changed | var(--gw-primary-800) | var(--gw-primary-700) |
| variables-dark.css | --gw-background-surface | Changed | var(--gw-neutral-0) | var(--gw-neutral-50) |
| variables-dark.css | --gw-form-field-placeholder-color | Changed | var(--gw-neutral-500) | var(--gw-neutral-400) |
| variables-dark.css | --gw-button-tertiary-focus-ring-color | Changed | var(--gw-primary-200) | var(--gw-focus-ring-color) |
| variables-dark.css | --gw-button-tertiary-disabled-color | Changed | var(--gw-primary-300) | var(--gw-foreground-on-surface-subtle) |
| variables-dark.css | --gw-togglebutton-background | Changed | var(--gw-button-secondary-background) | var(--gw-background-subtle) |
| variables-dark.css | --gw-border-color-focus-ring | Changed | var(--gw-foreground-on-surface-brand) | var(--gw-secondary-light) |
| variables-dark.css | --gw-foreground-link-idle | Changed | var(--gw-primary-del-base) | var(--gw-primary-light) |
| variables-dark.css | --gw-form-field-disabled-background | Changed | var(--gw-muted-background) | var(--gw-background-disabled) |
| variables-dark.css | --gw-button-primary-focus-ring-color | Changed | var(--gw-primary-del-base) | var(--gw-focus-ring-color) |
| variables-dark.css | --gw-button-danger-active-background | Changed | var(--gw-error-light) | var(--gw-error-base) |
| variables-dark.css | --gw-button-danger-active-border-color | Changed | var(--gw-error-light) | var(--gw-error-base) |
| variables-dark.css | --gw-button-tertiary-link-icon-color-second | Changed | var(--gw-primary-del-base) | var(--gw-foreground-on-surface-subtle) |
| variables-dark.css | --gw-button-tertiary-link-focus-ring-color | Changed | var(--gw-primary-del-base) | var(--gw-focus-ring-color) |
| variables-dark.css | --gw-highlight-focus-color | Changed | var(--gw-primary-del-base) | var(--gw-foreground-on-surface-primary) |
| variables-dark.css | --gw-radiobutton-checked-focus-border-color | Changed | var(--gw-primary-del-base) | var(--gw-focus-ring-color) |
| variables-dark.css | --gw-checkbox-checked-focus-border-color | Changed | var(--gw-primary-del-base) | var(--gw-focus-ring-color) |
| variables-dark.css | --gw-avatar-background | Changed | var(--gw-border-color-default) | var(--gw-background-subtle) |
| variables-dark.css | --gw-togglebutton-content-border-radius | Changed | var(--gw-content-border-radius) | var(--gw-border-radius-xs) |
| variables-dark.css | --gw-selectbutton-border-radius | Changed | var(--gw-form-field-border-radius) | var(--gw-border-radius-sm) |
| variables-dark.css | --gw-cluster-node-outofsync-background | Changed | var(--gw-foreground-on-surface-contrast) | var(--gw-foreground-on-surface-disabled) |
| variables-dark.css | --gw-cluster-link-outofsync-border-color | Changed | var(--gw-border-color-strong) | var(--gw-warning-base) |
| variables-dark.css | --gw-cluster-link-outofsync-icon-color | Changed | var(--gw-foreground-on-surface-secondary) | var(--gw-warning-base) |
| variables-dark.css | --gw-cluster-link-outofsync-icon-background | Changed | var(--gw-background-page) | var(--gw-background-surface) |
| variables-dark.css | --gw-cluster-background | Changed | var(--gw-body-background) | var(--gw-background-surface) |
| variables-dark.css | --gw-button-success-active-border-color | Changed | var(--gw-success-light) | var(--gw-success-base) |
| variables-dark.css | --gw-button-tertiary-hover-color | Changed | var(--gw-foreground-on-surface-button-text) | var(--gw-foreground-on-surface-secondary) |
| variables-dark.css | --gw-button-tertiary-active-color | Changed | var(--gw-foreground-on-surface-button-text) | var(--gw-foreground-on-surface-secondary) |
| variables-dark.css | --gw-button-tertiary-color | Changed | var(--gw-foreground-on-surface-button-text) | var(--gw-foreground-on-surface-secondary) |
| variables-dark.css | --gw-button-tertiary-icon-color | Changed | var(--gw-foreground-on-surface-button-text) | var(--gw-foreground-on-surface-secondary) |
| variables-dark.css | --gw-button-tertiary-icon-second | Changed | var(--gw-foreground-on-surface-button-text) | var(--gw-foreground-on-surface-secondary) |
| variables-dark.css | --gw-avatar-color | Changed | var(--gw-default-color) | var(--gw-foreground-on-surface-muted) |
| variables-dark.css | --gw-message-help-close-button-focus-ring-color | Changed | var(--gw-help-light) | var(--gw-focus-ring-color) |
| variables-dark.css | --gw-message-secondary-close-button-focus-ring-color | Changed | var(--gw-help-light) | var(--gw-focus-ring-color) |
| variables-dark.css | --gw-togglebutton-checked-color | Changed | var(--gw-button-primary-color) | var(--gw-foreground-on-surface-button-text) |
| variables-dark.css | --gw-cluster-link-insync-border-color | Changed | var(--gw-foreground-on-surface-primary) | var(--gw-border-color-primary) |
| variables-dark.css | --gw-cluster-link-snapshot-border-color | Changed | var(--gw-foreground-on-surface-primary) | var(--gw-foreground-on-surface-secondary) |
| variables-dark.css | --gw-cluster-link-snapshot-icon-color | Changed | var(--gw-foreground-on-surface-primary) | var(--gw-foreground-on-surface-secondary) |
| variables-dark.css | --gw-cluster-link-syncing-border-color | Changed | var(--gw-foreground-on-surface-primary) | var(--gw-foreground-on-surface-secondary) |
| variables-dark.css | --gw-togglebutton-content-checked-background | Changed | var(--gw-button-primary-background) | var(--gw-background-elevated) |
| variables-dark.css | --gw-togglebutton-checked-background | Changed | var(--gw-button-primary-background) | var(--gw-background-subtle) |
| variables-dark.css | --gw-togglebutton-color | Changed | var(--gw-button-secondary-color) | var(--gw-foreground-on-surface-muted) |
| variables-dark.css | --gw-link-text-decoration | Added | underline | |
| variables-dark.css | --gw-button-icon-only-padding-x | Added | var(--gw-space-0-5) | |
| variables-dark.css | --gw-button-icon-only-padding-y | Added | var(--gw-space-0-5) | |
| variables-dark.css | --gw-button-sm-icon-only-padding-x | Added | var(--gw-space-0-25) | |
| variables-dark.css | --gw-button-sm-icon-only-padding-y | Added | var(--gw-space-0-25) | |
| variables-dark.css | --gw-button-lg-icon-only-padding-x | Added | var(--gw-space-0-5) | |
| variables-dark.css | --gw-button-lg-icon-only-padding-y | Added | var(--gw-space-0-5) | |
| variables-dark.css | --gw-button-link-focus-ring-width | Added | var(--gw-focus-ring-width) | |
| variables-dark.css | --gw-button-link-focus-ring-offset | Added | var(--gw-focus-ring-offset) | |
| variables-dark.css | --gw-chip-rounded-border-radius | Added | var(--gw-border-radius-xl-circle) | |
| variables-dark.css | --gw-foreground-link-focus | Added | var(--gw-primary-light) | |
| variables-dark.css | --gw-cluster-node-leader-border-color | Added | var(--gw-foreground-on-surface-accent) | |
| variables-dark.css | --gw-cluster-node-status-outofsync-background | Added | var(--gw-warning-base) | |
| variables-dark.css | --gw-cluster-node-status-disconnected-background | Added | var(--gw-error-base) | |
| variables-dark.css | --gw-cluster-node-status-insync-background | Added | var(--gw-primary-base) | |
| variables-dark.css | --gw-cluster-node-status-syncing-background | Added | var(--gw-secondary-base) | |
| variables-dark.css | --gw-button-link-focus-color | Added | var(--gw-foreground-link-idle) | |
| variables-dark.css | --gw-cluster-node-follower-border-color | Added | var(--gw-foreground-on-surface-primary) | |
| variables-light.css | --gw-color-grey-500 | Changed | #6b7280 | #768093 |
| variables-light.css | --gw-color-grey-600 | Changed | #4f5a69 | #555f6d |
| variables-light.css | --gw-color-grey-700 | Changed | #384252 | #323943 |
| variables-light.css | --gw-color-grey-800 | Changed | #121921 | #14191f |
| variables-light.css | --gw-color-grey-900 | Changed | #05070b | #060709 |
| variables-light.css | --gw-dataview-content-border-color | Changed | rgba(0, 0, 0, 0) | var(--gw-border-color-subtle) |
| variables-light.css | --gw-datatable-header-padding | Changed | 0.75rem 1rem | 0.75rem 0 |
| variables-light.css | --gw-datatable-footer-padding | Changed | 0.75rem 1rem | 0.75rem 0 |
| variables-light.css | --gw-primary-light | Changed | var(--gw-primary-500) | var(--gw-primary-400) |
| variables-light.css | --gw-foreground-on-surface-disabled | Changed | var(--gw-neutral-400) | var(--gw-neutral-500) |
| variables-light.css | --gw-form-field-placeholder-color | Changed | var(--gw-neutral-500) | var(--gw-neutral-400) |
| variables-light.css | --gw-button-tertiary-focus-ring-color | Changed | var(--gw-primary-200) | var(--gw-focus-ring-color) |
| variables-light.css | --gw-button-tertiary-disabled-color | Changed | var(--gw-primary-300) | var(--gw-foreground-on-surface-subtle) |
| variables-light.css | --gw-togglebutton-background | Changed | var(--gw-button-secondary-background) | var(--gw-background-subtle) |
| variables-light.css | --gw-border-color-focus-ring | Changed | var(--gw-foreground-on-surface-brand) | var(--gw-secondary-light) |
| variables-light.css | --gw-foreground-link-idle | Changed | var(--gw-primary-del-base) | var(--gw-primary-light) |
| variables-light.css | --gw-foreground-link-hover | Changed | var(--gw-primary-del-dark) | var(--gw-primary-dark) |
| variables-light.css | --gw-foreground-link-visited | Changed | var(--gw-primary-del-dark) | var(--gw-primary-light) |
| variables-light.css | --gw-form-field-disabled-background | Changed | var(--gw-muted-background) | var(--gw-background-disabled) |
| variables-light.css | --gw-button-primary-focus-ring-color | Changed | var(--gw-primary-del-base) | var(--gw-focus-ring-color) |
| variables-light.css | --gw-button-danger-active-background | Changed | var(--gw-error-light) | var(--gw-error-base) |
| variables-light.css | --gw-button-danger-active-border-color | Changed | var(--gw-error-light) | var(--gw-error-base) |
| variables-light.css | --gw-button-tertiary-link-icon-color-second | Changed | var(--gw-primary-del-base) | var(--gw-foreground-on-surface-subtle) |
| variables-light.css | --gw-button-tertiary-link-focus-ring-color | Changed | var(--gw-primary-del-base) | var(--gw-focus-ring-color) |
| variables-light.css | --gw-highlight-focus-color | Changed | var(--gw-primary-del-base) | var(--gw-foreground-on-surface-primary) |
| variables-light.css | --gw-radiobutton-checked-focus-border-color | Changed | var(--gw-primary-del-base) | var(--gw-focus-ring-color) |
| variables-light.css | --gw-checkbox-checked-focus-border-color | Changed | var(--gw-primary-del-base) | var(--gw-focus-ring-color) |
| variables-light.css | --gw-avatar-background | Changed | var(--gw-border-color-default) | var(--gw-background-subtle) |
| variables-light.css | --gw-togglebutton-content-border-radius | Changed | var(--gw-content-border-radius) | var(--gw-border-radius-xs) |
| variables-light.css | --gw-selectbutton-border-radius | Changed | var(--gw-form-field-border-radius) | var(--gw-border-radius-sm) |
| variables-light.css | --gw-cluster-node-outofsync-background | Changed | var(--gw-foreground-on-surface-contrast) | var(--gw-foreground-on-surface-disabled) |
| variables-light.css | --gw-cluster-link-outofsync-border-color | Changed | var(--gw-border-color-strong) | var(--gw-warning-base) |
| variables-light.css | --gw-cluster-link-outofsync-icon-color | Changed | var(--gw-foreground-on-surface-secondary) | var(--gw-warning-base) |
| variables-light.css | --gw-cluster-link-outofsync-icon-background | Changed | var(--gw-background-page) | var(--gw-background-surface) |
| variables-light.css | --gw-cluster-background | Changed | var(--gw-body-background) | var(--gw-background-surface) |
| variables-light.css | --gw-button-success-active-border-color | Changed | var(--gw-success-light) | var(--gw-success-base) |
| variables-light.css | --gw-button-tertiary-hover-color | Changed | var(--gw-foreground-on-surface-button-text) | var(--gw-foreground-on-surface-secondary) |
| variables-light.css | --gw-button-tertiary-active-color | Changed | var(--gw-foreground-on-surface-button-text) | var(--gw-foreground-on-surface-secondary) |
| variables-light.css | --gw-button-tertiary-color | Changed | var(--gw-foreground-on-surface-button-text) | var(--gw-foreground-on-surface-secondary) |
| variables-light.css | --gw-button-tertiary-icon-color | Changed | var(--gw-foreground-on-surface-button-text) | var(--gw-foreground-on-surface-secondary) |
| variables-light.css | --gw-button-tertiary-icon-second | Changed | var(--gw-foreground-on-surface-button-text) | var(--gw-foreground-on-surface-secondary) |
| variables-light.css | --gw-avatar-color | Changed | var(--gw-default-color) | var(--gw-foreground-on-surface-muted) |
| variables-light.css | --gw-message-help-close-button-focus-ring-color | Changed | var(--gw-help-light) | var(--gw-focus-ring-color) |
| variables-light.css | --gw-message-secondary-close-button-focus-ring-color | Changed | var(--gw-help-light) | var(--gw-focus-ring-color) |
| variables-light.css | --gw-togglebutton-checked-color | Changed | var(--gw-button-primary-color) | var(--gw-foreground-on-surface-button-text) |
| variables-light.css | --gw-cluster-link-insync-border-color | Changed | var(--gw-foreground-on-surface-primary) | var(--gw-border-color-primary) |
| variables-light.css | --gw-cluster-link-snapshot-border-color | Changed | var(--gw-foreground-on-surface-primary) | var(--gw-foreground-on-surface-secondary) |
| variables-light.css | --gw-cluster-link-snapshot-icon-color | Changed | var(--gw-foreground-on-surface-primary) | var(--gw-foreground-on-surface-secondary) |
| variables-light.css | --gw-cluster-link-syncing-border-color | Changed | var(--gw-foreground-on-surface-primary) | var(--gw-foreground-on-surface-secondary) |
| variables-light.css | --gw-togglebutton-content-checked-background | Changed | var(--gw-button-primary-background) | var(--gw-background-elevated) |
| variables-light.css | --gw-togglebutton-checked-background | Changed | var(--gw-button-primary-background) | var(--gw-background-subtle) |
| variables-light.css | --gw-togglebutton-color | Changed | var(--gw-button-secondary-color) | var(--gw-foreground-on-surface-muted) |
| variables-light.css | --gw-link-text-decoration | Added | underline | |
| variables-light.css | --gw-button-icon-only-padding-x | Added | var(--gw-space-0-5) | |
| variables-light.css | --gw-button-icon-only-padding-y | Added | var(--gw-space-0-5) | |
| variables-light.css | --gw-button-sm-icon-only-padding-x | Added | var(--gw-space-0-25) | |
| variables-light.css | --gw-button-sm-icon-only-padding-y | Added | var(--gw-space-0-25) | |
| variables-light.css | --gw-button-lg-icon-only-padding-x | Added | var(--gw-space-0-5) | |
| variables-light.css | --gw-button-lg-icon-only-padding-y | Added | var(--gw-space-0-5) | |
| variables-light.css | --gw-button-link-focus-ring-width | Added | var(--gw-focus-ring-width) | |
| variables-light.css | --gw-button-link-focus-ring-offset | Added | var(--gw-focus-ring-offset) | |
| variables-light.css | --gw-chip-rounded-border-radius | Added | var(--gw-border-radius-xl-circle) | |
| variables-light.css | --gw-foreground-on-surface-read-only | Added | var(--gw-neutral-400) | |
| variables-light.css | --gw-foreground-link-focus | Added | var(--gw-primary-light) | |
| variables-light.css | --gw-cluster-node-leader-border-color | Added | var(--gw-foreground-on-surface-accent) | |
| variables-light.css | --gw-cluster-node-status-outofsync-background | Added | var(--gw-warning-base) | |
| variables-light.css | --gw-cluster-node-status-disconnected-background | Added | var(--gw-error-base) | |
| variables-light.css | --gw-cluster-node-status-insync-background | Added | var(--gw-primary-base) | |
| variables-light.css | --gw-cluster-node-status-syncing-background | Added | var(--gw-secondary-base) | |
| variables-light.css | --gw-button-link-focus-color | Added | var(--gw-foreground-link-idle) | |
| variables-light.css | --gw-cluster-node-follower-border-color | Added | var(--gw-foreground-on-surface-primary) |