/**
 * Quick fade on target to attract user attention
 */
:target {
    animation: target-fade 3s 1
}

@keyframes target-fade {
    0% { background-color: rgba(255, 255, 0, .5) }
    100% { background-color: rgba(255, 255, 0, 0) }
}

DECLARE @YourUserId int
SELECT TOP 1 @YourUserId = Id FROM [User]
WHERE PrimaryEmail = 'YourEmailHere'

INSERT INTO ExemplarUserRole (RoleId, UserId, CreatedBy, CreatedOn)
VALUES (1, @YourUserId, @YourUserId, GETDATE())

// Targets every button with a data-apply-theme attribute,
// and make them apply corresponding theme on click.

document.querySelectorAll("[data-apply-theme]").forEach(button => {
  button.addEventListener("keypress", e => {
    if ("Enter" !== e.code) {
      return;
    }

    updateTheme(button.dataset.applyTheme);
  });

  button.addEventListener("click", () =>
    updateTheme(button.dataset.applyTheme)
  );
});

function updateTheme(theme = "system") {
  console.log(`Setting ${theme || "system"} theme.`);
  document.body.dataset.theme = theme || "default";
}

const data = { 'first name': 'George', 'last name': 'Jetson', 'age': 110 }

function encodeQueryData(data) {
  const ret = []
  for (let d in data)
    ret.push(encodeURIComponent(d) + '=' + encodeURIComponent(data[d]))
  return ret.join('&')
}

function encodeQueryData(data) {
  return new URLSearchParams(data).toString()
}

const querystring = encodeQueryData(data)

# pnpm
pnpm install

# pnpm
pnpm dev

# pnpm
pnpm build

# pnpm
pnpm preview

# pnpm
pnpm install

# pnpm
pnpm dev

# pnpm
pnpm build

# pnpm
pnpm preview

import { resolveComponent } from 'vue'
const UBadge = resolveComponent('UBadge')

:root {
  --ui-text-dimmed: var(--ui-color-neutral-400);
  --ui-text-muted: var(--ui-color-neutral-500);
  --ui-text-toned: var(--ui-color-neutral-600);
  --ui-text: var(--ui-color-neutral-700);
  --ui-text-highlighted: var(--ui-color-neutral-900);
  --ui-text-inverted: var(--color-white);

  --ui-bg: var(--color-white);
  --ui-bg-muted: var(--ui-color-neutral-50);
  --ui-bg-elevated: var(--ui-color-neutral-100);
  --ui-bg-accented: var(--ui-color-neutral-200);
  --ui-bg-inverted: var(--ui-color-neutral-900);

  --ui-border: var(--ui-color-neutral-200);
  --ui-border-muted: var(--ui-color-neutral-200);
  --ui-border-accented: var(--ui-color-neutral-300);
  --ui-border-inverted: var(--ui-color-neutral-900);
}
.dark {
  --ui-text-dimmed: var(--ui-color-neutral-500);
  --ui-text-muted: var(--ui-color-neutral-400);
  --ui-text-toned: var(--ui-color-neutral-300);
  --ui-text: var(--ui-color-neutral-200);
  --ui-text-highlighted: var(--color-white);
  --ui-text-inverted: var(--ui-color-neutral-900);

  --ui-bg: var(--ui-color-neutral-900);
  --ui-bg-muted: var(--ui-color-neutral-800);
  --ui-bg-elevated: var(--ui-color-neutral-800);
  --ui-bg-accented: var(--ui-color-neutral-700);
  --ui-bg-inverted: var(--color-white);

  --ui-border: var(--ui-color-neutral-800);
  --ui-border-muted: var(--ui-color-neutral-700);
  --ui-border-accented: var(--ui-color-neutral-700);
  --ui-border-inverted: var(--color-white);
}

function toggleWeekends() {
  calendarOptions.value.weekends = !calendarOptions.value.weekends
}

import link from '@inertiajs/inertia-vue3/src/link'
import { createApp, h } from 'vue'

const customLink = {
  name: 'CustomLink',
  props: ['item'],
  render() {
    return h(link, this.$slots.default)
  },
  watch: {
    '$page.url': function () {
      this.onRouteChange()
    },
  },
  inject: ['onRouteChange'],
}

const app = createApp(App)
app.component('custom-link', customLink)

<sidebar-menu :link-component-name="'custom-link'"></sidebar-menu>

# alias c="clear"
alias f="open -a Finder"

