@primer/primitives 10.1.0-rc.f1589f93 → 10.1.0

package/src/tokens/functional/typography/typography.json5

@@ -0,0 +1,527 @@
+{
+  fontStack: {
+    system: {
+      $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      $type: 'fontFamily',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'typography',
+          scopes: ['fontFamily'],
+        },
+      },
+    },
+    sansSerif: {
+      $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      $type: 'fontFamily',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'typography',
+          scopes: ['fontFamily'],
+        },
+      },
+    },
+    sansSerifDisplay: {
+      $value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+      $type: 'fontFamily',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'typography',
+          scopes: ['fontFamily'],
+        },
+      },
+    },
+    monospace: {
+      $value: 'ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace',
+      $type: 'fontFamily',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'typography',
+          scopes: ['fontFamily'],
+        },
+      },
+    },
+  },
+  text: {
+    display: {
+      lineBoxHeight: {
+        $value: 1.4,
+        $type: 'number',
+        $extensions: {
+          'org.primer.data': {
+            fontSize: 40,
+          },
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['lineHeight'],
+            fontSizeInPx: 40,
+          },
+        },
+      },
+      size: {
+        $value: '40px',
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['fontSize'],
+          },
+        },
+      },
+      lineHeight: {
+        $value: 1.4,
+        $type: 'number',
+        $extensions: {
+          'org.primer.data': {
+            fontSize: 40,
+          },
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['lineHeight'],
+          },
+        },
+      },
+      weight: {
+        $value: '{base.text.weight.medium}',
+        $type: 'fontWeight',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['fontWeight'],
+          },
+        },
+      },
+      shorthand: {
+        $value: {
+          fontWeight: '{text.display.weight}',
+          fontSize: '{text.display.size}',
+          lineHeight: '{text.display.lineHeight}',
+          fontFamily: '{fontStack.sansSerifDisplay}',
+        },
+        $type: 'typography',
+        $description: 'Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.',
+      },
+    },
+    title: {
+      size: {
+        large: {
+          $value: '32px',
+          $type: 'dimension',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        medium: {
+          $value: '20px',
+          $type: 'dimension',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        small: {
+          $value: '16px',
+          $type: 'dimension',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+      },
+      lineHeight: {
+        large: {
+          $value: 1.5,
+          $type: 'number',
+          $extensions: {
+            'org.primer.data': {
+              fontSize: 32,
+            },
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['lineHeight'],
+            },
+          },
+        },
+        medium: {
+          $value: 1.6,
+          $type: 'number',
+          $extensions: {
+            'org.primer.data': {
+              fontSize: 20,
+            },
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['lineHeight'],
+            },
+          },
+        },
+        small: {
+          $value: 1.5,
+          $type: 'number',
+          $extensions: {
+            'org.primer.data': {
+              fontSize: 16,
+            },
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['lineHeight'],
+            },
+          },
+        },
+      },
+      weight: {
+        large: {
+          $value: '{base.text.weight.semibold}',
+          $type: 'fontWeight',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['fontWeight'],
+            },
+          },
+        },
+        medium: {
+          $value: '{base.text.weight.semibold}',
+          $type: 'fontWeight',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['fontWeight'],
+            },
+          },
+        },
+        small: {
+          $value: '{base.text.weight.semibold}',
+          $type: 'fontWeight',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['fontWeight'],
+            },
+          },
+        },
+      },
+      shorthand: {
+        large: {
+          $value: {
+            fontWeight: '{text.title.weight.large}',
+            fontSize: '{text.title.size.large}',
+            lineHeight: '{text.title.lineHeight.large}',
+            fontFamily: '{fontStack.sansSerifDisplay}',
+          },
+          $type: 'typography',
+          $description: 'Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports.',
+        },
+        medium: {
+          $value: {
+            fontWeight: '{text.title.weight.medium}',
+            fontSize: '{text.title.size.medium}',
+            lineHeight: '{text.title.lineHeight.medium}',
+            fontFamily: '{fontStack.sansSerifDisplay}',
+          },
+          $type: 'typography',
+          $description: 'Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.',
+        },
+        small: {
+          $value: {
+            fontWeight: '{text.title.weight.small}',
+            fontSize: '{text.title.size.small}',
+            lineHeight: '{text.title.lineHeight.small}',
+            fontFamily: '{fontStack.sansSerif}',
+          },
+          $type: 'typography',
+          $description: 'Uses the same size as body (large) with a heavier weight of semibold (600).',
+        },
+      },
+    },
+    subtitle: {
+      size: {
+        $value: '20px',
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['fontSize'],
+          },
+        },
+      },
+      lineHeight: {
+        $value: 1.6,
+        $type: 'number',
+        $extensions: {
+          'org.primer.data': {
+            fontSize: 20,
+          },
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['lineHeight'],
+          },
+        },
+      },
+      weight: {
+        $value: '{base.text.weight.normal}',
+        $type: 'fontWeight',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['fontWeight'],
+          },
+        },
+      },
+      shorthand: {
+        $value: {
+          fontWeight: '{text.subtitle.weight}',
+          fontSize: '{text.subtitle.size}',
+          lineHeight: '{text.subtitle.lineHeight}',
+          fontFamily: '{fontStack.sansSerifDisplay}',
+        },
+        $type: 'typography',
+        $description: 'Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium).',
+      },
+    },
+    body: {
+      size: {
+        large: {
+          $value: '16px',
+          $type: 'dimension',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        medium: {
+          $value: '14px',
+          $type: 'dimension',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+        small: {
+          $value: '12px',
+          $type: 'dimension',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['fontSize'],
+            },
+          },
+        },
+      },
+      lineHeight: {
+        large: {
+          $value: 1.5,
+          $type: 'number',
+          $extensions: {
+            'org.primer.data': {
+              fontSize: 16,
+            },
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['lineHeight'],
+            },
+          },
+        },
+        medium: {
+          $value: 1.4285,
+          $type: 'number',
+          $extensions: {
+            'org.primer.data': {
+              fontSize: 14,
+            },
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['lineHeight'],
+            },
+          },
+        },
+        small: {
+          $value: 1.6666,
+          $type: 'number',
+          $extensions: {
+            'org.primer.data': {
+              fontSize: 12,
+            },
+            'org.primer.figma': {
+              collection: 'typography',
+              scopes: ['lineHeight'],
+            },
+          },
+        },
+      },
+      weight: {
+        $value: '{base.text.weight.normal}',
+        $type: 'fontWeight',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['fontWeight'],
+          },
+        },
+      },
+      shorthand: {
+        large: {
+          $value: {
+            fontWeight: '{text.body.weight}',
+            fontSize: '{text.body.size.large}',
+            lineHeight: '{text.body.lineHeight.large}',
+            fontFamily: '{fontStack.sansSerif}',
+          },
+          $type: 'typography',
+          $description: 'User-generated content, markdown rendering.',
+        },
+        medium: {
+          $value: {
+            fontWeight: '{text.body.weight}',
+            fontSize: '{text.body.size.medium}',
+            lineHeight: '{text.body.lineHeight.medium}',
+            fontFamily: '{fontStack.sansSerif}',
+          },
+          $type: 'typography',
+          $description: 'Default UI font. Most commonly used for body text.',
+        },
+        small: {
+          $value: {
+            fontWeight: '{text.body.weight}',
+            fontSize: '{text.body.size.small}',
+            lineHeight: '{text.body.lineHeight.small}',
+            fontFamily: '{fontStack.sansSerif}',
+          },
+          $type: 'typography',
+          $description: 'Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px.',
+        },
+      },
+    },
+    caption: {
+      size: {
+        $value: '12px',
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['fontSize'],
+          },
+        },
+      },
+      lineHeight: {
+        $value: 1.3333,
+        $type: 'number',
+        $extensions: {
+          'org.primer.data': {
+            fontSize: 12,
+          },
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['lineHeight'],
+          },
+        },
+      },
+      weight: {
+        $value: '{base.text.weight.normal}',
+        $type: 'fontWeight',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['fontWeight'],
+          },
+        },
+      },
+      shorthand: {
+        $value: {
+          fontWeight: '{text.caption.weight}',
+          fontSize: '{text.caption.size}',
+          lineHeight: '{text.caption.lineHeight}',
+          fontFamily: '{fontStack.sansSerif}',
+        },
+        $type: 'typography',
+        $description: 'Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements.',
+      },
+    },
+    codeBlock: {
+      size: {
+        $value: '13px',
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['fontSize'],
+          },
+        },
+      },
+      lineHeight: {
+        $value: 1.5385,
+        $type: 'number',
+        $extensions: {
+          'org.primer.data': {
+            fontSize: 13,
+          },
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['lineHeight'],
+          },
+        },
+      },
+      weight: {
+        $value: '{base.text.weight.normal}',
+        $type: 'fontWeight',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['fontWeight'],
+          },
+        },
+      },
+      shorthand: {
+        $value: {
+          fontWeight: '{text.codeBlock.weight}',
+          fontSize: '{text.codeBlock.size}',
+          lineHeight: '{text.codeBlock.lineHeight}',
+          fontFamily: '{fontStack.monospace}',
+        },
+        $type: 'typography',
+        $description: 'Default style for rendering code blocks.',
+      },
+    },
+    codeInline: {
+      size: {
+        $value: '0.9285em',
+        $type: 'dimension',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['fontSize'],
+          },
+        },
+      },
+      weight: {
+        $value: '{base.text.weight.normal}',
+        $type: 'fontWeight',
+        $extensions: {
+          'org.primer.figma': {
+            collection: 'typography',
+            scopes: ['fontWeight'],
+          },
+        },
+      },
+      shorthand: {
+        $value: {
+          fontWeight: '{text.codeInline.weight}',
+          fontSize: '{text.codeInline.size}',
+          fontFamily: '{fontStack.monospace}',
+        },
+        $type: 'typography',
+        $description: 'Inline code blocks using em units to inherit size from its parent.',
+      },
+    },
+  },
+}

