fix: support --spectrum-global-dimension-dividers token

adobe · Jan 4, 2022 · 59fda81 · 59fda81
1 parent 0208d97
commit 59fda81
Show file tree

Hide file tree

Showing 8 changed files with 10,444 additions and 10,338 deletions.
diff --git a/packages/styles/scale-large.css b/packages/styles/scale-large.css
diff --git a/packages/styles/scale-medium.css b/packages/styles/scale-medium.css
diff --git a/packages/styles/spectrum-scale-large.css b/packages/styles/spectrum-scale-large.css
diff --git a/packages/styles/spectrum-scale-medium.css b/packages/styles/spectrum-scale-medium.css
diff --git a/packages/styles/stories/styles.stories.ts b/packages/styles/stories/styles.stories.ts
@@ -0,0 +1,56 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { html, TemplateResult } from '@spectrum-web-components/base';
+
+export default {
+    title: 'Styles',
+};
+
+export const dividers = (): TemplateResult => html`
+    <style>
+        .app-dividers {
+            display: grid;
+            position: absolute;
+            inset: 0;
+            grid-template-areas:
+                'header header header'
+                'toolbar main properties';
+            grid-template-columns: 50px 1fr 250px;
+            grid-template-rows: 50px 1fr;
+            gap: var(--spectrum-global-dimension-dividers);
+            background: var(--spectrum-alias-background-color-tertiary);
+        }
+        header, aside {
+            background: var(--spectrum-alias-background-color-secondary);
+        }
+        header {
+            grid-area: header;
+        }
+        header + aside {
+            grid-area: toolbar;
+        }
+        main {
+            grid-area: main;
+            background: var(--spectrum-alias-background-color-primary);
+        }
+        main + aside {
+            grid-area: properties;
+        }
+    </style>
+    <div class="app-dividers">
+        <header></header>
+        <aside></aside>
+        <main></main>
+        <aside></aside>
+    </div>
+`;
diff --git a/scripts/spectrum-vars.js b/scripts/spectrum-vars.js
@@ -126,7 +126,13 @@ themes.forEach(async (theme) => {
 scales.forEach(async (scale) => {
     const srcPath = path.join(spectrumPath, `spectrum-${scale}.css`);
     const dstPath = path.resolve(
-        path.join(__dirname, '..', 'packages', 'styles', `scale-${scale}.css`)
+        path.join(
+            __dirname,
+            '..',
+            'packages',
+            'styles',
+            `spectrum-scale-${scale}.css`
+        )
     );
     console.log(`processing scale  ${srcPath}`);
     processes.push(await processCSS(srcPath, dstPath, scale));

diff --git a/test/visual/create.js b/test/visual/create.js
@@ -11,10 +11,13 @@ governing permissions and limitations under the License.
 */
 import fs from 'fs';
 import globby from 'globby';
+import path from 'path';
 
 async function main() {
-    for await (const path of globby.stream(`packages/*/stories/*.stories.ts`)) {
-        const pathParts = path.split('/');
+    for await (const storyPath of globby.stream(
+        `packages/*/stories/*.stories.ts`
+    )) {
+        const pathParts = storyPath.split('/');
         const packageName = pathParts[1];
         const stories = pathParts[3].replace('.stories.ts', '');
         const name =
@@ -44,9 +47,12 @@ import { regressVisuals } from '../../../test/visual/test.js';
 
 regressVisuals('${name}', stories);
 `;
+        const directory = path.join('packages', packageName, 'test');
+        fs.mkdirSync(directory, { recursive: true });
         fs.writeFileSync(
-            `packages/${packageName}/test/${stories}.test-vrt.ts`,
-            testString
+            path.join(directory, `${stories}.test-vrt.ts`),
+            testString,
+            { recursive: true }
         );
     }
 }

diff --git a/web-test-runner.utils.js b/web-test-runner.utils.js
@@ -18,8 +18,10 @@ export const packages = fs
     .readdirSync('packages')
     .filter((dir) => fs.statSync(`packages/${dir}`).isDirectory());
 
-const vrtHTML = ({ color, scale, dir, reduceMotion }) => (testFramework) =>
-    `<!doctype html>
+const vrtHTML =
+    ({ color, scale, dir, reduceMotion }) =>
+    (testFramework) =>
+        `<!doctype html>
     <html dir=${dir}>
         <head>
             <link rel="preconnect" href="https://use.typekit.net" />
@@ -75,7 +77,7 @@ colors.forEach((color) => {
 vrtGroups = [
     ...vrtGroups,
     ...packages.reduce((acc, pkg) => {
-        const skipPkgs = ['bundle', 'modal', 'styles'];
+        const skipPkgs = ['bundle', 'modal'];
         if (!skipPkgs.includes(pkg)) {
             acc.push({
                 name: `vrt-${pkg}`,