Merge CSS helpers and utilities into single SCSS endpoint to make their use easier

README.md

@@ -56,7 +56,6 @@ To use React UI in your app:
    import '@react-ui-org/react-ui/src/lib/theme.scss';
    import '@react-ui-org/react-ui/src/lib/foundation.scss';
    import '@react-ui-org/react-ui/src/lib/helpers.scss';
-   import '@react-ui-org/react-ui/src/lib/utilities.scss';
    ```
 
 6. Finally, use React UI **components** just like you are used to:

src/demo/pages/DemoContainer.jsx

@@ -53,9 +53,6 @@ import {
   Swatch,
 } from '../components';
 
-// React UI utility CSS classes
-import '../../lib/utilities.scss';
-
 import navigationTree from './navigation';
 
 const logger = (event) => console.log(event.target.value); // eslint-disable-line no-console

src/lib/foundation.scss

@@ -1,4 +1,4 @@
-// Basic themeable CSS layer to prepare ground for components.
+// Mandatory themeable CSS layer to prepare ground for components.
 // Structured according to ITCSS methodology, ie. most importantly in ascending specificity.
 
 //

src/lib/helpers.scss

@@ -1,24 +1,22 @@
-// General purpose helpers for common situations. Unlike utilities, helpers usually cover more CSS
-// properties than one. And unlike with utilities, using `!important` is not allowed here.
+// Optional layer with helper CSS classes to easily adjust visual details.
+// Structured according to ITCSS methodology, ie. most importantly in ascending specificity.
+// This file should be imported as the very last of your stylesheets.
 
-$_spin-count: 4;
-$_spin-duration: 2.2s;
-$_spin-easing: cubic-bezier(0.31, 0.3, 0.34, -0.17);
+//
+// 1. Helpers
+// ==========
+//
+// General purpose helpers for common situations. They can compose multiple CSS rules to do a bit
+// more complicated tasks.
 
-@keyframes spin {
-  0% {
-    transform: rotate(0 * 360deg);
-  }
+@import 'styles/helpers/animation';
 
-  100% {
-    transform: rotate($_spin-count * 360deg);
-  }
-}
+//
+// 2. Utilities
+// ============
+//
+// Utility classes to tweak small details like typography, margins or padding. They do just one
+// thing: they set a single CSS rule and use the otherwise disallowed `!important` to enforce it.
+// Also they are often responsive (can be adjusted for individual breakpoints).
 
-:global(.animation-spin-clockwise) {
-  animation: spin $_spin-duration $_spin-easing infinite;
-}
-
-:global(.animation-spin-counterclockwise) {
-  animation: spin $_spin-duration $_spin-easing infinite reverse;
-}
+@import 'styles/utilities';

src/lib/utilities.scss → src/lib/styles/_utilities.scss

@@ -1,9 +1,7 @@
-// Responsive utility classes to tweak small details like typography, margins or padding.
-
-@import 'styles/settings/breakpoints';
-@import 'styles/settings/utilities';
-@import 'styles/tools/breakpoints';
-@import 'styles/tools/utilities';
+@import 'settings/breakpoints';
+@import 'settings/utilities';
+@import 'tools/breakpoints';
+@import 'tools/utilities';
 
 @each $breakpoint in map-keys($breakpoint-values) {
   @include breakpoint-up($breakpoint) {

src/lib/styles/helpers/_animation.scss

@@ -0,0 +1,21 @@
+$_spin-count: 4;
+$_spin-duration: 2.2s;
+$_spin-easing: cubic-bezier(0.31, 0.3, 0.34, -0.17);
+
+@keyframes spin {
+  0% {
+    transform: rotate(0 * 360deg);
+  }
+
+  100% {
+    transform: rotate($_spin-count * 360deg);
+  }
+}
+
+:global(.animation-spin-clockwise) {
+  animation: spin $_spin-duration $_spin-easing infinite;
+}
+
+:global(.animation-spin-counterclockwise) {
+  animation: spin $_spin-duration $_spin-easing infinite reverse;
+}