CORE CSS

An implementation of Procore's Web Design Guidelines.

Requirements

Node 6+ NPM or Yarn

Background

Our styles are organized according to Inverted Triangle CSS. ITCSS organizes stylesheets by specificity. Read the article linked above for more information.

Developing

To get started, type the following from the root directory:

yarn
yarn dev

Testing

Testing currently consists of Jest snapshot testing on our React components. To run the test suite use the following command:

yarn test

Building

yarn build

Once the project is done building, the docs can be viewed at build/docs/index.html

Contributing and Styleguide

Bug reports and pull requests are welcome on GitHub at https://github.com/procore/core. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct.

In lieu of a formal styleguide, we use husky to create a precommit hook, which executes prettier on any git staged files determined by lint-staged.

License

The package is available under the Procore Developers License

About Procore

CORE Icons is maintained by Procore Technologies.

Procore - building the software that builds the world.

Learn more about the #1 most widely used construction management software at procore.com

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

10.27.4 (2022-05-16)

Note: Version bump only for package @procore/core-css

10.27.3 (2022-04-25)

Note: Version bump only for package @procore/core-css

10.27.2 (2022-04-08)

Note: Version bump only for package @procore/core-css

10.27.1 (2022-03-30)

Note: Version bump only for package @procore/core-css

10.27.0 (2022-03-28)

Note: Version bump only for package @procore/core-css

10.26.0

• Bad publish. DO NOT USE

10.23.0 (2022-02-15)

Note: Version bump only for package @procore/core-css

10.22.0 (2022-02-01)

Note: Version bump only for package @procore/core-css

10.20.0 (2021-12-16)

Note: Version bump only for package @procore/core-css

10.18.0 (2021-11-09)

Note: Version bump only for package @procore/core-css

10.17.0 (2021-10-27)

Bug Fixes

