Add variables, debug and compile SASS.

.gitignore

@@ -0,0 +1 @@
+node_modules/

.stylelintrc

@@ -0,0 +1,24 @@
+{
+  "rules": {
+    "block-no-empty": true,
+    "color-no-invalid-hex": true,
+    "declaration-block-no-duplicate-properties": true,
+    "declaration-block-no-shorthand-property-overrides": true,
+    "declaration-colon-space-after": "always-single-line",
+    "max-empty-lines": 2,
+    "rule-empty-line-before": [ "always", {
+      "except": ["first-nested"],
+      "ignore": ["after-comment"],
+    } ],
+    "unit-whitelist": ["em", "rem", "%", "s", "ms", "px", "vw", "vh", "deg", "fr"],
+    "indentation": [2, {
+      "except": ["value"],
+      "ignore": ["inside-parens"],
+      "severity": "warning",
+      "indentInsideParens": "twice"
+    }] ,
+    "max-nesting-depth": [4, {
+      "severity": "warning",
+    }],
+  }
+}

css-partials/_gutenberg-blocks-layout.scss

@@ -0,0 +1,58 @@
+/* Layout Elements */
+
+/* Button */
+$blocks-button__height: 46px;
+$blocks-button__line-height: $big-font-size + 6px;
+
+.wp-block-button {
+  margin-bottom: 1.5em;
+
+  & .wp-block-button__link {
+    border: none;
+    border-radius: $blocks-button__height / 2;
+    box-shadow: none;
+    cursor: pointer;
+    display: inline-block;
+    font-size: $big-font-size;
+    line-height: $blocks-button__line-height;
+    margin: 0;
+    padding: ( $blocks-button__height - $blocks-button__line-height ) / 2 24px;
+    text-align: center;
+    text-decoration: none;
+    white-space: normal;
+    word-break: break-all;
+  }
+
+  &.aligncenter {
+    text-align: center;
+  }
+
+  &.alignright {
+    text-align: right;
+  }
+}
+
+.wp-block-button__link:not(.has-background) {
+  background-color: $dark-gray-700;
+  &:hover,
+  &:focus,
+  &:active {
+    background-color: $dark-gray-700;
+  }
+}
+
+.wp-block-button__link:not(.has-text-color) {
+  color: $white;
+  &:hover,
+  &:focus,
+  &:active {
+    color: $white;
+  }
+}
+
+/* Columns */
+/* More [used to be called 'read more'] */
+/* Page break */
+/* Seperator */
+/* Spacer */
+/* Text Columns */

css-partials/_test.scss

@@ -0,0 +1,7 @@
+body {
+  background: white;
+
+  p {
+    color: black;
+  }
+}

css-partials/gutenberg-blocks.scss

@@ -0,0 +1,8 @@
+/* Un-comment the ones you need. */
+
+@import "variables/gutenberg-blocks-variables";
+@import "gutenberg-blocks-common";
+@import "gutenberg-blocks-formatting";
+@import "gutenberg-blocks-layout";
+// @import "gutenberg-blocks-widgets";
+// @import "gutenberg-blocks-embeds";

css-partials/variables/_animations.scss

@@ -0,0 +1,32 @@
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@mixin animate_fade {
+  animation: animate_fade 0.1s ease-out;
+  animation-fill-mode: forwards;
+}
+
+@mixin move_background {
+  background-size: 28px 28px;
+  animation: move_background .5s linear infinite;
+}
+
+@mixin loading_fade {
+  animation: loading_fade 1.6s ease-in-out infinite;
+}
+
+@mixin slide_in_right {
+  transform: translateX(+100%);
+  animation: slide_in_right 0.1s forwards;
+}
+
+@mixin fade_in( $speed: 0.2s ) {
+  animation: fade-in $speed ease-out;
+  animation-fill-mode: forwards;
+}

css-partials/variables/_breakpoints.scss