# ls: adding colors, verbose listing
# and humanize the file sizes:
# alias ls="ls --color -l -h"
# alias ll="$(brew --prefix coreutils)/libexec/gnubin/ls -ahlF --color --group-directories-first"

# some ls aliases
# alias la="ls -A"
# alias ll="ls -Al"

alias ll="ls -ltr"
function dir() {
    tree -I '.git|node_modules|bower_componenents|.DS_Store' --dirsfirst --filelimit 90 -L ${1:-3} -aC $2
}

# make aliases sudo-able
alias sudo="sudo "

alias cp='cp -i'
alias mv='mv -i'
alias rm='rm -i'
# mkdir: create parent directories:
alias mkdir="mkdir -pv"

# grep: color and show the line
# number for each match:
alias grep="grep -n --color"

alias vm='ssh vagrant@127.0.0.1 -p 2222'

alias debug="node --inspect-brk ./node_modules/jest/bin/jest.js --no-cache --runInBand --watch"
alias sshkey="cat ~/.ssh/id_rsa.pub | pbcopy && echo 'Copied to clipboard.'"
alias shrug="echo '¯\_(ツ)_/¯' | pbcopy && echo 'Copied to clipboard.'"
alias please='sudo $(fc -ln -1)'
alias slime="subl"

# To update brew, npm, gem and their installed packages
alias update='brew update; brew upgrade; brew cleanup; npm update npm -g; npm update -g; sudo gem update --system; sudo gem update'

function muppd () {
    echo -e "\033[100;44m"
    sudo softwareupdate -ia
    brew update
    echo -e "\033[0m"
}

# ping: stop after 5 pings:
alias ping="ping -c 5"
alias ip="ifconfig -a | grep -o 'inet6\? \(addr:\)\?\s\?\(\(\([0-9]\+\.\)\{3\}[0-9]\+\)\|[a-fA-F0-9:]\+\)' | awk '{ sub(/inet6? (addr:)? ?/, \"\"); print }'"
alias reloaddns="dscacheutil -flushcache && sudo killall -HUP mDNSResponder"
alias shorten="pushd ~/@vticonsulting/shortener && yarn shorten \"$1\" \"$2\" && popd"

# curl: only display HTTP header:
alias HEAD="curl -I"
# this create a new HEAD command

alias weather="curl -4 http://wttr.in"

alias bsa='browser-sync start --files "**" --server --no-notify'
alias bsap='browser-sync start --proxy "local-dashboard.boosterthon.com" --files "**" --no-notify'

# alias python=python3
# cd into whatever is the forefront Finder window.

cdf() {  # short for cdfinder
  cd "`osascript -e 'tell app "Finder" to POSIX path of (insertion location as alias)'`"
}

function tdm {
    osascript -e 'tell app "System Events" to tell appearance preferences to set dark mode to not dark mode'
}

# process finding
alias pg="pgrep -lf"

alias jqq="/Users/vtolbert/@victortolbert/code/jqq/jqq.rb"

# alias t="php artisan tinker"

function t() {
  # Defaults to 3 levels deep, do more with 't 5" or 't. 1*
  # pass additional args after
  tree -I '.git|node_modules|bower_components|.DS_Store' --dirsfirst --filelimit 26 -L ${1:-3} -aC $2
}

alias a='php artisan'
alias tc="pnpm typecheck"
alias i="pnpm install"
alias d="pnpm dev"
alias b="pnpm build"
alias g='git'
alias l="pnpm lint"
alias lf="pnpm lint:fix"
alias itc="pnpm i && pnpm typecheck"
alias ea="code-insiders ~/.oh-my-zsh/custom/alias.zsh"
alias ez="code-insiders ~/.zshrc"

alias pu='vendor/bin/phpunit'

alias mfs='php artisan migrate:fresh --seed'
alias artclearall='php artisan cache:clear && php artisan view:clear && php artisan config:clear'
alias clearlog='truncate -s 0 $PWD/storage/logs/laravel.log'
alias clearlogs='truncate -s 0 $PWD/storage/logs/*.log'

# IP addresses
alias ip_intern="ipconfig getifaddr en0"
alias ip_extern="curl ipecho.net/plain; echo"

alias eslint="node_modules/.bin/eslint"

# Enhanced WHOIS lookups
alias whois="whois -h whois-servers.net"

# Hide/show all desktop icons (useful when presenting)
alias hidedesktop="defaults write com.apple.finder CreateDesktop -bool false && killall Finder"
alias showdesktop="defaults write com.apple.finder CreateDesktop -bool true && killall Finder"

