Tailwind starter theme

themes/stanford_profile_theme/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "stanford_profile_theme",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "npx tailwindcss -i ./src/base.scss -o ./dist/base.css"
+  },
+  "dependencies": {
+    "@tailwindcss/forms": "^0.4.0-alpha.2",
+    "decanter": "^7.0.0-beta.2",
+    "tailwindcss": "^3.0.24",
+    "tailwindcss-debug-screens": "^2.2.1"
+  }
+}

themes/stanford_profile_theme/src/base.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

themes/stanford_profile_theme/stanford_profile_theme.info.yml

@@ -0,0 +1,24 @@
+name: 'Stanford Profile Theme'
+type: theme
+description: 'Stanford Profile Theme.'
+package: Stanford
+version: 1.0.0
+core_version_requirement: ^9
+'base theme': stable9
+regions:
+  page_top: 'Page top'
+  header: Header
+  search: Search
+  menu: Menu
+  help: Help
+  content: Content
+  footer: Footer
+  page_bottom: 'Page bottom'
+features:
+  - favicon
+  - logo
+components:
+  namespaces:
+    stanford-profile-theme: templates
+libraries:
+  - stanford_profile_theme/base

themes/stanford_profile_theme/stanford_profile_theme.libraries.yml

@@ -0,0 +1,15 @@
+base:
+  version: VERSION
+  css:
+    layout:
+      dist/base.css: {}
+
+fontawesome:
+  version: 5.15.4
+  remote: https://use.fontawesome.com/releases/v5.15.4/css/all.css
+  license:
+    name: FontAwesome
+    url: http://fontawesome.io/license/
+  css:
+    base:
+      //use.fontawesome.com/releases/v5.15.4/css/all.css: {}

themes/stanford_profile_theme/stanford_profile_theme.theme

@@ -0,0 +1,44 @@
+<?php
+
+/**
+ * @file
+ * Preprocess functions for Stanford Profile Theme.
+ */
+
+/**
+ * Implements hook_library_info_alter().
+ */
+function stanford_profile_theme_library_info_alter(&$libraries, $extension) {
+  if (\Drupal::service('theme_handler')->themeExists($extension)) {
+    return;
+  }
+
+  $libraries = array_filter($libraries, function ($library) use ($extension) {
+    return !preg_match('/(stanford_|jumpstart|react|ui_pattern)/', $extension);
+  });
+}
+
+/**
+ * Implements hook_page_attachments_alter().
+ */
+function stanford_profile_theme_page_attachments_alter(array &$attachments) {
+  $attachments['#attached']['drupalSettings']['data']['extlink']['extClass'] = 'su-hidden';
+}
+
+/**
+ * Implements hook_theme_suggestions_alter().
+ */
+function stanford_profile_theme_theme_suggestions_alter(array &$suggestions, array $variables, $hook) {
+
+}
+
+/**
+ * Implements hook_preprocess_HOOK().
+ */
+function stanford_profile_theme_preprocess_block__system_branding_block(&$variables) {
+  if(strpos($variables['site_logo'], 'stanford_profile_theme') !== false){
+    global $base_path;
+    $variables['site_logo'] = $base_path . \Drupal::service('extension.list.theme')
+        ->getPath('stanford_profile_theme') . '/logo.svg';
+  }
+}

themes/stanford_profile_theme/tailwind.config.js

