@uqds/form 0.0.15-alpha.0 → 0.1.0-alpha.0

package/dist/css/main.css

@@ -1 +1 @@
-html{font-size:100%;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5;color:#2b2a29;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}form,fieldset,legend,label,input,select,textarea,.uq-error-summary,.uq-error-message,.uq-success-message,.uq-inline-help{box-sizing:border-box;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}fieldset::before,fieldset::after,fieldset *,fieldset *::before,fieldset *::after,legend::before,legend::after,legend *,legend *::before,legend *::after,label::before,label::after,label *,label *::before,label *::after,input::before,input::after,input *,input *::before,input *::after,select::before,select::after,select *,select *::before,select *::after,textarea::before,textarea::after,textarea *,textarea *::before,textarea *::after{box-sizing:border-box}fieldset{border:0;padding:0;margin:0}label,legend{color:#2b2a29;display:block;font-size:.875rem;font-weight:500}legend{margin-bottom:1rem;line-height:1.2;padding:0}legend.uq-legend--error{color:#951126}legend .uq-legend__required{color:#951126}label{cursor:pointer;line-height:1}label.uq-label--inline{align-items:center;display:inline-flex;font-size:1rem;line-height:1.5;margin-bottom:1.5rem}label.uq-label--inline input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline select,label.uq-label--inline textarea,label.uq-label--inline+input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline+select,label.uq-label--inline+textarea{max-width:none;min-width:200px;margin-left:1rem;margin-right:1.5rem;width:auto}label.uq-label--inline input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline select,label.uq-label--inline textarea{margin-top:0;margin-bottom:0}label.uq-label--disabled,label.uq-label--readonly{color:#aca7a3}label.uq-label--disabled{cursor:not-allowed}label.uq-label--error{color:#951126}label.uq-label--success{color:#238029}label input:not([type=checkbox]):not([type=radio]),label select,label textarea,label+input:not([type=checkbox]):not([type=radio]),label+select,label+textarea{margin-top:.5rem}label input[type=radio]+*:not(input):not(select):not(textarea),label input[type=checkbox]+*:not(input):not(select):not(textarea){display:inline-block;font-size:1rem;font-weight:400;line-height:20px;margin-bottom:1rem;margin-left:.5rem;margin-right:1rem;padding-top:.25rem;padding-left:1.5rem;vertical-align:top}label input[type=radio][disabled]+*:not(input):not(select):not(textarea),label input[type=checkbox][disabled]+*:not(input):not(select):not(textarea){color:#aca7a3}label .uq-label__required{color:#951126}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed}input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea{background-color:#fff;max-width:100%;min-width:100%;padding:.75rem 1rem;border:1px solid #e7e3e0;border-radius:2px;font-size:1rem;color:#2b2a29;line-height:1;margin-bottom:1.5rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,select:focus,textarea:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6 inset;outline:none}input:not([type=checkbox]):not([type=radio]):not([type=submit])[disabled],select[disabled],textarea[disabled]{color:#817d7a}input:not([type=checkbox]):not([type=radio]):not([type=submit])[readonly]:focus,select[readonly]:focus,textarea[readonly]:focus{border-color:#e7e3e0;box-shadow:0 0 0 1px #e7e3e0 inset}input:not([type=checkbox]):not([type=radio]):not([type=submit])::placeholder,select::placeholder,textarea::placeholder{color:#817d7a}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error,input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success,select.uq-input--error,select.uq-input--success,textarea.uq-input--error,textarea.uq-input--success{border-radius:2px}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error:focus,input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success:focus,select.uq-input--error:focus,select.uq-input--success:focus,textarea.uq-input--error:focus,textarea.uq-input--success:focus{border-color:#1e72c6;box-shadow:0 2px 0 0 #1e72c6,0 0 0 1px #1e72c6 inset}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error,select.uq-input--error,textarea.uq-input--error{border-color:#951126;box-shadow:0 2px 0 0 #951126}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success,select.uq-input--success,textarea.uq-input--success{border-color:#238029;box-shadow:0 2px 0 0 #238029}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--large,select.uq-input--large,textarea.uq-input--large{padding:1.15625rem 1.5rem;border-radius:.25rem}input:not([type=checkbox]):not([type=radio]):not([type=submit])+.uq-error-message,input:not([type=checkbox]):not([type=radio]):not([type=submit])+.uq-success-message,select+.uq-error-message,select+.uq-success-message,textarea+.uq-error-message,textarea+.uq-success-message{margin-top:-1.5rem;border-radius:0 0 2px 2px}select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%2351247a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .25rem center;padding-right:2.5rem;cursor:pointer;line-height:1.2;width:100%}select:focus{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%231e72c6' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}select[multiple]{height:auto;background-image:none}select[multiple]:focus{background-image:none}select[disabled]{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%23e7e3e0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}textarea{height:10rem}input[type=radio],input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-block;border:1px solid #e7e3e0;cursor:pointer;height:20px;width:20px;vertical-align:top;position:absolute}input[type=radio]:focus,input[type=checkbox]:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6;outline:none}input[type=radio]+label,input[type=checkbox]+label{display:inline-block;font-size:1rem;font-weight:400;line-height:1.2;margin-bottom:1rem;margin-left:.5rem;margin-right:1rem;padding-top:.125rem;padding-left:1.5rem;vertical-align:top}input[type=radio]:checked,input[type=checkbox]:checked{border-color:#1e72c6}input[type=radio]:checked:focus,input[type=checkbox]:checked:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6}input[type=radio].uq-input--error,input[type=checkbox].uq-input--error{border-color:#951126}input[type=radio].uq-input--error:focus,input[type=checkbox].uq-input--error:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6}input[type=radio].uq-input--error:checked,input[type=checkbox].uq-input--error:checked{border-color:#951126}input[type=radio].uq-input--error:checked:focus,input[type=checkbox].uq-input--error:checked:focus{border-color:#1e72c6;box-shadow:0 0 0 1px #1e72c6}input[type=radio][disabled],input[type=checkbox][disabled]{cursor:not-allowed;border-color:#e7e3e0;background-color:#f7f6f5}input[type=radio][disabled]+label,input[type=checkbox][disabled]+label{color:#aca7a3}input[type=radio][disabled]:checked,input[type=checkbox][disabled]:checked{background-color:#dfdad6}input[type=checkbox]{border-radius:4px}input[type=checkbox]::after{content:"";display:block;position:absolute;background-repeat:no-repeat;background-position:center center;top:1px;left:1px;height:16px;width:16px}input[type=checkbox]:checked{background-color:#1e72c6}input[type=checkbox]:checked::after{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 13.3 8.9 18 19 6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");padding:0px}input[type=checkbox].uq-input--error:checked{background-color:#951126}input[type=radio]{border-radius:50%}input[type=radio]:checked{border-width:2px}input[type=radio]:checked::after{border-radius:50%;background-color:#1e72c6;content:"";display:block;position:absolute;top:3px;left:3px;height:10px;width:10px}input[type=radio][disabled]:checked{background-color:#f7f6f5}input[type=radio][disabled]:checked::after{background-color:#dfdad6}input[type=radio].uq-input--error:checked{border-color:#951126}input[type=radio].uq-input--error:checked::after{background-color:#951126}[type=submit]{appearance:none}.uq-error-summary{background-color:#fff;border:1px solid #951126;border-left-width:.25rem;padding:1rem;margin-bottom:1.5rem}.uq-error-summary__title{color:#2b2a29;font-size:1.125rem;font-weight:500;line-height:1.2;margin:0 0 1rem 0}.uq-error-summary_body{color:#2b2a29;font-size:1rem}.uq-error-summary__list{color:#2b2a29;font-size:1rem;margin:0;padding-left:1.5rem}.uq-error-summary__list__item{margin-bottom:.25rem;line-height:1.5}.uq-error-summary__list a{color:#951126;text-decoration:underline;font-weight:400}.uq-error-summary__list a:hover,.uq-error-summary__list a:focus{color:#7e0f21}.uq-error-message,.uq-success-message{color:#fff;display:block;font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;margin-bottom:1.5rem;padding:calc(0.5rem - 1px) 1rem .5rem 3rem;position:relative}.uq-error-message::before,.uq-success-message::before{content:"";display:block;background-position:center;background-repeat:no-repeat;background-size:contain;height:1.25rem;left:1rem;margin-right:.5rem;margin-top:calc(-0.625rem - 1px);position:absolute;top:50%;width:1.25rem}.uq-error-message{background-color:#951126}.uq-error-message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.127 18.545a1.18 1.18 0 0 1-1.055 1.706H4.929a1.18 1.18 0 0 1-1.055-1.706l7.072-14.143a1.179 1.179 0 0 1 2.109 0l7.072 14.143Z' stroke='%23fff' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M12 9v4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3e%3c/path%3e%3ccircle cx='11.9' cy='16.601' r='1.1' fill='%23fff'%3e%3c/circle%3e%3c/svg%3e")}.uq-success-message{background-color:#238029}.uq-success-message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='9.25' stroke='%23fff' stroke-width='1.5'%3e%3c/circle%3e%3cpath d='M7 12.867 9.6 16l6.733-8' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-inline-help{display:block;font-size:.75rem;margin:0 0 1rem}
+form,fieldset,legend,label,input,select,textarea,.uq-error-summary,.uq-error-message,.uq-success-message,.uq-inline-help{box-sizing:border-box;font-family:"Roboto","Helvetica Neue",Helvetica,Arial,sans-serif}fieldset::before,fieldset::after,fieldset *,fieldset *::before,fieldset *::after,legend::before,legend::after,legend *,legend *::before,legend *::after,label::before,label::after,label *,label *::before,label *::after,input::before,input::after,input *,input *::before,input *::after,select::before,select::after,select *,select *::before,select *::after,textarea::before,textarea::after,textarea *,textarea *::before,textarea *::after{box-sizing:border-box}fieldset{border:0;padding:0;margin:0}label,legend{color:#3b383e;display:block;font-size:.875rem;font-weight:500}legend{margin-bottom:1rem;line-height:1.2;padding:0}legend.uq-legend--error{color:#d62929}legend .uq-legend__required{color:#d62929}label{cursor:pointer;line-height:1}label.uq-label--inline{align-items:center;display:inline-flex;font-size:1rem;line-height:1.5;margin-bottom:1.5rem}label.uq-label--inline input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline select,label.uq-label--inline textarea,label.uq-label--inline+input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline+select,label.uq-label--inline+textarea{max-width:none;min-width:200px;margin-left:1rem;margin-right:1.5rem;width:auto}label.uq-label--inline input:not([type=checkbox]):not([type=radio]):not([type=submit]),label.uq-label--inline select,label.uq-label--inline textarea{margin-top:0;margin-bottom:0}label.uq-label--disabled,label.uq-label--readonly{color:#d1d0d2}label.uq-label--disabled{cursor:not-allowed}label.uq-label--error{color:#d62929}label.uq-label--success{color:#4aa74e}label input:not([type=checkbox]):not([type=radio]),label select,label textarea,label+input:not([type=checkbox]):not([type=radio]),label+select,label+textarea{margin-top:.5rem}label input[type=radio]+*:not(input):not(select):not(textarea),label input[type=checkbox]+*:not(input):not(select):not(textarea){display:inline-block;font-size:1rem;font-weight:400;line-height:20px;margin-bottom:1rem;margin-left:.5rem;margin-right:1rem;padding-top:.25rem;padding-left:1.5rem;vertical-align:top}label input[type=radio][disabled]+*:not(input):not(select):not(textarea),label input[type=checkbox][disabled]+*:not(input):not(select):not(textarea){color:#d1d0d2}label .uq-label__required{color:#d62929}input[disabled],select[disabled],textarea[disabled]{cursor:not-allowed}input:not([type=checkbox]):not([type=radio]):not([type=submit]),select,textarea{background-color:#fff;max-width:100%;min-width:100%;padding:.75rem 1rem;border:1px solid #d1d0d2;border-radius:2px;font-size:1rem;color:#3b383e;line-height:1;margin-bottom:1.5rem}input:not([type=checkbox]):not([type=radio]):not([type=submit]):focus,select:focus,textarea:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd inset;outline:none}input:not([type=checkbox]):not([type=radio]):not([type=submit])[disabled],select[disabled],textarea[disabled]{color:#d1d0d2}input:not([type=checkbox]):not([type=radio]):not([type=submit])[readonly]:focus,select[readonly]:focus,textarea[readonly]:focus{border-color:#d1d0d2;box-shadow:0 0 0 1px #d1d0d2 inset}input:not([type=checkbox]):not([type=radio]):not([type=submit])::placeholder,select::placeholder,textarea::placeholder{color:#d1d0d2}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error,input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success,select.uq-input--error,select.uq-input--success,textarea.uq-input--error,textarea.uq-input--success{border-radius:2px}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error:focus,input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success:focus,select.uq-input--error:focus,select.uq-input--success:focus,textarea.uq-input--error:focus,textarea.uq-input--success:focus{border-color:#0d6dcd;box-shadow:0 2px 0 0 #0d6dcd,0 0 0 1px #0d6dcd inset}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--error,select.uq-input--error,textarea.uq-input--error{border-color:#d62929;box-shadow:0 2px 0 0 #d62929}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--success,select.uq-input--success,textarea.uq-input--success{border-color:#4aa74e;box-shadow:0 2px 0 0 #4aa74e}input:not([type=checkbox]):not([type=radio]):not([type=submit]).uq-input--large,select.uq-input--large,textarea.uq-input--large{padding:1.15625rem 1.5rem;border-radius:.25rem}input:not([type=checkbox]):not([type=radio]):not([type=submit])+.uq-error-message,input:not([type=checkbox]):not([type=radio]):not([type=submit])+.uq-success-message,select+.uq-error-message,select+.uq-success-message,textarea+.uq-error-message,textarea+.uq-success-message{margin-top:-1.5rem;border-radius:0 0 2px 2px}select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%2351247a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");background-repeat:no-repeat;background-position:right .25rem center;padding-right:2.5rem;cursor:pointer;line-height:1.2;width:100%}select:focus{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%230d6dcd' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}select[multiple]{height:auto;background-image:none}select[multiple]:focus{background-image:none}select[disabled]{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='m7 10 5 5 5-5' stroke='%23a3a1a4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}textarea{height:10rem}input[type=radio],input[type=checkbox]{appearance:none;-webkit-appearance:none;display:inline-block;border:1px solid #d1d0d2;cursor:pointer;height:20px;width:20px;vertical-align:top;position:absolute}input[type=radio]:focus,input[type=checkbox]:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd;outline:none}input[type=radio]+label,input[type=checkbox]+label{display:inline-block;font-size:1rem;font-weight:400;line-height:1.2;margin-bottom:1rem;margin-left:.5rem;margin-right:1rem;padding-top:.125rem;padding-left:1.5rem;vertical-align:top}input[type=radio]:checked,input[type=checkbox]:checked{border-color:#0d6dcd}input[type=radio]:checked:focus,input[type=checkbox]:checked:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd}input[type=radio].uq-input--error,input[type=checkbox].uq-input--error{border-color:#d62929}input[type=radio].uq-input--error:focus,input[type=checkbox].uq-input--error:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd}input[type=radio].uq-input--error:checked,input[type=checkbox].uq-input--error:checked{border-color:#d62929}input[type=radio].uq-input--error:checked:focus,input[type=checkbox].uq-input--error:checked:focus{border-color:#0d6dcd;box-shadow:0 0 0 1px #0d6dcd}input[type=radio][disabled],input[type=checkbox][disabled]{cursor:not-allowed;border-color:#d1d0d2;background-color:#f3f3f4}input[type=radio][disabled]+label,input[type=checkbox][disabled]+label{color:#d1d0d2}input[type=radio][disabled]:checked,input[type=checkbox][disabled]:checked{background-color:#d1d0d2}input[type=checkbox]{border-radius:4px}input[type=checkbox]::after{content:"";display:block;position:absolute;background-repeat:no-repeat;background-position:center center;top:1px;left:1px;height:16px;width:16px}input[type=checkbox]:checked{background-color:#0d6dcd}input[type=checkbox]:checked::after{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M5 13.3 8.9 18 19 6' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e");padding:0px}input[type=checkbox].uq-input--error:checked{background-color:#d62929}input[type=radio]{border-radius:50%}input[type=radio]:checked{border-width:2px}input[type=radio]:checked::after{border-radius:50%;background-color:#0d6dcd;content:"";display:block;position:absolute;top:3px;left:3px;height:10px;width:10px}input[type=radio][disabled]:checked{background-color:#f3f3f4}input[type=radio][disabled]:checked::after{background-color:#d1d0d2}input[type=radio].uq-input--error:checked{border-color:#d62929}input[type=radio].uq-input--error:checked::after{background-color:#d62929}[type=submit]{appearance:none}.uq-error-summary{background-color:#fff;border:1px solid #d62929;border-left-width:.25rem;padding:1rem;margin-bottom:1.5rem}.uq-error-summary__title{color:#3b383e;font-size:1.125rem;font-weight:500;line-height:1.2;margin:0 0 1rem 0}.uq-error-summary_body{color:#3b383e;font-size:1rem}.uq-error-summary__list{color:#3b383e;font-size:1rem;margin:0;padding-left:1.5rem}.uq-error-summary__list__item{margin-bottom:.25rem;line-height:1.5}.uq-error-summary__list a{color:#d62929;text-decoration:underline;font-weight:400}.uq-error-summary__list a:hover,.uq-error-summary__list a:focus{color:#c32727}.uq-error-message,.uq-success-message{color:#fff;display:block;font-size:1rem;font-style:normal;font-weight:400;line-height:1.5;margin-bottom:1.5rem;padding:calc(0.5rem - 1px) 1rem .5rem 3rem;position:relative}.uq-error-message::before,.uq-success-message::before{content:"";display:block;background-position:center;background-repeat:no-repeat;background-size:contain;height:1.25rem;left:1rem;margin-right:.5rem;margin-top:calc(-0.625rem - 1px);position:absolute;top:50%;width:1.25rem}.uq-error-message{background-color:#d62929}.uq-error-message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M20.127 18.545a1.18 1.18 0 0 1-1.055 1.706H4.929a1.18 1.18 0 0 1-1.055-1.706l7.072-14.143a1.179 1.179 0 0 1 2.109 0l7.072 14.143Z' stroke='%23fff' stroke-width='1.5'%3e%3c/path%3e%3cpath d='M12 9v4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'%3e%3c/path%3e%3ccircle cx='11.9' cy='16.601' r='1.1' fill='%23fff'%3e%3c/circle%3e%3c/svg%3e")}.uq-success-message{background-color:#4aa74e}.uq-success-message::before{background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='12' cy='12' r='9.25' stroke='%23fff' stroke-width='1.5'%3e%3c/circle%3e%3cpath d='M7 12.867 9.6 16l6.733-8' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3e%3c/path%3e%3c/svg%3e")}.uq-inline-help{display:block;font-size:.75rem;margin:0 0 1rem}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uqds/form",
-  "version": "0.0.15-alpha.0",
+  "version": "0.1.0-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": "^1.1.1",
-    "@uqds/icon": "^0.0.15-alpha.0"
+    "@uqds/core": "^1.2.0-alpha.0",
+    "@uqds/icon": "^0.0.15-alpha.2"
   },
   "devDependencies": {
     "@svgdotjs/svg.js": "^3.0.16",
@@ -54,5 +54,5 @@
     "svgdom": "^0.1.8",
     "svgo": "^1.3.2"
   },
-  "gitHead": "55517dc3f2d44fb5d354f4a9344e66dca2835943"
+  "gitHead": "78891f49ec037688e08f67f30a52691404325da7"
 }

