From 0b254b952308f2063b86e6f4f483c204633e9353 Mon Sep 17 00:00:00 2001 From: Ashley Echols Date: Fri, 6 Sep 2024 11:25:31 -0500 Subject: [PATCH 1/8] style: adds a base scss file with reset and base styles --- libs/core/src/global/styles/_base.scss | 124 +++++++++++++++++++++++++ 1 file changed, 124 insertions(+) create mode 100644 libs/core/src/global/styles/_base.scss diff --git a/libs/core/src/global/styles/_base.scss b/libs/core/src/global/styles/_base.scss new file mode 100644 index 000000000..032fe5706 --- /dev/null +++ b/libs/core/src/global/styles/_base.scss @@ -0,0 +1,124 @@ +// TODO: replace core tokens with semantic +.pine-base { + /* + Josh's Custom CSS Reset + https://www.joshwcomeau.com/css/custom-css-reset/ + */ + *, *::before, *::after { + box-sizing: border-box; + } + + * { + margin: 0; + color: var(--pine-color-grey-900); + } + + img, picture, video, canvas, svg { + display: block; + max-width: 100%; + } + + input, button, textarea, select { + font: inherit; + } + + p, h1, h2, h3, h4, h5, h6 { + overflow-wrap: break-word; + } + + /* + Additional Reset Styles + */ + a:not([href]):not([class]) { + &, + &:hover { + color: currentColor; + text-decoration: none; + } + } + + ul[role='list'], + ol[role='list'] { + list-style: none; + } + + table { + border-collapse: collapse; + border-spacing: 0; + } + + /* + Mercury Base Styles + */ + // Typography + * { + font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + } + + h1, h2, h3, h4, h5, h6 { + font-family: "GreetStandard", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + color: var(--pine-color-grey-950); + } + + h1 { + font: var(--pine-typography-heading-h1); + letter-spacing: var(--pine-letter-spacing-185); + } + + h2 { + font: var(--pine-typography-heading-h2); + letter-spacing: var(--pine-letter-spacing-171); + } + + h3 { + font: var(--pine-typography-heading-h3); + letter-spacing: var(--pine-letter-spacing-157); + } + + h4 { + font: var(--pine-typography-heading-h4); + letter-spacing: var(--pine-letter-spacing-142); + } + + h5 { + font: var(--pine-typography-heading-h5); + letter-spacing: var(--pine-letter-spacing-128); + } + + h6 { + font: var(--pine-typography-heading-h6); + letter-spacing: var(--pine-letter-spacing-114); + } + + p { + font: var(--pine-typography-body-md-default); + letter-spacing: var(--pine-letter-spacing-100); + } + + code, kbd, pre, samp { + font-family: monospace; + } + + // Accessibility + + [role="button"] { + cursor: pointer; + } + + :focus { + outline: 0; + } + + :focus-visible { + outline: var(--pine-border-width-thin) solid var(--pine-color-purple-500); + } + + // Misc. + + [hidden] { + display: none !important; + } +} + From cb8997614a53d8ee3cc692d57999765a5834829c Mon Sep 17 00:00:00 2001 From: Ashley Echols Date: Wed, 11 Sep 2024 11:15:07 -0500 Subject: [PATCH 2/8] style: adds base/reset CSS file and adds to every component --- .../pds-accordion/pds-accordion.tsx | 2 +- .../stories/pds-accordion.stories.js | 26 ++-- .../src/components/pds-avatar/pds-avatar.tsx | 2 +- libs/core/src/components/pds-box/pds-box.tsx | 2 +- .../src/components/pds-button/pds-button.tsx | 2 +- .../components/pds-checkbox/pds-checkbox.tsx | 2 +- .../core/src/components/pds-chip/pds-chip.tsx | 2 +- .../components/pds-copytext/pds-copytext.tsx | 2 +- .../components/pds-divider/pds-divider.tsx | 2 +- .../src/components/pds-image/pds-image.tsx | 2 +- libs/core/src/components/pds-image/readme.md | 7 - .../src/components/pds-input/pds-input.tsx | 2 +- .../core/src/components/pds-link/pds-link.tsx | 2 +- .../src/components/pds-loader/pds-loader.tsx | 2 +- .../components/pds-progress/pds-progress.tsx | 2 +- .../src/components/pds-radio/pds-radio.tsx | 2 +- libs/core/src/components/pds-row/pds-row.tsx | 2 +- .../components/pds-sortable/pds-sortable.tsx | 2 +- .../src/components/pds-switch/pds-switch.tsx | 2 +- .../pds-table-body/pds-table-body.tsx | 2 +- .../pds-table-cell/pds-table-cell.tsx | 2 +- .../pds-table-head-cell.tsx | 2 +- .../pds-table-head/pds-table-head.tsx | 2 +- .../pds-table/pds-table-row/pds-table-row.tsx | 2 +- .../src/components/pds-table/pds-table.tsx | 2 +- .../components/pds-tabs/pds-tab/pds-tab.tsx | 2 +- .../pds-tabs/pds-tabpanel/pds-tabpanel.tsx | 2 +- .../core/src/components/pds-tabs/pds-tabs.tsx | 2 +- libs/core/src/components/pds-tabs/readme.md | 8 -- .../components/pds-textarea/pds-textarea.tsx | 2 +- .../components/pds-tooltip/pds-tooltip.tsx | 2 +- libs/core/src/global/styles/_base.scss | 124 ------------------ libs/core/src/global/styles/app.scss | 2 +- libs/core/src/global/styles/base.scss | 121 +++++++++++++++++ 34 files changed, 161 insertions(+), 183 deletions(-) delete mode 100644 libs/core/src/global/styles/_base.scss create mode 100644 libs/core/src/global/styles/base.scss diff --git a/libs/core/src/components/pds-accordion/pds-accordion.tsx b/libs/core/src/components/pds-accordion/pds-accordion.tsx index 0ae290395..8552b4cdd 100644 --- a/libs/core/src/components/pds-accordion/pds-accordion.tsx +++ b/libs/core/src/components/pds-accordion/pds-accordion.tsx @@ -8,7 +8,7 @@ import { downSmall } from '@pine-ds/icons/icons'; */ @Component({ tag: 'pds-accordion', - styleUrl: 'pds-accordion.scss', + styleUrls: ['../../global/styles/base.scss','pds-accordion.scss'], shadow: true, }) export class PdsAccordion { diff --git a/libs/core/src/components/pds-accordion/stories/pds-accordion.stories.js b/libs/core/src/components/pds-accordion/stories/pds-accordion.stories.js index 896a3f6a6..af9358a5a 100644 --- a/libs/core/src/components/pds-accordion/stories/pds-accordion.stories.js +++ b/libs/core/src/components/pds-accordion/stories/pds-accordion.stories.js @@ -13,21 +13,17 @@ export default { const BaseTemplate = (args) => html` - - - - Products - - - - - All products - Courses - Coaching - Community - Podcasts - - + + + Products + + + All products + Courses + Coaching + Community + Podcasts + `; diff --git a/libs/core/src/components/pds-avatar/pds-avatar.tsx b/libs/core/src/components/pds-avatar/pds-avatar.tsx index 7bc21c0bc..ee31d632b 100644 --- a/libs/core/src/components/pds-avatar/pds-avatar.tsx +++ b/libs/core/src/components/pds-avatar/pds-avatar.tsx @@ -6,7 +6,7 @@ import { checkCircleFilled, userFilled } from '@pine-ds/icons/icons'; */ @Component({ tag: 'pds-avatar', - styleUrl: 'pds-avatar.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-avatar.scss'], shadow: true, }) export class PdsAvatar { diff --git a/libs/core/src/components/pds-box/pds-box.tsx b/libs/core/src/components/pds-box/pds-box.tsx index 658d6e47f..411d445f4 100644 --- a/libs/core/src/components/pds-box/pds-box.tsx +++ b/libs/core/src/components/pds-box/pds-box.tsx @@ -4,7 +4,7 @@ import { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils @Component({ tag: 'pds-box', - styleUrl: 'pds-box.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-box.scss'], }) export class PdsBox { /** diff --git a/libs/core/src/components/pds-button/pds-button.tsx b/libs/core/src/components/pds-button/pds-button.tsx index 8402fdf81..ae757b292 100644 --- a/libs/core/src/components/pds-button/pds-button.tsx +++ b/libs/core/src/components/pds-button/pds-button.tsx @@ -11,7 +11,7 @@ import { caretDown } from '@pine-ds/icons/icons'; @Component({ tag: 'pds-button', - styleUrl: 'pds-button.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-button.scss'], shadow: true, }) export class PdsButton { diff --git a/libs/core/src/components/pds-checkbox/pds-checkbox.tsx b/libs/core/src/components/pds-checkbox/pds-checkbox.tsx index 0e771ea49..bcbab8b90 100644 --- a/libs/core/src/components/pds-checkbox/pds-checkbox.tsx +++ b/libs/core/src/components/pds-checkbox/pds-checkbox.tsx @@ -5,7 +5,7 @@ import { CheckboxChangeEventDetail } from './checkbox-interface'; @Component({ tag: 'pds-checkbox', - styleUrl: 'pds-checkbox.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-checkbox.scss'], shadow: true, }) export class PdsCheckbox { diff --git a/libs/core/src/components/pds-chip/pds-chip.tsx b/libs/core/src/components/pds-chip/pds-chip.tsx index 26f0942c8..960dfca06 100644 --- a/libs/core/src/components/pds-chip/pds-chip.tsx +++ b/libs/core/src/components/pds-chip/pds-chip.tsx @@ -3,7 +3,7 @@ import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core'; @Component({ tag: 'pds-chip', - styleUrl: 'pds-chip.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-chip.scss'], shadow: true, }) export class PdsChip { diff --git a/libs/core/src/components/pds-copytext/pds-copytext.tsx b/libs/core/src/components/pds-copytext/pds-copytext.tsx index 03527fe0d..1e97a86c0 100644 --- a/libs/core/src/components/pds-copytext/pds-copytext.tsx +++ b/libs/core/src/components/pds-copytext/pds-copytext.tsx @@ -4,7 +4,7 @@ import { copy as copyIcon } from '@pine-ds/icons/icons'; @Component({ tag: 'pds-copytext', - styleUrl: 'pds-copytext.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-copytext.scss'], shadow: true, }) export class PdsCopytext { diff --git a/libs/core/src/components/pds-divider/pds-divider.tsx b/libs/core/src/components/pds-divider/pds-divider.tsx index bd67812e6..d7b17c780 100644 --- a/libs/core/src/components/pds-divider/pds-divider.tsx +++ b/libs/core/src/components/pds-divider/pds-divider.tsx @@ -2,7 +2,7 @@ import { Component, Prop, Host, h } from '@stencil/core'; @Component({ tag: 'pds-divider', - styleUrl: 'pds-divider.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-divider.scss'], shadow: true, }) export class PdsDivider { diff --git a/libs/core/src/components/pds-image/pds-image.tsx b/libs/core/src/components/pds-image/pds-image.tsx index a7a437551..57e60b630 100644 --- a/libs/core/src/components/pds-image/pds-image.tsx +++ b/libs/core/src/components/pds-image/pds-image.tsx @@ -2,7 +2,7 @@ import { Component, Host, h, Prop } from '@stencil/core'; @Component({ tag: 'pds-image', - styleUrl: 'pds-image.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-image.scss'], shadow: true, }) export class PdsImage { diff --git a/libs/core/src/components/pds-image/readme.md b/libs/core/src/components/pds-image/readme.md index 19c2a1b53..3ef89836c 100644 --- a/libs/core/src/components/pds-image/readme.md +++ b/libs/core/src/components/pds-image/readme.md @@ -19,13 +19,6 @@ | `width` | `width` | The width of the image in pixels. Setting this will devote space in the layout to prevent layout shifts when the image is loaded. | `number` | `undefined` | -## CSS Custom Properties - -| Name | Description | -| ---------------------- | ------------------------- | -| `--image-aspect-ratio` | The image's aspect ratio. | - - ---------------------------------------------- diff --git a/libs/core/src/components/pds-input/pds-input.tsx b/libs/core/src/components/pds-input/pds-input.tsx index c48804172..d8decb832 100644 --- a/libs/core/src/components/pds-input/pds-input.tsx +++ b/libs/core/src/components/pds-input/pds-input.tsx @@ -4,7 +4,7 @@ import { PdsLabel } from '../_internal/pds-label/pds-label'; @Component({ tag: 'pds-input', - styleUrl: 'pds-input.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-input.scss'], shadow: true, }) export class PdsInput { diff --git a/libs/core/src/components/pds-link/pds-link.tsx b/libs/core/src/components/pds-link/pds-link.tsx index d725a850c..67bef3f0b 100644 --- a/libs/core/src/components/pds-link/pds-link.tsx +++ b/libs/core/src/components/pds-link/pds-link.tsx @@ -8,7 +8,7 @@ import { launch } from '@pine-ds/icons/icons'; */ @Component({ tag: 'pds-link', - styleUrl: 'pds-link.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-link.scss'], shadow: true, }) export class PdsLink { diff --git a/libs/core/src/components/pds-loader/pds-loader.tsx b/libs/core/src/components/pds-loader/pds-loader.tsx index 65d2550ac..6824c61f6 100644 --- a/libs/core/src/components/pds-loader/pds-loader.tsx +++ b/libs/core/src/components/pds-loader/pds-loader.tsx @@ -6,7 +6,7 @@ import { Component, Host, h, Prop } from '@stencil/core'; @Component({ tag: 'pds-loader', - styleUrl: 'pds-loader.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-loader.scss'], shadow: true, }) export class PdsLoader { diff --git a/libs/core/src/components/pds-progress/pds-progress.tsx b/libs/core/src/components/pds-progress/pds-progress.tsx index 4bacaf764..c658c61ad 100644 --- a/libs/core/src/components/pds-progress/pds-progress.tsx +++ b/libs/core/src/components/pds-progress/pds-progress.tsx @@ -2,7 +2,7 @@ import { Component, Host, h, Prop } from '@stencil/core'; @Component({ tag: 'pds-progress', - styleUrl: 'pds-progress.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-progress.scss'], shadow: true, }) export class PdsProgress { diff --git a/libs/core/src/components/pds-radio/pds-radio.tsx b/libs/core/src/components/pds-radio/pds-radio.tsx index 9b153650a..82bb8c31f 100644 --- a/libs/core/src/components/pds-radio/pds-radio.tsx +++ b/libs/core/src/components/pds-radio/pds-radio.tsx @@ -4,7 +4,7 @@ import { PdsLabel } from '../_internal/pds-label/pds-label'; @Component({ tag: 'pds-radio', - styleUrl: 'pds-radio.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-radio.scss'], scoped: true, }) export class PdsRadio { diff --git a/libs/core/src/components/pds-row/pds-row.tsx b/libs/core/src/components/pds-row/pds-row.tsx index 2f7bf4e65..4ff7960aa 100644 --- a/libs/core/src/components/pds-row/pds-row.tsx +++ b/libs/core/src/components/pds-row/pds-row.tsx @@ -4,7 +4,7 @@ import { BoxTShirtSizeType } from '../../utils/types'; @Component({ tag: 'pds-row', - styleUrl: 'pds-row.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-row.scss'], }) export class PdsRow { /** diff --git a/libs/core/src/components/pds-sortable/pds-sortable.tsx b/libs/core/src/components/pds-sortable/pds-sortable.tsx index 217c74ea9..04fa80f26 100644 --- a/libs/core/src/components/pds-sortable/pds-sortable.tsx +++ b/libs/core/src/components/pds-sortable/pds-sortable.tsx @@ -4,7 +4,7 @@ import Sortable from 'sortablejs'; @Component({ tag: 'pds-sortable', - styleUrl: 'pds-sortable.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-sortable.scss'], scoped: true, }) export class PdsSortable { diff --git a/libs/core/src/components/pds-switch/pds-switch.tsx b/libs/core/src/components/pds-switch/pds-switch.tsx index d2285d3a9..864a52c3a 100644 --- a/libs/core/src/components/pds-switch/pds-switch.tsx +++ b/libs/core/src/components/pds-switch/pds-switch.tsx @@ -4,7 +4,7 @@ import { PdsLabel } from '../_internal/pds-label/pds-label'; @Component({ tag: 'pds-switch', - styleUrl: 'pds-switch.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-switch.scss'], shadow: true, }) export class PdsSwitch { diff --git a/libs/core/src/components/pds-table/pds-table-body/pds-table-body.tsx b/libs/core/src/components/pds-table/pds-table-body/pds-table-body.tsx index 13c496f5c..247aa206c 100644 --- a/libs/core/src/components/pds-table/pds-table-body/pds-table-body.tsx +++ b/libs/core/src/components/pds-table/pds-table-body/pds-table-body.tsx @@ -2,7 +2,7 @@ import { Component, Host, h } from '@stencil/core'; @Component({ tag: 'pds-table-body', - styleUrl: 'pds-table-body.scss', + styleUrls: ['../../../global/styles/base.scss', 'pds-table-body.scss'], shadow: true, }) export class PdsTableBody { diff --git a/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.tsx b/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.tsx index 49bd97a37..63c93ba59 100644 --- a/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.tsx +++ b/libs/core/src/components/pds-table/pds-table-cell/pds-table-cell.tsx @@ -2,7 +2,7 @@ import { Component, Element, Host, Prop, State, h } from '@stencil/core'; @Component({ tag: 'pds-table-cell', - styleUrl: 'pds-table-cell.scss', + styleUrls: ['../../../global/styles/base.scss', 'pds-table-cell.scss'], shadow: true, }) export class PdsTableCell { diff --git a/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx b/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx index d4fd2eed1..5d93a8118 100644 --- a/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx +++ b/libs/core/src/components/pds-table/pds-table-head-cell/pds-table-head-cell.tsx @@ -4,7 +4,7 @@ import { downSmall, upSmall } from '@pine-ds/icons/icons'; @Component({ tag: 'pds-table-head-cell', - styleUrl: 'pds-table-head-cell.scss', + styleUrls: ['../../../global/styles/base.scss', 'pds-table-head-cell.scss'], shadow: true, }) export class PdsTableHeadCell { diff --git a/libs/core/src/components/pds-table/pds-table-head/pds-table-head.tsx b/libs/core/src/components/pds-table/pds-table-head/pds-table-head.tsx index 61a8d1ae7..a3c93d35b 100644 --- a/libs/core/src/components/pds-table/pds-table-head/pds-table-head.tsx +++ b/libs/core/src/components/pds-table/pds-table-head/pds-table-head.tsx @@ -3,7 +3,7 @@ import { closest } from '@utils/closest'; @Component({ tag: 'pds-table-head', - styleUrl: 'pds-table-head.scss', + styleUrls: ['../../../global/styles/base.scss', 'pds-table-head.scss'], shadow: true, }) export class PdsTableHead { diff --git a/libs/core/src/components/pds-table/pds-table-row/pds-table-row.tsx b/libs/core/src/components/pds-table/pds-table-row/pds-table-row.tsx index 730c1d2b1..6aa8c21a0 100644 --- a/libs/core/src/components/pds-table/pds-table-row/pds-table-row.tsx +++ b/libs/core/src/components/pds-table/pds-table-row/pds-table-row.tsx @@ -4,7 +4,7 @@ import { closest } from '../../../utils/closest'; @Component({ tag: 'pds-table-row', - styleUrl: 'pds-table-row.scss', + styleUrls: ['../../../global/styles/base.scss', 'pds-table-row.scss'], shadow: true, }) export class PdsTableRow { diff --git a/libs/core/src/components/pds-table/pds-table.tsx b/libs/core/src/components/pds-table/pds-table.tsx index fc9a654db..84c8545ff 100644 --- a/libs/core/src/components/pds-table/pds-table.tsx +++ b/libs/core/src/components/pds-table/pds-table.tsx @@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Host, h, Prop, State, Listen } @Component({ tag: 'pds-table', - styleUrl: 'pds-table.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-table.scss'], shadow: true, }) export class PdsTable { diff --git a/libs/core/src/components/pds-tabs/pds-tab/pds-tab.tsx b/libs/core/src/components/pds-tabs/pds-tab/pds-tab.tsx index f7ef09624..3e6da7985 100644 --- a/libs/core/src/components/pds-tabs/pds-tab/pds-tab.tsx +++ b/libs/core/src/components/pds-tabs/pds-tab/pds-tab.tsx @@ -2,7 +2,7 @@ import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil @Component({ tag: 'pds-tab', - styleUrl: 'pds-tab.scss', + styleUrls: ['../../../global/styles/base.scss', 'pds-tab.scss'], shadow: false, }) export class PdsTab { diff --git a/libs/core/src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx b/libs/core/src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx index 4a65e2609..8c5163513 100644 --- a/libs/core/src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx +++ b/libs/core/src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx @@ -2,7 +2,7 @@ import { Component, Element, Host, h, Prop } from '@stencil/core'; @Component({ tag: 'pds-tabpanel', - styleUrl: 'pds-tabpanel.scss', + styleUrls: ['../../../global/styles/base.scss', 'pds-tabpanel.scss'], shadow: false, }) export class PdsTabpanel { diff --git a/libs/core/src/components/pds-tabs/pds-tabs.tsx b/libs/core/src/components/pds-tabs/pds-tabs.tsx index 55bdf7a35..9a155fad3 100644 --- a/libs/core/src/components/pds-tabs/pds-tabs.tsx +++ b/libs/core/src/components/pds-tabs/pds-tabs.tsx @@ -6,7 +6,7 @@ import { Component, Element, Host, h, Prop, Listen } from '@stencil/core'; */ @Component({ tag: 'pds-tabs', - styleUrl: 'pds-tabs.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-tabs.scss'], shadow: true, }) export class PdsTabs { diff --git a/libs/core/src/components/pds-tabs/readme.md b/libs/core/src/components/pds-tabs/readme.md index d3fb9e66f..ea4e67463 100644 --- a/libs/core/src/components/pds-tabs/readme.md +++ b/libs/core/src/components/pds-tabs/readme.md @@ -23,14 +23,6 @@ | `"tabs"` | Content is placed within the `div[role="tablist"]` element as children | -## CSS Custom Properties - -| Name | Description | -| ---------------------------- | ------------------------------ | -| `--spacing-panel-margin-top` | Optional margin-top for panels | -| `--spacing-panel-padding` | Optional padding for panels | - - ---------------------------------------------- diff --git a/libs/core/src/components/pds-textarea/pds-textarea.tsx b/libs/core/src/components/pds-textarea/pds-textarea.tsx index 3c0479c23..1f7b19645 100644 --- a/libs/core/src/components/pds-textarea/pds-textarea.tsx +++ b/libs/core/src/components/pds-textarea/pds-textarea.tsx @@ -5,7 +5,7 @@ import { PdsLabel } from '../_internal/pds-label/pds-label'; @Component({ tag: 'pds-textarea', - styleUrl: 'pds-textarea.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-textarea.scss'], shadow: true, }) export class PdsTextarea { diff --git a/libs/core/src/components/pds-tooltip/pds-tooltip.tsx b/libs/core/src/components/pds-tooltip/pds-tooltip.tsx index b57851ddf..ee6471b0d 100644 --- a/libs/core/src/components/pds-tooltip/pds-tooltip.tsx +++ b/libs/core/src/components/pds-tooltip/pds-tooltip.tsx @@ -10,7 +10,7 @@ import { @Component({ tag: 'pds-tooltip', - styleUrl: 'pds-tooltip.scss', + styleUrls: ['../../global/styles/base.scss', 'pds-tooltip.scss'], shadow: true, }) export class PdsTooltip { diff --git a/libs/core/src/global/styles/_base.scss b/libs/core/src/global/styles/_base.scss deleted file mode 100644 index 032fe5706..000000000 --- a/libs/core/src/global/styles/_base.scss +++ /dev/null @@ -1,124 +0,0 @@ -// TODO: replace core tokens with semantic -.pine-base { - /* - Josh's Custom CSS Reset - https://www.joshwcomeau.com/css/custom-css-reset/ - */ - *, *::before, *::after { - box-sizing: border-box; - } - - * { - margin: 0; - color: var(--pine-color-grey-900); - } - - img, picture, video, canvas, svg { - display: block; - max-width: 100%; - } - - input, button, textarea, select { - font: inherit; - } - - p, h1, h2, h3, h4, h5, h6 { - overflow-wrap: break-word; - } - - /* - Additional Reset Styles - */ - a:not([href]):not([class]) { - &, - &:hover { - color: currentColor; - text-decoration: none; - } - } - - ul[role='list'], - ol[role='list'] { - list-style: none; - } - - table { - border-collapse: collapse; - border-spacing: 0; - } - - /* - Mercury Base Styles - */ - // Typography - * { - font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - } - - h1, h2, h3, h4, h5, h6 { - font-family: "GreetStandard", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - color: var(--pine-color-grey-950); - } - - h1 { - font: var(--pine-typography-heading-h1); - letter-spacing: var(--pine-letter-spacing-185); - } - - h2 { - font: var(--pine-typography-heading-h2); - letter-spacing: var(--pine-letter-spacing-171); - } - - h3 { - font: var(--pine-typography-heading-h3); - letter-spacing: var(--pine-letter-spacing-157); - } - - h4 { - font: var(--pine-typography-heading-h4); - letter-spacing: var(--pine-letter-spacing-142); - } - - h5 { - font: var(--pine-typography-heading-h5); - letter-spacing: var(--pine-letter-spacing-128); - } - - h6 { - font: var(--pine-typography-heading-h6); - letter-spacing: var(--pine-letter-spacing-114); - } - - p { - font: var(--pine-typography-body-md-default); - letter-spacing: var(--pine-letter-spacing-100); - } - - code, kbd, pre, samp { - font-family: monospace; - } - - // Accessibility - - [role="button"] { - cursor: pointer; - } - - :focus { - outline: 0; - } - - :focus-visible { - outline: var(--pine-border-width-thin) solid var(--pine-color-purple-500); - } - - // Misc. - - [hidden] { - display: none !important; - } -} - diff --git a/libs/core/src/global/styles/app.scss b/libs/core/src/global/styles/app.scss index 9051f7f59..45ba2b4f7 100644 --- a/libs/core/src/global/styles/app.scss +++ b/libs/core/src/global/styles/app.scss @@ -1,2 +1,2 @@ -@use 'fonts'; @use 'tokens/index'; +@use 'fonts'; \ No newline at end of file diff --git a/libs/core/src/global/styles/base.scss b/libs/core/src/global/styles/base.scss new file mode 100644 index 000000000..ac17c92aa --- /dev/null +++ b/libs/core/src/global/styles/base.scss @@ -0,0 +1,121 @@ +// TODO: replace core tokens with semantic + +/* + Josh's Custom CSS Reset + https://www.joshwcomeau.com/css/custom-css-reset/ +*/ +:where(*:not(slot), *:not(slot)::before, *:not(slot)::after) { + box-sizing: border-box; +} + +:where(*:not(slot)) { + margin: 0; + color: var(--pine-color-grey-900); +} + +:where(img, picture, video, canvas, svg) { + display: block; + max-width: 100%; +} + +:where(input, button, textarea, select) { + font: inherit; +} + +:where(p, h1, h2, h3, h4, h5, h6) { + overflow-wrap: break-word; +} + +/* + Additional Reset Styles +*/ +:where(a:not([href]):not([class])) { + color: currentColor; + text-decoration: none; +} + +:where(a:not([href]):not([class]):hover) { + color: currentColor; + text-decoration: none; +} + +:where(ul[role='list'], ol[role='list']) { + list-style: none; +} + +:where(table) { + border-collapse: collapse; + border-spacing: 0; +} + +/* + Mercury Base Styles +*/ +// Typography +:where(*:not(slot)) { + font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; +} + +:where(h1, h2, h3, h4, h5, h6) { + font-family: "GreetStandard", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, + "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + color: var(--pine-color-grey-950); +} + +:where(h1) { + font: var(--pine-typography-heading-h1); + letter-spacing: var(--pine-letter-spacing-185); +} + +:where(h2) { + font: var(--pine-typography-heading-h2); + letter-spacing: var(--pine-letter-spacing-171); +} + +:where(h3) { + font: var(--pine-typography-heading-h3); + letter-spacing: var(--pine-letter-spacing-157); +} + +:where(h4) { + font: var(--pine-typography-heading-h4); + letter-spacing: var(--pine-letter-spacing-142); +} + +:where(h5) { + font: var(--pine-typography-heading-h5); + letter-spacing: var(--pine-letter-spacing-128); +} + +:where(h6) { + font: var(--pine-typography-heading-h6); + letter-spacing: var(--pine-letter-spacing-114); +} + +:where(p) { + font: var(--pine-typography-body-md-default); + letter-spacing: var(--pine-letter-spacing-100); +} + +:where(code, kbd, pre, samp) { + font-family: monospace; +} + +// Accessibility +:where([role="button"]) { + cursor: pointer; +} + +:where(:focus) { + outline: 0; +} + +:where(:focus-visible) { + outline: var(--pine-border-width-thin) solid var(--pine-color-purple-500); +} + +// Misc. +:where([hidden]) { + display: none !important; +} From 30e6fb848b8d5ed64d4704910aebca0df8d6d480 Mon Sep 17 00:00:00 2001 From: Ashley Echols Date: Wed, 11 Sep 2024 15:27:28 -0500 Subject: [PATCH 3/8] chore: ignores base file for linting issues --- libs/core/.stylelintignore | 3 ++- libs/core/src/components/pds-image/readme.md | 7 +++++++ libs/core/src/components/pds-tabs/readme.md | 8 ++++++++ 3 files changed, 17 insertions(+), 1 deletion(-) diff --git a/libs/core/.stylelintignore b/libs/core/.stylelintignore index c55e68da1..aad83a0a8 100644 --- a/libs/core/.stylelintignore +++ b/libs/core/.stylelintignore @@ -1,2 +1,3 @@ src/global/styles/_fonts.scss -src/global/styles/tokens/semantic/*.scss \ No newline at end of file +src/global/styles/tokens/semantic/*.scss +src/global/styles/base.scss \ No newline at end of file diff --git a/libs/core/src/components/pds-image/readme.md b/libs/core/src/components/pds-image/readme.md index 3ef89836c..19c2a1b53 100644 --- a/libs/core/src/components/pds-image/readme.md +++ b/libs/core/src/components/pds-image/readme.md @@ -19,6 +19,13 @@ | `width` | `width` | The width of the image in pixels. Setting this will devote space in the layout to prevent layout shifts when the image is loaded. | `number` | `undefined` | +## CSS Custom Properties + +| Name | Description | +| ---------------------- | ------------------------- | +| `--image-aspect-ratio` | The image's aspect ratio. | + + ---------------------------------------------- diff --git a/libs/core/src/components/pds-tabs/readme.md b/libs/core/src/components/pds-tabs/readme.md index ea4e67463..d3fb9e66f 100644 --- a/libs/core/src/components/pds-tabs/readme.md +++ b/libs/core/src/components/pds-tabs/readme.md @@ -23,6 +23,14 @@ | `"tabs"` | Content is placed within the `div[role="tablist"]` element as children | +## CSS Custom Properties + +| Name | Description | +| ---------------------------- | ------------------------------ | +| `--spacing-panel-margin-top` | Optional margin-top for panels | +| `--spacing-panel-padding` | Optional padding for panels | + + ---------------------------------------------- From ceb03653aba072a31538af3b5239ceb99909b165 Mon Sep 17 00:00:00 2001 From: Ashley Echols Date: Fri, 13 Sep 2024 16:49:23 -0500 Subject: [PATCH 4/8] chore: adds new lines to changed files --- libs/core/.stylelintignore | 2 +- libs/core/src/global/styles/app.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/core/.stylelintignore b/libs/core/.stylelintignore index aad83a0a8..c4f496037 100644 --- a/libs/core/.stylelintignore +++ b/libs/core/.stylelintignore @@ -1,3 +1,3 @@ src/global/styles/_fonts.scss src/global/styles/tokens/semantic/*.scss -src/global/styles/base.scss \ No newline at end of file +src/global/styles/base.scss diff --git a/libs/core/src/global/styles/app.scss b/libs/core/src/global/styles/app.scss index 45ba2b4f7..eadec10ff 100644 --- a/libs/core/src/global/styles/app.scss +++ b/libs/core/src/global/styles/app.scss @@ -1,2 +1,2 @@ @use 'tokens/index'; -@use 'fonts'; \ No newline at end of file +@use 'fonts'; From 403fe50d5ee04f39d45d40442eaedfe8bb245556 Mon Sep 17 00:00:00 2001 From: Ashley Echols Date: Tue, 17 Sep 2024 17:22:47 -0500 Subject: [PATCH 5/8] fix: fixes issue with reset styles leaking out from box and row components --- libs/core/src/components/pds-box/pds-box.tsx | 2 +- libs/core/src/components/pds-button/pds-button.scss | 1 + libs/core/src/components/pds-row/pds-row.tsx | 2 +- libs/core/src/components/pds-tabs/pds-tab/pds-tab.tsx | 2 +- libs/core/src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx | 2 +- libs/core/src/global/styles/base.scss | 2 +- 6 files changed, 6 insertions(+), 5 deletions(-) diff --git a/libs/core/src/components/pds-box/pds-box.tsx b/libs/core/src/components/pds-box/pds-box.tsx index 411d445f4..658d6e47f 100644 --- a/libs/core/src/components/pds-box/pds-box.tsx +++ b/libs/core/src/components/pds-box/pds-box.tsx @@ -4,7 +4,7 @@ import { BoxColumnType, BoxTShirtSizeType, BoxShadowSizeType } from '../../utils @Component({ tag: 'pds-box', - styleUrls: ['../../global/styles/base.scss', 'pds-box.scss'], + styleUrl: 'pds-box.scss', }) export class PdsBox { /** diff --git a/libs/core/src/components/pds-button/pds-button.scss b/libs/core/src/components/pds-button/pds-button.scss index 66cd9a6a6..ad04f018c 100644 --- a/libs/core/src/components/pds-button/pds-button.scss +++ b/libs/core/src/components/pds-button/pds-button.scss @@ -68,6 +68,7 @@ pds-icon { fill: currentColor; + color: currentColor; margin-inline-end: var(--spacing-icon-margin-inline-end); } diff --git a/libs/core/src/components/pds-row/pds-row.tsx b/libs/core/src/components/pds-row/pds-row.tsx index 4ff7960aa..2f7bf4e65 100644 --- a/libs/core/src/components/pds-row/pds-row.tsx +++ b/libs/core/src/components/pds-row/pds-row.tsx @@ -4,7 +4,7 @@ import { BoxTShirtSizeType } from '../../utils/types'; @Component({ tag: 'pds-row', - styleUrls: ['../../global/styles/base.scss', 'pds-row.scss'], + styleUrl: 'pds-row.scss', }) export class PdsRow { /** diff --git a/libs/core/src/components/pds-tabs/pds-tab/pds-tab.tsx b/libs/core/src/components/pds-tabs/pds-tab/pds-tab.tsx index 3e6da7985..f7ef09624 100644 --- a/libs/core/src/components/pds-tabs/pds-tab/pds-tab.tsx +++ b/libs/core/src/components/pds-tabs/pds-tab/pds-tab.tsx @@ -2,7 +2,7 @@ import { Component, Element, Host, h, Prop, Event, EventEmitter } from '@stencil @Component({ tag: 'pds-tab', - styleUrls: ['../../../global/styles/base.scss', 'pds-tab.scss'], + styleUrl: 'pds-tab.scss', shadow: false, }) export class PdsTab { diff --git a/libs/core/src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx b/libs/core/src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx index 8c5163513..4a65e2609 100644 --- a/libs/core/src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx +++ b/libs/core/src/components/pds-tabs/pds-tabpanel/pds-tabpanel.tsx @@ -2,7 +2,7 @@ import { Component, Element, Host, h, Prop } from '@stencil/core'; @Component({ tag: 'pds-tabpanel', - styleUrls: ['../../../global/styles/base.scss', 'pds-tabpanel.scss'], + styleUrl: 'pds-tabpanel.scss', shadow: false, }) export class PdsTabpanel { diff --git a/libs/core/src/global/styles/base.scss b/libs/core/src/global/styles/base.scss index ac17c92aa..b4ba7c675 100644 --- a/libs/core/src/global/styles/base.scss +++ b/libs/core/src/global/styles/base.scss @@ -112,7 +112,7 @@ } :where(:focus-visible) { - outline: var(--pine-border-width-thin) solid var(--pine-color-purple-500); + outline: var(--pine-border-width-thick) solid var(--pine-color-purple-500); } // Misc. From 8d37ec9199b90ad187af80422f67604e40cde679 Mon Sep 17 00:00:00 2001 From: Ashley Echols Date: Wed, 18 Sep 2024 11:25:16 -0500 Subject: [PATCH 6/8] chore: replaces most core tokens in reset with semantic tokens --- libs/core/src/global/styles/base.scss | 22 +++++++++---------- libs/core/src/global/styles/tokens/index.scss | 3 +-- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/libs/core/src/global/styles/base.scss b/libs/core/src/global/styles/base.scss index b4ba7c675..8bf9a3159 100644 --- a/libs/core/src/global/styles/base.scss +++ b/libs/core/src/global/styles/base.scss @@ -1,4 +1,5 @@ // TODO: replace core tokens with semantic +// Heading color + outline /* Josh's Custom CSS Reset @@ -10,7 +11,7 @@ :where(*:not(slot)) { margin: 0; - color: var(--pine-color-grey-900); + color: var(--pine-color-text-default); } :where(img, picture, video, canvas, svg) { @@ -53,49 +54,48 @@ */ // Typography :where(*:not(slot)) { - font-family: "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, + font-family: var(--pine-font-family-body), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } :where(h1, h2, h3, h4, h5, h6) { - font-family: "GreetStandard", "Inter", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Ubuntu", sans-serif, - "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + font-family: var(--pine-font-family-heading); color: var(--pine-color-grey-950); } :where(h1) { font: var(--pine-typography-heading-h1); - letter-spacing: var(--pine-letter-spacing-185); + letter-spacing: var(--pine-letter-spacing-heading-h1); } :where(h2) { font: var(--pine-typography-heading-h2); - letter-spacing: var(--pine-letter-spacing-171); + letter-spacing: var(--pine-letter-spacing-heading-h2); } :where(h3) { font: var(--pine-typography-heading-h3); - letter-spacing: var(--pine-letter-spacing-157); + letter-spacing: var(--pine-letter-spacing-heading-h3); } :where(h4) { font: var(--pine-typography-heading-h4); - letter-spacing: var(--pine-letter-spacing-142); + letter-spacing: var(--pine-letter-spacing-heading-h4); } :where(h5) { font: var(--pine-typography-heading-h5); - letter-spacing: var(--pine-letter-spacing-128); + letter-spacing: var(--pine-letter-spacing-heading-h5); } :where(h6) { font: var(--pine-typography-heading-h6); - letter-spacing: var(--pine-letter-spacing-114); + letter-spacing: var(--pine-letter-spacing-heading-h6); } :where(p) { font: var(--pine-typography-body-md-default); - letter-spacing: var(--pine-letter-spacing-100); + letter-spacing: var(--pine-letter-spacing-body-md); } :where(code, kbd, pre, samp) { diff --git a/libs/core/src/global/styles/tokens/index.scss b/libs/core/src/global/styles/tokens/index.scss index fa563517f..ca86b10ec 100644 --- a/libs/core/src/global/styles/tokens/index.scss +++ b/libs/core/src/global/styles/tokens/index.scss @@ -1,3 +1,2 @@ @use 'core/core'; -// Reenable semantic tokens when audit is conducted -// @use 'semantic/semantic'; +@use 'semantic/semantic'; From 5facfca1160756c7bd5d1cb56d4d744a6c63f502 Mon Sep 17 00:00:00 2001 From: Ashley Echols Date: Wed, 18 Sep 2024 13:02:02 -0500 Subject: [PATCH 7/8] chore: fixes linting issue --- libs/core/src/components/pds-button/pds-button.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/core/src/components/pds-button/pds-button.scss b/libs/core/src/components/pds-button/pds-button.scss index ad04f018c..d6d8585bc 100644 --- a/libs/core/src/components/pds-button/pds-button.scss +++ b/libs/core/src/components/pds-button/pds-button.scss @@ -67,8 +67,8 @@ padding: var(--spacing-padding-block) var(--spacing-padding-inline); pds-icon { - fill: currentColor; color: currentColor; + fill: currentColor; margin-inline-end: var(--spacing-icon-margin-inline-end); } From 92fde2f59418cd1471566760e82d0a915fccd075 Mon Sep 17 00:00:00 2001 From: Ashley Echols Date: Wed, 18 Sep 2024 15:34:21 -0500 Subject: [PATCH 8/8] style: removes default color from reset file --- libs/core/src/global/styles/base.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/libs/core/src/global/styles/base.scss b/libs/core/src/global/styles/base.scss index 8bf9a3159..8c501850b 100644 --- a/libs/core/src/global/styles/base.scss +++ b/libs/core/src/global/styles/base.scss @@ -11,7 +11,6 @@ :where(*:not(slot)) { margin: 0; - color: var(--pine-color-text-default); } :where(img, picture, video, canvas, svg) {