From f24460f1afc8aa9986906376ff2041d2f16e414d Mon Sep 17 00:00:00 2001 From: Peter Kulko <93188219+PKulkoRaccoonGang@users.noreply.github.com> Date: Fri, 24 Feb 2023 16:57:25 +0200 Subject: [PATCH] [BD-46] feat: refactoring design tokens folders structure (#2069) * feat: refactoring design tokens folders structure * fix: add missing "type" attribute to tokens and consider token's theme in color-yiq function * docs: update docstring for colorYiq function --------- Co-authored-by: Viktor Rusakov --- scss/core/css/utility-classes.css | 2 +- scss/core/css/variables.css | 839 +++++++++--------- tokens/sass-helpers.js | 18 +- tokens/src/{ => core}/alias/size.json | 0 .../src/{ => core}/components/ActionRow.json | 0 tokens/src/core/components/Alert.json | 30 + tokens/src/core/components/Annotation.json | 25 + tokens/src/{ => core}/components/Avatar.json | 5 - .../{ => core}/components/AvatarButton.json | 0 tokens/src/core/components/Badge.json | 33 + .../src/{ => core}/components/Breadcrumb.json | 13 - tokens/src/core/components/Bubble.json | 10 + .../{ => core}/components/Button/core.json | 22 - tokens/src/{ => core}/components/Card.json | 32 - tokens/src/core/components/Carousel.json | 37 + tokens/src/{ => core}/components/Chip.json | 17 - .../{ => core}/components/CloseButton.json | 8 - tokens/src/{ => core}/components/Code.json | 21 - .../{ => core}/components/Collapsible.json | 0 .../src/{ => core}/components/Container.json | 0 .../src/{ => core}/components/DataTable.json | 19 - .../src/{ => core}/components/Dropdown.json | 27 - .../src/{ => core}/components/Dropzone.json | 17 - tokens/src/core/components/Form/other.json | 10 + .../src/{ => core}/components/Form/size.json | 0 .../{ => core}/components/Form/spacing.json | 0 .../components/Form/transition.json | 0 .../components/Form/typography.json | 0 tokens/src/{ => core}/components/Icon.json | 0 tokens/src/core/components/IconButton.json | 15 + tokens/src/{ => core}/components/Image.json | 16 - tokens/src/{ => core}/components/Modal.json | 28 - tokens/src/core/components/Nav.json | 35 + tokens/src/core/components/Navbar.json | 70 ++ .../src/{ => core}/components/Pagination.json | 42 - tokens/src/core/components/Popover.json | 48 + .../{ => core}/components/ProductTour.json | 30 - .../{ => core}/components/ProgressBar.json | 13 - tokens/src/core/components/SearchField.json | 23 + .../{ => core}/components/SelectableBox.json | 0 tokens/src/core/components/Sheet.json | 10 + tokens/src/{ => core}/components/Spinner.json | 0 tokens/src/{ => core}/components/Stack.json | 0 tokens/src/core/components/Sticky.json | 7 + tokens/src/{ => core}/components/Tabs.json | 0 tokens/src/core/components/Toast.json | 30 + tokens/src/{ => core}/components/Tooltip.json | 24 - .../{ => core}/components/general/caret.json | 0 .../components/general/headings.json | 5 - .../src/{ => core}/components/general/hr.json | 10 - .../{ => core}/components/general/input.json | 16 - tokens/src/core/components/general/link.json | 30 + tokens/src/core/components/general/list.json | 26 + .../{ => core}/components/general/text.json | 4 - tokens/src/{ => core}/global/breakpoints.json | 0 tokens/src/{ => core}/global/display.json | 0 tokens/src/core/global/elevation.json | 19 + tokens/src/{ => core}/global/other.json | 2 - tokens/src/{ => core}/global/spacing.json | 0 tokens/src/{ => core}/global/transition.json | 0 tokens/src/{ => core}/global/typography.json | 0 tokens/src/{ => core}/utilities/color.json | 0 .../src/{ => themes/light}/alias/color.json | 0 .../{ => themes/light}/components/Alert.json | 30 - .../light}/components/Annotation.json | 25 - .../src/themes/light/components/Avatar.json | 7 + .../{ => themes/light}/components/Badge.json | 35 - .../themes/light/components/Breadcrumb.json | 15 + .../{ => themes/light}/components/Bubble.json | 24 +- .../light}/components/Button/brand.json | 0 .../themes/light/components/Button/core.json | 24 + .../light}/components/Button/danger.json | 0 .../light}/components/Button/dark.json | 0 .../light}/components/Button/info.json | 0 .../light}/components/Button/light.json | 0 .../light}/components/Button/primary.json | 0 .../light}/components/Button/secondary.json | 0 .../light}/components/Button/success.json | 0 .../light}/components/Button/tertiary.json | 0 .../light}/components/Button/warning.json | 0 tokens/src/themes/light/components/Card.json | 33 + .../light}/components/Carousel.json | 35 - tokens/src/themes/light/components/Chip.json | 19 + .../themes/light/components/CloseButton.json | 10 + tokens/src/themes/light/components/Code.json | 23 + .../themes/light/components/DataTable.json | 26 + .../src/themes/light/components/Dropdown.json | 36 + .../src/themes/light/components/Dropzone.json | 19 + .../light}/components/Form/color.json | 0 .../light}/components/Form/elevation.json | 0 .../light}/components/Form/other.json | 4 - .../light}/components/IconButton.json | 13 - tokens/src/themes/light/components/Image.json | 18 + .../{ => themes/light}/components/Menu.json | 0 tokens/src/themes/light/components/Modal.json | 37 + .../{ => themes/light}/components/Nav.json | 37 - .../{ => themes/light}/components/Navbar.json | 121 +-- .../themes/light/components/Pagination.json | 40 + .../light}/components/Popover.json | 50 -- .../themes/light/components/ProductTour.json | 35 + .../themes/light/components/ProgressBar.json | 20 + .../light}/components/Scrollable.json | 0 .../light}/components/SearchField.json | 21 - .../{ => themes/light}/components/Sheet.json | 8 - .../{ => themes/light}/components/Sticky.json | 5 - .../{ => themes/light}/components/Toast.json | 28 - .../src/themes/light/components/Tooltip.json | 30 + .../light}/components/general/body.json | 0 .../light/components/general/headings.json | 7 + .../themes/light/components/general/hr.json | 15 + .../light/components/general/input.json | 18 + .../light}/components/general/link.json | 28 - .../light}/components/general/list.json | 26 - .../themes/light/components/general/text.json | 6 + .../src/{ => themes/light}/global/color.json | 0 .../{ => themes/light}/global/elevation.json | 15 - tokens/src/themes/light/global/other.json | 4 + tokens/style-dictionary.js | 9 +- 118 files changed, 1383 insertions(+), 1261 deletions(-) rename tokens/src/{ => core}/alias/size.json (100%) rename tokens/src/{ => core}/components/ActionRow.json (100%) create mode 100644 tokens/src/core/components/Alert.json create mode 100644 tokens/src/core/components/Annotation.json rename tokens/src/{ => core}/components/Avatar.json (85%) rename tokens/src/{ => core}/components/AvatarButton.json (100%) create mode 100644 tokens/src/core/components/Badge.json rename tokens/src/{ => core}/components/Breadcrumb.json (64%) create mode 100644 tokens/src/core/components/Bubble.json rename tokens/src/{ => core}/components/Button/core.json (86%) rename tokens/src/{ => core}/components/Card.json (76%) create mode 100644 tokens/src/core/components/Carousel.json rename tokens/src/{ => core}/components/Chip.json (55%) rename tokens/src/{ => core}/components/CloseButton.json (56%) rename tokens/src/{ => core}/components/Code.json (59%) rename tokens/src/{ => core}/components/Collapsible.json (100%) rename tokens/src/{ => core}/components/Container.json (100%) rename tokens/src/{ => core}/components/DataTable.json (63%) rename tokens/src/{ => core}/components/Dropdown.json (58%) rename tokens/src/{ => core}/components/Dropzone.json (50%) create mode 100644 tokens/src/core/components/Form/other.json rename tokens/src/{ => core}/components/Form/size.json (100%) rename tokens/src/{ => core}/components/Form/spacing.json (100%) rename tokens/src/{ => core}/components/Form/transition.json (100%) rename tokens/src/{ => core}/components/Form/typography.json (100%) rename tokens/src/{ => core}/components/Icon.json (100%) create mode 100644 tokens/src/core/components/IconButton.json rename tokens/src/{ => core}/components/Image.json (55%) rename tokens/src/{ => core}/components/Modal.json (67%) create mode 100644 tokens/src/core/components/Nav.json create mode 100644 tokens/src/core/components/Navbar.json rename tokens/src/{ => core}/components/Pagination.json (58%) create mode 100644 tokens/src/core/components/Popover.json rename tokens/src/{ => core}/components/ProductTour.json (51%) rename tokens/src/{ => core}/components/ProgressBar.json (71%) create mode 100644 tokens/src/core/components/SearchField.json rename tokens/src/{ => core}/components/SelectableBox.json (100%) create mode 100644 tokens/src/core/components/Sheet.json rename tokens/src/{ => core}/components/Spinner.json (100%) rename tokens/src/{ => core}/components/Stack.json (100%) create mode 100644 tokens/src/core/components/Sticky.json rename tokens/src/{ => core}/components/Tabs.json (100%) create mode 100644 tokens/src/core/components/Toast.json rename tokens/src/{ => core}/components/Tooltip.json (52%) rename tokens/src/{ => core}/components/general/caret.json (100%) rename tokens/src/{ => core}/components/general/headings.json (80%) rename tokens/src/{ => core}/components/general/hr.json (55%) rename tokens/src/{ => core}/components/general/input.json (82%) create mode 100644 tokens/src/core/components/general/link.json create mode 100644 tokens/src/core/components/general/list.json rename tokens/src/{ => core}/components/general/text.json (77%) rename tokens/src/{ => core}/global/breakpoints.json (100%) rename tokens/src/{ => core}/global/display.json (100%) create mode 100644 tokens/src/core/global/elevation.json rename tokens/src/{ => core}/global/other.json (68%) rename tokens/src/{ => core}/global/spacing.json (100%) rename tokens/src/{ => core}/global/transition.json (100%) rename tokens/src/{ => core}/global/typography.json (100%) rename tokens/src/{ => core}/utilities/color.json (100%) rename tokens/src/{ => themes/light}/alias/color.json (100%) rename tokens/src/{ => themes/light}/components/Alert.json (62%) rename tokens/src/{ => themes/light}/components/Annotation.json (58%) create mode 100644 tokens/src/themes/light/components/Avatar.json rename tokens/src/{ => themes/light}/components/Badge.json (86%) create mode 100644 tokens/src/themes/light/components/Breadcrumb.json rename tokens/src/{ => themes/light}/components/Bubble.json (51%) rename tokens/src/{ => themes/light}/components/Button/brand.json (100%) create mode 100644 tokens/src/themes/light/components/Button/core.json rename tokens/src/{ => themes/light}/components/Button/danger.json (100%) rename tokens/src/{ => themes/light}/components/Button/dark.json (100%) rename tokens/src/{ => themes/light}/components/Button/info.json (100%) rename tokens/src/{ => themes/light}/components/Button/light.json (100%) rename tokens/src/{ => themes/light}/components/Button/primary.json (100%) rename tokens/src/{ => themes/light}/components/Button/secondary.json (100%) rename tokens/src/{ => themes/light}/components/Button/success.json (100%) rename tokens/src/{ => themes/light}/components/Button/tertiary.json (100%) rename tokens/src/{ => themes/light}/components/Button/warning.json (100%) create mode 100644 tokens/src/themes/light/components/Card.json rename tokens/src/{ => themes/light}/components/Carousel.json (53%) create mode 100644 tokens/src/themes/light/components/Chip.json create mode 100644 tokens/src/themes/light/components/CloseButton.json create mode 100644 tokens/src/themes/light/components/Code.json create mode 100644 tokens/src/themes/light/components/DataTable.json create mode 100644 tokens/src/themes/light/components/Dropdown.json create mode 100644 tokens/src/themes/light/components/Dropzone.json rename tokens/src/{ => themes/light}/components/Form/color.json (100%) rename tokens/src/{ => themes/light}/components/Form/elevation.json (100%) rename tokens/src/{ => themes/light}/components/Form/other.json (95%) rename tokens/src/{ => themes/light}/components/IconButton.json (72%) create mode 100644 tokens/src/themes/light/components/Image.json rename tokens/src/{ => themes/light}/components/Menu.json (100%) create mode 100644 tokens/src/themes/light/components/Modal.json rename tokens/src/{ => themes/light}/components/Nav.json (66%) rename tokens/src/{ => themes/light}/components/Navbar.json (51%) create mode 100644 tokens/src/themes/light/components/Pagination.json rename tokens/src/{ => themes/light}/components/Popover.json (54%) create mode 100644 tokens/src/themes/light/components/ProductTour.json create mode 100644 tokens/src/themes/light/components/ProgressBar.json rename tokens/src/{ => themes/light}/components/Scrollable.json (100%) rename tokens/src/{ => themes/light}/components/SearchField.json (51%) rename tokens/src/{ => themes/light}/components/Sheet.json (67%) rename tokens/src/{ => themes/light}/components/Sticky.json (78%) rename tokens/src/{ => themes/light}/components/Toast.json (51%) create mode 100644 tokens/src/themes/light/components/Tooltip.json rename tokens/src/{ => themes/light}/components/general/body.json (100%) create mode 100644 tokens/src/themes/light/components/general/headings.json create mode 100644 tokens/src/themes/light/components/general/hr.json create mode 100644 tokens/src/themes/light/components/general/input.json rename tokens/src/{ => themes/light}/components/general/link.json (71%) rename tokens/src/{ => themes/light}/components/general/list.json (65%) create mode 100644 tokens/src/themes/light/components/general/text.json rename tokens/src/{ => themes/light}/global/color.json (100%) rename tokens/src/{ => themes/light}/global/elevation.json (89%) create mode 100644 tokens/src/themes/light/global/other.json diff --git a/scss/core/css/utility-classes.css b/scss/core/css/utility-classes.css index 9caedab3d5..ae226c484b 100644 --- a/scss/core/css/utility-classes.css +++ b/scss/core/css/utility-classes.css @@ -1,7 +1,7 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 16 Feb 2023 10:37:12 GMT + * Generated on Fri, 24 Feb 2023 12:30:21 GMT */ .bg-dark { diff --git a/scss/core/css/variables.css b/scss/core/css/variables.css index 67c6fdf9c0..5941b18595 100644 --- a/scss/core/css/variables.css +++ b/scss/core/css/variables.css @@ -1,45 +1,191 @@ /** * IMPORTANT: This file is the result of assembling design tokens * Do not edit directly - * Generated on Thu, 16 Feb 2023 10:37:12 GMT + * Generated on Fri, 24 Feb 2023 12:30:21 GMT */ :root { + --pgn-color-dark-base: #273F2FFF; + --pgn-color-light-base: #E1DDDBFF; + --pgn-color-brand-base: #9D0054FF; + --pgn-color-primary-base: #0A3055FF; + --pgn-color-gray-base: #707070FF; + --pgn-color-gray-900: #212529FF; + --pgn-color-gray-800: #333333FF; + --pgn-color-gray-700: #454545FF; + --pgn-color-gray-600: #5C5C5CFF; + --pgn-color-gray-400: #8F8F8FFF; + --pgn-color-gray-300: #ADADADFF; + --pgn-color-gray-200: #CCCCCCFF; + --pgn-color-gray-100: #EBEBEBFF; + --pgn-color-accent-b: #FFEE88FF; + --pgn-color-accent-a: #00BBF9FF; + --pgn-color-teal: #006DAAFF; + --pgn-color-yellow: #FFD900FF; + --pgn-color-green: #178253FF; + --pgn-color-red: #C32D3AFF; + --pgn-color-blue: #23419FFF; + --pgn-color-black: #000000FF; + --pgn-color-white: #FFFFFFFF; + --pgn-color-toast-base: inherit; + --pgn-color-progress-bar-bg: #00000000; + --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000; + --pgn-color-popover-border: #00000033; + --pgn-color-menu-border-hover: #00000000; + --pgn-color-menu-border-active: #00000000; + --pgn-color-menu-border-base: #00000000; + --pgn-color-icon-button-bg: #00000000; + --pgn-color-mark-bg: #FFF243FF; + --pgn-color-list-group-base: inherit; + --pgn-color-form-control-select-bg-size: #000000FF; + --pgn-color-form-control-label-base: inherit; + --pgn-color-code-base: #E83E8CFF; + --pgn-color-carousel-control-opacity-hover: #000000FF; + --pgn-color-carousel-control-opacity-base: #000000FF; + --pgn-color-card-base: inherit; + --pgn-color-btn-disabled-border-inverse-warning: #00000000; + --pgn-color-btn-disabled-border-inverse-outline-success: inherit; + --pgn-color-btn-disabled-border-inverse-success: #00000000; + --pgn-color-btn-disabled-border-secondary: inherit; + --pgn-color-btn-disabled-border-inverse-primary: #00000000; + --pgn-color-btn-disabled-border-inverse-light: #00000000; + --pgn-color-btn-disabled-border-inverse-info: #00000000; + --pgn-color-btn-disabled-border-inverse-dark: #00000000; + --pgn-color-btn-disabled-border-inverse-danger: #00000000; + --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit; + --pgn-color-btn-disabled-bg-inverse-warning: inherit; + --pgn-color-btn-disabled-bg-outline-warning: inherit; + --pgn-color-btn-disabled-bg-inverse-tertiary: inherit; + --pgn-color-btn-disabled-bg-tertiary: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-success: inherit; + --pgn-color-btn-disabled-bg-inverse-success: inherit; + --pgn-color-btn-disabled-bg-outline-success: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit; + --pgn-color-btn-disabled-bg-inverse-secondary: inherit; + --pgn-color-btn-disabled-bg-outline-secondary: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit; + --pgn-color-btn-disabled-bg-outline-primary: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-light: inherit; + --pgn-color-btn-disabled-bg-inverse-light: inherit; + --pgn-color-btn-disabled-bg-outline-light: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-info: inherit; + --pgn-color-btn-disabled-bg-inverse-info: inherit; + --pgn-color-btn-disabled-bg-outline-info: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit; + --pgn-color-btn-disabled-bg-inverse-dark: inherit; + --pgn-color-btn-disabled-bg-outline-dark: inherit; + --pgn-color-btn-disabled-bg-inverse-outline-danger: inherit; + --pgn-color-btn-disabled-bg-inverse-danger: #00000000; + --pgn-color-btn-disabled-bg-outline-danger: inherit; + --pgn-color-btn-disabled-bg-outline-brand: inherit; + --pgn-color-btn-disabled-text-inverse-secondary: inherit; + --pgn-color-btn-disabled-text-outline-secondary: inherit; + --pgn-color-btn-disabled-text-outline-dark: inherit; + --pgn-color-btn-focus-outline-inverse-outline-warning: inherit; + --pgn-color-btn-focus-bg-inverse-outline-warning: inherit; + --pgn-color-btn-focus-bg-outline-warning: inherit; + --pgn-color-btn-focus-bg-inverse-tertiary: inherit; + --pgn-color-btn-focus-bg-tertiary: inherit; + --pgn-color-btn-focus-bg-inverse-outline-success: inherit; + --pgn-color-btn-focus-bg-outline-success: inherit; + --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit; + --pgn-color-btn-focus-bg-outline-secondary: #00000000; + --pgn-color-btn-focus-bg-inverse-outline-primary: inherit; + --pgn-color-btn-focus-bg-outline-primary: inherit; + --pgn-color-btn-focus-bg-inverse-outline-light: inherit; + --pgn-color-btn-focus-bg-outline-light: #00000000; + --pgn-color-btn-focus-bg-inverse-outline-info: inherit; + --pgn-color-btn-focus-bg-outline-info: inherit; + --pgn-color-btn-focus-bg-inverse-outline-dark: inherit; + --pgn-color-btn-focus-bg-outline-dark: inherit; + --pgn-color-btn-focus-bg-inverse-outline-danger: inherit; + --pgn-color-btn-focus-bg-outline-danger: inherit; + --pgn-color-btn-focus-bg-inverse-outline-brand: inherit; + --pgn-color-btn-focus-bg-outline-brand: inherit; + --pgn-color-btn-focus-border-inverse-tertiary: #00000000; + --pgn-color-btn-focus-text-inverse-secondary: inherit; + --pgn-color-btn-focus-text-outline-dark: inherit; + --pgn-color-btn-active-border-inverse-outline-warning: #00000000; + --pgn-color-btn-active-border-inverse-warning: inherit; + --pgn-color-btn-active-border-inverse-tertiary: #00000000; + --pgn-color-btn-active-border-tertiary: #00000000; + --pgn-color-btn-active-border-inverse-outline-success: #00000000; + --pgn-color-btn-active-border-inverse-success: inherit; + --pgn-color-btn-active-border-inverse-secondary: #00000000; + --pgn-color-btn-active-border-inverse-outline-secondary: #00000000; + --pgn-color-btn-active-border-inverse-primary: #00000000; + --pgn-color-btn-active-border-inverse-outline-primary: #00000000; + --pgn-color-btn-active-border-inverse-outline-light: #00000000; + --pgn-color-btn-active-border-inverse-light: inherit; + --pgn-color-btn-active-border-inverse-outline-info: #00000000; + --pgn-color-btn-active-border-inverse-info: #00000000; + --pgn-color-btn-active-border-inverse-outline-dark: #00000000; + --pgn-color-btn-active-border-inverse-dark: #00000000; + --pgn-color-btn-active-border-inverse-outline-danger: #00000000; + --pgn-color-btn-active-border-inverse-danger: #00000000; + --pgn-color-btn-active-border-inverse-outline-brand: #00000000; + --pgn-color-btn-active-border-inverse-brand: #00000000; + --pgn-color-btn-hover-border-inverse-outline-warning: #00000000; + --pgn-color-btn-hover-border-inverse-warning: #00000000; + --pgn-color-btn-hover-border-inverse-tertiary: #00000000; + --pgn-color-btn-hover-border-tertiary: #00000000; + --pgn-color-btn-hover-border-inverse-outline-success: #00000000; + --pgn-color-btn-hover-border-inverse-success: #00000000; + --pgn-color-btn-hover-border-inverse-secondary: #00000000; + --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000; + --pgn-color-btn-hover-border-inverse-primary: #00000000; + --pgn-color-btn-hover-border-inverse-outline-primary: #00000000; + --pgn-color-btn-hover-border-inverse-outline-light: #00000000; + --pgn-color-btn-hover-border-inverse-light: #00000000; + --pgn-color-btn-hover-border-inverse-outline-info: #00000000; + --pgn-color-btn-hover-border-inverse-info: #00000000; + --pgn-color-btn-hover-border-inverse-outline-dark: #00000000; + --pgn-color-btn-hover-border-inverse-dark: #00000000; + --pgn-color-btn-hover-border-inverse-outline-danger: #00000000; + --pgn-color-btn-hover-border-inverse-danger: #00000000; + --pgn-color-btn-hover-border-inverse-brand: #00000000; + --pgn-color-btn-hover-border-inverse-outline-brand: #00000000; + --pgn-color-btn-border-inverse-warning: #00000000; + --pgn-color-btn-border-inverse-tertiary: #00000000; + --pgn-color-btn-border-tertiary: #00000000; + --pgn-color-btn-border-inverse-success: #00000000; + --pgn-color-btn-border-inverse-secondary: #00000000; + --pgn-color-btn-border-inverse-primary: #00000000; + --pgn-color-btn-border-inverse-light: #00000000; + --pgn-color-btn-border-inverse-info: #00000000; + --pgn-color-btn-border-inverse-dark: #00000000; + --pgn-color-btn-border-inverse-danger: #00000000; + --pgn-color-btn-border-inverse-brand: #00000000; + --pgn-color-btn-bg-inverse-outline-warning: inherit; + --pgn-color-btn-bg-outline-warning: inherit; + --pgn-color-btn-bg-inverse-tertiary: #00000000; + --pgn-color-btn-bg-tertiary: #00000000; + --pgn-color-btn-bg-inverse-outline-success: inherit; + --pgn-color-btn-bg-outline-success: inherit; + --pgn-color-btn-bg-inverse-outline-secondary: inherit; + --pgn-color-btn-bg-outline-secondary: inherit; + --pgn-color-btn-bg-inverse-outline-primary: #00000000; + --pgn-color-btn-bg-outline-primary: #00000000; + --pgn-color-btn-bg-inverse-outline-light: inherit; + --pgn-color-btn-bg-outline-light: inherit; + --pgn-color-btn-bg-inverse-outline-info: inherit; + --pgn-color-btn-bg-outline-info: inherit; + --pgn-color-btn-bg-inverse-outline-dark: #00000000; + --pgn-color-btn-bg-outline-dark: inherit; + --pgn-color-btn-bg-inverse-outline-danger: #00000000; + --pgn-color-btn-bg-outline-danger: inherit; + --pgn-color-btn-bg-inverse-outline-brand: #00000000; + --pgn-color-btn-bg-outline-brand: inherit; --pgn-theme-interval: 8%; --pgn-other-tooltip-opacity: 1; --pgn-other-search-field-disabled-opacity: .3; --pgn-other-modal-opacity: .5; --pgn-other-link-emphasized-hover-darken-percentage: 15%; + --pgn-other-chip-opacity-disabled: .3; + --pgn-other-btn-disabled-opacity: .65; --pgn-other-form-feedback-tooltip-opacity: .9; --pgn-other-form-control-range-track-cursor: pointer; --pgn-other-form-control-cursor: auto; - --pgn-other-chip-opacity-disabled: .3; - --pgn-other-btn-disabled-opacity: .65; - --pgn-transition-collapse: 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; - --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite; - --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; - --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out; - --pgn-transition-carousel-control: opacity .15s ease; - --pgn-transition-carousel-indicator: opacity .6s ease; - --pgn-transition-carousel-duration: .6s; - --pgn-transition-btn: none; - --pgn-transition-badge: none; - --pgn-elevation-zindex-fixed: 1030; - --pgn-elevation-zindex-sticky: 1020; - --pgn-elevation-zindex-2000: 2000; - --pgn-elevation-zindex-1800: 1800; - --pgn-elevation-zindex-1600: 1600; - --pgn-elevation-zindex-1400: 1400; - --pgn-elevation-zindex-1200: 1200; - --pgn-elevation-zindex-1000: 1000; - --pgn-elevation-zindex-800: 800; - --pgn-elevation-zindex-600: 600; - --pgn-elevation-zindex-400: 400; - --pgn-elevation-zindex-200: 200; - --pgn-elevation-zindex-0: 0; --pgn-elevation-box-shadow-centered-5: 0 0 2.5rem rgba(0, 0, 0, .15), 0 0 3rem rgba(0, 0, 0, .15); --pgn-elevation-box-shadow-centered-4: 0 0 1.25rem rgba(0, 0, 0, .15), 0 0 1.25rem rgba(0, 0, 0, .15); --pgn-elevation-box-shadow-centered-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); @@ -73,20 +219,9 @@ --pgn-elevation-box-shadow-level-3: 0 0 .625rem rgba(0, 0, 0, .15), 0 0 1rem rgba(0, 0, 0, .15); --pgn-elevation-box-shadow-level-2: 0 .125rem .25rem rgba(0, 0, 0, .15), 0 .125rem .5rem rgba(0, 0, 0, .15); --pgn-elevation-box-shadow-level-1: 0 .0625rem .125rem rgba(0, 0, 0, .15), 0 .0625rem .25rem rgba(0, 0, 0, .15); - --pgn-elevation-tooltip-zindex: 1070; - --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); --pgn-elevation-toast-box-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, .15), 0 .5rem 3rem rgba(0, 0, 0, .15); --pgn-elevation-sticky-shadow-bottom: 0 .5rem 1rem rgba(0, 0, 0, .15), 0 .25rem .625rem rgba(0, 0, 0, .15); --pgn-elevation-sticky-shadow-top: 0 -.5rem 1rem rgba(0, 0, 0, .15), 0 -.25rem .625rem rgba(0, 0, 0, .15); - --pgn-elevation-sheet-zindex-main: 1032; - --pgn-elevation-sheet-zindex-backdrop: 1031; - --pgn-elevation-progress-bar-box-shadow: none; - --pgn-elevation-product-tour-checkpoint-zindex: 1060; - --pgn-elevation-popover-zindex: 1060; - --pgn-elevation-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); - --pgn-elevation-modal-zindex: 1050; - --pgn-elevation-modal-backdrop-zindex: 1040; - --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); --pgn-elevation-image-thumbnail-box-shadow: 0 1px 2px rgba(0, 0, 0, .075); --pgn-elevation-form-control-select-border-base: inset 0 1px 2px rgba(0, 0, 0, .075); --pgn-elevation-form-control-range-thumb-base: 0 .1rem .25rem rgba(0, 0, 0, .1); @@ -96,13 +231,49 @@ --pgn-elevation-form-control-indicator-checked-focus: 0 0 0 4px rgba(0, 0, 0, .1); --pgn-elevation-form-control-indicator-checked-base: none; --pgn-elevation-form-input-base: inset 0 1px 1px rgba(0, 0, 0, .075); - --pgn-elevation-dropdown-zindex: 1000; - --pgn-elevation-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); --pgn-elevation-code-kbd-box-shadow: inset 0 -.1rem 0 rgba(0, 0, 0, .25); --pgn-elevation-btn-box-shadow-active: none; --pgn-elevation-btn-box-shadow-base: none; --pgn-elevation-annotation-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); --pgn-elevation-alert-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 1px 4px rgba(0, 0, 0, .15); + --pgn-elevation-zindex-fixed: 1030; + --pgn-elevation-zindex-sticky: 1020; + --pgn-elevation-zindex-2000: 2000; + --pgn-elevation-zindex-1800: 1800; + --pgn-elevation-zindex-1600: 1600; + --pgn-elevation-zindex-1400: 1400; + --pgn-elevation-zindex-1200: 1200; + --pgn-elevation-zindex-1000: 1000; + --pgn-elevation-zindex-800: 800; + --pgn-elevation-zindex-600: 600; + --pgn-elevation-zindex-400: 400; + --pgn-elevation-zindex-200: 200; + --pgn-elevation-zindex-0: 0; + --pgn-elevation-tooltip-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); + --pgn-elevation-tooltip-zindex: 1070; + --pgn-elevation-sheet-zindex-main: 1032; + --pgn-elevation-sheet-zindex-backdrop: 1031; + --pgn-elevation-progress-bar-box-shadow: none; + --pgn-elevation-product-tour-checkpoint-zindex: 1060; + --pgn-elevation-popover-box-shadow: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15)); + --pgn-elevation-popover-zindex: 1060; + --pgn-elevation-modal-content-box-shadow-sm-up: 0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15); + --pgn-elevation-modal-zindex: 1050; + --pgn-elevation-modal-backdrop-zindex: 1040; + --pgn-elevation-dropdown-box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); + --pgn-elevation-dropdown-zindex: 1000; + --pgn-transition-collapse: 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; + --pgn-transition-progress-bar-bar-animation-timing: 1s linear infinite; + --pgn-transition-form-control: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; + --pgn-transition-form-input: border-color .15s ease-in-out, box-shadow .15s ease-in-out; + --pgn-transition-carousel-control: opacity .15s ease; + --pgn-transition-carousel-indicator: opacity .6s ease; + --pgn-transition-carousel-duration: .6s; + --pgn-transition-btn: none; + --pgn-transition-badge: none; --pgn-typography-line-height-sm: 1.5; --pgn-typography-line-height-lg: 1.5; --pgn-typography-line-height-base: 1.5556; @@ -429,319 +600,6 @@ --pgn-size-border-radius-lg: 7px; --pgn-size-border-radius-base: 6px; --pgn-size-border-width: 1px; - --pgn-color-dark-base: #273F2FFF; - --pgn-color-light-base: #E1DDDBFF; - --pgn-color-brand-base: #9D0054FF; - --pgn-color-primary-base: #0A3055FF; - --pgn-color-gray-base: #707070FF; - --pgn-color-gray-900: #212529FF; - --pgn-color-gray-800: #333333FF; - --pgn-color-gray-700: #454545FF; - --pgn-color-gray-600: #5C5C5CFF; - --pgn-color-gray-400: #8F8F8FFF; - --pgn-color-gray-300: #ADADADFF; - --pgn-color-gray-200: #CCCCCCFF; - --pgn-color-gray-100: #EBEBEBFF; - --pgn-color-accent-b: #FFEE88FF; - --pgn-color-accent-a: #00BBF9FF; - --pgn-color-teal: #006DAAFF; - --pgn-color-yellow: #FFD900FF; - --pgn-color-green: #178253FF; - --pgn-color-red: #C32D3AFF; - --pgn-color-blue: #23419FFF; - --pgn-color-black: #000000FF; - --pgn-color-white: #FFFFFFFF; - --pgn-color-toast-base: inherit; - --pgn-color-progress-bar-bg: #00000000; - --pgn-color-product-tour-checkpoint-arrow-border-transparent: #00000000; - --pgn-color-popover-border: #00000033; - --pgn-color-menu-border-hover: #00000000; - --pgn-color-menu-border-active: #00000000; - --pgn-color-menu-border-base: #00000000; - --pgn-color-icon-button-bg: #00000000; - --pgn-color-mark-bg: #FFF243FF; - --pgn-color-list-group-base: inherit; - --pgn-color-form-control-select-bg-size: #000000FF; - --pgn-color-form-control-label-base: inherit; - --pgn-color-code-base: #E83E8CFF; - --pgn-color-carousel-control-opacity-hover: #000000FF; - --pgn-color-carousel-control-opacity-base: #000000FF; - --pgn-color-card-base: inherit; - --pgn-color-btn-disabled-border-inverse-warning: #00000000; - --pgn-color-btn-disabled-border-inverse-outline-success: inherit; - --pgn-color-btn-disabled-border-inverse-success: #00000000; - --pgn-color-btn-disabled-border-secondary: inherit; - --pgn-color-btn-disabled-border-inverse-primary: #00000000; - --pgn-color-btn-disabled-border-inverse-light: #00000000; - --pgn-color-btn-disabled-border-inverse-info: #00000000; - --pgn-color-btn-disabled-border-inverse-dark: #00000000; - --pgn-color-btn-disabled-border-inverse-danger: #00000000; - --pgn-color-btn-disabled-bg-inverse-outline-warning: inherit; - --pgn-color-btn-disabled-bg-inverse-warning: inherit; - --pgn-color-btn-disabled-bg-outline-warning: inherit; - --pgn-color-btn-disabled-bg-inverse-tertiary: inherit; - --pgn-color-btn-disabled-bg-tertiary: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-success: inherit; - --pgn-color-btn-disabled-bg-inverse-success: inherit; - --pgn-color-btn-disabled-bg-outline-success: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-secondary: inherit; - --pgn-color-btn-disabled-bg-inverse-secondary: inherit; - --pgn-color-btn-disabled-bg-outline-secondary: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-primary: inherit; - --pgn-color-btn-disabled-bg-outline-primary: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-light: inherit; - --pgn-color-btn-disabled-bg-inverse-light: inherit; - --pgn-color-btn-disabled-bg-outline-light: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-info: inherit; - --pgn-color-btn-disabled-bg-inverse-info: inherit; - --pgn-color-btn-disabled-bg-outline-info: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-dark: inherit; - --pgn-color-btn-disabled-bg-inverse-dark: inherit; - --pgn-color-btn-disabled-bg-outline-dark: inherit; - --pgn-color-btn-disabled-bg-inverse-outline-danger: inherit; - --pgn-color-btn-disabled-bg-inverse-danger: #00000000; - --pgn-color-btn-disabled-bg-outline-danger: inherit; - --pgn-color-btn-disabled-bg-outline-brand: inherit; - --pgn-color-btn-disabled-text-inverse-secondary: inherit; - --pgn-color-btn-disabled-text-outline-secondary: inherit; - --pgn-color-btn-disabled-text-outline-dark: inherit; - --pgn-color-btn-focus-outline-inverse-outline-warning: inherit; - --pgn-color-btn-focus-bg-inverse-outline-warning: inherit; - --pgn-color-btn-focus-bg-outline-warning: inherit; - --pgn-color-btn-focus-bg-inverse-tertiary: inherit; - --pgn-color-btn-focus-bg-tertiary: inherit; - --pgn-color-btn-focus-bg-inverse-outline-success: inherit; - --pgn-color-btn-focus-bg-outline-success: inherit; - --pgn-color-btn-focus-bg-inverse-outline-secondary: inherit; - --pgn-color-btn-focus-bg-outline-secondary: #00000000; - --pgn-color-btn-focus-bg-inverse-outline-primary: inherit; - --pgn-color-btn-focus-bg-outline-primary: inherit; - --pgn-color-btn-focus-bg-inverse-outline-light: inherit; - --pgn-color-btn-focus-bg-outline-light: #00000000; - --pgn-color-btn-focus-bg-inverse-outline-info: inherit; - --pgn-color-btn-focus-bg-outline-info: inherit; - --pgn-color-btn-focus-bg-inverse-outline-dark: inherit; - --pgn-color-btn-focus-bg-outline-dark: inherit; - --pgn-color-btn-focus-bg-inverse-outline-danger: inherit; - --pgn-color-btn-focus-bg-outline-danger: inherit; - --pgn-color-btn-focus-bg-inverse-outline-brand: inherit; - --pgn-color-btn-focus-bg-outline-brand: inherit; - --pgn-color-btn-focus-border-inverse-tertiary: #00000000; - --pgn-color-btn-focus-text-inverse-secondary: inherit; - --pgn-color-btn-focus-text-outline-dark: inherit; - --pgn-color-btn-active-border-inverse-outline-warning: #00000000; - --pgn-color-btn-active-border-inverse-warning: inherit; - --pgn-color-btn-active-border-inverse-tertiary: #00000000; - --pgn-color-btn-active-border-tertiary: #00000000; - --pgn-color-btn-active-border-inverse-outline-success: #00000000; - --pgn-color-btn-active-border-inverse-success: inherit; - --pgn-color-btn-active-border-inverse-secondary: #00000000; - --pgn-color-btn-active-border-inverse-outline-secondary: #00000000; - --pgn-color-btn-active-border-inverse-primary: #00000000; - --pgn-color-btn-active-border-inverse-outline-primary: #00000000; - --pgn-color-btn-active-border-inverse-outline-light: #00000000; - --pgn-color-btn-active-border-inverse-light: inherit; - --pgn-color-btn-active-border-inverse-outline-info: #00000000; - --pgn-color-btn-active-border-inverse-info: #00000000; - --pgn-color-btn-active-border-inverse-outline-dark: #00000000; - --pgn-color-btn-active-border-inverse-dark: #00000000; - --pgn-color-btn-active-border-inverse-outline-danger: #00000000; - --pgn-color-btn-active-border-inverse-danger: #00000000; - --pgn-color-btn-active-border-inverse-outline-brand: #00000000; - --pgn-color-btn-active-border-inverse-brand: #00000000; - --pgn-color-btn-hover-border-inverse-outline-warning: #00000000; - --pgn-color-btn-hover-border-inverse-warning: #00000000; - --pgn-color-btn-hover-border-inverse-tertiary: #00000000; - --pgn-color-btn-hover-border-tertiary: #00000000; - --pgn-color-btn-hover-border-inverse-outline-success: #00000000; - --pgn-color-btn-hover-border-inverse-success: #00000000; - --pgn-color-btn-hover-border-inverse-secondary: #00000000; - --pgn-color-btn-hover-border-inverse-outline-secondary: #00000000; - --pgn-color-btn-hover-border-inverse-primary: #00000000; - --pgn-color-btn-hover-border-inverse-outline-primary: #00000000; - --pgn-color-btn-hover-border-inverse-outline-light: #00000000; - --pgn-color-btn-hover-border-inverse-light: #00000000; - --pgn-color-btn-hover-border-inverse-outline-info: #00000000; - --pgn-color-btn-hover-border-inverse-info: #00000000; - --pgn-color-btn-hover-border-inverse-outline-dark: #00000000; - --pgn-color-btn-hover-border-inverse-dark: #00000000; - --pgn-color-btn-hover-border-inverse-outline-danger: #00000000; - --pgn-color-btn-hover-border-inverse-danger: #00000000; - --pgn-color-btn-hover-border-inverse-brand: #00000000; - --pgn-color-btn-hover-border-inverse-outline-brand: #00000000; - --pgn-color-btn-border-inverse-warning: #00000000; - --pgn-color-btn-border-inverse-tertiary: #00000000; - --pgn-color-btn-border-tertiary: #00000000; - --pgn-color-btn-border-inverse-success: #00000000; - --pgn-color-btn-border-inverse-secondary: #00000000; - --pgn-color-btn-border-inverse-primary: #00000000; - --pgn-color-btn-border-inverse-light: #00000000; - --pgn-color-btn-border-inverse-info: #00000000; - --pgn-color-btn-border-inverse-dark: #00000000; - --pgn-color-btn-border-inverse-danger: #00000000; - --pgn-color-btn-border-inverse-brand: #00000000; - --pgn-color-btn-bg-inverse-outline-warning: inherit; - --pgn-color-btn-bg-outline-warning: inherit; - --pgn-color-btn-bg-inverse-tertiary: #00000000; - --pgn-color-btn-bg-tertiary: #00000000; - --pgn-color-btn-bg-inverse-outline-success: inherit; - --pgn-color-btn-bg-outline-success: inherit; - --pgn-color-btn-bg-inverse-outline-secondary: inherit; - --pgn-color-btn-bg-outline-secondary: inherit; - --pgn-color-btn-bg-inverse-outline-primary: #00000000; - --pgn-color-btn-bg-outline-primary: #00000000; - --pgn-color-btn-bg-inverse-outline-light: inherit; - --pgn-color-btn-bg-outline-light: inherit; - --pgn-color-btn-bg-inverse-outline-info: inherit; - --pgn-color-btn-bg-outline-info: inherit; - --pgn-color-btn-bg-inverse-outline-dark: #00000000; - --pgn-color-btn-bg-outline-dark: inherit; - --pgn-color-btn-bg-inverse-outline-danger: #00000000; - --pgn-color-btn-bg-outline-danger: inherit; - --pgn-color-btn-bg-inverse-outline-brand: #00000000; - --pgn-color-btn-bg-outline-brand: inherit; - --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; - --pgn-elevation-scrollable-body-box-shadow: #0000008C; - --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); - --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base); - --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base); - --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm); - --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); - --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); - --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25); - --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6); - --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5); - --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4); - --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3); - --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2); - --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); - --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold); - --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold); - --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs); - --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75); - --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg); - --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2); - --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg); - --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25); - --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base); - --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg); - --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base); - --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base); - --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); - --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base); - --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg); - --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); - --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base); - --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family); - --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x); - --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base); - --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size); - --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5); - --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x); - --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); - --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base); - --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal); - --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg); - --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); - --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base); - --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family); - --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold); - --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm); - --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm); - --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); - --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4rem); - --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2rem); - --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25rem); - --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75rem); - --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375rem); - --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5rem); - --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3rem); - --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5rem); - --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); - --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5rem); - --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25rem); - --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x); - --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y); - --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base); - --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2); - --pgn-spacing-nav-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2); - --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem; - --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem; - --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); - --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x); - --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); - --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x); - --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); - --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y); - --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y); - --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2); - --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item); - --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x); - --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y); - --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y); - --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group); - --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group); - --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap)); - --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); - --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x); - --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x); - --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y); - --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); - --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y); - --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width); - --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width); - --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow); - --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow); - --pgn-size-product-tour-checkpoint-arrow-bottom: var(--pgn-size-product-tour-checkpoint-width-arrow) var(--pgn-size-product-tour-checkpoint-width-border); - --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm); - --pgn-size-popover-border-width: var(--pgn-size-border-width); - --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg); - --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm); - --pgn-size-pagination-border-width: var(--pgn-size-border-width); - --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg); - --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width); - --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) + .1em); - --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-list-group-border-width: var(--pgn-size-border-width); - --pgn-size-input-btn-border-width: var(--pgn-size-border-width); - --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base); - --pgn-size-hr-border-width: var(--pgn-size-border-width); - --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width); - --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width); - --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus); - --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width); - --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base); - --pgn-size-form-control-select-border-width-focus: var(--pgn-size-form-input-width-focus); - --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2); - --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4); - --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75); - --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm); - --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg); - --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base); - --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-dropdown-border-width: var(--pgn-size-border-width); - --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max); - --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-card-border-width: var(--pgn-size-border-width); - --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm); - --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg); - --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-breadcrumb-border-radius-base: var(--pgn-size-border-radius-base); - --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width); - --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); --pgn-color-dark-900: #1B2C21FF; --pgn-color-dark-800: #1D2F23FF; --pgn-color-dark-700: #1F3226FF; @@ -865,7 +723,7 @@ --pgn-color-carousel-caption: var(--pgn-color-white); --pgn-color-carousel-indicator-active-bg: var(--pgn-color-white); --pgn-color-carousel-control-base: var(--pgn-color-white); - --pgn-color-card-border-focus-base: #00000080; + --pgn-color-card-border-focus: #00000080; --pgn-color-card-border-base: #00000020; --pgn-color-btn-disabled-border-inverse-tertiary: var(--pgn-color-btn-border-inverse-tertiary); --pgn-color-btn-disabled-border-tertiary: var(--pgn-color-btn-border-tertiary); @@ -973,50 +831,153 @@ --pgn-color-text-50-white: #FFFFFF80; --pgn-color-text-50-black: #00000080; --pgn-color-bg-base: var(--pgn-color-white); + --pgn-elevation-scrollable-body-box-shadow: #0000008C; + --pgn-elevation-input-btn-focus-box-shadow: 0 0 0 var(--pgn-size-input-btn-focus-width) var(--pgn-color-input-btn-focus); + --pgn-elevation-form-control-file-base: var(--pgn-elevation-form-input-base); + --pgn-elevation-form-control-indicator-base: var(--pgn-elevation-form-input-base); + --pgn-elevation-data-table-box-shadow: var(--pgn-elevation-box-shadow-sm); + --pgn-elevation-close-button-text-shadow: 0 1px 0 var(--pgn-color-white); + --pgn-transition-carousel-base: transform var(--pgn-transition-carousel-duration) ease-in-out; + --pgn-typography-font-weight-base: var(--pgn-typography-font-weight-normal); + --pgn-typography-font-size-lead: calc(var(--pgn-typography-font-size-base) * 1.25); + --pgn-typography-font-size-mobile-h6: var(--pgn-typography-font-size-h6); + --pgn-typography-font-size-mobile-h5: var(--pgn-typography-font-size-h5); + --pgn-typography-font-size-mobile-h4: var(--pgn-typography-font-size-h4); + --pgn-typography-font-size-mobile-h3: var(--pgn-typography-font-size-h3); + --pgn-typography-font-size-mobile-h2: var(--pgn-typography-font-size-h2); + --pgn-typography-font-family-base: var(--pgn-typography-font-family-sans-serif); + --pgn-typography-display-weight-4: var(--pgn-typography-font-weight-bold); + --pgn-typography-display-weight-3: var(--pgn-typography-font-weight-bold); + --pgn-typography-display-weight-2: var(--pgn-typography-font-weight-bold); + --pgn-typography-display-weight-1: var(--pgn-typography-font-weight-bold); + --pgn-typography-tooltip-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-tabs-notification-font-size: var(--pgn-typography-font-size-xs); + --pgn-typography-progress-bar-font-size: calc(var(--pgn-typography-font-size-base) * .75); + --pgn-typography-popover-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-navbar-toggler-font-size: var(--pgn-typography-font-size-lg); + --pgn-typography-navbar-nav-link-height: calc(var(--pgn-typography-font-size-base) * var(--pgn-typography-line-height-base) + .5rem * 2); + --pgn-typography-navbar-brand-font-size: var(--pgn-typography-font-size-lg); + --pgn-typography-blockquote-font-size: calc(var(--pgn-typography-font-size-base) * 1.25); + --pgn-typography-blockquote-small-font-size: var(--pgn-typography-font-size-small-base); + --pgn-typography-dt-font-weight: var(--pgn-typography-font-weight-bold); + --pgn-typography-input-btn-line-height-lg: var(--pgn-typography-line-height-lg); + --pgn-typography-headings-font-weight: var(--pgn-typography-font-weight-bold); + --pgn-typography-form-feedback-tooltip-line-height: var(--pgn-typography-line-height-base); + --pgn-typography-form-feedback-tooltip-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-form-feedback-font-size: var(--pgn-typography-font-size-small-base); + --pgn-typography-form-input-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); + --pgn-typography-form-input-line-height-base: var(--pgn-typography-input-btn-line-height-base); + --pgn-typography-form-input-font-size-lg: var(--pgn-typography-input-btn-font-size-lg); + --pgn-typography-form-input-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); + --pgn-typography-form-input-font-size-base: var(--pgn-typography-input-btn-font-size-base); + --pgn-typography-form-input-font-family: var(--pgn-typography-input-btn-font-family); + --pgn-typography-dropzone-restriction-msg-font-size: var(--pgn-typography-font-size-small-x); + --pgn-typography-dropdown-font-size: var(--pgn-typography-font-size-base); + --pgn-typography-code-kbd-nested-font-weight: var(--pgn-typography-font-weight-bold); + --pgn-typography-code-kbd-font-size: var(--pgn-typography-code-font-size); + --pgn-typography-close-button-font-weight: var(--pgn-typography-font-weight-bold); + --pgn-typography-close-button-font-size: calc(var(--pgn-typography-font-size-base) * 1.5); + --pgn-typography-footer-text-font-size: var(--pgn-typography-font-size-small-x); + --pgn-typography-btn-line-height-sm: var(--pgn-typography-input-btn-line-height-sm); + --pgn-typography-btn-line-height-base: var(--pgn-typography-input-btn-line-height-base); + --pgn-typography-btn-font-weight: var(--pgn-typography-font-weight-normal); + --pgn-typography-btn-font-size-lg: var(--pgn-typography-input-btn-font-size-lg); + --pgn-typography-btn-font-size-sm: var(--pgn-typography-input-btn-font-size-sm); + --pgn-typography-btn-font-size-base: var(--pgn-typography-input-btn-font-size-base); + --pgn-typography-btn-font-family: var(--pgn-typography-input-btn-font-family); + --pgn-typography-badge-font-weight: var(--pgn-typography-font-weight-bold); + --pgn-typography-annotation-line-height: var(--pgn-typography-line-height-sm); + --pgn-typography-annotation-font-size: var(--pgn-typography-font-size-sm); + --pgn-typography-alert-font-weight-link: var(--pgn-typography-font-weight-normal); + --pgn-spacing-spacer-5-5: calc(var(--pgn-spacing-spacer-base) * 4rem); + --pgn-spacing-spacer-4-5: calc(var(--pgn-spacing-spacer-base) * 2rem); + --pgn-spacing-spacer-3-5: calc(var(--pgn-spacing-spacer-base) * 1.25rem); + --pgn-spacing-spacer-2-5: calc(var(--pgn-spacing-spacer-base) * .75rem); + --pgn-spacing-spacer-1-5: calc(var(--pgn-spacing-spacer-base) * .375rem); + --pgn-spacing-spacer-6: calc(var(--pgn-spacing-spacer-base) * 5rem); + --pgn-spacing-spacer-5: calc(var(--pgn-spacing-spacer-base) * 3rem); + --pgn-spacing-spacer-4: calc(var(--pgn-spacing-spacer-base) * 1.5rem); + --pgn-spacing-spacer-3: var(--pgn-spacing-spacer-base); + --pgn-spacing-spacer-2: calc(var(--pgn-spacing-spacer-base) * .5rem); + --pgn-spacing-spacer-1: calc(var(--pgn-spacing-spacer-base) * .25rem); + --pgn-spacing-popover-body-padding-x: var(--pgn-spacing-popover-header-padding-x); + --pgn-spacing-popover-body-padding-y: var(--pgn-spacing-popover-header-padding-y); + --pgn-spacing-navbar-padding-x-base: var(--pgn-spacing-spacer-base); + --pgn-spacing-navbar-padding-y: calc(var(--pgn-spacing-spacer-base) / 2); + --pgn-spacing-nav-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2); + --pgn-spacing-modal-header-padding-base: var(--pgn-spacing-modal-header-padding-y) 1.5rem; + --pgn-spacing-modal-footer-padding-base: var(--pgn-spacing-modal-footer-padding-y) 1.5rem; + --pgn-spacing-form-control-select-feedback-margin-top: var(--pgn-spacing-form-text-margin-top); + --pgn-spacing-form-input-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x); + --pgn-spacing-form-input-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); + --pgn-spacing-form-input-padding-x-base: var(--pgn-spacing-input-btn-padding-x); + --pgn-spacing-form-input-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); + --pgn-spacing-form-input-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y); + --pgn-spacing-form-input-padding-y-base: var(--pgn-spacing-input-btn-padding-y); + --pgn-spacing-dropdown-divider-margin-y: calc(var(--pgn-spacing-spacer-base) / 2); + --pgn-spacing-dropdown-padding-header: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-item); + --pgn-spacing-collapsible-card-spacer-x-lg: var(--pgn-spacing-card-spacer-x); + --pgn-spacing-collapsible-card-spacer-y-lg: var(--pgn-spacing-card-spacer-y); + --pgn-spacing-card-columns-margin: var(--pgn-spacing-card-spacer-y); + --pgn-spacing-card-margin-grid: var(--pgn-spacing-card-margin-group); + --pgn-spacing-card-margin-deck: var(--pgn-spacing-card-margin-group); + --pgn-spacing-btn-focus-border-gap: calc(var(--pgn-size-btn-focus-width) + var(--pgn-spacing-btn-focus-gap)); + --pgn-spacing-btn-padding-x-sm: var(--pgn-spacing-input-btn-padding-sm-x); + --pgn-spacing-btn-padding-x-lg: var(--pgn-spacing-input-btn-padding-lg-x); + --pgn-spacing-btn-padding-x-base: var(--pgn-spacing-input-btn-padding-x); + --pgn-spacing-btn-padding-y-sm: var(--pgn-spacing-input-btn-padding-sm-y); + --pgn-spacing-btn-padding-y-lg: var(--pgn-spacing-input-btn-padding-lg-y); + --pgn-spacing-btn-padding-y-base: var(--pgn-spacing-input-btn-padding-y); + --pgn-size-tooltip-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-spinner-sm-height: var(--pgn-size-spinner-sm-width); + --pgn-size-spinner-base-height: var(--pgn-size-spinner-base-width); + --pgn-size-product-tour-checkpoint-arrow-transparent: var(--pgn-size-product-tour-checkpoint-width-arrow); + --pgn-size-product-tour-checkpoint-arrow-top: var(--pgn-size-product-tour-checkpoint-width-arrow); + --pgn-size-product-tour-checkpoint-arrow-bottom: var(--pgn-size-product-tour-checkpoint-width-arrow) var(--pgn-size-product-tour-checkpoint-width-border); + --pgn-size-popover-border-radius: var(--pgn-size-border-radius-sm); + --pgn-size-popover-border-width: var(--pgn-size-border-width); + --pgn-size-pagination-border-radius-lg: var(--pgn-size-border-radius-lg); + --pgn-size-pagination-border-radius-sm: var(--pgn-size-border-radius-sm); + --pgn-size-pagination-border-width: var(--pgn-size-border-width); + --pgn-size-nav-pills-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-modal-content-border-radius: var(--pgn-size-border-radius-lg); + --pgn-size-image-thumbnail-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-image-thumbnail-border-width: var(--pgn-size-border-width); + --pgn-size-icon-button-diameter-inline: calc(var(--pgn-typography-line-height-base) + .1em); + --pgn-size-list-group-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-list-group-border-width: var(--pgn-size-border-width); + --pgn-size-input-btn-border-width: var(--pgn-size-border-width); + --pgn-size-hr-border-margin-y: var(--pgn-spacing-spacer-base); + --pgn-size-hr-border-width: var(--pgn-size-border-width); + --pgn-size-form-feedback-tooltip-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-form-autosuggest-spinner-height: var(--pgn-size-form-autosuggest-spinner-width); + --pgn-size-form-autosuggest-icon-height: var(--pgn-size-form-autosuggest-icon-width); + --pgn-size-form-control-range-thumb-focus-width: var(--pgn-size-form-input-width-focus); + --pgn-size-form-control-range-thumb-height: var(--pgn-size-form-control-range-thumb-width); + --pgn-size-form-control-select-border-radius: var(--pgn-size-border-radius-base); + --pgn-size-form-control-select-border-width-focus: var(--pgn-size-form-input-width-focus); + --pgn-size-form-control-switch-indicator-border-radius: calc(var(--pgn-size-form-control-indicator-base) / 2); + --pgn-size-form-control-switch-indicator-base: calc(var(--pgn-size-form-control-indicator-base) - var(--pgn-size-form-control-indicator-border-width) * 4); + --pgn-size-form-control-switch-width: calc(var(--pgn-size-form-control-indicator-base) * 1.75); + --pgn-size-form-input-radius-border-sm: var(--pgn-size-border-radius-sm); + --pgn-size-form-input-radius-border-lg: var(--pgn-size-border-radius-lg); + --pgn-size-form-input-radius-border-base: var(--pgn-size-border-radius-base); + --pgn-size-dropdown-border-radius-base: var(--pgn-size-border-radius-base); + --pgn-size-dropdown-border-width: var(--pgn-size-border-width); + --pgn-size-card-image-horizontal-width-min: var(--pgn-size-card-image-horizontal-width-max); + --pgn-size-card-border-radius-base: var(--pgn-size-border-radius-base); + --pgn-size-card-border-width: var(--pgn-size-border-width); + --pgn-size-btn-border-radius-sm: var(--pgn-size-border-radius-sm); + --pgn-size-btn-border-radius-lg: var(--pgn-size-border-radius-lg); + --pgn-size-btn-border-radius-base: var(--pgn-size-border-radius-base); + --pgn-size-breadcrumb-border-radius-base: var(--pgn-size-border-radius-base); + --pgn-size-badge-focus-width: var(--pgn-size-input-btn-focus-width); + --pgn-size-alert-border-radius: var(--pgn-size-border-radius-base); --pgn-border-color-nav-tabs-link-border-active: transparent transparent var(--pgn-color-primary-500); --pgn-content-navbar-toggler-light-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%2300000080' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --pgn-content-navbar-toggler-dark-icon-bg: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='%23FFFFFF80' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); --pgn-content-carousel-control-bg-next-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"); --pgn-content-carousel-control-bg-prev-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23FFFFFFFF' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"); - --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow); - --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow); - --pgn-elevation-form-input-focus: var(--pgn-elevation-input-btn-focus-box-shadow); - --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family); - --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base); - --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base); - --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg); - --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm); - --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base); - --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family); - --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); - --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base); - --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); - --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); - --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base); - --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base); - --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg); - --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm); - --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base); - --pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg); - --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm); - --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base); - --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3); - --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3); - --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width)); - --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3); - --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); - --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base); - --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base)); - --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base); - --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width); - --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2)); - --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base)); - --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); - --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border)); - --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border)); - --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width)); - --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap)); - --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width); --pgn-color-danger-900: #892029FF; --pgn-color-danger-800: #92222CFF; --pgn-color-danger-700: #9C242EFF; @@ -1323,24 +1284,46 @@ --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); + --pgn-elevation-pagination-focus-box-shadow: var(--pgn-elevation-input-btn-focus-box-shadow); + --pgn-elevation-form-control-select-border-focus: var(--pgn-elevation-input-btn-focus-box-shadow); + --pgn-elevation-form-input-focus: var(--pgn-elevation-input-btn-focus-box-shadow); + --pgn-typography-form-control-file-font-family: var(--pgn-typography-form-input-font-family); + --pgn-typography-form-control-file-line-height: var(--pgn-typography-form-input-line-height-base); + --pgn-typography-form-control-select-line-height: var(--pgn-typography-form-input-line-height-base); + --pgn-typography-form-control-select-font-size-lg: var(--pgn-typography-form-input-font-size-lg); + --pgn-typography-form-control-select-font-size-sm: var(--pgn-typography-form-input-font-size-sm); + --pgn-typography-form-control-select-font-size-base: var(--pgn-typography-form-input-font-size-base); + --pgn-typography-form-control-select-font-family: var(--pgn-typography-form-input-font-family); + --pgn-typography-form-input-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); + --pgn-typography-form-input-font-weight: var(--pgn-typography-font-weight-base); + --pgn-typography-btn-line-height-lg: var(--pgn-typography-input-btn-line-height-lg); + --pgn-spacing-navbar-brand-padding-y: calc((var(--pgn-typography-navbar-nav-link-height) - var(--pgn-size-navbar-brand-height)) / 2); + --pgn-spacing-form-control-file-padding-x: var(--pgn-spacing-form-input-padding-x-base); + --pgn-spacing-form-control-file-padding-y: var(--pgn-spacing-form-input-padding-y-base); + --pgn-spacing-form-control-select-padding-x-lg: var(--pgn-spacing-form-input-padding-x-lg); + --pgn-spacing-form-control-select-padding-x-sm: var(--pgn-spacing-form-input-padding-x-sm); + --pgn-spacing-form-control-select-padding-x-base: var(--pgn-spacing-form-input-padding-x-base); + --pgn-spacing-form-control-select-padding-y-lg: var(--pgn-spacing-form-input-padding-y-lg); + --pgn-spacing-form-control-select-padding-y-sm: var(--pgn-spacing-form-input-padding-y-sm); + --pgn-spacing-form-control-select-padding-y-base: var(--pgn-spacing-form-input-padding-y-base); + --pgn-spacing-card-margin-grid-bottom: var(--pgn-spacing-spacer-3); + --pgn-spacing-card-margin-deck-bottom: var(--pgn-spacing-spacer-3); + --pgn-spacing-btn-focus-distance-to-border: calc(var(--pgn-spacing-btn-focus-border-gap) + var(--pgn-size-btn-border-width)); + --pgn-spacing-alert-actions-gap: var(--pgn-spacing-spacer-3); + --pgn-size-search-field-search-input-height: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); + --pgn-size-navbar-toggler-border-radius: var(--pgn-size-btn-border-radius-base); + --pgn-size-navbar-brand-height: calc(var(--pgn-typography-navbar-brand-font-size) * var(--pgn-typography-line-height-base)); + --pgn-size-form-control-file-border-radius: var(--pgn-size-form-input-radius-border-base); + --pgn-size-form-input-width-border: var(--pgn-size-input-btn-border-width); + --pgn-size-form-input-height-inner-quarter: calc(var(--pgn-typography-form-input-line-height-base) * .25em + calc(var(--pgn-spacing-form-input-padding-y-base) / 2)); + --pgn-size-form-input-height-inner-half: calc(var(--pgn-typography-form-input-line-height-base) * .5em + var(--pgn-spacing-form-input-padding-y-base)); + --pgn-size-form-input-height-inner-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2); + --pgn-size-form-input-height-sm: calc(var(--pgn-typography-form-input-line-height-sm) * 1em + var(--pgn-spacing-input-btn-padding-sm-y) * 2 + var(--pgn-size-form-input-height-border)); + --pgn-size-form-input-height-base: calc(var(--pgn-typography-form-input-line-height-base) * 1em + var(--pgn-spacing-form-input-padding-y-base) * 2 + var(--pgn-size-form-input-height-border)); + --pgn-size-dropdown-border-radius-inner: calc(var(--pgn-size-dropdown-border-radius-base) - var(--pgn-size-dropdown-border-width)); + --pgn-size-btn-focus-border-radius: calc(var(--pgn-size-btn-border-radius-base) + var(--pgn-spacing-btn-focus-border-gap)); + --pgn-size-btn-border-width: var(--pgn-size-input-btn-border-width); --pgn-border-color-nav-tabs-link-border-hover: transparent transparent var(--pgn-color-nav-tabs-border); - --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"); - --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus); - --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus); - --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight); - --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight); - --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); - --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); - --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base); - --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base); - --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border); - --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border); - --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half); - --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm); - --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base); - --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2); - --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border)); --pgn-color-product-tour-checkpoint-arrow-border-top: var(--pgn-color-product-tour-checkpoint-bg); --pgn-color-popover-danger-icon: var(--pgn-color-warning-500); --pgn-color-popover-danger-bg: var(--pgn-color-danger-100); @@ -1401,7 +1384,6 @@ --pgn-color-dropzone-error-wrapper: var(--pgn-color-danger-500); --pgn-color-dropdown-link-disabled: var(--pgn-color-disabled); --pgn-color-dropdown-link-active-bg: var(--pgn-color-bg-active); - --pgn-color-card-border-focus-dark: var(--pgn-color-theme-focus-primary); --pgn-color-btn-disabled-link: var(--pgn-color-disabled); --pgn-color-btn-disabled-border-outline-warning: var(--pgn-color-btn-border-outline-warning); --pgn-color-btn-disabled-border-outline-success: var(--pgn-color-btn-border-outline-success); @@ -1594,13 +1576,23 @@ --pgn-color-theme-bg-success: var(--pgn-color-success-100); --pgn-color-theme-bg-secondary: var(--pgn-color-secondary-100); --pgn-color-input-btn-focus: var(--pgn-color-input-focus); - --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C32D3AFF' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23C32D3AFF' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); - --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23178253FF' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); - --pgn-other-content-form-control-select-bg: var(--pgn-other-content-form-control-select-indicator-icon) no-repeat right var(--pgn-spacing-form-input-padding-y-base) center / var(--pgn-color-form-control-select-bg-base); - --pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e"); - --pgn-other-content-form-control-radio-indicator-icon-checked: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e"); - --pgn-other-content-form-control-checkbox-indicator-icon-checked: url("data:image/svg+xml,"); - --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg); + --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"); + --pgn-elevation-form-control-file-focus: var(--pgn-elevation-form-input-focus); + --pgn-elevation-form-control-range-thumb-focus: 0 0 0 1px var(--pgn-color-body-bg), var(--pgn-size-form-input-width-focus); + --pgn-typography-form-control-file-font-weight: var(--pgn-typography-form-input-font-weight); + --pgn-typography-form-control-select-font-weight: var(--pgn-typography-form-input-font-weight); + --pgn-spacing-form-control-select-feedback-icon-position: center right calc(var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); + --pgn-spacing-form-control-select-feedback-icon-padding-right: calc((1em + 2 * var(--pgn-spacing-form-control-select-padding-y-base)) * 3 / 4 + var(--pgn-spacing-form-control-select-padding-x-base) + var(--pgn-spacing-form-control-select-indicator-padding)); + --pgn-size-form-control-file-height-inner: var(--pgn-size-form-input-height-inner-base); + --pgn-size-form-control-file-height-base: var(--pgn-size-form-input-height-base); + --pgn-size-form-control-file-width: var(--pgn-size-form-input-width-border); + --pgn-size-form-control-select-border-width-base: var(--pgn-size-form-input-width-border); + --pgn-size-form-control-select-feedback-icon: var(--pgn-size-form-input-height-inner-half) var(--pgn-size-form-input-height-inner-half); + --pgn-size-form-control-select-height-sm: var(--pgn-size-form-input-height-sm); + --pgn-size-form-control-select-height-base: var(--pgn-size-form-input-height-base); + --pgn-size-form-input-height-border: calc(var(--pgn-size-form-input-width-border) * 2); + --pgn-size-form-input-height-lg: calc(var(--pgn-typography-form-input-line-height-lg) * 1em + var(--pgn-spacing-input-btn-padding-lg-y) * 2 + var(--pgn-size-form-input-height-border)); --pgn-color-pagination-border-active: var(--pgn-color-pagination-bg-active); --pgn-color-pagination-text-base: var(--pgn-color-link-base); --pgn-color-list-group-active-border: var(--pgn-color-list-group-active-bg); @@ -1731,7 +1723,13 @@ --pgn-color-alert-icon-danger: var(--pgn-color-theme-default-danger); --pgn-color-alert-icon-info: var(--pgn-color-theme-default-info); --pgn-color-alert-icon-success: var(--pgn-color-theme-default-success); - --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,"); + --pgn-other-content-form-feedback-icon-invalid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23C32D3AFF' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23C32D3AFF' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"); + --pgn-other-content-form-feedback-icon-valid: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23178253FF' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"); + --pgn-other-content-form-control-select-bg: var(--pgn-other-content-form-control-select-indicator-icon) no-repeat right var(--pgn-spacing-form-input-padding-y-base) center / var(--pgn-color-form-control-select-bg-base); + --pgn-other-content-form-control-switch-indicator-icon-off: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e"); + --pgn-other-content-form-control-radio-indicator-icon-checked: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230A3055FF'/%3e%3c/svg%3e"); + --pgn-other-content-form-control-checkbox-indicator-icon-checked: url("data:image/svg+xml,"); + --pgn-size-form-control-select-height-lg: var(--pgn-size-form-input-height-lg); --pgn-color-pagination-text-hover: var(--pgn-color-link-hover); --pgn-color-link-inline-hover-decoration: var(--pgn-color-link-inline-hover-base); --pgn-color-btn-disabled-text-outline-danger: var(--pgn-color-btn-hover-text-outline-danger); @@ -1755,4 +1753,5 @@ --pgn-color-btn-hover-text-secondary: #FFFFFFFF; --pgn-color-btn-hover-text-info: #FFFFFFFF; --pgn-color-btn-hover-text-danger: #FFFFFFFF; + --pgn-other-content-form-control-checkbox-indicator-indeterminate-icon: url("data:image/svg+xml,"); } diff --git a/tokens/sass-helpers.js b/tokens/sass-helpers.js index 13cb85b46a..08c121cdb0 100644 --- a/tokens/sass-helpers.js +++ b/tokens/sass-helpers.js @@ -7,21 +7,21 @@ const chroma = require('chroma-js'); * based on contrast value of the input color * * @param color - chroma-js color instance - * @param {String} [light] - light color variant, defaults to 'yiq-text-light' from ./src/global/other.json - * @param {String} [dark] - dark color variant, defaults to 'yiq-text-dark' from ./src/global/other.json - * @param {Number} [threshold] - contrast threshold, defaults to 'yiq-contrasted-threshold' - * from ./src/global/other.json + * @param {String} [themeVariant] - theme variant name that will be used to find default contrast colors + * @param {String} [light] - light color variant from ./src/themes/{themeVariant}/global/other.json + * @param {String} [dark] - dark color variant from ./src/themes/{themeVariant}/global/other.json + * @param {Number} [threshold] - contrast threshold from ./src/core/global/other.json * @return chroma-js color instance (one of dark or light variants) */ -function colorYiq(color, light, dark, threshold) { - const defaultsFile = fs.readFileSync(path.resolve(__dirname, 'src', 'global', 'other.json'), 'utf8'); - const defaults = JSON.parse(defaultsFile); +function colorYiq(color, light, dark, threshold, themeVariant = 'light') { + const defaultThresholdFile = fs.readFileSync(path.resolve(__dirname, 'src/core/global', 'other.json'), 'utf8'); + const defaultThreshold = JSON.parse(defaultThresholdFile)['yiq-contrasted-threshold']; + const defaultColorsFile = fs.readFileSync(path.resolve(__dirname, `src/themes/${themeVariant}/global`, 'other.json'), 'utf8'); const { 'yiq-text-dark': defaultDark, 'yiq-text-light': defaultLight, - 'yiq-contrasted-threshold': defaultThreshold, - } = defaults; + } = JSON.parse(defaultColorsFile); const contrastThreshold = threshold || defaultThreshold; const lightColor = light || defaultLight; diff --git a/tokens/src/alias/size.json b/tokens/src/core/alias/size.json similarity index 100% rename from tokens/src/alias/size.json rename to tokens/src/core/alias/size.json diff --git a/tokens/src/components/ActionRow.json b/tokens/src/core/components/ActionRow.json similarity index 100% rename from tokens/src/components/ActionRow.json rename to tokens/src/core/components/ActionRow.json diff --git a/tokens/src/core/components/Alert.json b/tokens/src/core/components/Alert.json new file mode 100644 index 0000000000..f5913d592f --- /dev/null +++ b/tokens/src/core/components/Alert.json @@ -0,0 +1,30 @@ +{ + "spacing": { + "alert": { + "padding": { + "y": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-y" }, + "x": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-x" } + }, + "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$alert-margin-bottom" }, + "actions-gap": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$alert-actions-gap" }, + "icon-space": { "value": ".8rem", "type": "dimension", "source": "$alert-icon-space" } + } + }, + "typography": { + "alert": { + "font": { + "weight-link": { "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$alert-link-font-weight" }, + "size": { "value": ".875rem", "type": "dimension", "source": "$alert-font-size" } + }, + "line-height": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" } + } + }, + "size": { + "alert": { + "border": { + "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$alert-border-radius" }, + "width": { "value": "0", "type": "dimension", "source": "$alert-border-width" } + } + } + } +} diff --git a/tokens/src/core/components/Annotation.json b/tokens/src/core/components/Annotation.json new file mode 100644 index 0000000000..8f3f67ff37 --- /dev/null +++ b/tokens/src/core/components/Annotation.json @@ -0,0 +1,25 @@ +{ + "spacing": { + "annotation": { + "padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" }, + "arrow-side": { + "margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" } + } + } + }, + "typography": { + "annotation": { + "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$annotation-font-size" }, + "line-height": { "value": "{typography.line-height.sm}", "type": "dimension", "source": "$annotation-line-height" } + } + }, + "size": { + "annotation": { + "arrow-border": { + "width": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" } + }, + "max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" }, + "border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" } + } + } +} diff --git a/tokens/src/components/Avatar.json b/tokens/src/core/components/Avatar.json similarity index 85% rename from tokens/src/components/Avatar.json rename to tokens/src/core/components/Avatar.json index 659d184bd3..c8cdb66d11 100644 --- a/tokens/src/components/Avatar.json +++ b/tokens/src/core/components/Avatar.json @@ -1,9 +1,4 @@ { - "color": { - "avatar": { - "border": { "value": "{color.light.300}", "type": "color", "source": "$avatar-color-border" } - } - }, "size": { "avatar": { "base": { "value": "3rem", "type": "dimension", "source": "$avatar-size" }, diff --git a/tokens/src/components/AvatarButton.json b/tokens/src/core/components/AvatarButton.json similarity index 100% rename from tokens/src/components/AvatarButton.json rename to tokens/src/core/components/AvatarButton.json diff --git a/tokens/src/core/components/Badge.json b/tokens/src/core/components/Badge.json new file mode 100644 index 0000000000..921b1f09e0 --- /dev/null +++ b/tokens/src/core/components/Badge.json @@ -0,0 +1,33 @@ +{ + "spacing": { + "badge": { + "padding": { + "x": { + "base": { "value": ".5rem", "type": "dimension", "source": "$badge-padding-x" }, + "pill": { "value": ".6em", "type": "dimension", "source": "$badge-pill-padding-x" } + }, + "y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" } + } + } + }, + "typography": { + "badge": { + "font": { + "size": { "value": "75%", "type": "percentage", "source": "$badge-font-size" }, + "weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$badge-font-weight" } + } + } + }, + "size": { + "badge": { + "border-radius": { + "base": { "value": ".25rem", "type": "dimension", "source": "$badge-border-radius" }, + "pill": { "value": "10rem", "type": "dimension", "source": "$badge-pill-border-radius" } + }, + "focus-width": { "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width" } + } + }, + "transition": { + "badge": { "value": "none", "type": "transition", "source": "$badge-transition" } + } +} diff --git a/tokens/src/components/Breadcrumb.json b/tokens/src/core/components/Breadcrumb.json similarity index 64% rename from tokens/src/components/Breadcrumb.json rename to tokens/src/core/components/Breadcrumb.json index a37867f9ef..c950f1df9b 100644 --- a/tokens/src/components/Breadcrumb.json +++ b/tokens/src/core/components/Breadcrumb.json @@ -1,17 +1,4 @@ { - "color": { - "breadcrumb": { - "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" }, - "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" }, - "divider": { "value": "{color.gray.600}", "type": "color", "source": "$breadcrumb-divider-color" }, - "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" }, - "inverse": { - "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" }, - "active": { "value": "{color.light.500}", "type": "color", "source": "$breadcrumb-inverse-active" }, - "spacer": { "value": "{color.light.700}", "type": "color", "source": "$breadcrumb-inverse-spacer" } - } - } - }, "typography": { "breadcrumb": { "font-size": { "value": "inherit", "type": "dimension", "source": "$breadcrumb-font-size" } diff --git a/tokens/src/core/components/Bubble.json b/tokens/src/core/components/Bubble.json new file mode 100644 index 0000000000..262200e665 --- /dev/null +++ b/tokens/src/core/components/Bubble.json @@ -0,0 +1,10 @@ +{ + "spacing": { + "bubble": { + "expandable-padding": { + "y": { "value": "0", "type": "transition", "source": "$bubble-expandable-padding-y" }, + "x": { "value": ".25rem", "type": "transition", "source": "$bubble-expandable-padding-x" } + } + } + } +} diff --git a/tokens/src/components/Button/core.json b/tokens/src/core/components/Button/core.json similarity index 86% rename from tokens/src/components/Button/core.json rename to tokens/src/core/components/Button/core.json index fe3f15e25b..65fe7cacf2 100644 --- a/tokens/src/components/Button/core.json +++ b/tokens/src/core/components/Button/core.json @@ -1,9 +1,4 @@ { - "color": { - "btn": { - "disabled-link": { "value": "{color.disabled}", "type": "color", "source": "$btn-link-disabled-color" } - } - }, "spacing": { "btn": { "padding": { @@ -80,23 +75,6 @@ } } }, - "elevation": { - "btn": { - "box-shadow": { - "base": { - "value": "none", - "type": "shadow", - "source": "$btn-box-shadow" - }, - "active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" } - } - } - }, - "other": { - "btn": { - "disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" } - } - }, "size": { "btn": { "border": { diff --git a/tokens/src/components/Card.json b/tokens/src/core/components/Card.json similarity index 76% rename from tokens/src/components/Card.json rename to tokens/src/core/components/Card.json index b033feaab8..19ede9bd1b 100644 --- a/tokens/src/components/Card.json +++ b/tokens/src/core/components/Card.json @@ -1,36 +1,4 @@ { - "color": { - "card": { - "base": { "value": "inherit", "type": "color", "source": "$card-color" }, - "bg": { - "base": { "value": "{color.bg.base}", "type": "color", "source": "$card-bg" }, - "dark": { "value": "{color.primary.500}", "type": "color", "source": "$card-bg-dark" }, - "muted": { "value": "{color.light.200}", "type": "color", "source": "$card-bg-muted" } - }, - "border": { - "base": { - "value": "{color.black}", - "type": "color", - "source": "$card-border-color", - "modify": [{ "type": "alpha", "amount": 0.125 }] - }, - "focus": { - "base": { - "value": "{color.black}", - "type": "color", - "source": "$card-border-focus-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] - }, - "dark": { - "value": "{color.theme.focus.primary}", - "type": "color", - "source": "$card-border-focus-color-dark" - } - } - }, - "divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" } - } - }, "spacing": { "card": { "spacer": { diff --git a/tokens/src/core/components/Carousel.json b/tokens/src/core/components/Carousel.json new file mode 100644 index 0000000000..9e4e528837 --- /dev/null +++ b/tokens/src/core/components/Carousel.json @@ -0,0 +1,37 @@ +{ + "size": { + "carousel": { + "control": { + "width": { + "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" }, + "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" } + } + }, + "indicator": { + "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" }, + "height": { + "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" }, + "area-hit": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" } + } + }, + "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" } + } + }, + "spacing": { + "carousel": { + "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" } + } + }, + "transition": { + "carousel": { + "base": { + "value": "transform {transition.carousel.duration} ease-in-out", + "type": "transition", + "source": "$carousel-transition-duration" + }, + "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" }, + "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" }, + "control": { "value": "opacity .15s ease", "type": "transition", "source": "$carousel-control-transition" } + } + } +} diff --git a/tokens/src/components/Chip.json b/tokens/src/core/components/Chip.json similarity index 55% rename from tokens/src/components/Chip.json rename to tokens/src/core/components/Chip.json index a59a1972b3..b03dd7742d 100644 --- a/tokens/src/components/Chip.json +++ b/tokens/src/core/components/Chip.json @@ -1,16 +1,4 @@ { - "color": { - "chip": { - "text": { - "light": { "value": "{color.black}", "type": "color", "source": "$chip-light-color" }, - "dark": { "value": "{color.white}", "type": "color", "source": "$chip-dark-color" } - }, - "bg": { - "light": { "value": "{color.light.500}", "type": "color", "source": "$chip-light-bg" }, - "dark": { "value": "{color.dark.200}", "type": "color", "source": "$chip-dark-bg" } - } - } - }, "spacing": { "chip": { "margin": { "value": ".125rem", "type": "dimension", "source": "$chip-margin" }, @@ -22,11 +10,6 @@ } } }, - "other": { - "chip": { - "opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" } - } - }, "size": { "chip": { "border-radius": { "value": ".25rem", "type": "dimension", "source": "$chip-border-radius" }, diff --git a/tokens/src/components/CloseButton.json b/tokens/src/core/components/CloseButton.json similarity index 56% rename from tokens/src/components/CloseButton.json rename to tokens/src/core/components/CloseButton.json index a9fbe76040..4e7eb8f879 100644 --- a/tokens/src/components/CloseButton.json +++ b/tokens/src/core/components/CloseButton.json @@ -1,7 +1,4 @@ { - "color": { - "close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" } - }, "typography": { "close-button": { "font": { @@ -13,10 +10,5 @@ } } } - }, - "elevation": { - "close-button": { - "text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow", "source": "$close-text-shadow" } - } } } diff --git a/tokens/src/components/Code.json b/tokens/src/core/components/Code.json similarity index 59% rename from tokens/src/components/Code.json rename to tokens/src/core/components/Code.json index df8b3fa31f..b8ae8bac6c 100644 --- a/tokens/src/components/Code.json +++ b/tokens/src/core/components/Code.json @@ -1,14 +1,4 @@ { - "color": { - "code": { - "base": { "value": "#E83E8C", "type": "color", "source": "$code-color" }, - "kbd": { - "base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" }, - "bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" } - }, - "pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" } - } - }, "typography": { "code": { "font-size": { "value": "87.5%", "type": "percentage", "source": "$code-font-size" }, @@ -40,16 +30,5 @@ } } } - }, - "elevation": { - "code": { - "kbd": { - "box-shadow": { - "value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)", - "type": "shadow", - "source": "$kbd-box-shadow" - } - } - } } } diff --git a/tokens/src/components/Collapsible.json b/tokens/src/core/components/Collapsible.json similarity index 100% rename from tokens/src/components/Collapsible.json rename to tokens/src/core/components/Collapsible.json diff --git a/tokens/src/components/Container.json b/tokens/src/core/components/Container.json similarity index 100% rename from tokens/src/components/Container.json rename to tokens/src/core/components/Container.json diff --git a/tokens/src/components/DataTable.json b/tokens/src/core/components/DataTable.json similarity index 63% rename from tokens/src/components/DataTable.json rename to tokens/src/core/components/DataTable.json index 152f4a5fa9..49aa1125aa 100644 --- a/tokens/src/components/DataTable.json +++ b/tokens/src/core/components/DataTable.json @@ -1,23 +1,4 @@ { - "color": { - "data-table": { - "bg": { - "base": { "value": "{color.bg.base}", "type": "color", "source": "$data-table-background-color" }, - "is-loading": { - "value": "{color.white}", - "type": "color", - "source": "$data-table-is-loading-bg", - "modify": [{ "type": "alpha", "amount": 0.7 }] - } - }, - "border": { "value": "{color.gray.200}", "type": "color", "source": "$data-table-border-color" } - } - }, - "elevation": { - "data-table": { - "box-shadow": { "value": "{elevation.box-shadow.sm}", "source": "$data-table-box-shadow", "type": "shadow" } - } - }, "size": { "data-table": { "border": { "value": "1px", "type": "dimension", "source": "$data-table-border" }, diff --git a/tokens/src/components/Dropdown.json b/tokens/src/core/components/Dropdown.json similarity index 58% rename from tokens/src/components/Dropdown.json rename to tokens/src/core/components/Dropdown.json index 6eefa5a6de..324cc4574b 100644 --- a/tokens/src/components/Dropdown.json +++ b/tokens/src/core/components/Dropdown.json @@ -1,30 +1,4 @@ { - "color": { - "dropdown": { - "text": { "value": "{color.body.base}", "type": "color", "source": "$dropdown-color" }, - "header": { "value": "{color.gray.500}", "type": "color", "source": "$dropdown-header-color" }, - "bg": { "value": "{color.bg.base}", "type": "color", "source": "$dropdown-bg" }, - "border": { - "value": "{color.black}", - "type": "color", - "source": "$dropdown-border-color", - "modify": [{ "type": "alpha", "amount": 0.15 }] - }, - "divider-bg": { "value": "{color.gray.100}", "type": "color", "source": "$dropdown-divider-bg" }, - "link": { - "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" }, - "hover": { - "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-hover-color" }, - "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" } - }, - "active": { - "base": { "value": "{color.active}", "type": "color", "source": "$dropdown-link-active-color" }, - "bg": { "value": "{color.bg.active}", "type": "color", "source": "$dropdown-link-active-bg" } - }, - "disabled": { "value": "{color.disabled}", "type": "color", "source": "$dropdown-link-disabled-color" } - } - } - }, "typography": { "dropdown": { "font-size": { @@ -82,7 +56,6 @@ }, "elevation": { "dropdown": { - "box-shadow": { "value": "0 .5rem 1rem rgba(0, 0, 0, .175)", "type": "shadow", "source": "$dropdown-box-shadow" }, "zindex": { "value": "1000", "type": "ratio", "source": "$zindex-dropdown" } } } diff --git a/tokens/src/components/Dropzone.json b/tokens/src/core/components/Dropzone.json similarity index 50% rename from tokens/src/components/Dropzone.json rename to tokens/src/core/components/Dropzone.json index a86d0d53ec..9c18a92a5a 100644 --- a/tokens/src/components/Dropzone.json +++ b/tokens/src/core/components/Dropzone.json @@ -1,21 +1,4 @@ { - "color": { - "dropzone": { - "error-wrapper": { - "value": "{color.danger.500}", "type": "color", "source": "$dropzone-error-wrapper-color" - }, - "restriction-msg": { - "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color" - }, - "border": { - "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" }, - "hover": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-hover" }, - "focus": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-focus" }, - "active": { "value": "{color.primary.500}", "type": "color", "source": "$dropzone-border-color-active" }, - "error": { "value": "{color.danger.300}", "type": "color", "source": "$dropzone-border-color-error" } - } - } - }, "typography": { "dropzone": { "restriction-msg": { diff --git a/tokens/src/core/components/Form/other.json b/tokens/src/core/components/Form/other.json new file mode 100644 index 0000000000..ab373d0b03 --- /dev/null +++ b/tokens/src/core/components/Form/other.json @@ -0,0 +1,10 @@ +{ + "other": { + "form": { + "control": { + "cursor": { "value": "auto", "type": "cursorStyle", "source": "$custom-control-cursor" }, + "range-track-cursor": { "value": "pointer", "type": "cursorStyle", "source": "$custom-range-track-cursor" } + } + } + } +} diff --git a/tokens/src/components/Form/size.json b/tokens/src/core/components/Form/size.json similarity index 100% rename from tokens/src/components/Form/size.json rename to tokens/src/core/components/Form/size.json diff --git a/tokens/src/components/Form/spacing.json b/tokens/src/core/components/Form/spacing.json similarity index 100% rename from tokens/src/components/Form/spacing.json rename to tokens/src/core/components/Form/spacing.json diff --git a/tokens/src/components/Form/transition.json b/tokens/src/core/components/Form/transition.json similarity index 100% rename from tokens/src/components/Form/transition.json rename to tokens/src/core/components/Form/transition.json diff --git a/tokens/src/components/Form/typography.json b/tokens/src/core/components/Form/typography.json similarity index 100% rename from tokens/src/components/Form/typography.json rename to tokens/src/core/components/Form/typography.json diff --git a/tokens/src/components/Icon.json b/tokens/src/core/components/Icon.json similarity index 100% rename from tokens/src/components/Icon.json rename to tokens/src/core/components/Icon.json diff --git a/tokens/src/core/components/IconButton.json b/tokens/src/core/components/IconButton.json new file mode 100644 index 0000000000..9e328e5c58 --- /dev/null +++ b/tokens/src/core/components/IconButton.json @@ -0,0 +1,15 @@ +{ + "size": { + "icon-button": { + "diameter": { + "md": { "value": "2.75rem", "type": "dimension", "source": "$btn-icon-diameter-md" }, + "sm": { "value": "2.25rem", "type": "dimension", "source": "$btn-icon-diameter-sm" }, + "inline": { + "value": "calc({typography.line-height.base} + .1em)", + "type": "dimension", + "source": "$btn-icon-diameter-inline" + } + } + } + } +} diff --git a/tokens/src/components/Image.json b/tokens/src/core/components/Image.json similarity index 55% rename from tokens/src/components/Image.json rename to tokens/src/core/components/Image.json index 8cde6871ea..5e388523de 100644 --- a/tokens/src/components/Image.json +++ b/tokens/src/core/components/Image.json @@ -1,13 +1,4 @@ { - "color": { - "image": { - "figure-caption": { "value": "{color.gray.500}", "type": "color", "source": "$figure-caption-color" }, - "thumbnail": { - "bg": { "value": "{color.body.bg}", "type": "color", "source": "$thumbnail-bg" }, - "border": { "value": "{color.gray.200}", "type": "color", "source": "$thumbnail-border-color" } - } - } - }, "typography": { "image": { "figure-caption": { @@ -15,13 +6,6 @@ } } }, - "elevation": { - "image": { - "thumbnail": { - "box-shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$thumbnail-box-shadow" } - } - } - }, "size": { "image": { "thumbnail": { diff --git a/tokens/src/components/Modal.json b/tokens/src/core/components/Modal.json similarity index 67% rename from tokens/src/components/Modal.json rename to tokens/src/core/components/Modal.json index 425392f2b8..a8322e6484 100644 --- a/tokens/src/components/Modal.json +++ b/tokens/src/core/components/Modal.json @@ -1,29 +1,6 @@ { - "color": { - "modal": { - "content": { - "bg": { "value": "{color.bg.base}", "type": "color", "source": "$modal-content-bg" }, - "border": { - "value": "{color.black}", - "type": "color", - "source": "$modal-content-border-color", - "modify": [{ "type": "alpha", "amount": 0.2 }] - } - }, - "backdrop-bg": { "value": "{color.black}", "type": "color", "source": "$modal-backdrop-bg" } - } - }, "elevation": { "modal": { - "content": { - "box-shadow": { - "sm-up": { - "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)", - "type": "shadow", - "source": "$modal-content-box-shadow-sm-up" - } - } - }, "backdrop-zindex": { "value": "1040", "type": "ratio", "source": "$zindex-modal-backdrop" }, "zindex": { "value": "1050", "type": "ratio", "source": "$zindex-modal" } } @@ -66,10 +43,5 @@ }, "dialog-margin": { "value": "1.5rem", "type": "dimension", "source": "$modal-dialog-margin" } } - }, - "other": { - "modal": { - "opacity": { "value": ".5", "type": "ratio", "source": "$modal-backdrop-opacity" } - } } } diff --git a/tokens/src/core/components/Nav.json b/tokens/src/core/components/Nav.json new file mode 100644 index 0000000000..c9d5d2a0e8 --- /dev/null +++ b/tokens/src/core/components/Nav.json @@ -0,0 +1,35 @@ +{ + "typography": { + "nav": { + "link": { + "font-weight": { "value": "500", "type": "fontWeight", "source": "$nav-link-font-weight" } + } + } + }, + "size": { + "nav": { + "pills": { + "border-radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$nav-pills-border-radius" } + }, + "tabs": { + "border": { + "width": { "value": "2px", "type": "dimension", "source": "$nav-tabs-border-width" }, + "radius": { "value": "0", "type": "dimension", "source": "$nav-tabs-border-radius" } + } + } + } + }, + "spacing": { + "nav": { + "link": { + "padding": { + "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" }, + "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" } + } + }, + "divider": { + "margin-y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y" } + } + } + } +} diff --git a/tokens/src/core/components/Navbar.json b/tokens/src/core/components/Navbar.json new file mode 100644 index 0000000000..4dd3062b49 --- /dev/null +++ b/tokens/src/core/components/Navbar.json @@ -0,0 +1,70 @@ +{ + "spacing": { + "navbar": { + "padding": { + "y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$navbar-padding-y" }, + "x": { + "base": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$navbar-padding-x" }, + "nav-link": { "value": ".5rem", "type": "dimension", "source": "$navbar-nav-link-padding-x" } + } + }, + "brand": { + "padding": { + "y": { + "value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)", + "type": "dimension", + "source": "$navbar-brand-padding-y" + } + } + }, + "toggler": { + "padding": { + "y": { "value": ".25rem", "type": "dimension", "source": "$navbar-toggler-padding-y" }, + "x": { "value": ".75rem", "type": "dimension", "source": "$navbar-toggler-padding-x" } + } + } + } + }, + "typography": { + "navbar": { + "brand": { + "font-size": { + "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-brand-font-size" + } + }, + "nav-link": { + "height": { + "value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)", + "type": "dimension", + "source": "$nav-link-height" + } + }, + "toggler": { + "font-size": { + "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-toggler-font-size" + } + } + } + }, + "size": { + "navbar": { + "nav": { + "scroll": { + "max-height": { "value": "75vh", "type": "dimension", "source": "$navbar-nav-scroll-max-height" } + } + }, + "brand": { + "height": { + "value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})", + "type": "dimension", + "source": "$navbar-brand-height" + } + }, + "toggler": { + "border-radius": { + "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$navbar-toggler-border-radius" + } + } + } + } +} diff --git a/tokens/src/components/Pagination.json b/tokens/src/core/components/Pagination.json similarity index 58% rename from tokens/src/components/Pagination.json rename to tokens/src/core/components/Pagination.json index b3dc52c728..f2df597042 100644 --- a/tokens/src/components/Pagination.json +++ b/tokens/src/core/components/Pagination.json @@ -1,35 +1,4 @@ { - "color": { - "pagination": { - "text": { - "base": { "value": "{color.link.base}", "type": "color", "source": "$pagination-color" }, - "inverse": { "value": "{color.white}", "type": "color", "source": "$pagination-color-inverse" }, - "hover": { "value": "{color.link.hover}", "type": "color", "source": "$pagination-hover-color" }, - "active": { "value": "{color.active}", "type": "color", "source": "$pagination-active-color" }, - "disabled": { "value": "{color.disabled}", "type": "color", "source": "$pagination-disabled-color" } - }, - "bg": { - "base": { "value": "{color.bg.base}", "type": "color", "source": "$pagination-bg" }, - "hover": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-hover-bg" }, - "active": { "value": "{color.bg.active}", "type": "color", "source": "$pagination-active-bg" }, - "disabled": { "value": "{color.white}", "type": "color", "source": "$pagination-disabled-bg" } - }, - "border": { - "base": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-border-color" }, - "hover": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-hover-border-color" }, - "active": { - "value": "{color.pagination.bg.active}", "type": "color", "source": "$pagination-active-border-color" - }, - "disabled": { - "value": "{color.gray.100}", "type": "color", "source": "$pagination-disabled-border-color" - } - }, - "focus": { - "base": { "value": "{color.primary.500}", "type": "color", "source": "$pagination-focus-color" }, - "text": { "value": "{color.black}", "type": "color", "source": "$pagination-focus-color-text" } - } - } - }, "typography": { "pagination": { "font-size": { @@ -97,16 +66,5 @@ "outline": { "value": "0", "type": "dimension", "source": "$pagination-focus-outline" } } } - }, - "elevation": { - "pagination": { - "focus": { - "box-shadow": { - "value": "{elevation.input.btn-focus.box-shadow}", - "type": "shadow", - "source": "$pagination-focus-box-shadow" - } - } - } } } diff --git a/tokens/src/core/components/Popover.json b/tokens/src/core/components/Popover.json new file mode 100644 index 0000000000..b2f2c7e929 --- /dev/null +++ b/tokens/src/core/components/Popover.json @@ -0,0 +1,48 @@ +{ + "typography": { + "popover": { + "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$popover-font-size" } + } + }, + "size": { + "popover": { + "max-width": { "value": "480px", "type": "dimension", "source": "$popover-max-width" }, + "border": { + "width": { "value": "{size.border.width}", "type": "dimension", "source": "$popover-border-width" }, + "radius": { "value": "{size.border.radius.sm}", "type": "dimension", "source": "$popover-border-radius" } + }, + "icon": { + "height": { "value": "1rem", "type": "dimension", "source": "$popover-icon-height" }, + "width": { "value": "1rem", "type": "dimension", "source": "$popover-icon-width" } + }, + "arrow": { + "width": { "value": "1rem", "type": "dimension", "source": "$popover-arrow-width" }, + "height": { "value": ".5rem", "type": "dimension", "source": "$popover-arrow-height" } + } + } + }, + "elevation": { + "popover": { + "zindex": { "value": "1060", "type": "ratio", "source": "$zindex-popover" } + } + }, + "spacing": { + "popover": { + "header": { + "padding": { + "y": { "value": ".5rem", "type": "dimension", "source": "$popover-header-padding-y" }, + "x": { "value": "1rem", "type": "dimension", "source": "$popover-header-padding-x" } + } + }, + "body": { + "padding": { + "y": { "value": "{spacing.popover.header.padding.y}", "type": "dimension", "source": "$popover-body-padding-y" }, + "x": { "value": "{spacing.popover.header.padding.x}", "type": "dimension", "source": "$popover-body-padding-x" } + } + }, + "icon": { + "margin-right": { "value": ".5rem", "type": "dimension", "source": "$popover-icon-margin-right" } + } + } + } +} diff --git a/tokens/src/components/ProductTour.json b/tokens/src/core/components/ProductTour.json similarity index 51% rename from tokens/src/components/ProductTour.json rename to tokens/src/core/components/ProductTour.json index 50baac986a..49604949c5 100644 --- a/tokens/src/components/ProductTour.json +++ b/tokens/src/core/components/ProductTour.json @@ -1,34 +1,4 @@ { - "color": { - "product-tour": { - "checkpoint": { - "bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" }, - "body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" }, - "border": { "value": "{color.brand.500}", "type": "color", "source": "$checkpoint-border-color" }, - "breadcrumb": { "value": "{color.primary.500}", "type": "color", "source": "$checkpoint-breadcrumb-color" }, - "box-shadow": { - "value": "{color.black}", - "type": "color", - "source": "$checkpoint-box-shadow-color", - "modify": [{ "type": "alpha", "amount": 0.3 }] - }, - "arrow": { - "border": { - "top": { - "value": "{color.product-tour.checkpoint.bg}", - "type": "color", - "source": "$checkpoint-arrow-border-top-color" - }, - "transparent": { - "value": "transparent", - "type": "color", - "source": "$checkpoint-arrow-border-color-transparent" - } - } - } - } - } - }, "size": { "product-tour": { "checkpoint": { diff --git a/tokens/src/components/ProgressBar.json b/tokens/src/core/components/ProgressBar.json similarity index 71% rename from tokens/src/components/ProgressBar.json rename to tokens/src/core/components/ProgressBar.json index 5b90879298..299edaae47 100644 --- a/tokens/src/components/ProgressBar.json +++ b/tokens/src/core/components/ProgressBar.json @@ -1,17 +1,4 @@ { - "color": { - "progress-bar": { - "bg": { "value": "transparent", "type": "color", "source": "$progress-bg" }, - "border": { "value": "{color.gray.500}", "type": "color", "source": "$progress-bar-border-color" }, - "bar": { - "base": { "value": "{color.white}", "type": "color", "source": "$progress-bar-color" }, - "bg": { - "base": { "value": "{color.accent.a}", "type": "color", "source": "$progress-bar-bg" }, - "annotated": { "value": "{color.dark.500}", "type": "color", "source": "$annotated-progress-bar-bg" } - } - } - } - }, "typography": { "progress-bar": { "font-size": { diff --git a/tokens/src/core/components/SearchField.json b/tokens/src/core/components/SearchField.json new file mode 100644 index 0000000000..75eb4ec290 --- /dev/null +++ b/tokens/src/core/components/SearchField.json @@ -0,0 +1,23 @@ +{ + "size": { + "search-field": { + "border": { + "width": { + "base": { "value": ".0625rem", "type": "dimension", "source": "$search-border-width" }, + "focus": { "value": ".3125rem", "type": "dimension", "source": "$search-border-focus-width" } + }, + "radius": { "value": "0", "type": "dimension", "source": "$search-border-radius" } + }, + "search-input-height": { + "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", + "type": "dimension", + "source": "$input-height-search" + } + } + }, + "spacing": { + "search-field": { + "margin-button": { "value": ".5rem", "type": "dimension", "source": "$search-button-margin" } + } + } +} diff --git a/tokens/src/components/SelectableBox.json b/tokens/src/core/components/SelectableBox.json similarity index 100% rename from tokens/src/components/SelectableBox.json rename to tokens/src/core/components/SelectableBox.json diff --git a/tokens/src/core/components/Sheet.json b/tokens/src/core/components/Sheet.json new file mode 100644 index 0000000000..86b7358b82 --- /dev/null +++ b/tokens/src/core/components/Sheet.json @@ -0,0 +1,10 @@ +{ + "elevation": { + "sheet": { + "zindex": { + "backdrop": { "value": "1031", "type": "ratio", "source": "$zindex-sheet-backdrop" }, + "main": { "value": "1032", "type": "ratio", "source": "$zindex-sheet" } + } + } + } +} diff --git a/tokens/src/components/Spinner.json b/tokens/src/core/components/Spinner.json similarity index 100% rename from tokens/src/components/Spinner.json rename to tokens/src/core/components/Spinner.json diff --git a/tokens/src/components/Stack.json b/tokens/src/core/components/Stack.json similarity index 100% rename from tokens/src/components/Stack.json rename to tokens/src/core/components/Stack.json diff --git a/tokens/src/core/components/Sticky.json b/tokens/src/core/components/Sticky.json new file mode 100644 index 0000000000..9246a1e8d4 --- /dev/null +++ b/tokens/src/core/components/Sticky.json @@ -0,0 +1,7 @@ +{ + "spacing": { + "sticky": { + "offset": { "value": "0", "type": "dimension", "source": "$sticky-offset" } + } + } +} diff --git a/tokens/src/components/Tabs.json b/tokens/src/core/components/Tabs.json similarity index 100% rename from tokens/src/components/Tabs.json rename to tokens/src/core/components/Tabs.json diff --git a/tokens/src/core/components/Toast.json b/tokens/src/core/components/Toast.json new file mode 100644 index 0000000000..c375011455 --- /dev/null +++ b/tokens/src/core/components/Toast.json @@ -0,0 +1,30 @@ +{ + "typography": { + "toast": { + "font-size": { "value": ".875rem", "type": "dimension", "source": "$toast-font-size" } + } + }, + "size": { + "toast": { + "max-width": { "value": "400px", "type": "dimension", "source": "$toast-max-width" }, + "border": { + "width": { "value": "1px", "type": "dimension", "source": "$toast-border-width" }, + "radius": { "value": ".25rem", "type": "dimension", "source": "$toast-border-radius" } + } + } + }, + "spacing": { + "toast": { + "padding": { + "x": { "value": ".75rem", "type": "dimension", "source": "$toast-padding-x" }, + "y": { "value": ".25rem", "type": "dimension", "source": "$toast-padding-y" } + }, + "container": { + "gutter": { + "lg": { "value": "1.25rem", "type": "dimension", "source": "$toast-container-gutter-lg" }, + "sm": { "value": ".625rem", "type": "dimension", "source": "$toast-container-gutter-sm" } + } + } + } + } +} diff --git a/tokens/src/components/Tooltip.json b/tokens/src/core/components/Tooltip.json similarity index 52% rename from tokens/src/components/Tooltip.json rename to tokens/src/core/components/Tooltip.json index 2207ee23eb..664263b894 100644 --- a/tokens/src/components/Tooltip.json +++ b/tokens/src/core/components/Tooltip.json @@ -4,20 +4,6 @@ "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$tooltip-font-size" } } }, - "color": { - "tooltip": { - "text": { "value": "{color.white}", "type": "color", "source": "$tooltip-color" }, - "light": { "value": "{color.black}", "type": "color", "source": "$tooltip-color-light" }, - "bg": { - "base": { "value": "{color.black}", "type": "color", "source": "$tooltip-bg" }, - "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-bg-light" } - }, - "arrow": { - "base": { "value": "{color.tooltip.bg.base}", "type": "color", "source": "$tooltip-arrow-color" }, - "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-arrow-color-light" } - } - } - }, "spacing": { "tooltip": { "padding": { @@ -29,11 +15,6 @@ }, "elevation": { "tooltip": { - "box-shadow": { - "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", - "type": "shadow", - "source": "$tooltip-box-shadow" - }, "zindex": { "value": "1070", "type": "ratio", "source": "$zindex-tooltip" } } }, @@ -48,10 +29,5 @@ "value": "{size.border.radius.base}", "type": "dimension", "source": "$tooltip-border-radius" } } - }, - "other": { - "tooltip": { - "opacity": { "value": "1", "type": "ratio", "source": "$tooltip-opacity" } - } } } diff --git a/tokens/src/components/general/caret.json b/tokens/src/core/components/general/caret.json similarity index 100% rename from tokens/src/components/general/caret.json rename to tokens/src/core/components/general/caret.json diff --git a/tokens/src/components/general/headings.json b/tokens/src/core/components/general/headings.json similarity index 80% rename from tokens/src/components/general/headings.json rename to tokens/src/core/components/general/headings.json index 4bcc184689..045e188af2 100644 --- a/tokens/src/components/general/headings.json +++ b/tokens/src/core/components/general/headings.json @@ -1,9 +1,4 @@ { - "color": { - "headings": { - "base": { "value": "{color.black}", "type": "color", "source": "$headings-color" } - } - }, "typography": { "headings": { "font": { diff --git a/tokens/src/components/general/hr.json b/tokens/src/core/components/general/hr.json similarity index 55% rename from tokens/src/components/general/hr.json rename to tokens/src/core/components/general/hr.json index 38e328347c..2bb05ca012 100644 --- a/tokens/src/components/general/hr.json +++ b/tokens/src/core/components/general/hr.json @@ -6,15 +6,5 @@ "margin-y": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$hr-margin-y" } } } - }, - "color": { - "hr": { - "border": { - "value": "{color.black}", - "type": "color", - "source": "$hr-border-color", - "modify": [{ "type": "alpha", "amount": 0.1 }] - } - } } } diff --git a/tokens/src/components/general/input.json b/tokens/src/core/components/general/input.json similarity index 82% rename from tokens/src/components/general/input.json rename to tokens/src/core/components/general/input.json index 06a11d4a92..821dc85692 100644 --- a/tokens/src/components/general/input.json +++ b/tokens/src/core/components/general/input.json @@ -1,9 +1,4 @@ { - "color": { - "input": { - "btn-focus": { "value": "{color.input.focus}", "type": "color", "source": "$input-btn-focus-color" } - } - }, "typography": { "input": { "btn": { @@ -52,16 +47,5 @@ "focus-width": { "value": "1px", "type": "dimension", "source": "$input-btn-focus-width" } } } - }, - "elevation": { - "input": { - "btn-focus": { - "box-shadow": { - "value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}", - "type": "shadow", - "source": "$input-btn-focus-box-shadow" - } - } - } } } diff --git a/tokens/src/core/components/general/link.json b/tokens/src/core/components/general/link.json new file mode 100644 index 0000000000..bb48968eb1 --- /dev/null +++ b/tokens/src/core/components/general/link.json @@ -0,0 +1,30 @@ +{ + "typography": { + "link": { + "decoration": { + "base": { "value": "none", "type": "textDecoration", "source": "$link-decoration" }, + "hover": { "value": "underline", "type": "textDecoration", "source": "$link-hover-decoration" }, + "inline": { + "base": { "value": "underline", "type": "textDecoration", "source": "$inline-link-decoration" }, + "hover": { "value": "underline", "type": "textDecoration", "source": "$inline-link-hover-decoration" } + }, + "muted": { + "base": { "value": "none", "type": "textDecoration", "source": "$muted-link-decoration" }, + "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-link-hover-decoration" }, + "inline": { + "base": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-decoration" }, + "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-hover-decoration" } + } + }, + "brand": { + "base": { "value": "none", "type": "textDecoration", "source": "$brand-link-decoration" }, + "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-link-hover-decoration" }, + "inline": { + "base": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-decoration" }, + "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-hover-decoration" } + } + } + } + } + } +} diff --git a/tokens/src/core/components/general/list.json b/tokens/src/core/components/general/list.json new file mode 100644 index 0000000000..1b946b49d5 --- /dev/null +++ b/tokens/src/core/components/general/list.json @@ -0,0 +1,26 @@ +{ + "typography": { + "dt": { + "font-weight": { "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$dt-font-weight" } + } + }, + "spacing": { + "list": { + "inline-padding": { "value": ".5rem", "type": "dimension", "source": "$list-inline-padding" }, + "group-item": { + "padding": { + "y": { "value": ".75rem", "type": "dimension", "source": "$list-group-item-padding-y" }, + "x": { "value": "1.25rem", "type": "dimension", "source": "$list-group-item-padding-x" } + } + } + } + }, + "size": { + "list-group": { + "border": { + "width": { "value": "{size.border.width}", "type": "dimension", "source": "$list-group-border-width" }, + "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$list-group-border-radius" } + } + } + } +} diff --git a/tokens/src/components/general/text.json b/tokens/src/core/components/general/text.json similarity index 77% rename from tokens/src/components/general/text.json rename to tokens/src/core/components/general/text.json index 6fb012fb1e..c1104eb1bf 100644 --- a/tokens/src/components/general/text.json +++ b/tokens/src/core/components/general/text.json @@ -1,8 +1,4 @@ { - "color": { - "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" }, - "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" } - }, "spacing": { "paragraph": { "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$paragraph-margin-bottom" } diff --git a/tokens/src/global/breakpoints.json b/tokens/src/core/global/breakpoints.json similarity index 100% rename from tokens/src/global/breakpoints.json rename to tokens/src/core/global/breakpoints.json diff --git a/tokens/src/global/display.json b/tokens/src/core/global/display.json similarity index 100% rename from tokens/src/global/display.json rename to tokens/src/core/global/display.json diff --git a/tokens/src/core/global/elevation.json b/tokens/src/core/global/elevation.json new file mode 100644 index 0000000000..68af5d638c --- /dev/null +++ b/tokens/src/core/global/elevation.json @@ -0,0 +1,19 @@ +{ + "elevation": { + "zindex": { + "0": { "value": 0, "type": "ratio" }, + "200": { "value": 200, "type": "ratio" }, + "400": { "value": 400, "type": "ratio" }, + "600": { "value": 600, "type": "ratio" }, + "800": { "value": 800, "type": "ratio" }, + "1000": { "value": 1000, "type": "ratio" }, + "1200": { "value": 1200, "type": "ratio" }, + "1400": { "value": 1400, "type": "ratio" }, + "1600": { "value": 1600, "type": "ratio" }, + "1800": { "value": 1800, "type": "ratio" }, + "2000": { "value": 2000, "type": "ratio" }, + "sticky": { "value": 1020, "source": "$zindex-sticky", "type": "ratio" }, + "fixed": { "value": 1030, "source": "$zindex-fixed", "type": "ratio" } + } + } +} diff --git a/tokens/src/global/other.json b/tokens/src/core/global/other.json similarity index 68% rename from tokens/src/global/other.json rename to tokens/src/core/global/other.json index 4b9aa0d167..34c490f1c5 100644 --- a/tokens/src/global/other.json +++ b/tokens/src/core/global/other.json @@ -1,6 +1,4 @@ { - "yiq-text-dark": "#454545", - "yiq-text-light": "#FFFFFF", "yiq-contrasted-threshold": 150, "theme-interval": { "value": "8%", "type": "percentage", "source": "$theme-color-interval" } } diff --git a/tokens/src/global/spacing.json b/tokens/src/core/global/spacing.json similarity index 100% rename from tokens/src/global/spacing.json rename to tokens/src/core/global/spacing.json diff --git a/tokens/src/global/transition.json b/tokens/src/core/global/transition.json similarity index 100% rename from tokens/src/global/transition.json rename to tokens/src/core/global/transition.json diff --git a/tokens/src/global/typography.json b/tokens/src/core/global/typography.json similarity index 100% rename from tokens/src/global/typography.json rename to tokens/src/core/global/typography.json diff --git a/tokens/src/utilities/color.json b/tokens/src/core/utilities/color.json similarity index 100% rename from tokens/src/utilities/color.json rename to tokens/src/core/utilities/color.json diff --git a/tokens/src/alias/color.json b/tokens/src/themes/light/alias/color.json similarity index 100% rename from tokens/src/alias/color.json rename to tokens/src/themes/light/alias/color.json diff --git a/tokens/src/components/Alert.json b/tokens/src/themes/light/components/Alert.json similarity index 62% rename from tokens/src/components/Alert.json rename to tokens/src/themes/light/components/Alert.json index 6e2b4b4328..1ccd3bbfac 100644 --- a/tokens/src/components/Alert.json +++ b/tokens/src/themes/light/components/Alert.json @@ -1,26 +1,4 @@ { - "spacing": { - "alert": { - "padding": { - "y": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-y" }, - "x": { "value": "1.5rem", "type": "dimension", "source": "$alert-padding-x" } - }, - "margin-bottom": { "value": "1rem", "type": "dimension", "source": "$alert-margin-bottom" }, - "actions-gap": { "value": "{spacing.spacer.3}", "type": "dimension", "source": "$alert-actions-gap" }, - "icon-space": { "value": ".8rem", "type": "dimension", "source": "$alert-icon-space" } - } - }, - "typography": { - "alert": { - "font": { - "weight-link": { - "value": "{typography.font.weight.normal}", "type": "fontWeight", "source": "$alert-link-font-weight" - }, - "size": { "value": ".875rem", "type": "dimension", "source": "$alert-font-size" } - }, - "line-height": { "value": "1.5rem", "type": "dimension", "source": "$alert-line-height" } - } - }, "color": { "alert": { "title": { "value": "{color.black}", "type": "color", "source": "$alert-title-color" }, @@ -65,13 +43,5 @@ "source": "$alert-box-shadow" } } - }, - "size": { - "alert": { - "border": { - "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$alert-border-radius" }, - "width": { "value": "0", "type": "dimension", "source": "$alert-border-width" } - } - } } } diff --git a/tokens/src/components/Annotation.json b/tokens/src/themes/light/components/Annotation.json similarity index 58% rename from tokens/src/components/Annotation.json rename to tokens/src/themes/light/components/Annotation.json index 2c072afe28..24db7e10c9 100644 --- a/tokens/src/components/Annotation.json +++ b/tokens/src/themes/light/components/Annotation.json @@ -1,12 +1,4 @@ { - "spacing": { - "annotation": { - "padding": { "value": ".5rem", "type": "dimension", "source": "$annotation-padding" }, - "arrow-side": { - "margin": { "value": ".25rem", "type": "dimension", "source": "$annotation-arrow-side-margin" } - } - } - }, "elevation": { "annotation": { "box-shadow": { @@ -16,14 +8,6 @@ } } }, - "typography": { - "annotation": { - "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$annotation-font-size" }, - "line-height": { - "value": "{typography.line-height.sm}", "type": "dimension", "source": "$annotation-line-height" - } - } - }, "color": { "annotation": { "text": { @@ -41,14 +25,5 @@ "dark": { "value": "{color.dark.base}", "type": "color", "source": "$annotation-dark-bg"} } } - }, - "size": { - "annotation": { - "arrow-border": { - "width": { "value": ".5rem", "type": "dimension", "source": "$annotation-arrow-border-width" } - }, - "max-width": { "value": "18.75rem", "type": "dimension", "source": "$annotation-max-width" }, - "border-radius": { "value": ".25rem", "type": "dimension", "source": "$annotation-border-radius" } - } } } diff --git a/tokens/src/themes/light/components/Avatar.json b/tokens/src/themes/light/components/Avatar.json new file mode 100644 index 0000000000..0e48a0a4d5 --- /dev/null +++ b/tokens/src/themes/light/components/Avatar.json @@ -0,0 +1,7 @@ +{ + "color": { + "avatar": { + "border": { "value": "{color.light.300}", "type": "color", "source": "$avatar-color-border" } + } + } +} diff --git a/tokens/src/components/Badge.json b/tokens/src/themes/light/components/Badge.json similarity index 86% rename from tokens/src/components/Badge.json rename to tokens/src/themes/light/components/Badge.json index dab6a7613b..6ff6e21587 100644 --- a/tokens/src/components/Badge.json +++ b/tokens/src/themes/light/components/Badge.json @@ -1,25 +1,4 @@ { - "spacing": { - "badge": { - "padding": { - "x": { - "base": { "value": ".5rem", "type": "dimension", "source": "$badge-padding-x" }, - "pill": { "value": ".6em", "type": "dimension", "source": "$badge-pill-padding-x" } - }, - "y": { "value": ".125rem", "type": "dimension", "source": "$badge-padding-y" } - } - } - }, - "typography": { - "badge": { - "font": { - "size": { "value": "75%", "type": "percentage", "source": "$badge-font-size" }, - "weight": { - "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$badge-font-weight" - } - } - } - }, "color": { "badge": { "text": { @@ -203,19 +182,5 @@ } } } - }, - "size": { - "badge": { - "border-radius": { - "base": { "value": ".25rem", "type": "dimension", "source": "$badge-border-radius" }, - "pill": { "value": "10rem", "type": "dimension", "source": "$badge-pill-border-radius" } - }, - "focus-width": { - "value": "{size.input.btn.focus-width}", "type": "dimension", "source": "$badge-focus-width" - } - } - }, - "transition": { - "badge": { "value": "none", "type": "transition", "source": "$badge-transition" } } } diff --git a/tokens/src/themes/light/components/Breadcrumb.json b/tokens/src/themes/light/components/Breadcrumb.json new file mode 100644 index 0000000000..eb64650215 --- /dev/null +++ b/tokens/src/themes/light/components/Breadcrumb.json @@ -0,0 +1,15 @@ +{ + "color": { + "breadcrumb": { + "bg": { "value": "{color.gray.200}", "type": "color", "source": "$breadcrumb-bg" }, + "base": { "value": "{color.primary.500}", "type": "color", "source": "$breadcrumb-color" }, + "divider": { "value": "{color.gray.600}", "type": "color", "source": "$breadcrumb-divider-color" }, + "active": { "value": "{color.gray.500}", "type": "color", "source": "$breadcrumb-active-color" }, + "inverse": { + "base": { "value": "{color.white}", "type": "color", "source": "$breadcrumb-inverse-color" }, + "active": { "value": "{color.light.500}", "type": "color", "source": "$breadcrumb-inverse-active" }, + "spacer": { "value": "{color.light.700}", "type": "color", "source": "$breadcrumb-inverse-spacer" } + } + } + } +} diff --git a/tokens/src/components/Bubble.json b/tokens/src/themes/light/components/Bubble.json similarity index 51% rename from tokens/src/components/Bubble.json rename to tokens/src/themes/light/components/Bubble.json index 617285b4f0..b69eaec093 100644 --- a/tokens/src/components/Bubble.json +++ b/tokens/src/themes/light/components/Bubble.json @@ -2,25 +2,17 @@ "color": { "bubble": { "text": { - "success": { "value": "{color.white}", "type": "color", "source": "$bubble-success-color"}, - "warning": { "value": "{color.white}", "type": "color", "source": "$bubble-warning-color"}, - "error": { "value": "{color.white}", "type": "color", "source": "$bubble-error-color"}, - "primary": { "value": "{color.white}", "type": "color", "source": "$bubble-primary-color"} + "success": { "value": "{color.white}", "type": "color", "source": "$bubble-success-color" }, + "warning": { "value": "{color.white}", "type": "color", "source": "$bubble-warning-color" }, + "error": { "value": "{color.white}", "type": "color", "source": "$bubble-error-color" }, + "primary": { "value": "{color.white}", "type": "color", "source": "$bubble-primary-color" } }, "bg": { - "success": { "value": "{color.success.base}", "type": "color", "source": "$bubble-success-bg"}, - "warning": { "value": "{color.warning.base}", "type": "color", "source": "$bubble-warning-bg"}, - "error": { "value": "{color.danger.base}", "type": "color", "source": "$bubble-error-bg"}, - "primary": { "value": "{color.primary.base}", "type": "color", "source": "$bubble-primary-bg"} + "success": { "value": "{color.success.base}", "type": "color", "source": "$bubble-success-bg" }, + "warning": { "value": "{color.warning.base}", "type": "color", "source": "$bubble-warning-bg" }, + "error": { "value": "{color.danger.base}", "type": "color", "source": "$bubble-error-bg" }, + "primary": { "value": "{color.primary.base}", "type": "color", "source": "$bubble-primary-bg" } } } - }, - "spacing": { - "bubble": { - "expandable-padding": { - "y": { "value": "0", "type": "dimension", "source": "$bubble-expandable-padding-y" }, - "x": { "value": ".25rem", "type": "dimension", "source": "$bubble-expandable-padding-x" } - } - } } } diff --git a/tokens/src/components/Button/brand.json b/tokens/src/themes/light/components/Button/brand.json similarity index 100% rename from tokens/src/components/Button/brand.json rename to tokens/src/themes/light/components/Button/brand.json diff --git a/tokens/src/themes/light/components/Button/core.json b/tokens/src/themes/light/components/Button/core.json new file mode 100644 index 0000000000..8eabdf63ae --- /dev/null +++ b/tokens/src/themes/light/components/Button/core.json @@ -0,0 +1,24 @@ +{ + "color": { + "btn": { + "disabled-link": { "value": "{color.disabled}", "type": "color", "source": "$btn-link-disabled-color" } + } + }, + "elevation": { + "btn": { + "box-shadow": { + "base": { + "value": "none", + "type": "shadow", + "source": "$btn-box-shadow" + }, + "active": { "value": "none", "type": "shadow", "source": "$btn-active-box-shadow" } + } + } + }, + "other": { + "btn": { + "disabled-opacity": { "value": ".65", "type": "ratio", "source": "$btn-disabled-opacity" } + } + } +} diff --git a/tokens/src/components/Button/danger.json b/tokens/src/themes/light/components/Button/danger.json similarity index 100% rename from tokens/src/components/Button/danger.json rename to tokens/src/themes/light/components/Button/danger.json diff --git a/tokens/src/components/Button/dark.json b/tokens/src/themes/light/components/Button/dark.json similarity index 100% rename from tokens/src/components/Button/dark.json rename to tokens/src/themes/light/components/Button/dark.json diff --git a/tokens/src/components/Button/info.json b/tokens/src/themes/light/components/Button/info.json similarity index 100% rename from tokens/src/components/Button/info.json rename to tokens/src/themes/light/components/Button/info.json diff --git a/tokens/src/components/Button/light.json b/tokens/src/themes/light/components/Button/light.json similarity index 100% rename from tokens/src/components/Button/light.json rename to tokens/src/themes/light/components/Button/light.json diff --git a/tokens/src/components/Button/primary.json b/tokens/src/themes/light/components/Button/primary.json similarity index 100% rename from tokens/src/components/Button/primary.json rename to tokens/src/themes/light/components/Button/primary.json diff --git a/tokens/src/components/Button/secondary.json b/tokens/src/themes/light/components/Button/secondary.json similarity index 100% rename from tokens/src/components/Button/secondary.json rename to tokens/src/themes/light/components/Button/secondary.json diff --git a/tokens/src/components/Button/success.json b/tokens/src/themes/light/components/Button/success.json similarity index 100% rename from tokens/src/components/Button/success.json rename to tokens/src/themes/light/components/Button/success.json diff --git a/tokens/src/components/Button/tertiary.json b/tokens/src/themes/light/components/Button/tertiary.json similarity index 100% rename from tokens/src/components/Button/tertiary.json rename to tokens/src/themes/light/components/Button/tertiary.json diff --git a/tokens/src/components/Button/warning.json b/tokens/src/themes/light/components/Button/warning.json similarity index 100% rename from tokens/src/components/Button/warning.json rename to tokens/src/themes/light/components/Button/warning.json diff --git a/tokens/src/themes/light/components/Card.json b/tokens/src/themes/light/components/Card.json new file mode 100644 index 0000000000..e3dc8f23cc --- /dev/null +++ b/tokens/src/themes/light/components/Card.json @@ -0,0 +1,33 @@ +{ + "color": { + "card": { + "base": { "value": "inherit", "type": "color", "source": "$card-color" }, + "bg": { + "base": { "value": "{color.bg.base}", "type": "color", "source": "$card-bg" }, + "dark": { "value": "{color.primary.500}", "type": "color", "source": "$card-bg-dark" }, + "muted": { "value": "{color.light.200}", "type": "color", "source": "$card-bg-muted" } + }, + "border": { + "base": { + "value": "{color.black}", + "type": "color", + "source": "$card-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.125 + }] + }, + "focus": { + "value": "{color.black}", + "type": "color", + "source": "$card-border-focus-color", + "modify": [{ + "type": "alpha", + "amount": 0.5 + }] + } + }, + "divider-bg": { "value": "{color.light.400}", "type": "color", "source": "$card-divider-bg" } + } + } +} diff --git a/tokens/src/components/Carousel.json b/tokens/src/themes/light/components/Carousel.json similarity index 53% rename from tokens/src/components/Carousel.json rename to tokens/src/themes/light/components/Carousel.json index 086f6ef667..1a06a8974f 100644 --- a/tokens/src/components/Carousel.json +++ b/tokens/src/themes/light/components/Carousel.json @@ -14,41 +14,6 @@ "caption": { "value": "{color.white}", "type": "color", "source": "$carousel-caption-color" } } }, - "size": { - "carousel": { - "control": { - "width": { - "base": { "value": "15%", "type": "percentage", "source": "$carousel-control-width" }, - "icon": { "value": "20px", "type": "dimension", "source": "$carousel-control-icon-width" } - } - }, - "indicator": { - "width": { "value": "30px", "type": "dimension", "source": "$carousel-indicator-width" }, - "height": { - "base": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-height" }, - "area-hit": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-hit-area-height" } - } - }, - "caption-width": { "value": "70%", "type": "percentage", "source": "$carousel-caption-width" } - } - }, - "spacing": { - "carousel": { - "indicator-spacer": { "value": "3px", "type": "dimension", "source": "$carousel-indicator-spacer" } - } - }, - "transition": { - "carousel": { - "base": { - "value": "transform {transition.carousel.duration} ease-in-out", - "type": "transition", - "source": "$carousel-transition-duration" - }, - "duration": { "value": ".6s", "type": "duration", "source": "$carousel-transition-duration" }, - "indicator": { "value": "opacity .6s ease", "type": "transition", "source": "$carousel-indicator-transition" }, - "control": { "value": "opacity .15s ease", "type": "transition", "source": "$carousel-control-transition" } - } - }, "content": { "carousel": { "control": { diff --git a/tokens/src/themes/light/components/Chip.json b/tokens/src/themes/light/components/Chip.json new file mode 100644 index 0000000000..38e32bb109 --- /dev/null +++ b/tokens/src/themes/light/components/Chip.json @@ -0,0 +1,19 @@ +{ + "color": { + "chip": { + "text": { + "light": { "value": "{color.black}", "type": "color", "source": "$chip-light-color" }, + "dark": { "value": "{color.white}", "type": "color", "source": "$chip-dark-color" } + }, + "bg": { + "light": { "value": "{color.light.500}", "type": "color", "source": "$chip-light-bg" }, + "dark": { "value": "{color.dark.200}", "type": "color", "source": "$chip-dark-bg" } + } + } + }, + "other": { + "chip": { + "opacity-disabled": { "value": ".3", "type": "ratio", "source": "$chip-disable-opacity" } + } + } +} diff --git a/tokens/src/themes/light/components/CloseButton.json b/tokens/src/themes/light/components/CloseButton.json new file mode 100644 index 0000000000..8d00637ca3 --- /dev/null +++ b/tokens/src/themes/light/components/CloseButton.json @@ -0,0 +1,10 @@ +{ + "color": { + "close-button": { "value": "{color.black}", "type": "color", "source": "$close-color" } + }, + "elevation": { + "close-button": { + "text-shadow": { "value": "0 1px 0 {color.white}", "type": "shadow", "source": "$close-text-shadow" } + } + } +} diff --git a/tokens/src/themes/light/components/Code.json b/tokens/src/themes/light/components/Code.json new file mode 100644 index 0000000000..a14d475647 --- /dev/null +++ b/tokens/src/themes/light/components/Code.json @@ -0,0 +1,23 @@ +{ + "color": { + "code": { + "base": { "value": "#E83E8C", "type": "color", "source": "$code-color" }, + "kbd": { + "base": { "value": "{color.white}", "type": "color", "source": "$kbd-color" }, + "bg": { "value": "{color.gray.700}", "type": "color", "source": "$kbd-bg" } + }, + "pre": { "value": "{color.gray.900}", "type": "color", "source": "$pre-color" } + } + }, + "elevation": { + "code": { + "kbd": { + "box-shadow": { + "value": "inset 0 -.1rem 0 rgba(0, 0, 0, .25)", + "type": "shadow", + "source": "$kbd-box-shadow" + } + } + } + } +} diff --git a/tokens/src/themes/light/components/DataTable.json b/tokens/src/themes/light/components/DataTable.json new file mode 100644 index 0000000000..9071d6457f --- /dev/null +++ b/tokens/src/themes/light/components/DataTable.json @@ -0,0 +1,26 @@ +{ + "color": { + "data-table": { + "bg": { + "base": { "value": "{color.bg.base}", "type": "color", "source": "$data-table-background-color" }, + "is-loading": { + "value": "{color.white}", + "type": "color", + "source": "$data-table-is-loading-bg", + "modify": [ + { + "type": "alpha", + "amount": 0.7 + } + ] + } + }, + "border": { "value": "{color.gray.200}", "type": "color", "source": "$data-table-border-color" } + } + }, + "elevation": { + "data-table": { + "box-shadow": { "value": "{elevation.box-shadow.sm}", "type": "shadow", "source": "$data-table-box-shadow" } + } + } +} diff --git a/tokens/src/themes/light/components/Dropdown.json b/tokens/src/themes/light/components/Dropdown.json new file mode 100644 index 0000000000..9c9ae91fda --- /dev/null +++ b/tokens/src/themes/light/components/Dropdown.json @@ -0,0 +1,36 @@ +{ + "color": { + "dropdown": { + "text": { "value": "{color.body.base}", "type": "color", "source": "$dropdown-color" }, + "header": { "value": "{color.gray.500}", "type": "color", "source": "$dropdown-header-color" }, + "bg": { "value": "{color.bg.base}", "type": "color", "source": "$dropdown-bg" }, + "border": { + "value": "{color.black}", + "type": "color", + "source": "$dropdown-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.15 + }] + }, + "divider-bg": { "value": "{color.gray.100}", "type": "color", "source": "$dropdown-divider-bg" }, + "link": { + "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-color" }, + "hover": { + "base": { "value": "{color.gray.900}", "type": "color", "source": "$dropdown-link-hover-color" }, + "bg": { "value": "{color.light.300}", "type": "color", "source": "$dropdown-link-hover-bg" } + }, + "active": { + "base": { "value": "{color.active}", "type": "color", "source": "$dropdown-link-active-color" }, + "bg": { "value": "{color.bg.active}", "type": "color", "source": "$dropdown-link-active-bg" } + }, + "disabled": { "value": "{color.disabled}", "type": "color", "source": "$dropdown-link-disabled-color" } + } + } + }, + "elevation": { + "dropdown": { + "box-shadow": { "value": "0 .5rem 1rem rgba(0, 0, 0, .175)", "type": "shadow", "source": "$dropdown-box-shadow" } + } + } +} diff --git a/tokens/src/themes/light/components/Dropzone.json b/tokens/src/themes/light/components/Dropzone.json new file mode 100644 index 0000000000..132b63ed6b --- /dev/null +++ b/tokens/src/themes/light/components/Dropzone.json @@ -0,0 +1,19 @@ +{ + "color": { + "dropzone": { + "error-wrapper": { + "value": "{color.danger.500}", "type": "color", "source": "$dropzone-error-wrapper-color" + }, + "restriction-msg": { + "value": "{color.gray.500}", "type": "color", "source": "$dropzone-restriction-msg-color" + }, + "border": { + "base": { "value": "{color.gray.500}", "type": "color", "source": "$dropzone-border-color-default" }, + "hover": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-hover" }, + "focus": { "value": "{color.info.300}", "type": "color", "source": "$dropzone-border-color-focus" }, + "active": { "value": "{color.primary.500}", "type": "color", "source": "$dropzone-border-color-active" }, + "error": { "value": "{color.danger.300}", "type": "color", "source": "$dropzone-border-color-error" } + } + } + } +} diff --git a/tokens/src/components/Form/color.json b/tokens/src/themes/light/components/Form/color.json similarity index 100% rename from tokens/src/components/Form/color.json rename to tokens/src/themes/light/components/Form/color.json diff --git a/tokens/src/components/Form/elevation.json b/tokens/src/themes/light/components/Form/elevation.json similarity index 100% rename from tokens/src/components/Form/elevation.json rename to tokens/src/themes/light/components/Form/elevation.json diff --git a/tokens/src/components/Form/other.json b/tokens/src/themes/light/components/Form/other.json similarity index 95% rename from tokens/src/components/Form/other.json rename to tokens/src/themes/light/components/Form/other.json index df43362782..fed2a4680d 100644 --- a/tokens/src/components/Form/other.json +++ b/tokens/src/themes/light/components/Form/other.json @@ -1,10 +1,6 @@ { "other": { "form": { - "control": { - "cursor": { "value": "auto", "type": "cursorStyle", "source": "$custom-control-cursor" }, - "range-track-cursor": { "value": "pointer", "type": "cursorStyle", "source": "$custom-range-track-cursor" } - }, "feedback": { "tooltip-opacity": { "value": ".9", "type": "ratio", "source": "$form-feedback-tooltip-opacity" } } diff --git a/tokens/src/components/IconButton.json b/tokens/src/themes/light/components/IconButton.json similarity index 72% rename from tokens/src/components/IconButton.json rename to tokens/src/themes/light/components/IconButton.json index e5e92b727e..7236763d59 100644 --- a/tokens/src/components/IconButton.json +++ b/tokens/src/themes/light/components/IconButton.json @@ -13,18 +13,5 @@ "dark": { "value": "{color.dark.base}", "type": "color", "source": "$btn-icon-dark" }, "black": { "value": "{color.black}", "type": "color", "source": "$btn-icon-black" } } - }, - "size": { - "icon-button": { - "diameter": { - "md": { "value": "2.75rem", "type": "dimension", "source": "$btn-icon-diameter-md" }, - "sm": { "value": "2.25rem", "type": "dimension", "source": "$btn-icon-diameter-sm" }, - "inline": { - "value": "calc({typography.line-height.base} + .1em)", - "type": "dimension", - "source": "$btn-icon-diameter-inline" - } - } - } } } diff --git a/tokens/src/themes/light/components/Image.json b/tokens/src/themes/light/components/Image.json new file mode 100644 index 0000000000..aab2f96f87 --- /dev/null +++ b/tokens/src/themes/light/components/Image.json @@ -0,0 +1,18 @@ +{ + "color": { + "image": { + "figure-caption": { "value": "{color.gray.500}", "type": "color", "source": "$figure-caption-color" }, + "thumbnail": { + "bg": { "value": "{color.body.bg}", "type": "color", "source": "$thumbnail-bg" }, + "border": { "value": "{color.gray.200}", "type": "color", "source": "$thumbnail-border-color" } + } + } + }, + "elevation": { + "image": { + "thumbnail": { + "box-shadow": { "value": "0 1px 2px rgba(0, 0, 0, .075)", "type": "shadow", "source": "$thumbnail-box-shadow" } + } + } + } +} diff --git a/tokens/src/components/Menu.json b/tokens/src/themes/light/components/Menu.json similarity index 100% rename from tokens/src/components/Menu.json rename to tokens/src/themes/light/components/Menu.json diff --git a/tokens/src/themes/light/components/Modal.json b/tokens/src/themes/light/components/Modal.json new file mode 100644 index 0000000000..8b76a512ac --- /dev/null +++ b/tokens/src/themes/light/components/Modal.json @@ -0,0 +1,37 @@ +{ + "color": { + "modal": { + "content": { + "bg": { "value": "{color.bg.base}", "type": "color", "source": "$modal-content-bg" }, + "border": { + "value": "{color.black}", + "type": "color", + "source": "$modal-content-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.2 + }] + } + }, + "backdrop-bg": { "value": "{color.black}", "type": "color", "source": "$modal-backdrop-bg" } + } + }, + "elevation": { + "modal": { + "content": { + "box-shadow": { + "sm-up": { + "value": "0 10px 20px rgba(0, 0, 0, .15), 0 8px 20px rgba(0, 0, 0, .15)", + "type": "shadow", + "source": "$modal-content-box-shadow-sm-up" + } + } + } + } + }, + "other": { + "modal": { + "opacity": { "value": ".5", "source": "$modal-backdrop-opacity" } + } + } +} diff --git a/tokens/src/components/Nav.json b/tokens/src/themes/light/components/Nav.json similarity index 66% rename from tokens/src/components/Nav.json rename to tokens/src/themes/light/components/Nav.json index 3b72b52ec2..a1f429542d 100644 --- a/tokens/src/components/Nav.json +++ b/tokens/src/themes/light/components/Nav.json @@ -59,42 +59,5 @@ "modify": [{ "type": "alpha", "amount": 0.5 }] } } - }, - "typography": { - "nav": { - "link": { - "font-weight": { "value": "500", "type": "fontWeight", "source": "$nav-link-font-weight" } - } - } - }, - "size": { - "nav": { - "pills": { - "border-radius": { - "value": "{size.border.radius.base}", "type": "dimension", "source": "$nav-pills-border-radius" - } - }, - "tabs": { - "border": { - "width": { "value": "2px", "type": "dimension", "source": "$nav-tabs-border-width" }, - "radius": { "value": "0", "type": "dimension", "source": "$nav-tabs-border-radius" } - } - } - } - }, - "spacing": { - "nav": { - "link": { - "padding": { - "y": { "value": ".5rem", "type": "dimension", "source": "$nav-link-padding-y" }, - "x": { "value": "1rem", "type": "dimension", "source": "$nav-link-padding-x" } - } - }, - "divider": { - "margin-y": { - "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$nav-divider-margin-y" - } - } - } } } diff --git a/tokens/src/components/Navbar.json b/tokens/src/themes/light/components/Navbar.json similarity index 51% rename from tokens/src/components/Navbar.json rename to tokens/src/themes/light/components/Navbar.json index 60ed7c2146..b855507ab0 100644 --- a/tokens/src/components/Navbar.json +++ b/tokens/src/themes/light/components/Navbar.json @@ -6,27 +6,39 @@ "value": "{color.white}", "type": "color", "source": "$navbar-dark-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [{ + "type": "alpha", + "amount": 0.5 + }] }, "hover": { "value": "{color.white}", "type": "color", "source": "$navbar-dark-hover-color", - "modify": [{ "type": "alpha", "amount": 0.75 }] + "modify": [{ + "type": "alpha", + "amount": 0.75 + }] }, "active": { "value": "{color.active}", "type": "color", "source": "$navbar-dark-active-color" }, "disabled": { "value": "{color.white}", "type": "color", "source": "$navbar-dark-disabled-color", - "modify": [{ "type": "alpha", "amount": 0.25 }] + "modify": [{ + "type": "alpha", + "amount": 0.25 + }] }, "toggler": { "border": { "value": "{color.white}", "type": "color", "source": "$navbar-dark-toggler-border-color", - "modify": [{ "type": "alpha", "amount": 0.1 }] + "modify": [{ + "type": "alpha", + "amount": 0.1 + }] } }, "brand": { @@ -39,109 +51,52 @@ "value": "{color.black}", "type": "color", "source": "$navbar-light-color", - "modify": [{ "type": "alpha", "amount": 0.5 }] + "modify": [{ + "type": "alpha", + "amount": 0.5 + }] }, "hover": { "value": "{color.black}", "type": "color", "source": "$navbar-light-hover-color", - "modify": [{ "type": "alpha", "amount": 0.7 }] + "modify": [{ + "type": "alpha", + "amount": 0.7 + }] }, "active": { "value": "{color.black}", "type": "color", "source": "$navbar-light-active-color", - "modify": [{ "type": "alpha", "amount": 0.9 }] + "modify": [{ + "type": "alpha", + "amount": 0.9 + }] }, "disabled": { "value": "{color.black}", "type": "color", "source": "$navbar-light-disabled-color", - "modify": [{ "type": "alpha", "amount": 0.3 }] + "modify": [{ + "type": "alpha", + "amount": 0.3 + }] }, "toggler": { "border": { "value": "{color.black}", "type": "color", "source": "$navbar-light-toggler-border-color", - "modify": [{ "type": "alpha", "amount": 0.1 }] + "modify": [{ + "type": "alpha", + "amount": 0.1 + }] } }, "brand": { - "text": { - "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-color" - }, - "hover": { - "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-hover-color" - } - } - } - } - }, - "spacing": { - "navbar": { - "padding": { - "y": { "value": "calc({spacing.spacer.base} / 2)", "type": "dimension", "source": "$navbar-padding-y" }, - "x": { - "base": { "value": "{spacing.spacer.base}", "type": "dimension", "source": "$navbar-padding-x" }, - "nav-link": { "value": ".5rem", "type": "dimension", "source": "$navbar-nav-link-padding-x" } - } - }, - "brand": { - "padding": { - "y": { - "value": "calc(({typography.navbar.nav-link.height} - {size.navbar.brand.height}) / 2)", - "type": "dimension", - "source": "$navbar-brand-padding-y" - } - } - }, - "toggler": { - "padding": { - "y": { "value": ".25rem", "type": "dimension", "source": "$navbar-toggler-padding-y" }, - "x": { "value": ".75rem", "type": "dimension", "source": "$navbar-toggler-padding-x" } - } - } - } - }, - "typography": { - "navbar": { - "brand": { - "font-size": { - "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-brand-font-size" - } - }, - "nav-link": { - "height": { - "value": "calc({typography.font.size.base} * {typography.line-height.base} + .5rem * 2)", - "type": "dimension", - "source": "$nav-link-height" - } - }, - "toggler": { - "font-size": { - "value": "{typography.font.size.lg}", "type": "dimension", "source": "$navbar-toggler-font-size" - } - } - } - }, - "size": { - "navbar": { - "nav": { - "scroll": { - "max-height": { "value": "75vh", "type": "dimension", "source": "$navbar-nav-scroll-max-height" } - } - }, - "brand": { - "height": { - "value": "calc({typography.navbar.brand.font-size} * {typography.line-height.base})", - "type": "dimension", - "source": "$navbar-brand-height" - } - }, - "toggler": { - "border-radius": { - "value": "{size.btn.border.radius.base}", "type": "dimension", "source": "$navbar-toggler-border-radius" + "text": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-color" }, + "hover": { "value": "{color.navbar.light.active}", "type": "color", "source": "$navbar-light-brand-hover-color" } } } } diff --git a/tokens/src/themes/light/components/Pagination.json b/tokens/src/themes/light/components/Pagination.json new file mode 100644 index 0000000000..f00bd89777 --- /dev/null +++ b/tokens/src/themes/light/components/Pagination.json @@ -0,0 +1,40 @@ +{ + "color": { + "pagination": { + "text": { + "base": { "value": "{color.link.base}", "type": "color", "source": "$pagination-color" }, + "inverse": { "value": "{color.white}", "type": "color", "source": "$pagination-color-inverse" }, + "hover": { "value": "{color.link.hover}", "type": "color", "source": "$pagination-hover-color" }, + "active": { "value": "{color.active}", "type": "color", "source": "$pagination-active-color" }, + "disabled": { "value": "{color.disabled}", "type": "color", "source": "$pagination-disabled-color" } + }, + "bg": { + "base": { "value": "{color.bg.base}", "type": "color", "source": "$pagination-bg" }, + "hover": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-hover-bg" }, + "active": { "value": "{color.bg.active}", "type": "color", "source": "$pagination-active-bg" }, + "disabled": { "value": "{color.white}", "type": "color", "source": "$pagination-disabled-bg" } + }, + "border": { + "base": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-border-color" }, + "hover": { "value": "{color.gray.200}", "type": "color", "source": "$pagination-hover-border-color" }, + "active": { "value": "{color.pagination.bg.active}", "type": "color", "source": "$pagination-active-border-color" }, + "disabled": { "value": "{color.gray.100}", "type": "color", "source": "$pagination-disabled-border-color" } + }, + "focus": { + "base": { "value": "{color.primary.500}", "type": "color", "source": "$pagination-focus-color" }, + "text": { "value": "{color.black}", "type": "color", "source": "$pagination-focus-color-text" } + } + } + }, + "elevation": { + "pagination": { + "focus": { + "box-shadow": { + "value": "{elevation.input.btn-focus.box-shadow}", + "type": "shadow", + "source": "$pagination-focus-box-shadow" + } + } + } + } +} diff --git a/tokens/src/components/Popover.json b/tokens/src/themes/light/components/Popover.json similarity index 54% rename from tokens/src/components/Popover.json rename to tokens/src/themes/light/components/Popover.json index 3498575711..2b72cf2340 100644 --- a/tokens/src/components/Popover.json +++ b/tokens/src/themes/light/components/Popover.json @@ -1,9 +1,4 @@ { - "typography": { - "popover": { - "font-size": { "value": "{typography.font.size.sm}", "type": "dimension", "source": "$popover-font-size" } - } - }, "color": { "popover": { "bg": { "value": "{color.bg.base}", "type": "color", "source": "$popover-bg" }, @@ -48,57 +43,12 @@ } } }, - "size": { - "popover": { - "max-width": { "value": "480px", "type": "dimension", "source": "$popover-max-width" }, - "border": { - "width": { "value": "{size.border.width}", "type": "color", "source": "$popover-border-width" }, - "radius": { "value": "{size.border.radius.sm}", "type": "color", "source": "$popover-border-radius" } - }, - "icon": { - "height": { "value": "1rem", "type": "dimension", "source": "$popover-icon-height" }, - "width": { "value": "1rem", "type": "dimension", "source": "$popover-icon-width" } - }, - "arrow": { - "width": { "value": "1rem", "type": "dimension", "source": "$popover-arrow-width" }, - "height": { "value": ".5rem", "type": "dimension", "source": "$popover-arrow-height" } - } - } - }, "elevation": { "popover": { "box-shadow": { "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", "type": "shadow", "source": "$popover-box-shadow" - }, - "zindex": { "value": "1060", "type": "ratio", "source": "$zindex-popover" } - } - }, - "spacing": { - "popover": { - "header": { - "padding": { - "y": { "value": ".5rem", "type": "dimension", "source": "$popover-header-padding-y" }, - "x": { "value": "1rem", "type": "dimension", "source": "$popover-header-padding-x" } - } - }, - "body": { - "padding": { - "y": { - "value": "{spacing.popover.header.padding.y}", - "type": "dimension", - "source": "$popover-body-padding-y" - }, - "x": { - "value": "{spacing.popover.header.padding.x}", - "type": "dimension", - "source": "$popover-body-padding-x" - } - } - }, - "icon": { - "margin-right": { "value": ".5rem", "type": "dimension", "source": "$popover-icon-margin-right" } } } } diff --git a/tokens/src/themes/light/components/ProductTour.json b/tokens/src/themes/light/components/ProductTour.json new file mode 100644 index 0000000000..0c0181ab60 --- /dev/null +++ b/tokens/src/themes/light/components/ProductTour.json @@ -0,0 +1,35 @@ +{ + "color": { + "product-tour": { + "checkpoint": { + "bg": { "value": "{color.light.300}", "type": "color", "source": "$checkpoint-background-color" }, + "body": { "value": "{color.gray.700}", "type": "color", "source": "$checkpoint-body-color" }, + "border": { "value": "{color.brand.500}", "type": "color", "source": "$checkpoint-border-color" }, + "breadcrumb": { "value": "{color.primary.500}", "type": "color", "source": "$checkpoint-breadcrumb-color" }, + "box-shadow": { + "value": "{color.black}", + "type": "color", + "source": "$checkpoint-box-shadow-color", + "modify": [{ + "type": "alpha", + "amount": 0.3 + }] + }, + "arrow": { + "border": { + "top": { + "value": "{color.product-tour.checkpoint.bg}", + "type": "color", + "source": "$checkpoint-arrow-border-top-color" + }, + "transparent": { + "value": "transparent", + "type": "color", + "source": "$checkpoint-arrow-border-color-transparent" + } + } + } + } + } + } +} diff --git a/tokens/src/themes/light/components/ProgressBar.json b/tokens/src/themes/light/components/ProgressBar.json new file mode 100644 index 0000000000..400017cabf --- /dev/null +++ b/tokens/src/themes/light/components/ProgressBar.json @@ -0,0 +1,20 @@ +{ + "color": { + "progress-bar": { + "bg": { "value": "transparent", "type": "color", "source": "$progress-bg" }, + "border": { "value": "{color.gray.500}", "type": "color", "source": "$progress-bar-border-color" }, + "bar": { + "base": { "value": "{color.white}", "type": "color", "source": "$progress-bar-color" }, + "bg": { + "base": { "value": "{color.accent.a}", "type": "color", "source": "$progress-bar-bg" }, + "annotated": { "value": "{color.dark.500}", "type": "color", "source": "$annotated-progress-bar-bg" } + } + } + } + }, + "elevation": { + "progress-bar": { + "box-shadow": { "value": "none", "type": "shadow", "source": "$progress-box-shadow" } + } + } +} diff --git a/tokens/src/components/Scrollable.json b/tokens/src/themes/light/components/Scrollable.json similarity index 100% rename from tokens/src/components/Scrollable.json rename to tokens/src/themes/light/components/Scrollable.json diff --git a/tokens/src/components/SearchField.json b/tokens/src/themes/light/components/SearchField.json similarity index 51% rename from tokens/src/components/SearchField.json rename to tokens/src/themes/light/components/SearchField.json index 985e34551f..23ee467f0a 100644 --- a/tokens/src/components/SearchField.json +++ b/tokens/src/themes/light/components/SearchField.json @@ -14,27 +14,6 @@ } } }, - "size": { - "search-field": { - "border": { - "width": { - "base": { "value": ".0625rem", "type": "dimension", "source": "$search-border-width" }, - "focus": { "value": ".3125rem", "type": "dimension", "source": "$search-border-focus-width" } - }, - "radius": { "value": "0", "type": "dimension", "source": "$search-border-radius" } - }, - "search-input-height": { - "value": "calc({typography.form.input.line-height.base} * 1em + {spacing.form.input.padding.y.base} * 2)", - "type": "dimension", - "source": "$input-height-search" - } - } - }, - "spacing": { - "search-field": { - "margin-button": { "value": ".5rem", "type": "dimension", "source": "$search-button-margin" } - } - }, "other": { "search-field": { "disabled-opacity": { "value": ".3", "type": "ratio", "source": "$search-disabled-opacity" } diff --git a/tokens/src/components/Sheet.json b/tokens/src/themes/light/components/Sheet.json similarity index 67% rename from tokens/src/components/Sheet.json rename to tokens/src/themes/light/components/Sheet.json index bd6a3cb1e5..996e689bfa 100644 --- a/tokens/src/components/Sheet.json +++ b/tokens/src/themes/light/components/Sheet.json @@ -18,13 +18,5 @@ } } } - }, - "elevation": { - "sheet": { - "zindex": { - "backdrop": { "value": "1031", "type": "ratio", "source": "$zindex-sheet-backdrop" }, - "main": { "value": "1032", "type": "ratio", "source": "$zindex-sheet" } - } - } } } diff --git a/tokens/src/components/Sticky.json b/tokens/src/themes/light/components/Sticky.json similarity index 78% rename from tokens/src/components/Sticky.json rename to tokens/src/themes/light/components/Sticky.json index d8dec48f6f..396aa1d04f 100644 --- a/tokens/src/components/Sticky.json +++ b/tokens/src/themes/light/components/Sticky.json @@ -14,10 +14,5 @@ } } } - }, - "spacing": { - "sticky": { - "offset": { "value": "0", "type": "dimension", "source": "$sticky-offset" } - } } } diff --git a/tokens/src/components/Toast.json b/tokens/src/themes/light/components/Toast.json similarity index 51% rename from tokens/src/components/Toast.json rename to tokens/src/themes/light/components/Toast.json index dec1b7447a..b40da24624 100644 --- a/tokens/src/components/Toast.json +++ b/tokens/src/themes/light/components/Toast.json @@ -21,11 +21,6 @@ } } }, - "typography": { - "toast": { - "font-size": { "value": ".875rem", "type": "dimension", "source": "$toast-font-size" } - } - }, "elevation": { "toast": { "box-shadow": { @@ -34,28 +29,5 @@ "source": "$toast-box-shadow" } } - }, - "size": { - "toast": { - "max-width": { "value": "400px", "type": "dimension", "source": "$toast-max-width" }, - "border": { - "width": { "value": "1px", "type": "dimension", "source": "$toast-border-width" }, - "radius": { "value": ".25rem", "type": "dimension", "source": "$toast-border-radius" } - } - } - }, - "spacing": { - "toast": { - "padding": { - "x": { "value": ".75rem", "type": "dimension", "source": "$toast-padding-x" }, - "y": { "value": ".25rem", "type": "dimension", "source": "$toast-padding-y" } - }, - "container": { - "gutter": { - "lg": { "value": "1.25rem", "type": "dimension", "source": "$toast-container-gutter-lg" }, - "sm": { "value": ".625rem", "type": "dimension", "source": "$toast-container-gutter-sm" } - } - } - } } } diff --git a/tokens/src/themes/light/components/Tooltip.json b/tokens/src/themes/light/components/Tooltip.json new file mode 100644 index 0000000000..a73762aba6 --- /dev/null +++ b/tokens/src/themes/light/components/Tooltip.json @@ -0,0 +1,30 @@ +{ + "color": { + "tooltip": { + "text": { "value": "{color.white}", "type": "color", "source": "$tooltip-color" }, + "light": { "value": "{color.black}", "type": "color", "source": "$tooltip-color-light" }, + "bg": { + "base": { "value": "{color.black}", "type": "color", "source": "$tooltip-bg" }, + "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-bg-light" } + }, + "arrow": { + "base": { "value": "{color.tooltip.bg.base}", "type": "color", "source": "$tooltip-arrow-color" }, + "light": { "value": "{color.white}", "type": "color", "source": "$tooltip-arrow-color-light" } + } + } + }, + "elevation": { + "tooltip": { + "box-shadow": { + "value": "drop-shadow(0 2px 4px rgba(0, 0, 0, .15)) drop-shadow(0 2px 8px rgba(0, 0, 0, .15))", + "type": "shadow", + "source": "$tooltip-box-shadow" + } + } + }, + "other": { + "tooltip": { + "opacity": { "value": "1", "type": "ratio", "source": "$tooltip-opacity" } + } + } +} diff --git a/tokens/src/components/general/body.json b/tokens/src/themes/light/components/general/body.json similarity index 100% rename from tokens/src/components/general/body.json rename to tokens/src/themes/light/components/general/body.json diff --git a/tokens/src/themes/light/components/general/headings.json b/tokens/src/themes/light/components/general/headings.json new file mode 100644 index 0000000000..989214871b --- /dev/null +++ b/tokens/src/themes/light/components/general/headings.json @@ -0,0 +1,7 @@ +{ + "color": { + "headings": { + "base": { "value": "{color.black}", "type": "color", "source": "$headings-color" } + } + } +} diff --git a/tokens/src/themes/light/components/general/hr.json b/tokens/src/themes/light/components/general/hr.json new file mode 100644 index 0000000000..3c40c8d618 --- /dev/null +++ b/tokens/src/themes/light/components/general/hr.json @@ -0,0 +1,15 @@ +{ + "color": { + "hr": { + "border": { + "value": "{color.black}", + "type": "color", + "source": "$hr-border-color", + "modify": [{ + "type": "alpha", + "amount": 0.1 + }] + } + } + } +} diff --git a/tokens/src/themes/light/components/general/input.json b/tokens/src/themes/light/components/general/input.json new file mode 100644 index 0000000000..d661e658f7 --- /dev/null +++ b/tokens/src/themes/light/components/general/input.json @@ -0,0 +1,18 @@ +{ + "color": { + "input": { + "btn-focus": { "value": "{color.input.focus}", "type": "color", "source": "$input-btn-focus-color" } + } + }, + "elevation": { + "input": { + "btn-focus": { + "box-shadow": { + "value": "0 0 0 {size.input.btn.focus-width} {color.input.btn-focus}", + "type": "shadow", + "source": "$input-btn-focus-box-shadow" + } + } + } + } +} diff --git a/tokens/src/components/general/link.json b/tokens/src/themes/light/components/general/link.json similarity index 71% rename from tokens/src/components/general/link.json rename to tokens/src/themes/light/components/general/link.json index 9dc6a93434..e6bc07eb82 100644 --- a/tokens/src/components/general/link.json +++ b/tokens/src/themes/light/components/general/link.json @@ -97,34 +97,6 @@ } } }, - "typography": { - "link": { - "decoration": { - "base": { "value": "none", "type": "textDecoration", "source": "$link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$link-hover-decoration" }, - "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$inline-link-hover-decoration" } - }, - "muted": { - "base": { "value": "none", "type": "textDecoration", "source": "$muted-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-link-hover-decoration" }, - "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$muted-inline-link-hover-decoration" } - } - }, - "brand": { - "base": { "value": "none", "type": "textDecoration", "source": "$brand-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-link-hover-decoration" }, - "inline": { - "base": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-decoration" }, - "hover": { "value": "underline", "type": "textDecoration", "source": "$brand-inline-link-hover-decoration" } - } - } - } - } - }, "other": { "link": { "emphasized-hover": { diff --git a/tokens/src/components/general/list.json b/tokens/src/themes/light/components/general/list.json similarity index 65% rename from tokens/src/components/general/list.json rename to tokens/src/themes/light/components/general/list.json index 4dc246a97b..bfd9e824cd 100644 --- a/tokens/src/components/general/list.json +++ b/tokens/src/themes/light/components/general/list.json @@ -1,11 +1,4 @@ { - "typography": { - "dt": { - "font-weight": { - "value": "{typography.font.weight.bold}", "type": "fontWeight", "source": "$dt-font-weight" - } - } - }, "color": { "list-group": { "base": { "value": "inherit", "type": "color", "source": "$list-group-color" }, @@ -41,24 +34,5 @@ } } } - }, - "spacing": { - "list": { - "inline-padding": { "value": ".5rem", "type": "dimension", "source": "$list-inline-padding" }, - "group-item": { - "padding": { - "y": { "value": ".75rem", "type": "dimension", "source": "$list-group-item-padding-y" }, - "x": { "value": "1.25rem", "type": "dimension", "source": "$list-group-item-padding-x" } - } - } - } - }, - "size": { - "list-group": { - "border": { - "width": { "value": "{size.border.width}", "type": "dimension", "source": "$list-group-border-width" }, - "radius": { "value": "{size.border.radius.base}", "type": "dimension", "source": "$list-group-border-radius" } - } - } } } diff --git a/tokens/src/themes/light/components/general/text.json b/tokens/src/themes/light/components/general/text.json new file mode 100644 index 0000000000..7532d0e261 --- /dev/null +++ b/tokens/src/themes/light/components/general/text.json @@ -0,0 +1,6 @@ +{ + "color": { + "text-muted": { "value": "{color.gray.500}", "type": "color", "source": "$text-muted" }, + "mark-bg": { "value": "#FFF243", "type": "color", "source": "$mark-bg" } + } +} diff --git a/tokens/src/global/color.json b/tokens/src/themes/light/global/color.json similarity index 100% rename from tokens/src/global/color.json rename to tokens/src/themes/light/global/color.json diff --git a/tokens/src/global/elevation.json b/tokens/src/themes/light/global/elevation.json similarity index 89% rename from tokens/src/global/elevation.json rename to tokens/src/themes/light/global/elevation.json index 99b9ff3eca..94a24c71fc 100644 --- a/tokens/src/global/elevation.json +++ b/tokens/src/themes/light/global/elevation.json @@ -166,21 +166,6 @@ "source": "$box-shadow-centered-5" } } - }, - "zindex": { - "0": { "value": 0, "type": "ratio" }, - "200": { "value": 200, "type": "ratio" }, - "400": { "value": 400, "type": "ratio" }, - "600": { "value": 600, "type": "ratio" }, - "800": { "value": 800, "type": "ratio" }, - "1000": { "value": 1000, "type": "ratio" }, - "1200": { "value": 1200, "type": "ratio" }, - "1400": { "value": 1400, "type": "ratio" }, - "1600": { "value": 1600, "type": "ratio" }, - "1800": { "value": 1800, "type": "ratio" }, - "2000": { "value": 2000, "type": "ratio" }, - "sticky": { "value": 1020, "type": "ratio", "source": "$zindex-sticky" }, - "fixed": { "value": 1030, "type": "ratio", "source": "$zindex-fixed" } } } } diff --git a/tokens/src/themes/light/global/other.json b/tokens/src/themes/light/global/other.json new file mode 100644 index 0000000000..360b2c1485 --- /dev/null +++ b/tokens/src/themes/light/global/other.json @@ -0,0 +1,4 @@ +{ + "yiq-text-dark": "#454545", + "yiq-text-light": "#FFFFFF" +} diff --git a/tokens/style-dictionary.js b/tokens/style-dictionary.js index dc3443d1a8..0f5708ce33 100644 --- a/tokens/style-dictionary.js +++ b/tokens/style-dictionary.js @@ -26,8 +26,15 @@ const colorTransform = (token) => { color = color.mix(otherColor, amount, 'rgb'); break; case 'color-yiq': { + // find whether token belongs to any theme based on its location + // split full path by '/', check if 'themes' directory is a part of the path, if it is - the next nested + // directory is the theme name, otherwise use 'light' theme + const pathParts = token.filePath.split('/'); + const themePartIndex = pathParts.findIndex(item => item === 'themes'); + const themeVariant = themePartIndex === -1 ? 'light' : pathParts[themePartIndex + 1]; + const { light, dark, threshold } = modifier; - color = colorYiq(color, light, dark, threshold); + color = colorYiq(color, light, dark, threshold, themeVariant); break; } case 'darken':