ISTWCMS-5596: import of initial base element css and patterns

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

@@ -2,14 +2,13 @@
 // Blockquote styles.
 
 :where(blockquote) {
-  border-inline-start-width: var(--border-size-3);
-  display: grid;
-  font-size: var(--font-size-2);
-  gap: var(--size-3);
-  margin: 0 0 var(--size-5);
-  max-inline-size: var(--size-content-2);
-  padding-block: var(--size-3);
-  padding-inline: var(--size-4);
+  //border-inline-start-width: var(--border-size-3);
+  //display: grid;
+  //gap: var(--size-3);
+  //margin: 0 0 var(--size-5);
+  //max-inline-size: var(--size-content-2);
+  //padding-block: var(--size-3);
+  //padding-inline: var(--size-4);
 
    * + & {
     margin-top: var(--size-5);

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

@@ -2,9 +2,18 @@
 // Body styles.
 
 :where(body) {
+  background-color: var(--var-uw-white);
+  color: var(--uw-black);
+  font-family: var(--font-primary);
+  font-size: var(--font-size-0);
+  line-height: var(--font-lineheight-4);
   margin: 0;
   min-block-size: 100%;
   padding: 0;
   scrollbar-gutter: stable both-edges;
   word-wrap: break-word;
 }
+body.has-open-mobile-menu  {
+  overflow: hidden;
+  -webkit-overflow-scrolling: touch;
+}

src/patterns/01-core/elements/_definition-list.scss

@@ -20,5 +20,5 @@
 }
 
 :where(dl) {
-  font-size: var(--font-size-2);
+  font-size: var(--font-size-0);
 }

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

@@ -3,9 +3,6 @@
 
 @use '../../01-core' as *;
 
-//$summary-font-family: gesso-font-family(book);
-//$details-font-family: gesso-font-family(primary);
-
 :where(details) {
   @include uw-no-breakout();
   background: var(--gray-2);
@@ -59,8 +56,8 @@
   color: var(--uw-black-primary);
   cursor: pointer;
   display:block;
-  font-family: var(--font-sans);
-  font-size: var(--font-size-0);
+  font-family: var(--font-book);
+  font-size: var(--font-size-00);
   font-weight: var(--font-weight-700);
   margin: 0;
   line-height: 1.25;

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

 // @file
 // Fieldset element styles.
 
-:where(fieldset) {
-  border-radius: var(--radius-2);
-  border: var(--border-size-1) solid var(--gray-4);
+:where(fieldset),
+.fieldset {
+  background:transparent;
+  border: var(--gray-3) solid  var(--size-xs);
+  clear: both;
+  margin-bottom:var(--size-4);
+  padding: var(--size-2);
+  position: relative;
+  legend {
+    border: 0;
+    box-sizing: border-box;
+    font-family: var(--font-condensedbook);
+    font-size: var(--font-size-2);
+    font-weight: 300;
+    margin: var(--size-1) 0;
+    max-width: 100%;
+    padding: 0;
+    position: relative;
+    white-space: normal;
+  }
+  /* stylelint-disable-next-line selector-no-qualifying-type */
+  &.webform-type-fieldset{
+    background: var(--gray-1);
+    padding: var(--size-2);
+    > legend{
+
+      border-radius: 2px;
+      font-family: var(--font-condensedbook);
+      margin: var(--size-2) 0;
+      min-width:0;
+      padding:0;
+      position: relative;
+      top:0;
+    }
+  }
+
+  &:hover {
+    > legend {
+      background-color: transparent;
+    }
+  }
+  .fieldset-invisible{
+    clear: both;
+    &:hover {
+      > legend {
+        margin-bottom: 0.7rem;
+        padding-top: var(--size-2);
+
+      }
+    }
+
+    > legend {
+      font-weight:400;
+      margin-bottom: 0.7rem;
+      padding-top:var(--size-2);
+
+    }
+  }
+  .fieldset-wrapper {
+    .webform-container-inline {
+      .fieldset-invisible {
+        display: inline-block;
+      }
+    }
+  }
+}
+.captcha {
+  margin: rem(gesso-spacing(md)) 0;
+}
+
+.layout-builder-configure-section {
+  fieldset {
+    background-color: initial;
+  }
 }

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

 // @file
 // Figure element styles.
 
-// :where(figure) {}
+ :where(figure) {
+    margin: 0 0 var(--size-2);
+  }

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

 // @file
 // Form element styles.
 
-// :where(form) {}
+@use '../../01-core' as *;
+
+$form-label-font-family: gesso-font-family(condensedbook) !default;
+$form-legend-font-family: gesso-font-family(book) !default;
+$form-input-font-family: gesso-font-family(system) !default;
+
+
+ :where(form) {
+   font-family: var(--font-book);
+   font-size: var(--font-size-0);
+   @media(min-width: $screen-md) {
+     font-size: var(--font-size-00);
+   }
+   font-weight:400;
+ }
+// Don’t style button elements, since they’re often styled as links for
+// accessible widgets. Use the .button class in components/button.
+button {
+  overflow: visible;
+}
+
+.desription,
+.webform-element-description{
+  color: var(--gray-5);
+  font-family: var(--font-book);
+  font-size: var(--font-size-00);
+  margin: var(--size-05) 0;
+}
+
+
+
+[data-drupal-selector="edit-moderation-state-wrapper"]{
+
+  background-color:#ffebc5;
+  padding: var(--size-2);
+  .form-item-moderation-state-0-current{
+    font-style:italic;
+    label{
+      font-size: var(--font-size-0);
+      font-style:normal;
+      margin-bottom:0;
+    }
+  }
+}
+// Login screen making width 35rem.
+.user-login-form{
+  margin:0;
+  max-width:35rem;
+
+}
+// uw custon label css
+.webform-client-form {
+  margin-top:var(--size-105);
+}
+
+.form-required::after {
+  color:#e00;
+  content: "*";
+  display:inline-block;
+  font-family: var(--font-system);
+  font-size:  var(--font-size-2);
+  font-weight:300;
+  margin-left: var(--size-sm);
+}
+
+// CSS for form overrides
+//.uw-site-container {
+//  // the bottom fixed admin tab with site container:
+//  .node-uw-ct-web-page-delete-form,
+//  .layout-region-node-footer__content,
+//  .node-layout-builder-form,
+//  .entity-view-display-layout-builder-form,
+//  .layout-builder-discard-changes,
+//  .node-confirm-form
+//  {
+//    .form-actions {
+//      background: gesso-color(ui, generic, background-lighter);
+//      border-top:1px solid gesso-color(ui, generic, background);
+//      bottom: 0;
+//      box-shadow: gesso-box-shadow(6);
+//      display:flex;
+//      height:auto;
+//      left: 0;
+//      margin: 0;
+//      padding: 0.5rem;
+//      position: fixed;
+//      width: 100%;
+//      z-index: gesso-z-index(overlay);
+//      [data-drupal-selector="edit-preview-toggle"]{
+//        order:10;
+//      }
+//      .button{
+//        margin:0.25rem 0;
+//        max-width:7rem;
+//      }
+//      @include medium {
+//        .button{
+//          margin-bottom:1rem ;
+//        }
+//        gap:$form-gap;
+//        height:4rem;
+//      }
+//
+//      .form-item-toggle-content-preview {
+//        margin-top:1rem;
+//      }
+//      input [type='submit']{
+//        margin-top:0;
+//      }
+//
+//      .form-wrapper input[type="submit"] {
+//        margin-top:0;
+//      }
+//    }
+//  }
+//
+//  .webform-submission-form{
+//    .form-actions{
+//      display:flex;
+//      gap:1rem;
+//      margin:0.25rem 0;
+//      .button{
+//        @include button();
+//        height:inherit;
+//        margin:inherit;
+//      }
+//    }
+//  }
+//  // custom form actions
+//  .layout-region-node-footer__content .form-actions{
+//    .button[data-drupal-selector="edit-cancel"]{
+//      margin-left:0 !important;
+//    }
+//    @include medium {
+//      grid-template-columns:8rem 8rem 8rem 8rem;
+//      grid-template-rows:auto;
+//      row-gap: 1rem;
+//    }
+//  }
+//  // custom form actions
+//  .layout-builder-discard-changes .form-actions,
+//  .node-uw-ct-web-page-delete-form .form-actions{
+//    .button[data-drupal-selector="edit-cancel"]{
+//      margin-left:0 !important;
+//    }
+//    @include medium {
+//      grid-template-columns:8rem 8rem;
+//      grid-template-rows:auto;
+//      row-gap: 1rem;
+//    }
+//  }
+//  // custom form actions
+//  .entity-view-display-layout-builder-form .form-actions{
+//    .button[data-drupal-selector="edit-cancel"]{
+//      margin-left:0 !important;
+//    }
+//    @include medium {
+//      grid-template-columns:8rem 8rem 15rem;
+//      grid-template-rows:auto;
+//      row-gap: 1rem;
+//    }
+//  }
+//}

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

@@ -11,10 +11,6 @@
   background-color: white;
   block-size: 100%;
   caret-color: var(--caret-color);
-  color: var(--text-0);
-  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

@@ -2,8 +2,21 @@
 // Label element styles.
 
  :where(label) {
-   font-family: var(--font-sans);
+   font-family: var(--font-condensedbook);
  }
+label,
+.label,
 .uw-label{
-  font-family: var(--font-sans);
+  display:block;
+  font-family: var(--font-condensedbook);
+  font-size: var(--font-size-2);
+  font-weight:normal;
+  form &{
+    margin-bottom: var(--size-1);
+  }
+  abbr {
+    display: inline;
+    font-size:  var(--font-size-1);
+  }
+
 }

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

 // @file
 // Options element styles.
 
-// :where(option) {}
+ //:where(option) {}
+.option {
+  display: inline;
+  font-family: var(--font-book);
+  font-size: var(--font-size-0);
+  font-weight: 300;
+  letter-spacing: inherit;
+  margin-left: 0.2rem;
+  padding-left: 0.25rem;
+}
 
 :where(optgroup) {
   font-family: inherit;

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

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

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

@@ -3,12 +3,12 @@
 
 :where(textarea) {
   background-color: var(--gray-2);
-  border-radius: var(--radius-2);
   color: inherit;
   cursor: pointer;
   font-size: inherit;
   font: inherit;
   letter-spacing: inherit;
+  overflow:auto;
   padding-block: var(--size-1);
   padding-inline: var(--size-2);
   resize: block;

src/patterns/01-core/font-face/_index.scss

@@ -40,14 +40,6 @@
   src: url('/fonts/Bureau_Grot-Wide_Book.eot'), url('/fonts/Bureau_Grot-Wide_Book.eot?#iefix') format('embedded-opentype'), url('/fonts/Bureau_Grot-Wide_Book.woff2') format('woff2'), url('/fonts/Bureau_Grot-Wide_Book.woff') format('woff'), url('/fonts/Bureau_Grot-Wide_Book.ttf') format('truetype'), url('/fonts/Bureau_Grot-Wide_Book.svg#Bureau_Grot-Wide_Book') format('svg');
 }
 
-@font-face {
-  font-family: 'iconic';
-  font-style: normal;
-  font-weight: normal;
-  src: url("/fonts/iconic.eot");
-  src: url("/fonts/iconic.eot?#iefix") format("embedded-opentype"), url("../fonts/iconic.svg#iconic") format("svg"), url("/fonts/iconic.woff") format("woff"), url("/fonts/iconic.ttf") format("truetype");
-}
-
 /* Complete 1451 */
 
 @font-face {

src/patterns/01-core/props/_colors.scss

@@ -218,3 +218,12 @@
   --orange-8: #e8590c;
   --orange-9: #d9480f;
 }
+
+
+
+//Swatches
+.pl-colors .color-demo > div > div{
+  background-color: rgba(0,0,0,0.6);
+  font-family: var(--font-systembold);
+  font-size: var(--font-size-00);
+}

src/patterns/01-core/props/_fonts.scss

 :where(html) {
-  --font-sans: Helvetica, sans-serif;
-  --font-serif: Georgia, 'Times New Roman', Times, serif;
-  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
-  --font-mono: Menlo, Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace, sans-serif;
+  --font-book:  'BureauGrot Book', 'Barlow', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+  --font-condensed:  'BureauGrotCond', 'Barlow Condensed', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+  --font-condensedbook: 'BureauGrotCond Book', 'Barlow Condensed', impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+  --font-sans:  BureauGrot, Barlow , impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
+  --font-serif:  georgia, 'droid serif', 'Times New Roma', Times, serif;
+  --font-system: Typ1451-Regular,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+  --font-systemlight: Typ1451-Light,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+  --font-systemmedium: Typ1451-Medium,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+  --font-systembold: Typ1451-Bold,-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Oxygen-Sans', Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', sans-serif;
+  --font-mono: Consolas, 'Lucida Console', 'Liberation Mono', 'Courier New', monospace, sans-serif;
+  --font-primary: georgia, 'droid serif', 'Times New Roma', Times, serif;
+  --font-secondary: BureauGrot, Barlow , impact, 'avenir next condensed heavy', 'Droid Sans', sans-serif;
   --font-weight-100: 100;
   --font-weight-200: 200;
   --font-weight-300: 300;
@@ -39,7 +47,7 @@
   --font-lineheight-1: 1.1;
   --font-lineheight-2: 1.25;
   --font-lineheight-3: 1.375;
-  --font-lineheight-4: 1.5;
+  --font-lineheight-4: 1.425;
   --font-lineheight-5: 1.75;
   --font-lineheight-6: 2;
   --font-letterspacing-0: -0.05em;

src/patterns/04-components/_index.scss

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

src/patterns/04-components/blockquote/_blockquote.scss

+.uw-blockquote {
+  background-color: var(--gray-1);
+  color:  var(--uw-black);
+
+  &__wrapper {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding:  var(--size-4) 0;
+    text-align: center;
+  }
+
+  &__text {
+    display: inline-block;
+    p{
+      font-size:  var(--font-size-4);
+    }
+    max-width: 640px;
+    padding: 0  var(--size-5);
+    position: relative;
+    text-align: left;
+
+    &::before {
+      color: var(--gray-5);
+      content: "\201C";
+      font-size: var(--font-size-14);
+      left: 0;
+      line-height: 5.2rem;
+      position: absolute;
+      top: -10px;
+    }
+
+    &::after {
+      bottom: 5px;
+      color: var(--gray-5);
+      content: "\201D";
+      font-size: var(--font-size-14);
+      line-height: 0;
+      position: absolute;
+      right: 0;
+    }
+  }
+
+  &__attribution {
+    display: block;
+
+    &--wrapper {
+      display: inline-block;
+      font-size: var(--font-size-0);
+      max-width: 640px;
+      padding: 0 var(--size-2);
+      position: relative;
+      text-align: left;
+    }
+
+
+
+    cite {
+      color: var(--uw-black);
+      font-family: var(--font-condensedbook);
+      font-size: var(--font-size-1);
+      font-weight: normal;
+      text-align: left;
+      text-transform:uppercase;
+       > :first-child::before{
+         content: "\2014";
+         display:inline-block;
+         padding-right:var(--size-1);
+       }
+    }
+  }
+}

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

+<blockquote class="uw-blockquote">
+  <div class="uw-blockquote__wrapper">
+    <div class="uw-blockquote__text">
+      {{ blockquote.text }}
+    </div>
+    {% if blockquote.attribution %}
+    <footer class="uw-blockquote__attribution">
+      <div class="uw-blockquote__attribution--wrapper">
+        <cite>
+          {{ blockquote.attribution }}
+        </cite>
+      </div>
+    </footer>
+    {% endif %}
+  </div>
+</blockquote>

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

+blockquote:
+  text: '<p>This is some text from the yml file</p><p>This is some text from the yml file2. This is some text from the yml file.  This is some text from the yml file.  This is some text from the yml file</p><p>This is some text from the yml file3</p><p>This is some text from the yml file4. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file. This is some text from the yml file</p><p>This is some text from the yml file5</p>'
+  attribution: 'This is the attribution'

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

+<fieldset class="fieldset fieldset--default">
+  <legend class="fieldset__legend">
+    <span class="fieldset__legend-text">{{ legend }}</span>
+  </legend>
+  <div class="fieldset__content">
+    {{ content }}
+    <div class="fieldset__description">
+      {{ description }}
+    </div>
+  </div>
+</fieldset>