feat(scaffold): refactor to use tokens and grid areas

src/dev/pages/scaffold/scaffold.ejs

@@ -1,5 +1,5 @@
 <div class="demo-container">
-  <forge-scaffold stretch class="app-full-scaffold">
+  <forge-scaffold class="app-full-scaffold">
     <div slot="left" class="placeholder-container">Left</div>
     <div slot="right" class="placeholder-container">Right</div>
     <div slot="header" class="placeholder-container">Header</div>

src/lib/core/styles/tokens/scaffold/_tokens.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+@use '../../utils';
+
+$tokens: (
+  height: utils.module-val(scaffold, height, 100%),
+  width: utils.module-val(scaffold, width, 100%),
+  overflow: utils.module-val(scaffold, overflow, hidden),
+  body-position: utils.module-val(scaffold, body-position, relative),
+) !default;
+
+@function get($key) {
+  @return map.get($tokens, $key);
+}

src/lib/scaffold/_core.scss

@@ -0,0 +1,93 @@
+@use './token-utils' as *;
+
+@forward './token-utils';
+
+@mixin host {
+  display: block;
+
+  width: #{token(width)};
+  height: #{token(height)};
+}
+
+@mixin base {
+  position: relative;
+
+  display: grid;
+  grid-template-areas:
+    'left header right'
+    'left body right'
+    'left footer right';
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr auto;
+
+  height: #{token(height)};
+  width: #{token(width)};
+
+  overflow: #{token(overflow)};
+}
+
+@mixin header {
+  grid-area: header;
+  min-width: 0;
+  min-height: 0;
+}
+
+@mixin body {
+  position: #{token(body-position)};
+
+  display: grid;
+  grid-area: body;
+  grid-template-areas:
+    'body-left body-header body-right'
+    'body-left body-inner body-right'
+    'body-left body-footer body-right';
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: auto 1fr auto;
+
+  width: #{token(width)};
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+@mixin footer {
+  grid-area: footer;
+}
+
+@mixin body-header {
+  grid-area: body-header;
+}
+
+@mixin body-inner {
+  overflow: auto;
+  grid-area: body-inner;
+}
+
+@mixin body-footer {
+  grid-area: body-footer;
+}
+
+@mixin scrollable {
+  overflow: auto;
+}
+
+@mixin body-left {
+  grid-area: body-left;
+}
+
+@mixin body-right {
+  grid-area: body-right;
+}
+
+@mixin left {
+  grid-area: left;
+}
+
+@mixin right {
+  grid-area: right;
+}
+
+@mixin slotted-base {
+  min-width: 0;
+  min-height: 0;
+}

src/lib/scaffold/_token-utils.scss

@@ -0,0 +1,25 @@
+@use '../core/styles/tokens/scaffold/tokens';
+@use '../core/styles/tokens/token-utils';
+
+$_module: scaffold;
+$_tokens: tokens.$tokens;
+
+@mixin provide-theme($theme) {
+  @include token-utils.provide-theme($_module, $_tokens, $theme);
+}
+
+@function token($name, $type: token) {
+  @return token-utils.token($_module, $_tokens, $name, $type);
+}
+
+@function declare($token) {
+  @return token-utils.declare($_module, $token);
+}
+
+@mixin override($token, $token-or-value, $type: token) {
+  @include token-utils.override($_module, $_tokens, $token, $token-or-value, $type);
+}
+
+@mixin tokens($includes: null, $excludes: null) {
+  @include token-utils.tokens($_module, $_tokens, $includes, $excludes);
+}

src/lib/scaffold/index.scss

@@ -0,0 +1 @@
+@forward './core';

src/lib/scaffold/index.ts

@@ -1,5 +1,4 @@
 import { defineCustomElement } from '@tylertech/forge-core';
-
 import { ScaffoldComponent } from './scaffold';
 
 export * from './scaffold-constants';