chore(storybook): add custom styling and upgrade static color

Author: castastrophe

package.json

@@ -99,6 +99,7 @@
     "devDependencies": {
         "@changesets/changelog-github": "^0.5.0",
         "@changesets/cli": "^2.27.5",
+        "@chromatic-com/storybook": "^3.2.6",
         "@commitlint/cli": "^19.8.0",
         "@commitlint/config-conventional": "^19.8.0",
         "@custom-elements-manifest/analyzer": "^0.9.0",
@@ -112,16 +113,19 @@
         "@rollup/plugin-json": "^6.0.1",
         "@rollup/plugin-node-resolve": "^15.2.3",
         "@sindresorhus/slugify": "^2.1.1",
+        "@spectrum-css/preview": "^12.0.4",
         "@spectrum-web-components/eslint-plugin": "file:./linters/eslint",
         "@storybook/addon-a11y": "^8.6.12",
         "@storybook/addon-designs": "^8.2.1",
         "@storybook/addon-essentials": "^8.6.12",
         "@storybook/addon-interactions": "^8.6.12",
         "@storybook/addon-links": "^8.6.12",
+        "@storybook/addon-webpack5-compiler-babel": "^3.0.6",
         "@storybook/blocks": "^8.6.12",
         "@storybook/manager-api": "^8.6.12",
         "@storybook/theming": "^8.6.12",
         "@storybook/types": "^8.6.12",
+        "@storybook/web-components": "^8.6.12",
         "@storybook/web-components-webpack5": "^8.6.12",
         "@types/chai": "^4.1.7",
         "@types/command-line-args": "^5.0.0",
@@ -148,7 +152,7 @@
         "@yarnpkg/types": "^4.0.1",
         "alex": "^11.0.1",
         "cem-plugin-module-file-extensions": "^0.0.5",
-        "chromatic": "^11.20.0",
+        "chromatic": "^11.28.2",
         "chromedriver": "^134.0.5",
         "colors": "^1.4.0",
         "common-tags": "^1.8.2",

packages/accordion/stories/args.ts

@@ -10,6 +10,8 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
+import { size } from '@spectrum-css/preview/types';
+
 export const argTypes = {
     open: {
         name: 'open',
@@ -53,6 +55,7 @@ export const argTypes = {
         },
     },
     size: {
+        ...size(),
         name: 'size',
         type: { name: 'string', required: false },
         description: 'The size at which to display accordion items.',

packages/action-button/stories/action-button-black-quiet.stories.ts

@@ -10,14 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground } from '../../button/stories/index.js';
 import type { Properties } from './index.js';
 import { renderButtons } from './index.js';
 
 export default {
     component: 'sp-action-button',
     title: 'Action Button/Static Black Quiet',
-    decorators: [makeOverBackground('black')],
+    decorators: [],
 };
 
 const staticColor = 'black';

packages/action-button/stories/action-button-black.stories.ts

@@ -10,14 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground } from '../../button/stories/index.js';
 import type { Properties } from './index.js';
 import { renderButtons } from './index.js';
 
 export default {
     component: 'sp-action-button',
     title: 'Action Button/Static Black',
-    decorators: [makeOverBackground('black')],
+    decorators: [],
 };
 
 const staticColor = 'black';

packages/action-button/stories/action-button-white-quiet.stories.ts

@@ -10,14 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground } from '../../button/stories/index.js';
 import type { Properties } from './index.js';
 import { renderButtons } from './index.js';
 
 export default {
     component: 'sp-action-button',
     title: 'Action Button/Static White Quiet',
-    decorators: [makeOverBackground()],
+    decorators: [],
 };
 
 const staticColor = 'white';

packages/action-button/stories/action-button-white.stories.ts

@@ -10,14 +10,13 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground } from '../../button/stories/index.js';
 import type { Properties } from './index.js';
 import { renderButtons } from './index.js';
 
 export default {
     component: 'sp-action-button',
     title: 'Action Button/Static White',
-    decorators: [makeOverBackground()],
+    decorators: [],
 };
 
 const staticColor = 'white';

