fix(watson): add more theme variables (#222)

carbon-design-system · Jul 13, 2017 · 4ed1835 · 4ed1835
1 parent 631f38e
commit 4ed1835
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 12 deletions.
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
@@ -32,8 +32,8 @@
     @include reset;
     position: relative;
     display: flex;
-    justify-content: center;
-    text-align: center;
+    justify-content: $card-flex-align;
+    text-align: $card-text-align;
     padding-left: 1rem;
     padding-top: 1rem;
     padding-right: 1rem;
@@ -71,7 +71,7 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    align-items: center;
+    align-items: $card-flex-align;
     padding-top: 1rem;
   }
 

diff --git a/src/components/code-snippet/_code-snippet.scss b/src/components/code-snippet/_code-snippet.scss
@@ -8,7 +8,7 @@
 @include exports('snippet') {
   .bx--snippet--code {
     @include bx--snippet;
-    background-color: $field-01;
+    background-color: $snippet-background-color;
     padding: 1rem 2.5rem 1rem 1rem;
   }
 

diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
@@ -100,7 +100,7 @@
   .bx--modal-footer {
     margin-top: auto;
     text-align: right;
-    background-color: $ui-03;
+    background-color: $modal-footer-background-color;
     margin-left: rem(-24px);
     margin-right: rem(-24px);
     padding: rem(24px) rem(24px);

diff --git a/src/components/structured-list/_structured-list.scss b/src/components/structured-list/_structured-list.scss
@@ -89,7 +89,7 @@
     height: rem(40px);
     letter-spacing: 1px;
     text-align: left;
-    text-transform: uppercase;
+    text-transform: $structured-list-text-transform;
     vertical-align: middle;
   }
 

diff --git a/src/components/structured-list/structured-list--selection.html b/src/components/structured-list/structured-list--selection.html
@@ -2,9 +2,9 @@
   <div class="bx--structured-list-thead">
     <div class="bx--structured-list-row bx--structured-list-row--header-row">
       <div class="bx--structured-list-th"></div>
-      <div class="bx--structured-list-th">service</div>
-      <div class="bx--structured-list-th">type</div>
-      <div class="bx--structured-list-th">description</div>
+      <div class="bx--structured-list-th">Service</div>
+      <div class="bx--structured-list-th">Type</div>
+      <div class="bx--structured-list-th">Description</div>
     </div>
   </div>
   <div class="bx--structured-list-tbody">

diff --git a/src/components/structured-list/structured-list.html b/src/components/structured-list/structured-list.html
@@ -1,9 +1,9 @@
 <section class="bx--structured-list">
   <div class="bx--structured-list-thead">
     <div class="bx--structured-list-row bx--structured-list-row--header-row">
-      <div class="bx--structured-list-th">service</div>
-      <div class="bx--structured-list-th">type</div>
-      <div class="bx--structured-list-th">description</div>
+      <div class="bx--structured-list-th">Service</div>
+      <div class="bx--structured-list-th">Type</div>
+      <div class="bx--structured-list-th">Description</div>
     </div>
   </div>
   <div class="bx--structured-list-tbody">

diff --git a/src/globals/scss/_vars.scss b/src/globals/scss/_vars.scss
@@ -51,9 +51,16 @@ $accordion-arrow-margin: 0 0 0 .25rem !default;
 $accordion-title-margin: 0 0 0 1rem !default;
 $accordion-content-padding: 0 1rem 0 1.75rem !default;
 
+// Card
+$card-text-align: center !default;
+$card-flex-align: center !default;
+
 // Checkbox
 $checkbox-border-width: 2px !default;
 
+// Code Snippet
+$snippet-background-color: $field-01 !default;
+
 // Content Switcher
 $content-switcher-border-radius: 8px !default;
 $content-switcher-option-border: 1px solid $brand-01 !default;
@@ -63,9 +70,11 @@ $data-table-heading-transform: uppercase !default;
 
 // Modal
 $modal-border-top: $brand-01 4px solid !default;
+$modal-footer-background-color: $ui-04 !default;
 
 // Radio Button
 $radio-border-width: 2px !default;
 
 // Structured Theme Variables
 $structured-list-padding: 2rem !default;
+$structured-list-text-transform: uppercase !default;