ISTWCMS-5598:continue rebasing initial card into 1.0.x- including link and tags

src/patterns/01-core/elements/_details.scss

 // @file
 // Details element styles.
+
 @use '../../01-core' as *;
 
+//$summary-font-family: gesso-font-family(book);
+//$details-font-family: gesso-font-family(primary);
+
 :where(details) {
   @include uw-no-breakout();
-  //@include svg-background(mobile-arrow-down);
+  @include svg-background(mobile-arrow-down);
   background: var(--gray-2);
   border: var(--size-xs) solid #bfbfbf;
   border-bottom:var(--size-xs) solid var(--uw-black-primary);
   border-radius: var(--radius-1);
   box-shadow: var(--shadow-1);
   color: var(--uw-black-primary);
+  font-family: var(--font-serif);
   margin: var(--size-3) 0;
   transition: box-shadow 300ms ease;
   width:100%;
@@ -19,11 +24,10 @@
   }
   [open] > & {
     @include svg-background(mobile-arrow-up);
+    width:100%;
   }
 
   &[open] > summary {
-    border-end-end-radius: 0;
-    border-end-start-radius: 0;
     color: var(--uw-black-primary);
   }
   &:hover {
@@ -56,8 +60,8 @@
   color: var(--uw-black-primary);
   cursor: pointer;
   display:block;
-  //font-family: $summary-font-family;
-  //font-size: rem(gesso-font-size(-1));
+  font-family: var(--font-sans);
+  font-size: var(--font-size-0);
   font-weight: var(--font-weight-700);
   margin: 0;
   line-height: 1.25;
@@ -66,7 +70,8 @@
   transition: box-shadow 300ms ease;
   touch-action: manipulation;
   [open] > & {
-    //@include svg-background(mobile-arrow-up);
+    @include svg-background(mobile-arrow-up);
+    width:100%;
   }
   &:hover,
   &:focus{
@@ -80,12 +85,12 @@
   }
 }
 
+//
 .details__fallback-link {
   display: block;
   outline: 0;
   text-decoration: none;
 }
