diff --git a/dist/framework-with-theme.css b/dist/framework-with-theme.css
index 4d0326b30f..fd8f9d3ab6 100644
--- a/dist/framework-with-theme.css
+++ b/dist/framework-with-theme.css
@@ -154,10 +154,36 @@ a.list-item:hover, a.list-item:focus {
border-top-width: 1px; }
.bar.bar-default {
background-color: white;
- border-color: #dddddd; }
+ border-color: #dddddd;
+ color: #333333; }
.bar.bar-secondary {
background-color: whitesmoke;
- border-color: #cccccc; }
+ border-color: #cccccc;
+ color: #333333; }
+ .bar.bar-primary {
+ background-color: #6999e9;
+ border-color: #5981c5;
+ color: white; }
+ .bar.bar-info {
+ background-color: #60d2e6;
+ border-color: #51b3c4;
+ color: white; }
+ .bar.bar-success {
+ background-color: #89c163;
+ border-color: #71a052;
+ color: white; }
+ .bar.bar-warning {
+ background-color: #f0b840;
+ border-color: #cf9a29;
+ color: white; }
+ .bar.bar-danger {
+ background-color: #de5645;
+ border-color: #bc4435;
+ color: white; }
+ .bar.bar-dark {
+ background-color: #444444;
+ border-color: #111111;
+ color: white; }
.button {
color: #222222;
diff --git a/example/bar.html b/example/bar.html
new file mode 100644
index 0000000000..0eea5918ec
--- /dev/null
+++ b/example/bar.html
@@ -0,0 +1,52 @@
+
+
+
+ Example
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/scss/framework/theme/default/_bar.scss b/scss/framework/theme/default/_bar.scss
index adb7e6e03a..00a63efc7f 100644
--- a/scss/framework/theme/default/_bar.scss
+++ b/scss/framework/theme/default/_bar.scss
@@ -15,10 +15,42 @@
&.bar-default {
background-color: $barDefaultBackground;
border-color: $barDefaultBorderColor;
+ color: $darkColor;
}
&.bar-secondary {
background-color: $barSecondaryBackground;
border-color: $barSecondaryBorderColor;
+ color: $darkColor;
+ }
+ &.bar-primary {
+ background-color: $barPrimaryBackground;
+ border-color: $barPrimaryBorderColor;
+ color: $lightColor;
+ }
+ &.bar-info {
+ background-color: $barInfoBackground;
+ border-color: $barInfoBorderColor;
+ color: $lightColor;
+ }
+ &.bar-success {
+ background-color: $barSuccessBackground;
+ border-color: $barSuccessBorderColor;
+ color: $lightColor;
+ }
+ &.bar-warning {
+ background-color: $barWarningBackground;
+ border-color: $barWarningBorderColor;
+ color: $lightColor;
+ }
+ &.bar-danger {
+ background-color: $barDangerBackground;
+ border-color: $barDangerBorderColor;
+ color: $lightColor;
+ }
+ &.bar-dark {
+ background-color: $barDarkBackground;
+ border-color: $barDarkBorderColor;
+ color: $lightColor;
}
/*
diff --git a/scss/framework/theme/default/_variables.scss b/scss/framework/theme/default/_variables.scss
index 218944849e..b95b4acf86 100644
--- a/scss/framework/theme/default/_variables.scss
+++ b/scss/framework/theme/default/_variables.scss
@@ -1,3 +1,7 @@
+// Typography
+$lightColor: #fff;
+$darkColor: #333;
+
//
// Buttons
$buttonColor: #222;
@@ -24,6 +28,23 @@ $barDefaultBorderColor: #ddd;
$barSecondaryBackground: #f5f5f5;
$barSecondaryBorderColor: #ccc;
+$barPrimaryBackground: #6999e9;
+$barPrimaryBorderColor: #5981c5;
+
+$barInfoBackground: #60d2e6;
+$barInfoBorderColor: #51b3c4;
+
+$barSuccessBackground: #89c163;
+$barSuccessBorderColor: #71a052;
+
+$barWarningBackground: #f0b840;
+$barWarningBorderColor: #cf9a29;
+
+$barDangerBackground: #de5645;
+$barDangerBorderColor: #bc4435;
+
+$barDarkBackground: #444;
+$barDarkBorderColor: #111;
//
// Lists
$listDividerBackground: #f5f5f5;