Adopt global-css in Squared and Squareone

This drops the initiative to build a GlobalStyles component in squared
and instead switches us back to using a CSS import for the global style.

The main benefit of this final arrangement is that now we can but all
the business of integrating Rubin Style Dictionary components into the
global CSS into a dedicated CSS module, global-css, rather than needing
to do it in every application.

A limitation of this approach is that we're still not centralizing the
font import; but I'm not sure there's a good way to do that. We'll just
have to document how we load fonts. And with variable fonts this might
become easier too.

.changeset/afraid-spoons-marry.md

@@ -0,0 +1,5 @@
+---
+'squareone': minor
+---
+
+Squareone uses a base stylesheet from the @lsst-sqre/global-css package. This reduces the amount of global CSS managed in Squareone itself, and offloads configuring the Rubin Style Dictionary tokens into base CSS elements.

apps/squareone/.storybook/preview.js

@@ -10,13 +10,10 @@ import '@fontsource/source-sans-pro/700.css';
 // Global CSS
 import 'normalize.css';
 import '@fortawesome/fontawesome-svg-core/styles.css';
-// import '@lsst-sqre/rubin-style-dictionary/dist/tokens.css';
-// import '@lsst-sqre/rubin-style-dictionary/dist/tokens.dark.css';
+import '@lsst-sqre/global-css/dist/next.css';
 import '../src/styles/globals.css';
 import '../src/styles/icons';
 
-import { withGlobalStyles } from './decorators';
-
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   controls: {
@@ -26,5 +23,3 @@ export const parameters = {
     },
   },
 };
-
-export const decorators = [withGlobalStyles];

apps/squareone/package.json

@@ -39,6 +39,7 @@
     "@fortawesome/fontawesome-svg-core": "^6.3.0",
     "@fortawesome/free-solid-svg-icons": "^6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@lsst-sqre/global-css": "workspace:*",
     "@lsst-sqre/rubin-style-dictionary": "workspace:*",
     "@lsst-sqre/squared": "workspace:*",
     "@reach/alert": "^0.17.0",

apps/squareone/src/pages/_app.js

@@ -10,13 +10,11 @@ import '@fontsource/source-sans-pro/400-italic.css';
 import '@fontsource/source-sans-pro/700.css';
 import 'normalize.css';
 import '@fortawesome/fontawesome-svg-core/styles.css';
-// import '@lsst-sqre/rubin-style-dictionary/dist/tokens.css';
-// import '@lsst-sqre/rubin-style-dictionary/dist/tokens.dark.css';
+import '@lsst-sqre/global-css/dist/next.css';
 import '../styles/globals.css';
 import '../styles/icons';
 
 import Page from '../components/Page';
-import { GlobalStyles } from '@lsst-sqre/squared';
 
 function MyApp({ Component, pageProps, baseUrl, semaphoreUrl }) {
   // Use the content layout defined by the page component, if avaialble.
@@ -26,7 +24,6 @@ function MyApp({ Component, pageProps, baseUrl, semaphoreUrl }) {
   /* eslint-disable react/jsx-props-no-spreading */
   return (
     <ThemeProvider defaultTheme="system">
-      <GlobalStyles />
       <Page baseUrl={baseUrl} semaphoreUrl={semaphoreUrl}>
         {getLayout(<Component {...pageProps} />)}
       </Page>

apps/squareone/src/styles/globals.css

@@ -72,7 +72,6 @@
   --sqo-transition-basic: 0.3s ease all;
 }
 
-
 /*
  * Design token overrides for dark theme.
  */

packages/squared/.storybook/preview.ts

@@ -1,11 +1,11 @@
 import type { Preview } from '@storybook/react';
 import { withThemeByDataAttribute } from '@storybook/addon-styling';
-import { withGlobalStyles } from './decorators';
 
 // Import font assets and stylesheets with @font-face declarations
 import '@fontsource/source-sans-pro/400.css';
 import '@fontsource/source-sans-pro/400-italic.css';
 import '@fontsource/source-sans-pro/700.css';
+import '@lsst-sqre/global-css/dist/next.css';
 
 const preview: Preview = {
   parameters: {
@@ -26,7 +26,6 @@ export default preview;
 // ThemeProvider directly; see
 // https://github.com/storybookjs/addon-styling/blob/next/docs/api.md#withthemefromjsxprovider
 export const decorators = [
-  withGlobalStyles,
   withThemeByDataAttribute({
     themes: {
       light: 'light',

packages/squared/package.json

@@ -25,6 +25,7 @@
   "dependencies": {
     "@fontsource/source-sans-pro": "^4.5.11",
     "@lsst-sqre/rubin-style-dictionary": "workspace:*",
+    "@lsst-sqre/global-css": "workspace:*",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "styled-components": "^5.3.6"

packages/squared/src/index.tsx

@@ -1,4 +1,3 @@
 import React from 'react';
 
 export { Button, type ButtonProps } from './Button';
-export { GlobalStyles } from './styles';