-
 .details__content {
   @include uw-no-breakout();
   background: var(--uw-white-primary);
@@ -104,7 +109,7 @@
 .details__description,
 .seven-details__description{
   color: var(--uw-black-primary);
-  //font-size: rem(gesso-font-size(-1));
+  font-size: var(--font-size-00);
   margin-bottom: var(--size-2);
 
   > :last-child {

src/patterns/01-core/elements/_html.scss

@@ -12,8 +12,9 @@
   block-size: 100%;
   caret-color: var(--caret-color);
   color: var(--text-0);
-  font-family: var(--font-sans);
-  line-height: var(--font-lineheight-4);
+  font-family: var(--font-serif);
+  font-size: var(--font-size-1);
+  line-height: var(--font-lineheight-2);
   min-height: 100%;
   scrollbar-color: var(--scrollbar-color) transparent;
   text-size-adjust: none;

src/patterns/01-core/elements/_label.scss

 // @file
 // Label element styles.
 
-// :where(label) {}
+ :where(label) {
+   font-family: var(--font-sans);
+ }
+.uw-label{
+  font-family: var(--font-sans);
+}

src/patterns/01-core/elements/_paragraph.scss

@@ -2,8 +2,8 @@
 // Paragraph styles.
 
 :where(p) {
-  font-size: var(--font-size-2);
-  margin-bottom: var(--size-2);;
+  font-size: var(--font-size-1);
+  margin-bottom: var(--size-2);
   margin-top: 0;
   max-inline-size: var(--size-content-3);
 

src/patterns/01-core/mixins/_index.scss

@@ -3,6 +3,7 @@
 @forward 'headings';
 @forward 'image-replace';
 @forward 'layout';
+@forward 'link';
 @forward 'list';
 @forward 'svg-background';
 @forward 'svg-icon';

src/patterns/01-core/mixins/_link.scss

+// @file
+// Link mixins
+
+@mixin link($link, $hover: $link, $active: $hover, $visit: $link) {
+  color: $link;
+  text-decoration:underline;
+  &:visited {
+    color: $visit;
+  }
+  &:hover,
+  &:focus {
+    color: $hover;
+    text-decoration:none;
+
+  }
+  &:active {
+    color: $active;
+  }
+}
+@mixin link-no-underline($link, $hover: $link, $active: $hover, $visit: $link) {
+  color: $link;
+  text-decoration:none;
+  &:visited {
+    color: $visit;
+  }
+  &:hover,
+  &:focus {
+    color: $hover;
+    text-decoration:none;
+  }
+  &:active {
+    color: $active;
+  }
+}
+
+@mixin link-reverse($link, $hover: $link, $active: $hover, $visit: $link) {
+  color: $link;
+  text-decoration:none;
+  &:visited {
+    color: $visit;
+  }
+  &:hover,
+  &:focus {
+    color: $hover;
+    text-decoration:underline;
+  }
+  &:active {
+    color: $active;
+  }
+}

src/patterns/01-core/mixins/_svg-background.scss

@@ -7,3 +7,16 @@
   background-size: 100%;
   display: inline-block;
 }
+
+
+//@mixin svg-background($image-name, $image-location: '../source/images/icons/') {
+//  background-image: url($image-location + $image-name + '.svg');
+//}
+//
+//@mixin svg-background-color($image-color, $image-name, $image-location: '../source/images/icons/') {
+//  background-color: $image-color;
+//  -webkit-mask:  url($image-location + $image-name + '.svg') no-repeat;
+//  mask: url($image-location + $image-name + '.svg') no-repeat;
+//  -webkit-mask-size: contain;
+//  mask-size: contain;
+//}

src/patterns/02-base/macros/uw.macro.twig

+{% macro readmore(url, title, label = "Read more", description_prefix = "about" ) %}
+  {% include '@components/readmore-link/readmore-link.twig' with {
+    'url': url,
+    'label': label,
+    'description_prefix': description_prefix,
+    'title': title
+  } %}
+{% endmacro %}
+
+{% macro tag(url, title, type = "full", size = "normal" ) %}
+  {% include '@components/tag/tag.twig' with {
+    'url': url,
+    'title': title,
+    'type': type,
+    'size': size,
+    'faculty':faculty
+  } %}
+{% endmacro %}

src/patterns/03-layouts/_index.scss

-// @file
-// Styles layouts
-
-@use 'content/content' as *;
-@use 'footer/footer' as *;
-@use 'grid/grid' as *;
-@use 'header/header' as *;
-@use 'region/region' as *;
-@use 'layout/layout' as *;
-@use 'layout/layout-base' as *;
-@use 'layout/layout--1-col/layout--1-col' as *;
-@use 'layout/layout--2-col/layout--2-col' as *;
-@use 'layout/layout--3-col/layout--3-col' as *;
-@use 'layout/layout--4-col/layout--4-col' as *;
-@use 'layout/layout--5-col/layout--5-col' as *;
-@use 'layout/layout--inverted-l-left/layout--inverted-l-left' as *;
-@use 'layout/layout--inverted-l-right/layout--inverted-l-right' as *;
-@use 'site-container/site-container' as *;
-@use 'site-footer/site-footer' as *;
+@forward 'grid/grid';
+@forward 'layout/layout';
+@forward 'layout/layout-base';
+@forward 'node/node';

src/patterns/03-layouts/layout/_layout-base.scss

@@ -3,16 +3,12 @@
 .layout__region {
 
   .layout-builder &{
-
-    //outline: 2px dashed #2f91da;
-    outline: 2px dashed var(--blue-6);
+    outline: var(--size-sm) dashed var(--blue-6);
   }
 
   .pl & {
-
-    //outline: 2px dashed #2f91da;
-    outline: 2px dashed var(--blue-6);
-    padding: 1.5rem;
+    outline: var(--size-sm) dashed var(--blue-6);
+    padding: var(--size-3);
     text-align: center;
     .pl-labels{
       text-align: center;

src/patterns/03-layouts/node/_node.scss

+// @file
+// Styles for node..
+
+@use '../../01-core' as *;
+
 $sidebar-width: 18.75rem;
-$sidebar-gap: $grid-gap;
 
 .uw-node {
 
@@ -17,7 +21,7 @@ $sidebar-gap: $grid-gap;
     .uw-node__grid {
       display: flex;
       flex-direction: column;
-      gap: $sidebar-gap;
+      gap: var(--grid-gap);
       justify-content: center;
 
       .layout {
@@ -33,9 +37,9 @@ $sidebar-gap: $grid-gap;
         width: 100vw;
       }
 
-      @include medium {
+      @media(min-width: $screen-md) {
         flex-direction: row;
-        gap: $sidebar-gap;
+        gap: var(--grid-gap);
 
         .layout {
           padding-right: 0;
@@ -65,14 +69,14 @@ $sidebar-gap: $grid-gap;
 
       // Turn on sidebar with display.
       display: block;
-      padding: 0 1rem;
+      padding: 0 var(--size-2);
       width: 100%;
 
       .layout {
         padding: 0;
       }
 
-      @include medium {
+      @media(min-width: $screen-md) {
         padding: 0;
         width: $sidebar-width;
         .layout {
@@ -92,7 +96,7 @@ $sidebar-gap: $grid-gap;
     .uw-node__node {
       width: 100%;
 
-      @include medium {
+      @media(min-width: $screen-md) {
         padding-right: 0;
         width: calc(100vw - 347px);
       }
@@ -106,7 +110,7 @@ $sidebar-gap: $grid-gap;
   }
 
   .uw-node__sidebar {
-    @include medium {
+    @media(min-width: $screen-md) {
       padding: 0;
     }
   }

src/patterns/03-layouts/region/_region.scss

@@ -3,8 +3,8 @@
 
 .l-region {
   .pl &{
-    outline: 1px dashed var(--gray-4);
-    padding: 1.5rem;
+    outline: var(--size-xs) dashed var(--gray-4);
+    padding: var(--size-3);
     text-align: center;
   }
 }

src/patterns/04-components/_index.scss

 @forward 'card/card';
-@forward 'details/details';
 @forward 'tag-list/tag-list';
+@forward 'tag/tag';

src/patterns/04-components/card/_card.scss

@@ -30,7 +30,7 @@ $card-padding: var(--size-2) !default;
 .card--show-hover{
   border-bottom: 3px solid $card-accent-border-color;
   box-shadow: var(--shadow-1);
-  transition: box-shadow;
+  transition: box-shadow 300ms ease;
 
   &:hover,
   &:focus-within {
@@ -115,9 +115,7 @@ $card-padding: var(--size-2) !default;
 }
 
 .card__date {
-
-  //font-size: rem(gesso-font-size(0));
-
+  font-size: var(--font-size-1);
   margin-bottom: var(--size-2);
   position: relative;
 }
@@ -129,26 +127,24 @@ $card-padding: var(--size-2) !default;
 
   a {
 
-    //@include link-reverse(
-    //    $card-link-color,
-    //    $card-link-color-hover
-    //);
+    @include link-reverse(
+       var(--uw-black-primary),
+        var(--uw-black-primary)
+    );
   }
 }
 
 .card__author {
-
   @include uw-no-breakout();
-  //font-family: gesso-font-family(systemmedium);
-  //font-size: gesso-font-size(-1);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-1);
   margin-top: 0;
   padding: 0 0 var(--size-1) 0;
   a {
-
-    //@include link(
-    //    $card-link-color,
-    //    $card-link-color-hover
-    //);
+    @include link(
+        var(--uw-black-primary),
+        var(--uw-black-primary)
+    );
   }
 }
 

src/patterns/04-components/card/card.yml

@@ -12,11 +12,17 @@ header:
   title: 'Card Title'
 tags:
   - url: '#'
-    title: 'Tag 1'
+    title: 'Tag1'
     type: 'simple'
+    size: 'normal'
+    faculty: 'org-default'
   - url: '#'
-    title: 'Tag 2'
+    title: 'Tag2'
     type: 'simple'
+    size: 'normal'
+    faculty: 'org-default'
   - url: '#'
-    title: 'Tag 3'
+    title: 'Tag3'
     type: 'simple'
+    size: 'normal'
+    faculty: 'org-default'

src/patterns/04-components/details/_details.scss

-//// @file
-//// Styles for collapsible details.
-//
-//$details-background-color: gesso-color(ui, generic, background-light) !default;
-//$details-background-color-hover: gesso-color(ui, generic, background) !default;
-//$details-content-background-color: gesso-color(background, site) !default;
-//$details-padding: var(--size-2) !default;
-//$details-text-color: var(--uw-black) !default;
-////$summary-font-family: gesso-font-family(book);
-////$details-font-family: gesso-font-family(primary);
-//
-//// 'details' can appear as a modernizr class on the html tag, so this
-//// class is limited to only the details element
-///* stylelint-disable-next-line selector-no-qualifying-type */
-//.uw-details,
-//.seven-details {
-//  background-color: var(--gray-2);
-//  border: 1px solid #bfbfbf;
-//  border-bottom: 1px solid var(--uw-black);
-//  border-radius: inherit;
-//  box-shadow: var(--shadow-0);
-//  margin: var(--size-3) 0;
-//  transition: box-shadow;
-//  width:100%;
-//
-//  &[open] > .seven-details__summary {
-//
-//    color: var(--uw-black);
-//  }
-//
-//  &:hover {
-//    box-shadow: var(--shadow-1);
-//  }
-//
-//  &:focus-within {
-//    box-shadow: var(--shadow-1);
-//  }
-//
-//  &:first-child{
-//    margin-top: 0;
-//  }
-//
-//  // Fallback for browsers that don’t support details.
-//  /* stylelint-disable-next-line selector-no-qualifying-type */
-//  .js &:not([open]) > .details__content {
-//    display: none;
-//  }
-//}
-//
-//.seven-details__summary,
-//.details__summary {
-//  //@include uw-no-breakout();
-//  ////@include svg-background(mobile-arrow-down);
-//  //background-color: $details-background-color;
-//  //background-position: right 1rem center; // LTR
-//  //background-repeat: no-repeat;
-//  //background-size: rem(13px);
-//  //color: var(--uw-black);
-//  //cursor: pointer;
-//  //display: block;
-//  //font-family: $summary-font-family;
-//  ////font-size: rem(gesso-font-size(-1));
-//  //line-height: 1.25;
-//  //outline: 0;
-//  //padding: $details-padding;
-//  //text-shadow: 0 1px 0 #fff;
-//  //transition: box-shadow;
-//
-//  //@if $support-for-rtl {
-//  //  [dir='rtl'] & {
-//  //    background-position: left $details-padding center;
-//  //    padding-left: var(--size-7);
-//  //    padding-right: $details-padding;
-//  //  }
-//  //}
-//
-//  //[open] > & {
-//  //  //@include svg-background(mobile-arrow-up);
-//  //}
-//  //
-//  //&:hover,
-//  //&:focus{
-//  //  color:var(--uw-black);
-//  //}
-//  //&:first-child{
-//  //  margin-top: 0;
-//  //}
-//  //&::-webkit-details-marker {
-//  //  display: none;
-//  //}
-//}
-//
-//.details__fallback-link {
-//  display: block;
-//  outline: 0;
-//  text-decoration: none;
-//}
-//
-//.details__content {
-//  @include uw-no-breakout();
-//  background: $details-content-background-color;
-//  border: 1px solid $details-background-color;
-//  border-top: 0;
-//  padding: $details-padding;
-//
-//  > :last-child {
-//    margin-bottom: 0;
-//  }
-//  .uw-label{
-//    margin-bottom:0;
-//    margin-top:var(--size-2);
-//  }
-//}
-//
-//.details__description,
-//.seven-details__description{
-//  color: $details-text-color;
-//  //font-size: rem(gesso-font-size(-1));
-//  margin-bottom: var(--size-2);
-//
-//  > :last-child {
-//    margin-bottom: 0;
-//  }
-//}
-//.node--type{
-//  &-uw-ct-contact{
-//    .details {
-//      max-width:600px;
-//    }
-//  }
-//}
-//
-//.seven-details__wrapper {
-//  padding: 1rem;
-//  .uw-input,
-//  .form-text{
-//    width:100%;
-//  }
-//}

src/patterns/04-components/label/label.twig

-<span class="uw-label">{{ label }}:</span>
+<span class="uw-label">{{ label }}</span>

src/patterns/04-components/tag-list/_tag-list.scss

+@use '../../01-core' as *;
+
 .tag-list {
-  // TODO: change of ohana functions/mixins.
-  //@include list-clean();
+  @include list-unstyled();
 }
 
 .tag-list__item {
   display: inline-block;
-  // TODO: change of ohana functions/mixins.
-  //margin-bottom: rem(gesso-spacing(xxs));
-  // TODO: change of ohana functions/mixins.
-  //margin-right: rem(gesso-spacing(xs));
+  margin-bottom: var(--size-05);
+  margin-right: var(--size-1);
 }

src/patterns/04-components/tag-list/tag-list.twig

+{% import '@base/macros/uw.macro.twig' as macros %}
 <ul class="tag-list {{ modifier_classes }}">
   {% for item in items %}
     <li class="tag-list__item {%  if item.faculty %}{{ item.faculty }}{%  endif %}">
-      {{ macros.tag(item.url, item.title, tag_type) }}
+      {{ macros.tag(item.url, item.title, item.type) }}
     </li>
   {% endfor %}
 </ul>

src/patterns/04-components/tag-list/tag-list.yml

@@ -6,6 +6,7 @@ items:
     size: 'normal'
   - url: '#'
     title: 'UW Default'
+    faculty: 'org-default'
     type: 'full'
     size: 'normal'
   - url: '#'