Skip to content

Commit

Permalink
[BD-46] refactor: improve design tokens architecture (#1874)
Browse files Browse the repository at this point in the history
* refactor: update design tokens naming and add missing ones

* feat: expose replace vars script to CLI

Co-authored-by: Viktor Rusakov <vrusakov66@gmail.com>
  • Loading branch information
2 people authored and github-actions[bot] committed Feb 17, 2023
1 parent c9fd945 commit 73a7f4f
Showing 89 changed files with 1,380 additions and 2,798 deletions.
5 changes: 3 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -6,7 +6,8 @@
"module": "dist/index.js",
"license": "Apache-2.0",
"bin": {
"build-design-tokens": "./tokens/build-tokens.js"
"build-design-tokens": "./tokens/build-tokens.js",
"replace-scss-with-css": "./tokens/replace-variables.js"
},
"publishConfig": {
"access": "public"
@@ -50,7 +51,7 @@
"type-check": "tsc --noEmit && tsc --project www --noEmit",
"type-check:watch": "npm run type-check -- --watch",
"build-types": "tsc --emitDeclarationOnly",
"build-tokens": "node tokens/build-tokens.js --build-dir scss/core/css/",
"build-tokens": "node tokens/build-tokens.js --build-dir ./scss/core/css/",
"replace-variables-usage-with-css": "node tokens/replace-variables.js -p src -t usage",
"replace-variables-definition-with-css": "node tokens/replace-variables.js -p src -t definition",
"build-scss-to-css-map": "node tokens/map-scss-to-css.js"
368 changes: 184 additions & 184 deletions scss/core/_variables.scss

Large diffs are not rendered by default.

694 changes: 345 additions & 349 deletions scss/core/css/variables.css

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/Badge/Badge.scss
Original file line number Diff line number Diff line change
@@ -13,9 +13,9 @@
text-align: center;
white-space: nowrap;
vertical-align: baseline;
transition: $badge-transition;

@include border-radius($badge-border-radius);
@include transition($badge-transition);

@at-root a#{&} {
&:hover,
4 changes: 2 additions & 2 deletions src/Breadcrumb/_variables.scss
Original file line number Diff line number Diff line change
@@ -9,8 +9,8 @@ $breadcrumb-item-padding: var(--pgn-spacing-breadcrumb-padding-item) !default;
$breadcrumb-margin-bottom: var(--pgn-spacing-breadcrumb-margin-bottom) !default;
$breadcrumb-margin-left: var(--pgn-spacing-breadcrumb-margin-left) !default;

$breadcrumb-border-focus-axis-x: var(--pgn-breadcrumb-border-focus-axis-x) !default;
$breadcrumb-border-focus-axis-y: var(--pgn-breadcrumb-border-focus-axis-y) !default;
$breadcrumb-border-focus-axis-x: var(--pgn-size-breadcrumb-border-axis-x-focus) !default;
$breadcrumb-border-focus-axis-y: var(--pgn-size-breadcrumb-border-axis-y-focus) !default;

$breadcrumb-border-focus-width: var(--pgn-size-breadcrumb-border-width-focus) !default;

5 changes: 2 additions & 3 deletions src/Button/Button.scss
Original file line number Diff line number Diff line change
@@ -25,10 +25,9 @@
border: $btn-border-width solid var(--pgn-btn-border-color, transparent);
color: var(--pgn-btn-color, #{$body-color});
background-color: var(--pgn-btn-bg, transparent);
transition: $btn-transition;

@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size,
$btn-line-height, $btn-border-radius);
@include transition($btn-transition);
@include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-line-height, $btn-border-radius);

&:hover {
color: var(--pgn-btn-hover-color, #{$body-color});
54 changes: 27 additions & 27 deletions src/Button/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,38 +1,38 @@
$btn-padding-y: var(--pgn-btn-padding-y-base) !default;
$btn-padding-x: var(--pgn-btn-padding-x-base) !default;
$btn-font-family: var(--pgn-btn-font-family) !default;
$btn-font-size: var(--pgn-btn-font-size-base) !default;
$btn-line-height: var(--pgn-btn-line-height-base) !default;
$btn-padding-y: var(--pgn-spacing-btn-padding-y-base) !default;
$btn-padding-x: var(--pgn-spacing-btn-padding-x-base) !default;
$btn-font-family: var(--pgn-typography-btn-font-family) !default;
$btn-font-size: var(--pgn-typography-btn-font-size-base) !default;
$btn-line-height: var(--pgn-typography-btn-line-height-base) !default;

$btn-padding-y-sm: var(--pgn-btn-padding-y-sm) !default;
$btn-padding-x-sm: var(--pgn-btn-padding-x-sm) !default;
$btn-font-size-sm: var(--pgn-btn-font-size-sm) !default;
$btn-line-height-sm: var(--pgn-btn-line-height-sm) !default;
$btn-padding-y-sm: var(--pgn-spacing-btn-padding-y-sm) !default;
$btn-padding-x-sm: var(--pgn-spacing-btn-padding-x-sm) !default;
$btn-font-size-sm: var(--pgn-typography-btn-font-size-sm) !default;
$btn-line-height-sm: var(--pgn-typography-btn-line-height-sm) !default;

$btn-padding-y-lg: var(--pgn-btn-padding-y-lg) !default;
$btn-padding-x-lg: var(--pgn-btn-padding-x-lg) !default;
$btn-font-size-lg: var(--pgn-btn-font-size-lg) !default;
$btn-line-height-lg: var(--pgn-btn-line-height-lg) !default;
$btn-padding-y-lg: var(--pgn-spacing-btn-padding-y-lg) !default;
$btn-padding-x-lg: var(--pgn-spacing-btn-padding-x-lg) !default;
$btn-font-size-lg: var(--pgn-typography-btn-font-size-lg) !default;
$btn-line-height-lg: var(--pgn-typography-btn-line-height-lg) !default;

$btn-border-width: var(--pgn-btn-border-width) !default;
$btn-border-width: var(--pgn-size-btn-border-width) !default;

$btn-font-weight: var(--pgn-btn-font-weight) !default;
$btn-box-shadow: var(--pgn-btn-box-shadow-base) !default;
$btn-focus-width: var(--pgn-btn-focus-width) !default;
$btn-focus-gap: var(--pgn-btn-focus-gap) !default;
$btn-disabled-opacity: var(--pgn-btn-disabled-opacity) !default;
$btn-active-box-shadow: var(--pgn-btn-box-shadow-active) !default;
$btn-font-weight: var(--pgn-typography-btn-font-weight) !default;
$btn-box-shadow: var(--pgn-elevation-btn-box-shadow-base) !default;
$btn-focus-width: var(--pgn-size-btn-focus-width) !default;
$btn-focus-gap: var(--pgn-spacing-btn-focus-gap) !default;
$btn-disabled-opacity: var(--pgn-other-btn-disabled-opacity) !default;
$btn-active-box-shadow: var(--pgn-elevation-btn-box-shadow-active) !default;

$btn-link-disabled-color: var(--pgn-btn-disabled-link-color) !default;
$btn-link-disabled-color: var(--pgn-color-btn-disabled-link) !default;

$btn-block-spacing-y: var(--pgn-btn-block-spacing-y) !default;
$btn-block-spacing-y: var(--pgn-spacing-btn-block-spacing-y) !default;

// Allows for customizing button radius independently from global border radius
$btn-border-radius: var(--pgn-btn-border-radius-base) !default;
$btn-border-radius-lg: var(--pgn-btn-border-radius-lg) !default;
$btn-border-radius-sm: var(--pgn-btn-border-radius-sm) !default;
$btn-border-radius: var(--pgn-size-btn-border-radius-base) !default;
$btn-border-radius-lg: var(--pgn-size-btn-border-radius-lg) !default;
$btn-border-radius-sm: var(--pgn-size-btn-border-radius-sm) !default;

$btn-transition: var(--pgn-btn-transition) !default;
$btn-transition: var(--pgn-transition-btn) !default;

// PRIMARY BUTTON VARIABLES
$btn-primary-bg: var(--pgn-color-btn-bg-primary) !default;
@@ -417,7 +417,7 @@ $btn-inverse-tertiary-hover-border-color: var(--pgn-color-btn-hover-border-inver
$btn-inverse-tertiary-active-color: var(--pgn-color-btn-active-text-inverse-tertiary) !default;
$btn-inverse-tertiary-active-bg: var(--pgn-color-btn-active-bg-inverse-tertiary) !default;
$btn-inverse-tertiary-active-border-color: var(--pgn-color-btn-active-border-inverse-tertiary) !default;
$btn-inverse-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-secondary) !default;
$btn-inverse-tertiary-focus-border-color: var(--pgn-color-btn-focus-border-inverse-tertiary) !default;

$btn-focus-border-gap: $btn-focus-width + $btn-focus-gap !default;
$btn-focus-distance-to-border: $btn-focus-border-gap + $btn-border-width !default;
1 change: 1 addition & 0 deletions src/Card/_variables.scss
Original file line number Diff line number Diff line change
@@ -13,6 +13,7 @@ $card-height: var(--pgn-card-height-base) !default;
$card-bg-dark: $primary-500 !default;
$card-bg-muted: $light-200 !default;

// TODO: Need to deleted this variable after refactoring Card component
// stylelint-disable-next-line max-line-length
$card-inner-border-radius: calc(#{var(--pgn-size-card-border-radius-base)} - #{var(--pgn-size-card-border-width)}) !default;
$card-color: var(--pgn-color-card-base) !default;
2 changes: 2 additions & 0 deletions src/Card/card-bootstrap.scss
Original file line number Diff line number Diff line change
@@ -38,6 +38,8 @@
}
}

// TODO: This selector is not used in Paragon.
// It is necessary to delete it and the existing design token (`$card-color`).
.card-body {
flex: 1 1 auto;
min-height: 1px;
3 changes: 2 additions & 1 deletion src/Carousel/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
$carousel-control-color: var(--pgn-color-carousel-control-base) !default;
$carousel-control-width: var(--pgn-size-carousel-control-width-base) !default;
$carousel-control-opacity: var(--pgn-color-carousel-control-opacity-base) !default;
$carousel-control-hover-opacity: var(--pgn-color-carousel-control-opacity-hover) !default;
@@ -18,4 +19,4 @@ $carousel-control-prev-icon-bg: var(--pgn-content-carousel-control-bg-prev-icon)
$carousel-control-next-icon-bg: var(--pgn-content-carousel-control-bg-next-icon) !default;

// Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
$carousel-transition: transform var(--pgn-transition-carousel-duration) ease-in-out !default;
$carousel-transition: var(--pgn-transition-carousel-base) !default;
14 changes: 5 additions & 9 deletions src/Carousel/carousel-bootstrap.scss
Original file line number Diff line number Diff line change
@@ -21,8 +21,7 @@
width: 100%;
margin-right: -100%;
backface-visibility: hidden;

@include transition($carousel-transition);
transition: $carousel-transition;
}

.carousel-item.active,
@@ -60,8 +59,7 @@
.active.carousel-item-right {
z-index: 0;
opacity: 0;

@include transition(opacity 0s var(--pgn-carousel-transition-base));
transition: opacity 0s $carousel-transition;
}
}

@@ -78,13 +76,12 @@
justify-content: center;
width: $carousel-control-width;
padding: 0;
color: var(--pgn-carousel-control-color);
color: $carousel-control-color;
text-align: center;
background: none;
border: 0;
opacity: $carousel-control-opacity;

@include transition($carousel-control-transition);
transition: $carousel-control-transition;

@include hover-focus() {
color: var(--pgn-carousel-control-color);
@@ -160,8 +157,7 @@
border-top: $carousel-indicator-hit-area-height solid transparent;
border-bottom: $carousel-indicator-hit-area-height solid transparent;
opacity: .5;

@include transition($carousel-indicator-transition);
transition: $carousel-indicator-transition;
}

.active {
2 changes: 1 addition & 1 deletion src/Chip/_variables.scss
Original file line number Diff line number Diff line change
@@ -4,7 +4,7 @@ $chip-padding-to-icon: var(--pgn-spacing-chip-padding-to-icon) !default;
$chip-icon-padding: var(--pgn-spacing-chip-padding-icon) !default;
$chip-margin: var(--pgn-spacing-chip-margin) !default;
$chip-border-radius: var(--pgn-size-chip-border-radius) !default;
$chip-disable-opacity: var(--pgn-color-chip-opacity-disabled) !default;
$chip-disable-opacity: var(--pgn-other-chip-opacity-disabled) !default;
$chip-icon-size: var(--pgn-size-chip-icon) !default;

$chip-light-bg: var(--pgn-color-chip-bg-light) !default;
11 changes: 5 additions & 6 deletions src/Form/_bootstrap-custom-forms.scss
Original file line number Diff line number Diff line change
@@ -203,8 +203,7 @@
background-color: $custom-control-indicator-border-color;
// stylelint-disable-next-line property-disallowed-list
border-radius: $custom-switch-indicator-border-radius;

@include transition(transform .15s ease-in-out, $custom-forms-transition);
transition: transform .15s ease-in-out, $custom-forms-transition;
}
}

