fix(styles): typography use latest CSS

Author: castastrophe

.changeset/calm-taxes-lay.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.

.circleci/config.yml

@@ -14,7 +14,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: 728676ad885db988eb369dac901e9904bf6b79d2
+        default: b3342a5f378ee473443510bcbd28f80c10e29460
     wireit_cache_name:
         type: string
         default: wireit

packages/card/package.json

@@ -69,8 +69,7 @@
         "@spectrum-web-components/checkbox": "1.6.0",
         "@spectrum-web-components/divider": "1.6.0",
         "@spectrum-web-components/icons-workflow": "1.6.0",
-        "@spectrum-web-components/shared": "1.6.0",
-        "@spectrum-web-components/styles": "1.6.0"
+        "@spectrum-web-components/shared": "1.6.0"
     },
     "devDependencies": {
         "@spectrum-css/card": "11.1.0"

packages/card/src/Card.ts

@@ -34,8 +34,6 @@ import '@spectrum-web-components/checkbox/sp-checkbox.js';
 import '@spectrum-web-components/popover/sp-popover.js';
 import '@spectrum-web-components/divider/sp-divider.js';
 import cardStyles from './card.css.js';
-import headingStyles from '@spectrum-web-components/styles/heading.js';
-import detailStyles from '@spectrum-web-components/styles/detail.js';
 
 /**
  * @element sp-card
@@ -62,7 +60,7 @@ export class Card extends LikeAnchor(
     )
 ) {
     public static override get styles(): CSSResultArray {
-        return [headingStyles, detailStyles, cardStyles];
+        return [cardStyles];
     }
 
     @property()
@@ -209,10 +207,7 @@ export class Card extends LikeAnchor(
 
     protected get renderHeading(): TemplateResult {
         return html`
-            <div
-                class="title spectrum-Heading spectrum-Heading--sizeXS"
-                id="heading"
-            >
+            <div class="title" id="heading">
                 <slot name="heading">${this.heading}</slot>
             </div>
         `;
@@ -263,7 +258,7 @@ export class Card extends LikeAnchor(
 
     private get renderSubtitleAndDescription(): TemplateResult {
         return html`
-            <div class="subtitle spectrum-Detail spectrum-Detail--sizeS">
+            <div class="subtitle">
                 <slot name="subheading">${this.subheading}</slot>
             </div>
             <slot name="description"></slot>

packages/card/src/card.css

@@ -10,10 +10,10 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import url('./spectrum-card.css');
-@import url('./card-overrides.css');
+@import url("./spectrum-card.css");
+@import url("./card-overrides.css");
 
-:host([href]:not([href=''])) {
+:host([href]:not([href=""])) {
     cursor: pointer;
 }
 
@@ -27,29 +27,26 @@ governing permissions and limitations under the License.
     flex-grow: 0;
 }
 
-:host([dir='ltr']) .action-button {
+:host([dir="ltr"]) .action-button {
     margin-left: auto;
 }
 
-:host([dir='rtl']) .action-button {
+:host([dir="rtl"]) .action-button {
     margin-right: auto;
 }
 
-/* The description slot has a psuedo-element that also needs to receive the font styling. 
+/* The description slot has a psuedo-element that also needs to receive the font styling.
 We need to add the declaration to the slot as well */
-slot[name='description'] {
-    font-size: var(
-        --spectrum-card-subtitle-text-size,
-        var(--spectrum-font-size-50)
-    );
+slot[name="description"] {
+    font-size: var(--spectrum-card-subtitle-text-size, var(--spectrum-font-size-50));
 }
 
 #preview + #cover-photo {
     display: none;
 }
 
 #cover-photo ::slotted(*),
-:host(:not([variant='quiet'])) #preview ::slotted(*) {
+:host(:not([variant="quiet"])) #preview ::slotted(*) {
     width: 100%;
     display: block;
 
@@ -59,7 +56,7 @@ slot[name='description'] {
     object-fit: cover;
 }
 
-:host(:not([variant='gallery'])) #preview ::slotted(*) {
+:host(:not([variant="gallery"])) #preview ::slotted(*) {
     height: 100%;
 }
 
@@ -81,16 +78,18 @@ sp-popover {
 }
 
 /**
- * Allow that the heading element will take specified use of the available width whether 
+ * Allow that the heading element will take specified use of the available width whether
  * "actions" are supplied to the element or not.
  **/
 .title {
     width: var(--spectrum-card-title-width);
 }
 
 .subtitle {
-    /* Override until https://github.com/adobe/spectrum-css/issues/1054 is fixed */
-    text-transform: none;
+    font-family: var(--spectrum-sans-font-family-stack);
+    font-size: var(--spectrum-detail-size-s);
+    font-weight: var(--spectrum-detail-sans-serif-font-weight);
+    line-height: var(--spectrum-detail-line-height);
 }
 
 :host:before,

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];