matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

nicolium: style migrations

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2026-03-09 15:13:25 +01:00
parent 03d527f0ec
commit ae7b2b719e
12 changed files with 683 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
packages/nicolium/src/components/ui/checkbox.tsx
View File

@ -7,12 +7,7 @@ interface ICheckbox extends Pick<
/** A pretty checkbox input. */
const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => (
<input
{...props}
ref={ref}
type='checkbox'
className='size-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 black:bg-black dark:border-gray-800 dark:bg-gray-900'
/>
<input {...props} ref={ref} type='checkbox' className='⁂-checkbox' />
));
Checkbox.displayName = 'Checkbox';

7
packages/nicolium/src/components/ui/file-input.tsx
View File

@ -6,12 +6,7 @@ interface IFileInput extends Pick<
> {}
const FileInput = forwardRef<HTMLInputElement, IFileInput>((props, ref) => (
<input
{...props}
ref={ref}
type='file'
className='block w-full text-sm text-gray-800 file:mr-2 file:cursor-pointer file:rounded-full file:border file:border-solid file:border-gray-200 file:bg-white file:px-3 file:py-1.5 file:text-xs file:font-medium file:leading-4 file:text-gray-700 hover:file:bg-gray-100 dark:text-gray-200 dark:file:border-gray-800 dark:file:bg-gray-900 dark:file:text-gray-500 dark:file:hover:bg-gray-800'
/>
<input {...props} ref={ref} type='file' className='⁂-file-input' />
));
FileInput.displayName = 'FileInput';

23
packages/nicolium/src/components/ui/form-group.tsx
View File

