dibk-design 0.4.45 → 0.4.48

package/dist/components/Select.md

@@ -1,28 +1,28 @@
-Select example:
-
-```js
-<Select id="select1" onChange={()=>{console.log('onchange')}} options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select2" onChange={()=>{console.log('onchange')}} label="Select with label" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select3" onChange={()=>{console.log('onchange')}} label="Select with label and selected value" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select4" onChange={()=>{console.log('onchange')}} label="Select with label and defaultValue" defaultValue="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select5" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, errors and error message" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} hasErrors={true} errorMessage="Wrong value selected" />
-<Select id="select6" onChange={()=>{console.log('onchange')}} label={['Select with ', <a key="labelLink" href="#">link</a>, ' in label']} value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select7" onChange={()=>{console.log('onchange')}} label="Select with label and placeholder" placeholder="Select from list" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select8" onChange={()=>{console.log('onchange')}} label="Select with label, placeholder and placeholderValue" placeholder="Select from list" placeholderValue="notSelected" value="notSelected" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select9" onChange={()=>{console.log('onchange')}} label="Select with label, selected value and contentOnly set to true" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} />
-<Select id="select10" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, contentOnly set to true and keyAsContent set to true" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} keyAsContent={true} />
-<Select id="select11" onChange={()=>{console.log('onchange')}} label="Select with label, selected value is string, contentOnly set to true and keyAsContent set to true" value="option 2" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} keyAsContent={true} />
-<Select id="select12" onChange={()=>{console.log('onchange')}} label="Select with label, contentOnly set to true, no value and defaultContent" contentOnly={true} defaultContent="No value selected" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
-<Select id="select2" onChange={()=>{console.log('onchange')}} label="Select with custom width" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} width="250px" />
-```
-
-Themed select example:
-
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-    <Select id="themedSelect3" onChange={()=>{console.log('onchange')}} label="Select with label and selected value" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} theme={customTheme} />
-    <Select id="themedSelect4" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, errors and error message" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} hasErrors={true} errorMessage="Wrong value selected" theme={customTheme} />
-    <Select id="themedSelect5" onChange={()=>{console.log('onchange')}} label={['Select with ', <a key="labelLink" href="#">link</a>, ' in label']} value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} theme={customTheme} />
-</React.Fragment>
-```
+Select example:
+
+```js
+<Select id="select1" onChange={()=>{console.log('onchange')}} options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select2" onChange={()=>{console.log('onchange')}} label="Select with label" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select3" onChange={()=>{console.log('onchange')}} label="Select with label and selected value" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select4" onChange={()=>{console.log('onchange')}} label="Select with label and defaultValue" defaultValue="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select5" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, errors and error message" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} hasErrors={true} errorMessage="Wrong value selected" />
+<Select id="select6" onChange={()=>{console.log('onchange')}} label={['Select with ', <a key="labelLink" href="#">link</a>, ' in label']} value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select7" onChange={()=>{console.log('onchange')}} label="Select with label and placeholder" placeholder="Select from list" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select8" onChange={()=>{console.log('onchange')}} label="Select with label, placeholder and placeholderValue" placeholder="Select from list" placeholderValue="notSelected" value="notSelected" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select9" onChange={()=>{console.log('onchange')}} label="Select with label, selected value and contentOnly set to true" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} />
+<Select id="select10" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, contentOnly set to true and keyAsContent set to true" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} keyAsContent={true} />
+<Select id="select11" onChange={()=>{console.log('onchange')}} label="Select with label, selected value is string, contentOnly set to true and keyAsContent set to true" value="option 2" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} contentOnly={true} keyAsContent={true} />
+<Select id="select12" onChange={()=>{console.log('onchange')}} label="Select with label, contentOnly set to true, no value and defaultContent" contentOnly={true} defaultContent="No value selected" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} />
+<Select id="select2" onChange={()=>{console.log('onchange')}} label="Select with custom width" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} width="250px" />
+```
+
+Themed select example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+    <Select id="themedSelect3" onChange={()=>{console.log('onchange')}} label="Select with label and selected value" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} theme={customTheme} />
+    <Select id="themedSelect4" onChange={()=>{console.log('onchange')}} label="Select with label, selected value, errors and error message" value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} hasErrors={true} errorMessage="Wrong value selected" theme={customTheme} />
+    <Select id="themedSelect5" onChange={()=>{console.log('onchange')}} label={['Select with ', <a key="labelLink" href="#">link</a>, ' in label']} value="value 3" options={['option 1', 'option 2', {key: 'option 3', value: 'value 3'}]} theme={customTheme} />
+</React.Fragment>
+```

