style: adds base/reset CSS file

libs/core/.stylelintignore

@@ -1,2 +1,3 @@
 src/global/styles/_fonts.scss
-src/global/styles/tokens/semantic/*.scss
+src/global/styles/tokens/semantic/*.scss
+src/global/styles/base.scss

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 {

libs/core/src/components/pds-accordion/stories/pds-accordion.stories.js

@@ -13,21 +13,17 @@ export default {
 
 const BaseTemplate = (args) => html`
 	<pds-accordion component-id="${args.componentId}" open="${args.isOpen}">
-    <pds-row align-items="center" slot="label">
-      <pds-box align-items="center">
-        <pds-icon name="product"></pds-icon>
-        <span style="display: inline-block; margin-left: 8px;">Products</span>
-      </pds-box>
-    </pds-row>
-    <pds-row>
-      <pds-box direction="column" gap="xs" padding="xs">
-        <pds-link variant="plain" href="#">All products</pds-link>
-        <pds-link variant="plain" href="#">Courses</pds-link>
-        <pds-link variant="plain" href="#">Coaching</pds-link>
-        <pds-link variant="plain" href="#">Community</pds-link>
-        <pds-link variant="plain" href="#">Podcasts</pds-link>
-      </pds-box>
-    </pds-row>
+    <pds-box align-items="center" slot="label">
+      <pds-icon name="product"></pds-icon>
+      <span style="display: inline-block; margin-left: 8px;">Products</span>
+    </pds-box>
+    <pds-box direction="column" gap="xs" padding="xs">
+      <pds-link variant="plain" href="#">All products</pds-link>
+      <pds-link variant="plain" href="#">Courses</pds-link>
+      <pds-link variant="plain" href="#">Coaching</pds-link>
+      <pds-link variant="plain" href="#">Community</pds-link>
+      <pds-link variant="plain" href="#">Podcasts</pds-link>
+    </pds-box>
   </pds-accordion>
 `;
 

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 {

libs/core/src/components/pds-button/pds-button.scss

@@ -67,6 +67,7 @@
   padding: var(--spacing-padding-block) var(--spacing-padding-inline);
 
   pds-icon {
+    color: currentColor;
     fill: currentColor;
     margin-inline-end: var(--spacing-icon-margin-inline-end);
   }

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

libs/core/src/global/styles/app.scss

@@ -1,2 +1,2 @@
-@use 'fonts';
 @use 'tokens/index';
+@use 'fonts';

libs/core/src/global/styles/base.scss

@@ -0,0 +1,120 @@
+// TODO: replace core tokens with semantic
+// Heading color + outline
+
+/*
+  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;
+}
+
+: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: 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: 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-heading-h1);
+}
+
+:where(h2) {
+  font: var(--pine-typography-heading-h2);
+  letter-spacing: var(--pine-letter-spacing-heading-h2);
+}
+
+:where(h3) {
+  font: var(--pine-typography-heading-h3);
+  letter-spacing: var(--pine-letter-spacing-heading-h3);
+}
+
+:where(h4) {
+  font: var(--pine-typography-heading-h4);
+  letter-spacing: var(--pine-letter-spacing-heading-h4);
+}
+
+:where(h5) {
+  font: var(--pine-typography-heading-h5);
+  letter-spacing: var(--pine-letter-spacing-heading-h5);
+}
+
+:where(h6) {
+  font: var(--pine-typography-heading-h6);
+  letter-spacing: var(--pine-letter-spacing-heading-h6);
+}
+
+:where(p) {
+  font: var(--pine-typography-body-md-default);
+  letter-spacing: var(--pine-letter-spacing-body-md);
+}
+
+: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-thick) solid var(--pine-color-purple-500);
+}
+
+// Misc.
+:where([hidden]) {
+  display: none !important;
+}

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