Skip to content

Commit

Permalink
fixup! fixup! BREAKING CHANGE: Update Spirit design tokens to v3
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamkudrna
adamkudrna committed Feb 20, 2025
1 parent 11881fb commit f4378e1
Show file tree
Hide file tree
Showing 3 changed files with 69 additions and 67 deletions.
134 changes: 67 additions & 67 deletions UPGRADE-3.0.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,75 +177,75 @@ underlying vanilla-cookieconsent library and does not introduce any own custom p
Not all CSS custom properties have their equivalent in the new version of the library (and vice versa).
The table below lists all custom properties used in the previous version and their new names, paired as close as possible.

| Category | CSS custom property – old name | CSS custom property – new name |
|-------------------|------------------------------------------|------------------------------------------------|
| Common | `--lmcccm-font-family` | `--cc-font-family` |
| | `--lmcccm-base-font-size` | N/A |
| | `--lmcccm-bg` | `--cc-bg` |
| | `--lmcccm-text` | `--cc-primary-color` |
| | N/A | `--cc-secondary-color` |
| Links | `--lmcccm-link-text` | `--cc-link-color` |
| | `--lmcccm-link-text-decoration` | N/A |
| | `--lmcccm-link-hover-text` | N/A |
| | `--lmcccm-link-hover-text-decoration` | N/A |
| | `--lmcccm-link-active-text` | N/A |
| Buttons | `--lmcccm-btn-font-weight` | N/A |
| | `--lmcccm-btn-text-transform` | N/A |
| | `--lmcccm-btn-border-width` | N/A |
| | `--lmcccm-btn-border-style` | N/A |
| | `--lmcccm-btn-border-radius` | `--cc-btn-border-radius` |
| | `--lmcccm-btn-primary-bg` | `--cc-btn-primary-bg` |
| | `--lmcccm-btn-primary-text` | `--cc-btn-primary-color` |
| | `--lmcccm-btn-primary-border` | `--cc-btn-primary-border-color` |
| | `--lmcccm-btn-primary-hover-bg` | `--cc-btn-primary-hover-bg` |
| | `--lmcccm-btn-primary-hover-text` | `--cc-btn-primary-hover-color` |
| | `--lmcccm-btn-primary-hover-border` | `--cc-btn-primary-hover-border-color` |
| | `--lmcccm-btn-primary-active-bg` | N/A <sup>\*</sup> |
| | `--lmcccm-btn-primary-active-text` | N/A <sup>\*</sup> |
| | `--lmcccm-btn-primary-active-border` | N/A <sup>\*</sup> |
| | `--lmcccm-btn-secondary-bg` | `--cc-btn-secondary-bg` |
| | `--lmcccm-btn-secondary-text` | `--cc-btn-secondary-color` |
| | `--lmcccm-btn-secondary-border` | `--cc-btn-secondary-border-color` |
| | `--lmcccm-btn-secondary-hover-bg` | `--cc-btn-secondary-hover-bg` |
| | `--lmcccm-btn-secondary-hover-text` | `--cc-btn-secondary-hover-color` |
| | `--lmcccm-btn-secondary-hover-border` | `--cc-btn-secondary-hover-border-color` |
| | `--lmcccm-btn-secondary-active-bg` | N/A <sup>\*</sup> |
| | `--lmcccm-btn-secondary-active-text` | N/A <sup>\*</sup> |
| | `--lmcccm-btn-secondary-active-border` | N/A <sup>\*</sup> |
| Toggles | N/A | `--cc-pm-toggle-border-radius` |
| | `--lmcccm-toggle-bg-on` | `--cc-toggle-on-bg` |
| | `--lmcccm-toggle-bg-off` | `--cc-toggle-off-bg` |
| | `--lmcccm-toggle-knob-bg` <sup>\**</sup> | `--cc-toggle-on-knob-bg` <sup>\**</sup> |
| | `--lmcccm-toggle-knob-bg` <sup>\**</sup> | `--cc-toggle-off-knob-bg` <sup>\**</sup> |
| | `--lmcccm-toggle-knob-icon-color` | N/A <sup>\***</sup> |
| | `--lmcccm-toggle-bg-readonly` | `--cc-toggle-readonly-bg` |
| | N/A | `--cc-toggle-readonly-knob-bg` |
| | N/A | `--cc-toggle-readonly-knob-icon-color` |
| Cookie categories | `--lmcccm-cookie-category-border-radius` | N/A |
| | `--lmcccm-cookie-category-bg` | `--cc-cookie-category-block-bg` |
| | N/A | `--cc-cookie-category-block-border` |
| | `--lmcccm-cookie-category-hover-bg` | `--cc-cookie-category-block-hover-bg` |
| | N/A | `--cc-cookie-category-block-hover-border` |
| | N/A | `--cc-cookie-category-expanded-block-bg` |
| | N/A | `--cc-cookie-category-expanded-block-hover-bg` |
| | `--lmcccm-cookie-table-border` | N/A |
| Separators | `--lmcccm-modal-section-border` | `--cc-separator-border-color` |
| Backdrop | `--lmcccm-backdrop-color` | `--cc-overlay-bg` |
| Modal | `--lmcccm-modal-max-width` | N/A |
| | `--lmcccm-modal-max-height` | N/A |
| | N/A | `--cc-modal-margin` |
| | `--lmcccm-modal-border-radius` | `--cc-modal-border-radius` |
| | `--lmcccm-modal-bg` | N/A <sup>\****</sup> |
| | `--lmcccm-modal-text` | N/A <sup>\****</sup> |
| | N/A | `--cc-modal-transition-duration` |
| Footer | N/A | `--cc-footer-bg` |
| | N/A | `--cc-footer-color` |
| | N/A | `--cc-footer-border-color` |
| Category | CSS custom property – old name | CSS custom property – new name |
|-------------------|-------------------------------------------|------------------------------------------------|
| Common | `--lmcccm-font-family` | `--cc-font-family` |
| | `--lmcccm-base-font-size` | N/A |
| | `--lmcccm-bg` | `--cc-bg` |
| | `--lmcccm-text` | `--cc-primary-color` |
| | N/A | `--cc-secondary-color` |
| Links | `--lmcccm-link-text` | `--cc-link-color` |
| | `--lmcccm-link-text-decoration` | N/A |
| | `--lmcccm-link-hover-text` | N/A |
| | `--lmcccm-link-hover-text-decoration` | N/A |
| | `--lmcccm-link-active-text` | N/A |
| Buttons | `--lmcccm-btn-font-weight` | N/A |
| | `--lmcccm-btn-text-transform` | N/A |
| | `--lmcccm-btn-border-width` | N/A |
| | `--lmcccm-btn-border-style` | N/A |
| | `--lmcccm-btn-border-radius` | `--cc-btn-border-radius` |
| | `--lmcccm-btn-primary-bg` | `--cc-btn-primary-bg` |
| | `--lmcccm-btn-primary-text` | `--cc-btn-primary-color` |
| | `--lmcccm-btn-primary-border` | `--cc-btn-primary-border-color` |
| | `--lmcccm-btn-primary-hover-bg` | `--cc-btn-primary-hover-bg` |
| | `--lmcccm-btn-primary-hover-text` | `--cc-btn-primary-hover-color` |
| | `--lmcccm-btn-primary-hover-border` | `--cc-btn-primary-hover-border-color` |
| | `--lmcccm-btn-primary-active-bg` | N/A <sup>\*</sup> |
| | `--lmcccm-btn-primary-active-text` | N/A <sup>\*</sup> |
| | `--lmcccm-btn-primary-active-border` | N/A <sup>\*</sup> |
| | `--lmcccm-btn-secondary-bg` | `--cc-btn-secondary-bg` |
| | `--lmcccm-btn-secondary-text` | `--cc-btn-secondary-color` |
| | `--lmcccm-btn-secondary-border` | `--cc-btn-secondary-border-color` |
| | `--lmcccm-btn-secondary-hover-bg` | `--cc-btn-secondary-hover-bg` |
| | `--lmcccm-btn-secondary-hover-text` | `--cc-btn-secondary-hover-color` |
| | `--lmcccm-btn-secondary-hover-border` | `--cc-btn-secondary-hover-border-color` |
| | `--lmcccm-btn-secondary-active-bg` | N/A <sup>\*</sup> |
| | `--lmcccm-btn-secondary-active-text` | N/A <sup>\*</sup> |
| | `--lmcccm-btn-secondary-active-border` | N/A <sup>\*</sup> |
| Toggles | N/A | `--cc-pm-toggle-border-radius` |
| | `--lmcccm-toggle-bg-on` | `--cc-toggle-on-bg` |
| | `--lmcccm-toggle-bg-off` | `--cc-toggle-off-bg` |
| | `--lmcccm-toggle-knob-bg` <sup>\*\*</sup> | `--cc-toggle-on-knob-bg` <sup>\*\*</sup> |
| | `--lmcccm-toggle-knob-bg` <sup>\*\*</sup> | `--cc-toggle-off-knob-bg` <sup>\*\*</sup> |
| | `--lmcccm-toggle-knob-icon-color` | N/A <sup>\*\*\*</sup> |
| | `--lmcccm-toggle-bg-readonly` | `--cc-toggle-readonly-bg` |
| | N/A | `--cc-toggle-readonly-knob-bg` |
| | N/A | `--cc-toggle-readonly-knob-icon-color` |
| Cookie categories | `--lmcccm-cookie-category-border-radius` | N/A |
| | `--lmcccm-cookie-category-bg` | `--cc-cookie-category-block-bg` |
| | N/A | `--cc-cookie-category-block-border` |
| | `--lmcccm-cookie-category-hover-bg` | `--cc-cookie-category-block-hover-bg` |
| | N/A | `--cc-cookie-category-block-hover-border` |
| | N/A | `--cc-cookie-category-expanded-block-bg` |
| | N/A | `--cc-cookie-category-expanded-block-hover-bg` |
| | `--lmcccm-cookie-table-border` | N/A |
| Separators | `--lmcccm-modal-section-border` | `--cc-separator-border-color` |
| Backdrop | `--lmcccm-backdrop-color` | `--cc-overlay-bg` |
| Modal | `--lmcccm-modal-max-width` | N/A |
| | `--lmcccm-modal-max-height` | N/A |
| | N/A | `--cc-modal-margin` |
| | `--lmcccm-modal-border-radius` | `--cc-modal-border-radius` |
| | `--lmcccm-modal-bg` | N/A <sup>\*\*\*\*</sup> |
| | `--lmcccm-modal-text` | N/A <sup>\*\*\*\*</sup> |
| | N/A | `--cc-modal-transition-duration` |
| Footer | N/A | `--cc-footer-bg` |
| | N/A | `--cc-footer-color` |
| | N/A | `--cc-footer-border-color` |