@ -46,7 +46,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
<label
htmlFor={formFieldId}
data-testid='form-group-label'
className='-mt-0.5 block text-sm font-medium text-gray-900 dark:text-gray-100'
className='⁂-form-group__label ⁂-form-group__label--checkbox'
title={labelTitle}
>
{labelText}
@ -55,10 +55,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
{hasError && (
<div>
<p
data-testid='form-group-error'
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
>
<p data-testid='form-group-error' className='⁂-form-group__error'>
{errors.join(', ')}
</p>
</div>
@ -67,7 +64,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
{hintText && (
<p
data-testid='form-group-hint'
className='mt-0.5 text-xs text-gray-700 dark:text-gray-600'
className='⁂-form-group__hint ⁂-form-group__hint--below'
>
{hintText}
</p>
@ -83,19 +80,16 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
<label
htmlFor={formFieldId}
data-testid='form-group-label'
className='block text-sm font-medium text-gray-900 dark:text-gray-100'
className='⁂-form-group__label'
title={labelTitle}
>
{labelText}
</label>
)}
<div className='mt-1 dark:text-white'>
<div className='⁂-form-group__content'>
{hintText && (
<p
data-testid='form-group-hint'
className='mb-0.5 text-xs text-gray-700 dark:text-gray-600'
>
<p data-testid='form-group-hint' className='⁂-form-group__hint ⁂-form-group__hint--above'>
{hintText}
</p>
)}
@ -104,10 +98,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
{inputChildren.filter((_, i) => i !== 0)}
{hasError && (
<p
data-testid='form-group-error'
className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
>
<p data-testid='form-group-error' className='⁂-form-group__error'>
{errors.join(', ')}
</p>
)}

14
packages/nicolium/src/components/ui/icon-button.tsx
View File

@ -30,19 +30,7 @@ const IconButton = React.forwardRef(
<Component
ref={ref}
type='button'
className={clsx(
'⁂-icon-button flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0',
{
'bg-white dark:bg-transparent': theme === 'seamless',
'border border-solid border-gray-400 bg-transparent text-gray-900 hover:border-primary-300 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:text-gray-100 dark:hover:border-primary-700':
theme === 'outlined',
'border-transparent bg-primary-100 text-primary-500 hover:bg-primary-50 focus:bg-primary-100 dark:bg-primary-800 dark:text-primary-200 dark:hover:bg-primary-700 dark:focus:bg-primary-800':
theme === 'secondary',
'bg-gray-900 text-white': theme === 'dark',
'opacity-50': filteredProps.disabled,
},
className,
)}
className={clsx('⁂-icon-button', `⁂-icon-button--${theme}`, className)}
{...filteredProps}
data-testid={filteredProps['data-testid'] ?? 'icon-button'}
{...(props.href ? { target: '_blank' } : {})}

10
packages/nicolium/src/components/ui/indicator.tsx
View File

@ -8,15 +8,7 @@ interface IIndicator {
/** Indicator dot component. */
const Indicator: React.FC<IIndicator> = ({ state = 'inactive', size = 'sm' }) => (
<div
className={clsx('rounded-full outline-double', {
'h-1.5 w-1.5 shadow-sm': size === 'sm',
'bg-green-500 outline-green-400': state === 'active',
'bg-yellow-500 outline-yellow-400': state === 'pending',
'bg-red-500 outline-red-400': state === 'error',
'bg-neutral-500 outline-neutral-400': state === 'inactive',
})}
/>
<div className={clsx('⁂-indicator', `⁂-indicator--${size}`, `⁂-indicator--${state}`)} />
);
export { Indicator as default };

52
packages/nicolium/src/components/ui/input.tsx
View File

@ -92,45 +92,26 @@ const Input = React.forwardRef<HTMLInputElement, IInput>((props, ref) => {
}, []);
return (
<div
className={clsx('relative', {
'rounded-md': theme !== 'search',
'rounded-full': theme === 'search',
'mt-1': !String(outerClassName).includes('mt-'),
[String(outerClassName)]: typeof outerClassName !== 'undefined',
})}
>
<div className={clsx('⁂-input__wrapper', `⁂-input__wrapper--${theme}`, outerClassName)}>
{icon ? (
<div className='pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3'>
<Icon src={icon} className='size-4 text-gray-700 dark:text-gray-600' aria-hidden='true' />
<div className='⁂-input__wrapper__icon'>
<Icon src={icon} aria-hidden='true' />
</div>
) : null}
{prepend ? (
<div className='absolute inset-y-0 left-0 flex items-center'>{prepend}</div>
) : null}
{prepend ? <div className='⁂-input__wrapper__prepend'>{prepend}</div> : null}
<input
{...filteredProps}
type={revealed ? 'text' : type}
ref={ref}
className={clsx(
'block w-full text-base placeholder:text-gray-600 focus:border-primary-500 dark:placeholder:text-gray-600 dark:focus:border-primary-500 sm:text-sm',
'⁂-input',
`⁂-input--${theme}`,
{
'ring-1 focus:ring-primary-500 dark:ring-gray-800 dark:focus:ring-primary-500': [
'search',
'normal',
].includes(theme),
'border-none px-0 !ring-0': theme === 'transparent',
'text-gray-900 dark:text-gray-100': !props.disabled,
'text-gray-600': props.disabled,
'rounded-md border-gray-400 bg-white black:bg-black dark:border-gray-800 dark:bg-gray-900':
theme === 'normal',
'rounded-full border-gray-200 bg-gray-200 focus:bg-white dark:border-gray-800 dark:bg-gray-900':
theme === 'search',
'pr-10 rtl:pl-10 rtl:pr-3': isPassword || append,
'pl-8': typeof icon !== 'undefined',
'pl-16': typeof prepend !== 'undefined',
'⁂-input--with-icon': typeof icon !== 'undefined',
'⁂-input--with-prepend': typeof prepend !== 'undefined',
'⁂-input--with-trailing': isPassword || !!append,
},
className,
)}
@ -141,11 +122,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>((props, ref) => {
}
/>
{append ? (
<div className='absolute inset-y-0 right-0 flex items-center px-3 rtl:left-0 rtl:right-auto'>
{append}
</div>
) : null}
{append ? <div className='⁂-input__wrapper__append'>{append}</div> : null}
{isPassword ? (
<Tooltip
@ -155,13 +132,8 @@ const Input = React.forwardRef<HTMLInputElement, IInput>((props, ref) => {
: intl.formatMessage(messages.showPassword)
}
>
<div className='absolute inset-y-0 right-0 flex items-center rtl:left-0 rtl:right-auto'>
<button
type='button'
onClick={togglePassword}
tabIndex={-1}
className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
>
<div className='⁂-input__wrapper__password-toggle'>
<button type='button' onClick={togglePassword} tabIndex={-1}>
<SvgIcon
src={
revealed

12
packages/nicolium/src/components/ui/tag-input.tsx
View File

@ -46,20 +46,16 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
};
return (
<div className='relative mt-1 grow shadow-sm'>
<HStack
className='block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm'
space={2}
wrap
>
<div className='⁂-tag-input'>
<HStack className='⁂-tag-input__list' space={2} wrap>
{tags.map((tag) => (
<div key={tag} className='mb-2'>
<div key={tag} className='⁂-tag-input__item'>
<Tag tag={tag} onDelete={handleTagDelete} />
</div>
))}
<input
className='mb-2 h-8 w-32 grow bg-transparent p-1 outline-none'
className='⁂-tag-input__field'
value={input}
placeholder={placeholder}
onChange={(e) => {

2
packages/nicolium/src/components/ui/tag.tsx
View File

@ -12,7 +12,7 @@ interface ITag {
/** A single editable Tag (used by TagInput). */
const Tag: React.FC<ITag> = ({ tag, onDelete }) => (
<div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
<div className='⁂-tag'>
<Text theme='white'>{tag}</Text>
<IconButton

42
packages/nicolium/src/components/ui/toggle.tsx
View File

@ -29,47 +29,13 @@ const Toggle: React.FC<IToggle> = ({
return (
<button
className={clsx(
'flex-none rounded-full focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-gray-800 dark:ring-offset-0 dark:focus:ring-primary-500',
radio
? {
'border-2 p-0.5': true,
'border-gray-500': !checked && !disabled,
'border-primary-600': checked && !disabled,
'border-gray-200': !checked && disabled,
'border-primary-200': checked && disabled,
'cursor-default': disabled,
}
: {
'bg-gray-500': !checked && !disabled,
'bg-primary-600': checked && !disabled,
'bg-gray-200': !checked && disabled,
'bg-primary-200': checked && disabled,
'w-9 p-0.5': size === 'sm',
'w-11 p-0.5': size === 'md',
'cursor-default': disabled,
},
)}
className={clsx('⁂-toggle', `⁂-toggle--${size}`, {
'⁂-toggle--radio': radio,
})}
onClick={handleClick}
type='button'
>
<div
className={
radio
? clsx('rounded-full', {
'h-3 w-3': size === 'sm',
'h-4 w-4': size === 'md',
'bg-primary-600': checked && !disabled,
'bg-primary-200': checked && disabled,
})
: clsx('rounded-full bg-white transition-transform', {
'h-4.5 w-4.5': size === 'sm',
'translate-x-3.5 rtl:-translate-x-3.5': size === 'sm' && checked,
'h-6 w-6': size === 'md',
'translate-x-4 rtl:-translate-x-4': size === 'md' && checked,
})
}
/>
<div className={radio ? '⁂-toggle__knob--radio' : '⁂-toggle__knob'} />
<input
id={id}

8
packages/nicolium/src/components/ui/tooltip.tsx
View File

@ -78,16 +78,12 @@ const Tooltip: React.FC<ITooltip> = (props) => {
left: x ?? 0,
...styles,
}}
className='pointer-events-none z-[100] whitespace-nowrap rounded bg-gray-800 px-2.5 py-1.5 text-xs font-medium text-gray-100 shadow dark:bg-gray-100 dark:text-gray-900'
className='⁂-tooltip'
{...getFloatingProps()}
>
{text}
<FloatingArrow
ref={arrowRef}
context={context}
className='fill-gray-800 dark:fill-gray-100'
/>
<FloatingArrow ref={arrowRef} context={context} className='⁂-tooltip__arrow' />
</div>
</FloatingPortal>
)}

156
packages/nicolium/src/styles/new/components.scss
View File

@ -1,6 +1,96 @@
@use 'mixins';
@use 'variables';
.⁂-icon-button {
display: inline-flex;
align-items: center;
column-gap: 0.5rem;
border-radius: 9999px;
padding: 0.25rem;
&:focus-visible {
outline: none;
box-shadow:
0 0 0 2px rgb(var(--color-primary-500)),
0 0 0 4px white;
}
&:is(.dark *):focus-visible {
box-shadow: 0 0 0 2px rgb(var(--color-primary-500));
}
&:disabled {
opacity: 0.5;
}
&--seamless {
background-color: white;
&:is(.dark *) {
background-color: transparent;
}
}
&--outlined {
border: 1px solid rgb(var(--color-gray-400));
background-color: transparent;
color: rgb(var(--color-gray-900));
&:hover {
border-color: rgb(var(--color-primary-300));
}
&:focus {
border-color: rgb(var(--color-primary-500));
}
&:is(.dark *) {
border-color: rgb(var(--color-gray-800));
color: rgb(var(--color-gray-100));
&:hover {
border-color: rgb(var(--color-primary-700));
}
}
}
&--secondary {
border: 1px solid transparent;
background-color: rgb(var(--color-primary-100));
color: rgb(var(--color-primary-500));
&:hover {
background-color: rgb(var(--color-primary-50));
}
&:focus {
background-color: rgb(var(--color-primary-100));
}
&:is(.dark *) {
background-color: rgb(var(--color-primary-800));
color: rgb(var(--color-primary-200));
&:hover {
background-color: rgb(var(--color-primary-700));
}
&:focus {
background-color: rgb(var(--color-primary-800));
}
}
}
&--dark {
background-color: rgb(var(--color-gray-900));
color: white;
}
&--transparent {
background-color: transparent;
}
}
.⁂-accordion {
border-radius: 0.5rem;
background: white;
@ -589,3 +679,69 @@ div[data-viewport-type='window']:has(.⁂-empty-message) {
width: 1rem;
}
}
.⁂-tooltip {
pointer-events: none;
z-index: 100;
white-space: nowrap;
border-radius: 0.25rem;
background-color: rgb(var(--color-gray-800));
padding: 0.375rem 0.625rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: rgb(var(--color-gray-100));
box-shadow:
0 1px 3px 0 rgb(0 0 0 / 0.1),
0 1px 2px -1px rgb(0 0 0 / 0.1);
&:is(.dark *) {
background-color: rgb(var(--color-gray-100));
color: rgb(var(--color-gray-900));
}
&__arrow {
fill: rgb(var(--color-gray-800));
&:is(.dark *) {
fill: rgb(var(--color-gray-100));
}
}
}
.⁂-indicator {
border-radius: 9999px;
outline-style: double;
&--sm {
width: 0.375rem;
height: 0.375rem;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
}
&--active {
@apply bg-green-500 outline-green-400;
}
&--pending {
@apply bg-yellow-500 outline-yellow-400;
}
&--error {
@apply bg-red-500 outline-red-400;
}
&--inactive {
@apply bg-neutral-500 outline-neutral-400;
}
}
.⁂-tag {
display: inline-flex;
align-items: center;
white-space: nowrap;
border-radius: 0.25rem;
background-color: rgb(var(--color-primary-500));
padding: 0.25rem;
color: white;
}

493
packages/nicolium/src/styles/new/forms.scss
View File

@ -1,4 +1,5 @@
@use 'mixins';
@use 'variables';
.⁂-form {
display: flex;
@ -48,3 +49,495 @@
}
}
}
.⁂-input__wrapper {
position: relative;
margin-top: 0.25rem;
border-radius: 0.375rem;
&--search {
border-radius: 9999px;
}
&__icon {
pointer-events: none;
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: 0;
display: flex;
align-items: center;
padding-inline-start: 0.75rem;
svg {
width: 1rem;
height: 1rem;
color: rgb(var(--color-gray-700));
&:is(.dark *) {
color: rgb(var(--color-gray-600));
}
}
}
&__prepend {
position: absolute;
top: 0;
bottom: 0;
inset-inline-start: 0;
display: flex;
align-items: center;
}
&__append {
position: absolute;
top: 0;
bottom: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
padding-inline: 0.75rem;
}
&__password-toggle {
position: absolute;
top: 0;
bottom: 0;
inset-inline-end: 0;
display: flex;
align-items: center;
button {
height: 100%;
padding-inline: 0.5rem;
color: rgb(var(--color-gray-700));
&:hover {
color: rgb(var(--color-gray-500));
}
&:focus {
outline: none;
box-shadow: inset 0 0 0 2px rgb(var(--color-primary-500));
}
&:is(.dark *) {
color: rgb(var(--color-gray-600));
&:hover {
color: rgb(var(--color-gray-400));
}
}
}
}
}
.⁂-input {
display: block;
width: 100%;
font-size: 0.9375rem;
line-height: 1.25rem;
@media (min-width: variables.$breakpoint-sm) {
font-size: 0.875rem;
}
&::placeholder {
color: rgb(var(--color-gray-600));
}
&:not(:disabled) {
color: rgb(var(--color-gray-900));
&:is(.dark *) {
color: rgb(var(--color-gray-100));
}
}
&:disabled {
color: rgb(var(--color-gray-600));
}
&--normal,
&--search {
&:focus {
border-color: rgb(var(--color-primary-500));
box-shadow: 0 0 0 1px rgb(var(--color-primary-500));
outline: none;
}
&:is(.dark *) {
box-shadow: 0 0 0 1px rgb(var(--color-gray-800));
&:focus {
border-color: rgb(var(--color-primary-500));
box-shadow: 0 0 0 1px rgb(var(--color-primary-500));
}
}
}
&--normal {
border-radius: 0.375rem;
border: 1px solid rgb(var(--color-gray-400));
background-color: white;
&:is(.dark *) {
border-color: rgb(var(--color-gray-800));
background-color: rgb(var(--color-gray-900));
}
&:is(.dark.black *) {
background-color: black;
}
}
&--search {
border-radius: 9999px;
border: 1px solid rgb(var(--color-gray-200));
background-color: rgb(var(--color-gray-200));
&:focus {
background-color: white;
}
&:is(.dark *) {
border-color: rgb(var(--color-gray-800));
background-color: rgb(var(--color-gray-900));
}
}
&--transparent {
border: none;
padding-inline: 0;
box-shadow: none !important;
}
&--with-icon {
padding-inline-start: 2rem;
}
&--with-prepend {
padding-inline-start: 4rem;
}
&--with-trailing {
padding-inline-end: 2.5rem;
}
}
.⁂-form-group {
&__label {
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
color: rgb(var(--color-gray-900));
&:is(.dark *) {
color: rgb(var(--color-gray-100));
}
&--checkbox {
margin-top: -0.125rem;
}
}
&__content {
margin-top: 0.25rem;
}
&__hint {
font-size: 0.75rem;
line-height: 1rem;
color: rgb(var(--color-gray-700));
&:is(.dark *) {
color: rgb(var(--color-gray-600));
}
&--above {
margin-bottom: 0.125rem;
}
&--below {
margin-top: 0.125rem;
}
}
&__error {
position: relative;
margin-top: 0.125rem;
display: inline-block;
border-radius: 0.375rem;
background-color: rgb(var(--color-danger-200));
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
line-height: 1rem;
color: rgb(var(--color-danger-900));
&::before {
border-style: solid;
border-color: transparent;
border-bottom-color: rgb(var(--color-danger-200));
border-width: 6px;
height: 0;
width: 0;
left: 0.625rem;
margin-inline-start: -1px;
pointer-events: none;
position: absolute;
}
&::after {
border-style: solid;
border-color: transparent;
height: 0;
width: 0;
left: 0.625rem;
pointer-events: none;
position: absolute;
}
}
}
.⁂-toggle {
flex: none;
border-radius: 9999px;
padding: 0.125rem;
&:focus {
outline: none;
box-shadow:
0 0 0 2px rgb(var(--color-primary-500)),
0 0 0 4px white;
&:is(.dark *) {
box-shadow: 0 0 0 2px rgb(var(--color-primary-500));
}
}
&:has(input:disabled) {
cursor: default;
}
&:not(&--radio) {
&:not(:has(input:checked), :has(input:disabled)) {
background-color: rgb(var(--color-gray-500));
}
&:not(:has(input:checked)):has(input:disabled) {
background-color: rgb(var(--color-gray-200));
}
&:has(input:checked):not(:has(input:disabled)) {
background-color: rgb(var(--color-primary-600));
}
&:has(input:checked):has(input:disabled) {
background-color: rgb(var(--color-primary-200));
}
}
&--radio {
border: 2px solid;
&:not(:has(input:checked), :has(input:disabled)) {
border-color: rgb(var(--color-gray-500));
}
&:not(:has(input:checked)):has(input:disabled) {
border-color: rgb(var(--color-gray-200));
}
&:has(input:checked):not(:has(input:disabled)) {
border-color: rgb(var(--color-primary-600));
}
&:has(input:checked):has(input:disabled) {
border-color: rgb(var(--color-primary-200));
}
}
&--sm {
width: 2.25rem;
.⁂-toggle__knob {
width: 1.125rem;
height: 1.125rem;
}
.⁂-toggle__knob--radio {
width: 0.75rem;
height: 0.75rem;
}
}
&--md {
width: 2.75rem;
.⁂-toggle__knob {
width: 1.5rem;
height: 1.5rem;
}
.⁂-toggle__knob--radio {
width: 1rem;
height: 1rem;
}
}
&--sm:has(input:checked) .⁂-toggle__knob {
transform: translateX(0.875rem);
:is([dir='rtl']) & {
transform: translateX(-0.875rem);
}
}
&--md:has(input:checked) .⁂-toggle__knob {
transform: translateX(1rem);
:is([dir='rtl']) & {
transform: translateX(-1rem);
}
}
&__knob {
border-radius: 9999px;
background-color: white;
transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
&__knob--radio {
border-radius: 9999px;
.⁂-toggle:has(input:checked):not(:has(input:disabled)) & {
background-color: rgb(var(--color-primary-600));
}
.⁂-toggle:has(input:checked):has(input:disabled) & {
background-color: rgb(var(--color-primary-200));
}
}
}
.⁂-checkbox {
width: 1rem;
height: 1rem;
border-radius: 0.25rem;
border: 2px solid rgb(var(--color-gray-300));
color: rgb(var(--color-primary-600));
&:focus {
outline: none;
box-shadow: 0 0 0 2px rgb(var(--color-primary-500));
}
&:is(.dark *) {
border-color: rgb(var(--color-gray-800));
background-color: rgb(var(--color-gray-900));
}
&:is(.dark.black *) {
background-color: black;
}
}
.⁂-file-input {
display: block;
width: 100%;
font-size: 0.875rem;
color: rgb(var(--color-gray-800));
&:is(.dark *) {
color: rgb(var(--color-gray-200));
}
&::file-selector-button {
margin-inline-end: 0.5rem;
cursor: pointer;
border-radius: 9999px;
border: 1px solid rgb(var(--color-gray-200));
background-color: white;
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
font-weight: 500;
line-height: 1rem;
color: rgb(var(--color-gray-700));
&:hover {
background-color: rgb(var(--color-gray-100));
}
&:is(.dark *) {
border-color: rgb(var(--color-gray-800));
background-color: rgb(var(--color-gray-900));
color: rgb(var(--color-gray-500));
&:hover {
background-color: rgb(var(--color-gray-800));
}
}
}
}
.⁂-tag-input {
position: relative;
margin-top: 0.25rem;
flex-grow: 1;
box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
&__list {
display: block;
width: 100%;
border-radius: 0.375rem;
border: 1px solid rgb(var(--color-gray-400));
background-color: white;
padding: 0.5rem;
padding-bottom: 0;
color: rgb(var(--color-gray-900));
&::placeholder {
color: rgb(var(--color-gray-600));
}
&:focus {
border-color: rgb(var(--color-primary-500));
box-shadow: 0 0 0 1px rgb(var(--color-primary-500));
}
&:is(.dark *) {
border-color: rgb(var(--color-gray-800));
background-color: rgb(var(--color-gray-900));
color: rgb(var(--color-gray-100));
box-shadow: 0 0 0 1px rgb(var(--color-gray-800));
&::placeholder {
color: rgb(var(--color-gray-600));
}
&:focus {
border-color: rgb(var(--color-primary-500));
box-shadow: 0 0 0 1px rgb(var(--color-primary-500));
}
}
@media (min-width: variables.$breakpoint-sm) {
font-size: 0.875rem;
}
}
&__item {
margin-bottom: 0.5rem;
}
&__field {
margin-bottom: 0.5rem;
height: 2rem;
width: 8rem;
flex-grow: 1;
background-color: transparent;
padding: 0.25rem;
outline: none;
}
}