Add StarshipOS branding and global dark theme to both XWiki instances

- Global high-contrast dark theme (#000000 bg / #ffffff fg) via
  cssVariablesInit.min.css override for xwiki-org and xwiki-com
- StarshipOS SVG logo (Santino Shiba Inu badge + logotype)
- SVG, 16px and 144px PNG favicons from the same badge design
- docker-compose.yml bind-mounts all assets so changes survive restarts

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.gitignore

@@ -0,0 +1,6 @@
+.env
+gitea/
+nexus/
+postgres/data/
+xwiki-org/data/
+xwiki-com/data/

docker-compose.yml

@@ -0,0 +1,118 @@
+services:
+
+  postgres:
+    image: postgres:16
+    container_name: strshipos-postgres
+    restart: unless-stopped
+    environment:
+      POSTGRES_PASSWORD: ${POSTGRES_ROOT_PASSWORD}
+    volumes:
+      - ./postgres/data:/var/lib/postgresql/data
+      - ./postgres/init:/docker-entrypoint-initdb.d:ro
+    networks:
+      - internal
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres"]
+      interval: 10s
+      timeout: 5s
+      retries: 5
+
+  gitea:
+    image: gitea/gitea:latest
+    container_name: strshipos-gitea
+    restart: unless-stopped
+    depends_on:
+      postgres:
+        condition: service_healthy
+    environment:
+      - USER_UID=1000
+      - USER_GID=1000
+      - GITEA__database__DB_TYPE=postgres
+      - GITEA__database__HOST=postgres:5432
+      - GITEA__database__NAME=gitea
+      - GITEA__database__USER=gitea
+      - GITEA__database__PASSWD=${GITEA_DB_PASSWORD}
+      - GITEA__server__DOMAIN=gitea.strshipos.com
+      - GITEA__server__SSH_DOMAIN=gitea.strshipos.com
+      - GITEA__server__ROOT_URL=https://gitea.strshipos.com/
+      - GITEA__server__HTTP_PORT=3000
+      - GITEA__server__SSH_PORT=2222
+      - GITEA__server__SSH_LISTEN_PORT=22
+      - GITEA__security__SECRET_KEY=${GITEA_SECRET_KEY}
+      - GITEA__service__DISABLE_REGISTRATION=false
+    volumes:
+      - ./gitea/data:/data
+    ports:
+      - "127.0.0.1:3000:3000"
+      - "0.0.0.0:2222:22"
+    networks:
+      - internal
+
+  nexus:
+    image: sonatype/nexus3:latest
+    container_name: strshipos-nexus
+    restart: unless-stopped
+    environment:
+      - INSTALL4J_ADD_VM_PARAMS=-Xms256m -Xmx768m -XX:MaxDirectMemorySize=512m -Djava.util.prefs.userRoot=/nexus-data/jvm
+    volumes:
+      - ./nexus/data:/nexus-data
+    ports:
+      - "127.0.0.1:8081:8081"
+    networks:
+      - internal
+
+  xwiki-org:
+    image: xwiki:lts-postgres-tomcat
+    container_name: strshipos-xwiki-org
+    restart: unless-stopped
+    depends_on:
+      postgres:
+        condition: service_healthy
+    environment:
+      - DB_HOST=postgres
+      - DB_PORT=5432
+      - DB_DATABASE=xwiki_org
+      - DB_USER=xwiki_org
+      - DB_PASSWORD=${XWIKI_ORG_DB_PASSWORD}
+      - JAVA_OPTS=-Xms256m -Xmx512m
+    volumes:
+      - ./xwiki-org/data:/usr/local/xwiki
+      - ./xwiki-org/cssVariablesInit.min.css:/usr/local/tomcat/webapps/ROOT/skins/flamingo/cssVariablesInit.min.css
+      - ./logo.svg:/usr/local/tomcat/webapps/ROOT/skins/flamingo/logo.svg
+      - ./favicon.svg:/usr/local/tomcat/webapps/ROOT/resources/icons/xwiki/favicon.svg
+      - ./favicon16.png:/usr/local/tomcat/webapps/ROOT/resources/icons/xwiki/favicon16.png
+      - ./favicon144.png:/usr/local/tomcat/webapps/ROOT/resources/icons/xwiki/favicon144.png
+    ports:
+      - "127.0.0.1:8090:8080"
+    networks:
+      - internal
+
+  xwiki-com:
+    image: xwiki:lts-postgres-tomcat
+    container_name: strshipos-xwiki-com
+    restart: unless-stopped
+    depends_on:
+      postgres:
+        condition: service_healthy
+    environment:
+      - DB_HOST=postgres
+      - DB_PORT=5432
+      - DB_DATABASE=xwiki_com
+      - DB_USER=xwiki_com
+      - DB_PASSWORD=${XWIKI_COM_DB_PASSWORD}
+      - JAVA_OPTS=-Xms256m -Xmx512m
+    volumes:
+      - ./xwiki-com/data:/usr/local/xwiki
+      - ./xwiki-com/cssVariablesInit.min.css:/usr/local/tomcat/webapps/ROOT/skins/flamingo/cssVariablesInit.min.css
+      - ./logo.svg:/usr/local/tomcat/webapps/ROOT/skins/flamingo/logo.svg
+      - ./favicon.svg:/usr/local/tomcat/webapps/ROOT/resources/icons/xwiki/favicon.svg
+      - ./favicon16.png:/usr/local/tomcat/webapps/ROOT/resources/icons/xwiki/favicon16.png
+      - ./favicon144.png:/usr/local/tomcat/webapps/ROOT/resources/icons/xwiki/favicon144.png
+    ports:
+      - "127.0.0.1:8091:8080"
+    networks:
+      - internal
+
+networks:
+  internal:
+    driver: bridge

favicon.svg

@@ -0,0 +1,63 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     viewBox="0 0 72 72" width="72" height="72">
+  <defs>
+    <path id="favArc" d="M 8,36 A 28,28 0 0,1 64,36"/>
+    <radialGradient id="gal" cx="45%" cy="40%" r="60%">
+      <stop offset="0%"   stop-color="#1a2a5a" stop-opacity="0.7"/>
+      <stop offset="100%" stop-color="#06081a" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+
+  <!-- Background circle -->
+  <circle cx="36" cy="36" r="36" fill="#06081a"/>
+  <circle cx="36" cy="36" r="36" fill="url(#gal)"/>
+  <!-- Border rings -->
+  <circle cx="36" cy="36" r="34" fill="none" stroke="#ffffff" stroke-width="1.5"/>
+  <circle cx="36" cy="36" r="30" fill="none" stroke="#ffffff" stroke-width="0.5" stroke-dasharray="2,3"/>
+
+  <!-- Ears (behind head) -->
+  <ellipse cx="21" cy="23" rx="7.5" ry="10" fill="#c05010" transform="rotate(-18,21,23)"/>
+  <ellipse cx="51" cy="23" rx="7.5" ry="10" fill="#c05010" transform="rotate(18,51,23)"/>
+  <ellipse cx="21" cy="23" rx="4.5" ry="6" fill="#e07830" transform="rotate(-18,21,23)"/>
+  <ellipse cx="51" cy="23" rx="4.5" ry="6" fill="#e07830" transform="rotate(18,51,23)"/>
+
+  <!-- Head -->
+  <ellipse cx="36" cy="38" rx="16" ry="15" fill="#e07820"/>
+  <!-- Chin/cheek patch -->
+  <ellipse cx="36" cy="43" rx="11" ry="9" fill="#f5d090"/>
+  <!-- Forehead blaze -->
+  <ellipse cx="36" cy="29" rx="5.5" ry="4.5" fill="#f8e8c0"/>
+
+  <!-- Eyes -->
+  <ellipse cx="28.5" cy="36" rx="4.5" ry="4" fill="#1a0a00"/>
+  <ellipse cx="43.5" cy="36" rx="4.5" ry="4" fill="#1a0a00"/>
+  <circle cx="29" cy="36" r="3" fill="#5a3010"/>
+  <circle cx="43" cy="36" r="3" fill="#5a3010"/>
+  <circle cx="29" cy="36" r="2" fill="#0d0800"/>
+  <circle cx="43" cy="36" r="2" fill="#0d0800"/>
+  <circle cx="30" cy="34.5" r="1" fill="#ffffff"/>
+  <circle cx="44" cy="34.5" r="1" fill="#ffffff"/>
+  <!-- Brows -->
+  <path d="M 24.5,32 Q 28.5,30.5 32,31.5" stroke="#1a0a00" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+  <path d="M 40,31.5 Q 43.5,30.5 47.5,32" stroke="#1a0a00" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+
+  <!-- Nose + smirk -->
+  <ellipse cx="36" cy="41" rx="3" ry="2" fill="#1a0a00"/>
+  <path d="M 34,43.5 Q 37.5,47 43,44.5" stroke="#1a0a00" stroke-width="1.3" fill="none" stroke-linecap="round"/>
+  <path d="M 34,43.5 Q 32,44 31.5,43" stroke="#1a0a00" stroke-width="1" fill="none" stroke-linecap="round"/>
+
+  <!-- Collar + SANTINO tag -->
+  <path d="M 21,52 Q 36,57 51,52" stroke="#2a6a8a" stroke-width="4.5" fill="none" stroke-linecap="round"/>
+  <rect x="27" y="54" width="18" height="9" rx="2.5" ry="2.5" fill="#1a4a6a"/>
+  <circle cx="27" cy="58.5" r="4" fill="#1a4a6a"/>
+  <circle cx="45" cy="58.5" r="4" fill="#1a4a6a"/>
+  <text x="36" y="61" font-family="Arial, sans-serif" font-size="4.5" font-weight="bold"
+        fill="#ffffff" text-anchor="middle" letter-spacing="0.5">SANTINO</text>
+
+  <!-- Arced "starshipOS" text -->
+  <text font-family="Arial, sans-serif" font-size="8" font-weight="bold"
+        fill="#ffffff" letter-spacing="0.5">
+    <textPath href="#favArc" startOffset="8%">starshipOS</textPath>
+  </text>
+</svg>

logo.svg

@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 230 72" width="230" height="72">
+  <defs>
+    <!-- Arc path for text -->
+    <path id="topArc" d="M 11,36 A 25,25 0 0,1 61,36"/>
+    <!-- Galaxy gradient -->
+    <radialGradient id="gal" cx="45%" cy="40%" r="60%">
+      <stop offset="0%"   stop-color="#1a2a5a" stop-opacity="0.7"/>
+      <stop offset="100%" stop-color="#06081a" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+
+  <!-- ── BADGE ── -->
+  <!-- Space-blue background -->
+  <circle cx="36" cy="36" r="34" fill="#06081a"/>
+  <!-- Subtle galaxy gradient overlay -->
+  <circle cx="36" cy="36" r="34" fill="url(#gal)"/>
+  <!-- Outer border rings -->
+  <circle cx="36" cy="36" r="33" fill="none" stroke="#ffffff" stroke-width="1.2"/>
+  <circle cx="36" cy="36" r="29" fill="none" stroke="#ffffff" stroke-width="0.4" stroke-dasharray="2,3"/>
+
+  <!-- ── DOG EARS (behind head) ── -->
+  <ellipse cx="22" cy="24" rx="7" ry="9" fill="#c05010" transform="rotate(-18,22,24)"/>
+  <ellipse cx="50" cy="24" rx="7" ry="9" fill="#c05010" transform="rotate(18,50,24)"/>
+  <!-- Inner ear -->
+  <ellipse cx="22" cy="24" rx="4" ry="5.5" fill="#e07830" transform="rotate(-18,22,24)"/>
+  <ellipse cx="50" cy="24" rx="4" ry="5.5" fill="#e07830" transform="rotate(18,50,24)"/>
+
+  <!-- ── DOG HEAD ── -->
+  <ellipse cx="36" cy="37" rx="15" ry="14" fill="#e07820"/>
+  <!-- White cheek/chin patch -->
+  <ellipse cx="36" cy="42" rx="10" ry="8" fill="#f5d090"/>
+  <!-- White forehead blaze -->
+  <ellipse cx="36" cy="29" rx="5" ry="4" fill="#f8e8c0"/>
+
+  <!-- ── EYES ── -->
+  <!-- Eye whites -->
+  <ellipse cx="29" cy="35" rx="4" ry="3.5" fill="#1a0a00"/>
+  <ellipse cx="43" cy="35" rx="4" ry="3.5" fill="#1a0a00"/>
+  <!-- Irises -->
+  <circle cx="29.5" cy="35" r="2.8" fill="#5a3010"/>
+  <circle cx="42.5" cy="35" r="2.8" fill="#5a3010"/>
+  <!-- Pupils -->
+  <circle cx="29.5" cy="35" r="1.8" fill="#0d0800"/>
+  <circle cx="42.5" cy="35" r="1.8" fill="#0d0800"/>
+  <!-- Eye shine -->
+  <circle cx="30.3" cy="33.8" r="0.9" fill="#ffffff"/>
+  <circle cx="43.3" cy="33.8" r="0.9" fill="#ffffff"/>
+  <!-- Confident brow lines -->
+  <path d="M 25.5,31.5 Q 29,30 32,31" stroke="#1a0a00" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+  <path d="M 40,31 Q 43,30 46.5,31.5" stroke="#1a0a00" stroke-width="1.5" fill="none" stroke-linecap="round"/>
+
+  <!-- ── NOSE + MOUTH ── -->
+  <ellipse cx="36" cy="40" rx="3" ry="2" fill="#1a0a00"/>
+  <!-- Smirk -->
+  <path d="M 34,42.5 Q 37,45.5 42,43.5" stroke="#1a0a00" stroke-width="1.3" fill="none" stroke-linecap="round"/>
+  <path d="M 34,42.5 Q 32,43 31.5,42" stroke="#1a0a00" stroke-width="1" fill="none" stroke-linecap="round"/>
+
+  <!-- ── SANTINO COLLAR TAG ── -->
+  <!-- Collar band -->
+  <path d="M 22,50 Q 36,55 50,50" stroke="#2a6a8a" stroke-width="4" fill="none" stroke-linecap="round"/>
+  <!-- Bone-shaped tag -->
+  <rect x="28" y="52" width="16" height="8" rx="2" ry="2" fill="#1a4a6a"/>
+  <circle cx="28" cy="56" r="3.5" fill="#1a4a6a"/>
+  <circle cx="44" cy="56" r="3.5" fill="#1a4a6a"/>
+  <text x="36" y="58.5" font-family="Arial, sans-serif" font-size="4.5" font-weight="bold"
+        fill="#ffffff" text-anchor="middle" letter-spacing="0.5">SANTINO</text>
+
+  <!-- ── ARCED TEXT ── -->
+  <text font-family="Arial, sans-serif" font-size="7.5" font-weight="bold"
+        fill="#ffffff" letter-spacing="0.8">
+    <textPath href="#topArc" startOffset="5%">starshipOS</textPath>
+  </text>
+
+  <!-- ── LOGOTYPE TEXT to the right ── -->
+  <!-- "starship" light weight -->
+  <text x="80" y="36" font-family="'Helvetica Neue', Arial, sans-serif"
+        font-size="23" font-weight="300" fill="#ffffff" letter-spacing="-0.5">starship</text>
+  <!-- "OS" bold -->
+  <text x="80" y="62" font-family="'Helvetica Neue', Arial, sans-serif"
+        font-size="23" font-weight="800" fill="#ffffff" letter-spacing="1">OS</text>
+  <!-- Thin separator line -->
+  <line x1="80" y1="42" x2="228" y2="42" stroke="#ffffff" stroke-width="0.5" stroke-opacity="0.3"/>
+</svg>

xwiki-com/cssVariablesInit.min.css

@@ -0,0 +1,260 @@
+/*!
+## ---------------------------------------------------------------------------
+## See the NOTICE file distributed with this work for additional
+## information regarding copyright ownership.
+##
+## This is free software; you can redistribute it and/or modify it
+## under the terms of the GNU Lesser General Public License as
+## published by the Free Software Foundation; either version 2.1 of
+## the License, or (at your option) any later version.
+##
+## This software is distributed in the hope that it will be useful,
+## but WITHOUT ANY WARRANTY; without even the implied warranty of
+## MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+## Lesser General Public License for more details.
+##
+## You should have received a copy of the GNU Lesser General Public
+## License along with this software; if not, write to the Free
+## Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
+## 02110-1301 USA, or see the FSF site: http://www.fsf.org.
+## ---------------------------------------------------------------------------
+## The variables defined in this file were added in XWiki 17.3.0-RC1
+## Those variables will become stable at the end of the cycle 17.
+
+######################
+## Preparation
+######################
+#set ($themeDocFullName = "$!xwiki.getUserPreference('colorTheme')")
+#if ($themeDocFullName == '')
+#set ($themeDocFullName = 'ColorThemes.DefaultColorTheme')
+#end
+#set ($themeDoc = $xwiki.getDocument($themeDocFullName))
+#set ($themeObj = $themeDoc.getObject('FlamingoThemesCode.ThemeClass'))
+
+## List of all the new variables added to the CSS property set (from oldest to latest).
+## Those variables do not have a LESS variable equivalent in previous systems. They were introduced mostly to replace
+## whole mixins. There should be no overlap between this category of variables and the others.
+## List of versions where variables were introduced:
+## * 17.3.0RC1: 100vw, int-viewport-width, font-weight-regular, font-weight-semibold, font-weight-bold
+## * 17.9.0RC1: login-form-max-width
+#set($newVariables = {
+"100vw": "100vw",
+"int-viewport-width": "calc(10000 * tan(atan2(var(--100vw), 10000px)))",
+"login-form-max-width": "450px",
+"font-weight-regular": 400,
+"font-weight-semibold": 700,
+"font-weight-bold": "900"
+})
+
+## Retrieve the lists of variables
+#template('variablelist.vm')
+## If you want to update the values set for the old colortheme, see colorThemeInit.vm, a source of truth shared
+## with LESS variables defined in xwiki-platform-flamingo-skin-resources -> variablesInit.vm -> initFromOldColorTheme
+## A couple variables are excluded from the set, we do not port them to CSS
+#set($excludeFromOldColorThemeMapping = ['xwiki-panel-header-bg', 'xwiki-panel-header-text'])
+#foreach($excludedVariable in $excludeFromOldColorThemeMapping)
+  #set($discard = $oldColorThemeVariables.remove($excludedVariable))
+#end
+
+## $flamingoColorThemeVariables is the list of all the variables available to customize directly in the Flamingo
+## theme editor. These mappings will not always end up in the initialization of a CSS variable.
+## If you want to update the values set for the flamingo colortheme, see the colortheme xml,
+## a source of truth shared with LESS variables, defined in xwiki-platform-flamingo-theme-ui
+## To make sure all of those variables are still available even when not set in the colortheme,
+## we make sure that they all appear in another mapping above.
+## The key is the name and the value is a type for the variable.
+
+## $xsVariablesValuesCSS is the list of all the variables set in XWiki standard for various purposes.
+## Those should all be defined in variables.less and variablesInit.vm
+## Some values are changed from the bootstrap default in order to make sure there's no accessibility contrast issue
+## The key is their name and the value is the string representing the value in CSS syntax.
+## The equivalent LESS variables should be available in: xwiki-platform-flamingo-skin-resources-->variables.less
+
+
+## $bootstrapVariables is the list of Bootstrap variables we need to give default values for XWiki standard variables
+## The key is their name and the value is the string representing the value in CSS syntax.
+## The equivalent LESS variables are available in: xwiki-platform-bootstrap-->variables.less
+
+## We merge the four maps into one list.
+## We allow different values from different maps for the same variable. This is an extra fallback in case the first one
+## doesn't work. This could be the case for defaults that rely on other variables.
+## Values follow CSS cascading order (last one wins).
+#set($variableValueSets = [$oldColorThemeVariables, $bootstrapVariables, $xsVariablesValuesCSS, $newVariables])
+
+######################
+## Generation
+######################
+
+#define($css)
+## We use a tan/arctan2 hack to get a proper unitless viewport width. This hack can be avoided when the CSS Values and
+## Units module Level 4 is accepted and supported in browsers.
+## https://drafts.csswg.org/css-values/#calc-type-checking
+@property --100vw {
+  syntax: "<length>";
+  initial-value: 0px;
+  inherits: false;
+}
+
+:root {
+## First, we make sure that the necessary variables from bootstrap and XS are given at least one value.
+#foreach($variableWithValue in $variableValueSets)
+  #foreach($variableName in $variableWithValue.keySet())
+    #set($value = $variableWithValue.get($variableName))
+    #if("$!value" != '')
+      --$variableName: $!value;
+    #end
+  #end
+#end
+
+## Create CSS variables for each flamingo colorTheme variable that is set.
+## Right now we have the variable type info for all of those, but we don't use those yet.
+## Those values will override anything already declared in the XS/bootstrap defaults.
+#foreach($property in $flamingoColorThemeVariables.keySet())
+#set($value = $themeDoc.getValue($property, $themeObj))
+#if("$!value" != '')
+## If the value we want to set is a LESS variables, we make sure to convert it into a CSS variable.
+#if($stringtool.startsWith($!value, '@'))
+#set($value = 'var(--' + $stringtool.substring($value, 1) + ')')
+#end
+#set($propertyType = $flamingoColorThemeVariables.get($property))
+## For now we only use `string` variables, because it's the easiest to setup and because it's 100% compatible with
+## LESS variables. We could use the extra info we have on the variable types to use the @property syntax later.
+#if($propertyType == 'escapedText')
+--$property: "$escapetool.javascript($!value)";
+#else
+--$property: $!value;
+#end
+#end
+#end
+}
+#end
+*/$!css
+
+/* ===== HIGH CONTRAST DARK THEME ===== */
+:root {
+  --body-bg: #000000;
+  --xwiki-page-content-bg: #000000;
+  --xwiki-background-secondary-color: #000000;
+  --xwiki-page-header-bg-color: #000000;
+  --panel-bg: #000000;
+  --panel-header-bg: #000000;
+  --panel-header-text: #ffffff;
+  --panel-default-text: #ffffff;
+  --text-color: #ffffff;
+  --headings-color: #ffffff;
+  --link-color: #ffffff;
+  --navbar-default-bg: #000000;
+  --navbar-default-color: #ffffff;
+  --navbar-default-link-color: #ffffff;
+  --navbar-default-link-hover-color: #ffffff;
+  --navbar-default-link-hover-bg: #000000;
+  --navbar-default-link-active-bg: #000000;
+  --navbar-default-link-active-color: #ffffff;
+  --navbar-default-link-disabled-color: #ffffff;
+  --dropdown-bg: #000000;
+  --dropdown-link-color: #ffffff;
+  --dropdown-link-hover-bg: #000000;
+  --dropdown-link-hover-color: #ffffff;
+  --dropdown-border: rgba(255,255,255,0.8);
+  --dropdown-divider-bg: #ffffff;
+  --input-bg: #000000;
+  --input-color: #ffffff;
+  --input-border: #ffffff;
+  --input-border-focus: #ffffff;
+  --input-color-placeholder: #ffffff;
+  --breadcrumb-bg: #000000;
+  --breadcrumb-link-color: #ffffff;
+  --breadcrumb-color: #ffffff;
+  --btn-default-bg: #000000;
+  --btn-default-color: #ffffff;
+  --btn-default-border: #ffffff;
+  --btn-primary-bg: #000000;
+  --btn-primary-color: #ffffff;
+  --table-bg: #000000;
+  --table-border-color: #ffffff;
+  --table-bg-hover: #000000;
+  --xwiki-border-color: #ffffff;
+  --nav-tabs-border-color: #ffffff;
+  --nav-tabs-active-link-hover-border-color: #ffffff;
+  --nav-tabs-active-link-hover-bg: #000000;
+  --nav-link-hover-bg: #000000;
+  --list-group-border: #ffffff;
+  --pagination-border: #ffffff;
+  --pagination-hover-border: #ffffff;
+  --pagination-disabled-border: #ffffff;
+  --thumbnail-border: #ffffff;
+  --legend-border-color: #ffffff;
+  --legend-color: #ffffff;
+  --navbar-default-toggle-border-color: #ffffff;
+}
+
+*, *::before, *::after,
+html, body,
+.main, #mainContentArea, #xwikicontent, .xwikicontent,
+.wiki-content, .content-body, .xcontent, #body,
+.main-container, .container, .container-fluid,
+.panel, .panel-body, .panel-default, .panel-heading, .panel-footer,
+.navbar, .navbar-default, .navbar-header, .navbar-collapse,
+header, .header, #header,
+footer, .footer, #footer,
+.sidebar, #leftPanels, #rightPanels,
+.breadcrumb,
+.dropdown-menu,
+.modal-content, .modal-header, .modal-body, .modal-footer,
+.alert, .infomessage, .warningmessage, .errormessage, .successmessage,
+.drawer-nav, .drawer-overlay,
+.popover, .popover-content,
+.tab-content, .nav-tabs, .nav-pills,
+.list-group, .list-group-item,
+.well,
+.page-header,
+.actionmenu, #actionmenu {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+  border-color: #ffffff !important;
+}
+
+a, a:visited, a:hover, a:focus,
+.navbar a, .navbar .nav > li > a,
+.dropdown-menu > li > a,
+.nav > li > a,
+.breadcrumb > li > a,
+.list-group-item,
+.panel-title a {
+  color: #ffffff !important;
+}
+
+table, th, td, tr, thead, tbody, tfoot {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+  border-color: #ffffff !important;
+}
+
+input, textarea, select, .form-control,
+input[type=text], input[type=password], input[type=email],
+input[type=search], input[type=number], input[type=url] {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+  border-color: #ffffff !important;
+}
+
+input::placeholder, textarea::placeholder { color: #ffffff !important; opacity: 1 !important; }
+
+.btn, button, input[type=submit], input[type=button], input[type=reset] {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+  border-color: #ffffff !important;
+}
+
+pre, code, .code, .box, .code-block, kbd, samp {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+  border-color: #ffffff !important;
+}
+
+hr { border-color: #ffffff !important; }
+
+img { filter: brightness(0.9) contrast(1.1); }
+
+svg text, svg tspan { fill: #ffffff !important; }
+/* ===== END HIGH CONTRAST DARK THEME ===== */

xwiki-org/cssVariablesInit.min.css

@@ -0,0 +1,260 @@
+/*!
+## ---------------------------------------------------------------------------
+## See the NOTICE file distributed with this work for additional
+## information regarding copyright ownership.
+##
+## This is free software; you can redistribute it and/or modify it
+## under the terms of the GNU Lesser General Public License as
+## published by the Free Software Foundation; either version 2.1 of
+## the License, or (at your option) any later version.
+##
+## This software is distributed in the hope that it will be useful,
+## but WITHOUT ANY WARRANTY; without even the implied warranty of
+## MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+## Lesser General Public License for more details.
+##
+## You should have received a copy of the GNU Lesser General Public
+## License along with this software; if not, write to the Free
+## Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA
+## 02110-1301 USA, or see the FSF site: http://www.fsf.org.
+## ---------------------------------------------------------------------------
+## The variables defined in this file were added in XWiki 17.3.0-RC1
+## Those variables will become stable at the end of the cycle 17.
+
+######################
+## Preparation
+######################
+#set ($themeDocFullName = "$!xwiki.getUserPreference('colorTheme')")
+#if ($themeDocFullName == '')
+#set ($themeDocFullName = 'ColorThemes.DefaultColorTheme')
+#end
+#set ($themeDoc = $xwiki.getDocument($themeDocFullName))
+#set ($themeObj = $themeDoc.getObject('FlamingoThemesCode.ThemeClass'))
+
+## List of all the new variables added to the CSS property set (from oldest to latest).
+## Those variables do not have a LESS variable equivalent in previous systems. They were introduced mostly to replace
+## whole mixins. There should be no overlap between this category of variables and the others.
+## List of versions where variables were introduced:
+## * 17.3.0RC1: 100vw, int-viewport-width, font-weight-regular, font-weight-semibold, font-weight-bold
+## * 17.9.0RC1: login-form-max-width
+#set($newVariables = {
+"100vw": "100vw",
+"int-viewport-width": "calc(10000 * tan(atan2(var(--100vw), 10000px)))",
+"login-form-max-width": "450px",
+"font-weight-regular": 400,
+"font-weight-semibold": 700,
+"font-weight-bold": "900"
+})
+
+## Retrieve the lists of variables
+#template('variablelist.vm')
+## If you want to update the values set for the old colortheme, see colorThemeInit.vm, a source of truth shared
+## with LESS variables defined in xwiki-platform-flamingo-skin-resources -> variablesInit.vm -> initFromOldColorTheme
+## A couple variables are excluded from the set, we do not port them to CSS
+#set($excludeFromOldColorThemeMapping = ['xwiki-panel-header-bg', 'xwiki-panel-header-text'])
+#foreach($excludedVariable in $excludeFromOldColorThemeMapping)
+  #set($discard = $oldColorThemeVariables.remove($excludedVariable))
+#end
+
+## $flamingoColorThemeVariables is the list of all the variables available to customize directly in the Flamingo
+## theme editor. These mappings will not always end up in the initialization of a CSS variable.
+## If you want to update the values set for the flamingo colortheme, see the colortheme xml,
+## a source of truth shared with LESS variables, defined in xwiki-platform-flamingo-theme-ui
+## To make sure all of those variables are still available even when not set in the colortheme,
+## we make sure that they all appear in another mapping above.
+## The key is the name and the value is a type for the variable.
+
+## $xsVariablesValuesCSS is the list of all the variables set in XWiki standard for various purposes.
+## Those should all be defined in variables.less and variablesInit.vm
+## Some values are changed from the bootstrap default in order to make sure there's no accessibility contrast issue
+## The key is their name and the value is the string representing the value in CSS syntax.
+## The equivalent LESS variables should be available in: xwiki-platform-flamingo-skin-resources-->variables.less
+
+
+## $bootstrapVariables is the list of Bootstrap variables we need to give default values for XWiki standard variables
+## The key is their name and the value is the string representing the value in CSS syntax.
+## The equivalent LESS variables are available in: xwiki-platform-bootstrap-->variables.less
+
+## We merge the four maps into one list.
+## We allow different values from different maps for the same variable. This is an extra fallback in case the first one
+## doesn't work. This could be the case for defaults that rely on other variables.
+## Values follow CSS cascading order (last one wins).
+#set($variableValueSets = [$oldColorThemeVariables, $bootstrapVariables, $xsVariablesValuesCSS, $newVariables])
+
+######################
+## Generation
+######################
+
+#define($css)
+## We use a tan/arctan2 hack to get a proper unitless viewport width. This hack can be avoided when the CSS Values and
+## Units module Level 4 is accepted and supported in browsers.
+## https://drafts.csswg.org/css-values/#calc-type-checking
+@property --100vw {
+  syntax: "<length>";
+  initial-value: 0px;
+  inherits: false;
+}
+
+:root {
+## First, we make sure that the necessary variables from bootstrap and XS are given at least one value.
+#foreach($variableWithValue in $variableValueSets)
+  #foreach($variableName in $variableWithValue.keySet())
+    #set($value = $variableWithValue.get($variableName))
+    #if("$!value" != '')
+      --$variableName: $!value;
+    #end
+  #end
+#end
+
+## Create CSS variables for each flamingo colorTheme variable that is set.
+## Right now we have the variable type info for all of those, but we don't use those yet.
+## Those values will override anything already declared in the XS/bootstrap defaults.
+#foreach($property in $flamingoColorThemeVariables.keySet())
+#set($value = $themeDoc.getValue($property, $themeObj))
+#if("$!value" != '')
+## If the value we want to set is a LESS variables, we make sure to convert it into a CSS variable.
+#if($stringtool.startsWith($!value, '@'))
+#set($value = 'var(--' + $stringtool.substring($value, 1) + ')')
+#end
+#set($propertyType = $flamingoColorThemeVariables.get($property))
+## For now we only use `string` variables, because it's the easiest to setup and because it's 100% compatible with
+## LESS variables. We could use the extra info we have on the variable types to use the @property syntax later.
+#if($propertyType == 'escapedText')
+--$property: "$escapetool.javascript($!value)";
+#else
+--$property: $!value;
+#end
+#end
+#end
+}
+#end
+*/$!css
+
+/* ===== HIGH CONTRAST DARK THEME ===== */
+:root {
+  --body-bg: #000000;
+  --xwiki-page-content-bg: #000000;
+  --xwiki-background-secondary-color: #000000;
+  --xwiki-page-header-bg-color: #000000;
+  --panel-bg: #000000;
+  --panel-header-bg: #000000;
+  --panel-header-text: #ffffff;
+  --panel-default-text: #ffffff;
+  --text-color: #ffffff;
+  --headings-color: #ffffff;
+  --link-color: #ffffff;
+  --navbar-default-bg: #000000;
+  --navbar-default-color: #ffffff;
+  --navbar-default-link-color: #ffffff;
+  --navbar-default-link-hover-color: #ffffff;
+  --navbar-default-link-hover-bg: #000000;
+  --navbar-default-link-active-bg: #000000;
+  --navbar-default-link-active-color: #ffffff;
+  --navbar-default-link-disabled-color: #ffffff;
+  --dropdown-bg: #000000;
+  --dropdown-link-color: #ffffff;
+  --dropdown-link-hover-bg: #000000;
+  --dropdown-link-hover-color: #ffffff;
+  --dropdown-border: rgba(255,255,255,0.8);
+  --dropdown-divider-bg: #ffffff;
+  --input-bg: #000000;
+  --input-color: #ffffff;
+  --input-border: #ffffff;
+  --input-border-focus: #ffffff;
+  --input-color-placeholder: #ffffff;
+  --breadcrumb-bg: #000000;
+  --breadcrumb-link-color: #ffffff;
+  --breadcrumb-color: #ffffff;
+  --btn-default-bg: #000000;
+  --btn-default-color: #ffffff;
+  --btn-default-border: #ffffff;
+  --btn-primary-bg: #000000;
+  --btn-primary-color: #ffffff;
+  --table-bg: #000000;
+  --table-border-color: #ffffff;
+  --table-bg-hover: #000000;
+  --xwiki-border-color: #ffffff;
+  --nav-tabs-border-color: #ffffff;
+  --nav-tabs-active-link-hover-border-color: #ffffff;
+  --nav-tabs-active-link-hover-bg: #000000;
+  --nav-link-hover-bg: #000000;
+  --list-group-border: #ffffff;
+  --pagination-border: #ffffff;
+  --pagination-hover-border: #ffffff;
+  --pagination-disabled-border: #ffffff;
+  --thumbnail-border: #ffffff;
+  --legend-border-color: #ffffff;
+  --legend-color: #ffffff;
+  --navbar-default-toggle-border-color: #ffffff;
+}
+
+*, *::before, *::after,
+html, body,
+.main, #mainContentArea, #xwikicontent, .xwikicontent,
+.wiki-content, .content-body, .xcontent, #body,
+.main-container, .container, .container-fluid,
+.panel, .panel-body, .panel-default, .panel-heading, .panel-footer,
+.navbar, .navbar-default, .navbar-header, .navbar-collapse,
+header, .header, #header,
+footer, .footer, #footer,
+.sidebar, #leftPanels, #rightPanels,
+.breadcrumb,
+.dropdown-menu,
+.modal-content, .modal-header, .modal-body, .modal-footer,
+.alert, .infomessage, .warningmessage, .errormessage, .successmessage,
+.drawer-nav, .drawer-overlay,
+.popover, .popover-content,
+.tab-content, .nav-tabs, .nav-pills,
+.list-group, .list-group-item,
+.well,
+.page-header,
+.actionmenu, #actionmenu {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+  border-color: #ffffff !important;
+}
+
+a, a:visited, a:hover, a:focus,
+.navbar a, .navbar .nav > li > a,
+.dropdown-menu > li > a,
+.nav > li > a,
+.breadcrumb > li > a,
+.list-group-item,
+.panel-title a {
+  color: #ffffff !important;
+}
+
+table, th, td, tr, thead, tbody, tfoot {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+  border-color: #ffffff !important;
+}
+
+input, textarea, select, .form-control,
+input[type=text], input[type=password], input[type=email],
+input[type=search], input[type=number], input[type=url] {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+  border-color: #ffffff !important;
+}
+
+input::placeholder, textarea::placeholder { color: #ffffff !important; opacity: 1 !important; }
+
+.btn, button, input[type=submit], input[type=button], input[type=reset] {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+  border-color: #ffffff !important;
+}
+
+pre, code, .code, .box, .code-block, kbd, samp {
+  background-color: #000000 !important;
+  color: #ffffff !important;
+  border-color: #ffffff !important;
+}
+
+hr { border-color: #ffffff !important; }
+
+img { filter: brightness(0.9) contrast(1.1); }
+
+svg text, svg tspan { fill: #ffffff !important; }
+/* ===== END HIGH CONTRAST DARK THEME ===== */