refactor: added build files

src/Form/_mixins.scss

@@ -25,6 +25,8 @@
     $half-leading: calc(($line-height - .8) / 2);
     $percent-height-minus-no-bottom-leading: calc((($line-height - $half-leading) / $line-height) * 100%);
 
-    transform: translateY(calc($padding-y * -1)) scale(.75)  translateY(calc($percent-height-minus-no-bottom-leading * -1));
+    transform:
+      translateY(calc($padding-y * -1)) scale(.75)
+      translateY(calc($percent-height-minus-no-bottom-leading * -1));
   }
 }

src/Modal/_ModalDialog.scss

@@ -129,7 +129,9 @@
 
 .pgn__modal-body {
   flex-grow: 1;
-  padding: var(--pgn-modal-inner-padding-base) var(--pgn-modal-inner-padding-base) calc(#{var(--pgn-modal-inner-padding-base)} / 2);
+  padding:
+    var(--pgn-modal-inner-padding-base)
+    var(--pgn-modal-inner-padding-base) calc(#{var(--pgn-modal-inner-padding-base)} / 2);
   overflow: auto;
   position: relative;
 

tokens/build/variables.css

@@ -10,6 +10,7 @@
   --pgn-headings-line-height: 1.25;
   --pgn-headings-font-family: null;
   --pgn-headings-margin-bottom: .5rem;
+  --pgn-font-weight-lead: null;
   --pgn-font-weight-bolder: bolder;
   --pgn-font-weight-bold: 700;
   --pgn-font-weight-semi-bold: 500;
@@ -45,6 +46,7 @@
   --pgn-transition-collapse: height .35s ease;
   --pgn-transition-fade: opacity .15s linear;
   --pgn-transition-base: all .2s ease-in-out;
+  --pgn-link-emphasized-hover-darken-percentage: 15%;
   --pgn-link-brand-inline-hover-decoration-color: #003C5E;
   --pgn-link-brand-inline-hover-decoration: underline;
   --pgn-link-brand-inline-hover-color: #003C5E;
@@ -94,6 +96,9 @@
   --pgn-size-base-75: 75rem;
   --pgn-size-base-50: 50rem;
   --pgn-size-base-25: 25rem;
+  --pgn-list-group-item-padding-x: 1.25rem;
+  --pgn-list-group-item-padding-y: .75rem;
+  --pgn-list-group-color: null;
   --pgn-grid-row-columns: 6;
   --pgn-grid-gutter-width: 24px;
   --pgn-grid-columns: 12;
@@ -128,11 +133,17 @@
   --pgn-box-shadow-down-3: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-down-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-down-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
+  --pgn-box-shadow-lg: 0 .25rem .5rem rgba(0, 0, 0, .3);
+  --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(0, 0, 0, .2);
+  --pgn-box-shadow-base: 0 .125rem .25rem rgba(0, 0, 0, .3);
   --pgn-box-shadow-level-5: 0 1.25px 2.5rem rgba(0, 0, 0, .15), 0 .5rem 2.5rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-level-4: 0 .625rem 1.25rem rgba(0, 0, 0, .15), 0 .5rem 1.25rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15);
   --pgn-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15);
+  --pgn-core-list-inline-padding: .5rem;
+  --pgn-core-mark-bg: #FFF243;
+  --pgn-core-mark-padding: .2em;
   --pgn-core-input-btn-focus-width: 1px;
   --pgn-core-input-btn-line-height-sm: 1.4286;
   --pgn-core-input-btn-line-height-base: 1.3333;
@@ -283,7 +294,8 @@
   --pgn-modal-footer-padding-y: 1.5rem;
   --pgn-modal-footer-padding-x: 1rem;
   --pgn-modal-footer-margin-between: .5rem;
-  --pgn-modal-inner-padding: 1.5rem;
+  --pgn-modal-inner-padding-bottom: .7rem;
+  --pgn-modal-inner-padding-base: 1.5rem;
   --pgn-menu-border-hover: transparent;
   --pgn-menu-border-active: transparent;
   --pgn-menu-border-base: transparent;
@@ -424,6 +436,7 @@
   --pgn-card-spacer-x: 1.25rem;
   --pgn-btn-transition: null;
   --pgn-btn-block-spacing-y: .5rem;
+  --pgn-btn-tertiary-inverse-bg-hover: rgba(255, 255, 255, .1);
   --pgn-btn-tertiary-inverse-bg-base: transparent;
   --pgn-btn-tertiary-bg-base: transparent;
   --pgn-btn-disabled-opacity: .65;
@@ -565,6 +578,7 @@
   --pgn-color-gray-300: #ADADAD;
   --pgn-color-gray-200: #CCCCCC;
   --pgn-color-gray-100: #EBEBEB;
+  --pgn-color-theme-interval: 8%;
   --pgn-color-accent-b: #FFEE88;
   --pgn-color-accent-a: #00BBF9;
   --pgn-color-teal: #006DAA;
@@ -584,6 +598,7 @@
   --pgn-headings-color: var(--pgn-color-black);
   --pgn-headings-font-weight: var(--pgn-font-weight-bold);
   --pgn-font-weight-base: var(--pgn-font-weight-normal);
+  --pgn-font-size-lead: calc(var(--pgn-font-size-base) * 1.25);
   --pgn-font-size-mobile-h6: var(--pgn-font-size-h6);
   --pgn-font-size-mobile-h5: var(--pgn-font-size-h5);
   --pgn-font-size-mobile-h4: var(--pgn-font-size-h4);
@@ -594,9 +609,17 @@
   --pgn-display-weight-3: var(--pgn-font-weight-bold);
   --pgn-display-weight-2: var(--pgn-font-weight-bold);
   --pgn-display-weight-1: var(--pgn-font-weight-bold);
-  --pgn-box-shadow-lg: 0 .25rem .5rem rgba(var(--pgn-color-black), .3);
-  --pgn-box-shadow-sm: 0 .0625rem .125rem rgba(var(--pgn-color-black), .2);
-  --pgn-box-shadow-base: 0 .125rem .25rem rgba(var(--pgn-color-black), .3);
+  --pgn-list-group-action-active-bg: var(--pgn-color-gray-200);
+  --pgn-list-group-action-color-base: var(--pgn-color-gray-700);
+  --pgn-list-group-disabled-color: var(--pgn-color-gray-600);
+  --pgn-list-group-border-radius: var(--pgn-border-radius-base);
+  --pgn-list-group-border-width: var(--pgn-border-width);
+  --pgn-list-group-border-color: rgba(var(--pgn-color-black), .125);
+  --pgn-list-group-bg-hover: var(--pgn-color-gray-100);
+  --pgn-list-group-bg-base: var(--pgn-color-white);
+  --pgn-core-dt-font-weight: var(--pgn-font-weight-bold);
+  --pgn-core-blockquote-font-size: calc(var(--pgn-font-size-base) * 1.25);
+  --pgn-core-blockquote-small-font-size: var(--pgn-font-size-small-base);
   --pgn-core-input-btn-border-width: var(--pgn-border-width);
   --pgn-core-input-btn-focus-box-shadow: 0 0 0 var(--pgn-core-input-btn-focus-width) var(--pgn-core-input-btn-focus-color);
   --pgn-core-input-btn-line-height-lg: var(--pgn-line-height-lg);
@@ -675,7 +698,7 @@
   --pgn-modal-content-border-radius: var(--pgn-border-radius-lg);
   --pgn-modal-content-bg: var(--pgn-color-white);
   --pgn-modal-title-line-height: var(--pgn-line-height-base);
-  --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-y) var(--pgn-modal-footer-padding-x);
+  --pgn-modal-footer-padding-base: var(--pgn-modal-footer-padding-x) var(--pgn-modal-footer-padding-y);
   --pgn-menu-background-base: var(--pgn-btn-tertiary-bg-base);
   --pgn-image-thumbnail-border-radius: var(--pgn-border-radius-base);
   --pgn-image-thumbnail-border-color: var(--pgn-color-gray-200);