package/dist/components/Select.module.scss

@@ -1,100 +1,86 @@
-@import "../style/global.scss";
-
-:local(.select) {
-	:local(.selectContainer) {
-		position: relative;
-
-		:local(.selectListArrow) {
-			box-sizing: border-box;
-			position: absolute;
-			top: 15px;
-			right: 15px;
-			display: block;
-			width: 12px;
-			height: 12px;
-			border-radius: 100px;
-			@media only screen and (min-width: $screen-sm) {
-				top: 20px;
-				right: 20px;
-			}
-
-			&::after {
-				content: "";
-				display: block;
-				box-sizing: border-box;
-				position: absolute;
-				width: 12px;
-				height: 12px;
-				border-bottom: 2px solid;
-				border-right: 2px solid;
-				transform: translateY(-30%) rotate(45deg);
-				transition: transform 0.3s ease-in-out;
-			}
-		}
-
-		select {
-			@include border-radius(0);
-			@include transition(border-color 0.15s linear);
-			@include appearance(none);
-			@include box-shadow(none);
-			height: 47px;
-			color: rgba(0, 0, 0, 0.75);
-			width: 100%;
-			font-family: inherit;
-			font-size: 16px;
-			padding: 10px 40px 10px 10px;
-			border: 1px solid #afaba8;
-			border-radius: 0;
-			line-height: normal;
-			background: white;
-			cursor: pointer;
-			@media only screen and (min-width: $screen-sm) {
-				font-size: 19px;
-				height: 56px;
-			}
-
-			&:hover {
-				border-color: $color-dark-blue;
-			}
-
-			&:focus {
-				border-color: $color-dark-blue;
-				outline-color: #54acb8;
-			}
-
-			&[disabled],
-			&[readonly] {
-				background-color: #ddd;
-				cursor: default;
-			}
-
-			&:local(.hasErrors) {
-				border-color: $color-error;
-				&:focus {
-					border-color: $color-error;
-					outline-color: #b8565d;
-				}
-				&[disabled],
-				&[readonly] {
-					background-color: #ddd;
-					cursor: default;
-					border-color: #afaba8;
-				}
-			}
-		}
-	}
-	:local(.errorMessage) {
-		display: block;
-		color: $color-error-text;
-		font-size: 16px;
-		font-weight: 400;
-		line-height: 1.2;
-		margin: 4px 0;
-		font-family: "Open Sans", sans-serif;
-		font-style: italic;
-		overflow-wrap: break-word;
-		@media only screen and (min-width: $screen-sm) {
-			font-size: 19px;
-		}
-	}
-}
+@import "../style/global.scss";
+
+:local(.select) {
+	:local(.selectContainer) {
+		position: relative;
+
+		:local(.selectListArrow) {
+			box-sizing: border-box;
+			position: absolute;
+			top: 15px;
+			right: 15px;
+			display: block;
+			width: 12px;
+			height: 12px;
+			border-radius: 100px;
+			@media only screen and (min-width: $screen-sm) {
+				top: 20px;
+				right: 20px;
+			}
+
+			&::after {
+				content: "";
+				display: block;
+				box-sizing: border-box;
+				position: absolute;
+				width: 12px;
+				height: 12px;
+				border-bottom: 2px solid;
+				border-right: 2px solid;
+				transform: translateY(-30%) rotate(45deg);
+				transition: transform 0.3s ease-in-out;
+			}
+		}
+
+		select {
+			@include border-radius(0);
+			@include transition(border-color 0.15s linear);
+			@include appearance(none);
+			@include box-shadow(none);
+			height: 47px;
+			color: rgba(0, 0, 0, 0.75);
+			width: 100%;
+			font-family: inherit;
+			font-size: 16px;
+			padding: 10px 40px 10px 10px;
+			border: 1px solid #afaba8;
+			border-radius: 0;
+			line-height: normal;
+			background: white;
+			cursor: pointer;
+			@media only screen and (min-width: $screen-sm) {
+				font-size: 19px;
+				height: 56px;
+			}
+
+			&:hover {
+				border-color: $color-dark-blue;
+			}
+
+			&:focus {
+				border-color: $color-dark-blue;
+				outline-color: #54acb8;
+			}
+
+			&[disabled],
+			&[readonly] {
+				background-color: #ddd;
+				cursor: default;
+			}
+
+			&:local(.hasErrors) {
+				border-color: $color-error;
+				&:focus {
+					border-color: $color-error;
+					outline-color: #b8565d;
+				}
+				&[disabled],
+				&[readonly] {
+					background-color: #ddd;
+					cursor: default;
+					border-color: #afaba8;
+				}
+			}
+		}
+	}
+}

