fix: include themed style in ui-theme-tags CSS package (#2383)

packages/dnb-design-system-portal/scripts/compile-css-packages.cjs

@@ -0,0 +1,61 @@
+const path = require('path')
+const fs = require('fs-extra')
+const sass = require('sass')
+
+/**
+ * Converts SASS to CSS and puts the css files inside the /public directory.
+ *
+ * You can run this script manually as well:
+ * yarn workspace dnb-design-system-portal node scripts/compile-css-packages.cjs
+ *
+ * @param {array} convertFiles List of Eufemia packages
+ */
+function generatePackages(convertFiles) {
+  convertFiles.forEach((filePath) => {
+    /**
+     * include other paths, in case a SCSS files requires it:
+     * path.resolve(__dirname, '../src/style/core/')
+     */
+    const includePaths = []
+
+    const file = require.resolve(filePath)
+    const result = sass.renderSync({ file, includePaths })
+    const name = path.basename(filePath).replace('.scss', '')
+    const dest = path.resolve(__dirname, `../public/${name}.css`)
+
+    fs.writeFileSync(dest, result.css)
+  })
+}
+exports.generatePackages = generatePackages
+
+// For CLI call run: yarn workspace dnb-design-system-portal node scripts/compile-css-packages.cjs
+if (require.main === module) {
+  generatePackages([
+    '@dnb/eufemia/src/style/dnb-ui-core.scss',
+    '@dnb/eufemia/src/style/themes/theme-ui/ui-theme-basis.scss',
+    '@dnb/eufemia/src/style/themes/theme-ui/ui-theme-tags.scss',
+  ])
+}
+
+/**
+ * This helper function could be used inside gatsby-node
+ * to re-generate the sass to css conversion each time a page gets visited.
+ *
+ * But because its so rarely touched, we rather keep it inside here as of now.
+ *
+ * exports.onCreateDevServer = ({ app }) => {
+ *  runGeneratePackages({
+ *    app,
+ *    page: '/uilib/elements/elements-without-classes',
+ *    packages: ['@dnb/eufemia/src/style/themes/theme-ui/ui-theme-tags.scss'],
+ *  })
+ * }
+ */
+function runGeneratePackages({ app, page, packages }) {
+  // Run a Node.js Script on a specific page visit
+  app.get(page, (req, res, next) => {
+    generatePackages(packages)
+    next()
+  })
+}
+exports.runGeneratePackages = runGeneratePackages

packages/dnb-design-system-portal/src/docs/uilib/elements/elements-without-classes.tsx

@@ -0,0 +1,104 @@
+import React from 'react'
+
+/**
+ * NB: In order to update the styles for this page,
+ * run: yarn workspace dnb-design-system-portal node scripts/compile-css-packages.cjs
+ *
+ * This is because this package is not imported as it would interfer with the class based styles.
+ *
+ * During the visual tests, the needed styles are generated.
+ */
+
+export default function ElementsWithoutClassesVisualTest() {
+  return (
+    <div
+      className="dnb-core-style"
+      data-visual-test="elements-without-classes"
+    >
+      <a href="/">anchor</a>
+
+      <p>
+        paragraph Dis leo ala tractatos <br />
+        vivendum tractatos <a href="/uilib/elements#blockquote">
+          anchor
+        </a>{' '}
+        ei quo.
+      </p>
+
+      <h1>h1</h1>
+      <h2>h2</h2>
+      <h3>h3</h3>
+      <h4>h4</h4>
+      <h5>h5</h5>
+      <h6>h6</h6>
+
+      <ul>
+        <li>ul li 1</li>
+        <li>ul li 2</li>
+      </ul>
+
+      <ol>
+        <li>ol li 1</li>
+        <li>ol li 2</li>
+      </ol>
+
+      <dl>
+        <dt>dl title 1</dt>
+        <dd>dl description 1</dd>
+        <dt>dl title 2</dt>
+        <dd>dl description 2</dd>
+      </dl>
+
+      <hr />
+
+      <br />
+
+      <img
+        width="100"
+        height="100"
+        alt="DNB logo"
+        src="/dnb/android-chrome-192x192.png"
+      />
+
+      <br />
+
+      <figure>
+        <img
+          width="100"
+          height="100"
+          alt="alt text"
+          src="https://invalid"
+        />
+        <figcaption>img caption</figcaption>
+      </figure>
+
+      <br />
+
+      <label>
+        label <input type="checkbox" />
+      </label>
+
+      <br />
+
+      <pre>
+        pre tag <br /> with a newline
+      </pre>
+
+      <blockquote>
+        Dis leo ala tractatos{' '}
+        <a href="/uilib/elements#blockquote">vivendum tractatos</a> ei quo.
+        <cite>Cite Referance</cite>
+      </blockquote>
+    </div>
+  )
+}
+
+export const Head = () => {
+  return (
+    <link
+      href="/ui-theme-tags.css"
+      rel="stylesheet"
+      data-name="data-visual-test"
+    />
+  )
+}

packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling.mdx

@@ -127,16 +127,16 @@ For more details, check out the source file: `spacing.scss`
 
 ## Styling of HTML Elements (tags)
 
-To deal with HTML Elements, without declaring them individual with the right css classes, like `<h1 class="dnb-h--xx-large">`, you can import the sub package **ui-theme-tags**.
+To deal with HTML Elements, without declaring them with individual CSS classes (like `<h1 class="dnb-h--xx-large">`), you can import the sub package **ui-theme-tags**.
 
 **NB:** Use it carefully - cause this will effect existing styles as well!
 
-```js
-/* directly the CSS file */
-import '@dnb/eufemia/style/themes/theme-ui/ui-theme-tags.min.css'
+```diff
+import '@dnb/eufemia/style/dnb-ui-core.min.css'
+import '@dnb/eufemia/style/themes/theme-ui/ui-theme-basis.min.css'
 
-/* ... or by the shorthand */
-import '@dnb/eufemia/style/themes/theme-ui/elements'
+- import '@dnb/eufemia/style/themes/theme-ui/ui-theme-components.min.css'
++ import '@dnb/eufemia/style/themes/theme-ui/ui-theme-tags.min.css'
 ```
 
 ```html

packages/dnb-eufemia/.storybook/preview.js

@@ -1,3 +1,13 @@
 import '@dnb/eufemia/src/style/dnb-ui-core.scss'
-import '@dnb/eufemia/src/style/themes/theme-ui/ui-theme-components.scss'
+
+// DNB Universal Identity styles
 import '@dnb/eufemia/src/style/themes/theme-ui/ui-theme-basis.scss'
+import '@dnb/eufemia/src/style/themes/theme-ui/ui-theme-components.scss'
+
+// DNB Universal Identity Tags package
+// import '@dnb/eufemia/src/style/themes/theme-ui/ui-theme-basis.scss'
+// import '@dnb/eufemia/src/style/themes/theme-ui/ui-theme-tags.scss'
+
+// Sbanken styles
+// import '@dnb/eufemia/src/style/themes/theme-sbanken/sbanken-theme-basis.scss'
+// import '@dnb/eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss'

packages/dnb-eufemia/src/components/anchor/style/themes/dnb-anchor-theme-ui.scss

@@ -1,6 +1,6 @@
 @use '../anchor-mixins.scss';
 
-.dnb-anchor {
+@mixin anchorStyle() {
   color: var(--color-sea-green);
 
   &:hover,
@@ -21,22 +21,36 @@
   }
 }
 
-.dnb-anchor--hover {
-  color: var(--color-sea-green);
-  @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
-}
-
-.dnb-anchor--active {
-  color: var(--color-mint-green);
-  @include anchor-mixins.anchorBackground(var(--color-emerald-green));
-}
+$useClasses: true !default;
+@if $useClasses {
+  .dnb-anchor {
+    @include anchorStyle();
+  }
 
-.dnb-anchor--focus {
-  &:not(:active) {
+  .dnb-anchor--hover {
     color: var(--color-sea-green);
+    @include anchor-mixins.anchorBackground(var(--color-mint-green-50));
+  }
+
+  .dnb-anchor--active {
+    color: var(--color-mint-green);
+    @include anchor-mixins.anchorBackground(var(--color-emerald-green));
+  }
+
+  .dnb-anchor--focus {
+    &:not(:active) {
+      color: var(--color-sea-green);
+    }
+  }
+
+  .dnb-anchor--contrast {
+    @include anchor-mixins.useAnchorContrastStyle();
   }
 }
 
-.dnb-anchor--contrast {
-  @include anchor-mixins.useAnchorContrastStyle();
+@mixin anchorThemeTag() {
+  a {
+    --theme-color-black-80: var(--color-sea-green);
+    @include anchorStyle();
+  }
 }

packages/dnb-eufemia/src/elements/__tests__/ElementsWithoutClasses.screenshot.test.ts

@@ -0,0 +1,28 @@
+/**
+ * Screenshot Test
+ * This file will not run on "test:staged" because we don't require any related files
+ */
+
+import {
+  makeScreenshot,
+  setupPageScreenshot,
+} from '../../core/jest/jestSetupScreenshots'
+
+import { generatePackages } from 'dnb-design-system-portal/scripts/compile-css-packages.cjs'
+
+generatePackages([
+  '@dnb/eufemia/src/style/themes/theme-ui/ui-theme-tags.scss',
+])
+
+describe('Elements without classes', () => {
+  setupPageScreenshot({
+    url: '/uilib/elements/elements-without-classes',
+  })
+
+  it('have to match all the typography variants', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="elements-without-classes"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})

packages/dnb-eufemia/src/elements/img/style/dnb-img.scss

@@ -3,30 +3,8 @@
  *
  */
 
-@import './img-mixins.scss';
+@use './img-mixins.scss';
 
 .dnb-img {
-  display: inline-flex;
-  flex-direction: column;
-
-  &:not([class*='dnb-space']) {
-    margin: 0;
-  }
-  padding: 0;
-
-  text-align: center; // works on Chrome – hides the alt text
-  align-items: center; // works on FF – hides the alt text
-
-  img,
-  figcaption {
-    font-size: var(--font-size-basis);
-  }
-
-  img {
-    @include imageStyle();
-  }
-
-  figcaption {
-    margin-top: 0.5rem;
-  }
+  @include img-mixins.figureStyle();
 }

packages/dnb-eufemia/src/elements/img/style/img-mixins.scss

@@ -31,8 +31,37 @@
   }
 }
 
+@mixin figureStyle() {
+  display: inline-flex;
+  flex-direction: column;
+
+  &:not([class*='dnb-space']) {
+    margin: 0;
+  }
+  padding: 0;
+
+  text-align: center; // works on Chrome – hides the alt text
+  align-items: center; // works on FF – hides the alt text
+
+  img,
+  figcaption {
+    font-size: var(--font-size-basis);
+  }
+
+  img {
+    @include imageStyle();
+  }
+
+  figcaption {
+    margin-top: 0.5rem;
+  }
+}
+
 @mixin imageTag() {
   img {
     @include imageStyle();
   }
+  figure {
+    @include figureStyle();
+  }
 }

packages/dnb-eufemia/src/elements/img/style/themes/dnb-img-theme-ui.scss

@@ -1,11 +1,24 @@
-.dnb-img {
+@mixin imgStyle() {
   &[alt]::after {
     color: var(--color-black-80);
     background-color: var(--color-black-8);
   }
+}
 
-  &__img--error {
-    color: var(--color-black-80);
-    background-color: var(--color-black-8);
+$useClasses: true !default;
+@if $useClasses {
+  .dnb-img {
+    @include imgStyle();
+
+    &__img--error {
+      color: var(--color-black-80);
+      background-color: var(--color-black-8);
+    }
+  }
+}
+
+@mixin imgThemeTag() {
+  img {
+    @include imgStyle();
   }
 }