Update Scss management

.gitignore

@@ -36,3 +36,6 @@ data/pelican_settings.json
 # this file is generated by the search module and should not be committed
 search_bundle.js
 node_modules/
+
+attack-style/dist/
+attack-style/docs/

CUSTOMIZING.md

@@ -75,8 +75,8 @@ def get_priority():
 def get_menu():
     return {
         "display_name": "Name that will be displayed in the navigation menu"
-        "module_name": "Your module's name", 
-        "url": "/your_module-s_name/", 
+        "module_name": "Your module's name",
+        "url": "/your_module-s_name/",
         "external_link": False,
         "priority": your_module-s_name_config.priority,
         "children": [
@@ -91,7 +91,7 @@ def get_menu():
                 "display_name": "Module sub-menu external page",
                 "url": "https://attack.mitre.org",
                 "external_link": True,
-                "children": []            
+                "children": []
             }
         ]
     }

attack-style/.nvmrc

@@ -0,0 +1 @@
+lts/*

attack-style/.stylelintrc.json

@@ -0,0 +1,9 @@
+{
+    "extends": [
+        "stylelint-config-standard",
+        "stylelint-config-standard-scss"
+    ],
+    "ignoreFiles": [
+        "dist/*"
+    ]
+}

attack-style/README.md

@@ -0,0 +1,56 @@
+# ATT&CK Style
+
+ATT&CK Style is a JavaScript package that builds the CSS styles for the ATT&CK website.
+The outputs are simply 2 CSS files:
+
+* `dist/style-attack.css`
+* `dist/style-user.css`
+
+These files are then copied into `<ATT&CK-website-git-repo>/attack-theme/static/`.
+Currently this is done manually - no automation.
+But also, the CSS is not updated very often.
+
+## Installation
+
+To set up the ATT&CK Style package, follow these steps:
+
+1. **Prerequisite: Ensure Node.js is Installed**:
+
+   Make sure you have the latest Node.js LTS version installed.
+
+2. **Navigate to the attack-style Sub-folder**:
+
+   Clone the repository, then change your directory to the attack-style sub-folder.
+
+    ```bash
+    cd <repository-folder>/attack-style
+    ```
+
+3. **Install Dependencies**:
+
+   Run the following command to install the necessary dependencies:
+
+    ```bash
+    npm install
+    ```
+
+## Build
+
+1. **Build the CSS Files**:
+
+   Use the following command to compile the SCSS files into CSS.
+   The CSS output files will be generated in the `dist/` directory.
+
+    ```bash
+    npm run build
+    ```
+
+2. **Copy CSS Files**:
+
+   Copy both `dist/style-attack.css` and `dist/style-user.css` to `<ATT&CK-website-git-repo>/attack-theme/static/`.
+
+    ```bash
+    npm run copy
+    ```
+
+The files are now ready to be used in the process to build the ATT&CK website!

attack-style/abstracts/_color-functions.scss

@@ -0,0 +1,55 @@
+@use "sass:color";
+@use "sass:map";
+@use "sass:string";
+@use "variables";
+
+// accessor helper for $colors. Gets the color of the named pair
+@function color($name) {
+  @return map.get(map.get(variables.$colors, $name), "color");
+}
+
+// given a color name, get an alternate version of the color, for patterning
+// if the base color is dark, the alternate will be slightly lighter.
+// if the base color is light, the alternate will be slightly darker.
+// contrast, an optional argument, multiplies to create a more distint or similar color. >1 is more distant, <1 is more similar.
+@function color-alternate($name, $contrast: 1) {
+  @return color.mix(color.invert(color($name)), color($name), $weight: $contrast * 5%);
+}
+
+/// accessor helper for $colors. Gets the on-color of the named pair
+@function on-color($name) {
+  @return map.get(map.get(variables.$colors, $name), "on-color");
+}
+
+/// given a color-name, get an emphasized version of the on-color.
+/// The emphasized on-color is less like the background color.
+@function on-color-emphasis($name) {
+  @return color.mix(color.invert(color($name)), on-color($name));
+}
+
+// given a color-name, get an deemphasized version of the on-color.
+// The deemphasized on-color is more like the background color.
+@function on-color-deemphasis($name) {
+  @return color.mix(color($name), on-color($name), 25%);
+}
+
+// given a color name, compute a border color for the color
+@function border-color($name) {
+  @return color.mix(color.invert(color($name)), color($name), 12.5%);
+
+  // @return rgba(invert(color($name)), 0.125);
+}
+
+// given a color name, compute a border color for the color
+@function background-color($name) {
+  @return color.mix(color.invert(color($name)), color($name), 12.5%);
+}
+
+// escape the color. Note param is a color and not a color name: this is not an accessor to the color map above.
+// replaces # with %23 in hex colors
+// see https://codepen.io/gunnarbittersmann/pen/BoovjR for explanation of why we have to escape # for the background image
+@function escape-color($color) {
+  $hex: color.ie-hex-str($color);
+
+  @return "%23" + string.slice($string: #{$hex}, $start-at: 4);  // skip #AA in #AARRGGBB
+}

attack-style/abstracts/_font-faces.scss

@@ -0,0 +1,42 @@
+@use "sass:list";
+@use "sass:map";
+
+$fonts: (
+  font-families: (
+    "Roboto-Thin",
+    "Roboto-Light",
+    "Roboto-Regular",
+    "Roboto-Medium",
+    "Roboto-Bold",
+    "Roboto-Black",
+    "AlegreyaSans-Regular"
+  ),
+  font-weights: (
+    100,
+    300,
+    400,
+    500,
+    700,
+    900,
+    400
+  ),
+  srcs: (
+    "fonts/Roboto/Roboto-Thin.ttf",
+    "fonts/Roboto/Roboto-Light.ttf",
+    "fonts/Roboto/Roboto-Regular.ttf",
+    "fonts/Roboto/Roboto-Medium.ttf",
+    "fonts/Roboto/Roboto-Bold.ttf",
+    "fonts/Roboto/Roboto-Black.ttf",
+    "fonts/Alegreya_Sans/AlegreyaSans-Regular.ttf"
+  )
+);
+
+/* FONTS */
+@for $i from 1 to list.length(map.get($fonts, "font-families")) {
+  @font-face {
+    font-family: list.nth(map.get($fonts, "font-families"), $i);
+    font-style: normal;
+    font-weight: list.nth(map.get($fonts, "font-weights"), $i);
+    src: url(list.nth(map.get($fonts, "srcs"), $i));
+  }
+}

