fix: add semantic tokens

libs/core/.storybook/PineTheme.js

@@ -7,8 +7,8 @@ export default create({
   colorSecondary: '#040506',
 
   // UI
-  appBg: '#f9fafa',
-  appContentBg: 'white',
+  appBg: '#f8f8f8',
+  appContentBg: '#f8f8f8',
   appBorderColor: '#eceeef',
   appBorderRadius: 6,
 

libs/core/.storybook/preview-body.html

@@ -3,7 +3,12 @@
 
 <style>
   /* Temp workaround because MDX2 broke styling in Storybook */
+
+  .sbdocs-wrapper {
+    background-color: var(--pine-color-background-container);
+  }
   .sb-unstyled {
+    background-color: var(--pine-color-background-app);
     font: var(--pine-typography-body);
     letter-spacing: var(--pine-letter-spacing);
     color: var(--pine-color-text);
@@ -80,4 +85,8 @@
       }
     }
   }
+
+  body {
+    background-color: var(--pine-color-background-app);
+  }
 </style>

libs/core/.storybook/preview-head.html

@@ -3,3 +3,203 @@
 <script nomodule src="/pine-core/index.esm.js"></script>
 
 <link rel="stylesheet" href="/pine-core/pine-core.css" />
+
+<script>
+  // Apply theme attribute to document
+  const applyTheme = (theme) => {
+    document.documentElement.setAttribute('data-theme', theme);
+    if (document.body) {
+      document.body.setAttribute('data-theme', theme);
+    }
+  };
+
+  // Get theme from URL globals parameter (Storybook encodes globals in URL)
+  const getThemeFromUrl = () => {
+    const url = new URL(window.location.href);
+    const globals = url.searchParams.get('globals');
+    if (globals) {
+      // Parse globals format: "theme:dark" or "theme:light;other:value"
+      const parts = globals.split(';');
+      for (const part of parts) {
+        const [key, value] = part.split(':');
+        if (key === 'theme' && value) {
+          return value;
+        }
+      }
+    }
+    return 'light';
+  };
+
+  // Apply theme from URL
+  const checkAndApplyTheme = () => {
+    const theme = getThemeFromUrl();
+    applyTheme(theme);
+  };
+
+  // Watch for URL changes (when user toggles theme in toolbar)
+  let lastUrl = window.location.href;
+  const urlObserver = setInterval(() => {
+    if (window.location.href !== lastUrl) {
+      lastUrl = window.location.href;
+      checkAndApplyTheme();
+    }
+  }, 100);
+
+  // Apply immediately
+  checkAndApplyTheme();
+
+  // Re-apply once body is available
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', checkAndApplyTheme);
+  }
+</script>
+
+
+<style>
+body {
+    background-color: var(--pine-color-background-app);
+  }
+
+  .sb-unstyled {
+    background-color: var(--pine-color-background-app);
+  }
+
+  /* Dark mode styles for Storybook docs */
+  [data-theme="dark"] .sbdocs,
+  [data-theme="dark"] .docs-story {
+    background-color: #1a1a1a;
+    color: #e0e0e0;
+  }
+
+  [data-theme="dark"] .sbdocs-wrapper {
+    background-color: #1a1a1a;
+  }
+
+  [data-theme="dark"] .sbdocs-content {
+    background-color: #1a1a1a;
+    color: #e0e0e0;
+  }
+
+  [data-theme="dark"] .docblock-argstable .docblock-argstable-body > tr > * {
+    background-color: #2d2d2d;
+  }
+
+  /* Docs headings */
+  [data-theme="dark"] .sbdocs h1,
+  [data-theme="dark"] .sbdocs h2,
+  [data-theme="dark"] .sbdocs h3,
+  [data-theme="dark"] .sbdocs h4,
+  [data-theme="dark"] .sbdocs h5,
+  [data-theme="dark"] .sbdocs h6 {
+    color: #ffffff;
+  }
+
+  /* Docs paragraphs and text */
+  [data-theme="dark"] .sbdocs p,
+  [data-theme="dark"] .sbdocs li,
+  [data-theme="dark"] .sbdocs span {
+    /* color: #d0d0d0; */
+    color: #e0e0e0;;
+  }
+
+  /* Docs links */
+  [data-theme="dark"] .sbdocs a {
+    color: #6b9f36;
+  }
+
+  [data-theme="dark"] .sbdocs a:hover {
+    color: #8bc34a;
+  }
+
+  /* Docs code blocks */
+  [data-theme="dark"] .sbdocs pre,
+  [data-theme="dark"] .sbdocs code {
+    background-color: #2d2d2d;
+    color: #e0e0e0;
+  }
+
+  [data-theme="dark"] .sbdocs pre {
+    border-color: #404040;
+  }
+
+  /* Docs tables */
+  [data-theme="dark"] .sbdocs table {
+    background-color: #252525;
+  }
+
+  [data-theme="dark"] .sbdocs th {
+    background-color: #2d2d2d;
+    color: #ffffff;
+    border-color: #404040;
+  }
+
+  [data-theme="dark"] .sbdocs td {
+    border-color: #404040;
+    color: #d0d0d0;
+  }
+
+  [data-theme="dark"] .sbdocs tr:nth-child(even) {
+    background-color: #2a2a2a;
+  }
+
+  /* Docs blockquotes */
+  [data-theme="dark"] .sbdocs blockquote {
+    background-color: #252525;
+    border-left-color: #6b9f36;
+    color: #b0b0b0;
+  }
+
+  /* Docs horizontal rules */
+  [data-theme="dark"] .sbdocs hr {
+    border-color: #404040;
+  }
+
+  /* ArgTypes/Props table */
+  [data-theme="dark"] .docblock-argstable {
+    background-color: #252525;
+  }
+
+  [data-theme="dark"] .docblock-argstable th,
+  [data-theme="dark"] .docblock-argstable td {
+    border-color: #404040;
+    color: #d0d0d0;
+  }
+
+  [data-theme="dark"] .docblock-argstable thead {
+    background-color: #2d2d2d;
+  }
+
+  [data-theme="dark"] .docblock-argstable thead th {
+    color: #ffffff;
+  }
+
+  /* Story canvas/preview area */
+  [data-theme="dark"] .innerZoomElementWrapper > div {
+    background-color: #1a1a1a;
+  }
+
+  /* Unstyled stories container */
+  [data-theme="dark"] .sb-unstyled {
+    background-color: #1a1a1a;
+  }
+
+  [data-theme="dark"] .args-table {
+    background-color: #1a1a1a;
+  }
+
+  [data-theme="dark"] .sbdocs-content .args-table-header {
+    color: #e0e0e0;
+  }
+
+  [data-theme="dark"] .sbdocs-content .arg-table-cell {
+    color: #e0e0e0;
+  }
+
+  [data-theme="dark"] .sbdocs-content .docblock-argstable-body button + span {
+    color: #2e3338;
+  }
+
+  [data-theme="dark"] .sbdocs-content .docblock-argstable-body input + span + span {
+    color: #2e3338;
+  }
+</style>