# fresh () {
#   rm -rf .nuxt .data node_modules pnpm-lock.yaml
#   pnpm install
# }

alias fresh="rm -rf .nuxt .data node_modules pnpm-lock.yaml && pnpm install"

# Code Launchers
alias ci="code-insiders"

# Git aliases
alias init="git init && git add . && git commit -m '✨ Initial commit'"
alias nah='git reset --hard; git clean -df'
alias wip="git add . && git commit -m 'wip'"

function gitpull {
  if [ -d titan-common ]; then
    cd titan-common
    echo -e "\e[0;32m${PWD##*/}\e[0m"
    git pull origin $1
    cd ..
  fi
  echo -e "\e[0;32m${PWD##*/}\e[0m"
  git pull origin $1
}

function gitpush {
  if [ -d titan-common ]; then
    cd titan-common
    echo -e "\e[0;32m${PWD##*/}\e[0m"
    git push -u origin HEAD
    cd ..
  fi
  echo -e "\e[0;32m${PWD##*/}\e[0m"
  git push -u origin HEAD
}

function gitadd {
  echo -e "\e[0;32m${PWD##*/}\e[0m"
  git add . --all
  if [ -d titan-common ]; then
    cd titan-common
    echo -e "\e[0;32m${PWD##*/}\e[0m"
    git add . --all
    cd ..
  fi
}

function gitstash {
  if [ -d titan-common ]; then
    echo -e "\e[0;32m${PWD##*/}\e[0m"
    cd titan-common
    git stash $1
    cd ..
  fi
  echo -e "\e[0;32m${PWD##*/}\e[0m"
  git stash $1
}

function gitstatus {
  if [ -d titan-common ]; then
    cd titan-common
    echo -e "\e[0;32m${PWD##*/}\e[0m"
    git status
    cd ..
  fi
  echo -e "\e[0;32m${PWD##*/}\e[0m"
  git status
}

function gitmerge {
  if [ -d titan-common ]; then
    cd titan-common
    echo -e "\e[0;32m${PWD##*/}\e[0m"
    git merge $1
    cd ..
  fi
  echo -e "\e[0;32m${PWD##*/}\e[0m"
  git merge $1
}

:root {
  --rinvoq-gold: #ffd100;
  --rinvoq-gold-55: #ffe673;
  --rinvoq-gold-30: #fff1b3;
  --rinvoq-charcoal: #25282A;
  --rinvoq-charcoal-85: #46484a;
  --rinvoq-charcoal-55: #87898a;
  --rinvoq-charcoal-25: #c9c9ca;
  --rinvoq-plum: #90124A;
  --rinvoq-plum-70: #b15980;
  --rinvoq-plum-40: #d3a0b7​​​;
  --rinvoq-plum-40: #d3a0b7​​​;

  --font-family-sans: "Graphik";
  --font-thin: 100;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-black: 900;

  --text-3xs: 9px;
  --text-2xs: 10px;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;

  --border-radius: 5px;

  --white: #fff;
  --black: #000;

  --tabs-header-background: #D9D9D9;
  --tabs-header-border-radius: 4px;
  --tabs-header-height: 35px;
  --rounded-full: 9999px;

  --button-text-color: white;
  --button-font-size: 12px;
  --button-font-weight: 700;

   /* Template */
  --header-height: 86px;
  --main-content-height: 696px;
  --footer-height: 52px;

  --container-1-width: auto;
  --container-1-opacity: .98;
  --container-2-width: auto;
  --container-2-height: 384px;
  --container-3-text-color: #fff;
  --container-3-background-color: #193052;
  --container-3-width: auto;
  --container-3-height: 384px;
  --container-3-opacity: .93;
}

# Stage 1: Build
FROM node:22.14.0-slim AS base
ENV HOST=0.0.0.0 PORT=3000
EXPOSE ${PORT}

FROM base AS build

COPY . /app
WORKDIR /app

# Install dependencies
RUN pnpm install

WORKDIR /app

ENV NODE_ENV=production

# Build the application
RUN pnpm run build

##### Copy just the files we need into the image
FROM base AS deploy

WORKDIR /app
RUN mkdir dist
COPY --from=build ./app/dist ./dist

RUN npm install -g serve
CMD [ "serve", "-s", "dist" ]

