Merge branch 'staging/clefairy' into feat/code-block/highlighting

Author: bennypowers

.changeset/dry-jobs-rest.md

@@ -0,0 +1,11 @@
+---
+"@rhds/elements": minor
+---
+`<rh-card>` added `--rh-card-header-background-on-light` and `--rh-card-header-background-on-dark` CSS custom properties
+
+```css
+rh-card.custom-card {
+  --rh-card-header-background-on-light: cornflowerblue;
+  --rh-card-header-background-on-dark: darkblue;
+}
+```

.changeset/wild-bulldogs-draw.md

@@ -0,0 +1,27 @@
+---
+"@rhds/elements": minor
+---
+
+Theming: Added [theming tokens][theming] to most elements
+
+Theming tokens let authors respond to the currently-active colour palette, and
+are especially useful when implementing [patterns][patterns] using themable elements.
+
+```html
+<rh-card class="example-logo-text-and-cta">
+  <p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>.</p>
+  <rh-cta slot="footer" href="#">Call to action</rh-cta>
+</rh-card>
+
+<style>
+  .example-logo-text-and-cta {
+    width: 360px;
+    & em {
+      color: var(--rh-color-accent-base);
+    }
+  }
+</style>
+```
+
+[theming]: ux.redhat.com/theming
+[patterns]: https://ux.redhat.com/patterns/

.gitignore

@@ -8,10 +8,9 @@ node_modules
 _site
 docs/pfe.min*
 docs/assets/playgrounds/
+docs/assets/javascript/elements/*.js.map
+docs/assets/javascript/elements/*.d.ts
 docs/assets/javascript/elements/*.js
-!docs/assets/javascript/elements/uxdot-example.js
-!docs/assets/javascript/elements/uxdot-installation-tabs.js
-!docs/assets/javascript/elements/uxdot-pattern.js
 docs/_data/playgrounds.json
 
 # Build artifacts

.stylelintrc.yml

@@ -2,8 +2,13 @@ extends:
   - stylelint-config-standard
   - '@stylistic/stylelint-config'
 
+plugins:
+  - ./node_modules/@rhds/tokens/plugins/stylelint.js
+  - '@stylistic/stylelint-plugin'
+
 ignoreFiles:
   - node_modules/**/*