package/dist/components/Textarea.js

@@ -13,6 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _Label = _interopRequireDefault(require("./Label"));
 
+var _ErrorMessage = _interopRequireDefault(require("./ErrorMessage"));
+
 var _theme = require("../functions/theme");
 
 var _generators = require("../functions/generators");
@@ -66,13 +68,6 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         borderColor: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
       };
     }
-  }, {
-    key: "getThemeErrorMessageStyle",
-    value: function getThemeErrorMessageStyle(theme) {
-      return {
-        color: (0, _theme.getThemePaletteBackgroundColor)(theme, 'warning')
-      };
-    }
   }, {
     key: "renderValueAsText",
     value: function renderValueAsText(value, defaultContent) {
@@ -111,10 +106,10 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         className: _TextareaModule.default.textarea
       }, /*#__PURE__*/_react.default.createElement(_Label.default, {
         htmlFor: this.props.id
-      }, this.props.label), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement("span", {
-        className: _TextareaModule.default.errorMessage,
-        style: this.getThemeErrorMessageStyle(this.props.theme)
-      }, this.props.errorMessage ? this.props.errorMessage : ''));
+      }, this.props.label), !this.props.contentOnly ? this.renderInputField() : /*#__PURE__*/_react.default.createElement("span", null, this.renderValueAsText(this.props.value || this.props.defaultValue, this.props.defaultContent)), /*#__PURE__*/_react.default.createElement(_ErrorMessage.default, {
+        content: this.props.errorMessage,
+        theme: this.props.theme
+      }));
     }
   }]);
 

package/dist/components/Textarea.md

@@ -1,27 +1,27 @@
-Input field example:
-
-```js
-<Textarea id="textInput1" onChange={()=>{console.log('onchange')}} mandatory={true} />
-<Textarea id="textInput2" onChange={()=>{console.log('onchange')}} value="Textarea with value" />
-<Textarea id="textInput3" onChange={()=>{console.log('onchange')}} defaultValue="Textarea with defaultValue" />
-<Textarea id="textInput4" onChange={()=>{console.log('onchange')}} value="Textarea with label and value" label="Textarea with label and value" />
-<Textarea id="textInput5" onChange={()=>{console.log('onchange')}} value="Textarea with link in label" label={['Textarea with ', <a key="labelLink" href="#">link</a>, ' in label']} />
-<Textarea id="textInput6" onChange={()=>{console.log('onchange')}} value="Textarea with label, value, errors and error message" label="Textarea with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" />
-<Textarea id="textInput7" onChange={()=>{console.log('onchange')}} readOnly value="Read only Textarea with label and value" label="Read only Textarea with label and value" />
-<Textarea id="textInput8" onChange={()=>{console.log('onchange')}} disabled value="Disabled Textarea with label and value" label="Disabled Textarea with label and value" />
-<Textarea id="textInput9" onChange={()=>{console.log('onchange')}} value="Value for Textarea" label="Textarea with label, value and contentOnly set to true" contentOnly={true} />
-<Textarea id="textInput10" onChange={() => {console.log('onChange')}} label="Textarea without value, contentOnly set to true and defaultContent" contentOnly={true} defaultContent="Please insert a value" />
-<Textarea id="textInput11" onChange={()=>{console.log('onchange')}} value="Textarea with custom width" width="320px" />
-<Textarea id="textInput11" onChange={()=>{console.log('onchange')}} value="Textarea with custom width and vertical resizing" width="450px" resize="vertical" />
-<Textarea id="textInput11" onChange={()=>{console.log('onchange')}} value="Textarea with a not auto generated key" elementKey="textareaKeyHere" />
-```
-
-Themed Input field example:
-
-```js
-import customTheme from 'data/customTheme';
-<React.Fragment>
-    <Textarea id="themedTextInput4" onChange={()=>{console.log('onchange')}} value="Textarea with link in label" label={['Textarea with ', <a key="labelLink" href="#">link</a>, ' in label']} theme={customTheme} />
-    <Textarea id="themedTextInput5" onChange={()=>{console.log('onchange')}} value="Textarea with label, value, errors and error message" label="Textarea with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" theme={customTheme} />
-</React.Fragment>
-```
+Input field example:
+
+```js
+<Textarea id="textInput1" onChange={()=>{console.log('onchange')}} mandatory={true} />
+<Textarea id="textInput2" onChange={()=>{console.log('onchange')}} value="Textarea with value" />
+<Textarea id="textInput3" onChange={()=>{console.log('onchange')}} defaultValue="Textarea with defaultValue" />
+<Textarea id="textInput4" onChange={()=>{console.log('onchange')}} value="Textarea with label and value" label="Textarea with label and value" />
+<Textarea id="textInput5" onChange={()=>{console.log('onchange')}} value="Textarea with link in label" label={['Textarea with ', <a key="labelLink" href="#">link</a>, ' in label']} />
+<Textarea id="textInput6" onChange={()=>{console.log('onchange')}} value="Textarea with label, value, errors and error message" label="Textarea with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" />
+<Textarea id="textInput7" onChange={()=>{console.log('onchange')}} readOnly value="Read only Textarea with label and value" label="Read only Textarea with label and value" />
+<Textarea id="textInput8" onChange={()=>{console.log('onchange')}} disabled value="Disabled Textarea with label and value" label="Disabled Textarea with label and value" />
+<Textarea id="textInput9" onChange={()=>{console.log('onchange')}} value="Value for Textarea" label="Textarea with label, value and contentOnly set to true" contentOnly={true} />
+<Textarea id="textInput10" onChange={() => {console.log('onChange')}} label="Textarea without value, contentOnly set to true and defaultContent" contentOnly={true} defaultContent="Please insert a value" />
+<Textarea id="textInput11" onChange={()=>{console.log('onchange')}} value="Textarea with custom width" width="320px" />
+<Textarea id="textInput11" onChange={()=>{console.log('onchange')}} value="Textarea with custom width and vertical resizing" width="450px" resize="vertical" />
+<Textarea id="textInput11" onChange={()=>{console.log('onchange')}} value="Textarea with a not auto generated key" elementKey="textareaKeyHere" />
+```
+
+Themed Input field example:
+
+```js
+import customTheme from 'data/customTheme';
+<React.Fragment>
+    <Textarea id="themedTextInput4" onChange={()=>{console.log('onchange')}} value="Textarea with link in label" label={['Textarea with ', <a key="labelLink" href="#">link</a>, ' in label']} theme={customTheme} />
+    <Textarea id="themedTextInput5" onChange={()=>{console.log('onchange')}} value="Textarea with label, value, errors and error message" label="Textarea with label, value, errors and error message" hasErrors={true} errorMessage="Wrong value" theme={customTheme} />
+</React.Fragment>
+```

