feat: alpha release of design tokens (#1770)

.eslintignore

@@ -7,3 +7,5 @@ dependent-usage-analyzer/
 build-scss.js
 component-generator/
 example/
+style-dictionary-build/
+build-tokens.js

.gitignore

@@ -7,6 +7,7 @@ jest*
 dist
 src/i18n/transifex_input.json
 src/i18n/temp
+style-dictionary-build
 
 # gatsby files
 www/.cache/

src/Badge/badge-bootstrap.scss

@@ -0,0 +1,43 @@
+.badge {
+  display: inline-block;
+  padding: $badge-padding-y $badge-padding-x;
+
+  @include font-size($badge-font-size);
+
+  font-weight: $badge-font-weight;
+  line-height: 1;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+
+  @include border-radius($badge-border-radius);
+  @include transition($badge-transition);
+
+  @at-root a#{&} {
+    @include hover-focus() {
+      text-decoration: none;
+    }
+  }
+
+  &:empty {
+    display: none;
+  }
+}
+
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+.badge-pill {
+  padding-right: $badge-pill-padding-x;
+  padding-left: $badge-pill-padding-x;
+
+  @include border-radius($badge-pill-border-radius);
+}
+
+@each $color, $value in $theme-colors {
+  .badge-#{$color} {
+    @include badge-variant($value);
+  }
+}

src/Button/button-bootstrap.scss

@@ -0,0 +1,126 @@
+.btn-group,
+.btn-group-vertical {
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+
+  > .btn {
+    position: relative;
+    flex: 1 1 auto;
+
+    @include hover() {
+      z-index: 1;
+    }
+
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 1;
+    }
+  }
+}
+
+.btn-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+
+  .input-group {
+    width: auto;
+  }
+}
+
+.btn-group {
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-left: calc($btn-border-width * -1);
+  }
+
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-right-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-left-radius(0);
+  }
+}
+
+/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+.btn-group-sm > .btn { @extend .btn-sm; }
+/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
+.btn-group-lg > .btn { @extend .btn-lg; }
+
+.dropdown-toggle-split {
+  padding-right: calc($btn-padding-x * .75);
+  padding-left: calc($btn-padding-x * .75);
+
+  &::after,
+  .dropup &::after,
+  .dropright &::after {
+    margin-left: 0;
+  }
+
+  .dropleft &::before {
+    margin-right: 0;
+  }
+}
+
+.btn-sm + .dropdown-toggle-split {
+  padding-right: calc($btn-padding-x-sm * .75);
+  padding-left: calc($btn-padding-x-sm * .75);
+}
+
+.btn-lg + .dropdown-toggle-split {
+  padding-right: calc($btn-padding-x-lg * .75);
+  padding-left: calc($btn-padding-x-lg * .75);
+}
+
+.btn-group.show .dropdown-toggle {
+  @include box-shadow($btn-active-box-shadow);
+
+  &.btn-link {
+    @include box-shadow(none);
+  }
+}
+
+.btn-group-vertical {
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+
+  > .btn,
+  > .btn-group {
+    width: 100%;
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) {
+    margin-top: calc($btn-border-width * -1);
+  }
+
+  > .btn:not(:last-child):not(.dropdown-toggle),
+  > .btn-group:not(:last-child) > .btn {
+    @include border-bottom-radius(0);
+  }
+
+  > .btn:not(:first-child),
+  > .btn-group:not(:first-child) > .btn {
+    @include border-top-radius(0);
+  }
+}
+
+.btn-group-toggle {
+  > .btn,
+  > .btn-group > .btn {
+    margin-bottom: 0;
+
+    input[type="radio"],
+    input[type="checkbox"] {
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+      pointer-events: none;
+    }
+  }
+}

src/CloseButton/CloseButton.scss

@@ -1,2 +1,2 @@
 @import "variables";
-@import "~bootstrap/scss/close";
+@import "close-button-bootstrap";

src/CloseButton/_variables.scss

@@ -1,6 +1,6 @@
 // Close
 
-$close-font-size: var(--pgn-typography-close-button-font-size) !default;
-$close-font-weight: var(--pgn-typography-close-button-font-weight) !default;
-$close-color: var(--pgn-color-close-button) !default;
-$close-text-shadow: var(--pgn-elevation-close-button-text-shadow) !default;
+$close-font-size: var(--pgn-close-button-font-size) !default;
+$close-font-weight: var(--pgn-close-button-font-weight) !default;
+$close-color: var(--pgn-close-button-color) !default;
+$close-text-shadow: var(--pgn-close-button-text-shadow) !default;

