@primer/primitives 7.11.2-rc.eb0be47 → 7.11.2-rc.ef1e802

package/tokens-next-private/js/functional/size/size.js

@@ -0,0 +1,98 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 29 Mar 2023 08:34:33 GMT
+ */
+
+exports.default = {
+  control: {
+    minTarget: {
+      fine: "16px",
+      coarse: "44px",
+    },
+    xsmall: {
+      size: "24px",
+      lineBoxHeight: "20px",
+      paddingBlock: "calc((24px - 20px) / 2)",
+      paddingInline: {
+        condensed: "4px",
+        normal: "8px",
+        spacious: "12px",
+      },
+      gap: "4px",
+    },
+    small: {
+      size: "28px",
+      lineBoxHeight: "20px",
+      paddingBlock: "calc((28px - 20px) / 2)",
+      paddingInline: {
+        condensed: "8px",
+        normal: "12px",
+      },
+      gap: "4px",
+    },
+    medium: {
+      size: "32px",
+      lineBoxHeight: "20px",
+      paddingBlock: "calc((32px - 20px) / 2)",
+      paddingInline: {
+        condensed: "8px",
+        normal: "12px",
+        spacious: "16px",
+      },
+      gap: "8px",
+    },
+    large: {
+      size: "40px",
+      lineBoxHeight: "20px",
+      paddingBlock: "calc((40px - 20px) / 2)",
+      paddingInline: {
+        normal: "12px",
+        spacious: "16px",
+      },
+      gap: "8px",
+    },
+    xlarge: {
+      size: "48px",
+      lineBoxHeight: "20px",
+      paddingBlock: "calc((48px - 20px) / 2)",
+      paddingInline: {
+        normal: "12px",
+        spacious: "16px",
+      },
+      gap: "8px",
+    },
+  },
+  controlStack: {
+    small: {
+      gap: {
+        condensed: "8px",
+        spacious: "16px",
+      },
+    },
+    medium: {
+      gap: {
+        condensed: "8px",
+        spacious: "12px",
+      },
+    },
+    large: {
+      gap: {
+        auto: "8px",
+        condensed: "8px",
+        spacious: "12px",
+      },
+    },
+  },
+  stack: {
+    padding: {
+      condensed: "8px",
+      normal: "16px",
+      spacious: "24px",
+    },
+    gap: {
+      condensed: "8px",
+      normal: "16px",
+      spacious: "24px",
+    },
+  },
+};

package/tokens-next-private/js/functional/size/viewport.js

@@ -0,0 +1,15 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 29 Mar 2023 08:34:33 GMT
+ */
+
+exports.default = {
+  viewportRange: {
+    narrow: "(max-width: calc(768px - 0.02px))",
+    narrowLandscape: "(max-width: calc(1012px - 0.02px) and (max-height: calc(544px - 0.02px)) and (orientation: landscape))",
+    regular: "(min-width: 768px)",
+    wide: "(min-width: 1440px)",
+    portrait: "(orientation: portrait)",
+    landscape: "(orientation: landscape)",
+  },
+};

package/tokens-next-private/js/functional/themes/dark-colorblind.js