package/dist/build/filters/isColorWithMix.d.ts

@@ -1,7 +0,0 @@
-import type { TransformedToken } from 'style-dictionary/types';
-/**
- * @description Checks if token is color and has a mix property
- * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
- * @returns boolean
- */
-export declare const isColorWithMix: (token: TransformedToken) => boolean;

package/dist/build/filters/isColorWithMix.js

@@ -1,24 +0,0 @@
-import { isColor } from './isColor.js';
-const throwError = (token) => {
-    throw new Error(`Invalid mix property on token: ${token.name}. "mix.color": ${token.mix.color}, "mix.weight": ${typeof token.mix.weight === 'string' ? `"${token.mix.weight}" (string)` : token.mix.weight} must be a number between 0 and 1. In file: "${token.filePath}".`);
-};
-/**
- * @description Checks if token is color and has a mix property
- * @param arguments [TransformedToken](https://github.com/amzn/style-dictionary/blob/main/types/TransformedToken.d.ts)
- * @returns boolean
- */
-export const isColorWithMix = (token) => {
-    // no color or no mix property
-    if (!isColor(token) || token.mix === undefined || token.mix === null) {
-        return false;
-    }
-    // invalid mix property
-    if (typeof token.mix.color !== 'string' ||
-        typeof token.mix.weight !== 'number' ||
-        token.mix.weight < 0 ||
-        token.mix.weight > 1) {
-        throwError(token);
-    }
-    // valid mix property
-    return true;
-};

