diff --git a/packages/components/src/field/src/Field.css b/packages/components/src/field/src/Field.css index 07d026d04..836ad4d99 100644 --- a/packages/components/src/field/src/Field.css +++ b/packages/components/src/field/src/Field.css @@ -17,7 +17,7 @@ /* LABEL */ .o-ui-field .o-ui-field-label { grid-area: label; - padding-bottom: var(--o-ui-sp-2); + padding-bottom: var(--hop-space-stack-xs); } /* INPUT */ @@ -28,5 +28,5 @@ /* MESSAGE */ .o-ui-field .o-ui-field-message { grid-area: message; - padding-top: var(--o-ui-sp-2); + padding-top: var(--hop-space-stack-xs); } diff --git a/packages/components/src/field/src/FieldMessage.css b/packages/components/src/field/src/FieldMessage.css index 27ab4fe67..72be06b20 100644 --- a/packages/components/src/field/src/FieldMessage.css +++ b/packages/components/src/field/src/FieldMessage.css @@ -11,15 +11,15 @@ /* NEUTRAL */ .o-ui-field-message-neutral { - color: var(--o-ui-text-alias-tertiary); + color: var(--hop-neutral-text-weak); } /* VALID */ .o-ui-field-message-success { - color: var(--o-ui-text-alias-success); + color: var(--hop-success-text-weak); } /* INVALID */ .o-ui-field-message-error { - color: var(--o-ui-text-alias-alert); + color: var(--hop-danger-text-weak); } diff --git a/packages/components/src/field/src/Label.css b/packages/components/src/field/src/Label.css index 85f6de8d7..789afdd7e 100644 --- a/packages/components/src/field/src/Label.css +++ b/packages/components/src/field/src/Label.css @@ -1,9 +1,9 @@ .o-ui-field-label { - color: var(--o-ui-text-alias-primary); + color: var(--hop-neutral-text-weak); white-space: nowrap; } /* REQUIRED */ .o-ui-field-label-required { - margin-left: var(--o-ui-sp-1); + margin-left: var(--hop-space-inline-xs); } diff --git a/packages/components/src/form/src/Form.css b/packages/components/src/form/src/Form.css index 0eef90ad9..b8e0b6c8e 100644 --- a/packages/components/src/form/src/Form.css +++ b/packages/components/src/form/src/Form.css @@ -16,16 +16,16 @@ .o-ui-fieldset-label { display: inline-block; - font-size: var(--o-ui-fs-4); - font-weight: 600; - color: var(--o-ui-text-alias-primary); - margin-bottom: var(--o-ui-sp-3); + font-size: var(--hop-body-lg-font-size); + font-weight: var(--hop-body-lg-bold-font-weight); + color: var(--hop-neutral-text); + margin-bottom: var(--hop-space-stack-md); } .o-ui-form .o-ui-field { - margin-bottom: var(--o-ui-sp-5); + margin-bottom: var(--hop-space-stack-lg); } .o-ui-fieldset:last-of-type { - margin-bottom: var(--o-ui-sp-5); + margin-bottom: var(--hop-space-stack-lg); }