doc: Add Brands section to documentation

site/data/sidebar-foundation.yml

@@ -7,6 +7,7 @@
     - title: Tokens
     - title: Colors
     - title: Color modes
+    - title: Themes
     - title: CSS variables
     - title: Reboot
     - title: Typography

site/src/components/shortcodes/SvgDocs.astro

@@ -19,15 +19,19 @@ interface Props {
    * @default true
    */
   downloadable?: boolean
+
   /**
    * Defines label to complete 'Copy SVG to clipboard' button aria-label.
    */
   buttonLabel?: string
+
+  theme?: string
 }
+const { theme = 'orange' } = Astro.props
 
-const { file = `${getConfig().brand}-logo`, downloadable = true, buttonLabel } = Astro.props
+const { file = `${theme}-logo`, downloadable = true, buttonLabel } = Astro.props
 
-const filePath = `site/${getConfig().brand}/static/docs/[version]/assets/brand/${file}`
+const filePath = `site/static/[brand]/docs/[version]/assets/brand/${file}`
 const svgFormattedPath = `${filePath}-formatted.svg`
 const svgPath = `${filePath}.svg`
 
@@ -37,7 +41,7 @@ const size = fs.statSync(svgPath).size
 const clipboardLabel = buttonLabel
   ? `Copy ${buttonLabel} SVG to clipboard`
   : file
-    ? `Copy ${file}.svg file to clipboard`
+    ? `Copy ${file}.svg content to clipboard`
     : 'Copy SVG to clipboard'
 ---
 

site/src/components/shortcodes/ThemeDemo.astro

