From 955362f2a24717a752f2e967990954b59aa8a28a Mon Sep 17 00:00:00 2001
From: Susmitha Girumala <susmitha@hashicorp.com>
Date: Mon, 4 May 2020 22:27:56 -0400
Subject: [PATCH] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20Use=20predefined=20t?=
 =?UTF-8?q?ypography=20and=20sizing=20sass=20functions?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../styles/rose/components/_checkbox.scss     | 26 +++++++++++--------
 addons/rose/app/templates/index.hbs           |  1 +
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/addons/rose/addon/styles/rose/components/_checkbox.scss b/addons/rose/addon/styles/rose/components/_checkbox.scss
index 34c4c36c7..cdc844774 100644
--- a/addons/rose/addon/styles/rose/components/_checkbox.scss
+++ b/addons/rose/addon/styles/rose/components/_checkbox.scss
@@ -1,6 +1,12 @@
+@use '../variables/sizing';
 @use '../utilities/type' as typography;
 
+$checkbox-check-height: sizing.rems(xs) - sizing.rems(xxxs);
+$checkbox-check-size: sizing.rems(xxxxs) + (sizing.rems(xxxs) / 3);
+$checkbox-check-left-position: sizing.rems(xxs) - (sizing.rems(xxs) / 3);
+
 .rose-checkbox {
+  @include typography.type(m);
   color: var(--stark);
   background-color: var(--subtle);
 
@@ -11,23 +17,22 @@
     position: relative;
     padding: 0;
     margin: 0;
-    border: 1px solid var(--ui-border);
-    border-radius: 2px;
-    width: 16px;
-    height: 16px;
-    vertical-align: -1px;
+    border: sizing.rems(xxxxs) solid var(--ui-border);
+    border-radius: sizing.rems(xxxs);
+    width: 14px;
+    height: 14px;
     background-color: var(--subtle);
 
     &::before {
       content: '';
       position: absolute;
-      left: 4px;
-      top: 1px;
-      width: 3px;
-      height: 8px;
+      left: $checkbox-check-left-position;
+      width: sizing.rems(xxxs);
+      height: $checkbox-check-height;
       border: solid;
-      border-width: 0 2px 2px 0;
+      border-width: 0 $checkbox-check-size $checkbox-check-size 0;
       border-color: var(--info);
+      border-radius: sizing.rems(xxxxs);
       -webkit-transform: rotate(45deg);
       transform: rotate(45deg);
       visibility: hidden;
@@ -66,7 +71,6 @@
       border-color: var(--failure);
 
       &:focus {
-        outline: none;
         border-color: var(--info);
       }
 
diff --git a/addons/rose/app/templates/index.hbs b/addons/rose/app/templates/index.hbs
index 75133ab19..4e4192bca 100644
--- a/addons/rose/app/templates/index.hbs
+++ b/addons/rose/app/templates/index.hbs
@@ -9,6 +9,7 @@
 <Rose::Button @style="secondary" @disabled={{true}}>Secondary</Rose::Button>
 <br>
 
+<h2>Form</h2>
 <Rose::Form::Input
   @label="Label"
   @value="Read only"