@primer/primitives 7.17.0-rc.34cd1021 → 7.17.0-rc.39874fc0

package/src/transformers/index.ts

@@ -4,14 +4,12 @@ export {colorToHexAlpha} from './colorToHexAlpha'
 export {colorToHexMix} from './colorToHexMix'
 export {colorToRgbAlpha} from './colorToRgbAlpha'
 export {colorToRgbaFloat} from './colorToRgbaFloat'
-export {floatToPixel} from './floatToPixel'
 export {dimensionToRem} from './dimensionToRem'
 export {dimensionToRemPxArray} from './dimensionToRemPxArray'
 export {dimensionToPixelUnitless} from './dimensionToPixelUnitless'
 export {durationToCss} from './durationToCss'
 export {figmaAttributes} from './figmaAttributes'
 export {fontFamilyToCss} from './fontFamilyToCss'
-export {fontFamilyToFigma} from './fontFamilyToFigma'
 export {fontWeightToNumber} from './fontWeightToNumber'
 export {jsonDeprecated} from './jsonDeprecated'
 export {namePathToCamelCase} from './namePathToCamelCase'

package/tokens/base/size/size.json

@@ -0,0 +1,57 @@
+{
+  "base": {
+    "size": {
+      "4": {
+        "value": "4px"
+      },
+      "8": {
+        "value": "8px"
+      },
+      "12": {
+        "value": "12px"
+      },
+      "16": {
+        "value": "16px"
+      },
+      "20": {
+        "value": "20px"
+      },
+      "24": {
+        "value": "24px"
+      },
+      "28": {
+        "value": "28px"
+      },
+      "32": {
+        "value": "32px"
+      },
+      "36": {
+        "value": "36px"
+      },
+      "40": {
+        "value": "40px"
+      },
+      "44": {
+        "value": "44px"
+      },
+      "48": {
+        "value": "48px"
+      },
+      "64": {
+        "value": "64px"
+      },
+      "80": {
+        "value": "80px"
+      },
+      "96": {
+        "value": "96px"
+      },
+      "112": {
+        "value": "112px"
+      },
+      "128": {
+        "value": "128px"
+      }
+    }
+  }
+}

package/tokens/base/typography/typography.json

@@ -0,0 +1,20 @@
+{
+  "base": {
+    "text": {
+      "weight": {
+        "light": {
+          "value": "300"
+        },
+        "normal": {
+          "value": "400"
+        },
+        "medium": {
+          "value": "500"
+        },
+        "semibold": {
+          "value": "600"
+        }
+      }
+    }
+  }
+}

package/tokens/functional/size/border.json

@@ -0,0 +1,48 @@
+{
+  "<namespace>": {
+    "borderInset": {
+      "thin": {
+        "value": "inset 0 0 0 {<namespace>.borderWidth.thin}"
+      },
+      "thick": {
+        "value": "inset 0 0 0 {<namespace>.borderWidth.thick}"
+      },
+      "thicker": {
+        "value": "inset 0 0 0 {<namespace>.borderWidth.thicker}"
+      }
+    },
+    "borderWidth": {
+      "thin": {
+        "value": "max(1px, 0.0625rem)"
+      },
+      "thick": {
+        "value": "max(2px, 0.125rem)"
+      },
+      "thicker": {
+        "value": "max(4px, 0.25rem)"
+      }
+    },
+    "borderRadius": {
+      "small": {
+        "value": "3px"
+      },
+      "medium": {
+        "value": "6px"
+      },
+      "large": {
+        "value": "12px"
+      },
+      "full": {
+        "value": "100vh"
+      }
+    }
+  },
+  "outline": {
+    "focus": {
+      "offset": {
+        "$value": "1px",
+        "$type": "dimension"
+      }
+    }
+  }
+}

package/tokens/functional/size/breakpoints.json

@@ -0,0 +1,24 @@
+{
+  "<namespace>": {
+    "breakpoint": {
+      "xsmall": {
+        "value": "320px"
+      },
+      "small": {
+        "value": "544px"
+      },
+      "medium": {
+        "value": "768px"
+      },
+      "large": {
+        "value": "1012px"
+      },
+      "xlarge": {
+        "value": "1280px"
+      },
+      "xxlarge": {
+        "value": "1440px"
+      }
+    }
+  }
+}

