Create the global-css package

The intent of this package is to wrap up a reset, CSS custom properties
from Rubin Style Dictionary, and application of those tokens to HTML
elements into a single bundled styledsheet.

This replaces our use of styled-components global styles.

The first distributed output is for next.js applications but potentially
we could create specialized outputs for other projects.

.changeset/cool-experts-sniff.md

@@ -0,0 +1,5 @@
+---
+'@lsst-sqre/global-css': minor
+---
+
+Created the global-css package to bundle base CSS stylesheets for Squareone applications.

README.md

@@ -12,6 +12,7 @@ Squareone is a monorepo for [Rubin Observatory](https://rubinobservatory.org) Da
 
 ## Packages in Squareone
 
+- `@lsst-sqre/global-css` provides base global stylesheets for Squareone applications. These base CSS files mix in a basic reset, CSS custom properties from the Rubin Style Dictionary, and application of these properties to HTML elements.
 - `@lsst-sqre/eslint-config` is a shared ESLint configuration for Squareone applications and packages.
 - `@lsst-sqre/rubin-style-dictonary` is a design token package based on the [Rubin Observatory Visual Identity Manual](https://docushare.lsst.org/docushare/dsweb/Get/Document-37294/20210212%20Visual%20Identity%20Manual%20—V7.pdf), build with [style-dictionary](https://amzn.github.io/style-dictionary/).
 - `@lsst-sqre/squared` is a React component library for Squareone's applications. Squared implements the Rubin Observatory Visual Identity Manual via design tokens from the Rubin Style Dictionary (`@lsst-sqre/rubin-style-dictionary`).

packages/global-css/README.md

@@ -0,0 +1,32 @@
+# @lsst-sqre/global-css
+
+This package provides global CSS for Squareone applications. These base CSS files mix in a basic reset, CSS custom properties from the Rubin Style Dictionary, and application of these properties to HTML elements.
+
+## Installation
+
+Link to this package in your application's `package.json`:
+
+```json
+{
+  "dependencies": {
+    "@lsst-sqre/global-css": "workspace:*"
+  }
+}
+```
+
+## Usage
+
+### Next.js applications
+
+In your Next.js application, import the CSS file in your `_app.ts` file:
+
+```js
+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';
+```
+
+The imports from `@fontsource` provide the Source Sans Pro font family.
+
+For Storybook, repeat the above imports, but in `.storybook/preview.js`.

packages/global-css/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@lsst-sqre/global-css",
+  "description": "Global stylesheets for Squareone projects.",
+  "version": "0.0.0",
+  "main": "./dist/next.css",
+  "license": "MIT",
+  "repository": "https://github.com/lsst-sqre/squareone",
+  "keywords": [
+    "rubin-observatory",
+    "design-tokens"
+  ],
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "lightningcss --minify --bundle --targets '>= 0.25%' src/next.css -o dist/next.css",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@lsst-sqre/rubin-style-dictionary": "workspace:*"
+  },
+  "devDependencies": {
+    "lightningcss": "^1.21.5",
+    "lightningcss-cli": "^1.21.5"
+  }
+}

packages/global-css/src/base.css

@@ -0,0 +1,53 @@
+/*
+ * The base applies design tokens from the Rubin Style Dictionary.
+ * onto HTML elements.
+ */
+
+:root {
+  /*
+   * Reinforce that we're respecting the user's ability to set a default
+   * font size. The rem unit now becomes relative to this.
+   * Flexible Typesetting, Tim Brown, ch 2 and 4
+   */
+  font-size: 1.1rem;
+}
+
+html,
+body {
+  padding: 0;
+  margin: 0;
+  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, Segoe UI,
+    Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue,
+    sans-serif;
+  line-height: 1.4;
+  color: var(--rsd-component-text-color);
+  background-color: var(--rsd-component-page-background-color);
+}
+
+h1,
+h2 {
+  color: var(--rsd-component-text-headline-color);
+}
+
+a {
+  color: var(--rsd-component-text-link-color);
+  text-decoration: none;
+}
+
+a:hover {
+  color: var(--rsd-component-text-link-hover-color);
+}
+
+/*
+ * Images that can be inverted to accommodate dark themes.
+ */
+img.u-invertable-image {
+  filter: invert(var(--rsd-component-image-invert));
+}
+
+/*
+ * Design token overrides for dark theme.
+ */
+[data-theme='dark'] body {
+  --rsd-component-image-invert: 100%;
+}

packages/global-css/src/next.css

@@ -0,0 +1,19 @@
+/*
+Base stylesheet for Squareone Next.js apps. This is intended to be imported
+from _app.js.
+*/
+/*
+@import './reset.css';
+@import '@lsst-sqre/rubin-style-dictionary/dist/tokens.css';
+@import '@lsst-sqre/rubin-style-dictionary/dist/tokens.dark.css';
+@import './base.css';
+*/
+
+@import './reset.css';
+
+/* Lightning CSS doesn't resolve imports to node_modules, so we have to
+   import the tokens.css file from the node_modules directory. */
+@import '../node_modules/@lsst-sqre/rubin-style-dictionary/dist/tokens.css';
+@import '../node_modules/@lsst-sqre/rubin-style-dictionary/dist/tokens.dark.css';
+
+@import './base.css';

packages/global-css/src/reset.css

@@ -0,0 +1,70 @@
+/* Style reset */
+
+html {
+  box-sizing: border-box;
+}
+
+/*
+ * CSS reset. This are influenced by Josh Comeau's:
+ * https://www.joshwcomeau.com/css/custom-css-reset/
+ */
+
+/*
+ * Inherit border-box sizing from html
+ * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
+ */
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+/*
+ * Remove default margin.
+ */
+* {
+  margin: 0;
+}
+
+/*
+ * I'm undecided on this one; it makes Source Sans Pro 400 really thing.
+ * on the other hand maybe its an indication to switch to 500 for the body?
+ */
+/* html {
+  -webkit-font-smoothing: antialiased;
+} */
+
+/*
+ * Improve media defaults
+ */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/*
+ * Remove built-in form typography styles
+ */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/*
+ * Avoid text overflows
+ */
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}