@rijkshuisstijl-community/design-tokens 9.0.0 → 10.0.1

package/CHANGELOG.md

@@ -1,5 +1,165 @@
 # @rijkshuisstijl-community/design-tokens
 
+## 10.0.1
+
+### Patch Changes
+
+- f5942a6: Parent key is verwijderd uit figma.tokens.json. Deze key is nooit in gebruik geweest, dit heeft geen impact.
+- e7b3d60: Add section about adding new token sets in documentation
+- 5f77bfa: Added transformations on CSS-tokens to allow for calculations with references, power (^) and sanitize any `roundTo` in tokens
+
+## 10.0.0
+
+### Major Changes
+
+- 093f3af: Update token format version to W3C DCTG, read more at https://docs.tokens.studio/convert-to-dtcg-format.
+- 462686a: De brand en common tokens van RHC zijn naast de basis tokens gelegd. Hieruit zijn aantal naamwijzigen gekomen om de tokens beter aan te laten sluiten. Maak je direct gebruik van common tokens? Dan is dit een breaking change.
+
+  Subdued is gewijzigd in subtle:
+  - naam `rhc.color.foreground.subdued` gewijzigd naar `rhc.color.foreground.subtle`
+  - naam `rhc.color.border.subdued` gewijzigd naar `rhc.color.border.subtle`
+
+  Naamgeving feedback kleuren zijn aangepast:
+  - naam `rhc.color.feedback.success.default` gewijzigd naar `rhc.color.positive.default`
+  - naam `rhc.color.feedback.success.subdued` gewijzigd naar `rhc.color.positive.subtle`
+  - naam `rhc.color.feedback.info.default` gewijzigd naar `rhc.color.info.default`
+  - naam `rhc.color.feedback.info.subdued` gewijzigd naar `rhc.color.info.subtle`
+  - naam `rhc.color.feedback.error.default` gewijzigd naar `rhc.color.negative.default`
+  - naam `rhc.color.feedback.error.subdued` gewijzigd naar `rhc.color.negative.subtle`
+  - naam `rhc.color.feedback.warning.default` gewijzigd naar `rhc.color.warning.default`
+  - naam `rhc.color.feedback.warning.subdued` gewijzigd naar `rhc.color.warning.subtle`
+
+  Groepering 'text' is toegevoegd aan de font tokens:
+  - naam `rhc.font-weight.extra-bold` gewijzigd naar `rhc.text.font-weight.extra-bold`
+  - naam `rhc.font-weight.bold` gewijzigd naar `rhc.text.font-weight.bold`
+  - naam `rhc.font-weight.semi-bold` gewijzigd naar `rhc.text.font-weight.semi-bold`
+  - naam `rhc.font-weight.regular` gewijzigd naar `rhc.text.font-weight.regular`
+  - naam `rhc.font-weight.light` gewijzigd naar `rhc.text.font-weight.light`
+  - naam `rhc.font-weight.default` gewijzigd naar `rhc.text.font-weight.default`
+  - naam `rhc.font-weight.strong` gewijzigd naar `rhc.text.font-weight.strong`
+  - naam `rhc.font-weight.thin` gewijzigd naar `rhc.text.font-weight.thin`
+  - naam `rhc.line-height.sm` gewijzigd naar `rhc.text.line-height.sm`
+  - naam `rhc.line-height.md` & `rhc.line-height.body` gewijzigd naar `rhc.text.line-height.md`
+  - naam `rhc.font-family.primary` gewijzigd naar `rhc.text.font-family.default`
+  - naam `rhc.font-family.secondary` gewijzigd naar `rhc.text.font-family.serif`
+
+  Font-size schaal is gewijzigd:
+  - naam `rhc.font-size.heading.level-5` & `rhc.font-size.body.default` gewijzigd naar `rhc.text.font-size.md`
+  - naam `rhc.font-size.heading.level-4` & `rhc.font-size.body.intro` gewijzigd naar `rhc.text.font-size.lg`
+  - naam `rhc.font-size.heading.level-3` gewijzigd naar `rhc.text.font-size.xl`
+  - naam `rhc.font-size.heading.level-2` gewijzigd naar `rhc.text.font-size.2xl`
+  - naam `rhc.font-size.heading.level-1` gewijzigd naar `rhc.text.font-size.3xl`
+
+  responsive schaal is gewijzigd:
+  - naam `rhc.font-size.xs.desktop` gewijzigd naar `rhc.text.font-size.max.md`
+  - naam `rhc.font-size.xs.mobile` gewijzigd naar `rhc.text.font-size.min.md`
+  - naam `rhc.font-size.sm.desktop` gewijzigd naar `rhc.text.font-size.max.lg`
+  - naam `rhc.font-size.sm.mobile` gewijzigd naar `rhc.text.font-size.min.lg`
+  - naam `rhc.font-size.md.desktop` gewijzigd naar `rhc.text.font-size.max.xl`
+  - naam `rhc.font-size.md.mobile` gewijzigd naar `rhc.text.font-size.min.xl`
+  - naam `rhc.font-size.lg.desktop` gewijzigd naar `rhc.text.font-size.max.2xl`
+  - naam `rhc.font-size.lg.mobile` gewijzigd naar `rhc.text.font-size.min.2xl`
+  - naam `rhc.font-size.xl.desktop` gewijzigd naar `rhc.text.font-size.max.3xl`
+  - naam `rhc.font-size.xl.mobile` gewijzigd naar `rhc.text.font-size.min.3xl`
+
+  Andere naam-wijzigingen:
+  - naam `rhc.color.canvas` gewijzigd naar `rhc.color.bg-document`
+  - naam `rhc.size.target` gewijzigd naar `rhc.size.pointer-target`
+
+  Toegevoegde tokens:
+  - `rhc.text.font-family.sans`
+
+  Verwijderde tokens:
+  - `rhc.font-size.xs.tablet`
+  - `rhc.font-size.sm.tablet`
+  - `rhc.font-size.md.tablet`
+  - `rhc.font-size.lg.tablet`
+  - `rhc.font-size.xl.tablet`
+
+- b04f679: Thema's bijgewerkt
+  - `body` en `root` zijn enabled.
+  - Hover & active kleuren van buttons aangepast van lint-blauw naar de thema kleuren
+  - Alle uitvoerende thema's hebben nu RijksSans als default font.
+  - Thema's hernoemd volgens de naming convention `{type organisatie} - {naam primaire kleur}` bijvoorbeeld:
+    - Kern - Lintblauw
+    - Uitvoerend - Groen
+    - Uitvoerend - Oranje
+  - Verwijderd, deze thema’s waren voorbeelden en worden naar verwachting niet gebruikt:
+    - Uitvoerend - violet
+    - Uitvoerend - violet - oud
+    - Uitvoerend - mintgroen
+  - Nieuwe toevoeging:
+    - Uitvoerend - Robijn Rood
+
+  Overwrites tokensets bijgewerkt en opgeschoond
+  - `type-scale` toegevoegd.
+  - Accent kleuren verwijderd.
+  - Oude rijkshuisstijl verwijderd.
+  - Afwijkende button verwijderd.
+  - Volgorde van de tokensets aangepast.
+
+  Nieuwe token toegevoegd
+  - Token `rhc.color.primary.active` is toegevoegd aan de common tokens.
+
+- cd14679: De brand en common tokens van RHC zijn naast de basis tokens gelegd. Hieruit zijn aantal naamwijzigen gekomen om de tokens beter aan te laten sluiten. Maak je direct gebruik van common tokens? Dan is dit een breaking change.
+  - `rhc.color.none` gewijzigd naar `rhc.color.transparant`
+  - `rhc.color.focus.outline` gewijzigd naar `rhc.focus.outline-color`
+  - `rhc.focus.inverse.outline-color` is toegevoegd
+  - `rhc.size.icon.functional` gewijzigd naar `rhc.size.icon.md`
+  - `rhc.border-radius.circle` gewijzigd naar `rhc.border-radius.round`
+  - `rhc.border-width.default` gewijzigd naar `rhc.border-width.sm`
+  - `rhc.border-width.m` gewijzigd naar `rhc.border-width.md`
+
+- afe2d9c: **Token-structuur opgeschoond en hernoemd**
+  - `utrecht/*` tokens hernoemd naar `component/*` of verplaatst naar `common/vendor`.
+  - `component/rhc-icon-only` tokens verplaatst naar `components/button`.
+  - Alle `*/font` mappen hernoemd naar `*/text`.
+  - `overwrites/*` hernoemd naar `overrides/*`.
+  - Verwijderd:
+    - `utrecht/root`,
+    - `utrecht/body`,
+    - `components/form-field-label/todo`,
+    - `overwrites/footer/*`,
+    - `overwrites/nav-bar/*`.
+  - Hernoemd:
+    - `components/pagination/ams` → `components/page-number-navigation`,
+    - `components/footer` → `components/page-footer`.
+
+  **Accent-tokens verwijderd**
+  Accent-tokens verwijderd omdat ze niet in gebruik zijn en de waardes organisatie specifiek:
+  - `rhc.color.accent-1`,
+  - `rhc.color.accent-2`.
+
+  **Thema's aangepast**
+  - Thema `KOOP` hernoemd naar `Uitvoerend – Lintblauw` voor meer generieke naamgeving.
+  - Thema `Uitvoerend - Oranje` non-primary button uitvoering aangepast voor toegankelijkheid.
+
+- 5b7a72c: Updated rounded corner common tokens to the following values:
+  --rhc-rounded-corner-overflow
+  --rhc-rounded-corner-sm-border-radius
+  --rhc-rounded-corner-md-border-radius
+  --rhc-rounded-corner-lg-border-radius
+- afe2d9c: Koop thema hernoemd naar Uitvoerend lintblauw. Let op dat je de volgende import wijzeging moet doorvoeren als je de koop thema gebruikte:
+  van: `@import "@rijkshuisstijl-community/design-tokens/dist/koop/index.css";`
+  naar: `@import "@rijkshuisstijl-community/design-tokens/dist/uitvoerend-lintblauw/index.css";`
+
+### Minor Changes
+
+- 80fea49: - De volgende token is toegevoegd: `utrecht.icon.baseline.inset-block-start`
+  - Design token utrecht.link-list.font-weight hernoemd naar utrecht.link-list.link.font-weight
+- 3d1fbeb: standaard theme is nu hetzelfde als kern - lintblauw
+
+### Patch Changes
+
+- cd80794: Updated readme's to install dependencies for build instead of dev.
+- 9a27826: radio button removed deprecated tokens
+- 2062466: textarea tokens; deprecated verwijderd
+- e536c65: A token classified as deprecated was not deprecated (field field) - still in use by form-field-radio-option
+- 2f3f91c: figure; token en css cleanup
+- 5961ac6: checkbox; check on deprecated tokens
+- 17fe29e: select; removed deprecated tokens
+- bbba719: added tokens for utrecht/root&body to support root font
+
 ## 9.0.0
 
 ### Major Changes

