@primer/react-brand 0.1.0-rc.ae0dfda → 0.1.0-rc.c341bbe

package/CHANGELOG.md

@@ -8,7 +8,13 @@
 
 ### Patch Changes
 
-- [#21](https://github.com/primer/react-brand/pull/21) [`ab06cce`](https://github.com/primer/react-brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
+- [#23](https://github.com/primer/react-brand/pull/23) [`77abf53`](https://github.com/primer/react-brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - add Text and Heading components
+
+* [#23](https://github.com/primer/react-brand/pull/23) [`77abf53`](https://github.com/primer/react-brand/commit/77abf535e77ef26fa29fb09d6d2dfb746f4bc383) Thanks [@rezrah](https://github.com/rezrah)! - forward className in Hero
+
+- [#25](https://github.com/primer/react-brand/pull/25) [`4b00b72`](https://github.com/primer/react-brand/commit/4b00b72f5dbf5e578351ea77e1e74cddc69833e7) Thanks [@rezrah](https://github.com/rezrah)! - adds baseline tokens
+
+* [#21](https://github.com/primer/react-brand/pull/21) [`ab06cce`](https://github.com/primer/react-brand/commit/ab06cceb6ed3b2eaca70f9738b9708343b4e6db9) Thanks [@rezrah](https://github.com/rezrah)! - Remove fixed background color from `Hero` to allow underlying customisation to be surfaced.
 
 ## 0.0.3
 

package/fonts/fonts.css

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: 'Alliance1';
+  src: url('./alliance-1.woff2') format('woff2 supports variations'),
+    url('./alliance-1.woff2') format('woff2-variations');
+  font-weight: 200 900;
+  font-display: swap;
+  font-synthesis: none;
+}
+
+@font-face {
+  font-family: 'Alliance1Fallback';
+  size-adjust: 104.5%;
+  ascent-override: 71%;
+  src: local(Arial);
+}
+
+@font-face {
+  font-family: 'Alliance1HeaderFallback';
+  size-adjust: 103.1%;
+  ascent-override: 70%;
+  src: local(Arial Bold);
+}
+
+@font-face {
+  font-family: 'Alliance2';
+  src: url('./alliance-2.woff2') format('woff2 supports variations'),
+    url('./alliance-2.woff2') format('woff2-variations');
+  font-weight: 200 900;
+  font-display: swap;
+}

package/lib/Heading/Heading.d.ts

@@ -0,0 +1,20 @@
+import React, { PropsWithChildren } from 'react';
+export declare const HeadingSizes: readonly ["1", "2", "3", "4", "5", "6"];
+export declare const HeadingTags: readonly ["h1", "h2", "h3", "h4", "h5", "h6"];
+export declare const defaultHeadingTag: "h2";
+export declare const classMap: {
+    h1: "1";
+    h2: "2";
+    h3: "3";
+    h4: "4";
+    h5: "5";
+    h6: "6";
+};
+declare type HeadingTags = {
+    as?: typeof HeadingTags[number];
+} & React.HTMLAttributes<HTMLHeadingElement>;
+declare type HeadingProps = {
+    className?: string;
+} & HeadingTags;
+export declare function Heading({ className, children, as, ...rest }: PropsWithChildren<HeadingProps>): JSX.Element;
+export {};

package/lib/Heading/index.d.ts

@@ -0,0 +1 @@
+export * from './Heading';

package/lib/Hero/Hero.d.ts

@@ -4,6 +4,7 @@ declare type Action = {
     href: string;
 };
 export declare type HeroProps = {
+    className?: string;
     heading: string | React.ReactElement;
     description?: string | React.ReactElement;
     primaryAction: Action;
@@ -11,5 +12,5 @@ export declare type HeroProps = {
     align?: 'start' | 'center';
     size?: 'small' | 'large';
 };
-export declare function Hero({ heading, description, primaryAction, secondaryAction, align, size }: HeroProps): JSX.Element;
+export declare function Hero({ className, heading, description, primaryAction, secondaryAction, align, size }: HeroProps): JSX.Element;
 export {};

package/lib/MonaSans/MonaSans.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type MonaSansProps = {
+    children: string | React.ReactElement;
+    italic?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10';
+    size?: number;
+    weight?: number;
+    width?: number;
+};
+export declare function MonaSans({ children, italic, size, weight, width }: MonaSansProps): JSX.Element;
+export {};

package/lib/MonaSans/index.d.ts

@@ -0,0 +1 @@
+export * from './MonaSans';

package/lib/Text/Text.d.ts

@@ -0,0 +1,36 @@
+import React, { PropsWithChildren } from 'react';
+export declare const TextSizes: readonly ["700", "600", "500", "400", "300", "200", "100"];
+export declare const TextTags: readonly ["p", "span", "div"];
+export declare const TextVariants: readonly ["default", "muted"];
+export declare const defaultTextTag: "span";
+export declare const defaultTextSize: "400";
+export declare const defaultTextVariant: "default";
+declare type RestrictedPolymorphism = (React.HTMLAttributes<HTMLParagraphElement> & {
+    as?: 'p';
+}) | (React.HTMLAttributes<HTMLSpanElement> & {
+    as?: 'span';
+}) | (React.HTMLAttributes<HTMLDivElement> & {
+    as?: 'div';
+});
+declare type TextTags = {
+    /**
+     * Applies the underlying HTML element
+     */
+    as?: typeof TextTags[number];
+} & RestrictedPolymorphism;
+declare type TextProps = {
+    /**
+     * Forward a custom HTML class attribute
+     */
+    className?: string;
+    /**
+     * Specify the text size
+     */
+    size?: typeof TextSizes[number];
+    /**
+     * Specify alternative text appearance
+     */
+    variant?: typeof TextVariants[number];
+} & TextTags;
+export declare function Text({ as, className, children, size, variant, ...rest }: PropsWithChildren<TextProps>): JSX.Element;
+export {};

package/lib/Text/index.d.ts

@@ -0,0 +1 @@
+export * from './Text';

package/lib/css/gh-variables.color.css

@@ -275,6 +275,14 @@
   --gh-color-actionListItem-danger-hoverBg: rgba(255, 235, 233, 0.64);
   --gh-color-actionListItem-danger-activeBg: #ffebe9;
   --gh-color-actionListItem-danger-hoverText: #cf222e;
+  --gh-color-switchTrack-bg: #eaeef2;
+  --gh-color-switchTrack-border: #afb8c1;
+  --gh-color-switchTrack-checked-bg: #ddf4ff;
+  --gh-color-switchTrack-checked-hoverBg: #b6e3ff;
+  --gh-color-switchTrack-checked-activeBg: #80ccff;
+  --gh-color-switchTrack-checked-border: #54aeff;
+  --gh-color-switchKnob-checked-bg: #0969da;
+  --gh-color-switchKnob-checked-disabledBg: #6e7781;
   --gh-color-fg-default: #24292f;
   --gh-color-fg-muted: #57606a;
   --gh-color-fg-subtle: #6e7781;
@@ -617,6 +625,14 @@
   --gh-color-actionListItem-danger-hoverBg: rgba(255, 235, 233, 0.64);
   --gh-color-actionListItem-danger-activeBg: #ffebe9;
   --gh-color-actionListItem-danger-hoverText: #cf222e;
+  --gh-color-switchTrack-bg: #eaeef2;
+  --gh-color-switchTrack-border: #afb8c1;
+  --gh-color-switchTrack-checked-bg: #ddf4ff;
+  --gh-color-switchTrack-checked-hoverBg: #b6e3ff;
+  --gh-color-switchTrack-checked-activeBg: #80ccff;
+  --gh-color-switchTrack-checked-border: #54aeff;
+  --gh-color-switchKnob-checked-bg: #0969da;
+  --gh-color-switchKnob-checked-disabledBg: #6e7781;
   --gh-color-fg-default: #24292f;
   --gh-color-fg-muted: #57606a;
   --gh-color-fg-subtle: #6e7781;
@@ -738,7 +754,7 @@
   --gh-color-codemirror-bg: #0d1117;
   --gh-color-codemirror-guttersBg: #0d1117;
   --gh-color-codemirror-guttermarkerText: #0d1117;
-  --gh-color-codemirror-guttermarkerSubtleText: #484f58;
+  --gh-color-codemirror-guttermarkerSubtleText: #6e7681;
   --gh-color-codemirror-linenumberText: #8b949e;
   --gh-color-codemirror-cursor: #c9d1d9;
   --gh-color-codemirror-selectionBg: rgba(56, 139, 253, 0.4);
@@ -763,7 +779,7 @@
   --gh-color-checks-btnHoverIcon: #c9d1d9;
   --gh-color-checks-btnHoverBg: rgba(110, 118, 129, 0.1);
   --gh-color-checks-inputText: #8b949e;
-  --gh-color-checks-inputPlaceholderText: #484f58;
+  --gh-color-checks-inputPlaceholderText: #6e7681;
   --gh-color-checks-inputFocusText: #c9d1d9;
   --gh-color-checks-inputBg: #161b22;
   --gh-color-checks-inputShadow: 0 0 0 1px (obj) => get_1.default(obj, path);
@@ -785,8 +801,8 @@
   --gh-color-checks-headerBorder: #21262d;
   --gh-color-checks-headerIcon: #8b949e;
   --gh-color-checks-lineText: #8b949e;
-  --gh-color-checks-lineNumText: #484f58;
-  --gh-color-checks-lineTimestampText: #484f58;
+  --gh-color-checks-lineNumText: #6e7681;
+  --gh-color-checks-lineTimestampText: #6e7681;
   --gh-color-checks-lineHoverBg: rgba(110, 118, 129, 0.1);
   --gh-color-checks-lineSelectedBg: rgba(56, 139, 253, 0.15);
   --gh-color-checks-lineSelectedNumText: #58a6ff;
@@ -799,10 +815,10 @@
   --gh-color-checks-stepErrorText: #f85149;
   --gh-color-checks-stepWarningText: #d29922;
   --gh-color-checks-loglineText: #8b949e;
-  --gh-color-checks-loglineNumText: #484f58;
+  --gh-color-checks-loglineNumText: #6e7681;
   --gh-color-checks-loglineDebugText: #a371f7;
   --gh-color-checks-loglineErrorText: #8b949e;
-  --gh-color-checks-loglineErrorNumText: #484f58;
+  --gh-color-checks-loglineErrorNumText: #6e7681;
   --gh-color-checks-loglineErrorBg: rgba(248, 81, 73, 0.15);
   --gh-color-checks-loglineWarningText: #8b949e;
   --gh-color-checks-loglineWarningNumText: #d29922;
@@ -948,7 +964,7 @@
   --gh-color-btn-danger-focusShadow: 0 0 0 3px rgba(248, 81, 73, 0.4);
   --gh-color-btn-danger-counterBg: rgba(218, 54, 51, 0.1);
   --gh-color-btn-danger-icon: #f85149;
-  --gh-color-underlinenav-icon: #484f58;
+  --gh-color-underlinenav-icon: #6e7681;
   --gh-color-underlinenav-borderHover: rgba(110, 118, 129, 0.4);
   --gh-color-actionListItem-inlineDivider: rgba(48, 54, 61, 0.48);
   --gh-color-actionListItem-default-hoverBg: rgba(177, 186, 196, 0.12);
@@ -959,9 +975,17 @@
   --gh-color-actionListItem-danger-hoverBg: rgba(248, 81, 73, 0.16);
   --gh-color-actionListItem-danger-activeBg: rgba(248, 81, 73, 0.24);
   --gh-color-actionListItem-danger-hoverText: #ff7b72;
+  --gh-color-switchTrack-bg: #010409;
+  --gh-color-switchTrack-border: #6e7681;
+  --gh-color-switchTrack-checked-bg: rgba(31, 111, 235, 0.35);
+  --gh-color-switchTrack-checked-hoverBg: rgba(31, 111, 235, 0.5);
+  --gh-color-switchTrack-checked-activeBg: rgba(31, 111, 235, 0.65);
+  --gh-color-switchTrack-checked-border: #58a6ff;
+  --gh-color-switchKnob-checked-bg: #1f6feb;
+  --gh-color-switchKnob-checked-disabledBg: #484f58;
   --gh-color-fg-default: #c9d1d9;
   --gh-color-fg-muted: #8b949e;
-  --gh-color-fg-subtle: #484f58;
+  --gh-color-fg-subtle: #6e7681;
   --gh-color-fg-onEmphasis: #ffffff;
   --gh-color-canvas-default: #0d1117;
   --gh-color-canvas-overlay: #161b22;