@@ -0,0 +1,211 @@
+---
+import {getDocsPublicFsPath, getVersionedDocsPath} from "@libs/path.ts";
+import {getConfig} from "@libs/config.ts";
+
+interface Props {
+  /**
+   * The theme to use for display. One of `orange`, `orange-compact`, or `sosh`.
+   * @default 'orange'
+   */
+  theme?: 'orange' | 'orange-compact' | 'sosh'
+
+}
+
+const {theme = 'orange'} = Astro.props
+---
+
+<link rel="preload" href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg` as="image" type="image/svg+xml"/>
+
+
+<div data-bs-brand={theme} id={`theme-demo-${theme}`} class="py-scaled-large">
+  <div class="row mb-scaled-medium">
+    <div class="col-12 sm:col-10 md:col-12 xl:col-10">
+      <div class="alert alert-message alert-positive mb-medium">
+        <div class="alert-icon"></div>
+        <div class="alert-container">
+          <div class="alert-text-container">
+            <p class="alert-label">Success</p>
+          </div>
+        </div>
+      </div>
+      <div class="alert alert-message alert-warning">
+        <div class="alert-icon"></div>
+        <div class="alert-container">
+          <div class="alert-text-container">
+            <p class="alert-label">Warning</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="row mb-scaled-medium">
+    <div class="col-12 sm:col-10 md:col-12 xl:col-10 d-flex justify-content-between flex-wrap gap-xsmall">
+      <button type="button" class="btn btn-default">Default</button>
+      <button type="button" class="btn btn-brand">
+        <svg aria-hidden="true">
+          <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`/>
+        </svg>
+        Brand
+      </button>
+      <button type="button" class="btn btn-icon btn-strong">
+        <svg aria-hidden="true">
+          <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`/>
+        </svg>
+        <span class="visually-hidden">Brand</span>
+      </button>
+      <button type="button" class="btn btn-icon btn-negative">
+        <svg aria-hidden="true">
+          <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`/>
+        </svg>
+        <span class="visually-hidden">Brand</span>
+      </button>
+      <button type="button" class="btn btn-icon btn-minimal">
+        <svg aria-hidden="true">
+          <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`/>
+        </svg>
+        <span class="visually-hidden">Brand</span>
+      </button>
+      <a class="btn btn-default btn-previous" href="#">Previous</a>
+      <a class="btn btn-default btn-next" href="#">Next</a>
+    </div>
+  </div>
+  <div class="row mb-scaled-medium">
+    <div class="col-12 sm:col-10 md:col-12 xl:col-10 d-flex gap-scaled-medium align-items-center flex-wrap">
+      <div class="d-inline-flex gap-medium">
+        <p class="badge badge-positive badge-large"><span class="visually-hidden">Success</span></p>
+        <p class="badge badge-info badge-large"><span class="visually-hidden">Info</span></p>
+        <p class="badge badge-warning badge-large"><span class="visually-hidden">Warning</span></p>
+        <p class="badge badge-large"><span class="visually-hidden">Beware</span></p>
+      </div>
+      <div class="d-inline-flex gap-medium">
+        <p class="badge badge-neutral badge-count badge-large">0<span class="visually-hidden">notification</span></p>
+        <p class="badge badge-accent badge-count badge-large">1<span class="visually-hidden">notification</span></p>
+        <p class="badge badge-positive badge-large">
+          <span class="badge-status-icon"></span>
+          <span class="visually-hidden">Success</span>
+        </p>
+        <p class="badge badge-info badge-large">
+          <span class="badge-status-icon"></span>
+          <span class="visually-hidden">Info</span>
+        </p>
+      </div>
+      <nav aria-label="basic breadcrumb">
+        <ol class="breadcrumb mb-none">
+          <li class="breadcrumb-item"><a href="#" title="Home">Home</a></li>
+          <li class="breadcrumb-item"><a href="#" title="Category">Category</a></li>
+          <li class="breadcrumb-item active" aria-current="page"><span title="Library">Library</span></li>
+        </ol>
+      </nav>
+    </div>
+  </div>
+  <div class="row mb-scaled-medium">
+    <div class="col-12 sm:col-10 md:col-6 xl:col-5 mb-scaled-medium">
+      <div class="checkbox-item mb-scaled-small">
+        <div class="control-item-assets-container">
+          <input checked class="control-item-indicator" type="checkbox" value="" id={`cb-${theme}`}/>
+        </div>
+        <div class="control-item-text-container">
+          <label class="control-item-label" for={`cb-${theme}`}>Checkbox</label>
+        </div>
+      </div>
+      <fieldset class="control-items-list mb-scaled-small">
+        <div class="d-flex flex-row gap-small w-50">
+          <div class="radio-button-item flex-fill">
+            <div class="control-item-assets-container">
+              <input class="control-item-indicator" type="radio" value="" id={`rb1-${theme}`} name={`radio-${theme}`} checked />
+            </div>
+            <div class="control-item-text-container">
+              <label class="control-item-label" for={`rb1-${theme}`}>Yes</label>
+            </div>
+          </div>
+          <div class="radio-button-item flex-fill">
+            <div class="control-item-assets-container">
+              <input class="control-item-indicator" type="radio" value="" id={`rb2-${theme}`} name={`radio-${theme}`} />
+            </div>
+            <div class="control-item-text-container">
+              <label class="control-item-label" for={`rb2-${theme}`}>No</label>
+            </div>
+          </div>
+        </div>
+      </fieldset>
+      <div class="switch-item mb-scaled-small">
+        <div class="control-item-assets-container">
+          <input class="control-item-indicator" type="checkbox" role="switch" value="" id={`switch-${theme}`} />
+        </div>
+        <div class="control-item-text-container">
+          <label class="control-item-label" for={`switch-${theme}`}>Switch with icon</label>
+        </div>
+        <div class="control-item-assets-container">
+          <svg aria-hidden="true">
+            <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`/>
+          </svg>
+        </div>
+      </div>
+      <div class="d-flex gap-scaled-medium">
+        <a class="link link-chevron" href="#">Link with chevron</a>
+        <a class="link icon-link" href="#">
+          <svg aria-hidden="true">
+            <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#heart-empty`/>
+          </svg>
+          Link with icon
+        </a>
+      </div>
+    </div>
+    <div class="col-12 sm:col-10 md:col-6 xl:col-5">
+      <ul class="list-unstyled d-flex flex-wrap column-gap-xsmall row-gap-medium mb-scaled-medium"
+          aria-label="Statuses">
+        <li class="tag tag-positive"><span class="tag-status-icon"></span>Success</li>
+        <li class="tag tag-info"><span class="tag-status-icon"></span>Info</li>
+        <li class="tag tag-warning tag-muted"><span class="tag-status-icon"></span>Warning</li>
+        <li class="tag tag-negative tag-muted"><span class="tag-status-icon"></span>Error</li>
+      </ul>
+      <div role="group" aria-label="Filter by" class="mb-scaled-medium">
+        <ul class="chips-container">
+          <li class="chip chip-filter">
+            <input type="checkbox" id={`ap-${theme}`} checked />
+            <label class="chip-interactive" for={`ap-${theme}`}>
+              Apple
+            </label>
+          </li>
+          <li class="chip chip-filter">
+            <input type="checkbox" id={`sa-${theme}`} />
+            <label class="chip-interactive" for={`sa-${theme}`}>
+              Samsung
+            </label>
+          </li>
+          <li class="chip chip-filter">
+            <input type="checkbox" id={`xi-${theme}`} />
+            <label class="chip-interactive" for={`xi-${theme}`}>
+              Xiaomi
+            </label>
+          </li>
+        </ul>
+      </div>
+      <div class="text-input mb-scaled-medium">
+        <div class="text-input-container">
+          <label for={`pwd-${theme}`}>Password</label>
+          <input type="password" id={`pwd-${theme}`} class="text-input-field" placeholder=" ">
+          <button class="btn btn-minimal btn-icon" aria-pressed="false" type="button">
+            <svg aria-hidden="true">
+              <use xlink:href=`/${theme}/docs/${getConfig().docs_version}/assets/img/ouds-web-sprite.svg#accessibility-vision`/>
+            </svg>
+            <span class="visually-hidden">Show password</span>
+          </button>
+        </div>
+      </div>
+      <div class="select-input mb-scaled-medium">
+        <div class="select-input-container">
+          <label for={`sel-${theme}`}>Default select</label>
+          <select class="select-input-field" id={`sel-${theme}`}>
+            <option value="" disabled selected></option>
+            <option value="1">One</option>
+            <option value="2">Two</option>
+            <option value="3">Three</option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+

site/src/components/shortcodes/ThemeDemoStylesImport.astro

@@ -0,0 +1,19 @@
+---
+
+---
+
+<style is:global lang="scss">
+  $ouds-root-selector: '&';
+  div#theme-demo-orange {
+    @import '../../../../packages/orange/scss/ouds-web.scss';
+    @import '../../../static/orange/docs/[version]/assets/fonts/solaris-icons';
+  }
+  div#theme-demo-orange-compact {
+    @import '../../../../packages/orange-compact/scss/ouds-web.scss';
+    @import '../../../static/orange-compact/docs/[version]/assets/fonts/solaris-icons';
+  }
+  div#theme-demo-sosh {
+    @import '../../../../packages/sosh/scss/ouds-web.scss';
+    @import '../../../static/sosh/docs/[version]/assets/fonts/solaris-icons';
+  }
+</style>