src/CloseButton/close-button-bootstrap.scss

@@ -0,0 +1,32 @@
+.close {
+  float: right;
+
+  @include font-size($close-font-size);
+
+  font-weight: $close-font-weight;
+  line-height: 1;
+  color: $close-color;
+  text-shadow: $close-text-shadow;
+  opacity: .5;
+
+  @include hover() {
+    color: $close-color;
+    text-decoration: none;
+  }
+
+  &:not(:disabled):not(.disabled) {
+    @include hover-focus() {
+      opacity: .75;
+    }
+  }
+}
+
+button.close {
+  padding: 0;
+  background-color: transparent;
+  border: 0;
+}
+
+a.close.disabled {
+  pointer-events: none;
+}

src/Code/Code.scss

@@ -1,2 +1,2 @@
 @import "variables";
-@import "~bootstrap/scss/code";
+@import "code-bootstrap";

src/Code/code-bootstrap.scss

@@ -0,0 +1,56 @@
+code {
+  @include font-size($code-font-size);
+
+  color: $code-color;
+  word-wrap: break-word;
+
+  a > & {
+    color: inherit;
+  }
+}
+
+// User input typically entered via keyboard
+kbd {
+  padding: $kbd-padding-y $kbd-padding-x;
+
+  @include font-size($kbd-font-size);
+
+  color: $kbd-color;
+  background-color: $kbd-bg;
+
+  @include border-radius($border-radius-sm);
+  @include box-shadow($kbd-box-shadow);
+
+  kbd {
+    padding: 0;
+
+    @include font-size(100%);
+
+    font-weight: $nested-kbd-font-weight;
+
+    @include box-shadow(none);
+  }
+}
+
+// Blocks of code
+pre {
+  display: block;
+
+  @include font-size($code-font-size);
+
+  color: $pre-color;
+
+  // Account for some code outputs that place code tags in pre tags
+  code {
+    @include font-size(inherit);
+
+    color: inherit;
+    word-break: normal;
+  }
+}
+
+// Enable scrollable blocks of code
+.pre-scrollable {
+  max-height: $pre-scrollable-max-height;
+  overflow-y: scroll;
+}

src/Collapsible/_variables.scss

@@ -1,12 +1,12 @@
 // Collapsible
 
-$collapsible-card-spacer-y: var(--pgn-spacing-collapsible-card-spacer-y-base) !default;
-$collapsible-card-spacer-x: var(--pgn-spacing-collapsible-card-spacer-x-base) !default;
-$collapsible-card-spacer-y-lg: var(--pgn-spacing-collapsible-card-spacer-y-lg) !default;
-$collapsible-card-spacer-x-lg: var(--pgn-spacing-collapsible-card-spacer-x-lg) !default;
-$collapsible-card-body-spacer-left: var(--pgn-spacing-collapsible-card-spacer-left-body) !default;
-$collapsible-card-spacer-icon: var(--pgn-spacing-collapsible-card-spacer-icon) !default;
+$collapsible-card-spacer-y: var(--pgn-collapsible-card-spacer-y-base) !default;
+$collapsible-card-spacer-x: var(--pgn-collapsible-card-spacer-x-base) !default;
+$collapsible-card-spacer-y-lg: var(--pgn-collapsible-card-spacer-y-lg) !default;
+$collapsible-card-spacer-x-lg: var(--pgn-collapsible-card-spacer-x-lg) !default;
+$collapsible-card-body-spacer-left: var(--pgn-collapsible-card-spacer-left-body) !default;
+$collapsible-card-spacer-icon: var(--pgn-collapsible-card-spacer-icon) !default;
 
-$collapsible-basic-spacer-y: var(--pgn-spacing-collapsible-card-spacer-basic-y) !default;
-$collapsible-basic-spacer-x: var(--pgn-spacing-collapsible-card-spacer-basic-x) !default;
-$collapsible-basic-spacer-icon: var(--pgn-spacing-collapsible-card-spacer-basic-icon) !default;
+$collapsible-basic-spacer-y: var(--pgn-collapsible-card-spacer-basic-y) !default;
+$collapsible-basic-spacer-x: var(--pgn-collapsible-card-spacer-basic-x) !default;
+$collapsible-basic-spacer-icon: var(--pgn-collapsible-card-spacer-basic-icon) !default;

src/DataTable/DataTable.scss

@@ -88,6 +88,7 @@
   display: flex;
   align-items: flex-start;
 