attack-theme/static/style/_misc.scss → attack-style/abstracts/_utilities.scss

@@ -1,11 +1,13 @@
+@use "sass:math";
+
 // specify a font family for a css block or element
 @mixin font($primary, $secondary: sans-serif) {
     font-family: $primary, $secondary;
 }
 
 // change any presicion point to rem for consistency
 @function to-rem($target-val) {
-    @return #{$target-val/16}rem;
+    @return #{math.div($target-val, 16)}rem;
 }
 
 // base for precision point (not used in @media blocks)
@@ -17,4 +19,3 @@
 @mixin margin($property, $value) {
     margin-#{$property}: to-rem(24 * $value);
 }
-

attack-style/abstracts/_variables.scss

@@ -0,0 +1,80 @@
+@use "sass:map";
+@use "../config.scss" as config;
+
+/* COLORS */
+
+/// ATT&CK Brand colors
+$attack-colors: (
+  attack-orange: #c63f1f,
+  attack-blue: #062f4f,
+  attack-footer: #0b2338,
+  attack-active: #0156b3
+);
+
+/// User colors
+$user-colors: (
+  user-gray: #303435
+);
+
+///
+/// Colors used across the website.
+/// For each color-pair:
+///   - "color" refers to the color itself
+///   - "on-color" refers to the most readable text-color to appear on top of the color.
+/// Note: some colors don't define on-colors. This is because, for these colors, they aren't intended to
+/// appear with inner content. For example, "link" is only intended to be used for link text, which inherently
+/// cannot have inner text.
+///
+$colors: (
+  primary: (
+    color: if(config.$use-attack-theme, map.get($attack-colors, attack-orange), map.get($user-colors, user-gray)),
+    on-color: white
+  ),
+  // used for header and some nav elements
+  secondary:
+    (
+      color: if(config.$use-attack-theme, map.get($attack-colors, attack-blue), map.get($user-colors, user-gray)),
+      on-color: white
+    ),
+  // used for some buttons
+  footer:
+    (
+      color: if(config.$use-attack-theme, map.get($attack-colors, attack-footer), map.get($user-colors, user-gray)),
+      on-color: #87deff
+    ),
+  // used for footer and some buttons
+  active:
+    (
+      color: if(config.$use-attack-theme, map.get($attack-colors, attack-active), map.get($user-colors, user-gray)),
+      on-color: #eaeaea
+    ),
+  // used for active buttons and sidebar links
+  body:
+    (
+      color: white,
+      on-color: #39434c
+    ),
+  // primary page body
+  // example of a dark theme for the site
+  // body: (color: rgb(50, 50, 50), on-color: #cdcdcd),
+  link:
+    (
+      color: #4f7cac
+    ),
+  // hyperlinks
+  matrix-header:
+    (
+      color: gray,
+      on-color: white
+    ),
+  // color of matrix headers
+  // query highlight in the search UI
+  search-highlight:
+    (
+      color: yellow,
+      on-color: black
+    ),
+  deemphasis: (
+    color: #303435
+  )
+);

attack-style/base/_base.scss

@@ -0,0 +1,24 @@
+@use "../abstracts/color-functions";
+
+// used in 404 and contact templates
+.deemphasis {
+  color: color-functions.on-color-deemphasis(body);
+}
+
+// background color for the table matrix headers in the home page and the matrices page
+.matrix-header {
+  background-color: color-functions.color(matrix-header);
+  color: color-functions.on-color(matrix-header);
+}
+
+// background color for the table matrix in the home page
+%bg-alternate {
+  background-color: color-functions.color-alternate(body) !important;
+}
+
+// .bg-alternate {
+//   background-color: color-functions.color-alternate(body) !important;
+// }
+.bg-alternate {
+  @extend %bg-alternate;
+}

attack-style/base/_typography.scss

@@ -0,0 +1,12 @@
+@use "../abstracts/color-functions";
+
+.text-label {
+    text-transform: uppercase;
+    font-size: 14px;
+}
+
+.text-label-small {
+    font-size: 12px;
+    color: color-functions.color(deemphasis);
+    margin-top: -10px;
+}