@radix-ui/themes
Version:
[](https://radix-ui.com/themes)
131 lines (121 loc) • 4.17 kB
CSS
/* stylelint-disable selector-max-type */
/* Disable selector-max-type rule to target individual element types. */
:where(.radix-themes) {
/* prettier-ignore */
--kbd-box-shadow:
inset 0 -0.05em 0.5em var(--gray-a2),
inset 0 0.05em var(--white-a12),
inset 0 0.25em 0.5em var(--gray-a2),
inset 0 -0.05em var(--gray-a6),
0 0 0 0.05em var(--gray-a5),
0 0.08em 0.17em var(--gray-a7);
}
:is(.dark, .dark-theme),
:is(.dark, .dark-theme) :where(.radix-themes:not(.light, .light-theme)) {
/* prettier-ignore */
--kbd-box-shadow:
inset 0 -0.05em 0.5em var(--gray-a3),
inset 0 0.05em var(--gray-a11),
inset 0 0.25em 0.5em var(--gray-a2),
inset 0 -0.1em var(--black-a11),
0 0 0 0.075em var(--gray-a7),
0 0.08em 0.17em var(--black-a12);
}
.rt-Kbd {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-family: var(--default-font-family);
font-weight: normal;
vertical-align: text-top;
white-space: nowrap;
user-select: none;
position: relative;
top: -0.03em;
font-size: 0.75em;
min-width: 1.75em;
line-height: 1.7em;
box-sizing: border-box;
padding-left: 0.5em;
padding-right: 0.5em;
padding-bottom: 0.05em;
word-spacing: -0.1em;
border-radius: calc(var(--radius-factor) * 0.35em);
letter-spacing: var(--letter-spacing, var(--default-letter-spacing));
/* Make sure that the height is not stretched in a Flex/Grid layout */
height: fit-content;
color: var(--gray-12);
background-color: var(--gray-1);
box-shadow: var(--kbd-box-shadow);
transition: box-shadow 120ms, background-color 120ms;
&:where(:any-link, button) {
@media (hover: hover) {
&:where(:hover) {
transition-duration: 40ms, 40ms;
background-color: var(--color-background);
box-shadow: var(--kbd-box-shadow), 0 0 0 0.05em var(--gray-a5);
}
}
&:where([data-state='open']) {
transition-duration: 40ms, 40ms;
background-color: var(--color-background);
box-shadow: var(--kbd-box-shadow), 0 0 0 0.05em var(--gray-a5);
}
&:where(:active:not([data-state='open'])) {
padding-top: 0.05em;
padding-bottom: 0;
transition-duration: 40ms, 40ms;
background-color: var(--gray-2);
box-shadow: inset 0 0.05em var(--black-a3), 0 0 0 0.05em var(--gray-a7);
}
&:where(:focus-visible) {
outline: 2px solid var(--focus-8);
}
}
}
/***************************************************************************************************
* *
* SIZES *
* *
***************************************************************************************************/
@breakpoints {
.rt-Kbd {
&:where(.rt-r-size-1) {
font-size: calc(var(--font-size-1) * 0.8);
--letter-spacing: var(--letter-spacing-1);
}
&:where(.rt-r-size-2) {
font-size: calc(var(--font-size-2) * 0.8);
--letter-spacing: var(--letter-spacing-2);
}
&:where(.rt-r-size-3) {
font-size: calc(var(--font-size-3) * 0.8);
--letter-spacing: var(--letter-spacing-3);
}
&:where(.rt-r-size-4) {
font-size: calc(var(--font-size-4) * 0.8);
--letter-spacing: var(--letter-spacing-4);
}
&:where(.rt-r-size-5) {
font-size: calc(var(--font-size-5) * 0.8);
--letter-spacing: var(--letter-spacing-5);
}
&:where(.rt-r-size-6) {
font-size: calc(var(--font-size-6) * 0.8);
--letter-spacing: var(--letter-spacing-6);
}
&:where(.rt-r-size-7) {
font-size: calc(var(--font-size-7) * 0.8);
--letter-spacing: var(--letter-spacing-7);
}
&:where(.rt-r-size-8) {
font-size: calc(var(--font-size-8) * 0.8);
--letter-spacing: var(--letter-spacing-8);
}
&:where(.rt-r-size-9) {
font-size: calc(var(--font-size-9) * 0.8);
--letter-spacing: var(--letter-spacing-9);
}
}
}