@primer/primitives 7.16.0 → 7.17.0-rc.132f02a7

package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5

@@ -0,0 +1,57 @@
+/**
+ * Dark dimmed
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for dark dimmed color mode are in this file
+ */
+{
+  diffBlob: {
+    expander: {
+      iconColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+      },
+    },
+  },
+  button: {
+    primary: {
+      bgColor: {
+        disabled: {
+          $value: '{base.color.green.4}',
+          $type: 'color',
+          mix: {
+            color: '{base.color.green.3}',
+            weight: 0.6,
+          },
+        },
+      },
+      fgColor: {
+        rest: {
+          $value: '#ffffff',
+          $type: 'color',
+        },
+      },
+      iconColor: {
+        rest: {
+          $value: '#ffffff',
+          $type: 'color',
+        },
+      },
+    },
+    invisible: {
+      iconColor: {
+        hover: {
+          $value: '{fgColor.muted}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'dark',
+              group: 'component',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+      },
+    },
+  },
+}

package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5

@@ -0,0 +1,390 @@
+/**
+ * Dark high contrast
+ * @extends all functional tokens
+ * @description All overwrites for functional color tokens for dark high contrast color mode are in this file
+ */
+{
+  fgColor: {
+    onEmphasis: {
+      $value: '{base.color.gray.9}',
+      $type: 'color',
+    },
+    muted: {
+      $value: '{base.color.gray.1}',
+      $type: 'color',
+      mix: null,
+      alpha: 1,
+    },
+    disabled: {
+      $value: '{base.color.gray.4}',
+      $type: 'color',
+    },
+  },
+  bgColor: {
+    emphasis: {
+      $value: '{base.color.white}',
+      $type: 'color',
+    },
+    neutral: {
+      emphasis: {
+        $value: '{base.color.gray.4}',
+        $type: 'color',
+      },
+    },
+  },
+  borderColor: {
+    default: {
+      $value: '{base.color.gray.5}',
+      $type: 'color',
+    },
+    muted: {
+      $value: '{base.color.gray.5}',
+      $type: 'color',
+      alpha: 1,
+    },
+    neutral: {
+      muted: {
+        $value: '{base.color.gray.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+      emphasis: {
+        $value: '{base.color.gray.4}',
+        $type: 'color',
+      },
+    },
+    accent: {
+      muted: {
+        $value: '{base.color.blue.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    success: {
+      muted: {
+        $value: '{base.color.green.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    attention: {
+      muted: {
+        $value: '{base.color.yellow.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    severe: {
+      muted: {
+        $value: '{base.color.orange.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    danger: {
+      muted: {
+        $value: '{base.color.red.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    done: {
+      muted: {
+        $value: '{base.color.purple.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+    sponsors: {
+      muted: {
+        $value: '{base.color.pink.4}',
+        $type: 'color',
+        alpha: 1,
+      },
+    },
+  },
+  // patterns
+  avatar: {
+    borderColor: {
+      $value: '{base.color.white}',
+      $type: 'color',
+      alpha: 0.9,
+    },
+  },
+  topicTag: {
+    borderColor: {
+      $value: '{borderColor.accent.emphasis}',
+      $type: 'color',
+    },
+  },
+  control: {
+    bgColor: {
+      selected: {
+        $value: '{base.color.gray.6}',
+        $type: 'color',
+      },
+    },
+    borderColor: {
+      emphasis: {
+        $value: '{borderColor.emphasis}',
+        $type: 'color',
+        mix: null,
+      },
+    },
+    transparent: {
+      bgColor: {
+        hover: {
+          $value: '{base.color.gray.8}',
+          $type: 'color',
+          alpha: 1,
+        },
+        active: {
+          $value: '{base.color.gray.6}',
+          $type: 'color',
+          alpha: 1,
+        },
+        selected: {
+          $value: '{base.color.gray.6}',
+          $type: 'color',
+          alpha: 1,
+        },
+      },
+      borderColor: {
+        hover: {
+          $value: '{borderColor.default}',
+          $type: 'color',
+        },
+        active: {
+          $value: '{base.color.gray.4}',
+          $type: 'color',
+        },
+      },
+    },
+    danger: {
+      fgColor: {
+        hover: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        hover: {
+          $value: '{bgColor.danger.emphasis}',
+          $type: 'color',
+        },
+        active: {
+          $value: '{bgColor.danger.emphasis}',
+          $type: 'color',
+          alpha: 1,
+          mix: {
+            color: '{base.color.red.7}',
+            weight: 0.4,
+          },
+        },
+      },
+    },
+  },
+  controlTrack: {
+    fgColor: {
+      rest: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+      },
+    },
+  },
+  button: {
+    primary: {
+      fgColor: {
+        rest: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+        disabled: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+          alpha: 0.5,
+        },
+      },
+      iconColor: {
+        rest: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+      },
+      borderColor: {
+        rest: {
+          $value: '{base.color.green.2}',
+          $type: 'color',
+          alpha: 1,
+        },
+        hover: {
+          $value: '{base.color.green.2}',
+          $type: 'color',
+          alpha: 1,
+        },
+        active: {
+          $value: '{base.color.green.2}',
+          $type: 'color',
+          alpha: 1,
+        },
+        disabled: {
+          $value: '{base.color.green.2}',
+          $type: 'color',
+          alpha: 0.4,
+        },
+      },
+    },
+    invisible: {
+      fgColor: {
+        hover: {
+          $value: '{base.color.blue.8}',
+          $type: 'color',
+        },
+      },
+      iconColor: {
+        hover: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        hover: {
+          $value: '{base.color.gray.1}',
+          $type: 'color',
+          alpha: null,
+          mix: null,
+        },
+        active: {
+          $value: '{base.color.gray.2}',
+          $type: 'color',
+          alpha: null,
+          mix: null,
+        },
+      },
+    },
+    danger: {
+      fgColor: {
+        rest: {
+          $value: '{base.color.red.3}',
+          $type: 'color',
+          $extensions: {
+            'org.primer.figma': {
+              collection: 'mode',
+              mode: 'light',
+              group: 'component (internal)',
+              scopes: ['fgColor'],
+            },
+          },
+        },
+      },
+    },
+  },
+  buttonCounter: {
+    primary: {
+      bgColor: {
+        rest: {
+          $value: '{base.color.black}',
+          $type: 'color',
+          alpha: 0.15,
+        },
+      },
+    },
+    danger: {
+      bgColor: {
+        hover: {
+          $value: '{base.color.black}',
+          $type: 'color',
+          alpha: 0.15,
+        },
+        rest: {
+          $value: '{base.color.black}',
+          $type: 'color',
+          alpha: 0.15,
+        },
+      },
+    },
+  },
+  diffBlob: {
+    addition: {
+      fgColor: {
+        text: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        word: {
+          $value: '{base.color.green.4}',
+          $type: 'color',
+          alpha: 1,
+        },
+      },
+    },
+    deletion: {
+      fgColor: {
+        text: {
+          $value: '{fgColor.onEmphasis}',
+          $type: 'color',
+        },
+      },
+      bgColor: {
+        word: {
+          $value: '{base.color.red.5}',
+          $type: 'color',
+          alpha: 1,
+        },
+      },
+    },
+    expander: {
+      iconColor: {
+        $value: '{fgColor.default}',
+        $type: 'color',
+      },
+    },
+    hunk: {
+      bgColor: {
+        num: {
+          $value: '{base.color.blue.4}',
+          $type: 'color',
+          alpha: 0.4,
+        },
+      },
+    },
+  },
+  underlineNav: {
+    borderColor: {
+      hover: {
+        $value: '{base.color.gray.3}',
+        $type: 'color',
+      },
+    },
+    iconColor: {
+      rest: {
+        $value: '{base.color.gray.1}',
+        $type: 'color',
+      },
+    },
+  },
+  codeMirror: {
+    selection: {
+      bgColor: {
+        $value: '{base.color.blue.4}',
+        $type: 'color',
+        alpha: 0.4,
+      },
+    },
+  },
+  overlay: {
+    borderColor: {
+      $value: '{borderColor.muted}',
+      $type: 'color',
+      $extensions: {
+        'org.primer.figma': {
+          collection: 'mode',
+          mode: 'dark',
+          group: 'component (internal)',
+        },
+      },
+    },
+  },
+}