package/src/scss/_component.scss

@@ -44,7 +44,7 @@ $use-encapsulation: false !default;
 
   label,
   legend {
-    color: $form-text-color;
+    color: core.$text;
     display: block;
     font-size: $form-label-size;
     font-weight: core.$font-weight-bold;
@@ -56,11 +56,11 @@ $use-encapsulation: false !default;
     padding: 0;
 
     &.uq-legend--error {
-      color: $form-color-error;
+      color: core.$error-500;
     }
 
     .uq-legend__required {
-      color: $form-color-error;
+      color: core.$error-500;
     }
   }
 
@@ -99,7 +99,7 @@ $use-encapsulation: false !default;
 
       &--disabled,
       &--readonly {
-        color: $form-text-disabled-color;
+        color: core.$grey-300;
       }
 
       &--disabled {
@@ -107,11 +107,11 @@ $use-encapsulation: false !default;
       }
 
       &--error {
-        color: $form-color-error;
+        color: core.$error-500;
       }
 
       &--success {
-        color: $form-color-success;
+        color: core.$success-500;
       }
     }
 
@@ -141,13 +141,13 @@ $use-encapsulation: false !default;
 
       &[disabled] {
         + *:not(input):not(select):not(textarea) {
-          color: $form-text-disabled-color;
+          color: core.$grey-300;
         }
       }
     }
 
     .uq-label__required {
-      color: $form-color-error;
+      color: core.$error-500;
     }
   }
 