package/dist/components/Textarea.module.scss

@@ -1,72 +1,58 @@
-@import "../style/global.scss";
-
-:local(.textarea) {
-    > div {
-        display: block;
-    }
-    textarea {
-        @include appearance(none);
-        @include transition(border-color 0.15s linear, background 0.15s linear);
-        @include border-radius(0);
-        @include box-shadow(none);
-        height: auto;
-        width: 100%;
-        display: block;
-        padding: 10px;
-        margin-bottom: 0;
-        font-weight: 300;
-        background-color: #fff;
-        box-shadow: none;
-        color: rgba(0, 0, 0, 0.75);
-        font-family: inherit;
-        font-size: 16px;
-        box-sizing: border-box;
-        border: 1px solid #afaba8;
-        @media only screen and (min-width: $screen-sm) {
-            font-size: 19px;
-        }
-
-        &:hover {
-            border-color: $color-dark-blue;
-        }
-
-        &:focus {
-            border-color: $color-dark-blue;
-            outline-color: #54acb8;
-        }
-
-        &[disabled],
-        &[readonly] {
-            background-color: #ddd;
-            cursor: default;
-        }
-
-        &:local(.hasErrors) {
-            border-color: $color-error;
-            &:focus {
-                border-color: $color-error;
-                outline-color: #b8565d;
-            }
-            &[disabled],
-            &[readonly] {
-                background-color: #ddd;
-                cursor: default;
-                border-color: #afaba8;
-            }
-        }
-    }
-    :local(.errorMessage) {
-        display: block;
-        color: $color-error-text;
-        font-size: 16px;
-        font-weight: 400;
-        line-height: 1.2;
-        margin: 4px 0;
-        font-family: "Open Sans", sans-serif;
-        font-style: italic;
-        overflow-wrap: break-word;
-        @media only screen and (min-width: $screen-sm) {
-            font-size: 19px;
-        }
-    }
-}
+@import "../style/global.scss";
+
+:local(.textarea) {
+    > div {
+        display: block;
+    }
+    textarea {
+        @include appearance(none);
+        @include transition(border-color 0.15s linear, background 0.15s linear);
+        @include border-radius(0);
+        @include box-shadow(none);
+        height: auto;
+        width: 100%;
+        display: block;
+        padding: 10px;
+        margin-bottom: 0;
+        font-weight: 300;
+        background-color: #fff;
+        box-shadow: none;
+        color: rgba(0, 0, 0, 0.75);
+        font-family: inherit;
+        font-size: 16px;
+        box-sizing: border-box;
+        border: 1px solid #afaba8;
+        @media only screen and (min-width: $screen-sm) {
+            font-size: 19px;
+        }
+
+        &:hover {
+            border-color: $color-dark-blue;
+        }
+
+        &:focus {
+            border-color: $color-dark-blue;
+            outline-color: #54acb8;
+        }
+
+        &[disabled],
+        &[readonly] {
+            background-color: #ddd;
+            cursor: default;
+        }
+
+        &:local(.hasErrors) {
+            border-color: $color-error;
+            &:focus {
+                border-color: $color-error;
+                outline-color: #b8565d;
+            }
+            &[disabled],
+            &[readonly] {
+                background-color: #ddd;
+                cursor: default;
+                border-color: #afaba8;
+            }
+        }
+    }
+}

