├── .babelrc ├── .browserslistrc ├── .circleci └── config.yml ├── .eslintignore ├── .eslintrc.js ├── .gitignore ├── .istanbul.yml ├── .nvmrc ├── .prettierignore ├── .prettierrc ├── README.md ├── config └── design-tokens │ ├── alerts.yml │ ├── box-shadow.yml │ ├── color.yml │ ├── font-size.yml │ ├── font-weight.yml │ ├── gradients.yml │ ├── grid.yml │ ├── input.yml │ ├── layout.yml │ ├── table.yml │ └── tokens.yml ├── gulpfile.js ├── package-lock.json ├── package.json ├── postcss.config.js ├── scripts ├── README.md ├── custom-token-formats │ ├── css-helper-colors.js │ ├── css-helper-fills.js │ ├── css-helper-hover-colors.js │ ├── custom-properties-as-an-object.js │ └── theme.js ├── icons.js └── tokens.js ├── site ├── README.md ├── gatsby-config.js ├── gatsby-node.js ├── package-lock.json ├── package.json └── src │ ├── components │ ├── action-card │ │ ├── action-card.js │ │ └── index.js │ ├── documentation-content │ │ ├── documentation-content.js │ │ └── index.js │ ├── navigation │ │ ├── index.js │ │ └── navigation.js │ ├── prop-table │ │ ├── index.js │ │ └── prop-table.js │ ├── side-nav │ │ ├── index.js │ │ └── side-nav.js │ ├── toc │ │ ├── index.js │ │ └── toc.js │ └── wrapper │ │ ├── index.js │ │ └── wrapper.js │ ├── data │ └── README.md │ ├── html.js │ ├── layouts │ └── index.js │ ├── pages │ ├── 404.js │ ├── foundations │ │ ├── color.js │ │ ├── design-tokens.js │ │ ├── icons.js │ │ ├── spacing.js │ │ └── typography.js │ └── index.js │ ├── static │ └── favicon.png │ └── templates │ └── component.js ├── src ├── components │ ├── alert │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── alert.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── alert.test.js.snap │ │ │ └── alert.test.js │ │ ├── alert.module.css │ │ ├── alert.react.js │ │ ├── components │ │ │ └── alert-popover.react.js │ │ └── index.js │ ├── avatar-group │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── avatar-group.examples.js │ │ ├── __tests__ │ │ │ └── avatar-group.test.js │ │ ├── avatar-group.module.css │ │ ├── avatar-group.react.js │ │ └── index.js │ ├── avatar │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── avatar.examples.js │ │ ├── __tests__ │ │ │ └── avatar.test.js │ │ ├── avatar.module.css │ │ ├── avatar.react.js │ │ └── index.js │ ├── button-dropdown │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── button-dropdown.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── button-dropdown.test.js.snap │ │ │ └── button-dropdown.test.js │ │ ├── button-dropdown.module.css │ │ ├── button-dropdown.react.js │ │ └── index.js │ ├── button-group │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── button-group.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── button-group.test.js.snap │ │ │ └── button-group.test.js │ │ ├── button-group.module.css │ │ ├── button-group.react.js │ │ └── index.js │ ├── button │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── button.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── button.test.js.snap │ │ │ └── button.test.js │ │ ├── button.module.css │ │ ├── button.react.js │ │ ├── button.react.module.css │ │ └── index.js │ ├── callout │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── callout.examples.js │ │ ├── callout.module.css │ │ ├── callout.react.js │ │ └── index.js │ ├── checkbox │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── checkbox.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── checkbox.test.js.snap │ │ │ └── checkbox.test.js │ │ ├── checkbox.module.css │ │ ├── checkbox.react.js │ │ └── index.js │ ├── drop-menu │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── drop-menu.examples.js │ │ ├── drop-menu-item.react.js │ │ ├── drop-menu.module.css │ │ ├── drop-menu.react.js │ │ └── index.js │ ├── feature-callout-card │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── feature-callout-card.examples.js │ │ ├── feature-callout-card.module.css │ │ ├── feature-callout-card.react.js │ │ └── index.js │ ├── field-hint │ │ ├── __examples__ │ │ │ └── field-hint.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── field-hint.test.js.snap │ │ │ └── field-hint.test.js │ │ ├── field-hint.module.css │ │ ├── field-hint.react.js │ │ └── index.js │ ├── field-label │ │ ├── __examples__ │ │ │ └── field-label.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── field-label.test.js.snap │ │ │ └── field-label.test.js │ │ ├── field-label.module.css │ │ ├── field-label.react.js │ │ └── index.js │ ├── field-row │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── field-row.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── field-row.test.js.snap │ │ │ └── field-row.test.js │ │ ├── field-row.module.css │ │ ├── field-row.react.js │ │ └── index.js │ ├── field-validation │ │ ├── field-validation.module.css │ │ ├── field-validation.react.js │ │ └── index.js │ ├── field-validations │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── field-validations.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── field-validations.test.js.snap │ │ │ └── field-validations.test.js │ │ ├── field-validations.module.css │ │ ├── field-validations.react.js │ │ └── index.js │ ├── field │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── field.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── field.test.js.snap │ │ │ └── field.test.js │ │ ├── field.module.css │ │ ├── field.react.js │ │ └── index.js │ ├── fieldset │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── fieldset.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── fieldset.test.js.snap │ │ │ └── fieldset.test.js │ │ ├── fieldset.module.css │ │ ├── fieldset.react.js │ │ └── index.js │ ├── form │ │ ├── README.md │ │ ├── __tests__ │ │ │ └── form.test.js │ │ ├── form.react.js │ │ └── index.js │ ├── grid │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── grid.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── grid.test.js.snap │ │ │ └── grid.test.js │ │ ├── grid.module.css │ │ ├── grid.react.js │ │ └── index.js │ ├── h1 │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── h1.test.js.snap │ │ │ └── h1.test.js │ │ ├── h1.react.js │ │ └── index.js │ ├── h2 │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── h2.test.js.snap │ │ │ └── h2.test.js │ │ ├── h2.react.js │ │ └── index.js │ ├── h3 │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── h3.test.js.snap │ │ │ └── h3.test.js │ │ ├── h3.react.js │ │ └── index.js │ ├── h4 │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── h4.test.js.snap │ │ │ └── h4.test.js │ │ ├── h4.react.js │ │ └── index.js │ ├── heading │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── heading.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── heading.test.js.snap │ │ │ └── heading.test.js │ │ ├── heading.module.css │ │ ├── heading.react.js │ │ └── index.js │ ├── helper-text │ │ ├── README.md │ │ ├── helper-text.react.js │ │ └── index.js │ ├── icon-symbols │ │ ├── icon-symbols.react.js │ │ └── index.js │ ├── icon │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── icon.examples.js │ │ ├── __tests__ │ │ │ └── icon.test.js │ │ ├── constants.js │ │ ├── icon.module.css │ │ ├── icon.react.js │ │ └── index.js │ ├── image-input │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── image-input.examples.js │ │ ├── __tests__ │ │ │ └── image-input.test.js │ │ ├── image-input.js │ │ ├── image-input.module.css │ │ ├── image-input.react.js │ │ └── index.js │ ├── index.js │ ├── inline-alert │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── inline-alert.examples.js │ │ ├── index.js │ │ ├── inline-alert.module.css │ │ └── inline-alert.react.js │ ├── input │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── input.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── input.test.js.snap │ │ │ └── input.test.js │ │ ├── index.js │ │ ├── input.module.css │ │ ├── input.react.js │ │ └── input.react.module.css │ ├── jumbo-button │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── jumbo-button.examples.js │ │ ├── index.js │ │ ├── jumbo-button.js │ │ └── jumbo-button.module.css │ ├── layout │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── layout.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ ├── layout.test.js.snap │ │ │ │ └── utils.test.js.snap │ │ │ ├── layout.test.js │ │ │ └── utils.test.js │ │ ├── index.js │ │ ├── layout.react.js │ │ ├── layout.react.module.css │ │ └── utils.js │ ├── loading-spinner │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── loading-spinner.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── loading-spinner.test.js.snap │ │ │ └── loading-spinner.test.js │ │ ├── index.js │ │ ├── loading-spinner.module.css │ │ └── loading-spinner.react.js │ ├── lozenge │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── lozenge.examples.js │ │ ├── index.js │ │ ├── lozenge.module.css │ │ └── lozenge.react.js │ ├── modal │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── modal.examples.js │ │ ├── index.js │ │ ├── modal.module.css │ │ └── modal.react.js │ ├── paper-menu │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── paper-menu.examples.js │ │ ├── components │ │ │ ├── paper-menu-item.module.css │ │ │ └── paper-menu-item.react.js │ │ ├── index.js │ │ ├── paper-menu.module.css │ │ └── paper-menu.react.js │ ├── paper │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── paper.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── paper.test.js.snap │ │ │ └── paper.test.js │ │ ├── components │ │ │ ├── paper-toolbar.module.css │ │ │ └── paper-toolbar.react.js │ │ ├── index.js │ │ ├── paper.module.css │ │ └── paper.react.js │ ├── radio │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── radio.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── radio.test.js.snap │ │ │ └── radio.test.js │ │ ├── index.js │ │ ├── radio.module.css │ │ └── radio.react.js │ ├── seamless-button │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── seamless-button.examples.js │ │ ├── index.js │ │ ├── seamless-button.module.css │ │ └── seamless-button.react.js │ ├── select │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── select.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── select.test.js.snap │ │ │ └── select.test.js │ │ ├── index.js │ │ ├── option.react.js │ │ ├── select.module.css │ │ ├── select.react.js │ │ └── select.react.module.css │ ├── service-tag │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── service-tag.examples.js │ │ ├── __tests__ │ │ │ └── service-tag.test.js │ │ ├── index.js │ │ ├── service-tag.module.css │ │ └── service-tag.react.js │ ├── skeleton │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── skeleton.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── skeleton.test.js.snap │ │ │ └── skeleton.test.js │ │ ├── components │ │ │ ├── skeleton-avatar.react.js │ │ │ ├── skeleton-button.react.js │ │ │ ├── skeleton-card.react.js │ │ │ ├── skeleton-content.react.js │ │ │ ├── skeleton-grid.react.js │ │ │ ├── skeleton-list-item.react.js │ │ │ ├── skeleton-list.react.js │ │ │ ├── skeleton-page-header-heading.react.js │ │ │ ├── skeleton-page-header-tabs.react.js │ │ │ ├── skeleton-page-header-toolbar.react.js │ │ │ ├── skeleton-page-header.react.js │ │ │ ├── skeleton-page.react.js │ │ │ ├── skeleton-paper.react.js │ │ │ ├── skeleton-shape.react.js │ │ │ ├── skeleton-spacer-box.react.js │ │ │ └── skeleton-text.react.js │ │ ├── index.js │ │ ├── skeleton.module.css │ │ └── skeleton.react.js │ ├── star-rating │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── star-rating.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── star-rating.test.js.snap │ │ │ └── star-rating.test.js │ │ ├── index.js │ │ ├── star-rating.module.css │ │ └── star-rating.react.js │ ├── sticky │ │ ├── index.js │ │ └── sticky.react.js │ ├── table │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── table.examples.js │ │ ├── __tests__ │ │ │ ├── table-body.test.js │ │ │ ├── table-cell.test.js │ │ │ ├── table-head.test.js │ │ │ ├── table-row.test.js │ │ │ └── table.test.js │ │ ├── index.js │ │ ├── table-body.react.js │ │ ├── table-cell.react.js │ │ ├── table-head.react.js │ │ ├── table-row.react.js │ │ ├── table.module.css │ │ └── table.react.js │ ├── tabs │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── tabs.examples.js │ │ ├── __tests__ │ │ │ └── tabs.test.js │ │ ├── index.js │ │ ├── tab.react.js │ │ ├── tabs.module.css │ │ └── tabs.react.js │ ├── tag-group │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── tag-group.examples.js │ │ ├── __tests__ │ │ │ └── tag-group.test.js │ │ ├── index.js │ │ ├── tag-group.module.css │ │ └── tag-group.react.js │ ├── tag │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── tag.examples.js │ │ ├── index.js │ │ ├── tag.module.css │ │ └── tag.react.js │ ├── text │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── text.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── text.test.js.snap │ │ │ └── text.test.js │ │ ├── constants.js │ │ ├── index.js │ │ ├── text.module.css │ │ └── text.react.js │ ├── textarea │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── textarea.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── textarea.test.js.snap │ │ │ └── textarea.test.js │ │ ├── index.js │ │ ├── textarea.module.css │ │ └── textarea.react.js │ ├── toggle-button │ │ ├── README.md │ │ ├── __examples__ │ │ │ └── toggle-button.examples.js │ │ ├── __tests__ │ │ │ ├── __snapshots__ │ │ │ │ └── toggle-button.test.js.snap │ │ │ └── toggle-button.test.js │ │ ├── index.js │ │ ├── toggle-button.module.css │ │ └── toggle-button.react.js │ └── tooltip-box │ │ ├── README.md │ │ ├── __examples__ │ │ └── tooltip-box.examples.js │ │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── tooltip-box.test.js.snap │ │ └── tooltip-box.test.js │ │ ├── index.js │ │ ├── tooltip-box.module.css │ │ └── tooltip-box.react.js ├── design-tokens │ ├── README.md │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ └── tokens.test.js.snap │ │ └── tokens.test.js │ ├── kalo-ui-colors.module.css │ ├── kalo-ui-fills.module.css │ ├── kalo-ui-hover-colors.module.css │ ├── kalo-ui.sketchpalette │ ├── tokens.css │ ├── tokens.css.js │ ├── tokens.js │ ├── tokens.json │ ├── tokens.module.js │ ├── tokens.scss │ └── tokens.theme.js ├── icons │ └── svg │ │ ├── access_time.svg │ │ ├── account_balance.svg │ │ ├── account_balance_wallet.svg │ │ ├── account_box.svg │ │ ├── account_circle.svg │ │ ├── add.svg │ │ ├── add_a_photo.svg │ │ ├── archive.svg │ │ ├── arrow_drop_down.svg │ │ ├── arrow_drop_down_circle.svg │ │ ├── arrow_drop_up.svg │ │ ├── art_track.svg │ │ ├── assignment.svg │ │ ├── assignment_ind.svg │ │ ├── attach_file.svg │ │ ├── attach_money.svg │ │ ├── autorenew.svg │ │ ├── book.svg │ │ ├── border_color.svg │ │ ├── chat.svg │ │ ├── check.svg │ │ ├── check_box.svg │ │ ├── check_box_outline_blank.svg │ │ ├── check_circle.svg │ │ ├── check_circle_outline.svg │ │ ├── chevron_left.svg │ │ ├── chevron_right.svg │ │ ├── clear.svg │ │ ├── close.svg │ │ ├── comment.svg │ │ ├── content_paste.svg │ │ ├── create.svg │ │ ├── credit_card.svg │ │ ├── date_range.svg │ │ ├── delete.svg │ │ ├── domain.svg │ │ ├── done.svg │ │ ├── done_all.svg │ │ ├── dribbble.svg │ │ ├── edit.svg │ │ ├── email.svg │ │ ├── error_outline.svg │ │ ├── exit_to_app.svg │ │ ├── extension.svg │ │ ├── file_upload.svg │ │ ├── file_xls.svg │ │ ├── folder_shared.svg │ │ ├── format_color_fill.svg │ │ ├── globe.svg │ │ ├── group.svg │ │ ├── help_outline.svg │ │ ├── highlight_off.svg │ │ ├── how_to_reg.svg │ │ ├── info.svg │ │ ├── info_outline.svg │ │ ├── insert_drive_file.svg │ │ ├── instagram.svg │ │ ├── kalo_admin.svg │ │ ├── kalo_categories.svg │ │ ├── kalo_clients.svg │ │ ├── kalo_finance.svg │ │ ├── kalo_index.svg │ │ ├── kalo_messages.svg │ │ ├── kalo_premium.svg │ │ ├── kalo_projects.svg │ │ ├── kalo_reporting.svg │ │ ├── kalo_tasks.svg │ │ ├── kalo_verified.svg │ │ ├── keyboard_arrow_down.svg │ │ ├── keyboard_arrow_left.svg │ │ ├── keyboard_arrow_right.svg │ │ ├── keyboard_arrow_up.svg │ │ ├── keyboard_return.svg │ │ ├── launch.svg │ │ ├── link.svg │ │ ├── linkedin.svg │ │ ├── local_atm.svg │ │ ├── local_offer.svg │ │ ├── location_city.svg │ │ ├── location_on.svg │ │ ├── lock.svg │ │ ├── loop.svg │ │ ├── mail.svg │ │ ├── megaphone.svg │ │ ├── message.svg │ │ ├── mode_edit.svg │ │ ├── monetization_on.svg │ │ ├── more_vert.svg │ │ ├── note_add.svg │ │ ├── notifications.svg │ │ ├── open_in_new.svg │ │ ├── payment.svg │ │ ├── people.svg │ │ ├── perm_contact_calendar.svg │ │ ├── perm_identity.svg │ │ ├── person.svg │ │ ├── person_add.svg │ │ ├── person_outline.svg │ │ ├── phone.svg │ │ ├── picture_as_pdf.svg │ │ ├── playlist_add_check.svg │ │ ├── present_to_all.svg │ │ ├── question_help_message.svg │ │ ├── radio_button_checked.svg │ │ ├── receipt.svg │ │ ├── remove.svg │ │ ├── remove_circle.svg │ │ ├── remove_red_eye.svg │ │ ├── search.svg │ │ ├── security.svg │ │ ├── send.svg │ │ ├── settings.svg │ │ ├── short_text.svg │ │ ├── star.svg │ │ ├── swap_vert.svg │ │ ├── tv.svg │ │ ├── twitter.svg │ │ ├── verified_user.svg │ │ ├── view_headline.svg │ │ ├── view_module.svg │ │ ├── view_week.svg │ │ ├── warning.svg │ │ ├── website.svg │ │ └── youtube.svg ├── styles │ ├── kalo-ui-base.css │ ├── kalo-ui-transitions.css │ └── kalo-ui-typography.css └── utils │ ├── __tests__ │ ├── array.test.js │ ├── dom.test.js │ ├── enum.test.js │ └── string.test.js │ ├── array.js │ ├── dom.js │ ├── enum.js │ ├── react.js │ ├── string.js │ ├── style.js │ ├── style │ ├── prop-whitelist.js │ └── style-whitelist.js │ ├── test │ ├── global-context.js │ ├── mocks │ │ └── file-mock.js │ ├── random-string.js │ └── react.js │ └── type.js └── wallaby.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "lodash", 4 | [ 5 | "transform-runtime", 6 | { 7 | "polyfill": false, 8 | "regenerator": true 9 | } 10 | ], 11 | [ 12 | "babel-plugin-transform-builtin-extend", 13 | { 14 | "globals": ["Error"] 15 | } 16 | ], 17 | "add-react-displayname" 18 | ], 19 | "presets": ["es2015", "react", "stage-2"], 20 | "env": { 21 | "test": { 22 | "plugins": [ 23 | [ 24 | "transform-runtime", 25 | { 26 | "polyfill": false, 27 | "regenerator": true 28 | } 29 | ], 30 | [ 31 | "babel-plugin-transform-builtin-extend", 32 | { 33 | "globals": ["Error"] 34 | } 35 | ], 36 | "babel-plugin-transform-es2015-modules-commonjs" 37 | ] 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% in alt-EU 2 | > 1% in alt-NA 3 | Firefox ESR 4 | last 2 iOS major versions 5 | not dead 6 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | src/design-tokens/** 2 | src/components/icon-symbols/ 3 | config -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | coverage 4 | npm-debug* 5 | src/design-tokens/* 6 | 7 | ## 8 | # Documentation site 9 | ## 10 | 11 | site/public 12 | site/src/data/examples.js 13 | site/.cache 14 | -------------------------------------------------------------------------------- /.istanbul.yml: -------------------------------------------------------------------------------- 1 | instrumentation: 2 | extensions: ['.js', '.jsx'] 3 | excludes: [ 4 | "docs/**", 5 | "build/**", 6 | "vendor/**", 7 | "coverage/**", 8 | "flow/**", 9 | "flow-typed/**", 10 | "webpack/**", 11 | "code-templates/**", 12 | "e2e-test/**", 13 | "src/**/components/**/index.js", 14 | "serve.js", 15 | "src/**/*manifest.js", 16 | ] 17 | include-all-sources: False 18 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | v10.14.1 -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | package.json -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "trailingComma": "es5", 4 | "bracketSpacing": false, 5 | } 6 | -------------------------------------------------------------------------------- /config/design-tokens/alerts.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: color 3 | category: alerts 4 | imports: 5 | - ./color.yml 6 | props: 7 | INFO: 8 | value: '#E8FAFC' 9 | CONFIRMATION: 10 | value: '#E5F7F1' 11 | ERROR: 12 | value: '#FFEBEE' 13 | WARNING: 14 | value: '#FFF6D8' 15 | -------------------------------------------------------------------------------- /config/design-tokens/box-shadow.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: box-shadow 3 | category: layout 4 | props: &BOX_SHADOW 5 | BOX_SHADOW_LEVEL_0: 6 | value: none 7 | BOX_SHADOW_LEVEL_1: 8 | value: 0 3px 6px rgba(140, 140, 140, 0.08) 9 | BOX_SHADOW_LEVEL_2: 10 | value: 0 10px 25px rgba(140, 140, 140, 0.14) 11 | BOX_SHADOW_LEVEL_3: 12 | value: 0 12px 25px rgba(140, 140, 140, 0.21) 13 | BOX_SHADOW_LEVEL_4: 14 | value: 0 14px 25px rgba(140, 140, 140, 0.27) 15 | aliases: *BOX_SHADOW 16 | -------------------------------------------------------------------------------- /config/design-tokens/font-size.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: font-size 3 | category: typography 4 | props: 5 | FONT_SIZE_HEADING_EXTRA_LARGE: 6 | value: 2.4rem 7 | FONT_SIZE_HEADING_LARGE: 8 | value: 2rem 9 | FONT_SIZE_HEADING_MEDIUM: 10 | value: 1.6rem 11 | FONT_SIZE_HEADING_SMALL: 12 | value: 1.4rem 13 | FONT_SIZE_HEADING_EXTRA_SMALL: 14 | value: 1rem 15 | FONT_SIZE_TEXT_EXTRA_LARGE: 16 | value: 2.4rem 17 | FONT_SIZE_TEXT_LARGE: 18 | value: 1.8rem 19 | FONT_SIZE_TEXT_MEDIUM: 20 | value: 1.6rem 21 | FONT_SIZE_TEXT_SMALL: 22 | value: 1.4rem 23 | FONT_SIZE_TEXT_EXTRA_SMALL: 24 | value: 1.2rem 25 | -------------------------------------------------------------------------------- /config/design-tokens/font-weight.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: font-weight 3 | category: typography 4 | props: 5 | FONT_WEIGHT_LIGHT: 6 | value: 300 7 | FONT_WEIGHT_NORMAL: 8 | value: 400 9 | FONT_WEIGHT_MEDIUM: 10 | value: 500 11 | FONT_WEIGHT_SEMIBOLD: 12 | value: 600 13 | FONT_WEIGHT_BOLD: 14 | value: 700 15 | -------------------------------------------------------------------------------- /config/design-tokens/gradients.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: background-image 3 | category: gradients 4 | props: &GRADIENTS 5 | GRADIENT_PINK_STOP_1: 6 | type: color 7 | value: '#E83F94' 8 | GRADIENT_PINK_STOP_2: 9 | type: color 10 | value: '#F54E5E' 11 | GRADIENT_PINK: 12 | value: linear-gradient(to right, {!GRADIENT_PINK_STOP_1} 0%, {!GRADIENT_PINK_STOP_2} 100%) 13 | GRADIENT_BLUE_STOP_1: 14 | type: color 15 | value: '#2DC9EB' 16 | GRADIENT_BLUE_STOP_2: 17 | type: color 18 | value: '#14D2B8' 19 | GRADIENT_BLUE: 20 | value: linear-gradient(to right, {!GRADIENT_BLUE_STOP_1} 0%, {!GRADIENT_BLUE_STOP_2} 100%) 21 | GRADIENT_PURPLE_STOP_1: 22 | type: color 23 | value: '#E62888' 24 | GRADIENT_PURPLE_STOP_2: 25 | type: color 26 | value: '#211660' 27 | GRADIENT_PURPLE: 28 | value: linear-gradient(135deg, {!GRADIENT_PURPLE_STOP_1} 0%, {!GRADIENT_PURPLE_STOP_2} 100%) 29 | GRADIENT_BLUE_TWO_STOP_1: 30 | type: color 31 | value: '#0d7ef2' 32 | GRADIENT_BLUE_TWO_STOP_2: 33 | type: color 34 | value: '#49a1fb' 35 | GRADIENT_BLUE_TWO: 36 | value: linear-gradient(135deg, {!GRADIENT_BLUE_TWO_STOP_1} 0%, {!GRADIENT_BLUE_TWO_STOP_2} 100%) 37 | aliases: *GRADIENTS 38 | -------------------------------------------------------------------------------- /config/design-tokens/grid.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: unit 3 | category: grid 4 | props: 5 | GRID_MAX_WIDTH: 6 | value: 1200 7 | -------------------------------------------------------------------------------- /config/design-tokens/input.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: border 3 | category: input 4 | imports: 5 | - ./color.yml 6 | props: 7 | INPUT_DEFAULT_BACKGROUND: 8 | type: color 9 | value: '{!WHITE}' 10 | INPUT_DEFAULT_BORDER: 11 | value: 1px solid {!GREY200} 12 | INPUT_DEFAULT_COLOR: 13 | type: color 14 | value: '{!NAVY900}' 15 | INPUT_HOVER_BORDER: 16 | value: 1px solid {!GREY500} 17 | INPUT_ACTIVE_BORDER: 18 | value: 1px solid {!GREY600} 19 | INPUT_DISABLED_BORDER: 20 | value: 1px solid {!GREY200} 21 | INPUT_DISABLED_BACKGROUND: 22 | type: color 23 | value: '{!GREY100}' 24 | INPUT_DISABLED_COLOR: 25 | type: color 26 | value: '{!GREY400}' 27 | INPUT_READONLY_BORDER: 28 | value: 1px dashed {!GREY200} 29 | INPUT_READONLY_BACKGROUND: 30 | type: color 31 | value: '{!GREY100}' 32 | INPUT_READONLY_COLOR: 33 | type: color 34 | value: '{!GREY400}' 35 | INPUT_PLACEHOLDER_COLOR: 36 | type: 'color' 37 | value: '{!GREY500}' 38 | INPUT_BORDER_RADIUS: 39 | type: 'border-radius' 40 | value: 4px 41 | -------------------------------------------------------------------------------- /config/design-tokens/layout.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: unit 3 | category: layout 4 | props: 5 | SPACING_NONE: 6 | value: 0px 7 | SPACING_EXTRA_SMALL: 8 | value: 4px 9 | SPACING_SMALL: 10 | value: 8px 11 | SPACING_MEDIUM: 12 | value: 16px 13 | SPACING_LARGE: 14 | value: 24px 15 | SPACING_EXTRA_LARGE: 16 | value: 32px 17 | SPACING_EXTRA_EXTRA_LARGE: 18 | value: 48px 19 | -------------------------------------------------------------------------------- /config/design-tokens/table.yml: -------------------------------------------------------------------------------- 1 | global: 2 | type: 'border' 3 | category: 'table' 4 | imports: 5 | - ./color.yml 6 | props: 7 | TABLE_DEFAULT_BORDER: 8 | value: 1px solid {!GREY100} 9 | -------------------------------------------------------------------------------- /config/design-tokens/tokens.yml: -------------------------------------------------------------------------------- 1 | props: {} 2 | imports: 3 | - ./color.yml 4 | - ./gradients.yml 5 | - ./font-weight.yml 6 | - ./font-size.yml 7 | - ./box-shadow.yml 8 | - ./alerts.yml 9 | - ./grid.yml 10 | - ./layout.yml 11 | - ./table.yml 12 | - ./input.yml 13 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | const postcssPresetEnv = require('postcss-preset-env'); 2 | const cssVariables = require('./src/design-tokens/tokens.css.js'); 3 | const cssnano = require('cssnano'); 4 | 5 | module.exports = () => ({ 6 | plugins: [ 7 | postcssPresetEnv({ 8 | autoprefixer: {grid: true}, 9 | features: { 10 | 'custom-properties': {variables: cssVariables}, 11 | }, 12 | }), 13 | cssnano({ 14 | normalizeUrl: false, 15 | discardEmpty: false, 16 | core: false, 17 | minifyFontValues: false, 18 | discardUnused: false, 19 | zindex: false, 20 | }), 21 | ], 22 | }); 23 | -------------------------------------------------------------------------------- /scripts/custom-token-formats/css-helper-colors.js: -------------------------------------------------------------------------------- 1 | const camelCase = require('lodash/camelCase'); 2 | 3 | /** 4 | * A custom token format that builds CSS helper classes 5 | * for setting the color of an element 6 | * 7 | * example: .color-navy900 { color: var(--navy900)} 8 | */ 9 | 10 | module.exports = result => 11 | ` 12 | ${result 13 | .get('props') 14 | .filter(prop => prop.get('category') === 'colors') 15 | .map( 16 | prop => 17 | `.color-${camelCase(prop.get('name'))} { 18 | ${ 19 | prop.get('name') === 'CURRENT_COLOR' || 20 | prop.get('name') === 'NONE' || 21 | prop.get('name') === 'INHERIT' 22 | ? `color: ${camelCase(prop.get('name'))};` 23 | : `color: var(--${camelCase(prop.get('name'))});` 24 | } 25 | } 26 | ` 27 | ) 28 | .toJS()} 29 | `.replace(/,/g, ''); 30 | -------------------------------------------------------------------------------- /scripts/custom-token-formats/css-helper-fills.js: -------------------------------------------------------------------------------- 1 | const camelCase = require('lodash/camelCase'); 2 | 3 | /** 4 | * A custom token format that builds CSS helper classes 5 | * for setting the fill of an element 6 | * 7 | * example: .fill-navy900 { color: var(--navy900)} 8 | */ 9 | 10 | module.exports = result => 11 | ` 12 | ${result 13 | .get('props') 14 | .filter(prop => prop.get('category') === 'colors') 15 | .map( 16 | prop => 17 | `.fill-${camelCase(prop.get('name'))} { 18 | ${ 19 | prop.get('name') === 'CURRENT_COLOR' || 20 | prop.get('name') === 'NONE' || 21 | prop.get('name') === 'INHERIT' 22 | ? `fill: ${camelCase(prop.get('name'))};` 23 | : `fill: var(--${camelCase(prop.get('name'))});` 24 | } 25 | } 26 | ` 27 | ) 28 | .toJS()} 29 | /* Special gradient fills */ 30 | .fill-gradient-pink { 31 | fill: url(#gradient-pink); 32 | } 33 | .fill-gradient-purple { 34 | fill: url(#gradient-purple); 35 | } 36 | .fill-gradient-blue-two { 37 | fill: url(#gradient-blue-two); 38 | } 39 | `.replace(/,/g, ''); 40 | -------------------------------------------------------------------------------- /scripts/custom-token-formats/css-helper-hover-colors.js: -------------------------------------------------------------------------------- 1 | const camelCase = require('lodash/camelCase'); 2 | 3 | /** 4 | * A custom token format that builds CSS helper classes 5 | * for setting the color of an element on hover 6 | * 7 | * example: .color-navy900:hover { color: var(--navy900)} 8 | */ 9 | 10 | module.exports = result => 11 | ` 12 | ${result 13 | .get('props') 14 | .filter(prop => prop.get('category') === 'colors') 15 | .map( 16 | prop => 17 | `.hover-color-${camelCase(prop.get('name'))}:hover { 18 | ${ 19 | prop.get('name') === 'CURRENT_COLOR' || 20 | prop.get('name') === 'NONE' || 21 | prop.get('name') === 'INHERIT' 22 | ? `color: ${camelCase(prop.get('name'))};` 23 | : `color: var(--${camelCase(prop.get('name'))});` 24 | } 25 | } 26 | ` 27 | ) 28 | .toJS()} 29 | `.replace(/,/g, ''); 30 | -------------------------------------------------------------------------------- /scripts/custom-token-formats/custom-properties-as-an-object.js: -------------------------------------------------------------------------------- 1 | /** 2 | * A custom token format to pass in non-camelCased CSS variables 3 | * in to the post-css build step as a standard JS object. 4 | */ 5 | module.exports = ` 6 | module.exports = { 7 | {{#each props as |prop|}} 8 | '{{kebabcase prop.name}}': '{{prop.value}}', 9 | {{/each}} 10 | } 11 | `; 12 | -------------------------------------------------------------------------------- /scripts/custom-token-formats/theme.js: -------------------------------------------------------------------------------- 1 | const camelCase = require('lodash/camelCase'); 2 | 3 | /** 4 | * A custom token format for passing into a ThemeProvider 5 | */ 6 | 7 | module.exports = result => { 8 | const grouped = result.get('props').groupBy(token => token.get('category')); 9 | const collect = {}; 10 | 11 | grouped.map((category, index) => { 12 | collect[index] = {}; 13 | return category.map(token => { 14 | collect[index][camelCase(token.get('name'))] = token.get('value'); 15 | return collect; 16 | }); 17 | }); 18 | return `module.exports = ${JSON.stringify(collect)}`; 19 | }; 20 | -------------------------------------------------------------------------------- /site/README.md: -------------------------------------------------------------------------------- 1 | # @kalo/ui documentation site 2 | 3 | Welcome to the @kalo-ui documentation. The docs are built using [Gatsby](https://www.gatsbyjs.org). 4 | 5 | ## Running locally 6 | - Clone the UI repo locally. 7 | - `cd site` to change in to the site directory 8 | - `npm install` 9 | - `npm run start` 10 | - And you should be up and running at [localhost:8000](http://localhost:8000) -------------------------------------------------------------------------------- /site/src/components/action-card/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './action-card'; 2 | -------------------------------------------------------------------------------- /site/src/components/documentation-content/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './documentation-content'; 2 | -------------------------------------------------------------------------------- /site/src/components/navigation/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './navigation'; 2 | -------------------------------------------------------------------------------- /site/src/components/prop-table/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './prop-table'; 2 | -------------------------------------------------------------------------------- /site/src/components/side-nav/index.js: -------------------------------------------------------------------------------- 1 | export {default, NAV_IN_FOOTER_BREAKPOINT} from './side-nav.js'; 2 | -------------------------------------------------------------------------------- /site/src/components/toc/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './toc'; 2 | export {TocTitle} from './toc'; 3 | -------------------------------------------------------------------------------- /site/src/components/toc/toc.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'react-emotion'; 3 | 4 | const StyledToc = styled.div` 5 | position: sticky; 6 | top: 90px; 7 | 8 | ul { 9 | margin: 0; 10 | padding: 0; 11 | list-style: none; 12 | } 13 | 14 | ul:first-of-type li:first-of-type p { 15 | display: none; 16 | } 17 | 18 | a { 19 | text-decoration: none; 20 | color: ${props => props.theme.colors.navy600}; 21 | 22 | &:hover { 23 | text-decoration: underline; 24 | } 25 | } 26 | `; 27 | 28 | const StyledTocTitle = styled.span` 29 | font-size: 12px; 30 | font-weight: 600; 31 | color: ${props => props.theme.colors.navy600}; 32 | text-transform: uppercase; 33 | margin-bottom: 8px; 34 | display: block; 35 | `; 36 | 37 | export default function Toc(props) { 38 | return ( 39 | 40 | Contents 41 |
42 | 50 | 51 | ); 52 | } 53 | -------------------------------------------------------------------------------- /site/src/components/wrapper/index.js: -------------------------------------------------------------------------------- 1 | export {default} from './wrapper'; 2 | -------------------------------------------------------------------------------- /site/src/components/wrapper/wrapper.js: -------------------------------------------------------------------------------- 1 | import styled from 'react-emotion'; 2 | 3 | const horizontalPadding = '5vw'; 4 | 5 | export default styled.div` 6 | width: 100%; 7 | max-width: calc(780px + 2 * ${horizontalPadding}); 8 | padding: 0 ${horizontalPadding}; 9 | margin: 0 auto; 10 | `; 11 | -------------------------------------------------------------------------------- /site/src/data/README.md: -------------------------------------------------------------------------------- 1 | ## ⚠️ Don't edit. The contents of this directory is autogenerated -------------------------------------------------------------------------------- /site/src/html.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import favicon from 'static/favicon.png'; 4 | 5 | let stylesStr; 6 | 7 | export default function Html({headComponents, body, postBodyComponents}) { 8 | let css; 9 | if (process.env.NODE_ENV === `production`) { 10 | css = ( 11 |