@@ -162,36 +162,36 @@ $use-encapsulation: false !default;
   input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
   select,
   textarea {
-    background-color: core.$uq-white;
+    background-color: core.$white;
     max-width: 100%;
     min-width: 100%;
     padding: ($form-spacing - core.$space-xs) $form-spacing;
-    border: $form-border-width solid $form-border-color;
+    border: $form-border-width solid core.$grey-300;
     border-radius: $form-border-radius;
     font-size: $form-text-size;
-    color: $form-text-color;
+    color: core.$text;
     line-height: core.$line-height-ui;
     margin-bottom: core.$space-l;
 
     &:focus {
-      border-color: $form-border-color-focus;
-      box-shadow: 0 0 0 1px $form-border-color-focus inset;
+      border-color: core.$link;
+      box-shadow: 0 0 0 1px core.$link inset;
       outline: none;
     }
 
     &[disabled] {
-      color: $form-placeholder-color;
+      color: core.$grey-300;
     }
 
     &[readonly] {
       &:focus {
-        border-color: $form-border-color;
-        box-shadow: 0 0 0 1px $form-border-color inset;
+        border-color: core.$grey-300;
+        box-shadow: 0 0 0 1px core.$grey-300 inset;
       }
     }
 
     &::placeholder {
-      color: $form-placeholder-color;
+      color: core.$grey-300;
     }
 
     &.uq-input--error,
@@ -199,20 +199,19 @@ $use-encapsulation: false !default;
       border-radius: $form-border-radius;
 
       &:focus {
-        border-color: $form-border-color-focus;
-        box-shadow: 0 2px 0 0 $form-border-color-focus,
-          0 0 0 1px $form-border-color-focus inset;
+        border-color: core.$link;
+        box-shadow: 0 2px 0 0 core.$link, 0 0 0 1px core.$link inset;
       }
     }
 
     &.uq-input--error {
-      border-color: $form-color-error;
-      box-shadow: 0 2px 0 0 $form-color-error;
+      border-color: core.$error-500;
+      box-shadow: 0 2px 0 0 core.$error-500;
     }
 
     &.uq-input--success {
-      border-color: $form-color-success;
-      box-shadow: 0 2px 0 0 $form-color-success;
+      border-color: core.$success-500;
+      box-shadow: 0 2px 0 0 core.$success-500;
     }
 
     &.uq-input--large {
@@ -232,7 +231,7 @@ $use-encapsulation: false !default;
     -webkit-appearance: none;
     background-image: url(icon.get-icon(
       "standard--chevron-down-sml",
-      $form-select-icon
+      core.$purple-500
     ));
     background-repeat: no-repeat;
     background-position: right core.$space-xs center;
@@ -244,7 +243,7 @@ $use-encapsulation: false !default;
     &:focus {
       background-image: url(icon.get-icon(
         "standard--chevron-down-sml",
-        $form-focus-color
+        core.$link
       ));
     }
 
@@ -260,7 +259,7 @@ $use-encapsulation: false !default;
     &[disabled] {
       background-image: url(icon.get-icon(
         "standard--chevron-down-sml",
-        $form-select-icon-disabled
+        core.$grey-500
       ));
     }
   }