<sly data-sly-use.pageHeader="com.xpediantsolutions.ccatalog.core.models.PageHeader">
    <header class="navbar navbar-expand-lg bg-abbvie px-8 py-2" style="background-color: rgb(7, 29, 73);">
        <nav class="container">
            <a class="navbar-brand flex items-center gap-2 text-white" href="/">
                <img
                    src="/etc.clientlibs/aem-component-catalog/clientlibs/clientlib-react/resources/images/logos/logo-nova.svg"
                    alt="NOVA Logo"
                >
                <span class="font-bold">Component Catalog</span>
            </a>

            <button
                class="navbar-toggler"
                type="button"
                data-toggle="collapse"
                data-target="#navbarCollapse"
                aria-controls="navbarCollapse"
                aria-expanded="false"
                aria-label="Toggle navigation"
            ><span class="navbar-toggler-icon"></span></button>

            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mr-auto">
                    <sly data-sly-test.link1Dropdown="${ !pageHeader.headerMainLink1Url }">
                        <li class="nav-item dropdown ${ pageHeader.activateMainLink1 ? 'active' : '' }">
                            <a
                                class="nav-link dropdown-toggle"
                                href="${pageHeader.headerMainLink1Url}"
                                role="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >
                              ${ pageHeader.headerMainLink1Label }
                            </a>
                            <ul class="dropdown-menu" data-sly-list="${ pageHeader.headerSublinks1List }">
                                <li>
                                    <a class="dropdown-item" href="${ item.subLabel }">
                                        ${ item.subUrl }
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </sly>

                    <sly data-sly-test="${ !link1Dropdown} ">
                        <li class="nav-item ${ pageHeader.activateMainLink1 ? 'active' : '' }">
                            <a class="nav-link" href="${ pageHeader.headerMainLink1Url }">
                                <!-- Components Link -->
                                ${ pageHeader.headerMainLink1Label }
                            </a>
                        </li>
                    </sly>

                    <sly data-sly-test.link2Dropdown="${ !pageHeader.headerMainLink2Url }">
                        <li class="nav-item dropdown ${ pageHeader.activateMainLink2 ? 'active' : '' }">
                            <a
                                class="nav-link dropdown-toggle"
                                href="${ pageHeader.headerMainLink2Url }"
                                role="button"
                                data-bs-toggle="dropdown"
                                aria-expanded="false"
                            >
                                ${ pageHeader.headerMainLink2Label }
                            </a>
                            <ul
                                class="dropdown-menu"
                                data-sly-list="${ pageHeader.headerSublinks2List }"
                            >
                                <li>
                                    <a class="dropdown-item" href="${ item.subLabel }">
                                        ${ item.subUrl }
                                    </a>
                                </li>
                            </ul>
                        </li>
                    </sly>

                    <sly data-sly-test="${ !link2Dropdown }">
                        <li class="nav-item ${ pageHeader.activateMainLink2 ? 'active' : '' }">
                            <a class="nav-link" href="${ pageHeader.headerMainLink2Url }">
                                <!-- Templates Link -->
                                ${ pageHeader.headerMainLink2Label }
                            </a>
                        </li>
                    </sly>
                </ul>
            </div>
        </nav>
    </header>
</sly>

<main class="mt-8">
    <sly
        data-sly-use.templatedContainer="com.day.cq.wcm.foundation.TemplatedContainer"
        data-sly-repeat.child="${ templatedContainer.structureResources }"
        data-sly-resource="${ child.path @ resourceType=child.resourceType, decorationTagName='div' }"
    ></sly>
</main>

<div class="footer" style="background-color: rgb(7, 29, 73); color: white">
    <footer class="container mt-4">
        <div class="row">
            <div class="col">
                <img src="/etc.clientlibs/aem-component-catalog/clientlibs/clientlib-react/resources/images/logos/logo-abbvie.svg" alt="AbbVie Logo">
                <!--
                  /etc.clientlibs/aem-component-catalog/clientlibs/clientlib-axe.js
                  /etc.clientlibs/aem-component-catalog/clientlibs/clientlib-base.css
                  /etc.clientlibs/aem-component-catalog/clientlibs/clientlib-react/resources
                  /etc.clientlibs/aem-component-catalog/clientlibs/clientlib-react/resources/
                  /etc.clientlibs/aem-component-catalog/clientlibs/clientlib-react/resources/mock.model.json
                -->
            </div>

            <div class="col">
                <div id="copyright" class="text-end">
                    <p class="fl_left enable-tooltips">
                        <a
                            href="https://abbv.ie/nova"
                            target="_blank"
                            style="color: white; text-decoration: none;"
                        >abbv.ie/nova</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>