package/dist/components/Theme.md

@@ -1,12 +1,12 @@
-Default theme:
-```js
-<Theme />
-```
-
-
-
-Custom theme:
-```js
-import customTheme from 'data/customTheme';
-<Theme theme={customTheme} />
-```
+Default theme:
+```js
+<Theme />
+```
+
+
+
+Custom theme:
+```js
+import customTheme from 'data/customTheme';
+<Theme theme={customTheme} />
+```

package/dist/components/Theme.module.scss

@@ -1,76 +1,76 @@
-@import "../style/global.scss";
-
-* {
-  color: $color-default-text;
-}
-
-a {
-  color: $color-link;
-}
-
-img {
-  max-width: 200px;
-  max-height: 150px;
-}
-
-:local(.colorPalette) {
-  display: flex;
-  flex-wrap: wrap;
-
-  :local(.color) {
-    width: 20%;
-    min-width: 120px;
-    text-align: center;
-    line-height: 3em;
-
-    &:local(.default) {
-      background-color: $color-default;
-      color: #000;
-    }
-
-    &:local(.primary) {
-      background-color: $color-primary;
-      color: #fff;
-    }
-
-    &:local(.success) {
-      background-color: $color-success;
-      color: #fff;
-    }
-
-    &:local(.warning) {
-      background-color: $color-warning;
-      color: #fff;
-    }
-
-    &:local(.info) {
-      background-color: $color-info;
-      color: #000;
-    }
-
-    &:local(.lightCyan) {
-      background-color: $color-light-cyan;
-      color: #000;
-    }
-
-    &:local(.orange) {
-      background-color: $color-orange;
-      color: #fff;
-    }
-
-    &:local(.lightOrange) {
-      background-color: $color-light-orange;
-      color: #000;
-    }
-
-    &:local(.lime) {
-      background-color: $color-lime;
-      color: #fff;
-    }
-
-    &:local(.lightLime) {
-      background-color: $color-light-lime;
-      color: #000;
-    }
-  }
-}
+@import "../style/global.scss";
+
+* {
+  color: $color-default-text;
+}
+
+a {
+  color: $color-link;
+}
+
+img {
+  max-width: 200px;
+  max-height: 150px;
+}
+
+:local(.colorPalette) {
+  display: flex;
+  flex-wrap: wrap;
+
+  :local(.color) {
+    width: 20%;
+    min-width: 120px;
+    text-align: center;
+    line-height: 3em;
+
+    &:local(.default) {
+      background-color: $color-default;
+      color: #000;
+    }
+
+    &:local(.primary) {
+      background-color: $color-primary;
+      color: #fff;
+    }
+
+    &:local(.success) {
+      background-color: $color-success;
+      color: #fff;
+    }
+
+    &:local(.warning) {
+      background-color: $color-warning;
+      color: #fff;
+    }
+
+    &:local(.info) {
+      background-color: $color-info;
+      color: #000;
+    }
+
+    &:local(.lightCyan) {
+      background-color: $color-light-cyan;
+      color: #000;
+    }
+
+    &:local(.orange) {
+      background-color: $color-orange;
+      color: #fff;
+    }
+
+    &:local(.lightOrange) {
+      background-color: $color-light-orange;
+      color: #000;
+    }
+
+    &:local(.lime) {
+      background-color: $color-lime;
+      color: #fff;
+    }
+
+    &:local(.lightLime) {
+      background-color: $color-light-lime;
+      color: #000;
+    }
+  }
+}