@use "../abstracts/dimensions";
/*
* Four runtime density profiles. "default" is byte-for-byte equivalent in
* computed values to the original workbench sizing. Each mixin resolves the
* primitive dimension tokens before publishing semantic component tokens.
*/
@mixin compact-density {
@include dimensions.density-tokens(0.9, 0.875, 0.875, 0.8, 0.875);
--wb-control-height: 24px;
--wb-control-height-sm: 20px;
--wb-icon-button-size: 20px;
--wb-menu-padding-block: 4px;
--wb-menu-padding-inline: 12px;
--wb-session-row-height: 36.75px;
--wb-session-child-row-height: 29.75px;
--wb-session-group-row-height: 24.5px;
}
@mixin default-density {
@include dimensions.density-tokens(1, 1, 1, 1, 1);
--wb-control-height: 28px;
--wb-control-height-sm: 24px;
--wb-icon-button-size: 24px;
--wb-menu-padding-block: 6px;
--wb-menu-padding-inline: 14px;
--wb-session-row-height: 42px;
--wb-session-child-row-height: 34px;
--wb-session-group-row-height: 28px;
}
@mixin comfortable-density {
@include dimensions.density-tokens(1.08, 1.125, 1.125, 1.2, 1.125);
--wb-control-height: 32px;
--wb-control-height-sm: 28px;
--wb-icon-button-size: 28px;
--wb-menu-padding-block: 8px;
--wb-menu-padding-inline: 16px;
--wb-session-row-height: 47.25px;
--wb-session-child-row-height: 38.25px;
--wb-session-group-row-height: 31.5px;
}
@mixin spacious-density {
@include dimensions.density-tokens(1.16, 1.25, 1.25, 1.4, 1.25);
--wb-control-height: 36px;
--wb-control-height-sm: 32px;
--wb-icon-button-size: 32px;
--wb-menu-padding-block: 10px;
--wb-menu-padding-inline: 18px;
--wb-session-row-height: 52.5px;
--wb-session-child-row-height: 42.5px;
--wb-session-group-row-height: 35px;
}
:root,
:root[data-density="default"] {
@include default-density;
}
:root[data-density="compact"] {
@include compact-density;
}
:root[data-density="comfortable"] {
@include comfortable-density;
}
:root[data-density="spacious"] {
@include spacious-density;
}
@media (pointer: coarse) {
:root:not([data-density]),
:root[data-density="default"] {
}
}