@uqds/form 0.0.12-alpha.0 → 0.0.13-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uqds/form",
-  "version": "0.0.12-alpha.0",
+  "version": "0.0.13-alpha.0",
   "description": "Form element style rules",
   "keywords": [
     "uqds",
@@ -42,8 +42,8 @@
     "url": "https://github.com/uq-its-ss/design-system/issues"
   },
   "dependencies": {
-    "@uqds/core": "^0.0.12-alpha.0",
-    "@uqds/icon": "^0.0.12-alpha.0"
+    "@uqds/core": "^1.0.0",
+    "@uqds/icon": "^0.0.13-alpha.0"
   },
   "devDependencies": {
     "@svgdotjs/svg.js": "^3.0.16",
@@ -54,5 +54,5 @@
     "svgdom": "^0.1.8",
     "svgo": "^1.3.2"
   },
-  "gitHead": "125e487dfd2f7e46f2b29cc0e8646b92e61d6f2c"
+  "gitHead": "07bdc5a8169d386baae8ea4ffa5b4a75fc7e9ebb"
 }

package/src/scss/_component.scss

@@ -74,7 +74,7 @@ $use-encapsulation: false !default;
         display: inline-flex;
         font-size: core.$font-size;
         line-height: core.$line-height;
-        margin-bottom: core.$space-m;
+        margin-bottom: core.$space-l;
 
         input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
         select,
@@ -84,8 +84,8 @@ $use-encapsulation: false !default;
         + textarea {
           max-width: none;
           min-width: 200px;
-          margin-left: core.$space;
-          margin-right: core.$space-m;
+          margin-left: core.$space-m;
+          margin-right: core.$space-l;
           width: auto;
         }
 
@@ -131,11 +131,11 @@ $use-encapsulation: false !default;
         font-size: core.$font-size;
         font-weight: core.$font-weight-normal;
         line-height: $form-checkbox-size;
-        margin-bottom: core.$space;
+        margin-bottom: core.$space-m;
         margin-left: core.$space-s;
         margin-right: $form-spacing;
         padding-top: core.$space-xs;
-        padding-left: core.$space-m;
+        padding-left: core.$space-l;
         vertical-align: top;
       }
 
@@ -171,7 +171,7 @@ $use-encapsulation: false !default;
     font-size: $form-text-size;
     color: $form-text-color;
     line-height: core.$line-height-ui;
-    margin-bottom: core.$space-m;
+    margin-bottom: core.$space-l;
 
     &:focus {
       border-color: $form-border-color-focus;
@@ -216,13 +216,13 @@ $use-encapsulation: false !default;
     }
 
     &.uq-input--large {
-      padding: 1.15625rem core.$space-m;
+      padding: 1.15625rem core.$space-l;
       border-radius: core.$space-xs;
     }
 
     + .uq-error-message,
     + .uq-success-message {
-      margin-top: -(core.$space-m);
+      margin-top: -(core.$space-l);
       border-radius: 0 0 $form-border-radius $form-border-radius;
     }
   }
@@ -292,11 +292,11 @@ $use-encapsulation: false !default;
       font-size: core.$font-size;
       font-weight: core.$font-weight-normal;
       line-height: core.$line-height-h;
-      margin-bottom: core.$space;
+      margin-bottom: core.$space-m;
       margin-left: core.$space-s;
       margin-right: $form-spacing;
       padding-top: core.$space-compressed-xs;
-      padding-left: core.$space-m;
+      padding-left: core.$space-l;
       vertical-align: top;
     }
 
@@ -423,25 +423,25 @@ $use-encapsulation: false !default;
     background-color: lighten(core.$alert-light, 10%);
     border: 1px solid core.$alert;
     border-left-width: core.$space-xs;
-    padding: core.$space;
-    margin-bottom: core.$space-m;
+    padding: core.$space-m;
+    margin-bottom: core.$space-l;
 
     &__title {
       color: core.$text;
       font-size: core.$font-size-m;
       font-weight: core.$font-weight-bold;
       line-height: core.$line-height-h;
-      margin: core.$space-none core.$space-none core.$space core.$space-none;
+      margin: core.$space-none core.$space-none core.$space-m core.$space-none;
     }
 
     &_body {
       color: core.$text;
-      font-size: core.$space;
+      font-size: core.$space-m;
     }
 
     &__list {
       color: core.$text;
-      font-size: core.$space;
+      font-size: core.$space-m;
       margin: core.$space-none;
 
       &__item {
@@ -469,9 +469,9 @@ $use-encapsulation: false !default;
     font-style: normal;
     font-weight: core.$font-weight-normal;
     line-height: core.$line-height;
-    margin-bottom: core.$space-m;
-    padding: calc(#{core.$space-s} - 1px) core.$space core.$space-s
-      core.$space-xxl;
+    margin-bottom: core.$space-l;
+    padding: calc(#{core.$space-s} - 1px) core.$space-m core.$space-s
+      core.$space-xxxl;
     position: relative;
 
     &::before {
@@ -481,7 +481,7 @@ $use-encapsulation: false !default;
       background-repeat: no-repeat;
       background-size: contain;
       height: core.$space-compressed-xl;
-      left: core.$space;
+      left: core.$space-m;
       margin-right: core.$space-s;
       margin-top: calc(#{- (core.$space-compressed-xl) * 0.5} - 1px);
       position: absolute;

package/src/scss/_global.scss

@@ -7,11 +7,11 @@ $form-border-width: 1px;
 $form-color-error: core.$alert;
 $form-color-success: core.$success;
 $form-description-size: core.$font-size-xs;
-$form-element-height: core.$space-xl;
+$form-element-height: core.$space-xxl;
 $form-focus-color: core.$link;
 $form-label-size: core.$font-size-s;
 $form-placeholder-color: core.$uq-neutral-dark40;
-$form-spacing: core.$space;
+$form-spacing: core.$space-m;
 $form-text-color: core.$text;
 $form-text-disabled-color: core.$uq-neutral-dark20;
 $form-text-size: core.$font-size;