Merge pull request cockroachdb#16550 from mrtracy/mtracy/ui-palette-c…

…leanse ui: Palette Cleansing
renatolabs · Jun 19, 2017 · f7b7398 · f7b7398
2 parents 82c3153 + 9c4fda6
commit f7b7398
Show file tree

Hide file tree

Showing 19 changed files with 126 additions and 524 deletions.
diff --git a/pkg/ui/embedded.go b/pkg/ui/embedded.go
diff --git a/pkg/ui/src/views/cluster/components/visualization/visualizations.styl b/pkg/ui/src/views/cluster/components/visualization/visualizations.styl
@@ -25,7 +25,7 @@ $viz-sides = 62px
 .visualization
   position relative
   background-color white
-  color $dark-blue
+  color $headings-color
   border-radius 5px
   border 1px solid rgba(0, 0, 0, .1)
   // prevents borders from doubling up
@@ -48,11 +48,11 @@ $viz-sides = 62px
   &__title
     font-size 14px
     font-family Lato-Bold
-    color $light-blue
+    color $body-color
     display inline
 
   &__subtitle
-    color $light-gray
+    color $tooltip-color
     margin-left 5px
     font-size 12px
     font-family Lato-Regular
@@ -72,17 +72,17 @@ $viz-sides = 62px
     width 12px
     height 12px
     border-radius 50%
-    border 1px solid $light-gray
+    border 1px solid $tooltip-color
     font-size 10px
-    color $light-gray
+    color $tooltip-color
     line-height 10px
 
   .hover-tooltip--hovered &__info-icon
-    border-color $light-blue
-    color $light-blue
+    border-color $body-color
+    color $body-color
 
   .icon-warning
-    color $secondary-gold
+    color $warning-color
 
 .linegraph
   height 100%
@@ -94,4 +94,4 @@ $viz-sides = 62px
     opacity .2
 
 .linked-guideline__line
-  stroke $glow-blue
+  stroke $link-color
diff --git a/pkg/ui/src/views/cluster/containers/events/events.styl b/pkg/ui/src/views/cluster/containers/events/events.styl
@@ -7,7 +7,7 @@
     border-collapse collapse
     tr
       height 39px
-      border-bottom 1px solid $lighter-gray
+      border-bottom 1px solid $table-border-color
       &:last-child
         border 0
     td
@@ -21,7 +21,7 @@
 
 .events__message
   font-size 14
-  color $secondary-gray-11
+  color $body-color
   text-overflow ellipsis
   display block
   white-space nowrap
@@ -30,21 +30,21 @@
 
 .events__timestamp
   font-size 12
-  color $light-gray
+  color $tooltip-color
   margin-left 20px
   text-align right
 
 .events__more-link
   text-align center
-  color $secondary-blue
+  color $link-color
   font-family Lato-Bold
   text-transform uppercase
   font-size 12px
   letter-spacing 2px
   cursor pointer
 
   a
-    color $secondary-blue
+    color $link-color
     text-decoration none
 
 .events-table .sort-table__cell

diff --git a/pkg/ui/src/views/cluster/containers/timescale/timescale.styl b/pkg/ui/src/views/cluster/containers/timescale/timescale.styl
@@ -2,8 +2,8 @@
 
 .time-range
   margin-left 15px
-  color $lighter-blue
+  color $button-border-color
   font-size 12px
   font-family Lato-Regular
   &__time, &__date
-    color $dark-gray-blue
+    color $body-color
diff --git a/pkg/ui/src/views/databases/containers/tableDetails/sqlhighlight.styl b/pkg/ui/src/views/databases/containers/tableDetails/sqlhighlight.styl
@@ -2,19 +2,18 @@
 
 .sql-highlight
   font-family Inconsolata-Regular
-  background-color $secondary-gray-3
   padding 20px
   display inline-block
   width 100%
 
 .sql-highlight.hljs
-    background-color $main-dark-gray
-    color $secondary-gray-12
+    background-color $headings-color
+    color white
     overflow-x auto
 
     .hljs-string
-        color $syntax-orange
+        color $syntax-string-color
 
     .hljs-keyword
     .hljs-literal
-        color $syntax-blue
+        color $syntax-keyword-color
diff --git a/pkg/ui/src/views/shared/components/alertBox/alertbox.styl b/pkg/ui/src/views/shared/components/alertBox/alertbox.styl
@@ -7,7 +7,7 @@
   float left
   margin 0 6px 10px
   padding 20px
-  border 1px solid $dark-blue
+  border 1px solid $headings-color
   border-radius 5px
   font-family Lato-Regular
 
@@ -31,16 +31,16 @@
     cursor pointer
 
   &--notification
-    color $light-blue
-    border-color $alert-blue-dark
-    background-color $alert-blue-light
+    color $body-color
+    border-color $notification-info-border-color
+    background-color $notification-info-fill-color
 
   &--warning