@@ -0,0 +1,39 @@
+/**
+ * Breakpoints & Media Queries
+ */
+// TODO: Note that these reference to editor styles, though they are applied to the public-facing site as well.
+// Most used breakpoints
+$break-huge: 1440px;
+$break-wide: 1280px;
+$break-large: 960px;	// admin sidebar auto folds
+$break-medium: 782px;	// adminbar goes big
+$break-small: 600px;
+$break-mobile: 480px;
+
+// All media queries currently in WordPress:
+//
+// min-width: 2000px
+// min-width: 1680px
+// min-width: 1250px
+// max-width: 1120px *
+// max-width: 1000px
+// min-width: 769px and max-width: 1000px
+// max-width: 960px *
+// max-width: 900px
+// max-width: 850px
+// min-width: 800px and max-width: 1499px
+// max-width: 800px
+// max-width: 799px
+// max-width: 782px *
+// max-width: 768px
+// max-width: 640px *
+// max-width: 600px *
+// max-width: 520px
+// max-width: 500px
+// max-width: 480px *
+// max-width: 400px *
+// max-width: 380px
+// max-width: 320px *
+//
+// Those marked * seem to be more commonly used than the others.
+// Let's try and use as few of these as possible, and be mindful about adding new ones, so we don't make the situation worse

css-partials/variables/_colors.scss