package/dist/build/transformers/colorToHexMix.d.ts

@@ -1,8 +0,0 @@
-import type { Transform } from 'style-dictionary/types';
-/**
- * @description replaces tokens value with `hex8` color using the tokens `alpha` property to specify the value used for alpha
- * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
- * @matcher matches all tokens of $type `color` with an `alpha` property
- * @transformer returns `hex8` string
- */
-export declare const colorToHexMix: Transform;

package/dist/build/transformers/colorToHexMix.js

@@ -1,20 +0,0 @@
-import { toHex } from 'color2k';
-import { isColorWithMix } from '../filters/index.js';
-import { getTokenValue } from './utilities/getTokenValue.js';
-import mix from './utilities/mix.js';
-/**
- * @description replaces tokens value with `hex8` color using the tokens `alpha` property to specify the value used for alpha
- * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
- * @matcher matches all tokens of $type `color` with an `alpha` property
- * @transformer returns `hex8` string
- */
-export const colorToHexMix = {
-    name: 'color/hexMix',
-    type: 'value',
-    transitive: true,
-    filter: isColorWithMix,
-    transform: (token) => {
-        var _a, _b;
-        return toHex(mix(getTokenValue(token), ((_a = token.mix) === null || _a === void 0 ? void 0 : _a.color) || getTokenValue(token), ((_b = token.mix) === null || _b === void 0 ? void 0 : _b.weight) || 0));
-    },
-};