libs/core/.storybook/preview.js

@@ -113,8 +113,55 @@ const customElementsManifest = {
 
 setCustomElementsManifest(customElementsManifest);
 
+// Theme decorator that applies data-theme attribute
+const withTheme = (StoryFn, context) => {
+  const theme = context.globals.theme || 'light';
+
+  // Apply immediately for initial render
+  document.documentElement.setAttribute('data-theme', theme);
+  document.body.setAttribute('data-theme', theme);
+
+  // Also apply reactively when theme changes via toolbar
+  useEffect(() => {
+    document.documentElement.setAttribute('data-theme', theme);
+    document.body.setAttribute('data-theme', theme);
+
+    // Notify parent window of theme change (for docs pages)
+    try {
+      window.parent.document.documentElement.setAttribute('data-theme', theme);
+      window.parent.document.body.setAttribute('data-theme', theme);
+    } catch (e) {
+      // Cross-origin access may fail, that's ok
+    }
+  }, [theme]);
+
+  return StoryFn();
+};
+
 const preview = {
-  decorators: [withCustomEventActions],
+  decorators: [
+    withCustomEventActions,
+    withTheme,
+  ],
+
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      toolbar: {
+        title: 'Theme',
+        icon: 'paintbrush',
+        items: [
+          { value: 'light', title: 'Light', icon: 'sun' },
+          { value: 'dark', title: 'Dark', icon: 'moon' },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  initialGlobals: {
+    theme: 'light',
+  },
 
   parameters: {
     options: {

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

@@ -29,7 +29,7 @@ details[open] {
 summary {
   background-color: var(--pine-color-background-container);
   border-radius: var(--pine-dimension-xs);
-  color: var(--pine-color-text-readonly);
+  color: var(--pine-color-text-muted);
   font-family: var(--pine-font-family-body);
   font-size: var(--pine-font-size-body-md);
   font-weight: var(--pine-font-weight-medium);

libs/core/src/components/pds-alert/docs/pds-alert.mdx

@@ -92,15 +92,15 @@ Action items such as buttons and links should be added to alerts using the `acti
     react: `<pdsAlert heading="Alert heading text" variant="success">
   Alerts can also have description text that can be used to provide more information about the alert.
   <pdsButton slot="actions" variant="primary">Action button</pdsButton>
-  <pdsLink href="#" slot="actions" variant="plain">Action link</pdsLink>
+  <pdsLink href="#" slot="actions" variant="plain" color="var(--pine-color-grey-900)">Action link</pdsLink>
 </pdsAlert>`,
     webComponent: `<pds-alert heading="Alert heading text" variant="success">
   Alerts can also have description text that can be used to provide more information about the alert.
   <pds-button slot="actions" variant="primary">Action button</pds-button>
-  <pds-link href="#" slot="actions" variant="plain">Action link</pds-link>
+  <pds-link href="#" slot="actions" variant="plain" color="var(--pine-color-grey-900)">Action link</pds-link>
 </pds-alert>`
 }}>
-  <pds-alert heading="Alert heading text" variant="success">Alerts can also have description text that can be used to provide more information about the alert.<pds-button slot="actions" variant="primary">Action button</pds-button><pds-link href="#" slot="actions" variant="plain">Action link</pds-link></pds-alert>
+  <pds-alert heading="Alert heading text" variant="success">Alerts can also have description text that can be used to provide more information about the alert.<pds-button slot="actions" variant="primary">Action button</pds-button><pds-link href="#" slot="actions" variant="plain" color="var(--pine-color-grey-900)">Action link</pds-link></pds-alert>
 </DocCanvas>
 
 ### Small with actions
@@ -111,16 +111,16 @@ When using the small variant, actions are displayed on the same line as the desc
   mdxSource={{
     react: `<pdsAlert heading="Alert heading text" small="true" variant="warning">
   Alerts can also have description text that can be used to provide more information about the alert.
-  <pdsLink href="#" slot="actions" variant="plain">Action link</pdsLink>
-  <pdsLink href="#" slot="actions" variant="plain">Action link</pdsLink>
+  <pdsLink href="#" slot="actions" variant="plain" color="var(--pine-color-grey-900)">Action link</pdsLink>
+  <pdsLink href="#" slot="actions" variant="plain" color="var(--pine-color-grey-900)">Action link</pdsLink>
 </pdsAlert>`,
     webComponent: `<pds-alert heading="Alert heading text" small="true" variant="warning">
   Alerts can also have description text that can be used to provide more information about the alert.
-  <pds-link href="#" slot="actions" variant="plain">Action link</pds-link>
-  <pds-link href="#" slot="actions" variant="plain">Action link</pds-link>
+  <pds-link href="#" slot="actions" variant="plain" color="var(--pine-color-grey-900)">Action link</pds-link>
+  <pds-link href="#" slot="actions" variant="plain" color="var(--pine-color-grey-900)">Action link</pds-link>
 </pds-alert>`
 }}>
-  <pds-alert heading="Alert heading text" small="true" variant="warning">Alerts can also have description text that can be used to provide more information about the alert.<pds-link href="#" slot="actions" variant="plain">Action link</pds-link> <pds-link href="#" slot="actions" variant="plain">Action link</pds-link></pds-alert>
+  <pds-alert heading="Alert heading text" small="true" variant="warning">Alerts can also have description text that can be used to provide more information about the alert.<pds-link href="#" slot="actions" variant="plain" color="var(--pine-color-grey-900)">Action link</pds-link> <pds-link href="#" slot="actions" variant="plain" color="var(--pine-color-grey-900)">Action link</pds-link></pds-alert>
 </DocCanvas>
 
 

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

@@ -46,9 +46,9 @@ div {
 }
 
 .pds-avatar__badge {
-  background-color: var(--pine-color-background-container);
-  border: var(--pine-border);
-  border-color: var(--pine-color-secondary);
+  background-color: transparent;
+  border: var(--pine-dimension-none);
+  border-color: transparent;
   border-radius: var(--pine-border-radius-round);
   inset-block-end: var(--pine-dimension-none);
   inset-inline-end: var(--pine-dimension-none);