packages/action-menu/stories/action-menu.stories.ts

@@ -19,7 +19,6 @@ import '@spectrum-web-components/menu/sp-menu-item.js';
 import '@spectrum-web-components/menu/sp-menu.js';
 import { slottableRequest } from '@spectrum-web-components/overlay/src/slottable-request-directive.js';
 import '@spectrum-web-components/tooltip/sp-tooltip.js';
-import { makeOverBackground } from '../../button/stories/index.js';
 import { isOverlayOpen } from '../../overlay/stories/index.js';
 import { ActionMenuMarkup } from './';
 
@@ -194,13 +193,11 @@ export const staticWhite = (args: StoryArgs = {}): TemplateResult =>
 staticWhite.args = {
     staticValue: 'white',
 };
-staticWhite.decorators = [makeOverBackground()];
 export const staticBlack = (args: StoryArgs = {}): TemplateResult =>
     Template(args);
 staticBlack.args = {
     staticValue: 'black',
 };
-staticBlack.decorators = [makeOverBackground()];
 export const quiet = (args: StoryArgs = {}): TemplateResult => Template(args);
 quiet.args = {
     quiet: true,

packages/button/stories/button-black-fill-sizes.stories.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground, Properties, renderButtonSet } from './index.js';
+import { Properties, renderButtonSet } from './index.js';
 import { args, argTypes } from './index.js';
 
 const variant = 'black';