@@ -734,6 +757,7 @@
   --pgn-dropdown-bg: var(--pgn-color-white);
   --pgn-dropdown-font-size: var(--pgn-font-size-base);
   --pgn-dropdown-padding-header: var(--pgn-dropdown-padding-y-base) var(--pgn-dropdown-padding-x-item);
+  --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm);
   --pgn-data-table-border: 1px solid var(--pgn-color-gray-200);
   --pgn-data-table-background-color: var(--pgn-color-white);
   --pgn-collapsible-card-spacer-x-lg: var(--pgn-card-spacer-x);
@@ -762,7 +786,7 @@
   --pgn-card-bg: var(--pgn-color-white);
   --pgn-card-border-radius-base: var(--pgn-border-radius-base);
   --pgn-card-border-width: var(--pgn-border-width);
-  --pgn-btn-tertiary-inverse-bg-hover: rgba(var(--pgn-color-white), .1);
+  --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover);
   --pgn-btn-tertiary-inverse-color: var(--pgn-color-white);
   --pgn-btn-tertiary-color: var(--pgn-color-gray-700);
   --pgn-btn-box-shadow-base: inset 0 1px 0 rgba(var(--pgn-color-white), .15), 0 1px 1px rgba(var(--pgn-color-black), .075);
@@ -809,16 +833,22 @@
   --pgn-color-gray-500: var(--pgn-color-gray-base);
   --pgn-body-color: var(--pgn-color-gray-700);
   --pgn-body-bg: var(--pgn-color-white);
