Initial version

themes/zen/assets/sass/components/box/_box.scss

@@ -0,0 +1,71 @@
+// Box
+//
+// A simple box style.
+//
+// A block is often styled as a box. However, this design component is
+// not applied to any blocks by default; it is used as an example of how to
+// build and document a CSS component.
+//
+// "box" is the name of our component, so we define a `.box` class that we can
+// apply to any HTML element that needs the box styling. We also provide a
+// `%box` placeholder selector so that we can easily extend the basic box
+// component with `@extend %box;`.
+//
+// Take a look at the source code for this component for more information about
+// building a good component.
+//
+// :hover - The hover/focus styling.
+// .box--highlight - The "highlight" box variant.
+
+.box,
+%box {
+  // Add vertical rhythm margins.
+  @include margin-block(1);
+  @include padding(.5);
+  border: 5px solid var(--color-border);
+
+  // Sass compiles this to the selector: .box__title, %box__title {}
+  // The "__" (double underscore) is part of a BEM naming convention that
+  // indicates the "title" is an _element_ of (a piece of) the "box" component.
+  &__title,
+  .title {
+    margin-top: 0;
+  }
+
+  // Sass compiles this to the selector: .box--highlight, %box--highlight {}
+  // The "--" (double dash) is part of a BEM naming convention that indicates
+  // the "highlight" is a _modifier_, creating a new variation of the standard
+  // "box" component.
+  &--highlight {
+    border-color: var(--color-highlight);
+  }
+
+  &--fit {
+    width: fit-content;
+  }
+
+  &--gutter {
+    padding-inline: var(--gutters);
+  }
+
+  &--inverted {
+    @extend %link-inverted;
+    background: var(--color-border);
+    color: var(--color-text-bg);
+
+    // Make sure headings etc. also gets inverted.
+    * {
+      color: var(--color-text-bg);
+    }
+  }
+
+  > * {
+    &:first-child {
+      margin-top: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}