Add form label vars

imperavi · Nov 29, 2020 · d581c8c · d581c8c
1 parent c98dafd
commit d581c8c
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 1 deletion.
diff --git a/example-project/css/main.css b/example-project/css/main.css
@@ -30,6 +30,7 @@
   --c-pre-background: #F5F5F6;
   --c-pre-text: #262F3F;
   --c-table-cell-border: rgba(217, 219, 221, 0.5);
+  --c-form-label-text: #262F3F;
   --c-inline-var-text: rgba(0, 11, 29, 0.85);
   --c-inline-kbd-border: rgba(0, 11, 29, 0.15);
   --c-inline-kbd-text: rgba(0, 11, 29, 0.85);
@@ -526,6 +527,8 @@ sup {
 label {
   display: block;
   font-size: 16px;
+  font-weight: normal;
+  color: var(--c-form-label-text);
   margin-bottom: 0.15em; }
   label.checkbox,
   label .hint,

diff --git a/example-project/css/main.min.css b/example-project/css/main.min.css
diff --git a/example-project/scss/_vars.scss b/example-project/scss/_vars.scss
@@ -201,6 +201,11 @@ $colors: (
             border: rgba(palette(neutral, light), .5)
         )
     ),
+    form: (
+        label: (
+            text: palette(neutral, darker)
+        )
+    ),
     inline: (
         var: (
             text: rgba(palette(black), .85)
@@ -511,6 +516,13 @@ $borders: (
     1: 1px
 );
 
+// =Form
+$form: (
+    label: (
+        font-weight: normal
+    )
+);
+
 // =Radius
 $radius: (
     small: 2px,

diff --git a/superkube/_vars-example.scss b/superkube/_vars-example.scss
@@ -153,6 +153,11 @@ $colors: (
             border: rgba(palette(neutral, light), .5)
         )
     ),
+    form: (
+        label: (
+            text: palette(neutral, darker)
+        )
+    ),
     inline: (
         var: (
             text: rgba(palette(black), .85)
@@ -277,6 +282,13 @@ $colors-dark: ();
 // =Border
 $borders: ();
 
+// =Form
+$form: (
+    label: (
+        font-weight: normal
+    )
+);
+
 // =Radius
 $radius: (
     small: 2px,

diff --git a/superkube/base/_elements.scss b/superkube/base/_elements.scss
@@ -266,6 +266,8 @@ sup {
 label {
     display: block;
     font-size: type-size(form, label);
+    font-weight: map-deep-get($form, label, font-weight);
+    color: color(form, label, text);
     margin-bottom: 0.15em;
 
     &.checkbox,