@@ -0,0 +1,10 @@
+module.exports = {
+  content: ["templates/**/*.html.twig", "stanford_profile_theme.theme"],
+  presets: [
+    require('decanter/tailwind.config.js')
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}

themes/stanford_profile_theme/templates/block/block--system-branding-block.html.twig

@@ -0,0 +1,11 @@
+<a class="su-lockup su-no-underline su-inline-block" href="{{ url('<front>') }}">
+  <div class="su-flex su-flex-col md:su-flex-row su-basefont-19">
+    <div class="su-logo su-text-cardinal-red su-type-4 su-leading-half su-pt-11 su-pr-7 su-mr-7 md:su-border-r su-border-solid su-border-black">
+      <img src="{{ site_logo }}" alt=""/>
+    </div>
+    <div class="su-text-25 md:su-text-m2 su--mt-3 md:su-mt-0 su--ml-2 md:su-ml-0 su-font-regular su-relative su-top-6 su-text-black">
+      {{ site_name }}
+    </div>
+  </div>
+</a>
+

themes/stanford_profile_theme/templates/core/status_messages.html.twig

@@ -0,0 +1,24 @@
+<div data-drupal-messages>
+  {% for type, messages in message_list %}
+    <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes|without('role', 'aria-label') }}>
+      {% if type == 'error' %}
+      <div role="alert">
+        {% endif %}
+        {% if status_headings[type] %}
+          <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
+        {% endif %}
+        {% if messages|length > 1 %}
+          <ul>
+            {% for message in messages %}
+              <li>{{ message }}</li>
+            {% endfor %}
+          </ul>
+        {% else %}
+          {{ messages|first }}
+        {% endif %}
+        {% if type == 'error' %}
+      </div>
+      {% endif %}
+    </div>
+  {% endfor %}
+</div>

themes/stanford_profile_theme/templates/field/field--paragraph-row--su-page-components.html.twig

@@ -0,0 +1,8 @@
+{% set item_count = items|length %}
+{% set possible_class = ['su-grid-cols-1', 'su-grid-cols-2', 'su-grid-cols-3'] %}
+<div class="su-grid md:su-grid-cols-{{ item_count }}">
+  {% for item in items %}
+    <div{{ item.attributes }}>{{ item.content }}</div>
+  {% endfor %}
+</div>
+

themes/stanford_profile_theme/templates/field/field--su-page-components.html.twig

@@ -0,0 +1,5 @@
+
+{% for item in items %}
+  <div{{ item.attributes }}>{{ item.content }}</div>
+{% endfor %}
+

themes/stanford_profile_theme/templates/form/input.html.twig

@@ -0,0 +1,22 @@
+{% set classes = [
+  'su-button',
+  'su-group',
+  'su-leading-display',
+  'su-text-white',
+  'su-border-2',
+  'su-border-solid',
+  'hover:su-border-black',
+  'focus:su-border-black',
+  'su-transition-colors',
+  'su-px-26',
+  'su-pt-10',
+  'su-pb-11',
+  'su-text-16',
+  'md:su-text-20',
+  attributes.hasClass('button--primary') ? 'su-bg-digital-red su-border-digital-red' : 'su-bg-digital-blue su-border-digital-blue-light'
+] %}
+
+{% if attributes.type == 'submit' %}
+  {% set attributes = attributes.addClass(classes) %}
+{% endif %}
+<input{{ attributes }} />{{ children }}

themes/stanford_profile_theme/templates/layouts/one-column.html.twig

@@ -0,0 +1,2 @@
+{% set main_class = settings.centered ? 'su-cc' : '' %}
+<div{{ region_attributes.main.addClass(main_class) }}>{{ content.main }}</div>

themes/stanford_profile_theme/templates/layouts/three-column.html.twig

@@ -0,0 +1,31 @@
+{% set left = content.left|render_clean %}
+{% set main = content.main|render_clean %}
+{% set right = content.right|render_clean %}
+
+{% set main_class = '' %}
+{% if left and right %}
+  {% set main_class = 'su-w-6/12' %}
+{% elseif left or right %}
+  {% set main_class = 'su-w-9/12' %}
+{% endif %}
+
+<div class="su-flex su-flex-col md:su-flex-row {{ settings.centered ? 'su-cc' : '' }}">
+
+  {% if left %}
+    <div {{ region_attributes.left.addClass('su-w-3/12') }}>
+      {{ content.left }}
+    </div>
+  {% endif %}
+
+  {% if main %}
+    <div {{ region_attributes.main.addClass(main_class) }}>
+      {{ content.main }}
+    </div>
+  {% endif %}
+
+  {% if right %}
+    <div {{ region_attributes.right.addClass('su-w-3/12') }}>
+      {{ content.right }}
+    </div>
+  {% endif %}
+</div>

