Edit
<!-- components/cheatsheet/vims-cheatsheet.php -->
<div class="cheatsheet">
<?php
ini_set('display_errors', 1);
ini_set('display_startup_errors', 1);
error_reporting(E_ALL);
if (strpos($page_path, "localhost") !== false) {
$base_url = $_SERVER['DOCUMENT_ROOT'] . "/atomic-docs/wm";
} else {
$base_url = $_SERVER['DOCUMENT_ROOT'] . "/atomic-docs-dev/wm";
}
// pull in and process vims-colors $vims-site-colors
$linesArray = file($base_url . '/scss/3-variables/_vims-colors.scss', FILE_SKIP_EMPTY_LINES | FILE_IGNORE_NEW_LINES);
if (in_array('$vims-site-colors: (', $linesArray)) {
$startLine = array_search('$vims-site-colors: (', $linesArray);
$endLine = array_search(');', $linesArray);
$valueChart = "";
$colorVarArray = [];
// create new array out of the values between the start and end lines
$siteColors = array_slice($linesArray, $startLine + 1, $endLine - $startLine - 1);
foreach ($siteColors as $colorString) {
$colorStringArray = explode(":", $colorString);
// if it has an opening parenthesis, it is a color name
if (strpos($colorString, "(") != false) {
$colorName = trim($colorStringArray[0]);
$colorName = trim($colorName, '"');
}
// if it does not have a parenthesis, it is color value and hex code
if (strpos($colorString, "(") === false && strpos($colorString, ")") === false && strpos($colorString, "-") === false) {
$colorValue = trim($colorStringArray[0]);
$colorHex = trim(str_replace(",", "", $colorStringArray[1]));
array_push($colorVarArray, [$colorName, $colorValue, $colorHex]);
}
// if it has a dash, it is a single line with name, value, and color
if (strpos($colorString, "-") != false) {
$colorString = str_replace("-", ":", $colorString);
$colorStringArray = explode(":", $colorString);
$colorName = trim($colorStringArray[0]);
$colorValue = trim($colorStringArray[1]);
$colorHex = trim(str_replace(",", "", $colorStringArray[2]));
array_push($colorVarArray, [$colorName, $colorValue, $colorHex]);
}
}
// array_multisort(array_column($colorVarArray, 1), SORT_ASC, $colorVarArray);
// get unique colors
$uniqueColors = array_unique(array_column($colorVarArray, 0));
$colorNum = sizeof($uniqueColors);
$trValue = $colorVarArray[0][1];
$currentIndex = 0;
// make arrays for each color name, value number, and hex code
$colorNameArray = array_column($colorVarArray, 0);
$colorValueArray = array_column($colorVarArray, 1);
$colorHexArray = array_column($colorVarArray, 2);
// Get unique numbers (keys) from the array
$numbersArray = array_unique($colorValueArray);
sort($numbersArray);
$nameArray = array_unique($colorNameArray);
}
?>
<div class="cheatsheet__item">
<h5 class="cheatsheet__section-title">VIMS Color Variables</h5>
<p>--> <a href="atomic-core/?cat=0-readme&comp=colors" target="_blank">Learn how colors are used on the site.</a></p>
<div class="colorVars">
<table class="hexTable">
<tr>
<th>Color Name: </th>
<th>Hex Code</th>
</tr>
<?php
for ($i = 0; $i < sizeof($colorNameArray); $i++) {
if ($colorValueArray[$i] >= 250) {
$textColor = "white";
} else {
$textColor = "black";
}
echo "<tr class='colorVar'><td>";
echo $colorNameArray[$i] . "-" . $colorValueArray[$i] . ":</td><td style='background-color:" . $colorHexArray[$i] . ";color:" . $textColor . ";padding:3px 6px;'>" . $colorHexArray[$i];
echo "</td></tr>";
}
?>
</table>
</div>
<div class="cheatsheet__item">
<h5 class="cheatsheet__section-subtitle">Current colors by value</h5>
<?php
echo "<table class='colorTable' border='1'>";
echo "<tr><th>Color</th>";
// Print header row with numbers
foreach ($numbersArray as $number) {
echo "<th style='text-align:Center;'>" . $number . "</th>";
}
echo "</tr>";
// Loop through colors and print rows
foreach ($nameArray as $name) {
echo "<tr>";
echo "<td style='text-align:right;padding-right:8px;'>" . trim($name, '"') . "</td>";
foreach ($numbersArray as $number) {
$outline = '';
$textColor = 'black';
$baseColor = '';
for ($j = 0; $j < sizeof($colorNameArray); $j++) {
if ($name == $colorNameArray[$j] && $number == $colorValueArray[$j]) {
$colorHex = $colorHexArray[$j];
$colorNumber = $colorValueArray[$j];
if ($number >= 250) {
$textColor = "white";
} else {
$textColor = "black";
}
if ($number == $colorNumber) {
$baseColor = "baseColor";
} else {
$baseColor = "";
}
break;
} else {
$colorHex = "";
}
}
echo "<td class='' style='padding: 15px 5px; font-size:.8em;border: 2px solid black; background-color:" . $colorHex . ";color:" . $textColor . "'>";
echo $colorHex;
echo "</td>";
}
echo "</tr>";
}
echo "</table>";
?>
<hr>
</div>
<div class="cheatsheet-item">
<h5 class="cheatsheet__section-title" id="rowThemes">Row Theme CSS Variables</h5>
<p>--> <a href="atomic-core/?cat=0-readme&comp=colors-row-themes" target="_blank">Learn how row color themes are used on the site.</a></p>
<BR>
<h5 class="cheatsheet__section-subtitle">Current row theme variables</h5>
<p>This does not display wmsilver colors since those are in wm's colors and not accessible on this cheatsheet.</p>
<?php
$themesLinesArray = $linesArray;
function getHexCode($colorName, $colorValue) {
// find hex code from array value in colorVarArray that matches colorName and colorValue
global $colorVarArray;
$hexCode = '';
foreach ($colorVarArray as $colorVar) {
if ($colorVar['0'] == $colorName && $colorVar['1'] == $colorValue) {
$hexCode = $colorVar['2'];
break;
}
}
return $hexCode;
}
if (in_array('$vims-color-themes: (', $themesLinesArray)) {
$themeStartLine = array_search('$vims-color-themes: (', $themesLinesArray);
$themeColorsArray = array_slice($themesLinesArray, $themeStartLine + 1, -1);
$themeEndLine = array_search(');', $themeColorsArray);
$themeColorsArray = array_slice($themesLinesArray, $themeStartLine + 1, $themeEndLine + 1);
$themeColorVarArray = [];
$themeNameArray = ['dkblue', 'ltblue', 'wmsilver', 'white'];
$currentTheme = '';
$currentSubName = '';
foreach ($themeColorsArray as $colorString) {
// if string contains ': (' then it's a theme or subname
if (strpos($colorString, ': (') !== false) {
// get name of theme
$colorString = trim(str_replace(": (", "", $colorString));
// if the name is in our theme array, set it as the current theme
if (in_array($colorString, $themeNameArray)) {
$themeColorVarArray[$colorString] = [];
$currentTheme = $colorString;
$currentSubName = '';
} else {
// otherwise, set it as a subname
$currentSubName = $colorString . '-';
}
// if string does not contain ': (' and does contain ':' then it's a color string with element and value
} elseif (strpos($colorString, ': (') === false && strpos($colorString, ':') !== false) {
$colorStringArray = explode(":", $colorString);
// add the element and value to the current theme array
$themeColorVarArray[$currentTheme][$currentSubName . trim($colorStringArray[0])] = trim($colorStringArray[1], ' ,');
// if string contains '), ' then it closes the theme or subname
} elseif (strpos($colorString, '),') !== false) {
if ($currentSubName != '') {
$currentSubName = '';
} else {
$currentTheme = '';
}
}
}
$elementArray = $themeColorVarArray['dkblue'];
echo "<table class='colorTable' border='1'>";
echo "<tr><th style='text-align:right'>Theme</th>";
// Print header row with numbers
foreach ($themeColorVarArray as $key => $value) {
echo "<th style='text-align:Center;'>" . $key . "</th>";
}
echo "</tr>";
foreach ($elementArray as $element => $value) {
echo "<tr>";
echo "<td style='text-align:right;padding-right:8px;'>--theme-" . $element . "-color</td>";
foreach ($themeColorVarArray as $theme => $elementArray) {
if (array_key_exists($element, $elementArray)) {
$number = filter_var($elementArray[$element], FILTER_SANITIZE_NUMBER_INT);
$number = str_replace("-", "", $number);
if (is_numeric($number) && $number >= 250) {
$textColor = "white";
} else {
$textColor = "black";
}
$isRgb = strpos($elementArray[$element], "rgb");
$rgbStringStart = $isRgb ? 'rgb(' : '';
$rgbStringEnd = $isRgb ? ')' : '';
$elementStringArray = explode("-", $elementArray[$element]);
$hexCode = $elementArray[$element];
// COMMENT OUT NEXT 3 LINES and import ../prod/main.css into cheatsheet css
// TO TEST IF THEME VARIABLES ARE ALL OUTPUTTING CORRECTLY
// due to display issues with the main.css theme vars,
// I'm using hex codes to display the theme colors in this table
if (sizeof($elementStringArray) > 1) {
$hexCode = getHexCode($elementStringArray[3], str_replace(")", "", $elementStringArray[4]));
}
$elementName = str_replace(")", "", str_replace("var(", "", $elementArray[$element]));
echo "<td class='' style='padding: 15px 10px; font-size:.9em;border: 2px solid black; background-color:" . $hexCode . ";color:" . $textColor . "'>";
echo $hexCode . "<BR>";
echo $elementName;
echo "</td>";
} else {
echo "<td></td>";
}
// }
}
echo "</tr>";
}
echo "</table>";
}
?>
</div>
</div>