Merge pull request #23 from sebgroup/dev

Dev

config/projectoptions.yml

@@ -16,7 +16,7 @@ project_info:
 directories:
 
   public_path: '/vanilla-pattern-library/'
-  public_path_markdown: 'https://raw.githubusercontent.com/sebgroup/vanilla-pattern-library/dev/'
+  public_path_markdown: 'https://raw.githubusercontent.com/sebgroup/vanilla-pattern-library/gh-pages/'
   use_hash: true
 
   # Path to the pattern library source files
@@ -82,7 +82,7 @@ compilation:
   # are loaders for LESS, SASS and JS configured in DvM
   targets:
     sdv-all.css:
-    - "**/vanilla-all.scss"
+    - "**/sdv-all.scss"
     preview-frame-only.css:
     - "**/preview-frame-only.scss"
 

package.json

@@ -53,7 +53,7 @@
 		"@commitlint/config-conventional": "^7.5.0",
 		"@fortawesome/fontawesome-pro": "^5.7.2",
 		"cz-conventional-changelog": "^2.1.0",
-		"davanmonet": "1.4.4",
+		"davanmonet": "1.4.7",
 		"husky": "^1.3.1",
 		"package-lock-sanitizer": "^1.0.0",
 		"replace": "^1.0.1",

src/_mixins.scss

@@ -52,3 +52,11 @@
   transform: rotate(#{$rotation + "deg"});
   transition: transform 250ms;
 }
+
+/// Add focus outline to element
+///
+/// @access public
+@mixin vanilla-focus-outline() {
+  box-shadow: 0px 0px 0px 3px rgba($vanilla-color-component-selected, 0.2);
+  transition: box-shadow 250ms;
+}

src/vanilla-all.scss → src/_vanilla-all.scss

@@ -1,22 +1,25 @@
-$vanilla-font-basepath: '/vanilla-pattern-library/assets/fonts/';
+////
+/// Import this file to get all of Vanilla in one go.
+/// Note: It is usually better to import components one by one where you need them. That help keeping output file size low, and gives you a cleaner dependency tree.
+/// @group Global
+/// @author Digital CX
+////
 
 @import "defaults";
 
-// Components
+// All components
 @import "components/buttons/button";
 @import "components/inputs/input_base";
 @import "components/inputs/dropdown";
 @import "components/inputs/radio";
 @import "components/inputs/checkbox";
 @import "components/inputs/switch";
+@import "components/inputs/toggle-button";
 @import "components/dialogs/dialog";
 @import "components/accordions/accordion";
 @import "components/tables/table";
 @import "components/progress-bars/progress-bar";
 @import "components/tabs/tabs";
 @import "components/datepicker/datepicker";
 @import "components/text/preamble";
-@import "components/modals/slideout-modal";
-
-// Examples
-@import "examples/colors";
+@import "components/modals/slideout-modal";

src/_variables.scss

@@ -4,12 +4,6 @@
 /// @author Digital CX
 ////
 
-////
-/// These are the default variable values used throughout Vanilla
-/// @group Global variables
-/// @author Digital CX
-////
-
 @import "functions";
 @import "colors";
 
@@ -96,10 +90,6 @@ $vanilla-base-size: 1rem !default;
 /// Default component border radius (buttons, input fields, etc)
 $vanilla-component-border-radius: (4 / 16) * 1em !default;
 
-// Path settings
-/// Font Awesome includepath
-$vanilla-font-awesome-inc-path: "/assets/fontawesome" !default;
-
 /// Responsive breakpoints
 $vanilla-breakpoints: (
   mobile: 0,

src/components/buttons/_button-ghost.scss

@@ -1,8 +1,14 @@
 @import 'button-primary';
 
 @include _vanilla-exports('vanilla-button-ghost') {
-  .sdv-button-ghost
+  .sdv-button-ghost,
+  .sdv-button-ghost-light
   {
-      @include vanilla-button-ghost();
+      @include vanilla-button-ghost-light();
+  }
+
+  .sdv-button-ghost-dark
+  {
+      @include vanilla-button-ghost-dark();
   }
 }