• packages/core-css/package.json to reduce vulnerabilities (#9502) (4cb4db7)

10.16.0 (2021-10-01)

Note: Version bump only for package @procore/core-css

10.14.0 (2021-08-23)

Note: Version bump only for package @procore/core-css

10.13.0 (2021-08-04)

Note: Version bump only for package @procore/core-css

10.11.0 (2021-07-01)

Note: Version bump only for package @procore/core-css

10.10.0 (2021-06-11)

Note: Version bump only for package @procore/core-css

10.8.0 (2021-05-07)

Bug Fixes

• remove ~ import in variables that breaks ts builds (#8753) (c49d895)

10.7.0 (2021-04-17)

Bug Fixes

• remove FileList component (767e72d)
• revert FileList removal (02b25d5)

Features

• inputs design audit updates (#8508) (f535027)

10.6.0 (2021-03-30)

Features

• [GLUE-2969] Table design audit updates (#8456) (348ab7d)

10.5.0 (2021-03-15)

Features

• [GLUE-2825] Refactor Input, TextArea to styled-components (#8198) (e5e724e)

10.4.0 (2021-03-10)

Bug Fixes

• fix sass errors (#8433) (6a35a7d)
• fixing warnings/errors with hsla usage (#8435) (66742f5)

10.3.0 (2021-03-02)

Note: Version bump only for package @procore/core-css

10.0.1 (2021-02-10)

Bug Fixes

• explicit flex property (#8174) (32f32bc)

10.0.0 (2021-02-09)

Bug Fixes

• aligning tokens in multiselect (#8140) (d866451)
• fix icon usage and table group header font weight (94165ee)
• fix line-height on select label (#8153) (4f0ac6a)

• V10 Form Icon Alignment and Traditional Label, Thumbnail Label ellipsis, DateSelect Height (#8160) (cd807c1)

• feat!: DetailPage width XL (#8154) (60ee6bd), closes #8154

Features

• [Glue 2557] Input Heights Scss (#7996) (5b8c621)
• Swap clickable Icon with Button (#8106) (d20324f)
• update year logic on DateInput to support 2 digit years (#8148) (fce4d1b)
• version 10 tweaks (#8138) (acddb05)

BREAKING CHANGES

• width 1440 is now xl, not lg

• Deprecations|

• chore: update spacing for detail page section header actions

affects: @procore/core-css

• chore: add deprecation notices

affects: @procore/core-react

• chore: add default export back to Notation

affects: @procore/core-react

• chore: remove unused tsconfig

affects: @procore/core-react

Co-authored-by: Christian Rivera chris.arevir@gmail.com

9.8.0 (2021-01-29)

Bug Fixes

• tooltip content wrapping (#8071) (b1d2a08)

9.7.0 (2021-01-16)

Bug Fixes

• [2870] - Fix Table Visual bugs (#8000) (001935a)
• [GLUE-2878][glue-2879] - Fix GroupSelect issues (#7995) (e78c51a)
• form in modal allow single left item (#8051) (12471e8)

9.6.0 (2020-12-18)

Bug Fixes

• [GLUE-2643] Form wrap for run-on strings (#7970) (f1827b1)
• [GLUE-2868] - Table Textarea styling (#7948) (bfc03c0)
• Form Column and Specific Story for Word Wrap (#8002) (6b5ac1d)
• WXP Detail Page allow action only layout with them on right (#8004) (45c1ccf)

Features

• [Glue 2785] Flex reverse and some layout stories (#7928) (cf00b16)
• [GLUE-2778] Form and Sections No Max Width (#7876) (4307cca)

9.5.0 (2020-12-03)

Bug Fixes

• [GLUE-2810] PillSelect disabled with value will not open (#7923) (bf47a3f)

Features

• [GLUE-2754] [GLUE-2790] handle multiple dropzone errors (#7802) (df3ab51)

9.4.0 (2020-11-23)

Bug Fixes

• update comments to trigger builds (#7809) (44c158a)

9.3.0 (2020-11-06)

Bug Fixes

• [GLUE-2719] Number Input Incrementor Buttons procore.app.css reset (#7772) (9843524)
• [GLUE-2747] - Token alignment in PillSelect (#7779) (621ecf0)
• Follow-up fixes for Pill Select component (#7749) (117c4fe)

Features

• [GLUE-2597] - Disabled state for MenuImperative.Item (#7786) (474e94b)
• [GLUE-2720] - Truncation Tooltip in Select (#7759) (1ee15a5)

9.2.2 (2020-10-29)

Bug Fixes

• update comment (#7762) (947c695)

9.2.0 (2020-10-27)

Bug Fixes

• Modal classname change (#7735) (6a1ae31)

Features

• [GLUE-2598] - introduce Menu Flyout component (#7660) (53a7760)

9.1.0 (2020-10-23)

Bug Fixes

• update icon colors on search and typeahead (#7683) (de27f65)

Features

• [GLUE-2528] detail page read and edit states updates (#7520) (76ed366)
• [GLUE-2634] - Introduce Keyboard Navigation For Thumbnail List (#7689) (aa506dd)
• add hideDropzone docs example, fix cursor styling (#7715) (2b92735)
• core-react: Fix FileSelect.GridSource issues (#7612) (6f35d7d)

9.0.0 (2020-10-09)

Bug Fixes

• [GLUE-2655] restoring legacy modal behavior for FileSelect (#7656) (56aca59)
• deps: update jest monorepo to v26 (major) (#6477) (2d07c50), closes #6460 #6459 #6458 #6461 #6449 #6462 #6450 #6457 #6434 #6464 #6463 #6402 #6470 #6469 #6467 #6466 #6465 #6483 #6482 #6479 #6481 #6474 #6472 #6476 #6473 #6480 #6486 #6485 #6484 #6487 #6471 #6468

chore

• bumping Typescript to latest version (f82e5d9)
• remove deprecated table-cells (4f9a8f8)

Features

• [GLUE-2375] Remove EmptyState props (#7460) (8d83809)

BREAKING CHANGES

• remove variant, add compact prop, add subcomponents for presets

• feat: update stories

affects: @procore/core-react

• feat: refactor emptystate, add subcomponents

affects: @procore/core-react

Rewrite EmptyState to use context for compact mode Add subcomponents for NoItems, NoResults, and RRecycleBin

• removes the one-off "src" values from EmptyState.Image in favor of subcomponents

• chore: update grid

affects: @procore/core-react

• chore: remove old props from docs

affects: @procore/core-docs, @procore/core-react

• chore: address cr

affects: @procore/core-react

• chore: fix emptystate in fileexplorer

affects: @procore/core-react

• chore: update EmptyState docs

affects: @procore/core-docs

• chore: add migration guide

affects: @procore/core-docs, @procore/core-react

• Core-scripts Type-checking Breaking Changes
• Removing deprecated table-cells components and css

8.25.0 (2020-10-01)

Bug Fixes

• update yellow-45 color (#7641) (3c9c13d)

Features

• [GLUE-2271] Pill Select (#7540) (5ac9b14)

8.24.0 (2020-09-28)

Bug Fixes

• Form Inline Error Style and Validation Tweak (#7604) (f08b3e0)

Features

• [Glue 2023] [Glue 1964] Form Inline Errors and Banner (#7501) (1e3c5ed), closes #7420
• [GLUE-2163] Currency Input (#7347) (2b3b9e7)
• [GLUE-2532] - Lazy-loading API for ThumbnailGrid (#7395) (bfcf4e6)
• [GLUE-2578] UX changes to file attacher & file select (#7579) (49a1031)
• introduce FileSelect component (#7137) (7325ab4)

Reverts

• Revert "chore: [GLUE-2595] - File Select optimization (#7552)" (#7617) (4a8e288)

8.23.0 (2020-09-10)

Bug Fixes

• [GLUE-2511] WXPDetailPage - Multiple Content Cards (#7504) (b373dcc)

Features

• [GLUE-1968] Number Input (#7190) (bba9e64), closes #7458
• [GLUE-2494] Detail Page Section (#7427) (c091483)
• [GLUE-2534] Virtualization and Groups API for ThumbnailGrid (#7400) (5572eb3)

8.22.0 (2020-08-28)

Bug Fixes

• fixes disabled text color for select placeholder text (#7451) (2fd56ec)

Features

• [glue-1972] Checkbox Radio Button Error (#7390) (cb0495a)
• [GLUE-2418] Add FileTree to the FileExplorer (#7243) (378be88)
• [GLUE-2457] Tabs using new Menu (#7291) (047c178)
• GLUE-2509 New Typography Component (#7361) (749aefb)
• toolbar for FileExplorer.Grid (#7396) (ea0e3d8)

8.21.0 (2020-08-13)

Features

• [GLUE-2455] Pagination with new Menu (#7294) (c555387)
• [GLUE-2527] New Pill component (#7384) (9733199)

8.20.0 (2020-07-31)

Bug Fixes

• [glue-2454] Banner text alignment when no title (#7325) (e6fa4bd)
• [GLUE-2525] Increase modal specificity (#7371) (ef7eaf3)

Features

• [GLUE-2492] Detail Page action buttons and v2 docs (#7352) (ac28e6d)

8.19.0 (2020-07-21)

Bug Fixes

• remove max height from toast and update guidelines text (#7323) (0822bb5)

Features

• [Glue 2284] [Glue 2286] Add RadioButtons and Checkboxes to Form (#7221) (91990ef), closes #5351

8.18.3 (2020-07-16)

Bug Fixes

• [GLUE-2124] top left portal interrupts pointer events (#7267) (d272fe6)

8.18.0 (2020-07-13)

Bug Fixes

• [GLUE-2449] use shadow for the focus style to fix siblings position (#7202) (9b2f90a)

Features

• [GLUE-1928] Introduce FileTree component (#6389) (c210f33)
• [GLUE-2294] Form Text Area Display Blank Space (#7032) (c318c9b)

8.17.0 (2020-06-26)

Bug Fixes

• [GLUE-2325] don't use default scss hsl since it has lossy hex conversion (#6965) (1b2c8f0)
• fix scss focus mixin (#5921) (c6f7957)

Features

• [Glue 2352] Form 12 Column Grid (#7012) (9497224)
• [GLUE-1770] Imperative Menu (#6992) (4104918)
• change secondary button bg from transparent to white (#5945) (51b117a)

8.16.1 (2020-06-25)

Note: Version bump only for package @procore/core-css

8.16.0 (2020-06-16)

Bug Fixes

• dark mode corrections on tabs (#6937) (17cc1e5)
• core-css: fix focus (7bd8c4c)
• core-css: fix IE11 (407c087)
• core-css: use font-size from spec (83ecdc2)
• core-react, core-css: address review comments (7ff560b)

Features

• core-css: add core focus styles to link (1236b90)
• core-react, core-css: implement FileList component (245f728)
• core-react,core-docs,core-css: introduce FileAttacher component (66ee19d)

8.15.0 (2020-06-04)

Bug Fixes

• core-css: fix white overlay being shown on a focused thumbnail (#6714) (6e08caa)
• [GLUE-2283] Form.Form Update (#6723) (d9dbfa1), closes #4164 /github.com/procore/core/projects/7#card-38243341 #4990

Features

• [GLUE-2184][glue-2192] Paragraph and Unordered List (#5431) (8a3d640)

8.14.0 (2020-05-21)

Features

• updates (7923f92)

8.13.0 (2020-05-20)

Bug Fixes

• core-react: fix ellipsis mixin (#6575) (7ca9802)
• core-react: Thumbnail caption customization fix (#6608) (941f745)
• fixes detail layout background color (#6543) (22915a7)
• style fix for banner variants (0adf83f)

Features

• [GLUE-1929] Token List component (#6222) (cc92530)
• core-react: Add "clickable" Thumbnail API to allow preventing hover UI effects (#6605) (a1507b5)

8.12.0 (2020-05-08)

Bug Fixes

• behavior correction: [GLUE-2191] Prevent final animation on re-mount and re-visible FileToken component (#6503) (41f4668)
• behavior correction: Prevent final animation of ProgressBar component on mounting (#6475) (f48a1c5)
• Thumbnail issues (#6425) (caf705d)
• behavior correction: Preventing of extra animation after ProgressBar component re-rendering (#6379) (9779311)
• deps: update dependency style-loader to v1.2.1 (#6437) (21e2707)

Features

• [GLUE-2102] hsl color palette (#6402) (9d90486)
• [GLUE-2219] update secondary button colors and a few other colors (#6510) (d13b5bc), closes #6505

8.11.0 (2020-04-27)

Bug Fixes

• deps: update dependency css-loader to v3.5.3 (#6405) (2fa2124)
• deps: update dependency style-loader to v1.1.4 (#6346) (6c39c35)
• deps: update dependency style-loader to v1.2.0 (#6406) (952987e)
• [GLUE-2108] increase zindex of spinner components by 1 (#6314) (dbb76a5), closes #5725
• [GLUE-2136][glue-1963] Form Style Updates and More Docs (#6292) (be0a75c)

Features

• [GLUE-1925] Introduce Dropzone component (#5796) (fac3516), closes #5920 #5922 #5919 #5918 #5917 #5916 #5904 #5926 #5931 #5928 #5933 #5932 #5925 #5924 #5921 #5940 #5935 #5941 #5936 #5939 #5938 #5934 #5937 #5927 #5929 #5942 #5943 #5947 #5945
• [GLUE-1946] - Introduce FileToken component (#6100) (bfb94af)
• [Glue-1975][glue-1967] Form Tooltip, Tiered Select, Group Select (#6341) (4083672)
• component variables 4 modals (#6332) (fee063a)

8.10.0 (2020-04-10)

Bug Fixes

• deps: update dependency css-loader to v3.5.2 (#6307) (30a1fe6)
• no longer using line height (#6261) (3db9016)
• deps: update dependency css-loader to v3.5.0 (#6253) (597f0be)
• deps: update dependency css-loader to v3.5.1 (#6268) (4fe2ed0)

Features

• [GLUE-2024] Core React Form (#6055) (f4e353d)
• [GLUE-2095] Update means of user interaction for ActionDropdown (#6158) (1bec1dd)
• core-react,core-docs,core-css: introduce Thumbnail components (#5807) (#6232) (7a5227f)
• [GLUE-2019] - Banner Component Update (#6080) (56b520d)
• component variables 3 table files spinner (#6207) (c9ae385)

8.9.0 (2020-03-26)

Bug Fixes

• action css not being exported properly from core-css (#6036) (7870da7)

Features

• [GLUE-1927] ProgressBar component implementation (#5886) (e595fd5)
• [GLUE-2048] - Action Dropdown Component (#6077) (2ad83b5)
• color updates for 2020 with percy regression (#5898) (6159eb5)
• Component Variables 2: Form inputs, validation, and more typography (#6071) (ceefa0c)

8.8.0 (2020-03-05)

Features

• [GLUE-1911] introduce GroupSelect component (#5633) (cf6d7aa)
• [GLUE-1986] introduce Action component (#5864) (42cd52c)
• Component Variables 1: Button, Dropdowns, Tab Links (#5946) (025a454)

8.7.0 (2020-02-28)

Bug Fixes

• fix scss focus mixin (#5921) (a66236a)

Features

• [GLUE-1831] Contact Item component (#5631) (1f23d68)
• change secondary button bg from transparent to white (#5945) (08776b4)

8.6.0 (2020-02-18)

Bug Fixes

• deps: update dependency stylelint to v13.1.0 (#5806) (83c9093)
• deps: update dependency stylelint to v13.2.0 (#5842) (9ee4383)

Features

• WXP Detail Page Layout (#5814) (aa594ff)

8.4.0 (2020-02-06)

Bug Fixes

• deps: update babel monorepo to v7.8.4 (#5694) (867e879)

Features

• [GLUE-1940] Table Font Size (#5668) (5cecb69)

8.3.0 (2020-01-27)

Bug Fixes

• deps: update dependency css-loader to v3.4.2 (#5528) (1ba5892)
• deps: update dependency sass-loader to v8.0.1 (#5527) (a703bd3)
• deps: update dependency sass-loader to v8.0.2 (#5543) (34b6c59)
• deps: update dependency style-loader to v1.1.3 (#5604) (3d9790b)

8.2.0 (2020-01-09)

Bug Fixes

• deps: update dependency css-loader to v3.4.1 (#5488) (0e7153c)
• deps: update dependency style-loader to v1.1.2 (#5472) (0573ac5)
• deps: update dependency webpack to v4.41.5 (#5479) (013c399)
• [GLUE-1801] Checkbox No Paragraph Tag (#5351) (040b476)
• deps: update dependency css-loader to v3.4.0 (#5332) (06c7380)
• deps: update dependency mini-css-extract-plugin to v0.8.1 (#5426) (8908aad)
• deps: update dependency mini-css-extract-plugin to v0.8.2 (#5427) (2cfcdbe)
• deps: update dependency mini-css-extract-plugin to v0.9.0 (#5454) (c57dc82)
• deps: update dependency style-loader to v1.0.2 (#5424) (181e1a6)
• deps: update dependency style-loader to v1.1.1 (#5453) (d4c0c06)
• deps: update dependency stylegator to v0.20.1 (#5352) (be28d5e)
• deps: update dependency webpack to v4.41.3 (#5412) (d7e92d9)
• deps: update dependency webpack to v4.41.4 (#5444) (20572b0)

Features

• [GLUE-1522] Docs v2 gatsby mdx (#5252) (6ad044a)

Reverts

• reverts the work done on modal to allow it to scroll again (#5355) (90bb9fd)

8.1.0 (2019-12-03)

Bug Fixes

• deps: update dependency style-loader to v1.0.1 (#5328) (cbe66a8)

Features

• [GLUE-818] Inline Editable Datepicker Cell (#4992) (1f85521)

8.0.1 (2019-11-18)

Note: Version bump only for package @procore/core-css

8.0.0 (2019-11-15)

Bug Fixes

• add border radius (#5223) (b303553), closes #5167
• deps: update babel monorepo to v7.7.2 (#5180) (dba58dc)
• fixing anchor tags inside of Tabs.Link (#5153) (a9acecb)
• icons are not focusable (#5090) (78d6422), closes #4896 #4902
• removing the core- prefix that is no longer used (#5093) (e864ea7)
• stop svg click events from causing clickOutside problems (#5101) (3c46362)
• use svg icons for modal, toast, and pagination (02ab7f8)

Features

• [GLUE-1531] using i18n-js with phrase for default translations in core (#5119) (6840a62)
• add a variables-overrides file (#5081) (6f3e522)
• Cleanup of tabs (#5161) (cf975a7)
• Dynamic contents and dark mode for Tabs (#5102) (451f3c1)
• Icon renders SVG paths (#5003) (fb3b90c)
• use an inline base64 image for the checkmark (#5237) (117d307)

7.21.3 (2019-11-11)

Bug Fixes

• use vh instead of px for overlay max-height (#5168) (c3764f8)

7.21.1 (2019-10-17)

Note: Version bump only for package @procore/core-css

7.21.0 (2019-10-16)

Bug Fixes

• deps: update dependency webpack to v4.41.1 (#5024) (79dff2a)
• deps: update dependency webpack to v4.41.2 (#5044) (b63fa86)

Features

• [GLUE-1747] tiered select component (#4903) (13b330c)
• disable body scroll when modal is open (#4976) (590a391), closes #4896 #4896 #4896
• swap table icons to Icon component (#5056) (5886ee2)

7.20.0 (2019-10-03)

Bug Fixes

• [GLUE-1543] Explicit button lineheight (#4805) (4e0f019)
• inherit font-family to fix MultiSelect search alignment (#4948) (c57cdb4)
• remove padding override on select/input/textarea cells (#4923) (05624b2)
• deps: update dependency webpack to v4.41.0 (#4890) (e727ab3)