You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
161 lines
4.8 KiB
161 lines
4.8 KiB
/* TextArea — multi-line text input. Skin layered over `<textarea>`. */
|
|
|
|
[data-textarea] {
|
|
--_textarea-px: var(--space-3);
|
|
--_textarea-py: var(--space-2);
|
|
--_textarea-gap: var(--space-2);
|
|
--_textarea-font-size: var(--font-size-md);
|
|
--_textarea-line-height: var(--leading-normal);
|
|
--_textarea-radius: var(--radius-md);
|
|
--_textarea-border: var(--color-neutral-border);
|
|
/* `--color-{role}-border-strong` is NOT part of this theme's token vocabulary
|
|
(only `--color-{role}-border` exists). Consume the SAME tokens the other inputs
|
|
use: the Field hovers to `--color-border-strong` and focuses to
|
|
`--color-focus-ring`. Per-color focus accents below use each role's `-solid`. */
|
|
--_textarea-border-hover: var(--color-border-strong);
|
|
--_textarea-border-focus: var(--color-focus-ring);
|
|
--_textarea-bg: var(--color-surface);
|
|
--_textarea-color: var(--color-content);
|
|
--_textarea-placeholder: var(--color-content-muted);
|
|
--_textarea-count-color: var(--color-content-muted);
|
|
--_textarea-count-overflow: var(--color-threat-text);
|
|
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
gap: var(--_textarea-gap);
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
}
|
|
|
|
[data-textarea][data-size='xs'] {
|
|
--_textarea-px: var(--space-2);
|
|
--_textarea-py: var(--space-1);
|
|
--_textarea-font-size: var(--font-size-xs);
|
|
--_textarea-radius: var(--radius-sm);
|
|
}
|
|
[data-textarea][data-size='sm'] {
|
|
--_textarea-px: var(--space-2);
|
|
--_textarea-py: var(--space-1-5);
|
|
--_textarea-font-size: var(--font-size-sm);
|
|
}
|
|
[data-textarea][data-size='lg'] {
|
|
--_textarea-px: var(--space-4);
|
|
--_textarea-py: var(--space-3);
|
|
--_textarea-font-size: var(--font-size-lg);
|
|
--_textarea-radius: var(--radius-lg);
|
|
}
|
|
[data-textarea][data-size='xl'] {
|
|
--_textarea-px: var(--space-5);
|
|
--_textarea-py: var(--space-4);
|
|
--_textarea-font-size: var(--font-size-xl);
|
|
--_textarea-radius: var(--radius-lg);
|
|
}
|
|
|
|
/* Color accents — applied on focus + when invalid. Each role's `-solid` (the
|
|
saturated accent, step 9) is the existing token closest to the intended strong
|
|
focus border. */
|
|
[data-textarea][data-color='secondary'] {
|
|
--_textarea-border-focus: var(--color-secondary-solid);
|
|
}
|
|
[data-textarea][data-color='neutral'] {
|
|
--_textarea-border-focus: var(--color-neutral-solid);
|
|
}
|
|
[data-textarea][data-color='affirm'] {
|
|
--_textarea-border-focus: var(--color-affirm-solid);
|
|
}
|
|
[data-textarea][data-color='fulfill'] {
|
|
--_textarea-border-focus: var(--color-fulfill-solid);
|
|
}
|
|
[data-textarea][data-color='risk'] {
|
|
--_textarea-border-focus: var(--color-risk-solid);
|
|
}
|
|
[data-textarea][data-color='threat'] {
|
|
--_textarea-border-focus: var(--color-threat-solid);
|
|
}
|
|
[data-textarea][data-color='loss'] {
|
|
--_textarea-border-focus: var(--color-loss-solid);
|
|
}
|
|
|
|
/* The real input. */
|
|
[data-textarea-input] {
|
|
display: block;
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
padding-block: var(--_textarea-py);
|
|
padding-inline: var(--_textarea-px);
|
|
border: var(--border-width) solid var(--_textarea-border);
|
|
border-radius: var(--_textarea-radius);
|
|
background: var(--_textarea-bg);
|
|
color: var(--_textarea-color);
|
|
font-family: var(--font-family-body);
|
|
font-size: var(--_textarea-font-size);
|
|
line-height: var(--_textarea-line-height);
|
|
outline: none;
|
|
transition:
|
|
border-color var(--duration-fast) var(--ease-default),
|
|
box-shadow var(--duration-fast) var(--ease-default);
|
|
}
|
|
|
|
[data-textarea-input]:hover:not([data-disabled]):not([data-readonly]) {
|
|
border-color: var(--_textarea-border-hover);
|
|
}
|
|
|
|
[data-textarea][data-focused] [data-textarea-input] {
|
|
border-color: var(--_textarea-border-focus);
|
|
box-shadow: 0 0 0 var(--ring-width, 2px)
|
|
color-mix(in srgb, var(--_textarea-border-focus) 25%, transparent);
|
|
}
|
|
|
|
[data-textarea-input][data-invalid] {
|
|
border-color: var(--color-threat-solid);
|
|
}
|
|
|
|
[data-textarea][data-variant='outline'] [data-textarea-input] {
|
|
background: transparent;
|
|
}
|
|
|
|
[data-textarea][data-variant='ghost'] [data-textarea-input] {
|
|
background: transparent;
|
|
border-color: transparent;
|
|
}
|
|
[data-textarea][data-variant='ghost'][data-focused] [data-textarea-input] {
|
|
border-color: var(--_textarea-border-focus);
|
|
}
|
|
|
|
[data-textarea-input][data-disabled] {
|
|
cursor: not-allowed;
|
|
opacity: var(--opacity-disabled, 0.6);
|
|
}
|
|
|
|
[data-textarea-input]::placeholder {
|
|
color: var(--_textarea-placeholder);
|
|
}
|
|
|
|
/* Count chip — eidos default render: `count / max`. */
|
|
[data-textarea-count] {
|
|
display: inline-flex;
|
|
align-items: baseline;
|
|
gap: 0.25em;
|
|
align-self: flex-end;
|
|
color: var(--_textarea-count-color);
|
|
font-family: var(--font-family-mono, ui-monospace, monospace);
|
|
font-size: calc(var(--_textarea-font-size) * 0.85);
|
|
font-variant-numeric: tabular-nums;
|
|
line-height: 1;
|
|
}
|
|
|
|
[data-textarea-count][data-overflow] {
|
|
color: var(--_textarea-count-overflow);
|
|
font-weight: 600;
|
|
}
|
|
|
|
[data-textarea-count-sep] {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-textarea-input] {
|
|
transition: none;
|
|
}
|
|
}
|