+  - docs/assets/javascript/elements/*.js
 
 rules:
   alpha-value-notation: number # TODO: fix for `percentage` in tokens
@@ -19,6 +24,7 @@ rules:
     - ignoreShorthands:
         - /grid/
 
+  media-feature-range-notation: prefix
   number-max-precision: 6
   no-descending-specificity:
     - true
@@ -42,84 +48,25 @@ rules:
     - ignorePseudoElements:
       - /part(.*)/
 
-  '@stylistic/string-quotes': double
+  '@stylistic/string-quotes': single
   '@stylistic/selector-combinator-space-after': always
   '@stylistic/selector-combinator-space-before': always
+  '@stylistic/function-parentheses-newline-inside': never-multi-line
+  '@stylistic/function-comma-newline-after': always-multi-line
   '@stylistic/indentation':
-   - 2
-   - indentInsideParens: 'once-at-root-twice-in-block'
+    - 2
+    - indentInsideParens: 'once-at-root-twice-in-block'
   '@stylistic/max-line-length':
     - 100
-    - ignorePattern: /--rh-font-family-/
+    - ignorePattern: /(--rh-font-family-|https:\/\/)/
 
+  rhds/deprecated: true
   rhds/token-values: true
 
   rhds/no-unknown-token-name:
     - true
-    - migrations:
-      # reds
-      --rh-color-red-50: --rh-color-red-10
-      --rh-color-red-100: --rh-color-red-20
-      --rh-color-red-200: --rh-color-red-30
-      --rh-color-red-300: --rh-color-red-40
-      --rh-color-red-400: --rh-color-red-50
-      --rh-color-red-500: --rh-color-red-50
-      --rh-color-red-600: --rh-color-red-60
-      --rh-color-red-700: --rh-color-red-60
-      --rh-color-red-800: --rh-color-red-70
-      # oranges
-      --rh-color-orange-50: --rh-color-orange-10
-      --rh-color-orange-100: --rh-color-orange-30
-      --rh-color-orange-300: --rh-color-orange-40
-      --rh-color-orange-500: --rh-color-orange-60
-      --rh-color-orange-700: --rh-color-orange-70
-      # yellows (previously golds)
-      --rh-color-gold-50: --rh-color-yellow-10
-      --rh-color-gold-400: --rh-color-yellow-40
-      --rh-color-gold-600: --rh-color-yellow-70
-      # greens
-      --rh-color-green-50: --rh-color-green-10
-      --rh-color-green-100: --rh-color-green-20
-      --rh-color-green-500: --rh-color-green-60
-      --rh-color-green-600: --rh-color-green-70
-      # teals (previously cyans)
-      --rh-color-cyan-50: --rh-color-teal-10
-      --rh-color-cyan-100: --rh-color-teal-30
-      --rh-color-cyan-300: --rh-color-teal-50
-      --rh-color-cyan-400: --rh-color-teal-60
-      --rh-color-cyan-500: --rh-color-teal-70
-      # blues
-      --rh-color-blue-50: --rh-color-blue-10
-      --rh-color-blue-100: --rh-color-blue-20
-      --rh-color-blue-200: --rh-color-blue-30
-      --rh-color-blue-250: --rh-color-blue-40
-      --rh-color-blue-400: --rh-color-blue-50
-      --rh-color-blue-500: --rh-color-blue-60
-      --rh-color-blue-600: --rh-color-blue-70
-      # purples
-      --rh-color-purple-50: --rh-color-purple-10
-      --rh-color-purple-100: --rh-color-purple-20
-      --rh-color-purple-300: --rh-color-purple-40
-      --rh-color-purple-500: --rh-color-purple-60
-      --rh-color-purple-700: --rh-color-purple-70
-      # grays
-      --rh-color-gray-05: --rh-color-gray-10
-      --rh-color-gray-10: --rh-color-gray-20
-      --rh-color-gray-20: --rh-color-gray-30
-      --rh-color-gray-30: --rh-color-gray-40
-      --rh-color-gray-40: --rh-color-gray-50
-      --rh-color-gray-50: --rh-color-gray-60
-      --rh-color-gray-60: --rh-color-gray-70
-      --rh-color-gray-70: --rh-color-gray-80
-      --rh-color-gray-80: --rh-color-gray-90
-      --rh-color-gray-90: --rh-color-gray-95
-      --rh-color-black: --rh-color-gray-100
-
-  media-feature-range-notation: prefix
-
-plugins:
-  - ./node_modules/@rhds/tokens/plugins/stylelint.cjs
-  - '@stylistic/stylelint-plugin'
+    - allowed:
+      - --rh-icon-size
 
 overrides:
   - files:

docs/_includes/layouts/demo.njk

@@ -8,13 +8,18 @@
 
     <link rel="preconnect" href="https://ga.jspm.io">
 
-    <link rel="stylesheet" href="{{ '/styles/dev-server/styles.css' | url }}" media="all">
+    <link rel="stylesheet" href="/styles/dev-server/styles.css" media="all">
 
     <script type="importmap">{{ importMap | dump(2) | safe }}</script>
-    <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
     <script type="module">
+      // dsd polyfill needs to happen before hydration attempts
+      // lit-element-hydrate-support needs to be included before lit is loaded
+      import '/assets/javascript/dsd-polyfill.js';
+      import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
       import 'element-internals-polyfill';
     </script>
+
+    <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
   </head>
   <body unresolved>{% if demo.filePath %}
     <main>

docs/_includes/layouts/pages/basic.njk

@@ -1,37 +1,41 @@
 ---
 layout: layouts/base.njk
-importElements:
-  - rh-cta
-  - rh-footer
-  - rh-alert
-  - rh-subnav
-  - rh-tag
 ---
-<link rel="stylesheet" href="/styles/pages/backpage.css">
+<link rel="stylesheet" data-helmet href="/styles/pages/backpage.css">
 
-<script type="module" src="/assets/javascript/elements/uxdot-feedback.js"></script>
+<script type="module" data-helmet>
+  import "/assets/javascript/elements/uxdot-feedback.js"
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-footer/rh-footer.js';
+  import '@rhds/elements/rh-alert/rh-alert.js';
+  import '@rhds/elements/rh-subnav/rh-subnav.js';
+  import '@rhds/elements/rh-tag/rh-tag.js';
+  import '@rhds/elements/rh-surface/rh-surface.js';
+</script>
 {%- if tokenSearch %}
-<script type="module" src="/assets/javascript/elements/uxdot-search.js"></script>
-<script type="module" src="/assets/javascript/tokens.js"></script>
+<script type="module" data-helmet src="/assets/javascript/elements/uxdot-search.js"></script>
+<script type="module" data-helmet src="/assets/javascript/tokens.js"></script>
 {%- endif %}
 {% include 'partials/component/masthead.njk' %}
 {% include 'partials/component/sidenav.njk' %}
 
-<main id="main">
+<rh-surface id="main"
+            role="main"
+            color-palette="lightest">
   <article {% if hasToc and (content | toc).length > 0 %}class="has-toc"{% endif %}>
 
   {% include 'partials/component/header.njk' %}
   {% if hasToc and (content | toc).length > 0 %}
   <uxdot-toc summary="On this page">
-    {{ content | toc | safe }}
+    {{ content | toc(tags=tocTags or ['h2']) | safe }}
   </uxdot-toc>
   {% endif %}
 
   <div class="container">
     {{ content | safe }}
   </div>
-  
+
   </article>
   {% include "partials/component/back-to-top.njk" %}
-</main>
+</rh-surface>
 {% include 'partials/component/footer.njk' %}

docs/_includes/layouts/pages/elements.njk

@@ -3,26 +3,22 @@ layout: layouts/base.njk
 eleventyComputed:
   slug: '{{ doc.slug or element.slug }}'
   title: "{{ doc.pageTitle }} | {{ slug | deslugify }}"
-  importElements:
-    - rh-alert
-    - rh-cta
-    - rh-footer
-    - rh-subnav
-    - rh-code-block
-    - rh-table
-    - rh-accordion
-    - rh-badge
-    - rh-tag
-    - "{{ doc.tagName or element.tagName }}"
 ---
+{%- set inProgress = doc.docsPage.manifest -%}
+{%- set prettyName -%}{{ (doc.alias or doc.slug or element.slug) | deslugify }}{% endset %}
+{%- set planned = isPlanned(repoStatus, prettyName) %}
+{%- set manifest = doc.docsPage.manifest -%}
+{%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%}
+{%- set demosUrl -%}/elements/{{ slug }}/demos/{%- endset -%}
+
 {% if doc.pageTitle == 'Code' %}
-<link rel="stylesheet" href="/styles/pages/code.css">
+<link rel="stylesheet" data-helmet href="/styles/pages/code.css">
 {% endif %}
-<link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
-<link rel="stylesheet" href="/assets/packages/@rhds/tokens/css/global.css">
+<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-table/rh-table-lightdom.css">
+<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/tokens/css/global.css">
 {%- if slug == 'audio-player' %}
-<link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-audio-player/rh-audio-player-lightdom.css">
-<noscript>
+<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-audio-player/rh-audio-player-lightdom.css">
+<noscript data-helmet>
   <style>
   rh-audio-player:not([expanded]) rh-transcript:not(:defined) {
     display: block;
@@ -31,35 +27,50 @@ eleventyComputed:
 </noscript>
 {%- endif %}
 {%- if slug == 'pagination' %}
-<link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-pagination/rh-pagination-lightdom.css">
+<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-pagination/rh-pagination-lightdom.css">
 {%- endif %}
 {%- if slug == 'tile' %}
-<link rel="stylesheet" href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">
+<link rel="stylesheet" data-helmet href="/assets/packages/@rhds/elements/elements/rh-tile/rh-tile-lightdom.css">
 {%- endif %}
-<link rel="stylesheet" href="/styles/pages/backpage.css">
-<link rel="stylesheet" href="/styles/samp.css">
+<link rel="stylesheet" data-helmet href="/styles/pages/backpage.css">
+<link rel="stylesheet" data-helmet href="/styles/samp.css">
 
-<style>
+<style data-helmet>
   rh-accordion details summary {
     font-weight: var(--rh-font-weight-heading-medium, 500);
   }
 </style>
 
-<script type="module" src="/assets/javascript/elements/uxdot-feedback.js"></script>
-<script type="module" src="/assets/javascript/elements/uxdot-copy-button.js"></script>
+<script type="module" data-helmet>
+  import "/assets/javascript/elements/uxdot-feedback.js";
+  import "/assets/javascript/elements/uxdot-copy-button.js";
+  import '/assets/javascript/elements/uxdot-header.js';
+  import '@rhds/elements/rh-alert/rh-alert.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-footer/rh-footer.js';
+  import '@rhds/elements/rh-subnav/rh-subnav.js';
+  import '@rhds/elements/rh-surface/rh-surface.js';
+  import '@rhds/elements/rh-code-block/rh-code-block.js';
+  import '@rhds/elements/rh-table/rh-table.js';
+  import '@rhds/elements/rh-accordion/rh-accordion.js';
+  import '@rhds/elements/rh-badge/rh-badge.js';
+  import '@rhds/elements/rh-tag/rh-tag.js';
+</script>
+
+{% if not planned %}
+<script type="module" data-helmet>
+  import '@rhds/elements/{{ doc.tagName or element.tagName }}/{{ doc.tagName or element.tagName }}.js';
+</script>
+{% endif %}
 
 {% include 'partials/component/masthead.njk' %}
 {% include 'partials/component/sidenav.njk' %}
-<main id="main">
+<rh-surface id="main"
+            role="main"
+            color-palette="lightest">
   <article {% if hasToc and (content | toc).length > 0 %}class="has-toc"{% endif %}>
     <uxdot-header has-subnav>
-      {%- set inProgress = doc.docsPage.manifest -%}
-      {%- set name = (doc.alias) or (slug | deslugify) %}
-      {%- set planned = isPlanned(repoStatus, name) %}
-      <h1 id="{{ slug }}" class="page-title">{{ name }}{% if planned %} <rh-tag icon="notification-fill" color="gray">Planned</rh-tag>{% endif %}</h1>
-      {%- set manifest = doc.docsPage.manifest -%}
-      {%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%}
-      {%- set demosUrl -%}/elements/{{ slug }}/demos/{%- endset -%}
+      <h1 id="{{ slug }}" class="page-title">{{ prettyName }}{% if planned %} <rh-tag icon="notification-fill" color="gray">Planned</rh-tag>{% endif %}</h1>
       <rh-subnav slot="subnav">{% for tab in doc.tabs %}{% if loop.last and demos.length %}
         <a {{ 'active' if page.url === demosUrl }} href="{{ demosUrl }}">Demos</a>{% endif %}
         <a {{ 'active' if tab.href == page.url }} href="{{ tab.href }}">
@@ -81,5 +92,5 @@ eleventyComputed:
 
   </article>
   {% include "partials/component/back-to-top.njk" %}
-</main>
+</rh-surface>
 {% include 'partials/component/footer.njk' %}

docs/_includes/layouts/pages/home.njk

@@ -1,16 +1,21 @@
 ---
 layout: layouts/base.njk
-importElements:
-  - rh-cta
-  - rh-footer
-  - rh-tag
 ---
 
+<script type="module" data-helmet>
+  import '@rhds/elements/rh-surface/rh-surface.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-footer/rh-footer.js';
+  import '@rhds/elements/rh-tag/rh-tag.js';
+</script>
+
 {% include 'partials/component/masthead.njk' %}
 {% include 'partials/component/sidenav.njk' %}
-<main id="main">
+<rh-surface id="main"
+            role="main"
+            color-palette="lightest">
   {{ content | safe }}
   {% include "partials/component/back-to-top.njk" %}
-</main>
+</rh-surface>
 {% include 'partials/component/footer.njk' %}