Merge pull request #19 from gsoft-inc/feature/OR-142

Feat: [OR-144 - OR-142] Form and Field Rebrand

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);
 }

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);
 }

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);
 }

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);
 }