@@ -274,7 +273,7 @@ $use-encapsulation: false !default;
     appearance: none;
     -webkit-appearance: none;
     display: inline-block;
-    border: $form-checkbox-border-width solid $form-border-color;
+    border: $form-checkbox-border-width solid core.$grey-300;
     cursor: pointer;
     height: $form-checkbox-size;
     width: $form-checkbox-size;
@@ -282,8 +281,8 @@ $use-encapsulation: false !default;
     position: absolute;
 
     &:focus {
-      border-color: $form-focus-color;
-      box-shadow: 0 0 0 1px $form-focus-color;
+      border-color: core.$link;
+      box-shadow: 0 0 0 1px core.$link;
       outline: none;
     }
 
@@ -304,40 +303,40 @@ $use-encapsulation: false !default;
       border-color: core.$link;
 
       &:focus {
-        border-color: $form-focus-color;
-        box-shadow: 0 0 0 1px $form-focus-color;
+        border-color: core.$link;
+        box-shadow: 0 0 0 1px core.$link;
       }
     }
 
     &.uq-input--error {
-      border-color: $form-color-error;
+      border-color: core.$error-500;
 
       &:focus {
-        border-color: $form-focus-color;
-        box-shadow: 0 0 0 1px $form-focus-color;
+        border-color: core.$link;
+        box-shadow: 0 0 0 1px core.$link;
       }
 
       &:checked {
-        border-color: $form-color-error;
+        border-color: core.$error-500;
 
         &:focus {
-          border-color: $form-focus-color;
-          box-shadow: 0 0 0 1px $form-focus-color;
+          border-color: core.$link;
+          box-shadow: 0 0 0 1px core.$link;
         }
       }
     }
 
     &[disabled] {
       cursor: not-allowed;
-      border-color: $form-border-color;
-      background-color: core.$uq-neutral-light80;
+      border-color: core.$grey-300;
+      background-color: core.$grey-50;
 
       + label {
-        color: $form-text-disabled-color;
+        color: core.$grey-300;
       }
 
       &:checked {
-        background-color: core.$uq-neutral-light20;
+        background-color: core.$grey-300;
       }
     }
   }