<sup>\*)</sup> Active state is generally not styled in the vanilla-cookieconsent library.<br />
<sup>\**)</sup> Knob background color is now set separately for on and off states.<br />
<sup>\***)</sup> Knob icon color is now inherited from the toggle background color.<br />
<sup>\****)</sup> Modal background and text color now use the common `--cc-bg` and `--cc-primary-color` custom properties.
<sup>\*\*)</sup> Knob background color is now set separately for on and off states.<br />
<sup>\*\*\*)</sup> Knob icon color is now inherited from the toggle background color.<br />
<sup>\*\*\*\*)</sup> Modal background and text color now use the common `--cc-bg` and `--cc-primary-color` custom properties.

See readme for [full theming documentation](README.md#theming).

Expand Down
1 change: 1 addition & 0 deletions examples/webpack-with-esm/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">

<link rel="stylesheet" href="../../dist/CookieConsentManager.min.css"><!-- You will load this from CDN instead -->
<link rel="stylesheet" href="../../dist/CookieConsentManagerThemes.min.css"><!-- You will load this from CDN instead. Only use when your project is NOT built with Spirit Design System or you use Spirit Design System version 2 or lower. -->

</head>
<body>
Expand Down
1 change: 1 addition & 0 deletions examples/webpack-with-typescript/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">

<link rel="stylesheet" href="../../dist/CookieConsentManager.min.css"><!-- You will load this from CDN instead -->
<link rel="stylesheet" href="../../dist/CookieConsentManagerThemes.min.css"><!-- You will load this from CDN instead. Only use when your project is NOT built with Spirit Design System or you use Spirit Design System version 2 or lower. -->

</head>
<body>
Expand Down

0 comments on commit f4378e1

Please sign in to comment.