themes/stanford_profile_theme/templates/layouts/two-column.html.twig

@@ -0,0 +1,22 @@
+{% set left_class = 'su-w-3/12' %}
+{% set main_class = content.left ? 'su-w-9/12' : '' %}
+{% set left = content.left|render_clean %}
+
+{% if settings.orientation == 'left' %}
+  {% set left_class = 'su-w-9/12' %}
+  {% set main_class = left ? 'su-w-3/12' : '' %}
+{% elseif settings.orientation == 'equal' %}
+  {% set left_class = 'su-w-6/12' %}
+  {% set main_class = left ? 'su-w-6/12' : '' %}
+{% endif %}
+
+
+<div class="su-flex su-flex-col md:su-flex-row {{ settings.centered ? 'su-cc' : '' }}">
+
+  {% if left %}
+    <div{{ region_attributes.left.addClass(left_class) }}>{{ content.left }}</div>
+  {% endif %}
+
+  <div{{ region_attributes.main.addClass(main_class) }}>{{ content.main }}</div>
+</div>
+

themes/stanford_profile_theme/templates/menu/menu--main.html.twig

@@ -0,0 +1,25 @@
+
+{%- import _self as menu -%}
+<div class="clearfix">
+  {{ menu.nav_menu(items) }}
+</div>
+
+
+{% macro nav_menu(items, menu_level = 1) %}
+  {% import _self as menus %}
+  <ul class="su-list-unstyled su-flex {{ menu_level==1?'su-float-right':'' }}">
+    {% for item in items %}
+      <li>
+        <a href="{{ item.url }}">
+          <span>{{ item.title }}</span>
+          {% if item.unpublished %}
+            <span>{{ "Unpublished Page"|t }}</span>
+          {% endif %}
+        </a>
+        {% if item.below %}
+          {{ menus.nav_menu(item.below, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+  </ul>
+{% endmacro %}

themes/stanford_profile_theme/templates/menu/menu--secondary-nav.html.twig

@@ -0,0 +1,23 @@
+{%- import _self as menu -%}
+
+{{ menu.nav_menu(items) }}
+
+
+{% macro nav_menu(items, menu_level = 1) %}
+  {% import _self as menus %}
+  <ul class="su-list-unstyled">
+    {% for item in items %}
+      <li>
+        <a href="{{ item.url }}">
+          <span class="su-multi-menu__link-text-wrapper">{{ item.title }}</span>
+          {% if item.unpublished %}
+            <span class="unpublished-indicator">{{ "Unpublished Page"|t }}</span>
+          {% endif %}
+        </a>
+        {% if item.below %}
+          {{ menus.nav_menu(item.below, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+  </ul>
+{% endmacro %}

themes/stanford_profile_theme/templates/menu/menu.html.twig

@@ -0,0 +1,23 @@
+{%- import _self as menu -%}
+
+{{ menu.nav_menu(items) }}
+
+
+{% macro nav_menu(items, menu_level = 1) %}
+  {% import _self as menus %}
+  <ul class="su-list-unstyled">
+    {% for item in items %}
+      <li>
+        <a href="{{ item.url }}">
+          <span class="su-multi-menu__link-text-wrapper">{{ item.title }}</span>
+          {% if item.unpublished %}
+            <span class="unpublished-indicator">{{ "Unpublished Page"|t }}</span>
+          {% endif %}
+        </a>
+        {% if item.below %}
+          {{ menus.nav_menu(item.below, menu_level + 1) }}
+        {% endif %}
+      </li>
+    {% endfor %}
+  </ul>
+{% endmacro %}

themes/stanford_profile_theme/templates/menu/menu_local_tasks.html.twig

@@ -0,0 +1,20 @@
+{% if primary %}
+  <ul class="su-list-none su-flex">
+    {% for link in primary %}
+      <li>
+        {{ link}}
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}
+
+{% if secondary %}
+  <ul class="su-list-none su-flex">
+    {% for link in secondary %}
+      <li>
+        {{ link }}
+      </li>
+    {% endfor %}
+  </ul>
+{% endif %}
+