@@ -361,17 +360,14 @@ $use-encapsulation: false !default;
       background-color: core.$link;
 
       &::after {
-        background-image: url(icon.get-icon(
-          "standard--check",
-          $form-checkbox-check-color
-        ));
+        background-image: url(icon.get-icon("standard--check", core.$white));
         padding: 0px;
       }
     }
 
     &.uq-input--error {
       &:checked {
-        background-color: $form-color-error;
+        background-color: core.$error-500;
       }
     }
   }
@@ -397,19 +393,19 @@ $use-encapsulation: false !default;
 
     &[disabled] {
       &:checked {
-        background-color: core.$uq-neutral-light80;
+        background-color: core.$grey-50;
         &::after {
-          background-color: core.$uq-neutral-light20;
+          background-color: core.$grey-300;
         }
       }
     }
 
     &.uq-input--error {
       &:checked {
-        border-color: $form-color-error;
+        border-color: core.$error-500;
 
         &::after {
-          background-color: $form-color-error;
+          background-color: core.$error-500;
         }
       }
     }
@@ -420,8 +416,8 @@ $use-encapsulation: false !default;
   }
 
   .uq-error-summary {
-    background-color: lighten(core.$alert-light, 10%);
-    border: 1px solid core.$alert;
+    background-color: white;
+    border: 1px solid core.$error-500;
     border-left-width: core.$space-xs;
     padding: core.$space-m;
     margin-bottom: core.$space-l;
@@ -451,12 +447,12 @@ $use-encapsulation: false !default;
       }
 
       a {
-        color: core.$alert;
+        color: core.$error-500;
         text-decoration: underline;
         font-weight: core.$font-weight-normal;
         &:hover,
         &:focus {
-          color: darken(core.$alert, 5%);
+          color: core.$error-600;
         }
       }
     }
