feat: add actions field to colors

openedx · Feb 23, 2023 · 4a567b1 · 4a567b1
1 parent 5b45014
commit 4a567b1
Show file tree

Hide file tree

Showing 5 changed files with 544 additions and 119 deletions.
diff --git 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 Thu, 16 Feb 2023 16:08:35 GMT
  */
 
 .bg-dark {

diff --git a/scss/core/css/variables.css b/scss/core/css/variables.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 Thu, 16 Feb 2023 16:08:35 GMT
  */
 
 :root {

diff --git a/tokens/css-utilities.js b/tokens/css-utilities.js
@@ -2,9 +2,8 @@
  * Implements bg-variant mixin from bootstrap. Creates utility classes for background colors based on theme color.
  */
 function bgVariant(token) {
-  const { attributes: { type, item } } = token;
+  const { attributes: { type, item}, actions } = token;
   const parent = `.bg-${type}${item === 'base' ? '' : `-${item}`}`;
-  const action = token.name.replace(type, `action-default-${type}`);
   return `${parent} {
   background-color: ${`var(--${token.name})`} !important;
 }
@@ -13,7 +12,7 @@ a${parent}:hover,
 a${parent}:focus,
 button${parent}:hover,
 button${parent}:focus {
-  background-color: ${`var(--${action})`}  !important;
+  background-color: ${actions.default}  !important;
 }
 
 `;
@@ -23,16 +22,15 @@ button${parent}:focus {
  * Implements text-emphasis-variant mixin from bootstrap. Creates utility classes for text colors based on theme color.
  */
 function textEmphasisVariant(token) {
-  const { attributes: { type, item } } = token;
+  const { attributes: { type, item}, actions } = token;
   const parent = `.text-${type}${item === 'base' ? '' : `-${item}`}`;
-  const action = token.name.replace(type, `action-default-${type}`);
   return `${parent} {
   color: ${`var(--${token.name})`} !important;
 }
 
 a${parent}:hover,
 a${parent}:focus {
-  color: ${`var(--${action})`} !important;
+  color: ${actions.default} !important;
 }
 
 `;