fix(styles): typography use latest CSS

Author: castastrophe

.changeset/new-roses-nail.md

@@ -0,0 +1,5 @@
+---
+'@spectrum-web-components/styles': patch
+---
+
+Remove unnecessary system theme references to reduce complexity for components that don't need the additional mapping layer.

projects/documentation/src/components/styles.css

@@ -15,11 +15,8 @@ governing permissions and limitations under the License.
 @import '@spectrum-web-components/styles/tokens/spectrum/custom-vars.css';
 @import '@spectrum-web-components/styles/tokens/spectrum/system-theme-bridge.css';
 @import '@spectrum-web-components/styles/src/spectrum-heading.css';
-@import '@spectrum-web-components/styles/src/heading-overrides.css';
 @import '@spectrum-web-components/styles/src/spectrum-body.css';
-@import '@spectrum-web-components/styles/src/body-overrides.css';
 @import '@spectrum-web-components/styles/src/spectrum-code.css';
-@import '@spectrum-web-components/styles/src/code-overrides.css';
 @import '@spectrum-web-components/opacity-checkerboard/src/spectrum-opacity-checkerboard.css';
 @import './inline-alert.css';
 @import './fonts.css';

scripts/spectrum-vars.js

@@ -116,15 +116,12 @@ const processCSS = async (
 
 const processTypography = async (
     baseSrcPath,
-    overridesSrcPath,
     dstPath,
     identifier,
     from,
     usedVariables = undefined
 ) => {
-    const baseData = fs.readFileSync(baseSrcPath, 'utf8');
-    const overridesData = fs.readFileSync(overridesSrcPath, 'utf8');
-    const data = baseData + overridesData;
+    const data = fs.readFileSync(baseSrcPath, 'utf8');
     const result = await processCSSData(data, identifier, from, usedVariables);
     fs.writeFileSync(dstPath, result, 'utf8');
 
@@ -214,20 +211,12 @@ async function processSpectrumVars() {
             'typography',
             'dist'
         );
-        const baseSrcPath = path.join(typographyPath, 'index-base.css');
-        const overridesSrcPath = path.join(typographyPath, 'index-theme.css');
+        const baseSrcPath = path.join(typographyPath, 'index.css');
         const dstPath = path.resolve(
             path.join(__dirname, '..', 'tools', 'styles', 'typography.css')
         );
         console.log(`processing typography`);
-        processes.push(
-            processTypography(
-                baseSrcPath,
-                overridesSrcPath,
-                dstPath,
-                'typography'
-            )
-        );
+        processes.push(processTypography(baseSrcPath, dstPath, 'typography'));
     }
 
     await Promise.all(processes).then(() => {

tasks/process-spectrum.js

@@ -162,19 +162,18 @@ async function processComponent(componentPath) {
      * @type { import('./spectrum-css-converter').SpectrumCSSConverter}
      */
     for await (const conversion of conversions) {
-        // The default package file is index.css but index-base.css contains the base styles compatible with theme switching.
-        let sourcePath = require
-            .resolve(conversion.inPackage)
-            .replace('index.css', 'index-base.css');
-
+        // The default package file is index.css
+        const sourcePath = require.resolve(conversion.inPackage);
         let sourceCSS = '';
 
-        // try to find the index-base.css file
-        try {
-            sourceCSS = fs.readFileSync(sourcePath, 'utf-8');
-        } catch (error) {
+        // index-base.css contains the base styles compatible with theme switching
+        if (fs.existsSync(sourcePath.replace('index.css', 'index-base.css'))) {
+            sourceCSS = fs.readFileSync(
+                sourcePath.replace('index.css', 'index-base.css'),
+                'utf-8'
+            );
+        } else {
             // if failed, try to find the index.css file
-            sourcePath = require.resolve(conversion.inPackage);
             sourceCSS = fs.readFileSync(sourcePath, 'utf-8');
         }
 

tools/styles/body.ts

@@ -11,23 +11,7 @@ governing permissions and limitations under the License.
 */
 
 import baseStyles from './src/spectrum-base.css.js';
-import langBaseStyles from './src/spectrum-lang.css.js';
-import langOverrides from './src/lang-overrides.css.js';
-import bodyBaseStyles from './src/spectrum-body.css.js';
-import bodyOverrides from './src/body-overrides.css.js';
-
-import { css } from 'lit';
-
-// bodyStyles is a combination of bodyBaseStyles and bodyOverrides
-const bodyStyles = css`
-    ${bodyBaseStyles}
-    ${bodyOverrides}
-`;
-
-// langStyles is a combination of langBaseStyles and langOverrides
-const langStyles = css`
-    ${langBaseStyles}
-    ${langOverrides}
-`;
+import langStyles from './src/spectrum-lang.css.js';
+import bodyStyles from './src/spectrum-body.css.js';
 
 export default [baseStyles, langStyles, bodyStyles];

tools/styles/code.ts

@@ -11,21 +11,7 @@ governing permissions and limitations under the License.
 */
 
 import baseStyles from './src/spectrum-base.css.js';
-import langBaseStyles from './src/spectrum-lang.css.js';
-import langOverrides from './src/lang-overrides.css.js';
-import codeBaseStyles from './src/spectrum-code.css.js';
-import codeOverrides from './src/code-overrides.css.js';
-
-import { css } from 'lit';
-
-const langStyles = css`
-    ${langBaseStyles}
-    ${langOverrides}
-`;
-
-const codeStyles = css`
-    ${codeBaseStyles}
-    ${codeOverrides}
-`;
+import langStyles from './src/spectrum-lang.css.js';
+import codeStyles from './src/spectrum-code.css.js';
 
 export default [baseStyles, langStyles, codeStyles];

tools/styles/detail.ts

@@ -11,21 +11,7 @@ governing permissions and limitations under the License.
 */
 
 import baseStyles from './src/spectrum-base.css.js';
-import langBaseStyles from './src/spectrum-lang.css.js';
-import langOverrides from './src/lang-overrides.css.js';
-import detailBaseStyles from './src/spectrum-detail.css.js';
-import detailOverrides from './src/detail-overrides.css.js';
-
-import { css } from 'lit';
-
-const langStyles = css`
-    ${langBaseStyles}
-    ${langOverrides}
-`;
-
-const detailStyles = css`
-    ${detailBaseStyles}
-    ${detailOverrides}
-`;
+import langStyles from './src/spectrum-lang.css.js';
+import detailStyles from './src/spectrum-detail.css.js';
 
 export default [baseStyles, langStyles, detailStyles];