feat: update Core-CMS & Core-Styles, rename CMS Settings, Portal Purp…

…le to Blue (#476)

* chore: CMD-182 do not use deprecated CSS vars

* enhance: CMD-182 use Core-CMS that has design tokens

* deps: CMD-182 core-styles and postcss…

* feat: CMD-182 use tokens core-v3

* fix(cep): dev, cms tag via hash

because latest image is not used

* fix: CMD-182 color fix snippet was using core-v2

* feat: CMD-182 use built tokens core-v3

* fix: CMD-182 cms tag actual design tokens i hope

* refactor: CMD-182 delete unnecessary overrides

Core Styles v3 does not distinguish Portal colors.

So, Portal need not worry about overrides.

* fix: CMD-182 cms w/ updated tokens

* fix: CMD-182 cms w/ updated tokens & fixed rgb()

* fix: CMD-182 remove outdated css hack

Not necessary since Core-Styles 45dc5aa1.

* deps: CMD-182 core-styles colors.accent.1.light

* deps: CMD-182 core-styles v2.32.0 core-cms v4.15.0

* fix(tup-cms): missing v in tag

* chore: CMD-182 delete unnecessary snippet

* fix: CMD-182 do not use --weak accent color var

It is deprecated.

* deps: CMD-182 core-styles v2.32.1 core-cms v4.15.1

* deps: CMD-182 core-cms v4.15.2

* chore: CMD-182 delete unnecessary snippet override

Differences form Core-CMS resolved in Core-CMS commit 9efb52ff.

* refactor: Core-CMS v4.13.0 branding settings

* refactor: cmd-79 rename tacc cms settings (#416)

* chore: cmd-79/tv3-181 FAVICON → PORTAL_FAVICON

* refactor: cmd-79/tv3-181 LOGO → PORTAL_LOGO

* refactor: cmd-79/tv3-181 TACC_ → PORTAL_

* feat: cmd-79/tv3-181 Core-CMS image placeholder

* test: cmd-79/tv3-181 new Core-CMS image

* fix: correct branch translation to core-cms image

* fix!: cmd-79 core-cms backwards-compatibility bugs

With this update, there is an unexpected and bewildering UI change:
- the navbar at 992px is collapsed
- it should only collapse at 991px
- this behavior is different than when using Core-CMS v4.8.3

* style: cmd-79 remove newline to simplify diff

* fix: cmd-79 nav overflows header at certain screen widths

* refactor: rename old Core-CMS settings to new

* docs: PORTAL_NAV_WIDTH moved to correct section

* deps: core-cms v4.15.3 candidate

* deps: core-cms v4.15.3 candidate (update)

* deps: core-cms v4.16, core-styles v2.33

* deps: core-styles v2.33.1

* chore: core-cms v4.16.1

* feat: core-cms v4.17.1

- raw markup template (though tup-cms does not enable it)
- muted container section (enabled by default)

* chore(tup-cms): remove unused templates

---------

Co-authored-by: Jake Rosenberg <[email protected]>

.postcssrc.yml

@@ -7,8 +7,9 @@ plugins:
     features:
       custom-media-queries: true
       media-query-ranges: true
-      custom-selectors: true
       nesting-rules: true
+      custom-selectors: true
+      relative-color-syntax: true
   postcss-replace:
     # @tacc/core-styles: 'dist/' uses `../../fonts/`
     pattern: fonts/

apps/tup-cms/Dockerfile

@@ -7,7 +7,7 @@ COPY . /code/
 RUN npx nx build tup-ui
 RUN npx nx build tup-cms-react
 
-FROM taccwma/core-cms:v4.10.2
+FROM taccwma/core-cms:v4.17.1
 
 WORKDIR /code
 

apps/tup-cms/src/taccsite_cms/settings_custom.py

@@ -46,12 +46,6 @@
 CMS_TEMPLATES = (
     ('standard.html', 'Standard'),
     ('fullwidth.html', 'Full Width'),
-
-    ('guide.html', 'Guide'),
-    ('guides/getting_started.html', 'Guide: Getting Started'),
-    ('guides/data_transfer.html', 'Guide: Data Transfer'),
-    ('guides/data_transfer.globus.html', 'Guide: Globus Data Transfer'),
-    ('guides/portal_technology.html', 'Guide: Portal Technology Stack'),
 )
 
 CMS_PERMISSIONS = True
@@ -87,35 +81,23 @@
 # TACC: BRANDING
 ########################
 
-# NOTE: Variables NSF_BRANDING, TACC_BRANDING, and UTEXAS_BRANDING are duplicated from Core-CMS cuz current infrastructure lacks ability to reference default values.
-
-UTEXAS_BRANDING = [
-    "utexas",
-    "site_cms/img/org_logos/utaustin-white.png",
-    "branding-utaustin",
-    "https://www.utexas.edu/",
-    "_blank",
-    "University of Texas at Austin Logo",
-    "anonymous",
-    "True"
-]
+from taccsite_cms._settings.branding import *
 
-BRANDING = [ UTEXAS_BRANDING ]
+PORTAL_BRANDING = [ PORTAL_BRANDING_UTEXAS ]
 
 ########################
 # TACC: LOGOS
 ########################
 
-LOGO = [
-    "tup",
-    "tup_cms/img/org_logos/tacc-logo-white.svg",
-    "tup",
-    "/",
-    "_self",
-    "TACC Logo",
-    "anonymous",
-    "True"
-]
+PORTAL_LOGO = {
+    "img_file_src": "tup_cms/img/org_logos/tacc-logo-white.svg",
+    "is_remote": False,
+    "img_class": "",
+    "link_href": "/",
+    "link_target": "_self",
+    "img_alt_text": "TACC Logo",
+    "img_crossorigin": "anonymous",
+} # To hide logo, set `PORTAL_LOGO = False`
 
 ########################
 # TACC: SEARCH
@@ -140,15 +122,17 @@
 # TACC: PORTAL
 ########################
 
-INCLUDES_CORE_PORTAL = False
-INCLUDES_PORTAL_NAV = True
-INCLUDES_SEARCH_BAR = True
+PORTAL_IS_TACC_CORE_PORTAL = False
+PORTAL_HAS_LOGIN = True
+PORTAL_HAS_SEARCH = True
+
+PORTAL_NAV_WIDTH = 'lg'
 
 ########################
 # TACC: SOCIAL MEDIA
 ########################
 
-TACC_SOCIAL_SHARE_PLATFORMS = ['linkedin', 'facebook', 'email']
+PORTAL_SOCIAL_SHARE_PLATFORMS = ['linkedin', 'facebook', 'email']
 
 ########################
 # DJANGOCMS_BLOG
@@ -200,10 +184,10 @@
 # DJANGOCMS_BLOG: TACC
 ########################
 
-TACC_BLOG_SHOW_CATEGORIES = True
-TACC_BLOG_SHOW_TAGS = False
-TACC_BLOG_CUSTOM_MEDIA_POST_CATEGORY = 'multimedia'
-TACC_BLOG_SHOW_ABSTRACT_TAG = 'external'
+PORTAL_BLOG_SHOW_CATEGORIES = True
+PORTAL_BLOG_SHOW_TAGS = False
+PORTAL_BLOG_CUSTOM_MEDIA_POST_CATEGORY = 'multimedia'
+PORTAL_BLOG_SHOW_ABSTRACT_TAG = 'external'
 
 TACC_BLOG_CATEGORY_ORDER = ['press-release', 'feature-story', 'multimedia', 'podcast']
 

apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-cms/trumps/search-elements.css

@@ -65,7 +65,7 @@
 
     /* url under search result title */
     & .gs-webResult div.gs-visibleUrl {
-        color: var(--global-color-accent--secondary);
+        color: var(--global-color-secondary--normal);
     }
 
     /* search result titles */

apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-feed-list.css

@@ -80,7 +80,7 @@
 /* TODO: Share styles between c-news and c-feed-list (`time:not(…)`) */
 .c-feed-list > :is(div, article) > time:not(:is(h1, h2, h3, h4, h5, h6) *),
 .c-feed-list > :is(div, article) > p:has(time):not(:is(h1, h2, h3, h4, h5, h6) *) {
-  color: var(--global-color-accent--secondary);
+  color: var(--global-color-secondary--normal);
   font-weight: var(--medium);
   text-transform: uppercase;
 }

apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-core-styles/components/c-news.css

@@ -25,7 +25,7 @@
 
 /* TODO: Share styles between c-news and c-feed-list (`time:not(…)`) */
 .c-news article time:not(:is(h1, h2, h3, h4, h5, h6) *) {
-  color: var(--global-color-accent--secondary);
+  color: var(--global-color-secondary--normal);
   font-weight: var(--medium);
   text-transform: uppercase;
 }

apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/for-tup-cms/trumps/s-abbr-list.css

@@ -14,6 +14,6 @@
 .s-abbr-list span.abbr,
 .abbr-list abbr,
 .abbr-list span.abbr {
-    color: var(--global-color-accent--secondary);
+    color: var(--global-color-secondary--normal);
     font-weight: var(--bold);
 }

apps/tup-cms/src/taccsite_custom/tup_cms/static/tup_cms/css/tup-cms.for-tup-cms.css

@@ -5,7 +5,7 @@
 /* ... */
 
 /* GENERICS */
-@import url("./for-tup-cms/generics/color.css") layer(project);
+/* ... */
 
 /* ELEMENTS */
 @import url("./for-tup-cms/elements/headings--cms.css") layer(project);

libs/core-components/src/lib/HistoryBadge/HistoryBadge.module.css

@@ -13,5 +13,5 @@
 }
 
 .disabled {
-  background-color: var(--global-color-accent--weak);
+  background-color: var(--global-color-accent--xx-light);
 }

libs/core-components/src/lib/Sidebar/Sidebar.module.css

@@ -25,7 +25,7 @@
 .link:hover,
 .link--active:is(:link, :visited) {
   color: var(--global-color-primary--x-dark); /* to pass color contrast test */
-  background-color: var(--global-color-accent--weak);
+  background-color: var(--global-color-accent--xx-light);
 }
 .link:active,
 .link--active:is(:link, :visited) {

libs/core-wrappers/src/lib/Navbar/Navbar.module.css

@@ -21,11 +21,11 @@
 }
 
 .nav-content:hover {
-  background: var(--global-color-accent--weak);
+  background: var(--global-color-accent--xx-light);
 }
 
 .nav-active {
-  background: var(--global-color-accent--weak);
+  background: var(--global-color-accent--xx-light);
 }
 
 .nav-text {

libs/tup-components/src/news/UserNews.module.css

@@ -14,7 +14,7 @@
 }
 
 .posted-date {
-  color: var(--global-color-accent--secondary);
+  color: var(--global-color-secondary--normal);
   font-weight: var(--medium);
   text-transform: uppercase;
 }