+  --pgn-border-hr-margin-y: var(--pgn-core-spacer);
+  --pgn-border-hr-width: var(--pgn-border-width);
+  --pgn-border-hr-color: rgba(var(--pgn-color-black), .1);
   --pgn-border-color: var(--pgn-color-gray-200);
   --pgn-link-brand-inline-color: var(--pgn-color-brand-500);
   --pgn-link-brand-color: var(--pgn-color-brand-500);
   --pgn-link-muted-inline-color: var(--pgn-color-primary-500);
   --pgn-link-muted-color: var(--pgn-color-primary-500);
+  --pgn-list-group-action-active-color: var(--pgn-body-color);
+  --pgn-list-group-action-color-hover: var(--pgn-list-group-action-color-base);
+  --pgn-list-group-disabled-bg: var(--pgn-list-group-bg-base);
+  --pgn-list-group-active-color-base: var(--pgn-component-active-color);
   --pgn-tooltip-arrow-color-base: var(--pgn-tooltip-bg-base);
   --pgn-table-dark-color-border: var(--pgn-table-dark-bg-base);
   --pgn-table-dark-color-hover: var(--pgn-table-dark-color-base);
   --pgn-table-border-color: var(--pgn-border-color);
-  --pgn-table-color-border: var(--pgn-border-color);
   --pgn-table-color-base: var(--pgn-body-color);
   --pgn-search-field-input-height-search: calc(var(--pgn-form-input-line-height-base) * 1em + var(--pgn-form-input-padding-y-base) * 2);
   --pgn-search-field-border-color-base: var(--pgn-color-gray-500);
@@ -901,8 +931,6 @@
   --pgn-dropdown-border-radius-inner: calc(var(--pgn-dropdown-border-radius-base) - var(--pgn-dropdown-border-width));
   --pgn-dropdown-color-header: var(--pgn-color-gray-500);
   --pgn-dropdown-color-base: var(--pgn-body-color);
-  --pgn-data-table-box-shadow: var(--pgn-box-shadow-sm);
-  --pgn-btn-tertiary-inverse-bg-active: var(--pgn-btn-tertiary-inverse-bg-hover);
   --pgn-btn-tertiary-bg-active: var(--pgn-color-light-500);
   --pgn-btn-tertiary-bg-hover: var(--pgn-color-light-500);
   --pgn-btn-disabled-link-color: var(--pgn-color-gray-500);
@@ -920,9 +948,9 @@
   --pgn-color-secondary-500: var(--pgn-color-secondary-base);
   --pgn-link-inline-color: var(--pgn-color-info-500);
   --pgn-link-color: var(--pgn-color-info-500);
+  --pgn-list-group-active-bg: var(--pgn-component-active-bg);
   --pgn-core-input-btn-focus-color: var(--pgn-component-active-bg);
   --pgn-table-caption-color: var(--pgn-text-muted);
-  --pgn-table-color-caption: var(--pgn-text-muted);
   --pgn-table-color-hover: var(--pgn-table-color-base);
   --pgn-popover-danger-icon-color: var(--pgn-color-warning-500);
   --pgn-popover-warning-icon-color: var(--pgn-color-warning-500);
@@ -958,6 +986,7 @@
   --pgn-form-input-focus-color-border: var(--pgn-component-active-bg);
   --pgn-form-input-border-height: calc(var(--pgn-form-input-border-width) * 2);
   --pgn-dropzone-error-wrapper-color: var(--pgn-color-danger-500);
+  --pgn-list-group-active-color-border: var(--pgn-list-group-active-bg);
   --pgn-pagination-border-color-active: var(--pgn-pagination-bg-active);
   --pgn-pagination-color-base: var(--pgn-link-color);
   --pgn-form-feedback-icon-color-invalid: var(--pgn-form-feedback-color-invalid);