feat(styles): vend CSS literal versions of the typography system

adobe · Jan 4, 2021 · 6406c96 · 6406c96
1 parent 664a172
commit 6406c96
Show file tree

Hide file tree

Showing 24 changed files with 3,259 additions and 164 deletions.
diff --git a/packages/card/package.json b/packages/card/package.json
@@ -58,6 +58,7 @@
         "@spectrum-web-components/icons-workflow": "^0.3.6",
         "@spectrum-web-components/quick-actions": "^0.1.3",
         "@spectrum-web-components/shared": "^0.7.4",
+        "@spectrum-web-components/styles": "^0.6.1",
         "tslib": "^2.0.0"
     }
 }
diff --git a/packages/card/src/Card.ts b/packages/card/src/Card.ts
@@ -22,11 +22,12 @@ import {
 import { FocusVisiblePolyfillMixin } from '@spectrum-web-components/shared/src/focus-visible.js';
 import '@spectrum-web-components/asset/sp-asset.js';
 
-// import { MoreIcon } from '@spectrum-web-components/icons-workflow';
+import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';
 import '@spectrum-web-components/checkbox/sp-checkbox.js';
 import '@spectrum-web-components/quick-actions/sp-quick-actions.js';
 import cardStyles from './card.css.js';
-import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';
+import headingStyles from '@spectrum-web-components/styles/heading.js';
+import detailStyles from '@spectrum-web-components/styles/detail.js';
 
 /**
  * @element sp-card
@@ -42,7 +43,7 @@ import { Checkbox } from '@spectrum-web-components/checkbox/src/Checkbox';
  */
 export class Card extends FocusVisiblePolyfillMixin(SpectrumElement) {
     public static get styles(): CSSResultArray {
-        return [cardStyles];
+        return [headingStyles, detailStyles, cardStyles];
     }
 
     @property()
@@ -133,7 +134,7 @@ export class Card extends FocusVisiblePolyfillMixin(SpectrumElement) {
 
     protected get renderHeading(): TemplateResult {
         return html`
-            <div class="title">
+            <div class="title spectrum-Heading spectrum-Heading--sizeXS">
                 <slot name="heading">
                     ${this.heading}
                 </slot>
@@ -163,6 +164,17 @@ export class Card extends FocusVisiblePolyfillMixin(SpectrumElement) {
         return this.renderPreviewImage;
     }
 
+    private get renderSubtitleAndDescription(): TemplateResult {
+        return html`
+            <div class="subtitle spectrum-Detail spectrum-Detail--sizeS">
+                <slot name="subheading">
+                    ${this.subheading}
+                </slot>
+            </div>
+            <slot name="description"></slot>
+        `;
+    }
+
     protected render(): TemplateResult {
         return html`
             ${this.toggles
@@ -191,14 +203,7 @@ export class Card extends FocusVisiblePolyfillMixin(SpectrumElement) {
                 <div class="header">
                     ${this.renderHeading}
                     ${this.variant === 'gallery'
-                        ? html`
-                              <div class="subtitle">
-                                  <slot name="subheading">
-                                      ${this.subheading}
-                                  </slot>
-                              </div>
-                              <slot name="description"></slot>
-                          `
+                        ? this.renderSubtitleAndDescription
                         : html``}
                     ${this.variant !== 'quiet' || !this.small
                         ? html`
@@ -211,12 +216,7 @@ export class Card extends FocusVisiblePolyfillMixin(SpectrumElement) {
                 ${this.variant !== 'gallery'
                     ? html`
                           <div class="content">
-                              <div class="subtitle">
-                                  <slot name="subheading">
-                                      ${this.subheading}
-                                  </slot>
-                              </div>
-                              <slot name="description"></slot>
+                              ${this.renderSubtitleAndDescription}
                           </div>
                       `
                     : html``}

diff --git a/packages/card/src/card.css b/packages/card/src/card.css
@@ -55,68 +55,6 @@ sp-quick-actions {
  **/
 .title {
     width: var(--spectrum-card-title-width);
-
-    /* Appliction of typography "classes" */
-    font-family: var(
-        --spectrum-heading-m-text-font-family,
-        var(--spectrum-alias-body-text-font-family)
-    );
-    font-weight: var(
-        --spectrum-heading-m-text-font-weight,
-        var(--spectrum-alias-heading-text-font-weight-regular)
-    );
-    line-height: var(
-        --spectrum-heading-xs-text-line-height,
-        var(--spectrum-alias-heading-text-line-height)
-    );
-    font-style: var(
-        --spectrum-heading-xs-text-font-style,
-        var(--spectrum-global-font-style-regular)
-    );
-    font-size: var(
-        --spectrum-heading-xs-text-size,
-        var(--spectrum-alias-heading-xs-text-size)
-    );
-    letter-spacing: var(
-        --spectrum-heading-xs-text-letter-spacing,
-        var(--spectrum-global-font-letter-spacing-none)
-    );
-    color: var(
-        --spectrum-heading-xs-text-color,
-        var(--spectrum-alias-heading-text-color)
-    );
-    text-transform: var(--spectrum-heading-xs-text-transform, none);
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-.subtitle {
-    font-family: var(
-        --spectrum-heading-m-text-font-family,
-        var(--spectrum-alias-body-text-font-family)
-    );
-    font-size: var(
-        --spectrum-detail-s-text-size,
-        var(--spectrum-global-dimension-font-size-50)
-    );
-    font-weight: var(
-        --spectrum-detail-s-text-font-weight,
-        var(--spectrum-alias-detail-text-font-weight)
-    );
-    line-height: var(
-        --spectrum-detail-s-text-line-height,
-        var(--spectrum-alias-body-text-line-height)
-    );
-    font-style: var(
-        --spectrum-detail-s-text-font-style,
-        var(--spectrum-global-font-style-regular)
-    );
-    letter-spacing: var(
-        --spectrum-detail-s-text-letter-spacing,
-        var(--spectrum-global-font-letter-spacing-medium)
-    );
-    margin-top: 0;
-    margin-bottom: 0;
 }
 
 .subtitle {

diff --git a/packages/card/tsconfig.json b/packages/card/tsconfig.json
@@ -9,6 +9,7 @@
     "references": [
         { "path": "../base" },
         { "path": "../icons-workflow" },
-        { "path": "../shared" }
+        { "path": "../shared" },
+        { "path": "../styles" }
     ]
 }
diff --git a/packages/illustrated-message/package.json b/packages/illustrated-message/package.json
@@ -53,6 +53,7 @@
     },
     "dependencies": {
         "@spectrum-web-components/base": "^0.1.3",
+        "@spectrum-web-components/styles": "^0.6.1",
         "tslib": "^2.0.0"
     }
 }
diff --git a/packages/illustrated-message/src/IllustratedMessage.ts b/packages/illustrated-message/src/IllustratedMessage.ts
@@ -19,6 +19,8 @@ import {
 } from '@spectrum-web-components/base';
 
 import messageStyles from './illustrated-message.css.js';
+import headingStyles from '@spectrum-web-components/styles/heading.js';
+import bodyStyles from '@spectrum-web-components/styles/body.js';
 
 /**
  * @slot - The SVG that represents the illustration
@@ -28,7 +30,7 @@ export class IllustratedMessage extends SpectrumElement {
     public static readonly is = 'sp-illustrated-message';
 
     public static get styles(): CSSResultArray {
-        return [messageStyles];
+        return [headingStyles, bodyStyles, messageStyles];
     }
 
     @property()
@@ -40,8 +42,13 @@ export class IllustratedMessage extends SpectrumElement {
     protected render(): TemplateResult {
         return html`
             <div id="illustration"><slot></slot></div>
-            <h2 id="heading"><slot name="heading">${this.heading}</slot></h2>
-            <div id="description">
+            <h2
+                id="heading"
+                class="spectrum-Heading spectrum-Heading--sizeL spectrum-Heading--light"
+            >
+                <slot name="heading">${this.heading}</slot>
+            </h2>
+            <div id="description" class="spectrum-Body spectrum-Body--sizeS">
                 <slot name="description">${this.description}</slot>
             </div>
         `;

diff --git a/packages/illustrated-message/src/illustrated-message.css b/packages/illustrated-message/src/illustrated-message.css
@@ -12,85 +12,6 @@ governing permissions and limitations under the License.
 
 @import './spectrum-illustratedmessage.css';
 
-/* 
-    @TODO: Implement spectrum typography components (ex: specturm-heading, spectrum-body)
-
-    The following block maps to the .spectrum-Heading--pageTitle selector 
-    in spectrum-css/dist/components/typography
-
-    The css in that folder defines multiple typography classes, such as
-    .spectrum-Heading and .spectrum-Body
-
-    These components need to be implemented in another pass
-*/
-#heading {
-    font-family: var(
-        --spectrum-heading-m-text-font-family,
-        var(--spectrum-alias-body-text-font-family)
-    );
-    font-size: var(
-        --spectrum-heading-l-text-size,
-        var(--spectrum-alias-heading-l-text-size)
-    );
-    color: var(
-        --spectrum-heading-l-text-color,
-        var(--spectrum-alias-heading-text-color)
-    );
-    line-height: var(
-        --spectrum-heading-l-text-line-height,
-        var(--spectrum-alias-heading-text-line-height)
-    );
-    font-style: var(
-        --spectrum-heading-l-text-font-style,
-        var(--spectrum-global-font-style-regular)
-    );
-    letter-spacing: var(
-        --spectrum-heading-l-text-letter-spacing,
-        var(--spectrum-global-font-letter-spacing-none)
-    );
-    text-transform: var(--spectrum-heading-l-text-transform, none);
-    font-weight: var(
-        --spectrum-heading-light-m-emphasis-text-font-weight,
-        var(--spectrum-global-font-weight-light)
-    );
-    margin-top: 0;
-    margin-bottom: 0;
-}
-
-/* 
-    @TODO: Implement spectrum typography components (ex: specturm-heading, spectrum-body)
-
-    The following block maps to the .spectrum-Body--secondary selector 
-    in spectrum-css/dist/components/typography
-
-    The css in that folder defines multiple typography classes, such as
-    .spectrum-Heading and .spectrum-Body
-
-    These components need to be implemented in another pass
-*/
-#description {
-    font-size: var(
-        --spectrum-body-4-text-size,
-        var(--spectrum-alias-font-size-default)
-    );
-    font-weight: var(
-        --spectrum-body-4-text-font-weight,
-        var(--spectrum-alias-body-text-font-weight)
-    );
-    line-height: var(
-        --spectrum-body-4-text-line-height,
-        var(--spectrum-alias-body-text-line-height)
-    );
-    letter-spacing: var(
-        --spectrum-body-4-text-letter-spacing,
-        var(--spectrum-global-font-letter-spacing-none)
-    );
-    text-transform: var(--spectrum-body-4-text-transform, none);
-    margin-top: 0;
-    margin-bottom: 0;
-    color: var(--spectrum-body-m-text-color, var(--spectrum-alias-text-color));
-}
-
 /* Ensure that SVGs with viewBox attributes size correctly. */
 ::slotted(svg[viewBox]) {
     width: 100%;

diff --git a/packages/illustrated-message/tsconfig.json b/packages/illustrated-message/tsconfig.json
@@ -5,5 +5,6 @@
         "rootDir": "./"
     },
     "include": ["*.ts", "src/*.ts"],
-    "exclude": ["test/*.ts", "stories/*.ts"]
+    "exclude": ["test/*.ts", "stories/*.ts"],
+    "references": [{ "path": "../base" }, { "path": "../styles" }]
 }
diff --git a/packages/styles/body.ts b/packages/styles/body.ts
@@ -0,0 +1,17 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import baseStyles from './src/spectrum-base.css.js';
+import langStyles from './src/spectrum-lang.css.js';
+import bodyStyles from './src/spectrum-body.css.js';
+
+export default [baseStyles, langStyles, bodyStyles];
diff --git a/packages/styles/code.ts b/packages/styles/code.ts
@@ -0,0 +1,17 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import baseStyles from './src/spectrum-base.css.js';
+import langStyles from './src/spectrum-lang.css.js';
+import codeStyles from './src/spectrum-code.css.js';
+
+export default [baseStyles, langStyles, codeStyles];
diff --git a/packages/styles/detail.ts b/packages/styles/detail.ts
@@ -0,0 +1,17 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import baseStyles from './src/spectrum-base.css.js';
+import langStyles from './src/spectrum-lang.css.js';
+import detailStyles from './src/spectrum-detail.css.js';
+
+export default [baseStyles, langStyles, detailStyles];
diff --git a/packages/styles/heading.ts b/packages/styles/heading.ts
@@ -0,0 +1,17 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import baseStyles from './src/spectrum-base.css.js';
+import langStyles from './src/spectrum-lang.css.js';
+import headingStyles from './src/spectrum-heading.css.js';
+
+export default [baseStyles, langStyles, headingStyles];
diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -21,6 +21,9 @@
     "version": "0.6.1",
     "description": "",
     "style": "all-medium-lightest.css",
+    "main": "src/spectrum-base.css.js",
+    "module": "src/spectrum-base.css.js",
+    "type": "module",
     "exports": {
         "./": "./"
     },