Ocelot-Social/maintenance/tools/convert-branding-scss.sh

#!/bin/bash
#
# Converts a webapp _branding.scss file to maintenance branding.css
#
# Usage:
#   ./tools/convert-branding-scss.sh path/to/_branding.scss > app/assets/css/branding.css
#
# This tool resolves SCSS variable overrides from a branding file against
# the webapp's default tokens and generates a complete CSS branding file
# for the maintenance app.
#
# Prerequisites: sass (dart-sass) and the webapp directory must be available.

set -euo pipefail

SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
REPO_ROOT="$(cd "$SCRIPT_DIR/../.." && pwd)"
WEBAPP_STYLES="$REPO_ROOT/webapp/assets/_new/styles"
BRANDING_FILE="${1:?Usage: $0 <path-to-_branding.scss>}"

if [ ! -f "$BRANDING_FILE" ]; then
  echo "Error: File not found: $BRANDING_FILE" >&2
  exit 1
fi

# Create a temporary SCSS file that imports tokens + branding override + variable mapping
TMPFILE=$(mktemp /tmp/branding-convert.XXXXXX.scss)
trap 'rm -f "$TMPFILE"' EXIT

cat > "$TMPFILE" << 'SCSS_HEADER'
@use "sass:color";
SCSS_HEADER

# Import default tokens
cat "$WEBAPP_STYLES/_styleguide-tokens.scss" >> "$TMPFILE"
cat "$WEBAPP_STYLES/tokens.scss" >> "$TMPFILE"

# Import branding overrides (these override the default SCSS variables)
cat "$BRANDING_FILE" >> "$TMPFILE"

# Generate CSS output
cat >> "$TMPFILE" << 'SCSS_TEMPLATE'

// ---- Generated CSS output ----

/* Fonts */
@font-face {
  font-family: LatoWeb;
  src: url("/fonts/Lato-Regular.1f440a46.woff2") format("woff2"),
       url("/fonts/Lato-Regular.ffb25090.woff") format("woff");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  text-rendering: optimizelegibility;
}
@font-face {
  font-family: LatoWeb;
  src: url("/fonts/Lato-Italic.a6774e2c.woff2") format("woff2"),
       url("/fonts/Lato-Italic.ff8877c4.woff") format("woff");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  text-rendering: optimizelegibility;
}
@font-face {
  font-family: LatoWeb;
  src: url("/fonts/Lato-Bold.1e239003.woff2") format("woff2"),
       url("/fonts/Lato-Bold.35be9fc3.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  text-rendering: optimizelegibility;
}
@font-face {
  font-family: LatoWeb;
  src: url("/fonts/Lato-BoldItalic.4ef02877.woff2") format("woff2"),
       url("/fonts/Lato-BoldItalic.5171ee7d.woff") format("woff");
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  text-rendering: optimizelegibility;
}

html {
  font-size: 15px;
}

body {
  font-family: LatoWeb, sans-serif;
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
  background-color: #{$color-neutral-90};
  color: #{$text-color-base};
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: none;
  font-variant-ligatures: none;
}

:root {
  --color-default: #{$background-color-softer};
  --color-default-hover: #{$color-neutral-70};
  --color-default-active: #{$color-neutral-60};
  --color-default-contrast: #{$text-color-base};
  --color-default-contrast-inverse: #{$color-neutral-100};

  --color-primary: #{$color-primary};
  --color-primary-hover: #{$color-primary-light};
  --color-primary-active: #{$color-primary-dark};
  --color-primary-contrast: #{$text-color-primary-inverse};

  --color-secondary: #{$color-secondary};
  --color-secondary-hover: #{$color-secondary-active};
  --color-secondary-active: #{darken($color-secondary, 15%)};
  --color-secondary-contrast: #{$text-color-secondary-inverse};

  --color-danger: #{$color-danger};
  --color-danger-hover: #{$color-danger-light};
  --color-danger-active: #{$color-danger-dark};
  --color-danger-contrast: #{$text-color-danger-inverse};

  --color-warning: #{$color-warning};
  --color-warning-hover: #{$color-warning-active};
  --color-warning-active: #{darken($color-warning, 15%)};
  --color-warning-contrast: #{$text-color-primary-inverse};

  --color-success: #{$color-success};
  --color-success-hover: #{$color-success-active};
  --color-success-active: #{darken($color-success, 15%)};
  --color-success-contrast: #{$text-color-primary-inverse};

  --color-info: #{$color-secondary};
  --color-info-hover: #{$color-secondary-active};
  --color-info-active: #{darken($color-secondary, 15%)};
  --color-info-contrast: #{$text-color-secondary-inverse};

  --color-disabled: #{$color-neutral-60};
  --color-disabled-contrast: #{$color-neutral-100};

  --color-text-base: #{$text-color-base};
  --color-text-soft: #{$text-color-soft};
  --color-background-soft: #{$color-neutral-95};
}
SCSS_TEMPLATE

# Compile SCSS to CSS — extract only the generated section (after the marker comment)
OUTPUT=$(npx sass --no-source-map --style=expanded "$TMPFILE" 2>/dev/null)

echo "/*"
echo " * Maintenance app branding — generated from: $(basename "$BRANDING_FILE")"
echo " * Generated by: tools/convert-branding-scss.sh"
echo " * To regenerate: ./tools/convert-branding-scss.sh $BRANDING_FILE > app/assets/css/branding.css"
echo " */"
echo ""
echo "$OUTPUT" | sed -n '/\/\* Fonts \*\//,$p'