cheatsheet edit

<!-- components/cheatsheet/wm-cheatsheet.php --> <h5>William &amp; Mary Theme Cheatsheet</h5> <p><a href="/atomic-docs/wm/atomic-core/?cat=cheatsheet#colors">Colors</a> | <a href="/atomic-docs/wm/atomic-core/?cat=cheatsheet#rowThemes">Row themes</a> | <a href="/atomic-docs/wm/atomic-core/?cat=cheatsheet#fonts">Fonts</a> </p> <?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 wm-colors $site-colors $linesArray = file($base_url . '/scss/3-variables/_wm-colors.scss', FILE_SKIP_EMPTY_LINES | FILE_IGNORE_NEW_LINES); if (in_array('$site-colors: (', $linesArray)) { $startLine = array_search('$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]); } // 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> <h5 class="cheatsheet__section-title">W&M Color Variables</h5> <p style="display: inline-block; border:1px solid silver; padding: 10px;"><i class="fa-solid fa-arrow-right"></i> <a href="atomic-core/?cat=0-readme&comp=colors" target="_blank">Read color usage documentation</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] >= 50) { $textColor = "white"; } else { $textColor = "black"; } echo "<tr class='colorVar'><td>"; echo $colorNameArray[$i] . "-" . $colorValueArray[$i] . ":</td><td style='background-color:" . $colorHexArray[$i] . " !important;color:" . $textColor . " !important;padding:3px 6px;'>" . $colorHexArray[$i]; echo "</td></tr>"; } ?> </table> </div> <h5 class="cheatsheet__section-subtitle">Current colors by <a href="https://www.color-contrast.dev/" target="_blank">APCA value number</a></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;'>" . $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 >= 50) { $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 . " !important;color:" . $textColor . " !important;'>"; echo $colorHex; echo "</td>"; } echo "</tr>"; } echo "</table>"; ?> <hr> <h5 class=" cheatsheet__section-title" id="rowThemes">Row Theme CSS Variables</h5> <p style="display: inline-block; border:1px solid silver; padding: 10px;"><i class="fa-solid fa-arrow-right"></i> <a href="atomic-core/?cat=0-readme&comp=colors-row-themes" target="_blank">Read row color theme documentation</a></p> <BR> <?php // pull in and process wm-theme-colors $color-themes $themesLinesArray = $linesArray; // $themesLinesArray = file($base_url . '/scss/3-variables/_wm-theme-colors.scss', FILE_SKIP_EMPTY_LINES | FILE_IGNORE_NEW_LINES); // if (in_array(':root {', $themesLinesArray)) { // $themeVarsStartLine = array_search(':root {', $themesLinesArray); // $themeVarsEndLine = array_search('}', $themesLinesArray); // $themeVarsColorsArray = array_slice($themesLinesArray, $themeVarsStartLine + 1, $themeVarsEndLine - $themeVarsStartLine - 1); // ?> <h5 class="cheatsheet__section-subtitle">Current row theme variables</h5> <?php // }; 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('$color-themes: (', $themesLinesArray)) { $themeStartLine = array_search('$color-themes: (', $themesLinesArray); $themeColorsArray = array_slice($themesLinesArray, $themeStartLine + 1, -1); $themeEndLine = array_search(');', $themeColorsArray); $themeColorsArray = array_slice($themesLinesArray, $themeStartLine + 1, $themeEndLine + 1); $themeColorVarArray = []; $themeNameArray = ['dkgreen', 'wmgreen', 'wmsilver', 'white', 'image']; $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['dkgreen']; 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 >= 50) { $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 = $elementArray[$element]; if (strpos($elementArray[$element], "var")) { $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 . " !important;color:" . $textColor . " !important;'>"; echo $elementName; echo "</td>"; } else { echo "<td></td>"; } // } } echo "</tr>"; } echo "</table>"; } ?> <!-- end of cheatsheet --> <br> <hr><br> <div class="cheatsheet"> <div class="cheatsheet__item"> <!-- FONTS -------------------------> <h6 id="fonts">Font families</h6><BR> <span class="font-list"> <p><span class="text-font-family"><strong>Main Sans Font</strong></span> <code style="background-color:#efefef;">font(text-sans)</code> <p> <strong>Sans Font Weights</strong> <ul> <li><span class="text-normal">This is text set in normal.</span> <code style="background-color:#efefef;">font(text-sans, normal)</code> </li> <li><span class="text-italic">This is text set in italic.</span> <code style="background-color:#efefef;">font(text-sans, italic)</code> </li> <li><span class="text-medium">This is text set in medium.</span> <code style="background-color:#efefef;">font(text-sans, medium)</code> </li> <li><span class="text-demi">This is text set in demi.</span> <code style="background-color:#efefef;">font(text-sans, demi)</code> </li> <li><span class="text-demi-italic">This is text set in demi-italic.</span> <code style="background-color:#efefef;">font(text-sans, demi-italic)<br>font-style: italic;</code> </li> <li><span class="text-bold">This is text set in bold.</span> <code style="background-color:#efefef;">font(text-sans, bold)</code> </li> </ul> </p> <hr> <span class="heading-font-family"><strong>Main Serif Font</strong></span> <code style="background-color:#efefef;">font(heading-serif)</code><BR><BR> <p> <strong>Heading Weights</strong> <ul> <li><span class="heading-light">This is text set in light.</span> <code style="background-color:#efefef;">font(heading-sans, light)</code> </li> <li><span class="heading-book">This is text set in book.</span> <code style="background-color:#efefef;">font(heading-sans, book)</code> </li> <li><span class="heading-medium"><em>This is text set in medium italic.</em></span> <code style="background-color:#efefef;">font(heading-sans, medium)</code> </li> <li><span class="heading-bold">This is text set in bold.</span> <code style="background-color:#efefef;">font(heading-sans, bold)</code> </li> <li><span class="heading-black">This is text set in black.</span> <code style="background-color:#efefef;">font(heading-sans, black)</code> </li> </ul> </p> <hr> <span class="alt-heading-font-family"><strong>Alternate Serif Font</strong></span> <code style="background-color:#efefef;">font(alt-heading-serif) </code><BR> <p> <strong>Alternate Heading Weights</strong> <ul> <li><span class="alt-heading-medium">This is text set in medium.</span> <code style="background-color:#efefef;">font(alt-heading-sans, medium)</code> </li> </ul> </p> <hr> <span class="text-line-height"><strong>text line height</strong></span><br> <span class="heading-line-height"><strong>heading line height</strong></span><br><br> </p> </span> </div><!-- end of cheatsheet__item --> </div> <!-- end of cheatsheet --> </div>