From e7bd5bd18e4b5f1419fa05842c4732aec1e78080 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Fri, 9 Jun 2023 11:02:26 +0300 Subject: [PATCH] feat: added missing SCSS variables in design tokens --- src/Alert/Alert.scss | 6 ++---- src/Annotation/Annotation.scss | 3 +-- src/Card/card-bootstrap.scss | 2 -- styles/css/core/variables.css | 12 ++++++++++-- styles/css/themes/light/variables.css | 4 +++- styles/scss/core/_variables.scss | 23 +++++++++++------------ tokens/src/core/components/Spinner.json | 3 +++ tokens/src/core/global/spacing.json | 11 +++++++++++ tokens/src/core/global/transition.json | 9 ++++++++- tokens/src/core/global/typography.json | 14 ++++++++++++-- tokens/src/themes/light/alias/color.json | 8 ++++++++ 11 files changed, 69 insertions(+), 26 deletions(-) diff --git a/src/Alert/Alert.scss b/src/Alert/Alert.scss index 7ead6863812..372b7fb51c2 100644 --- a/src/Alert/Alert.scss +++ b/src/Alert/Alert.scss @@ -90,10 +90,8 @@ } } -.pgn__alert-message-wrapper-stacked { - .pgn__alert-actions { - margin-top: var(--pgn-spacing-alert-actions-gap); - } +.pgn__alert-message-wrapper-stacked .pgn__alert-actions { + margin-top: var(--pgn-spacing-alert-actions-gap); } // Alternate styles diff --git a/src/Annotation/Annotation.scss b/src/Annotation/Annotation.scss index cef45ee6e52..a06f5629a1a 100644 --- a/src/Annotation/Annotation.scss +++ b/src/Annotation/Annotation.scss @@ -17,8 +17,7 @@ .pgn__annotation-success-top { @include annotation-variant( var(--pgn-color-annotation-bg-success), - var(--pgn-color-annotation-text-success), "top" - ); + var(--pgn-color-annotation-text-success), "top"); } .pgn__annotation-success-bottom { diff --git a/src/Card/card-bootstrap.scss b/src/Card/card-bootstrap.scss index 9ca0e00ea84..bb192b97e71 100644 --- a/src/Card/card-bootstrap.scss +++ b/src/Card/card-bootstrap.scss @@ -42,8 +42,6 @@ } } -// 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; diff --git a/styles/css/core/variables.css b/styles/css/core/variables.css index 7fb11fa2c6c..f4988ff55e6 100644 --- a/styles/css/core/variables.css +++ b/styles/css/core/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 08 Jun 2023 07:10:04 GMT + * Generated on Fri, 09 Jun 2023 07:34:34 GMT */ :root { @@ -32,7 +32,8 @@ --pgn-elevation-modal-zindex: 1050; --pgn-elevation-modal-backdrop-zindex: 1040; --pgn-elevation-dropdown-zindex: 1000; - --pgn-transition-collapse: height .35s ease; + --pgn-transition-collapse-width: width .35s ease; + --pgn-transition-collapse-height: height .35s ease; --pgn-transition-fade: opacity .15s linear; --pgn-transition-base: all .2s ease-in-out; --pgn-transition-progress-bar-bar-transition: width .6s ease; @@ -44,9 +45,11 @@ --pgn-transition-carousel-duration: .6s; --pgn-transition-btn: none; --pgn-transition-badge: none; + --pgn-typography-line-height-micro: .938rem; --pgn-typography-line-height-sm: 1.5; --pgn-typography-line-height-lg: 1.5; --pgn-typography-line-height-base: 1.5556; + --pgn-typography-font-weight-table-th: normal; --pgn-typography-font-weight-lead: inherit; --pgn-typography-font-weight-bolder: bolder; --pgn-typography-font-weight-bold: 700; @@ -54,6 +57,7 @@ --pgn-typography-font-weight-normal: 400; --pgn-typography-font-weight-light: 300; --pgn-typography-font-weight-lighter: lighter; + --pgn-typography-font-size-micro: .688rem; --pgn-typography-font-size-mobile-h1: 2.25rem; --pgn-typography-font-size-h6: .75rem; --pgn-typography-font-size-h5: .875rem; @@ -111,6 +115,9 @@ --pgn-typography-badge-font-size: 75%; --pgn-typography-alert-line-height: 1.5rem; --pgn-typography-alert-font-size: .875rem; + --pgn-spacing-table-cell-padding-sm: .3rem; + --pgn-spacing-table-cell-padding-base: 75rem; + --pgn-spacing-label-margin-bottom: .5rem; --pgn-spacing-spacer-base: 1rem; --pgn-spacing-spacer-0: 0; --pgn-spacing-tooltip-margin: 0; @@ -124,6 +131,7 @@ --pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x: .625rem; --pgn-spacing-tab-more-link-dropdown-toggle-padding-x: .7rem; --pgn-spacing-sticky-offset: 0; + --pgn-spacing-vertical-align: .125em; --pgn-spacing-selectable-box-box-space: .75rem; --pgn-spacing-selectable-box-border-radius: .25rem; --pgn-spacing-selectable-box-padding: 1rem; diff --git a/styles/css/themes/light/variables.css b/styles/css/themes/light/variables.css index 136cc9b8e6e..a001ea36655 100644 --- a/styles/css/themes/light/variables.css +++ b/styles/css/themes/light/variables.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Mon, 05 Jun 2023 02:30:54 GMT + * Generated on Fri, 09 Jun 2023 07:34:35 GMT */ :root { @@ -1109,6 +1109,7 @@ --pgn-color-theme-bg-light: var(--pgn-color-light-100); --pgn-color-theme-bg-brand: var(--pgn-color-brand-100); --pgn-color-theme-bg-primary: var(--pgn-color-primary-100); + --pgn-color-table-border: var(--pgn-color-border); --pgn-color-input-focus: var(--pgn-color-primary-500); --pgn-color-disabled: var(--pgn-color-gray-500); --pgn-color-bg-active: var(--pgn-color-primary-500); @@ -1445,6 +1446,7 @@ --pgn-color-theme-bg-info: var(--pgn-color-info-100); --pgn-color-theme-bg-success: var(--pgn-color-success-100); --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); + --pgn-color-table-caption: var(--pgn-color-text-muted); --pgn-color-input-btn-focus: var(--pgn-color-input-focus); --pgn-other-content-form-control-select-indicator-icon: url('data:image/svg+xml,'); --pgn-other-content-form-control-switch-indicator-icon-on: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23FFFFFFFF'/%3e%3c/svg%3e"); diff --git a/styles/scss/core/_variables.scss b/styles/scss/core/_variables.scss index 440b10d6d44..d8a958e57fd 100644 --- a/styles/scss/core/_variables.scss +++ b/styles/scss/core/_variables.scss @@ -295,7 +295,6 @@ $element-color-levels: map-merge( ); // Set a specific jump point for requesting color jumps -// TODO: can't use css variables due to conflict with SCSS function. $theme-color-interval: var(--pgn-theme-interval) !default; // The yiq lightness value that determines when the lightness @@ -667,8 +666,8 @@ $caret-spacing: var(--pgn-spacing-caret-base) !default; $transition-base: var(--pgn-transition-base) !default; $transition-fade: var(--pgn-transition-fade) !default; -$transition-collapse: var(--pgn-transition-collapse) !default; -$transition-collapse-width: width .35s ease !default; +$transition-collapse: var(--pgn-transition-collapse-height) !default; +$transition-collapse-width: var(--pgn-transition-collapse-width) !default; $embed-responsive-aspect-ratios: () !default; // stylelint-disable-next-line scss/dollar-variable-default @@ -747,8 +746,8 @@ $lead-font-weight: var(--pgn-typography-font-weight-lead) !default; $small-font-size: var(--pgn-typography-font-size-small-base) !default; $x-small-font-size: var(--pgn-typography-font-size-small-x) !default; -$micro-font-size: .688rem; -$micro-line-height: .938rem; +$micro-font-size: var(--pgn-typography-font-size-micro); +$micro-line-height: var(--pgn-typography-line-height-micro); $text-muted: var(--pgn-color-text-muted) !default; @@ -769,13 +768,13 @@ $mark-bg: var(--pgn-color-mark-bg) !default; $hr-margin-y: var(--pgn-size-hr-border-margin-y) !default; -$label-margin-bottom: .5rem !default; +$label-margin-bottom: var(--pgn-spacing-label-margin-bottom) !default; -$table-cell-padding: 75rem !default; -$table-cell-padding-sm: .3rem !default; -$table-caption-color: $text-muted !default; -$table-border-color: $border-color !default; -$table-th-font-weight: null !default; +$table-cell-padding: var(--pgn-spacing-table-cell-padding-base) !default; +$table-cell-padding-sm: var(--pgn-spacing-table-cell-padding-sm) !default; +$table-caption-color: var(--pgn-color-table-caption) !default; +$table-border-color: var(--pgn-color-table-border) !default; +$table-th-font-weight: var(--pgn-typography-font-weight-table-th) !default; // Z-index master list // @@ -822,7 +821,7 @@ $input-btn-border-width: var(--pgn-size-input-btn-border-width) !default; // $spinner-width: 2rem !default; // $spinner-height: $spinner-width !default; -$spinner-vertical-align: -.125em !default; +$spinner-vertical-align: calc(var(--pgn-spacing-vertical-align) * -1) !default; // $spinner-border-width: .25em !default; diff --git a/tokens/src/core/components/Spinner.json b/tokens/src/core/components/Spinner.json index a67d8fabe98..2c642554bff 100644 --- a/tokens/src/core/components/Spinner.json +++ b/tokens/src/core/components/Spinner.json @@ -12,5 +12,8 @@ "border-width": { "value": ".2em", "type": "dimension", "source": "$spinner-border-width-sm" } } } + }, + "spacing": { + "vertical-align": { "value": ".125em", "type": "dimension", "source": "$spinner-vertical-align" } } } diff --git a/tokens/src/core/global/spacing.json b/tokens/src/core/global/spacing.json index 3e4496584a4..193b3e25367 100644 --- a/tokens/src/core/global/spacing.json +++ b/tokens/src/core/global/spacing.json @@ -14,6 +14,17 @@ "5": { "value": "calc({spacing.spacer.base} * 3rem)", "type": "dimension", "description": "Space value of level 5" }, "5,5": { "value": "calc({spacing.spacer.base} * 4rem)", "type": "dimension", "description": "Space value of level 5.5"}, "6": { "value": "calc({spacing.spacer.base} * 5rem)", "type": "dimension", "description": "Space value of level 6" } + }, + "label": { + "margin-bottom": { "value": ".5rem", "type": "dimension", "description": "Margin bottom for label." } + }, + "table": { + "cell": { + "padding": { + "base": { "value": "75rem", "type": "dimension", "description": "Padding for tables." }, + "sm": { "value": ".3rem", "type": "dimension", "description": "Padding sm for tables." } + } + } } } } diff --git a/tokens/src/core/global/transition.json b/tokens/src/core/global/transition.json index 4bb8d41b066..7cd6c13d3b2 100644 --- a/tokens/src/core/global/transition.json +++ b/tokens/src/core/global/transition.json @@ -2,6 +2,13 @@ "transition": { "base": { "value": "all .2s ease-in-out", "type": "transition", "source": "$transition-base", "description": "Generic transition for any property change" }, "fade": { "value": "opacity .15s linear", "type": "transition", "source": "$transition-fade", "description": "Opacity transition that takes 150ms" }, - "collapse": { "value": "height .35s ease", "type": "transition", "source": "$transition-collapse", "description": "Collapse transition that takes 350ms" } + "collapse": { + "height": { + "value": "height .35s ease", "type": "transition", "source": "$transition-collapse", "description": "Collapse transition for height that takes 350ms" + }, + "width": { + "value": "width .35s ease", "type": "transition", "source": "$transition-collapse-width", "description": "Collapse transition for width that takes 350ms" + } + } } } diff --git a/tokens/src/core/global/typography.json b/tokens/src/core/global/typography.json index e7ffbd255a6..935fa96e9b1 100644 --- a/tokens/src/core/global/typography.json +++ b/tokens/src/core/global/typography.json @@ -52,6 +52,12 @@ "type": "dimension", "source": "$lead-font-size", "description": "Lead text font size." + }, + "micro": { + "value": ".688rem", + "type": "dimension", + "source": "$micro-font-size", + "description": "Micro utils text font size." } }, "weight": { @@ -69,13 +75,17 @@ "source": "$font-weight-base", "description": "Basic font weight." }, - "lead": { "value": "inherit", "type": "fontWeight", "source": "$lead-font-weight", "description": "Lead text font weight." } + "lead": { "value": "inherit", "type": "fontWeight", "source": "$lead-font-weight", "description": "Lead text font weight." }, + "table-th": { "value": "normal", "type": "fontWeight", "source": "$table-th-font-weight", "description": "Table th font weight." } } }, "line-height": { "base": { "value": "1.5556", "type": "dimension", "source": "$line-height-base", "description": "Basic line height." }, "lg": { "value": "1.5", "type": "dimension", "source": "$line-height-lg", "description": "Large line height." }, - "sm": { "value": "1.5", "type": "dimension", "source": "$line-height-sm", "description": "Small line height." } + "sm": { "value": "1.5", "type": "dimension", "source": "$line-height-sm", "description": "Small line height." }, + "micro": { + "value": ".938rem", "type": "dimension", "source": "$micro-line-height", "description": "Micro utils line height." + } } } } diff --git a/tokens/src/themes/light/alias/color.json b/tokens/src/themes/light/alias/color.json index 142765e36a6..ec29f722808 100644 --- a/tokens/src/themes/light/alias/color.json +++ b/tokens/src/themes/light/alias/color.json @@ -27,6 +27,14 @@ "input": { "focus": { "value": "{color.primary.500}", "type": "color", "description": "Focused input value color." } }, + "table": { + "caption": { + "value": "{color.text-muted}", "type": "color", "description": "Table caption color." + }, + "border": { + "value": "{color.border}", "type": "color", "description": "Table border color." + } + }, "border": { "value": "{color.gray.200}", "type": "color", "source": "$border-color", "description": "Border color." }, "theme": { "bg": {