29 | Content breaking out of regular layout
30 | {/* ... */}
31 |
32 | ```
--------------------------------------------------------------------------------
/src/surfaces/click-outside/click-outside.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, ReactNode } from 'react';
2 | import onClickOutside, {
3 | OnClickOutProps,
4 | InjectedOnClickOutProps,
5 | } from 'react-onclickoutside';
6 |
7 | type Props = {
8 | children: ReactNode;
9 | disable?: boolean;
10 | onClick: (e: React.MouseEvent
) => void;
11 | } & InjectedOnClickOutProps;
12 |
13 | class MyComponent extends Component implements OnClickOutProps {
14 | componentDidUpdate(prevProps: Props) {
15 | const nextProps = this.props;
16 |
17 | if (prevProps.disable !== nextProps.disable) {
18 | if (nextProps.disable) {
19 | this.props.disableOnClickOutside();
20 | } else {
21 | this.props.enableOnClickOutside();
22 | }
23 | }
24 | }
25 |
26 | handleClickOutside = (evt: React.MouseEvent) => {
27 | this.props.onClick(evt);
28 | };
29 |
30 | render() {
31 | return this.props.children;
32 | }
33 | }
34 |
35 | export const ClickOutside = onClickOutside(MyComponent);
36 |
--------------------------------------------------------------------------------
/src/themes/color-palette/color-palette.module.scss:
--------------------------------------------------------------------------------
1 | @import '../colors.module.scss';
2 |
3 | // brand colors
4 | .primary {
5 | --base-color: #{$p50};
6 | --base-highlight: #{$p60};
7 | }
8 |
9 | .secondary {
10 | --base-color: #{$b50};
11 | --base-highlight: #{$b60};
12 | }
13 |
14 | .complementary {
15 | --base-color: #{$pink50};
16 | --base-highlight: #{$pink60};
17 | }
18 |
19 | // intents
20 | .impulsive {
21 | --base-color: #{$r50};
22 | --base-highlight: #{$r60};
23 | }
24 |
25 | .hungry {
26 | --base-color: #{$y50};
27 | --base-highlight: #{$y60};
28 | }
29 |
30 | .success {
31 | --base-color: #{$g50};
32 | --base-highlight: #{$g60};
33 | }
34 |
35 | // weight
36 | .emphasized {
37 | --base-color: #{$d60};
38 | --base-highlight: #{$d70};
39 | }
40 |
41 | .neutral {
42 | --base-color: #{$d50};
43 | --base-highlight: #{$d60};
44 | }
45 |
46 | .muted {
47 | --base-color: #{$d40};
48 | --base-highlight: #{$d50};
49 |
50 | //unsettled:
51 | --bg-topping: #{$p20};
52 | --bg-topping-highlight: #{$p30};
53 | }
54 |
--------------------------------------------------------------------------------
/src/text/paragraph/paragraph.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 |
4 | import { PossibleSizes } from '../../constants/sizes';
5 | import styles from './paragraph.module.scss';
6 |
7 | export type ParagraphProps = {
8 | /**
9 | * Font size (from a list of presets).
10 | */
11 | size: PossibleSizes,
12 | /**
13 | * The underlying html element
14 | */
15 | element: 'p' | 'div' | 'span',
16 | } & React.HTMLAttributes;
17 |
18 | /**
19 | * Paragraph component prototype. Accepts all properties of a native Paragraph element,
20 | * @name paragraph
21 | * @example
22 | * This is some text
23 | */
24 | export function Paragraph({ className, size, element: Element, ...rest }: ParagraphProps) {
25 | return (
26 |
31 | );
32 | }
33 |
34 | Paragraph.defaultProps = {
35 | size: 'md',
36 | element: 'p',
37 | };
38 |
--------------------------------------------------------------------------------
/src/layout/align/README.md:
--------------------------------------------------------------------------------
1 | ## Align
2 |
3 | A set of CSS components to align elements.
4 |
5 | ### text
6 |
7 | Same as css property text-align.
8 |
9 | ```tsx
10 | import { text } from '@bit/bit.base-ui.layout.align';
11 | function A() {
12 | return a
;
13 | }
14 | ```
15 |
16 | ### Breakpoints
17 |
18 | Align elements according to html breakpoints.
19 |
20 | ```tsx
21 | import { text } from '@bit/bit.base-ui.layout.align';
22 | function B() {
23 | return
24 | b
25 |
26 | }
27 | ```
28 |
29 | ### Margin center
30 |
31 | Same as `margin-left: auto; margin-right: auto`.
32 |
33 | ```tsx
34 | import { marginCenter } from '@bit/bit.base-ui.layout.align';
35 |
36 | function C() {
37 | return this is centered
;
38 | }
39 | ```
40 |
41 | ## Breakpoints:
42 | - (default) `(all)`
43 | - xs `360px`
44 | - sm `480px`
45 | - md `768px`
46 | - l `920px`
47 | - lg `1080px`
48 | - xl `1440px`
49 |
--------------------------------------------------------------------------------
/src/layout/grid-presets/four-way-grid/index.ts:
--------------------------------------------------------------------------------
1 | import styles from './four-way-grid.module.scss';
2 |
3 | /**
4 | * @name fourWayGrid
5 | * @description
6 | * A a pure CSS component, let the preset arrange your grid elements!
7 | *
8 | * Default view:
9 | * ```
10 | *
11 | *
12 | *
13 | *
14 | *
15 | *
16 | *
17 | *
18 | * ```
19 | *
20 | * Tablet:
21 | * ```
22 | * image-1 text-1
23 | * image-2 text-2
24 | * image-3 text-3
25 | * image-4 text-4
26 | * ```
27 | *
28 | * Desktop:
29 | * ```
30 | * image-1 image-2
31 | * text-1 text-2
32 | * image-3 image-4
33 | * text-3 text-4
34 | * ```
35 | *
36 | * @example
37 | *
38 | * element 1
39 | *
40 | * element 2
41 | *
42 | * element 3
43 | *
44 | * element 4
45 | *
46 | *
47 | */
48 |
49 | export const fourWayGrid = styles.fourWayGrid;
50 |
--------------------------------------------------------------------------------
/src/elements/separator/separator.spec.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { render } from '@testing-library/react';
3 | import { expect } from 'chai';
4 |
5 | import { Separator } from './separator';
6 |
7 | it('should render', () => {
8 | const { getByTestId } = render();
9 | const rendered = getByTestId('test-sep');
10 |
11 | expect(rendered).to.exist;
12 | });
13 |
14 | it('should pass classname', () => {
15 | const { getByTestId } = render();
16 | const rendered = getByTestId('test-sep');
17 |
18 | expect(rendered.className).to.include('separata');
19 | });
20 |
21 | // css-modules tests are not available in mocha yet
22 |
23 | // it('should be horizontal by default', () => {
24 | // const { getByTestId } = render();
25 | // const rendered = getByTestId('test-sep');
26 |
27 | // expect(rendered.className).to.include('horizontal');
28 | // });
29 |
30 | // it('should be vertical when set', () => {
31 | // const { getByTestId } = render(
32 | //
33 | // );
34 | // const rendered = getByTestId('test-sep');
35 |
36 | // expect(rendered.className).to.include('vertical');
37 | // });
38 |
--------------------------------------------------------------------------------
/src/geometry/curve-peek/curve-peek.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 |
4 | import fillingStyle from './filling.module.scss';
5 |
6 | type PossibleFilling = 'none' | 'white' | 'cloud';
7 |
8 | export type SemicircleProps = {
9 | /** Select the color for the curve background. */
10 | filling: PossibleFilling;
11 | } & React.SVGProps;
12 |
13 | /**
14 | * An SVG component shaped like a parabola. Useful for separating two sections.
15 | * Being an html element, this component is very light and don't require an additional network request.
16 | *
17 | * The component comes with 2 predefined colors, 'white' and 'cloud'.
18 | * To use a custom color, set fillings to be "none", and apply the color with a css rule, e.g. `{ filling: '#7f1ae5' }`
19 | * @name CurvePeek
20 | */
21 | export function CurvePeek(props: SemicircleProps) {
22 | const { className, filling, ...rest } = props;
23 |
24 | return (
25 |
37 | );
38 | }
39 |
40 | CurvePeek.defaultProps = {
41 | filling: 'white',
42 | };
43 |
--------------------------------------------------------------------------------
/src/surfaces/abs-container/containee/containee.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, RefObject } from 'react';
2 | import classNames from 'classnames';
3 | //@ts-ignore
4 | import createRef from 'react-create-ref';
5 |
6 | import styles from '../abs-container.module.scss';
7 | import positionStyles from './positions.module.scss';
8 | import displacementStyles from './displacement.module.scss';
9 |
10 | export type Position =
11 | | 'top'
12 | | 'right'
13 | | 'bottom'
14 | | 'left'
15 | | 'cover'
16 | | 'none'
17 | | 'top-start'
18 | | 'right-start'
19 | | 'bottom-start'
20 | | 'left-start'
21 | | 'top-end'
22 | | 'right-end'
23 | | 'bottom-end'
24 | | 'left-end';
25 |
26 | export type ContaineeProps = { position?: Position } & React.HTMLAttributes;
27 |
28 | export class Containee extends Component {
29 | private ref: RefObject = createRef();
30 |
31 | render() {
32 | const { className, position = 'bottom', ...rest } = this.props;
33 | const positionClass = positionStyles[position];
34 | const displacement = displacementStyles.displacement;
35 |
36 | return (
37 |
43 | );
44 | }
45 | }
46 |
--------------------------------------------------------------------------------
/src/themes/theme-provider/theme-provider.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 |
4 | import size from '../size-definition.module.scss';
5 | import shadow from '../shadow-definition.module.scss';
6 | import colors from '../color-definition.module.scss';
7 | import brands from '../brand-definition.module.scss';
8 | import margins from '../heading-margin-definition.module.scss';
9 | import font from '../book-font.module.scss';
10 | import texts from './texts.module.scss';
11 |
12 | /**
13 | * @name ThemeProvider
14 | * @description
15 | * Applies shared styles to all child components.
16 | *
17 | * This includes:
18 | * - Colors
19 | * - Headers and paragraphs font-size, margins, etc
20 | * - Brand font
21 | * - Shadows
22 | * - Specific brand related styles
23 | *
24 | * @example
25 | *
26 | * I got all the base styles! yippee!
27 | *
28 | */
29 |
30 | export function Theme(props: React.HTMLAttributes) {
31 | return (
32 |
46 | );
47 | }
48 |
--------------------------------------------------------------------------------
/src/layout/grid-presets/z-grid/z-grid.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../_breakpoints.scss";
2 |
3 | .zGrid {
4 | grid-row-gap: 50px;
5 | margin-bottom: 50px;
6 |
7 | grid-template-areas:
8 | "it1"
9 | "im1"
10 | "."
11 | "it2"
12 | "im2"
13 | ".";
14 |
15 | :nth-child(1) {
16 | grid-area: it1;
17 | }
18 |
19 | :nth-child(2) {
20 | grid-area: im1;
21 | }
22 |
23 | :nth-child(3) {
24 | grid-area: it2;
25 | }
26 |
27 | :nth-child(4) {
28 | grid-area: im2;
29 | }
30 |
31 | @media (min-width: $br-md) {
32 | grid-template-areas:
33 | "it1 it1 it1 it1 it1 it1 im1 im1 im1 im1 im1 im1"
34 | "im2 im2 im2 im2 im2 im2 it2 it2 it2 it2 it2 it2";
35 |
36 | grid-row-gap: 80px;
37 | margin-bottom: 80px;
38 | }
39 |
40 | @media (min-width: $br-lg) {
41 | grid-template-areas:
42 | "it1 it1 it1 it1 it1 im1 im1 im1 im1 im1 im1 im1"
43 | "im2 im2 im2 im2 im2 im2 im2 it2 it2 it2 it2 it2";
44 |
45 | grid-row-gap: 80px;
46 | margin-bottom: 80px;
47 | }
48 | }
49 |
50 | .halfZGrid {
51 | grid-template-areas:
52 | "it1"
53 | "im1";
54 |
55 | :nth-child(1) {
56 | grid-area: it1;
57 | }
58 |
59 | :nth-child(2) {
60 | grid-area: im1;
61 | }
62 |
63 | @media (min-width: $br-md) {
64 | grid-template-areas:
65 | "it1 it1 it1 it1 it1 it1 im1 im1 im1 im1 im1 im1";
66 | }
67 |
68 | @media (min-width: $br-lg) {
69 | grid-template-areas:
70 | "it1 it1 it1 it1 it1 im1 im1 im1 im1 im1 im1 im1";
71 | }
72 | }
--------------------------------------------------------------------------------
/src/layout/grid-presets/four-way-grid/four-way-grid.module.scss:
--------------------------------------------------------------------------------
1 | @import "../../_breakpoints.scss";
2 |
3 | .fourWayGrid {
4 | display: grid;
5 |
6 | grid-template-columns: 1fr;
7 | grid-template-rows: repeat(3, auto auto 50px) auto auto;
8 |
9 | grid-template-areas:
10 | "txt1"
11 | "img1"
12 | "."
13 | "txt2"
14 | "img2"
15 | "."
16 | "txt3"
17 | "img3"
18 | "."
19 | "txt4"
20 | "img4";
21 |
22 | &>:nth-child(1) {
23 | grid-area: txt1;
24 | }
25 |
26 | &>:nth-child(2) {
27 | grid-area: img1;
28 | }
29 |
30 | &>:nth-child(3) {
31 | grid-area: txt2;
32 | }
33 |
34 | &>:nth-child(4) {
35 | grid-area: img2;
36 | }
37 |
38 | &>:nth-child(5) {
39 | grid-area: txt3;
40 | }
41 |
42 | &>:nth-child(6) {
43 | grid-area: img3;
44 | }
45 |
46 | &>:nth-child(7) {
47 | grid-area: txt4;
48 | }
49 |
50 | &>:nth-child(8) {
51 | grid-area: img4;
52 | }
53 |
54 | @media (min-width: $br-sm) {
55 | grid-template-columns: 1fr 1fr;
56 | grid-template-rows: repeat(3, 1fr 40px) 1fr;
57 | grid-template-areas:
58 | "img1 txt1"
59 | ". ."
60 | "img2 txt2"
61 | ". ."
62 | "img3 txt3"
63 | ". ."
64 | "img4 txt4";
65 | }
66 |
67 | @media (min-width: $br-l) {
68 | grid-template-columns: 1fr 1fr;
69 | grid-template-rows: auto auto 80px auto auto;
70 | grid-template-areas:
71 | "img1 img2"
72 | "txt1 txt2"
73 | ". ."
74 | "img3 img4"
75 | "txt3 txt4";
76 |
77 | align-items: start;
78 | }
79 | }
--------------------------------------------------------------------------------
/src/surfaces/card/card.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import classNames from 'classnames';
3 | import styles from './card.module.scss';
4 | import { elevationClass, ElevationHeight } from '../../css-components/elevation';
5 | import { roundnessClass, Roundness } from '../../css-components/roundness';
6 | import { backgrounds } from '../background';
7 |
8 | export type CardProps = {
9 | /**
10 | * Controls the shadow cast by the card, to generate a "stacking" effects.
11 | * For example, a modal floating over elements may have a 'high' elevation
12 | */
13 | elevation?: ElevationHeight;
14 | /** Controls the border radius of the card */
15 | roundness?: Roundness;
16 | } & React.HTMLAttributes;
17 |
18 | /**
19 | * A wrapper resembling a physical card, grouping elements and improve readability.
20 | * @example
21 | *
22 | * Lorem ipsum dolor sit amet, consectetur adipiscing elit.
23 | *
24 | */
25 | export function Card({
26 | className,
27 | elevation = 'low',
28 | roundness = 'default',
29 | ...rest
30 | }: CardProps) {
31 | return (
32 |
43 | );
44 | }
45 |
46 | Card.defaultProps = {
47 | elevation: 'low',
48 | roundness: 'default',
49 | };
50 |
--------------------------------------------------------------------------------
/src/themes/shadow-definition.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Shadow CSS-variables definitions.
3 | * ```
4 | * --elevation-none: none;
5 | *
6 | * //raised, ie attached to background
7 | * --shadow-raised-low: 0 -1px 1px 0 rgba(0, 0, 0, 0.09), 0 2px 2px 0 rgba(0, 0, 0, 0.23);
8 | * // --shadow-raised-medium: //TBD;
9 | * // --shadow-raised-hight: //TBD;
10 | *
11 | * //not final
12 | * --shadow-faint: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
13 | *
14 | * // hover, ie. floating above
15 | * --shadow-hover-low: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
16 | * --shadow-hover-medium: 0 0 20px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 0 rgba(0, 0, 0, 0.24);
17 | * --shadow-hover-high: 0px 11px 29px 0px rgba(0, 0, 0, 0.23);
18 | * ```
19 | *
20 | * To use, add class `shadowTheme` to your root component.
21 | */
22 |
23 | .shadowTheme {
24 | --elevation-none: none;
25 |
26 | //raised, ie attached to background
27 | --shadow-raised-low: 0 -1px 1px 0 rgba(0, 0, 0, 0.09), 0 2px 2px 0 rgba(0, 0, 0, 0.23);
28 | // --shadow-raised-medium: ;
29 | // --shadow-raised-hight: ;
30 |
31 | //not final
32 | --shadow-faint: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
33 | --shadow-resting: 0px 0px 4px rgba(0, 0, 0, 0.08), 0px 2px 4px rgba(0, 0, 0, 0.08);
34 |
35 | // hover, ie. floating above
36 | --shadow-hover-low: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
37 | --shadow-hover-medium: 0 0 20px 0 rgba(0, 0, 0, 0.12), 0 2px 6px 0 rgba(0, 0, 0, 0.24);
38 | --shadow-hover-high: 0px 11px 29px 0px rgba(0, 0, 0, 0.23);
39 | }
40 |
--------------------------------------------------------------------------------
/src/layout/align/align.module.scss:
--------------------------------------------------------------------------------
1 | @import '../_breakpoints.scss';
2 |
3 | $breakpoints: //name val
4 | xs $br-xs,
5 | sm $br-sm,
6 | md $br-md,
7 | l $br-l,
8 | lg $br-lg,
9 | xl $br-xl;
10 |
11 | .fullWidth {
12 | width: 100%;
13 | box-sizing: border-box;
14 | }
15 |
16 | .text {
17 | &-left {
18 | text-align: left;
19 | }
20 |
21 | &-center {
22 | text-align: center;
23 | }
24 |
25 | &-right {
26 | text-align: right;
27 | }
28 | @each $breakpoint in $breakpoints {
29 | $brName: nth($breakpoint, 1);
30 | $brVal: nth($breakpoint, 2);
31 | @media only screen and (min-width: $brVal) {
32 | &-#{$brName} {
33 | &-left {
34 | text-align: left;
35 | }
36 |
37 | &-center {
38 | text-align: center;
39 | }
40 |
41 | &-right {
42 | text-align: right;
43 | }
44 | }
45 | }
46 | }
47 | }
48 |
49 |
50 | .justifyItems {
51 | &-left {
52 | justify-items: left;
53 | }
54 |
55 | &-center {
56 | justify-items: center;
57 | }
58 |
59 | &-right {
60 | justify-items: right;
61 | }
62 | }
63 |
64 | .alignItems {
65 | &-start {
66 | align-items: start;
67 | }
68 |
69 | &-center {
70 | align-items: center;
71 | }
72 |
73 | &-end {
74 | align-items: end;
75 | }
76 | }
77 |
78 | //TODO - rename justifySelf and add alignSelf
79 | .self {
80 | &-left {
81 | justify-self: left;
82 | }
83 |
84 | &-center {
85 | justify-self: center;
86 | }
87 |
88 | &-right {
89 | justify-self: right;
90 | }
91 | }
92 |
93 | .marginCenter {
94 | margin-right: auto;
95 | margin-left: auto;
96 | }
--------------------------------------------------------------------------------
/src/layout/align/index.ts:
--------------------------------------------------------------------------------
1 | import styles from './align.module.scss';
2 |
3 | enum BreakPoints {
4 | xs = 'xs',
5 | sm = 'sm',
6 | md = 'md',
7 | l = 'l',
8 | lg = 'lg',
9 | xl = 'xl',
10 | }
11 |
12 | type TextOptions = {
13 | left: string;
14 | center: string;
15 | right: string;
16 | };
17 |
18 | type TextProps = {
19 | left: string;
20 | center: string;
21 | right: string;
22 |
23 | xs: TextOptions;
24 | sm: TextOptions;
25 | md: TextOptions;
26 | l: TextOptions;
27 | lg: TextOptions;
28 | xl: TextOptions;
29 | };
30 |
31 | export const fullWidth = styles.fullWidth;
32 |
33 | export const text = (() => {
34 | const baseStyle = {
35 | left: styles['text-left'],
36 | center: styles['text-center'],
37 | right: styles['text-right'],
38 | };
39 |
40 | const medias = Object.keys(BreakPoints)
41 | .map(br => ({
42 | [br]: {
43 | left: styles[`text-${br}-left`],
44 | center: styles[`text-${br}-center`],
45 | right: styles[`text-${br}-right`],
46 | },
47 | }))
48 | .reduce((prev, next) => Object.assign(prev, next), {});
49 |
50 | return {
51 | ...baseStyle,
52 | ...medias,
53 | } as TextProps;
54 | })();
55 |
56 | export const marginCenter = styles.marginCenter;
57 |
58 | //consider moving this logic to
59 | export const justifyItems = {
60 | left: styles['justifyItems-left'],
61 | center: styles['justifyItems-center'],
62 | right: styles['justifyItems-right'],
63 | };
64 |
65 | export const alignItems = {
66 | start: styles['alignItems-start'],
67 | center: styles['alignItems-center'],
68 | end: styles['alignItems-end'],
69 | };
70 |
--------------------------------------------------------------------------------
/src/themes/book-font.module.scss:
--------------------------------------------------------------------------------
1 | //@HACK - fonts don't work with storage.cloud.google.com
2 | $staticStorageUrl: 'https://static.bit.dev';
3 |
4 | /**
5 | * Define `@font-face` rules for font-family Circular Pro Book, including bold and italic.
6 | * Provides a handy class name to add to root component.
7 | *
8 | * @example
9 | * import { bookFont } from '@bit/bit.base-ui.theme.fonts.book';
10 | * //...
11 | *
12 | *
13 | * I'm using font!
14 | * I am BOLD
15 | *
16 | */
17 |
18 | // default
19 | @font-face {
20 | font-family: "CircularPro";
21 | src: url($staticStorageUrl + '/fonts/CircularPro-Book.otf');
22 | }
23 |
24 | // bold
25 | @font-face {
26 | font-family: "CircularPro";
27 | src: url($staticStorageUrl + '/fonts/CircularPro-Bold.otf');
28 | font-weight: bold;
29 | }
30 |
31 | // // bold-er
32 | @font-face {
33 | font-family: "CircularPro";
34 | src: url($staticStorageUrl + '/fonts/CircularPro-Black.otf');
35 | font-weight: 800;
36 | }
37 |
38 | // italic
39 | @font-face {
40 | font-family: "CircularPro";
41 | src: url($staticStorageUrl + '/fonts/CircularPro-BookItalic.otf');
42 | font-style: italic;
43 | }
44 |
45 | // bold + italic
46 | @font-face {
47 | font-family: "CircularPro";
48 | src: url($staticStorageUrl + '/fonts/CircularPro-BoldItalic.otf');
49 | font-style: italic;
50 | font-weight: bold;
51 | }
52 |
53 | // bold-er + italic
54 | @font-face {
55 | font-family: "CircularPro";
56 | src: url($staticStorageUrl + '/fonts/CircularPro-BlackItalic.otf');
57 | font-style: italic;
58 | font-weight: 800;
59 | }
60 |
61 | .bookFont {
62 | font-family: "CircularPro", "Gill Sans", "Gill Sans MT", "Helvetica Neue", Helvetica, Arial, sans-serif;
63 | }
--------------------------------------------------------------------------------
/src/themes/colors.module.scss:
--------------------------------------------------------------------------------
1 | /**
2 | * Basic colors palette for bit.dev.
3 | * Colors divide into these groups:
4 | * - Primary, brand (purple)
5 | * - Secondary (blue)
6 | * - Complementary (pink)
7 | * - Success (green)
8 | * - Risk (yellow)
9 | * - Danger (red)
10 | * - Neutrals (gray)
11 | * - Shadows
12 |
13 | * Each color has its own shades, scaling between 0 (lightest) and 100 (darkest),
14 | * e.g.: p20 (lightest purple), p30, p50 (base purple), p60 (highlight) p70 (darkest)
15 | */
16 |
17 |
18 | // purple
19 | $p70: #3e29df;
20 | $p60: #5d4aec;
21 | $p50: #6c5ce7;
22 | $p40: #897dec;
23 | $p30: #c9c3f6;
24 | $p20: #eceaff;
25 |
26 | // blue
27 | $b70: #0d2de3;
28 | $b60: #3d5afe;
29 | $b50: #0984e3;
30 | $b40: #95ccf5;
31 | $b30: #d2ecfe;
32 | $b20: #f3faff;
33 |
34 |
35 | // green
36 | $g70: #006644;
37 | $g60: #2e945a;
38 | $g50: #37b26c;
39 | $g40: #94deb4;
40 | $g30: #d0f1de;
41 | $g20: #eefaf3;
42 |
43 |
44 | // yellow
45 | $y70: #ff8b00;
46 | $y60: #ff991f;
47 | $y50: #ffc640;
48 | $y40: #ffe380;
49 | $y30: #fff0b3;
50 | $y20: #fff5dd;
51 |
52 | // red
53 | $r70: #8d1130;
54 | $r60: #d31948;
55 | $r50: #e62e5c;
56 | $r40: #f086a0;
57 | $r30: #f7bac9;
58 | $r20: #fdeff2;
59 |
60 |
61 | // dark
62 | $d70: #0c0c0c; // lucifer
63 | $d60: #2b2b2b; // doom
64 | $d50: #414141; // darkness
65 | $d40: #6c707c; // battleship
66 | $d30: #878c9a; // steel
67 | $d20: #babec9; // silver
68 | $d10: #ededed; // pearl
69 | $w20: #f6f6f6; // cloud
70 | $w10: #ffffff; // white
71 |
72 | $pink70: #df083e;
73 | $pink60: #f7174f;
74 | $pink50: #f83d6c;
75 | $pink40: #f96389;
76 | $pink30: #fb9cb4;
77 | $pink20: #ffe2ea;
78 |
79 |
80 | // shadow
81 | $s50: rgba(65, 65, 65, 0.5);
82 | $s40: rgba(108, 112, 124, 0.5);
83 | $s30: rgba(135, 140, 154, 0.5);
84 | $s20: rgba(186, 190, 201, 0.5);
85 | $s10: rgba(237, 237, 237, 0.5);
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/layout/grid-component/grid.tsx:
--------------------------------------------------------------------------------
1 | import React, { PureComponent } from 'react';
2 | import classNames from 'classnames';
3 | import styles from './grid.module.scss';
4 |
5 | import {
6 | colGrid,
7 | colGridL,
8 | colGridLg,
9 | colGridMd,
10 | colGridSm,
11 | colGridXl,
12 | colGridXs,
13 | } from './grid-template';
14 |
15 | type ColCount = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
16 |
17 | type GridProps = {
18 | /**
19 | * default column count (1-12)
20 | */
21 | col?: ColCount,
22 | /**
23 | * column count at extremely small devices
24 | */
25 | colXs?: ColCount,
26 | /**
27 | * column count at mobile screens
28 | */
29 | colSm?: ColCount,
30 | /**
31 | * column count at medium devices
32 | */
33 | colMd?: ColCount,
34 | /**
35 | * column count at tablets
36 | */
37 | colL?: ColCount,
38 | /**
39 | * default column count at laptops
40 | */
41 | colLg?: ColCount,
42 | /**
43 | * default column count at desktop
44 | */
45 | colXl?: ColCount,
46 | } & React.HTMLAttributes;
47 |
48 | /**
49 | * A responsive css-grid wrapper.
50 | * Use the `col` properties to set column count in each resolution.
51 | */
52 |
53 | export class Grid extends PureComponent {
54 | render() {
55 | const { className, col, colL, colLg, colMd, colSm, colXl, colXs, ...rest } = this.props;
56 |
57 | const classes = [className, styles.gridContainer];
58 |
59 | //yup, it's dirty, but it does exactly what it is supposed to do.
60 | // don't abuse it
61 |
62 | if (col !== undefined) classes.push(colGrid[col]);
63 | if (colL !== undefined) classes.push(colGridL[colL]);
64 | if (colLg !== undefined) classes.push(colGridLg[colLg]);
65 | if (colMd !== undefined) classes.push(colGridMd[colMd]);
66 | if (colSm !== undefined) classes.push(colGridSm[colSm]);
67 | if (colXl !== undefined) classes.push(colGridXl[colXl]);
68 | if (colXs !== undefined) classes.push(colGridXs[colXs]);
69 |
70 | return (
71 |
76 | );
77 | }
78 | }
79 |
--------------------------------------------------------------------------------
/src/themes/color-definition.module.scss:
--------------------------------------------------------------------------------
1 | @import './colors.module.scss';
2 |
3 | /**
4 | * CSS colors and variables for the app.
5 | *
6 | * - Sets default text color
7 | * - `--base-color` - default color (cta color, etc)
8 | * - `--base-highlight` - default color for highlight (cta hover, etc)
9 | * - `--border-color`
10 | * - `--bg-color` - background color
11 | * - `--separator-color`
12 | *
13 | * ### backgrounds:
14 | * As elements stacks closer to the user, its color changes. their color change.
15 | * This is especially noticeable in dark mode (higher elements are lighter).
16 | *
17 | * We created 4 levels of possible backgrounds, from bottom to top:
18 | * - `--bg-bedrock` - i.e. background
19 | * - `--bg-base` - e.g. navigation elements and wireframes
20 | * - `--bg-layer` - workspaces, e.g. card. (may be sub-divided in the future)
21 | * - `--bg-crust` - overlay ui, e.g. tooltip.
22 | * - `--bg-topping` - "bumps" on top level surfaces e.g. button, input, etc
23 | */
24 |
25 | .primaryPalette {
26 | color: $d50;
27 | --text-highlight: #{$d60};
28 | --text-color: #{$d50};
29 | --text-muted: #{$d40};
30 |
31 | --base-color: #{$p50};
32 | --base-highlight: #{$p60};
33 |
34 | --border-color: #{$d10};
35 | --bg-color: #{$w10};
36 | --separator-color: #{$d20};
37 |
38 | --muted-color: #{$p20}; //unsettled
39 | --muted-highlight: #{$p30}; //unsettled
40 |
41 | --error-color: #{$r50};
42 | --error-highlight: #{$r60};
43 | --bg-error: #{$r20};
44 |
45 | --bg-bedrock: #{$w10}; // i.e. background
46 | --bg-base: #{$w10}; // e.g. navigation
47 | --bg-layer: #{$w10}; // e.g. card
48 | --bg-crust: #{$w10}; // e.g. tooltip
49 | --bg-topping: #{$w10}; // e.g. button, input, etc
50 | --bg-topping-highlight: #{$w20};
51 | --bg-dent: #{$w20};
52 |
53 | // deprecated (overly specific):
54 | --primary-button-width: 199px;
55 | --primary-button-height: 46px;
56 | --cta-button-text: #{$w10};
57 | --primary-label-bg: #{$p50};
58 | --primary-label-text: #{$w10};
59 | --primary-label-width: 50px;
60 | }
61 |
--------------------------------------------------------------------------------
/src/input/button/button.tsx:
--------------------------------------------------------------------------------
1 | import React, { Component, ReactNode } from 'react';
2 | import classNames from 'classnames';
3 |
4 | // //@ts-ignore
5 | // import Spinner from '@bit/bit.base-ui.ellipsis';
6 |
7 | import styles from './button.module.scss';
8 | import { DotsLoader } from '../../elements/dots-loader';
9 |
10 | // const defaultSpinner = (
11 | //
12 | // );
13 |
14 | export type ButtonProps = {
15 | /**
16 | * loader to show while button is busy. Turns on when onClick returns a promise (until it resolves), or when `loading={true}`.
17 | */
18 | loader?: ReactNode,
19 | /**
20 | * explicitly toggle loader on and off
21 | */
22 | loading?: boolean,
23 | } & React.ButtonHTMLAttributes;
24 |
25 | /**
26 | * Base button, with very basic styles. Accepts all parameters of native html button.
27 | *
28 | * If onClick returns a promise, BaseButton will show a loader automatically, until the promise is resolved or rejected.
29 | * @example
30 | * 
10 |