package/README.md

@@ -18,10 +18,10 @@ Hieronder vind je instructies hoe je de standaard Rijkshuisstijl-community token
 1. Installeer je het [design-tokens npm package](https://www.npmjs.com/package/@rijkshuisstijl-community/design-tokens).
 
    ```bash
-   npm install --save-dev @rijkshuisstijl-community/design-tokens
+   npm install @rijkshuisstijl-community/design-tokens
 
    # En als je CSS classes wilt importeren
-   npm install --save-dev @rijkshuisstijl-community/components-css
+   npm install @rijkshuisstijl-community/components-css
    ```
 
    Dit pakket bevat de CSS-variabelen van het design systeem. Importeer het `index.css`-bestand uit de `dist` map van het pakket, en omring het deel van je applicatie waar je het thema wilt toepassen. Het Rijkshuisstijl-thema is bijvoorbeeld: `rhc-theme`.
@@ -44,7 +44,7 @@ Hieronder vind je instructies hoe je de standaard Rijkshuisstijl-community token
 
 ## Nieuw thema toevoegen
 
-Er zijn al verschillende bedrijfsthema's in de @rijkshuisstijl-community/design-tokens package waarvoor (gedeeltelijke) support is vanuit de Rijkshuisstijl-community. Hieronder volgt een uitleg hoe nog meer thema's kunnen worden toegevoegd
+Er zijn al verschillende bedrijfsthema's in de @rijkshuisstijl-community/design-tokens package waarvoor (gedeeltelijke) support is vanuit de Rijkshuisstijl-community. Hieronder volgt een uitleg hoe nog meer thema's kunnen worden toegevoegd.
 
 ## Nieuwe thema tokens
 
@@ -166,3 +166,48 @@ Er zijn al verschillende bedrijfsthema's in de @rijkshuisstijl-community/design-
    };
    export default preview;
    ```
+
+## Nieuwe token set toevoegen
+
+Als je tokensets toevoegt vanuit de code in `figma.tokens.json`, zitten daar regels aan vast.
+Voor elke nieuwe tokenset, zoals bijvoorbeeld `components/pagination/ams`:
+
+```json
+  "components/pagination/ams": {
+    "ams": {
+      "pagination": {
+        "font-family": {
+          "keys...": "values..."
+        }
+      }
+    }
+  }
+```
+
+is ook een entry nodig in `.$metadata.tokenSetOrder`: (op alfabetische volgorde aub)
+
+```json
+  "$metadata": {
+    "tokenSetOrder": [
+      "brand/color",
+      "components/pagination/ams",
+      "etc..."
+    ]
+  }
+```
+
+én in _elk_ thema `.$themes[x].selectedTokenSets`: (op alfabetische volgorde aub)
+
+```json
+  "$themes": [
+    {
+      "id": "05865788a086eeac7ffc4514736ccd777f1ff95c",
+      "name": "wetgevend",
+      "$figmaStyleReferences": {},
+      "selectedTokenSets": {
+        "components/pagination/ams": "enabled",
+        "other/groups...": "enabled"
+      }
+    }
+  ]
+```

package/build.mjs

@@ -1,20 +1,76 @@
 import { existsSync, mkdirSync } from 'fs';
 import { readFile, writeFile } from 'node:fs/promises';
-import path from 'path';
+import { posix } from 'path';
 import StyleDictionary from 'style-dictionary';
+import { register } from '@tokens-studio/sd-transforms';
+
+import { fixCSSFile } from './cssFixers.mjs';
 
 // Will take the theme name and remove all spaces and make it lowercase
 const normalizeThemeName = (name) => {
   return name.toLowerCase().replace(/\s+/g, '');
 };
 
+const removeUnitlessLineHeightTransform = () => {
+  // During update to W3C DTCG format, we found that the tokens-studio transformGroup
+  // includes the transform "ts/size/lineheight" which transforms line-height token values declared with % into a unitless value.
+  // This caused minor UI changes in many of our components. We decided that this is not something we want to have happen automatically.
+  // Therefore we remove this specific transform from the transformGroup before building.
+  const indexOfLineHeightTransform =
+    StyleDictionary.hooks.transformGroups['tokens-studio'].indexOf('ts/size/lineheight');
+  if (indexOfLineHeightTransform !== -1) {
+    StyleDictionary.hooks.transformGroups['tokens-studio'].splice(indexOfLineHeightTransform, 1);
+  }
+};
+
+StyleDictionary.registerAction({
+  name: 'fixCSSTokens',
+  do: async function (_dictionary, config) {
+    const buildPath = config.buildPath || 'dist/';
+    const files = config.files || [];
+    // TS allows roundTo(), exponentiation (^) and basic calculations (without `calc()`) in their values, but these are not valid CSS.
+    for (const file of files) {
+      const filePath = posix.join(buildPath, file.destination);
+      console.log('🔧 fixing css:', filePath);
+      await fixCSSFile(filePath);
+    }
+  },
+  // No undo action available - files are deleted during cleanup.
+  undo: function () {},
+});
+
+// Custom header to add generation date
+StyleDictionary.registerFileHeader({
+  name: 'nlds-rhc-header',
+  fileHeader: function (defaultMessage) {
+    return [...defaultMessage, `Generated on ${new Date().toUTCString()}`];
+  },
+});
+
+const excludes = [
+  'components/avatar',
+  'components/form-field-option-label',
+  'components/modal-dialog',
+  'components/pagination/todo',
+  'components/status-badge',
+  'components/summary-list',
+  'components/task-list',
+  'components/toolbar-button',
+];
+
+register(StyleDictionary, { excludeParentKeys: true });
+
 // Get the platforms config
 const getPlatformsConfig = (buildPath, themeName) => {
   return {
     javascript: {
-      transforms: ['attribute/cti', 'name/cti/camel', 'color/hsl-4'],
-      transformGroup: 'js',
+      transformGroup: 'tokens-studio',
+      transforms: ['name/camel'],
       buildPath,
+      excludes,
+      options: {
+        fileHeader: 'nlds-rhc-header',
+      },
       files: [
         {
           format: 'typescript/es6-declarations',
@@ -42,31 +98,31 @@ const getPlatformsConfig = (buildPath, themeName) => {
         },
       ],
     },
-    Web: {
-      transforms: ['attribute/cti', 'name/cti/kebab', 'color/hsl-4'],
+    web: {
+      transformGroup: 'tokens-studio',
+      transforms: ['name/kebab'],
       buildPath,
+      excludes,
+      actions: ['fixCSSTokens'],
+      options: {
+        fileHeader: 'nlds-rhc-header',
+        outputReferences: true,
+      },
       files: [
         {
           destination: 'root.css',
           format: 'css/variables',
-          options: {
-            outputReferences: true,
-          },
         },
         {
           destination: 'index.css',
           format: 'css/variables',
           options: {
             selector: `.${themeName}`,
-            outputReferences: true,
           },
         },
         {
           destination: '_variables.scss',
           format: 'scss/variables',
-          options: {
-            outputReferences: true,
-          },
         },
       ],
     },
@@ -76,14 +132,18 @@ const getPlatformsConfig = (buildPath, themeName) => {
 // This will build the base tokens without the themes and without the overwrites
 async function buildBaseTokens() {
   const config = getPlatformsConfig('dist/', 'rhc-theme');
-  const StyleDictionaryBase = StyleDictionary.extend({
+  const StyleDictionaryBase = new StyleDictionary({
+    log: { verbosity: 'verbose' },
     source: ['./src/**/base.tokens.json'],
+    preprocessors: ['tokens-studio'],
     platforms: {
       ...config,
     },
   });
+  await StyleDictionaryBase.hasInitialized;
 
-  StyleDictionaryBase.buildAllPlatforms();
+  await StyleDictionaryBase.cleanAllPlatforms();
+  await StyleDictionaryBase.buildAllPlatforms();
 }
 
 // This will build the themes
@@ -93,7 +153,8 @@ async function buildThemes() {
 
   // Process each theme separately
   for (const [theme, themeData] of Object.entries(themes)) {
-    const themesDir = `./src/generated/${normalizeThemeName(theme)}`;
+    const themeName = normalizeThemeName(theme);
+    const themesDir = `./src/generated/${themeName}`;
 
     // Create the theme directory if it doesn't exist
     if (!existsSync(themesDir)) {
@@ -101,24 +162,29 @@ async function buildThemes() {
     }
 
     // Write individual theme tokens
-    await writeFile(path.join(themesDir, `tokens.json`), JSON.stringify(themeData.tokens, null, 2));
+    await writeFile(posix.join(themesDir, `tokens.json`), JSON.stringify(themeData.tokens, null, 2));
 
-    const config = getPlatformsConfig(`dist/${normalizeThemeName(theme)}/`, normalizeThemeName(theme));
+    const config = getPlatformsConfig(`dist/${themeName}/`, themeName);
     // Create a separate Style Dictionary instance for each theme
-    const StyleDictionaryTheme = StyleDictionary.extend({
-      source: [`./src/generated/${normalizeThemeName(theme)}/tokens.json`],
+    const StyleDictionaryTheme = new StyleDictionary({
+      log: { verbosity: 'verbose' },
+      source: [`./src/generated/${themeName}/tokens.json`],
+      preprocessors: ['tokens-studio'],
       platforms: {
         ...config,
       },
     });
+    await StyleDictionaryTheme.hasInitialized;
 
     // Build this specific theme
-    StyleDictionaryTheme.buildAllPlatforms();
+    await StyleDictionaryTheme.cleanAllPlatforms();
+    await StyleDictionaryTheme.buildAllPlatforms();
   }
 }
 
 async function build() {
   try {
+    removeUnitlessLineHeightTransform(); // This needs to happen before building anything
     await buildBaseTokens();
     await buildThemes();
   } catch (error) {

package/cssFixers.mjs

@@ -0,0 +1,89 @@
+import { readFile, writeFile } from 'fs/promises';
+
+// When using `outputReferences: true` in Style Dictionary (see `build.mjs`), any calculations/transforms are overwritten by the css-var-names.
+// So you'll end up with invalid CSS like:
+// `--my-var: var(--my-length) + 20px;` - see: https://github.com/style-dictionary/style-dictionary/issues/1055
+// We will need to fix any invalid stuff from Tokens Studio (TS) here as a post-build step.
+// This applies to both .css and .scss files.
+
+const varRegex = /(?<prefix>^\s*--[^:]+:\s*)(?<value>[^;]+?)(?<suffix>\s*;)/gm;
+
+export async function fixCSSFile(filePath) {
+  let content = await readFile(filePath, 'utf-8');
+
+  content = await fixRoundTo(content);
+  content = await fixExponentiation(content);
+  content = await fixCalc(content);
+
+  await writeFile(filePath, content);
+}
+
+// This will wrap any calculations in `calc()`.
+export function fixCalc(content) {
+  const operatorRegex = /(?:\s\+\s|\s-\s|\/|\*)/;
+
+  return content.replace(varRegex, (match, prefix, value, suffix) => {
+    if (!value.match(operatorRegex)) {
+      return match;
+    }
+
+    return `${prefix}calc(${value})${suffix}`;
+  });
+}
+
+// Exponentiation (^) is not supported in CSS, so we need to convert it to pow(base, exponent)
+export function fixExponentiation(content) {
+  const exponentiationRegex =
+    /([0-9]*\.?[0-9]+(?:[a-z%]+)?|var\([^)]+\))\s*\^\s*([0-9]*\.?[0-9]+(?:[a-z%]+)?|var\([^)]+\))/g;
+
+  return content.replace(varRegex, (match, prefix, value, suffix) => {
+    if (!value.includes('^')) {
+      return match;
+    }
+
+    const fixedValue = value.replace(exponentiationRegex, (_match, base, exponent) => {
+      return `pow(${base}, ${exponent})`;
+    });
+
+    return `${prefix}${fixedValue}${suffix}`;
+  });
+}
+
+// This will strip out any roundTo() calls, as CSS doesn't support it.
+// It does allow round(), but that needs a rounding interval, which is unknown at this point.
+// See https://developer.mozilla.org/en-US/docs/Web/CSS/round
+export function fixRoundTo(content) {
+  return content.replace(varRegex, (match, prefix, value, suffix) => {
+    if (!value.includes('roundTo(')) {
+      return match;
+    }
+
+    // Handle nested parentheses by processing the string character by character
+    let fixedValue = value;
+    let result = '';
+    let i = 0;
+
+    while (i < fixedValue.length) {
+      if (fixedValue.slice(i, i + 8) === 'roundTo(') {
+        // Found roundTo(, now find the matching closing parenthesis
+        i += 8; // Skip "roundTo("
+        let parenCount = 1;
+        let start = i;
+
+        while (i < fixedValue.length && parenCount > 0) {
+          if (fixedValue[i] === '(') parenCount++;
+          if (fixedValue[i] === ')') parenCount--;
+          i++;
+        }
+
+        // Extract the content between parentheses and add to result
+        result += fixedValue.slice(start, i - 1);
+      } else {
+        result += fixedValue[i];
+        i++;
+      }
+    }
+
+    return `${prefix}${result}${suffix}`;
+  });
+}

package/cssFixers.spec.mjs

@@ -0,0 +1,98 @@
+import { describe, expect, test } from 'vitest';
+import { fixCalc, fixExponentiation, fixRoundTo } from './cssFixers.mjs';
+
+describe('css fixers', () => {
+  describe('fixCalc', () => {
+    test('should wrap adding calculations in calc()', async () => {
+      const input = '--some-var: 100px + 50%;';
+      const output = '--some-var: calc(100px + 50%);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap calculations with variables in calc()', async () => {
+      const input = '--some-var: 100px + var(--some-other-var);';
+      const output = '--some-var: calc(100px + var(--some-other-var));';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap calculations with variables in calc()', async () => {
+      const input = '--some-var: var(--some-other-var) + 100px;';
+      const output = '--some-var: calc(var(--some-other-var) + 100px);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap subtraction calculations in calc()', async () => {
+      const input = '--some-var: 100px - 50px;';
+      const output = '--some-var: calc(100px - 50px);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap multiplication calculations in calc()', async () => {
+      const input = '--some-var: 10px * 2;';
+      const output = '--some-var: calc(10px * 2);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap division calculations in calc()', async () => {
+      const input = '--some-var: 100px / 2;';
+      const output = '--some-var: calc(100px / 2);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should wrap mixed calculations in calc()', async () => {
+      const input = '--some-var: var(--base) * 2 - 10px;';
+      const output = '--some-var: calc(var(--base) * 2 - 10px);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should not wrap single variables in calc()', async () => {
+      const input = '--some-var: var(--other-var);';
+      const output = '--some-var: var(--other-var);';
+      expect(fixCalc(input)).toBe(output);
+    });
+    test('should not wrap simple values in calc()', async () => {
+      const input = '--some-var: 10px;';
+      const output = '--some-var: 10px;';
+      expect(fixCalc(input)).toBe(output);
+    });
+  });
+
+  describe('fixExponentiation', () => {
+    test('should convert ^ to pow()', async () => {
+      const input = '--some-var: 2^3;';
+      const output = '--some-var: pow(2, 3);';
+      expect(fixExponentiation(input)).toBe(output);
+    });
+    test('should convert ^ to pow() with variable as base', async () => {
+      const input = '--some-var: var(--base)^3;';
+      const output = '--some-var: pow(var(--base), 3);';
+      expect(fixExponentiation(input)).toBe(output);
+    });
+    test('should convert ^ to pow() with variable as exponent', async () => {
+      const input = '--some-var: 2^var(--exponent);';
+      const output = '--some-var: pow(2, var(--exponent));';
+      expect(fixExponentiation(input)).toBe(output);
+    });
+    test('should convert ^ to pow() with variables as both base and exponent', async () => {
+      const input = '--some-var: var(--base)^var(--exponent);';
+      const output = '--some-var: pow(var(--base), var(--exponent));';
+      expect(fixExponentiation(input)).toBe(output);
+    });
+  });
+
+  describe('fixRoundTo', () => {
+    test('should remove roundTo()', async () => {
+      const input = '--some-var: roundTo(10px);';
+      const output = '--some-var: 10px;';
+      expect(fixRoundTo(input)).toBe(output);
+    });
+    test('should remove roundTo() with variable', async () => {
+      const input = '--some-var: roundTo(var(--base-size));';
+      const output = '--some-var: var(--base-size);';
+      expect(fixRoundTo(input)).toBe(output);
+    });
+    test('should remove roundTo() with calc function', async () => {
+      const input = '--some-var: roundTo(calc(10px + 5px));';
+      const output = '--some-var: calc(10px + 5px);';
+      expect(fixRoundTo(input)).toBe(output);
+    });
+    test('should remove roundTo() with calc function containing variables', async () => {
+      const input = '--some-var: roundTo(calc(var(--base) * 2));';
+      const output = '--some-var: calc(var(--base) * 2);';
+      expect(fixRoundTo(input)).toBe(output);
+    });
+  });
+});