package/tokens/functional/size/size-coarse.json

@@ -0,0 +1,27 @@
+{
+  "<namespace>": {
+    "control": {
+      "minTarget": {
+        "auto": {
+          "value": "{base.size.44}"
+        }
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "auto": {
+            "value": "{base.size.16}"
+          }
+        }
+      },
+      "medium": {
+        "gap": {
+          "auto": {
+            "value": "{base.size.12}"
+          }
+        }
+      }
+    }
+  }
+}

package/tokens/functional/size/size-fine.json

@@ -0,0 +1,27 @@
+{
+  "<namespace>": {
+    "control": {
+      "minTarget": {
+        "auto": {
+          "value": "{base.size.16}"
+        }
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "auto": {
+            "value": "{base.size.8}"
+          }
+        }
+      },
+      "medium": {
+        "gap": {
+          "auto": {
+            "value": "{base.size.8}"
+          }
+        }
+      }
+    }
+  }
+}

package/tokens/functional/size/size.json

@@ -0,0 +1,189 @@
+{
+  "<namespace>": {
+    "control": {
+      "minTarget": {
+        "fine": {
+          "value": "{base.size.16}"
+        },
+        "coarse": {
+          "value": "{base.size.44}"
+        }
+      },
+      "xsmall": {
+        "size": {
+          "value": "{base.size.24}"
+        },
+        "lineBoxHeight": {
+          "value": "{base.size.20}"
+        },
+        "paddingBlock": {
+          "value": "calc(({<namespace>.control.xsmall.size} - {<namespace>.control.xsmall.lineBoxHeight}) / 2)"
+        },
+        "paddingInline": {
+          "condensed": {
+            "value": "{base.size.4}"
+          },
+          "normal": {
+            "value": "{base.size.8}"
+          },
+          "spacious": {
+            "value": "{base.size.12}"
+          }
+        },
+        "gap": {
+          "value": "{base.size.4}"
+        }
+      },
+      "small": {
+        "size": {
+          "value": "{base.size.28}"
+        },
+        "lineBoxHeight": {
+          "value": "{base.size.20}"
+        },
+        "paddingBlock": {
+          "value": "calc(({<namespace>.control.small.size} - {<namespace>.control.small.lineBoxHeight}) / 2)"
+        },
+        "paddingInline": {
+          "condensed": {
+            "value": "{base.size.8}"
+          },
+          "normal": {
+            "value": "{base.size.12}"
+          }
+        },
+        "gap": {
+          "value": "{base.size.4}"
+        }
+      },
+      "medium": {
+        "size": {
+          "value": "{base.size.32}"
+        },
+        "lineBoxHeight": {
+          "value": "{base.size.20}"
+        },
+        "paddingBlock": {
+          "value": "calc(({<namespace>.control.medium.size} - {<namespace>.control.medium.lineBoxHeight}) / 2)"
+        },
+        "paddingInline": {
+          "condensed": {
+            "value": "{base.size.8}"
+          },
+          "normal": {
+            "value": "{base.size.12}"
+          },
+          "spacious": {
+            "value": "{base.size.16}"
+          }
+        },
+        "gap": {
+          "value": "{base.size.8}"
+        }
+      },
+      "large": {
+        "size": {
+          "value": "{base.size.40}"
+        },
+        "lineBoxHeight": {
+          "value": "{base.size.20}"
+        },
+        "paddingBlock": {
+          "value": "calc(({<namespace>.control.large.size} - {<namespace>.control.large.lineBoxHeight}) / 2)"
+        },
+        "paddingInline": {
+          "normal": {
+            "value": "{base.size.12}"
+          },
+          "spacious": {
+            "value": "{base.size.16}"
+          }
+        },
+        "gap": {
+          "value": "{base.size.8}"
+        }
+      },
+      "xlarge": {
+        "size": {
+          "value": "{base.size.48}"
+        },
+        "lineBoxHeight": {
+          "value": "{base.size.20}"
+        },
+        "paddingBlock": {
+          "value": "calc(({<namespace>.control.xlarge.size} - {<namespace>.control.xlarge.lineBoxHeight}) / 2)"
+        },
+        "paddingInline": {
+          "normal": {
+            "value": "{base.size.12}"
+          },
+          "spacious": {
+            "value": "{base.size.16}"
+          }
+        },
+        "gap": {
+          "value": "{base.size.8}"
+        }
+      }
+    },
+    "stack": {
+      "padding": {
+        "condensed": {
+          "value": "{base.size.8}"
+        },
+        "normal": {
+          "value": "{base.size.16}"
+        },
+        "spacious": {
+          "value": "{base.size.24}"
+        }
+      },
+      "gap": {
+        "condensed": {
+          "value": "{base.size.8}"
+        },
+        "normal": {
+          "value": "{base.size.16}"
+        },
+        "spacious": {
+          "value": "{base.size.24}"
+        }
+      }
+    },
+    "controlStack": {
+      "small": {
+        "gap": {
+          "condensed": {
+            "value": "{base.size.8}"
+          },
+          "spacious": {
+            "value": "{base.size.16}"
+          }
+        }
+      },
+      "medium": {
+        "gap": {
+          "condensed": {
+            "value": "{base.size.8}"
+          },
+          "spacious": {
+            "value": "{base.size.12}"
+          }
+        }
+      },
+      "large": {
+        "gap": {
+          "auto": {
+            "value": "{base.size.8}"
+          },
+          "condensed": {
+            "value": "{base.size.8}"
+          },
+          "spacious": {
+            "value": "{base.size.12}"
+          }
+        }
+      }
+    }
+  }
+}

