Design token diff
Showing changes between two snapshots of exsitu.app
Border Radius
+15 added−15 removed1 unchanged+100%Radius 100%
+.25remRadius .25rem
+1remRadius 1rem
+10pxRadius 10px
+20pxRadius 20px
+2pxRadius 2px
+4pxRadius 4px
+
Shadows
+12 added−12 removed+inset 0 2px 3px -1px color(display-p3 1 1 1/0.2)Shadow 1
+inset 0 0 0 1px color(display-p3 0 0 0/0.192)Shadow 2
+inset 0 0 0 1px color(display-p3 0 0 0/0.153)Shadow 3
+inset 0 .5px .5px color(display-p3 1 1 1/0.2),inset 0 -.5px .5px color(display-p3 0 0 0/0.2)Shadow 4
+inset 0 .05em color(display-p3 0 0 0/0.15),0 0 0 .05em color(display-p3 0 0 0/0.192)Shadow 5
+inset 0 0 0 1px color(display-p3 0 0 0/0.09)Shadow 6
+0 0 0 1px color(display-p3 0 0 0/0.09)Shadow 7
9999px
Radius 9999px
+calc(0.5rem - 2px)Radius calc 0.5rem 2px
+calc(0.5rem - 4px)Radius calc 0.5rem 4px
+0 0% 100%Radius 0 0% 100%
−var(--radius-1)Radius var radius 1
−var(--radius-4)Radius var radius 4
−var(--radius-5)Radius var radius 5
−max(var(--radius-2),var(--radius-full))Radius max var radius 2 var radius full
−max(var(--radius-3),var(--radius-full))Radius max var radius 3 var radius full
−max(var(--radius-4),var(--radius-full))Radius max var radius 4 var radius full
−max(var(--radius-5),var(--radius-full))Radius max var radius 5 var radius full
−max(var(--radius-6),var(--radius-full))Radius max var radius 6 var radius full
−max(var(--radius-1),var(--radius-full))Radius max var radius 1 var radius full
−var(--radius-3)Radius var radius 3
−var(--base-card-border-radius)Radius var base card border radius
−calc(var(--base-card-border-radius) - var(--base-card-border-width))Radius calc var base card border radius var base card border width
−var(--skeleton-radius)Radius var skeleton radius
−var(--checkbox-border-radius)Radius var checkbox border radius
−calc((.5px + .2em) * var(--radius-factor))Radius calc .5px .2em var radius factor
+inset 0 0 0 1px color(display-p3 0 0 0/0.267)Shadow 8
+inset 0 0 0 1px color(display-p3 0 0 0/0.122)Shadow 9
+0 0 0 1px color(display-p3 0.849 0.849 0.849)Shadow 10
+inset 0 0 0 1px color(display-p3 0 0 0/0.063),inset 0 0 0 1px color(display-p3 0 0 0/0.1),inset 0 1.5px 2px 0 color(display-p3 0 0 0/0.1)Shadow 11
+0 0 0 1px color(display-p3 0.88 0.88 0.88)Shadow 12
−inset 0 0 0 1px var(--accent-a6)Shadow 2
−inset 0 0 0 1px var(--accent-a8)Shadow 3
−inset 0 0 0 1px var(--accent-a7),inset 0 0 0 1px var(--gray-a11)Shadow 4
−var(--base-button-classic-box-shadow-top),inset 0 0 0 1px var(--accent-9),var(--base-button-classic-box-shadow-bottom)Shadow 5
−inset 0 2px 3px -1px var(--white-a4)Shadow 6
−var(--base-button-classic-box-shadow-top),inset 0 0 0 1px var(--accent-12),var(--base-button-classic-box-shadow-bottom)Shadow 7
−inset 0 4px 2px -2px var(--gray-a4),inset 0 1px 1px var(--gray-a7),inset 0 0 0 1px var(--gray-a5),inset 0 0 0 1px var(--accent-9),inset 0 3px 2px var(--gray-a3),inset 0 0 0 1px var(--white-a7),inset 0 -2px 1px var(--white-a5)Shadow 8
−var(--base-button__classic-active__shadow-front-layer),inset 0 0 0 1px var(--accent-12),var(--base-button__classic-active__shadow-bottom-layer)Shadow 9
−var(--base-button-classic-disabled-box-shadow)Shadow 10
−inset 0 0 0 1px var(--gray-a7)Shadow 11
−inset 0 0 0 1px var(--accent-a7)Shadow 12