</div>

<template
    data-sly-template.head="${ @ page, pwa }"
    data-sly-use.headlibRenderer="headlibs.html"
    data-sly-use.headResources="head.resources.html"
>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>${ page.title } ${ page.brandSlug ? ' | ' : '' } ${ page.brandSlug }</title>
    <meta data-sly-test.keywords="${ page.keywords }" name="keywords" content="${ keywords }"/>
    <meta
        data-sly-test.description="${ page.description || properties['jcr:description'] }"
        name="description"
        content="${ description }"
    />
    <meta
        data-sly-test.templateName="${ page.templateName }"
        name="template"
        content="${ templateName }"
    />
    <meta
        data-sly-test="${ page.robotsTags }"
        name="robots"
        content="${ page.robotsTags @ join=', ' }"
    >

    <sly data-sly-test="${ pwa.enabled }">
        <link rel="manifest" href="${ pwa.manifestPath }" crossorigin="use-credentials" />
        <meta name="theme-color" content="${ pwa.themeColor }" />
        <link rel="apple-touch-icon" href="${ pwa.iconPath }" />
        <sly
            data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"
            data-sly-call="${ clientlib.css @ categories='core.wcm.components.page.v2.pwa' }"
        ></sly>
        <meta name="cq:sw_path" content="${ pwa.serviceWorkerPath @ context ='text' }"/>
    </sly>
    <sly data-sly-include="head.links.html"></sly>
    <sly data-sly-include="customheaderlibs.html"></sly>
    <sly
        data-sly-call="${
            headlibRenderer.headlibs @
            page = page,
            designPath = page.designPath,
            staticDesignPath = page.staticDesignPath,
            clientLibCategories = page.clientLibCategories,
            clientLibCategoriesJsHead = page.clientLibCategoriesJsHead,
            hasCloudconfigSupport = page.hasCloudconfigSupport
        }"
    ></sly>
    <sly
        data-sly-test.appResourcesPath=${page.appResourcesPath}
        data-sly-call="${ headResources.favicons @ path = appResourcesPath }"
    ></sly>
    <sly data-sly-list="${ page.htmlPageItems }">
        <script
            data-sly-test="${ item.location.name == 'header' }"
            data-sly-element="${ item.element.name @ context='unsafe' }"
            data-sly-attribute="${ item.attributes }"
        ></script>
    </sly>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
    <style type="text/tailwindcss">
        @theme {
            --color-abbvie: rgb(7, 29, 73);
        }
    </style>
    <!-- Material Symbols -->
    <!-- Each icon must be declared alphabetically to optimize loading -->
    <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=accessibility_new,add,close,delete,info,link,palette,save,tune,warning" />
</template>

  .container {
    max-width: 1280px;
  }

label.form-label {

}

.select {

}

{
  "alloworigin": ["http://localhost:3000"],
  "allowedpaths": ["/(content|conf)/aem-component-catalog.*"],
  "supportedheaders": [
    "Authorization",
    "Origin",
    "Accept",
    "X-Requested-With",
    "Content-Type",
    "Access-Control-Request-Method",
    "Access-Control-Request-Headers"
  ],
  "supportedmethods": ["GET","HEAD"],
  "alloworiginregexp": []
}

{
    "service.ranking": "0",
    "user.mapping": [
        "aem-component-catalog.core:COMPONENTS=[adaptive-write]"
    ]
}

<template
  data-sly-template.head="${ @ page, pwa }"
  data-sly-use.headlibRenderer="headlibs.html"
  data-sly-use.headResources="head.resources.html"
