@primer/primitives 10.0.0 → 10.1.0-rc.3e576ad9

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

@@ -0,0 +1,236 @@
+{
+  focus: {
+    outline: {
+      $value: {
+        color: '{focus.outlineColor}',
+        style: 'solid',
+        width: '2px',
+      },
+      $type: 'border',
+    },
+  },
+  border: {
+    default: {
+      $value: {
+        color: '{borderColor.default}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    muted: {
+      $value: {
+        color: '{borderColor.muted}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    emphasis: {
+      $value: {
+        color: '{borderColor.emphasis}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    disabled: {
+      $value: {
+        color: '{borderColor.disabled}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    transparent: {
+      $value: {
+        color: '{borderColor.transparent}',
+        style: 'solid',
+        width: '{borderWidth.default}',
+      },
+      $type: 'border',
+    },
+    neutral: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.neutral.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.neutral.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    accent: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.accent.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.accent.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    success: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.success.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.success.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    open: {
+      emphasis: {
+        $value: '{border.success.emphasis}',
+        $type: 'border',
+      },
+      muted: {
+        $value: '{border.success.muted}',
+        $type: 'border',
+      },
+    },
+    danger: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.danger.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.danger.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    closed: {
+      emphasis: {
+        $value: '{border.danger.emphasis}',
+        $type: 'border',
+      },
+      muted: {
+        $value: '{border.danger.muted}',
+        $type: 'border',
+      },
+    },
+    attention: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.attention.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.attention.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    severe: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.severe.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.severe.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    done: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.done.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.done.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    upsell: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.upsell.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.upsell.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+    sponsors: {
+      emphasis: {
+        $value: {
+          color: '{borderColor.sponsors.emphasis}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+      muted: {
+        $value: {
+          color: '{borderColor.sponsors.muted}',
+          style: 'solid',
+          width: '{borderWidth.default}',
+        },
+        $type: 'border',
+      },
+    },
+  },
+}

package/src/tokens/functional/color/dark/primitives-dark.json5

@@ -833,7 +833,6 @@
       $extensions: {
         'org.primer.figma': {
           collection: 'mode',
-
           group: 'component (internal)',
           scopes: ['borderColor'],
         },

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

@@ -0,0 +1,115 @@
+{
+  boxShadow: {
+    thin: {
+      $value: 'inset 0 0 0 {borderWidth.thin}',
+      $description: 'Thin shadow for borders',
+      $type: 'string',
+    },
+    thick: {
+      $value: 'inset 0 0 0 {borderWidth.thick}',
+      $type: 'string',
+    },
+    thicker: {
+      $value: 'inset 0 0 0 {borderWidth.thicker}',
+      $type: 'string',
+    },
+  },
+  borderWidth: {
+    default: {
+      $value: '{borderWidth.thin}',
+      $type: 'dimension',
+    },
+    thin: {
+      $value: '1px',
+      $type: 'dimension',
+    },
+    thick: {
+      $value: '2px',
+      $type: 'dimension',
+    },
+    thicker: {
+      $value: '4px',
+      $type: 'dimension',
+    },
+  },
+  borderRadius: {
+    small: {
+      $value: '3px',
+      $type: 'dimension',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['radius'],
+          codeSyntax: {
+            web: 'var(--borderRadius-small) /* utility class: .rounded-1 */',
+          },
+        },
+      },
+    },
+    medium: {
+      $value: '6px',
+      $type: 'dimension',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['radius'],
+          codeSyntax: {
+            web: 'var(--borderRadius-medium) /* utility class: .rounded-2 */',
+          },
+        },
+      },
+    },
+    large: {
+      $value: '12px',
+      $type: 'dimension',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['radius'],
+          codeSyntax: {
+            web: 'var(--borderRadius-large) /* utility class: .rounded-3 */',
+          },
+        },
+      },
+    },
+    full: {
+      $value: '9999px',
+      $type: 'dimension',
+      $description: 'Use this border radius for pill shaped elements',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['radius'],
+          codeSyntax: {
+            web: 'var(--borderRadius-full) /* utility class: .circle */',
+          },
+        },
+      },
+    },
+    default: {
+      $value: '{borderRadius.medium}',
+      $type: 'dimension',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'functional/size',
+          scopes: ['radius'],
+          codeSyntax: {
+            web: 'var(--borderRadius-default) /* utility class: .rounded-2 */',
+          },
+        },
+      },
+    },
+  },
+  outline: {
+    focus: {
+      offset: {
+        $value: '-2px',
+        $type: 'dimension',
+      },
+      width: {
+        $value: '2px',
+        $type: 'dimension',
+      },
+    },
+  },
+}