-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BREAKING CHANGE: Update Spirit design tokens to v3 and rewrite themin…
…g API
- Loading branch information
1 parent
23e2909
commit d3821f3
Showing
25 changed files
with
462 additions
and
243 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,14 @@ | ||
| // Order matters, do not alter. | ||
|
|
||
| @forward 'theme/default'; | ||
| // @forward 'theme/default'; | ||
|
|
||
| @forward 'style/themes'; | ||
| @forward 'theme/default-to-vanilla'; | ||
| @forward 'style/typography'; | ||
| @forward 'style/links'; | ||
| @forward 'style/buttons'; | ||
| @forward 'style/toggles'; | ||
| @forward 'style/main'; | ||
| @forward 'style/consent-modal'; | ||
| @forward 'style/preferences-modal'; | ||
|
|
||
| // @forward 'style/typography'; | ||
| // @forward 'style/links'; | ||
| // @forward 'style/buttons'; | ||
| // @forward 'style/toggles'; | ||
| // @forward 'style/main'; | ||
| // @forward 'style/consent-modal'; | ||
| // @forward 'style/preferences-modal'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| @use '@themes' as themes; | ||
| @use '../tools/themes' as themes-tools; | ||
|
|
||
| @include themes-tools.generate($themes: themes.$themes); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,65 @@ | ||
| // | ||
| // Map Alma Career CCM **private** theming API to the original (vanilla) Cookie Consent custom properties. | ||
| // | ||
| // TODO | ||
| // Assignment below is applied through `.cc_div` instead of `:root`, so it works for both light and | ||
| // dark theme. | ||
| // | ||
| // 1. We don't want to style scrollbars at this moment, but let's keep the options here to know they are still available. | ||
|
|
||
| .cc_div { | ||
| --cc-bg: var(--lmcccm-p-bg); | ||
| --cc-text: var(--lmcccm-p-text); | ||
| --cc-btn-primary-bg: var(--lmcccm-p-btn-primary-bg); | ||
| --cc-btn-primary-text: var(--lmcccm-p-btn-primary-text); | ||
| --cc-btn-primary-hover-bg: var(--lmcccm-p-btn-primary-hover-bg); | ||
| --cc-btn-secondary-bg: var(--lmcccm-p-btn-secondary-bg); | ||
| --cc-btn-secondary-text: var(--lmcccm-p-btn-secondary-text); | ||
| --cc-btn-secondary-hover-bg: var(--lmcccm-p-btn-secondary-hover-bg); | ||
| --cc-toggle-bg-off: var(--lmcccm-p-toggle-bg-off); | ||
| --cc-toggle-bg-on: var(--lmcccm-p-toggle-bg-on); | ||
| --cc-toggle-bg-readonly: var(--lmcccm-p-toggle-bg-readonly); | ||
| --cc-toggle-knob-bg: var(--lmcccm-p-toggle-knob-bg); | ||
| --cc-toggle-knob-icon-color: var(--lmcccm-p-toggle-knob-icon-color); | ||
| --cc-block-text: var(--lmcccm-p-text); | ||
| --cc-cookie-category-block-bg: var(--lmcccm-p-cookie-category-bg); | ||
| --cc-cookie-category-block-bg-hover: var(--lmcccm-p-cookie-category-hover-bg); | ||
| --cc-section-border: var(--lmcccm-p-modal-section-border); | ||
| --cc-cookie-table-border: var(--lmcccm-p-cookie-table-border); | ||
| --cc-overlay-bg: var(--lmcccm-p-backdrop-color); | ||
|
|
||
| // --cc-webkit-scrollbar-bg: #cfd5db; // 1. | ||
| // --cc-webkit-scrollbar-bg-hover: #9199a0; // 1. | ||
| // stylelint-disable custom-property-empty-line-before -- Grouping is useful here. | ||
|
|
||
| @use '@tokens' as tokens; | ||
|
|
||
| :root { | ||
| --cc-bg: #{tokens.$background-primary}; | ||
| --cc-primary-color: #{tokens.$text-primary}; | ||
| --cc-secondary-color: #{tokens.$text-secondary}; | ||
|
|
||
| --cc-btn-primary-bg: #{tokens.$component-button-primary-state-default}; | ||
| --cc-btn-primary-color: #{tokens.$component-button-primary-content}; | ||
| --cc-btn-primary-border-color: #{tokens.$component-button-primary-border}; | ||
| --cc-btn-primary-hover-bg: #{tokens.$component-button-primary-state-hover}; | ||
| --cc-btn-primary-hover-color: #{tokens.$component-button-primary-content}; | ||
| --cc-btn-primary-hover-border-color: #{tokens.$component-button-primary-border}; | ||
|
|
||
| --cc-btn-secondary-bg: #eaeff2; | ||
| --cc-btn-secondary-color: var(--cc-primary-color); | ||
| --cc-btn-secondary-border-color: var(--cc-btn-secondary-bg); | ||
| --cc-btn-secondary-hover-bg: #d4dae0; | ||
| --cc-btn-secondary-hover-color: #000; | ||
| --cc-btn-secondary-hover-border-color: #d4dae0; | ||
|
|
||
| --cc-separator-border-color: #{tokens.$border-basic}; | ||
|
|
||
| --cc-toggle-on-bg: var(--cc-btn-primary-bg); | ||
| --cc-toggle-off-bg: #667481; | ||
| --cc-toggle-on-knob-bg: #fff; | ||
| --cc-toggle-off-knob-bg: var(--cc-toggle-on-knob-bg); | ||
|
|
||
| --cc-toggle-enabled-icon-color: var(--cc-bg); | ||
| --cc-toggle-disabled-icon-color: var(--cc-bg); | ||
|
|
||
| --cc-toggle-readonly-bg: #d5dee2; | ||
| --cc-toggle-readonly-knob-bg: #fff; | ||
| --cc-toggle-readonly-knob-icon-color: var(--cc-toggle-readonly-bg); | ||
|
|
||
| --cc-section-category-border: var(--cc-cookie-category-block-bg); | ||
|
|
||
| --cc-cookie-category-block-bg: #f0f4f7; | ||
| --cc-cookie-category-block-border: #f0f4f7; | ||
| --cc-cookie-category-block-hover-bg: #e9eff4; | ||
| --cc-cookie-category-block-hover-border: #e9eff4; | ||
| --cc-cookie-category-expanded-block-bg: transparent; | ||
| --cc-cookie-category-expanded-block-hover-bg: #dee4e9; | ||
|
|
||
| --cc-overlay-bg: rgb(0 0 0 / 65%); | ||
|
|
||
| // 1. | ||
| // --cc-webkit-scrollbar-bg: var(--cc-section-category-border); | ||
| // --cc-webkit-scrollbar-hover-bg: var(--cc-btn-primary-hover-bg); | ||
|
|
||
| --cc-footer-bg: var(--cc-btn-secondary-bg); | ||
| --cc-footer-color: var(--cc-secondary-color); | ||
| --cc-footer-border-color: #e4eaed; | ||
| } |
Oops, something went wrong.