-    color $light-blue
-    border-color $alert-yellow-dark
-    background-color $alert-yellow-light
+    color $body-color
+    border-color $notification-warning-border-color
+    background-color $notification-warning-fill-color
 
   &--critical
-    color $light-blue
-    border-color $alert-red-dark
-    background-color $alert-red-light
+    color $body-color
+    border-color $notification-alert-border-color
+    background-color $notification-alert-fill-color
diff --git a/pkg/ui/src/views/shared/components/dropdown/dropdown.styl b/pkg/ui/src/views/shared/components/dropdown/dropdown.styl
@@ -1,21 +1,23 @@
 @require nib
 @require "~styl/base/palette.styl"
 
+$dropdown-hover-color = darken($background-color, 2.5%)
+
 .dropdown
   text-transform uppercase
   letter-spacing 2px
   line-height 17px
   padding 1rem 2rem
   vertical-align middle
-  border 1px solid $gray-blue
+  border 1px solid $button-border-color
   border-radius 4px
   display inline-flex
   white-space nowrap
   padding-right 10px
-  color $light-blue
+  color $body-color
 
   &:hover
-    background-color $hover-gray
+    background-color $dropdown-hover-color
 
   &__title
     vertical-align middle
@@ -26,32 +28,32 @@
     vertical-align middle
 
     &:hover
-      background-color $hover-gray
+      background-color $dropdown-hover-color
 
   &__side-arrow
     font-family Lato-Bold
     display none
-    color $secondary-blue-3
+    color $link-color
     cursor pointer
 
     &:first-child
-      border-right 1px solid $gray-blue
+      border-right 1px solid $button-border-color
       padding 1rem 20px
       border-top-left-radius 4px
       border-bottom-left-radius 4px
 
     &:last-child
-      border-left 1px solid $gray-blue
+      border-left 1px solid $button-border-color
       padding 1rem 20px
       border-top-right-radius 4px
       border-bottom-right-radius 4px
 
     &[disabled]
-      background-color $lighter-gray
+      background-color $table-border-color
       cursor auto
 
       polyline
-        stroke $light-gray
+        stroke $button-border-color
 
   &--side-arrows
     padding 0
@@ -63,6 +65,6 @@
       display inline
 
       &:hover
-        background-color $hover-gray
+        background-color $dropdown-hover-color
 
 // NOTE: react-select styles can be found in styl/shame.styl
diff --git a/pkg/ui/src/views/shared/components/sortabletable/sortabletable.styl b/pkg/ui/src/views/shared/components/sortabletable/sortabletable.styl
@@ -8,7 +8,7 @@
       // Display the sort direction arrow in header cells.
       .sort-table__cell
         padding 18px 20px
-        color $lighter-blue
+        color $tooltip-color
 
         &--sortable:after
           display inline-block
@@ -20,13 +20,13 @@
           content "▼"
 
         &--descending
-          color $light-blue
+          color $body-color
 
         &--ascending
-          color $light-blue
+          color $body-color
           &:after
             content "▲"
 
   &__unbounded-column
-    whitespace normal
+    white-space normal
     word-break break-all
diff --git a/pkg/ui/src/views/shared/components/summaryBar/summarybar.styl b/pkg/ui/src/views/shared/components/summaryBar/summarybar.styl
@@ -20,16 +20,16 @@
     font-weight 500
     text-transform uppercase
     letter-spacing 2px
-    color $light-gray
+    color $tooltip-color
 
   &__value
     font-weight 200
     font-size 30px
-    color $light-blue
+    color $body-color
 
 .summary-label
   font-family Lato-Bold
-  color $light-blue
+  color $body-color
   padding-bottom 12px
   text-align center
 
@@ -42,61 +42,61 @@
     clearfix()
 
   &__title
-    color $light-blue
+    color $body-color
     float left
 
     // A link is present on at least one summary stat.
     a
       text-decoration none
-      color $glow-blue
+      color $link-color
       padding-left 6px
 
   &__value
     float right
-    color $light-blue
+    color $body-color
     font-family Lato-Bold
 
   &__tooltip
     display block
     clear both
     font-size 12px
-    color $light-gray
+    color $tooltip-color
 
   & + &
     border-top 1px solid rgb(242, 242, 242)
 
   &--number &__value
-    color $light-green
+    color $healthy-color
 
   &--dead &__value
-    color $secondary-red
+    color $alert-color
     text-transform capitalize
 
   &--suspect &__value
-    color $secondary-gold
+    color $warning-color
     text-transform capitalize
 
   &--healthy &__value
-    color $main-green
+    color $healthy-color
     text-transform capitalize
 
   &--link &__value
     a
       text-decoration none
       font-family Lato-Regular
-      color $glow-blue
+      color $link-color
 
 .summary-stat-breakdown
   padding 2px 0
 
   &--dead
-    color $secondary-red
+    color $alert-color
 
   &--suspect
-    color $secondary-gold
+    color $warning-color
 
   &--healthy
-    color $main-green
+    color $healthy-color
 
   &__body
     clearfix()