package/dist/build/transformers/utilities/mix.d.ts

@@ -1,5 +0,0 @@
-/**
- * Mixes two colors together. Taken from sass's implementation.
- */
-declare function mix(color1: string, color2: string, weight: number): string;
-export default mix;

package/dist/build/transformers/utilities/mix.js

@@ -1,38 +0,0 @@
-import { rgba, parseToRgba } from 'color2k';
-/**
- * Mixes two colors together. Taken from sass's implementation.
- */
-function mix(color1, color2, weight) {
-    const normalize = (n, index) => 
-    // 3rd index is alpha channel which is already normalized
-    index === 3 ? n : n / 255;
-    const [r1, g1, b1, a1] = parseToRgba(color1).map(normalize);
-    const [r2, g2, b2, a2] = parseToRgba(color2).map(normalize);
-    // The formula is copied from the original Sass implementation:
-    // http://sass-lang.com/documentation/Sass/Script/Functions.html#mix-instance_method
-    const normalizedWeight = 2 * weight - 1;
-    const alphaDelta = a1 - a2;
-    const combinedWeight = normalizedWeight * alphaDelta === -1
-        ? normalizedWeight
-        : (normalizedWeight + alphaDelta) / (1 + normalizedWeight * alphaDelta);
-    const weight2 = (combinedWeight + 1) / 2;
-    const weight1 = 1 - weight2;
-    const r = Math.round((r1 * weight1 + r2 * weight2) * 255);
-    const g = Math.round((g1 * weight1 + g2 * weight2) * 255);
-    const b = Math.round((b1 * weight1 + b2 * weight2) * 255);
-    const a = a2 * weight + a1 * (1 - weight);
-    return rgba(r, g, b, a);
-}
-export default mix;
-// Number* weight = ARGR("$weight", Number, 0, 100);
-// double p = weight->value()/100;
-// double w = 2*p - 1;
-// double a = color1->a() - color2->a();
-// double nW = ((w * a == -1) ? w : (w + a)/(1 + w*a))
-// double w1 = (nW + 1)/2.0;
-// double w2 = 1 - w1;
-// return new (ctx.mem) Color(pstate,
-//                            std::round(w1*color1->r() + w2*color2->r()),
-//                            std::round(w1*color1->g() + w2*color2->g()),
-//                            std::round(w1*color1->b() + w2*color2->b()),
-//                            color1->a()*p + color2->a()*(1-p));

package/src/tokens/base/typography/typography.json

@@ -1,48 +0,0 @@
-{
-  "base": {
-    "text": {
-      "weight": {
-        "light": {
-          "$type": "fontWeight",
-          "$value": 300,
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "base/typography",
-              "scopes": ["fontWeight"]
-            }
-          }
-        },
-        "normal": {
-          "$value": 400,
-          "$type": "fontWeight",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "base/typography",
-              "scopes": ["fontWeight"]
-            }
-          }
-        },
-        "medium": {
-          "$value": 500,
-          "$type": "fontWeight",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "base/typography",
-              "scopes": ["fontWeight"]
-            }
-          }
-        },
-        "semibold": {
-          "$value": 600,
-          "$type": "fontWeight",
-          "$extensions": {
-            "org.primer.figma": {
-              "collection": "base/typography",
-              "scopes": ["fontWeight"]
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/tokens/functional/border/dark.json5

@@ -1,12 +0,0 @@
-{
-  outline: {
-    focus: {
-      $value: {
-        color: '{focus.outlineColor}',
-        style: 'solid',
-        width: '2px',
-      },
-      $type: 'border',
-    },
-  },
-}