+  // TODO CSS variables cannot be used as media breakpoints
   @media (max-width: $max-width-xl) {
     overflow-x: scroll;
   }

src/Dropdown/_variables.scss

@@ -31,3 +31,32 @@ $dropdown-item-padding-x: var(--pgn-spacing-dropdown-padding-x-item) !default;
 
 $dropdown-header-color: var(--pgn-color-dropdown-header) !default;
 $dropdown-header-padding: var(--pgn-spacing-dropdown-padding-header) !default;
+$dropdown-min-width: var(--pgn-dropdown-min-width) !default;
+$dropdown-padding-x: var(--pgn-dropdown-padding-x-base) !default;
+$dropdown-padding-y: var(--pgn-dropdown-padding-y-base) !default;
+$dropdown-spacer: var(--pgn-dropdown-spacer) !default;
+$dropdown-font-size: var(--pgn-dropdown-font-size) !default;
+$dropdown-color: var(--pgn-dropdown-color-base) !default;
+$dropdown-bg: var(--pgn-dropdown-bg) !default;
+$dropdown-border-color: var(--pgn-dropdown-border-color) !default;
+$dropdown-border-radius: var(--pgn-dropdown-border-radius-base) !default;
+$dropdown-border-width: var(--pgn-dropdown-border-width) !default;
+$dropdown-inner-border-radius: var(--pgn-dropdown-border-radius-inner) !default;
+$dropdown-divider-bg: var(--pgn-dropdown-divider-bg) !default;
+$dropdown-divider-margin-y: var(--pgn-dropdown-divider-margin-y) !default;
+$dropdown-box-shadow: var(--pgn-dropdown-box-shadow) !default;
+
+$dropdown-link-color: var(--pgn-dropdown-link-color) !default;
+$dropdown-link-hover-color: var(--pgn-dropdown-link-hover-color) !default;
+$dropdown-link-hover-bg: var(--pgn-dropdown-link-hover-bg) !default;
+
+$dropdown-link-active-color: var(--pgn-dropdown-link-active-color) !default;
+$dropdown-link-active-bg: var(--pgn-dropdown-link-active-bg) !default;
+
+$dropdown-link-disabled-color: var(--pgn-dropdown-link-disabled-color) !default;
+
+$dropdown-item-padding-y: var(--pgn-dropdown-padding-y-item) !default;
+$dropdown-item-padding-x: var(--pgn-dropdown-padding-x-item) !default;
+
+$dropdown-header-color: var(--pgn-dropdown-color-header) !default;
+$dropdown-header-padding: var(--pgn-dropdown-padding-header) !default;

src/Fieldset/Fieldset.scss

@@ -0,0 +1,12 @@
+.paragon-fieldset {
+  margin-bottom: calc($spacer * 1.5);
+
+  .form-control {
+    height: auto;
+  }
+
+  fieldset legend {
+    width: auto;
+    margin-bottom: 0;
+  }
+}

src/Image/_variables.scss

@@ -1,13 +1,13 @@
 // Image thumbnails
 
-$thumbnail-padding: var(--pgn-spacing-image-thumbnail-padding) !default;
-$thumbnail-bg: var(--pgn-color-image-thumbnail-bg) !default;
-$thumbnail-border-width: var(--pgn-size-image-thumbnail-border-width) !default;
-$thumbnail-border-color: var(--pgn-color-image-thumbnail-border) !default;
-$thumbnail-border-radius: var(--pgn-size-image-thumbnail-border-radius) !default;
-$thumbnail-box-shadow: var(--pgn-elevation-image-thumbnail-box-shadow) !default;
+$thumbnail-padding: var(--pgn-image-thumbnail-padding) !default;
+$thumbnail-bg: var(--pgn-image-thumbnail-bg) !default;
+$thumbnail-border-width: var(--pgn-image-thumbnail-border-width) !default;
+$thumbnail-border-color: var(--pgn-image-thumbnail-border-color) !default;
+$thumbnail-border-radius: var(--pgn-image-thumbnail-border-radius) !default;
+$thumbnail-box-shadow: var(--pgn-image-thumbnail-box-shadow) !default;
 
 // Figures
 
-$figure-caption-font-size: var(--pgn-typography-image-figure-caption-font-size) !default;
-$figure-caption-color: var(--pgn-color-image-figure-caption) !default;
+$figure-caption-font-size: var(--pgn-image-figure-caption-font-size) !default;
+$figure-caption-color: var(--pgn-image-figure-caption-color) !default;