@@ -0,0 +1,593 @@
+/**
+ * Do not edit directly
+ * Generated on Wed, 29 Mar 2023 08:34:31 GMT
+ */
+
+exports.default = {
+  topicTag: {
+    borderColor: "#00000000",
+  },
+  highlight: {
+    neutral: {
+      bgColor: "#d2992266",
+    },
+  },
+  page: {
+    header: {
+      bgColor: "#0d1117",
+    },
+  },
+  diffBlob: {
+    addition: {
+      fgColor: {
+        text: "#e6edf3",
+        num: "#e6edf3",
+      },
+      bgColor: {
+        num: "#58a6ff4d",
+        line: "#388bfd26",
+        word: "#388bfd66",
+      },
+    },
+    deletion: {
+      fgColor: {
+        text: "#e6edf3",
+        num: "#e6edf3",
+      },
+      bgColor: {
+        num: "#d476164d",
+        line: "#d4761626",
+        word: "#d4761666",
+      },
+    },
+    hunk: {
+      bgColor: {
+        num: "#388bfd66",
+      },
+    },
+    expander: {
+      iconColor: "#7d8590",
+    },
+  },
+  diffStat: {
+    addition: {
+      bgColor: "#1f6feb",
+    },
+  },
+  codeMirror: {
+    fgColor: "#e6edf3",
+    bgColor: "#0d1117",
+    gutters: {
+      bgColor: "#0d1117",
+    },
+    gutterMarker: {
+      fgColor: {
+        default: "#0d1117",
+        muted: "#7d8590",
+      },
+    },
+    lineNumber: {
+      fgColor: "#7d8590",
+    },
+    cursor: {
+      fgColor: "#e6edf3",
+    },
+    selection: {
+      bgColor: "#388bfd66",
+    },
+    activeline: {
+      bgColor: "#6e768126",
+    },
+    matchingBracket: {
+      fgColor: "#e6edf3",
+    },
+    lines: {
+      bgColor: "#0d1117",
+    },
+    syntax: {
+      fgColor: {
+        comment: "#8b949e",
+        constant: "#79c0ff",
+        entity: "#d2a8ff",
+        keyword: "#ec8e2c",
+        storage: "#ec8e2c",
+        string: "#a5d6ff",
+        support: "#79c0ff",
+        variable: "#fdac54",
+      },
+    },
+  },
+  header: {
+    fgColor: {
+      default: "#ffffffb3",
+      logo: "#f0f6fc",
+      text: "#ffffffb3",
+      borderColor: "#8b949e",
+    },
+    bgColor: "#161b22f2",
+    borderColor: {
+      divider: "#8b949e",
+    },
+  },
+  headerSearch: {
+    bgColor: "#0d1117",
+    borderColor: "#30363d",
+  },
+  avatar: {
+    bgColor: "#ffffff1a",
+    borderColor: "#00000000",
+    shadow: "0px 0px 0px 2px #0d1117",
+  },
+  avatarStack: {
+    fade: {
+      bgColor: {
+        default: "#30363d",
+        muted: "#21262d",
+      },
+    },
+  },
+  control: {
+    bgColor: {
+      rest: "#21262d",
+      hover: "#292e36",
+      active: "#31363e",
+      disabled: "#484f58",
+      selected: "#161b22",
+    },
+    fgColor: {
+      rest: "#c9d1d9",
+      placeholder: "#484f58",
+      disabled: "#484f58",
+    },
+    borderColor: {
+      rest: "#30363d",
+      emphasis: "#666e79",
+      disabled: "#30363d",
+      selected: "#f0f6fc",
+      success: "#1f6feb",
+      danger: "#b76100",
+      warning: "#9e6a03",
+    },
+    iconColor: {
+      rest: "#7d8590",
+    },
+    transparent: {
+      bgColor: {
+        rest: "#00000000",
+        hover: "#b1bac41f",
+        active: "#b1bac433",
+        disabled: "#00000000",
+        selected: "#b1bac414",
+      },
+      borderColor: {
+        rest: "#00000000",
+        hover: "#00000000",
+        active: "#00000000",
+      },
+    },
+    danger: {
+      fgColor: {
+        rest: "#d47616",
+        hover: "#ec8e2c",
+      },
+      bgColor: {
+        hover: "#d476161a",
+        active: "#d4761666",
+      },
+    },
+    checked: {
+      bgColor: {
+        rest: "#1f6feb",
+        hover: "#2a7aef",
+        active: "#3685f3",
+        disabled: "#484f58",
+      },
+      fgColor: {
+        rest: "#ffffff",
+        disabled: "#010409",
+      },
+      borderColor: {
+        rest: "#1f6feb",
+        hover: "#00000000",
+        active: "#00000000",
+        disabled: "#484f58",
+      },
+    },
+  },
+  controlTrack: {
+    bgColor: {
+      rest: "#21262d",
+      hover: "#292e36",
+      active: "#31363e",
+      disabled: "#484f58",
+    },
+    fgColor: {
+      rest: "#7d8590",
+      disabled: "#7d8590",
+    },
+    borderColor: {
+      rest: "#00000000",
+      disabled: "#484f58",
+    },
+  },
+  controlKnob: {
+    bgColor: {
+      rest: "#010409",
+      disabled: "#484f58",
+      checked: "#ffffff",
+    },
+    borderColor: {
+      rest: "#666e79",
+      disabled: "#484f58",
+      checked: "#1f6feb",
+    },
+  },
+  counter: {
+    borderColor: "#00000000",
+  },
+  button: {
+    default: {
+      fgColor: {
+        rest: "#c9d1d9",
+      },
+      bgColor: {
+        rest: "#21262d",
+        hover: "#292e36",
+        active: "#31363e",
+        selected: "#31363e",
+      },
+      borderColor: {
+        rest: "#30363d",
+        hover: "#30363d",
+        active: "#30363d",
+      },
+      shadow: {
+        resting: "0px 0px 0px 0px #000000",
+        inset: "0px 0px 0px 0px #000000",
+      },
+    },
+    primary: {
+      fgColor: {
+        rest: "#ffffff",
+        disabled: "#ffffff80",
+      },
+      iconColor: {
+        rest: "#ffffff",
+      },
+      bgColor: {
+        rest: "#1f6feb",
+        hover: "#2a7aef",
+        active: "#3685f3",
+        disabled: "#1158c7",
+      },
+      borderColor: {
+        rest: "#30363dcc",
+        hover: "#30363dcc",
+        disabled: "#30363dcc",
+      },
+      shadow: {
+        selected: "0px 0px 0px 0px #000000",
+      },
+    },
+    invisible: {
+      fgColor: {
+        rest: "#2f81f7",
+        disabled: "#484f58",
+      },
+      bgColor: {
+        rest: "#00000000",
+        hover: "#b1bac41f",
+        active: "#b1bac433",
+        disabled: "#00000000",
+      },
+      borderColor: {
+        rest: "#00000000",
+        hover: "#00000000",
+      },
+    },
+    outline: {
+      fgColor: {
+        rest: "#2f81f7",
+        hover: "#2f81f7",
+        active: "#ffffff",
+        disabled: "#2f81f780",
+      },
+      bgColor: {
+        rest: "#f0f6fc",
+        hover: "#30363d",
+        active: "#0d419d",
+        disabled: "#0d1117",
+      },
+      borderColor: {
+        hover: "#30363d66",
+        selected: "#30363d66",
+      },
+      shadow: {
+        selected: "0px 0px 0px 0px #000000",
+      },
+    },
+    danger: {
+      fgColor: {
+        rest: "#d47616",
+        hover: "#ffffff",
+        active: "#ffffff",
+        disabled: "#d4761680",
+      },
+      iconColor: {
+        rest: "#d47616",
+        hover: "#ffffff",
+      },
+      bgColor: {
+        rest: "#21262d",
+        hover: "#914d04",
+        active: "#ac5d0b",
+        disabled: "#21262d",
+      },
+      borderColor: {
+        rest: "#30363d",
+        hover: "#914d04",
+        active: "#ac5d0b",
+      },
+      shadow: {
+        selected: "0px 0px 0px 0px #000000",
+      },
+    },
+  },
+  buttonCounter: {
+    default: {
+      bgColor: {
+        rest: "#30363d",
+      },
+    },
+    primary: {
+      bgColor: {
+        rest: "#ffffff33",
+      },
+    },
+    outline: {
+      bgColor: {
+        rest: "#1f6feb1a",
+        hover: "#ffffff33",
+        disabled: "#1f6feb0d",
+      },
+    },
+    danger: {
+      bgColor: {
+        hover: "#ffffff33",
+        disabled: "#b761000d",
+        rest: "#b761001a",
+      },
+    },
+  },
+  focus: {
+    outlineColor: "#1f6feb",
+  },
+  menu: {
+    bgColor: {
+      active: "#161b22",
+    },
+  },
+  overlay: {
+    bgColor: "#161b22",
+    backdrop: {
+      bgColor: "#b1bac433",
+    },
+  },
+  selectMenu: {
+    borderColor: "#484f58",
+    bgColor: {
+      active: "#0c2d6b",
+    },
+  },
+  sideNav: {
+    bgColor: {
+      selected: "#21262d",
+    },
+  },
+  timelineBadge: {
+    bgColor: "#21262d",
+  },
+  treeViewItem: {
+    leadingVisual: {
+      bgColor: {
+        rest: "#7d8590",
+      },
+    },
+  },
+  underlineNav: {
+    borderColor: {
+      active: "#f78166",
+      hover: "#6e768166",
+    },
+    iconColor: {
+      rest: "#7d8590",
+    },
+  },
+  fgColor: {
+    default: "#e6edf3",
+    muted: "#7d8590",
+    onEmphasis: "#ffffff",
+    disabled: "#484f58",
+    link: {
+      rest: "#2f81f7",
+      inverse: {
+        rest: "#1f6feb",
+      },
+      control: "#636a75",
+    },
+    accent: "#2f81f7",
+    success: "#58a6ff",
+    attention: "#d29922",
+    severe: "#d47616",
+    danger: "#d47616",
+    open: "#ec8e2c",
+    closed: "#8b949e",
+    done: "#a371f7",
+    sponsors: "#db61a2",
+  },
+  bgColor: {
+    default: "#0d1117",
+    muted: "#161b22",
+    emphasis: "#6e7681",
+    disabled: "#484f58",
+    neutral: {
+      muted: "#6e768126",
+      emphasis: "#6e7681",
+    },
+    accent: {
+      muted: "#388bfd26",
+      emphasis: "#1f6feb",
+    },
+    success: {
+      muted: "#388bfd26",
+      emphasis: "#1f6feb",
+    },
+    attention: {
+      muted: "#bb800926",
+      emphasis: "#9e6a03",
+    },
+    severe: {
+      muted: "#d476161a",
+      emphasis: "#b76100",
+    },
+    danger: {
+      muted: "#d476161a",
+      emphasis: "#b76100",
+    },
+    open: {
+      muted: "#d4761666",
+      emphasis: "#b76100",
+    },
+    closed: {
+      muted: "#6e768166",
+      emphasis: "#6e7681",
+    },
+    done: {
+      muted: "#a371f726",
+      emphasis: "#8957e5",
+    },
+    sponsors: {
+      muted: "#db61a21a",
+      emphasis: "#bf4b8a",
+    },
+  },
+  borderColor: {
+    default: "#30363d",
+    muted: "#30363d66",
+    emphasis: "#484f58",
+    disabled: "#30363d",
+    neutral: {
+      muted: "#6e768166",
+      emphasis: "#6e7681",
+    },
+    accent: {
+      muted: "#388bfd66",
+      emphasis: "#1f6feb",
+    },
+    success: {
+      muted: "#388bfd66",
+      emphasis: "#1f6feb",
+    },
+    attention: {
+      muted: "#bb800966",
+      emphasis: "#9e6a03",
+    },
+    severe: {
+      muted: "#d4761666",
+      emphasis: "#b76100",
+    },
+    danger: {
+      muted: "#d4761666",
+      emphasis: "#b76100",
+    },
+    open: {
+      muted: "#d4761666",
+      emphasis: "#d47616",
+    },
+    closed: {
+      muted: "#6e768166",
+      emphasis: "#6e7681",
+    },
+    done: {
+      muted: "#a371f766",
+      emphasis: "#8957e5",
+    },
+    sponsors: {
+      muted: "#db61a266",
+      emphasis: "#bf4b8a",
+    },
+  },
+  ansi: {
+    fgColor: {
+      black: "#484f58",
+      blackBright: "#6e7681",
+      white: "#b1bac4",
+      whiteBright: "#ffffff",
+      gray: "#6e7681",
+      red: "#ec8e2c",
+      redBright: "#fdac54",
+      green: "#58a6ff",
+      greenBright: "#79c0ff",
+      yellow: "#d29922",
+      yellowBright: "#e3b341",
+      blue: "#58a6ff",
+      blueBright: "#79c0ff",
+      magenta: "#bc8cff",
+      magentaBright: "#d2a8ff",
+      cyan: "#39c5cf",
+      cyanBright: "#56d4dd",
+    },
+  },
+  prettylights: {
+    syntax: {
+      comment: "#8b949e",
+      constant: "#79c0ff",
+      entity: "#d2a8ff",
+      storageModifierImport: "#c9d1d9",
+      entityTag: "#a5d6ff",
+      keyword: "#ec8e2c",
+      string: "#a5d6ff",
+      variable: "#fdac54",
+      brackethighlighterUnmatched: "#d47616",
+      invalidIllegalText: "#f0f6fc",
+      invalidIllegalBg: "#6c3906",
+      carriageReturnText: "#f0f6fc",
+      carriageReturnBg: "#914d04",
+      stringRegexp: "#a5d6ff",
+      markupList: "#f2cc60",
+      markupHeading: "#1f6feb",
+      markupItalic: "#c9d1d9",
+      markupBold: "#c9d1d9",
+      markupDeletedText: "#ffe2bb",
+      markupDeletedBg: "#4e2906",
+      markupInsertedText: "#cae8ff",
+      markupInsertedBg: "#0c2d6b",
+      markupChangedText: "#ffe2bb",
+      markupChangedBg: "#4e2906",
+      markupIgnoredText: "#c9d1d9",
+      markupIgnoredBg: "#1158c7",
+      metaDiffRange: "#d2a8ff",
+      brackethighlighterAngle: "#8b949e",
+      sublimelinterGutterMark: "#484f58",
+      constantOtherReferenceLink: "#a5d6ff",
+    },
+  },
+  shadow: {
+    inset: "0px 0px 0px 0px #000000",
+    highlight: "0px 0px 0px 0px #000000",
+    resting: {
+      xsmall: "0px 1px 0px 0px #010409a3",
+      small: "0px 0px 0px 0px #000000",
+      medium: "0px 3px 6px 0px #010409",
+    },
+    floating: {
+      small: "0px 0px 0px 1px #30363d, 0px 16px 32px 0px #010409d9",
+      medium: "0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d",
+      large: "0px 8px 24px 0px #010409",
+      xlarge: "0px 12px 48px 0px #010409",
+    },
+  },
+  outline: {
+    focus: "#1f6feb solid 1px",
+  },
+};