Improve naming of contextual CSS custom properties (#1510)

sl-design-system · Sep 17, 2024 · 563dccc · 563dccc
1 parent 31e3c16
commit 563dccc
Show file tree

Hide file tree

Showing 10 changed files with 127 additions and 94 deletions.
diff --git a/.changeset/clever-vans-help.md b/.changeset/clever-vans-help.md
@@ -0,0 +1,10 @@
+---
+'@sl-design-system/menu': patch
+'@sl-design-system/sanoma-learning': patch
+---
+
+Do not transform token parts to kebab case, only add '-' in between
+
+This change is only for the new contextual tokens. Previously any snakeCase
+tokens would be transformed into kebab-case. This is not the desired behavior
+for the new contextual tokens.
diff --git a/package.json b/package.json
@@ -467,7 +467,7 @@
     "storybook": "^8.2.9",
     "stylelint": "^16.9.0",
     "typescript": "^5.4.5",
-    "vite": "^5.4.3",
+    "vite": "^5.4.4",
     "wireit": "^0.14.9"
   }
 }
diff --git a/packages/components/menu/src/menu-item.scss b/packages/components/menu/src/menu-item.scss
@@ -1,5 +1,5 @@
 :host {
-  border-radius: var(--sl-size-border-radius-default);
+  border-radius: var(--sl-size-borderRadius-default);
   color: var(--sl-color-text-default);
   display: block;
   flex-grow: 1;
@@ -64,7 +64,7 @@ sl-icon[name='chevron-right'] {
 [part='wrapper'] {
   align-items: center;
   background: var(--sl-color-action-background-accent-subtle-idle);
-  border-radius: var(--sl-size-border-radius-default);
+  border-radius: var(--sl-size-borderRadius-default);
   cursor: pointer;
   display: flex;
   gap: var(--sl-space-new-md);
@@ -101,5 +101,5 @@ sl-icon[name='chevron-right'] {
 
 slot[name='submenu']::slotted(sl-menu) {
   // Make sure the first menu item in the nested menu aligns horizontally
-  margin-block-start: calc((var(--sl-space-new-md) + var(--sl-size-border-width-default)) * -1);
+  margin-block-start: calc((var(--sl-space-new-md) + var(--sl-size-borderWidth-default)) * -1);
 }
diff --git a/packages/components/menu/src/menu.scss b/packages/components/menu/src/menu.scss
@@ -1,7 +1,7 @@
 :host {
   background: var(--sl-color-elevation-surface-raised);
-  border: var(--sl-color-elevation-border-raised) solid var(--sl-size-border-width-default);
-  border-radius: var(--sl-size-border-radius-default);
+  border: var(--sl-color-elevation-border-raised) solid var(--sl-size-borderWidth-default);
+  border-radius: var(--sl-size-borderRadius-default);
   box-shadow: var(--sl-elevation-shadow-md);
   box-sizing: border-box;
   color: var(--sl-color-text-default);
@@ -112,14 +112,14 @@
 }
 
 ::slotted(sl-menu-item-group:not(:first-child)) {
-  border-block-start: var(--sl-color-elevation-border-raised) solid var(--sl-size-border-width-default);
+  border-block-start: var(--sl-color-elevation-border-raised) solid var(--sl-size-borderWidth-default);
   margin-block-start: var(--sl-space-new-sm);
   padding-block-start: var(--sl-space-new-md);
 }
 
 ::slotted(hr) {
   border: 0;
-  border-block-start: var(--sl-color-elevation-border-raised) solid var(--sl-size-border-width-default);
+  border-block-start: var(--sl-color-elevation-border-raised) solid var(--sl-size-borderWidth-default);
   margin: var(--sl-space-new-sm) 0;
   padding: 0;
 }
diff --git a/packages/themes/stylelint.config.mjs b/packages/themes/stylelint.config.mjs
@@ -5,6 +5,14 @@ export default {
   rules: {
     ...config.rules,
     'block-no-empty': null,
-    'font-family-no-missing-generic-family-keyword': null
+    'color-no-hex': null,
+    'custom-property-pattern': [
+      'sl-[a-z][a-zA-Z]*(-[a-z][a-zA-Z]*)*',
+      {
+        message: 'Expected custom property names to match --sl(-snakeCase)+'
+      }
+    ],
+    'font-family-no-missing-generic-family-keyword': null,
+    'no-unknown-custom-properties': true
   }
 };
diff --git a/packages/tokens/src/core.json b/packages/tokens/src/core.json
@@ -2057,7 +2057,7 @@
     },
     "focus": {
       "gap": {
-        "value": "{border.width.focusring.default}+{border.width.focusring.offset}",
+        "value": "{border.width.focusring.default} + {border.width.focusring.offset}",
         "type": "spacing"
       }
     }

diff --git a/packages/tokens/src/system.json b/packages/tokens/src/system.json
@@ -307,11 +307,11 @@
     },
     "input": {
       "vertical": {
-        "value": "{space-new.xs}-{size.borderWidth.default}",
+        "value": "{space-new.xs} - {size.borderWidth.default}",
         "type": "spacing"
       },
       "horizontal": {
-        "value": "{space-new.md}-{size.borderWidth.default}",
+        "value": "{space-new.md} - {size.borderWidth.default}",
         "type": "spacing"
       }
     }

diff --git a/scripts/build-themes.js b/scripts/build-themes.js
@@ -1,4 +1,5 @@
 import { permutateThemes, register, transformLineHeight } from '@tokens-studio/sd-transforms';
+import { kebabCase } from 'change-case';
 import cssnano from 'cssnano';
 import { readFile, writeFile } from 'fs/promises';
 import { argv } from 'node:process';
@@ -11,6 +12,21 @@ const mathPresent = /^(?!calc|color-mix|rgb|hsl).*\s[\+\-\*\/]\s.*/;
 
 register(StyleDictionary);
 
+StyleDictionary.registerTransform({
+  name: 'name/kebabWithCamel',
+  type: 'name',
+  transform: function (token, config) {
+    const { filePath, path } = token;
+
+    // If the token is a new contextual token, do not kebab-case it
+    if (filePath && (filePath.includes('primitives.json') || filePath.includes('system.json') || filePath.endsWith('-new.json'))) {
+      return [config.prefix].concat(path).join('-');
+    } else {
+      return kebabCase([config.prefix].concat(path).join(' '));
+    }
+  }
+});
+
 StyleDictionary.registerFileHeader({
   name: 'sl/legal',
   fileHeader: () => {
@@ -166,7 +182,7 @@ const build = async (production = false) => {
           css: {
             transformGroup: 'tokens-studio',
             transforms: [
-              'name/kebab',
+              'name/kebabWithCamel',
               'sl/name/css/fontFamilies',
               'sl/size/css/lineHeight',
               'sl/size/css/paragraphSpacing',

diff --git a/scripts/package.json b/scripts/package.json
@@ -9,9 +9,9 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "@figma-export/cli": "^6.0.1",
+    "@figma-export/cli": "^6.0.2",
     "@figma-export/output-components-as-svg": "^6.0.1",
-    "@figma-export/transform-svg-with-svgo": "^6.0.1",
+    "@figma-export/transform-svg-with-svgo": "^6.0.2",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/pro-duotone-svg-icons": "^6.6.0",
@@ -22,12 +22,12 @@
     "@fortawesome/sharp-light-svg-icons": "^6.6.0",
     "@fortawesome/sharp-regular-svg-icons": "^6.6.0",
     "@fortawesome/sharp-solid-svg-icons": "^6.6.0",
-    "@tokens-studio/sd-transforms": "^1.2.3",
+    "@tokens-studio/sd-transforms": "^1.2.4",
     "cssnano": "^7.0.6",
     "esbuild": "^0.23.1",
     "fast-glob": "^3.3.2",
     "postcss": "^8.4.45",
     "sass": "^1.78.0",
-    "style-dictionary": "^4.0.1"
+    "style-dictionary": "^4.1.0"
   }
 }