BREAKING CHANGES: Update buttons theming API according to the latest …

…design
lmc-eu · Dec 1, 2021 · ba39ed9 · ba39ed9
1 parent fd7e8ba
commit ba39ed9
Show file tree

Hide file tree

Showing 8 changed files with 25 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -30,7 +30,7 @@ Make assets load faster by placing pre-connect headers right after `<meta charse
 Load default CSS along with your styles in `<head>`:
 
 ```html
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lmc-eu/cookie-consent-manager@0.7/LmcCookieConsentManager.min.css">
 ```
 
@@ -56,7 +56,7 @@ You can load the plugin from a CDN, as in the basic example above.
 
 ```html
 <!-- Note we use version "cookie-consent-manager@0.7", which points the latest version of this series (including bugfix releases) -->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lmc-eu/cookie-consent-manager@0.7/LmcCookieConsentManager.min.css">
 <script defer src="https://cdn.jsdelivr.net/npm/@lmc-eu/cookie-consent-manager@0.7/init.js"></script>
 ```
@@ -113,11 +113,11 @@ via npm package [@lmc-eu/cookie-consent-manager](https://www.npmjs.com/package/@
  ```html
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
  ```
  or in your Sass stylesheet:
  ```scss
- @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
+ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap");
  ```
 
  2. Or [switch to custom font](#custom-font) that matches the design of your project.
@@ -341,6 +341,7 @@ anywhere in your stylesheet (the order of which is not important):
 | `--lmcccm-link-text` | Link text color |
 | `--lmcccm-link-hover-text` | Link text color on hover |
 | `--lmcccm-link-active-text` | Link text color in active state |
+| `--lmcccm-btn-font-weight` | Button font weight |
 | `--lmcccm-btn-border-width` | Button border width |
 | `--lmcccm-btn-border-style` | Button border style |
 | `--lmcccm-btn-border-radius` | Button border radius |
@@ -353,9 +354,6 @@ anywhere in your stylesheet (the order of which is not important):
 | `--lmcccm-btn-primary-active-border` | Primary button border color in active state |
 | `--lmcccm-btn-primary-active-bg` | Primary button background color in active state |
 | `--lmcccm-btn-primary-active-text` | Primary button text color in active state |
-| `--lmcccm-btn-secondary-text` | Secondary button text color |
-| `--lmcccm-btn-secondary-hover-text` | Secondary button text color on hover |
-| `--lmcccm-btn-secondary-active-text` | Secondary button text color in active state |
 
 </details>
 

diff --git a/examples/callbacks.html b/examples/callbacks.html
@@ -11,7 +11,7 @@
 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
  <script src="./functions.js" defer></script>
 
  <link rel="stylesheet" href="../dist/LmcCookieConsentManager.min.css"><!-- You will load this from CDN instead -->

diff --git a/examples/configuration.html b/examples/configuration.html
@@ -11,7 +11,7 @@
 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
  <script src="./functions.js" defer></script>
 
  <link rel="stylesheet" href="../dist/LmcCookieConsentManager.min.css"><!-- You will load this from CDN instead -->

diff --git a/examples/index.html b/examples/index.html
@@ -12,7 +12,7 @@
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@v1.25/themes/prism.css">
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap">
  <script src="./functions.js" defer></script>
 
  <link rel="stylesheet" href="../dist/LmcCookieConsentManager.min.css"><!-- You will load this from CDN instead -->

diff --git a/examples/theming.html b/examples/theming.html
@@ -13,7 +13,7 @@
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@v1.25/themes/prism.css">
  <!-- For the purpose of this demo, we are loading two typefaces: -->
- <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Noto+Sans:wght@400;700&display=swap">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Noto+Sans:wght@400;700&display=swap">
  <script src="./functions.js" defer></script>
 
  <link rel="stylesheet" href="../dist/LmcCookieConsentManager.min.css"><!-- You will load this from CDN instead -->
@@ -27,16 +27,14 @@
  --lmcccm-link-text: var(--lmcccm-text);
  --lmcccm-link-hover-text: rgb(17, 17, 17);
  --lmcccm-link-active-text: var(--lmcccm-link-hover-text);
+ --lmcccm-btn-font-weight: 700;
  --lmcccm-btn-border-radius: 1.25em;
  --lmcccm-btn-primary-bg: rgb(17, 17, 17);
  --lmcccm-btn-primary-text: rgb(255, 255, 255);
  --lmcccm-btn-primary-hover-bg: rgb(51, 51, 51);
  --lmcccm-btn-primary-hover-text: var(--lmcccm-btn-primary-text);
  --lmcccm-btn-primary-active-bg: rgb(0, 0, 0);
  --lmcccm-btn-primary-active-text: var(--lmcccm-btn-primary-text);
- --lmcccm-btn-secondary-text: var(--lmcccm-link-text);
- --lmcccm-btn-secondary-hover-text: var(--lmcccm-link-hover-text);
- --lmcccm-btn-secondary-active-text: var(--lmcccm-link-active-text);
  }
 
  .custom-theme .c_darkmode {
@@ -51,9 +49,6 @@
  --lmcccm-btn-primary-hover-text: var(--lmcccm-btn-primary-text);
  --lmcccm-btn-primary-active-bg: rgb(255, 255, 255);
  --lmcccm-btn-primary-active-text: var(--lmcccm-btn-primary-text);
- --lmcccm-btn-secondary-text: var(--lmcccm-link-text);
- --lmcccm-btn-secondary-hover-text: var(--lmcccm-link-hover-text);
- --lmcccm-btn-secondary-active-text: var(--lmcccm-link-active-text);
  }
  </style>
 </head>
@@ -145,16 +140,14 @@ <h2 class="mt-4 mt-md-5 mb-3">Without Spirit Design System</h2>
  --lmcccm-link-text: var(--lmcccm-text);
  --lmcccm-link-hover-text: rgb(17, 17, 17);
  --lmcccm-link-active-text: var(--lmcccm-link-hover-text);
+ --lmcccm-btn-font-weight: 700;
  --lmcccm-btn-border-radius: 1.25em;
  --lmcccm-btn-primary-bg: rgb(17, 17, 17);
  --lmcccm-btn-primary-text: rgb(255, 255, 255);
  --lmcccm-btn-primary-hover-bg: rgb(51, 51, 51);
  --lmcccm-btn-primary-hover-text: var(--lmcccm-btn-primary-text);
  --lmcccm-btn-primary-active-bg: rgb(0, 0, 0);
  --lmcccm-btn-primary-active-text: var(--lmcccm-btn-primary-text);
- --lmcccm-btn-secondary-text: var(--lmcccm-link-text);
- --lmcccm-btn-secondary-hover-text: var(--lmcccm-link-hover-text);
- --lmcccm-btn-secondary-active-text: var(--lmcccm-link-active-text);
 }</code></pre>
  </details>
 

diff --git a/src/scss/_cc-theme.scss b/src/scss/_cc-theme.scss
@@ -11,8 +11,8 @@
  --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: transparent;
- --cc-btn-secondary-text: var(--lmcccm-p-btn-secondary-text);
- --cc-btn-secondary-hover-bg: var(--lmcccm-p-btn-secondary-hover-bg);
+ --cc-btn-secondary-text: var(--lmcccm-p-link-text);
+ --cc-btn-secondary-hover-bg: transparent;
  //--cc-toggle-bg-off: #919ea6;
  //--cc-toggle-bg-on: var(--cc-btn-primary-bg);
  //--cc-toggle-bg-readonly: #d5dee2;

diff --git a/src/scss/_style.scss b/src/scss/_style.scss
@@ -78,12 +78,14 @@
 #cm .c_link,
 #s-c-bn,
 #s-cnt button + button {
+ color: var(--lmcccm-p-link-text);
+
  &:hover {
- color: var(--lmcccm-p-btn-secondary-hover-text);
+ color: var(--lmcccm-p-link-hover-text);
  }
 
  &:active {
- color: var(--lmcccm-p-btn-secondary-active-text);
+ color: var(--lmcccm-p-link-active-text);
  }
 }
 
@@ -163,6 +165,7 @@
 
 #c-bns button:first-child,
 #s-bns button:first-child {
+ font-weight: var(--lmcccm-p-btn-font-weight);
  border: var(--lmcccm-p-btn-border-width) var(--lmcccm-p-btn-border-style) var(--lmcccm-p-btn-primary-border);
 
  &:hover {

diff --git a/src/scss/_theme.scss b/src/scss/_theme.scss
@@ -21,6 +21,7 @@
 
  --lmcccm-p-font-family: var(--lmcccm-font-family, #{tokens.$font-family-default});
  --lmcccm-p-base-font-size: var(--lmcccm-base-font-size, #{tools.rem2em(tokens.$font-size-base)});
+ --lmcccm-p-btn-font-weight: var(--lmcccm-btn-font-weight, 600); // TODO change to a Spirit token once available.
  --lmcccm-p-btn-border-width: var(--lmcccm-btn-border-width, #{list.nth(tokens.$border-1, 1)});
  --lmcccm-p-btn-border-style: var(--lmcccm-btn-border-style, none); // TODO change to `#{list.nth(tokens.$border-1, 2)}` once Spirit tokens are updated.
  --lmcccm-p-btn-border-radius: var(--lmcccm-btn-border-radius, #{tools.rem2em(tokens.$radius-1)});
@@ -31,9 +32,9 @@
 
  --lmcccm-p-bg: var(--lmcccm-bg, #{tokens.$background-basic});
  --lmcccm-p-text: var(--lmcccm-text, #{tokens.$text-primary-default});
- --lmcccm-p-link-text: var(--lmcccm-link-text, #{tokens.$action-secondary-default});
- --lmcccm-p-link-hover-text: var(--lmcccm-link-hover-text, #{tokens.$action-secondary-hover});
- --lmcccm-p-link-active-text: var(--lmcccm-link-active-text, #{tokens.$action-secondary-active});
+ --lmcccm-p-link-text: var(--lmcccm-link-text, #{tokens.$action-link-primary-default});
+ --lmcccm-p-link-hover-text: var(--lmcccm-link-hover-text, #{tokens.$action-link-primary-hover});
+ --lmcccm-p-link-active-text: var(--lmcccm-link-active-text, #{tokens.$action-link-primary-active});
  --lmcccm-p-btn-primary-border: var(--lmcccm-btn-primary-border, #{tokens.$action-primary-default});
  --lmcccm-p-btn-primary-bg: var(--lmcccm-btn-primary-bg, #{tokens.$action-primary-default});
  --lmcccm-p-btn-primary-text: var(--lmcccm-btn-primary-text, #{tokens.$text-primary-inverted-default});
@@ -43,9 +44,6 @@
  --lmcccm-p-btn-primary-active-border: var(--lmcccm-btn-primary-active-border, #{tokens.$action-primary-active});
  --lmcccm-p-btn-primary-active-bg: var(--lmcccm-btn-primary-active-bg, #{tokens.$action-primary-active});
  --lmcccm-p-btn-primary-active-text: var(--lmcccm-btn-primary-active-text, #{tokens.$text-primary-inverted-default});
- --lmcccm-p-btn-secondary-text: var(--lmcccm-btn-secondary-text, #{tokens.$action-link-primary-default});
- --lmcccm-p-btn-secondary-hover-text: var(--lmcccm-btn-secondary-hover-text, #{tokens.$action-link-primary-hover});
- --lmcccm-p-btn-secondary-active-text: var(--lmcccm-btn-secondary-active-text, #{tokens.$action-link-primary-active});
 }
 
 //
@@ -58,9 +56,9 @@
 .c_darkmode {
  --lmcccm-p-bg: var(--lmcccm-bg, #{tokens.$background-inverted});
  --lmcccm-p-text: var(--lmcccm-text, #{tokens.$text-secondary-inverted-default});
- --lmcccm-p-link-text: var(--lmcccm-link-text, #{tokens.$text-secondary-inverted-default});
- --lmcccm-p-link-hover-text: var(--lmcccm-link-hover-text, #{tokens.$text-secondary-inverted-default});
- --lmcccm-p-link-active-text: var(--lmcccm-link-active-text, #{tokens.$text-secondary-inverted-default});
+ --lmcccm-p-link-text: var(--lmcccm-link-text, #{tokens.$action-link-secondary-default});
+ --lmcccm-p-link-hover-text: var(--lmcccm-link-hover-text, #{tokens.$action-link-secondary-hover});
+ --lmcccm-p-link-active-text: var(--lmcccm-link-active-text, #{tokens.$action-link-secondary-active});
  --lmcccm-p-btn-primary-border: var(--lmcccm-btn-primary-border, #{tokens.$action-primary-default});
  --lmcccm-p-btn-primary-bg: var(--lmcccm-btn-primary-bg, #{tokens.$action-primary-default});
  --lmcccm-p-btn-primary-text: var(--lmcccm-btn-primary-text, #{tokens.$text-primary-inverted-default});
@@ -70,7 +68,4 @@
  --lmcccm-p-btn-primary-active-border: var(--lmcccm-btn-primary-active-border, #{tokens.$action-primary-active});
  --lmcccm-p-btn-primary-active-bg: var(--lmcccm-btn-primary-active-bg, #{tokens.$action-primary-active});
  --lmcccm-p-btn-primary-active-text: var(--lmcccm-btn-primary-active-text, #{tokens.$text-primary-inverted-default});
- --lmcccm-p-btn-secondary-text: var(--lmcccm-btn-secondary-text, #{tokens.$text-secondary-inverted-default});
- --lmcccm-p-btn-secondary-hover-text: var(--lmcccm-btn-secondary-hover-text, #{tokens.$text-secondary-inverted-default});
- --lmcccm-p-btn-secondary-active-text: var(--lmcccm-btn-secondary-active-text, #{tokens.$text-secondary-inverted-default});
 }