package/tokens/functional/size/viewport.json

@@ -0,0 +1,24 @@
+{
+  "<namespace>": {
+    "viewportRange": {
+      "narrow": {
+        "value": "(max-width: calc({<namespace>.breakpoint.medium} - 0.02px))"
+      },
+      "narrowLandscape": {
+        "value": "(max-width: calc({<namespace>.breakpoint.large} - 0.02px) and (max-height: calc({<namespace>.breakpoint.small} - 0.02px)) and (orientation: landscape))"
+      },
+      "regular": {
+        "value": "(min-width: {<namespace>.breakpoint.medium})"
+      },
+      "wide": {
+        "value": "(min-width: {<namespace>.breakpoint.xxlarge})"
+      },
+      "portrait": {
+        "value": "(orientation: portrait)"
+      },
+      "landscape": {
+        "value": "(orientation: landscape)"
+      }
+    }
+  }
+}

package/tokens/functional/typography/typography.json

@@ -0,0 +1,213 @@
+{
+  "<namespace>": {
+    "fontStack": {
+      "system": {
+        "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"
+      },
+      "sansSerif": {
+        "value": "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"
+      },
+      "monospace": {
+        "value": "ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
+      }
+    },
+    "text": {
+      "display": {
+        "lineBoxHeight": {
+          "value": "56px"
+        },
+        "size": {
+          "value": "40px"
+        },
+        "lineHeight": {
+          "value": "calc(56/40)"
+        },
+        "weight": {
+          "value": "{base.text.weight.medium}"
+        },
+        "shorthand": {
+          "value": {
+            "fontWeight": "{<namespace>.text.display.weight}",
+            "fontSize": "{<namespace>.text.display.size}",
+            "lineHeight": "{<namespace>.text.display.lineHeight}",
+            "fontFamily": "{<namespace>.fontStack.sansSerif}"
+          },
+          "type": "typography"
+        }
+      },
+      "title": {
+        "size": {
+          "large": {
+            "value": "32px"
+          },
+          "medium": {
+            "value": "20px"
+          }
+        },
+        "lineHeight": {
+          "large": {
+            "value": "calc(48/32)"
+          },
+          "medium": {
+            "value": "calc(32/20)"
+          }
+        },
+        "weight": {
+          "value": "{base.text.weight.semibold}"
+        },
+        "shorthand": {
+          "large": {
+            "value": {
+              "fontWeight": "{<namespace>.text.title.weight}",
+              "fontSize": "{<namespace>.text.title.size.large}",
+              "lineHeight": "{<namespace>.text.title.lineHeight.large}",
+              "fontFamily": "{<namespace>.fontStack.sansSerif}"
+            },
+            "type": "typography"
+          },
+          "medium": {
+            "value": {
+              "fontWeight": "{<namespace>.text.title.weight}",
+              "fontSize": "{<namespace>.text.title.size.medium}",
+              "lineHeight": "{<namespace>.text.title.lineHeight.medium}",
+              "fontFamily": "{<namespace>.fontStack.sansSerif}"
+            },
+            "type": "typography"
+          }
+        }
+      },
+      "subtitle": {
+        "size": {
+          "value": "20px"
+        },
+        "lineHeight": {
+          "value": "calc(32/20)"
+        },
+        "weight": {
+          "value": "{base.text.weight.normal}"
+        },
+        "shorthand": {
+          "value": {
+            "fontWeight": "{<namespace>.text.subtitle.weight}",
+            "fontSize": "{<namespace>.text.subtitle.size}",
+            "lineHeight": "{<namespace>.text.subtitle.lineHeight}",
+            "fontFamily": "{<namespace>.fontStack.sansSerif}"
+          },
+          "type": "typography"
+        }
+      },
+      "body": {
+        "size": {
+          "large": {
+            "value": "16px"
+          },
+          "medium": {
+            "value": "14px"
+          },
+          "small": {
+            "value": "12px"
+          }
+        },
+        "lineHeight": {
+          "large": {
+            "value": "calc(24/16)"
+          },
+          "medium": {
+            "value": "calc(20/14)"
+          },
+          "small": {
+            "value": "calc(20/12)"
+          }
+        },
+        "weight": {
+          "value": "{base.text.weight.normal}"
+        },
+        "shorthand": {
+          "large": {
+            "value": {
+              "fontWeight": "{<namespace>.text.body.weight}",
+              "fontSize": "{<namespace>.text.body.size.large}",
+              "lineHeight": "{<namespace>.text.body.lineHeight.large}",
+              "fontFamily": "{<namespace>.fontStack.sansSerif}"
+            },
+            "type": "typography"
+          },
+          "medium": {
+            "value": {
+              "fontWeight": "{<namespace>.text.body.weight}",
+              "fontSize": "{<namespace>.text.body.size.medium}",
+              "lineHeight": "{<namespace>.text.body.lineHeight.medium}",
+              "fontFamily": "{<namespace>.fontStack.sansSerif}"
+            },
+            "type": "typography"
+          },
+          "small": {
+            "value": {
+              "fontWeight": "{<namespace>.text.body.weight}",
+              "fontSize": "{<namespace>.text.body.size.small}",
+              "lineHeight": "{<namespace>.text.body.lineHeight.small}",
+              "fontFamily": "{<namespace>.fontStack.sansSerif}"
+            },
+            "type": "typography"
+          }
+        }
+      },
+      "caption": {
+        "size": {
+          "value": "12px"
+        },
+        "lineHeight": {
+          "value": "calc(16/12)"
+        },
+        "weight": {
+          "value": "{base.text.weight.normal}"
+        },
+        "shorthand": {
+          "value": {
+            "fontWeight": "{<namespace>.text.caption.weight}",
+            "fontSize": "{<namespace>.text.caption.size}",
+            "lineHeight": "{<namespace>.text.caption.lineHeight}",
+            "fontFamily": "{<namespace>.fontStack.sansSerif}"
+          },
+          "type": "typography"
+        }
+      },
+      "codeBlock": {
+        "size": {
+          "value": "13px"
+        },
+        "lineHeight": {
+          "value": "calc(20/13)"
+        },
+        "weight": {
+          "value": "{base.text.weight.normal}"
+        },
+        "shorthand": {
+          "value": {
+            "fontWeight": "{<namespace>.text.codeBlock.weight}",
+            "fontSize": "{<namespace>.text.codeBlock.size}",
+            "lineHeight": "{<namespace>.text.codeBlock.lineHeight}",
+            "fontFamily": "{<namespace>.fontStack.monospace}"
+          },
+          "type": "typography"
+        }
+      },
+      "codeInline": {
+        "size": {
+          "value": "0.9285em"
+        },
+        "weight": {
+          "value": "{base.text.weight.normal}"
+        },
+        "shorthand": {
+          "value": {
+            "fontWeight": "{<namespace>.text.codeInline.weight}",
+            "fontSize": "{<namespace>.text.codeInline.size}",
+            "fontFamily": "{<namespace>.fontStack.monospace}"
+          },
+          "type": "typography"
+        }
+      }
+    }
+  }
+}