@@ -0,0 +1,88 @@
+/**
+ * Colors
+ */
+
+// Hugo's new WordPress shades of gray
+// from http://codepen.io/hugobaeta/pen/grJjVp
+$black: #000;
+$dark-gray-900: #191e23;
+$dark-gray-800: #23282d;
+$dark-gray-700: #32373c;
+$dark-gray-600: #40464d;
+$dark-gray-500: #555d66;    // use this most of the time for dark items
+$dark-gray-400: #606a73;
+$dark-gray-300: #6c7781;
+$dark-gray-200: #7e8993;
+$dark-gray-100: #8f98a1;
+$light-gray-900: #a2aab2;
+$light-gray-800: #b5bcc2;
+$light-gray-700: #ccd0d4;
+$light-gray-600: #d7dade;
+$light-gray-500: #e2e4e7;   // good for "grayed" items and borders
+$light-gray-400: #e8eaeb;
+$light-gray-300: #edeff0;
+$light-gray-200: #f3f4f5;
+$light-gray-100: #f8f9f9;
+$white: #fff;
+
+// Dark opacities, for use with light themes
+$dark-opacity-900: rgba( #000510, .9 );
+$dark-opacity-800: rgba( #00000a, .85 );
+$dark-opacity-700: rgba( #06060b, .8 );
+$dark-opacity-600: rgba( #000913, .75 );
+$dark-opacity-500: rgba( #0a1829, .7 );
+$dark-opacity-400: rgba( #0a1829, .65 );
+$dark-opacity-300: rgba( #0e1c2e, .6 );
+$dark-opacity-200: rgba( #162435, .55 );
+$dark-opacity-100: rgba(#223443, .5 );
+$dark-opacity-light-900: rgba( #304455, .45 );
+$dark-opacity-light-800: rgba( #425863, .4 );
+$dark-opacity-light-700: rgba( #667886, .35 );
+$dark-opacity-light-600: rgba( #7b86a2, .3 );
+$dark-opacity-light-500: rgba( #9197a2, .25 );
+$dark-opacity-light-400: rgba( #95959c, .2 );
+$dark-opacity-light-300: rgba( #829493, .15 );
+$dark-opacity-light-200: rgba( #8b8b96, .1 );
+$dark-opacity-light-100: rgba( #747474, .05 );
+
+// Light opacities, for use with dark themes
+$light-opacity-900: rgba( $white, 1 );
+$light-opacity-800: rgba( $white, .9 );
+$light-opacity-700: rgba( $white, .85 );
+$light-opacity-600: rgba( $white, .8 );
+$light-opacity-500: rgba( $white, .75 );
+$light-opacity-400: rgba( $white, .7 );
+$light-opacity-300: rgba( $white, .65 );
+$light-opacity-200: rgba( $white, .6 );
+$light-opacity-100: rgba( $white, .55 );
+$light-opacity-light-900: rgba( $white, .5 );
+$light-opacity-light-800: rgba( $white, .45 );
+$light-opacity-light-700: rgba( $white, .4 );
+$light-opacity-light-600: rgba( $white, .35 );
+$light-opacity-light-500: rgba( $white, .3 );
+$light-opacity-light-400: rgba( $white, .25 );
+$light-opacity-light-300: rgba( $white, .2 );
+$light-opacity-light-200: rgba( $white, .15 );
+$light-opacity-light-100: rgba( $white, .1 );
+
+// Additional colors
+// some from https://make.wordpress.org/design/handbook/foundations/colors/
+$blue-wordpress-700: #00669b;
+$blue-dark-900: #0071a1;
+
+$blue-medium-900: #006589;
+$blue-medium-800: #00739C;
+$blue-medium-700: #007FAC;
+$blue-medium-600: #008DBE;
+$blue-medium-500: #00a0d2;
+$blue-medium-400: #33B3DB;
+$blue-medium-300: #66C6E4;
+$blue-medium-200: #BFE7F3;
+$blue-medium-100: #E5F5FA;
+$blue-medium-highlight: #b3e7fe;
+$blue-medium-focus: #007cba;
+
+// Alert colors
+$alert-yellow: #f0b849;
+$alert-red: #d94f4f;
+$alert-green: #4ab866;

css-partials/variables/_common.scss

@@ -0,0 +1,57 @@
+/**
+ * Often re-used variables
+ */
+
+// Fonts & basics
+$default-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+$default-font-size: 13px;
+$default-line-height: 1.4;
+$editor-font: "Noto Serif", serif;
+$editor-html-font: Menlo, Consolas, monaco, monospace;
+$editor-font-size: 16px;
+$text-editor-font-size: 14px;
+$editor-line-height: 1.8;
+$big-font-size: 18px;
+$mobile-text-min-font-size: 16px;	// Any font size below 16px will cause Mobile Safari to "zoom in"
+
+// Widths, heights & dimensions
+$item-spacing: 10px;
+$panel-padding: 16px;
+$header-height: 56px;
+$panel-header-height: 50px;
+$admin-bar-height: 32px;
+$admin-bar-height-big: 46px;
+$admin-sidebar-width: 160px;
+$admin-sidebar-width-big: 190px;
+$admin-sidebar-width-collapsed: 36px;
+
+// Visuals
+$shadow-popover: 0 3px 30px rgba( $dark-gray-900, .1 );
+$shadow-toolbar: 0 2px 10px rgba( $dark-gray-900, .1 ), 0 0 2px rgba( $dark-gray-900, .1 );
+$shadow-below-only: 0 5px 10px rgba( $dark-gray-900, .1 ), 0 2px 2px rgba( $dark-gray-900, .1 );
+
+// Editor Widths
+$sidebar-width: 280px;
+$text-editor-max-width: 760px;	// @todo: merge with variable below
+$content-width: 636px;	// @todo: leverage theme $content_width variable
+
+// Block UI
+$block-controls-height: 36px;
+$icon-button-size: 36px;
+$icon-button-size-small: 24px;
+$inserter-tabs-height: 36px;
+$block-toolbar-height: 37px;
+
+// Blocks
+$parent-block-padding: 28px; // padding of top level blocks, should be larger than $block-padding, otherwise a user can't select the parent from a child
+$block-padding: 14px; // padding of nested blocks
+$block-spacing: 4px; // vertical space between blocks
+
+$block-side-ui-width: 28px; // width of the side UI, matches half matches half of a single line of text, so two buttons stacke matches 1
+$block-side-ui-clearance: 2px; // space between side UI and block
+$block-side-ui-padding: $block-side-ui-width + $block-side-ui-clearance; // total space used to accommodate side UI
+$block-parent-side-ui-clearance: $parent-block-padding - $block-padding; // space between side UI and block on top level blocks
+
+// Buttons & UI Widgets
+$button-style__radius-roundrect: 4px;
+$button-style__radius-round: 50%;

css-partials/variables/_gutenberg-blocks-variables.scss

@@ -0,0 +1,12 @@
+
+
+$dark-gray-700: rgb(49, 49, 49);
+$white: rgb(255, 255, 255);
+
+@import "colors";
+@import "common";
+@import "animations";
+@import "breakpoints";
+@import "mixins";
+@import "variables";
+@import "_z-index";