@@ -429,11 +428,11 @@
margin-top: calc((#{$custom-range-track-height} - #{$custom-range-thumb-height}) * .5); // Webkit specific
border: $custom-range-thumb-border;
appearance: none;
transition: $custom-forms-transition;

@include gradient-bg($custom-range-thumb-bg);
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);

&:active {
@include gradient-bg($custom-range-thumb-active-bg);
@@ -457,11 +456,11 @@
height: $custom-range-thumb-height;
border: $custom-range-thumb-border;
appearance: none;
transition: $custom-forms-transition;

@include gradient-bg($custom-range-thumb-bg);
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);

&:active {
@include gradient-bg($custom-range-thumb-active-bg);
@@ -488,11 +487,11 @@
margin-left: $custom-range-thumb-focus-box-shadow-width; // Workaround that overflowed box-shadow is hidden.
border: $custom-range-thumb-border;
appearance: none;
transition: $custom-forms-transition;

@include gradient-bg($custom-range-thumb-bg);
@include border-radius($custom-range-thumb-border-radius);
@include box-shadow($custom-range-thumb-box-shadow);
@include transition($custom-forms-transition);

&:active {
@include gradient-bg($custom-range-thumb-active-bg);
@@ -550,5 +549,5 @@
.custom-control-label::before,
.custom-file-label,
.custom-select {
@include transition($custom-forms-transition);
transition: $custom-forms-transition;
}
2 changes: 1 addition & 1 deletion src/Form/_bootstrap-forms.scss
Original file line number Diff line number Diff line change
@@ -20,11 +20,11 @@
background-color: $input-bg;
background-clip: padding-box;
border: $input-border-width solid $input-border-color;
transition: $input-transition;

// Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.
@include border-radius($input-border-radius, 0);
@include box-shadow($input-box-shadow);
@include transition($input-transition);

// Unstyle the caret on `<select>`s in IE10+.
&::-ms-expand {
10 changes: 4 additions & 6 deletions src/Form/_variables.scss
Original file line number Diff line number Diff line change
@@ -33,8 +33,8 @@ $input-focus-color: var(--pgn-color-form-input-focus-base) !default;
$input-focus-width: var(--pgn-size-form-input-width-focus) !default;
$input-focus-box-shadow: var(--pgn-elevation-form-input-focus) !default;

$input-placeholder-color: var(--pgn-color-form-input-plaintext) !default;
$input-plaintext-color: var(--pgn-body-color) !default;
$input-placeholder-color: var(--pgn-color-form-input-placeholder) !default;
$input-plaintext-color: var(--pgn-color-form-input-plaintext) !default;

$input-height-border: var(--pgn-size-form-input-height-border) !default;

@@ -153,8 +153,7 @@ $custom-select-indicator-color: var(--pgn-color-form-control-select-indicator-ba
$custom-select-indicator: var(--pgn-other-content-form-control-select-indicator-icon) !default;

// Used so we can have multiple background elements (e.g., arrow and feedback icon)
$custom-select-background: $custom-select-indicator no-repeat right
var(--pgn-form-input-padding-y-base) center / var(--pgn-form-custom-select-bg-size) !default;
$custom-select-background: var(--pgn-other-content-form-control-select-bg) !default;

$custom-select-feedback-icon-padding-right: var(--pgn-spacing-form-control-select-feedback-icon-padding-right) !default;
$custom-select-feedback-icon-position: var(--pgn-spacing-form-control-select-feedback-icon-position) !default;
@@ -228,7 +227,6 @@ $form-feedback-valid-color: var(--pgn-color-form-feedback-valid) !default;
$form-feedback-invalid-color: var(--pgn-color-form-feedback-invalid) !default;

$form-feedback-tooltip-valid-color: var(--pgn-color-form-feedback-tooltip-valid) !default;
$form-feedback-tooltip-invalid-color: var(--pgn-color-form-feedback-tooltip-invalid) !default;
$form-feedback-tooltip-valid-bg: var(--pgn-color-form-feedback-tooltip-bg-valid) !default;
$form-feedback-tooltip-invalid-bg: var(--pgn-color-form-feedback-tooltip-bg-invalid) !default;

@@ -270,7 +268,7 @@ $form-feedback-tooltip-padding-y: var(--pgn-spacing-form-control-select-feedback
$form-feedback-tooltip-padding-x: var(--pgn-spacing-form-control-select-feedback-tooltip-padding-x) !default;
$form-feedback-tooltip-font-size: var(--pgn-typography-form-feedback-tooltip-font-size) !default;
$form-feedback-tooltip-line-height: var(--pgn-typography-form-feedback-tooltip-line-height) !default;
$form-feedback-tooltip-opacity: var(--pgn-color-form-feedback-tooltip-opacity) !default;
$form-feedback-tooltip-opacity: var(--pgn-other-form-feedback-tooltip-opacity) !default;
$form-feedback-tooltip-border-radius: var(--pgn-size-form-feedback-tooltip-border-radius) !default;

$form-control-icon-width: var(--pgn-size-form-control-icon-width) !default;
4 changes: 2 additions & 2 deletions src/IconButton/IconButton.scss
Original file line number Diff line number Diff line change
@@ -48,8 +48,8 @@
display: inline-flex;
justify-content: center;
border: none;
background-color: var(--pgn-icon-button-bg, transparent);
color: var(--pgn-icon-button-color, inherit);
background-color: $btn-icon-bg;
color: $btn-icon-accent-color;

&.btn-icon-sm {
@include btn-icon-size($btn-icon-diameter-sm);
2 changes: 1 addition & 1 deletion src/Modal/_variables.scss
Original file line number Diff line number Diff line change
@@ -17,7 +17,7 @@ $modal-content-inner-border-radius: calc(#{var(--pgn-size-modal-content-border-r
$modal-content-box-shadow-sm-up: var(--pgn-elevation-modal-content-box-shadow-sm-up) !default;

$modal-backdrop-bg: var(--pgn-color-modal-backdrop-bg) !default;
$modal-backdrop-opacity: var(--pgn-elevation-modal-backdrop-opacity) !default;
$modal-backdrop-opacity: var(--pgn-other-modal-opacity) !default;
$modal-header-padding-y: var(--pgn-spacing-modal-header-padding-y) !default;

$modal-close-container-top: var(--pgn-spacing-dropdown-close-container-top) !default;
4 changes: 0 additions & 4 deletions src/Pagination/_variables.scss
Original file line number Diff line number Diff line change
@@ -7,15 +7,11 @@ $pagination-padding-x-sm: var(--pgn-spacing-pagination-padding-x-sm) !default;
$pagination-padding-y-lg: var(--pgn-spacing-pagination-padding-y-lg) !default;
$pagination-padding-x-lg: var(--pgn-spacing-pagination-padding-x-lg) !default;
$pagination-margin-x: var(--pgn-spacing-pagination-margin-x) !default;
$pagination-margin-y: var(--pgn-spacing-pagination-margin-y) !default;
$pagination-line-height: var(--pgn-typography-pagination-line-height) !default;
$pagination-font-size-sm: var(--pgn-typography-pagination-font-size-sm) !default;

$pagination-icon-size: var(--pgn-size-pagination-icon-base) !default;
$pagination-icon-size-sm: var(--pgn-size-pagination-icon-sm) !default;
$pagination-icon-width: var(--pgn-size-pagination-icon-width) !default;
$pagination-icon-height: var(--pgn-size-pagination-icon-height) !default;
$pagination-padding-icon: var(--pgn-spacing-pagination-padding-icon) !default;
$pagination-toggle-border: var(--pgn-size-pagination-toggle-border-base) !default;
$pagination-toggle-border-sm: var(--pgn-size-pagination-toggle-border-sm) !default;
$pagination-secondary-height: var(--pgn-size-pagination-secondary-height-base) !default;
1 change: 0 additions & 1 deletion src/Popover/_variables.scss
Original file line number Diff line number Diff line change
@@ -14,7 +14,6 @@ $popover-icon-height: var(--pgn-size-popover-icon-height) !default;
$popover-icon-width: var(--pgn-size-popover-icon-width) !default;

$popover-header-bg: var(--pgn-color-popover-header-bg) !default;
$popover-header-bg-dark: var(--pgn-color-popover-header-bg-dark) !default;

$popover-header-color: var(--pgn-color-popover-header-text) !default;
$popover-header-padding-y: var(--pgn-spacing-popover-header-padding-y) !default;
4 changes: 2 additions & 2 deletions src/ProductTour/Checkpoint.scss
Original file line number Diff line number Diff line change
@@ -117,7 +117,7 @@
left: calc($checkpoint-arrow-width * -1) !important; // Override PopperJS arrow placement

&::after {
border-bottom: solid $checkpoint-arrow-border-bottom;
border-bottom: solid $checkpoint-arrow-border-transparent $checkpoint-border-color;
border-top: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
border-left: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
border-right: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
@@ -145,7 +145,7 @@
left: calc(-2 * $checkpoint-arrow-width);
border-bottom: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
border-top: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
border-left: solid $checkpoint-arrow-border-transparent;
border-left: solid $checkpoint-arrow-border-transparent $checkpoint-arrow-border-color-transparent;
border-right: solid $checkpoint-arrow-border-top $checkpoint-arrow-border-color-top;
filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, .1));
}
4 changes: 1 addition & 3 deletions src/SearchField/_variables.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
$search-border-radius: var(--pgn-size-search-field-border-radius) !default;
$search-line-height: var(--pgn-typography-search-field-line-height) !default;
$search-border-color: var(--pgn-color-search-field-border-base) !default;
$search-border-color-interaction: var(--pgn-color-search-field-border-interaction) !default;
$search-border-width: var(--pgn-size-search-field-border-width-base) !default;
$search-border-width-interaction: var(--pgn-size-search-field-border-width-interaction) !default;
$search-disabled-opacity: var(--pgn-color-search-field-disabled-opacity) !default;
$search-disabled-opacity: var(--pgn-other-search-field-disabled-opacity) !default;
$search-button-margin: var(--pgn-spacing-search-field-margin-button) !default;
$input-height-search: var(--pgn-size-search-field-search-input-height) !default;
$search-border-focus-color: var(--pgn-color-search-field-border-focus) !default;
Loading

0 comments on commit 73a7f4f

Please sign in to comment.