@internetstiftelsen/styleguide 2.21.28 → 2.21.31-beta.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@internetstiftelsen/styleguide",
-	"version": "2.21.28",
+	"version": "2.21.31-beta.0.1",
 	"main": "dist/components.js",
 	"ports": {
 		"fractal": "3000"

package/src/atoms/button/_button.scss

@@ -246,6 +246,25 @@
 		}
 	}
 
+	@include m(sandstone) {
+		color: $color-sandstone;
+
+		&:hover,
+		&:focus {
+			color: darken($color-sandstone, 12%);
+			text-shadow: none;
+		}
+
+		@include e(text) {
+			color: $color-snow;
+			text-shadow: 0 0 rhythm(2) $color-sandstone-dark;
+		}
+
+		@include e(icon) {
+			fill: $color-cyberspace;
+		}
+	}
+
 	@include m(ruby) {
 		color: $color-ruby;
 
@@ -299,6 +318,25 @@
 		}
 	}
 
+	@include m(jade) {
+		color: $color-jade;
+
+		&:hover,
+		&:focus {
+			color: darken($color-jade, 10%);
+			text-shadow: none;
+		}
+
+		@include e(text) {
+			color: $color-snow;
+			text-shadow: 0 0 rhythm(2) $color-jade-dark;
+		}
+
+		@include e(icon) {
+			fill: $color-cyberspace;
+		}
+	}
+
 	@include m(jade-light) {
 		box-shadow: 0 0 0 1px inset $color-jade;
 		color: $color-jade-light;

package/src/atoms/button/button.config.js

@@ -33,6 +33,13 @@ module.exports = {
 				text: 'Ruby dark secondary button'
 			}
 		},
+		{
+			name: 'Jade',
+			context: {
+				modifiers: ['jade'],
+				text: 'Jade button'
+			}
+		},
 		{
 			name: 'Jade light',
 			context: {
@@ -82,6 +89,13 @@ module.exports = {
 				text: 'Cyberspace button'
 			}
 		},
+		{
+			name: 'Sandstone',
+			context: {
+				modifiers: ['sandstone'],
+				text: 'Sandstone button'
+			}
+		},
 		{
 			name: 'Transparent',
 			context: {