studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🎨(react) enhance field component styles

Browse Source 
update field token and css files with new css variables introduce
with the new tokens architectures
This commit is contained in:
Nathan Panchout
2025-08-22 10:12:54 +02:00
committed by NathanVss
parent 8f71cdb7f9
commit fe0c2b367f
3 changed files with 19 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
packages/react/src/components/Forms/Field/_index.scss
View File

@@ -6,6 +6,10 @@
box-sizing: border-box;
min-width: 0;
&--disabled {
color: var(--c--components--forms-field--color--disabled);
}
&__footer {
font-size: var(--c--components--forms-field--font-size);
padding: 0.25rem calc(1rem + 2px) 0 calc(1rem + 2px);
@@ -16,7 +20,7 @@
}
ul {
margin: 0.20rem 0 0 0;
margin: 0.2rem 0 0 0;
padding: 0 0 0 1rem;
line-height: 1rem;
}
@@ -31,18 +35,19 @@
}
&--error {
color: var(--c--theme--colors--danger-500);
color: var(--c--components--forms-field--color--error);
label, .labelled-box label {
color: var(--c--theme--colors--danger-500);
label,
.labelled-box label {
color: var(--c--components--forms-field--color--error);
}
}
&--success {
color: var(--c--theme--colors--success-600);
color: var(--c--components--forms-field--color--success);
.c__field__text {
color: var(--c--theme--colors--success-600);
color: var(--c--components--forms-field--color--success);
}
}

3
packages/react/src/components/Forms/Field/index.tsx
View File

@@ -11,6 +11,7 @@ export type FieldProps = {
fullWidth?: boolean | undefined;
compact?: boolean | undefined;
className?: string | undefined;
disabled?: boolean | undefined;
};
type Props = FieldProps & PropsWithChildren;
@@ -24,12 +25,14 @@ export const Field = ({
fullWidth,
compact,
className,
disabled,
}: Props) => {
return (
<div
className={classNames("c__field", "c__field--" + state, className, {
"c__field--full-width": fullWidth,
"c__field--compact": compact && !fullWidth,
"c__field--disabled": disabled,
})}
>
{children}

7
packages/react/src/components/Forms/Field/tokens.ts
View File

@@ -2,6 +2,9 @@ import { DefaultTokens } from "@openfun/cunningham-tokens";
export const tokens = (defaults: DefaultTokens) => ({
width: "292px",
"font-size": defaults.theme.font.sizes.s,
color: defaults.theme.colors["greyscale-600"],
"font-size": defaults.globals.font.sizes.s,
color: defaults.contextuals.content.semantic.neutral.secondary,
"color--error": defaults.contextuals.content.semantic.error.secondary,
"color--success": defaults.contextuals.content.semantic.success.secondary,
"color--disabled": defaults.contextuals.content.semantic.disabled.primary,
});