@@ -19,7 +19,6 @@ const treatment = 'fill';
 export default {
     component: 'sp-button',
     title: 'Button/Black/Fill/Sizes',
-    decorators: [makeOverBackground(variant)],
     args: {
         ...args,
         variant,

packages/button/stories/button-black-fill.stories.ts

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
 import {
-    makeOverBackground,
     renderButtonSet,
     renderLink,
     renderLinkWithTarget,
@@ -29,7 +28,6 @@ const treatment = 'fill';
 export default {
     component: 'sp-button',
     title: 'Button/Black/Fill',
-    decorators: [makeOverBackground(staticColor)],
     args: {
         ...args,
         staticColor,

packages/button/stories/button-black-outline-sizes.stories.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground, Properties, renderButtonSet } from './index.js';
+import { Properties, renderButtonSet } from './index.js';
 import { args, argTypes } from './index.js';
 
 const variant = 'black';
@@ -19,7 +19,6 @@ const treatment = 'outline';
 export default {
     component: 'sp-button',
     title: 'Button/Black/Outline/Sizes',
-    decorators: [makeOverBackground(variant)],
     args: {
         ...args,
         variant,

packages/button/stories/button-black-outline.stories.ts

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
 import {
-    makeOverBackground,
     renderButtonSet,
     renderLink,
     renderLinkWithTarget,
@@ -29,7 +28,6 @@ const treatment = 'outline';
 export default {
     component: 'sp-button',
     title: 'Button/Black/Outline',
-    decorators: [makeOverBackground(staticColor)],
     args: {
         ...args,
         staticColor,

packages/button/stories/button-white-fill-sizes.stories.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground, Properties, renderButtonSet } from './index.js';
+import { Properties, renderButtonSet } from './index.js';
 import { args, argTypes } from './index.js';
 
 const variant = 'white';
@@ -19,7 +19,6 @@ const treatment = 'fill';
 export default {
     component: 'sp-button',
     title: 'Button/White/Fill/Sizes',
-    decorators: [makeOverBackground()],
     args: {
         ...args,
         variant,

packages/button/stories/button-white-fill.stories.ts

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
 import {
-    makeOverBackground,
     renderButtonSet,
     renderLink,
     renderLinkWithTarget,
@@ -29,7 +28,6 @@ const treatment = 'fill';
 export default {
     component: 'sp-button',
     title: 'Button/White/Fill',
-    decorators: [makeOverBackground(staticColor)],
     args: {
         ...args,
         staticColor,

packages/button/stories/button-white-outline-sizes.stories.ts

@@ -10,7 +10,7 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground, Properties, renderButtonSet } from './index.js';
+import { Properties, renderButtonSet } from './index.js';
 import { args, argTypes } from './index.js';
 
 const variant = 'white';
@@ -19,7 +19,6 @@ const treatment = 'outline';
 export default {
     component: 'sp-button',
     title: 'Button/White/Outline/Sizes',
-    decorators: [makeOverBackground()],
     args: {
         ...args,
         variant,

packages/button/stories/button-white-outline.stories.ts

@@ -11,7 +11,6 @@ governing permissions and limitations under the License.
 */
 import { TemplateResult } from '@spectrum-web-components/base';
 import {
-    makeOverBackground,
     renderButtonSet,
     renderLink,
     renderLinkWithTarget,
@@ -29,7 +28,6 @@ const treatment = 'outline';
 export default {
     component: 'sp-button',
     title: 'Button/White/Outline',
-    decorators: [makeOverBackground(staticColor)],
     args: {
         ...args,
         staticColor,

packages/button/stories/index.ts

@@ -88,26 +88,6 @@ export const argTypes = {
     },
 };
 
-export const makeOverBackground =
-    (staticColor?: 'white' | 'black') =>
-    (story: () => TemplateResult): TemplateResult => {
-        const color =
-            staticColor === 'black'
-                ? 'var(--spectrum-docs-static-black-background-color)'
-                : 'var(--spectrum-docs-static-white-background-color)';
-        return html`
-            <div
-                style="
-                    background-color: ${color};
-                    padding: calc(var(--swc-scale-factor) * 14px) calc(var(--swc-scale-factor) * 20px);
-                    display: inline-block;
-                "
-            >
-                ${story()}
-            </div>
-        `;
-    };
-
 export function renderButton(properties: Properties): TemplateResult {
     return html`
         <sp-button

packages/coachmark/stories/coach-indicator-static.stories.ts

@@ -11,13 +11,11 @@ governing permissions and limitations under the License.
 */
 
 import { html, TemplateResult } from '@spectrum-web-components/base';
-import { makeOverBackground } from '../../button/stories/index.js';
 import '@spectrum-web-components/coachmark/sp-coach-indicator.js';
 
 export default {
     title: 'CoachIndicator',
     component: 'sp-coach-indicator',
-    decorators: [makeOverBackground()],
 };
 
 export const staticWhite = (): TemplateResult => {

packages/meter/stories/meter.stories.ts

@@ -19,29 +19,6 @@ export default {
     component: 'sp-meter',
 };
 
-const makeOverBackground =
-    (variant?: 'white' | 'black') =>
-    (story: () => TemplateResult): TemplateResult => {
-        const color =
-            variant === 'black'
-                ? 'rgb(181, 209, 211)'
-                : 'var(--spectrum-seafoam-900)';
-        return html`
-            <div
-                style="
-                    --mod-actionbutton-static-content-color: ${color};
-                    --mod-button-static-content-color: ${color};
-                    background-color: ${color};
-                    color: ${color};
-                    padding: var(--spectrum-font-size-100) var(--spectrum-font-size-400);
-                    display: inline-block;
-                "
-            >
-                ${story()}
-            </div>
-        `;
-    };
-
 export const sideLabel = (): TemplateResult => {
     return html`
         <sp-meter side-label progress="50">Storage Space</sp-meter>
@@ -67,11 +44,7 @@ export const positive = (): TemplateResult => {
 };
 
 export const staticWhite = (): TemplateResult => {
-    return makeOverBackground('white')(
-        (): TemplateResult => html`
-            <sp-meter static-color="white" progress="50">
-                Storage Space
-            </sp-meter>
-        `
-    );
+    return html`
+        <sp-meter static-color="white" progress="50">Storage Space</sp-meter>
+    `;
 };