>
  <meta charset="UTF-8">
  <title>${page.title}${page.brandSlug ? ' | ' : ''}${page.brandSlug}</title>
  <meta data-sly-test.keywords="${page.keywords}" name="keywords" content="${keywords}"/>
  <meta data-sly-test.description="${page.description || properties['jcr:description']}" name="description" content="${description}"/>
  <meta data-sly-test.templateName="${page.templateName}" name="template" content="${templateName}"/>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta data-sly-test="${page.robotsTags}" name="robots" content="${page.robotsTags @ join=', '}">

  <sly data-sly-test="${pwa.enabled}">
      <link rel="manifest" href="${pwa.manifestPath}" crossorigin="use-credentials"/>
      <meta name="theme-color" content="${pwa.themeColor}"/>
      <link rel="apple-touch-icon" href="${pwa.iconPath}"/>
      <sly
        data-sly-use.clientlib="core/wcm/components/commons/v1/templates/clientlib.html"
        data-sly-call="${clientlib.css @ categories='core.wcm.components.page.v2.pwa'}"></sly>
      <meta name="cq:sw_path" content="${pwa.serviceWorkerPath @ context ='text'}"/>
  </sly>
  <sly data-sly-include="head.links.html"></sly>
  <sly data-sly-include="customheaderlibs.html"></sly>


  <sly data-sly-call="${headlibRenderer.headlibs @
    page                      = page,
    designPath                = page.designPath,
    staticDesignPath          = page.staticDesignPath,
    clientLibCategories       = page.clientLibCategories,
    clientLibCategoriesJsHead = page.clientLibCategoriesJsHead,
    hasCloudconfigSupport     = page.hasCloudconfigSupport}"></sly>

  <sly data-sly-test.appResourcesPath=${page.appResourcesPath} data-sly-call="${headResources.favicons @ path = appResourcesPath}"></sly>
  <sly data-sly-list="${page.htmlPageItems}">
    <script
      data-sly-test="${item.location.name == 'header'}"
      data-sly-element="${item.element.name @ context='unsafe'}" data-sly-attribute="${item.attributes}"
    ></script>
  </sly>
  <link
    rel="stylesheet"
    type="text/css"
    href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/duotone/style.css"
  />

  <!-- <link href="https://cdn.jsdelivr.net/npm/daisyui@5" rel="stylesheet" type="text/css" /> -->
  <!-- <link href="https://cdn.jsdelivr.net/npm/daisyui@5/themes.css" rel="stylesheet" type="text/css" /> -->
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/forms"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/typography"></script>
  <script src="https://cdn.jsdelivr.net/npm/tailwindcss-animate"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/tailwind-merge@3.3.0/dist/bundle-cjs.min.js"></script> -->

  <style type="text/tailwindcss">
    @theme {
      --color-abbvie: rgb(7, 29, 73);
      --color-primary: oklch(85.65% 0.083 198.57);
      --color-primary-DEFAULT: oklch(85.65% 0.083 198.57);
      --color-primary-50: oklch(97.33% 0.017 196.88);
      --color-primary-100: oklch(95.6% 0.025 199.78);
      --color-primary-200: oklch(93.02% 0.041 198.33);
      --color-primary-300: oklch(90.61% 0.056 199);
      --color-primary-400: oklch(87.97% 0.07 199.34);
      --color-primary-500: oklch(85.65% 0.083 198.57);
      --color-primary-600: oklch(83.46% 0.095 198.02);
      --color-primary-700: oklch(81.11% 0.105 198.37);
      --color-primary-800: oklch(79.12% 0.113 197.98);
      --color-primary-900: oklch(77.31% 0.119 198.41);
      --color-primary-950: oklch(76.27% 0.121 197.65);
      --color-secondary-DEFAULT: oklch(55.33% 0.235 297.11);
      --color-secondary-50: oklch(91.16% 0.045 303.91);
      --color-secondary-100: oklch(86.66% 0.067 303.42);
      --color-secondary-200: oklch(78.86% 0.109 302.94);
      --color-secondary-300: oklch(70.07% 0.158 301.68);
      --color-secondary-400: oklch(61.85% 0.202 299.71);
      --color-secondary-500: oklch(55.33% 0.235 297.11);
      --color-secondary-600: oklch(49.38% 0.259 292.25);
      --color-secondary-700: oklch(43.61% 0.226 292.4);
      --color-secondary-800: oklch(38.4% 0.196 293.12);
      --color-secondary-900: oklch(32.17% 0.161 293.64);
      --color-secondary-950: oklch(28.99% 0.143 293.93);
      --background-image-linear: linear-gradient(266deg, var(--color-primary) 0%, var(--color-accent) 99.58%);
      --background-image-helium: url("/etc.clientlibs/aem-component-catalog/clientlibs/clientlib-react/resources/images/backgrounds/background-main.jpeg");
    }
  </style>
</template>

helium/
├── css/
│   ├── helium-plugin.css              # Tailwind plugin CSS
│   ├── helium-variables.css           # Theme variables (CSS custom props)
│   └── theme-switcher.css             # Minimal theme switch styles
├── js/
│   └── theme-switcher.js              # Multi-theme toggle script
├── themes/
│   └── themes.json                    # Theme metadata (optional use)
└── README.md