@@ -464,7 +460,7 @@ $use-encapsulation: false !default;
 
   .uq-error-message,
   .uq-success-message {
-    color: core.$uq-white;
+    color: core.$white;
     display: block;
     font-size: core.$font-size-m;
     font-style: normal;
@@ -492,23 +488,23 @@ $use-encapsulation: false !default;
   }
 
   .uq-error-message {
-    background-color: $form-color-error;
+    background-color: core.$error-500;
 
     &::before {
       background-image: url(icon.get-icon(
         "standard--exclamation-triangle",
-        core.$uq-white
+        core.$white
       ));
     }
   }
 
   .uq-success-message {
-    background-color: $form-color-success;
+    background-color: core.$success-500;
 
     &::before {
       background-image: url(icon.get-icon(
         "standard--check-circle",
-        core.$uq-white
+        core.$white
       ));
     }
   }

package/src/scss/_global.scss

@@ -1,28 +1,15 @@
 @use "@uqds/core/src/scss/global" as core;
 
-$form-border-color-focus: core.$link;
-$form-border-color: core.$uq-neutral-light40;
 $form-border-radius: 2px;
 $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-xxl;
-$form-focus-color: core.$link;
 $form-label-size: core.$font-size-s;
-$form-placeholder-color: core.$uq-neutral-dark40;
 $form-spacing: core.$space-m;
-$form-text-color: core.$text;
-$form-text-disabled-color: core.$uq-neutral-dark20;
 $form-text-size: core.$font-size-m;
 
-// Select
-$form-select-icon: core.$uq-purple;
-$form-select-icon-disabled: $form-border-color;
-
 // Checkbox/Radio buttons
 $form-checkbox-border-radius: 4px;
 $form-checkbox-border-width: 1px;
-$form-checkbox-check-color: core.$uq-white;
 $form-checkbox-size: 20px;
 $form-checkbox-check-size: 16px;