Replace touch formats with upstream (#738)

* repalce with upstream * Create shiny-balloons-dress.md --------- Co-authored-by: Rez <[email protected]>
primer · Sep 9, 2024 · f6bab57 · f6bab57
1 parent 99328ce
commit f6bab57
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 32 deletions.
diff --git a/.changeset/shiny-balloons-dress.md b/.changeset/shiny-balloons-dress.md
@@ -0,0 +1,22 @@
+---
+"@primer/brand-primitives": patch
+---
+
+Fixed line formatting in `functional/size/size-coarse.css` and `functional/size/size-fine.css`
+
+E.g.
+
+```diff
+-    @media (pointer: coarse) { :root {
+-  --brand-controlStack-medium-gap-auto: var(--base-size-12);
+-  --brand-controlStack-small-gap-auto: var(--base-size-16);
+-  --brand-control-minTarget-auto: var(--base-size-44);
+-}}
++@media (pointer: coarse) {
++  :root {
++    --brand-controlStack-medium-gap-auto: var(--base-size-12);
++    --brand-controlStack-small-gap-auto: var(--base-size-16);
++    --brand-control-minTarget-auto: var(--base-size-44);
++  }
++}
+```
diff --git a/packages/design-tokens/scripts/build-tokens.js b/packages/design-tokens/scripts/build-tokens.js
@@ -133,10 +133,15 @@ const darkJson = require('../src/tokens/base/colors/dark')
         files: [
           {
             destination: `tokens/functional/size/size-fine.css`,
-            format: `css/touch-target-desktop`,
+            format: `css/advanced`,
             filter: token => token.filePath.includes('fine'),
             options: {
               outputReferences: true,
+              queries: [
+                {
+                  query: '@media (pointer: fine)',
+                },
+              ],
             },
           },
         ],
@@ -154,10 +159,15 @@ const darkJson = require('../src/tokens/base/colors/dark')
         files: [
           {
             destination: `tokens/functional/size/size-coarse.css`,
-            format: `css/touch-target-mobile`,
+            format: `css/advanced`,
             filter: token => token.filePath.includes('coarse'),
             options: {
               outputReferences: true,
+              queries: [
+                {
+                  query: '@media (pointer: coarse)',
+                },
+              ],
             },
           },
         ],

diff --git a/packages/design-tokens/scripts/style-dictionary.js b/packages/design-tokens/scripts/style-dictionary.js
@@ -7,7 +7,7 @@ const {PrimerStyleDictionary} = require('@primer/primitives/dist/build/PrimerSty
 
 const StyleDictionary = PrimerStyleDictionary
 
-const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
+const {fileHeader} = StyleDictionary.formatHelpers
 
 //-----
 // functions to be extracted
@@ -21,35 +21,6 @@ StyleDictionary.registerTransformGroup({
 })
 
 // REGISTER A CUSTOM FORMAT
-
-// wrap mobile tokens in media query
-StyleDictionary.registerFormat({
-  name: 'css/touch-target-mobile',
-  formatter({dictionary, file, options}) {
-    const {outputReferences} = options
-    return `${fileHeader({file})}
-    @media (pointer: coarse) { :root {\n${formattedVariables({
-      format: 'css',
-      dictionary,
-      outputReferences,
-    })}\n}}\n`
-  },
-})
-
-// wrap desktop tokens in media query
-StyleDictionary.registerFormat({
-  name: 'css/touch-target-desktop',
-  formatter({dictionary, file, options}) {
-    const {outputReferences} = options
-    return `${fileHeader({file})}
-    @media (pointer: fine) { :root {\n${formattedVariables({
-      format: 'css',
-      dictionary,
-      outputReferences,
-    })}\n}}\n`
-  },
-})
-
 /**
  * Replacement format for javascript/module
  */