Expose Sass stylesheets to Draftail users, for extension

.npmignore

@@ -4,7 +4,7 @@ examples
 public
 docs
 webpack
-lib
+lib/**/*.js
 .npmignore
 .nvmrc
 .travis.yml
@@ -18,7 +18,7 @@ bin
 .env
 npm-debug.log*
 *.test.js
-*/tests/
+tests
 __mocks__
 __snapshots__
 prettier.config.js

README.md

@@ -51,8 +51,8 @@ npm install --save draftail
 Import the styles for Draft.js, and the editor:
 
 ```scss
-@import 'draft-js/dist/Draft';
-@import 'draftail/dist/draftail';
+@import 'draft-js/dist/Draft.css';
+@import 'draftail/dist/draftail.css';
 ```
 
 Then, import the editor and use it in your code. Here is a [simple example](https://springload.github.io/draftail/examples/):
@@ -313,13 +313,28 @@ Without custom controls, the editor has a very simple UI and its styles are rela
 
 To tweak the editor UI, Draftail uses old-fashioned stable, namespaced class names that you are free to add more styles to. For example, the toolbar uses `.Draftail-Toolbar`.
 
+Draftail also makes its Sass stylesheets available for extension:
+
+```scss
+// Increase the default editor z-index.
+$editor-z-index: 100;
+
+// Import all of the styles in your build.
+@import 'draftail/lib/index';
+
+// Alternatively, only import the constants to reuse them elsewhere in your project.
+@import 'draftail/lib/api/constants';
+```
+
 ### List nesting levels
 
 Draft.js only provides [default styles](https://github.com/facebook/draft-js/blob/3689a93c85786b6a3fb8a3434e9c700661a8ba02/src/component/utils/DraftStyleDefault.css#L46) for list nesting up to five levels (depth 0 to 4). If you want to allow more nesting, you will need to add the list styles.
 
 Draftail provides a helper Sass mixin which adds OL counters and indentation, and can be used like:
 
 ```scss
+@import 'draftail/lib/api/nested-list-item';
+
 // Add nesting support up to 7 levels.
 @for $depth from 5 through 6 {
     @include nested-list-item($depth);

lib/api/_constants.scss

@@ -0,0 +1,44 @@
+$NS: 'Draftail-';
+
+$button-spacing: 0.5rem;
+$controls-spacing: $button-spacing / 2;
+$editor-spacing: $button-spacing + $controls-spacing;
+$tooltip-spacing: 0.625rem;
+
+$color-teal: #43b1b0;
+$color-dark-teal: #246060;
+$color-bright-teal: #54d0d0;
+$color-light-teal: #f4fcfc;
+$color-light-blue: #eef8ff;
+$color-white: #fff;
+$color-black: #000;
+$color-grey: #333;
+$color-light-grey: #ddd;
+
+$color-editor-chrome: $color-light-grey !default;
+$color-editor-chrome-text: $color-grey !default;
+$color-editor-chrome-active: $color-black !default;
+$color-editor-chrome-accent: darken($color-editor-chrome, 10%) !default;
+$color-tooltip-chrome: $color-grey !default;
+$color-tooltip-chrome-text: $color-white !default;
+
+$editor-border-radius: 5px !default;
+$tooltip-border-radius: $editor-border-radius !default;
+
+$editor-z-index: 1 !default;
+$tooltip-z-index: $editor-z-index + 1;
+$overlay-z-index: $tooltip-z-index + 1;
+$activeblock-z-index: $overlay-z-index + 1;
+$toolbar-z-index: $activeblock-z-index + 1;
+$toolbar-tooltip-z-index: $toolbar-z-index + 1;
+
+@mixin disabled {
+    opacity: 0.5;
+    pointer-events: none;
+    cursor: not-allowed;
+}
+
+@mixin font-smoothing {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}

lib/index.scss

@@ -1,54 +1,11 @@
-$NS: 'Draftail-';
-
-$button-spacing: 0.5rem;
-$controls-spacing: $button-spacing / 2;
-$editor-spacing: $button-spacing + $controls-spacing;
-$tooltip-spacing: 0.625rem;
-
-$color-teal: #43b1b0;
-$color-dark-teal: #246060;
-$color-bright-teal: #54d0d0;
-$color-light-teal: #f4fcfc;
-$color-light-blue: #eef8ff;
-$color-white: #fff;
-$color-black: #000;
-$color-grey: #333;
-$color-light-grey: #ddd;
-
-$color-editor-chrome: $color-light-grey !default;
-$color-editor-chrome-text: $color-grey !default;
-$color-editor-chrome-active: $color-black !default;
-$color-editor-chrome-accent: darken($color-editor-chrome, 10%) !default;
-$color-tooltip-chrome: $color-grey !default;
-$color-tooltip-chrome-text: $color-white !default;
-
-$editor-border-radius: 5px !default;
-$tooltip-border-radius: $editor-border-radius !default;
-
-$editor-z-index: 1 !default;
-$tooltip-z-index: $editor-z-index + 1;
-$overlay-z-index: $tooltip-z-index + 1;
-$activeblock-z-index: $overlay-z-index + 1;
-$toolbar-z-index: $activeblock-z-index + 1;
-$toolbar-tooltip-z-index: $toolbar-z-index + 1;
-
-@mixin disabled {
-    opacity: 0.5;
-    pointer-events: none;
-    cursor: not-allowed;
-}
-
-@mixin font-smoothing {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-}
-
-@import './utils/nested-list-item';
+@import './api/constants';
+@import './api/nested-list-item';
 
 @import './components/Icon';
 @import './components/DraftailEditor';
 @import './components/Toolbar';
 @import './components/ToolbarGroup';
 @import './components/ToolbarButton';
 @import './components/ToolbarTooltip';
+
 @import './blocks/DividerBlock';